Scribd
Upload
4 views41 pages

WEBAPP Lesson 4

The document provides a comprehensive guide on HTML tables, forms, and video embedding. It covers the creation and usage of tables, including attributes like borders, padding, and spanning cells, as well as the various input controls available in HTML forms. Additionally, it explains how to embed videos in a webpage using the <video> tag and its attributes.

Uploaded by

Rovell Asidera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
4 views41 pages

WEBAPP Lesson 4

The document provides a comprehensive guide on HTML tables, forms, and video embedding. It covers the creation and usage of tables, including attributes like borders, padding, and spanning cells, as well as the various input controls available in HTML forms. Additionally, it explains how to embed videos in a webpage using the <video> tag and its attributes.

Uploaded by

Rovell Asidera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 41

HTML TAGS

IMPORT YOUR 3D MODELS


(TABLES,
Learn how to leverage your 3D expertise in Office Applications

FORMS
AND VIDEOS)
Chapter Objectives
At the end of the chapter, students are expected to:

a. Learn how tables are created in HTML and what they are
useful for.

b. Build an HTML page with the application of forms.

c. Determine how to insert a video in a webpage through


applying the correct syntax.
HTML TABLES
A table is an arrangement of data in rows and
columns, or possibly in a more complex structure. Tables
are widely used in communication, research, and data
analysis.

• Tables are useful for various tasks such as


presenting text information and numerical data.
• Tables can be used to compare two or more items
in tabular form layout.
• Tables are used to create databases.
DEFINING TABLES IN HTML
An HTML table is defined with the “table” tag. Each table
row is defined with the “tr” tag.

A table header is defined with the “th” tag. By default,


table headings are bold and centered.

A table data/cell is defined with the “td” tag.


Table Example
Example Output
Important Table options in HTML:

• Adding a border to a HTML Table:


A border is set using the CSS border property. If you do
not specify a border for the table, it will be displayed without
borders.
Important Table options in HTML:

• Adding Collapsed Borders in a HTML Table.


For borders to collapse into one border, add the CSS
border-collapse property.
Important Table options in HTML:

• Adding Cell Padding in a HTML Table:


Cell padding specifies the space between the cell
content and its borders. If we do not specify a padding, the
table cells will be displayed without padding.
Important Table options in HTML:

• Adding Left Align Headings in a HTML Table :


By default the table headings are bold and
centered. To left-align the table headings, we must use
the CSS text-align property.
Important Table options in HTML:

• Adding Border Spacing in a HTML Table


Border spacing specifies the space between the
cells. To set the border spacing for a table, we must use
the CSS border-spacing property.
Important Table options in HTML:

• Adding Cells that Span Many Columns in HTMl Tables


To make a cell span more than one column, we
must use the colspan attribute.
Important Table options in HTML:

• Adding Cells that Span Many Rows in HTML Tables:


To make a cell span more than one row, we must
use the rowspan attribute:
Important Table options in HTML:

• Adding a Caption in a HTML Table:


To add a caption to a table, we must use the
“caption” tag.
Important Table options in HTML:

• Adding a Background Colour To a Table in


HTML:
A color can be added as a background in HTML
table using the “background-color” option.
Important Table options in HTML:

• Creating Nested Tables in HTML

Nesting tables simply means making a Table


inside another Table.

Nesting tables can lead to complex tables


layouts, which are visually interesting and have the
potential of introducing errors.
Important Table options in HTML:
• Creating Nested Tables in HTML
Important Table options in HTML:
• Creating Nested Tables in HTML
HTML Forms
• HTML Forms are required, when you want to collect
some data from the site visitor. For example, during user
registration you would like to collect information such as
name, email address, credit card, etc.

• A form will take input from the site visitor and then will
post it to a back-end application such as CGI, ASP Script
or PHP script etc.

• There are various form elements available like text


fields, textarea fields, drop-down menus, radio buttons,
checkboxes, etc.
HTML Forms

Syntax:

<form action = "Script URL" method = "GET|POST">


form elements like input, textarea etc.
</form>
HTML Forms
HTML Form Controls

o Text Input Controls


o Checkboxes Controls
o Radio Box Controls
o Select Box Controls
o File Select boxes
o Hidden Controls
o Clickable Buttons
o Submit and Reset Button
HTML Forms

