Scribd
Upload
20 views8 pages

Sept 5 2024 Learning Material Activity

Uploaded by

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

Sept 5 2024 Learning Material Activity

Uploaded by

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

HTML HEADINGS, PARAGRAPH, and STYLES

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 leasExample Output in the browser:
t important heading.

Example HTML Code: Example Output in the browser:

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.
HTML Paragraphs
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.

Example Code:
Expected Output on the Browser:
1
Page

TVL – Computer Programming (G11) Edison e. Feranil


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.

Example Code: Expected Output on the Browser

HTML Line Breaks


2
Page

The HTML <br> element defines a line break. Use <br> if you want a line break (a
new line) without starting a new paragraph:

TVL – Computer Programming (G11) Edison e. Feranil


Example Code:

Expected Output on the Browser:

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:

Example Code: Expected Output on the Browser

HTML Styles
3
Page

The HTML style attribute is used to add styles to an element, such as color, font,
size, and more.
TVL – Computer Programming (G11) Edison e. Feranil
The property is a CSS property. The value is a CSS value. That will be discuss in
details in the future lesson.

Example Code: Expected Output on the Browser

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:

Background Color
The CSS background-color property defines the background color for an HTML
element. In HTML, a color can be specified by using a color name.
Set the background color for a page to powderblue:

Example Code: Expected Output on the Browser

Set background color for two different elements:


4

Example Code: Expected Output on the Browser


Page

TVL – Computer Programming (G11) Edison e. Feranil


Text Color
The CSS color property defines the text color for an HTML element:
Example Code: Expected Output on the Browser

Fonts
Fonts is a design for a set of characters. A font is the combination of typeface
and other qualities, such as size, pitch, and spacing.
For example, Times Roman is a typeface that defines the shape of each
character. Within Times Roman, however, there are many fonts to choose from --
different sizes, italic, bold, and so on. (The term font is often used incorrectly as
a synonym for typeface.)
The height of characters in a font is measured in points, each point being
approximately 1/72 inch. The width is measured by pitch, which refers to how many
characters can fit in an inch.
Common pitch values are 10 and 12. A font is said to be fixed pitch if every
character has the same width. If the widths vary depending on the shape of the
character, it is called a proportional font.
5

Font style refers to the size, weight, color and style of typed characters within
Page

a document, in an email or on a webpage. In other words, the font style changes the
appearance of a complete set of characters that make up a typeface or font.

TVL – Computer Programming (G11) Edison e. Feranil


The font dictates point size, typeface style, italicization, boldface and other
ways characters are manipulated in a word processor.

The CSS font-family property defines the font to be used for an HTML element:
Example Code: Expected Output on the Browser

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

Example Code: Expected Output on the Browser

Text Alignment
Page

TVL – Computer Programming (G11) Edison e. Feranil


Text alignment is a word processing software feature that allows users to
horizontally align text on a page/document.
It enables the composition of a text document using different text positioning
on the whole or selected part of a page.
Text alignment primarily places the cursor or aligns the text with the different
margins of the document. There are four different types of text alignment features,
including:
 Right alignment: This starts each new line of the document on the
right-most margin of the page.
 Left alignment: As the default alignment in most word processing
software, it starts each line on the left-most margin.
 Center alignment: This positions and starts each new line/text block in
the center/middle margin on the page.
 Justified alignment: This aligns text with right and left margins and
tries to fill as much empty space as possible. It enables a straight
margin on both of the page's horizontal edges.

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

Example Code: Expected Output on the Browser

7
Page

TVL – Computer Programming (G11) Edison e. Feranil


E What is more?
Job Sheet 7.2.1
I. Direction. Modify the html document to satisfy the output in the box.

A. <!DOCTYPE html> Desired Output:


<html>
<heading> Hi,
<title> Line Break Example </title> How are you.
</heading> Regards
<body>
XYZ
<p>Hi, How are you. Regards XYZ</p>
</body>
</html>

B. <!DOCTYPE html> Desired Output:


<html>
<head> First sentence
<title>HTML hr tag</title>
</head>
Second sentence
<body>
<p>First Sentence</p>
<p>Second sentence.</p>
</body>
</html>

8
Page

TVL – Computer Programming (G11) Edison e. Feranil

You might also like