Web pages are created as text files with built in descriptors to tell a browser how to format the text, where to put graphics, and how to use color. This allows a page to be displayed in the same manner on different computers using different software (unlike a word processor document that has to be displayed using the same type of word processor to be seen the same on another machine).

HTML (HyperText Markup Language) "tags" (a sequence of characters enclosed with a < and a >) tell the browser how to display what follows (until the closing tag). Most tags have an ending partner that stops the effect specified. The horizontal rule <HR>, line break , and paragraph are exceptions to this rule.

I have used a table format in the examples below to make them a little more compact. But, what is true for table cells (table data) is usually true outside tables (and vice versa).

Remember: keep trying. The best way to learn how to build a good page is to practice. Try the different effects and see what you can do. And, always use a real browser to view your work in progress to spot any problems or faults that might crop up. It is also a good idea to use more than one browser to preview your page. Netscape, Explorer, and Mozilla Firefox don't all behave identically. Aim for a page that views the same with all browsers and your visitors won't be disappointed.

QUICK REFERENCE TO TOPICS

Quick Start BODY tag Headings Horizontal Rulers Aligning Text Text Enhancements

Links Automatic Links E-mail Link

QUICK START - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

There is a minimum set of tags that you need to begin a web page. Below are those tags (with those that are absolutely required shown in red). You can pick "your page" to see what that code creates. You need to add your own text (page title, headings, text, etc.) to make a personal page. Any page you use will have the same basic format. The file name of your page will be of the form name.htm or name.html.
If you use a hosting service like Geocities, your first page will be named index.html. Additional pages you design and use can have any name you choose.

<HTML>
<HEAD>
<TITLE>your page</TITLE>
</HEAD>
<BODY>
<H1><Your page title </H1>
<HR> 

And here is the first of the text, with a link
<A HREF="my_next.htm">to my next page</A>.

And <A HREF="basics.htm#quick">Go back to the basics</A>
</BODY>
</HTML>

The HTML, HEAD, and BODY tags are always required on every HTML page.

Go to your page. to see what this HTML does.

The BODY tag - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
The BODY tag defines the basic color scheme for your page. The basic format is:
<BODY BGCOLOR="White" TEXT="Black" LINK="Blue" VLINK="Purple" ALINK="Red">
The parameters are of the form parameter="property". Always separate the parameters from each other by at least one blank space.
If none of the parameters are included (just a <BODY> tag), then all the colors will be the browser default. These colors are set in each viewer's browser.
If you specify colors here, the ones included will be used in your page (unless the viewer has specified to always use their own colors, overriding the colors specified in your BODY tag). Only the colors you are worried about need to be specified.
These parameters have the following meaning:
(use parameter="color_name" or ="#hex_code_for_color")

BGCOLOR
The background color to be used (good to specify even if you have a background image, since this influences the color of horizontal rules and table borders).
TEXT
The normal color to be used for text on the page
LINK
The color to be used for links shown on your page (normally all links are shown underlined)
VLINK
The color a link will be once the viewer has visited that link location (Visited Link).
ALINK
The color a link will be while the viewer is clicking on the link (Active Link)
An Additional parameter that can be specified in the BODY tag is for a background image.

BACKGROUND
This parameter defines an image to be used for the page background. The image can be either a .jpg or .gif image. It will be repeated in both the horizontal and vertical directions to completely fill the page (see my BACKGROUNDS page for more directions on using backgrounds).

HEADINGS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Headings are used to provide the structured outline for your page, although commonly the headings are mis-used just to display text in larger fonts. Headings always include a blank line before and after them, so cannot be used within a line or when different font sizes are desired on the same line. The heading number indicates the size.
Note that the smallest headings have the largest numbers while the smallest FONT SIZE is the smallest number (see the next section).

Headings can be centered or right justified if desired by including the ALIGN=left|center|right attribute. (Normally headings are left justified).

H1 - HEADING 1

H2 is right justified

H2 - HEADING 2

H3 is Centered

H3 - HEADING 3

H4 - HEADING 4

H5 - HEADING 5

H6 - HEADING 6

TEXT ENHANCEMENTS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

A number of options are available for enhancing the text you place on your web page.
There are special tags to specify text as BOLD, italicized, etc.
The tag will allow changing the size and color of the text. FONT changes can be set for paragraphs, words, or individual letters, allowing you a great deal of flexibility in laying out your web page..

Font sizes can be set explicitly . Different font sizes can be used on the same line as well. Use


<FONT ...>text</FONT>

to enclose the text you want to change.
The tag used for the first example here is: FONT SIZE=1

FONT SIZE=1 (smallest) FONT SIZE=2 FONT SIZE=3 FONT SIZE=4
FONT SIZE=5 FONT SIZE=6
FONT SIZE=7 (largest)

