How to write HTML code for VOH

This is a very brief introduction to the HTML code for answers and announcements.

What is VOH

VOH (Virtual Office Hours) is a web based bulletin board developed at UCLA.

Students may submit questions, send messages to the instructor, view unanswered questions (submitted by other students), view answered questions, and view announcements from the instructor.
The instructor (with a password) can answer the student questions and post announcements to the class.

This is all preformed using forms and a web browser, so it is VERY easy. Just click on the blue text and type in the boxes. The details are all taken care of by the server.

If it is so easy, why do I need to know any HTML Code?

You don't have to use any HTML code if you just want to type in responses to questions. However, you can add HTML code to your response to help with formatting, and to add links to other sites on the www. For example, you can add bold to a response to emphasize a point. If you are answering a question about greenhouse gases you could make a "link" to another site on the web with data about global warming. This document describes how to add these effects.

What is an HTML Tag

HTML is a "markup" language that tells a browser what to do. These tags are placed within less than (<) and greater than (>) symbols. The browser looks for these symbols and uses them as instructions. Most tags include two parts. For example BOLD is displayed by a browser as BOLD. The first tag begins the bold and the tag with the slash [/] is the end of the bold.

How do you add HTML to an answer for VOH

HTML tags are entered directly into the answer submission form. Below is a VERY brief listing of basic HTML tags. To learn more find out How to Prepare HTML Documents.

Basics of HTML layout.

Several different codes are available to help with basic document layout. These include:

Breaks . This tag forces a carriage return in the browser. This is important for layout because browsers DO NOT pay attention to a regular line feed. Normally a browser will control the line wrap just like a word processor. The tag is equivalent to a line feed.
1. For example if the submission form looks like this:
 A set of lines in an HTML document
 that look like they are divided into three
 lines of text.
2. Will be displayed for students as:
 A set of lines in an HTML document that look like they are divided into three lines of text.
3. To avoid this the form should look like this:
 A set of lines in an HTML document 
 that look like they are divided into three 
 lines of text.
4. Will be displayed for students as:
 A set of lines in an HTML document
 that look like they are divided into three
 lines of text.
Paragraph . This tag is used to define a paragraph. Text within a paragraph is wrapped by the browser. The end of the paragraph is double spaced. Place a tag at the end of a paragraph like this. 
and the next line will show up like this.
Preformatted text <PRE></PRE>. Browsers normally display text using a proportional font (like the Times Roman Font this document is probably displayed in) where different letters get different spacing. This is usually easier to read, but sometimes it makes it very difficult to setup tables. This frequently causes problems for beginners. Remember browsers do not display multiple spaces, tabs or carriage returns.
```
 If you try to do this
in a form.
```
The browser will return.

If you try to do this in a form.
This may be avoided by using preformatted text.
```
<PRE> This forces the browser to use a typewriter font (like courier) 
that looks like this. Any carriage returns spacing like this
and


white space is preserved.</PRE>
```
This is an easy way to display tabular information.

Basics of text formatting

The following HTML codes control the appearance of text.

Function What to Type in the Form Displayed in the Question

Bold This is Bold This is Bold

Italic This is italic This is italic

Superscript This is superscript This is^superscript

Subscript This is subscript This is _subscript

Function	What to Type in the Form	Displayed in the Question
Bold	<B>This is Bold</B>	This is Bold
Italic	<I>This is italic</I>	This is italic
Superscript	This is <SUP>superscript</SUP>	This is^superscript
Subscript	This is <SUB>subscript</SUB>	This is _subscript

Links (or anchors).

Links are used to direct a browser to another location. Link elements include:

<A HREF="http://www.science.widener.edu/">Widener Science Division</A>

Anchor <A> and </A>. The beginning and end of the "anchor". An anchor connects this HTML document to something else.
Action. (HREF in the above example). Identifies a Hypertext REFerence (a link).
Protocol. (http:// in the above example) Tells the browser what type of link this is (HyperText Transfer Protocol).
The address. (www.science.widener.edu in the above example) This is the URL or web address. (These may be copied and pasted from the location bar in the browser.)
The description. (Widener Science Division in the above example) This text describes the link and is displayed by the browser.
To see how it works, here is the link just described written as HTML.

Widener Science Division
This document was prepared by:
Scott Van Bramer
Widener University
Department of Chemistry
Please send comments or suggestions to svanbram@science.widener.edu
Last Updated: Thursday, June 13, 1996 12:51:21 PM