University of Minnesota Morris

• Web Templates
Campus Announcement Project Updates Announcements Glossary of Web Terms Frequently Asked Questions Training Sessions 14 Colors

• Sample Pages
Sample Discipline Page Sample Faculty/Staff Page Sample Individual Page Sample Color Banners

 
 

• Tools for Web Developers
(login required)
Template Guide Template Guide (print copy) Preparation Checklist What's my Unit's Color? Banner Request Form Download Template Packages Next Steps
Dreamweaver Steps Relative & Absolute links Server Side Includes Redirects HTML & Style Reference Web Design Guides

 
 

• Home Page Templates
(login required)
Unit Home Page Grid Template 0 Template 1 Template 2 Template 3 Template 4 Template 5 Template 6

• Secondary Template Pages
(login required)
Unit Secondary Grid Secondary Template 0 Secondary Template 1 Secondary Template 2 Secondary Template 3 Secondary Template 4 Secondary Template 5 Faculty/Staff Template Individual Template

• Contact Web Template Team
UMM's Web Administrator Feedback Form

   

Web Templates Home

 
UMM Home > Web Templates > HTML Reference

Printable Version

UMM Template HTML & Style Sheet Reference Guide

The following information contains references to style sheets and some code that are commonly used in the UMM Templates.

What are style sheets?

A style sheet contains definitions of how content should be displayed on a web page. You can reference a style sheet in your html code by using an attribute (ie id or class) within an html tag. For example:

<h1 class="headline">UMM Template HTML Reference Guide</h1>

Style Sheet References

Headline
Subheader
link_headings
links
linkslevel2
breadcrumbs
Imbedded links
bodyindent

Code Examples

Using alt tags for images
Breadcrumbs
Left Navigational Links
Left Navigational Links with Server Side Include (SSI)
Left navigational Links using the "linkslevel2" style.

Style Sheet Reference

Example

Style Reference

Description/Usage
Headline
 headline Used for Page Titles within the body of a page. For example, "UMM Template HTML Reference Guide" on this page. The color for the headline is determined by the unit's color scheme.
Subheader
 subheader Used to title sections, for example, paragraphs, lists of links, charts/graphs, etc.
Link Headings
 link_headings Headers for categorized left navigational links. Proper formatting includes a bullet: • code: &bull; in front of the text
Left Navigational Links
links Used for the categorized left navigational links. Link colors are determined by the unit's color scheme.
Left Navigational Links
Left Nav Level 2 Links
linkslevel2 Used for secondary level categorized left navigational links (creates a small indentation). Link colors are determined by the unit's color scheme.

Note: Must be inside of a links reference:
<div class="links">
<div class="linkslevel2">
<your link here>
</div>
</div>



Breadcrumbs
 crumbs Used for breadcrumbs below the unit banner, allowing the visitor to follow links back up the site hierarchy. Breadcrumb links are based on the unit's color scheme.
Any Link no reference required Any anchor tag "<a" will inherit the units color scheme and font size. Rollovers include underlining the link, and a maroon color change.
Text in the main section.
Some indented text.
Some more text.
Even more text.
bodyindent Used to indent text or links in the body of the web page. You can use a "bodyindent" inside of another "bodyindent", it will continue to indent the text.

HTML Code Examples

Using alt tags for images
Breadcrumbs
Left Navigational Links
Left Navigational Links with Server Side Include (SSI)

Using alt tags for images

The following is an example of using alt with images:

Web View

This is your alt text

If your image is broken or the user has images disabled they will see this:

This is your alt text

HTML Code View

<img src="webTemplate_secondary.jpg" width="200" height="25" alt="This is your alt text">

Breadcrumbs

The following is an example of what the breadcrumbs should look like:

Web View

UMM Home > Web Templates > HTML Reference

HTML Code View

<span class="crumbs">

<a href="http://www.morris.umn.edu">UMM Home</a> &gt;
<a href="index.html">Web Templates</a> &gt;
HTML Reference

</span>

Left Navigational Links

The following is an example of what the left navigational links could look like:

Web View


• Link Header
Template 0
Template 1
Template 2
Template 3
Template 4
Template 5
Template 6

HTML Code View


<p>

<div class="link_headings"> &bull; Link Header </div>
<div class="links">
<a href="resources/template0.html">Template 0</a><br>
<a href="resources/template1.html">Template 1</a><br>
<a href="resources/template2.html">Template 2</a><br>
<a href="resources/template3.html">Template 3</a><br>
<a href="resources/template4.html">Template 4</a><br>
<a href="resources/template5.html">Template 5</a><br>
<a href="resources/template6.html">Template 6</a><br>
</div>
</p>

Left Navigational Links with Server Side Includes

The following is an example of what the left navigational links could look like with a Server Side Include:

Web View


• Link Header
Template 0
Template 1
Template 2
Template 3
Template 4
Template 5
Template 6

HTML Code View


Here is some possible code for the include:

<!--#include virtual="filename.shtml"-->

Where the "filename.shtml" file contains the following code:

<p>

<div class="link_headings"> &bull; Link Header </div>
<div class="links">
<a href="resources/template0.html">Template 0</a><br>
<a href="resources/template1.html">Template 1</a><br>
<a href="resources/template2.html">Template 2</a><br>
<a href="resources/template3.html">Template 3</a><br>
<a href="resources/template4.html">Template 4</a><br>
<a href="resources/template5.html">Template 5</a><br>
<a href="resources/template6.html">Template 6</a><br>
</div>
</p>

Left Navigational Links using the "linkslevel2" style

Web View

• Link Header
Template 0
Template 1
Template 2
Link1
Link2
Link3
Template 3
Template 4
Template 5
Template 6

HTML Code View

<p>

<div class="link_headings"> &bull; Link Header </div>
<div class="links">
<a href="resources/template0.html">Template 0</a><br>
<a href="resources/template1.html">Template 1</a><br>
<a href="resources/template2.html">Template 2</a><br>
<div class="linkslevel2">
<a href="">Link1</a><br>
<a href="">Link2</a><br>
<a href="">Link3</a>
</div>
<a href="resources/template3.html">Template 3</a><br>
<a href="resources/template4.html">Template 4</a><br>
<a href="resources/template5.html">Template 5</a><br>
<a href="resources/template6.html">Template 6</a><br>
</div>
</p>

To request a specific code example contact the Web Administrator.
  ©2008 Regents of the University of Minnesota. All Rights Reserved
The University of Minnesota is an equal opportunity educator and employer 		  Trouble seeing text? | UMM Web Administrator | Privacy
Last Modified: Monday November 14, 2005