WEB DEVELOPMENT
SE102.3
CHAPTER 02 – PART B
Introduction to HTML
Mr. Anton Jayakody
HTML TABLES
The HTML tables allow web authors to arrange data like text, images,
links, other tables, etc. into rows and columns of cells.
A table in HTML consists of table cells inside rows and columns.
The HTML tables are created using the <table> tag in which
the <tr> tag is used to create table rows and <td> tag is used to create
data cells.
Table Syntax
td stands for table data.
Everything between <td> and </td> are the
content of the table cell.
tr stands for table row.
Each table row starts with a <tr> and ends with
a </tr> tag.
th stands for table header.
To convert the tables cells to table header cells
we use <th> tag.
HTML Table Tags
Tag Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML Table - Colspan
• To make a cell span over multiple columns, use the colspan attribute.
HTML Table - rowspan
Make a cell span over multiple rows, use the rowspan attribute
HTML Media - HTML Video
The HTML <video> element is used to show a video on a web page.
Note: Only MP4, WebM, and Ogg video are supported by the HTML standard.
EXAMPLE
The controls attribute adds video controls, like play, pause, and volume.
HTML AUDIO
The HTML <audio> element is used to play an audio file on a web page.
Note: Only MP3, WAV, and OGG audio are supported by the HTML standard.
EXAMPLE
The controls attribute adds audio controls, like play, pause, and volume.
HTML Form
An HTML form is a section of a document which contains controls such as text
fields, password fields, checkboxes, radio buttons, submit button, menus etc.
HTML forms are required if you want to collect some data from of the site visitor.
For example: If a user want to purchase some items on internet, he/she must fill
the form such as shipping address and credit/debit card details so that item can be
sent to the given address.
HTML Form Syntax
<form action="server url" method="get|post">
//input controls e.g. textfield, textarea, radiobutton,
button
</form>
HTML Form Tags
Tag Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<textarea> It defines a multi-line input control.
<label> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<select> It defines a drop-down list.
<optgroup> It defines a group of related options in a drop-down list.
<option> It defines an option in a drop-down list.
<button> It defines a clickable button.
HTML TextField Control
The type="text" attribute of input tag creates textfield control also
known as single line textfield control.
HTML <textarea> tag
The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of
<textarea> can be specify either using "rows" or "cols" attribute or by CSS.
Label Tag in Form
It is considered better to have label in form.
If you click on the label tag, it will focus on the text control. To do so, you need
to have for attribute in label tag that must be same as id attribute of input tag.
HTML Password Field Control
The password is not visible to the user in password field control.
HTML Email Field Control
• The email field in new in HTML 5. It validates the text for correct email address.
• You must use @ and . in this field.
Radio Button Control
The radio button is used to select one option from multiple options. It is used for
selection of gender, quiz questions etc.
Using radio buttons for multiple options, you can only choose a single option at a
time.
Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.
Submit button control
• HTML <input type="submit"> are used to add a submit button on web page.
• When user clicks on submit button, then form get submit to the server.
HTML <fieldset> element
The <fieldset> element in HTML is used to group the related information of a form.
This element is used with <legend> element which provide caption for the grouped elements.
HTML <fieldset> element
The <fieldset> element in HTML is used to group the related information of a form.
This element is used with <legend> element which provide caption for the grouped elements.
Select Box Control
A select box, also called drop down box which provides option to list down
various options in the form of drop-down list, from where a user can select one
or more options.
Exercise
Exercise 02 – Create this table
