0% found this document useful (0 votes)
10 views6 pages

Understanding HTML Lists and Images

Uploaded by

Vijayabala Cmda
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
10 views6 pages

Understanding HTML Lists and Images

Uploaded by

Vijayabala Cmda
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

ST. PATRICK’S HIGH SCHOOL I.C.S.E.

2021 -2022
CLASS 6 COMPUTER SCIENCE 17/12/2021
Chapter 5 – Using List and Images
I HTML code:
Refer text book examples (6) with output.
II Objectives:
1. Bullets are the most efficient way of presenting the information in a
precise manner.
2. A list is a function in HTML that allows you to add bullets and
numbering to your document.
3. The default bullet type for most web browser is disc (black circle).
4. The list items can be added using the <li> tag.
5. The list begins and ends with <ul> and </ul> tags respectively.
6. The ‘TYPE’ attribute specifies the type of bullet that can be used with
<ul> element.
7. You can add a marquee to your web page by using the <marquee> tag.
8. A list created within a list is called a nested list.
9. Always specify the width and height of an image. If width and height
are not specified, the page might flicker while the image loads.
10. A definition list <DL> is used to present a list of definition for terms.
11. A Marquee display a moving text message on a background.
III Match the following:

1. src - Specifies the path to the image.


2. alt - Specifies an alternate text for the image, if the image for some
reason cannot be displayed.
3. <dt> - is used to define the term part.
4. <dd> - stands for definition description.
5. <dir> - tag is used to create directory list.
6. <dl> - A definition list is used to present a list of definition for terms.
IV Predict the output:
1. WAP using unordered list with default bullet to display seasons.

Code:
<html> Output:
<body>
<H1> Unordered list with default bullets </H1>
<ul>
<li> Summer
<li> Winter
<li> Autumn
<li> Spring
</ul>
</body>
</html>

2. WAP to display different shapes using unordered list with circle bullets.

Code:
<html> Output:
<body>
<H1> Unordered list with circle bullets </H1>
<ul type =”Circle” >
<li> Triangle
<li> Square
<li> Hexagon
<li> Pentagon
</ul>
</body>
</html>

3. WAP to display colors using unordered list with square bullets.

Code:
<html> Output:
<body>
<H1> Unordered list with square bullets </H1>
<ul type =”Square”>
<li> Red
<li> Blue
<li> Green
<li> Yellow
</ul>
</body>
</html>

4. WAP using Ordered list with default numbering to display input devices.

Code:
<html> Output:
<body>
<H1> Input devices </H1>
<ol>
<li> Keyboard
<li> Mouse
<li> Scanner
<li> Microphone
</ol>
</body>
</html>

5. WAP to display output devices using Ordered list with the start value as
8.

Code:
<html> Output:
<body>
<H1> Output devices </H1>
<ol start = “8”>
<li> Printer
<li> Monitor
<li> Speaker
<li> Plotter
</ol>
</body>
</html>
6. WAP to display the expansion of html using definition list.
Code:
<html> Output:
<boby>
<dl>
<dt> HTML </dt>
<dd> Hyper Text Markup Language</dd>
</dl>
</body>
</html>

7. WAP to display a moving text.


Code:
<html> Output:
<body>
<Marquee> I Love My Parents </marquee>
</body>
</html>

8. WAP to display a nested list.


Code:
<html> Output:
<head>
<title> Displaying Nested List </title>
</head><Body><font color=”blue”>
<b> Example of Nested List</B><br>
<ol start = “1” type = “1”>
<li> Input Devices
<ul type = “square”>
<li> keyboard<li> Mouse <li> Scanner<li> joystick<li>Digital Camera
</ul><br> </font>
<font face = “Arial” size = “2” color = “red”>
<li>Output Devices
<ul type = “disc”>
<li> Monitor<li> printer <li> impact printer<li> Nonimpact printer
</font>
</body>
</html>
9. WAP on adding an image of a fish to a webpage and align an image to
left.
Code:
<html> Output:
<head>
<title> Image Align </ title>
</head><body>
<img src = “[Link]” Align = “left”>
The picture is left Aligned <br>
</body>
</html>

V Write a statement to display the following output:

1. M. Jack
N. Rock
O. Rail
A. <ol type = “A” start = “M”>
<li> Jack
<li> Rock
<li> Rail
</ol>

2. i. Apple
ii. Mango
iii. Orange
A. <ol type = “i”>
<li> Apple
<li> Mango
<li> Orange
</ol>
3. Reduce
Recycle
Reuse
A. <ol type = “None”>
<li> Reduce
<li> Recycle
<li> Reuse
</ol>

VI Find the output for the following statement:

1. <ol type = “disc”> output:


<li> Math
<li> Social
<li> Science
</ol>

2. <ol type = “I” start = “IV”> output:


<li> Dedication
<li> Discipline
<li> Determination
</ol>

Note:
✓ Page no: 45, B [Link]: 9 answer is true
✓ Page no: 46, C [Link]: 7 answer is c. <ol start = “1” type = “II”>
✓ Page no: 46, D [Link]: 2 answer is Center.

❖ Complete the notes given during the holidays.


❖ Practice all the programs and find the output.
❖ All the best for your upcoming II Mid Term Test.

You might also like