Every new, or
potential webmaster has had a moment of
panic when he or she suddenly realizes he doesn't know a
thing about writing HTML. There is even a rumor going
around that it is a foreign language.
It is NOT!
needed to write your first web page in HTML are very few
and very simple.
There are many excellent HTML tutorials on line; and this brief one is not meant to teach you everything they will. But I hope to make the idea of writing HTML a little less scary to the beginning web author, and help the WYSIWYG ( What You See is What You Get ) user learn how to tweak what their software hath created.
One of the exciting things about the web is that it is constantly changing. Your web site will too. Don't worry if your first effort isn't exactly what you envisioned. Write your first, basic page in HTML and put it on line. I guarantee you'll be changing and improving it, over and over again.
is the language of the Web. The most beautiful and complex
web page is created with simple text commands that can be
written in a plain
such as Window's NotePad.
HTML is just
written in a dialect that uses
Tags are those cryptic
words or abbreviations you see enclosed in angle brackets
A basic web page requires only four tags. Surprised? Well, it's true! The HTML code for a basic page looks like this:
And it looks something like this in Internet Explorer:
Everything else is just icing on the cake. Most of that icing is decorative, e.g. colors, layout, design, etc. and is explained below. But as any good cook knows, there are a few places where a dab of icing helps to hold the pieces together. Those are explained in Very Basic HTML, What Else do I Need to Know?
Well -- I told you it was a basic page, didn't I? You decorate your page by using the formatting tags. There are many more tags than the basic ones discussed here. But all tags follow a few basic rules. Think of them as switches that you turn on and off.
Rule 1. All tags are enclosed in angle brackets: < >
Rule 2. Every tag that is opened (turned on) must be closed (turned off). Close every tag just as soon as it has completed its job.
The opening tag (turn this command on) looks like this:
<html> <body> <p> <font>
The closing tag (turn this command off) adds a forward slash like this
</html> </body> </p> </font>
Rule 3. Tags are closed in the reverse order from which they are opened. Tags usually occur in pairs and are often nested, one pair inside another. Read backward to the left to find the last tag you opened. Close it first. Then close the one before that, etc. Each pair of tags in the example below is a different color, so you can easily see the sequence in which they are opened and closed.
Rule 4. Tags must tell the browser both what to do and how to do it. The what is called an attribute and the how is called a value. Attributes are things like color, size, and alignment. Values are color names, fixed values like left | right | center, or a URL, and are preceded by the equals ( = ) sign. The value should be enclosed in quotation marks. To align (attribute) a paragraph (tag) in the center (value), the HTML is
For a chart of the basic tags and their attributes, click here.
Rule 5. Multiple attributes should be added to a tag in series.
This is the right way to do it:
This is the wrong way:
One of the easiest things you can do to make your page unique is to change the background. To change the color of your background:
Tag to modify: body
To use a tiled image (texture or picture) for your background:
Tag to modify: body
If you have placed your graphics in a subdirectory, you will need to add the path (location) to the file name.
"Paths" are explained in detail in More Than you Wanted to Know About LINKS.
Changing the Text: Color, Size and Face
The color of the text on your page is another easy thing to change. To change the default for all of the text on the page:
Tag to modify: body
To make local changes to text within the body of the document, use the font tag:
Tag to add: font
To change the color, size and face . . .
Linking your pages to each other, and to other interesting and related sites make you a part of the wonderful World Wide Web. Links can be relative (to another page at the same URL), or absolute (to a page at a different URL).
Tag to add: anchor
Link to a page at the same URL (relative link):
<a href="samppg.htm">See a sample of a Very Basic Page</a>
Link to a page at a different URL (absolute link):
<a href="http://wc.rootsweb.com/cgi-bin/igm.cgi?db=ambrose">My Family Tree at World Connect</a>
A variation of the HREF link is the name anchor. This link takes your visitor to a specific location on a page. See Moving Around a Page
Another useful link allows your visitor to send you an email, just by clicking a link. The HTML is similar to the page link, but changes http:// to mailto:
<a href="mailto:your_email_address">Send me an email</a>
Understanding how links work (and why they sometimes do not) is essential knowledge for any web author. For a more detailed explanation, see More Than You Wanted to Know About LINKS.
Adding an image is as simple as telling the browser what image to display and where to find it. (Remember to upload the image file to your website first before you call it on your page.) Together, the what and where make up the URL of the image. In other words, you'll be linking the image to your page.Tag to add: image
If the image you want to add is at a different URL, then you will need an absolute link as described above in Adding a Link.
While not required for the image to display on your page, adding the width and height attributes to the image tag will speed up the display in most browsers, and keep the page from shifting when the image finishes loading. The values for the width and height attributes are stated in pixels. Most graphic programs will tell you the size of your image in pixels. Add the appropriate attribute values to the image tag. The alternate tag displays text if the visitor chooses a "text only" view of your page or is unable to load the image. This tag has become more important as more people use mobile devices to access the internet. The value for the alternate tag is the text you would like to have displayed if the image download fails or is disabled.
<img src="zebra.jpg" alt="Grevy Zebra" width="420" height="500">
The larger the size of the image file, the longer it will take to download. Try to keep your image files under 30Kb in size. If you must share a full screen view of Great Uncle Thadeus at 200Kb, use a thumbnail (file size under 10Kb) on your page, and make the thumbnail a link to the full screen version. It's also a good idea to warn your vistor they are accessing a large file that may take time to download.
<a href="zoo/zebra.jpg"><img src="zoo/zebra-t.jpg" width="80" height="120"></a>