TLE 7: LESSON PLAN

HTML Link and CSS (Modern Layout Style)

A Detailed Lesson Plan in ICT

I. Objectives:
At the end of the lesson, the students can;
a. Discuss what is HTML and CSS.
b. Identify the different uses of HTML and CSS in creating webpage.
c. Learn about editing, formatting, and using colors when making webpages.
II. SUBJECT MATTER:
TOPIC: HTML Link and CSS (Modern Layout Style)
SUB-TOPIC: Creating Webpages using HTML and CSS.
INSTRUCTIONAL MATERIALS: Laptop, Internet Connection, PPT, Online Application
( Microsoft Teams)
REFERENCES: Internet, Online References Manual
III. PROCEDURES:

Teacher’s Activity Student’s Activity

A. Preliminary Activities
1. Daily Routine (Prayer) Let us pray……. Amen!
May request_______ to please lead us a prayer.

2. Greetings
Good evening everyone! Good evening ma’am!
Before we are going to start our class please let
me know if am I audible. Am I audible class? Yes ma’am!

3. Checking of attendance
To start our class, let me check your attendance
first. But in checking of our attendance, we are
going to have a twist. Instead of saying present
say YOUR STATUS IN WHAT YOU ARE DOING IN STATUS!
VALENTINES DAY!.
Let us start with………

Very good class thank you for your

participation!

4. Developmental Activities
1. Activity
a. Motivational: GUESS ME! Student’s Listening.
Before we are going to start our
lesson for tonight, we prepared an .........
activity to freshen up your mind.
 We are going to show you some
pictures, all you have to do is to
guess the picture presented of the
different webpages.

Am I clear class? Did you Yes ma’am!

understand the instructions?

I’m going to give you 10 seconds to

complete the name of the pictures Someone raising his/her hands.
shown. Your 10 seconds starts now.
First picture!

Yes, Mr./Ms. _____ what is the first

picture name? A Brainly ma’am!

Yes correct! It’s a Brainly. Thank Student raising their hands. And
you for your answer. answering….
Next picture………….

2. Analysis
(Proper Lesson)
So now do you have an idea what is our It’s all about HTML and CSS
lesson all about? ma’am?
Thank you for that answer!

And now let us start our lesson. And our

topic is all about HTML Link and CSS
(Modern Layout Style).

Anyone of you class has an idea what Is Student raising his/her hand.
HTML and CSS? HTML and CSS for me ma’am
Okay, thank you miss/mister_____ for that it’s………
answer. Great idea!

HTML/CSS is used for?

 Creating documents that are displayed as web pages on
the internet. Students Read and Give his/her
 Displaying text, images, links, etc on websites Insight!!
 Editing and formatting text and colors on websites Thank you! Mr./Ms._____ of your
brilliant Idea!
Intro To HTML
What exactly is HTML?
 HTML is the standard language for creating web pages. Students Participate
 It describes the structure of a web page.
How and where is html used?
 HTML works because it contains elements that are Students Participate
clearly described.
 It labels certain parts to be certain things like
“paragraphs” or “headers”
 It is used to make all webpages.

Creating basic things on a webpage

Tags are one of the most important things to coding HTML. Students Read and Give his/her
So… how do we use them to make: Insight!!
 Headings Thank you! Mr./Ms._____ of your
 paragraphs brilliant Idea!
 Media
 And more?

In HTML everything needs to be inside two tags. Here is

example code:

Breaking down the basic code:

Students Participate

● Everything should be inside html tags

● Everything between the “head” tags is “metadata”
meaning it’s things that the user doesn’t actually see on
 the webpage.
● Everything you want the user to see should be between
“body” tags.

Adding images

<img src="img_girl.jpg" alt="picture of a girl" style="width: Students Read and Give his/her
500px; height: 600px;"> Insight!!
Thank you! Mr./Ms._____ of your
● There is no end tag, only a long image tag, spelled “img” brilliant Idea!
● Inside the tag, you will put the image source which can
be found as the image address. If the image is found on
google, right click it and open it in a new tab, then right
click that image and copy the image address.
● The alt attribute is for when ur image doesn’t display
right. It will display alternate text describing the picture
for situations where the image is malfunctioning, or if
the user uses a screen reader.
● Lastly, there is the style attribute where you can adjust
the width and height of the image in pixels. (It’s really
helpful to write down the original ratios from google.)

Adding links to youtube videos

 To add a link to a youtube video, just go to the share Students Read and Give his/her