Text Input Controls

There are three types of text input used on forms −

o Single-line text input controls


o Password input controls
o Multi-line text input controls
HTML Forms

Single-line text input controls

This control is used for items that require only one line
of user input, such as search boxes or names. They are
created using HTML <input> tag.
HTML Forms
Example: Output:
HTML Forms

Sr.No Attribute & Description

1 type

Indicates the type of input control and for text input control it will be set to text.

2 name

Used to give a name to the control which is sent to the server to be recognized and get
the value.

3 value

This can be used to provide an initial value inside the control.

4 size

Allows to specify the width of the text-input control in terms of characters.

5 maxlength

Allows to specify the maximum number of characters a user can enter into the text box.
HTML Forms

Password Input Controls

This is also a single-line text input but it masks the


character as soon as a user enters it. They are also created
using HTML <input>tag but type attribute is set to password.
HTML Forms
Example Output
HTML Forms
Multiple-Line Text Input Controls

This is used when the user is required to give details that may
be longer than a single sentence. Multi-line input controls are
created using HTML <textarea> tag.

Example Output
HTML Forms
Multiple-Line Text Input Controls

Sr.No Attribute & Description


1 name
Used to give a name to the control which is sent to the
server to be recognized and get the value.
2 rows
Indicates the number of rows of text area box.
3 cols
Indicates the number of columns of text area box
HTML Forms
Checkbox Control

Checkboxes are used when more than one option is


required to be selected. They are also created using HTML
<input> tag but type attribute is set to checkbox.

Example Output
HTML Forms
Checkbox Control
Sr.No Attribute & Description

1 type

Indicates the type of input control and for checkbox input control it will be set
to checkbox..

2 name

Used to give a name to the control which is sent to the server to be recognized
and get the value.

3 value

The value that will be used if the checkbox is selected.

4 checked

Set to checked if you want to select it by default.


HTML Forms
Radio Button Control

Radio buttons are used when out of many options, just one
option is required to be selected. They are also created using
HTML <input> tag but type attribute is set to radio.

Example Output
HTML Forms
Radio Button Control
Sr.No Attribute & Description

1 type

Indicates the type of input control and for checkbox input control it will be set to
radio.

2 name

Used to give a name to the control which is sent to the server to be recognized and
get the value.

3 value

The value that will be used if the radio box is selected.

4 checked

Set to checked if you want to select it by default.


HTML Forms

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.

Example Output
HTML Forms

Attributes of <select> tag Attributes of <option> tag

Sr. Attribute & Description Sr. Attribute & Description


No N
o
1 name
1 value
Used to give a name to the control which is sent to
the server to be recognized and get the value. The value that will be used if an option in the select
box box is selected.
2 size
2 selected
This can be used to present a scrolling list box.
Specifies that this option should be the initially
3 multiple selected value when the page loads.
If set to "multiple" then allows a user to select 3 label
multiple items from the menu.
An alternative way of labeling options
HTML Forms
File Upload Box

If you want to allow a user to upload a file to your web


site, you will need to use a file upload box, also known as a file
select box. This is also created using the <input> element but
type attribute is set to file.
Sr.N Attribute & Description
o

1 name

Used to give a name to the control which is sent to the server to be recognized
and get the value.

2 accept

Specifies the types of files that the server accepts.


HTML Forms

Example

Output
HTML Forms

Button Controls

There are various ways in HTML to create clickable buttons. You


can also create a clickable button using <input>tag by setting
its type attribute to button.
Example Output
HTML Forms

Hidden Form Controls

Hidden form controls are used to hide data inside the page
which later on can be pushed to the server. This control hides
inside the code and does not appear on the actual page. For
example, following hidden form is being used to keep current
page number.
HTML Forms

Example Output
HTML Video

The HTML <video> tag is used to embed video into your web
page, it has several video sources.
Example Output
HTML Video

Attribute Value Description

autoplay autoplay Specifies that the video will play automatically.

controls controls Specifies that the video controls gets displayed.

height pixels Specifies the height

loop loop Specifies that the video will start again every time after finish.

muted muted Specifies that the audio should be muted

poster URL Specifies the image to be shown while the video is downloading.

preload auto Specifies what author thinks will lead to user experience at its
metadata best.
none

src URL Specifies the URL

width pixels Specifies the width

You might also like