Wander's Web
A space for explorers and information junkies.

Creating a Basic Web Page ... Part 1

THE STANDARD TEMPLATE

There is a standard HTML [HyperText Markup Language] coded template that tells browsers (ie. Netscape, LYNX) that this document is an Internet homepage. The standard template looks like:

</BODY>
</HTML>

<HTML> </HTML>

Tells the browser that this is a HTML coded homepage.

<HEAD> </HEAD>

Indicates the header part of your homepage. It's the same as if you were creating a document with a header at the top of the page.

<TITLE> </TITLE>

Is where you will insert the title of your homepage. For example:

<TITLE>Joe's Homepage</TITLE>

This title will show up at the top of the screen when someone goes to your page, and as the website name when someone bookmarks your page.

<BODY></BODY>

This is where you will insert your information and code your page to however you want it to look. More about this later.

NOTE:

Most codes have a beginning and an ending and are within < > brackets. This becomes most important, and most frustrating, if forgotten.

Example:

<TITLE>: Indicates that you are starting the title for your page.
</TITLE>: The slash indicates that this is the end of your title. Nothing after this code will be part of your title.

More later.

THE BODY

Inside the <BODY> command area is where we set up how we want the whole page to basically look. Mostly this involves specifying page colors.

COLORS

You can specify the colors of your background, text and links.

BACKGROUND COLORS:

If you want the background of your homepage to be more than a browser's default grey you'll want to specify what color you want surfers to see.

The code for background coloring is BGCOLOR. The color you choose is placed between quotation marks. So, the code for background color is BGCOLOR="white" and will look like this on your page:

You can also choose colors like:

white, navy, brown,
red, green,
silver, gray
[note spelling; grey will give you green],
gold, orange, yellow,
purple, pink,
black, and blue.

There are hexidecimal [numbered/letter] codes for various color shades, but for simplicity I will not get into those here. See OTHER HTML INSTRUCTIONAL PLACES

Keep in mind your background color.

For instance

"red"

and

"blue"

together produces a strange, almost 3-D, effect on the eye.

TEXT COLORS:

Next you add the code for text colors; TEXT="black". It will look like this:

Again, the text can be any color you choose.

LINK COLORS:

If you decide you want to add links to other homepages you may want these addresses to stand out on your page.

For instance the code for coloring links could be LINK="purple". It looks like so:

If you want the link to change color when it has been accessed the code for that is VLINK="green" [for verified link] and your BODY code will look like this:

BACKGROUND IMAGES

You can also use images as background to your page.

This is done by adding BACKGROUND="nameofimage.gif" in the BODY part of your page coding.

VISUAL EFFECTS

PARAGRAPH BREAKS
LINE BREAKS
LISTS
FONT
OTHERS

Now we can move on to the information you want to put on your page. Your information will be placed in between the <BODY> </BODY>
codes. This is where you will do most of your creative work. Just a few basic codes to remember here.

PARAGRAPH BREAKS

To indicate that a block of information is a paragraph insert <P> at the end.

Example:*

When creating an HTML document, you must remember that every single letter you type will be displayed by your browser unless it is enclosed with a set of <> symbols. Each set of <> symbols and its contents is known as HTML element.<P>

One of the best ways to learn HTML is by "gleaning ideas from" existing Web pages.<P>

[* These two paragraphs are copied from Mount Royal College's "Introduction to Web Page Design", a course I highly recommend!]

LINE BREAKS

If you have a list of sentences that you do not want spaces between you use the break code <BR> instead of the <P> code.

<BR> can also be used if you want several spaces in between items.

LISTS

If you want your list to be indented with numbers or bullets use the following:

LISTS WITH NUMBERS:

<OL>
<LI>apples
<LI>oranges
<LI>peaches
</OL>

To get:

apples
oranges
peaches

LISTS WITH BULLETS [or DOTS]:

<UL>
<LI>apples
<LI>oranges
<LI>peaches
</UL>
To get:

apples
oranges
peaches
<UL type="circle">
<LI>apples
<LI>oranges
<LI>peaches
</UL>
To get:

apples
oranges
peaches
<UL type="square">
<LI>apples
<LI>oranges
<LI>peaches
</UL>
To get:

apples
oranges
peaches

FONT

You can manipulate how the text of your information looks using the <FONT> code.

FONT COLOR:

You can change the color of a particular word or phrase for emphasis. REMEMBER to use the closing code, otherwise your page will not look like you expected.

To change a specific text's color, the code is:

<FONT COLOR="purple">put your stuff here</FONT>

1

2

3

4

5

6

The higher the number the smaller the size of the type. <H1></H1> will give you a large title-size type, while <H6></H6> will give you very tiny type.

The other way of changing your type is by using the <FONT SIZE=> code.

It looks like so:

The number size is the opposite of the <H> code, with <FONT SIZE=1> being very small, and <FONT SIZE=7> being very large.

OTHERS

Quickly here are some codes that will give you various visual effects to your information.

<U> UNDERLINE </U>

<I>ITALICS</I>

<CENTER>CENTER</CENTER>

Some browsers can't read quotation marks so these must be coded in like so:

&quotquotations&quot

"quotations"

If you want to separate one part of your information from another, you might consider putting a line between them:

HORIZONTAL LINE <HR>

HORIZONTAL LINE <HR width=50%>

ADDING WEBSITE LINKS

Quite often you will find other websites that may be related to your website's subject, or just plain interesting. More than likely you will want to add onto your homepage these websites as LINKs.

The code for adding a link is:

<A HREF="the website's address">The title of the website you are linking to.</A>

For example:

<A HREF="http://calcna.ab.ca/">The Calgary Community Network Association</A>

ADDING GRAPHICS

Adding pictures is relatively easy. Finding the picture you want might take some time.

Keep in mind that although graphics may make your page more interesting they will also make downloading of your homepage slow. Rule of thumb is if you want your page to download quickly keep the total size of your all the graphics on one page below 35 K.

The code for adding graphics is:

The ALIGN code allows you to strategically place your image. For instance, see where the butterfly goes when I change its placement.

You might still need to position the image around within your text to get the look you want.

The ALT code allows you to assign text to your image. When you mouse over the image it gives more of a description of what is being seen. This is also helpful for incredibly slow servers or text-only browsers as viewers have some idea what the image is without seeing the actual picture.

The WIDTH and the HEIGHT codes tell the browser exactly the size of the image. This allows the images to be presented quicker. If you Open the image in Netscape 4.+ and then "View Image" (right mouse click over the image) it will tell you its exact dimensions.

If your image is also a link to another page most browsers will automatically place a border around the image unless indicated otherwise. The BORDER=0 code tells the browser not to put a border around your image. If you do want a border around your image, place a number higher than zero after BORDER=. The higher the number the thicker the border.

So, the full code for our little butterfly here would be:

Here are some sites with great homepage images:

You can also use search engines to find graphics. Type keywords "images" or "graphics" or "gifs" or "clipart" and "free".

Be sure to check the copyright on the image you want. There may be user restrictions if it's copyrighted!

Creating a Basic Web Page ... Part 2 .... Other Sites

Home

Website compiled, designed and maintained by
W. Martin.