Ted’s HTML Approach
http://www.azhikers.org/
http://www.mile204.us/

My web pages are information resources. They are designed to be

  • non-commercial
  • fast loading
  • compatible with a wide variety of web browsers without any need for plug-ins

My design strategy is to set up a hierarchy of pages with each page covering one aspect of the subject matter. Internal links point to related pages. HTML files are organized into nested folders which parallel the hierarchy. Images are in folders separate from the HTML files.

I try to avoid excessive fan-out (too many links from one page) and too many files in one folder.

Design tactics include cascading style sheets and reuse of HTML code.

cascading style sheets

Formatting details are specified in one place and then inherited by all the HTML files that refer to them. Here’s mine, textdef.css

body {background-color: #ffffff}
th,td,li,dt,dd,caption {font-family:Times; font-size:16px; color:#000000}
p {font-family:Times; font-size:16px; color:#000000; text-indent:16px}


reuse of HTML code

When you see some formatting you like — for example,  highlight markers around some of the text — find it in the HTML source code, copy that section of code into your own HTML document, and substitute your information for the original information. My HTML files are a library of reusable formatting examples.

Coding is done the hacker’s way: I don’t use graphic editors or HTML generators, but edit the raw HTML code with a text-only editor.

advantages:
You can do anything.
Independence. You are not at the mercy of somebody else’s development tool.
No unnecessary code. Your HTML files are clean and compact.

disadvantages:
You have to learn HTML. My favorite help documents are linked on-line.
Syntax checking is a critical, though easy, extra step.
Creating an HTML file might take more of your time.

Ted’s approach to developing a web page:
  1. Find a page whose formatting is kind of similar to what you want.
    Usually, hand-coded pages work better than pages from HTML generators.

  2. Copy the page and re-name it.

  3. Substitute your information for all of the original information, including the TITLE and META tags in the header.

  4. Check the syntax and spelling, and make corrections.

  5. Preview the page on several different web browsers.
    Make changes if it doesn’t look right on all of them.

  6. Upload the page to your web host, and check all the links.

Tools and Methods
computer
Apple Macintosh Dual 2.3 Ghz PowerPC G5, running MacOS 10.4.11
I also have an old Mac running OS 9, which works better for sound recording.

HTML coding
BBEdit is a text editor optimized for HTML.
It provides previews, syntax and spell checking, and tools to speed up your editing process.

HTML syntax checking
The W3C Markup Validation Service does an outstanding job.

picture composition
Microsoft PowerPoint.
Save the current slide as TIFF, or for maximum resolution, as a Macintosh Picture (PICT).
For more details, see Professional-Quality Digitized Maps.

image editing
Adobe Photoshop Elements.
Resize the image (400 x 300 works well) then Save for Web. If it’s a photograph, choose “JPEG High” in the Preset list. For other images, GIF might result in a smaller file size.

sound editing
Audacity lets you see the waveform on your computer screen, then save the edited sound in several different formats.

mailto:
Use a <SCRIPT TYPE="text/javascript"> to discourage spammers. Other methods include spelling out the punctuation or making a graphic image of your email address.

web hosts
See Web Hosting Reviews By Users and choose from their Hosting Recommendations.

FTP uploads and downloads
Captain FTP handles them with great aplomb.

Search Engine Optimization
Follow the experts’ SEO advice, paying attention to the TITLE and META tags in your header.

Web: Best Practices Meta Tags Explained
HTML Page Tutor HTML Help: Web Design Group
W3C HTML Home Page Guide To Publishing HTML
HTML Made Really Easy Interactive introduction to HTML
HTML Introduction Bare Bones Guide to HTML

updated June 15, 2009