WEBHOSTS MANAGER

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

  1. About Hyper Text Markup Language
    • History of HTML
    • Web History
    • Versions of HTML
  2. How To Start A Web Page
    • <HTML>
    • <HEAD>
    • <TITLE>
    • <BODY>
    The Body Tag
    • BACKGROUND=""
    • BGCOLOR=""
    • LINK=""
    • ALINK=""
    • VLINK=""
  3. Fonts, sizes, styles and Writing
    • Font
    • size=
    • color=""
    • face
    • h1 - h6
    • Paragraph
    • horizontal Rule
    • New Line
  4. Colors
      ="color"
      ="hexodesimal"
  5. Item Alignment
    • P ALIGN=""
    • ALIGN=
    • CENTER
    • LEFT
    • RIGHT
  6. Links and Mailto Links
    • External Link
    • Internal Link
    • Same Page Link
    • Mailto Link
  7. Images
    • Align
    • Alt
    • Height
    • Width
  8. Tables
    • Table
    • bgcolor
    • BORDER
    • CELLPADDING=
    • CELLSPACE=
    • width=""
    • align=
    • td
    • tr
  9. 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:

  1. 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. 
  2. 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:

  1. Names. Eg. color="green" color="blue" color="white" and so on.
  2. 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

To Top
Copyright Copyright WebHosts Manager, 1998-2024. Last modified: Thursday, April 25, 2024 | Legal & Privacy Notices