Ramsey Library

Guidelines for Web Authors

Introduction

The Ramsey Library Web site:

  • Provides content that supports the learning, teaching, service and informational needs of the UNC Asheville community.
  • Serves as a gateway to the WNCLN library catalog and electronic subscription and appropriate free web content.
  • Extends our reference and instructional services beyond the library walls.
  • Promotes effective use of library services and resources
  • Provides general information about the library staff, collections, resources, services, policies and events
  • Celebrates scholarship, creative activity and the liberal arts.

The value and success of our web site depends on contributions from every administrative unit of the library.

Our Web pages represent Ramsey Library to the world. Creating a page is an ongoing commitment to keep it updated. Broken links send a message that we do not care about our work. If you create a Web page, it is your responsibility to maintain it!

The Ramsey Library Web team may review new and proposed Web pages to ensure that they really do extend and promote Ramsey Library services, harmonize in style with existing pages, and meet current usability standards.

Ramsey Library web pages should:

  • be well-crafted, professional, and credible (i.e. links should be fuctional, content should be current, author should be identifiable, and navigation should be clear).
  • display properly on the most commonly used browsers
  • contain only content that the University owns or is legally entitled to use.
     

Submission of web pages

There are 2 simple ways to get your work published to the Ramsey Web:

  1. Put plain text revisions or new or revised html pages and associated images in Bullpup's Common directory (in a folder containing all associated files) and notify the Web Services Librarian, who will move them into the Ramsey Library web.

  2. Make some other arrangement with the Web Services Librarians, such as making them available via FTP, sending them to the Web Services Librarian as an e-mail attachment, putting them in your public_html directory on bulldog, or put them on a disk.

Submission of News blog entries

  1. Email text and images (or links to them) to the Web Services Librarian, along with the categor(ies) you’d like to entry to fall under. You may also indicate whether you’d like your post to contain a simple link to the catalog entry or a link to the book cover.
  2. Get a password from the Web Services Librarian to create blog entries directly. When posting to the blog, please copy your post to the Ramsey librarians.

Format of submissions

The Ramsey Library Web uses a basic stylesheet to format text and headings. There are no font tags in most of our documents. It is good to use heading tags (<h2> </h2> and so on), but other formatting should usually be removed and replaced with a link to the stylesheet because it reduces file size and makes it easy to create a common look and feel. Most of our pages use the same color scheme, but it is sometimes varied to carry out an idea for a certain page.

While creativity is encouraged, this is an organizational web page, so please avoid:

  • Design elements not in keeping with the site's overall style
  • Frames
  • Gratuitous, high-resolution or very large graphics (they can be cropped, compressed, or reduced in color-depth).
  • Non-standard logos for the library or UNCA

The following formats are easy for the Web Team to work with:

  • Plain text
    Just leave space between your headings.

  • Word or WordPerfect document
    Conversion sometimes does not go well, so submit the original as well as any HTML conversion, so we can see what it looked like "before." Word does not do nested tables. Remember to use [shift]-[enter] instead of [enter] when you want a line break and not a paragraph break in the converted HTML file.

  • HTML
    Information on creating a simple Web page follows.

    Remember:
    Headers, footers, margins, and styles can, and should, be added later.
    Give your page a title.
    You may want to include your name/e-mail address at the bottom of the page.
    Include the date you created your page at the bottom of the page.
    Create your own external links to other Web sites. The Web team will show you how.
    Keep it simple to ensure cross-browser compatibility.

The hybrid HTML/XML that Word 2000 creates enables precise placement of page elements and font specifications, so that your pages will look almost exactly the way they do in Word. However, the Web is a visual medium. Documents that look good in print are unlikely to look great on the Web. Results may be more pleasing if a page is conceived as a visual HTML document from the beginning. The proper use of "real" XML is in content manipulation, not formatting. XML is not necessary in plain vanilla HTML documents. XML stylesheets, in "XSL," will become more useful over time. The stylesheets that Word makes are usable in new browsers, though they look very overdone and take up much space.

XML brings data processing to the Web, and will eventually replace HTML for certain types of pages. What you get today, with Word 2000, is a Word document that has been plopped onto the Web. For now, please try to avoid "Plop Art."

If you are using Word 2000 at home and create Web pages in it, there is a plug-in "filter" for Word that will enable you to create "compact" HTML documents. They are not so compact, since they preserve the large stylesheet that Word creates, though they do remove the Word document "roundtripping" information. You can download the filter from the Microsoft Office update site. Ask the Web Services Librarian if you have problems. Files created with straight HTML are about one-fourth the size of files saved as HTML with Word 2000. The compact HTML option reduces the file to about half its original size.

Creating a simple Web page

A Web page is a plain text file that contains HTML (Hypertext Markup Language) tags. HTML tags are in brackets to distinguish them from actual page content, and they exist to tell Web browsers about the structure of the page. That is, "Yo! this text is a major heading," or "Hey, this text is normal text in a paragraph." HTML was never meant to be a heavy-duty formatting language and lacks many of the features of word processing programs. However, you can make attractive Web pages with amazingly few HTML tags.

