Scribd
Upload
18 views70 pages

Computer Lesson 3 HTML Elements

The document outlines a lesson plan for teaching students how to create a simple HTML web page using a text editor. It covers the major parts of an HTML document, including the HTML, HEAD, and BODY tags, as well as various HTML elements such as headings, paragraphs, and comments. The lesson includes practical exercises for students to apply their learning by creating and saving HTML files.

Uploaded by

irma sanchez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
18 views70 pages

Computer Lesson 3 HTML Elements

The document outlines a lesson plan for teaching students how to create a simple HTML web page using a text editor. It covers the major parts of an HTML document, including the HTML, HEAD, and BODY tags, as well as various HTML elements such as headings, paragraphs, and comments. The lesson includes practical exercises for students to apply their learning by creating and saving HTML files.

Uploaded by

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

A LESSON

IN
COMPUTER
7 TO 10
Karol Paul D. Sotelo
Learning Objectives
At the end of the lesson, the students should be
able to:
• To create a simple web page using a text editor
• To identify major parts of a HTML document
• To be aware of the basic tags that I can use to
publish my HTML document
• To be able to launch the created HTML file to a
browser
REVIEW
What was our
lesson last time?
What is a
Tag?
What are
Empty Tags?
Give an example
of an Empty Tag
What are
Container Tags?
Give an example
of a Container Tag
MOTIVATION
Watch the video and jot
down important details:
https://www.youtube.com/
watch?v=salY_Sm6mv4
NEW WORDS
TO LEARN
/do-kyu-ment/
DOCUMENT
/is-tayl/
STYLE
/a-layn/
ALIGN
/e-di-tor/
EDITOR
SELECTION
HTML documents are composed of 3 important container
tags: HTML, HEAD, and BODY tags.
1.The HTML container tag indicates that the doument
should be interpreted as a HTML document
2.The HEAD container tags have the necessary
information regarding the HTML document: What is its
content about, keywords to access the page, comments
regarding the document, scripts, etc.
3.The BODY container tags have the elements to be
displayed in the browser.
PRESENTATION
What is our lesson
for today?
Our lesson for today is about,

HTML
ELEMENTS
Karol Paul D. Sotelo
DISCUSSION
What are the major parts
of a HTML document?

HTML

HEAD

BODY
BODY TAG

• has the most attributes


because this is the part
where the content of
the HTML document is
primarily located.
BODY TAG
ATTRIBUTES
bgcolor

• specifies the background


color of the page.
• <body bgcolor=”black”>
• <body
bgcolor=”rgb(0,0,0)”>
• <body
bgcolor=”#000000">
background

• specifies the background


image of the page.
• <body
background=”image.jpg”>
text

• specifies the color of normal


text in the page.
• <body text=”black”>
link

• specifies the color of text


with hyperlink in the page.
• <body link=”blue”>
vlink

• specifies the color of text


with a visited hyperlink in
the page.
• <body vlink=”yellow”>
alink

• specifies the color of text


with hyperlink when clicked.
• <body alink=”white”>
class, id, style

• for CSS (later discussion)


Tags and Indentation

• HTML browsers ignore white


spaces. A white space is
any space, cariage return,
or line break that is inserted
into a HTML document.
Tags and Indentation

• The browser will only


display a single space
between texts regardless of
how much space it has
inside the HTML document.
HEADINGS
Headings

• are container tags which


format text to emphasize its
content using default value
for size and color. Defined
using <h1> to <h6> tag.
• an extra line is placed after
headings when it is
displayed in the browser.
Attribut Possible
Definition
es Values
specifies the alignment
left, right, center,
align of the text inside the
justify
heading

is a text that appears


title when the mouse passes any text
over the heading

class, id, for CSS (for later


for later duscussion
Paragraphs

• are defined with the <p>


tag. Like headings, HTML
places an extra line after
paragraphs.
Attribut Possible
Definition
es Values
specifies the alignment
left, right, center,
align of the text inside the
justify
heading

assigns the format of


style the paragraph: any text
background, color, font

class, id, for CSS (for later


Line Break

• The <br> tag is used when


you want to force a line
break (new line) wherever
you place it.
Comments

• The starting tag and ending


tags for comment are <!-- and
-->, respectively. Comments are
used to insert a comment or a
remark in the HTML source
code.
Horizontal Rule

• The <hr> tag places a


horizontal line that spans
the width of the browser.
Attribut Possible
Definition
es Values
specifies the alignment
left, right, center,
align of the text inside the
justify
heading

assigns the size, in


size pixels of the line
pixels

is the width or span of


width the line in pixels or pixels
Attribut Possible
Definition
es Values
removes the default
shading in the line
noshade which the browsers
(none)

adds by default

specifies the color of color name, RGB,


color the line HEX

class, id, for CSS (later


APPLICATION
HOW TO
CREATE AN
HTML
DOCUMENT?
01 OPEN A TEXT EDITOR

• For this exercise, we


will be using
Notepad ++
02 Copy the following text

<html>
<head>
<title> This is where my title is
</title>
</head>
<body>
This is where the body is.
</body>
</html>
03 SAVE THE FILE

• Save the file as


testpage.html
Note: Save it inside your
folder.
04 OPEN THE DOCUMENT

• Open the document in a


browser.
Note: ALWAYS USE GOOGLE
CHROME
HEADINGS
Headings
(Copy the following text)
SAVE THE FILE

• Save the file as


headings.html
Note: Save it inside your
folder.
PARAGRAPHS
Paragraphs
(Copy the following text)
SAVE THE FILE

• Save the file as


paragraphs.html
Note: Save it inside your
folder.
LINE BREAK
Line Break
(Copy the following text)
SAVE THE FILE

• Save the file as


linebreak.html
Note: Save it inside your
folder.
COMMENTS
Comments
(Copy the following text)
SAVE THE FILE

• Save the file as


comments.html
Note: Save it inside your
folder.
HORIZONTAL
RULE
Horizontal Rule
(Copy the following text)
SAVE THE FILE

• Save the file as


horizontalrule.html
Note: Save it inside your
folder.
EVALUATION
EVALUATION

1.Prepare a copy of your favorite poem.


2.Create a simple HTML file to display a portion
of your selected piece of literature.
3.Use headings for the title, horizontal lines,
spaces, comments, and paragraphs.
4.Save as myLiterature1.html
ASSIGNMENT
ASSIGNMENT

1.Prepare a copy of your favorite essay/story


and a journal/diary entry.
2.Create a simple HTML file to display a portion
of your selected piece of literature.
3.Use headings for the title, horizontal lines,
spaces, comments, and paragraphs.
4.Save as myLiterature2.html (for essay/story)
and myLiterature3.html (for journal/diary
entry)

You might also like