Elements of Web Design

Topics in Web Page Design
(or: the tapestry of HTML)

Presented by:
Birdie MacLennan, Serials Coordinator
Bailey/Howe Library, University of Vermont
e-mail: bmaclenn@uvm.edu

NASIG Workshop - June 22, 1996
University of New Mexico, Albuquerque

Elements of Web Design (some suggestions)
Techniques for ...
  • Creative Use of Linking
  • Special Character Formatting
  • Graphics: Web Archives and Creating Your Own
  • Tables
    References: Guides to Style and HTML Coding

    • Elements of Web Design (some suggestions):

    [Return to Outline of Contents]

    Creative Use of Linking

  • Links Between Documents (to link from your document to another): 
    <a href="http://nasig.ils.unc.edu">NASIGWeb</a>
    displays simply as: NASIGWeb

  • Linking Within a Single Document (or between sections of documents):
    Name the section of the text you wish to link to: 
    <a name="link">Creative Use of Linking</a>
    To link to that portion of the text, use a hypertext reference anchor (a href=), followed by the hash sign (#) and the "name" of the section. Close the anchor with an </a> code: 
    <a href=#link>Creative Use of Linking</a>
 Here is the actual link:  Creative Use of Linking
    (see other examples by viewing the Contents table in the source file for this page).

  • Linking Images (within a document or between documents):
    Embed the "img src" file that you wish to link within a hypertext reference anchor (a href=). Close the anchor with an </a> code: 
    <a href=#contents> <img src="quilt.gif"></a>
    This method was used to link the quilt.gif image that you see below to the Table of Contents at the top of this file (view source file).
    If you wanted to link the image to a remote document, use a hypertext reference anchor to any URL. For example, to link a (borrowed) image to a remote server (e.g., NASIG Conference page) code: 
    <a href="http://http://www.unm.edu/~nasig.> <
img src="nasig2.gif"> NASIGWeb</a>
    for the resulting "hot" graphic and text link(s): NASIG'96 Conference
    [Return to Outline of Contents]

    Special Character Formatting

  • "Escaping" Special Characters used in HTML Formatting (or adding them for display in your documents):
    There are three characters that must be specially coded if you want them to display in an HTML document:
      &lt; = the code for < (left-angled bracket)
      &gt; = the code for > (right-angled bracket)
      &amp; = the code for & (ampersand)

  • Displaying Characters Not Available in Plain ASCII (diacritics, etc.):
    Additional codes support a number of other non-ASCII characters and diacritical marks. A partial list is included below:
      &ouml; = the code for a lowercase o with an umlaut: ö
      &ntilde; = the code for a lowercase n with an tilde: ñ
      &Egrave; = the code for an uppercase E with a grave accent: È
      &eacute; = the code for a lowercase e with an acute accent: é
      (You can substitute other letters for the o, n, E and e shown above.)
      &#169; = the code for a copyright symbol: ©
    For a full listing see the HTML Coded Character Set (http://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_13.html).

    [Return to Outline of Contents]

    Graphics: Web Archives and Creating Your Own

    Color backgrounds: Color Codes and Graphic files:
    Notes:
    The use of the attribute BACKGROUND="URL.gif" is a part of the proposed HTML 3.0 and is supported by browsers such as Mosaic and Netscape.

    Background colors and text colors are Netscape and not HTML 3.0 extensions. To view these features, you should be using a Netscape Navigator browser, version 1.1N or better. Note that the use of Netscape extensions should not "break" any non-compatible browser's ability to view the documents.

    Techniques:
    • Familiarize yourself with a few basic codes for defining colors, e.g.:

      BACKGROUND= to define a graphical file (e.g., .gif file) as a background ... or:
      BGCOLOR= to define a BackGround Color
      LINK= Color of links
      TEXT= Color of unlinked text
      VLINK= Color of Visited Links

    • Familiarize yourself with a chart or scheme of hexidecimal values for color attributes. Such a chart can be found on the W3C Consortium color specification page, the Web Design Group's RGB Color Values, or the RGB Hex Triplet Color Chart from ClickInks.com.
    • Choose colors and matching codes that suit your document.
    • Define hexidecimal color codes for links or background attributes in the BODY of your document.
    • For example, the coding used on this page defines colors for TEXT, LINK (unvisited links), VLINK (visited links), and BACKGROUND, the quilted graphical (.gif file) background:

      <BODY TEXT="#9900CC" LINK="#CC00CC" VLINK="#FF0000" BACKGROUND="http://www.uvm.edu/~bmaclenn/graphics/quilt2.gif">

    • A simple way to experiment with a number of color and background options is to visit Sam Choukri's ColorMaker page - an interactive color design program/tutorial.

    References:

    Graphic Archives (sites for linking or downloading graphics):

    Graphics Software (for creating, editing, or converting graphics files: [Return to Outline of Contents]

    Tables

    Notes: There are several tables coded into this HTML file, which serve as some examples for different table styles. The Netscape, Mosaic, or Tablemaker references (cited below) are also excellent sources (with plently of examples) for familiarizing oneself with the coding.

  • Here's how I created the Contents table at the top of this page:

    <table border=10 width=100% cellpadding=10>
    <tr> <td align=left>
    <img src="http://www.uvm.edu/~bmaclenn/graphics/quilt7a.gif"></td>
    <td> <a href=#design-fun>Elements of Web Design (some suggestions)</a> <br>
    Techniques for ...
    <a href=#link> <li>Creative Use of Linking</a>
    <a href=#char> <li>Special Character Formatting</a>
    <a href=#graphics> <li>Graphics: Web Archives and Creating Your Own</a>
    <a href=#tables><li>Tables</a> <br>
    <a href=#guides> References: Guides to Style and HTML Coding</a>
    </td> </tr> </table>

    References:

    [Return to Outline of Contents]

    References: Guides to Style and HTML Coding:

    [Return to Outline of Contents]
    [Return to Workshop Intro page]
    Last Updated: March 2, 1998