Intermediate HTML

blue fractal Intermediate HTML blue fractal

(still painless !)

by Kathy Amen

******************************

This is a practical guide to some advanced, but still not terribly complicated, HTML features that can be used to create Web pages with only a word processor (and occasionally some readily available free- or shareware). Some of these techniques require enough tedious tagging that you might want to use an HTML editor to accomplish them, but you don't have to. Here is some information (and some opinions) on HTML editors.

In deciding what topics to include in this guide, and at what level to explain them, I am assuming that you have a familiarity at least with the topics covered in my basic HTML guide: Quick and Painless HTML. I do a great deal more referring to other sources in this guide than in the previous one, because some of these topics and techniques are not as familiar to me as basic HTML, and I therefore don't feel qualified to go into the level of detail that some readers might want. Fortunately, there are many wonderful explanatory sites, tutorials and other resources on the Web. After the table of contents below, I have compiled a complete list of these references from throughout the guide, as well as some general sources. Use them to get more information on the topics covered here, although if you contact me with questions I'll do my best to help.

A couple of notes on terminology and punctuation:

******************************

Table of Contents

Identification

Titling your page
Searching you out (meta tags)
Contacting you (mailto links)
Decoration

Text Enhancement

Bolding, italics and underlining
Color
Size
Typeface
Special characters

Page Enhancement

Background colors and images
Dividers

Organization

Internal links
Lists
Tables
(more about tables)
Frames (a brief introduction)

Illustration

Miscellaneous Useful Graphics Attributes
alt tags
Making your own
Animation
Interaction
Simple Forms

Styles—Basic Concepts

The Big Picture

Proper HTML
Writing for all browsers
Etiquette & Ethics

******************************

Cited Sites

Note: these are definitely not all of the good sites available on these topics. (Can anyone really claim to have a comprehensive list of Web sources on any subject?) But they are the ones I have stumbled across one way or another and have found to be very useful. I hope this listing is helpful to you.

