Basic Tags

Open

Close

Function 

<HTML>
 
</HTML>

Must be present to begin and end your HTML document 

<HEAD>
 
</HEAD>

Identifies the info to be placed the head of the document 

<TITLE>
 
</TITLE>

Identifies the document's title; always inside the HEAD 

<BODY>
 
</BODY>

Must be present to begin and end the body of your document 

<H#>
 
</H#>

A Header tag which identifies the text to be big and bold; numerically descend from bigger to smaller from H1 to H6. 

<STRONG> or <b>
 
</STRONG> </b>

Makes surrounded text bold. 

<i>
 
</i>

Makes surrounded text italic. 

<u>
 
</u>

Makes surrounded text underlined. 

<P>
 
</p> or omit

Hard paragraph break, equals 2 carriage returns. 

<BR>

omit

Hard line break , equals 1 carriage return. 

<HR>

(none)

Creates a horizontal line on the page. 

<CENTER>
 
</CENTER>

Text within the tags will be centered.

Tag Attributes

<!-- This is MY Page!!!-->

Comment Tag
Notes and information placed in the body but not displayed in the browser 

<body bgcolor=#XXXXXX>

Solid Color Background
Sets the color of the background of the web page. 

<body background="filename">

Texture File Background
Use a graphic image to repeatedly "tile" and fill the web browser page. 

<body TEXT=#XXXXXX    
LINK=#YYYYYY    
VLINK=#00HH00>

Colored Text and Hyperlinks
Color all of the text or hypertext items to any color the reader desires. 

<font size=X>...</font>

Change the size of a selection of text where X=1-7. Can also use relative size changes (-1, +2, -1, -2, etc...) to current <basefont=Z> value. 

<big>...</big>        
<small>...</small>

Change the size of a selection of to a size greater or smaller then the normal sized text. 

<font color=#XXXXXX>...
</font>

Change the color of a selection of text where XXXXXX is the hexadecimal code for the colors RGB values. 

<sup>...</sup>    
<sub>...</sub>

Create superscripts (e.g. x3 + 2xy + y2 = 0) or subscripts (i.e. H2SO4)

Tags for Lists

<ul>      <ol>
  <li>        <li>
   <li>        <li>
 </ul>    </ol>

Item Lists
Unordered Lists <ul> for bulleted items, ordered lists <ol> for numbered items 

<ul type=xxxx>
 

<li type=xxxx>

Bullets for Unordered Lists
Over-ride the default bullets:

  • type=circle
  • type=square
  • type=disc 
<ol type=X>

 

<li type=X>

Number Styles for Ordered Lists
Use different characters for lists:

  • type=1 (1,2,3...)
  • type=A (A,B,C,...)
  • type=a (a,b,c,...)
  • type=I (I,II,III,...)
  • type=i (i,ii,iii,...) 
<ol start=i>

<li value=j>

Number Values for Ordered Lists
start will begin a list with any positive number. value will renumber the list from the item and following with the new value. 

<dl>
  <dt>
     <dd>
 <dt>
     <dd>
 </dl>

Definition Lists
Lists with text items <dt> and indented definitions <dd>

Tags for Links

<a href="file.html">
hypertext</a>

Local Hypertext Link
Link to another document in the same folder/directory. 

<a href="data/file.html">
hypertext</a>

Local Hypertext Link
Link to another document in a folder/directory named "data" that is inside the directory containing the calling HTML document 

<a href="../file.html">
hypertext</a>

Local Hypertext Link
Link to another document in a folder/directory that is one level higher relative to the calling HTML document 

    URL

Uniform Resource Locator
Address for Internet resources 

<a href="http://www...">
hypertext</a>

Internet HyperText Link
Link to another Internet Site, specified by URL 

<a name="xyz"<...>

Named Anchor
Marks a section of text within a document with name "xyz" 

<a href="file.html#xyz">
hypertext</a>

Link to Named Anchor
Jump to a named anchor within the same or another document 

<a href="http://www.url">
<img src="file.gif"
border=0></a>

Internet HyperGraphic Link
Inline image acts as hyperlink to site specified by URL. Including the border=0 attribute will suppress the display of a bounding box around the image 

<a href="mailto:
"schatzp@drexel.edu">...</a>

Internet Mail Link
Sets up email message to specified address

Table Tags

<table...

Begins the table 

..border=X...

Within the <TABLE> tag; draws single pixel-width border. Omitting the border attribute, or setting border=0 creates an invisble table. Values for border greater than 1 will create a thicker border around the table 

...cellpadding=Y

cellspacing=Z...

Draws single pixel-width cell-wall divisions; cellpadding is the amount of space (in pixels) between the cell contents and its walls. cellspacing determines the width of the inner cell walls. 

...width=x>

Determines the width of the table; may be in actual pixels (i.e., 550) or percentage (i.e., 80%). 

<tr>

Begins a row within a table; there may be multiple rows within a table 

<td...

Begins a data cell within a table row; there may be multiple data cells within a table row 

...align=left|center|right...

Within the <td> tag; defines the horizontal alignment within a Table Cell 

...valign=top|middle|bottom...

Within the <td> tag; defines the vertical alignment within a Table Cell 

...rowspan=X...

Within the <td> tag; creates a cell which stretches vertically across X rows 

...colspan=X...

Within the <td> tag; creates a cell which stretches across X columns 

</td>

Ends the data cell within the table row 

</tr>

Ends the table row 

</table>

Ends the table

 

Index of topics next topic: Special Character Tags