| structure | |
|
|
Now it's about time we get to the real HTML writing. First, let's look at a bare-bones web page, with a minimum of content. The different parts will be discussed below. For clarity, I've written the tags in bold.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> <META NAME="Author" CONTENT="me"> <META NAME="Keywords" CONTENT="keywords"> <BASE HREF="my home page"> <TITLE> Some Title </TITLE> </HEAD> <BODY> <BASEFONT SIZE=4> <!-- this is where the actual page starts --> This line is the only line that's visible in a browser... </BODY> </HTML>
If you click here, you'll load this page. If you then 'view source', you'll see the above. Since this is a useful starting point, you can save the page to your local disk, for use as a template. Just make sure you adapt it for your personal use.
The first line is a notification to any software reading the page that the page conforms to the HTML 3.2 specifications, which were released in May 1996. The full meaning is beyond the scope of the course, but it helps the software understand the contents of the page. The rest of the page is contained in the <HTML> tag. Although the intention of the closing tag is to tell a browser not to display any material after the </HTML> tag, the browsers I have seen do so anyway. The distinction you should see here is the one between the head and the body of the page. The head contains information that is only of importance to the software handling the page, and the body contains the actual matter that should be displayed.
| head | |
|
|
The header is used to give the browser some information about the page. For example, in this case it contains three <META> tags, which are used to set contents in certain variables.
The first looks a bit similar to a line some email headers have. In fact, it's the same, describing the MIME type (Multipart Internet Mail Extensions) to be text, HTML source to be precise, and a browser should look up special characters in a set defined by the ISO-8859-1 standard, also known as isolatin. Essentially, it avoids the file contents from being garbled during transfer. The one defined here makes special characters for most Western languages available. The Quick Reference contains a table of characters you normally will not find on your keyboard. The second <META> tag is used to set a name in the 'author' variable, and the third <META> tag allows you to specify keywords, which may be used by an internet search engine to classify your pages.
After the meta information, the <BASE> tag specifies a base URL, which allows references relative to this URL in the remainder of the page. That can avoid a lot of typing, and more importantly, typing errors. The final tag in this header is the <TITLE> tag, which of course specifies the title of this particular page. Most browsers put the title in the window title bar.| body | |
|
|
Since the contents of the document body cover about the rest of the course, I can be brief here. The <BODY> tag can take a set of attributes
The other important tag is a comment, delimited by <!-- and -->. Not only are comments useful to explain rather dense parts of the source, but they can also be used to comment out a part of your page you do not want to display for some reason. Any HTML between these delimiters is not displayed by a browser.
| characters | |
|
|
One thing that might have occurred to you by now is that by delimiting tags with angle brackets, it's impossible to use these as characters. Also, it's very nice to define a character set with characters that aren't on you keyboard, but how are these inserted? The HTML answer comes in what are called entities. An entity starts with an ampersand (&), and is terminated by a semicolon. In between, you type either the decimal code of the character, preceded by a hash (#), or an abbreviation. So, to get a < printed on your page, you type either < or <. A complete listing of the codes and abbreviations can be found on the Quick Reference. Note that this also implies that you need to use this form to type an ampersand...
| I will not guarantee that any of these pages will exist indefinately, so please only bookmark the top page. |