HTML: Start to Finish

Let's look at how a single, simple HTML document is put together, piece by piece. We're not talking about design here, but just the technical side of how HTML tags shape the appearance of a document within a browser window.

1. Parts of a Document

There are two main sections of an HTML document, the head and the body. The head contains information about the document, but doesn't actually display anything in the browser. The body contains the content within the browser window. These two parts are wrapped up in the <html> tag, and just before them is the doctype, which defines a set of rules by which the HTML document should be displayed; different sets of rules should, theoretically, lead to differences in how a document displays.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
</head>  
<body>  
</body>  
</html>

Note here that nothing actually displays just yet: there is no content in this document, just a structure for content.

2. Title

One item you can add to the head section is the title of the document; this is what the document will be called in the title bar of the browser, and what the document will be called if it is bookmarked.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Website</title>  
</head>  
<body>  
</body>  
</html>

The first document, for example, looks like this:

In the list of bookmarks, it looks like this:

And the second document looks like this:

In the list of bookmarks, it looks like this:

3. Meta Information

A second kind of information you can add to the head section are Meta tags, which can contain information about the document itself, and helps search engines index and list the document. In this case, some keywords and a short description of the document are added.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components">  
</head>  
<body>  
</body>  
</html>

Note here that there is still no content, so nothing shows up within the browser window itself.

4. Adding Content

Let's add a single line of text to the body section of the document. That line will now show up in the window:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components">  
</head>  
<body>  
This web site will be less fun than you can imagine.  
</body>  
</html>

It doesn't look like much, just simple black text on white (or grey, if using Netscape)

5. Formatting Text and Colours

We can determine what colours we want the background to be, and also say a few things about how we want that text to show up. We do this by linking to a style sheet, which can contain information about colours and typefaces, among other things. First, let's create a new document, and enter this:

body {background-color:rgb(255,255,200);
font-family:Gadget,Tahoma,sans-serif;  
color:rgb(50,50,50);  
font-size:12px}

This will set the background to a nice light yellow, the text to a dark grey, and set the font to 12 pixel Gadget, Tahoma, or generic sans-serif, whichever comes first.

Next, we save this document, and let's just call it "styles.css" (we can call it anything, as long as it ends with the .css extension).

Then, we link to it from the html document we've started:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components">
<style type="text/css">@import url("styles.css");</style>
</head>  
<body>  
This web site will be less fun than you can imagine.  
</body>  
</html>

