Scribd
Upload
9 views

Htmlslide 1

The document discusses various HTML tags for lists, media, and tables. It describes: 1) The <dl>, <dt>, and <dd> tags for definition lists to define terms and descriptions. 2) The <a> tag and mailto: attribute to create email links. 3) The <audio> and <video> tags to embed audio and video with attributes like src, controls and autoplay. 4) The <table>, <tr>, <th>, <td> tags to define tables with rows and cells, and attributes like border, cellpadding and cellspacing.

Uploaded by

Govardhan Reghuram
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Htmlslide 1

The document discusses various HTML tags for lists, media, and tables. It describes: 1) The <dl>, <dt>, and <dd> tags for definition lists to define terms and descriptions. 2) The <a> tag and mailto: attribute to create email links. 3) The <audio> and <video> tags to embed audio and video with attributes like src, controls and autoplay. 4) The <table>, <tr>, <th>, <td> tags to define tables with rows and cells, and attributes like border, cellpadding and cellspacing.

Uploaded by

Govardhan Reghuram
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

HTML

Definition List, Email ,Audio,Video and Table tag


Definition List

Definition list is the list of items with a description of each


item. We use <dl> tag for definition list, <dt> for definition
term, and <dd> for definition description. For example,

<dl> Output:
<dt>Coffee</dt> Coffee
<dd>Black hot drink</dd> Black hot drink
<dt>Milk</dt> Milk
<dd>White cold drink</dd> White cold drink
</dl>
HTML Email Tag
HTML <a> tag provides us an option to specify an
email address to send an email. While using <a> tag as
an email tag, we will use mailto: email address along
with href attribute.
Syntax
<a href =“mailto: [email protected] > Send email
</a>
Media Tags: Audio and Video
 HTML 5 has introduced two new multimedia tags, AUDIO and VIDEO,
for displaying the audio and video streams on a Web page

 We can play the multimedia files, which are stored in our local
computer, on the Web page by specifying their location. The src
attribute is used to specify the multimedia file to play it on the Web
page.

 If browser does not support AUDIO and VIDEO tags, then the text are
displayed on the Web page
HTML <audio> tag
 HTML <audio> tag is used to play an audio file in HTML.
 Example
<audio controls>
<source src=“songs.ogg” type=“audio/ogg”>
<source src=“songs.mp3” type=“audio/mpeg”>
<source src=“songs.wav” type=“audio/wav”>
Your browser does not support the audio tag
</audio>
Attributes of AUDIO tag
Attribute Description

autoplay Plays the audio file as soon as the Web


page loads
controls Displays the controls on the Web page,
such as play and pause buttons

loop Replay the audio file

preload Specifies whether the audio file is


preloaded on the Web page or not
src Provides the location of the audio file to
play
HTML <video> tag
 HTML <video> tag is used to show a video in HTML.
 Example
<video width=“320” height=“240” autoplay>
<source src=“songs.ogg” type=“video/ogg”>
<source src=“songs.mp4” type=“video/mp4”>
Your browser does not support the video tag
</video>
Attributes of VIDEO tag
Attribute Description
Audio Controls the default state of the video’s audio channel
Autoplay Plays the audio file as soon as the Web page loads
Controls Displays the controls on a Web page, such as play and pause buttons

Height Specifies the height of the VIDEO tag


Loop Replay the video file
Preload Specifies whether the video file is preloaded on the Web page or not

Poster Provides an image to be displayed when the video file is not available

Src Provides the location of the video file to play


Width Specifies the width of the VIDEO tag
Tables
 Tables are used to display data in Tabular format, containing rows and columns,
on the screen. The <table> tag defines an HTML table. A simple HTML table
consists of the table element and one or more tr, th, and td elements.
 The tr element defines a table row, the th element defines a table header, and the
td element defines a table cell.
 A more complex HTML table may also include caption, col, colgroup, thead,
tfoot, and tbody elements.
 The table element can contain the following:
 <CAPTION>: It is used to specify the caption (Label) for the table. The
CAPTION element, by default is center-aligned at the top of the Table. It’s
ALIGN attribute that takes value left, right, center can be used to align the
caption. The <CAPTION> tag should appear inside <TABLE>.

 <TR>: Table row, is to specify the row in the table. It holds <TH> Table
Heading and <TD> Table Data.
 <TH>: Table Header, is used for giving Heading to Table. By default header
elements contents are in bold font and center-aligned.
 <TD>: Table Data, within the row you create columns by <TD> tag. The
Table data can consist of lists, images, forms and other element. The TD is a true
container that can hold other HTML elements, even more tables.
 Example: A simple HTML table, containing <HTML>
two columns and two rows:
<HTML>
<HEAD>
<TITLE> A SIMPLE TABLE IN HTML </TITLE>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TH>MONTH</TH>
<TH>SAVINGS</TH>
</TR>
<TR>
<TD>JANUARY</TD>
<TD>$100</TD>
</TR>
</TABLE>
</BODY>
OUTPUT
Attributes of <TABLE> tag

 BORDER: used to draw borders around all the Table cells. By default,
tables are shown without borders i.e. BORDER=0. The size of border
can set by assigning an integer value. For example BORDER=3, gives
table a three pixel border.
 ALIGN: used to align a table relative to windows border. It can set to
left, right or center.
 CELLSPACING: used to set the space between the cells in a table. It
takes value in pixel.
 CELLPADDING: used to set the space between the cell data and cell
wall in a table. It takes value in pixel.
 WIDTH: used to set the width of the table, as either an absolute
width in pixels, or a percentage of the document width. For
example: WIDTH=<width in pixel or percent>

 BGCOLOR: set the background color of the table. For example:


BGCOLOR=red

 BORDERCOLOR: sets the color of the border of the table. For


example: BORDERCOLOR=BLUE
Cellpadding and Cellspacing Attributes
 There are two attributes called cellpadding and cellspacing
which we will use to adjust the white space in your table
cells.
 The cellspacing attribute defines the width of the border.
 The cellpadding represents the distance between cell
borders and the content within a cell.
<!DOCTYPE html> </tr>
<html> <tr>
<head> <td>Ramesh Raman</td>
<title>HTML Table <td>5000</td>
Cellpadding</title> </tr>
</head> <tr>
<body> <td>Shabbir Hussein</td>
<table border="1" <td>7000</td>
cellpadding="5" cellspacing="5">
</tr>
<tr>
</table>
<th>Name</th>
</body>
<th>Salary</th>
</html>
Output
Colspan and Rowspan Attributes
 We will use colspan attribute if we want to merge two or more
columns into a single column.

 Similar way we will use rowspan if we want to merge two or


more rows.
<!DOCTYPE html> <td>Row 1 Cell 2</td>
<html> <td>Row 1 Cell 3</td>
<head>
<title>HTML Table Colspan/Rowspan</title> </tr>
</head> <tr>
<body> <td>Row 2 Cell 2</td>
<table border="1"> <td>Row 2 Cell 3</td>
<tr> </tr>
<th>Column 1</th> <tr>
<th>Column 2</th> <td colspan="3">Row 3 Cell 1</td>
<th>Column 3</th> </tr>
</tr> </table>
<tr> </body>
<td rowspan="2">Row 1 Cell 1</td> </html>
Output

You might also like