HTML - Tag, You're It!

HTML. It only works on computers so it must be a type of programming language. That puts it right up there in the category of 'rocket science', right? Wrong. HTML is actually quite simple. Unlike other computer languages, there are only about 25 'functions' you need to learn, with less than half of them being found on most web pages.

HTML functions are described in 'tags', commands set inside the 'less than' and 'greater than' symbols - <like this>. The first few tags we'll discuss don't ever show up on a web page, but they are important instructions for the browsers.

The Opening Gambit

The first thing you have to do is tell the browser what kind of document it's reading. There are two tags for that.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

This tells the browser which version of the HTML language (4.01 in this case) you're using, the language the code will be written in (EN - English), and what style of coding (strict) you're using. I prefer to use 'strict' HTML4.01 rather than any of the xhtml options because it's slightly less complex and xhtml is only necessary when you're using xml. There is also a special doctype you use when you're creating a framed page.

The next tag tells the browser that the page of HTML is starting.
<html>

Unlike the <!doctype> tag, you have to tell the browser when the HTML page ends. It's simple enough. The last tag you'll have on your page is </html>.

The next tag, the <head> tag contains the remaining 'invisible' information a browser needs to show your page.Like <html>, you'll need to tell the browser to stop. </head> is the last line of the invisible information section.

So what goes inside a <head> tag? There are three groups of tags - meta tags, title tags and style tags.

The <meta> group is the largest, but we'll only discuss some of them.

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
This tells the browser what language is being used and how it's to be written. There are many different kinds of 'charset', or character sets. I use the ISO charset because it covers both Mac and PC platform commands, as well as a number of characters for other languages without needing to assign a special character value.

<meta http-equiv="Content-Language" content="en-gb">
This tells the browser that the content will be written in 'British' English, not American. There are a number of different languages you can use to create a web page, each with its own foibles. Content="en" defaults to American English.

<meta http-equiv="Content-Style-Type" content="text/css">
This tells the browser that I'll be using CSS to style my pages.

The next tags offer descriptions for search engines; one in sentence form, one in only words and phrases, or 'keywords'.
<meta name="description" content="Your sentence description about the page goes here."
<meta name="keywords" content="your, 'word or phrase', description, 'goes here'">

The <style> tag sets my basic page appearance using CSS. I cover that in greater detail in "CSS - Madness or Magic".

The only other tag that must be included inside the <head> tags are the <title></title> tags. If you look at the very top of your browser window, you'll see "HTML - Tag, You're It!" or "The Aerie - Articles & Essays", if you're using the frames version of the site. Those page titles were created using the <title> tag.

If you don't include a title for you page, visitors will see one of two things - your web site address, which isn't too bad, or "Untitled Page", which looks sloppy.

There are more tags that go into the <head> section, but these are the basics.

Confused yet? Well, if you're familiar with computers, probably not. My main problem with writing things out in HTML is the fact that I tend to forget what goes where or misspell some of the technical information. I cheat and create a basic 'template page' that looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Style-Type" content="text/css">
<title> Page Title</title>
<meta name="Description" content="My sentence description.">
<meta name="Keywords" content="my, keywords, 'single words or phrases', go, here">
<style type="text/css">
body
{
text-align: left;
background-color: #FFF;
font-family: Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
padding: 5px;
font-size: 10px;
}
</style>
</head>
<body>
</body>
</html>

Did you notice the other tag I included in my 'template'? The visible part, the content of your page, goes between the <body> and </body> tags.

The Game's Afoot

As I've said, creating a web page isn't rocket science. It takes a bit of practice, true, but it's not that hard. If it makes you feel any better, even professional page designers sometimes make mistakes.

We'll cover the basic tags first. There are about a dozen of them, 7 of which require closing tags. We'll also cover some of the more common special codes.

The tags most often used are:

  1. <p></p>
  2. <h1></h1> to <h6></h6>
  3. <blockquote></blockquote>
  4. <img>
  5. <a></a>
    1. <a href=" "></a>
    2. <a name=" "></a>
  6. <hr>
  7. <br>
  8. <div></div>
  9. <span></span>
  10. <ol></ol>
  11. <ul></ul>
  12. <li></li>

The First Steps

Hang On To Your Paras!

Most of your text content will be written as paragraphs, even if the sentence is only two words long. Each paragraph starts at the left margin of your page and crosses to the right margin, where, if necessary, the sentence will 'wrap-around' to the next line. It works the same way as your word processor. The main differences between HTML and your word processor are that, unless you specify text indenting with CSS, your paragraph will start at the edge of the page; the other difference is that the <p></p> tags will insert a blank line below each paragraph.

The Outs And Ins

