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:

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

Anonym Nov. 26, 2011, 8:33 p.m.

Here's my work on Lists & Links. I made it to keep track of my own work.

http://dl.dropbox.com/u/49688808/list1.html

I just needed to change the file name.
joe palmer Nov. 27, 2011, 11:53 a.m.
In Reply To: Anonym Nov. 26, 2011, 8:33 p.m.

I like the idea so much I want to try it later in the week (have two Univercity exams and a long paper early this week no time now) using semantic html / css and see if I can do something like that too, great idea. I shall pretend to think of the semantic html as Michelangelo did marble - Every block of stone has a statue inside it and it is the task of the sculptor to discover it. I hope you don't mind me commenting on it like that, thanks!
Anonym Nov. 27, 2011, 5:02 p.m.
In Reply To: joe palmer Nov. 27, 2011, 11:53 a.m.

No, I don't mind it at all. Actually, I quite like your Michelangelo analogy because that's how I feel about html/css. The more Web pages I create, the more I realize that html and css are different sides of the same coin.

By the way, I was reading the w3's website recently and found out that "utf=8" /> is the pre html5 syntax, and that you don't need '/' for html5.

Wish you a great exam season!
Vita Nov. 28, 2011, 4:05 a.m.
In Reply To: Anonym Nov. 26, 2011, 8:33 p.m.

Nice Demian, I like the idea and like the sprinkle of rounded corners... :)
Anonym Nov. 28, 2011, 5:58 p.m.
In Reply To: Vita Nov. 28, 2011, 4:05 a.m.

Thanks much
alcinoe Nov. 28, 2011, 9:48 p.m.
In Reply To: Anonym Nov. 26, 2011, 8:33 p.m.

Really nice, Demian. It is actually useful for all of us to remember the various tips that we have learned here!
Anonym Nov. 29, 2011, 12:38 a.m.
In Reply To: alcinoe Nov. 28, 2011, 9:48 p.m.

Thank you. About the order of the lessons, I get confused also. I wish they just stay fixed.
Vita Nov. 23, 2011, 11:45 a.m.

Heres my creation - like "To do" list :

http://dl.dropbox.com/u/18761433/HTML5Course/lists.html
alcinoe Nov. 25, 2011, 12:22 a.m.
In Reply To: Vita Nov. 23, 2011, 11:45 a.m.

I like you incorporated multimedia into your list, Vita!
Vita Nov. 25, 2011, 6:06 a.m.
In Reply To: alcinoe Nov. 25, 2011, 12:22 a.m.

Thnx Elizabeth,

I am not sure though if I made it the right way... I mean the code editor keeps showing me that this is not right, but I am just ignoring it for now, coz the result is what i intended...

Glad you like it.
joe palmer Nov. 27, 2011, 12:05 p.m.
In Reply To: Vita Nov. 23, 2011, 11:45 a.m.

That is nice Vita, I did the free trial at Plurasight.
Vita Nov. 28, 2011, 4 a.m.
In Reply To: joe palmer Nov. 27, 2011, 12:05 p.m.

Thanks Joe, I did the trial too, found the HTML tutorials quite useful actualy. :)
jenEliz Oct. 16, 2011, 11:28 p.m.

Added a bit more to the Witch Website! Lists & links!
Stavros Oct. 17, 2011, 2:25 a.m.
In Reply To: jenEliz Oct. 16, 2011, 11:28 p.m.

Nice one Jen! Good work!
jenEliz Oct. 17, 2011, 11:07 p.m.
In Reply To: Stavros Oct. 17, 2011, 2:25 a.m.

Thx! :)
Stavros Oct. 15, 2011, 8:14 a.m.

This is my "Lists and links" version. I used the new tags q (quotation) small (smaller fonts) big (biger fonts) cite (citation) b (bold). I added special characters trademark copyright.

I added a link to download a text file which contains the html code.

Here is the result:

http://dl.dropbox.com/u/4230190/courses/listsandlinks.txt
Luca Serpietri Sept. 21, 2011, 11:12 a.m.

lists&links everyone...
Dar Sept. 1, 2011, 1:31 p.m.

and now, the continuation of a page I should have names html5, but instead it's still named Basic Markup because I didn't think ahead.

http://etherpad.mozilla.org:9000/basicmarkup
Michael Sturgeon Aug. 14, 2011, 3:33 p.m.

Here are my two list types, with footer, H1, H2, and link

htmlpad.org/sturgeonlists
Steve Aug. 12, 2011, 10:35 p.m.

Here is my code for lists.

http://pastebin.com/u/shemric
Randi Miller June 20, 2011, 1:11 a.m.

http://htmlpad.org/randimiller-1
yasna June 18, 2011, 4:04 a.m.

Mi site :) http://htmlpad.org/openzo/
Anonym June 14, 2011, 10:32 p.m.

http://htmlpad.org/SBrown/ my modified site
aaron wheeler June 7, 2011, 10:48 p.m.

My lists and links page is found here.
Vita Jan. 22, 2012, 6:01 a.m.
In Reply To: aaron wheeler June 7, 2011, 10:48 p.m.

Nice work!
Sedmikrasky June 7, 2011, 5:17 p.m.

Here's my example

http://nurianadalrovira.bz.cm/p2pu/html5/02_lists.html

Cheers
Taylor Smock June 6, 2011, 5:18 p.m.

Like some others, I have modified a previous page used for this course for this.

Here it is (my next stop is the img, video, and audio tags, so those will be added):

http://htmlpad.org/HTML5IntroductionBasicMarkup/
Sedmikrasky June 7, 2011, 1:59 p.m.
In Reply To: Taylor Smock June 6, 2011, 5:18 p.m.

You can find some OGG/OGV examples at Archive and Wikimedia
Taylor Smock June 7, 2011, 4:50 p.m.
In Reply To: Sedmikrasky June 7, 2011, 1:59 p.m.

Thank you.

I just added a random audio sample (obtained from http://www.archive.org) to my excersize page.
Josh June 6, 2011, 12:01 p.m.

Here's mine, evolved from the first set of lessons.

http://htmlpad.org/jgt
Albert Rosa June 6, 2011, 11:24 a.m.

Here is my example http://htmlpad.org/alro-listexample/
Tim D June 5, 2011, 7:41 p.m.

Finished work is here: http://htmlpad.org/tdingman/
Anonym June 5, 2011, 6:41 p.m.

I am a bit of a history buff and got slightly carried away but here is a good example of order and ordered list mixed together.
joe palmer Sept. 2, 2011, 9:49 p.m.
In Reply To: Anonym June 5, 2011, 6:41 p.m.

Nice work! Sorry it took so long to get discovered, better late that never hey?