Scribd
Upload
8 views

Lec3 HTML

Uploaded by

umarmalikk64
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Lec3 HTML

Uploaded by

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

Adding images, audio and video files in a HTML page

Contents are major building blocks of a web application. Contents may include text, images,
videos, audios, links and others. In previous lectures we have learned how to add text and links
in a webpage. In this lecture we will learn how to add images, audio and video files in a web
page.

1. Adding images to a web page:

HTML provides <img> tag to add images to web pages. SRC attribute of the <img> tag is used to
indicate the source of the image. We can add an image by <img src=“image-name”>. To add an
image abc.jpg in web page we write following code

<img src=“abc.jpg”>

If the web page and the image exist in the same directory we just write the name of the image
as the value of src attribute otherwise we have to give the full path (in similar way as we saw in
the previous lecture while linking documents).

1.1 Attribute of the <img> tag:

Following are the major attributes of <img> tag

Height and width: when we add an image in a web page, browser displays the image in its
actual size. We can use height and width attributes to control the dimension of the image in the
browser. We can use these attributes as <img src=“image-name” height=“100” width=“100”>.

Alt attribute: sometimes the browser cannot display the image. Alt attribute is used to set the
message for users when image is not displayed in the browser. We can use alt attribute as <img
src=“image-name” alt=“image description”>

Align attribute: The align attribute was created to align an image within the page. The align
attribute was particularly used by authors who wanted text to flow around an image. The
possible values for align attribute are left, right, top, middle and bottom. Example is <img
src=“image-name” align=“left”>

Border attribute: border attribute is used to draw a line or border around an image. We can use
the border attribute as <img src=“image-name” border=“2”>. The value of the border attribute
indicates the thickness of the border (larger value means thicker border).

Example:

<html> Image without border


<head>
<title> HTML lists </title>
</head>
<body>
<img src="map.jpg" height="100" width="100" >
<br>
<img src="map.jpg" height="100" width="100" border="3"> Image with border
</body>
</html>

Output of the example

1.1 Using images as links:


In previous lecture we learnt how to link document link document in web pages. We used <a>
tag to add a link. Between <a> and </a> tags we used text. When a user clicks at this text the
linked page is loaded in the browser. Similarly, we can use images instead of text to link
document. We can do this by adding an image instead of text between <a> and </a> tags.
Example:
<html>
<head>
<title>Image Links</title>
</head>
<body>
<hr>
<h1><font color="green">Pakistani Universities</font></h1>
<hr>
<p align="justify">The higher education in Pakistan is the systematic process of students
continuing their education beyond high schools, learned societies, and two-year colleges. The
governance of higher education is maintained under the Higher Education Commission (HEC)
which oversees the financial funding, research outputs, and teaching quality in the country.[1]
In Pakistan, the higher education system includes both the public, military, and private universities;
all accredited by the HEC.<br>Following are some of the Top universities in
Pakistan</p>

<a href="http://www.nust.edu.pk/Pages/Home.aspx">
<img src="../images/nust.jpg" align="middle" height="100" width="100"></a>

<a href="http://www.comsats.edu.pk/">
<img src="../images/comsats.jpg" align="middle" height="100" width="100"></a>

<a href="http://www.numl.edu.pk/">
<img src="../images/numl.jpg" align="middle" height="100" width="100"></a>

<a href="http://www.nust.edu.pk/Pages/Home.aspx">
<img src="../images/arid.jpg" align="middle" height="100" width="100"></a>

</body>
</html>

This example code contains some text at the start and then some external links. In links we
have added images instead of text. When user clicks at some image, the corresponding page is
loaded in the browser. Output of the code is given below

2. Adding videos in a web page:


The <video> tag is used to add a video to a web page. This tag is provided in HTML5. The src
attribute of the <video> tag is used to indicate the source of the video. We can add a video to
our page as
<video src=“abc.mp4”>
Attributes of video tag:
Auto-play: when we use this attribute in <video> tag, the video is automatically played when
the page is loaded in the browser. <video src=“abc.mp4” autoplay>
Controls: this attribute is used to display the controls to control the video when it is displayed
in the browser. <video src=“abc.mp4” controls autoplay>
Height: this attribute is used to control the height the player in the browser.
<video src=“abc.mp4” height=”400”>
Loop: When this attribute is set, the video is automatically started again when it finishes
Example:
<html>
<head>
<title>adding video</title>
</head>
<body>
<h1>Adding Video</h1>
<br>
<video src="../video/vid.mp4"
autoplay loop controls height="300">
</video>
</body>
</html>

3. Adding audio files to web pages:


