Topics:

How to Create a Web Page

Sections:
An Introduction to HTML and tags
A simple, no-frills at all web page
An extensive list of tags for your page (Special Tags,Text Formatting and Styling, Lists, Tables, Links/Anchors, and Forms)
Tips for a successful page
Uploading your page to the web
Frequently Asked Questions about Creating a Web Page

An Introduction to HTML and Tags:

Web pages are written in a computer language called HTML. HTML stands for Hypertext Markup Language. HTML is actually very simple to learn, but you first need to understand this: web pages are really just plain text files, which the web browser uses to create the page you see. It's like using a blueprint to build a house. The blueprint is the HTML file, the carpenter is the web browser, and the house is the web page that you see. To see the HTML code of this page, click on the View menu of your browser and select Source. The commands you use in HTML are called tags. All tags are contained in the < and > symbols, so that the browser knows that the text bewteen them is a command, and not text to be displayed. A very simple tag in HTML is the underline tag. Here is what the code looks like that would underline some text:

<u>This text will be underlined</u>

Now here is that code interpreted by the web browser:

This text will be underlined

Notice that the underline tag is the letter U. This is a nice feature of HTML; all tags stand for what they do. For example, to make text italic, you use the <i> tag. Pretty nice, huh?

Notice that at the end of the example code above that at the end of the fist sentence there is a "/" in the tag. This tells the browser to end the underlining. When you see or use a "/" in HTML, think of the word "end."

NOTE: HTML ignores whitespace, carriage returns ("enters"), tabs, and spaces when not in text. Special tags and codes are used to create line breaks, tabs, and spaces. You will see these tags and codes in the tag table later on.

You be now be wondering how we got the < and > symbols to appear on this page (normally, the web browser recognizes them as part of a tag, and does not display them). To get special characters that the web browser normally does not display on the screen, you need to use a the special code for that particular symbol. We'll explain this later.

A simple, no-frills at all web page:

All web pages require certain tags in order to appear properly. Here is what you'll need to get started on your first page:

<HTML>

<HEAD>

<TITLE> The title of your page goes here </TITLE>

</HEAD>

<BODY>

This is where you would put all your text, images, and everything else that will show up on the page

</BODY>

</HTML>

Now, here is what all that means:

<HTML> tells your web browser that this file is a web page, and to process the commands in it.

<HEAD> signifies the beginning of the heading, where the title, and other tags go, that won't appear on the body of your page.

<TITLE> signifies the beginning of the title of the web page. The title of the page will appear in the title bar of the viewer's browser, not on the page itself.

</TITLE> signifies the end of the title.

</HEAD> signifies the end of the heading.

<BODY> signifies the beginning of the body of the web page. This is where you put your text, images, links, and most other things, whatever they may be.

</BODY> signifies the end of the body. We have found that this tag can be left off, but it may be needed in some way, depending on your page.

</HTML> signifies the end of the web page. Also not necesarily needed, but put it just to be safe.

That's it! Just copy those tags into any text editor you have, save it as an *.htm or *.html file, and open it in your web browser. However, with what we've just shown you, you'll get the world's most boring web page ever. Go on to the next section for an extensive list of tags.

An extensive list of tags for your page:

Before we get to the tags, there are a few things you should know about using tags:

You can write tags as all upper-case, all lower-case, or mixed, whatever you want.
Some tags have attributes, or additional information needed. For example, for the image tag, one attribute is the name of the file you want to display.
When using tags that have attributes, the value (a file name, number, etc.) can be put in double-quotes, but doesn't have to be. If you do use quotes, make sure you don't forget the ones at the end of a file name, a number, etc., otherwise you'll get really weird results. If your page does look really weird and you can't figure out why, make sure you didn't forget any quotes.
Some tags produce very similar results. Some of these aren't as common because other tags do nearly the same thing, and the less-common tag isn't as widely supported by somebrowsers. The more commonly-used tag (the one you should use) is listed first. For example, Code and Tele-Type are almost the same. These tags will be grouped together below.

