Step 1

The content of library web pages


The content of library web pages

The library home page
What's new
Services
Collections
Databases
Contact information
Link to the home page of the parent organization

Links to other libraries:
Step 1

The library home page


The library home page

The library home page should contain name of the library, a logo or a scanned photograph, if such exists, and a list of library activities. It can also contain a short description of the library.

The activities can be presented either using "buttons" or as text links. Buttons are small images (often in gif format) and they act as links to subsequent web pages. It is recommended that if the library pages contain images, there should be a text version available for those who use slow telecommunication lines and/or older microcomputers.

The buttons or text links on the home page:

Note: Each library page should be dated and signed to show when the page has been created or updated and who is responsible for it.


Step 1

Examples of buttons


Examples of buttons

Here are some examples of navigational buttons in GIF format. To copy and save these files into local machine right-click images with mouse and select "Save Image As..." and select destination directory.

Empty template image can be used for creating new buttons. For example with Paint Shop Pro (by Jasc Inc.) adding text to button is very simple: Open the empty button image (empty.gif), select Text tool, click at image, select the font and color, type desired text, press OK and move the text at appropriate place. Save the new image with different name (Save As...).

Text in these example buttons is 12pt Arial Bold.

What's new
Services
Collections
Databases
Contact information
Home page
Links
Text-only version
Next
Previous
Empty template

Links: Buttons and icons:
Step 1

The content of the library web pages in detail


What's new

The latest library news is presented on this page. Each news item should be dated and the older ones should be removed as new items are added

Services

A short description of the services provided by the library may be given here. Information on user limitations should be included.

Buttons or text links on this page may be:

Borrowing instructions

This page contains information about who is allowed to borrow material, which material and on which terms. See e.g. http://www.oulu.fi/library/english/borrowin2.html

Renewal of loans

This page is needed if the renewal of loans may be done using a web interface to the library system. See e.g. http://www.oulu.fi/library/Welcome.html. Otherwise the renewal procedure can explained in Borrowing instructions

Interlibrary lending

