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


  • aussiend98   Jan. 24, 2013, 7:16 p.m.

    my example:

    https://etherpad.mozilla.org/TestPage

  • Gerardo Muñoz Asca   Jan. 20, 2013, 8:56 p.m.

    My example:

    https://thimble.webmaker.org/p/fkwg

    Traducción al español:

    http://p2p4-html5yuichi.blogspot.com/2013/01/listas-y-enlaces.html

  • Aranike   Jan. 15, 2013, 11:47 a.m.

    Ready with lists and links.

    See: https://thimble.webmaker.org/p/fk4g

  • Juan Pablo Zafra   Jan. 15, 2013, 8:05 a.m.

    List and links completed

    https://etherpad.mozilla.org/thwg7ZTXT4

  • EcologicalHumanist   Dec. 7, 2012, 7:03 p.m.

    I think this has everything: https://thimble.webmaker.org/p/fjrg

  • ameera0303   Oct. 22, 2012, 2:09 p.m.

    Check out my list here: http://htmlpad.org/lists/

  • Courtney Elizabeth   Oct. 21, 2012, 3:51 p.m.

    Completed task here: https://etherpad.mozilla.org/Lists

  • lesabre721   Oct. 16, 2012, 4:42 p.m.

    My unordered list, ordered list and hyperlink can be found here: http://htmlpad.org/listsAndLinks/

  • Joris Pekel   Oct. 10, 2012, 4:37 a.m.

    All can be found here

  • RachelRaccuia   Oct. 3, 2012, 11:19 p.m.

    This section is added at the bottom of my previous code!

     

    <!DOCTYPE html>
    <html>
    <meta charset="utf-8">
    <head>
    <title>This is What Happens on the Tab</title>
    </head>
    <body>
    <h1>This is a header </h1> This is just normal text. But if I want to make a paragraph I would do this: <p>And now this is indented.</p>
    <h3> This is a small header </h3>
    <p>Creativity was never my strong suit.</p>
      <h2><p> And now I'm going to make a list of things I like:</p></h2>
      <ul>
        <li> Traveling. </li>
        <li> Kickboxing. </li>
        <li> The Celtics. </li>
      </ul>
      <h2><p> Here is a list of things I need to do, in this particular order:</p></h2>
      <ol>
        <li> FIND A NEW JOB. </li>
        <li> FIND A NEW JOB. </li>
        <li> FIND A NEW JOB. </li>
      </ol>
      <p> In the meantime, I'll continue to fruitlessly search Indeed.com for relevant positions.  You can access this website using this hyperlink here: <a href="http://www.indeed.com"> Good luck. </a> </p> 
      </body>
    </html>
  • marcmars   Oct. 2, 2012, 1:12 a.m.

    My first web page at :  http://htmlpad.org/myfirstwebpage/

  • Sreeram Boyapati   Sept. 23, 2012, 11:40 a.m.

    http://htmlpad.org/traveller/

  • Garrison Snelling   Sept. 19, 2012, 10:42 a.m.

     

    <ol>
        <li>Roll Tide</li>
        <li>War Eagle</li>
        <li>Go Dogs</li>
    </ol>
    <ul>
        <li>Apples</li>
        <li>Bacon</li>
        <li>KRISPY KREME</li>
    </ul>
  • mkII_gti_vr6T   Sept. 11, 2012, 11:25 p.m.
    Ordered and unorded list
  • blah
  • blah
    1. blah
    2. blah
  • seefoosam   Aug. 26, 2012, 2:33 p.m.

    Hi,

    Task #3

  • shuniata   Aug. 23, 2012, 8:31 a.m.

    Here is mine: http://htmlpad.org/WC-ListsandLinks/

  • manypieces   Aug. 19, 2012, 1:57 a.m.

    Apparently jsfiddle doesn't let me show lists the right way so it's on thimble

    https://thimble.webmaker.org/p/opp

  • al read   Aug. 19, 2012, 1:59 a.m.
    In Reply To:   manypieces   Aug. 19, 2012, 1:57 a.m.
    Thanks for your message. I will be out of the office on annual leave until Monday 20th August If your enquiry is urgent, please SMS me on my mobile. Kind regards, Alan Read Head of Learning Technologies Learning Technologies Group Pearson UK +44 (0) 7703 750913 This email was sent by a company owned by Pearson plc, registered office at 80 Strand, London WC2R 0RL. Registered in England and Wales with company number 53723
  • Danedeer   Aug. 17, 2012, 5:43 a.m.

    https://thimble.webmaker.org/p/o0g

    Thimble didn't like it when I nested an ordered list within an ordered list but there aren't any exclamation marks left now so it must be OK? Is it?

    Cheers folks. It's great to have so many folk learning together

  • al read   Aug. 17, 2012, 5:46 a.m.
    In Reply To:   Danedeer   Aug. 17, 2012, 5:43 a.m.
    Thanks for your message. I will be out of the office on annual leave until Monday 20th August If your enquiry is urgent, please SMS me on my mobile. Kind regards, Alan Read Head of Learning Technologies Learning Technologies Group Pearson UK +44 (0) 7703 750913 This email was sent by a company owned by Pearson plc, registered office at 80 Strand, London WC2R 0RL. Registered in England and Wales with company number 53723
  • saravanan   Aug. 18, 2012, 1:31 a.m.
    In Reply To:   Danedeer   Aug. 17, 2012, 5:43 a.m.

    Thimble shows exclamation if you open any tag if you dont close it immediately. It is error correction. It is ok----you opened two <ol> tags and you closed it at the right line.

  • al read   Aug. 18, 2012, 1:33 a.m.
    In Reply To:   saravanan   Aug. 18, 2012, 1:31 a.m.
    Thanks for your message. I will be out of the office on annual leave until Monday 20th August If your enquiry is urgent, please SMS me on my mobile. Kind regards, Alan Read Head of Learning Technologies Learning Technologies Group Pearson UK +44 (0) 7703 750913 This email was sent by a company owned by Pearson plc, registered office at 80 Strand, London WC2R 0RL. Registered in England and Wales with company number 53723