button under the video. There, you will find an option Insight!!
that says embed, which will give you the code you can Thank you! Mr./Ms._____ of your
copy and paste. brilliant Idea!

Adding videos

 Adding videos with HTML is similar to adding photos,

but instead of just having one tag, you have a start Students Participate
 <video> tag and an ending one.

<video width="320" height="240" controls>

<source src="/build/videos/arcnet.io(7-sec).mp4"
type=video/mp4>
</video>
Inside the start tag are the width and height controls. In
between the tags is where you will put the source of the video.

Making tables

 You can make tables in Html! Here’s how you can start! Students Read and Give his/her
Make a <table> tag and </table> tag. In between those Insight!!
make you first row using <tr>. Then make your first cell Thank you! Mr./Ms._____ of your
within the row using brilliant Idea!
<td>. End the cell with </td> and end the row with </tr>.

CSS
What is CSS and How is it used?
Students Read and Give his/her
What exactly is it? Insight!!
● CSS is what makes web pages more aesthetic Thank you! Mr./Ms._____ of your
● It changes things like text color, font, and things like brilliant Idea!
that.
To add CSS to your Html file write:
<link rel="stylesheet"type="text/css"href="styles.css"> within
the head tags at the top of your html page. “styles.css” would
be the name of your css file.

How and where is CSS it used?

 ● CSS code is a put in a file that accompanies an HTML
file.
● It takes what the HTML code has created ( text, images,
etc.) and formats it to look nice on the webpage.

Web page with CSS: Web page without CSS

Students Participate

How is CSS written/formatted?

 Earlier in the code, if some elements were grouped Students Read and Give his/her
together into something named “.red_txt”, then later Insight!!
everything under that could be easily changed to be red Thank you! Mr./Ms._____ of your
using these lines of CSS code. brilliant Idea!

Changing text colors and fonts

h1 {
color: blue;
font-size: 20 pt;
font-family: “Times New Roman”; }
Anything you want to change about the text of one html
element goes inside the two curly brackets.

Changing your text (more detailed) Students Participate

If you want to change the way your text looks in terms of it

being in italics or bolded then here’s what you can do!
Italics: font-style:italic; Bold: font-weight:bold; Font size: font-
size: #px;
Aligning center: text-align:center;

Students Read and Give his/her

Insight!!
Thank you! Mr./Ms._____ of your
brilliant Idea!
Changing background color

If you want to change the background color of your website

then here’s how you do it!
In your CSS page start by putting body { Students Read and Give his/her
background: Insight!!
} Thank you! Mr./Ms._____ of your
Then add your color that you want. This will change your body brilliant Idea!
to the color you added!

Students Participate

Adding borders!

Adding borders to your website makes it look really nice. Here’s

how you can do it! Students Read and Give his/her
Insight!!
Thank you! Mr./Ms._____ of your
brilliant Idea!
 Students Participate

Html with CSS!

HTML and CSS go hand in hand when creating a webpage.

From what you have learned, you now know that HTML creates Students Read and Give his/her
the actual text and body of the website, and CSS adds color Insight!!
and style. It’s simple and fun to use HTML and CSS together to Thank you! Mr./Ms._____ of your
create a website. brilliant Idea!

Assignment:

• TAKE A REST
• SPEND TIME WITH YOUR FAMILY Thank you maam/sir!!!!
• LET YOUR WEEKEND ACAD FREE
• PRAY AND PRAISE GOD
• WATCHING ANIME & KDRAMA
 Thank you!!

Any questions? Clarifications? If none, then that’s the end of our

lesson for tonight class, hope you learned something about the
topics I have teach you! Thank you for listening!
Have a good night and God bless us all!

Generalization: OVERVIEW OF HTML AND CSS

HTML (Hypertext Markup Language) is the standard language used for creating web pages. It
provides a structure for the content of a website and defines how it is presented to users. HTML
elements are used to create the different sections of a web page, such as headings, paragraphs, lists,
links, images, and more.

CSS (Cascading Style Sheets) is used to add style and layout to HTML pages. CSS allows
developers to separate the presentation of a web page from its content, making it easier to manage and
maintain. CSS rules are used to specify the font, color, background, spacing, and other visual aspects of a
web page.

Together, HTML and CSS form the backbone of the modern web. HTML provides the content
and structure, while CSS adds the visual design and layout. By using these two technologies, web
developers can create visually appealing, interactive, and responsive websites.