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 pre-format tags for display (which you will learn how to do in lesson 9) as an alternative to the <table> tags we will cover in lesson 21. If your web browser supports tables, then use the "tables" tag summary page. We also highly recommend Kevbin Werbach's Bare Bones Guide to HTML.

Web Page Structure

  <html>                     HTML Structure                       Lesson 1
  <head>...</head>           Basic structure for any HTML
  <body>...</body>           document

  <title>...</title>         Document Title                       Lesson 1
                             Goes inside the <head>...</head>

  <body bgcolor=#XXXXXX>     Solid Color Background               Lesson 16
                             Color the background of the web      

  <body background=          Texture File Background              Lesson 16
  "filename.gif">            Use a graphic image to repeatedly    
                             "tile" and fill the web browser

  <body                      Colored Text and Hyperlinks          Lesson 16
  TEXT=#XXXXXX               Color all of the text or hypertext
  LINK=#YYYYYY               items to any color the reader
  VLINK=#00HH00>             desires.

Text Formatting

  <Hn>...</Hn>               Heading                              Lesson 3
                             Section heading of variable text
  <Hn align=center>...</Hn>  size, where n=1 to 6. align=center
                             for aligning the heading in the
                             center of the page.

  <b>...</b>                 Style                                Lesson 5
  <i>...</i>                 Apply bold, italic, or typewriter
  <tt>...</tt>               (monospaced font)

  <address>...</address>     Address                              Lesson 12
                             Italicized and offset text for
                             page footers

  <blockquote>...            Blockquote                           Lesson 13
     </blockquote>           Indents and offsets text for long    

  <pre>...</pre>             Preformatted Text                    Lesson 9
                             Displays in monsospaced font with
                             all space and carriage returns

  &xxxx;                     Special Characters                   Lesson 10
                             Codes for special character sets     
                             and diacritical marks

  <blink>...</blink>         Blink                                Lesson 17
                             Flashes text in a very annoying

  <font size=X>...           Font Size                            Lesson 18
  </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>             Font Size                            Lesson 18
  <small>...</small>         Change the size of a selection of
                             to a size greater or smaller then
                             the normal sized text.

  <font color=#XXXXXX>       Font Color                           Lesson 18
  ...                        Change the color of a selection of
  </font>                    text where XXXXXX is the
                             hexadecimal code for the colors
                             RGB values.

  <sup>...</sup>             Superscript/Subscript                Lesson 18
  <sub>...</sub>             Create superscripts (i.e. x3 + 2xy
                             + y2 = 0) or subscripts (i.e.

Text Breaks / Divisions

  <p>                        Paragraph                            Lesson 4
                             Forces new paragraph with one
                             blank line separator

  <br>                       Line Break                           Lesson 4
                             Forces new line without blank line

  <hr>                       Hard Rule                            Lesson 4;
                             Forces new line with solid line
  <hr width=X size=X         separator. Optional attributes       Lesson 19;    
  align=left|right           width specifies the width of the     Lesson 20
  noshade>                   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

  <center>...                Center Alignment                     Lesson 20
    </center>                Aligns everything to the center of 
                             the page
  <p align=center>...
  <div align=                Division                             Lesson 20
  left|center|right>         Aligns everything to left, center,
  ...                        or right side of page
    <table border>             Table                              Lesson 21
  ...</table>                Simple table draws single          
                             pixel-width border and cell-wall
  <table>...</table>         divisions. Omitting the border
                             attribute, or setting border=0
  <table border=X            creates an invisble table. Values
    cellpadding=Y            for border greater than 1 will
    cellspacing=Z>...        create a thivker border around the
    </table>                 table/ cellpadding is the amount of
                             space (in pixels) between the cell
  <tr>...</tr>               contents and its walls. cellspacing
  <td                        determines the width of the inner
  align=left|center|right    cell walls. <tr> are table row
  valign=top|middle|bottom   defintions and <td> are table data
  rowspan=X colspan=Y        definitions (one cell). Options for
  </tdgt;                    the  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.


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

  <ul type=xxxx>             Bullets for Unordered Lists          Lesson 22
                             Over-ride the default bullets:
  <li type=xxxx>
                                o type=circle
                                + type=square
                                * type=disc

  <ol type=X>                Number Styles for Ordered Lists      Lesson 22
                             Use different characters for
  <li type=X>                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>               Number Values for Ordered Lists      Lesson 22
                             start will begin a list with any
  <li value=j>               positive number. value will
                             renumber the list from the item
                             and following with the new value.

  <dl>                       Descriptive Lists                    Lesson 11
    <dt>                     Lists with text items <dt> and 
    <dd>                     indented definitions <dd>
  <img src="file.gif">       Inline Image                         Lesson 7a;
                             Display a picture within web page.
  <img src="file.gif"        src (source) is the name, file       Lesson 20
  alt="###"                  path, or URL for the image file; 
  align=top|middle|bottom|   alt (alternative) is a string of
  left|right                 text displayed for non-graphic
  height=x width=y>          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.


  <a href="file.htm">       Local Hypertext Link                 Lesson 8a
  hypertext</a>              Link to another document.

      URL                    Uniform Resource Locator             Lesson 8b
                             Address for Internet resources 

  <a href="URL">             Internet HyperText Link              Lesson 8c
  hypertext</a>              Link to another Internet Site,
                             specified by URL

  <a name="xyz"<...>         Named Anchor                         Lesson 8d
                             Marks a section of text within a 
                             document with name "xyz"

  <a href="file.htm#xyz">   Link to Named Anchor                 Lesson 8e
  hypertext</a>              Jump to a named anchor within the 
                             same or another document

  <a href="url">             Internet HyperGraphic Link           Lesson 8e;
  <img scr="file.gif">       Inline image acts as hyperlink to 
  border=0</a>               site specified by URL. Including     Lesson 22
                             the border=0 attribute will         
                             suppress the display of a bounding
                             box around the image

  <a href="mailto:           Internet Mail Link                   Lesson 12
  "doe@xyz.edu">... </a>     Sets up email message to specified
    <img src="image.gif"     Client-Side Image Map              Lesson 23
  usemap="#map_name">        Clickable image map interpreted by   
                             browser. ... can occur anywhere in
  <map name="map_name">      this or another HTML file.
  <area shape="rect"         Coordinates are top left and lower
     coords="x1,y1,x2,y2"    right corners of rectangular shaped
     HREF=URL>               region
  <area shape="rect"

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/tag2.htm