Frames Tables Forms

Tables
Tables provide a means of organising the

layout of data
A table is divided into rows and columns: these

specify the cells of the table tables...
Cells can contain text, images, links, other Tables can also be used for organising the
layout of the web page itself.
B c C!"#$$ %nternet Computing
Tables
<table> main element <tr> <th> <td>
table row table header table data
<table border="1"> <tr> <th>Name</th> <th>Course</th> <th>Year</th> </tr> <tr> <td>A B Morgan</td> <td>Fishing</td> <td>5</td> </tr> <tr> <td>D P Jones</td> <td>Sailing</td> <td>8</td> </tr> <tr> </table>
2
Tables
<table> main element <tr> <th> <td>
table row table header table data
<table border="1"> <tr> <th>Name</th> <td>A B Morgan</td> <td>D P Jones</td> </tr> <tr> <th>Course</th> <td>Fishing</td> <td>Sailing</td> </tr> <tr> <th>Year</th> <td>8</td> <td>5</td> </tr> <tr> </table>
3
&ows and Columns

Cells can span multiple
columns and multiple rows with the colspan and rowspan attributes
<table border="1"> <tr> <th colspan="2">Name</th> <th>Course</th> <th>Year</th> </tr> <tr> <td>A B</td> <td>Morgan</td> <td rowspan="2">Fishing</td> <td>5</td> </tr> <tr> <td>D J</td> <td>Jones</td> <td>Sailing</td> <td>8</td> </tr> <tr> </table> 4
The align and width attributes

The align
attribute determines the position of the text within a cell
<table border="1" align="center"> <tr> <th colspan="2" width="60%">Name</th> <th rowspan="2">Course</th> <th rowspan="2"> ear</th> </tr> <tr> <th>!ast</th> <th>"nit#</th> </tr> <tr> <td>$organ</td> <td>%&</td> <td>'ishing</td> <td align="center">(</td> </tr> <)* etc ++>
5
The width
attribute determines the width of the row relative to the table
Table attributes Table attributes align alignment relative to the page width in pixels or percentage of page width border ' width of border (pixels) cellspacing separation between cells (pixels) cellpadding ' space around data inside cell (pixels) bgcolor ' background colour (inside cells)
Furthermore The <caption> element puts a title above the table
<table border="," align="center" cellspacing="6" cellpadding="6" bgcolor="c-an"> <caption> <h2>Course .ata</h2> </caption> <tr> <th>Name</th> <th>Course</th> <th>Year</th> </tr> <tr> <td>A B Morgan</td> <td>Fishing</td> <td>5</td> </tr> <)* etc ++>
Table attributes
*age formatting
Tables can be used to organise the layout o the !eb page itsel
</bod-> <table border="0" cellspacing="10"> <tr> <td> <img src="cat#gi/" alt="cat"> <ul> <li>cats</li> <li>dogs</li> <li>butter lies</li> </ul> </td> <td! "his #iece o te$t illustrates the idea o #lacing t%o columns o in ormation in a %eb #age&&& Note also that there is no border in this table& </td> </tr> </table> </bod-> 8
+rames and +ramesets

A frameset partitions a web browser window so that
multiple web documents can be displayed simultaneously.
,xample application: To maintain a permanently visible otherwise the directory of links must appear on
every page, and this scrolls up with the page
directory of links within your site, while also displaying one or more selected documents from the site.
-ote: framesets can cause problems for bookmarking