All of these tags will require an end tag unless noted.

Special Tags:

These tags are special mainly because they don't fit into any of our other tag categories.

The <BODY> is very important to your entire page. Here are some attributes that you may want to add to this tag to make your page look a lot nicer:
Add BGCOLOR="color_value" to change the background color your page from default gray to any other color. See Colors and Symbols for a list of colors you may want to use.
Add BACKGROUND="image_file" to use an image as a background. The image will be repeated all over the page, so don't worry about making one big enough to fit the whole page. Make sure that the color of the background image and the color of the text contrast enough so the text can be read.
Add LINK="color_value" to change the color of the links on the page.
Add VLINK="color_value" to change the color of the visited (used) links on your page. This color is usually slightly darker than the LINK color
Add ALINK="color_value" to change the color of the active links on your page. An "active" link is one that the user has clicked on, but hasn't taken their finger off the mouse button yet. This attribute is basically useless, and isn't commonly used--or supported.
The comment tag:. This tag allows you to create comments on your page--text that won't show up on the page, but can be used (usually by the creator of the page) as a reference. Server-Side Includes also go in the comment tag. We describe those in the CGI and SSIs section. There is no end tag for comments.

Text formatting and styling:

These tags are the easiest to use. Simply put the start tag (shown) and the end tag (as shown, with a "/" after the "<", i.e. "</u>" around the text you want to apply that style to.

<u> Text will be underlined.

<i> or <em> or <cite> or <dfn> Text will be italic or emphasized or citation or definition style.

<b> or <strong> Text will be bold or strong.

<tt> or <code> or <var> Text will be Tele-Type or Code or variable style.

<kbd> Text will be Keyboard-entry style.

<key> Text will be keyword style.

<blockquote> Will indent, and block-off text. For example:

This is what blockquote does. No indent or line break tags were used here, just <blockquote>.

<strike> Text will be ~~strikethrough~~ style.

<sup> Text will be ^Superscript.

<sub> Text will be _Subscript.

<hr> Inserts a horizontal rule (line) on your page. No end tag needed. Has attributes:

Used as shown: a thin, black horizontal line, all the way across the page.
Add WIDTH=50% and the line will take up half the page. You can use any percent value you want.
Add COLOR=(any color value) will make the line any color you want.
Final example: <HR WIDTH=90% COLOR="#FF0000"> will make a red horizontal rule, 90% of the page's width.

<center> Centers text, images, etc. on the page.

<br> Creates a line break. (Since web browsers ignore whitespace (skipped lines, excess spaces, tabs, etc.) you need to use this to move to the next line. No end tag needed.

<address> This tag is usually used at the bottom of the page, where you find information about how to contact the author of the page, a phone number, etc. All it really does is make text italic.

<p> Used for formatting paragraphs. Has attributes:

Used as shown: creates a "double-space." Equal to two <br>'s. Simply put, it's the same as hitting the enter key twice in a regular typing program. No end tag needed for this use.
Add ALIGN="(CENTER or RIGHT)" to center or right-align text. You can use ALIGN=LEFT, but text is automatically left-aligned for you.
Final example: <P ALIGN="RIGHT"> will make text aligned along the right margin, until a </p> is reached.

<font> Allows you to change the size, style, and color of the text on your page. Has attributes:
Add color="color_value" to make the text a certain color. See the Colors and Symbols section for how to use color values.
Add size="point_value" to make the text a certain size. There are two ways to set the size of text: You can set it do a definite size, by using something like <font size=3>. Or, you can set the font to a certain number of sizes larger or smaller than what the user has the default set at. For example, <font size=+3> will make the text 3 sizes larger than the default. To make text smaller, use something like <font size=-3>.
Add face="font_name" to make the text a certain font. For example, <font face="Arial"> will set the font to Arial. NOTE: Not all fonts are supported by all browsers, computer types, and individual computers. Your computer may support a particular font, but chances are that everyone else's doesn't. Use fonts only when you're sure other people can see the font as you intend.
<img> Inserts and image on the page. No end tag needed. Has attributes:
- Add SRC="filename" This attribute is required. This is how you tell the browser what image you want to display. (*.gif and *.jpg are the image file types you can use, although others are starting to show up).
- Add WIDTH="amount" This attribute allows you to scale the image to take up a certain percentage of the page, a certain pixel size, or you can specify the exact size of the image (the actual width the image), to speed up page the loading of the page slightly.
- Add HEIGHT="amount" This attribute does the same things as the above, but it changes the height of the image, not the width. A few things, though: Be careful using a percent value here: it may turn out really big. Also, setting only the height or width of an image as a percent value will also increase (or decrease) the other dimension so that the image is not distorted. If you want to stretch an image across the page without automatically adjusting the other dimension, specifiy the other value as the pixel value of the image(if you set WIDTH to a percent, set HEIGHT to the height of the image, in pixels.)
- Add ALT="any text" This attribute allows you to specify some text to display if the user is not able to display images with their browser, or have disabled image loading. You cannot use tags in this attribute, i.e., you cannot put a link here to be used if the image does not load.

<pre> Preformatted text: This tag will allow you do display text as it was written in the code. Tabs, skipped lines, etc. will all be displayed (instead of ignored by the browser) and text will not wrap to the next line automatically. For example, the following text is preformatted. No tags were used, except for <pre>:

This text is preformatted.			Notice how you can use tabs and lots of spaces.   

You 
   can 
      also
           include
                  as
                    many
                         lines 	                               tags.
                               as                          any
                                   you               using
                                       want, without

Lists:

List tags are a way to, well, make lists. These are also very easy to use. You can make ordered (numbered) lists, unordered (not numbered) lists, and a few more. Here's an example of ordered and unordered lists:

Here's the first list item.
Here's another.
And here's a third.
You can also make "nested" lists:
- Here's a unordered sub-list of this ordered list. Simply start a new list before you end the first one.
  1. You can make as many nested lists as you want. This list is an ordered list nested in the unordered list, which is nested in the original ordered list.
  2. Here's another list item.
- Here's another.
And finally, a list item in the original list.

List tags:

<ol> Starts an ordered list. Make sure you include ends tags for all lists, or the rest of the page will become a list.
<ul> Starts an unorderd list.
<li> Signifies a list item. Use this every time you want to add another item. No end tag needed.
<menu> Starts a menu list. See examples below.

List code example:

To make this list:

Item 1
Item 2
- Add a nested list:
- Item 1
- Item 2
- Item 3
Item 3

Use this code: (This can be all on one line, it is formatted for clarity)
<ol> <li>Item 1 <li>Item 2 <ul> <li>Add a nested list: <li>Item 1 <li>Item 2 <li>Item 3 </ul> <li>Item 3 </ol>

List style examples:

This is an order list
Item 2.
Item 3.
Etcetera...

This is an unordered list
Item 2.
Item 3.
Etcetera...

Tables:

Tables are another way to put data on your page. Here's a typical table you will find/use on web pages:

Here's a cell.	Here's another
...and another	and one more!

Here's one that has most of the things you can do to a table on it:

Here's a cell		Here's another
...and another...	and another.
Yup! You guessed it...	Another cell!!!

Table Tags:

<TABLE> Signifies the beginning of a table. Has attributes:
- ROWS= Sets the number of rows in a table. NOTE: We have discovered that, in some cases, this attribute and the <COLS> attribute can be left out. Also, somethimes you can leave out the <TABLE> tag, and just use the <TD> and <TR> tags.
- COLS= Sets the number of columns in the table.
- BORDER Sets the border of the table. If you do not specify a number, it will be set zero by default. A border of 1 or 2 is typical. Examples:
  
  BORDER=1
  BORDER=5
- CELLSPACING Sets how far apart the cells are spaced. 1 or 2 is commonly used. Examples:
  
  CELLSPACING=0 CELLSPACING=0
  
  CELLSPACING=5 CELLSPACING=5
- CELLPADDING Sets how far from the edge of each cell text and images will be spaced. Think of this as the margins of each cell. Examples:
  
  CELLPADDING=0
  CELLPADDING=5
- BGCOLOR= Sets the background color of the table. NOTE: This is different than setting the background color of each individual cell. When you set the background color of the entire table, everthing is set to that color. This will make more sense when you see the example for the background color of each individual cell. Examples:
  
  BGCOLOR="#FF0000"
  
  BGCOLOR="#0000FF"
<td> Defines a cell of data. No end tag needed, but you can use one. Has attributes:
- BGCOLOR= Sets the background color of each individual cell, unlike when this is used in the table tag. Examples:
  
  bgcolor="#FF0000" bgcolor="#0000FF"
  bgcolor="#FFFF00" bgcolor="#00FFFF"
- ROWSPAN= Sets how many rows a cell will span. Examples:
  This cell is ROWSPAN=2. This is a regular cell.
  So is this one.
  
  This is a regular cell. This cell is ROWSPAN=3 This is a regular cell.
  So is this one and this one...
  and this one... and this one.
- COLSPAN= Sets how many columns a cell will span. Examples:
  This cell is COLSPAN=2.
  This is a regular cell. So is this one.
  
  This is a regular cell. So is this one and this one.
  This cell is COLSPAN=3
  This is also a regular cell... and this one... and this one!
- ALIGN="(CENTER or RIGHT)" Sets how text, images, etc. will be aligned in a cell. ALIGN=LEFT is the default; you do not have to specify this.
- BACKGROUND="image_file" Allows you to use an image as the background of a cell. This attribute is supported by Microsoft Internet Explorer, not Netscape Navigator.
<tr> Signifies a row in a table. Can be used two ways:
-At the end of the last cell of a row, like the way you would use the break (<br>) tag.
-Or with <tr> at the beginning of a row, and </tr> at the end.

Links/Anchors:

Links are what makes the web so special. To go to a page, all you have to do is click on the link and you're there. But how do you make them? Here's how:

First, here's what a link looks like: <a href="nextpage.html">Click here to go to the next page...</a>. The "nextpage.html" part means that this link will go to nextpage.html. The Click here to go to the next page... is the text that will show up on the page, a different color and underlined (usually). Try to make this text somewhat descriptive of where the link goes.

There are two kinds of links (this isn't really very important, so don't worry if you don't get it):

Absolute Links are links that point to a specific document on a specific server. The address part (the href="filename" part) of the tag is the full address of the file (it starts with "http://..."). Absolute links are commonly used when you want a link to go to a page that you don't control, or is not on the same server. This may make more sense after you read about Relative Links.
Relative Links are links that only specify a document on the same server as the file that the link is in. Use relative links when you want to go to another page of your web site. For example, to go to the file nextpage.html of your own web page, where all files are in the same directory on the same server, you would use something like this: <a href="nextpage.html">Click here to go to the next page...</a>. You could use Absolute Links all the time, but Relative Links are shorter to type, and if you ever move your page to a different server, you won't have to change all of you links.

Using anchors

Anchors are a way of making links jump to a certain point on the same page, or a certain point on a different page. They're really easy to add.

To specify a point to jump to:
To specify a point on your page for a link to jump to, simply add <a name="any name"> where you want the link to go to (replace any name with whatever you want).

To make a link go to that point:
To make a link go to a point specified, use the follwoing code: <a href="#any name">Click here to go to any name!</a>. It's the regular link code, only that the address is a point on the page. Make sure you include the "#" before the name of the anchor, but not on the anchor itself!

TIP: You can use a link to jump to a new file AND a anchor on that file with one link. Simply use the filename and anchor name combined in the address part of the link code. For example, <a href="nextpage.html#any_name">Click here to go the next page AND to go to a point on that page!</a> will go to the anchor any_name on nextpage.html.

Forms

Forms are the most popular method used to get information from the user. Adding forms to your page is as simple as using tags, but handling the data the user enters is not so easy. See CGI & SSI's for how to handle the information sent.

NOTE: A form is a set of fields that the user enters data into, not each individual field. You can have as many fields as you want in a form. Here are the tags: The tags below will only create the actual field. To put instructions next to the field, simply type next to the tag. For example:

To create this: Check here if you're new to the Net:
Use this code: Check here if you're new to the Net:<INPUT TYPE=CHECKBOX>

<FORM> Starts a form. Has attributes:
- ACTION= Put the full address of the script that will handle the data here. This attribute is required.
- METHOD=(GET or POST) This is how the data will be sent to your script. Use GET if you expect a small amount of data (GET does not really "get" anything-its sends data, just like POST. It's just named badly.). Use POST if you expect a lot of data (if you have text text areas, use this method, as anyone can enter lines and lines of data in text areas). This attribute is required if you want the method to be POST, as GET is assumed if a method is not specified.
- Final example: <FORM ACTION="http://www.myserver.com/mystuff/cgi-bin/myscript.cgi" METHOD="POST">
<INPUT TYPE=TEXT> Creates a one-line text box: Has attributes:
- MAXLENGTH= Sets the maximum number of characters the user can enter in the field.
- SIZE= Sets how long the box will appear. The example above has a size of 20.
- NAME= Sets the name of the box. This will not show up, but will be sent along with the other information to your script.
- VALUE= Allows you to include some data in a field by default. For example, the example above has a value of "Type here."
<INPUT TYPE=PASSWORD> The same as the above, but when data is type in it will show up as only *'s. Has the same attributes. For example, the following box has "password" typed in it, but it shows up as *'s. Go ahead, try it:
<INPUT TYPE=RADIO> Creates a radio button: . When these are used grouped togther and all have the same name value, only one can be checked. Try clicking on more than one of these: . Has attibutes:
- Add CHECKED to make the button selected automatically (by default).
- Add NAME= to give the button(s) a name. By giving more than one button the same name, you create a set of buttons, of which only one can be checked. This attribute is required.
- Add VALUE= to give the button a value. This must be unique to each button, even if it is part of a set. This is what will be sent to your script if the user selected this particular button.
<SELECT NAME="any_name"> Creates a drop-down selection box:. In order for this to work you need another tag, the OPTION tag. After you define the select box with the above code, use <OPTION VALUE="some_value">Some Value to create the options for the box. After you're done adding the different options, be sure to end the select box with a </SELECT> tag. Here's the code used the create the example given above:<select name="example"> <option value=1>Option 1 <option value=2>Option 2 <option value=3>Option 3 </select>. NOTE: The first option given in the code will be selected by default. If you give your users the option not to answer all of your questions, you may think they answered a question that uses a select box. Although they didn't answer the question, it may seem that way because the first option is automatically selected. To solve this problem, make the first option something like "Choose one below" and give it a value of "default", so if they didn't answer the question, you'll know.
<TEXTAREA> Defines a text area:
Users can type as much as they want into a text area like this one. Go ahead, try it.
Has attributes:
- Add NAME= to set the name of the data that will be sent to the script. This attibute is required.
- Add ROWS= to set the number of rows that will appear (no matter how small you set the size of the textarea, it will scroll if the users types something longer that will appear to fit). The example above is 3 rows high.
- Add COLS= to set the number of columns that will appear. The example above is 50 columns wide.
<INPUT TYPE=CHECKBOX> Creates a checkbox: . These function similarly to radio buttons, but you can select more than one at a time, even if they all have the same NAME. Try it:. Has attributes:
- Add NAME= to set the name of the data that will be sent to the script. This attibute is required.
- Add CHECKED to make the checkbox selected automatically (by default).
- Add VALUE= to give the checkbox a value. This must be unique to each checkbox, even if it is part of a set. This is what will be sent to your script if the user selected this particular checkbox.
<INPUT TYPE=SUBMIT VALUE="Click here to submit the form..."> This will create a button, that, when clicked, will send the contents of the form to your script. You can set the VALUE to whatever you want-- it's what will show up on the button. Example (this example will not do anything, it's just so you can see what the button looks like.):
<INPUT TYPE=RESET VALUE="Reset the Form"gt This will create a button that will clear the form. You may want to include this, but it's not usually necessary. Example (this example will not do anything, it's just so you can see what the button looks like.):

Tips for a successful page:

A web page is no good if no one wants to see it. But how do you know how to make your page worth visiting? Here's how:

Organize. You may know where things are on your page, but the people who will be visiting your site don't. Make it easy for people to get around, and always, always make your point clear. Are people going to use your site for getting information? Ordering your products? Chances are, there are 50 other sites just like yours. If someone can't easily get around your site, or find what they're looking for, they'll leave.
Make your site easy on the eyes. Don't use yellow text on a white background. Don't have twenty animations all going different directions. The point of a web page is to convey information, not make the user sick to their stomach.
Make sure your links work. If you have links to other sites that you don't control, regularly check the links on your page to make sure that they don't go to a page that doesn't exist anymore. There's nothing worse than a link to what sounds like exactly what the user is looking for, only to find that the page that is linked to is gone. You've probably experienced this before, and you know how frustrating it can be.
Don't use too many images. The bigger the images is, the longer it takes to download. And the more of them that you have, the longer it will take. Why should someone wait ten minutes just for your images to download?
Check, double check, and triple-check your spelling and grammar. You wouldn't believe how many "professional" web sites are full of spelling errors and poor English. There's nothing worse than typos all over your page.

Uploading your page to the web:

Uploading your web page is really a very simple task, you just need some information first. The specifics of uploading depend on your ISP. Here we'll explain the general process, and what you'll need to know for those if you using a local ISP. If you're using America Online, Compuserve, The Microsoft Network, or a similar service, uploading will be very different from what we explain here. If you are using one of these services, check with them on how to upload your web page.

Here's what you'll need to do to get your page up and running:

Find an FTP program. We recommend WS_FTP (if you''re using an IBM-compatible computer), which is available at http://www.ipswitch.com. Download it and install it, and read its help file, to get a general idea of how to use it.
Go to your ISP's home page, and find the section on uploading you page. (If your ISP allows you to have your own web page, this section should be easy to find.) There you will find the information you need (host names, how to log on, etc.). They may even provide step-by stpe examples for a particular FTP program. If they do, download the one that they give the examples for, and uploading should be very easy.
Visit most of the major search engines, and submit your page to them. You'll find directions on how to do this at each site. Adding your page to the search engines is how people will find it, otherwise it's just another lonely page on the web.

Frequently Asked Questions about Creating a Web Page

I've uploaded my page and everything seemed to go fine. But when I try to my page with my browser, it says "404: File not Found" or it lists all the files I uploaded. What's going on?
This is a common problem for first-time HTMLers. If you access your site without specifying a file (i.e. http://www.yourisp.net/yourname) the server will look for a file called index.html or index.htm. If it doesn't find one, it will either display an error message or show you all the files in that directory you specified. So, to solve the problem: either name your web page index.html (or index.htm) or you can add the file name to the address of your page when you try to access it, i.e. http://www.yourisp.net/yourname/mywebpage.html.

bgcolor="#FF0000"	bgcolor="#0000FF"
bgcolor="#FFFF00"	bgcolor="#00FFFF"

This cell is `ROWSPAN=2`.	This is a regular cell.
	So is this one.

This is a regular cell.	This cell is `ROWSPAN=3`	This is a regular cell.
So is this one		and this one...
and this one...		and this one.

This cell is `COLSPAN=2`.
This is a regular cell.	So is this one.