image in html
Presentation
•
Computers
•
9th Grade
•
Practice Problem
•
Hard
Mohammad Fuad
FREE Resource
23 Slides • 0 Questions
1
Sprint 4.1 Images in HTML
Unit 4 More on HTML
Mr. mohammad fuad
Grade : Nine
Term : two
Date : 8-12_3_2025
2
Learning Objective
use img tag, src and alt attribute to insert an image in the web page;
add border to the images;
add space around the images;
resize the images;
align text with the images.
2
3
Image tag
4
4
Image tag
The <img> tag specifies images within HTML pages. To
embed image links on a web page, we must use the
<img> tag.
Syntax:
<img src=" " alt=" " width=" " height=" ">
Note:
The img tag is an empty tag that only has attributes.
It doesn't use closing tags, so it doesn't have any.
5
5
Image tag
Example:
6
6
Attributes of Image Tag
7
7
Attributes of image tag
The following are attributes of the <img> tag:
The src attribute
The src attribute in the <img> tag defines the path or URL (Uniform Resource Locator) to the image.
The location of the image can be a web server or your local computer.
The width attribute
It is used to specify the width of the image.
8
8
Place the Image at Center
9
9
Place the Image at Center
Step 1: Add the HTML code within the body tag of the web page about_me.html
Step 2: Add CSS within the style block present in the head section of the web page.
10
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
<img src = "Nora_learning_journey_home.jpg"
width=700px height=250px alt="My learning journey"
class = "center">
10
Output
12
11
Adding Border to Images
13
12
Adding Border to Images
We can implement the style attribute to give the image a border.
The hspace and vspace attributes in the image tag provide the
option to add space around the images. These attributes provide
horizontal and vertical spacing, respectively.
Note
hspace is used to add space to the right and left of the images.
vspace is used to add space above and below the images
Syntax
14
<img src = "path"
hspace = "space in pixels"
vspace =
"space in pixels">
13
Adding Border to Images
Step 1: Add a solid brown color border with a dimension of 4 px to the image.
Step 2: Add horizontal <hspace> spacing of 120 and vertical <vspace> spacing of 30 around the
image.
Syntax
16
<img src = "path"
hspace = "space in pixels"
vspace =
"space in pixels">
14
Output
17
15
Adding Border to Images
Step 3: Open the web page biography.html
Step 4: Add the HTML codes within the body tag of the
web page.
Step 5: Add CSS within the style block present in the head
section of the web page.
18
<img src = "path"
hspace = "space in pixels"
vspace =
"space in pixels">
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
16
Output
19
17
Image Gallery
20
18
Image Gallery
Let's create another web page Image Gallery for the same website.
Step 1: Create a new web page MyGallery.html.
Step 2: Add a background image and the heading, My Tribe.
21
<html>
<head>
<title>Image gallery</title>
<style>
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
19
Image Gallery
23
</head>
<body bgcolor = "#FFFACD">
<img src = "Nora_learning_journey_mytribe.jpg" width=900px height=250px
alt="My tribe" class = "center" style="border:4px solid brown" hspace = 120 vspace
= 30>
<h1 align="center" style="font-size:50px; color: #BA55D3;"> My Tribe </h1>
</body>
</html>
20
Output
The output will be
24
21
Activity :
22
23
Sprint 4.1 Images in HTML
Unit 4 More on HTML
Mr. mohammad fuad
Grade : Nine
Term : two
Date : 8-12_3_2025
Show answer
Auto Play
Slide 1 / 23
SLIDE
Similar Resources on Wayground
19 questions
AP CSP: Lesson 4.7 R.G.B Color
Presentation
•
9th Grade
16 questions
TIN HỌC 9 - 1
Presentation
•
9th Grade
21 questions
Transcription
Presentation
•
9th Grade
16 questions
1.4 Dilations
Presentation
•
9th - 10th Grade
19 questions
Most Dangerous Game Vocabulary
Presentation
•
9th Grade
19 questions
Yr 11 OCR Cambridge Nationals IT
Presentation
•
9th - 10th Grade
17 questions
Systems and Inequalities Review
Presentation
•
9th Grade
16 questions
เครื่องมือสำหรับสืบค้นข้อมูลผ่านอินเทอร์เน็ต
Presentation
•
9th Grade
Popular Resources on Wayground
16 questions
Grade 3 Simulation Assessment 2
Quiz
•
3rd Grade
19 questions
HCS Grade 5 Simulation Assessment_1 2526sy
Quiz
•
5th Grade
10 questions
Cinco de Mayo Trivia Questions
Interactive video
•
3rd - 5th Grade
17 questions
HCS Grade 4 Simulation Assessment_2 2526sy
Quiz
•
4th Grade
24 questions
HCS Grade 5 Simulation Assessment_2 2526sy
Quiz
•
5th Grade
13 questions
Cinco de mayo
Interactive video
•
6th - 8th Grade
20 questions
Math Review
Quiz
•
3rd Grade
30 questions
GVMS House Trivia 2026
Quiz
•
6th - 8th Grade