National Capital Region
Schools Division Office
CALOOCAN NATIONAL SCIENCE AND TECHNOLOGY HIGH SCHOOL
Blk. 29, Congress Road, Bagumbong, Caloocan City
Information and Communication
Technology (ICT)
Module for Junior High School
90
MODULE 2
https://ec.europa.eu/eurostat/cache/infographs/ict/
Prepared by:
MS. KHRIZEENEE C. CONTE
ICT Teacher
Lesson 1: HTML Introduction
Content Standard Resources:
The learners demonstrate understanding of Online website tutorial -
https://www.w3schools.com/html/default.asp
designing webpage.
DownloadedE-book -
https://goalkicker.com/HTML5Book/
Performance Standard *Inspired by DepEd module for template
The learners apply the step-by-step process on *Links are provided for other online resources
designing website using HTML.
Disclaimer:
This is a module created for educational purposes
(school-based) and not affiliated with official
HTML5 group(s) or company(s). All copyright and
registered copyrights are the property of their
respective owners.
To the Learners
Before starting the module, I want you to set aside other TASK that will disturb you while enjoying the
lesson. Read the following instructions:
1. Use the module with care. Do not put unnecessary mark/s on any part of the module. Use
separate sheet of paper in answering activities and exercises.
2. Read the specific instruction carefully before doing each task.
3. Observe honesty and integrity in doing the task.
4. Finish the task at hand before proceeding to the next.
5. Return this module to your teacher/facilitator once you are through with it.
If you encounter any difficulty in answering the task in this module, do not hesitate to consult your teacher
or facilitator.
Expectation
This module was designed and written with you in mind. It is here to help you to have a knowledge in
Advance HTML with the combination of CSS.
The module is divided into four lessons, namely:
1. HTML Introduction
2. HTML (Attributes and Heading)
3. HTML (Paragraph and Styles)
4. HTML (Entities, Symbols and Emojis)
After going through this module, you are expected to:
1. Learn the different factors in HTML such as code editors, stracture, basic jargons, and various
syntax.
2. Describe and apply HTML tags for head, attributes and heading
3. Identify tags used in paragraph and know how to set HTML sytles
4. Acquire knowledge in inserting entities, symbols and emojis.
Formative Assessment
I.True or False.
Directions: Write True if the statement is correct and False if incorrect. Use another sheet of paper.
1. .<body> tag opens the part of the document displayed to users, i.e. all the visible or audible
content of a page. No content should be added after its closing tag.
2. The HTML paragraph element always starts a new line and browser automatically add some
white spaces (a margin) before and after a paragraph.
3. HTML heading are defined with <h1> to <h6> tags. <h1> defines the least important heading
while <h6> defines the most important heading.
4. Include the <lang> attribute inside the HTML tag, to declare the language of the Web page.
5. <src> tag is used to embed an image in an HTML page
II.Acronym
Directions: Give the corresponding acronym or tag meaning of the following:
1. <alt>
2. <hr>
3.
4. <br>
5. <lang>
6. <src>
7. &
8. <p>
9. <pre>
10. CSS
Looking back to your lesson
Let’s have some review before proceeding to our new topic with this module.
I. Give the meaning of the following: II. On your own words and illustration, explain
1. HTML the difference between web page and website.
2. URL
3. HTTP
4. mil
5. .gov
Lesson Proper
What is HTML?
HTML (Hypertext Markup Language) uses a markup system composed of elements which represent
specific content. Markup means that with HTML you declare what is presented to a viewer, not how it is presented.
Visual representations are defined by Cascading Style Sheets (CSS). As said earlier in this module you will learn
about advance HTML with the combination of CSS
HTML is sometimes called a programming language, but it has no logic, so it is a markup language. HTML
tags provide semantic meaning and machine-readability to the content in the page. An element usually consists of an
opening tag (<element_name>), a closing tag (</element_name>), which contain the element's name surrounded by
angle brackets, and the content in between.
Example: <element_name>...content...</element_name>
There are some HTML elements that don't have a closing tag or any contents. These are called void elements.
Void elements include <img>, <meta>, <link>, <br>,<input> and so on. Element names can be thought of as
descriptive keywords for the content they contain, such as video, audio, table, footer. HTML page may consist of
potentially hundreds of elements which are then read by a web browser, interpreted and rendered into human readable
or audible content on the screen. For this document it is important to note the difference between elements and tags:
Elements: video, audio, table, footer
Tags: <video>, <audio>, <table>, <footer>, </html>, </body>
Element insight:
The <p> tag represents a common paragraph.
Elements commonly have an opening tag and a closing tag. The opening tag contains the element's name in
angle brackets (<p>). The closing tag is identical to the opening tag with the addition of a forward slash (/)
between the opening bracket and the element's name (</p>).
Content can then go between these two tags: <p>This is a simple paragraph. </p>.
What is code editor?
Code editor programs are core essential for creating and building your websites using HTML language. There
are many stable and great code editors in the market from free to commercial ones. Examples are: Notepad
(traditional), Notepad++, CodePen, Sublime text, Adobe Dreamweaver CC and so on. However, this module will
focused on using the traditional notepad or notepad++.
Follow the steps below to create your first web page with Notepad or Notepad++
Step 1: Open Notepad (PC)
Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.
Windows 7 or earlier: Open Start > Programs > Accessories > Notepad
Step 1: Notepad++
Download application https://notepad-plus-plus.org/downloads/
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad++
Step 2: Write Some HTML
Write or copy the following HTML code into Notepad or Notepad++:
Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the menu.
Name the file "index.htm"
Tip: You can use either .htm or .html as file extension. There is no difference, it is up to you.
Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open
with"). The result will look much like this:
Note: Notepad++ can easily detect if there’s an error to your coding but it is also encouraged to use the traditional
notepad if you’re a beginner in HTML.
Simple page break down
These are the tags used in the example:
Tag Meaning
<!DOCTYPE> Defines the HTML version used in the document. In this case it is HTML5. See the doctypes
topic for more information.
<html> Opens the page. No markup should come after the closing tag (</html>). The lang attribute
declares the primary language of the page using the ISO language codes (en for English). See
the Content Language topic for more information.
<head> Opens the head section, which does not appear in the main browser window but mainly
contains information about the HTML document, called metadata. It can also contain imports
from external stylesheets and scripts. The closing tag is </head>.
<meta> Gives the browser some metadata about the document. The charset attribute declares the
character encoding. Modern HTML documents should always use UTF-8, even though it is not
a requirement. In HTML, the <meta> tag does not require a closing tag. See the Meta topic for
more information.
<title> The title of the page. Text written between this opening and the closing tag (</title>) will be
displayed on the tab of the page or in the title bar of the browser.
<body> Opens the part of the document displayed to users, i.e. all the visible or audible content of a
page. No content should be added after the closing tag </body>.
<h1> A level 1 heading for the page. See headings for more information.
<p> Represents a common paragraph of text.
Lesson 2: HTML (Attributes and Heading)
What are HTML Attributes?
HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like: name="value"
1. The href Attribute
<a> tag defines a hyperlink. The href attribute 6.The Lang Attribute
specifies the URL of the link page. Include the lang attribute inside the <html> tag,
to declare the language of the Web page. This is meant to
assist search engines and browsers. “en” = English
7. The Style Attribute
Title attribute defiens some extra information
2. The src Attribute about an element. The value of this will be displayed as a
<img> tag is used to embed an image in an tooltip when you mouse over the element.
HTML page. The src attribute specifies the path to the
image to be displayed.
3. The height and width attribute
<img> tag should also contain
the width and height attributes, which specifies the width
and height of the image (in pixels):
What are HTML Headings?
HTML headings are defined with
the <h1> to <h6> tags. <h1> defines the most important
4. The ALT attribute
heading. <h6> defines the least important heading.
alt attribute is required for the <img> tag to
Search engines use the headings to index the
specifies an alternate text for an image if the image for
structure and content of your web pages. Users often
some reason cannot be displayed. This can be due to slow
skim a page by its headings. It is important to use
connection, or an error in the src attribute, or if the user
headings to show the document structure.
uses a screen reader.
5. The Style Attribute
The style attribute is used to add styles to an
element, such as color, font, size, and more.
Each HTML heading has a default size. However, you
can specify the size for any heading by the style attribute,
using the CSS font-size property.
Lesson 3: HTML (Paragraphs and Style)
What is HTML paragraph?
The HTML <p> element defines a paragraph. A HTML <pre> Element for Poem
paragraph always starts on a new line, and browsers The HTML <pre> element defines preformatted
automatically add some white space (a margin) before text. The text inside a <pre> element is displayed in a
and after a paragraph. fixed-width font (usually Courier), and it preserves both
spaces and line breaks.
HTML Horizontal rule
The <hr> tag defines a thematic break in an
HTML page, and is most often displayed as a horizontal
rule. The <hr> element is used to separate content (or
define a change) in an HTML page.
What is HTML Style?
This attribute is used to add styles to an element,
such as color, font, size, and more. Setting the style can
be done with the style attribute. It has the following css
property and values:
<tagname style="property:value;">
Note: You will learn more about CSS in this module.
1. CSS Background color
The background-color property defines the
background color for an HTML element.
HTML Line Break
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without
starting a new paragraph. The <br> tag is an empty tag,
which means that it has no end tag.
2. CSS Text
color property defines the text color for an > greater than > >
HTML element. & ampersand & &
font-family property defines the font to be used “ double quotation " "
for an HTML element. mark
font-size property defines the text size for an ‘ single quotation ' '
HTML element. mark
text-align property defines the horizontal text £ pound £ £
alignment for an HTML element: ¢ cent ¢ ¢
¥ yen ¥ ¥
€ euro € €
© copy right © ©
® Registered ® ®
trademark
Some Mathematical Symbol
Character Description Number Entity
∀ for all ∀ ∀
∂ partial ∂ ∂
differential
∃ there exists ∃ ∃
∅ empty sets ∅ ∅
∇ nabla ∇ ∇
∈ element of ∈ ∈
∉ not an ∉ ∉
element of
∋ contains as ∋ ∋
member
∏ n-ary product ∏ &8719;
∑ n-ary ∑ ∑
summation
Lesson 4: HTML (Entities,
Emojis and Symbols)
What are HTML Entities?
What are Emojis?
Some characters are reserved in HTML. Emojis are characters from the UTF-8 (Unicode)
If you use the less than (<) or greater than (>) signs in Character Set. It looks like images, or icons but they are
your text, the browser might mix them with tags. not.
Character entities are used to display reserved To display an HTML page correctly, a web
characters in HTML. There are two ways to display a browser must know the character set issued in the page.
less than sign (<) entity name < or entity number This is specified in the <meta> tag, and Charset is an
< example attribute with the value “UTF-8”of Metadata
tag.
A commonly used entity in HTML is the non-breaking
space: . Two words separated by a non-breaking
space will stick together (not break into a new line). This
is handy when breaking the words might be disruptive.
There are some useful HTML Character Entities
Result Description Entity Entity
Name number
Non-breaking
space  
< less than < <
