| 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/">displays a centered image that is a link:
<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>
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 ::= TableThe 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).
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.
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 |
|
Here's a more complicated table using some of the options:
|
Tabla | ||||
| Rosa |
|
<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.
Element ::= <form method="post"
action="URL"> FormElements
</form>
FormElements ::= FormElement FormElements
FormElement ::= <textarea TextOptions>Element</textarea>
FormElement ::= <select>Selections</select>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:
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.
FormElements ::=
FormElement ::= <input InputOptions>
Selections ::= Selection Selections
Selections ::=
Selection ::= <option value="Name">Element</option>
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:
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>
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:
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. |
cs1120: Introduction to Computing: Explorations in Language, Logic, and Machines
Tuesdays and Thursdays, 3:30-4:45pm in Olsson 011
Mo 15:00-17:00 Stacks (J, L)
Mo 17:00-19:00 Olsson 001 (C, M)
Tu 13:00-15:00 Stacks (D, M)
We Noon-13:00 Rice 423 (Weimer)
We 13:00-14:00 Olsson 001 (C, J, M)
We 14:00-16:00 Olsson 001 (C, J, L)
We 16:00-17:00 Olsson 001 (C)
Fr 13:30-15:30 Olsson 001 (C, M, J)
Su 13:00-15:00 Olsson 001 (C, L)
Su 15:00-17:00 Olsson 001 (C, D)
Su 17:00-19:00 Olsson 001 (D, J)
Located in Thornton Stacks
or Olsson 001
or Rice 423 (We Noon-13:00)