The Distribution Manager is generally in charge of marking up APAGear II submissions in HTML. This ensures that the overall look of the APAGear II site is self-consistent. Furthermore, it keeps the DManager (Schaller) from going crazy by ensuring that the entire site uses the same, consistent HTML style. He's a bit funny that way.
Nevertheless, I (he said, suddenly slipping into the first-person case) realize we each may want to flex our own stylistic muscles and do our own HTML encoding. That's perfectly reasonable; in fact, if we were doing this APA in the traditional print form, I can guarantee each member's pages would look generally different.
These HTML guidelines exist to make our lives (and the lives of our viewers) simpler by providing an overall set of rules to which we should adhere. Despite these rules, you'll find there's still lots of room for expression.
There are two Golden Rules for HTML design that I insist you follow: First, you should use strict HTML 4.0 coding. Second, you should use Cascading Style Sheets (Level 1) to do special formatting.
You can find the HTML 4.0 specs and CSS Level 1 at the following URLs:
Why? Because HTML is really easy to abuse, and I'm something of an HTML purist. Cascading Style Sheets provide a mechanism to accomplish tasks in simple HTML that involve lots of clunky kludges when one doesn't use CSS. A perfect example is the border image on the APAGear II Web pages. Without the use of CSS, a Web page designer would have to resort to ridiculous mechanisms to achieve a rather elegant and simple look. These mechanisms typically consisted of inserting unnecessary invisible images as padding--which results in more connections to the host and in increase in network traffic--or of using tables to format the text in two columns--a fundamental violation of the table paradigm that can result in long layout times and garbled text in non-visual browsers of text-only browsers
The following are some of the lesser rules of HTML design for the APAGear II Web site:
<p>, <td>,
and <tr>] for instance)
are optional. Unfortunately, some browsers tend to render text differently
if you treat these tags as optional. Therefore, closing tags
are required in all cases where the HTML 4.0 specs claim otherwise.
<img> tag), this requirement means you must
include the alt parameter. For tables, you must
include the summary parameter. Check out the source code
for these pages to see examples.
This rule needs to stand on its own: Under no circumstances are the results of automatic HTML converters, exporters, defibulators, flatulators, or discombobulators acceptable. If you're going to hand-code your HTML, do it by hand, without the use of a so-called WYSIWYG HTML authoring package. Don't get your word processor to export HTML for you. We'll have none of that! These packages generally seem to have been designed and programmed by people who really don't understand HTML at all.
You're really better off using a plain old ordinary text editor.
I personally use BBEdit Lite on my Mac and (drumroll)
vi on my UNIX workstation. They never fail me and they
always give consistent, reliable results in nearly flawless HTML
4.0.
CSS gives you a lot of power and flexability with a few simple
lines of formatting control code. If you look at the source HTML
for this page, you'll find two tags in the HEAD portion
of the document:
<meta http-equiv="Content-Style-Type" content="text/css"> <link href="../CSS/apagear.css" rel="stylesheet" type="text/css">
The first line tells the browser to load an additional document along with this one; it specifies that the second document is going to be a style sheet. The second line provides the URL to the document.
The document that is loaded is called apagear.css; it's
the APAGear II general style sheet. It provides a number of
customized formatting options for our pages. The most obvious
effect is the border image and the adjusted margins. The margin
adjustment allows the entire text of the page to fit without overlapping
the border image; it does it without using the clunky hacks that
used to be (and still are, sadly) the standard of HTML design.
The next most obvious effect is that headings are displayed in a different font than the default. (This statement may not be true if you've customized your browser's font preferences/settings.)
Let's have a look at the APAGear II style sheet, apagear.css:
body {
background-color : white;
background-image : url(../ImagesII/background.gif);
background-repeat : repeat-y;
margin-left : 60px;
margin-right : 20px;
color : black;
}
This block defines the body of the document. It sets the background color to white. It loads an image to be used as the background image with the specified URL, and informs the browser that the image is to be repeated only in the vertical direction. (This feature is another, subtle advantage of CSS. If we'd put the background image information in the HTML document, then we wouldn't have control over how it repeats, and we'd have to make the image extremely wide to ensure that the document looks right. Here, we need only include the actual border.)
Next, we specify that the left margin of the document should be 100 pixels and the right should be 20. These values carefully place the body's text away from the border image. (Note, however, that Microsoft's Internet Explorer seems to have a different idea as to how to implement this feature.) Finally, the document's text color is set to black.
a:link { color : blue; }
a:visited { color : purple; }
a:active { color : red; }
Here we define the hyperlink colors.
p.center {
text-align : center;
}
p.right {
text-align : right;
}
These lines define some basic formats for paragraphs, including a
centered paragraph and a right-justified paragraph. The paragraph tag,
<p>, used to have a parameter called align.
This parameter has been deprecated in the HTML 4.0 specs in favor of
Cascading Style Sheets.
p.copyright {
font-size : small;
}
This code specifies a small-font paragraph for copyright information. Note how the copyright info on this page is in a smaller font than the rest of the document. This style spec is why.
p.nav {
text-align : center;
padding : 2em 0em 0em 0em;
}
This format is used on the APAGear II issue pages for the navigational graphics that appear at the bottom of each page. The primary feature is that some addition padding is added above the paragraph, separating it from the main body of text.
h1.title {
font-family : sans-serif;
text-align : center;
}
h1.issue {
font-family : sans-serif;
text-align : center;
}
h2.subtitle {
font-family : sans-serif;
text-align : center;
}
h2.sectionhead {
font-family : sans-serif;
padding : 1em 0em 0em 0em;
}
h2.author {
font-family : sans-serif;
text-align : center;
padding : 0.25em 0em 1em 0em;
}
h3.subsection {
font-family : sans-serif;
padding : 0.5em 0em 0em 0em;
}
Here we define several different heading formats, including the title, subtitle, aithor, and various sectioning levels for the APAGear pages. Note that the font face is specified as "sans-serif"; sans-serif is the generic term for a font that lacks decorative serifs. Helvetica and Arial are examples of sans-serif fonts.
Some of the headings specify alignment, some specify extra padding to be added to the document.
Why in the world are there separate definitions for the title and
issue versions of the level one heading <h1>? Two reasons:
Fuctionally, the APAGear II issue identification is a different entity than
the title of each page. Mostly, however, it allows us to tweak the issue heading
format without affecting the title format. That means if we decide to set the issue
identifier in some gigantic font size, it won't affect the titles of each document.
An Important Point: There's an important point that you might be realizing
about now regarding CSS and their true usefulness. In the old days before CSS, if
we'd wanted to set the titles of each page in a different font than the default, we
would have had to add a bunch of <font> tags to each and every
document. If we'd later decided we didn't like it, we'd have to tweak the parameters
on each and every document. If we have more than a few documents
that need these changes, we'd have a huge task ahead of us.
With CSS, however, all we need to do is change ONE entry: We can tweak the style sheet and immediately affect every document that uses it!
Back to the style sheet...
td.1 {
font-family : sans-serif;
text-align : left;
}
td.2 {
font-family : sans-serif;
text-align : center;
}
td.3 {
font-family : sans-serif;
text-align : right;
}
td.tocindex {
font-family : serif;
font-size : large;
color : black;
text-align : right;
vertical-align : top;
}
td.tocitem {
padding-left : 20px;
font-family : serif;
font-size : large;
color : black;
vertical-align : top;
}
td.tocsubtext {
padding-left : 20px;
font-family : serif;
font-size : medium;
color : black;
vertical-align : top;
}
This set of formatting codes specifies a number of different table layouts.
hr.bottom-rule {
padding : 2em 0em 0em 0em;
}
hr.footnote {
padding : 1em 0em 0em 0em;
}
Finally, we specify some additional padding for various kinds of horizontal rules, depending on their use.
[Soon to come...]
[Soon to come... Study APAGear Vol. 0, No. 0 to see how to do it for now.]
Heavy Gear is © 2000, Dream Pod 9, Inc. All rights reserved. APAGear is not affiliated with Dream Pod 9 in any way. Submitted material remains the property of the creator.