Page 52 - Code & Click - 8
P. 52
Experiential Learning
Lab Activity 8
To display an image floating with the text on a web page.
1. Open Notepad and create the HTML document as shown below.
<!DOCTYPE html> 2. Open the HTML document in Microsoft
<html>
<head> <title> Floating Images </title> </head> Edge.
<style type = “text/css”>
img {border: 3px ridge blue}
h1 {color: red; font-family: Calibri; text-align:
center; font-size: 40px}
p {color: blue; font-family: Comic Sans MS; font-
size: 25px}
</style>
<body>
<h1> Floating Images </h1>
<p> <img src= “Smiley1.gif” alt= “Smiley face”
width= “50” height= “50” style = “float: right”> This
paragraph has an image floating to its right. </p>
<p> <img src=“Smiley1.gif” alt=“Smiley face” width=
“50” height= “50” style = “float: left”>
This paragraph has an image floating to its left.
</p>
</body>
</html>
P
Post-Processingost-Processing
A List is made up of a number of related items written consecutively to display information
in an easy to read and eye catching form.
An Unordered list, represented by <ul> … </ul> tags, is a list of related items in which the
order of items is not important.
An Ordered list, represented by <ol> … </ol> tags, is a list of related items in which the order
of items is important.
A Description list, represented by <dl> … </dl> tags, is a list of terms along with a description
of each term.
The Image <img> tag is used to insert images on a web page.
Info Retention
A. Select the correct option for each of the following statements.
1. A list of related items in which the order of items is important is ______.
(a) Ordered list (b) Relation list (c) Description list (d) Unordered list
2. The <dl> and </dl> tags are used to create a(n) ______.
(a) Simple list (b) Unordered list (c) Description list (d) Ordered list
3. The list property used to specify the type of list item marker in an unordered list is ______.
(a) list-style-position (b) list-style-type (c) list-style-item (d) list-style-marker
4. The tag used to insert images in a web page is ______.
(a) <img> (b) <png> (c) <src> (d) <pic>
50
