DBUG IT Services Ltd.


HTML Tags
Hypertext Markup Language (HTML). This is the standard way to mark text documents for publishing on the World Wide Web. HTML is marked-up using "tags" surrounded by brackets. To see what tagged HTML text looks like select the View Source feature from the menus in the browser program you are using to view this document now, and you'll see a display of the HTML tags used to create this page. 

Basic Tags

<html> </html>
This is the basic tag for every page and tells the browser that the file being loaded is an HTML document, and it encloses the whole page.
<head> </head>
Head - this defines the head of your page and includes the <title> </title> tag.
<body> </body>
Encloses the displayed page and allows you to define the body arguments. These can include:
background="file.gif" | bgcolor="#rrbbgg" | text="#rrbbgg" | link="#rrbbgg" | vlink="#rrbbgg" | alink="#rrbbgg".
<title> </title>
 Title - allows you to display a title at the top of the browser.
<meta>
Meta Tags - allow the owner to show non-display information to the browser. For example:
<meta name="description" content="This is my page description.">- describe your page
<meta name="keywords" content="word1, word2, word3, word4"> - enter keywords for your page
<meta HTTP-EQUIV="refresh" content="10; url=index2.html"> - reloads the page after 10 seconds to index2.html
<meta HTTP-EQUIV="text" content="This is my page description."> - generates a response header.


Text Options

