Let's make a 5 page website!
just using a text editor, paint program, and browser!Create a folder on the desktop (My files on Chromebook)
Open Notepad++ (<t> app on Chromebook) and copy/paste the code below
SAVE AS "index.html" to the folderOpen a paint program and make 5 .PNG buttons and save to the folder as
"home.png, friends.png, pics.png, links.png, quotes.png"Copy/Move your previously made logo and 3 animated gifs into the folder as well
Find the new "index.html" in the folder and Open in a browser.
<!-- comment(hidden): index/home file-->
<html>
<head>
<title>browser tab title</title>
</head>
<body bgcolor="#ffff00" background="">
<a href="index.html"><img src="home.png"></a>
<a href="friends.html"><img src="friends.png"></a>
<a href="pics.html"><img src="pics.png"></a>
<a href="links.html"><img src="links.png"></a>
<a href="quotes.html"><img src="quotes.png"></a>
<br>
<font size="+2" color="#00ff00">Page title</font>
<br>
<img src="logo.png">
<br>
Words about me here...
<br>
</body>
</html>
Notice the patterns in the code!
Most HTML code tags start with <?> and end with </?>
Colors are in hexadecimal e.g. #ffff00
image code -> <img src="image.png">
(png or jpg or gif)link code -> <a href="index.html">image code or words</a>
index.html can also be replaced with a web address to a page or image!<br> creates a line break
When you clicked on the buttons they didn't open new pages
because you haven't created them yet!
Time to make the other 4 pages!
In your Notepad++ "index.html" page, SAVE AS "friends.html" and repeat with pics.html, links.html, quotes.html
Now you have 5 identical looking pages but the buttons should all work!
Go back and open each page in Notepad++ and edit and SAVE
index.html
<title>HOME</title>
<font size="+2" color="#0000ff">About Me</font>
Replace Words about me here... with a paragraph about you!friends.html
<title>Friends</title>
<font size="+2" color="#0000ff">My Friends</font>
Delete <img src="logo.png">pics.html
<title>Pics</title>
<font size="+2" color="#0000ff">My Pics</font>
Delete <img src="logo.png">links.html ... quotes.html ... You get the idea!
Let's add features to the other pages!
friends.html
Download or screengrab celebrity friends (Google Search) into your folder.
Rename (simplify) if you'd like and take note of the image type (png? jpg?)
Don't change the image type extension!Add the following code within the body (where the logo used to be)
and make any needed modificationsSAVE in Notepad then RELOAD BROWSER
Notice when you click on your friends a NEW window opens with a bigger version!
<table border="1">
<tr>
<td><a href="image1.png" target="new"><img src="image1.png" width="200"></a></td>
<td><a href="image2.png" target="new"><img src="image2.png" width="200"></a></td>
<td><a href="image3.png" target="new"><img src="image3.png" width="200"></a></td>
</tr>
<tr>
<td>Name 1</td>
<td>Name 2</td>
<td>Name 3</td>
</tr>
</table>
pics.html
Add the following code within the body (where the logo used to be)
and make any needed modificationsSAVE in Notepad then RELOAD BROWSER
Notice the diagonal 3x3 table pattern of your animated GIFs?
Why border="0"???When mousing over the image words appear >> title="description"
alt="description" is for Vision impaired screen readers
<table border="0">
<tr>
<td><img src="gif1.gif" width="200" alt="description" title="description"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td><img src="gif2.gif" width="200" alt="description" title="description"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><img src="gif3.gif" width="200" alt="description" title="description"></td>
</tr>
</table>
links.html
Download or screengrab 3 of your favorite company logos into your folder.
Rename (simplify) if you'd like and take note of the image type (png? jpg?)
Don't change the image type extension!Add the following code within the body (where the logo used to be)
and make any needed modificationsSAVE in Notepad then RELOAD BROWSER
<a href="http://www.imdb.com/" target="new"><img src="link1.jpg"></a><br>
So you wanna know about any movie? <br>
<br>
<a href="http://www.rottentomatoes.com/" target="new"><img src="link2.jpg"></a><br>
Will the movie suck? <br>
<br>
<a href="http://www.facebook.com/" target="new"><img src="link3.jpg"></a><br>
Yup. I'm on Facebook. <br>
quotes.html
You can figure this one out!
Add a few exciting quotes and an original one you created!
LASTLY, GO BACK on each page and experiment with these tags
Wrap important words in <b></b> and/or <i></i>
<center></center>
Download seamless background images and modify background="" in the body tag
Be careful picking background images as you may need to adjust the color of the text for better visibilityResearch and insert embed codes for Youtube videos, Google Docs, etc.
SHOW THE TEACHER
OR
Drag Folder into your Google Drive and get a SHARE LINK for Schoology
