Introduction To HTML: Ms. Azenith R. Mojica

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

Page |3
Gospel

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.

Page |5
Introduction to HTML

Page |6

Page |7

Page |8
Example 1

Page |9
Example 2

P a g e | 10

P a g e | 11
Example 3

P a g e | 12

P a g e | 13

P a g e | 14
Example 4

P a g e | 15
Example 5

P a g e | 16

P a g e | 17
Example 6

P a g e | 18
Example 7

P a g e | 19
Example 8

P a g e | 20
Example 9

P a g e | 21
Example 10

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.

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.

P a g e | 24
ACTIVITIES & EXERCISES

1. Use the HTML tags learned in Module 1 to display the page below.
(10 points)

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>

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

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
------------------

Introduction To HTML: Ms. Azenith R. Mojica

Uploaded by

Introduction To HTML: Ms. Azenith R. Mojica

Uploaded by

INTRODUCTION TO HTML

Ms. Azenith R. Mojica

Introduction to HTML Formatting Elements 5

 HTML Document Structure 6

 Body Tag Attributes 19

By: Azenith R. Mojica

 Summary Table of Basic HTML Tags 22

Activities & Exercises 24

By: Azenith R. Mojica

By: Azenith R. Mojica

1. Understand the basic concepts of HTML.

2. Apply the basic structure in creating Web pages.

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

By: Azenith R. Mojica

Table 1. Summary of HTML Basic Tags

<html> Indicates the beginning and

<head></head Indicates the beginning and

<title> Indicates the beginning and

<body> Indicates the beginning and

background =”pic1.jpg” Sets the background image

bgcolor =”blue” Sets the background color of

text =”red” Sets the font color for the

<h1></h1> Indicates the beginning and

align =”left” Aligns the header

<p> </p> Indicates the beginning and

By: Azenith R. Mojica

align =”left” Aligns the paragraph

<br /> Forces a line break.

<hr> </hr> Inserts a horizontal rule, a

color =”green” Color of horizontal rule.

width =”100” Width of horizontal rule.

size =”100” Height of horizontal rule.

align =”left” Aligns the horizontal rule

noshade =”noshade” Removes the 3D shading,

<blockquote> Creates a block quotation;

<address> Used to markup contact

<pre> </pre> Previously Formatted Text

By: Azenith R. Mojica

ACTIVITIES & EXERCISES

By: Azenith R. Mojica

2. Complete the Table below. (10 points)

HTML Tag Use/Function

Indicates the beginning and end of the

<h1></h1> through <h6> </h6>

Creates a block quotation;

By: Azenith R. Mojica

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)

By: Azenith R. Mojica

REFERENCES AND ADDITIONAL READINGS

HTML tutorial for beginners

HTML Full Course - Build a Website Tutorial

By: Azenith R. Mojica

You might also like