Scribd
Upload
2 views8 pages

Development Lesson2 WebPageImages

This lesson focuses on embedding images in HTML and creating a web page with a colored heading, an image, and related text. Students are instructed to download an image, write HTML code in Notepad++, and save it correctly to display the webpage. Additionally, students are encouraged to modify their code and identify issues in a provided HTML document.

Uploaded by

Rob Carrigan
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
2 views8 pages

Development Lesson2 WebPageImages

This lesson focuses on embedding images in HTML and creating a web page with a colored heading, an image, and related text. Students are instructed to download an image, write HTML code in Notepad++, and save it correctly to display the webpage. Additionally, students are encouraged to modify their code and identify issues in a provided HTML document.

Uploaded by

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

Lesson 2 – Words are Not Enough

Starter: Answer the questions below using the pen from your
Teams page.

Learning Objectives
-Learn how to display Images within a web page.
-Learn how to follow a design to create a web page.
Images in HTML
Video
Paused at
4:48.

Task 1 – Embedding an Image: Create a web page including


the following.
 A coloured heading
 A suitable image – adjusting width.
 Some paragraph text relating to your image.
Save your web page appropriately taking care to end with
.html

(a) Download [Link]


image file (above) & save in
the htmlFolder.

(b)Open Notepad++ and enter the code you see here below.

(c) Save the Notepad++ file in


oneDrive > htmlFolder and name it as
[Link]
Note: Make sure you save as a HTML document
(d) To Run the File
(i) (ii)

(iii) (iv) [Link] and


[Link]
must be in the same folder so
the image can appear on the
web page.
This Webpage should appear when [Link]
is run.

Task 1: Take a screenshot of your webpage and your


code from Notepad++. Then Paste into the box below.

Task 1: (Additional) Change your code to your liking.


-Change the image.
-Change the heading by changing the text between <h1>
</h1>
-Change the smaller text by changing the text between <p>
</p>
Take a screenshot of your webpage and your code from
Notepad++. Then Paste into the box below.
Images in HTML

Some General HTML Housekeeping


Task 2 – Some General HTML Housekeeping
Video Paused at
6:50

In notepad++ Add to your code from the last lesson


[Link] . Your code should look like
below.
Take a screenshot of your code and the
webpage created and paste below.

Task 3: What has gone wrong here.

Carefully look at this HTML document. Can you circle


three reasons why it won’t work in the way the
designer expected?
Use the pen option to draw on the slide in this task.

You might also like