HTML or Hypertext Markup Language is the computer language websites are written in. It's the basic building blocks of the internet. Websites are made up of a number of HTML files linked together. Each file contains tags that tell the browser how to display the information.

Tags are the control codes for building an HTML document.

Tags define the basic page appearance such as paragraphs, lists, table, text styles, fonts, colors, etc.

A core set of standards are supported by all browsers, while some others are supported by only some browsers.

To create an HTML file, all you need is a simple text editor (such as SimpleText) that can save a file as ASCII text. You can also do it on ClarisWorks or Nisus but you have to remember to save it as a "Text" file instead of a regular filr. Of course you can always use HTML editors (such as Claris HomePage) where you don't have to know HTML. However, it is a good idea to understand HTML even if you use an editor.

It is very important to create your web page and HTML files in an orderly manner. This makes them easier to read and edit, easier to trouble shoot, easier to upload onto a server, etc.

When naming your files always use one word names with the .htm or .html extension. If creating files on a Windows machine, always use .htm. On a Macintosh, you can use either. When the browser sees this extension, it knows to interpret the file as HTML rather than straight text.

File name Examples: index.htm catslist.htm histreport.html

*Remember to create a folder with a one word name to store all your pages and an images folder with in that to store all your images.

The basic HTML tag has four parts:

• An opening delimiter, the less-than ( < ) symbol.
• The tag name
• One or more switches that set variables for the tag.
• A closing delimiter, the greater-than ( > ) symbol. ie:

<b>

Definitions:

• Delimiter - A character or command that indicates the boundaries of a section < >.
• Switches - Controls found within HTML tags that set different characteristics for that tag.
• Variables - Values that change.

*You don't need to use a switch with a tag. Not all tags have switches, and if they do, and you don't use one, it will select the default. Tags are not case-sensitive.

Check here for a good reference of HTML Tags.

Some tags stand alone. For example, inserting a graphic using an image tag. Other tags create a state that stays in effect until you turn off the tag. For example: the bold command <B> stays on until you turn it off </B>.

To turn off a tag, you must use a slash ( / ) in front of the tag (within the brackets)

* It is really important to remember to turn off tags.

Using the same overall structure for your HTML files is important. Be consistent. Space between segments or even between tags. The blank spaces will not effect your document.

Building a Page (HTML File):

1. Start each file (page) with a start-HTML tag. This tag tells the browser that the file contains HTML tags. The start tag looks like this:

2. Next, create the heading section by typing the head tag like this:

3. Set a title for the page. The title tag is one that you turn on and off. The value between the on and off tags is what appears in the title bar at the top of the browser window.

4. End the heading section:

5. Put a few returns to add some white space. Then start the body section. The body is where the contents of your page go. Everything here appears in your reader's browser window.

6. Create your page, typing text and tags as necessary.

7. At the end of the page, end the body section;

8. Finally, type the end-HTML tag

*It is probably best to keep each tag on a separate line, making it easier to see what is going on and edit.

Tags let you build your webpage. These basic tags will allow you to break lines, create paragraphs, make headlines, and change type's attributes (ie; bold italic, etc)

The Break Tag (<br>)

The Break tag tell the browser to display the text that follows it on a separate line with no space in between.

The Paragraph Tag (<p>)

The paragraph tag tell the browser to display the text that follows it on a separate line and to add extra space above it to make a new paragraph.

The paragraph tag has one switch: align. You can align text in three ways:

Left. The default is left. Text will automatically line up on left margin.

Right. Type <p align=right> to send the text to the right margin.

Center. Type <p align=center> to center text in middle of page.

The Attribute Tags:

The attribute tags tell the browser how to display the text that follows them.

• bold text - <b>
• italic text - < i >

These attribute tags must be turned on and off.

Headline Tags:

To make text smaller or larger, you use the headline tags. There are six different levels of headlines from H1 to H6. The smaller the number, the larger the type size. <h1>Todays News!</h1> The headline tag also has on switch; align. (left, right, center) <br> - Forces a new line in the page. <p> - Forces a new line with a space before it. <b> - Sets text to bold < i > - Sets text to italic.

Font Tag:

The font tag tells the browser to display the text that follows it a the specified size and/or color. They must be turned on and off.