Other names for plain text files

Text files are sometimes called ASCII files or DOS text files. If you create Web pages in a word processing program, make sure you save them as HTML or plain text files. Even fancy HTML editors that display pages as you work on them save the actual files in text format.


Programs you can use to create or edit Web pages

Plain text editors:

Word Processors: HTML Editors:
Pico
DOS Edit
Notepad
WordPad
Word
WordPerfect
ClarisWorks
FrontPage Express (freeware)
Netscape Communicator (freeware)
MS FrontPage98 (WYSIWYG)
HotDog (shareware)
DreamWeaver (WYSIWYG)
Arachnophilia (careware), and so on...


Required HTML Tags

While it is possible to view an ASCII text file in a Web browser, it will look very plain indeed. To format a text file as HTML, you need a few basic HTML tags.

A very simple Web page (left) with comments (right):

<HTML>

<HEAD>
<TITLE>My Page</TITLE>
</HEAD>

<BODY>

<H1>Main Heading in Largest Font</H1>

<P>A paragraph of some text. Blah, blah, blah. The lines will wrap automatically.</P>

<H2>Sub-Heading in Large Font</H2>

<P>Another paragraph of text. Has something to do with the subheading.</P>

</BODY>
</HTML>

Tags are not case sensitive. Most tags are used in pairs; the closing tag has a "/" (forward slash), as in <b>some bold text</b>.
<HTML>

<HEAD>
<TITLE>

<BODY>

<H1></H1>

<P></P>

</BODY>
</HTML>

Marks beginning of HTML document.
Contains info about the page.
Title of the page.

Marks beginning of content.

Heading tags range from the biggest H1 to the smallest, H6.

Paragraph "container." You can use a <P> tag without a </P> tag.

Marks end of content.
Marks end of HTML document.


Differences between HTML and word processing

Spaces

Web browsers do not display (or "render") more than one space between words. They do not recognize tabs. You can include as much white space as you like in a Web page. It has no effect whatsoever on the way the page looks in a browser. Include white space to make your page easy to read.

To put space where you want it (left), use these HTML tags (right):

Space between words &nbsp; (Note: this tag does not have any brackets.)

Fake a tab &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (5 spaces or as many as you want.)

Line break <BR>