and for .screen readers. (for visually'impaired users)
"
+ramesets
<html> <head><title>'rames 1</title></head> </rameset cols="10012"> </rame name="na3'" src="na3igation#html"> </rame name="main'" src="intro#html"> <//rameset> </html>
The /rameset element replaces the

bod- element
/rameset has attributes cols or

rows, defined in terms of pixels, percentage(/) or unspecified (0)
this splits the window into two or

more columns or rows
1#
+rame attributes
</rameset cols="10012"> </rame name="na3'" src="na3igation#html"> </rame name="main'" src="intro#html"> <//rameset>
The name attribute uni1uely identifies the frame. %t may be

used as the target in an anchor (<a>) element
4he src attribute specifies the web page to be placed in the

frame initially (it may subse1uently be overwritten)
4he scrolling attribute ("auto", "-es", "no")

specifies whether the frame is to have scroll bars
4he /rameborder attribute ("0", "1") specifies whether

the B frame is to have a border c C!"#$$ %nternet Computing
11
navigation.html
The anchor tag has a target attribute
takes the name of the frame used to display the information
All anchors below are targeted to the "main'" frame

<html><head><title>Na3igation &ar</title></head> <bod-><center> <a hre/="course#html" target="main'">54$! Course</a><br><br> <a hre/="paragraph#html" target="main'">6aragraphs</a><br> <a hre/="headings#html" target="main'">5eadings</a><br> <a hre/="ulists#html" target="main'">7nordered lists</a><br> <a hre/="olists#html" target="main'">8rdered lists</a><br> <a hre/="nlists#html" target="main'">Nested lists</a><br> <a hre/="intro#html" target="main'">5ome</a><br> </center></bod-> </html>
12
intro.html
A simple document which is initially placed in the "main'"
frame
This is replaced when a user clicks on a link in the "na3'"

frame
<html> <head><title>"nternet Computing</title></head> <bod-> <h2>9elcome to the 54$! Course</h2> <p> <h0>6lease select the sub:ect o/###</h0> </p> </bod-> </html> B c C!"#$$ %nternet Computing 13
<html> <head><title>'rames 2</title></head> </rameset cols="10012"> </rame name="na3'" src="na3igation#html"> </rameset rows=",0%1;0%"> </rame name="upper'" src="intro#html"> </rame name="lower'" src="course#html"> <//rameset> <//rameset> </html>
-ested framesets
14
$ome bro!sers cannot process rames% &lternative content should be provided using the no/rames element
<html> <head><title>'rames 1</title></head> </rameset cols="10012"> </rame name="na3'" src="na3igation#html"> </rame name="main'" src="intro#html"> <//rameset> <no/rames> <bod-> <omething here /or browsers not supporting /rames </bod-> </no/rames> </html>
-oframes
15
+orms
+orms are user interfaces for data input !ain application: to provide user input for programs and databases located on a web server local (client'side) scripts associated with the form erver'based programs may return data to the client as a web
page
Client'side scripts can read input data To validate the data, prior to sending to server To use in local processing which may output web page
content that is displayed on the client
16
,xample applications
2uestionnaires to provide feedback on a web site e'commerce, to enter name, address, details of purchase
and credit'card number re1uest brochures from a company make a booking for holiday, cinema etc. buy a book, cd, etc obtain a map giving directions to a shop &un a database 1uery and receive results (an important part of e'commerce)
17
te=t chec>bo= radio 'buttons( select 'options( te=tarea password button submit reset hidden /ile image
%nput types
18
The method attribute speci ies the !ay that orm data is sent to the server program ' ?@4 appends the data to the )*+ ' 68<4 sends the data separately The action attribute speci ies a server program 'e%g% a perl program %pl e,tension( that processes the orm data -an also send an email. action/0mailto.1%2%-os3er4%%5
<bod-> </orm method="68<4" action="comments#pl"> <h2>4ell us what -ou thin></h2> <)++ etc ++> <//orm> </bod->
The method and action attributes
1"
The t-pe attribute speci ies the type o user input The name attribute gives an identi ier to the input data The siAe attribute speci ies the length o the input ield The 3alue attribute speci ies an initial value or the te,t 'optional(
The input element: t-pe="te=t"
</orm method="68<4" action="comments#pl"> <h2>4ell us what -ou thin></h2> Name <input name="name" t-pe="te=t" siAe="20"><br> %ddress <input name="address" t-pe="te=t" siAe=",0"> <//orm> B c C!"#$$ %nternet Computing 2#
The name attribute is used to de ine a set o chec3bo,es
The input element:t-pe="chec>bo="
The 3alue attribute identi ies the individual chec3bo, 6 the chec>ed attribute is set the bo, is initially chec3ed
5ow did -ou hear about this web siteB<br> % /riend <input t-pe="chec>bo=" name="howdid" 3alue="/riend"><br> <earch engine <input t-pe="chec>bo=" name="howdid" 3alue="engine"><br> <)* etc ++>
21
The input element: t-pe="radio"

