Download presentation
Presentation is loading. Please wait.
1
List, Tables,Frame and Forms
Chapter 2 List, Tables,Frame and Forms
2
Definition list <dl>,<dt>,<dd>
dl represents a list of definitions of terms (block) dt represents each term, and dd its definition
3
Frames HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns.
4
..... . tt P• ·g rools • " e r SAS ""'pu'"- The SAS System §r8]
(: SAS Output frame ·Wind Internet lxplor·cr (""'""' • lli!Seled f";) • Q File Edit Yiew Favorites Tool$ H e r SAS ""'pu'"- tt P• ·g rools • " Table of Contents The SAS System 1 The Reg Procedure The REG Procedure ·race=1 Model; MODEL1 ·MODEL1 Dependent Variable: write writing score ·Fit i ·wnte . _ 1 race=1 ·Number of Qbserval!pn:; ·Analysis of vanance ·Ftt Stattsbcs Number of Observations Read 24 24 Number of Observations Used ·Parameter Estunates Analysis of Variance ..... Sum of Mean e F u_._a. -p ..._f! 1: v > . My Computer lf( 100'1.
![tt P• ·g rools • e r SAS pu - The SAS System §r8]](http://slideplayer.com./slide/14083052/86/images/4/tt+P%E2%80%A2+%C2%B7g+rools+%E2%80%A2+e+r+SAS+pu+-+The+SAS+System+%C2%A7r8%5D.jpg "(: SAS Output frame ·Wind Internet lxplor·cr. ( • lli!Seled. f ;) • Q. File Edit Yiew Favorites Tool$ H. e r SAS pu - tt P• ·g rools • Table of Contents. The SAS System. 1 The Reg Procedure. The REG Procedure. ·race=1. Model; MODEL1. ·MODEL1. Dependent Variable: write writing score. ·Fit. i. ·wnte. . _. 1. race=1. ·Number of. Qbserval!pn:; ·Analysis of. vanance. ·Ftt Stattsbcs. Number of Observations Read Number of Observations Used. ·Parameter. Estunates. Analysis of Variance Sum of. Mean. e F. u_._a. -p. ..._f! 1: v. > . My Computer. lf(")
5
Creating Frames
6
Example
7
Result
8
Cols attribute
9
Tables:<table>,<tr>,<td><tc>
10
Table headers, captions:<th>,<caption>
11
border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border then you can use border="0". Table heading can be defined using <th> tag. cellpadding and cellspacing which you will use to adjust the white space in your table cells. The cellspacing attribute defines the width of the border, while cellpadding represents the distance between cell borders and the content within a cell.
12
Ex ampl e I Name I Salary I I Ramesh Raman I Shabbir Hussein
< !DOCTYPE html> <htm l> <head> <title>HH'L Table Cellpadding </title> </head > <body> <table border ="l" cellpadding ="5" cellspacing ="S"> <tr> <th>Name</th> <th> Salary </th> </tr> <tr> <td >Ramesh Raman</td> <td >Seee</td> </tr> <td >Shabbir Hussein </td > <td >7099</td> </table> </body> </htm l> This wil l produce following result : I Name I Salary I I Ramesh Raman I Shabbir Hussein
13
You will use colspan attribute if you want to merge two or more columns into a single column. Similar way you will use rowspan if you want to merge two or more rows.
14
Examp le This will produce following result : Column 1 Column 2
< !DOCTYP E html> < html> < h ead > < t itle>HHIL Table Colspan/ROI span </ t itle> </head> < body> <table border •''1'' > <tr> This will produce following result : < th>Column <th>Column < th >Column </t r > 1</t h> 2</th> 3</t h> Column 1 Column 2 Column 3 Row 1Cell Row 1Cell 2 Row 1Cell 3 1 Row 2 Cell 2 Row 2 Cell 3 Row 3 Cell 1 <tr><t d ro 1span= "2"> Ro l 1 Cell 1</td>< td > Row 1 Cell < t r>< td > Ro l 2 Cell 2</t d >< t d > Row 2 Cell 3</ td></ t r > <tr><t d colspan•"3"> Ro l 3 Cell 1</td></ tr > </t able > </body> </h tm l> 2</ td ><td> Row 1 CE
15
Tables Backgrounds You can set table background using one of the following two ways: bgcolor attribute - You can set background color for whole table or just for one cell. background attribute - You can set background image for whole table or just for one cell. You can also set border color also using bordercolor attribute.
16
Examp le <!DOCTYPE html> <htm l> <head >
This will produce following result : <!DOCTYPE html> <htm l> <head > <title>HTML Table Background </title> </head> <body> !column 1 llcolumn 2 llcolumn 3 I Row 1Cell IRow 1Cell 2IIRow 1Cell 31 !Row 2 Cell 2IIRow 2 Cell 31 IRow 3 Cell 1 I 1 <table border= "l" borderco lor="green" bgcolor="yellow"> <tr> <th >Column </tr > 1</th> 2</th> 3</th> <tr>< td rovJspan="2"> Rovl 1 Cell 1</td ><td >Rovl 1 Cell 2</td ><td >Row 1 Cell 3 <tr>< td >Rovl 2 Cell 2</td><td >Row 2 Cell 3</td></tr> <tr>< td colspan="3"> Row 3 Cell 1</td ></tr> </table> </body> </html>
17
Form Basics form: a group of UI controls that accepts information from the user and sends the information to a web server. forms use HTML UI controls (buttons, checkboxes, text fields, etc.) the information is sent to the server as a query string JavaScript can be used to create interactive controls (seen later)
18
HTML form : required action attribute gives the URL of the server web service that will process this form's data
19
Form example Let's search Google: Submit Query I output
<form action=" <div> Let 's search Google : <input name="q" I> <input type="submit " I> <ldiv> </form> HTML Let's search Google: Submit Query I output should wrap the form's controls in a block element such as div
20
Form controls: • t t, ... he fil ' i , 1
21
Text fields:
22
Text boxes<textarea>:
23
Checkboxes <input>:
24
Radio buttons:
25
Text labels: <label>
26
Drop-down list: <select><option>
27
Using <select> for list
28
Option groups:<optgroup>
29
Reset buttons
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")
