This course will become read-only in the near future. Tell us at community.p2pu.org if that is a problem.

Lists and Links


Learning Objectives

  • Arrange several items in an unordered list
  • Arrange several items in an ordered list
  • Distinguish ordered and unordered lists
  • Describe similarities between ordered and unordered lists
  • Create a hyperlink to a section within your document
  • Link your document to external content
  • Summarize the purpose of hyperlinks (anchor tags)
  • Create a diagram depicting two hyperlinked documents
  • Share your diagram with this study group

Task Materials

Lists

Lets take a look at ways to itemize lists, link to other documents, and insert multimedia into our pages.

Lists come in two flavors ordered and unordered. Ordered lists flow in sequence while unordered lists have no required, or meaningful, order. For example, a shopping list may be considered as an unordered list as you are not concerened with the order in which you find the items in the store.

The <ol> tag is used to create ordered lists, while the <ul> tag denotes unordered lists.

Lets create two lists one will be a grocery list and the other wil be instructions describing how to check out at the market.

Unordered List

First the grocery list. Creating an unordered list has three steps:

  1. Open the unordered list: <ul>
  2. List items are surrounded by <li> tags
  3. Close the unordered list: </ul>

Lets see an unordered list in its entirety:

<ul>
  <li>Asparigus</li>
  <li>Milk</li>
  <li>Tempeh</li>
</ul>

Ordered List

Secondly, we will list the checkout steps.

  1. Open the ordered list: <ol>
  2. Insert the steps as list items: <li>Item</li>
  3. Close the ordered list tag: </ol>
<ol>
  <li>Unload your shopping basket</li>
  <li>Greet the cashier</li>
  <li>Smile at the cute baby next to you in line</li>
  <li>Pay the cashier</li>
  <li>Gather your groceries and leave</li>
</ol>

Hyperlinks

Hyperlinks are interconnections between pages and resources on the World Wide Web. Creating hyperlinks requires another aspect of HTML tags called attributes. Attributes are descriptive text elements within the HTML tag enclosures (the < & >). Attributes are associated with values. For example:

<tag attribute="value">

The anchor tag <a> is how we create links both within a document and to external resources. An anchor tag has an attribute called 'href' which stands for hypertext reference. The hypertext reference is the internal or external element to which the link points. For example:

<a href="http://mozilla.org">Mozilla Website</a>

This link points to mozilla.org with the helpful link text "Mozilla Website".

