4. html 5 tables - forms - frames - web front-end
DESCRIPTION
Creating tables, forms and frames in html / html 5 Telerik Software Academy: http://html5course.telerik.com The website and all video materials are in Bulgarian HTML Tables: Simple Tables, Complete HTML 5 Tables, Data cells and Header cells, Nested Tables and Complex tables Cells Width, Cell Spacing and Cell Padding, Column and Row Span HTML Forms: Form Fields and Fieldsets, Text boxes, Buttons, Checkboxes and Radio Buttons, Select fields, Hidden fields, Validation fields, Sliders and Spinboxes HTML Frames: Frame and Noframe tags, IFramesTRANSCRIPT
![Page 1: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/1.jpg)
Insert a Picture Here
HTML 5 – Tables, Forms and Frames
Doncho Minkov
Telerik Software Academyacademy.telerik.com
Technical Trainerhttp://www.minkov.it
http://html5course.telerik.com
![Page 2: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/2.jpg)
Contents HTML Tables
Simple Tables
Complete HTML 5 Tables
Data cells and Header cells
Nested Tables Complex tables
Cells Width
Cell Spacing and Padding
Column and Row Span2
![Page 3: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/3.jpg)
Contents (2)
HTML Forms Form Fields and Fieldsets Text boxes Buttons Checkboxes and Radio Buttons Select fields Hidden fields Sliders and Spinboxes Validation fields
3
![Page 4: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/4.jpg)
Contents (3)
HTML Frames Frame and Noframe tags IFrames
4
![Page 5: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/5.jpg)
HTML Tables
![Page 6: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/6.jpg)
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: <table></table>: begin / end the table<tr></tr>: create a table row<td></td>: create tabular data (cell)
Tables should not be used for layout. Use CSS floats and positioning styles instead
6
![Page 7: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/7.jpg)
Simple HTML Tables – Example
7
<table cellspacing="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> <td><a href="lecture2.ppt">Lecture 2</a></td> </tr> <tr> <td><img src="zip.gif"></td> <td><a href="lecture2-demos.zip"> Lecture 2 - Demos</a></td> </tr></table>
![Page 8: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/8.jpg)
Simple HTML TablesLive Demo
![Page 9: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/9.jpg)
Data Cells and Header Cells
Two kinds of cells in HTML 5 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
<tr> <th>Full name</th> <th> Mark </th></tr><tr> <td>Doncho Minkov</td> <td>Very good 5</td></tr><tr> <td>Georgi Georgiev</td> <td>Exellent 6</td></tr>
9
![Page 10: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/10.jpg)
Data and Header Cells
Live Demo
![Page 11: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/11.jpg)
Complete HTML 5 Tables
With Header, Footer and Body
![Page 12: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/12.jpg)
Complete HTML Tables Table rows split into three semantic sections: header, body and footer <thead> denotes table header and
contains <th> elements, instead of <td> elements
<tbody> denotes collection of table rows that contain the very data
<tfoot> denotes table footer but comes BEFORE the <tbody> tag
<colgroup> and <col> define columns (used to set column widths)
12
![Page 13: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/13.jpg)
Complete HTML Table: Example
13
<table><colgroup> <col style="width:100px" /><col /></colgroup><thead> <tr><th>Column 1</th><th>Column 2</th></tr></thead><tfoot> <tr><td>Footer 1</td><td>Footer 2</td></tr></tfoot><tbody> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr></tbody></table>
header
footer
Last comes the body (data)
th
columns
![Page 14: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/14.jpg)
<table><colgroup> <col style="width:200px" /><col /></colgroup><thead> <tr><th>Column 1</th><th>Column 2</th></tr></thead><tfoot> <tr><td>Footer 1</td><td>Footer 2</td></tr></tfoot><tbody> <tr><td>Cell 1.1</td><td>Cell 1.2</td></tr> <tr><td>Cell 2.1</td><td>Cell 2.2</td></tr></tbody></table>
Complete HTML Table: Example (2)
14
table-full.html
Although the footer is before the data in the
code, it is displayed last
![Page 15: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/15.jpg)
Complete HTML 5 TablesLive Demo
![Page 16: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/16.jpg)
Nested TablesTables in Tables in Tables in Tables…
16
![Page 17: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/17.jpg)
Nested Tables Table "cells" (<td>) can contain
nested tables (tables within tables):
17
<table> <tr> <td>Contact:</td> <td> <table> <tr> <td>First Name</td> <td>Last Name</td> </tr> </table> </td> </tr></table>
nested-
tables.html
![Page 18: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/18.jpg)
Nested TablesLive Demo
![Page 19: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/19.jpg)
Complex TablesWith Padding, Spacing and Stuff
![Page 20: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/20.jpg)
cellpadding
Defines the empty space around the cell content
cellspacing
Defines the empty space between cells
Cell Spacing and Padding
Tables have two attributes related to space
20
cell cell
cell cell
cell
cell
cell
cell
![Page 21: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/21.jpg)
Cell Spacing and Padding – Example
21
<html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0"> <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10"> <tr><td>First</td><td>Second</td></tr> </table> </body></html>
table-
cells.html
![Page 22: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/22.jpg)
Cell Spacing and Padding – Example (2)
22
<html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0"> <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10"> <tr><td>First</td><td>Second</td></tr> </table> </body></html>
table-
cells.html
![Page 23: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/23.jpg)
Table Cell Spacing and Cell PaddingLive Demo
![Page 24: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/24.jpg)
Row and Column SpansHow to make a two-
cells column? Or row?
![Page 25: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/25.jpg)
rowspan
Defines how many rows the cell occupies
colspan
Defines how many columns the cell occupies
Column and Row Span Cells have two attributes related to merging
25
cell[1,1]
cell[1,2]
cell[2,1]
colspan="1"
colspan="1"
colspan="2"
cell[1,1]
cell[1,2]
cell[2,1]
rowspan="2"
rowspan="1"
rowspan="1"
![Page 26: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/26.jpg)
Column and Row Span – Example
26
<table cellspacing="0"> <tr class="1"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr> <tr class="2"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr class="3"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr></table>
table-colspan-rowspan.html
![Page 27: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/27.jpg)
<table cellspacing="0"> <tr class="1"><td>Cell[1,1]</td> <td colspan="2">Cell[2,1]</td></tr> <tr class="2"><td>Cell[1,2]</td> <td rowspan="2">Cell[2,2]</td> <td>Cell[3,2]</td></tr> <tr class="3"><td>Cell[1,3]</td> <td>Cell[2,3]</td></tr></table>
Column and Row Span –Example (2)
27
table-colspan-rowspan.html
Cell[2,3]
Cell[1,3]
Cell[3,2]Cell[2,2
]
Cell[1,2]
Cell[2,1]Cell[1,1
]
![Page 28: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/28.jpg)
Row and Columns SpansLive Demo
28
![Page 29: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/29.jpg)
HTML 5 FormsEntering User Data from a Web Page
![Page 30: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/30.jpg)
What are HTML 5 Forms?
The primary method for gathering data from site visitors
HTML 5 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 30
![Page 31: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/31.jpg)
How to Create Forms?
Create a form block with
Example:
31
<form></form>
<form name="myForm" method="post" action="path/to/some-script.php"> ...</form>
The "action" attribute tells where the form data
should be sent
The "method" attribute tells how the form data should be sent – via GET
or POST request
![Page 32: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/32.jpg)
Text Fields Single-line text input fields:
Multi-line text input fields (textarea):
Password input – a text field which masks the entered text with * signs
32
<input type="text" name="FirstName" value="This is a text field" />
<textarea name="Comments">This is a multi-line text field</textarea>
<input type="password" name="pass" />
![Page 33: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/33.jpg)
Buttons Reset button – brings the form to its
initial state
Submit button:
Image button – acts like submit but image is displayed and click coordinates are sent
Ordinary button – no default action, used with JS
33
<input type="reset" name="resetBtn" value="Reset the form" />
<input type="image" src="submit.gif" name="submitBtn" alt="Submit" />
<input type="button" value="click me" />
<input type="submit" value="Apply Now" />
![Page 34: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/34.jpg)
Checkboxes and Radio Buttons
Checkboxes:
Radio buttons:
Radio buttons can be grouped, allowing only one to be selected from a group:
34
<input type="checkbox" name="fruit" value="apple" />
<input type="radio" name="title" value="Mr." />
<input type="radio" name="city" value="Lom" /><input type="radio" name="city" value="Ruse" />
![Page 35: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/35.jpg)
Select Fields Dropdown menus:
Multiple-choice menus
35
<select name="gender"> <option value="Value 1" selected="selected">Male</option> <option value="Value 2">Female</option> <option value="Value 3">Other</option></select>
<select name="products" multiple="multiple"> <option value="Value 1" selected="selected">keyboard</option> <option value="Value 2">mouse</option></select>
![Page 36: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/36.jpg)
Hidden Fields
Hidden fields contain invisible data
Not shown to the user Used by JavaScript and server-side
code ViewState, SessionState, etc..
36
<input type="hidden" name="Account" value="This is a hidden text field" />
![Page 37: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/37.jpg)
Labels Labels are used to associate an
explanatory text to a form field using the field's ID.
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.
37
<label for="fn">First Name</label><input type="text" id="fn" />
![Page 38: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/38.jpg)
Fieldsets Fieldsets are used to enclose a group
of related form fields:
The <legend> is the fieldset's title.38
<form method="post" action="form.aspx"> <fieldset> <legend>Client Details</legend> <input type="text" id="Name" /> <input type="text" id="Phone" /> </fieldset> <fieldset> <legend>Order Details</legend> <input type="text" id="Quantity" /> <textarea cols="40" rows="10" id="Remarks"></textarea> </fieldset></form>
![Page 39: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/39.jpg)
HTML 5 FormsInputs Fields
Live Demo
![Page 40: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/40.jpg)
Sliders and SpinboxesLets make it spin
![Page 41: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/41.jpg)
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
Have some differences on different browsers
Sliders and Spinboxes do not work on Firefox Shown as regular textboxes
41
<input type="range" min="0" max="100" /><input type="number" min="0" max="100" />
![Page 42: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/42.jpg)
Sliders and SpinboxesLive Demo
![Page 43: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/43.jpg)
Attributes from HTML 5 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
43
![Page 44: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/44.jpg)
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
URL – has validation for url On a mobile device brings the url
keyboard
Telephone Brings the numbers keyboard
44
<input type="email" required="true" pattern="[^ @]*@[^ @].[^ @]"/>
<input type="url" required="true" />
<input type="tel" required="true" />
![Page 45: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/45.jpg)
HTML Forms Validation
Live Demo
![Page 46: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/46.jpg)
TabIndex The tabindex HTML attribute controls the order in which form fields and hyperlinks are focused when repeatedly pressing the TAB key tabindex="0" (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
46
<input type="text" tabindex="10" />
![Page 47: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/47.jpg)
Tab IndexLive Demo
![Page 48: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/48.jpg)
HTML Frames<frameset>, <frame> and <iframe>
![Page 49: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/49.jpg)
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.
49
![Page 50: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/50.jpg)
HTML Frames – Demo
50
<html>
<head><title>Frames Example</title></head>
<frameset cols="180px,*,150px"> <frame src="left.html" /> <frame src="middle.html" /> <frame src="right.html" /> </frameset>
</html>
frames.ht
ml
Note the target attribute applied to the <a> elements in the left frame.
![Page 51: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/51.jpg)
Inline Frames: <iframe> Inline frames provide a way to show one website inside another website:
51
<iframe name="iframeGoogle" width="600" height="400" src="http://www.google.com" frameborder="yes" scrolling="yes"></iframe>
iframe-
demo.html
![Page 52: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/52.jpg)
форум програмиране, форум уеб дизайнкурсове и уроци по програмиране, уеб дизайн – безплатно
програмиране за деца – безплатни курсове и уроцибезплатен SEO курс - оптимизация за търсачки
уроци по уеб дизайн, HTML, CSS, JavaScript, Photoshop
уроци по програмиране и уеб дизайн за ученициASP.NET MVC курс – HTML, SQL, C#, .NET, ASP.NET MVC
безплатен курс "Разработка на софтуер в cloud среда"
BG Coder - онлайн състезателна система - online judge
курсове и уроци по програмиране, книги – безплатно от Наков
безплатен курс "Качествен програмен код"
алго академия – състезателно програмиране, състезания
ASP.NET курс - уеб програмиране, бази данни, C#, .NET, ASP.NETкурсове и уроци по програмиране – Телерик академия
курс мобилни приложения с iPhone, Android, WP7, PhoneGap
free C# book, безплатна книга C#, книга Java, книга C#Дончо Минков - сайт за програмиранеНиколай Костов - блог за програмиранеC# курс, програмиране, безплатно
?
? ? ??
?? ?
?
?
?
??
?
?
? ?
Questions?
?http://academy.telerik.com
HTML 5 – Tables, Forms and Frames
![Page 53: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/53.jpg)
Homework
53
1. Create Web Pages like the following using tables:
2. Create a Web Page like the following using forms:
![Page 54: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/54.jpg)
Homework (2)
3. Create a Web form that looks like this sample:
54
![Page 55: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/55.jpg)
Homework (3)
4. Create a Calculator-like table. You should use a HTML 5 form for the Calculator
Buttons for all the numbersand operators (+, -, etc.)
Textbox for the result
Do not make the same stylesas the example.
55
![Page 56: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/56.jpg)
Homework (4)
5. Create the following using tables and forms:
56
![Page 57: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/57.jpg)
Homework (5)6. Construct the following Grid
component:
Try to make a HTML page, that looks just like the example
Not required to style for the homework 57
![Page 58: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/58.jpg)
Homework (7)7. Create the following HTML 5 Page
Hint: Use Fieldsets and Nested tables
58
![Page 59: 4. HTML 5 Tables - Forms - Frames - Web Front-End](https://reader033.vdocuments.net/reader033/viewer/2022061212/5495466fb479598d538b48d7/html5/thumbnails/59.jpg)
Free Trainings @ Telerik Academy
"Web Design with HTML 5, CSS 3 and JavaScript" course @ Telerik Academy html5course.telerik.com
Telerik Software Academy academy.telerik.com
Telerik Academy @ Facebook facebook.com/TelerikAcademy
Telerik Software Academy Forums forums.academy.telerik.com