Web Style Guide: Part 3

<BODY BGCOLOR="#000000" TEXT="#c0c0c0" LINK="#FFFF00" VLINK="#808080"> <TABLE WIDTH="400" BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TR> <TD> <P ALIGN="CENTER"><IMG SRC="../images/mhb1.jpg" ALT="Magic Horizons Title Graphic" ALIGN="BOTTOM" WIDTH="398" HEIGHT="162"></P> <H2>Defining The Look Of The Web Page</H2> <P>HTML, much to the dismay of traditionally trained graphic designers, is not a page layout language. The various extensions to HTML given by Netscape and Microsoft attempt to address this, as did the addition of the <TABLE> elements in the abandoned HTML 3.0 specification, and several elements in HTML 3.2 specification.</P> <P>A number of HTML tricks were used on this page, even more weren't. The ones that were used are documented below; the ones that weren't are also touched on briefly, giving reasons for why they weren't used.</P> <HR> <DL> <DT><A HREF="#tables" TARGET="Main">Tables And Text Layout</A></DT> <DT><A HREF="#notused" TARGET="Main">Extensions Not Used</A></DT> <DT><A HREF="#guides">Other Style Guides</A></DT></DL> <HR> <H4><A NAME="tables"></A>Tables And Text Layout</H4> <P>The look of this page was optimized for 640x480 browser screens. To avoid horizontal scroll bars, all of the text on the page is lined up in a one cell table with an absolute cell width of 400 pixels. This also keeps the text from getting spread out wider than the title graphic.</P> <P>While it's possible to do multicollumn layouts with a table in HTML, it's not recommended. To browsers that don't support tables, your nice page layout looks like so much gibberish. As it currently stands, anything that's in a table (such as the <A HREF="../info/schedule.html" TARGET="_top">schedule</A> for upcoming games) has the non-table data in the <NOFRAMES> element of the main document. This allows a user-transparent method of delivering the data in an appropriate form.</P> <P>Text callouts in longer articles are done using the <FONT SIZE=5> and <EM> tags, separated from the main body of the text by <HR> tags. Text callouts should never be longer than two sentences, and one is ideal.</P> <P>There are two primary reasons to use a text callout. One is to highlight important concepts in the article. The second is to give the reader a visual break point and landmark when scrolling down through a document.</P> <HR> <P><FONT SIZE="5"><EM>Text callouts should never be longer than two sentences, and one is ideal.</EM></FONT></P> <HR> <H4>Use Of Font Formatting Tags</H4> <P>Document titles are done using the <H2> tag, as it allows longer titles without unusual word wrapping in 400 pixel screens. Subheaders are done using the <H4> tags. Using a plethora of header styles results in the Clown's Pants Syndrome of document layout; there's no overall sense of style in the document.</P> <P>The font tags that this site uses are the viewer-definable ones, <EM> and <STRONG>. The <EM> tag will show up as <I>italic</I> text for most browsers, while <STRONG> will show up as <B>bold</B>. Using these two tags keeps this web site in line with a broader spectrum of browsers, and allows a more structured approach to layout.</P> <P>It is possible to change the way those two tags appear in a browser by tweaking individual browser settings. Instructions for doing so is beyond the scope of this article.</P> <P>The FONT SIZE attribute was used on this web site, primarily for text callouts, using the format specified in the HTML 3.2 specifications, which differs minimally from the Netscape implementation(s). The FONT FACE attributes were not used, as I, as the web page designer, have no control over what fonts your browser has. Perhaps when downloadable fonts are available, this will change.</P> <H4><A NAME="notused"></A>Extensions Not Used</H4> <P>All of the extensions used are part of the <A HREF="http://www.w3.org" TARGET="_top">HTML 3.2</A> spec, with the exception of the frames. Not all of the HTML 3.2 tags are used freely.</P> <UL> <LI>The Netscape <CENTER> tag was not used, as the <DIV ALIGN> attribute does the same job across a wider selection of browsers.</LI> <LI>The Netscape <BLINK> tag isn't used, because, frankly, it's tacky.</LI> <LI>TABLEs are used on this web site, above and beyond the one-cell table used to format the text, because a table is the clearest way to present some data. Data presented in a table will also be presented in a non-TABLE form, at least for the duration of 1997. By 1998, the HTML 3.2 specification should be entrenched enough that table usage won't cause problems.</LI></UL> <P>Ultimately, the guidelines for this web site are malleable. If an extension to HTML comes out that's backwards ignorable (using it doesn't shut out a large portion of browsers, or mess up your text if the tags are ignored), consider it.</P> <P>The final consideration is the time needed to upgrade existing pages to make use of the new widget you're adding. Without multiple-file find-and-replace for HTML tags, implementing new HTML tricks can simply be a chore.</P> <H4><A NAME="guides"></A>Other Web Page Style Guides</H4> <P>The following guide pages were quite useful to me in learning how to code HTML; The Yale C/AIM guide is especially good</P> <UL> <LI><A HREF="http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html" TARGET="_top">A Beginner's Guide to HTML</A></LI> <LI><A HREF="http://www.ncsa.uiuc.edu/demoweb/url-primer.html" TARGET="_top">A Beginner's Guide to URLs</A></LI> <LI><A HREF="http://www.w3.org/hypertext/WWW/Provider/Style/Overview.html" TARGET="_top">Style Guide for Online Hypertext </A></LI> <LI><A HREF="http://info.med.yale.edu/caim/manual/contents.html" TARGET="_top">Yale C/AIM WWW Style Manual</A></LI> <LI><A HREF="http://www.mcp.com/84574702180783/zdpress/9504/feature/laron/la_samp.html" TARGET="_top">HTML Manual of Style</A> (by Larry Aronson)</LI></UL> <P>This web site was prepared using HoTMetaL PRO 3.0 for the Windows 95 platform. This HTML editor is available from <A HREF="//www.softquad.com/" TARGET="_top">SoftQuad</A>, a Canadian company that specializes in making SGML editors.</P> <HR> <DIV ALIGN="CENTER"> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="JUSTIFY"> <TR> <TD><A HREF="style1.html" TARGET="_top"><IMG SRC="../images/part1n.jpg" ALT="[Part 1]" BORDER="0" WIDTH="96" HEIGHT="41"></A></TD> <TD><A HREF="style2.html" TARGET="_top"><IMG SRC="../images/part2n.jpg" ALT="[Part 2]" BORDER="0" WIDTH="96" HEIGHT="41"></A></TD> <TD><A HREF="style3.html" TARGET="_top"><IMG SRC="../images/part3g.jpg" ALT="[Part 3]" BORDER="0" WIDTH="96" HEIGHT="41"></A></TD> <TD><A HREF="style4.html" TARGET="_top"><IMG SRC="../images/part4n.jpg" ALT="[Part 4]" BORDER="0" WIDTH="96" HEIGHT="41"></A></TD></TR></TABLE></DIV> <TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0"> <TR> <TD><A><IMG SRC="../images/left_h.jpg" ALT="Left End Of Scroll Bar" WIDTH="32" HEIGHT="116"></A></TD> <TD><A HREF="../info/info_toc.html" TARGET="_top"><IMG SRC="../images/info_h_n.jpg" ALT="[Logistics]" ALIGN="BOTTOM" BORDER="0" WIDTH="45" HEIGHT="116" NAME="info"></A></TD> <TD><A HREF="../game/game_toc.html" TARGET="_top"><IMG SRC="../images/game_h_n.jpg" ALT="[Game Info]" ALIGN="BOTTOM" BORDER="0" WIDTH="60" HEIGHT="116" NAME="game"></A></TD> <TD><A HREF="../misc/misc_toc.html" TARGET="_top"><IMG SRC="../images/misc_h_n.jpg" ALT="[Miscellaneous Information]" ALIGN="BOTTOM" BORDER="0" WIDTH="62" HEIGHT="116" NAME="misc"></A></TD> <TD><A HREF="../faq.html" TARGET="_top"><IMG SRC="../images/faq_h_n.jpg" ALT="[Frequently Asked Questions]" BORDER="0" WIDTH="58" HEIGHT="116" NAME="faq"></A></TD> <TD><A HREF="../new.html" TARGET="_top"><IMG SRC="../images/new_h_n.jpg" ALT="[What's New]" ALIGN="BOTTOM" BORDER="0" WIDTH="52" HEIGHT="116" NAME="whatsNew"></A></TD> <TD><A HREF="../index.html" TARGET="_top"><IMG SRC="../images/home_h_n.jpg" ALT="[Magic Horizons Home Page]" ALIGN="BOTTOM" BORDER="0" WIDTH="59" HEIGHT="116" NAME="home"></A></TD> <TD><IMG SRC="../images/right_h.jpg" ALT="Right End Of Scroll Bar" WIDTH="22" HEIGHT="116"></TD></TR></TABLE> <P>Problems with the page? Email <a HREF="mailto:burnside@itis.com">Ken Burnside</a>.</P></TD></TR></TABLE></BODY>