Chapter 7 - Unit 1
HTML - Advanced Features: List and
Image Formatting
Choose the correct option
Question 1
............... is used to view HTML documents.
1. MS Word
2. Notepad
3. Web browser
4. ThinkPad
Answer
Web browser
Reason — Web browser is an application software that understands HTML language and
generates the webpage defined by the HTML in the document.
Question 2
Which of the following syntax is used to insert images in HTML documents?
1. <img src = "URL/Path">
2. <image src = "URL/Path">
3. <img source = "URL/Path">
4. <image source = "URL/Path">
Answer
<img src = "URL/Path">
Reason — <img src = "URL/Path"> is the correct syntax to insert images in HTML
documents.
Question 3
Which of the following the tags is used to display the content in an ordered list?
1. <ol>
<li> String of text </li>
...............
</ol>
2. <ordl>
<li> String of text </li>
...............
</ordl>
3. <odls>
<li> String of text </li>
...............
</odls>
4. <orderlist>
<li> String of text </li>
...............
</orderlist>
Answer
<ol>
<li> String of text </li>
...............
</ol>
Reason — To display the content in an ordered list, all the items inside <li> tags must be
enclosed within <ol> tags.
Question 4
Which of the following format is used to insert pictures in HTML documents?
1. *.mp3
2. *.pdf
3. *.jpg
4. *.ppt
Answer
*.jpg
Reason — *.jpg is the correct extension of jpg images.
Question 5
............... HTML tag allows adding white space to the left and right of the images.
1. LSpace
2. RSpace
3. HSpace
4. VSpace
Answer
HSpace
Reason — HSpace allows adding white space to the left and right of the images.
State whether the following statements are True/False
Question 1
You can display an HTML document in bulleted form by using bullet styles taking bulleted
list from MS Word.
False
Question 2
A browser interprets the HTML codes on web page.
True
Question 3
In an ordered list, the contents are displayed in bulleted form.
False
Question 4
You can add a visual appeal by inserting images in an HTML document.
True
Question 5
By default, border is added to a picture in an HTML document.
False
Question 6
You can also insert pictures in HTML documents from an external source.
True
Name the following
Question 1
Two ways to display HTML list
Answer
1. Unordered list
2. Ordered list
Question 2
Two attributes of the Marquee tag
Answer
1. Direction
2. Behaviour
Question 3
Two ways to customize the pictures in HTML documents
Answer
1. Adding border
2. Adding text
Write down the syntax of the following with reference to
HTML. Give an example for each task.
Question 1
Ordered List
Answer
Syntax
<ol>
<li> Line 1 </li>
<li> Line 2 </li>
<li> Line 3 </li>
<li> Line 4 </li>
</ol>
Example
<ol>
<li>Online Chatting</li>
<li>News Group</li>
<li>e-mail</li>
<li>e-shopping</li>
<li>Employment</li>
</ol>
Output
1. Online Chatting
2. News Group
3. e-mail
4. e-shopping
5. Employment
Question 2
Unordered List
Answer
Syntax
<ul>
<li> Line 1 </li>
<li> Line 2 </li>
<li> Line 3 </li>
<li> Line 4 </li>
</ul>
Example
<ul>
<li>Online Chatting</li>
<li>News Group</li>
<li>e-mail</li>
<li>e-shopping</li>
<li>Employment</li>
</ul>
Output
Online Chatting
News Group
e-mail
e-shopping
Employment
Question 3
Marquee Tag in left direction
Answer
Syntax
<marquee direction = "left"> Content </marquee>
Example
<marquee direction = "left">Understanding Information
Technology</marquee>
Output
Understanding Information Technology
Question 4
Marquee Tag in downward direction
Answer
Syntax
<marquee direction = "down"> Content </marquee>
Example
<marquee direction = "down">Understanding Information
Technology</marquee>
Output
Understanding Information Technology
Question 5
Inserting a picture
Answer
Syntax
<img src="URL/Path">
Example
<p>
<img src="D:/Animal/Lion.jpg">
</p>
Output
Define the following
Question 1
Left direction of Marquee Tag
Answer
Left direction of Marquee Tag means that the block of text will scroll towards left hand side
from the extreme right hand side of the web page.
Example:
<marquee direction = "left">Understanding Information
Technology</marquee>
Question 2
Right direction of Marquee Tag
Answer
Right direction of Marquee Tag means that the block of text will scroll towards right hand
side from the extreme left hand side of the web page.
Example:
<marquee direction = "right">Understanding Information
Technology</marquee>
Question 3
Ordered List
Answer
In an ordered list, each item is displayed along with the numbers or letters instead of bullets.
The entire content of the list is enclosed in <ol> and </ol> tags and each item is enclosed in
<li> and </li> tags.
For example:
<ol>
<li> English </li>
<li> Hindi</li>
<li> Maths </li>
<li> Science </li>
</ol>
Question 4
Scroll Behaviour of Marquee Tag
Answer
In this attribute, the string of the text keeps on scrolling across the screen and scrolls back on
the web page. It is important to know that the scroll is the default behaviour of the marquee.
This movement of scroll is the same as left direction.
For example:
<marquee behavior = "scroll">Understanding Information
Technology</marquee>
Question 5
Slide Behaviour of Marquee Tag
Answer
In this attribute, the string of text starts scrolling from the right side of the screen and stops as
soon as it reaches the left side of the web page. Generally, a loop is used when the behaviour
is set to slide. The loop determines the number of times the string of text has to scroll and it
stops as soon as the loop is completed.
For example:
<marquee behavior = "slide", Understanding Information
Technology</marquee>
Short Answer Questions
Question 1
What are the different attributes of Marquee tags? Name them.
Answer
The different attributes of marquee tag are as follows:
1. Direction — It has four attributes- left, right, up and down.
2. Behaviour — It has three attributes - alternate, scroll and slide.
Question 2
Name the default alignment when a picture is inserted in an HTML document.
Answer
By default, the picture is left aligned.
Question 3
What are the different ways of adding text with the pictures in an HTML document? Name
them.
Answer
The different ways of adding text with the pictures in an HTML document are:
1. align = "top"
2. align = "middle"
3. align = "bottom"
For example:
<p>
<img src="D:/Animal/Lion.jpg" align="top">
The King of animal: Lion
</p>
<p>
<img src="D:/Animal/Tiger.jpg" align="top">
The Royal Bengal Tiger
</p>
<p>
<img src="D:/Animal/Rhino.jpg" align="top">
The Man Killing animal
</p>
Question 4(a)
Distinguish between Ordered list and Unordered list.
Answer
Ordered list Unordered list
In an ordered list, each item is displayed along with the In an unordered list, each item is
numbers or letters instead of bullets. displayed with a bullet.
<ol> and </ol> tags are used. <ul> and </ul> tags are used.
Question 4(b)
Distinguish between Alternate and Scroll behavior of Marquee tag
Answer
Alternate Behavior Scroll Behavior
The string of text keeps on scrolling between the The string of text keeps on scrolling across the
ends of the web page. screen and scrolls back on the web page.
Alternate is not the default behaviour of the Scroll is the default behaviour of the Marquee
Marquee tag. tag.
Example: Example:
<marquee behavior = "alternate">Understanding <marquee behavior = "scroll">Understanding
Information Technology</marquee> Information Technology</marquee>
Question 4(c)
Distinguish between Hspace and Vspace in the pictures of an HTML document
Answer
Hspace Vspace
Hspace allows adding white space to the left and Vspace allows adding white space above and
right of the images. below the images.
Syntax: Syntax:
<img src="URL/Path" Hspace = "space in <img src="URL/Path" Vspace = "space in
pixels"> pixels">
Write all the steps
Question 1
To insert pictures in an HTML document
Answer
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">
Question 2
To add borders to pictures in an HTML document
Answer
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">
Question 3
To add space around pictures/images in an HTML document
Answer
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">
Question 4
To resize the pictures/images in an HTML document
Answer
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">
