UNIT 2 UNIT 2 Module 3: HTML Lists Overview. List There are two common types of HTML lists Ordered list numbered Unordered list bullet points

UNIT 2Module 3: HTML Lists

Overview

http://www.washington.edu/accesscomputing/webd2/student/unit2/index.html

List

There are two common types of HTML lists

Ordered list <ol> numbered

Unordered list <ul> bullet points

List tag

<li>

Starts the list

</li> closes the list

Unordered List:

<ul> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ul> ____________________________________________

• Apples• Bananas• Lemons• Oranges

Ordered list

<h2>Ordered List</h2><ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li></ol>

Ordered List

ApplesBananasLemonsOranges

Find the code that has the <div> with your name. Change this to an unordered list

<div>Gail Chapman<br/>[email protected]</div>

<div><ul><li>Gail Chapman</li><li>[email protected]</li></ul></div>

Find the code that looks like this: Change this to an unordered list

<ul><li>Intro to Digital Technology</li><li>Luella High School</li></ul>

<div>Intro to Digital Technology<br/>Luella High School<br/>4th Period<br/>School year 2014-2015</div>

URL Address

http://www.washington.edu/accessit/webd2/student/index.htmlThis URL consists of four parts, separated by forward slash (/):

http:// - This is the Internet protocol, and tells the browser how to connect with the server hosting the URL. Most documents on the web begin with http://, but they might also begin with https://, ftp://, telnet://, or others.

www.washington.edu - Domain name where the file is located.

/accessit/webd2/student/ - folder or directory where the file is located (in this example, the file index.html is stored in a subdirectory three levels deep)

index.html - the filename

UNIT 2 > MODULE 3Lesson 2: Creating a Navigation Menu

Creating a navagation menu with links to internal documents:

<nav><ul><li><a href="index.html">Home</a></li><li><a href="accessibility.html">Accessibility</a></li><li><a href="usability.html">Usability</a></li><li><a href="graphics.html">Graphics</a></li><li><a href="javascript.html">Javascript</a></li><li><a href="tools.html">Tools</a></li><li><a href="video.html">Video</a></li></ul></nav>

Type this after the div containing your information and before the main with the paragraph headings

Save and view in browser

If you copy paste you will need to retype the “ “ marks. They do not copy over correctly.

http://www.washington.edu/accesscomputing/webd2/student/unit2/index.html

http://www.washington.edu/accesscomputing/webd2/student/unit2/module3/index.html

Saving your document• Now save the index.html as each of the following names you created. Use

lowercase and do not have spaces in the word. You should see an html icon for each of the saved pages when you finish.

Linking to a url – absolute link

<a>This is a link to nothing</a>

An absolute link is a link to an existing URL on the internet.

Find the name of the school and change it to this.

<li><a href = “http://schoolwires.henry.k12.ga.us/lhs”> Luella High School </a></li>

http://schoolwires.henry.k12.ga.us/lhs

Find the <main> tag change it to the following tag.

<main id="main">

At the very top of your web page, just inside the <body> tag, add a new div element that contains a same-page link, like this: Type this code right after the comment.

<div> <a href="#main">Skip to main content</a> </div>

Link to an email address

Substitute this code for you email.

<li><a href="mailto:[email protected]">[email protected]</a></<li>

You may need to retype the “ “ marks once you copy it over.

Documents

UNIT 2 UNIT 2 Module 3: HTML Lists Overview. List There are two common types of HTML lists Ordered list numbered Unordered list bullet points