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>
<title>Page 1</title>
<style>
</style>
</head>
<body>
<div1>
(header)
</div1>
<div2>
<h1>Page 1</h1>
<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:
<a href=""><img src="" height="100" alt="page 1"></a>
<a href=""><img src="" height="100" alt="page 2"></a>
<a href=""><img src="" height="100" alt="page 3"></a>
My example looked like this:
<div1>
<a href="page1.html"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/scuba-diving-7-920951.png" alt="" height="100"></a>
<a href="page2.html"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/scuba-1649369-1399350.png" alt="" height="100"></a>
<a href="page3.html"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/fish-1577324-1334925.png" alt="" height="100"></a>
</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!!!
Customize each of the three web pages you've created with whatever content you like!!!!
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:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
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>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<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>
<a href="page1.html"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/scuba-diving-7-920951.png" alt="" height="100"></a>
<a href="page2.html"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/scuba-1649369-1399350.png" alt="" height="100"></a>
<a href="page3.html"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/fish-1577324-1334925.png" alt="" height="100"></a>
</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>
<iframe width="560" height="315" src="https://www.youtube.com/embed/GIJFTbAS6S0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div2>
<div3>
<h2>A site by Mr. Cool, 2021</h2>
</div3>
</body>
</html>
page2.html code:
<!DOCTYPE html>
<html>
<head>
<title>Dry Suits</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<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>
<a href="page1.html"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/scuba-diving-7-920951.png" alt="" height="100"></a>
<a href="page2.html"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/scuba-1649369-1399350.png" alt="" height="100"></a>
<a href="page3.html"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/fish-1577324-1334925.png" alt="" height="100"></a>
</div1>
<div2>
<h1>How to properly wear a drysuit</h1>
<p>This video demonstrates how to properly put on a drysuit before diving.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/iPm3ig0fCL4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div2>
<div3>
<h2>A site by Mr. Cool, 2021</h2>
</div3>
</body>
</html>
page3.html code:
<!DOCTYPE html>
<html>
<head>
<title>Breakwater Cove</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<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>
<a href="page1.html"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/scuba-diving-7-920951.png" alt="" height="100"></a>
<a href="page2.html"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/scuba-1649369-1399350.png" alt="" height="100"></a>
<a href="page3.html"><img src="https://cdn.iconscout.com/icon/premium/png-256-thumb/fish-1577324-1334925.png" alt="" height="100"></a>
</div1>
<div2>
<h1>Diving Breakwater Cove</h1>
<p>Here is another video filmed at Monterey's Breakwater Cove.</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/XIO4E1OSIKs" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div2>
<div3>
<h2>A site by Mr. Cool, 2021</h2>
</div3>
</body>
</html>