An HTML tutorial: Learn to make a homepage!

An HTML tutorial: Learn to make a homepage! HTML Tags

Here are all the tags known to man (well, almost). They are listed according to use. If you're looking for text formatters, choose those. Frames, forms, and tables have their own settings. Have fun!

[ The Basics | Text Control | Lists | Page Breaks ]
[ Frames, Tables and Forms | Images and Links ]
[ Applets and More ]

Basics

The basics cover the tags you need in order for the page "to exist". This doesn't include what goes in the page. Only what you need in order for the browser to recognize that it truly is a web page.
<html> </html>: The basic tag for every page. This tells the browser that the file being loaded is a HTML document. Please look at this basic layout of any web page to see how it's used.
<head> </head>: Head - defines the head of your page. Includes the <title> </title> tag.
<body> </body>: Allows you to define the body arguments. This can include:

background="file.gif"
bgcolor="#rgbcode"
text="#rgbcode"
link="#rgbcode"
vlink="#rgbcode"
topmargin=n - defines the top of the margin for the body.
leftmargin=n
rightmargin=n
For help with colors, try this powerful Color Program.

<title> </title>
Title - allows you to display a title at the top of the browser.
<;meta>
Meta Tags - 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.">- 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."> - another text tag
<;meta HTTP-EQUIV="pragma" content="no-cache"> - forces the browser not to cache the page. Thus all hits are true.
<;meta HTTP-EQUIV="expires" content="Mon, Feb 1997 12:12:12 EST"> - used along with the previos tag to show the expiration of the pages cache.

Text Control and Tags

<h1> </h1>
Header - this allows you to change the size of the letter or words it's surrounding. Covers H1 - H6, H1 being the biggest and H6 being the smallest.

<center> </center>
Center - allows you to display the text in the center of the page.
<ins> </ins>
Inserted Text - allows you to insert text.
<person> </person>
Person's Name - allows you to distinguish someone's name, like Shpank.
<q> </q>
Quotation - set certain test as a quote. Like this.
<big> </big>
Big - makes the test bigger than the rest.
 
Small - makes the text smaller than the rest.
 
Subscript - allows you to make the text look like _this.
 
Superscript - gives ^superscript effect to your text.
<abbrev> </abbrev>
Abbreviation - abbreviate certain text.
<acronym> </acronym>
Acronym - well, I don't know, let's try it out.
<au> </au>
Author's Name - insert the author's name into the page, like Shpank.
<del> </del>
Deleted Text
 
Font - allows you to control different aspects of the text. Includes:
size=n (+1 - +5) (-1 - -5)
color=#rgbcode - defines the color
face="name" - defines the font face. Could be Helvetica, Arial, etc.
 
Bold - makes a word or group of words bold. bold;
 
Strong - basically the same as bold, just longer code. bold;
 
Italics - italicizes a word or group of words.
 
Emphasis - basically the same as italics.
 
Underline - underlines a word or group of words. But does not work with all browsers.
<tt> </tt>
Typewriter Type - makes a fixed width font.
<address> </address>
Address - another
italics tag

. There are alot of them.

<blockquote> </blockquote>
Block Quote - indents the left and right-hand sides of the text.
<cite> </cite>
Cite - another italics tag.
<code> </code>
Code - another kewl fixed width font tag.
<dfn> </dfn>
Definition - allows to embolden or italicize a word or group of words.
<kbd> </kbd>
Keyboard - another fixed width font.
<samp> </samp>
Sample - can you believe it? Another fixed width tag.
<var> </var>
Italics - yet another way to italicize a word or group of words.
<pre> </pre>
Preformatted - allows the text to appear in the browser as it does on the page. Look below for an example.
<listing> </listing>
Listing - a small fixed-width font tag - kind of like <pre> </pre> that spaces everything out.

Lists

<dl> </dl>
Descriptive List - another way to list things. This is what I use on a majority of my pages.
<dt> </dt>
Defines the topic of the descriptive list.
<dd> </dd>
The Descriptive Description. This the indented part that is displayed.
<ol> </ol>
Ordered List - a way to group items into a list.
<li>
Line item tag defines the list items with a number or a dot. Includes the following:

start=n
type="A/a/I/i" for upper or lower case and Roman numerals.
<ul> </ul>
Unordered List - another way to list items. Also uses the <li>
type="DISC/CIRCLE/SQUARE"

Page Breaks and Lines

<hr>
Horizontal Rule - allows you to divide a page with a line. Includes the following options:

width=pixels/percentage
align=left/right/center
size=n noshade - takes away the shading inside.
 
Break - allows the text to break without a full paragraph. The options are:

clear=left/right/all
 
