Date :11.11.
24 to
15.11.24
LEARNING OBJECTIVES: Students will be able
to add colors and inserting images in a
document using html .
Adding colors
Inserting images
LEARNING OBJECTIVES: Students
will be able to add colors and
inserting images in a document
using html .
Success criteria: I can recognize common
HTML tags
I know to create Basic
Date :11.11.24 to
THOUGHT OF THE DAY 15.11.24
LEARNING OBJECTIVES: Students will be able
to add colors and inserting images in a
document using html .
Success criteria: I can recognize common
HTML tags
I know to create Basic
Date :11.11.24 to
15.11.24
HTML Images Syntax LEARNING OBJECTIVES: Students will be able
to add colors and inserting images in a
document using html .
The HTML <img> tag is used to embed an image in a
web page.
The <img> tag creates a holding space for the
referenced
. image.
HTML Images
Images can improve the design and the appearance of a web page.
You can use the width and height attributes of
<img src="pic_trulli.jpg" alt="Italian Trulli">
the <img> tag,
How can you resize an image in HTML?
like this: <img src="image.jpg" width="300"
height="200" alt="description">
Success criteria: I can recognize common
HTML tags
I know to create Basic
Date :11.11.24 to
15.11.24
LEARNING OBJECTIVES: Students will be able
to add colors and inserting images in a
document using html .
Sample Program
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli"
width="500" height="333">
</body>
</html>
Success criteria: I can recognize common
HTML tags
I know to create Basic
Date :11.11.24 to
15.11.24
LEARNING OBJECTIVES: Students will be able
to add colors and inserting images in a
document using html .
The <img> tag has two required
attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the
image
<img src="url" alt="alternatetext">
Success criteria: I can recognize common
HTML tags
I know to create Basic
Date :11.11.24 to
15.11.24
Sample Program LEARNING OBJECTIVES: Students will be able
to add colors and inserting images in a
<!DOCTYPE html> document using html .
<html>
<body>
<h2>Alternative text</h2>
<p>The alt attribute should
reflect the image content, so
users who cannot see the image
get an understanding of what
the image contains:</p>
<img src="img_chania.jpg"
alt="Flowers in Chania"
width="460" height="345">
</body>
</html>
Success criteria: I can recognize common
HTML tags
I know to create Basic
Date :11.11.24 to
HTML Colors 15.11.24
LEARNING OBJECTIVES: Students will be able
to add colors and inserting images in a
Background Color document using html .
You can set the background color for HTML elements:
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:DodgerBlue;">Hello
World</h1>
<p style="background-color:Tomato;">
Ut wisi enim ad minim veniam, quis nostrud.
</p>
</body> Success criteria: I can recognize common
HTML tags
</html> I know to create Basic
Date :11.11.24 to
15.11.24
LEARNING OBJECTIVES: Students will be able
Text Color to add colors and inserting images in a
document using html .
You can set the color of text:
<!DOCTYPE html>
<html>
<body>
<h3 style="color:Tomato;">Hello World</h3>
<p style="color:DodgerBlue;"></p>
<p style="color:MediumSeaGreen;"></p>
</body>
</html>
Success criteria: I can recognize common
HTML tags
I know to create Basic
Date :11.11.24 to
15.11.24
LEARNING OBJECTIVES: Students will be able
VIDEO to add colors and inserting images in a
document using html .
Success criteria: I can recognize common
HTML tags
I know to create Basic
Why is it important to include the alt attribute when adding an image?
Why is it important to include the alt attribute when adding an image?
Date :11.11.24 to
15.11.24
LEARNING OBJECTIVES: Students will be able
to add colors and inserting images in a
document using html .
plenary
● What HTML attribute is used to add a background color to an element?
● What HTML tag is used to insert an image into a webpage?
● How can you change the text color of a paragraph in HTML?
Success criteria: I can recognize common
HTML tags
I know to create Basic
Date :11.11.24 to
15.11.24
LEARNING OBJECTIVES: Students will be able
to add colors and inserting images in a
document using html .
plenary
1.What HTML attribute is used to add a background color to an element?
The style attribute is used to add a background color, like this: style="background-color: blue;"
2. What HTML tag is used to insert an image into a webpage?
Answer: The <img> tag is used to insert
images.
3.How can you change the text color of a paragraph in HTML?
Answer: You can change text color using the style attribute, like this: <p
style="color: red;">This text is red</p>
Success criteria: I can recognize common
HTML tags
I know to create Basic
Date :11.11.24 to
15.11.24
LEARNING OBJECTIVES: Students will be able
to add colors and inserting images in a
Practice Time document using html .
TASK 1
1. Create a web page about your favorite place with the following
a. Add relevant images b. Add colors to the font c. Include all the
TASK 2basic tags
1.Create a web page about the advantages and
disadvantages of AI in education
a. Add relevant images b. Add colors to the font c.
Include all the basic tags
TASK 3
1.Create a web page about the advantages and 8
disadvantages of AI in education
a. Add relevant images b. Add colors to the font c.
Include all the basic tags .
Success criteria: I can recognize common
HTML tags
I know to create Basic
L.O :To be able to understand the role of AI in
education. Its advantages and disadvantages
I am a bit confused I can do the
I am not clear on this
I can and need more help tasks confidently
Add images to a
document
Change color to a
document
SUCCESS CRITERIA: I can able to define AI and explain its primary function.
I know various AI tools used in education.
L.O :To be able to understand the role of AI in
education. Its advantages and disadvantages
SUCCESS CRITERIA: I can able to define AI and explain its primary function.
I know various AI tools used in education.
