|
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.
- O.K., 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">
anything
</td>
|
<td>
<table style="margin: 0 auto">
<tr>
<td>
anything
</td>
</tr>
</table>
</td>
|
<td style="align:center">
anything
</td>
|
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.
- advantages:
- 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.
- 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:
- Find a page whose formatting is kind of similar to what you want.
Usually, hand-coded pages work better than pages from HTML generators.
- Copy the page and re-name it.
- Substitute your information for all of the original information,
including the TITLE and META tags in the header, and all images.
- Check the syntax and spelling, and make corrections.
- Preview the page on several different web browsers.
Make changes if it doesn’t look right on all of them.
- Upload the page to your web host, and check all of the links.
Overcoming Multitude
-
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.
-
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
- computer
-
Apple iMac 2.5 GHz Intel core i5, 2011 model (which still
has a Firewire port and a CD drive), running MacOS Sierra.
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].
-
I didn’t upgrade to MacOS High Sierra, because they are phasing
out support for 32-bit applications. Many of the applications I depend on,
including Microsoft Office, are 32-bit.
- 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.
-
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 hosting
-
Visit
Hosting Facts and choose from their recommendations.
- FTP uploads and downloads
- FlashFTP does them.
- backups
-
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.
|