Writing HTML | About | FAQ | Alumni | Tags | Index |
...
/ December, 1995 / version 2.0 / version history /

Summary of HTML Tags Used in the Tutorial

NOTE: This page uses HTML tables for display (which you will learn how to do in lesson 21). If it looks like a mess, then your web browser probably does not support the <table> tags and you might want to use the "no-tables" tag summary page. We also highly recommend Kevbin Werbach's Bare Bones Guide to HTML.


Web Page Structure
<html>
<head>...</head>
<body>...</body>
</html>
HTML Structure
Basic structure for any HTML document
Lesson 1
<title>...</title>
Document Title
Goes inside the <head>...</head>
Lesson 1
<body bgcolor=#XXXXXX>
Solid Color Background
Color the background of the web page.
Lesson 16
<body background=
"filename.gif">
Texture File Background
Use a graphic image to repeatedly "tile" and fill the web browser page.
Lesson 16
<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.
Lesson 16

Text Formatting
<Hn>...</Hn>

<Hn align=center>...</Hn>
Heading
Section heading of variable text size, where n=1 to 6. align=center for aligning the heading in the center of the page.
Lesson 3
<b>...</b>
<i>...</i>
<tt>...</tt>
Style
Apply bold, italic, or typewriter (monospaced font)
Lesson 5
<address>...</address>
Address
Italicized and offset text for page footers
Lesson 12
<blockquote>...
   </blockquote>
Blockquote
Indents and offsets text for long quotations
Lesson 13
<pre>...</pre>
Preformatted Text
Displays in monsospaced font with all space and carriage returns preserved.
Lesson 9
&xxxx;
Special Characters
Codes for special character sets and diacritical marks
Lesson 10
<blink>...</blink>
Blink
Flashes text in a very annoying manner.
Lesson 17
<font size=X>...
</font>
Font Size
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.
Lesson 18
<big>...</big>
<small>...</small>
Font Size
Change the size of a selection of to a size greater or smaller then the normal sized text.
Lesson 18
<font color=#XXXXXX>
...
</font>
Font Color
Change the color of a selection of text where XXXXXX is the hexadecimal code for the colors RGB values.
Lesson 18
<sup>...</sup>
<sub>...</sub>
Superscript/Subscript
Create superscripts (i.e. x3 + 2xy + y2 = 0) or subscripts (i.e. H2SO4)
Lesson 18

Text Breaks / Divisions
<p>
Paragraph
Forces new paragraph with one blank line separator
Lesson 4
<br>
Line Break
Forces new line without blank line separator
Lesson 4
<hr>
 
<hr width=X size=X 
align=left|right 
noshade>
Hard Rule
Forces new line with solid line separator. Optional attributes width specifies the width of the line on the page, where X is absolute number of pixels or "X%" for a width relative to the browser window; size specifies the thickness of the line in pixels; align forces the line to be aligned to a side of the page rather than the center; noshade draws a solid line without 3D shading
Lesson 4; Lesson 19; Lesson 20
<center>...
  </center>

<p align=center>...
  </p>
Center Alignment
Aligns everything to the center of the page
Lesson 20
<div align=
left|center|right>
...
</div>
Division
Aligns everything to left, center, or right side of page
Lesson 20
<table border>
...</table>

<table>...</table>

<table border=X 
  cellpadding=Y
  cellspacing=Z>...
  </table>
 
<tr>...</tr>
<td 
align=left|center|right 
valign=top|middle|bottom
rowspan=X colspan=Y
</tdgt;
Table
Simple table draws single pixel-width border and cell-wall divisions. Omitting the border attribute, or setting border=0 creates an invisble table. Values for border greater than 1 will create a thivker border around the table/ cellpadding is the amount of space (in pixels) between the cell contents and its walls. cellspacing determines the width of the inner cell walls. <tr> are table row defintions and <td> are table data definitions (one cell). Options for the <td> tags are for horizontal and vertical alignment within the cell. rowspan and colspan aatributes can be used to create cells that stretch across more than one other cell.
Lesson 21

Lists
<ul>       <ol>
  <li>       <li>
  <li>       <li>
</ul>      </ol>
Item Lists
Unordered Lists <ul> for bulleted items, ordered lists <ol> for numbered items
Lesson 6
<ul type=xxxx>

<li type=xxxx>
Bullets for Unordered Lists
Over-ride the default bullets:
  • type=circle
  • type=square
  • type=disc
Lesson 22
<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,...)
Lesson 22
<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.
Lesson 22
<dl>
  <dt>
  <dd>
  <dt>
  <dd>
</dl>
Descriptive Lists
Lists with text items <dt> and indented definitions <dd>
Lesson 11

Graphics
<img src="file.gif">

<img src="file.gif" 
alt="###"
align=top|middle|bottom|
left|right
height=x width=y>
Inline Image
Display a picture within web page. src (source) is the name, file path, or URL for the image file; alt (alternative) is a string of text displayed for non-graphic browsers or users with image loading turned off; align controls relation of image and surrounding text (top/middle/bottom will align ONE line of succeeding text; left/right will place image to side of page and wrap text around it); height and width are the dimensions of the image measured in pixels.
Lesson 7a; Lesson 20

Hyper-Links
<a href="file.htm">
hypertext</a>
Local Hypertext Link
Link to another document.
Lesson 8a
    URL
Uniform Resource Locator
Address for Internet resources
Lesson 8b
<a href="URL">
hypertext</a>
Internet HyperText Link
Link to another Internet Site, specified by URL
Lesson 8c
<a name="xyz"<...>
Named Anchor
Marks a section of text within a document with name "xyz"
Lesson 8d
<a href="file.htm#xyz">
hypertext</a>
Link to Named Anchor
Jump to a named anchor within the same or another document
Lesson 8d
<a href="url">
<img scr="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
Lesson 8e; Lesson 22
<a href="mailto:
"doe@xyz.edu">... </a>
Internet Mail Link
Sets up email message to specified address
Lesson 12
<img src="image.gif" 
usemap="#map_name">

<map name="map_name">
<area shape="rect"
   coords="x1,y1,x2,y2" 
   HREF=URL>
<area shape="rect" 
   coords="x1,y1,x2,y2" 
   HREF=URL>
</map>
Client-Side Image Map
Clickable image map interpreted by browser. ... can occur anywhere in this or another HTML file. Coordinates are top left and lower right corners of rectangular shaped region
Lesson 23

Writing HTML Summary of HTML Tags

©1995 Maricopa Center for Learning & Instruction (MCLI)
Maricopa County Community College District, Arizona

The Internet Connection at MCLI is Alan Levine --}
Comments to levine@maricopa.edu

URL: http://www.mcli.dist.maricopa.edu/tut/tag.htm