HTML Lists

Lists

Take notes and read about how to add a list. Then scroll down and follow the directions below to use your links home, about, inspire, and develop links to create an unordered list.

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag (example).

Ordered lists starts with <ol> and each item is <li> (example).

Example

Horizontal Navigation List

Now add the following navigation links (make sure the links work) to your index.html page under the banner and H1 title. This will create a horizontal unordered list, at the top of each webpage of your hobby site under the H1 title of the page:

<li><a href="YourAboutLink">ABOUT </a></li>

<li><a href="YourInspireLink">INSPIRE</a></li>

<li><a href="YourDevelopLink">DEVELOP</a></li>

</ul>

Copy the code below and paste it immediately after the <head> tag of your index.html document. You can go to this example and test out your code and edit the color, size, etc according to your preference and then copy it into your code.

<style>

ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333333;

}

li {

float: left;

}

li a {

display: block;

color: white;

text-align: center;

padding: 16px;

text-decoration: none;

}

li a:hover {

background-color: #111111;

}

</style>