The style should declare that it is of type "text/css", in case there are other kinds of styles (there aren't really, but this accounts for future developments), then uses "@import" to import a style, which is at "url(location of file);" (the semi-colon is important there).

The list of fonts, "Gadget, Tahoma, sans-serif", works like this: the browser will use the first font it finds in the list, so if Gadget is available on the user's computer, it will use that; if not, it will look for Tahoma, a common Windows font; if that is not found, it will use whatever is determined as the default sans-serif font, usually Arial. In this way you can list as many fonts as like, moving from the ones you really hope the user has, to the ones you'll accept if nothing else presents itself. Gadget is a Mac-only font; a Windows user will see something in Tahoma.

You can read more about web typography and colours if you want to.

6. Adding More Text

Let's add another line of text to the document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components">
<style type="text/css">@import url("styles.css");</style>
</head>  
<body>  
This web site will be less fun than you can imagine.  
  
For more fun, go to LaughLab.  
</body>  
</html>

7. Controlling Line Space

As seen in the example above, the browser window doesn't respect your line breaks. This is actually a good thing, as it allows you to litter your code with line returns and extra spaces to make the code itself more readable. The downside is that you have to put <p> (paragraph) and <br> (line break) tags in yourself.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components">
<style type="text/css">@import url("styles.css");</style>
</head>  
<body>  
This web site will be less fun than you can imagine.  
  
<p>  
For more fun, go to LaughLab.</p>  
</body>  
</html>

A paragraph tag needs to be closed by a </p> tag, while a <br> doesn't. A <p> adds a line of space before the break, while the <br> is just a line break.

8. Adding Links

The "H" in HTML stands for "Hyper", as in "hyperlink", a means of linking one document to another. The syntax is pretty simple:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components">
<style type="text/css">@import url("styles.css");</style>
</head>  
<body>  
This web site will be less fun than you can imagine.  
  
<p>  
For more fun, go to <a href="http://www.laughlab.co.uk">LaughLab</a>.</p>  
</body>  
</html>

The "a" in <a href stands for "anchor", which defines the space that is clickable; the </a> defines the end of the clickable span, so note above that while "LaughLab" is clickable, the period, being outside the span, is not clickable. The "href" tag points to the actual document or URL the browser should go to when the link is clicked; in this case, "http://www.laughlab.co.uk", another web server.

9. Further Refining the Appearance

Links default to the colour blue, which is okay, but doesn't work so well on the light blue background we've already chosen. Fortunately, we can control what colours we want links, visited or otherwise, to show up as. We can do this by defining a range of styles back in the style sheet file, and determining what they should look like:

body {background-color:rgb(255,255,200);
font-family:Gadget,Tahoma,sans-serif;  
color:rgb(50,50,50);  
font-size:12px}

a{color:rgb(255,0,0)}  
a:visited{color:rgb(90,90,90)}  
a:hover{color:rgb(255,120,0)}  
a:active{color:rgb(0,0,0)}

There are four states for the links' appearance defined here: the normal state (a), the visited state (a:visited), the hover state (a:hover), when a cursor is right on top of the link, and the active state (a:active), when the user is actually clicking on the link.

10. Adding Structure to the Content

A built-in range of HTML tags are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>; they're headers that move from the top-level (h1) to the bottom level (h6). They're an effective way to structure your own documents, starting with <h1> and moving down to <h6> as you need to.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components"> 
<style type="text/css">@import url("styles.css");</style>
</head>  
<body>  
<h1>Welcome to the world's least fun web page!</h1>  
  
This web site will be less fun than you can imagine.  
  
<p>  
For more fun, go to <a href="http://www.laughlab.co.uk">LaughLab</a>.</p>  
</body>  
</html>

11. Additional Formatting

That header up there doesn't look so hot, though, but you don't have to live with it the way it is; using the style sheet, you can determine what <h1> should look like:

body {background-color:rgb(255,255,200);
font-family:Gadget,Tahoma,sans-serif;  
color:rgb(50,50,50);  
font-size:12px}

a{color:rgb(255,0,0)}  
a:visited{color:rgb(90,90,90)}  
a:hover{color:rgb(255,120,0)}  
a:active{color:rgb(0,0,0)}

h1{font-size:18px;  
color:rgb(100,100,200);  
font-family:Georgia,Times,serif;  
font-weight:normal;}

In this case, I've defined <h1> to be 18 pixels (px) high, in a bluish colour, and in Georgia (preferably). If I was using <h2> or <h3>, I could similarly define them in the <style>.

12. Adding Images

The web needs more than text, of course, and images are a big part of the web. Images need to be in JPG or GIF format, and are easy to include:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components">   
<style type="text/css">@import url("styles.css");</style>
</head>  
<body>  
<h1>Welcome to the world's least fun web page!</h1>  
  
This web site will be less fun than you can imagine.  
  
<p>  
<img src="images/image-1.jpg"></p>  
  
<p>  
For more fun, go to <a href="http://www.laughlab.co.uk">LaughLab</a>.</p>  
</body>  
</html>

<img> defines an image, and the only mandatory parameter is the src, or path to the image. Here, src points to a folder called "images", in which there is an image called "image-1.jpg" (boring names, I know). If you had a sub-folder in "images" called "portfolio", the path might look like "images/portfolio/image-1.jpg", each folder ending with a "/".

You can read more about jpgs and gifs if you want to.

13. Multiple Images

You can, of course, have more than one image in a single document; with a little luck, they can even line up precisely, to make the appearance of a larger image or seamless layout:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components"> 
<style type="text/css">@import url("styles.css");</style>
</head>  
<body>  
<h1>Welcome to the world's least fun web page!</h1>  
  
This web site will be less fun than you can imagine.  
  
<p>  
<img src="images/image-1.jpg"><img src="images/image-2.jpg"><br>  
<img src="images/image-3.jpg"><img src="images/image-4.jpg"></p>  
  
<p>  
For more fun, go to <a href="http://www.laughlab.co.uk">LaughLab</a>.</p>  
</body>  
</html>

For complicated layouts, you should take a look at tables, which are too finicky to get into here, but a great tool for making the screen look the way you want it too.

14. Links and Paths

Here are some more links, each with a slight twist:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components"> 
<style type="text/css">@import url("styles.css");</style>
</head>  
<body>  
<h1>Welcome to the world's least fun web page!</h1>  
  
This web site will be less fun than you can imagine.  
  
<p><a href="games.html">Games</a> | <a href="jokes/">Jokes</a> | 
<a href="../stories/stories.html">Funny Stories</a></p>  
  
<p>  
<img src="images/image-1.jpg"><img src="images/image-2.jpg"><br>  
<img src="images/image-3.jpg"><img src="images/image-4.jpg"></p>  
  
<p>  
For more fun, go to <a href="http://www.laughlab.co.uk">LaughLab</a>.</p>  
</body>  
</html>

The first points to a document called "games.html"; that document is in the same location as the document that calls it.

The second link points to "jokes/"; this is a shorthand way of pointing to a document called "index.html" that is in a folder called "jokes". "Index.html" is a special file name, as most web servers will default to looking for a document with that name if no other is specified. So "http://www.laughlab.co.uk" is the same as "http://www.laughlab.co.uk/index.html"; "jokes/" is the same as "jokes/index.html".

The third link points upwards one level from the current document ("../"), so the document which is in "www.homemadeparachute.com/courses/html" will go up one level to "www.homemadeparachute.com/courses/", then into a folder called "stories", then to a document called "stories.html", or an absolute location of "www.homemadeparachute.com/courses/stories/stories.html".

Each of these documents is similar to the original, but look at the slight changes that must occur to account for the different paths:

games.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components">  
<style type="text/css">@import url("styles.css");</style>
</head>  
<body>  
<h1>Games</h1>  
  
There are no games here.  
  
<p><a href="html-doc-14.html">Home</a> | <a href="jokes/">Jokes</a> | 
<a href="../stories/stories.html">Funny Stories</a></p>  
  
</body>  
</html>

games.htmllooks much the same as the source document.

jokes/index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components">   
<style type="text/css">@import url("../styles.css");</style>
</head>  
<body>  
<h1>Jokes</h1>  
  
There are no jokes here.  
  
<p><a href="../html-doc-14.html">Home</a> | <a href="../games.html">Games</a> | 
<a href="../../stories/stories.html">Funny Stories</a></p>  
  
</body>  
</html>

jokes/index.html has to go up a level to get to the home document, so "../" is needed, and it needs to go up two levels to get to "stories", first out of "jokes/", then out of "".

stories.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
      "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Fun Web site</title>  
<meta name="keywords" content="html, learn, demonstration">  
<meta name="description" content="A short description of html parts and components">  
<style type="text/css">@import url("../styles.css");</style>
</head>  
<body>  
<h1>Stories</h1>  
  
There are no stories here.  
  
<p><a href="../html-doc-14.html">Home</a> | <a href="../games.html">Games</a> | 
<a href="../jokes/">Jokes</a></p>  
  
</body>  
</html>

stories.html needs to specify where the home document is, which is one level up out of "stories/", then into "" to the document's name, thus "../html-doc-14.html". To get to "jokes/index.html", it's quite similar.

There's obviously a lot missing from this basic introduction, but I hope you're starting to get a sense of how HTML can work for you. If something doesn't work the first time, take it apart, and try again until it does work. Look at the source code for other sites around you, and see what makes them tick.