<h1> </h1>
Header - this allows you to change the size of the letter or words within the header. Range H1 - H6, H1 being the biggest and H6 being the smallest.
<center> </center>
Center - centres the text or images on the page.
<p> </p>
Formats paragraphs.
align=left/center/right
<q> </q>
Quotation - set certain test as a quote.
<big> </big>
Big - makes text bigger than the rest.
<small> </small>
Small - makes text smaller than the rest.
<sub> </sub>
Subscript - allows you to make the text look like this.
<sup> </sup>
Superscript - gives superscript effect to your text.
<abbrev> </abbrev>
Abbreviation - abbreviate text.
<blink> </blink>
Flashing text.
<font> </font>
Font - allows you to control different aspects of the text. Includes:
size=n (+1 - +5) (-1 - -5) | face="Arial" | color="#rrbbgg"
<b> </b>
Bold - makes a word or group of words bold.
<strong> </strong>
Strong - the same as bold, just longer code.
<i> </i>
Italics - italicizes a word or group of words.
<em> </em>
Emphasis - the same as italics.
<u> </u>
Underline - underlines a word or group of words.
<tt> </tt>
Typewriter Type - makes a fixed width font.
<address> </address>
Address - another italics tag used for addresses.
<blockquote> </blockquote>
Block Quote - indents the left and right-hand sides of the text.
<cite> </cite>
Citation - another italics tag, used for quotations.
<code> </code>
Code - another fixed width font tag, used for computer source code.  
<dfn> </dfn>
Definition - allows you to embolden or italicize a word or group of words.
<kbd> </kbd>
Keyboard - another fixed width font.
<pre> </pre>
Preformatted - allows the text to appear in the browser as it does on the page.
<samp> </samp>
Sample - Another fixed width tag.
Lists
<dl> </dl>
Descriptive List - a way to list things. Includes the <dt> </dt> and <dd> </dd> to list the topic and description of the list.  
<ol> </ol>
Ordered List - numbered or lettered. Uses the <li></li> tags to define the list items with a number. Includes the following:
start=n | type="A/a/I/i" for upper or lower case and Roman numerals.
<ul> </ul>
Unordered List - bulleted list items. Also uses the <li></li> tags to define the list items with a bullet instead of a number number. Includes the following options:
type="DISC/CIRCLE/SQUARE"
<menu> </menu>
Displays list with one element per line (no bullets, more compact than <ul>.


Page Breaks and Lines

<hr>
Horizontal Rule - allows you to divide a page with a horizontal line. Includes the following options:
width=pixels/percentage | align=left/right/center | size=n | noshade | color="#rrbbgg"
<br>
Break - inset a line break without a full paragraph. The options are:
clear=left/right/all
<nobr> </nobr>
No Breaks - allows the test to continue without breaking.


Frames, Tables, and Forms

<table> </table>
Tables - allow you to insert tables into your page. It has the following options:
width=n | height=n | border=n | cellpadding=n | cellspacing=n
It also includes the following tags with their associated options:
<tr></tr> (table row) and <td></td> (data cell) -or - <th> </th> (table header)
align=left/middle/right | valign=top/middle/bottom | color=#rrbbgg | colspan=n | rowspan=n
<frameset> </frameset>
Frameset - allows you to setup frames on your page. Includes the following:
rows="pixels/percentage" | cols="pixels/percentage" | frameborder=n | framewidth=n | marginheight=n | marginwidth=n
Also includes the frame tag to establish content. These include:
marginheight=n | marginwidth=n | name="name" | noresize | src="file.html/file.gif/file.jpg" | scrolling="yes/no/auto"
Don't forget the
<noframes> tag for those browsers that can't handle frames.
<frame>
Frame - includes the frame tag to establish content. These include:
marginheight=n | marginwidth=n | name="name" | noresize | src="file.html/file.gif/file.jpg" | scrolling="yes/no/auto"
<form> </form>
Form - this allows you to insert forms onto your page. It includes the following options:
method=POST/GET | action="file/script"
Also, you can use the following to add checkbox's, text box's, and more. They include:
<input type="text/hidden/checkbox/radio/submit/reset | size="n" | maxlength="n" | name="name" | value="file/URL">
<select name="name" | size="n" | multiple>
<option value="value1">Value1</option>
<textarea name="name" | rows="n" | cols="n" | value="file/URL" | wrap="virtual"> </textarea>
<multicol> </multicol>
Multicolumns - allows almost the same effect as tables. It has the following options:
cols="n" | gutter="n" | width="pixels/percentage"


Images and Links

<a href="file" or "url"> </a>
Hypertext Anchor - this allows you to use text or an image to link to another page or graphic not on the page. It can include the following options:
target="framename"  - displays in the frame identified as framename in its <FRAME SRC=.... NAME=framename> tag
target=_self - displays the current frame
target=_parent - replace the layout document containing the linking frame, with the new page
target=_top - replace the top level layout document, i.e the whole window, with the new page
target=_blank - opens a new copy of the browser and displays the page in there
<img>
Image - this allows you to insert a .jpg or .gif image into your web page. It has the following options:
src="file.gif"/src="file.jpg" | height=n | width=n | lowsrc="file.gif"/lowsrc="file.jpg" | alt="text" | usemap="#mapname" | align="left/right/middle/bottom/top/absmiddle/textop/absbottom" | border=n
<map> </map>
Image Map - used to define the areas and coordinates of an image map.


Applets, JavaScript, and Other Tags

<applet> </applet>
Java Applet - allows you to insert a Java applet directly into your page. It includes:
code="java.class" | codebase="/dir/to/applet" | height="n" | width="n"
<script> </script>
Javascript - allows a JavaScript applet to load within the page. This tag usually appears after the </title> and before the </head> tag. It usually looks like this:
<title>Title</title>
<script language="JavaScript">
Script goes here.
</script>
</head>
<!-- text -->
<!--# -->

Comment or rem statement on the page. Also used with SSI scripts.
<comment></comment>
Comment or rem statement which does not display.
<marquee> </marquee>
Marquee - an Internet Explorer tag, so only IE users will see it. It allows scrolling text in the browser. Includes:
behavior=slide/alternative | width=pixels/percentage | hspace=n | vspave=n | loop=n/-1/infinite | bgcolor=#rrbbgg | scrollamount=n | scrolldelay=n

Copyright © C Wright 1999 - 2005