Style Sheet for HTML


Template

The following tags in the given order must be present in an HTML document formatted in good "Style."

<html>
<head>
<title>
Put the Title Here. This will not be displayed on the page.
</title>
</head>
<body>
The Bulk of the document will go here.
</body>
</html>


The Main Tags

HTML instructions are called tags. Tags explain to a web browser such as Netscape some information about how the author would like to have the HTML document (which is a boring text document without font, size or other styles) presented to the public. Because various browsers interpret these things in various ways and users can configure them to operate in unexpected ways, authors cannot and so should not try to control exactly how their efforts look.

The following tags (in addition to the ones mentioned above) will allow you to create interesting and attractive pages. Learn them and while writing your pages remember to trust the browser! It will probably render your stuff reasonably, and if not you will find out soon enough. That's why we have "personal experiment" buttons on the experiment page.

For more esoteric effects, check out the other experiments. Any of those effects can be easily incorporated into your documents. Try to "cut and paste" the source and if you run into problems call Larry Susanka at 641-2484.

The following four tags occur alone.

<BR>
This generates a line break.
<P>
This starts a new paragraph.
<HR>
This puts a horizontal rule (a line) across the page.

<img alt="A Picture of a Cow" src="Cow.gif">
This will put on the screen of the graphics-able browser the picture, saved in the file Cow.gif in gif format. If you save it in jpg format the file should end in jpg. Other formats should be avoided, since many in your audience will be unable to view them without effort they may not know how to make. Gif format is best. The words "picture of a cow" will show up on a browser such as Lynx that cannot deal with graphics.

The rest are tags that occur in pairs, surrounding the text to which they apply.

<h1></h1>
This is the biggest header font. Usually it will be displayed as bold and big. You will usually put such text first in the body after the head of the document. There are six levels of header, to allow you to have chapters and sections and remarks. The other five are just like this one except for the number ... <h2></h2> and so on.
<b></b>
This puts the text in bold.

<i></i>
This puts the text in italic.

<a href="filename"> Button You Want People to Click </a>
Put the filename of the document in the obvious place and the text you want to appear as a button after it.

<a href="mailto:name@bcc.ctc.edu">name@bcc.ctc.edu</a>
This tells most browsers to send e-mail to the indicated e-ddress.

<a name ="TheSpot"> Text You Want To Be Able To Jump To ... </a>
This gives the name "TheSpot" to the text surrounded by the tag. You can jump to this place from somewhere else inside the same document using....

<a href="#TheSpot"> Button You Want People to Click </a>
Clicking on the words "Button You Want People to Click" will snap the browser to "TheSpot." Had "TheSpot" been on another document called "file" you would replace "#TheSpot" with "file#TheSpot."

<blockquote></blockquote>
This pair will indent a block of text.

<Pre></Pre>
Use this (which stands for ``preformatted'') to generate a browsed output in a fixed-width font. Multiple spaces, new lines, line breaks and tabs are displayed in the same locations as typed in the source. Don't use this unless you have a good reason.

<Center></Center>
This causes the text it surrounds to be centered.

Put the "b", "i", and "h" tags outside of the other tag pairs. Most browsers will interpret the output correctly if you don't but it is supposed to be poor form.

BAD <a href="filename"><b>Button</b> </a>
GOOD <b><a href="filename">Button</a></b>

Please note the following:

HTML tags are not case sensitive.

Any number of spaces, tabs or returns within the html document are compressed into a single space in the output. You must use HTML tags to get these effect in the browsed document.


Send email to Larry Susanka, the technical manager of this site, at ls@ls.ctc.edu.


(This page was last modified on 8/19/96.)
SciDiv Developmental Page HTML Technique CGI and the WebServers Net Services News