Without changing the style or colour of your text, there are two ways to change the appearance of your text - headlining and blockquoting.

Standing Out

Headline tags make the content stand out. They are divided into six levels, 1 through 6, and written as <h1>, <h2>, and so on. Generically, they are referred to as <hx> or <h#> tags. Like paragraphs, they must have a closing tag, </h#> at the end of the sentence.

Headline tags change the size and weight of a font, and their appearance can be changed using CSS.

<h1> This is a level 1 headline with CSS adjustments.</h1>

<h6>This is a level 6 headline with CSS adjustments..</h6>

Search engines also use headline tags to help sort information. Anything written as a headline has a better chance of getting picked up by a search engine 'webbot' than text that is simply made larger and/or bold.

Use headlines sparingly. Aside from the fact that search engines will ignore pages done entirely in <h#>, having everything in <h#> will feel like the page author is shouting at you after a while.

Moving In

Sometimes you'll want to have a section of text set apart from the rest of the content. Paragraphs quoted from books or other media are the most common kind of quotations.

The <blockquote> tag is almost identical to the <p> tag. It must be closed at the end of the paragraph/quotation, </blockquote>, and the text stretchs from margin to margin, wrapping around to the next line as necessary. The major difference, however, is that both margins, left and right, are closer together than the original page margins.

<blockquote>This paragraph is blockquoted. I have my blockquotes set to be in italics to make them stand out a bit more. You don't have to do that. Using your CSS, you can change any tag to present any look you wish.</blockquote>

A Picture's Worth

One of the easiest - and most abused - way of adding interest to a web page is to add pictures to it. Most web pages will accept accept three types of images without requiring a special 'plug-in'. Those types are .GIF, .JPEG/.JPGand GIF89 (animated gifs, but written as .gif) formats. Another format, .PNG, is accepted on some web pages but not all.

I won't go into the differences or advantages/disadvantages here, except to mention that complex images work best as JPEGs and simple images work best as GIFs.

But how do we add them to our web page? We use the <img> tag wherever we want to include an image. This is one of the tags that doesn't require a closing tag, but we do need to specify which image we want to add, the height and width of the image (so the browser knows how much space to leave for it) and we need to add an "alternate" text description for the image. This is in case the image cannot be loaded onto the page. It's done like this:
<img src="../images/square.gif" height="100px" width="100px" alt="A picture I drew for you.">

What you'll get is this: A picture I drew for you.

Some people don't include height and width information or 'alt' tags. Here's what happens when you get a broken link to an image.
or A picture I drew for you.

The second image has height, width and 'alt' information. The first does not, if you even see it.

I Get Around

A web page doesn't normally require navigation, but it is vital to a web site. Navigation is how you get around the site, how you turn the pages, if you like.

Clicking on a 'link' takes you from the page you're on to a new page, or to a new section on the same page. Links can be as simple as here or as complex as this. Either link, by the way, brings you to this section of the tutorial.

The main problem with trying to explain how to write link addresses is that there are so many ways to do them. The best way I can "show" you how links are written is to use my own site as an example.

If you could see my site directory, you'd see:
cheryl-lloyd.com

  • - about (folder)
  • - articles (folder)
  • - images (folder)
    • - common (folder)
    • - pages (folder) (internally, 1 folder for each section)
  • - photos (folder)

This page is in the "articles" folder. The link from any articles page to any other articles page can be written <a href="article.php">Page</a>.

To go to a different essay or to a page in another folder, the link is <a href="../folder/page.htm">New Page</a> or <a href="../folder/folder/page.htm">Another Page</a>. The '../' tells the browser to go back to the beginning of the folder, in my case, cheryl-lloyd.com, and look inside 'folder' for 'page.htm'. Or inside 'folder' for another 'folder' for 'page.htm'.

Linking to a page on another site requires the full site address. <a href="http;//www.htmlforums.com">HTMLforums</a>.

You see the common thread throughout? All links start with <a href=" "> and end with </a>.

But the first links I wrote were slightly different, weren't they? Smart of you to notice.

These are links to a specific part of a page. They're called 'anchored links". Click on the link below and then click on the section title.

Click Here

Welcome back!

So how did I do that? An anchor is created by writing <a name="anchorname"></a> where you want the visitor to stop. When you want to link to an anchor on the same page, you only have to write <a href="#anchorname">The Link</a>. The most common way of using anchors is for "Back to Top" links and linking table of contents information to specific sections.

Linking to a specific anchor on another page requires you to add the anchor information to the linke like so: <a href="page.htm#anchorname">The Link</a>

If I've confused you, don't worry. At the end of this tutorial, I'll have a sample web page and a list of all the tags I've mentioned and how they're used. It's easier to show you how HTML works rather than explaining it.

