::
St. Norbert College
St. Norbert College
- ACADEMIC PROGRAMS | ALUMNI | FUTURE STUDENTS | PARENTS | VISITORS
(Students, faculty and staff) mySNC -
- -
-
-
-
- About SNC | A to Z Index | Directory -

QUICK LINKS:

HTML Codes

Note: These instructions pertain only to creating Faculty Professional Pages. All other SNC department/organization web sites are being maintained using Cascade Server, the College's content management system (CMS).

HTML Page Structure

Every HTML document has the following structure (these are the essential tags):

<HTML>
<HEAD>
<TITLE>
Title of page, i.e., the title of the window </TITLE>
</HEAD>

<BODY>

The body of the document goes here.
</BODY>

</HTML>

HTML Tips

  • You may type your HTML tags in either upper-case or lower-case.
  • The browser will automatically reformat your document to fit the screen. Extra spaces (more than one in a row) and blank lines that you put in the HTML document are ignored.
  • To see the HTML code of any web page in your web browser, from the View menu, select Page Source or Source.

HTML Codes

Bold text

<B> Bold-faced text here </B>

Break

The <BR> tag starts a new line without any extra blank space.

<BR>

Centered text

<P ALIGN="CENTER"> Text you want to center here </P>

Headings

HTML defines six heading levels: <H1> through <H6>, with <H1> being the largest and <H6> being the smallest. Headings usually display in bold, with blank space above and below them (you cannot remove this blank space).

<H1> Heading text here </H1>
<H2>
Heading text here </H2>
<H3>
Heading text here </H3>
<H4>
Heading text here </H4>
<H5>
Heading text here </H5>
<H6>
Heading text here </H6>

Examples:

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5
This is an H6
Heading (centered)

Centered headings are headings that are centered between the left and right margins on the page. Headings usually display in bold, with blank space above and below them (you cannot remove this blank space).

<H1 ALIGN="CENTER"> Heading text you want to center </H1>
<H2 ALIGN="CENTER">
Heading text you want to center </H2>
<H3 ALIGN="CENTER">
Heading text you want to center </H3>
<H4 ALIGN="CENTER">
Heading text you want to center </H4>
<H5 ALIGN="CENTER">
Heading text you want to center </H5>
<H6 ALIGN="CENTER">
Heading text you want to center </H6>

Examples:

This is a centered H1

This is a centered H2

This is a centered H3

This is a centered H4

This is a centered H5
This is a centered H6
Images

<IMG xsrc=" path & filename of image " WIDTH=" Number of pixels wide " HEIGHT=" Number of pixels high " ALT=" Very brief text description ">

Example:

<IMG xsrc="main.gif" WIDTH="183" HEIGHT="205" ALT="Main Hall at St. Norbert College">

See also Link (image) to another file.

Including other files

Include files are useful when you are developing a number of pages where some of the information (e.g., contact information) is identical on all the pages. With include files, you create a file for each piece of identical information and then include the file at the appropriate location.

To include a file in the same directory as the file in which it's being included:

<!--#include file=" filename "-->

To include a file in a different directory than the file in which it's being included:

<!--#include virtual=" path & filename "-->

Example: Including a standard footer on all pages.

<!--#include virtual="/template/official_footer_compserv.htm"-->

Italicized text

<I> Italicized text here </I>

Line, horizontal

<HR>

Link text to another file

<A xhref=" path & filename of the link document "> Text that will appear as linked on the screen </A>

Link to another location in the same file (internal name reference)

An internal name reference allows you to link from one location on a page to another location on the same page.

First, you must name the location to which you want to link (this does not appear on the screen):

<A NAME=" name of this location "></A>

Example:
<A NAME="bottom"></A>

To link to that location, you use a regular link, but with the name you gave it (above) rather than a filename, preceded by a pound sign (#).

<A xhref="# name of the location in the document "> Text that will appear as linked on the screen </A>

Example:
<A xhref="#bottom">bottom of the page</A>

Link an image to another file

<A xhref=" path & filename of the link document "><IMG xsrc=" path & filename of image " WIDTH=" Number of pixels wide " HEIGHT=" Number of pixels high " ALT=" Very brief text description "></A>

List, bulleted (not numbered)

<UL>
<LI>
First item in the list </LI>
<LI> Second item in the list </LI>
<LI> Continue typing items for the list, starting and ending each item with a pair of LI tags. </LI>
</UL>

Example:

  • First
  • Second
  • Third
List, numbered

<OL>
<LI>
First item in the list </LI>
<LI> Second item in the list </LI>
<LI> Continue typing items for the list, starting each item with a pair of LI tags. </LI>
</OL>

Example:

  1. One
  2. Two
  3. Three
New line

See Break.

Paragraph <P> Type your paragraph here. </P>
Pictures

See Images.

Tables

Tables provide an easy way to display information in columns. Each table contains three HTML tags:

<TABLE> Begins the table.

<TR> Begins a new row in the table.

<TD> Begins a new column in a row.

For example, use the following sequence to create a table with two rows and three columns:

<TABLE>
<TR>
<TD> Type your text, image commands, or link commands here. </TD>
<TD> Type your text, image commands, or link commands here. </TD>
<TD> Type your text, image commands, or link commands here. </TD>
</TR>
<TR>
<TD> Type your text, image commands, or link commands here. </TD>
<TD> Type your text, image commands, or link commands here. </TD>
<TD> Type your text, image commands, or link commands here. </TD>
</TR>
</TABLE>



Technology Support Services

Phone: (920) 403-4357
Fax: (920) 403-1341
E-mail: helpdesk@snc.edu


St. Norbert College • 100 Grant Street • De Pere, WI 54115-2099 • 920-337-3181