Build A Web Page Printer Version

Build a Web Page

Making your own simple web page is fairly easy—once you get used to all the HTML (HyperText Markup Language) symbols. If you decide you want to share your web page with the world when you’re done, visit a free web-hosting site such as GeoCities.

Web Talk

Has this project encouraged you to make your own web site? If it has, please tell us about it and we’ll include a link here. Send them to us via email at web@yesmag.ca.

Here are the web sites kids have made so far...
Cameron McKeich’s Environmental Kids
Christopher Cook

Materials

• Computer
• Text editing software (Almost any word processing software will do—you just need to be able to save your file
in text format.)
• Web browser software (e.g., Netscape Navigator or Microsoft Internet Explorer)
• Graphics software—optional (e.g., Photoshop, Corel Photo-Paint, or Jasc Paint Shop Pro)

Before You Start

Here’s a quick explanation of HTML.
Web pages use tags to tell browsers how to display your page. An example tag is which tells the browser you want the text to be bold. Most tags have a start tag and an end tag. means start making text bold. means stop making text bold. So if you want the word “hello” to be bold, you would type: hello.
Basically a web page is text along with tags which tell the browser how to display the text.

Instructions

1. Plan what you want the page to look like. A big heading at the top? Some photos or drawings? Maybe your page will have a theme, such as pets, video games, or sports.
2. Start a new file in your text editing software.
3. Start with <HTML>, then make your title, and work on the <BODY>. From there, work down the page. Use the sample file we included here as a guide. Also, experiment with some of the other tags we’ve included. At the bottom of your page, remember to include the </BODY> and </HTML> tags.
4. Save your file as text. (You may have to indicate that you want it saved as text. For example, your software may say “Save File As Type” and then give you some choices.) Remember to attach “.html” or “.htm” on the end of the file name.
5. Open your browser software and under the file menu chose Open Page (or Open File). Then select your HTML file.

Sample Page

The Tags

HTML - This tells the browser this is a HTML document. Put the start tag, <HTML>, at the beginning of your document and the end tag, </HTML>, at the bottom of your document.

<HTML> Put your whole document in here. </HTML>

TITLE - Every page should have a title. The title will appear as the window title.

<TITLE>My Web Site</TITLE>

BODY - This lets you specify the colour of the background or lets you put a graphic in the background. Colours have to be specified in hexadecimal format, which is kind of confusing, but we included some samples below. To change the background colour use “bgcolor” to change the colour of the text use “text”. At the end of your page, include the closing </BODY> tag.

<BODY bgcolor="ffffff" text="3344cc">
<BODY background="pretty_graphic.gif">

P - Indicates a paragraph. You should use both the opening tag and the closing tag.

This is the beginning of a new paragraph.
And this is the next paragraph.

FONT - Controls the size, colour, and typeface of the text. Size is controlled by increasing or decreasing the text’s normal size. Size="+2" would increase the font by two and size="-2" would decrease it by two. “Face” is used to change to a different font, but be warned that you, or the person reading your page, will have to have the font installed for it to display properly.

Text goes here
Text
Text

B, I, U - To make text bold, italics, or underlined.

Bold me, please
Aren’t italics nice
Underline is nice too

IMG - Used to include a graphic on your page. The browser will look for a graphic in the same directory (or folder) as your web page file is in, so make sure that’s where your graphics are.
Although it isn’t necessary, it is a good idea to include the width and height (in pixels) of the graphic. If you don’t know the size, leave it out altogether. The IMG tag also allows you to add a border to the graphic using “border”. For a border one pixel thick, use border="1".
The IMG tag doesn’t have a close tag.

<IMG width="100" height="25" SRC="my_graphic.gif">
<IMG border="1" SRC="my_photo.jpeg">

A HREF - This will make a “hot” link to other pages, sites, or email. You can also make a graphic “clickable” by embedding an <IMG> between the start and end tags.

<A HREF="http://www.yesmag.ca">YES Mag</A>
<A HREF="otherpage.html">My other page</A>
<A HREF="mailto:info@yesmag.ca">Send us email</A>
<A HREF="http://www.yesmag.ca"><IMG SRC="yesmag_logo.gif"></A>

Colours

Colours in HTML are specified in hexadecimal format. Hexadecimal is the base-16 number system that computer programs often use (remember, decimal is the base-10 number system we are used to). In the hexadecimal system, the numbers go from 0 to 15 (just like decimal goes from 0 to 9), but since we would want each number to only be a single digit, we use letters to represent the digits from 10 to 15. So, A represents 10, B represents 11, and so on up to F which represents 15.
Don’t worry if that doesn’t make much sense, because it doesn’t need to. An HTML colour (for example, FF0000) controls the amount of light going to the red, green, and blue phosphors that make up each pixel on your computer screen. The first two digits control the red, the second two control the green, and the final three control the blue. So the colour FF0000 means turn on the red phosphor, but turn off the blue and green ones. The resulting colour is red. To get baby blue (33CCFF), turn on the red a bit, turn on the green most of the way, and turn blue on all the way.
Still don’t get it? It doesn’t matter because we’ve made a chart for you that shows a whole bunch of colours along with their corresponding colour codes. Let’s take a look at the chart.

Graphics

You can spice up your page by adding graphics. To make your page really special, use your own photos or drawings. You can also get graphics from the Internet. Visit one of the free clip art web sites we’ve included below. To download a graphic from a web page, right click on the graphic (or click and hold on a Mac) and choose “Save this image as...” or “Download Image to Disk” from the menu. Remember, only take images that you have permission to use.
Kids Domain Clip Art Index
Disney Clip Art
FreeFoto.com

Special Characters

HTML files can only be plain text, which means you can’t just type in special characters such as ¢ and ©, accents such as é and ç, or curly quotes such as ’ and “. But there obviously is a way to include them. Special characters are included by putting their code between an & and a ;. Here are some examples:
75¢ + 25¢ = $1. results in “75¢ + 25¢ = $1.”
This page is © 2000. results in “This page is © 2000.”
Dont go in there. results in “Don’t go in there.”

Here is a list of special characters for your reference:

‘

’

“

”

•

Trouble-Shooting

• Check your spelling. Use the American spelling of words (e.g., “color” not “colour”).
• Make sure the picture file is in the same directory as your web page file. Make sure the picture’s file name is
spelled correctly.
• Make sure your file is saved as a text file.
• Browsers don’t recognize curly quotation marks like “ and ”. All quotes in HTML files have to look like this ".
If your word processor automatically makes curly quotes, you will have to turn that feature off.

A Step Further

The best way to learn new tricks and get ideas is to see what other people have done and how they did it. Seeing what they did is easy: just look at their web page. But how do you see how they did it? That’s easy too. Under the View menu in your browser choose Page Source (or just Source). Voilà, there’s the HTML code that makes up the page.
This project only touches the surface of what you can do with HTML. If you want to learn more tags or other tips and techniques, try one of these more advanced sites.
HTML Help by the Web Design Group
Web Developer's Virtual Library
World Wide Web Consortium

A Challenge For You

Think you’ve got HTML all figured out? Here are some challenges for you:
• Make the word “love” in big, bold, red letters.
• Make two photos (or graphics) appear side by side instead of one on top of the other.
• Make a sentence in which each word is a different colour.
You’ll find the answers here.