Page Layout
Index
Web Site Style Guide Index
Header
The header of a document contains the title and, possibly, information used
by search engines when indexing your Web page.
Title (*)
All Web pages must contain a title. The title is usually displayed at the top of the browser window. It cannot be seen within the text area of the page. The title should contain the name of the organization, the unit code/name, and a description of the contents of that page. For example, the title of the Oklahoma Chapter's information page would be:
SLA-COK Chapter Information
HTML:
<head>
<title>SLA-COK Chapter Information</title>
</head>
Meta tags (suggested)
Most search engines index the title of a page and keywords pertaining to that page. Some also use the first few words found on your Web page as the description of that page. Meta tags allow you to provide the keywords for your own page. You can also provide the description of your Web page which will appear with your link when your Web page appears as a search result. Meta tags are also located in the header of an HTML document. Here is the header of SLA's main page, including meta tags:
<head>
<title>Special Libraries Association Home</title>
<META name="description" content="International association of information professionals/special librarians in corporations, business, science, government, and academic institutions that use/produce specialized information.">
<META name="keywords" content="information professionals in corporations, members, membership, librarian, library, non-profit, association, conference, specialized information, international, global">
</head>
Notes on Using <META> Tags and Images
(from the Infoseek Web site)
- Your description can include up to 200 characters of text. The keywords can include up to 1000 characters of text.
- Do not repeat the same keyword more than 7 times in the <META> tag. If you do this, Infoseek Guide will ignore the entire list of keywords.
- Sites using Netscape frames
In your main HTML file (the file containing the <FRAMESET> tags), you should include a description of your Web site using <META> tags. Make sure that your description and keywords adequately summarize the contents of the frames on your Web page.
- Sites using JavaScript
If JavaScript functions make up the first 200 characters on your Web page, you should use <META> tags to provide a description for your Web page.
- Sites using images
Infoseek Guide also indexes the ALT attribute in the <IMG> tag. If your site mainly consists of graphics, you can also use the ALT attribute to describe your Web page. For example:
<IMG SRC="/images/nukedtwinkie.gif" ALT="picture of a microwaved twinkie">
Body
The body of a document contains the actual content of the Web page. This content usually consists of text, images, forms, links, etc.
Background images/color
Background images or color can be used to provide a unifying theme throughout a web site. Pastel or light colors generally make better backgrounds than bright, loud colors. Background images are usually shown as gray watermarks instead of full color images.
The SLA Web site uses three background images:
- the black starry background found on the home page
- the grayscale world map found on the second level menu pages
- the grayscale SLA logo found on all other pages
This tag:
<body background="/images/sla-bg.gif">
would produce the SLA logo background, and this tag:
<body bgcolor="#969OCC>
would create a silver background on a Web page.
For information on adding the world map or SLA logo background graphics to your page, refer to the Graphics section.
Main header
The main header is found at the top of your Web page. The main header usually consists of a graphic banner or logo, the title of the page, or both.
The title in the main header should be the same as the title in the header of your HTML document. This title should be tagged <h1> and centered on the page. Using the previous example of the Oklahoma Chapter's information page, the title or main header would be:
SLA Oklahoma Chapter Information
HTML:
<body background="/images/sla-bg.gif">
<center><h1>SLA Oklahoma Chapter Information</h1></center>
Body content
The content of your Web pages will be further discussed in Content on page 13. The following are some pointers on the layout and format of a Web page.
Heading
Headings can be useful for organizing or outlining a document. <h1> should only be used for the title of the Web page. Headings should be used in order. For example <h2> should identify major topics, <h3> should indicate sub-topics, use <h4> for the next level, etc.
Lists and Menus
Lists and menus can be used to call a user's attention to a series of items. HTML supports unordered, ordered, and definition lists. Some authors may choose to use graphic or colored bullets instead of those provided in HTML.
SLA uses globe-like graphics as bullets for its 2nd level menu pages and HTML lists for all other pages. For information on adding the globe-like graphics to your Web page, refer to the Graphics section.
Click here
Avoid using links that read "Click here" or "Return to". All links should be descriptive and fully explained. The text of your links should flow with the rest of the content and should be able to stand alone as a printable document. For example, instead of:
Click here for SLA membership information
with "click here" linking to SLA's membership page, use:
SLA membership information is available from the SLA membership page
"Return to" should not be used because the user may not have come from wherever you wish to return them to.
Although your Web site may flow with some particular order, you must keep in mind that users have not necessarily followed any sequence to arrive there, which is another reason why your text should be able to stand alone.
Structure
Because it is likely that more than one person will be maintaining your HTML
code over time, you should keep your Web page code neat and uncluttered. Use
comments, blank lines, and tabs to make your HTML code readable and easy to
maintain.
For more information on HTML coding and style, refer to the More Information/Resources section.
Footers
Footers, like background images, can be used to pull a site together. A standard footer helps the user easily identify your site. Footers may be comprised of any combination of the following: a menubar or some other navigational tool, author information, Web page update information, copyright, etc. All SLA Web page footers must contain copyright and Web page update information. For example:
Copyright © 2004 SLA. All
rights reserved.
This page was updated on January 18, 2004..
html:
<hr> <font size =-1>
Copyright ©, 2004<a href="http://www.sla.org">SLA</a>.
All rights reserved.<br>
<address>This page was updated on January 18, 2004.</address>
</font>
Testing
Test your Web pages with at least two graphical browsers, such as Netscape and Mosaic, and one text browser, such as Lynx. If possible, you should test your Web pages on different platforms (Mac, PC, Unix) too. Be sure to check all of the links in your document. You should also have someone else proofread and test your Web pages.
Web Site Style Guide Index
Feedback form
