Page Templates

Use these templates to begin making web pages.
Copy the HTML code (from the template boxes below) and paste it into a new
Notepad (or simple text editor) page and save as pagename.html (whatever you want
to call the page). The first page of your site should be called index.html)

Note: You can alway see the code behind a web page by viewing the source
from your browser. Usually view > source (or page source).
You can copy and paste code you find (and understand) into your own pages
and then modify it. That is how many people learned HTML.

Simple Page:

<html> <head> <title>Untitled Page</title> </head> <body bgcolor="white" text="black" link="#000099" vlink="#9999cc"> Sample Text <a href="http://www.massarted.org/s21">Web Club Home Page Link</a> Sample Image: <img src="redsoxball.jpg"> </body> </html>

See Page

Notes: <body> Choose colors for your text, links and background.
You can also add a background image by adding this:
<body background="image-name.gif"> (name and type of image) inside the body tag.

Colors can be names (black, white) or Hex numbers: Get Web Color Info (web link).
Copy and paste colors you like into the text attributes:
bgcolor=" " text=" " link=" " vlink=" " (the color you want goes between the quotes).

Remember that your site links (pictures, hotlinks) should point to where they actually are
in relation to your page. Links that are out on the web need the full URL
(which always starts with http://)

Three Column Page (made with a Table):

<html> <head> <title>Untitled Page</title> </head> <body bgcolor="#ffffff"> <table width="100%" border="1" cellspacing="2" cellpadding="0"> <tr> <td> text or picture in left column</td> <td>text or picture in middle column</td> <td> text or picture in right column</td> </tr> <tr> <td>caption</td> <td>caption</td> <td>caption</td> </tr> </table> </body> </html>

See Page

Notes: Table width can be a percent of the page (this one is 100%) or in pixels
example: width="500" would be 500 pixels wide.
You can change the cell properties: border="0" (turns it off) cellspacing="2"
cellpadding="0" (bigger or smaller numbers make wider or tighter).

Lots of Table Templates (web link).
You can copy the table codes and paste on your page (in notepad or editor).

Page that links forward and back to another page:

<html> <head> <title>Linking Pages</title> </head> <body bgcolor="#ccff99" text="#000000" link="#ff0000" vlink="#6699cc"> <div align="center">       LINKING PAGES <a href="linkingpage2.html">back</a> | <a href="linkingpage2.html">next </a> </div> </body> <html>

See Page

Notes: You can save one page with different names example: pageone.html,
pagetwo.html and just change the links to quickly make a multi-page site.

The <div align="center"> (all the stuff you want centered) </div> tag
can control the alignment of an area on your site.
In the template, it is used to center everything.

The font tag controls how Fonts look:
Red
Designers usually choose a few fonts, in order of preference, to make sure the person looking at the page has one of them. The font names above are the typical "san-serif" fonts.

Verdana looks like this.

Arial looks like this.

Page prepared by Eleanor Ramsay for the Somerville HTML Web Development Class 2005
21st Century Schools Web Club Pages