Web forms and html (lect 3)

Web forms and html (lect 3)

• 1.
  Web Forms and HTML Sam
• 2.
  Lecture-3
• 3.
  Lists In Html •We can List out our items, subjects or menu in the form of a list. HTML gives you three different types of lists. 1. <ul> - An unordered list. This will list items using bullets. 2. <ol> - A ordered list. This will use different schemes of numbers to list your items. 3. <dl> - A definition list. This will arrange your items in the same way as they are arranged in a dictionary. Unordered Lists: • An unordered list is a collection of related items that have no special order or sequence. • This list is created by using <ul> tag. • Each item in the list is marked with a butllet. • The bullet itself comes in three flavors: • squares, • discs, • circles. • The default bullet displayed by most web browsers is the traditional full disc. type="square" type="disc" type="circle"
• 4.
  Lists In Html •Example: <ul type= “disc” > <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ul> Ordered Lists: • There are 4 other types of ordered lists. • Instead of generic numbers you can replace them with Roman numberals or letters, both capital and lower-case. • Use the type attribute to change the numbering. • Start attribute is used for starting number as desired. • Example: <ol type= “a” start="50" > <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item4</li> </ol> type="squa re" type="disc " type="circl e"  Item1  Item2  Item3  Item4 • Item1 • Item2 • Item3 • Item4 o Item1 o Item2 o Item3 o Item4
• 5.
  Lists In Html •Definition Term Lists: • Make definition lists as seen in dictionaries using the <dl> tag. • These lists displace the term word just above the definition itself for a unique look. • It's wise to bold the terms to displace them further. • <dl> - defines the start of the list • <dt> - definition term • <dd> - defining definition Type=“a” Type=“A” Type=“i” Type=“I” a. Item1 b. Item2 c. Item3 d. Item4 A. Item1 B. Item2 C. Item3 D.Item4 i. Item1 ii. Item2 iii. Item3 iv. Item4 I. Item1 II. Item2 III.Item3 IV.Item4
• 6.
  Lists In Html •Example: <dl> <dt><b>Html</b></dt> <dd>HyperText Mark Up Language</dd> <dt><b>Xhtml</b></dt> <dd>Xtensibile HyperText Mark Up Language </dd> </dl> Html      HyperText Mark Up Language. Xhtml       Xtensibile HyperText Mark Up Language.
• 7.
  Tables In Html   10am - noon noon - 2 pm 2 pm - 4 pm Monday Home Ec Math Geography Wednesday History Social Studies Music
• 8.
  Tables In Html(Cell Spacing And Cell Padding)
• 9.
  Tables In Html(Colspan & Rowspan) • Colspan: •  colspan attribute used with <td> if you want to merge two or more columns into a single column. • Rowspan: • rowspan if you want to merge two or more rows. • For example: • We might want to create header cells for each Technology in our table of • id, • Name • Shift. • In this table, the header cells in the first and fifth rows span across two columns to indicate the Technology for each group of names.
• 10.
  Example Table <TABLE BORDER=2CELLPADDING=4> <TR> <TD COLSPAN=4 BGCOLOR=“skyblue" align="center" >Students Information </TD> </TR> <TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">PHP</TH> <TD>1153.</TD><TD>Ahmed</TD> <TD>Morning</TD> </TR> <TR> <TD>2785.</TD><TD>Asad</TD> <TD>Evening</TD> </TR> <TR> <TD>110.</TD><TD>Manzoor</TD> <TD>Morning</TD> </TR> <TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">System Administration</TH> <TD>1566.</TD><TD>Tariq</TD> <TD>Morning</TD> </TR> <TR> <TD>784.</TD><TD>Waheed</TD> <TD>Evening</TD> </TR> <TR> <TD>222.</TD><TD>Saleem</TD> <TD>Morning</TD> </TR> </TABLE>
• 11.
  Use Of Thead,Tfoot,Tbody •The advance structure of table be divided into three portions: • Head and Foot are similar to headers and footers in word processing. • The body is the main content of the table. • The three elements for separating the head, body, and foot of a table are: • <thead> - to create a separate table header. • <tbody> - to indicate the main body of the table. • <tfoot> - to create a separate table footer. • A table may contain several <tbody> elements to indicate different pages or groups of data. • But it is notable that <thead> and <tfoot> tags should appear before <tbody>.
• 12.
  Example <table border="1" width="100%"> <thead> <tr> <tdcolspan="4">This is the head of the table</td> </tr> </thead> <tfoot> <tr> <td colspan="4">This is the foot of the table </td> </tr> </tfoot> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> <tbody> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> <tr> ...more rows here containing four cells... </tr> </tbody> </table>
• 13.
  Assignments • Practice Lists •Create an unordered list • Create an ordered list • Use various bullet styles • Created nested lists • Use the font tag in conjunction with lists • Create definition lists • Create Table structure as explained • Generate Dynamic Table using Forms 1. Create  Page1 with Form consisting of Textfield - getting no: of Matematical tables to print and a Submit Button. 2. Create a Page2 consisting of : • Mathematical Table in tablular format each cell consist of table starting from 1 to 12. • The row of table shoud break after 4 cells. • Program should be dynamic have variable of No: of table to generate.
• 14.
  Assignments • Convert MarksheetAssigment • Extend you marksheet assignment by giving all subjects marks using textfield on page 1 and show the result as in previous marksheet assignment. • Create Calculator using Form • Create a Page1 consisting of : • 4 text Fields • Value1 • Value2 • Operator • Result • Submit/Calculate Button. Note: The Result Should be shown in result textfield after submit/calculate  • Create Webpage Layout using tables
• 15.
  Questions ?