Ducks In A Row

The remaining six tags aren't always found on web pages, but they help keep the page - and the code - neat and tidy.

Not Quite The Finish Line

Sometimes you'd like to divide one large section into smaller ones, as I've done between the sections of this tutorial. Horizontal rules are simple.
<hr>

That's it. That gets you the standard grey divider. If you look back to my template page, you'll see that I've defined what the line will look like - dark blue, 50px wide, 1px high and centered. The only difference between that code and the one I'm actually using for this page is the colour. <hr> tags do not have closing tags.

Coffee Time!

There may come a time when you'd like your text to start on a new line, but you don't want the blank line in between your lines. The <br> tag does that. It doesn't need closing, so you just put it where you want the line break to be. Like this:
<p>Roses are red<br>
Violets are graple<br>
HTML greetings<br>
From the Land of the Maple!</p>

Divided Bridges

There will undoubtedly be times when you want to change one small part in the middle of a sentence. You'll need to use the <span></span> tags for that.

It's simple enough to use. <span style="font-weight: bold; color: #0F0;">Put your text inside the span tag</span> and close the tag when you're done. The most common use of the span tag is to replace the <font> tags used in other versions of HTML.

<div> </div> tags are similar, but they're used for larger sections of information. You can put entire tables into <div> tags, or a collection of images. If you'll notice on my site, each of the different sections of the page, header, menu and content, are enclosed in <div> tags.There is more information on both of these tags in other tutorials in this series.

Joust Another Day On The Site

Every once in a while, you'll need to put a great deal of information on your page, more than feels comfortable for a single page. The information, too, may not lend itself easily to full sentences and paragraphs. The easiest way to present this kind of information is what your mom does for shopping - make a list.

There are three types of lists - ordered, unordered and definition. The definition list isn't commonly used and it can get rather complicated. I won't explain it here, but if you look at the source coding for both "CSS In A Nutshell" and "HTML - Tagged and Bagged", you'll see how definition lists are put together.

One By One

Some of your information will need to be set out in a methodical, chronological or in a countable fashion. That's what ordered lists are for. They are less complex than definition lists and written like this:
<ol>
<li>Plug power cord into computer.</li>
<li>Plug power cord into wall outlet.</li>
<li>Turn on computer.</li>
</ol>

It looks like this:

  1. Plug power cord into computer.
  2. Plug power cord into wall outlet.
  3. Turn on computer.

Really complicated, huh? You'll just have to remember to close both the <li> (list item) and the <ol> (ordered list) tags.

Any Old Which Way

Most of your information, though, probably won't need to be put in any particular order. You'll want to put it in order of importance, of course, but your visitors may have other priorities. An unordered list will list the items without numbering them. It's written like this:

<ul>
<li>Computer</li>
<li>Monitor</li>
<li>Printer</li>
</ul>

It looks like this:

  • Computer
  • Monitor
  • Printer

Another really complicated way of doing things, right? Again, make sure you have both the <li> (look familiar?) and <ul> (unordered list) tags closed.

Now, if you really wanted to get fancy, you could combine the two types of lists. You could have:

  1. Computer:
    • G4
    • 500Mhz
    • 80Gb HDD
    • CD/DVD player
    • Zip Drive and 20 disks
  2. Monitor
    • ViewMaster 17", 16" viewable
    • up to 1920 x 1080 resolution
    • millions of colours
    • flat screen
  3. Printer
    • Epdawter 7400P
    • Photo quality , 4" x 6" picture in 1 minute
    • 1200dpi
    • extra ink cartridges

So how do we do that? Like this:
<ol>
<li>Computer
<ul>
<li>G4</li>
<li>500Mhz</li>
<li>80Gb HDD</li>
<li>CD/DVD player</li>
<li>Zip Drive and 20 disks</li>
</ul></li>
<li>Monitor
<ul>
<li>ViewMaster 17", 16" viewable</li>
<li>up to 1920 x 1080 resolution</li>
<li>millions of colours</li>
<li>flat screen</li>
</ul></li>
<li>Printer</li>
<ul>
<li>Epdawter 7400P </li>
<li>Photo quality , 4" x 6" picture in 1 minute</li>
<li1200dpi</li>
<li>extra ink cartridges</li>
</ul></li>
</ol>

You have to be careful when you're putting lists inside lists. Each unordered list is enclosed inside the ordered list item.The list items are easy enough to close, but you have to remember to put a </li> after each </ul> and you have to remember to close the lists.

The Last Card Played

And that, pretty much, is all you need to know to get started on creating your own web pages. There are a few tricks I've learned over the years, tricks that might keep you from pulling all your hair out in frustration. They're found here.