HTML for the complete beginner

Miscellaneous

Meta tags

These are included in your <head></head> tags. They aren't seen by the viewer, only by the search engines to help list your site. Not all search engines use the meta tag but is good practice to use them.
For this example I'll pretend I have a web site for belly button warmers (you just never know). It is used as follows:

<html>
<head>
<title>Your pages title</title>
<meta name="description" content="My belly button warmer web site">
<meta name="keywords" content="belly, button, warmer, gift, present">
</head>
<body>
...
...

What it means
meta - states you are using a mate tag
description - content - is a description about your site, keep this to the point of your site and try use useful words that are in your contents
keywords - content - are keywords describing your sites content. Again keep them to the point of your site, you can get banned from search engines if you over do these words and use 'spammed' words like sex, porn, mp3 ...
br />

There are some sites that will charge you to get listed in search engine results, others are free (see the Related links page for some links). Your site is listed by the keywords you choose, look at other sites similar to yours and see what words they use (don't steal their keywords).
Then use these programs or go directly to the search engine web site and find/click 'suggest a site' or 'submit a site', enter your description and keywords etc.
Some sites can take a few weeks if not months before they list your site.
Yahoo, Google, Ask Jeeves, Altavista, Infoseek, HotBot, Lycos, and Excite are probably in the top ten. Some are easier to get listed on than others. This site has never been submitted to any search engines yet is popular with them.

You can also add your name and email address as author like so:
<meta name="Author" content="youremail@address.com">

Another thing included is the 'auto refresh' tag, which will automatically send you to another page in a certain time, or refresh the current page.

<meta http-equiv="refresh" content="5;url=http://somewhere.com">
The '5' is this example can be changed to any number, this number is the seconds in delay

blockquote

The <blockquote> tag probably could of been put in the adding text section but can be used for anything. What this tag does is indent it's content (about a tab spacing) left and right of it, like so:

<blockquote>This is a long piece of text about nothing just so you can see how the blockquote tag works. I use this tag on the quiz pages. You can use it to indent anything but be careful not to abuse it. If people had small screns this would be easy but sadly some have big screens so I have to keep babbling until I get enough to fill the largest size screen, I think this should do it.</blockquote>

I added the tags in the text instead of having to place it here again making this page even longer than it is.

lines, breaks

<hr> is a line, (like above the sections title) we can add width=, size=, and even color is supported by some browsers but shouldn't be relied on. The <hr> also has a 'built in' <p> tag. no closing tag needed for this one.

default is:
<hr width="100%" shade="shade" />

The 'size' works best on a patterned background.

pre

The <pre> tag can come in handy at it times. What it does is display your contents exactly how you type it out. Example:

<pre> This
            would
    be                  how
                I
       typed it    out!</pre>

Down side it is unless you add a CSS style to the pre tag (or body) it looks quite horrible. The pre tag will display every extra space, new line ... as it's typed becareful using HTML tags inside a pre tag as these tags will still be used (can get very messy). If you want to display HTML codes use the special characters needed to do so.

fieldset and legend

These tags were made I believe for grouping form objects but can be used anywhere. I use them throughout this site for the Important and what it means boxs among others, but I use CSS to enhance it.

This is the default
As you can see it's like a table with text at the top. NS4.7 doesn't support these tags so doesn't display it.

And we do this by:

<fieldset>
<legend>This is the default<br /></legend>
As you can see it's like a table with text at the top. NS4.7 doesn't support these tags so doesn't display it.
</fieldset>

You can add <br />'s to it to add more space but the one in the <legend> section needs to be there for backwards support or that line and the following will appear on the same line.
These tags are supported pretty well but spacing and margins do differ between browsers, also I've found HTML tags within these tags loose their spacing so a   is needed (Mozilla is worst offender).

DOC tags

DOC tags are what goes at the very top of your code, before the <html> tag. This tag is meant to tell the browser or sorts of info, mainly what version of HTML or XHTML you are using.
The DOC tags look like this:

These are the only tags that should be uppercase, every other HTML or XHTML tag should be lowercase. Just copy and paste the DOC tag that suits your needs above your <html> tag

For HTML use:

For HTML - This is the most common and since your still learning I recommend this one
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

For HTML with all the t's crossed and i's dotted
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

For HTML if you use frames
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

For XHTML use:

For XHTML - This is the most common one and one I recomend you should use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

For XHTML with more CSS than HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

For XHTML if you use frames
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

image maps

Image maps are the best solution to using linked images. You're way better off using a cut up image in a table or better yet using text link. (should use text links as well if ever using images for links).
The easiest way to make an imagemap is to download a imagemap program, but if you have the time and patience you can do it all yourself.
This is the end result:

This is how we code them:

The hot spots are shown below (yes I cheated and used a program to create this one :)

Adding sound

Netscape and Internet Explorer supports different tags so we have to use two lots to be succesful.
One thing that gets annoying on web pages is the fact you can't turn off the midis or wavs, so please use the console and/or the option to choose whether we want to listen to the music.
These consoles are different on IE and Netscape (Netscape's better), but Netscape loads before displaying where as IE displays while loading.

The best way to offer music to people is by the good old 'click for sound' option, like so:
click for sound
This way if they don't want to hear it they don't have to.

<a href="yoursound.mid">click for sound</a>

But if you must add it to your page, use a tag combination like so:

We can also use 'smallconsole' with smaller width and height tags included

Which will just give us a play and stop button in Netscape and play and pause buttons in Internet Explorer.

Note if the wav or midi isn't in the folder the console wont show up.

Hidden background music is one of the worse sins in web page making, keep away from this practice. (Note I haven't shown how to do it) Also NEVER use full or long songs for web pages, these can take forever to load and sometimes load before your page does.

Awards

Do I dislike awards? The truth is I don't hate them, just wish people would wake up to what they really are. What do I mean, ok before I go any further I wish to say sorry now for upsetting anyone out there.
Awards are gimmicks, free advertising. Have you ever seen an award without a URL attached and/or printed on it? The reason why is they want to get you to their site. I have been offered awards for this site, was even thinking of giving some out *cheeky smile* but unless it's an approved company I wouldn't add it. If you would like some awards I have made some, The link will take you to another page, where you can take all you want, no URL or link is required. Go get some awards. On a side note there are some genuine awards out there, not many, but some and they do deserve respect. The average award on your personal site is just a gimmick. The real awards that mean something usually have to be entered into, which means you have to go to their site and enter anyway so is along the same lines.

Guestbooks and Counters

Guestbooks are a good way of getting feed back from your site. The slambooks can be a fun way to add a bit of humour in there as you can make up your own questions.
Counters - hmmmm, counters are really a gimmick as well, for one you can set them to any number you wish, you can stay on your page and hit refresh all day and watch the numbers click over and no one would know. The only real way to track people is to use something like eXTReMe tracking which monitor peoples details, like what browser, screen resolutions, where they came from and of course the tell tale, where they are from. I used to use this service on all of my web sites.
Counters can also be unreliable.

These days there are a lot of 'add-on' scripts to add to your site, message boards, guest books, diaries etc, some are CGI or databased but most are linked to and only use a code to use them.
See the 'Related links' page for a few services.

Summary

We have seen how to add meta tags and how they work
How the blockquote tag can be useful to indent content
lines or dividers can be useful to seperate sections
The pre tag can be your own worst nightmare so use with caution
fieldset and legend are your friend with a little CSS but are not to be abused
image maps can be very complex and aren't worth the trouble ;)
We have seen how to display music on our site and will use it nicely as to not annoy our visitors
We have seen how counters and awards are gimmicks (most awards)

Exercise

For this exercise I'd like you to add meta tags to your page containing keywords and description of your site
Add a horizontal line '<hr>' to your page
Use the blockquote tag to indent some text but not all.

Forms «- Top of Page -» CSS