Chapter 5: Lists, Tables and Forms

Lists

Lists are used to display content which represents a list.

We will be studying two types of lists:

1. Unordered List (whose tag is <ul>)
2. Ordered List (whose tag is <ol>)

Unordered List

An unordered list is used to list items that do not have a specific order.

If the items are monitor, mouse, keyboard, then in unordered list, we get this type of list:

• Monitor
• Mouse
• Keyboard

And it's code is written as:

Ordered List

An ordered list is used to list items in a specific order, typically numbered.

If the items are monitor, mouse, keyboard, then in ordered list, we get this type of list:

1. Monitor
2. Mouse
3. Keyboard

And it's code is written as:

Tables

The <table> tag in HTML is used to define tables, which are used to format and display tabular data.

• <tr> tag: Used to display table row.
• <td> tag: Used to display table.
• <th> tag: Used in place of table data for displaying table heanders.

We can define as many table rows as we want. To add a caption to the table, we use <caption> tag inside table.

• <thead> tag: Used to wrap table head (<caption> and <tr> with <th>)
• <tbody> tag: Used to wrap the table body.

Example:

Colspan Attribute

This attribute is used to create cells spanning multiple columns.

HTML Forms

There are different form elements for different kinds of user input.

• <input> element: : Can be of type text, checkbox, radio, button and submit. We also have a ‘file’ type.
• <textarea> element: Defines a multiline text input ‘cols’ and ‘rows’ attributes can be used to size the text area.
• <slect> element: Defines a drop-down list.

Note: You don’t have to remember all the tags, you will automatically memorize them with practice.

Embedding Videos

To embed videos in HTML, you can use the generally, <video> tag for embedding local videos in local machine and <iframe> for publicly avaialable videos on Internet such as from YouTube along with various attributes to control its behavior when it comes to embedding local videos.

Attributed for Video

We can use the following attributes:

• src: Specifies the URL of the video file (video.mp4 in this case).
• width: Adjusts the width of the video player. Height adjusts automatically to maintain aspect ratio.
• controls: Displays video controls such as play, pause, volume, etc.
• autoplay: Automatically starts playing the video when the page loads.
• loop: Causes the video to automatically start over from the beginning when it reaches the end.
• preload: Specifies whether the video should be loaded when the page loads (auto, metadata, none).

Code to embedd YouTube videos:

The following YouTube video is embedded in this HTML file using same tag.