INTRODUCTION TO HTML
Module 1
Ms. Azenith R. Mojica
Faculty, CSD
Page |1
Table of Contents
Cover Page
Table of Contents 1
Gospel 3
Learning Outcomes 4
Introduction to HTML Formatting Elements 5
What is HTML? 5
History 5
HTML Document Structure 6
HTML Tags 6
Heading 7
Paragraph 9
Line Break 10
Horizontal Rule 13
Preserve Formatting 15
Block quote 16
Address 17
HTML Comment 18
Body Tag Attributes 19
By: Azenith R. Mojica
Page |2
Summary Table of Basic HTML Tags 22
Activities & Exercises 24
References 27
By: Azenith R. Mojica
Page |3
Gospel
By: Azenith R. Mojica
Page |4
Learning Outcomes
At the end of the module, you will be able to:
1. Understand the basic concepts of HTML.
2. Apply the basic structure in creating Web pages.
3. Use the basic HTML tags and elements in designing basic Web pages.
By: Azenith R. Mojica
Page |5
Introduction to HTML
By: Azenith R. Mojica
Page |6
By: Azenith R. Mojica
Page |7
By: Azenith R. Mojica
Page |8
Example 1
By: Azenith R. Mojica
Page |9
Example 2
By: Azenith R. Mojica
P a g e | 10
By: Azenith R. Mojica
P a g e | 11
Example 3
By: Azenith R. Mojica
P a g e | 12
By: Azenith R. Mojica
P a g e | 13
By: Azenith R. Mojica
P a g e | 14
Example 4
By: Azenith R. Mojica
P a g e | 15
Example 5
By: Azenith R. Mojica
P a g e | 16
By: Azenith R. Mojica
P a g e | 17
Example 6
By: Azenith R. Mojica
P a g e | 18
Example 7
By: Azenith R. Mojica
P a g e | 19
Example 8
By: Azenith R. Mojica
P a g e | 20
Example 9
By: Azenith R. Mojica
P a g e | 21
Example 10
By: Azenith R. Mojica
P a g e | 22
Table 1. Summary of HTML Basic Tags
Tags Attributes Sample Value Function
<html> Indicates the beginning and
</html> end of an HTML document.
<head></head Indicates the beginning and
> end of a section of the
document used for the title
and other document header
information.
<title> Indicates the beginning and
</title> end of the title; displays
on the title bar of the
browser.
<body> Indicates the beginning and
</body> end of the web page body.
background =”pic1.jpg” Sets the background image
=”pic2.gif” of a web page.
bgcolor =”blue” Sets the background color of
=”#0000ff” a web page. Possible value
=”rgb(0,0,255) format: color name,
” hexadecimal and decimal rgb
format.
text =”red” Sets the font color for the
=”#ff0000” whole document.
=”rgb(255,0,0)
”
bgpropertie =”scroll” Sets the background image
s (default) property of a web page to
=”fixed” scroll or fixed.
<h1></h1> Indicates the beginning and
through end of the text section
<h6> </h6> called heading; sizes range
from <h1> (as the largest)
through <h6> (as the
smallest).
align =”left” Aligns the header
(default) horizontally.
=”center”
=”right”
<p> </p> Indicates the beginning and
end of the paragraph.
By: Azenith R. Mojica
P a g e | 23
align =”left” Aligns the paragraph
(default) horizontally.
=”center”
=”right”
=”justify”
<!-- --> Comments in HTML.
<br /> Forces a line break.
<hr> </hr> Inserts a horizontal rule, a
straight line going across
the screen.
color =”green” Color of horizontal rule.
=”#00ff00”
=”rgb(0,255,0)
”
width =”100” Width of horizontal rule.
(pixels)
=”100%”
size =”100” Height of horizontal rule.
(pixels)
=”100%”
align =”left” Aligns the horizontal rule
=”center” horizontally on the page.
(default)
=”right”
noshade =”noshade” Removes the 3D shading,
rendering the horizontal
rule as a solid color bar.
<blockquote> Creates a block quotation;
</blockquote conventionally displayed
> indented, but not designed
for indenting text.
<address> Used to markup contact
</address> information for the document
or a section of it.
<pre> </pre> Previously Formatted Text
Tag; HTML will recognize
tabs, extra spaces, and all
carriage returns.
By: Azenith R. Mojica
P a g e | 24
ACTIVITIES & EXERCISES
1. Use the HTML tags learned in Module 1 to display the page below.
(10 points)
By: Azenith R. Mojica
P a g e | 25
2. Complete the Table below. (10 points)
HTML Tag Use/Function
<html> </html>
<head> </head>
Indicates the beginning and end of the
web page body.
<h1></h1> through <h6> </h6>
<p> </p>
Creates a block quotation;
conventionally displayed indented,
but not designed for indenting text.
<address> </address>
<pre> </pre>
HTML Comment
<hr> </hr>
By: Azenith R. Mojica
P a g e | 26
2. Use the HTML tags learned in Module 1 create a Web Page on COVID-19
Awareness.
Your page should include:
A minimum of 2 paragraphs with different alignment (5 points)
Horizontal Rule (3 points)
A block quote (3 points)
Pre-formatted text (3 points)
Hospital Information Address/ Hotline Numbers (3 points)
Background Image (3 points)
=============
Total = 20 points
By: Azenith R. Mojica
P a g e | 27
REFERENCES AND ADDITIONAL READINGS
Https://www.w3schools.com/html/html_basic.asp
------------------
HTML for Beginners the Easy Way: Start Learning HTML & CSS
Today
https://html.com
------------------
HTML tutorial for beginners
https://www.youtube.com/watch?v=rjhflb -qgvc
------------------
HTML Full Course - Build a Website Tutorial
https://www.youtube.com/watch?v=pqn-pnxpavg
------------------
By: Azenith R. Mojica
