Scribd
Upload
7 views

4.1_+Images+in+HTML+.pptx

The document outlines the learning objectives for creating a live webpage using HTML, focusing on the <img> tag and its attributes for embedding images. It includes instructions on applying CSS for styling, adding borders, and creating an image gallery. Additionally, it emphasizes the importance of persistence in completing tasks and provides a structured approach to building web pages with images.

Uploaded by

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

4.1_+Images+in+HTML+.pptx

The document outlines the learning objectives for creating a live webpage using HTML, focusing on the <img> tag and its attributes for embedding images. It includes instructions on applying CSS for styling, adding borders, and creating an image gallery. Additionally, it emphasizes the importance of persistence in completing tasks and provides a structured approach to building web pages with images.

Uploaded by

sb9400
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
You are on page 1/ 44

Sprint 4.

1 Images in HTML
Unit 4 More on HTML

DigiChamps | Level 11
Learning Objective
Create a live webpage by:

● Applying the <img> tag along with it’s attributes to embed images in a web
page.
● Apply borders to images using CSS or inline styles.
● Create space (margin or padding) around images for better layout design.
● Resizing images using attributes like width and height, or CSS properties.

2
Standards
● 9-12.DTC.a.1 Use digital tools to design and develop a significant digital
artifact (e.g., multi page website, online portfolio, simulation).
Social and Emotional Learning
● Skills 2.4: PERSISTENCE - Persevering in tasks and activities until they
get done.
○ Finishes homework projects or work once started.
○ Opposite: Gives up easily when confronted with obstacles/distractions.

3
Website 1

4
Website 2

5
Wha
t diff
betw erence
een s do
the t y
wo w ou notic
ebsi e
tes?

6
Whic
h
or in website
teres
ting? feels mo
Why re en
? gagi
ng

7
Whic
h
unde website
rstan m
d the akes it
cont e
ent? asier to
Why
?

8
9
Watch a Video

● https://quizizz.com/admin/quiz/67b43930bd0d49cb92bb0546

10
Image tag

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

12
Image tag
Example:

13
Attributes of Image Tag

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

15
Place the Image at Center

16
Place the Image at Center
Step 1: Add the HTML code within the body tag of the web page about_me.html
<img src = "Nora_learning_journey_home.jpg" width=700px height=250px
alt="My learning journey" class = "center">

Step 2: Add CSS within the style block present in the head section of the web page.
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}

17
Output

18
Adding Border to Images

19
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
●<img src is
= used to add
"path" space =above
hspace andin
"space below the images
pixels" vspace =
Syntax
"space in pixels">

20
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
<img src = "path" hspace = "space in pixels" vspace =
"space in pixels">

21
Output

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

<img src = "path" hspace = "space in pixels" vspace =


"space in pixels">

.center {
display: block;
margin-left: auto;
Step 5: Add CSS within
margin-right: auto; the style block present in the head section of the
webwidth:
page.50%;
}
23
Output

24
Image Gallery

25
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.
<html>
<head>
<title>Image gallery</title>
<style>
.center{
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
</style>
26
Image Gallery

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

27
Output
The output will be

28
CSS Image Gallery

29
CSS Image Gallery
Let's make an image gallery consisting of multiple images created with CSS.
Step 1: Add the HTML codes within the body tag of the web page.
<div class="gallery">
<img src="Sister_Me.jpg" alt="Sister" width="600" height="400">
</div>

<div class="gallery">
<img src="Friends_Me.jpg" alt="Friends" width="600" height="400">
</div>
<div class="gallery">
<img src="Mother_Me.jpg" alt="Mother" width="600" height="400">
</div>
<div class="gallery">
<img src="Father_Me.jpg" alt="Father" width="600" height="400">
</div>

30
Image Gallery

<div class="gallery">
<img src="My_Family.jpg" alt="Family" width="600" height="400">
</div>
<div class="gallery">
<img src="Brother_Me.jpg" alt="Brother" width="600" height="400">
</div>

31
Image Gallery

Step 2: Add CSS within the style block present in the head section of the web page.

div.gallery {
margin: 5px;
border: 2px solid #191970;
float: left;
width: 380px;
}

div.gallery img {
width: 100%;
height: auto;
}

32
Output
The output will be

33
Master Challenges

34
35
36
37
38
39
40
41
42
43
Reflection:
1-Thing you have leaned .

2- points you still need to enhance.

3-Suggestions for next session.

44

You might also like