CHAPTER 3
HTML Basic Elements
Prepared by
VILCHOR G. PERDIDO
(Course Instructor)
Learning Outcomes/Objectives LAB
WebDev
• learn and apply the different basic HTML
elements, tags and their attributes in creating
web page contents
• Common tags (headings, paragraphs, the style
attribute)
• Text formatting
• Quotations and Citations
• Colors
1
Lesson 3.1: Basic Tags
Headings LAB
WebDev
HTML headings are defined with the <h1> to
<h6> tags.
<h1> defines the most important heading. <h6>
defines the least important heading:
2
Headings LAB
WebDev
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraphs LAB
WebDev
The HTML <p> element defines a paragraph:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
Note: Browsers automatically add some white
space (a margin) before and after a
paragraph.
3
Paragraphs LAB
WebDev
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:
<p>This is<br>a paragraph<br>with line
breaks.</p>
Paragraphs LAB
WebDev
The <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:
4
Paragraphs LAB
WebDev
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
The style Attribute LAB
WebDev
Setting the style of an HTML element, can be done with
the style attribute.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
5
Applying style Attribute LAB
WebDev
Background Color
• The background-color property defines the
background color for an HTML element.
• This example sets the background color for a
page to powderblue:
Example LAB
WebDev
<body style="background-color:
powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
6
Output LAB
WebDev
Applying style Attribute LAB
WebDev
Text Color
• The color property defines the text color for an
HTML element:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
7
Output LAB
WebDev
Applying style Attribute LAB
WebDev
Fonts
• The font-family property defines the font to be
used for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
8
Output LAB
WebDev
Applying style Attribute LAB
WebDev
Text Size
• The font-size property defines the text size for
an HTML element:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
9
Output LAB
WebDev
Applying style Attribute LAB
WebDev
Text Alignment
• The text-align property defines the horizontal
text alignment for an HTML element:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
10
Output LAB
WebDev
Summary LAB
WebDev
• Use the style attribute for styling HTML
elements
• Use background-color for background color
• Use color for text colors
• Use font-family for text fonts
• Use font-size for text sizes
• Use text-align for text alignment
11
Lesson 3.2: Text Formatting
Text Formatting LAB
WebDev
Formatting elements were designed to display
special types of text:
• <b> - Bold text • <small> - Small text
• <strong> - Important text • <del> - Deleted text
• <i> - Italic text • <ins> - Inserted text
• <em> - Emphasized text • <sub> - Subscript text
• <mark> - Marked text • <sup> - Superscript text
12
Text Formatting LAB
WebDev
<b> and <strong> Elements
• The HTML <b> element defines bold text,
without any extra importance.
<b>This text is bold</b>
• The HTML <strong> element defines strong
text, with added semantic "strong" importance.
<strong>This text is strong</strong>
Text Formatting LAB
WebDev
<i> and <em> Elements
• The HTML <i> element defines italic text,
without any extra importance.
<i>This text is italic</i>
• The HTML <em> element defines emphasized
text, with added semantic importance.
<em>This text is emphasized</em>
13
Text Formatting LAB
WebDev
<small> Element
• The HTML <small> element defines smaller
text:
<h2>HTML <small>Small</small> Formatting</h2>
Text Formatting LAB
WebDev
<mark> Element
• The HTML <mark> element defines marked or
highlighted text:
<h2>HTML <mark>Marked</mark> Formatting</h2>
14
Text Formatting LAB
WebDev
<del> Element
• The HTML <del> element defines deleted
(removed) text.
<p>My favorite color is <del>blue</del> red.</p>
Text Formatting LAB
WebDev
<ins> Element
• The HTML <ins> element defines inserted
(added) text.
<p>My favorite <ins>color</ins> is red.</p>
15
Text Formatting LAB
WebDev
<sub> Element
• The HTML <sub> element defines subscripted
text.
<p>This is <sub>subscripted</sub> text.</p>
Text Formatting LAB
WebDev
<sup> Element
• The HTML <sup> element defines superscripted
text.
<p>This is <sup>superscripted</sup> text.</p>
16
Lesson 3.3: Quotation and Citation
Quotation and Citation Elements LAB
WebDev
<q> Element
• The HTML <q> element defines a short
quotation.
• Browsers usually insert quotation marks around
the <q> element.<p>This
17
Quotation and Citation Elements LAB
WebDev
<p>WWF's goal is to: <q>Build a future
where people live in harmony with
nature.</q></p>
Quotation and Citation Elements LAB
WebDev
<blockquote> for Quotations
• The HTML <blockquote> element defines a
section that is quoted from another source.
• Browsers usually indent <blockquote>
elements.
18
Quotation and Citation Elements LAB
WebDev
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/in
dex.html">For 50 years, WWF has been protecting the
future of nature. The world's leading conservation
organization, WWF works in 100 countries and is
supported by1.2 million members in the United States and
close to 5 million globally.</blockquote>
Quotation and Citation Elements LAB
WebDev
19
Quotation and Citation Elements LAB
WebDev
<abbr> for Abbreviations
• The HTML <abbr> element defines an
abbreviation or an acronym.
• Marking abbreviations can give useful
information to browsers, translation systems
and search-engines.
Quotation and Citation Elements LAB
WebDev
<p>The <abbr title="World Health
Organization">WHO</abbr> was founded in
1948.</p>
20
Quotation and Citation Elements LAB
WebDev
<address> for Contact Information
• The HTML <address> element defines contact
information (author/owner) of a document or an
article.
• The <address> element is usually displayed in
italic. Most browsers will add a line break before
and after the element.
Quotation and Citation Elements LAB
WebDev
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
21
Quotation and Citation Elements LAB
WebDev
<cite> for Work Title
• The HTML <cite> element defines the title of a
work.
• Browsers usually display <cite> elements in
italic.
Quotation and Citation Elements LAB
WebDev
<p><cite>The Scream</cite> by Edvard
Munch. Painted in 1893.</p>
22
Quotation and Citation Elements LAB
WebDev
<bdo> for Bi-Directional Override
• The HTML <bdo> element defines bi-
directional override.
• The <bdo> element is used to override the
current text direction:
Quotation and Citation Elements LAB
WebDev
<bdo dir="rtl">This line will be written from
right to left</bdo>
23
Quotation and Citation Elements LAB
WebDev
<bdo dir="rtl">This line will be written from
right to left</bdo>
HTML Comments LAB
WebDev
Comment tags are used to insert comments in the
HTML source code.
<!-- Write your comments here -->
Note: Comments are NOT displayed by the
browser, but they can help document your HTML
source code.
24
HTML Colors LAB
WebDev
HTML colors are specified using predefined
color names, or RGB, HEX, HSL, RGBA, HSLA
values.
Lesson 3.4: Colors
25
HTML Colors LAB
WebDev
Color Names
• In HTML, a color can be specified by using a
color name:
HTML Colors LAB
WebDev
<h1 style="background-
color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem
ipsum...</p>
26
HTML Colors LAB
WebDev
HTML Colors LAB
WebDev
Color Values
• In HTML, colors can also be specified using RGB
values, HEX values, HSL values, RGBA values, and
HSLA values:
rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)
rgba(255, 99, 71, 0.5)
hsla(9, 100%, 64%, 0.5)
27
HTML Colors LAB
WebDev
RGB Value
• In HTML, a color can be specified as an RGB
value, using this formula:
rgb(red, green, blue)
• Each parameter (red, green, and blue) defines
the intensity of the color between 0 and 255.
HTML Colors LAB
WebDev
28
HTML Colors LAB
WebDev
HEX Value
• In HTML, a color can be specified using a
hexadecimal value in the form:
#rrggbb
• Where rr (red), gg (green) and bb (blue) are
hexadecimal values between 00 and ff (same
as decimal 0-255).
HTML Colors LAB
WebDev
29
HTML Colors LAB
WebDev
HSL Value
• In HTML, a color can be specified using hue,
saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
HTML Colors LAB
WebDev
• Hue is a degree on the color wheel from 0
to 360. 0 is red, 120 is green, and 240 is
blue.
• Saturation is a percentage value, 0% means
a shade of gray, and 100% is the full color.
• Lightness is also a percentage, 0% is black,
50% is neither light or dark, 100% is white
30
HTML Colors LAB
WebDev
HTML Colors LAB
WebDev
RGBA Value
• RGBA color values are an extension of RGB
color values with an alpha channel - which
specifies the opacity for a color.
• An RGBA color value is specified with:
rgba(red, green, blue, alpha)
31
HTML Colors LAB
WebDev
The alpha parameter is a number between
0.0 (fully transparent) and 1.0 (not
transparent at all):
HTML Colors LAB
WebDev
HSLA Value
• HSLA color values are an extension of HSL
color values with an alpha channel - which
specifies the opacity for a color.
• An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
32
HTML Colors LAB
WebDev
The alpha parameter is a number between
0.0 (fully transparent) and 1.0 (not
transparent at all):
THE END
33
