Skip to content
Colorado State University College of Veterinary Medicine and Biomedical Sciences College of Veterinary Medicine and Biomedical Sciences
Webmaster Committee
  CSU Home    Search CSU    CVMBS Home    Site Index    Students    WebCT  

C V M B S   W e b   S i t e   S t y l e   G u i d e

HTML/CSS Coding

This is an alphabetized listing of HTML tags and vocabulary unique to our design.

Block-level elements
Block-level elements are elements that are treated as discrete blocks of text, usually preceded by a blank line. These elements include paragraphs, lists, headings and blockquotes.

Due to a bug in how Netscape applies CSS code, you should avoid nesting one block-level element inside of another. This will cause Netscape to ignore the CSS font instructions starting at the next block-level element.

An example of this can be found in this document under Lists.

Body tag
The BODY tag should not contain any attributes because attributes such as link color is defined in the Style Sheet.

<BODY>

Bottom links
Links at the bottom of the page may be added if needed using the following code.

<p class="links" align="center"> ... </p>
Links are to be separated by space-pipe-space " | ".

Centering
If you are centering text do not use the center element since it is not part of the HTML standard anymore.

If you are centering a single paragraph use the align attribute on the paragraph element.

Correct: <p align="center">text</p>
Incorrect: <center>text</center>

If you have multiple paragraphs to center use the align attribute on the div element.

<div align="center">
<p>text</p>
<p>text</p>
<p>text</p>
</div>

Code Nesting
Embed codes in the proper order. First in, last out.

Incorrect: <p><strong>text</p></strong>  
Correct: <p><strong>text<strong></p>   

Comments
HTML comments are used when annotating code or when you wish to temporarily not display a portion of your document. Commented areas can still be seen by users by accessing view|source from their browser.

Comments are to be properly indicated by the following code:

<!- -
Commented text and/or code
- ->

Note: There should not be any spaces between the two dashes. (They are there for display purposes in this document only.) Also, there should not be more than two dashes starting or ending the commented area.

Contact Information:

Only one contact e-mail address should be listed at the bottom of a page. This should be the e-mail address of the person ultimately responsible for the content of the document, not the coding of the document.

Date Stamp

Set Date and Time Stamp Javascript variable in the HEAD tags. Copy and paste the following code between the HEAD tags.

<!-- Date Stamp -->
<script language="JavaScript">
<!-- Set variables for date stamp and hide javascript.
function showDate() {
var mdate = new Date(document.lastModified);
var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
var year = mdate.getYear();
if(year < 1000) year += 1900;
return (months [mdate.getMonth()] + " " + mdate.getDate() + ", " +
year);
}
// -->
</SCRIPT>

NOTE: In your final code there should not be spaces between the two hyphens at the beginning of the "time stamp . . ." line. Those spaces are there in this document for readability purposes only. If those spaces are left in your code, it will not work.

Equal-signs in attributes
If an attribute has an equal-sign (=), the value to the right must be enclosed in quotation marks.

Filenames
Filenames should be chosen based on the following points:

  • Descriptive of the file's contents.
  • Shorter is better than longer.
  • Filenames are case sensitive.

Heading
First heading only:

<h1>Heading</h1>

HR width at bottom:

<hr width="25%">

Hyperlinks
Create all hyperlinks as relative links rather than absolute links.

Correct: <a href="/images/csu_logo.gif">
Incorrect: <a href="http://www.cvmbs.colostate.edu/images/csu_logo.gif">

If the URL for a CVMBS page ends in index.html or index.htm do not include the filename.

Correct: <a href="http://www.cvmbs.colostate.edu/anatomy/">
Incorrect: <a href="http://www.cvmbs.colostate.edu/anatomy/index.html">

Test all URLs to an outside (non-CVMBS) pages before linking to them. Use the URL given by the site. This may not be the URL you end up at once the page is displayed.

If you are linking to a frames-based document. Link to the main URL. Do not link to an internal page that displays the other site without its frames.

If a URL ends with the domain name or a directory name, include a trailing forward slash (/).

Incorrect: http://www.microsoft.com or  http://www.cvmbs.colostate.edu/anatomy
Correct: http://www.microsoft.com/ or  http://www.cvmbs.colostate.edu/anatomy/

Internal hyperlinks must be around something.

<a name="junk"></a> is not valid.
<a name="junk">This is junk</a> is valid coding.

Lists
All list items must be started and ended properly.

<li> ... </li>

A problem has appeared with the font changing to a serif font in the first paragraph after a list. To prevent this from happening do not embed a list within a paragraph.

Incorrect:

<p>text
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<ul>
text</p>


Correct:

<p>text</p>
<ul>
<li>text</li>
<li>text</li>
<li>text</li>
<ul>
<p>text</p>
 

To double-space a list (done on lists containing multi-line items) use the following code:

<li><p>
text
</p></li>

See Page Design: Lists for when to use this.

metadata
Include the following in the metadata for each page after the line containing the page's <title>.

<meta name="description" content ="Text describing the content of the page.">
<meta name="keywords" content="College of Veterinary Medicine and Biomedical Sciences, CVMBS, include additional keywords as needed">
<meta name="author" content="names of all persons who have worked on the document">

Minor pages
Minor pages are all pages without the menu down the left side of the page. These pages generally consist of one table of content with links at the bottom of the page to return to departmental, unit or main pages. Additional tables may be added as necessary.

Page Footers
Please note there is different code to copy and paste for the top level vs. minor template pages. Both include the email contact, optional copyright, required updated date, and optional Web Access Symbol icon. The top level pages also include links to the Equal Opportunity Statement, Disclaimer, and Admissions. For specifics, please see Getting Started.

Paragraphs
All paragraphs must be started and ended properly.

<p> ... </p>

<title></title> Coding
All <title> tags should start with "CVMBS - ", then include descriptive text about the page. End with "Colorado State University" spelled out, per the CSU Web Site Requirements, Guidelines, and User Responsibilities at http://graphicstandards.colostate.edu/index.asp?page=web_standards_guidelines

<title>CVMBS - Descriptive Text - Colorado State University</title>

Table nesting
Nested tables should be avoided at all costs due to Netscape's poor handling of CSS and tables. If you have a nested table you must take the time to redesign the nested table to be an integrated part of the main table.

Note: This is very tedious the first few times. Use pencil and paper to sketch out what you want the final layout to be before attempting to code it.

Top level pages
Top level pages are pages with the left-hand navigation menu area down the left side of the page.

Main | Content | Graphics | CVMBS Web Logos | Page Design | Color Palette

For feedback regarding this site, contact Jill Lenz at jill.lenz@colostate.edu.
© Copyright 2001-2004 College of Veterinary Medicine & Biomedical Sciences
Colorado State University

Web Access Symbol (for people with disabilities)