The following
3 lessons will demonstrate the basic layout for the Main page
(index.html) and the style sheet (style.css). You may
cut and paste into your own notepad file.
But be sure to evaluate the statements and research
their meaning. You will have to replace
some .jpg references with your own files.
<html>
<head>
<title> Lesson 1-
index.html </title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
<body>
<div class=”main”>
<h2> Main section - Lesson to set a background
</h2>
</div>
<div class=”nav_bar”>
<h2> Navigator Bar - Creating Divisions
</h2>
</div>
</body>
</html>
body {background: url(xxx.jpg)}
<html>
<head>
<title> Lesson 2 index.html </title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
<body>
<div class=”main”>
<h2> Main section - LESSON II ADVANCED
</BR>
How to call another page with ANCHORS</h2>
<h3> call by Word or by Text </h3>
</div>
<div class=”nav_bar”>
<h2> Navigator Bar </h2>
<p> Link by Text<a href="ASSIGNMENT.HTML">
CLICK </a> to a place or </p>
<p> Link by Pictures <a href="assignment.html">
<img src="grimble.jpg"
width="100" height="133"
alt="picturetext"/></a> to the place</p>
</div>
</body>
</html>
body {background: url(xxx.jpg)}
a:link, a:visited
{color:#4D65A0}
a:focus, a:hover, a:active {color: #7A4DA0;
text-decoration:none; font-weight:bold}
<html>
<head>
<title> Lesson 3
ADV-HTML </title>
<link rel="stylesheet" type="text/css"
href="style.css" />
</head>
<body>
<div class=”main”>
<h2> Main section - EMPLOYING THE NAVIGATION
BAR</h2>
<H3>
Picture above listed text </H3>
</div>
<div class=”nav_bar”>
<h2> Navigator Bar </h2>
<p><img src="grimble.jpg"
width="100" height="133"
alt="picturetext"/></p>
<p><a href="assignment.html">text</a>
<br/><a href="assignment.html">text2</a>
<br/><a href="assignment.html">text3</a>
<br/><a href="assignment.html">text4</a>
<br/></p>
</div>
</body>
</html>
STEP 3B. Nav Bar added
body {background: url(bckgrd.jpg)}
div.div.nav_bar {position:
absolute;
left: 10px;
top: 10px;
textl-align: right}
div.nav_bar a
{font-size: 11px}
div.main {margin-left:90px}
div.main p {font-style:italic}
a:link, a:visited
{color:#4D65A0}
a:focus, a:hover, a:active {color: #7A4DA0;
text-decoration:none; font-weight:bold}