WebDeveloper.com �: Where Web Developers and Designers Learn How to Build Web Sites, Program in Java and JavaScript, and More!   
Web Developer Resource Directory WebDev Jobs
Animated GIFs
CSS
CSS Properties
Database
Design
Flash
HTML
HTML 4.01 Tags
JavaScript
.NET
PHP
Reference
Security
Site Management
Video
XML/RSS
WD Forums
 Client-Side
  Development

    HTML
    XML
    CSS
    Graphics
    JavaScript
    ASP
    Multimedia
    Web Video
    Accessibility
    Dreamweaver
    General
    Accessibility
    Dreamweaver
    Expression Web

    General

 Server-Side
  Development

    PHP
    Perl
    .NET
    Forum, Blog, Wiki & CMS
    SQL
    Java
    Others

 Site Management
    Domain Names
    Search Engines
    Website Reviews

 Web Development
  Business Issues

    Business Matters

 Etc.
    The Coffee Lounge
    Computer Issues
    Feedback




HTML Tutor - Getting Started
Part 2

By Michael Hayman

The Basics

The basics cover the tags you need in order for the page "to exist". This doesn't include what goes in the page; it includes only what you need in order for the browser to recognize that it truly is a Web page.

<HTML></HTML>
This is the basic tag for every page. It tells the browser that the file being loaded is a HTML document. Look at the basic layout of any Web page to see how it's used.

<HEAD></HEAD>
This defines the head of your page. Incorporates the <TITLE></TITLE> tag.

<BODY></BODY>
This allows you to define the body arguments. They can include:

  • BACKGROUND="file.gif" sets an image file to be tiled as the backdrop to the page elements.
  • BGCOLOR="#rgbcode" Sets the background color.
  • TEXT="#rgbcode" - sets the text color
  • LINK="#rgbcode" - sets the link color
  • VLINK="#rgbcode" - sets the visited links color
  • TOPMARGIN=x - defines the top margin for the body
  • LEFTMARGIN=x - defines the left margin for the body
  • RIGHTMARGIN=x - defines the right margin for the body
<TITLE></TITLE>
This allows you to display a title at the top of the browser.

<META>
This allows the owner to display certain information to the browser without the page seeing it. Here are some examples:

  • <META NAME="description" CONTENT="This is my page description.">
    Describes your page's contents
  • <META NAME="keywords" CONTENT="word1, word2, word3, word4
    Enters keywords for your page
  • <META HTTP-EQUIV="refresh" CONTENT="10; url=index2.html">
    Reloads the page after 10 seconds to index2.html



Text Control

<H1></H1>
This allows you to change the size of letters or words. Includes H1 - H6, H1 being the biggest and H6 being the smallest.

<CENTER></CENTER>
This allows you to display the text in the center of the page.

<Q></Q>
This formats certain text as a quote.

<BIG></BIG>
This makes the text bigger than the rest.

<SMALL></SMALL>
This makes the text smaller than the rest.

<SUB></SUB>
This allows you to make the text look like this.

<SUP></SUP>
This gives a superscript effect to your text.

<ABBREV></ABBREV>
This abbreviates certain text.

<FONT></FONT>
This allows you to control different aspects of the text. Includes:

  • SIZE=x (x = +1 to +5 or -1 to -5)
  • COLOR=#rgbcode defines the color,
  • FACE="name" defines the font face

<B></B>
This makes a word or group of words bold.

<STRONG></STRONG>
This is the same as bold.

<I></I>
This italicizes a word or group of words.

<EM></EM>
This is the same as italics.

<U></U>
This underlines a word or group of words.

<TT></TT>
This makes a fixed width font.

<BLOCKQUOTE></BLOCKQUOTE>
This indents the left and right-hand sides of the text.

<CITE></CITE>
This is another italics tag.

<CODE></CODE>
This is another fixed width font tag.

<DFN></DFN>
This allows you to embolden or italicize a word or group of words.

<PRE></PRE>
This allows the text to appear in the browser in the same format (layout) as it does in a text editor, such as Notepad, for example.

<LISTING> </LISTING>
This is a small fixed-width font tag - somewhat similar to <PRE></PRE> that spaces everything out.



Lists

<DL></DL>
This defines the list items within a descriptive list.

<DT> </DT>
This defines the topic of the descriptive list.

<DD></DD>
This defines the indented item to be displayed in the descriptive list.

<OL></OL>
This is a way to group items into a numbered list. It uses the <li></li> tags to list the items.

<LI></LI>
This defines the list items with a number or a dot. Includes the following:

  • START="x"
  • TYPE="A/a/I/i" for upper or lower case and Roman numerals.

