Scribd
Upload
200 views28 pages

Introduction To HTML: Ms. Azenith R. Mojica

This document provides an introduction to HTML formatting elements. It includes definitions and examples of common HTML tags such as headings, paragraphs, line breaks, horizontal rules, block quotes, addresses, and comments. It also describes basic HTML document structure and attributes that can be used to set background colors, images and text formatting. Exercises are provided to have the reader create HTML pages using the tags covered in the document.

Uploaded by

Ian Lamayo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
200 views28 pages

Introduction To HTML: Ms. Azenith R. Mojica

This document provides an introduction to HTML formatting elements. It includes definitions and examples of common HTML tags such as headings, paragraphs, line breaks, horizontal rules, block quotes, addresses, and comments. It also describes basic HTML document structure and attributes that can be used to set background colors, images and text formatting. Exercises are provided to have the reader create HTML pages using the tags covered in the document.

Uploaded by

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

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

You might also like