HTML TUTORIAL
HTML is a mark up language which is the basis for all web pages. It is a simple
command set that can be created using any text editor, such as Notepad, or using
advanced HTML editors, such as Macromedia Dreamweaver or Microsoft Frontpage. This tutorial explains
the main tags used in HTML. Please read it thoroughly before attempting to
create your own hand coded pages.
Table of Contents
- About Hyper Text Markup Language
- History of HTML
- Web History
- Versions of HTML
- How To Start A Web Page
- <HTML>
- <HEAD>
- <TITLE>
- <BODY>
The Body Tag
- BACKGROUND=""
- BGCOLOR=""
- LINK=""
- ALINK=""
- VLINK=""
- Fonts, sizes, styles and Writing
- Font
- size=
- color=""
- face
- h1 - h6
- Paragraph
- horizontal Rule
- New Line
- Colors
- Item Alignment
- P ALIGN=""
- ALIGN=
- CENTER
- LEFT
- RIGHT
- Links and Mailto Links
- External Link
- Internal Link
- Same Page Link
- Mailto Link
- Images
- Tables
- Table
- bgcolor
- BORDER
- CELLPADDING=
- CELLSPACE=
- width=""
- align=
- td
- tr
- Forms
- Form
- Method=""
- ACTION=""
- INPUT..
- MAXLENGTH=
- CHECKED
- NAME=""
- SIZE=""
- VALUE=""
- OPTION
- SELECTED
- TEXTAREA
- COLS=
- NAME=""
- ROWS=
About HTML
HTML, or Hyper Text Markup Language, is the basic language from which all web
pages, or internet based documents, are created.
HTML has quite a long history. Briefly, HTML and the internet
were originally developed for Military communications, then
Universities started using it. At present, the current version of HTML
is v4.0. The language is very straightforward - it basically consists of starting a command
with <command> and then ending the command
with </command>. Although complex results can be achieved with it, basic functions are easy to
learn and good web pages are not difficult to produce.
Return to the main
index
Starting A Web Page
Starting a web page is rather simple. To create a page, simply enter the
following commands into a new text file.
<HTML>
<HEAD>
<TITLE> your title here
</TITLE>
</HEAD>
<BODY...> (see below for more about the body command)
Page Content
</BODY>
</HTML>
That's all there is to it! Basically, the <HTML> tag at the beginning tells the
web browser that this is an HTML document. The <HEAD>
tag tells the browser that information about the page, such as the page's title,
can be found there. The <TITLE> tag begins the title and the
</TITLE> ends it. The </HEAD> tag closes the head. The <BODY>
tag begins the main page content, including the text,
links, images, etc. It can also define the page background and text colors for
the browser. </BODY> and </HTML> tags close the page.
Return to the main
index
The Body Tag:
The <BODY> tag
is where the web browser is told everything it needs to know about the structure
of the web page. It can list the colors for links, background and text. It is also a major
source of errors, so be very careful with this element. Inside the <BODY> tag, the following
commands may be placed (note that all these tags are optional):
<BODY....>
- BACKGROUND="backgroundname.gif" The File name of your background.
- BGCOLOR="" The Color in the background.
- TEXT="" The Text Color.
- LINK="" Unvisited Link Color.
- VLINK="" Visited Link Color.
- ALINK="" Active Link Color.
- BGPROPERTIES="fixed | none" Background properties (scrolling or fixed), works with IE only.
Page content
</BODY....>
Return to the main
index
Fonts sizes, styles and more...
In order to create even a basic web page, you need to know how to use fonts.
This is also quite easy.
To change a font size, there are two different
tags that can be used:
- The heading tag, where h1-h6 all produce text of different sizes,
with h1 being the largest. This tag is simple to use, involves only opening and
closing the tag, but is very basic.
- The Font tag also uses number from 1-6 to
specify size. It also allows you to change the font color
by adding the tag color="" inside the font tag, and lastly it allows the user to use
different styles of fonts by adding the tag face="" also inside the font tag. This tag
requires an open and close tag, but the color, size and style need to be specified
in the opening tag only.
For line breaks, the tag <br> starts a new line, and the tag
<p> creates a new paragraph, with a blank line between it and the previous paragraph.
The tag <hr> makes a horizontal line across the page. The size of this
line can be changed using size=+ or - and any number. Here is a list of the tags:
- <font..> the basic font tag
- color="" font color
- size=+/- the size, -4 through +4
- face="" the style of the font
</font> end the tag
- <h1> - <h6> Preset font sizes, one being the biggest
- </h1> - </h6 end the tag
- <hr..> horizontal rule
size=+/- the size of the rule, any number
- <p> new paragraph
- <br> new line
Return to the main
index
Colors
In HTML, there are two ways to define color names:
- Names. Eg. color="green"
color="blue" color="white" and so on.
- Hexadecimal numbers. Eg. color="#000000"
The color command can be used in many tags such as the font tag
and when bg is added on it can be used in the body tag and table tags and more.
color="#FFFFFF" color is black
color="black" color is black
color="#000000" color is white
color="white" color is white
Return to the main
index
Item Alignment
The next topic in our Tutorial focuses on alignment of images, text, tables,
etc.
To align a picture, or table, within the main tag add the sub-tag align= (center, left or right).
This can be used in tables, pictures, image maps, and other similar elements.
Below are some examples.
<center> This tag centers the item or text
<p align="right | left | center"> aligns the item on the page
You can also use tables to align images, text and other
elements on your page. Return to the main
index
External, Internal and Mailto Links
In order to make a web site with multiple pages, or to link to other sites, you
must know how to make a link. Links are rather simple when they reach internal or
exterior pages, but when they are in the same page, they become more difficult. There
are also mailto links that allow people to send you mail by clicking on the link.
- <a href="mailto:your.com>Link
Text</a> sends an email to you, through a link.
- <a href="http://www.sitename.com">Link
Text</a> makes a link to a page external to your site.
<a href="filename.html">Link Text</a> makes a link to a page inside your
site.
- <a href="#anchorname">Link
Text</a> makes a link to another section of the same page. You need
to place this want the link to send the user to: <a
name="anchorname"></a>
Return to the main
index
Images
Images are actually rather simple to add to your web page. Basically all you have to do is
call them up to your web page, just like you would call up a link. But, unlike a link, they
appear instantly.
The <img...> tag adds an image to your page. The following
sub-tags can be used with the image tag:
- src="image.name" specifies the image (must be included)
- align="center | left | right" aligns the image horizontally
- valign="right | top | left" aligns the image vertically
- border="" decides the border for the image (use o with linked images)
- alt="image name" makes text in case the image doesn't load
Return to the main
index
Tables
Now for the more difficult elements - tables. Tables are useful in organizing information into specific
columns. With care, they are relatively easy to
master. But note that each section of a table needs its own code, and it never hurts to use
more than one table, if you want a space in between rows.
The <table..> tag begins a table. The following sub-tags can be
used with the table tag:
- align= aligns the table
- bgcolor="" background color for the table
- border= border thickness, sometimes large borders look nice too
- cellpadding= space between the border and contents of the table
- cellspacing= space between parts of the table
- width= table width
- <tr..> creates one line on a table
- bgcolor="" the background color of the part
- align= aligns the content in the cell
- valign= aligns the content in the cell
vertically
- <td> starts a cell (individual part of the table, for data/ pictures)
Table cell information goes here.
- </td> ends the cell
- </tr> ends the table line
</table> ends the table
Return to the main
index
Forms
Forms are probably the most difficult element in HTML basics. Make sure that you use the
correct method (see below), or your form won't do anything.
The <FORM....> tag starts a form.
- ACTION="" what happens to the form, when submitted (usually
mailto:your)
- METHOD="post or get" tells the form how to process (post
is the usual method).
- <INPUT...> makes a form input box.
- NAME="" field name (useful when reading the form)
- SIZE= size of the form field
- MAXLENGTH= the maximum amount of characters that can be entered
- TYPE="text, password, check box, radio, submit or rest" indicates the type of box
- CHECKED indicates that the check box is checked
- <Select> indicates a select list
- <OPTION..> A drop down list of items (use one for every item)
- SELECTED indicates that this item is selected by default
- SIZE= the size of the box
- </SELECT> ends select list
- <TEXTAREA..> starts a large text field
- COLS= number of columns
- ROWS= number of rows
- NAME="" indicates the name
- WRAP="physical" makes code automatically go to the next line at the end of the textbox
- </TEXTAREA> Ends the TEXTAREA
</FORM> Ends the form.
Return to the main
index
More Information
If you need more information, the following HTML and Page Building
reference sites may also assist you:
Return to the main
index
|
