225 City Avenue, Suite 106 Bala Cynwyd, PA 19004 610.206.0101, phone 610.206.0102, fax www.learnquest.com presents… HTML Lists, Tables and Forms v2.0
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
225 City Avenue, Suite 106Bala Cynwyd, PA 19004
610.206.0101, phone610.206.0102, fax
www.learnquest.com
presents…
HTML Lists, Tables and Formsv2.0
Objectives
This chapter will explain:
Creating ordered and unordered lists Using tables to display data Using tables to enhance page layout Using forms to allow users to enter data on a web page How to integrate form data with a server-side process
2
Lists
HTML supports two tags for creating lists:
<UL> Creates an unordered list. These lists are bulleted with a small graphic
<OL> Creates an ordered list. These lists are bulleted with letters or numbers
3
Lists: The LI Tag
The <LI> Tag is used to indicate a single item in a list
<UL>
<LI>Blue</LI>
<LI>Red</LI>
<LI>Green</LI>
</UL>
The code at the left generates the following in a browser:
4
Lists: Attributes of the UL Tag
Most of the UL attributes are deprecated in favor of CSS. However they are:
type – can be set to ‘disc’, ‘square’ or ‘circle’compact – compacts the list to use less space. This attribute is not widely implemented
5
Lists: Attributes of the OL Tag
These attributes are also deprecated in favor of CSS but may still be used. They are:
type - values are 1, a, A, I, and I
start – a number at which to start
compact – same as UL. See previous slide
6
Tables: Basic Syntax
HTML tables are constructed from three basic tags:
<TABLE> - Marks the beginning and end of the table.
<TR> - Marks the beginning and end of each row.
<TD> - Marks the beginning and end of each cell within a row
Each tag has attributes that are specific to it
7
Tables: A Simple Example
<html><body><table border="1"> <tr> <td>John</td> <td>Doe</td> </tr> <tr> <td>Sally</td> <td>Brown</td> </tr></table></body></html>
The code to the left produces the table below
8
Tables: The TABLE Tag
The attributes of the TABLE tag are:
summary -- purpose/structure for speech outputwidth -- table widthborder -- controls frame width around tableframe -- which parts of frame to renderrules -- rulings between rows and columnscellspacing -- spacing between cellscellpadding -- spacing within cells
Of these, width, border, cellpadding, and cellspacing are the most commonly used
9
Tables: Width
The width attribute can be set to a number of pixels or to a percentage of the current screen width
To set to pixels:<table width=600 >
To set to a percentage:<table width=90% >
10
Tables: Border
The border attribute sets the size of the table (not cell) border
<table border="1">
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
<table border="10">
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
11
Tables: Cellpadding
Cellpadding sets the amount of area, in pixels, around the content of each cell
<table border="1"
cellpadding="0">
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
<table border="1"
cellpadding="10">
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
12
Tables: Cellspacing
Cellspacing sets the space BETWEEN cells
<table border="1"
cellspacing="0">
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
<table border="1"
cellspacing="10">
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>13
Tables: The TR Tag
The TR tag has two useful attributes:
align – values are ‘left’, ‘right’, and ‘middle’. Default is ‘left’
valign – values are ‘top’, ‘bottom’, and ‘middle’. Default is ‘middle’
These two attributes affect the horizontal and vertical alignment for the data in all cells of the row
14
Tables: The TD Tag
Creates a cell in a row Normally all rows will have the same number of cells;
if not the table will have a slightly irregular look The TD tag accepts the ALIGN and VALIGN
attributes which set alignment for the individual cell The TD tag also accepts the ROWSPAN and
COLSPAN attributes which are explained in the following slides
15
Tables: TD: rowspan
The rowspan attribute causes a cell to stretch down into one or more rows below it. Cells in the rows below are pushed to the right.
<table border="1">
<tr>
<td rowspan="3">
Hello World</td>
<td>Zap</td><td>Bam</td></TR>
<tr>
<td>moved</td><td>right</td></tr>
<tr>
<td>Again</td><td>moved</td>
</tr>
</table>
16
Tables: TD: colspan
colspan causes a cell to stretch into the cells to its right Cells in the same row are pushed to the right
<table border="1">
<tr>
<td colspan="3">
Hello World</td>
<td>Moved right</td></tr>
<tr>
<td>Zap</td><td>Bam</td><td>Boom
</td>
</tr>
<tr>
<td>Again</td><td colspan="2">moved</td>
</tr>
</table>17
Tables: Colors
The attribute bgcolor may be used to set a background color for the entire table, individual rows and individual cells. Most common colors can be named, e.g. <table bgcolor="green">
Colors can also be specified by a six digit hexadecimal number preceded by a hash mark. The first two digits set the amount of red in the color, the next two the amount of green, and the last two, the amount of blue. So:
#FFOOOO – brightest possible red#999999 – medium gray#FFFFFF – white#000000 – black#FFCC00 – golden yellow
A handy color wheel for determining color values resides at:http://www.visibone.com/colorlab/
18
Tables: TH Tag
The <TH> tag can be used to create headers for a table. Use it in place of <TD> anywhere that you want the text in the cell to be bold-faced and centered
<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th>
<tr>
<td>John</td>
<td>Doe</td>
</tr>
</table>
19
FORMs: Introduction
Although the web began as a way of displaying text and pictures, it has grown far beyond that. FORMs allow users to enter data that will be passed to a program or script on the web server for execution
Writing such programs is complex and beyond the scope of this course. Instead we will examine creating data entry fields in a web page
20
FORMS: The FORM Tag
The FORM tag marks the beginning and end of a group of data entry fields which will be sent to a server as a block
The FORM tag allows more than one FORM to exist on a page
21
FORMS: The FORM Tag
The FORM tag includes two important attributes:
METHOD – values are ‘GET’ and ‘POST’ACTION – value is the URL to which data will be sent
A typical FORM tag example:
<form method="post" action="http://www.learnquest.com/cgi-bin/process.jsp">
22
FORMs: The METHOD Attribute
The METHOD attribute specifies how data will be transferred to the server
The GET method can hold only a small amount of data. Data names and values are appended to the outgoing URL and can be seen in the browser’s address bar
The POST method places the data behind the scenes in the underlying http document. Much more data can be moved, and it is not visible in the address bar
POST is the preferred method for FORMs23
FORMS: The INPUT Tag
The input tag is used for several input types. These are controlled by the TYPE attribute, which can take the following values:
text – a text field for single line data entryradio – radio button. These are grouped by the "name" attributecheckbox – an "on/off" check boxbutton – a button that needs some JavaScript to do anythingsubmit – a button which initiates the send processreset – a button that will reset all fields in the form to the values they held when the page was first loaded
24
FORMS:INPUT: Text
Important attribute of this tag are: NAME – should be unique
SIZE – the width of the field in characters MAXLENGTH - The maximum number of characters
the user may enter VALUE – an initial display value
Example
<input type="text" name="uname" size="10" maxlength="40" value="enter name here!" />
25
FORMS: INPUT: Radio
Important attributes of the RADIO tag are:
NAME – All radio buttons with the same name will be in one group
VALUE – the value to be sent to the server if this radio button is selected when the form is submitted
CHECKED – This attribute takes no value. If present, it causes this button to be selected when the page is first loaded
Example:
<input type="radio" name="grp_a" value="box" />Box <br /><input type="radio" name="grp_a" value="disc" checked />Disc <br />
26
FORMS: INPUT: Checkbox
Important attributes of the CHECKBOX tag are:
NAME – should be uniqueVALUE – the value to be sent if the CHECKBOX is checked when the form is submittedCHECKED – like RADIO, if present causes the CHECKBOX to be checked when the page is first loaded
Example<input type="checkbox" value="happy" checked />Happy?
27
FORMS: INPUT: Button
The two important attributes of the Button tag are
VALUE and onClick
VALUE specifies the label that will appear on the button
onClick specifies what the button will do when it is clicked. This action is normally coded in JavaScript
28
FORMS: INPUT: Submit
The submit button also takes a VALUE to describe its label but it has a predefined action: when it is clicked the form it is a part of is submitted
29
FORMS: INPUT: Reset
The RESET attribute sets all values in the FORM to the values they had when the page was first loaded
30
Summary
In this chapter we learned to work with lists, tables and forms
31
Any Questions?
32
Related Documents
