W. Frank Steely Library

[Skip to Navigation]

Style Guide [part 3]

Editing the <head>

The <head> contains information necessary for proper indexing, accessing layout and styles, and alternate navigation. This section may look like a bunch of gibberish, but each item is there for a reason. Be reassured that only a few lines in the <head> need to be edited on each page. Before we start, there are two things we must understand: relative versus absolute URLs and the syntax of "commenting out" portions of the code.

Relative Versus Absolute URLs

A relative URL in a Web page gives directions to the page, anchor, image, etc., to which it refers. A relative URL describes a path in terms of "go up a level," "go into a folder named x," "find a file named x.html." This is how it looks:

go up a level, go into a folder named x, find a file named x.html:
../x/x.html
go up 3 levels, go into a folder named x, find a file named x.html:
../../../x/x.html
go up 2 levels, go into a folder named x, go into a folder inside x named y, find a file named z.html:
../../x/y/z.html

In order to make this work, you need to understand this Web site's directory structure. This can be seen with an FTP program or a Web browser (just look at the URL). If you need assistance determining a path, speak to the Web administrator.

There is another type of relative link to which you may have seen a reference. These begin with a slash (/) and identify the location of a page relative to the root of the Web site's directory. We used to have problems with this method prior to setting up a URL mask. Thich basically means when you type in www.nku.edu/~library/, you are redirected to library.nku.edu. For example, a relative URL to this page would look as follows:

Absolute URLs name a specific location of the Web. For our purposes, these will begin with http:// (http:// specifies "HyperText Transfer Protocol," https:// specifies "HyperText Transfer Protocol Secure," and there are others).

You will use both relative and absolute URLs according to these rules:

  1. When linking to a file outside the library's account, you must use an absolute URL.
  2. When linking to a file within the library's account, you must use a relative URL.

Making Comments

To make a link inactive, or to make a note in the HTML code, use comment markers. This is done by adding !-- -- inside a tag. The result looks like this:

XHTML requires two dashes at the beginning and two at the end. Any more or less will cause a validation error. This is a useful technique if you need to remove something from the page temporarily.

Refrain from making notes-to-self type comments in the code. We are trying to optimize bandwidth usage and, site wide, these notes can add up. Look to the structure of the document for clues as to where to edit. Because proper document structure is vitally important, you will need to be comfortable with it before editing any pages. Most of the notes in the Web site are in the databases pages and are saving rather complicated URLs so that they can be quickly activated if need be.

Editing the Title

<title>Your title here @ W. Frank Steely LIBRARY</title>

To change the title of the page, change the text in the <head> between the <title> and </title> tags. The only part that needs to be edited is highlighted in yellow above.

Editing the Relative Links

Which relative links need to be active depends on the page you have created. The Home link should always be pointed at Steely Library's home page but up, first, next, previous, and last may or may not be relevant.

To edit a relative link, copy the link you need from below and paste it into the head of your page. Supply a valid relative URL in the href=" " attribute. If the target file is in the same directory, the link will look like href="filename.html". If the target file is in a different directory, the link will look like href="../directoryname/filename.html". An active relative link will look like this:

<link rel="first" type="text/html" href="filename.html" />

These links are especially important for people using assistive technology but are becoming relevant for others with the development of site navigation toolbars in Mozilla, and Opera.

Editing <meta> Tags

<meta> tags provide information about the page. These identify the page author, keywords, etc. The following <meta> tags should be edited for each page:

What not to edit in the <head>

Be sure not to change any of the links to style sheets. Every page in the site needs to link to the same set. Also, the JavaScript file is necessary for the styles to hold constant from page to page. In the event that a new page is placed in a different location relative to the style sheets, the links will need to be updated. If the links need to be re-pointed, the Web administrator will probably say something is wrong. Due to the use of SSI, much of what you cannnot edit you will also not see. The only include you should edit is the timestamp when you create a new page. The script for the timestamp requires a relative link from the root to the page you have created.

[« previous] [next »]

updated: Saturday, 20-Aug-2005 17:21:07 EDT

This message is only visible to text browsers and non-standards compliant graphical browsers. If you are using a graphical browser, you may want to consider an upgrade. While layout and styles are hidden from non-standards compliant browsers, content is available to all. To learn why we do this, view our Accessibility Statement.