Special tags can be used to change the characteristics of what is displayed. Some of these are shown here. Use BOLD to get the BOLD effect.
Use Italic to get the Italic effect. The Emphasis element, coded as Emphasis, typically is the same as Italics, but could change in the future.
Other Character formatting elements include

	`<BIG>Big</BIG>` - Big text (Same effect as `<FONT SIZE="+1">`)
	`<BLINK>Blinking</BLINK>` - Blinking text (try not to use too much)
	`<SMALL>Small</SMALL>` - Small text (Same as `<FONT SIZE="-1">`)
	`<STRIKE>strukthrough</STRIKE>` - Text that has been ~~struckthrough~~
	`<STRONG>strong</STRONG>` - Text with strong attribute (Like bold `<B>`)
	`<SUB>Subscript</SUB>` - Shows as_Subscript
	`<SUP>Superscript</SUP>` - Shows as^Superscript
	`<TT>Teletype</TT>` - TypeType (or `Teletype`). (`<CODE>` has the same effect.)
	`<U>Underlined text</U>` - Underlined text (doesn't show up in all browsers).

The  tag can also be used to set text colors. (You can include both the SIZE and COLOR parameters in the tag if you want.)
Red will set the word Red to red (or any other color). You can set adjacent characters to different colors if you want.

Remember to check what you have done with a browser to make sure you can read the colored text against your background.

RULERS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

The horizontal rule tag, <HR>, is used to insert a line across the page to help divide topics.

<HR> gives a simple rule, shown shaded.

You can show the bar solid with NOSHADE specified (<HR NOSHADE>)

You can show the bar wider (<HR SIZE=6>)

And wider without shading (<HR SIZE=6 NOSHADE>)

You can also center the ruler (or position it to the left or right) and limit the width of the ruler (<HR WIDTH=200 ALIGN=CENTER SIZE=4 NOSHADE>)

ALIGNMENT - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Text can be aligned in different ways to enhance readability. You can justify text to the right or left or center it. You can use the BLOCKQUOTE tag to indent a paragraph. You can also use the FONT tag to change the size or color of the font you are using for added emphasis. Most HTML editors have the capability to select the text you want to emphasize and have the tags added with a simple mouse click.	You can center the text (<CENTER>...text...</CENTER>) Text can be centered in a table cell or in a following paragraph, such as this one. Additional paragraphs can be added (separated from the previous paragraph here by the line break tag (<BR>), which starts a new paragraph, but without a blank line. The paragraph tag <P> starts a new line here, but adds a single blank line first. The text, however, will remain centered until the closing </CENTER> tag.
	If you do nothing, text will be justified to the left, like this paragraph. By enclosing the text in <P ALIGN=RIGHT>...text...</P>, you can force the paragraph to be right aligned (next to a photograph or in a table). .Left alignment is the default. Just enter text without any special tags to get left justified text.
	A block of text can be indented from a preceding and following paragraph (left justified, but indented on both the right and left) by using the <BLOCKQUOTE>...text...</BLOCKQUOTE> tags. This allows you to add some information, set off from the remainder of the text. Both margins are indented, as well as having a blank line before and after the text. This will add some special emphasis or break up the text for easier reading by the viewer.
	Normally, one or more spaces in the source are condensed to one space by the browser. If you want to actually have more than one space, say to look like a tab, you can insert the special symbol for a non-breaking space (where more than one will not be reduced to a single space), ` ` (you need to enter all six characters!). Thus, by including 6 of these at the start of the next paragraph, we get the following: This paragraph now appears to have been tabbed over when started. Following sentences (and paragraphs) adhere to the normal rules for spaces.

Creating Links from Your Page - - - - - - - - - - - - -

Links (often referred to as hyperlinks) are the way you can direct a viewer to another page, to view an enlarged image, select a music piece, or to download a file from your site.

Links are of the form:

<A HREF="name">text for link</A>
This code would result in the following: text for link
Clicking on the underlined text would take the action described below.
The following definitions apply for the name field.

URL (http://....)
Open a page from a different site in this window
Example: <A HREF="/SiliconValley/Park/6415.index.html">Go to the Jim's page</A>
page.htm
Open a page from my site in this window
Example: <A HREF="my_pics.htm">View photo page</A>

#place
Move location in this page with name place to the top of the window
Example: <A HREF="#topofpage">Go to the top of the page</A> will set the top of the browser window to the line in the page containing the tag <A NAME="topofpage"></A> when the link clicked
picture.gif
Opens a page from your site with just the image on it (works for .jpg of .gif). Good when you display a thumbnail of a photo (which will load fast) with the full size image available when the viewer wants it.
Example: <A HREF="vacation_photo.jpg"><IMG SRC="small_vacation_photo.jpg"></A>
(This uses a small photo (a thumbnail) as the active link to the big photo)
song.mid
Load and start playing a MIDI file
file.zip
Start a download of the named zip file

The text for link can be any text you want, or a picture, or both.

Note: If you are using frames, you need to include a TARGET="frame_name" parameter. (See the Frames portion of this tutorial for details.)

Adding an E-mail Link to Your Page - - - - - - - - - - - - -
An e-mail link on your page is similar to other links above, except it opens a browser e-mail window for you when clicked.
The e-mail link is of the form:
<A HREF="mailto:e-mail_address">text for e-mail</A>

Again, you can use an image and/or text for the active link.

Automatic Links to Your Page - - - - - - - - - - - - -

If your Web site changes locations, you can automatically direct users from the old URL to the new one. Doing so is very easy. Just above the </HEAD> tag, add the following line:

<META HTTP-EQUIV="refresh" CONTENT="10; URL=http://www.newurl.com" >

where 10 is the number of seconds and http://www.newurl.com is the page to jump to. You should also include a regular hyperlink (see above) on the same page for those users who don't want to wait 10 seconds or have browsers that don't support the tag.

Note: This page created another browser window because of the TARGET="WINDOW" parameter in the <A HREF= ...> tag that got you here. You can simply close this browser to return to the prior page (which is in its own browser window).

To the top of Web Page Basics

Comments or suggestions:

Send mail to Jim.

If you need some help creating your own web pages, send me e-mail.

This page hosted by Get your own Free Home Page

Quick Start	BODY tag	Headings	Horizontal Rulers	Aligning Text	Text Enhancements
Links	Automatic Links	E-mail Link