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">