Lec 18 (HTML DIV+Image)

Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1of 11

HTML DIV

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>

<head><title> Working with DIV </title></head>

<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>

<head><title> Working with DIV </title></head>

<body>

<div style="background-color:lightblue; align=center; width: 50%">


<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>

<div style="width: 960px; color: navy; background-color: pink; border: 2px solid
blue; padding: 5px;">

<p>My fourth webpage!</p>


</div>
</body></html>
5
HTML Image
HTML Image
▸ HTML img tag is used to display image on the web page.

▸ 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>

<head><title> Working with Image </title></head>

<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.

▸ To do this, put <img> tag inside the <a> tag.

▸ Example

10
THANKS!
Any questions?

11

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy