HTML 5 Introduction

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

Task Navigation 

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


  • Justfinethanku   March 1, 2012, 9:40 p.m.

      Click Here for Lists and Links Homework Assignment 

    I am working at this, let me know if it looks right to you!

  • anila   March 2, 2012, 1:37 a.m.
    In Reply To:   Justfinethanku   March 1, 2012, 9:40 p.m.

    Nice one !!! Now you must try nested lists. Use this code

    <h2>My Hobbies</h2>

    <ol type='A'>

    <li>Sports

           <ul type="square">

                 <li>Tennis

                 <li>Football

                 <li>Cricket

         </ul>

    <li> Music

    <ul>


                 <li>Rock

                 <li>Classical

                 <li>Country Music

         </ul>

    <li> Books

    <ul>


                 <li>Fiction

                 <li>Thrillers

                 <li>Comics

         </ul>

    </ol>

    You can nest more ..as you like

  • anila   March 3, 2012, 1:20 a.m.
    In Reply To:   joe palmer   March 2, 2012, 5:50 a.m.

    Thanks Joe !  I have edited and tested the  code after  making changes . the url is

    http://pad.p2pu.org/p/htmllists

  • joe palmer   March 3, 2012, 11:11 a.m.
    In Reply To:   anila   March 3, 2012, 1:20 a.m.

    Very good! I ran it in jsfiddle, I had to uncheck the "normalized css" box to see it runwith color, but I don't know why.  Can I see it run on the pad you used? I don't know how to run on that. There is a new short course for jsfiddle here that has a badge I think, go for it you can do it in 10 minutes! I click on the chain globe (bottom left above, blue/gray) to paste in a link, thanks!


    http://p2pu.org/en/groups/first-challenge-3/


    http://jsfiddle.net/hZa5U/1/

  • Anonym   May 6, 2012, 10:38 a.m.
    In Reply To:   anila   March 2, 2012, 1:37 a.m.

    Where is the closing tag </li> ?

     

    I have seen countless tutorials out there that are available to teach new developers how to code HTML and they almost always leave their tags open such as image tags or break tags. This not only affects the new generation of developers, but it is a terrible practice. Browsers will always attempt to close them for you causing errors and unwanted results, so save yourself from bad practices, and make closing the HTML tags a habit as you do with closing your doors when you leave your home.

  • Greg   Feb. 26, 2012, 2:29 p.m.

    Here is my list assignment - http://gregjoss.com/assignment_2.html

  • Carlos   Feb. 11, 2012, 4:33 a.m.

    Este es el mío., Lists and links

    http://htmlpad.org/Beticos/

    Carlos Fernandez

    Triana

  • Carlos   Feb. 11, 2012, 4:32 a.m.

    Este es el mío., Lists and links

    http://htmlpad.org/Beticos/

    Carlos Fernandez

    Triana

  • Julio Garcia   Feb. 9, 2012, 8:06 a.m.

    I just finished the task #3, Lists and Links. See here!

  • J R Bennett   Feb. 6, 2012, 8:47 p.m.

    My latest and greatest........

    JRB

  • joe palmer   Feb. 6, 2012, 9:24 p.m.
    In Reply To:   J R Bennett   Feb. 6, 2012, 8:47 p.m.

    enlightened

  • Jack   Feb. 6, 2012, 3:46 p.m.

    You can find my work using lists and links at http://htmlpad.org/pannekeet/. It is in Dutch so let me know if you need translation!

  • joe palmer   Feb. 6, 2012, 9:24 p.m.
    In Reply To:   Jack   Feb. 6, 2012, 3:46 p.m.

    smiley

  • Dante2   Feb. 4, 2012, 2:23 a.m.

    And here we go.

     

    http://dante2.info/tests/tests/homework-1.html

  • Devinciweb   Feb. 1, 2012, 5:34 p.m.

    I'm re-posting my Lists and Links assignment in a different spot so that you can pull up the sourcecode. Hope this works!

     

    http://htmlpad.org/ListsandLinks/

  • joe palmer   Feb. 1, 2012, 7:18 p.m.
    In Reply To:   Devinciweb   Feb. 1, 2012, 5:34 p.m.

    Excellant! Look at other peoples work also after you do yours.

  • Devinciweb   Feb. 2, 2012, 11:02 a.m.
    In Reply To:   joe palmer   Feb. 1, 2012, 7:18 p.m.

    thanks just noticed i forgot the external link though. duh!!! :)

  • Kronosaurus   Feb. 1, 2012, 2:52 p.m.

    Here is the results of my first assignment

    http://htmlpad.org/firsthtml/

  • joe palmer   Feb. 1, 2012, 3:05 p.m.
    In Reply To:   Kronosaurus   Feb. 1, 2012, 2:52 p.m.

    Looks good!

  • Kronosaurus   Feb. 1, 2012, 3:16 p.m.
    In Reply To:   joe palmer   Feb. 1, 2012, 3:05 p.m.

    I think I have it better. I didn't do the hgroup tags like in Dan's but I got the !DOCTYPE and other things. Thanks!

  • Devinciweb   Feb. 1, 2012, 2:15 p.m.

    Hi there,

    Here is Task 1: Lists and Links

    Go to:

    http://wp.me/p2aXBc-13

     

    Thanks!

  • Ken Doman   Jan. 19, 2012, 12:25 a.m.

    Here's my assignment for the lists and links assignment

    http://raykendo.com/P2PU/HTML5/lists-and-links.html

  • Vita   Jan. 19, 2012, 5:54 a.m.
    In Reply To:   Ken Doman   Jan. 19, 2012, 12:25 a.m.

    Well done, Ken! smiley

  • Jay   Jan. 19, 2012, 7:51 p.m.
    In Reply To:   Ken Doman   Jan. 19, 2012, 12:25 a.m.

    Nice one Ken.

  • Jay   Jan. 15, 2012, 6:42 p.m.

    You can find my work at

    http://www.jayokey.net/html5/lists-and-links.html

  • Ken Doman   Jan. 19, 2012, 11:44 a.m.
    In Reply To:   Jay   Jan. 15, 2012, 6:42 p.m.

    Great job!

  • AndyBKK   Jan. 14, 2012, 1:25 a.m.

    Here is my lists and hyperlink assignment 

    Ordered and Unordered lists 

  • Moraino   Jan. 12, 2012, 7:04 a.m.

    Here is my brand new assignment: http://htmlpad.org/Lists-and-links/

  • Moraino   Jan. 11, 2012, 10:23 a.m.

     

    Please, could anyone tell me where is the assignment for this task? Thanks.

  • joe palmer   Jan. 11, 2012, 10:52 a.m.
    In Reply To:   Moraino   Jan. 11, 2012, 10:23 a.m.

    You will make two grocery lists. The assignments are in the reading, if you use the links to the side, they get moved around and may not be in order. May be better to hit the HTML5 logo on the left top, than the tasks appear in a numbered order at the top of the page. This is task 5.

  • Amosg   Jan. 5, 2012, 4:11 a.m.

    I put the assignment on htmlpad: http://htmlpad.org/ordered-unorded-list/

  • Anonym   Jan. 7, 2012, 11:49 p.m.
    In Reply To:   Amosg   Jan. 5, 2012, 4:11 a.m.

    You mis-used the <header> tag in your example.  When there is only one <h> tag within the <header> tag, the <header> tag is not necessary.  The <header> tag is not meant to be used in that way.

    Also, whenever you use more than one <h> tag one after another, as you have done with <h2>  and <h3>, you need to wrap them in the <hgroup> tag.  This is to mask the <h3> element from the HTML5 outline algorithm.

    Both <header> and <hgroup> are new features of HTML5.

  • skullkandy09   Dec. 19, 2011, 7:59 a.m.

    bit late, but here it is anyway!

    http://dl.dropbox.com/u/25152284/Shopping%20List.html

  • Nathan Day   Dec. 31, 2011, 10:14 a.m.
    In Reply To:   skullkandy09   Dec. 19, 2011, 7:59 a.m.

    didnt work for me in chrome

  • Anonym   Dec. 31, 2011, 1:18 p.m.
    In Reply To:   skullkandy09   Dec. 19, 2011, 7:59 a.m.

    Broken link

  • Vita   Jan. 2, 2012, 9 a.m.
    In Reply To:   skullkandy09   Dec. 19, 2011, 7:59 a.m.

    frown