![[LOGO]](guide_logo.png){kind=logo}
| Welcome | |
| Overview | |
|
Structure | |
| Text | |
| Images & Links | |
| Lists | |
| Tables | |
| Frames | |
| Style Sheets | |
| More Help | |
| Credits |
The essential basic
structure of an
HTML document
This section details the overall structural elements which are loosely required in all documents. These elements simply define that the document is a genuine HTML script to the browser. There are only a handful, but it's worth familiarising yourself with them. A complete example document structure is given further down the page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
This one looks pretty horrendous - but thankfully you don't need to know what it means. It's not even necessary, but sound practice says that you should always include it as the very first line of any HTML file. It's called the doctype directive, and is simply a formal, strict way of stating to browsers that the document is an HTML 4.0 file. In some documents, you might see "3.2" instead of "4.0" if a document was written to the previous HTML version standard.
<html> . . . </html>
This pair of tags should enclose the entire document, apart from the doctype directive above. They don't actually do anything per se, but they're part of the convention for identifying the document as a genuine HTML file.
<head> . . . </head>
These tags should enclose the header block, which gives technical information about the document, and specifies its title. Nothing that appears in the header section will be displayed by the browser.
<title> . . . </title>
Use this pair of tags to define the document's title, which usually gets displayed in the browser's title bar. Any text between the two tags will be rendered as the title. This line should be placed within the header section of the HTML document.
<body> . . . </body>
These tags start and end the body of the document. This is the part that actually contains the content, which will be displayed to everyone's view. All of the elements described in the rest of the guide should go into the body block.
<!-- . . . -->
Use these tags to insert optional comments in your HTML files. Comments will not be displayed by the browser, but may be helpful when you're looking at the raw HTML in the future. Comments can include other tags, so you can thus use them to temporarily disable whole sections of your HTML scripts during testing. Ensure that you leave the padding spaces after the start tag and before the end tag.
Putting these fundamental structural elements together, you should now be able to understand the skeleton structure of the simplest possible HTML document file, which is shown below. The indentation is irrelevant of course, but is added here for clarity, to help the structure stand out!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<!-- This is a useless comment -->
<html>
<head>
<title>An Exceptionally Boring Sample Document</title>
<!-- Technical header stuff should be put here -->
</head>
<body>
<!-- This part will contain lots more elements, and all
of the document's actual content, including text, lists,
pictures, and hypertext links to other documents. This bit
also shows that comments can span more than one line! -->
</body>
</html>
If you were to create such a document file, and load it into a web browser, it would appear totally blank, except that the title would be shown in the title bar of the browser's window. This is because the body block contains only a comment, and no actual text or HTML elements. However, the above would be useful as a blank template, which you could use each time you wanted to create a new document. See below for a more advanced technique regarding the use of templates.
<!--#include virtual="filename" -->
This is a slightly more advanced concept, which you may want to come back to after you've read more of the guide. But briefly, adding the above line anywhere in the structure of your HTML documents should prompt your web server to insert the specified file into the page at that point. The file you insert is typially another HTML file containing any chunk of normal HTML code that you want.
This is called a server-side include, and by using this facility, you can, for example, insert a standard piece of HTML into all of the pages on a web site you're developing. You can imagine how powerful this is when, say, all your pages need the same bit of basic outline HTML code or layout instructions. Now, to modify the look or content of all the pages, you only have to modify the single include file!
There are two important points to note: firstly, server side includes are dependent on your system setup, so you need to check with your system administrators to see if they're supported. If you're writing pages on a conventional PC and just loading them into your browser, they will NOT work; you need to run them through a proper web server. Secondly, all files which contain include directives must be renamed with ".shtml" extensions, rather than the normal ".html". Note that include files can contain parts of header blocks, body blocks, or absolutely anything else - including other includes (sic) - so they're extremely powerful.
| Welcome | |
| Overview | |
|
Structure | |
| Text | |
| Images & Links | |
| Lists | |
| Tables | |
| Frames | |
| Style Sheets | |
| More Help | |
| Credits |