Lec 18 (HTML DIV+Image)
Lec 18 (HTML DIV+Image)
Lec 18 (HTML DIV+Image)
HTML DIV
▸ The div tag is known as Division tag.
▸ The div tag is used in HTML to make divisions of content in the web page like (text,
images, header, footer, navigation bar, etc).
▸ Div tag has both open(<div>) and closing (</div>) tag and it is mandatory to close
the tag.
▸ The div tag is generally used by web developers to group HTML elements together
and apply CSS styles to many elements at once.
2
Div Example
<html>
<boyd>
<div style="background-color:lightblue">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
3
DIV Attributes
4
Div Attribute Example
<html>
<body>
<div style="width: 960px; color: navy; background-color: pink; border: 2px solid
blue; padding: 5px;">
▸ HTML img tag is an empty tag that contains attributes only, closing tags are not
used in HTML image element.
▸ Images can improve the design and the appearance of a web page.
7
img tag Attributes
▸ The src and alt are important attributes of HTML img tag. All attributes of HTML image
tag are given below.
1) src: It is a necessary attribute that describes the source or path of the image.
2) alt: The alt attribute defines an alternate text for the image, if it can‘t be
displayed. The value of the alt attribute describe the image in words.
3) width: It is an optional attribute which is used to specify the width to display
the image.
4) height: It is used to specify the width to display the image.
8
Img Attribute Example
<html>
<body>
<img src="C:\Users\ABDULNAVEED\Desktop\a.jpg" height="180" width="300" alt="image">
</body>
</html>
9
img tag as a link
▸ We can also link an image with other page or we can use an image as a link.
▸ Example
10
THANKS!
Any questions?
11