Task Discussion


  • Anonym   Nov. 26, 2011, 8:33 p.m.

    Here's my work on Lists & Links.  I made it to keep track of my own work.

    http://dl.dropbox.com/u/49688808/list1.html

    I just needed to change the file name.

  • joe palmer   Nov. 27, 2011, 11:53 a.m.
    In Reply To:   Anonym   Nov. 26, 2011, 8:33 p.m.

    I like the idea so much I want to try it later in the week (have two Univercity exams and a long paper early this week no time now) using semantic html / css and see if I can do something like that too, great idea.  I shall pretend to think of the semantic html as Michelangelo did marble - Every block of stone has a statue inside it and it is the task of the sculptor to discover it.  I hope you don't mind me commenting on it like that, thanks!

  • Anonym   Nov. 27, 2011, 5:02 p.m.
    In Reply To:   joe palmer   Nov. 27, 2011, 11:53 a.m.

    No, I don't  mind it at all.  Actually, I quite like your Michelangelo analogy because that's how I feel about html/css.  The more Web pages I create, the more I realize that html and css are different sides of the same coin.

    By the way, I was reading the w3's website recently and found out that "utf=8" />  is the pre html5 syntax, and that you don't need '/' for html5.

    Wish you a great exam season!

  • Vita   Nov. 28, 2011, 4:05 a.m.
    In Reply To:   Anonym   Nov. 26, 2011, 8:33 p.m.

    Nice Demian, I like the idea and like the sprinkle of rounded corners... :)

  • Anonym   Nov. 28, 2011, 5:58 p.m.
    In Reply To:   Vita   Nov. 28, 2011, 4:05 a.m.

    Thanks much smiley

  • alcinoe   Nov. 28, 2011, 9:48 p.m.
    In Reply To:   Anonym   Nov. 26, 2011, 8:33 p.m.

    Really nice, Demian. It is actually useful for all of us to remember the various tips that we have learned here!

  • Anonym   Nov. 29, 2011, 12:38 a.m.
    In Reply To:   alcinoe   Nov. 28, 2011, 9:48 p.m.

    Thank you.  About the order of the lessons, I get confused also.  I wish they just stay fixed.

  • Vita   Nov. 23, 2011, 11:45 a.m.

    Heres my creation - like "To do" list :

    http://dl.dropbox.com/u/18761433/HTML5Course/lists.html

  • alcinoe   Nov. 25, 2011, 12:22 a.m.
    In Reply To:   Vita   Nov. 23, 2011, 11:45 a.m.

    I like you incorporated multimedia into your list, Vita!

  • Vita   Nov. 25, 2011, 6:06 a.m.
    In Reply To:   alcinoe   Nov. 25, 2011, 12:22 a.m.

    Thnx Elizabeth,

    I am not sure though if I made it the right way... I mean the code editor keeps showing me that this is not right, but I am just ignoring it for now, coz the result is what i intended...

    Glad you like it. smiley

  • joe palmer   Nov. 27, 2011, 12:05 p.m.
    In Reply To:   Vita   Nov. 23, 2011, 11:45 a.m.

    That is nice Vita, I did the free trial at Plurasight.

  • Vita   Nov. 28, 2011, 4 a.m.
    In Reply To:   joe palmer   Nov. 27, 2011, 12:05 p.m.

    Thanks Joe, I did the trial too, found the HTML tutorials quite useful actualy. :)

  • jenEliz   Oct. 16, 2011, 11:28 p.m.

    Added a bit more to the Witch Website!  Lists & links!

  • Stavros   Oct. 17, 2011, 2:25 a.m.
    In Reply To:   jenEliz   Oct. 16, 2011, 11:28 p.m.

    Nice one Jen! Good work!

  • jenEliz   Oct. 17, 2011, 11:07 p.m.
    In Reply To:   Stavros   Oct. 17, 2011, 2:25 a.m.

    Thx!  :)

  • Stavros   Oct. 15, 2011, 8:14 a.m.

    This is my "Lists and links" version. I used the new tags q (quotation) small (smaller fonts) big (biger fonts) cite (citation) b (bold). I added special characters trademark copyright.

    I added a link to download a text file which contains the html code.

    Here is the result:

    http://dl.dropbox.com/u/4230190/courses/listsandlinks.txt

  • Luca Serpietri   Sept. 21, 2011, 11:12 a.m.

    lists&links everyone...

  • Dar   Sept. 1, 2011, 1:31 p.m.

    and now, the continuation of a page I should have names html5, but instead it's still named Basic Markup because I didn't think ahead.

    http://etherpad.mozilla.org:9000/basicmarkup

  • Michael Sturgeon   Aug. 14, 2011, 3:33 p.m.

    Here are my two list types, with footer, H1, H2, and link

    htmlpad.org/sturgeonlists

  • Steve   Aug. 12, 2011, 10:35 p.m.

    Here is my code for lists.

    http://pastebin.com/u/shemric

  • Randi Miller   June 20, 2011, 1:11 a.m.
  • yasna   June 18, 2011, 4:04 a.m.
  • Anonym   June 14, 2011, 10:32 p.m.

    http://htmlpad.org/SBrown/  my modified site

  • aaron wheeler   June 7, 2011, 10:48 p.m.

    My lists and links page is found here.

  • Vita   Jan. 22, 2012, 6:01 a.m.
    In Reply To:   aaron wheeler   June 7, 2011, 10:48 p.m.

    Nice work!

  • Sedmikrasky   June 7, 2011, 5:17 p.m.
  • Taylor Smock   June 6, 2011, 5:18 p.m.

    Like some others, I have modified a previous page used for this course for this.

    Here it is (my next stop is the img, video, and audio tags, so those will be added):

    http://htmlpad.org/HTML5IntroductionBasicMarkup/

  • Sedmikrasky   June 7, 2011, 1:59 p.m.
    In Reply To:   Taylor Smock   June 6, 2011, 5:18 p.m.

    You can find some OGG/OGV examples at Archive and Wikimedia

  • Taylor Smock   June 7, 2011, 4:50 p.m.
    In Reply To:   Sedmikrasky   June 7, 2011, 1:59 p.m.

    Thank you.

    I just added a random audio sample (obtained from http://www.archive.org) to my excersize page.

  • Josh   June 6, 2011, 12:01 p.m.

    Here's mine, evolved from the first set of lessons.

    http://htmlpad.org/jgt

  • Albert Rosa   June 6, 2011, 11:24 a.m.
  • Tim D   June 5, 2011, 7:41 p.m.

    Finished work is here: http://htmlpad.org/tdingman/

  • Anonym   June 5, 2011, 6:41 p.m.

    I am a bit of a history buff and got slightly carried away but here is a good example of order and ordered list mixed together.

  • joe palmer   Sept. 2, 2011, 9:49 p.m.
    In Reply To:   Anonym   June 5, 2011, 6:41 p.m.

    Nice work! Sorry it took so long to get discovered, better late that never hey?