Scribd
Upload
7 views3 pages

Lesson 2

Uploaded by

melodyjacob
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views3 pages

Lesson 2

Uploaded by

melodyjacob
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

Topic: Adding Images to Websites

LI: Students will be able to use the <img> tag to add images to their website.

The <img> tag is used to add images to a webpage. It is a self-closing tag, meaning it
doesn't require a closing tag like <p> or <h1>. It has important attributes:
 src (source): Specifies the path to the image file. Tells the browser where to find
the image.
 alt (alternative text): Describes the image if it can’t be displayed. Provides text for
accessibility or if the image doesn't load.
Task: Create the below html file. Save it as image_example.html
Replace "image.jpg" with the actual file name of an image you want to use (make sure
the image is in the same folder as your HTML file).

Question: What happens if you change the alt text?


It wont match the image you show
Question: What happens if the src file name is incorrect or the image file is missing?
It won’t show
Sizing Images
Resizing Images with Width and Height Attributes
You can adjust the size of an image using the width and height attributes.
Task: Change your <img> line of code to the below. Replace "image.jpg" with the actual
file name of an image you want to use (make sure the image is in the same folder as
your HTML file).

Question: What happens if you only change the width or the height?
It looks stretched out an ugly
Question: Why is it important to maintain the correct aspect ratio (proportions) of an
image?

Styling Images with Internal CSS


Centering and Styling Your Image
Use CSS to style your image, such as centering it on the page or adding a border.
Task: Add the below internal CSS to your file. (The lines in between the <style></style>
tags.
Question: What does display: block do to the image?
Question: How does margin: 0 auto affect the position of the image?

Task: Work through the examples from the below website.


https://www.w3schools.com/html/html_images.asp

Task: Create a Photo Gallery


Add multiple images to your webpage to create a small photo gallery. Use the following
template and modify it by adding more images. Save your file as photo_gallery.html

Question: How would you style each image individually?

Task: Open the html file you created in the previous lesson and add images of your
hobbies.

You might also like