Class X Computer Applications

HTML-Lists, Images Audio & Video

Q.
NO QUESTIONS WITH ANSWER
1 Explain list tag and its type in html with example.
ANS Ordered List
The ordered list is used to represent data in a list for which the order of items has significance.
The <ol> tag is used to create ordered lists. To create ordered lists, each item must be a <li> tag. For
example,
<ol>

<li>Ready</li>

<li>Set</li>

<li>Go</li>

</ol>

Unordered List

The unordered list is used to represent data in a list for which the order of items does not matter.
In HTML, we use the <ul> tag to create unordered lists. Each item of the list must be a <li> tag
which represents list items. For example,
<ul>

<li>Apple</li>

<li>Orange</li>

<li>Mango</li>

</ul>

Description List
The HTML description list is used to represent data in the name-value form. We use the <dl> tag to
create a definition list and each item of the description list has two elements:
term/title - represented by the <dt> tag
description of the term - represented by the <dd> tag
Let's see an example,
<dl>

<dt>HTML</dt>
 <dd>Hyper-Text Markup Language</dd>

<dt>CSS</dt>

<dd>Cascading StyleSheets</dd>

<dt>JS</dt>

<dd>Javascript</dd>

</dl>

2 Distinguish between Ordered list and Unordered list.

ANS
Ordered list Unordered list

In an ordered list, each item is displayed

In an unordered list, each item is
along with the numbers or letters instead
displayed with a bullet.
of bullets.

<ol> and </ol> tags are used. <ul> and </ul> tags are used.

3 Write HTML code to create the following ordered list :

X. Xylophone
Y. Yak
Z. Zebra
ANS <OL TYPE = "A" START = "24">
<LI> Xylophone </LI>
<LI> Yak </LI>
<LI> Zebra </LI>
</OL>
4 How would you indent a single word and put a square bullet in front of it ?
ANS To indent a single word and put a square bullet in front of it, we can use an unordered list in the
following way:
<UL TYPE = "SQUARE">
<LI> Word </LI>
</UL>
5 How would you insert an image file named elephant.jpg at the very top of a Web page?
ANS To insert the image at the very top of a Web page, the align attribute of <IMG> tag should be set to
"top" in the following way:
<IMG SRC = "ELEPHANT.JPG" ALIGN = "TOP">
6 Name some popular audio and video formats.
ANS Some popular audio formats are mp3, wav, midi, m4a and ogg/oga.
Some popular video formats are asf, avi, mpeg, QuickTime and RealVideo.
7 How can we include audio or video in a webpage? Name the tags that can be used to insert
audio and video files in a webpage.
ANS HTML provides two tags: <audio> and <video> tags using which we can add the audio or video
directly in the webpage.
Audio tag <AUDIO> can be used to insert audio files in a webpage.
Video tag <VIDEO>can be used to insert video files in a webpage.
8 How would you make the word Elephant appear whenever the actual elephant.jpg image
couldn't be displayed by a Web browser ?
ANS We can do this by setting the value of alt attribute to 'Elephant' in the following way:
<IMG SRC = "ELEPHANT.JPG" ALT = "ELEPHANT">
9 Write the HTML to make the elephant.jpg image appear on the right side of the page, with a
big headline reading "Elephants of the World Unit!" on the left side of the page next to it.
ANS <H1>Elephants of the World Unit!<IMG SRC = "ELEPHANT.JPG" ALIGN = "RIGHT"></H1>
.
10 Explain image tag in html with all its attributes.
ANS HTML <img> tag is used to embed image in to the HTML document. It is an inline and empty
element, thus it doesn't begin on a new line and doesn't require a closing tag.
An <img> element must have two attributes src, which fetch the image from that source, and alt,
which specifies an alternative text for the picture. The browser inserts an HTML image from the
source supplied in the <img> tag instead of directly inserting the picture into the document.
Syntax
<img src="..." alt="...">
Attributes of Image tag are:-
HTML img tag supports Global and Event attributes of HTML. And some specific attributes as well
which is listed bellow.
Attribute Value Description
alt text Specifies alternate text.
height Pixels Specifies the height of the image.
src URL Specify the image URL which will be displayed.
width pixels Sets the width of an image in pixels or in %.

11 Name various types of alignments available for images.

ANS The various types of alignments available for images are:
1) Top alignment
2) Middle alignment
3) Bottom alignment
4) Left and Right alignment
12 Distinguish between Hspace and Vspace in the pictures of an HTML document.
ANS
Hspace Vspace
 Hspace allows adding white space to Vspace allows adding white space
the left and right of the images. above and below the images.

Syntax: Syntax:
<img src="URL/Path" Hspace = "space <img src="URL/Path" Vspace =
in pixels"> "space in pixels">

13 Write all the steps

1) To insert pictures in an HTML document
2) To add borders to pictures in an HTML document.
3) To add space around pictures/images in an HTML document
4) To resize the pictures/images in an HTML document.
ANS To insert pictures in an HTML document
To insert pictures in an HTML document, we can use <img> tag, which is an empty tag. To add an
image to the web page, we need to specify the complete path of the source.
Syntax:
<img src = "URL/Path"> where 'src' stands for source
Example:
<img src = "d:/images/computer.jpg">
To add borders to pictures in an HTML document
To add borders to pictures in an HTML document, we can use the border tag.
Syntax:
<img src = "URL/Path" Border = "thickness in pixels">
Example:
<img src = "d:/images/computer.jpg" Border = "5">
To add space around pictures/images in an HTML document
To add space around pictures/images in an HTML document, we can use the tags 'Hspace' and
'Vspace'. Hspace adds white space to the left and right of the pictures and Vspace adds white space
above and below the pictures.
Syntax:
<img src = "URL/Path" Hspace = "space in pixels" Vspace = "space in pixels">
Example:
<img src = "d:/images/computer.jpg" Hspace = "100" Vspace = "30">
To resize the pictures/images in an HTML document
To resize the pictures/images in an HTML document, we can use the attributes 'Height' and 'Width'
with <img> tag.
Syntax:
<img src = "URL/Path" Height = "height in pixels" Width = "width in pixels">
Example:
<img src = "d:/images/computer.jpg" Height = "300" Width = "400">
14 Pawan wants to design the web page which is as shown below. It contains the text and the image of
 a bird. He has created an HTML code for the same. But he is confused with some elements,
attributes and tags. The incomplete code is given below.

Help him complete his code by answering the following questions:

(a) Identify (i)
(b) Write the text colour in (ii)
(c) Identify the heading to be filled in (iii)
(d) Write the complete path of the image file which is saved in D: drive.

ANS
Q.15