Basic HTML (v4.01 or earlier)
Hyper Text Markup Language (HTML) 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 text editor such as Windows NotePad. HTML is just plain english, written in a dialect that uses something called TAGS. Tags are those sometimes cryptic words or abbreviations you see enclosed in angle brackets [ < > ] when you view the source of a web page. The first time you look at a page of HTML code, it can look like a foreign language. But most tags are nothing more than the HTML equivalent of the formatting commands (bold, italic, line feed, etc.) in your word processor. They tell the browser how to display the content of your page.
There are many excellent HTML tutorials on line and this brief one is not meant to teach you everything they can. But I hope to make the idea of writing HTML by hand a little less scary to the beginning web author, and help the WYSIWYG (WhatYouSeeisWhatYouGet) user learn how to tweak what their software hath created. An understanding of the basics will make it much easier when you are ready to move on to more advanced formatting techniques such as Cascading Style Sheets (CSS.)
A basic web page requires only four tags. Surprised?
Well, it's true! The HTML code for a basic page looks like this:
<head>
<title>My Page</title>
</head>
<body>
The
terrific text and gorgeous graphics that appear on your page.
</body>
</html>
And it will look something like this in your browser.
Everything else is just icing on the cake. Most of that icing is decorative: colors, size, styles, layout, etc. But as any good cook knows, there are places where a dab of icing helps to hold the whole thing together. You'll find more about those dabs
near the end of this page.
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 (well, almost every) tag that is opened/turned on must be closed/turned off. Close a tag just as soon as it has completed its job.
The opening tag (turn this command on) looks like this:
The closing tag (turn this command off) adds a forward slash like this:
Rule 3. Tags are closed in the reverse order
from which they are opened. Except for a few "empty" tags (those without an enclosed element, e.g. <meta> <img> <br>), tags will 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, alignment, or a web address. Values are
color names, specific or relative sizes, alignment 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:
Rule 5. Multiple attributes should be added to a tag in series.
The wrong way:
Your text is here.
</font>
</font>
</font>
The right way:
Your text is here.
</font>
HTML is an exact language. Typos, forgotten or misplaced syntax # " / < > ? & or tags closed at the wrong time may cause your page to display incorrectly, and less forgiving browsers may not display the affected parts at all!
For a list of basic tags and their attributes, as well as new tags available in HTML5, visit the W3Schools Tags Reference.
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
Attribute: bgcolor
Value: hexadecimal color name
To use a tiled image (texture or picture) for your background, you will first need to upload the image file to your web host's server, then insert the HTML that tells the browser where to find it for display on your page (see Adding a Link)
Tag to modify: body
Attribute: background
Value: URL
The color of the text on your page is another easy thing to change. To change the default color for all of the text on the page:
Tag to modify: body
Attribute: text
Value: hexadecimal color name
To make local changes to text within the body of the document, use the font tag:
Tag to add: font
Attribute: color, size, and/or face
Value: according to attribute
To change all three . . .
Use caution when changing the font face from one of the defaults (Times, "Times Roman", serif; or Arial, Helvetica, sans-serif). Your visitor must have the named font on his system to display that font. If s/he does not have the designated font, the browser will display the default font as set in their browser.
By now you are probably wondering about the "hexadecimal" colors mentioned above. The hexadecimal code is a fancy name for the simple solution the HTML wizards came up with to tell a browser what colors to display. Based on the Red-Green-Blue palette, each color of the palette is given a two digit value, expressed as #RRGGBB. Valid numbers are zero (0) through nine (9) and the letters A through F. The possibilities are almost endless. Just to give you the idea --
|
Red
#FF0000 |
Green
#00FF00 |
Blue
#0000FF |
Aqua
#00FFFF |
Yellow
#FFFF00 |
Magenta
#FF00FF |
|
White
#FFFFFF |
Off White
#F3F3ED |
Cream
#FFFFCC |
Peach
#FFAA80 |
Mint Green
#CCFFCC |
Black
#000000 |
Linking your pages to each other, and to other interesting and related sites make you 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: a (anchor)
Attribute: href (hyperlink reference)
Value: URL (Uniform Resource Locator)
A relative link uses an abbreviated path/web address, supplying only the location of the linked page relative to the page on which the link appears. For example, if both files are in the same directory:
An absolute link uses a complete web address so the browser can locate the linked file anywhere on the web:
Another useful link allows your visitor
to send you an email, just by clicking the link. The HTML
is similar to a page link, but changes
http:// to mailto:
Most web servers, including this one, are Unix based so are case sensitive. They think index.html, Index.HTML, and INDEX.HTML are three different files. When writing the HTML for a link, be sure the UPPER and lower case letters in your link match the file name eXacTLy.
To add an image to your page, you need to tell the browser what image to display and where to find it. (Remember to upload the image file to your web site before you call it on your page.) The what and where are the URL of the image. In other words, this is just one more type of link. If you keep your web site organized, you will probably keep your image files in a subdirectory named "images" or "photos" so the code will look something like this:
Tag to add: img (image)
Attribute: src (source)
Value: URL
While not required for the image to display, adding the "width" and "height" attributes to the image tag will speed up the display in most browsers, and keep the page from shifting as the image loads. The values for the width and height are stated in pixels.
The "alternate" attribute displays text if the visitor chooses a "text only" view of your page or is unable to load the image for some reason. This tag has become even more important as more people use mobile devices to access the internet. The value for the alternate attribute is the text you would like to have displayed if the image download fails or is disabled.
Image formats for use on the web are GIF, JPG, or PNG. GIF use lossless compression and is preferred for simple graphics containing only a few colors. The maximum palette for a GIF image is 256 colors. JPEG/JPG is the choice for continuous tone photographs and can contain millions of colors; but JPG uses lossy compression to create a much smaller file so it can be downloaded faster. PNG is becoming more popular and can be used instead of GIF, but should not be used for photos since the lossless compression will create a much larger file on the disk.
A DTD is the Document Type Definition (DocType) statement that must be placed as the very first line of the HTML for your page -- before anything else.
Why do you need one? The DTD is one of those
dabs of HTML "icing" that will help
your page display in various browsers as you intended.
There are many types of (X)HTML and your visitor's browser
needs to know what version you want to use to display your page. For
example, the first version of this page was written several years ago using HTML4.01 and the original DTD was:
This updated version has been written to conform to HTML5 requirements and the DTD now is <!DOCTYPE html>
There are other DTD statements for other versions of (X)HTML. If you do not include a DocType for your page, most browsers will revert to something called "quirks" mode which means the browser will render the page to the best of its ability, but it may not look at all as you intended. And since validators check your code against the DTD, you must have one to validate your code. For more information, and a list of valid DocType statements, visit the W3C site (they are the folks who create the standards for HTML) at http://www.w3.org/QA/Tips/Doctype
META tags are inserted between the HEAD tags. They are not displayed on the page, but are used by browsers and search engines. They can identify you as the author, tell search engines how to index your page, tell web spiders they are welcome or to keep out, etc. They also should include the character set in which the page was written so a browser knows how it should be rendered. Effective use of META tags can make a difference in the amount of traffic your site receives. While not all web designers agree, the ones shown here are probably the minimum that should be included. You can copy and paste these META tags into your own HTML. Replace the colored text with your own.
Writing HTML by hand is not difficult, but the first time can be a little scary, so try this.
Does it look as you intended? Great! Make your next addition or change, save, and check it again in your browser. If it's not quite right, you'll know what part of the HTML you have edited, and should be able to find the mistake quickly. Look for forgotten or mis-placed syntax, mis-spellings or typos like <img scr= instead of <img src= , and forgotten closing tags. Reviewing each addition or change as you go can catch a minor error before it becomes a major problem. Happy Coding!
Comments and administrative-type problems should be emailed to the
National Coordinator.
For suggestions, concerns or complaints regarding a specific web site within the USGenWeb Project, please use the
Contact Form.
Direct comments, technical difficulties or suggestions about this web site to the Webmaster.