HTML - Advanced Features: List and Image Formatting
Choose the correct option
Question 1
............... is used to view HTML documents.
- MS Word
- Notepad
- Web browser
- 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?
- <img src = "URL/Path">
- <image src = "URL/Path">
- <img source = "URL/Path">
- <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?
- <ol>
<li> String of text </li>
...............
</ol> - <ordl>
<li> String of text </li>
...............
</ordl> - <odls>
<li> String of text </li>
...............
</odls> - <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?
- *.mp3
- *.jpg
- *.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.
- LSpace
- RSpace
- HSpace
- 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
- Unordered list
- Ordered list
Question 2
Two attributes of the Marquee tag
Answer
- Direction
- Behaviour
Question 3
Two ways to customize the pictures in HTML documents
Answer
- Adding border
- 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
- Online Chatting
- News Group
- e-shopping
- 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-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
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.
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:
- Direction — It has four attributes- left, right, up and down.
- 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:
- align = "top"
- align = "middle"
- 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 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 Behavior | Scroll 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
Hspace | Vspace |
---|---|
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">