<UL></UL>
This is another way to list items. Also uses the <li></li> tags to define the list items with a bullet instead of a number. Includes the following options:

  • TYPE="disc/circle/square"



Page Breaks and Lines

<HR>
This allows you to divide a page with a line. Includes the following options:

  • WIDTH=x (x = pixels/percentage)
  • ALIGN=x (x = left/right/center)
  • SIZE=xM
  • NOSHADE takes away the shading.

<BR>
This allows the text to break without a full paragraph. The options are:

  • CLEAR="x" (x = left/right/all)

<NOBR></NOBR>
This allows the text to continue indefinitely without breaking.



Tables, Frames, and Forms

<TABLE></TABLE>
These allow you to insert tables. It has the following options:

  • WIDTH="x"
  • HEIGHT="x"
  • BORDER="x"
  • CELLPADDING="x"
  • CELLSPACING="x"

It also includes the following tags with their associated options:

  • <TR></TR>
  • <TD></TD>
  • <TH></TH>
  • ALIGN=left/middle/right
  • VALIGN=top/middle/bottom
  • COLOR=#rgbcode
  • COLSPAN="x"
  • ROWSPAN="x"

For more information, see the tables tutorial.

<FRAMESET></FRAMESET>
This allows you to set up frames on your page. Includes the following:

  • ROWS="x" (x = pixels/percentage)
  • COLS="x" (x = pixels/percentage)
  • FRAMEBORDER="x"
  • FRAMEWIDTH="x"
  • MARGINHEIGHT="x"
  • MARGINWIDTH="x"

Requires the frame tag to establish content. These include:

  • MARGINHEIGHT="x"
  • MARGINWIDTH="x"
  • NAME="name"
  • NORESIZE
  • SRC="file.html/file.gif/file.jpg"
  • SCROLLING="x" (x = yes/no/auto)

Don't forget the <NOFRAMES> tag for those browsers who can't handle frames.

<FRAME>
This establishes content. Its attributes include:

  • MARGINHEIGHT="x"
  • MARGINWIDTH="x"
  • NAME="name"
  • NORESIZE
  • SRC="x"
  • SCROLLING="x" ( x = yes/no/auto)

<FORM></FORM>
This allows you to insert forms in your page. It includes the following options:

  • METHOD="POST/GET"
  • ACTION="file/script"

You can also add checkboxes, text boxes and more. For example:

 <INPUT TYPE="text/hidden/checkbox/radio/submit/reset" SIZE="n" MAXLENGTH="x" NAME="name" VALUE="presettext"> <SELECT NAME="name" SIZE="x"> <OPTION VALUE="value1">Value1</OPTION> <TEXTAREA NAME="name" ROWS="x" COLS="x" VALUE="preset text" WRAP="virtual"></TEXTAREA> 



Images and Links

<A></A>
This allows you to make certain text or picture a link to another page or graphic not on the page. It can include the following options:

  • TARGET="framename"
  • HREF="path/to/a/file" - reference to the linked file
  • NAME="name" - sets a marker within a document so that a specific section of a page may be linked to via "#sectionnamehere" with the HREF attribute

<IMG>
This allows you to insert an image into your Web page. It has the following options:

  • SRC="file.gif"/src="file.jpg"
  • HEIGHT="x"
  • WIDTH="x,"
  • LOWSRC="file.gif" - allows a low resolution image to be displayed while a higher resolution image loads
  • ALT="text for older browsers"
  • USEMAP=#mapname
  • ISMAP
  • ALIGN="x" - sets the image alignment on the page (x = left/right/middle /bottom/top/absmiddle/textop/absbottom)
  • BORDER="x"

<MAP></MAP>
This defines the areas and coordinates of an image map.

Java Applets, JavaScript, and Miscellaneous Tags

<APPLET></APPLET>
This allows you to insert a Java applet directly into your page. It includes:

  • CODE="java.class"
  • CODEBASE="/dir/to/applet"
  • HEIGHT="x"
  • WIDTH="x"

<SCRIPT></SCRIPT>
Javascript allows a script to run within the page. This tag usually appears in the <HEAD></HEAD> part of the document, but can also appear within the <BODY></BODY> tag.

<!-- text -->
Allows text to appear invisible on the page. This is used if you would like to write comments on the page but not have them load in the browser. For example:

<!-- This section is for beginners -->

[ < HTML Tutor: Part 1 (Intro) ] [ HTML Tutor: Part 3 (Tables) ]




HTML5 Development Center


Recent Articles