Procedures for interlibrary lending are explained on this page. A web-based interlibrary loan request form (http://www.oulu.fi/library/english/$tilaus.htm) can be provided. If the service is fee-based, there should be a link to a price list (http://www.oulu.fi/library/english/$palveluh.html).

Information retrieval

If the library offers information retrieval services they should described here. The page can be simple as this (http://www.vtt.fi/inf/general/inforetr.htm) or more elaborate as this (http://www.class.org/~niperstr/). It is important to mention in which fields the services are provided, which resources are used and how the the services are priced.

Document delivery services

If the library provides a service to obtain materials such as books, journal articles, conference papers etc which are not available in the library, the service can be described here. The page can be as simple as this (http://www.vtt.fi/inf/general/docdel.htm) or more elaborate as this (http://www.ballarat.edu.au/is/ej/ill2.html). For online ordering, a document delivery order form (http://www.vtt.fi/inf/general/ddo_eng.htm) can be provided.

User education

It is an advantage to the librarians to have well trained users. The training provided by the library should be explained on this page. Here (http://www.lib.udel.edu/services/usered/usered.html) is one example of the user education provided and here (http://www1.arcade.uiowa.edu/user-ed/) is another one.

Service price list

On this page a price list of fee-based library services should be given. Here (http://www.oulu.fi/library/english/$palveluh.html) is one example of a library price list.

Collections

Library collections can be described by using either plain text or floor maps. An example of the former type can be found here (http://linnea.helsinki.fi/hyk/hul/kirjastoe/indexkie.html) and a clickable floor map type here (http://www.jyu.fi/library/kartat/). If there are reference databases online for the collections, there should a link in the text to the relevant database.

Databases

If the library allows users to access online databases via this web interface, the list of databases should be given on this page. The name of a database acts as a link to the database. A short description of the databases together with access rights should be provided. Here (http://otatrip.hut.fi/vtt/bases.html) is an example of such a list.

Contact information

This page could contain the following information: address information, opening hours, staff of the library and information about how to get to the library.

Address information

It is important to give both the mailing and the street address of the library together with telephone and fax numbers plus the email address. This information may also be presented on the home page. If the library has several service units with different addresses, the list of addresses may be rather long. In such a case, it is suggested that the address information is placed on a page of its own and a link to that page is placed here.

Opening hours

Brief information about the opening hours can be presented here. If there are different opening hours for different months of the year and/or for different service units of the library, a separate web page should be used, such as this (http://www.oulu.fi/library/english/opening.html).

Staff

This should be a link to the page listing the library staff, their job title, telephone numbers and email addresses. If the staff members have personal home pages, their names could act as links to the corresponding pages.

E-mail addresses of the staff can be linked using mailto in hypertext link (e.g. <A HREF="mailto:address@organisation>).

How to get to the library

To help new users find the library and its service units a separate page should be provided to give the instruction both for public transportation and for driving by car. A map showing the location of the library can also be provided. Here (http://www.nyam.org/info.html) is one example of such a page.


Step 2

The structure of web pages


Think about what you are going to publish

What kind of information are you going to publish on your web pages? (see page "Content of library web pages")

When knowing what, it's also easier to decide how.

Design the structure of the web pages

Divide the information you are about to publish into subdocuments (individual HTML-documents). Don't put too much text and images in one document. Reading on the screen is different from reading on paper. The less readers have to scroll documents on the screen, the better. Very large documents with sizable images are also slow to load.

Draw a chart of subdocuments and linking between them. Drawing a chart would help you to visualize the structure of your pages. Don't make the tree of documents too deep, because the readers usually read just the few top documents, unless they are really interested in the information you have to offer.

Chart of documents and linking


Picture 1. Example chart of documents and linking between them

Some readers may want to print your pages, but printing page by page is slow. You could provide a version for printing, i.e. one big file with all the documents, but without the fancy graphics.

Give a name to each document (file). The name of a document should describe the content of that document, like in the picture above. First document (i.e. home page) is usually named index.htm. When writing a document, remember to use a descriptive TITLE element at the beginning of the document. The chart you have drawn is your guide when writing documents, so use it.

Notice that there should always be a link from every subdocument to the index or home page in order to avoid the "lost in hyperspace" phenomenon. The reader of the document should always know where he or she currently is and where to go next. Don't create links just for the fun of linking, links should always point to a relevant document.

For a large collection of documents, create a table of contents (usually index.htm) with links to individual subdocuments. If the documents are meant to be read in some specific order, use links to "next" and "previous" documents.

Think about the directory structure

You could save your HTML files and images into one single directory on your WWW server, but if there are going to be lots of files, maintaining the files could become quite difficult.

Check out the structure you just have designed, and look if there are files that clearly belong together, such as images, forms and so on. For example, images to be used with a number of documents (library logos etc.) should be in one directory. This way it is easy to update the images, and you always know where to find them. Images belonging to only one document should be placed in the same directory as the document file itself.

Directory structure


Picture 2. Example of directory structure

When writing HTML documents and creating HTML links between them, it is essential to know where the target documents are located. In other words, you have to know the path to the document, i.e. the document URL (Uniform Resource Locator, e.g. http://www.vtt.fi/inf/).


Links: Design issues
Step 2

Graphical lay-out of web pages


Design the layout of your publication

Design the layout. Remember that HTML is not designed for defining the outlook of the documents. You can't have total control over how the pages will look on the reader's screen, the reader can change the font, text colors and window size.

Knowing the limitations of HTML, you can design a layout that will look fine when viewed with different browsers and by many different window or font sizes. Don't design for a specific browser, and be careful when using features that will need the use of non-standard, extended HTML tags. Design your documents so that they are easy to read and navigate. Again, drawing a chart of the layout helps.

The layout should be the same in every document, i.e. default buttons should always be in the same place, consistent use of headings, colors, background images, horizontal rules etc. You should also have a copyright notice and creation/modification date in every document.

Chart of layout


Picture 3. Example of layout design

Create a template file

Create a template file with all the default elements (and use it when writing documents).


Links: Style Guides Links: Browser Usage Statistics
Step 3

Select HTML tools and write HTML documents


Converters

If all or some of the documents you are going to publish on the web are already in electronic form, at probably in some word processor format, you could use a converter to create HTML files.

Shareware and freeware converters can be found on the Internet. Conversion is usually based on styles used in the word processor, so the quality of conversion depends on the consistent use of styles in the original document. You should notice that some information may be lost during conversion, e.g. multiple columns in original document cannot be translated into HTML. Tables and images are also sometimes difficult to some converters. In most cases, converted files need some manual editing.

Remember that the use of some converters, word processor add-ons, or WYSIWYG (What You See Is What You Get) editors for editing your existing HTML files may ruin your HTML code by adding extra tags without your control.

If you want to retain the exact layout of the original document, check out Adobe Acrobat, Common Ground and Tumbleweed Envoy 7.

HTML editors

HTML files can be written with any text editor, but HTML editors have powerful menus and buttons supporting HTML coding. As with converters, there are dozens of shareware and freeware HTML editors available on the Internet (see the links at the bottom of this page).

Using a HTML editor does not mean that you can forget learning HTML. Even when using a WYSIWYG drag-and-drop editor you should know what elements you can have in HTML document.

When choosing a HTML editor, think about at least...
  • price (commercial, shareware or freeware)
  • HTML features supported (e.g. tables, forms etc.)
  • file size the editor can handle (some editors have size limit of 32K)
  • does the editor support user defined document templates?
  • availability (e.g. download it from the Internet)
  • other tools (e.g. spell checker)
  • color coding of HTML tags in editor window, search & replace within multiple files etc.
  • does the editor support inserting extended and special characters (e.g. characters not included in English, like å, ä, ö, ð, æ, ø, etc.)


Links: HTML Tools - Converters and Editors
Step 3

Create images


Image tools

When inserting images into your documents, they should usually be in GIF (Graphic Interchange Format) or JPG (JPEG, Joint Photographic Experts Group) format (see also "Image, video and sound file formats"). If you have images in some other format, you need to convert the images into GIF or JPEG in order to be able to show them as inline images (i.e. an image that is shown on the browser window instead of showing it with an external viewer).

GIF images can have max. 256 colors (1-8 bit) and JPG's are 16,7 million color images (24 bit). In GIF images you can select one color to be transparent and a GIF can also be saved using the interlace method.

Again, all the software you need can be downloaded from the Internet, as shareware or freeware. Some of the shareware software is mainly for converting and saving files in different formats, but many have real image processing capabilities, so you can create images from the scratch without buying expensive software.

Always use the ALT tag and a relevant explanatory text in HTML code when inserting images to HTML documents. Many users with slow connection have the "Show Images" option set off.

Image maps

Image maps are ordinary GIFs, but associated with a map file, so that the image can have active hot spots, i.e. links to other documents.

Map file defines upper left corners and lower right corners of the active areas and target document URL for each of the active areas. Finding appropriate corners manually could be difficult, but fortunately there are many shareware image map editors. In shareware collections image map editors are usually in the same category with normal image editors.

The format of the map file depends on the server software, so you have to know what kind of server is in use at your site. You can also use client-side image maps, but not all browsers can understand them, so be careful.


Links: Image tools Links: Imagemaps
Step 4

Test your web pages


Use validation services

Use HTML validation tools or services for checking the HTML syntax on your documents.

Test pages using different browsers

Unfortunately there are lots of extensions to HTML made by different browser software companies. If you have used HTML tags that are not standard HTML, test your pages with as many browsers as possible.

Don't publish pages that are not tested or are not ready. Having "Under construction" icon in your page is no excuse for publishing unfinished work.


Links: HTML Validation Links: WWW Browsers
Step 4

Announce your pages


Announcing services, newsgroups and search engines

After you have designed, written and tested your documents and you think that they are ready to be published, you have to let the world know about your publication.

By submitting your site's URL to some announcement service, your site is added to many lists and search engine catalogs. You can also write an "advertisement" to newsgroups that are meant for announcing new sites and documents. Remember the netiquette when writing to the newsgroups.


Links: Announcement Services
Step 4

Maintain your web pages


Once more, maintain your web pages

If you don't maintain your documents, you will probably lose your readers. It's as simple as that.

Check that your links work, remove outdated information. Tools for maintaining links etc. can be found in many shareware collections.

Try to add something new to your documents every now and then.

Don't change the look of your site completely or the layout of your documents too often, the readers will get confused.


Links:
Back to Homepage

© 1997, VTT Information Service. Updated November 10, 1997. Teemu Rautanen