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 folder
Open 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.

<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>
 
Page title
 
<img src="logo.png">
 
Words about me here...
 
</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!
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
1. index.html
 <title>HOME</title>
 About Me
 Replace Words about me here... with a paragraph about you!
2. friends.html
 <title>Friends</title>
 My Friends
 Delete <img src="logo.png">
3. pics.html
 <title>Pics</title>
 My Pics
 Delete <img src="logo.png">
4. 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 modifications
SAVE in Notepad then RELOAD BROWSER
Notice when you click on your friends a NEW window opens with a bigger version!

pics.html

Add the following code within the body (where the logo used to be)
and make any needed modifications
SAVE 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

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 modifications
SAVE in Notepad then RELOAD BROWSER

<a href="http://www.imdb.com/" target="new"><img src="link1.jpg"></a> 
So you wanna know about any movie? 
 
<a href="http://www.rottentomatoes.com/" target="new"><img src="link2.jpg"></a> 
Will the movie suck? 
 
<a href="http://www.facebook.com/" target="new"><img src="link3.jpg"></a> 
Yup. I'm on Facebook.

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 and/or
<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 visibility
Research 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