Advanced CSS Layouts: Step by Step
www.webreference.com/authoring/style/sheets/layout/advanced/
Anybrowser Pages.
www.anybrowser.org
Bobby. (From the Center for Applied Special Technology. Checks pages' accessibility for persons with disabilities)
www.cast.org/bobby/
Browser-safe Colors. (from Lynda.com)
www.lynda.com/hex.html
Graphics and Multimedia (Builder.com)
builder.com.com/1200-31-5084829.html
HTML Checkers (validation). (by Alan Richmond)
www.wdvl.com/Authoring/HTML/Validation/
Ian Graham's Special Characters.
www.utoronto.ca/webdocs/HTMLdocs/NewHTML/entities.html
Image Use on the Web. (from the Web Design Group)
www.htmlhelp.com/design/imageuse.htm
META Tag Resources. (from the Web Developer's Virtual Library)
WDVL.com/Authoring/HTML/Head/Meta/Resources.html
SearchEngines.com
www.searchengines.com/
 
Use of ALT texts in IMGs. (from the Web Design Group)
www.htmlhelp.com/feature/art3.htm
Web Robots Pages
www.robotstxt.org/wc/robots.html
Which to Use: Frames or Tables (from Dreamweaver Support at Macromedia.com)
www.macromedia.com/support/dreamweaver/layout/frames_or_tables/
Why Frames Suck (most of the time). (by Jakob Nielsen)
www.useit.com/alertbox/9612.html
Zen Garden (Sophisticated design uses of CSS)
csszengarden.com/

General Resources

CSS Resource List

All Things Web. (by Terry Sullivan)
www.pantos.org/atw/
BoogieJack (tutorials and graphics)
www.boogiejack.com/index.html
Builder.com
builder.com
Design Meme Web Design Tutorials
www.designmeme.com/articles/
EASI's Web Design Access Kit. (Equal Access to Software and Information)
www.rit.edu/~easi/webkit.htm
Findtutorials.com: The elearning website
www.findtutorials.com/
HTML with Style. (from Internet.com )
www.webreference.com/html/
HTML Writers Guild Style Guide.
www.hwg.org/resources/html/style.html
Kryogenix browser experiments. (Advanced tips in HTML and Javascript)
www.kryogenix.org/code/browser/
Listmatic. (Examples and tutorials for using CSS for making navigation lists and other nice features.)
css.maxdesign.com.au/
NuBlue Digital Web Blog
www.nublue.co.uk/blog/
SimpleBits Notebook.
www.simplebits.com/notebook/
Style guide for online hypertext. (from the Web Design Group)
www.htmlhelp.com/design/style/
nonags.com
www.nonags.com
Quackit Tutorials
www.quackit.com/
Tizag Tutorials
www.tizag.com/
Tucows (free and cheap software)
www.tucows.com
Uncle Jim's Web Designs and Tutorials
jdstiles.com/
W3Schools (tutorials, examples, even quizzes)
www.w3schools.com/
Web Design Group FAQ.
www.htmlhelp.com/faq/wdgfaq.htm
WebDesignHelper.co.uk (Includes a nice graphics gallery)
www.webdesignhelper.co.uk/
Web Developer's Handbook.
www.alvit.de/handbook/
Web Developer's Virtual Library.
wdvl.com
Web Publishing Curriculum Resources (University of Oregon)
libweb.uoregon.edu/it/webpub/
Web Hosting Search (articles on web design topics and ratings of web hosting alternatives)
www.webhostingsearch.com/articles/
Webhostingstuff.com (ratings of thousands of web hosting companies)
www.webhostingstuff.com/
WebmasterWorld.com
www.webmasterworld.com/
Wired Webmonkey. (from Wired Magazine)
www.hotwired.com/webmonkey/
Writing for the Web. (rom Global Development Network)
www.ids.ac.uk/gdn/tools/writing.htm
 

Graphics, Image and Sound Archives

Amazing Picture Machine (North Central Regional Educational Laboratory)
www.ncrtec.org/picture.htm
BoogieJack (tutorials and graphics)
www.boogiejack.com/index.html
Debbie's Home Page Graphics Helper
www.geocities.com/SiliconValley/Heights/6355/
Graphics from Ender's Realm
www.ender-design.com/rg/
Leo's IconArchive
www.iconarchive.com/
PhotoEverywhere
www.photoeverywhere.co.uk/
Pics4Learning
pics.tech4learning.com/
Soundtransit
soundtransit.nl/

Styles References

Advanced CSS Layouts: Step-by-Step.
www.webreference.com/authoring/style/sheets/layout/advanced/
Cascading Style Sheets.
wdvl.internet.com/Authoring/Style/Sheets/
CSShark Answers FAQ.
www.mako4css.com/
Getting Started with Cascading Style Sheets.
builder.com.com/5100-31-5074849.html
Style Sheet Syntax.
www.webreference.com/authoring/style/sheets/syntax.html
W3C Cascading Style Sheets.
www.w3.org/Style/CSS/
W3C CSS Validator.
jigsaw.w3.org/css-validator/
WebMonkey Stylesheets Guide.
webmonkey.wired.com/webmonkey/reference/stylesheet_guide
Web Design Group's Guide to Cascading Style Sheets.
www.htmlhelp.com/reference/css/

In addition to these Web sources, I have also found these books (yes, print on paper) very useful: Web Design in a Nutshell, by Jennifer Niederst (Blume Library call number: TK 5105.888 N542 1999) and How to Set Up and Maintain a Web Site, by Lincoln Stein. (Blume Library call number: TK 5105.888 .S74 1997.) Another good book is Using HTML 4, by Mark Brown and Jerry Honeycutt. The library has an earlier edition, which is still useful for basic features: Using HTML, at QA 76.76 H95 R25 1996.

******************************

IMPORTANT NOTE: All of the instructions in this and my other tutorials apply to authoring for the Web at present (mid-2007) and will continue to be useful into the future. But to be sure you are using the latest standards, especially as we get further from 2007, you can always check with the good folks at W3Schools.

******************************

If you have questions about HTML or comments about these pages, please let me know. My email address is kamen@stmarytx.edu.