Chapter 4_HTML Tags (Tables, Forms, Videos, and Audios)

table

• is an arrangement of data in rows and columns, or possibly in a more complex structure.

• widely used in communication, research, and data analysis.

table

• useful for various tasks such as presenting text information and numerical data.

• can be used to compare two or more items in tabular form layout.

• used to create databases

table

An HTML table is defined with the "_____" tag.

tr

Each table row is defined with the "__" tag.

th

A table header is defined with the "__" tag.

Bold, centered

By default, table headings are ____ and _________.

td

A table data/cell is defined with the "__" tag

border

A border is set using the CSS ______ property.

Without borders

If you do not specify a border for the table, it will be displayed _______ _______

border-collapse

For borders to collapse into one border, add the CSS ______-________ property

Cell padding

• specifies the space between the cell content and its borders.

• If we do not specify such, the table cells will be displayed without it.

Text-align

• By default the table headings are bold and centered.

• To left-align the table headings, we must use the CSS ____-_____ property

Border spacing

specifies the space between the cells

Border-spacing

To set the border spacing for a table, we must use the CSS ______-_______ property

colspan

To make a cell span more than one column, we must use the _______ attribute

Rowspan

To make a cell span more than one row, we must use the _______ attribute

Caption

To add a caption to a table, we must use the "_______" tag

Background-color

A color can be added as a background in HTML table using the "__________-_____" option

Nesting

• _______ tables simply means making a Table inside another Table.

• Such tables can lead to complex tables layouts, which are visually interesting and have the potential of introducing errors

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.

Input

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

Form elements

There are various ____ ________ available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc

Text Input Controls

There are three types of ____ _____ ________ used on forms: single line, password, multi-line

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.

Input

Single-line text input controls are created using HTML <_____> tag.

Type

in Single-line text input controls. Indicates the type of input control and for text input control it will be set to text.

Name

in Single-line text input controls. Used to give a name to the control which is sent to the server to be recognized and get the value.

Value

in Single-line text input controls. This can be used to provide an initial value inside the control.

Size

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

Maxlength

in Single-line text input controls. Allows to specify the maximum number of characters a user can enter into the text box

Password Input Controls

This is also a single-line text input but it masks the character as soon as a user enters it.

Password

Password Input Controls are also created using HTML tag but type attribute is set to ________

Multi-Line Text Input Controls

This is used when the user is required to give details that may be longer than a single sentence.

Textarea

Multi-line input controls are created using HTML <________> tag

Name

in Multi-Line Text Input Controls. Used to give a name to the control which is sent to the server to be recognized and get the value.

Rows

in Multi-Line Text Input Controls. Indicates the number of rows of text area box.

Cols

in Multi-Line Text Input Controls. Indicates the number of columns of text area box

Checkboxes

are used when more than one option is required to be selected.

checkbox

Checkboxes are also created using HTML tag but type attribute is set to ________

Type

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

Name

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

Value

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

Checked

in checkboxes. Set to _______ if you want to select it by default

Radio buttons

are used when out of many options, just one option is required to be selected.

radio

Radio buttons are also created using HTML tag but type attribute is set to _____.

Type

in radio buttons. Indicates the type of input control and for checkboxinput control it will be set to radio.

Name

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

Value

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

Checked

in radio buttons. Set to _______ if you want to select it by default

select box

A ______ ___, 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

Name

in select box, attribute of /tag. Used to give a name to the control which is sent to the server to be recognized and get the value

Size

in select box, attribute of /tag. This can be used to present a scrolling list box

Multiple

in select box, attribute of /tag. If set to "multiple" then allows a user to select multiple items from the menu

Value

in select box, attribute of /tag. The value that will be used if an option in the select box is selected

Selected

in select box, attribute of /tag. Specifies that this option should be the initially selected value when the page loads

Label

in select box, attribute of /tag. An alternative way of labeling options

file upload box

• If you want to allow a user to upload a file to your web site, you will need to use a ____ ______ ___, also known as a file select box.

• This is also created using the element but type attribute is set to file

Button controls

There are various ways in HTML to create clickable buttons.

Button

You can also create a clickable button using /tag by setting its type attribute to ______.

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

Video

The HTML <_____> tag is used to embed video into your webpage and has several video sources

autoplay

video attribute. Specifies that the video will play automatically

controls

video attribute. Specifies that the video controls gets displayed

height

video attribute. in pixels. Specifies the height

loop

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

muted

video attribute. Specifies that the audio should be muted

poster

video attribute. in url. Specifies the image to be shown while the video is downloading

preload

video attribute. either auto, metadata, or none. Specifies what author thinks will lead to user experience at its best.

src

video attribute. Specifies the URL

width

video attribute. Specifies the width

Audio

HTML supports <_____> tag which is used to embed sound content in an HTML or XHTML document as follows

HTML5

The current _____ draft specification does not specify which audio formats browsers should support in the audio tag. But most commonly used audio formats are ogg, mp3 and wav.

autoplay

audio attribute. this boolean attribute, if specified, will make the audio automatically begin to play back as soon as it can do so without stopping to finish loading the data

autobuffer

audio attribute. this boolean attribute, if specified, will make the audio automatically begin buffering even if it's not set to autoplay

controls

audio attribute. if present, it will allow the user to control audio playback, including volume, seeking, and pause/resume playback

loop

audio attribute. this boolean attribute, if specified, will allow audio to automatically seek back to the start after reaching the end

preload

audio attribute. specifies that the audio will be loaded at page load, and ready to run. ignored if autoplay is present

src

audio attribute. The url of the audio to be embedded. This is optional as you can also use the element within the block to specify it.

abort

html audio and video event tag attribute (handling media event). This event is generated when playback is aborted

canplay

html audio and video event tag attribute (handling media event). Generated when enough data is available that the media can be played

ended

html audio and video event tag attribute (handling media event). Generated when playback completes

error

html audio and video event tag attribute (handling media event). Generated when an error occurs

loadeddata

html audio and video event tag attribute (handling media event). Generated when the first frame of the media has finished loading

loadstart

html audio and video event tag attribute (handling media event). Generated when loading of the media begins

pause

html audio and video event tag attribute (handling media event). Generated when playback is paused

play

html audio and video event tag attribute (handling media event). Generated when playback starts or resumes

progress

html audio and video event tag attribute (handling media event). Generated periodically to inform the progress of the downloading of the media

ratechange

html audio and video event tag attribute (handling media event). Generated when the playback speed changes

seeked

html audio and video event tag attribute (handling media event). Generated when a seek operation completes

seeking

html audio and video event tag attribute (handling media event). Generated when a seek operation begins

suspend

html audio and video event tag attribute (handling media event). Generated when loading of the media is suspended

volumechange

html audio and video event tag attribute (handling media event). Generated when the audio volume changes

waiting

html audio and video event tag attribute (handling media event). Generated when the requested action (such as playback) is delayed pending the completion of another operation (such as seek)