html tutorial

If you want to write html, you need an html editor. You can use notepad if you want and save your files with a .html at the end, or there are plenty of fancier editors out there that you can get. I like Arachnophilia--far from fancy, but fancier than notepad.

Document Structure

The basic structure of an html page is like this:

<html>

<head>
<title>(title of page goes here)</title>
(meta tags go here, but I'll go into them later)
</head>

<body>
All the stuff you want to appear in the page goes in here
</body>

</html>

Here you can see some examples of tags that must come in pairs, like the head tag. The ending tags for the body and html tags aren't strictly necessary, since nothing comes after them, but it's best to leave them in.

Now to explain some of those tags! The html tag basically just tells the browser what it's looking at. Auxilary information, like the title or javascript definitions, that doesn't need to be inside the actual page goes between the head tags. Previously I said that everything that isn't part of a tag gets printed to the screen, and this is technically true for the stuff between the title tags, but it's a little different there than it is anywhere else. Instead of printing within the browser window, it goes at the top bar of the browser. I will explain metatags later.

Everything that you actually want to show up inside the page should go between the body tags. The body tag itself has some special properties, too. In it you can specify background, text, link colors, page margins, and probably some other stuff that I don't know. Here's what you'd type to get these effects:

bgcolor (background color) background (background image) text (text color) link (unvisited link color) alink (color of link that is being clicked on) vlink (color of visited link) leftmargin (margin between the left side of the window and the text/images in pixels) topmargin (same as above, but with the top side) rightmargin (same as above, but with the right) bottommargin (same as above, but with the bottom)

Here's an example of how these things were implemented in this page:

<body bgcolor="#000000" text="#ebd7ff" link="#aa55ff" vlink="#808080" alink="#ffffff" background="someimage.jpg">

Obviously this page doesn't have a background image, I just added that one so you could see it used. The numbers between the quotation marks are hexadecimal RGB descriptions of the colors, which I will explain in the next section. If no attributes are set, the colors will be the browser's default.

Color

Colors are defined using 6 digits using the hexadecimal (base 16) number system. In hexadecimal, you count from 0-9, then a-f before continuing on to the 2-digit numbers. Therefore, 0 is the lowest digit and f is the highest. The 6 digits are not, however, a single number. Instead, the first two digits say how much red there is in a color, the secod how much green, and the third how much blue. To illustrate, here are some codes and their corresponding colors:

ffffff = white

000000 = black
ff0000 = red
00ff00 = green
0000ff = blue
339944 = dark green
fff000 = yellow
ff00ff = magenta

The a Tag

The a tag is used to create a link. This tag, like the body tag, has some attributes that can be set by the creator of the page, but unlike the body tag, these attributes are required depending on the purpose of the tag. If the tag is creating the link that is going to be clicked on, you need to use the href attribute to tell the browser where to go when the link is clicked. Here is an example of its implementation:

<a href="the_new_page.html">the stuff that will be clicked on goes here</a>

The second tag tells the browser when to end the link and revert to plain text. It is possible to link to any type of file, not just html. However, if the browser cannot read it (if it's a word document, for instance, or some other filetype it doesn't recognize), the user may have to download the file to see it.

If the file you are linking to is in the same folder as the file you are linking from, you only need to put the name of the file and it's filetype extension (the .html, .jpg, etc.). If it is in another folder, but on the same server, you can put a slash ( / ) and the complete url after the server (i.e. /queen_pam/photos/photo.jpg). If the file is on a different server, you need to put the full url starting with the http://. The same rules apply to images, or anything else for which you need the url.

To link to an email address, you do the same thing you would for a webpage, but in the spot where you would put the web address you type "mailto:" followed immediately by the email address, with no spaces.

You can also link to a different location within the same page--i.e. I could link from here to the top of this page. To do so I need to create a target, which requires the name attribute of the a tag. This is what it looks like:

<a name="whatever">

Then to create a link to it, I would need to write

<a href="#whatever">click here</a>

You can use this same method to link to a certain point on another page, too, as in the following:

<a href="some_url.html#whatever">click here</a>

The img Tag

The img tag works a lot like a link, except that you don't need to have 2 tags to define it (unless you're using XML, but that's another programming language, so nevermind). The src attribute is required whenever you use the img tag to give the image's url. The img tag has several other optional attributes, as well. Height and width allow you to give the image's height and width in pixels so the computer can layout the page without having to fully load the images first. These can also be set in percent if you put a percent sign after the number. The border attribute allows you to have a border around an image, or if you set it to 0, prevents a border from appearing if the image is used as a link, as in the following example:

<a href=somepage.html><img src=someimage.gif width="200" height="93" border="0"></a>

You can give the image any dimensions you want, the image will be stretched or squeezed to fit. If you use a small image and make it big on the page, you can cut down on data transfer time, but you increase render time. However, the decreased transfer time will probably be much more significant than the increased render time, so if you can do that you probably should.

To make the text flow around an image, you need to use the image's align attribute. The values for align can be "right," which places the image on the right of the screen while the text wraps on the left, "left," which does the reverse, "top," which aligns a single row of text to the top of the image, wherever that image is in the line of text, "middle," which does the same for the middle, and "bottom," which does the same for the bottom.

If the image does not load, all the page's viewer will be able to see is one of those broken image icons, and they may be left wondering what that image was, especially if was an image with text on it and crucial to understanding something about your webpage. You can tell them by using the alt attribute. Just use alt="some description of your image."

The Font Tag and Other Nifty Text Effects

The font tag lets you specify the font, the color, and the size of some text. In specifying the font you can use the name of any font, but the users will be unable to see the font if it is not on their computers. I believe you can also do this with the body tag, as well as specifying a secondary font if the user doesn't have the first, but I don't remember how right now. The color attribute works the same way as the one for the body tag. Size may be specified at +1, +2, -1, and -2. These are sizes relative to the user's default size. Here is how the font tag would look if you wanted to make some text small, red, and in the helvetica font:

<font face="helvetica" size="-2" color="#ff0000">some text</font>

In some browsers you can also use a numerical value, 3 being default, but I'm not sure if that's true for all of them yet. If you wanted to make the text some other size, you would need to use one of the heading tags (or CSS, but that's another programming language again, so nevermind), which are numbered h1 through h6, h1 being the largest. These, however, create a new line for the text on which they are used, so you either need to use them for a long time or just as a heading, not in the middle of paragraphs. For the section headings on this page, I have used h2. Here's what it looks like:

<h2>The <font color="#ff0000">Font</font> Tag and Other Nifty Text Effects</h2>

(The reason there isn't a font tag controlling the color of the rest of the text in that example is that I set the default color for anything between h2 tags to 8888ff via a CSS script in the header; otherwise I would need to use a font tag for "The," end it, use the red font tag, then use another for the rest.)

You can also make text bold, underlined, italic, or ~~strikethrough~~ (~~or all four!!~~) with the b, u, i, and s tags, respectively. The strikethrough effect can also be accomplished with the strike tag. The format for this, which is the same for all four, is this:

<b>bold</b>

The strong and em tags may also be used to emphasize text, but the text they surround will be either bold or italic, depending on the browser. There is also the big tag, which makes text big and bold, and the small tag, which makes text smaller. There are many other tags, like address and cite, that create certain text effects, but they are so browser dependent and the effects can be accomplished so easily with other tags that I won't bother explaining them.

It is also possible to make _subscripts and ^superscripts via the sub and sup tags. These work the same way as the bold, italic, and underline tags.

The preformatted text, teletype, and blink tags seem to work with only certain browsers, but I'll mention them anyway. The blink tag makes things blink. It only works in netscape. It looks like this:

<blink>This stuff will blink</blink>

When you put text between pre tags, you get preformatted text, which is sent to the screen just the way you type it. You do not need to use tags for returns, you just hit the return key. It also uses a fixed width font, which makes it look typewritten. It does not wrap, however, so do remember to put returns after every line or the words will go off the screen. Therefore, this code:

<pre>Hello
my
name
is Pam.</pre>

would display like this:

Hello
          my
                    name
is Pam.

whereas without the pre tags it would look like this:

Hello my name is Pam.

Teletype tags merely use the fixed width font to create the look of preformatted text. Lines wrap normally, and line break tags must be used to create a line break rather than just hitting return. In the example above, "pre" would be replaced by "tt," and it would be displayed as:

Hello my name is Pam.

To create the effect of text scrolling across the screen, you can use the marquee tag. The scrolling text looks like this:

this text scrolls!

It's kinda cool, but after a while it can get irritating, just like the blink tag. Also, it doesn't seem to work in the newest version of netscape; I don't know about the others.

Formatting

The default paragraph alignment is to the left side of the window. However, it is also possible to align things to the center via the center tag. When used it looks like this:

<center>
Everything in here will be centered
</center>

Another way to align things is using the div tag. The div tag is most useful in conjunction with CSS, but in html it can be used to align things to the right of the screen, which can only be done with tables otherwise. Simply use

<div align="right">
and everything in here will be right-justified.
</div>

You can also specify left or center.

There are two tags that can control line breaking. One is the br tag, which moves the text down only one line and can be used as often as you want. The p tag creates a new block paragraph, but putting another right after it with nothing in between does nothing. The br tag does not need to have a closing tag in html, but some people like to put </p> at the end of the paragraph, too, which causes whatever is next to be placed two lines below the paragraph. The p tag also as an "align" attribute, which allows the paragraph to by right or left justified, or centered. This overrules the center and div tags.

Now for some more complex stuff: blockquotes and lists. The blockquote tag sets the text up the way you would if you put a long quote in an essay or something. It's what I've been using to indent my examples (the stuff in yellow). Here's what the code looks like:

<blockquote>
Everything in here will be indented
</blockquote>

Lists have all sorts of interesting complications to them. There are two kinds: ordered and unordered. For ordered lists you use the ol tag, for unordered you use ul. Both kinds have a "type" attribute which specified what kind of numbers or bullets to use when creating the list. Here are the types you can have:

Ordered Unordered

1 listed by numerals (1, 2, 3... default (don't use type attribute) uses browser's default bullet

A listed alphabetically with capitals disc filled-in circle

a listed alphabetically with lowercase circle empty circle

I uppercase roman numerals square filled-in square

i lowercase roman numerals

Ordered lists have an additional attribute, start, which allows you to specify what number to start the list on. To create an item in the list, you must use the li tag. Here is an example of the code for an ordered list with lowercase roman numerals starting with 3 with 2 items in the list:

<ol type="i" start="3">
<li>item 1
<li>item 2
</ol>

Another type of list is a definition list, which has a term on one line and a definition on the next in an indented block paragraph. The tag to set off the entire list is dl, terms are defined by dt, and definitions by dd. The code would look like this:

<dl>
<dt>term</dt>
<dd>definition</dd>
</dl>

Definition lists are used much more often to shove text around, and so would commonly be seen in something like the following:

Hello
<dl><dd>my</dd>
<dl><dd>name</dd>
</dl></dl>
is Pam.

which would look like this:

Hello
my

name

is Pam.

Tables

Tables are very useful for formatting pages and getting things exactly where you want them. The table tag sets up the table, the tr tag creates a row, and td creates a cell within that row. Thus, the code for a simple 2 x 2 table would look like this:

<table>
<tr>
<td>row 1 cell 1</td>
<td>row 1 cell 2</td>
</tr>
<tr>
<td>row 2 cell 1</td>
<td>row 2 cell 2</td>
</tr>
</table>

There is an additional tag, th, which creates a table header. It's just an ordinary cell with bold centered text, so it's not very useful, but I thought I should mention it.

The table tag, like the img and p tags, has an align attribute. The possible values are "left" and "right," which let text flow around them like would happen with an image, and "center," which centers the table in the window, like would happen to a paragraph.

Also like images, the table tag has a border attribute, which allows you to set the pixel width of the border of the table. In the table above, where I gave the various types of bullets a list can have, the border width was 2. It is possible to control the color of the border and even the color of each side of the border on some browsers, but I don't remember how at the moment.

Other attributes that a table can have include cellpadding and cellspacing. Look back up at the table. The cellspacing controls the space between the cells, and cellpadding controls the space between the words and the edges of the cell.

Tables also have width and height attributes, which allow you to set the width and height of the table in pixels, but height is only recognized by some browsers. If you use "*" for these attributes, it will take up that entire dimension of the screen.

Other attributes of the table tag are background and bgcolor. These work the same as they would in the body tag, but they're only visible in the table. If you also put backgrounds in individual cells, which also have these attributes, they will only be visible in the cellspacing area.

As I just mentioned, td tags have background and bgcolor attributes which overrule the table background which overrules the page background. They also have width and height attributes, though these are only recognized on some browsers. It is good to give these because it allows the browser to render the page before receiving all the information that goes in it. If, however, you specify a width that is too small and there is an image that is bigger than a cell, that cell and the entire page will have to be redrawn, which can be pretty annoying. If you already have some cells in a row and you want the last cell to take whatever space is left in the table, you can give "*" for its width.

Two very useful atributes of td tags are rowspan and colspan. Rowspan allows a cell to extend for more than one row and colspan allows a cell to extend for more than one column. They can be any integer. You can even use both at once if you want.

To tell the browser where to start the text in a table cell, the td tag has the attributes align to set horizontal alignment and valign to set vertical alignment. The values for align are "left," "right," and "center." For valign they are "top," "bottom," and "middle" or "center."

The last attribute of the td tag is nowrap. It doesn't need to have an equal sign or any value assigned to it. It prevents the text in the cell from breaking to fit the screen, so if the line in the cell is too long it will stretch the table and the user will have to scroll the browser horizontally to see the end of the line.

Now we can create a much more complex table using the following code:

<table cellpadding="50" cellspacing="30" border="5" width="600" bgcolor="ff0000" background="pictures/space.gif">
<tr>
<td bgcolor="00ffff" rowspan="3" valign="middle" align="center" nowrap><font color="000000">Hi</font></td>
<td width="*" colspan="2" align="right">Hi</font></td>
</tr>
<tr>
<td bgcolor="fff000" background="jumpingdragonfrog.gif" rowspan="2" valign="top" align="left"><font color="000000">Hi</font></td>
<td bgcolor="ffffff" valign="center" align="center">Hi</td>
</tr>
<tr>
<td background="jumpingdragonfrog.gif" valign="bottom" align="left" heigt="100"><font color="000000">Hi</font></td>
</table>

It looks like this:

Hi Hi

Hi Hi

Hi

And now you may be thinking, wow, tables are really complicated, I think I wont use them. Well that was just a really complicated example where I tried to use everything, you don't need to do that. In fact, seeing how garish that table is, you probably shouldn't. There are a lot of simple ways that tables can make themselves useful -- the layout of this page, for instance. The text does not go to the edge of the window because I have used a table to make it narrower, which makes it easier to read. They are also used to put images together that have been broken apart, like this (you can go to view source in your browser to see how I did it if you want, just ignore the onMouseOver stuff).

Oh, and just as a side note, table cells won't show up if you don't put anything into them. So if you want to have just a blank cell somewhere for formatting purposes, you can just put in a blank space. However, that doesn't work if you just use the spacebar, you need to use the character code for a non-breaking space, which looks like this:

 

The name Attribute

Before I get into forms I need to explain the name attribute. Every tag, so far as I know, except maybe for br, can be named. To do this you write name="the_objects_name". This ennables you to reference something with javascript, or, in the case of forms, makes the information you send with the form meaningful. If you have someone enter something in one textbox and something else in another, you need to be able to differentiate between the two, so all objects in forms should be given names. Naming the form itself or anything is not necessary unless you use javascript, and even then you can reference things via arrays...but that's another language again, so nevermind. It's also a pretty good idea to name frames when you use those so you can send things between them, but more about that later.

Forms

Basically all you can do with forms with pure html is make something look like it's in a form and have it mailed to you. You need to know CGI to create really interactive forms, but you need to know html to create forms at all, so I'll explain them. To create a tag you need to use the form tag and be sure to close it when you're done with the form, otherwise unpredictable things can happen, especially with links. There are 2 attributes, action and method. Method can be "post" or "get". When you use "get" the user goes to a new page after clicking the submit buttion, and after the address of the page there will be a question mark followed by the name of the form element, "=" and what the user put into that element. The portion after the question mark is called a querystring, and it enables the user to bookmark the page with the query string so they do not have to go through the form again later. If you do not want the user to see the query string or have that ability, use "post." Action should contain a the location of your code that processes the information sent by the code.

The code for a basic default textbox looks like this:

<input type="text">

The type attribute is what makes this a textbox. Other attributes are value, which you can set to what you want to be in the box before the user types anything, size, where you can give the width of the textbox on the page, maxlength, where you can give the max number of characters the user can enter into the box--this is not dependent on the actual width of the textbox--and of course, name. Here's an example:

<input type="text" value="this is a textbox" size="40" maxlength="20">

which looks like:

To create a password box, you do pretty much the same as you would for a textbox, only for type you enter "password."

To create a checkbox, you use the input tag again, and for type you put "checkbox." You can use the value attribute for these, too, but only you will see it, not the user (unless they view source). You can set it to be pre-checked by using the attribute "checked," which has no value. If it's there, the box be checked, if not, it won't. Here's an example of some code:

box 1 <input type="checkbox" name="checkbox1" value="this is a checkbox" checked><br>
box 2 <input type="checkbox" name="checkbox2" value="this is a checkbox">

Which looks like:

box 1
box 2

The value attribute is much more useful for radio buttons, which must come in sets with the same name. If several radio buttons have the same name, only one can be picked at a time, so the value attribute lets you know which one it was. To create a radio button, the type attribute must equal "radio." Otherwise radio buttons have the same attributes as checkboxes. Here is an example of a set of radio buttons:

radio button 1 <input type="radio" name="button" value="button 1" checked><br>
radio button 2 <input type="radio" name="button" value="button 1">

radio button 1
radio button 2

Another element that uses the input tag is the "hidden" type. The user cannot see this element and has no control over it's value. You can set the name and the value. I suppose you could try to set the other attributes, too, but they wouldn't do anything. I'd show it to you, but you wouldn't be able to see it because it's hidden ; ) If you want your user to have a little more room than they'd get in a textbox, you can create a textarea. This one has it's very own tag, the textarea tag. You need two tags, an opening tag and a closing tag, with the default value for the area in between. If you don't want a default value, don't put anything in between. the attributes are name, rows, which sets the number of rows in the textarea, and cols, which sets the number of columns. Here's what this tag looks like:

<textarea rows="10" cols="80">default value</textarea>

To create a pulldown list, you need to use the select tag and option tags. The pulldown box itself is created with the select tag, and each option is created with an option tag. You can set which is selected by default by putting "selected" in one of the option tags; otherwise, the first is selected. Both types of tag need closing tags. The code for a pulldown box looks like this:

<select name="pulldown list">
<option>option 1</option>
<option selected>option 2</option>
</select>

Or, if you don't like the ordinary selection list, you can create a menu using the type attribute and setting it to "menu." You can select how many rows the user can see without scrolling with the size attribute, and choose whether or not the user can select multiple options by writing or not writing "multiple." By default nothing is selected, but you can still set it, or even set more than one if you have ennabled multiple selections. Otherwise menus are the same as pulldown lists. Here's the code:

<select type="menu" name="menu" size="3" multiple>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>

The submit button also uses the input tag, with type="submit." You can use the value attribute to set what the button says on it, or you can just not enter it and let the browser use it's default, which will probably be "Submit" or "Submit Query." The code for a submit button looks like this:

<input type="submit" value="Submit Me (or whatever)">

It is also possible to use an image for a submit button with the input tag's type attribute set to "image." When you do this you can use the alt and src attributes, which work the same way they would in an img tag. It looks like this:

<input type="image" alt="Submit" src="my_image.gif">

The reset button is exactly the same as a standard submit button, except instead of "submit" for type you enter "reset."

There is also a standard, all purpose button that doesn't actually do anything except give you something to click. Here's how to create it:

<input type="button" value="This is a button">

Frames

If you want to create frames, you need to create a separate html file just for the frameset, separate from the html files that define the content of each frame. In the frames html file, you don't need to use the body tag, you can just put the frameset directly after the header.

There are two tags you have to use to create frames: the frameset tag, which creates the entire set of frames, and the frame tag, which creates an individual frame. The frames can be either horizontal or vertical. For horizontal frames, you use the rows attribute in the frameset tag, and for vertical you use cols. Following either attributes you may use at least 2 numbers, separated by commas, which will be the width, left to right or top to bottom, of each frame. This number may be percent of the screen if you follow the number by a percent sign, or pixels if you don't put any symbol after the number. If you just want to use the rest of the screen that isn't taken up by the other frames, you may use an asterisk.

The frame tag creates the individual frame. It has two attributes that are absolutely necessary, src and name. When you use frames, each frame is treated as a separate browser window, and each window needs to be given something to look at. That's what you do with the src attribute, the same way you wood with the img tag. Each frame must also be named, because if you want to link between frames you need to have some way to reference that other frame. You can also specify the size (in pixels) of the margins between the edge of the frame and the text with marginwidth and marginheight. To control whether the frame has a scrollbar, you use the scrolling attribute. Its values can be "yes," which makes the window always have a scrollbar, "no," so the window never has a scrollbar, and "auto," which lets the window have a scrollbar only if necessary. The noresize attribute prevents the user from resizing the frame, but it only works in some browsers. It does not need an equal sign. The frameborder attribute allows you to control the width (in pixels) of the border of the frame. If you set it to "0," the frame will have no border.

The code for a frameset might look like this:

<frameset cols="30%,*">


<frame name="left_frame" src="some_page.html" scrolling="yes" marginwidth="10" marginheight="30">


</frameset>

It is also possible to embed a frameset within another frameset. So if I wanted the second frame from the example above to have two horizontal frames within it, I could remove the second frame tag and replace it with the following code:

<frameset rows="50,*">

<frame name="top_right" src="page.html">
<frame name="top_right" src="page.html">
</frameset>

Another way to create the above effect would be to make some_other_page.html have another frameset in it, instead of replacing the second frame tag.

If you create a link in a frame and you don't do anything fancy to it, the new page will show up in the same frame that the link came from. But you can also create a link that will show up in another frame with the a tag's target attribute. To do this, you need the target attribute, which you make equal the name of the frame where you want the link to open. So if I wanted new_page.html to open in top_right, I would write the following:

<a href="new_page.html" target="top_right">click me</a>

You can also make a link open in the main window, getting rid of all the frames. To do this, you use target="_top". If you leave out the underscore, a new window will be created and the link will be opened there.

It's also possible to change two frames at once, but for that you need javascript.

Unfortunately, not all browsers can understand frames. So after you close your frameset, you need to use the noframes tag. After this you use the html that you would put in the body of a normal html page, and what you put here will be what shows up when a visitor who does not have a browser that supports frames will be able to see. Browsers that do support frames will ignore it. You probably won't run into this problem, but it's good to be safe.

iframes

If you don't like the look of frames, but you want to get the same effects, you can use an iframe. iframes can be put anywhere in a normal html document just like an image. Like an image, they move when you scroll the page, and can go right off the screen. However, like frames, they are considered separate windows, and can contain a different html document. Iframes are only supported in Explorer versions 3 and up and in Netscape 6, so be careful with them.

To create an iframe, you use the iframe tag. This tag has src, width, height, and align attributes that work exactly the same way as they do for images. They also have scrolling and frameborder attributes, which work the same way as they do for regular frames. There is also a name attribute, so targetting works the same way for iframes as for regular frames. To set an external margin around the frame, you use the hspace (for horizontal) and vspace (for vertical) attributes. Internal margins are set in the body tag with the topmargin, bottommargin, leftmargin, and rightmargin attributes. However, these also apply to the entire page, and they aren't always applied to the iframe, as well, depending on the browser.

Other Stuff I Didn't Mention Yet

The hr tag is a good way to add a horizontal line to your page without having to create a graphic. Here's what it looks like:

It has a width attribute to specify width and a size attribute to specify height, an align attribute, the values of which can be left, right, or center, and the line can be shaded or unshaded depending on whether you add the noshade attribute. So this code:

<hr width="300" size="14" noshade>

looks like this:

I like the lines much better shaded.

Meta tags (I told you I'd get to them eventually) can do a lot of different things. They can make your page refresh or send the user to another page if you use the following code:

to refresh after 10 seconds:
<meta http-equiv="refresh" content="10">

to go to another page after 30 seconds:
<meta http-equiv="refresh" content="30;URL=newpage.html">

Meta tags can also convey information about your site to search engines. Here's what those tags look like:

<meta name="keywords" content="first keyword, second keyword, third keyword, etc">

<meta name="description" content="This is the description of my webpage.">

Meta tags can also convey information about your site to the browser, like the character set you're using, which is a good idea if you want your page to display properly, and anyway, the W3C says you have to. To do that, you need this tag:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

In that example, the character set is unicode, which is standard for html 4.01; however, there are many other character sets you could specify, from US ascii to central European to Chinese.

Meta tags can probably do lots of other things, too, but that's all I've ever used them for.

The !DOCUMENT tag gives information to the browser about what version of html you are using to ensure that the browser responds correctly to your html, which sometimes works differently in different versions of html. This is also recommended by the W3C. To tell your browser that you are using html version 4.01 transitional, you would need to place the following at the top of the html page before any html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

You can also have 4.01 Strict, in which presentational tags (e.g. font) are replaced by stylesheets, or 4.01 Frameset, which is used only on a page giving the dimensions of a frameset. You could also give a different version number, but 4.01 is the current version.

Since I've just mentioned the W3C, maybe I should explain a little about them. W3C stands for World Wide Web Consortium, and they make up the rules for internet languages, which is a good thing because in the early years of the internet Microsoft and Netscape tried to make it impossible to make pages compatible with both. The W3C offers an html validator, which you can use to make sure your html is correct and standards-compliant.

And that's just about everything I know about html. I may know more, but I either can't think of it right now or don't know enough about it to want to explain it to someone else. If you have any additional questions or comments, please feel free to email me.

For additional information about anything (especially character codes and color codes or other programming languages), you might try Webmonkey. They've got a lot of good information on just about anything related to the internet, and I just reallized that they probably have a good html tutorial, too. Oh well.

Tags