CS150: Schemer's Guide to HTML

ing in the pages you generate that is not described in this document, you can look at the source code for a page that does it and figure out how.

Let's make a quick page to illustrate this:

<html> <head> <title>The Meaning of Truth</title> </head> <body> <p> I have discovered the <b>meaning of truth!</b> </p> <center> <p> (lambda (x y) x) </p> </center> </body> </html>

See truth.html to see how the page displays in your browser.

Note that each element has an open (e.g., <center>) and matching close (e.g., </center>). As is clear from the recursive grammar, elements can be nested inside each other. The text element, (lambda (x y) x) is inside the paragraph element, which is inside the center element, which is inside the body element which is inside the html document.

Table of Elements

To make more interesting (but not necessarily more truthful) web pages, here are some more elements you may find useful:

Production	Description	Example	Appearance
Element ::= <em>Element</em>	Emphasized text (italics)	`<em>Scheme Rules!</em>`	Scheme Rules!
Element ::= <tt>Element</tt>	Typewriter font	`<tt>Hello</tt>`	`Hello`
Element ::= <font size="Value">Element</font>	Larger (use Value +1, +2, +3) or Smaller (use Value -1, -2) font	`<font size=+2>hello</font>`	hello
Element ::= <font face="Name">Element</font>	Select typeface for Element	`<font face="tahoma"> (+ 3 4)</font>`	`(+ 3 4)`
Element ::= <font color="Color">Element</font>	Select color for Element. Color choices include black, white, red, yellow, blue, gray, green and purple	`<font color="red"> Halt!</font>`	`Halt!`
Element ::= <br>	Line break (note there is no closing `</br>`	`Go<br>Cavs!</em>`	Go Cavs!
Element ::= <a href="URL">Element</a>	Make the inner element link to URL (web address)	`<a href="http://www.virginia.edu">My University</a>`	My University
Element ::= <img src="URL" width="Number" height="Number" " border="Number" alt="Text" >	Display a the picture in URL	`<img src="uva-logo.gif" width="57" height="56" border="0" alt="UVA">`

As should be clear from the grammar productions, all of these elements can be nested also. For example,

<a href="http://www.cs.virginia.edu/cs200/problem-sets/ps3/">
<img src="http://www.cs.virginia.edu/cs200/cs200-tree.png" width=235
height=207 border=2 alt="Lambda Tree"></a>
<br>
<font face="arial"><font color="purple"><font size="+2"><b>Lambda Tree of Power and Knowledge</b></font></font></font>
</center>

displays a centered image that is a link:

Lambda Tree of Power and Knowledge

Tables

Tables are a very useful tool in html. You can use them to arrange pictures and text across a page.

Element ::= Table
Table ::= <table TableOptions> TableRows </table

TableOptions ::= TableOption TableOptions
TableOptions ::=
TableOption ::= border="Number"
                            Width of the lines around the table (0 for no lines)
TableOption ::= cellspacing="Number"
                            Amount of space between each cell (pixels)
TableOption ::= cellpadding="Number"
                            Amount of space around the element in a cell (pixels)
TableOption ::= bgcolor="Color"
                            Background color of the table

TableRow ::= <tr RowOptions> TableColumns </tr>
RowOptions ::= RowOption RowOptions
RowOptions ::=
RowOption ::= valign=" VerticalAlignment"
                            Line up rows along top, middle or bottom.

TableColumns ::= TableColumn TableColumns
TableColumns ::=
TableColumn ::= <td ColumnOptions> Elements </td>
ColumnOptions ::= ColumnOption ColumnOptions
ColumnOptions ::=
ColumnOption ::= align="HorizontalAlignment"
                            Align the elements in the column left, right or center.
ColumnOption ::= bgcolor="Color"
                            Set the background color of the column.
ColumnOption ::= width="Number"
                            Specify the width of the column.

The important thing to note about a table is the columns contain Elements. So, we can put any element we want inside a table column (including, of course, another table).

Here's a simple example:

<table border="1"> <tr><td>A</td><td>C</td></tr> <tr><td>B</td><td>D</td></tr> </table> produces

A C

B D

Here's a more complicated table using some of the options:

A	C
B	D

Tabla

Rosa

1	2
3	4

This was produced by:

<p>
<center>
<table cellspacing="10" cellpadding="5" bgcolor="gray">
<tr valign="middle">
<td bgcolor="orange" width="200" align="center">
    <table border="1">
    <tr><td>A</td><td>C</td></tr>
    <tr><td>B</td><td>D</td></tr>
 	</table>
</td>
<td bgcolor="blue" width="200" align="center">
<font color="orange"><b>Tabla</b></font>
</td>
</tr>

<tr valign="middle">
<td bgcolor="blue" align="center">
<font color="orange"><b>Rosa</b></font>
</td>
<td bgcolor="orange" align="center">
    <table border="1" bgcolor="red")
    <tr><td>1</td><td>2</td></tr>
    <tr><td>3</td><td>4</td></tr>
 	</table>
