HTML Introduction

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 concerned 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 will 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>

Now lets see an ordered:

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