The font tag has two switches: size and color.

Size: Besides using the heading tags to change text size, you can also use the font tag. The most common way to describe font size is in relation to the current size. You can tell the browser to set the type larger or smaller than the currently displayed size. So, if you want the type alittle bigger than the type before it, you'd type <font size=+1>. To have the type alittle smaller, type <font size=-1>.

Color: Colors are described by either name or hexadecimal number which describes the color value. The color name or hexadecimal number must always be surrounded by "quotation marks." You can see the number codes for various colors at Number Codes.

Block-Quote Tag:

Use this to indent a portion of your page. Remember, it must be turned off.

You can create several kinds of lists;

Unordered List: <ul>

Each item is preceded by some sort of bullet.

1. Type the undordered-list tag <ul>
2. On the next line, type the list-item tag, <li>
3. Type the first list item.
4. On the next line, type another list-item tag, <li>. Then type the second list item.
5. When your reach the end of the list, type </ul> to close the list.

Here's an example:

<P>

We will look at lives of three social animals:

<ul>

<li>Coyotes

<li>Lions

<li>Elephants

</ul>

It would look like this in your browser:

You can specify the type of bullet you want by adding a switch to the start list. <ul type=disc>

There are three types of bullet settings: Disc ( • ), circle ( o ), and square ( ).

Ordered Lists: <ol>

Each item is preceded by a number or letter.

Use the ordered-list tag, <ol>, everything else is list the unordered example above.

Switches:

• <ol type=I> produces a numerical list with roman numerals
• <ol type=A> produces a alphabetical list.
• <ol type=1> produces a numerical list. This is the default. so not using any switch would produce the same results.
• <ol start=15> starts a list with a specified number other than 1.

Nested lists:

You can combine different kinds of lists to nest your list in an outline form.

To link your page to other pages, you create links starting with an anchor.

Anchor Tag: <a>

1. Put the cursor in front of the text or graphic that will act as the link.

2. Type the anchor tag:

3. Type a space.

4. Type the href switch and an equals sign (href stands for "hypertext reference")

5. Type a quotation mark, the URL to which you want to link to , and another quotation mark. If your linking to another page within your group of webpages, you just put the name of the file in quotes instead of the entire URL. (ie: "lewis.htm")

6. Close the tag.

7. Move to the end of the linked text or graphic and type an end-anchor tag.

E-Mail Links:

To make a link a reader can click on to send you an e-mail, you follow the same steps as above except add mailto: in front of the e-mail address.

To add graphics to your page, use the image tag. Graphics should be saved in your web folder first as gif if they are artwork, or jpeg if a photograph. You don't put the images in an "images" folder like you do in Claris HomePage, the browser won't find them.You can convert and scale them using Graphic Converter. Once you have them in a usable format and scaled to the correct size in your folder, you are ready to insert them into your page.

The image tag tells the browser to display a specific image at this point in the page. There is no off image tag. These are the basic switches:

• Source (src). This is the location and name of the image you are using. Don't forget quotation marks.

• Alignment (align). You can align the image to the right, left of page. You cannot center it. If you want to center it, try to put a center-aligned paragraph above the image.
• Width. Width of the image in pixels.
• Height. Height of image in pixels.
• Border. Width of the border around the image in pixels.

To insert an image;

1. Go to the location in your HTML file where you want the image to appear.

2. Type the image tag

3. Add the name of the image with the source switch. Remember to enclose the image's name in quotes.

4. Add other switches, such as the image's height and width. (you can get this info from Graphic Converter) You may be able to get away with out adding the width and height.

5. Close the image tag

You insert a background image or color as a switch in the <body> tag

1. Back at the beginning of your HTML file, just after the head tags, type or go to the body tag

2. Type the background switch, followed by the name of the image for your background in quotes.

3. Type the background-color switch, followed by the background color you are using. If you just want a background color and not a pattern or image, leave that part out.

4. End the body tag

The switch or changing text color is "text=000010"

Basic Table tags:

Table swithes:

Border lets you set a border around each cell <table border=1>

Width lets you set the table width as either a fixed value or as a percentage of the browser window.

Cellspacing lets you put extra white space between the cells

Cellpadding lets you put extra white space inside the cells

Bgcolor lets you set a color for the table cells