HTML Tutorials

This is a simple tutorial I wrote for those users who don't even know what HTML is. If this isn't enough for you try one of theese.

.

Main Structure

<HTML>
<HEAD>
<TITLE> Title </TITLE>
</HEAD>
<BODY>
The Body of the document
</BODY>
</HTML>

<TITLE>This is the Title of the document as you'll see it on the title bar of the browser.</TITLE>

The <HTML> </HTML> tells the browser that the document is a HTML page. It contains the whole document.

The <HEAD> tag (and </HEAD> ) is optional and contains document informations such as <TITLE> and <INDEX>

The <BODY> </BODY> encloses the part of the page that will be displayed. The <BODY> tag let's you set the color of text and background:

- To change the background color, use BGCOLOR=RRGGBB

- To change the overall text color, use TEXT=RRGGBB.

- To change the color of links LINK=RRGGBB.

- To change the color of links that have already been visited, use VLINK=RRGGBB.

- When you click on a link, it momentarily changes color. To change that color, use ALINK=RRGGBB.

RRGGBB is the Hex code for the color; that means that colors are coded as a 6 digit hexadecimal RGB number. Let's make it easier: colors are represented by their composition: red, green, and blu (RGB), so the whole color takes 6 digits.
Here are some examples:

Red: FF0000
Green: 00FF00
Blue: 0000FF

All theese parameters must be enclosed in <BODY> tag.

Example n 1. : <BODY BGCOLOR=00FF00> ...........Part of the page that will be displayed (in red).........</BODY>

Example n 2 : <BODY VLINK=00FF00></BODY>

Tags

There are a wide variety of tags you can add to the main text.

In general, all HTML commands will take the form:
<COMMAND> text </COMMAND>.

It is also possible to format the text. This is a list of the most common style tags:

Note that HTML will not recognise more than one consecutive whitespace. To let HTML recognize more than one consecutive whitespace you can use preformatted text. Unfortunately it is displayed in typewriter-like font, like

this

If there is a line break between the sentences a Web browser ignores it and starts a new paragraph only when it reaches a <P> tag. The <BR> tag is the same as a carriage return.

The <HR> tag draws a line, like this:


Font Size
It is also possible to change the Font Size
This can be done with <FONT SIZE=##> </FONT>, where ## is a number 1-7, 1 being smallest.

Centering can be accomplished with the <CENTER> </CENTER> tags,

<CENTER>This is a centered text</CENTER>

Heading Tags

The format for the heading tags is <H#>heading</H#> with # being a number 1-6.

Example:

This is a size 2 heading

This is a size 3 heading

This is a size 6 heading

Lists

List Tag supports four types of lists: ordered lists, unordered lists, definition lists and menus ( which are equivalent to basic unordered lists).
All lists begin and end with an implicit <BR> and, except for the definition list, they all take the form:

<OPEN LIST>
<LH> List header (optional) </LH>
<LI> Item in the list </LI>
<LI> Item in the list </LI>
<LI> Item in the list </LI>
<LI> Item in the list </LI>
<CLOSE LIST>

Ordered Lists use <OL> to open the list and </OL> to close the list.

  1. Item of the list
  2. Item of the list

Unordered Lists use <UL> </UL> to open and close the list.
FONT SIZE=+1>Definition lists use <DL> </DL> to open and close the list. The list items have two parts: the term and the definition. Term is enclosed in <DT> </DT> . Definition is enclosed in <DD> </DD>.

<DL>
<LH> list header <DL>
<DT> term </DT> <DD> definition </DD>
<DT> term </DT> <DD> definition </DD>
</DL>

This is how a definition list look like when viewed with a browser

Term
.........and Definition !
Term2
.........and Definition2 !

Links

Links come in three basic varieties:

To link to another file on another server, use <A HREF="http://www.address.com/path/filename.html"> anchor text </A>. This is called absolute linking. The tag is called an anchor.

Example: The Sony Home Page

To link to another file on the same server, use <A HREF="path/filename.html"> anchor text </A>. That is called relative linking.

Example: My other Web page

To link to a different place in the same file, you have to do two things. First you must leave a pointer to the place in the file you want to link to. The pointer looks like <NAME="abcdefg">. Then the link will look like <A HREF="#abcdefg"> anchor text </A>.

Example: Top of the page

Pictures

To include a picture in your page, you use a slightly different link. <IMG SRC="picture">. picture can be a relative or absolute link, but absolute links are strongly discouraged because of the bandwidth they eat up. (It's much quicker to access a local drive than to go out over the net for a picture.)
Example:

It is possible to use an image as a link:

If you don't like that colored border around the image you can get rid of it in this way:

<IMG SRC="picture" BORDER=0>. It can turn links like this:

Into links like this:

Alignment
By using <IMG ALIGN=...... > you can align the image to the TOP, MIDDLE, BOTTOM, LEFT or RIGHT of the image. Default is BOTTOM.

Top Aligned

Middle Aligned

Bottom Aligned


If my simple tutorial isn' enough for you maybe you'd like to try one of theese:

A Beginner's Guide to HTML A Beginner's Guide to URLs
A Quick Guide to HTML and CGI Scripts All the HTML Commands
Almost Complete HTML Reference An Example Page That Makes Sense
Appendix on HTML Bad Style Page
Bare Bones Guide to HTML Beginner's Guide to Server Push
Carlos' FORMS Tutorial Complete HTML Information Page
Composing Good HTML Content Models in the HTML 2.0 and HTML 3.0 DTDs
Cool HTML with Netscape Creating HTML
Dark side of the HTML Elements of HTML Style
Gareth's Style Guide Harnessing the Power of the Web: A Tutorial
Help Building HTML Pages How do they do that with HTML?
How To Create High-Impact Documents HTML Assistance
HTML Authors Toolkit HTML Authors' Board
HTML Demonstration HTML Design Guide
HTML Documents: A Mosaic Tutorial HTML Style Guide
HTML, the complete guide HTML: Advanced usage
HTML Quick Reference HTML Reference Manual
HTML Tutorial Index - Guides to Writing HTML Documents
Index - HTML tags Japanese HTML Guide
Jim Massey's HTML Workbook Mosaic for X version 2.0 Fill-Out Form Support
Macmillan's HTML Workshop Manual practico de HTML Espanol
On-Line HTML training course OxigenO (En Espanol)
Paul's Design Guide to HTML 3.0 Recommended File Formats for WWW Documents
Table Basics
Tal's HTML Guide
The HTML3 Table Model The HTML Writers Guild Website
Using Mosaic Forms Wade's HTML Tutorial
Web Authoring Style Guide Webmaster Reference Library
Web Workshop, The WebSoc HTML primer
Writing Accessible HTML Documents Writing HTML Documents
Writing for the Web: A Primer for Librarians Writing HTML
WWW & HTML Developer's JumpStation WWW Style Manual
W3 Consortium's HTML page. Yale C/AIM WWW Style Manual


This page has been accessed times.