Exercise 9.1

 

<!doctype html>

<html>

<head>

<title>Chapter 9 - Lists and Links</title>   

 

<style type="text/css">

 

body { padding-left: 20px; }

div { font-weight: bold; text-decoration: underline; font-size: 1.2em; padding-top: 5px;}

ol {

                list-style-type: decimal;

}

ul { 

                list-style-type: disc;

}

a { text-decoration: none;}

a:link { }

a:visited { }

a:hover { }

a:active { }

</style>

 

</head>

<body>

<div>Styling HTML Lists</div>

<p>This section is to demonstrate how you can style ordered and unordered lists in CSS</p>

Cars Ordered List

<ol>

                <li>Ford</li>

                <li>Honda</li>

                <li>Toyota</li>

</ol>                      

Cars Unordered List          

<ul>

                <li>Ford</li>

                <li>Honda</li>

                <li>Toyota</li>

</ul>                      

<hr>

<div>Styling Hyperlinks</div>

<p>This section is to demonstrate how you can style hyperlinks in CSS</p>

<a href="somepage.html">Click Me</a>      

</body>

</html>

 

Exercise 9.2

 

<!DOCTYPE html>

<html>

<head><title>Chapter 9 - Navigation Bar</title>

<style>

ul {

list-style-type: none;

}

 

a {

display: block;

width: 160px;

text-align: center;

text-decoration: none;

background-color: #00FF00;

}

 

li {

float: left;

}

</style>

</head>

<body>

<ul>

<li><a href="home.html">Home</a></li>

<li><a href="htmltutorial.html">HTML Tutorial</a></li>

<li><a href="csstutorial.html">CSS Tutorial</a></li>

<li><a href="javascripttutorial.html">Javascript Tutorial</a></li>

</ul>

</body>

</html>