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 of 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:

Open the unordered list: <ul>
List items are surrounded by <li> tags
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.

Open the ordered list: <ol>
Insert the steps as list items: <li>Item</li>
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

ctk974 said:

Done!

on May 14, 2012, 1:07 a.m.
Hibby73 said:

Here is my homework for this assignment

on May 10, 2012, 2:58 p.m.
Al said:

Keeping things interesting: Bacon Salad!

http://htmlpad.org/BaconSalad/

on May 10, 2012, 2:03 a.m.
JoshM said:

There we go!

http://htmlpad.org/htmllinksandetc/

on May 9, 2012, 8:11 p.m.
Miester said:

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

on May 9, 2012, 5:19 a.m.
Aaron Hanson said:

Here is my "lists assignment!"

on May 8, 2012, 11:53 p.m.
levis said:

Here is my Links and Lists assignment.

on May 7, 2012, 10:24 a.m.
WolfGirl said:

Here is my LInks and Lists assignment.

on May 6, 2012, 3 p.m.
Siulka said:

Here is my lists & links assignment website

on May 6, 2012, 1:34 p.m.
Nick said:

Here is my list assignment.

on May 6, 2012, 6:33 a.m.
Bunny said:

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>

on May 4, 2012, 3:38 p.m.
Jean-Baptiste Carré said:

Done!

on April 29, 2012, 6:23 p.m.
jacobbundren said:

Here is my Links and Lists assignment.

on April 28, 2012, 3:31 p.m.
Bunny said:

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

on April 23, 2012, 3:40 p.m.

Pau Company said:

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!

on April 23, 2012, 4:53 p.m. in reply to Bunny
berenhena said:

Homework done here

on April 22, 2012, 9:44 p.m.
Pau Company said:

Aqui esta el ejercicio:

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

on April 20, 2012, 7:08 p.m.
EraqEE said:

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

on April 18, 2012, 6:13 p.m.
Jeremiah said:

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

on April 12, 2012, 6:34 p.m.
flatpack said:

Here is my work.

http://htmlpad.org/p2pueditor/

on March 28, 2012, 5:58 p.m.