Cyber-Sierra Workshop 2002: Web Site Power

     

Web 101

Index |  Basics |  Prepare |  Web 101 |  Anatomy |  Check It | 

 

Can you build a web site without knowing HTML. Absolutely! Using WYSIWYG editors or even the free Arachnophilia you can build great pages. But.....

Even using WYSIWYG page editors you'll need to understand basic terms to know what elements are required versus what are optional on a web page. If you expect to create access-friendly web sites you'll need some basic understanding of HTML to comprehend the feedback reports from your accessibility validation process.

Here is a quick translation of common HTML mark up tags. Notice that most tags are in pairs. More extensive information on HTML tags and their use can be found at The Bare Bones Guide to HTML.

 
Basic Tags
_____________________
<html></html> Creates an HTML document
<head></head> Sets off the title and other information that isn't displayed on the Web page itself
<body></body> Sets off the visible portion of the document
 
Header Tags
_____________________
<title></title> Puts the name of the document in the title bar
<meta></meta> meta attributes like description and content help with search engine positioning
 
Body Attributes
_____________________
<body bgcolor="?"> Sets the background color, using name or hex value
<body text="?"> Sets the text color, using name or hex value
<body link="?"> Sets the color of links, using name or hex value
<body vlink="?"> Sets the color of followed links, using name or hex value
<body alink="?"> Sets the color of links on click
 
Text tags
_____________________
<pre></pre> Creates preformatted text
<h1></h1> Creates the largest headline
<h6></h6> Creates the smallest headline
<b></b> Creates bold text
<i></i> Creates italic text
<tt></tt> Creates teletype, or typewriter-style text
<cite></cite> Creates a citation, usually italic
<em></em> Emphasizes a word (with italic or bold)
<strong></strong> Emphasizes a word (with italic or bold)
<font size="?"></font> Sets size of font, from 1 to 7
<font color="?"></font> Sets font color, using name or hex value
 
Links
_____________________
<a href="URL"></a> Creates a hyperlink
<a href="mailto:EMAIL"></a> Creates a mailto link
<a name="NAME"></a> Creates a target location within a document
<a href="#NAME"></a> Links to that target location from elsewhere in the document
 
Formatting
_____________________
<p> Creates a new paragraph
<p align="?"> Aligns a paragraph to the left, right, or center
<br> Inserts a line break
<blockquote>
</blockquote>
Indents text from both sides
<dl></dl> Creates a definition list
<dt> Precedes each definition term
<dd> Precedes each definition
<ol></ol> Creates a numbered list
<li> Precedes each list item, and adds a number
<ul></ul> Creates a bulleted list
<li> Precedes each list item, and adds the bullet
<div align=?> A generic tag used to format large blocks of HTML, also used for stylesheets
 
Graphical Elements
_____________________
<img src="name"> Adds an image
<img src="name" alt="text"> the 'alt' attribute describes the image
<img src="name" align="?"> Aligns an image: left, right, center; bottom, top, middle
<img src="name" border="?"> Sets size of border around an image
<hr> Inserts a horizontal rule
<hr size="?"> Sets size (height) of rule
<hr width="?"> Sets width of rule, in percentage or absolute value
<hr noshade> Creates a rule without a shadow
 
Tables
_____________________
<table></table> Creates a table
<tr></tr> Sets off each row in a table
<td></td> Sets off each cell in a row
<th></th> Sets off the table header (a normal cell with bold, centered text)
 
Table Attributes
_____________________
<table border="#"> Sets width of border around table cells
<table cellspacing="#"> Sets amount of space between table cells
<table cellpadding="#"> Sets amount of space between a cell's border and its contents
<table width="#" or" %"> Sets width of table - in pixels or as a percentage of document width
<tr align="?"> or <td align="?"> Sets alignment for cell(s) (left, center, or right)
<tr valign="?"> or <td valign="?"> Sets vertical alignment for cell(s) (top, middle, or bottom)
<td colspan="#"> Sets number of columns a cell should span (default is 1)
<td rowspan="#"> Sets number of rows a cell should span (default is 1)
<td nowrap> Prevents the lines within a cell from being broken to fit  
 

Reference Sites:

  • The Bare Bones Guide to HTML
    A handy cheat sheet for HTML tags.
     
  • HTML Tutorials for the Complete Idiot
    Tech Soup's recommendation for learning HTML.
     
  • Free Course on HTML
    Get one lesson a week for 10 weeks in by e-mail. It's a simple way to learn the basics.
     
  • Introduction to Web Design
    Selena Sol's 3 day course on web basics. Very easy.
     
  • The HTML Station
    This site links you to reference information and demonstrations of hypertext markup language (HTML). You'll find information about all specifications of HTML, as well as tutorials, demonstrations, techniques, codes and entities, and links to supporting and reference information. Great if you need an example of how to use a specific tag.
     
  • Search Engine Watch
    Everything you'll ever need to know about search engines.
     
Index |  Basics |  Prepare |  Web 101 |  Anatomy |  Check It | 

 

 

WORKSHOPS: E-Mail and Outreach |  Web 101 |  Building Accessible Webs |  Web Security | 

Workshops Location: http://www.cyber-sierra.com/workshops/
2002 copyright © Cyber-Sierra.Com, on-line since 1997