Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 views

HTML_Images

The document outlines a lesson plan focused on using HTML to create a tribute page, emphasizing the incorporation of images and various tags. It includes activities for students to practice adding images and formatting text, along with a plenary to assess understanding of key HTML concepts. The lesson aims to ensure students can recall and demonstrate the use of the <img> tag and related attributes.

Uploaded by

Rayan Rizwan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

HTML_Images

The document outlines a lesson plan focused on using HTML to create a tribute page, emphasizing the incorporation of images and various tags. It includes activities for students to practice adding images and formatting text, along with a plenary to assess understanding of key HTML concepts. The lesson aims to ensure students can recall and demonstrate the use of the <img> tag and related attributes.

Uploaded by

Rayan Rizwan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 11

HTML-Images

LEARNING OBJECTIVE
• To revisit and use the Tags learnt so far.
• To know how to add images to the webpage.
HTML • To make a Tribute page for someone you admire in
Images your life.
STARTER: (5-7mins)
Revision

 Identify the tags used in this


page.

 What types of list is used.

 What is alignment of the


image.
Adding colour and aligning
<html>
<head>
<title> Castle Rock High School </title>
</head>

<body bgcolor="#8000ff">

<font color="#00ff80"><h1 align="center"> Castle Rock High School</h1>


<h2> Be The Best You Can Be </h2></font>

</body>
Adding an image
<html>
<head>
<title> Castle Rock High School </title>
</head>

<body bgcolor="#8000ff">
<font color="#00ff80"><h1 align="center"> Castle Rock High School</h1>
<h2> Be The Best You Can Be </h2></font>
<img src="http://velfac.co.uk/globalassets/billeder/case-billeder/castle-rock-school-
1.jpg" height="200" width="500">

</body>
</html>
Aligning an image

<center><img
src="http://velfac.co.uk/globalassets/billeder/case-billeder/castle-rock-
school-1.jpg" height="200" width="500"></center>
Revision
Activity: The simplest website you can make as a beginner is a tribute page of someone
you admire in your life. It requires only basic knowledge of HTML.
Group 1 Group 2 Group 3
Make a Tribute webpage for Make a Tribute webpage for Make a Tribute webpage for
‘Steve Jobs’. ‘Albert Einstein’ ‘Bill Gates’.
 Make a webpage writing about that person adding his/her image. At the top of the webpage,
add the image and name of the person and below that give layout for the rest of the details.

• In the <body> element, we will give the title of the page using h1 tag after that we will add an
image of him in the img tag with some caption. We will write all the contents (using p tags).
OR
• We can also use Ordered/Unordered List Extended task: Formatting
for content to display in Bullet points.F • Highlight Heading to ‘Steve Jobs’
• Change the text font style to “Luicida
Calligraphy”
• Center align the image and resize to 200x200
Refer to:
https://www.w3schools.com/html/html_formatting.asp
Revision
PLENARY:

1. The <img src=“image.jpg”> tag puts an image on the webpage. True or False?

2. The ‘alt’ element inside the tag tells the computer which part of a picture should be
clickable. True or False?

3. The height and width of an image are measured in pixels which are called px in
HTML. True or False?
Revision
PLENARY:

1. The <img src=“image.jpg”> tag puts an image on the webpage. True or False?

2. The ‘alt’ element inside the tag tells the computer which part of a picture should be
clickable. True or False?

3. The height and width of an image are measured in pixels which are called px in
HTML. True or False?
Revision

SUCCESS CRITERIA:

• I can recall the tag used to put images into HTML.

• I will be able to demonstrate this feature and the variables I can control.

You might also like