Text Box: STUDENT PORTFOLIO - The Main Page  

 

 

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. 

 

 

STEP 1A:                    Create a Background  .jpg,   link the Background, 

                                                setup <div> skeletons.

 

<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>

               

STEP 1B:        Create the style sheet to supply a Background color (style.css)

                        You must replace the xxx.jpg file with one you have handy.

 

body {background: url(xxx.jpg)}

 


 

 

STEP 2A:                    Show Link by Text,  Link by Photo,   Some Mouse over technique.

 

<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>

 

STEP 2B:        The style sheet extended, with mouse events         

 

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}

 


 

 

STEP 3A:        Setup Nav Bar,   Add Color

 

<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}