Ted’s HTML Approach
 ←  text over image
 ←  text in stylized box

Being self-taught in HTML, I won’t claim that my methods are the best. But they work. 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. Hyperlinks 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:#ffffff }
hr { background:#000000; color:#000000; height:1px; border:none }
th,td,li,dt,dd,caption { font-family:Times; font-size:16px;   background:none; color:#000000 }
p { font-family:Times; font-size:16px;
  background:none; color:#000000; text-indent:16px }
dt { margin-top:12px }
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, including this one, are a library of reusable formatting examples. Feel free to borrow my formatting.
document type (goes at the beginning of your file, first line)
<!DOCTYPE html>
Search the web for “HTML 5” to find informative discussions of this topic.
OK, what about HTML 5?
If you have audio or video elements, use HTML 5. Audio and video are built into the language, although they will look different on different web browsers.
Be aware that some of the changes require more rigmarole to accomplish the same thing, e.g. <border>, <cellpadding>, <cellspacing> in a <table>; also <align> in a <td> that contains something other than text. For example:
older HTML HTML 5 why not?
<td align="center">
<table style="margin: 0 auto">
<td style="align:center">

Anyway, my new files are HTML 5. This file has been converted.
character set (goes right after <TITLE> at the beginning of the header)
<meta charset="utf-8">
Search the web for “HTML charset=utf-8” to find informative discussions of this topic.

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.

You can do anything.
Independence. You are not at the mercy of someone else’s development tool.
No unnecessary code. Your HTML files are clean and compact.
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, and all images.
  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 of the links.
Overcoming Multitude
  1. If you’re going to make many instances of the same kind of page over time, such as trip reports for the hiking club, it’s worth setting up a template to allow quick global substitutions of the particular information for each instance. My AZHC Trip Report Template provides consistent formatting and saves me a lot of time, even though it is not fully automated.
  2. How many of those similar files are you going to make for the Web? If there are many items of the same kind (e.g. hundreds of trip reports for the hiking club), you’ll need to develop an efficient way of organizing your HTML files.
    Let the most common search criteria be your guide for organizing the files. Survey the readers, if need be, to find out what they usually search for.
Tools and Methods
An Apple iMac with a 21.5" screen, SSD and memory maxed out, running the latest Apple operating system. I also have older Macs running OS 10.5 and OS 9, which work better for GPS maps and for sound recording, respectively [long story].
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, as does BBEdit.
picture composition
Microsoft PowerPoint.
Save the current slide as a TIFF, PNG, or for maximum resolution, a Macintosh Picture (PICT, unfortunately, is available only on older Macs).
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, Very High” in the Preset list. For other images, GIF might result in a smaller file.
graphic file conversion
Lemke GraphicConverter can convert from almost any graphic file format to almost any graphic file format.
downloading pictures from a digital camera
Preview does it. I don’t use picture-organizing software, but store my pictures by digital roll number. Index the rolls by date and location, using an Excel spreadsheet.
sound editing
Audacity lets you see the waveform on your computer screen, then save the edited sound in several different formats.
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 hosting
Visit Hosting Facts and choose from their recommendations.
FTP uploads and downloads
FlashFTP does them.
Everything is on my computer, nothing on the Cloud. All my documents are on an external disk, easy to connect to a different computer. Also I have a Time Machine backup on another external disk. Periodically I copy all the files to thumb drives or other backup disks. Two of the backup disks I exchange between my house and the bank box every few months, so I’ll always have a backup at a remote location.
protecting information
Read the news: Hackers are notorious for stealing information which was supposedly protected on the web. If you have information that needs to be protected, don’t put it on the web. Also, don’t send it in an email.
Search Engine Optimization
Follow the experts’ SEO advice, paying attention to the TITLE and META tags in your header.

Web Development & Design 101
HTML(5) Tutorial
Learn to Code HTML & CSS
Cascading Style Sheets
HTML advice
ASU coding boot camp
Color Palette Generator
Color Relationships

 updated May 14, 2024