Professional Documents
Culture Documents
Introduction To HTML 1
Introduction To HTML 1
Introduction To HTML 1
Drop-down Menu
Radio Buttons
Checkboxes
Text Area
Reset Button
Submit Button
The Form Shell
A form shell has three important parts:
the <FORM> tag, which includes the address of
the script which will process the form
the form elements, like text boxes and radio
buttons
the submit button which triggers the script to send
the entered information to the server
Creating the Shell
To create a form shell, type <FORM
METHOD=POST ACTION=“script_url”>
where “script_url” is the address of the script
Create the form elements
End with a closing </FORM> tag
Creating Text Boxes
To create a text box, type <INPUT
TYPE=“text” NAME=“name” VALUE=“value”
SIZE=n MAXLENGTH=n>
The NAME, VALUE, SIZE, and
MAXLENGTH attributes are optional
Text Box Attributes
The NAME attribute is used to identify the
text box to the processing script
The VALUE attribute is used to specify the
text that will initially appear in the text box
The SIZE attribute is used to define the
size of the box in characters
The MAXLENGTH attribute is used to
define the maximum number of characters
that can be typed in the box
Example: Text Box
First Name: <INPUT Here’s how it would
TYPE="text"
NAME="FirstName" look on the Web:
VALUE="First Name"
SIZE=20>
<BR><BR>
VALUE="Navy">Navy
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Black">Black
Creating Drop-down Menus
To create a drop-down menu, type <SELECT
NAME=“name” SIZE=n MULTIPLE>
Then type <OPTION VALUE= “value”>Label
In this case the SIZE attribute specifies the
height of the menu in lines and MULTIPLE
allows users to select more than one menu
option
Example: Drop-down Menu
<B>WHICH IS FAVOURITE FRUIT:</B>
<SELECT>
<OPTION VALUE="MANGOES">MANGOES
<OPTION VALUE="PAPAYA">PAPAYA
<OPTION VALUE="GUAVA">GUAVA
<OPTION VALUE="BANANA"> BANANA
<OPTION VALUE="PINEAPPLE">PINEAPPLE
</SELECT>
Creating a Submit Button
To create a submit button, type <INPUT
TYPE=“submit”>
If you would like the button to say something
other than submit, use the VALUE attribute
For example, <INPUT TYPE=“submit”
VALUE=“Buy Now!”> would create a button
that says “Buy Now!”
Creating a Reset Button
To create a reset button, type <INPUT
TYPE=“reset”>
The VALUE attribute can be used in the
same way to change the text that appears on
the button
Tables
Tables can be used to display rows and
columns of data, create multi-column text,
captions for images, and sidebars
The <TABLE> tag is used to create a table;
the <TR> tag defines the beginning of a row
while the <TD> tag defines the beginning of a
cell
Adding a Border
The BORDER=n attribute allows you to add a
border n pixels thick around the table
To make a solid border color, use the
BORDERCOLOR=“color” attribute
To make a shaded colored border, use
BODERCOLORDARK=“color” and
BORDERCOLORLIGHT=“color”
Creating Simple Table
<TABLE BORDER=10> Here’s how it would
<TR>
<TD>One</TD>
look on the Web:
<TD>Two</TD>
</TR>
<TR>
<TD>Three</TD>
<TD>Four</TD>
</TR>
</TABLE>
Adjusting the Width
When a Web browser displays a table, it
often adds extra space. To eliminate this
space use the WIDTH =n attribute in the
<TABLE> and <TD> tags
Keep in mind - a cell cannot be smaller than
its contents, and if you make a table wider
than the browser window, users will not be
able to see parts of it.
Centering a Table
There are two ways to center a table
Type <TABLE ALIGN=CENTER>
Enclose the <TABLE> tags in opening and
closing <CENTER> tags
Wrapping Text around a Table
It is possible to wrap text around a table. This
technique is often used to keep images and
captions together within an article.
To wrap text around a table, type <TABLE
ALIGN = LEFT> to align the table to the left
while the text flows to the right.
Create the table using the <TR>, <TD>, and
</TABLE> tags as you normally would
Adding Space around a Table
To add space around a table, use the
HSPACE=n and VSPACE=n attributes in the
<TABLE> tag
Example:
<TABLE HSPACE=20 VSPACE=20>
Spanning Cells Across
Columns
It is often necessary to span one cell across
many columns. For example, you would use
this technique to span a headline across the
columns of a newspaper article.
To span a cell across many columns, type
<TD COLSPAN=n>, where n is the number
of columns to be spanned
Spanning Cells Across Rows
To span a cell across many rows, type <TD
ROWSPAN=n>, where n is the number of
rows
Aligning Cell Content
By default, a cell’s content are aligned
horizontally to the left and and vertically in the
middle.
Use VALIGN=direction to change the vertical
alignment, where “direction” is top, middle,
bottom, or baseline
Use ALIGN=direction to change the
horizontal alignment where “direction” is left,
center, or right
Controlling Cell Spacing
Cell spacing is the space between cells while
cell padding is the space around the contents
of a cell
To control both types of spacing, use the
CELLSPACING =n and CELLPADDING=n
attributes in the <TABLE> tag
Nesting Tables
Create the inner table
Create the outer table and determine which cell of
the outer table will hold the inner table
Test both tables separately to make sure they work
Copy the inner table into the cell of the outer table
Don’t nest too many tables. If you find yourself
doing that, find an easier way to lay out your Web
page
Changing a Cell’s Color
To change a cell’s color, add the
BGCOLOR=“color” attribute to the <TD> tag
Example:
<TD BGCOLOR=“blue”>
Dividing Your Table into
Column Groups
You can divide your table into two kinds of
column groups: structural and non-structural.
Structural column groups control where
dividing lines are drawn; Non-structural
groups do not
Both let you format an entire column of cells
at once
Column Groups
To create structural column groups, type
<COLGROUP SPAN=n> after the <TABLE> tag,
where n is the number of columns in the group
To create non-structural column groups, type
<COL SPAN=n>, where n is the number of
columns in the group
Dividing Table into Horizontal
Sections
You can also create a horizontal section
consisting of one or more rows. This allows
you to format the rows all at once
To create a horizontal section, type
<THEAD>, <TBODY>, or <TFOOT> before
the first <TR> tag of the section
Netscape does not support these tags
Controlling Line Breaks
Unless you specify otherwise a browser will
divide the lines in a cell as it sees fit.
The NOWRAP attribute placed within the
<TD> tag forces the browser to keep all the
text in a cell on one line
Example:
<TD NOWRAP>Washington, D.C.
Parting Words….
If you can imagine a way to lay out your
page, chances are it is possible using HTML
When in doubt, use an HTML reference