Paragraph break <P> (Paragraph breaks do not have to be in pairs. However, it's a good habit to use the <P> tag as a container because it allows you to use stylesheets (an advanced technique) with your Web pages.)

Multiple line breaks <BR><BR> (Use as many as you want. Browsers do not render multiple <P> paragraph breaks, so you can't use <P><P> to put lots of white space in a page

Exact formatting
<PRE>A Poem
     Could have unique
           spacing requirements
         like this!</PRE>


Fancy Formatting

Whenever you use several tags to format text, be sure to "nest" them properly, as shown.

Centering <CENTER><H2>A Centered Heading Two</H2></Center>
Don't do this:
<CENTER><H2>A Centered Heading Two</CENTER></H2>

Italics
<I>Some italicized text.</I>
<EM>Some more italicized text using a different tag.</EM>

Italics are hard to read, so our stylesheet makes them normal text but a different color.

Bold <B>Some Bold Text</B>

Bold Italics <I><B>Some Bold, Italicized Text</B></I>


Tables

To make text or graphics line up, use a table. Tables are very versatile and can be used to achieve a lot of control over how a page looks. You can have nested tables, or tables within tables, but don't get carried away. Most word processors cannot handle nested tables.

<TABLE>
<TR>
<TD>First table cell<BR>First Row</TD>
<TD>Second table cell<BR>First Row</TD>
<TD>Third table cell<BR>First Row</TD>
</TR>

<TR>
<TD COLSPAN="3">First table cell, Second Row. This cell spans the entire width of the table, 3 columns.</TD>
</TR>
</TABLE>

This code produces the following table:

First table cell
First Row
Second table cell,
First Row
Third table cell,
First Row
First table cell, Second Row. This cell spans the entire width of the table, 3 columns.


Lists

A numbered list is an "Ordered List", a list with bullets is an "Unordered List."

Numbered List:

<OL>
<LI>First list item</LI>
<LI>Second list item</LI>
<LI>Third list item</LI>
</OL>

Bulleted list:

<UL>
<LI>First list item</LI>
<LI>Second list item</LI>
<LI>Third list item</LI>
<UL>

Numbered List:
  1. First list item
  2. Second list item
  3. Third list item
Bulleted list:
  • First list item
  • Second list item
  • Third list item


Indented Text

<BLOCKQUOTE>
Here is some indented text. This is a very handy tag.
</BLOCKQUOTE>

Here is some indented text. This is a very handy tag.


Graphic Lines

<HR> Default line with shading. Default width is 100% of the window.


<HR size="1" noshade color="black"> Skinny black line with no shading. Netscape ignores the color attribute, but you'll notice it in Internet Explorer. This is the style line we use on most of the Ramsey Library pages:


<HR size="5" width="200" color="red" noshade> Thick red line, 200 pixels wide. In Internet Explorer the line will be red. Netscape ignores the color attribute for horizontal lines.



Graphics

Types

Use .gif files for most graphics. Use .jpg (JPEG format) files for photographs or graphics with many subtle gradations of color. GIFs may have a transparent color, but regular JPEG files cannot. With both formats, it is often possible to reduce file size of an original graphic. If your graphics are large (40 kb is large for a Web graphic), they may be edited to reduce file size. Editing includes cropping, scaling, reducing color depth, compression, etc. If this cannot be done in such a way that acceptable quality is retained, a thumbnail may be created with a link to the larger graphic. Usually, we just make them smaller.

To prevent dithering of your graphics and to ensure that they display the same to most users it is advisable to create them using the standard 216 "browser-safe" palette. See http://lynda.com for good advice and take a look at the palette at http://www.visibone.com/. Generally, you can use any color expressed in hexadecimal notation by combinations of:   00 33 66 99 CC FF. The HEX and RGB equivalents are shown below:

HEX: RGB: Saturation Examples
00 0 No Color #000000
= Black
33 51 Mixed with black #330000
= Very Dark Red
66 102 Dark shade #660000 = Dark Red
99 153 Medium #990000 = Med. Red
CC 204 Slightly toned #CC0000 = Lt. Red
FF 255 Intense Color #FF0000 = Red
FF 255 White #FFFFFF = White


All 216 browser-safe colors are combinations of 33, 66, 99, CC, FF. If you see a notation like this: #B343BC, it's not a browser-safe color. Often, a similar color can be found in the safe palette, such as #CC33CC.

#B343BC
This color in this square will dither on monitors using 8-bit color depth (256 colors). That is, it may have little dots all over it.

#CC33CC
This color will look similar on monitors using 8-bit color depth (256 colors) to 24-bit (true-color). Some new monitors display 32-bit color, but it's not wise to design for such a limited audience.

<IMG SRC="filename.gif"> Insert a .gif file format picture

<IMG SRC="filename.jpg"> Insert a .jpg file format picture, usually a photograph

You can get very precise with picture placement. The following HTML tag specifies the size of the graphic, places it to the left of wrapping text, and leaves 10 pixels of white space on either side of the graphic.

<IMG SRC="filename.gif" width="50" height="75" align="left" hspace="10">

To make this same image into a link to a web page, add a little more HTML:

<A HREF="http://www.anywhere.edu/"><img src="filename.gif" width="50" height="75" align="left" hspace="10">Link to Anywhere University</A>


Background Colors

If you forget to specify a background color, your page could display in an UGLY shade of medium gray, or the user's default window color. Always use a bgcolor tag. To give your page a white background make your opening body tag look like this: <BODY bgcolor="#FFFFFF">

Most of Ramsey Library's Web pages use a white background and black text. High contrast between background and text ensures readability.


Links to other Web pages

Link to another Web page by using an anchor tag for an HTML page. Yes, there are other kinds of anchors, but <a href="[URL]">optional display text</a> is for HTML references.

Examples

Link to a file in the same directory: <A HREF="assignments.html">Assignments</A>

Link to a file in a directory one level up: <A HREF="../images/another.html">Another file</A>

Link to a file two directories up: <A HREF="../../exhibits/picasso/blue.html">Blue</A>

Link to a file one directory down: <A HREF="extracred/challenge.html">Challenge 1</A>

Link to a file two directories down: <A HREF="extracred/bryan/challenge.html">Bry's Challenge</A>

Link to an external (i.e., not in the same web) file: <A HREF="http://www.myuniversity.edu/~myaccountname/mypage.html">My Home Page</A>

The first set of brackets contains the address of the Web page link.  The text between the URL and the closing anchor tag </a>, "My Home Page," displays underlined.

Links to bookmarks (internal links)

Bookmarks require two anchor tags. Since the bookmark, or internal link, does not exist as a separate web page, you must identify the bookmarked spot with an anchor tag and give the bookmark a name. Then you can target (link to) the named bookmark from within the same page or from any other Web page.

Examples

Create a bookmark named "top" in any web page:

Type <a name="top"></a> at the spot where you want the bookmark.

Link to the bookmark named "top" on the current web page:

<a href="#top">Top of document</a> 

The pound sign "#" always refers to a bookmark within a web page.

Link to the bookmark named "wam" on the Electronic Resources page in the same web:

<a href="../eres/Default.htm#wam">About off-campus access</a>

Link to a bookmark in a page on another Web site:

<a href="http://lib.anotheruniv.edu/lit/mla.html#citing">Citing MLA</a>


Top of document

Ramsey Library
UNCA

Updated 18 April 2007. Comments to the Library Web Team.