Create A Web Site

Create a navigation bar

Find three images you'd like to use as navigation icons at the top of your web pages. You will click on each of these 3 images to load each of the three pages of your website.
Copy the image address links. Follow the directions here if you forget.
Paste those three addresses into a text file or Google doc. We'll need them later!
Create 3 different web pages using your name EX "mr_cool_page_1.html", "mr_cool_page_2.html", "mr_cool_page_3.html"
Use the code below as a base, but be sure to change the content so they are different.

<!DOCTYPE html>

<html>

<head>

<style>

</style>

</head>

<body>

<div1>

(header)

</div1>

<div2>

<p>This is a paragraph on page 1.</p>

</div2>

<div3>

(footer)

</div3>

</body>

</html>

Copy and paste this code inside your div1 replacing the (header) text:

My example looked like this:

<div1>

</div1>

You'll need to add in the name of each page to link to in the href="", in my case page1.html, page2.html & page3.html
You'll also need to add in the links you saved in the text doc to each of your images in the src=""
You can change the width size and the alt tags as well! I made my height 100 because that was also the height of my header block in the CSS I styled later.

You will need to add the same code below the <body> tag in all three of your new web pages!!!

You should now have a navigation bar made of icons at the top of each page that now links to all the other pages!!!

Go Further

Customize each of the three web pages you've created with whatever content you like!!!!

final example site code

In this example I used fonts.google.com to embed a non-standard fonts into my site. In this example I used the Roboto typeface. Once you select the font on the Google site it will generate two code snippets that need to go into the webpage:

This code goes in the head tags:

This code goes inside the style tags on the selector you want to have that particular font:

font-family: 'Roboto', sans-serif;

In this example I applied this font to the h1, p, div2 & div3 tags.

page1.html code:

<!DOCTYPE html>

<html>

<head>

<title>Monterey Diving</title>

<style>

body {

background-color: lightblue;

display: block;

margin: 0px;

padding: 0px;

}

h1 {

color: white;

text-align: center;

font-family: 'Roboto', sans-serif;

}

p {

font-family: 'Roboto', sans-serif;

font-size: 20px;

}

div1 {

display: block;

height: 100px;

width: 100%;

float: left;

padding: 10px;

background-color: #40E0D0;

}

div1 img {

padding-left: 5px;

padding-right: 5px;

}

div2 {

font-family: 'Roboto', sans-serif;

display: block;

width: 100%;

height: 100%;

padding: 30px;

float: left;

text-color: #696969;

}

div3 {

display: block;

height: 100px;

width: 100%;

float: left;

padding: 10px;

text-align: center;

color: #40E0D0;

background-color: #A9A9A9;

font-family: 'Roboto', sans-serif;

font-size: 14px;

}

</style>

</head>

<body>

<div1>

</div1>

<div2>

<h1>Monterey California Scuba Diving</h1>

<p>Watch this video of the majestic kelp forests in Monterey bay in California. The water is very cold all year around and most divers wear dry suits to stay warm.</p>

</div2>

<div3>

</div3>

</body>

</html>

page2.html code:

<!DOCTYPE html>

<html>

<head>

<title>Dry Suits</title>

<style>

body {

background-color: lightblue;

display: block;

margin: 0px;

padding: 0px;

}

h1 {

color: white;

text-align: center;

font-family: 'Roboto', sans-serif;

}

p {

font-family: 'Roboto', sans-serif;

font-size: 20px;

}

div1 {

display: block;

height: 100px;

width: 100%;

float: left;

padding: 10px;

background-color: #40E0D0;

}

div1 img {

padding-left: 5px;

padding-right: 5px;

}

div2 {

font-family: 'Roboto', sans-serif;

display: block;

width: 100%;

height: 100%;

padding: 30px;

float: left;

text-color: #696969;

}

div3 {

display: block;

height: 100px;

width: 100%;

float: left;

padding: 10px;

text-align: center;

color: #40E0D0;

background-color: #A9A9A9;

font-family: 'Roboto', sans-serif;

font-size: 14px;

}

</style>

</head>

<body>

<div1>

</div1>

<div2>

<h1>How to properly wear a drysuit</h1>

<p>This video demonstrates how to properly put on a drysuit before diving.</p>

</div2>

<div3>

</div3>

</body>

</html>

page3.html code:

<!DOCTYPE html>

<html>

<head>

<title>Breakwater Cove</title>

<style>

body {

background-color: lightblue;

display: block;

margin: 0px;

padding: 0px;

}

h1 {

color: white;

text-align: center;

font-family: 'Roboto', sans-serif;

}

p {

font-family: 'Roboto', sans-serif;

font-size: 20px;

}

div1 {

display: block;

height: 100px;

width: 100%;

float: left;

padding: 10px;

background-color: #40E0D0;

}

div1 img {

padding-left: 5px;

padding-right: 5px;

}

div2 {

font-family: 'Roboto', sans-serif;

display: block;

width: 100%;

height: 100%;

padding: 30px;

float: left;

text-color: #696969;

}

div3 {

display: block;

height: 100px;

width: 100%;

float: left;

padding: 10px;

text-align: center;

color: #40E0D0;

background-color: #A9A9A9;

font-family: 'Roboto', sans-serif;

font-size: 14px;

}

</style>

</head>

<body>

<div1>

</div1>

<div2>

<h1>Diving Breakwater Cove</h1>

<p>Here is another video filmed at Monterey's Breakwater Cove.</p>

</div2>

<div3>

</div3>

</body>

</html>

Report abuse