How To Learn HTML in Under an Hour.

By Steve Baker

This page won't teach you all of HTML - but it will teach you enough to do nearly everything you need for day-to-day web page building - and you'll learn quickly and without paying $100 for a foot-thick book on the subject (that you probably wouldn't have read anyway).

There are basically three ways to write a web page in HTML.

  1. You could write everything using a word-processor (like OpenOffice or WORD) - then 'SaveAs' or 'Export' into HTML.
  2. You could use a specialised HTML editor (such as Quanta or BlueFish).
  3. You could learn HTML - then write the document using a basic text editor (such as vi, emacs or NotePad).
Since you're here to learn HTML, we'll be doing it in a text editor.

Trust the Browser.

This phrase is one that should be close to all web page designer's hearts. It is very tempting to try to make your page look exactly how you wrote it - with line breaks, font sizes and layout looking exactly like it did when you wrote it. That's a really bad idea. People visiting your page will have set their browser preferences so their fonts might be different from yours - and they will probably have a different screen size and resolution and will have resized the window differently from you.

So give it up. Describe what you want in broad terms and 'Trust the Browser' to make everything look nice - don't fight it.

Viewing Your Pages

As you work on your HTML document, save it out once in a while with the extension '.html'. Now you can view it in your browser just by clicking on 'Open File...' in the file menu. It'll open the HTML document just as if it was a web page. When you are done, you'll need to copy the page onto your web server in the correct place. How you do that is beyond the scope of this HowTo.

Writing HTML

When you create an HTML file, most things come out exactly as you typed them into the file. The browser ignores any newlines in the file - and it smooshes multiple spaces into a single space. So: 
    This
         is
            a       line
    of      text.
...and... 
    This is a line of text.
...both come out looking like: 
    This is a line of text.
Of course if your text is wider than the space the browser has to fit it in, it will wrap it automatically onto the next line. But aside from that, whatever text you type into the file comes out reading the same in the browser.

There are two exceptions to that: Tags and Entity Codes.

Tags

Sometimes, you want a blank line or some boldfaced text or a title or something. Because the browser is laying out the text for the end user - and not how you typed it, there has to be a way to tell the browser to make things like headings, paragraphs, lists and tables. You need to say "This is a command to the browser to change the way things look".

In HTML, you mark commands by enclosing them in '<' and '>' characters (less-than and greater-than). These commands are called 'tags'. Many tags have a beginning tag and a matching ending tag which has a '/' after the '<'. Hence, you can make text come out in boldface by putting a'<b>' tag in front and a matching '</b>' tag at the end. eg: 

   This is a line of
   text containing some
   <b>boldfaced words</b>.
Which comes out looking like: We'll come back to the list of available tags in a minute.

Some tags have a bunch of stuff after the name of the tag and before the >. These are called 'attributes'. For example, the tag to display a picture in your HTML document has the name of the image file as an attribute of the image tag.

Entity Codes

HTML gives special meaning to some ASCII characters. As you've just heard, if you enclose some text in '<' and '>' characters, the browser will treat it as a command. So you can't just use a '<' or a '>' in your writing without confusing the browser into thinking your text is a command. But if that's the case, how can you write paragraphs like the one you are reading right now that has <stuff> <like> <this> <<<>>> in it?

The answer is that HTML translates things that begin with an ampersand ('&') and end with a semicolon (';') into special characters. So (for example) if you write '&lt;', the browser will turn it into a less-than character and '&gt;' into a greater-than. So, if you write: 

  This text contains
  less-than &lt;, and 
  greater-then &gt;.
...it will be displayed as: Unfortunately, this trick makes the '&' character special too, you have to write those as '&amp;'. The semicolon isn't special unless it's preceded by an &. Hence: 
  Here comes an ampersand: &amp;
...displays as: Aside from the three special HTML characters (<,> and &) all of the other characters on a typical US keyboard come out exactly as you typed them. However, there is one other reason to use &...; - which is for characters that are not standard ASCII text. Things like: There are many web pages that contain lists of the &...; codes - so I won't list them here. So long as you remember &lt;, &gt;, and &amp; you'll get a passing grade from the one hour guide to HTML!

The Structure of a Document.

Here are some things you just have to do. If I explained why, this would be the Two Hour Guide to HTML - so I won't.

HTML documents should always look something like this: 

   <html>
    <head>
      <title> ...the title... </title>
    </head>
    <body>
        ...the document itself...
    </body>
   </html>
Notice that the <html>, <head>, <title> and <body> tags are all matched with corresponding tags that start with '/'.

Looking again at the example above, there are two sections for you to fill in:

The <title>....</title> tags.

The text between the <title>....</title> tags is typically displayed in the window banner in most browsers - not on the web page itself. If a search engine (like Google or Yahoo) indexes your page, then this is what comes out at the top of the search results. Keep it short (between half a dozen and a dozen words or so) - keep it descriptive (it should say what the web page is about). Remember that many people will decide whether to visit the web page by this title alone.

Don't use &...; or boldface or any other <...> tags inside the title, just keep it simple.

The <body>....</body> section.

This is where all the action happens. All of the text, pictures, sounds or whatever go within the <body> tags. All of the remainder of this guide is about stuff that goes between that pair of <body> tags.

Some Useful Tags

The remainder of the document explains the tags you can use in the <body> of your web page. There are lots that I won't describe - but these will get you started.

Headings

There are many levels of headings. Bracket your text with <h1>...</h1> tags for the most important headings, use <h2>, <h3>, <h4> for less important sections. 
   <h1>The Most Important     </h1>
   <h2>The Next Most Important</h2>
   <h3>The Next Most Important</h3>
   <h4>The Least Important    </h4>
Looks like: Remember that you can use other tags inside headings - so you can do things like italicising words: 
   <h1>The <i>Most</i> Important Thing</h1>

Paragraphs, Line Breaks and Rules.

Since the browser throws away newline characters and takes out or replaces spaces just as it wishes, you need a way to separate out your paragraphs. This is done with the <p> tag: 
   This is a paragraph.
   <p>
   This is another paragraph.
...or even... 
   This is a paragraph.<p>This is another paragraph.
...both look like this: On most browsers, the paragraphs some out separated by a blank line. So it's easy to think of the <p> tag as introducing a blank line - but because we 'Trust the Browser', we won't assume that. We're just marking the ends of paragraphs and letting the browser display them nicely.

Sometimes, you want to break a line of text without marking it as a new paragraph. 

  This line of text is
  <br>
  broken in half.
The <br> tag breaks the line without making a new paragraph. In most browsers, this puts the text after the <br> tag on the next line without a blank line like the <p> tag.

Yet another way to separate out sections of text is to use a 'horizontal rule' tag: <hr>. That looks like this:

Adding Pictures.

Pictures have to be stored in separate files. People commonly use JPEG (.jpg), PNG (.png) or GIF (.gif) because most browsers support all three fairly well. Whilst other image file formats might work in some browsers, it's kinda risky.

Here is how you add a picture called 'dogs2.jpg': 

  Here is a picture of a dog:
  <img src="dogs2.jpg">
  in the middle of a sentence.
That sticks the picture right at that point in the text like this You'll almost certainly want to use either <br> or <p> tags around the photo to make it come out on a line by itself.

Whilst that's all you need to get a picture into a document, it's considered good manners to go a little bit further for people who are blind and using braille browsers or speech synthesis - or who have simply blocked image download to speed things up on slow or expensive connections like dialup or cellphones. 

  <img src="dog.jpg" alt="A Photo of a cute Puppy">
The text after 'alt=' will come up in place of the photo if there is any kind of problem with downloading it.
  1. JPEG images are good for photo's and the compress well to make tiny files for fast downloading. But JPEG doesn't support transparency or animation.
  2. GIF images are limited to at most 256 different colours per picture - so they are OK for cartoonish things - but get you very poor quality photographs. However, you can have on/off transparency (but no partial transparency) and they can contain brief animations.
  3. PNG lies somewhere between JPEG and GIF. It has better quality than either of the others - but you end up with much larger files. It supports transparency - even partial transparency - but some browsers (notably older versions of Internet Explorer) don't support that feature.

Making Links

To make a link to another web page, do this: 
  <a href="http://www.sjbaker.org">
    The Baker family homepage
  </a>
This comes out looking like this: Clicking on the words inside the <a>...</a> tags takes you to that web page. If the page is in the same directory, you can leave off everything but the filename: 
  <a href="my_puppy_page.html">
    My puppy page
  </a>

Lists.

  1. Sometimes you want to make a list.
  2. Sometimes you want it numbered.
  3. Sometimes not.
This effect is done with two tags - one to set up the list ('<ol>') and to end it ('</ol>') - the other to identify each item on the list ('<li>'). eg: 
  <ol>
    <li> Sometimes you want to make a list.
    <li> Sometimes you want it numbered.
    <li> Sometimes not.
  </ol>
Notice that we didn't type in the numbers for the entries - that's because we 'Trust the Browser'. You can also put lists inside other lists.

The OL in '<ol>' stands for 'Ordered List' - which means it has numbers against each entry. You can also make lists that have dots instead of numbers using the <ul> (Unordered List) tag. You can even put ordered lists inside unordered lists and vice versa. 

  <ul>
    <li> Sometimes you want to make a list.
    <li> Sometimes you want another list inside:
      <ol>
        <li> This is inside.
        <li> So is this.
      </ol>
    <li> Back to the original list.
  </ul>

Highlighting, etc

We already talked about the bold <b> tag. You can also use <i> for italics or <code> to make things that look like this or even <blink> to make really annoying, blinking text. But use these sparingly - especially <blink> which has a very bad reputation - to the extent that some browsers won't display it blinking. You can change fonts, colours, etc too - but that's all beyond the scope of a One Hour Guide.

Don't forget the matching </...> tag because if you do, you might find the whole of the rest of your document displayed with the wrong style!

Centering text

You can bracket a bunch of text with the <center> tag and get:

Text that is centered on the screen
No matter how you typed it originally.

Once again, don't forget the closing </center> tag.

Pre-formatted Text

At the beginning of this document, I said that the browser ignores newlines and strips multiple spaces down to a single space. Well, that's not quite always true. If you place text between the <pre>...</pre> tags, then the browser is supposed to honor your original layout. So this: 
   <pre>
   Yes - this is
                 another
      contrived      example.
     ...but preformatted.
   </pre>
...comes out looking like this: 
   Yes - this is
                 another
      contrived      example.
     ...but preformatted.
Use preformatted text exceedingly sparingly because the browser can't line-wrap it - which means it'll go off the edge of the screen in many cases. Also, most browsers display <pre> text in a fixed-pitch font which makes it kinda hard on the eyes if used excessively.

Tables.

These are a little complicated - but worth learning. So, here is an example of a table with two rows and three data items in each row. I've indented the information to make it easier to see the tags and their matching end tags - but you can (of course) put everything on one line - or do whatever looks easiest in your text editor: 
  <table border="1">
    <tr>
      <td> Row 1, Column 1 </td>
      <td> Row 1, Column 2 </td>
      <td> Row 1, Column 3 </td>
    </tr>
    <tr>
      <td> Row 2, Column 1 </td>
      <td> Row 2, Column 2 </td>
      <td> Row 2, Column 3 </td>
    </tr>
  </table>
...which looks like this: If you don't want borders around each item, then make the initial <table> tag look like this: 
  <table border="0">
The number after 'border=' is the thickness of the border - setting it to zero gets rid of the border completely. Borderless tables are a great way to get text to flow around a picture. 
  <table border="0">
    <tr>
      <td>
        Text that goes to the left of the photograph.
        <p>
        Which could have lots of paragraphs, tables,
        etc.
      </td>
      <td> <img src="dog.jpg"> </td>
    </tr>
  </table>

Colour and Background Images.

The template I gave you earlier for how a document should look contained a very basic version of the <body> tag. This will give you black text on a plain white background with links done in the standard colours for whatever browser is being used.

Almost no web pages are done like that, and to get control over the text colours and background image, you'll need to replace the plain old <body> tag with something that has attributes like this: 

  <body text="#B5A642"
           link="#8FFF8F"
           vlink="#18A515"
           alink="#20336B"
           bgcolor="#005000"
           background="marble.png">
    ...the document...
  </body>
Here, we are setting the colours for the document and the background image (if any). Each colour is expressed as three hexadecimal bytes - so the first two digits after the '#' are RED, the next two GREEN and the last two BLUE. The easiest way to figure out what to put here is to bring up a paint program ('The GIMP' for example) and choose a paint colour. Generally, there will be a box somewhere on the colour chooser that'll show the hex value of the colour. (In GIMP 2.0, there is actually a box labelled 'HTML Notation'.)

The meanins of all of this is as follows:

Note that whatever image you use for the background must be VERY subtle. A good rule is to paint something you think is subtle enough - then reduce the contrast to about a quarter of that! Save it in JPG, PNG or GIF - same rules apply as for foreground images.

Combining Tags Creatively - An Example

Remember that almost any HTML tag can be embedded inside the text of almost any other - so long as you remember to match up each tag with it's '/'ed pair). This means that you can do things like putting pictures into a table, each with a label, centering the table and making each image be a link to a larger version of itself.

Here is a complicated example to end on: 

  <center>
    <table border="3">
      <tr>
        <td>
          <center>
             <b> A Dog, Eating </b>
          </center>
        </td>
        <td>
          <center>
             <b> Another Dog, Playing </b>
          </center>
      </tr>
      <tr>
        <td>
          <a href="dog.jpg">
            <img src="dog_thumbnail.jpg" alt="A Dog Photo">
            <br>
            Click here to see a dog <i>eating</i>.
          </a>
        </td>
        <td>
          <a href="dogs2_photo.jpg">
            <img src="dogs2_thumbnail.jpg" alt="Another Dog Photo">
            <br>
            Click here to see a dog <i>playing</i>.
          </a>
        </td>
      </tr>
    </table>
  </center>
Looks like this:
A Dog, Eating
Another Dog, Playing
A Dog Photo
Click here to see a dog eating. 		Another Dog Photo
Click here to see a dog playing.

Learning More

OK - so that's all I'm going to teach you. Do a Google search on 'HTML Guide' and you'll find a million other guides like this one. Few will be as quick to read - most will list vastly more tags than I've bothered with here. However, almost the whole of my web site is built with nothing more than I've described here - so this is plenty to get you started.

Another way to learn more is to find a page with an effect you like - and do a 'View As Text' in your browser to take a sneaky peek at the HTML commands that achieved that effect.