Basics
An HTML file is really just a text file with some special formatting instructions included. Any program that can produce a text file can produce an HTML page. The page can be opened in any web browser (Firefox, Internet Explorer, Safari, …) for display.
This is the basic structure for an .html file:
<html>
<head>
<title>Page Title</title>
more stuff that gives info about the page
</head>
<body>
<h1>Page Title</h1>
the actual page contents
</body>
</html>
The things in <…> are HTML tags.
Notice that HTML tags come in opening/closing pairs. The closing tag starts with a slash. For example, <html> is an opening tag; </html> is a closing tag.
Information about the page: <head>
The <head> tag contains some other tags that give meta-information for the page: information about the page itself.
The <title> is the text that is used at the top of the browser window, and in bookmarks for the page. It must be given.
You don't have to give any more than the <title> as heading information for the page.
You can insert a tag that indicates what stylesheet to use. Stylesheets are discussed below.
Contents of the page: <body>
The <body> contains the actual stuff you see on the page. All of the stuff you put inside the <body>…</body> is displayed in the browser window when you open the .html with a web browser.
The <h1>…</h1> is the main title for the page, and it's customary (but not necessary) to have it as the first thing on the page.
Other block-level tags can be included in the <body> and are displayed as appropriate. Some specific tags are discussed in the assignment, or you can have a look at another HTML tutorial. There are some links below.
Escaping Characters
There are a few characters that have a special meaning in HTML. For example, the less-than character is used to start an HTML tag. If you actually want to display a less-than sign on a web page, you can't just type it literally.
To display these special characters, you insert an entity. These are special codes that tell the web browser to display a particular character. The ones you really need are below.
| Entities required to escape characters in HTML | |
| Character to display | Entity to produce it |
| < | < |
| > | > |
| & | & |
| " | " |
Stylesheets
All of the tags in HTML are given a default appearance by the web browser when they are displayed. For example, an <h1> is usually in a large font and bold.
It's possible to override the defaults by using a stylesheet. Stylesheets are written in CSS and typically stored in .css files.
Writing style sheets is beyond the scope of this tutorial (and assignment). All you need to know is that if you have a stylesheet style.css in the same directory as your .html file, you can use it by inserting this code in the <head>:
<link rel="stylesheet" href="style.css">
That tells the web browser to load the stylesheet and use it when drawing the page on the screen.
The course web pages make heavy use of stylesheets to manipulate their appearance. If you're using Firefox or Mozilla, you can see what the pages look like without a stylesheet by going to the “View” menu, and selecting “Page Style”, and “No Style”. Go back and select “125 style” to restore the appearance.
Links
Bad HTML information is far too easy to find. Here are some good links:
- HTML 101: Back to Basics
- Other WebReference.com tutorials, these range from basic to advanced.
- Introduction to HTML
- HTML 4.0 Reference