COMPUTER PROGRAMMING

(.NET TECHNOLOGY) 2
Second Semester
Quarter 1 Module 2

HYPERTEXT MARKUP LANGUAGE (HTML) TUTORIAL SERRIES

▶️HTML HEADINGS ▶️HTML FORMATTING
▶️HTML PARAGRAPHS ▶️HTMLQUOTATIONS
▶️HTML STYLES

Name of Student:
 Specific Objectives:
WHAT I At the end of the lesson, you should achieve the following objectives:
NEED
TO KNOW 1. Identify the different HTM Headings.
2. Understand the use of HTM Styles
3. Comprehend HTML text formatting elements.

WHAT I KNOW

Matching Type: Match Column A to Coulumn B.

A B
____________ 1. <b> A. Defines a part of text in an alternate voice
or mood
____________ 2. <i> B. Defines superscripted text
____________ 3. <mark> C. Defines subscripted text
____________ 4. <sup> D. Defines bold text
____________ 5. <sub> E. Defines marked/highlighted text

WHAT’S NEW

Direction: Answer the question below.

Differentiate <h1> and<h6>.
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

Purpose of Font Size and Font Family.

_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

1
 WHAT IS IT

HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading:

Note: Browsers automatically add some white space (a margin) before and after a heading.
Headings Are Important
Search engines use the headings to index the structure and content of your web pages.
Users often skim a page by its headings. It is important to use headings to show the
document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then
the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.

Bigger Headings
Each HTML heading has a default size. However, you can specify the size for any
heading with the style attribute, using the CSS font-size property:

HTML Tag Reference

W3Schools' tag reference contains additional information about these tags and their
attributes.

2
 HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.

HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the display by adding extra spaces or extra lines in
your HTML code.
The browser will automatically remove any extra spaces and lines when the page is
displayed:

HTML Horizontal Rules

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:

The <hr> tag is an empty tag, which means that it has no end tag.
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:

3
The <br> tag is an empty tag, which means that it has no end tag.
The Poem Problem
This poem will display on a single line:

Solution - The HTML <pre> Element

The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually Courier),
and it preserves both spaces and line breaks:

HTML Tag Reference

W3Schools' tag reference contains additional information about HTML elements and
their attributes.

HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size,
and more.

4
 The HTML Style Attribute
Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:

The property is a CSS property. The value is a CSS value.

Background Color
•The CSS background-color property defines the background color for an HTML
element.

Text Color
The CSS color property defines the text color for an HTML element:

Fonts
The CSS font-family property defines the font to be used for an HTML element:

Text Size
The CSS font-size property defines the text size for an HTML element:

5
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

HTML Formatting Elements

Formatting elements were designed to display special types of text:
•<b> - Bold text
•<strong> - Important text
•<i> - Italic text
•<em> - Emphasized text
•<mark> - Marked text
•<small> - Smaller text
•<del> - Deleted text
•<ins> - Inserted text
•<sub> - Subscript text
•<sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content
inside is typically displayed in italic.
Tip: The <i> tag is often used to indicate a technical term, a phrase from another
language, a thought, a ship name, etc.

6
 HTML <small> Element
The HTML <small> element defines smaller text:

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers
will usually strike a line through deleted text:

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers
will usually underline inserted text:

HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character
below the normal line, and is sometimes rendered in a smaller font. Subscript text can
be used for chemical formulas, like H2O:

7
HTML <sup> Element
The HTML <sup> element defines superscript text. Superscript text appears half a
character above the normal line, and is sometimes rendered in a smaller font.
Superscript text can be used for footnotes, like WWW[1]:

HTML Quotation and Citation Elements

In this chapter we will go through the <blockquote>,<q>, <abbr>, <address>,
<cite>, and <bdo> HTML elements.

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another
source.
Browsers usually indent <blockquote> elements.

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.

8
 HTML <abbr> for Abbreviations
The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS",
"Mr.", "Dr.", "ASAP", "ATM".
Marking abbreviations can give useful information to browsers, translation systems
and search-engines.
Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.

HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner of a
document or an article.
The contact information can be an email address, URL, physical address, phone
number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will always
add a line break before and after the <address> element.

HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a
song, a movie, a painting, a sculpture, etc.).
Note: A person's name is not the title of a work.
The text in the <cite> element usually renders in italic.

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override the current text direction:

9
HTML Quotation and Citation Elements

WHAT’S MORE

Direction: Answer the question below.

What can you say about HTML Headings?
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

WHAT I CAN DO

Direction: Explain the following HTML Formats.

⏹️ <b>
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

⏹️ <strong>
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________

⏹️ <ins>
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________
____________________________________________________________________________________________________________________________________

10
WHAT I CAN SHOW

Which 21st century skill (Communication, collaboration, creativity, critical thinking,

productivity, leadership and technology literacy) do you enhance while learning our
topic? Explain your answer.
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

10