![Pte Ierik
table-colspan-rowspan.html
Column and Row Span —
Example
stable ceIlspacing=”0”›
‹tr class=”1”›‹td›Cell[1,1]‹/td›
‹td colspan=”2”>Cell[2,1]‹/{d›‹/tr>
‹tr class:”2”>‹{d›Cell[1,2a/td>
‹td rowspan-”2”›Cell[2,2]‹/td>
‹td>Cell[3,2]</td›‹/try
‹tr class:”3”›‹{d>Cel1[1,3]‹/td›
‹td>Cell[2,3]</td>‹/tr>
‹/table>
6](https://image.slidesharecdn.com/htmltablesformsframe-240417040606-2818d8c0/85/HTML_TABLES-FORMS-FRAME-markup-lang-pptx-26-320.jpg)
![6 telerik Input Fields with Validation
+Email —
provides a simple validation for email
Can be passed a pattern for validation
On a mobile device brings the email keyboard
‹input type="emaîl" required="true"
pattern=”[’ @]*@[’ @].}’ @j“/>
• URL —
has validation for url
On a mobile device brings the url keyboard
‹input type=“url" required="true" /›
+Telephone
Brings the numbers keyboard
inpu pe= tel required= ue /](https://image.slidesharecdn.com/htmltablesformsframe-240417040606-2818d8c0/85/HTML_TABLES-FORMS-FRAME-markup-lang-pptx-44-320.jpg)
![Drag a column deader and drDQ it he-e to group by that coTiumn
firoductlD Product name Unit price Units n stock Discontinued
Char OO 10 boxes x20 bags
Chang OO 24 - 12 oz bottles
Aniseed Syrup 510.00
Chef Anton's Cajun Seasoning OO
]2O
S3Q00
Northwoods C ranberry Sauce
Misht lobe Niku
V0.00
00
10 00 I7 - 200 ml ars](https://image.slidesharecdn.com/htmltablesformsframe-240417040606-2818d8c0/85/HTML_TABLES-FORMS-FRAME-markup-lang-pptx-57-320.jpg)
HTML_TABLES,FORMS,FRAME markup lang.pptx
- 2. Contents + HTML Tables Simple Tables Complete HTML s Tables Data cells and Header cells + Nested Tables + Complex tables ' Cells Width Cell Spacing and Padding Column and Row Span
- 3. Contents (z) Buttons Checkboxes and Radio Buttons Hidden fields Validation fields
- 4. Contents (3) • HTML Frames Frame and Noframe tags
- 6. HTML Tables • Tables represent tabular data A table consists of one or several rows Each row has one or more columns • Tables comprised of several core tags: ‹tab1e›‹/tab1e›: begin / end the table < t r › < / t r › : create a table row ‹ t d › ‹ / I d › : create tabular data (cell) • Tables should not be used for layout. Use CSS floats and positioning styles instead 6
- 7. ‹table ce1lspacing:“0" cellpadding:'5“› ‹tr> ‹td›‹img src=“ppt.gif“›‹/td› ‹td>‹a href=“lecture1.ppt'>Lecture 1‹/a›‹/td› ‹/tr> ‹tr› ‹td›‹img src='ppt.gif"›‹/td> href=“lecture2.ppt'›Lecture 2‹/a›‹/td› ‹td›‹a ‹/tr> ‹tr› <td>‹img src='zip.gif”>‹ftd› ‹td›‹a href=“1ecture2-demos.zip”› Lecture 2 - Demos‹/a›‹/td› ‹/tr› ‹/table›
- 9. +Two kinds of cells in HTML ç tables Data cells — containing the table data Header cells —used for the column names or some more important cells in a table + Why two kinds of cells? Used to semantically separate the cells ‹/ <th›Full name</th› <th> Park ‹/th› ‹/tr› ‹td›Doncho Minkov‹/td› ‹td>Very good 5‹/td› tr› <td›Georgi Georgiev‹/td› ‹td>Exellent 6</td›
- 10. 6 teIerik Data and Header Cells Live Demo
- 12. 6 teIerik Complete HTML Tables +Table rows split into three semantic sections: header, body and footer ‹thead› denotes table header and contains ‹ t h › elements, instead of <td› elements ‹tbody› denotes collection of table rows that contain the very data ‹I-Foot› denotes table footer but comes BEFORE the ‹tbody› tag ‹co1group› and <col> define columns (used to set column widths)
- 13. ‹col style=“width:100px“ />‹col /> header ‹tr><th>Co1umn 1</th›‹th>Column 2</th>‹/tr› ‹tr›‹td›Footer 1</td›‹td›Footer 2‹/td›‹/tr> ‹I r› ‹Id›Cell 1. 1‹/td› ‹Id›Cell 1.2‹/td›‹/t r› ‹tr›‹td›Cell 2.l‹/td›‹td›Cell 2.2‹/td›‹/tr› ‹/tbody› </table>
- 14. the before
- 17. Nested Tables • Table "cells" (‹Id›) can contain nested tables (tables within tables): nested-tables.html
- 19. 6 teIerik With Padding, Spacing and Stuff
- 20. 6 te ierik Cell Spacing and Padding +Tables have two attributes related to space •cellspacing •cellpadding • Defines the • Defines the empty empty space space around the cell between cels content
- 21. 6 te ierik Cell Spacing and Padding — table-cells.html Example fhtml› <head›‹title›Table Cel1s</title›‹/head› ‹body› cellpadding=“0'› ‹table cellspacing=“l5“ <tr>‹td>First</td> ‹td>Second‹/td></tr› ‹/table› <br/> ‹table cellspacing="0' ce1lpadding="10"› ‹tr>‹td›First‹/td›‹td›Second‹/td›‹/tr› </table› ‹/body> ‹/htm1›
- 22. 6 te ierik Cell Spacing and Padding — table-cells.html Example (z)
- 23. e e k Live Demo
- 24. 6 teIerik Row and Column How to make a two-cells column? Or row?
- 25. 6 teIerik Column and Row Span +Cells have two attributes related to merging • colspan • roøspan many columns many rows the the cell occupies cell occupies
- 26. Pte Ierik table-colspan-rowspan.html Column and Row Span — Example stable ceIlspacing=”0”› ‹tr class=”1”›‹td›Cell[1,1]‹/td› ‹td colspan=”2”>Cell[2,1]‹/{d›‹/tr> ‹tr class:”2”>‹{d›Cell[1,2a/td> ‹td rowspan-”2”›Cell[2,2]‹/td> ‹td>Cell[3,2]</td›‹/try ‹tr class:”3”›‹{d>Cel1[1,3]‹/td› ‹td>Cell[2,3]</td>‹/tr> ‹/table> 6
- 27. 6 teIerik Column and Row Span — table-colspan-rowspan.html Example (z)
- 28. 6 teIerik
- 29. Entering User Data from aWeb Page
- 30. 6 teIerik What are HTML s Forms? +The primary method for gathering data from site visitors • HTML s Forms can contain Text fields for the user to type Buttons for interactions like "Register", "Login", ”Search“ Menus, Sliders, etc... • Check Google, Yahoo, Facebook Google search field is a simple Text field
- 31. • Create a form block with
- 32. 6 teIerik Text Fields • Single-line text input fields: <input type:'text“ name='FirstName“ value-“This is a text field' /› • Multi-line text input fields (textarea): ‹textarea name="Comments”>This is a multi-line text field</textarea> • Password input —a text field which masks the entered text with * signs cinpu Type-"passtood" name-"pass" f
- 33. 6 teIerik Buttons • Reset button — brings the form to its initial state ‹input type=”reset” name="resetBtn" value=”Reset the form” /› • Submit button: ‹input type="submit” value=”Apply Now“ /> • Image button —acts like submit but image is displayed and click coordinates are sent ‹input type=”image” src=”submit.gif" name=”submitBtn" alt=”Submit" /› • Ordinary button —no default action, used with JS <input type=“button" value=“click me“ /›
- 34. 6 telerik Checkboxes and Radio Buttons • Checkboxes: name-"fruit“ <input type=”checkbox“ value=“apple' /› • Radio buttons: ‹input type='radio“ name=“title' value=“Mr.“ /› • Radio buttons can be grouped, allowing only one to be selected from a group: <input type=“radio' name=“city' value= 'Lom" /> <input type=“radio' name=“city" value="Ruse“ /›
- 35. 6 teIerik Select Fields + Dropdown menus: <select name="gender”> <option value=“Value 1“ selected=“selected"›Male‹/option› ‹option value=“Value 2“›Female‹/options ‹option ‹/select› value="Value 3"›Other‹/options + Multiple-choice menus <select name=”products" multiple="multiple“ <option va1ue=”Value 1” se1ected=”selected”>keyboard</options <option va1ue=”Value 2”>mouse<foption> </selects 35
- 36. Hidden Fields • Hidden fields contain invisible data <input type="hidden“ name-“Account“ is a hidden text field“ /> value-“This Not shown to the user Used by JavaScript and server-side code ViewState, SessionState,etc: g6
- 37. 6 teIerik Labels • Labels are used to associate an explanatory text to a form field using the field's ID. <label for=”fn”›First Name</label› <input type=”text" îd=”fn" /> • Clicking on a label focuses its associated field (checkboxes are toggled, radio buttons are checked) • Labels are both a usability and accessibility feature and are required in order to pass accessibility validation.
- 38. 6 teIerik Fieldsets • Fieldsets are used to enclose a group of related form fields: <form method=“post“ action=' form.aspx '> <fieldset> <legend›C1ient Details</legends <input <input type=“text" id='Name ' /> type=“text“ id=”Phone“ /> </fieldset› <fieldset> ‹legend>0rder Details‹/legend› <input type=“text" id-"Quantity ' /> <textarea cols=“40" rows=' 10“ id= 'Remarks '›</textarea> ‹/fieldset> </form> • The <Iegend> is the fieldset's title.
- 40. 6 teIerik Lets make it spin
- 41. 6 teIerik Range and Spinbox • Restricts users to enter only numbers Additional attributes min, max and step and value Can become Spinbox or Slider, depending on the input type <input <input type=”range" type=”number" min="0” min=”0” max=”100” /> max=”100” /> Have some differences on different browsers Sliders and Spinboxes do not work on Firefox Shown as regular textboxes
- 42. 6 te Ierik Live Demo
- 43. 6 teIerik Attributes from HTML s • Autocomplete The browser stores the previously typed values Brings them back on a later visit on the same page • Autofocus The field becomes on focus on page load • Required The field is required to be filled/selected
- 44. 6 telerik Input Fields with Validation +Email — provides a simple validation for email Can be passed a pattern for validation On a mobile device brings the email keyboard ‹input type="emaîl" required="true" pattern=”[’ @]*@[’ @].}’ @j“/> • URL — has validation for url On a mobile device brings the url keyboard ‹input type=“url" required="true" /› +Telephone Brings the numbers keyboard inpu pe= tel required= ue /
- 46. 6 teIerik Tablndex +The tabindex HTML attribute controls the order in which form fields and hyperlinks are focused when repeatedly pressing the TAB key tabindex="o" (zero) - "natural" order If X <Y, then elements with tabindex="X" are iterated before elements with tabindex="Y" Elements with negative tabindex are skipped, however, this is not defined in the standard input t pe ext abindex /› 6
- 47. 6 teIerik Tab index Live Demo
- 48. 6 teIerik HTML Frames <frameset›, <frame›and <iframe>
- 49. 6 teIerik HTML Frames +Frames provide a way to show multiple HTML documents in a single Web page • The page can be split into separate views (frames) horizontally and vertically • Frames were popular in the early ages of HTML development, but now their usage is rejected • Frames are not supported by all user agents (browsers, search engines, etc.) A <noframes> element is used to provide content for non-compatible agents.
- 50. HTML Frames Demo ‹head›‹title›Frames Examples/title›</head> ‹frameset cols=”180px,*,150px”› ‹frame src=”left.html“ /› ‹frame src-”middle.html” /> ‹frame src="right.html" /› ‹/f-rame set › </html› + Note the target attribute applied to the ‹a› elements in the left frame. 5
- 51. 6 teIerik Inline Frames: <iframe› +Inline frames provide a way to show one website inside another website: iframe-demo.html ‹iframe name="iframeGoogle“ src=”http://www.google.com“ scrollìng=”yes”›‹/iframe› width=”600" height="400” frameborder=”yes“ 5
- 53. Create a Web Page like the following using forms: • Create Web Pages like the following using tables: Member name : Email : SChooÎ : C I Title does here A B D E F G H K L RI I N O *req *req *req
- 55. t. Create a Calculator-like table. You should use a HTML s form for the Calculator Buttons for all the numbers and operators (+, -, etc.) Textbox for the result Do not make the same styles as the example. 123 1 2 3 + 4 5 6 - 7 8 9 *
- 57. Drag a column deader and drDQ it he-e to group by that coTiumn firoductlD Product name Unit price Units n stock Discontinued Char OO 10 boxes x20 bags Chang OO 24 - 12 oz bottles Aniseed Syrup 510.00 Chef Anton's Cajun Seasoning OO ]2O S3Q00 Northwoods C ranberry Sauce Misht lobe Niku V0.00 00 10 00 I7 - 200 ml ars
- 58. A b l e Toshiba Lenovo Dell Asus Hacer HP AppleMacBook Air AppleMacBookAir Min price: soo USD M X price: •5OO US D Min RAM: 4 GB Max RAM: z6 GB 64 BSSD 6 GB SSD KGB DDR aG8 DDR 3 OU5D Intel Core 's 3OoU5D Intel Core iç Apple MacBook Air Apple MacBook Air 6 GB SSD 6 GBSSD zGBDDR 2GBDDR *3^OUSD IntelCore s •3•OUSD IntelCore 's AppleMacBookAir AppleMacBook Air ü4GB SSD 6,GBSS KGBDDR aGBDDR 300USD IntelCore '5 3 0USD IntelCore ‹s