No Breaks - allows the test to continue without breaking.
<title> </title>: Title - allows you to display a title at the top of the browser.
<;meta>: Meta Tags - 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.">- 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."> - another text tag
<;meta HTTP-EQUIV="pragma" content="no-cache"> - forces the browser not to cache the page. Thus all hits are true.
<;meta HTTP-EQUIV="expires" content="Mon, Feb 1997 12:12:12 EST"> - used along with the previos tag to show the expiration of the pages cache.
Text Control and Tags
<h1> </h1>: Header - this allows you to change the size of the letter or words it's surrounding. Covers H1 - H6, H1 being the biggest and H6 being the smallest.
<center> </center>: Center - allows you to display the text in the center of the page.
<ins> </ins>: Inserted Text - allows you to insert text.
<person> </person>: Person's Name - allows you to distinguish someone's name, like Shpank.
<q> </q>: Quotation - set certain test as a quote. Like this.
<big> </big>: Big - makes the test bigger than the rest.
 : Small - makes the text smaller than the rest.
 : Subscript - allows you to make the text look like _this.
 : Superscript - gives ^superscript effect to your text.
<abbrev> </abbrev>: Abbreviation - abbreviate certain text.
<acronym> </acronym>: Acronym - well, I don't know, let's try it out.
<au> </au>: Author's Name - insert the author's name into the page, like Shpank.
<del> </del>: Deleted Text
 : Font - allows you to control different aspects of the text. Includes:
size=n (+1 - +5) (-1 - -5)
color=#rgbcode - defines the color
face="name" - defines the font face. Could be Helvetica, Arial, etc.
 : Bold - makes a word or group of words bold. bold;
 : Strong - basically the same as bold, just longer code. bold;
 : Italics - italicizes a word or group of words.
 : Emphasis - basically the same as italics.
 : Underline - underlines a word or group of words. But does not work with all browsers.
<tt> </tt>: Typewriter Type - makes a fixed width font.
<address> </address>: Address - another
italics tag

. There are alot of them.
<blockquote> </blockquote>: Block Quote - indents the left and right-hand sides of the text.
<cite> </cite>: Cite - another italics tag.
<code> </code>: Code - another kewl fixed width font tag.
<dfn> </dfn>: Definition - allows to embolden or italicize a word or group of words.
<kbd> </kbd>: Keyboard - another fixed width font.
<samp> </samp>: Sample - can you believe it? Another fixed width tag.
<var> </var>: Italics - yet another way to italicize a word or group of words.
<pre> </pre>: Preformatted - allows the text to appear in the browser as it does on the page. Look below for an example.
<listing> </listing>: Listing - a small fixed-width font tag - kind of like <pre> </pre> that spaces everything out.
Lists
<dl> </dl>: Descriptive List - another way to list things. This is what I use on a majority of my pages.
<dt> </dt>: Defines the topic of the descriptive list.
<dd> </dd>: The Descriptive Description. This the indented part that is displayed.
<ol> </ol>: Ordered List - a way to group items into a list.
<li>: Line item tag defines the list items with a number or a dot. Includes the following:

start=n
type="A/a/I/i" for upper or lower case and Roman numerals.
<ul> </ul>
Unordered List - another way to list items. Also uses the <li>
type="DISC/CIRCLE/SQUARE"

Page Breaks and Lines

<hr>
Horizontal Rule - allows you to divide a page with a line. Includes the following options:

width=pixels/percentage
align=left/right/center
size=n noshade - takes away the shading inside.
 
Break - allows the text to break without a full paragraph. The options are:

clear=left/right/all
 
No Breaks - allows the test to continue without breaking.
<ul> </ul>: Unordered List - another way to list items. Also uses the <li>
type="DISC/CIRCLE/SQUARE"

Page Breaks and Lines

<hr>
Horizontal Rule - allows you to divide a page with a line. Includes the following options:

width=pixels/percentage
align=left/right/center
size=n noshade - takes away the shading inside.
 
Break - allows the text to break without a full paragraph. The options are:

clear=left/right/all
 
No Breaks - allows the test to continue without breaking.
Page Breaks and Lines
<hr>: Horizontal Rule - allows you to divide a page with a line. Includes the following options:

width=pixels/percentage
align=left/right/center
size=n noshade - takes away the shading inside.
 
Break - allows the text to break without a full paragraph. The options are:

clear=left/right/all
 
No Breaks - allows the test to continue without breaking.
 : Break - allows the text to break without a full paragraph. The options are:

clear=left/right/all
 
No Breaks - allows the test to continue without breaking.
 : No Breaks - allows the test to continue without breaking.

For the rest of the tag info, please follow the links at the top of the page or at the bottom of the page. [

[ Frames, Tables and Forms | Images and Links ] [ Special Tags ]

	Index
	Random
	Next
	Next 5
	Join
This HTML Help & Hints Site is owned by CHRIS.