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.
<html> HTML Structure Lesson 1
<head>...</head> Basic structure for any HTML
<body>...</body> document
</html>
<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
page.
<body background= Texture File Background Lesson 16
"filename.gif"> Use a graphic image to repeatedly
"tile" and fill the web browser
page.
<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.
<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
quotations
<pre>...</pre> Preformatted Text Lesson 9
Displays in monsospaced font with
all space and carriage returns
preserved.
&xxxx; Special Characters Lesson 10
Codes for special character sets
and diacritical marks
<blink>...</blink> Blink Lesson 17
Flashes text in a very annoying
manner.
<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.
H2SO4)
<p> Paragraph Lesson 4
Forces new paragraph with one
blank line separator
<br> Line Break Lesson 4
Forces new line without blank line
separator
<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
shading
<center>... Center Alignment Lesson 20
</center> Aligns everything to the center of
the page
<p align=center>...
</p>
<div align= Division Lesson 20
left|center|right> Aligns everything to left, center,
... or right side of page
</div>
<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.
Lists
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>
<dt>
<dd>
</dl>
</pre>
<H3>Graphics</H3>
<pre>
<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.
Hyper-Links
<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
address
<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"
coords="x1,y1,x2,y2"
HREF=URL>
</map>
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