The <audio> tab is used to add a audio to a web page. This tag is provided in HTML5. The src
attribute of the <audio> tag is used to indicate the source of the audio. We can add a audio to
our page as
<audio src=“abc.mp3”>

Attributes:
Auto-play: the audio file is played automatically when the page is loaded in the web browser
Controls: this attribute is used to display the controls
Loop: this attribute is used to play the audio file in a loop
Example:
<html>
<head>
<title>adding audio</title>
</head>
<body>
<h1>Adding Audio Files</h1>
<br>
<audio src="../audio/aud.mp3"
autoplay loop controls height="300">
</audio>
</body>
</html>
The output of the example is

HTML tables

1. HTML tables:
Tables display information in rows and columns. Tables are commonly used to display all
manner of data that fits in a grid such as train schedules, television listings, financial reports etc.
In HTML <table> tag is used to start a table while </table> tag indicates the end of the table.
We can define a table as
<table>
Table Structure </table>
After starting a table using <table> tag we add row in the table. In HTML <tr> tag starts a row in
the table while </tr> ends the row. Each row in a table consists of cells or columns. HTML
provides <td> tag to add cells in a table while </td> tag end a column. The contents of a cell is
written between <td> and </td> tags.
Usually, the first row of a table is a heading row. The text in the heading row is bold. HTML
provides <th> tag to add heading cells. Contents between <th> and </th> tags automatically
appears in bold.
Example:
<html>
<head>
<title> Creating Table </title>
</head>
<body>
<h1>Creating Tables in HTML</h1>
<table border="1">
<tr>
<th>Name</th>
<th>Subject</th>
<th>Marks</th>
</tr>
<tr>
<td>Basharat</td>
<td>Web Engineering</td>
<td>75</td></tr>
</table>

</body>
</html>

This code creates a table. In table there are two rows while in each row there are three cells or
column. Cells in the first row are created using <th> tag. It means their content will be displayed
in bold and center aligned.
1.1 Attributes of table:
Following are the major attributes of tables
The Border Attribute: Indicates the presence of the border around the table. Example is <table
border=“1”>
The align Attribute: Align attribute is used to horizontally align a table in the browser. The
possible values of this attribute are center, left and right. Can be used as <table align= “center”>
The bgcolor Attribute: sets the background color of the table. It can be used as <table
bgcolor=“gray”>
The background Attribute: sets the specified image at the background of the table. Example of
the use of this attribute is <table background=“image-title”>
The height and width Attributes: these attributes are used set the height and width of the
table. Values of these attributes can be given in pixels or percentage
The cellpadding Attribute: The cellpadding attribute is used to create a gap between the edges
of a cell and its contents. This attribute can be used as <table cellpadding=“50”>
The cellspacing Attribute: The cellspacing attribute is used to create a space between the
borders of each cell.
The following diagram shows the effects of these attributes

cellpadding cellspacing
Height

1.2 Row level attributes:


The above attributes are applied on the whole table. There are some attributes which applied
Width
at row. The major row level attributes are
The align Attribute: is used to horizontally align the contents within a row. <tr
align=“center,right or left”>
The bgcolor Attribute: sets the background color of a row
• <tr bgcolor=“gray”>
The background Attribute: used to set an image at the background of the row
• <tr background=“image-name”>
The height Attribute: is used to set the height of the row
• <tr height=“20” widht=“20”>
The valign Attributes: is used to vertically align the contents of a row
• <tr valign=“top, middle or bottom”>
Row Height
Vertical Align

1.3 Cell level attributes:


These attributes are applied at cells. Following are major cell level attributes
The align Attribute: is used to horizontally align the contents of a cell
<tr align=“center,right or left”>
The bgcolor Attribute: sets the background color of a cell
The height and width Attributes: set the height and width of a cell
The valign Attributes: vertically align the contents of a cell
The rowspan Attributes: used when a cell should span across more than one rows
The colspan Attribute: used when a cell should span across more than one column
Following code shows the use of rowspan and colspan attributes
<table border=“1”>
<tr>
<td rowspan=“2”>Name</td>
<td colspan=“2”>Subjects</td>
</tr> Subjects
<tr>
<td >OOP</td> Name
<td >DB</td> OOP DB
</tr>
<tr>
<td >ALi</td> ALi 75 80
<td >75</td>
<td >80</td>
</tr>
</table>
1.4 Adding caption of a table:
<caption> tag is used to add a caption of the table. We usually add caption before the first row
of the table.
Example:
<table>
<caption>Caption of the table</caption>
Structure of the table
</table>

You might also like