University of Minnesota Morris

 
 

 
 

   

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

Code Examples

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 Headers for categorized left navigational links. Proper formatting includes a bullet: • code: &bull; in front of the text
links Used for the categorized left navigational links. Link colors are determined by the unit's color scheme.
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

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


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


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

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.