*adio buttons are similar to chec3bo,es7 but only one can be selected To select a button by de ault7 use the chec>ed attribute ' or one button only(
5ow did -ou hear about this web siteB<br> % /riend <input t-pe="radio" name="howdid" 3alue="/riend"><br> <earch engine <input t-pe="radio" name="howdid" 3alue="engine"><br> <)* etc ++>
22
The input element: t-pe="button"

The name attribute uni8uely identi ies a button The 3alue attribute gives a label to the button &ctions can be associated !ith buttons9 more later
.o -ou want to recei3e an- /urther in/ormationC<br> <input t-pe="button" name="-es" 3alue=" es "> <input t-pe="button" name="no" 3alue=" No "><br>
23
The input element: t-pe="submit/reset"

t-pe="submit" : clic3ing this button sends the orm data to the program ')*+( speci ied in the action attribute o the orm t-pe="reset" : clic3ing this button clears all data entered so ar
4han> -ou<br> <input t-pe="submit" name="send" 3alue="<end"> <input t-pe="reset" name="clear" 3alue="Clear"><br> B c C!"#$$ %nternet Computing 24
The input element: t-pe="password//ile/hidden"

t-pe="password" : similar to t-pe="te=t" e,cept that the input is echoed !ith asteris3s 'so not visible( t-pe="/ile" : provides a ile dialogue bo, to speci y a ile that is sent to the server t-pe="hidden" : similar to te,t input7 but the 3alue attribute is used to speci y data that is to be sent to the server% ;othing appears on the screen% : The data might be set by a server program to 3eep trac3 o the details o a particular transaction% 25 B c C!"#$$ %nternet Computing
The te=tarea element

)sed or multi9line te,t input The si<e o the input area is speci ied !ith the cols and rows attributes &ny te,t placed inside the element appears in the input area 'this can be deleted(%
6lease write -our commentsC<br> <te=tarea name="comments" rows="(" cols="20"> put te=t here </te=tarea> B c C!"#$$ %nternet Computing
26
The select element

The select element provides a menu o options &n option can be selected by de ault using the selected attribute 'other!ise the irst in the list is initially selected(
5ow do -ou rate this siteB<br> <select name="rating"> <option>?ood <option selected>&ad <option>7gl</select> B c C!"#$$ %nternet Computing
27

Frames Tables Forms

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Frames Tables Forms

Hochgeladen von

Copyright:

Verfügbare Formate

Tables

Tables provide a means of organising the

A table is divided into rows and columns: these

B c C!"#$$ %nternet Computing

B c C!"#$$ %nternet Computing

&ows and Columns

B c C!"#$$ %nternet Computing

The align and width attributes

B c C!"#$$ %nternet Computing

+rames and +ramesets

-ote: framesets can cause problems for bookmarking

The /rameset element replaces the

/rameset has attributes cols or

this splits the window into two or

more columns or rows

The name attribute uni1uely identifies the frame. %t may be

4he src attribute specifies the web page to be placed in the

4he scrolling attribute ("auto", "-es", "no")

4he /rameborder attribute ("0", "1") specifies whether

All anchors below are targeted to the "main'" frame

This is replaced when a user clicks on a link in the "na3'"

B c C!"#$$ %nternet Computing

The method and action attributes

The input element: t-pe="te=t"

The name attribute is used to de ine a set o chec3bo,es

The input element:t-pe="chec>bo="

The input element: t-pe="radio"

The input element: t-pe="button"

The input element: t-pe="submit/reset"

The input element: t-pe="password//ile/hidden"

The te=tarea element

The select element

Das könnte Ihnen auch gefallen