Ramsey LibraryGuidelines for Web AuthorsIntroductionThe Ramsey Library Web site:
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:
Submission of web pagesThere are 2 simple ways to get your work published to the Ramsey Web:
Submission of News blog entries
Format of submissionsThe 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:
The following formats are easy for the Web Team to work with:
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 pageA 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.
|
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... |
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> <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> |
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> <BODY> <H1></H1> <P></P> </BODY> |
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. |
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 | (Note: this tag does not have any brackets.) |
Fake a tab | (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> |
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> |
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. |
A numbered list is an "Ordered List", a list with bullets is an "Unordered List."
Numbered List: <OL> |
Bulleted list: <UL> |
Numbered List:
|
Bulleted list:
|
<BLOCKQUOTE>
Here is some indented text. This is a very handy tag.
</BLOCKQUOTE>
Here is some indented text. This is a very handy tag.
<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.
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>
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.
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.
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.
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.
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>
Updated 18 April 2007. Comments to the Library Web Team.