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


  • Hibby73   May 10, 2012, 2:58 p.m.

    Here is my homework for this assignment

  • Al   May 10, 2012, 2:03 a.m.

    Keeping things interesting: Bacon Salad!

    http://htmlpad.org/BaconSalad/

  • JoshM   May 9, 2012, 8:11 p.m.

    There we go!

    http://htmlpad.org/htmllinksandetc/

  • Miester   May 9, 2012, 5:19 a.m.

    here we go http://pastebin.com/p2EDDAiC

  • Aaron Hanson   May 8, 2012, 11:53 p.m.

    Here is my "lists assignment!"

  • levis   May 7, 2012, 10:24 a.m.

    Here is my Links and Lists assignment.

  • WolfGirl   May 6, 2012, 3 p.m.

    Here is my LInks and Lists assignment.

  • Siulka   May 6, 2012, 1:34 p.m.

    Here is my lists & links assignment website

  • Nick   May 6, 2012, 6:33 a.m.

    Here is my list assignment.

  • Bunny   May 4, 2012, 3:38 p.m.

    Here's my assignment. I tested, and it works!

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=UTF-8" />
    </head>
    <body>
    <h1>Eleven Principles of Effective Character Education</h1>
    <p>
    <ul>
    <li>Principle 1 - Promotes core values</li>
    <li>Principle 2 - Defines "character" to include thinking, feeling, and doing.</li>
    <li>Principle 3 - Uses a comprehensive approach.</li>
    <li>Principle 4 - Creates a caring community.</li>
    <li>Principle 5 - Provides students with opportunities for moral action.</li>
    </ul>
    <a href="http://www.character.org/more-resources/publications/11-principles/" >Read more</a> >>
    </p>
    </body>
    </html>

  • Jean-Baptiste Carré   April 29, 2012, 6:23 p.m.

    Done!

  • jacobbundren   April 28, 2012, 3:31 p.m.

    Here is my Links and Lists assignment.

  • Bunny   April 23, 2012, 3:40 p.m.

    I am using Blue Fish as my html editor. How can I view my work in a browser?

  • Pau Company   April 23, 2012, 4:53 p.m.
    In Reply To:   Bunny   April 23, 2012, 3:40 p.m.

     Bunny:

     If you want to display the code in your browser from Blue Fish, see the attached image.

     

     


    Another way is to open Windows Explorer (Start button, equipment) and scroll to the folder where you have the html file you want to view. When you find it, situate above the name of this and double click left mouse button. Automatically you visualized, the.Luck!

  • berenhena   April 22, 2012, 9:44 p.m.

    Homework done here

  • Pau Company   April 20, 2012, 7:08 p.m.

    Aqui esta el ejercicio:

     

    http://paucompany.es/ejercicioshtml5/html51.html

  • Anonym   April 18, 2012, 6:13 p.m.

    Here's my homework assignment. I'll wait for the teacher's input before proceeding with the next lesson!!

  • Jeremiah   April 12, 2012, 6:34 p.m.

    Right here is the link to my work for this task. Done up in htmlpad.

  • flatpack   March 28, 2012, 5:58 p.m.

    Here is my work.

    http://htmlpad.org/p2pueditor/

  • JuanMa Ruiz   March 8, 2012, 3:50 p.m.

    I've finished my second assigment

    You can see here
  • joe palmer   March 8, 2012, 7:28 p.m.
    In Reply To:   JuanMa Ruiz   March 8, 2012, 3:50 p.m.

    yes