KnowledgeBoat Logo
OPEN IN APP

Chapter 7 - Unit 1

HTML - Advanced Features: List and Image Formatting

Class 7 - APC Understanding Computer Studies



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

Write down the syntax of inserting a picture. HTML Advanced Features, Understanding Computer Studies Solutions ICSE Class 7.

Case-Study Based Questions

Question 1

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.

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. HTML Advanced Features, Understanding Computer Studies Solutions ICSE Class 7.

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.

Answer

(a) My Birds

Reason — (i) is the title of the page and in the image of the web page it is given as "My Birds" at the top of the tab.

(b) #0000FF

Reason — The font colour of heading text in body is blue. Hexa-decimal code for blue colour is #0000FF.

(c) Adding border and resizing pictures in HTML document.

Reason — This is the heading just above the picture of the bird.

(d) D:/bird.jpg

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 listUnordered list
In an ordered list, each item is displayed along with the numbers or letters instead of bullets.In an unordered list, each item is 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 BehaviorScroll Behavior
The string of text keeps on scrolling between the ends of the web page.The string of text keeps on scrolling across the screen and scrolls back on the web page.
Alternate is not the default behaviour of the Marquee tag.Scroll is the default behaviour of the Marquee tag.
Example:
<marquee behavior = "alternate">Understanding Information Technology</marquee>
Example:
<marquee behavior = "scroll">Understanding Information Technology</marquee>

Question 4(c)

Distinguish between Hspace and Vspace in the pictures of an HTML document

Answer

HspaceVspace
Hspace allows adding white space to the left and right of the images.Vspace allows adding white space above and below the images.
Syntax:
<img src="URL/Path" Hspace = "space in pixels">
Syntax:
<img src="URL/Path" Vspace = "space in 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">
PrevNext