The One Hour HTML Course

Starting With the Bare Skeleton

These lines constitute the skeleton on which you hang all the rest.
<html><head><title></title></head><body></body></html>
Save this file with the extension ".html" and open it up in your browser. It won't be very interesting--just a blank page.

Marking Up Your Text Using HTML Tags

The things enclosed in the angle brackets (< and >) we call "tags." We use tags to "mark up" the text on our page.The tags themselves don't show up in the browser; they just control how the browser displays the rest of the text.

Most tags have opening tags (<body>) and closing tags (</body>). Some have only opening tags (<img>). Some have optional closing tags (<p>).

Giving Your Page a Name with the <title> Tag.

The <title> tag goes in the <head> section.Everything else goes in the <body> section. The title doesn't show up in the page itself, but it shows up in a few other important places.
  • In the browser's title bar.
  • In the browser's "Go" menu or History list.
  • In the browers's Bookmarks menu or Favorites list.
For these purposes, keep the title short and to the point.
<html><head><title>The One Hour HTML Course</title></head><body></body></html>

Creating Headers with the <h> Tags.

Your page still needs a title, or header. For this use one of the header tags. There are six:
<h1>Header One</h1><h2>Header Two</h2><h3>Header Three</h3><h4>Header Four</h4><h5>Header Five</h5><h6>Header Six</h6>
These will be rendered by the browser like this:

Header One

Header Two

Header Three

Header Four

Header Five
Header Six
Notice that headers always have a closing tag.

Filling in the Body with Plain Old Text.

Most of your page will consist of plain old text. It doesn't matter where you break your lines, or how many spaces you put between sentences.     The browser willcontrol wrapping and sentence breaks.
The above will get rendered like this:

Most of your page will consist of plain old text. It doesn't matter where you break your lines, or how many spaces you put between sentences. The browser willcontrol wrapping and sentence breaks.

Creating Paragraph Breaks with the <p> Tag.

Use the <p> tag to start a new paragraph:
Most of your page will consist of plain old text.<p>It doesn't matter where you break your lines...
The above will get rendered like this:

Most of your page will consist of plain old text.

It doesn't matter where you break your lines...

Notice that the browser separates paragraphs with one blank line, rather than by indenting the new paragraph.

Creating Line Breaks with the <br> Tag.

If you want to break your lines without introducing a blank line, use the <br> tag:
Most of your page will consist of plain old text.<br>It doesn't matter where you break your lines...
The above will get rendered like this:

Most of your page will consist of plain old text.
It doesn't matter where you break your lines...

The <br> tag works in headers, too.

Creating Bulleted Lists with the <ul> (Unordered List) Tag.

For a bulleted list, use the <ul> and <li> tags. (Notice that <li> doesn't need a closing tag.)
<ul><li>List item one<li>List item two<li>List item three</ul>
The above will get rendered like this:

  • List item one
  • List item two
  • List item three

Creating Numbered Lists with the <ol> (Ordered List) Tag.

For a numbered list, use the <ol> and <li> tags.
<ol><li>List item one<li>List item two<li>List item three</ol>
The above will get rendered like this:

  1. List item one
  2. List item two
  3. List item three

Indenting a Block of Text with the <blockquote> Tag.

When you want to indent a group of paragraphs (or anything, practically),use the <blockquote> tag.
Johnson remembered it differently.<blockquote>When we got to the top of the hill, we looked out over a vast expanse of garbage.Paper. It went on for miles, as far as the eye could see, and the wind sculpted it likesand dunes, in great huge drifts a hundred feet high. And every scrap was marked"confidential", "top secret", or "eyes only".I haven't seen so much paper since I worked for IBM.</blockquote>
The above will get rendered like this:

Johnson remembered it differently.

When we got to the top of the hill, we looked out over a vast expanse of garbage.Paper. It went on for miles, as far as the eye could see, and the wind sculpted it likesand dunes, in great huge drifts a hundred feet high. And every scrap was marked"confidential", "top secret", or "eyes only".I haven't seen so much paper since I worked for IBM.

Specifiying Fixed-Pitch Fonts With the <code> Tag

Use the <code> tag to render one or more words in a fixed-pitch or "typewriter" font:
Start execution by calling the <code>beginProcessing()</code> routine.
The above will get rendered like this:

Start execution by calling the beginProcessing() routine.

Inserting Pre-Formatted Code with the <pre> Tag

Use the <pre> tag to render one or more lines in a fixed-pitch or "typewriter" font, while also preserving leading whitespace for indentation purposes:
Here's a code example:<pre>public static void main(String[] args) {    for (int i = 0; i &lt; 100; i++) {        System.out.println("i = " + i);    }}</pre>
The above will get rendered like this:

Here's a code example:

public static void main(String[] args) {    for (int i = 0; i < 100; i++) {        System.out.println("i = " + i);    }}

Inserting Pictures and Graphics with the <img> Tag

Insert images in your page using the <img> tag:
<img src="duke.gif">
The above will get rendered like this:

If your image is in another directory, you can use a relative file name:

<img src="../images/duke.gif">

If your image is on another server, you can specify a complete URL:

<img src="http://www.suzi.com/images/duke.gif">

Also, if your image is large and may take a while to download, it's a good idea to specify its size.That way, the browser can leave space for it and go on to render the rest of the page so the user canread it while waiting for the image to finish downloading.

<img src="gargantuan.jpg" width=512 height=390>

Finally, it's considered good form to provide an alternate text representation of the image for users who have images turned off or blind users who have a browser that reads the page aloud to them.

<img src="fluffy.jpg" width=214 height=330 alt="Picture of My Cat">

Adding Hyperlinks with the <a> Tag

So far, we've only done the "ML" part of "HTML". It's not a Hypertext Markup Language until we have a hyperlink!

Insert links to other HTML pages with the <a> tag:

Be sure to visit the author's <a href="http://grdurand.com/">home page</a>.
The above will get rendered like this:

Be sure to visit the author's home page.

That's It. You've Got the Basics!

You may still want to learn about the <table> and <hr> tags, and a few others,but for most of your documentation, and certainly all of your javadoc,that's all you need to know.

If you really want to learn more, get HTML: The Definitive Guide from O'Reilly.

For the latest and most complete HTML specification, go to http://www.w3.org.

For maximum browser compatibility, stick to HTML 3.2.