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".

Discusión de la Tarea


en 11 de septiembre de 2012 a las 23:25
  • seefoosam dijo:

    Hi,

    Task #3

    en 26 de agosto de 2012 a las 14:33
  • shuniata dijo:

    en 23 de agosto de 2012 a las 08:31
  • manypieces dijo:

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

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

    en 19 de agosto de 2012 a las 01:57

    al read dijo:

    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
    en 19 de agosto de 2012 a las 01:59 en Respuesta a manypieces
  • Danedeer dijo:

    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

    en 17 de agosto de 2012 a las 05:43

    al read dijo:

    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
    en 17 de agosto de 2012 a las 05:46 en Respuesta a Danedeer

    saravanan dijo:

    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.

    en 18 de agosto de 2012 a las 01:31 en Respuesta a Danedeer

    al read dijo:

    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
    en 18 de agosto de 2012 a las 01:33 en Respuesta a saravanan