</td>
</tr>
</table>
</center>
</p>

Note how the simple table is an element one of the columns of the complicated table.

Forms

To get interesting input from visitors, you need most than just links to click on. You've input your address, username, credit card, or a message onto a web page hundreds of time. Each time you do this, you're using an HTML form:

Element ::= <form method="post" action="URL"> FormElements </form>

FormElements ::= FormElement FormElements
FormElements ::=
FormElement ::= <textarea TextOptions>Element</textarea>
FormElement ::= <input InputOptions>

FormElement ::= <select>Selections</select>
Selections ::= Selection Selections
Selections ::=
Selection ::= <option value="Name">Element</option>

There are two parts to any useful form: the page that displays the empty boxes for the user to fill out and the page that does something (processes) the data that the user entered. The URL in the FormAction gives the URL of the page to process the form input. The Schemer's Guide to Python explains how to use the user input to forms in your Python programs.

The Form Elements

There are several types of elements you can use to accept data. The full list is available at http://www.w3.org/TR/html401/interact/forms.html. The most useful ones are textarea, input, and select.

textarea

The simplest element, textarea just creates a large blob where you can type a bunch of text. It has two arguments, "cols" and "rows", which control the number of columns and rows the user can enter. Anything between the textarea tags will be input into the blob. Consider this example:

<textarea rows="2" cols="30">Input your text here</textarea>

Which will produce the following on an HTML page:

Input your text here

Go ahead and try to change the text in there. Note that the rows and cols parameters just control the display of the text area box; users can enter more text.

input

The input element has a type parameter that can be used to make many different kinds of input elements. Here are some examples:

select

The select element constructs a menu of choices. Here's an example, on the left is the code, on the right is the output:

<form method="post" action="language.process.cgi">
My favorite language is:
<select name="language">
<option value="default">Select one below...</option>
<option value="scheme">Scheme</option>
<option value="php">PHP</option>
<option value="python">Python</option>
<option value="c++">C++</option>
</select>
<input type="submit" value="Go!"> </form>
My favorite language is:

Getting Input

The visitor can enter text into the text inputs, select from the menus, and click the checkboxes, but nothing happens until the form is submitted. The form is submitted when the user clicks on a button that is created by <input type="submit">.

When the form is submitted, all of the data will get sent to whatever page is specified by the URL in the action="URL" parameter to the form element.

The values entered in the form are accessible in a cgi program. To access then, though, we need to give then names. This is where the name parameter comes into play. In an HTML form, every form element must have a unique string as its name. This is how the form processing page will tell the different pieces of data apart. This name cannot have any spaces and is not case sensitive.

Here is an example:

<FORM METHOD="POST" ACTION="form.process.cgi">
First name: <INPUT TYPE="TEXT" NAME="FirstName"><BR>
Last name: <INPUT TYPE="TEXT" NAME="LastName"><BR>
Comments:<BR>
<TEXTAREA ROWS="3" NAME="UserComments"></TEXTAREA><BR>
<INPUT TYPE="SUBMIT"><INPUT TYPE="RESET">
</FORM>

Which produces something like this:

First name:
Last name:
Comments:

The input will now be avaliable in the cgi code at the processing page. See the Python guide for how to get it.

Credits: This guide was created by Stephen Liang, Portman Wills and David Evans. It was revised for CS 150 in Spring 2009 by Westley Weimer.

CS150: Schemer's Guide to HTML

cs150 Spring 2009

classes book syllabus ps exams guides forum

cs150: Computer Science
from Ada and Euclid to Quantum Computing and the World Wide Web

Instructor
Westley Weimer

Teaching Assistants
Zak Fry
Paul DiOrio
Rachel Lathbury

Email Address
cs150-staff@cs.virginia.edu

Class Meetings
Mondays and Wednesdays, 3:30-4:45pm in MEC 341

Structured Lab Hours
Wednesdays, 7:00-8:00pm and 8:00-9:00pm in OLS 001

Staffed Lab Hours
(Small Hall Lab)
Monday 5:00-6:00 (Zak)
Tuesday 3:15-4:15 (Rachel)
Thursday 5:00-6:00 (Paul)
Sunday 3:00-4:00 (on request)

Office & Lab Hours
(Small Hall Lab)
Monday 2:00-3:00 (Rachel)
Tuesday 11:00-12:00 (Wes in Olsson 219)
Tuesday 3:00-4:00 (Zak)
Wednesday 1:00-2:00 (Paul)

cs150: Computer Science
University of Virginia weimer@virginia.edu
Using these Materials

HTML	Output
<INPUT TYPE="TEXT" SIZE="30" VALUE="Type text here">
<INPUT TYPE="PASSWORD" SIZE="10">
<INPUT TYPE="CHECKBOX" CHECKED>
<INPUT TYPE="RADIO">
<INPUT TYPE="SUBMIT">
<INPUT TYPE="RESET">