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>