Here is a quick overview on how to write Web pages -- as quick and as simple as I can make it.
Near the end of this page is the complete source for a sample page that illustrates every markup shown here. And here are a few hints I have found helpful.
You format a Web page using HTML tags, such as <p>,
which starts a paragraph. You can write a tag in UPPERCASE,
lowercase, or miXeD letters. Lowercase looks best.
The simplest Web page looks like this:
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>Header</h1>
<p>
Some content.
</p>
</body>
</html>
That is a complete page!
Every page starts with an <html> tag and ends with
an </html> tag.
The <head> part of the page contains a title, written between
<title> and </title>. This is
what you see on your mode line (if your browser shows one; not all
do).
The next part of the page is the body, between
<body> and </body>. This is the
part that your screen displays.
Within the body, you can have a header, like this,
<h1>Header</h1>, and text or images. Start a
paragraph with <p>; end each paragraph with </p>.
(The preceding example does not contain an image.)
End the body of your page with </body> and end your
page with </html>. That's all that is necessary!
A more complex page has two additional features, both of which consist of "boiler plate", that is, of lines you add to your skeleton page and include in every page.
The first piece of "boiler plate" is a line that tells someone who really wants to know who made the page. Many people don't care who made a page, so you may be inclined to leave this out; but you will find you do want to be contacted by people who do care about your work and who know enough to use this information! So it is best to include this.
You include your `made by' line immediately after your <title>
line. It consists of a <link> tag with
rev="made" in it and a pointer to the maker, usually a
hypertext reference that tells a reader to whom he or she could mail a
message.
Here is what my `made by' line looks like:
<link rev="made" href="mailto:webmaster@rattlesnake.com">
The other piece of boiler plate is a line that tells people how to contact your site's webmaster. This person is most likely you, but may not be. This is the address to whom complaints, praise, and questions go. You may also be the person who created the page. In this case, you may think a Webmaster line is redundant since you have already put in a `made by' line. But the `made by' line is visible only to knowledgeable people; the Webmaster line is visible to every one.
Put a Webmaster line at the bottom of every page. I put mine after a
horizontal rule, <hr>, so it is marked off from the
rest of the page.
Mine looks like this:
<p>
<hr>
</p>
<p>
<em>
<a href="mailto:webmaster@rattlesnake.com">
webmaster@rattlesnake.com</a>
</em>
</p>
When your site has more than one page, it is a good idea to add a line at the bottom of every secondary page that leads back to your main page.
By convention, your main page is called index.html (or index.htm if your system cannot handle four-character extensions). When a browser first comes to a site, it looks for a page called index.html to start with. The word index came to be used because a main page was originally perceived as an `index' to all the other pages on a site.
I put my `return to' line just before my webmaster line, after the last horizontal rule on the page. A `return to' line looks like this:
<p>
Return to: <a href="index.html">Main Page</a>
</p>
To point to another page, you need to write its address. For this you
use an address tag: start with <a href=",
include the hypertext reference, followed by ">,
followed by the text the reader will see. Close the address with
</a>.
For example, to point to my home page, you could write
<a href="http://www.rattlesnake.com">Bob's WWW page</a>
Here is another example. This link points to an excellent page on Web site design.
<a href="http://www.ccil.org/~esr/html-hell.html">
Curmudgeonly Comments on bad Web page design from
Eric S. Raymond </a>
This link consists of the link address itself:
http://www.ccil.org/~esr/html-hell.html
That is followed by the title of the link, which is what you actually see when you look at the page on your browser. In this case, the text is:
Curmudgeonly Comments on bad Web page design from
Eric S. Raymond
Lists are easy. You can make an unnumbered or bulleted list using the
<ul> tag. Each item in the list is marked with an
<li> (for `list item') tag. End the list with an
</ul> tag.
Here is an example, with three items:
<ul>
<li> A bulleted item. The next two items are hypertext links.
<li> <a href="http://www.rattlesnake.com">Bob's WWW page</a>
<li>
<a href="http://www.ccil.org/~esr/html-hell.html">
Curmudgeonly Comments on bad Web page design from
Eric S. Raymond </a>
</ul>
To include an image in a page, you point to the file that contains the
image, a jpg or other image file, using a tag that starts like this:
<img.
In addition to the pointer to the file containing the image, you should provide text for people who are looking at the page without graphics.
For example, if your image file is called
image.jpg and is located in the same directory as your
page, you would write:
<img src="image.jpg" alt="An image">
To center text or an image, add the words align="center"
to your <h1> or
<p> tag, like this:
<h1 align="center">
<p align="center">
The first centers a heading; the second centers the text of a paragraph or an image that follows.
Stop the centering with </h1> or
</p>.
Not all browsers center text or images, so prepare your site so you like how it looks with and without centering.
Here is a complete Web page that illustrates everything we have discussed.
You can see what this page looks like in your browser by following this link: Sample Page
<html>
<head>
<title>Sample Page</title>
<link rev="made" href="mailto:webmaster@rattlesnake.com">
</head>
<body>
<h1>Sample</h1>
<p>
Some content.
</p>
<p>
Here is a link:
</p>
<p>
<a href="http://www.ccil.org/~esr/html-hell.html">
Curmudgeonly Comments on bad Web page design from
Eric S. Raymond </a>
</p>
<p>
Here is a bulleted list:
</p>
<ul>
<li> A bulleted item. The next two items are
hypertext links.
<li> <a href="http://www.rattlesnake.com">
Bob's WWW page at <code>www.rattlesnake.com</code></a>
<li> <a href="http://www.anybrowser.org/campaign/">
The `Best Viewed With Any Browser' site</a>
</ul>
<h3 align="center">Centering</h3>
<p align="center">
If your browser has the capability, this paragraph
is centered.
</p>
<p align="center">
So is the following image:
</p>
<p align="center">
<img src="airplane-in-snow.jpg"
alt="Airplane, mostly dug out of snow">
</p>
<p align="center">
Digging out
</p>
<p>
<hr>
</p>
<p>
Return to: <a href="index.html">Main Page</a>
</p>
<p>
<em>
<a href="mailto:webmaster@rattlesnake.com">
webmaster@rattlesnake.com</a>
</em>
</p>
</body>
</html>
You can, of course, do much more complex Web page designs; but this conveys the basics.
Here again is the Sample Page.
Here is a page containing a helpful few hints.
Return to: Rattlesnake Home Page