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

Nicole K. Feb. 18, 2014, 8 p.m.

Here is my assignment for ordered and unordered list :) I know its going to get more and more difficult but so far so good :)

https://nkelly130.makes.org/thimble/my-lists-ordered-and-unordered
rsummo1 Feb. 12, 2014, 10:18 p.m.

https://rsummo1.makes.org/thimble/basic-html-5-assignment-numero-dos

Yeah I'm on a roll! but this is stuff I've done before, so no big deal yet. Anyway, there you have my 2nd assignment. Thank U.
Eager2learn2 Jan. 26, 2014, 9:20 a.m.

http://eager2learn2.wordpress.com/2014/01/26/lists-and-links/

Here is a link to my work on this task.
Kiwiosaurus Nov. 7, 2013, 8:30 p.m.

Link to assignment via Moz Thimble:

https://thimble.webmaker.org/en-US/project/24189/edit

Any advice appreciated

Thanks

-Kiwi
Karam Oct. 9, 2013, 4:13 p.m.

Here is my completed assignment: http://htmlpad.org/Lists-Links/
v4lent1na Sept. 10, 2013, 12:23 p.m.

My make on Mozilla Thimble: https://sw3etvalent1ina.makes.org/thimble/p2pu-html-5-lists

This is just a basic list of item using the <ol> and <ul> tag.

EDIT: HTML list types

Ordered lists are numbered lists in which the items are arranged following a cardinal number, from 1 to n depending on the number of item listed. In a HTML document they are marked by the ol tag and they look like this:

<ol>

<li>item 1</li>

<li>item 2</li>

<li>item 3</li>

</ol>

Unordered lists are bulletted lists. Items are preceded by a sign (usually a o sign) that can be customized using CSS. To create such lists you wanna use the ul tag.

<ul>

<li>item 1</li>

<li>item 2</li>

<li>item 3</li>

</ul>

Ordered lists flow in sequence, while there is no meaningful ordered to ul lists. Items in the list are marked by the li tag.

In a HTML document both lists are similar in function but ul lists are more suites when you want to explain or demonstrate something.

I'm gonna add the link to the document with internal links later.
Ursula July 25, 2013, 7:04 p.m.

Here is my latest practice.

https://uidlebird.makes.org/thimble/welcome-practice-upi
bryanwoodsmall June 22, 2013, 6:18 p.m.

I made both lists to be lists of links. Also put in a couple of headers. I did not see how to link to a place in the document itself, though. Will have ot learn that later.
Idrissa Hamma June 23, 2013, 9:02 a.m.
In Reply To: bryanwoodsmall June 22, 2013, 6:18 p.m.

do not sent an email please On Sun, Jun 23, 2013 at 12:21 AM, bryanwoodsmall <
Myinah May 3, 2013, 8:55 a.m.

This is my list and hyperlink work. I continued using headers just to build on the previous task. https://thimble.webmaker.org/p/lr31/
zpatten93 April 20, 2013, 1:15 p.m.

http://htmlpad.org/list/edit Changed around the code a little bit, that way i could reinforce what i learned earlier. Used head files as practice, but think i did everything right, also linked my local grocery store for the hyperlink section :)
oricarmel April 6, 2013, 11:19 a.m.

https://thimble.webmaker.org/p/f2e5/edit
Anonym April 4, 2013, 2:29 p.m.

http://thimble.webmaker.org/p/llhl

http://pastebin.com/7dzAYZrv
Thomazrb79 March 28, 2013, 2:58 a.m.

My example: https://thimble.webmaker.org/p/l3qv/
Adri March 23, 2013, 2:18 p.m.

My list and links sample - List & Links
elferous March 6, 2013, 9:08 a.m.

https://thimble.webmaker.org/p/f9d5/
Brittany March 1, 2013, 10:38 p.m.

https://thimble.webmaker.org/p/folg/
Jose A. Feb. 28, 2013, 11:12 a.m.

Hello,

This is my example Enlace
Srdjan Maravic Feb. 8, 2013, 3:33 a.m.

My example of orderal and unorderal list and linking other content to our page can be find here.