Let's make a 5 page website!

just using a text editor, paint program, and browser!
  1. Create a folder on the desktop (My files on Chromebook)

  2. Open Notepad++ (<t> app on Chromebook) and copy/paste the code below
    SAVE AS "index.html" to the folder

  3. 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"

  4. Copy/Move your previously made logo and 3 animated gifs into the folder as well

  5. 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!

  1. In your Notepad++ "index.html" page, SAVE AS "friends.html" and repeat with pics.html, links.html, quotes.html

  2. Now you have 5 identical looking pages but the buttons should all work!

  3. Go back and open each page in Notepad++ and edit and SAVE

    1. index.html
      <title>HOME</title>
      <font size="+2" color="#0000ff">
      About Me</font>
      Replace Words about me here... with a paragraph about you!

    2. friends.html
      <title>Friends</title>
      <font size="+2" color="#0000ff">
      My Friends</font>
      Delete <img src="logo.png">

    3. pics.html
      <title>
      Pics</title>
      <font size="+2" color="#00
      00ff">My Pics</font>
      Delete <img src="logo.png">

    4. links.html ... quotes.html ... You get the idea!

Let's add features to the other pages!

friends.html

  1. 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!

  2. Add the following code within the body (where the logo used to be)
    and make any needed modifications

  3. SAVE in Notepad then RELOAD BROWSER

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

  1. Add the following code within the body (where the logo used to be)
    and make any needed modifications

  2. SAVE in Notepad then RELOAD BROWSER

  3. Notice the diagonal 3x3 table pattern of your animated GIFs?
    Why border="0"???

  4. When mousing over the image words appear >> text="description"

  5. alt="description" is for Vision impaired screen readers

<table border="0">
<tr>
<td><img src="
gif1.gif" width="200" alt="description" text="description"></td>
<td></td>

<td></td>
</tr>
<tr>
<td></td>
<td><img src="gif
2.gif" width="200" alt="description" text="description"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td><img src="gif
3.gif" width="200" alt="description" text="description"></td>
</tr>
</table>

links.html

  1. 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!

  2. Add the following code within the body (where the logo used to be)
    and make any needed modifications

  3. SAVE 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 visibility

  • Research and insert embed codes for Youtube videos, Google Docs, etc.

SHOW THE TEACHER!!!