Web forms and html (lect 3)
Download as PPT, PDF0 likes159 views
The document discusses different types of lists that can be created in HTML, including unordered lists, ordered lists, and definition lists. It provides examples of how to write the code for each type of list using tags like <ul>, <ol>, and <dl>. The document also covers HTML table elements, describing how to structure tables using tags like <table>, <tr>, <td>, <th>, <thead>, <tbody>, and <tfoot>. It provides examples of how to use attributes like colspan and rowspan to merge table cells, as well as how to add styling to tables. Finally, it lists some assignments for students to practice creating lists, tables, and basic calculators and forms using HTML.
Web forms and html (lect 3)
- 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 10 am - 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=2 CELLPADDING=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> <td colspan="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 Marksheet Assigment • 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 ?