

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.
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.

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.












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
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:
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
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
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).
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.
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.
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.
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.
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.
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.
This page could contain the following information: address information, opening hours, staff of the library and information about how to get to the library.
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.
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).
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>).
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.

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.
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.

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.
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.

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/).

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.

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

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 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...
|
|

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 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.



