Scribd
Upload
511 views

Chapter 3 - HTML Basic Elements PDF

The document discusses HTML basic elements and tags including headings, paragraphs, text formatting, and quotation elements. It provides examples of how to use tags like <h1> - <h6> for headings, <p> for paragraphs, <b>, <i> for bold and italic text, and <q> for quotations. It also covers using the style attribute to control properties like background color, text color, font, size, and alignment.

Uploaded by

Philip Flora
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
511 views

Chapter 3 - HTML Basic Elements PDF

The document discusses HTML basic elements and tags including headings, paragraphs, text formatting, and quotation elements. It provides examples of how to use tags like <h1> - <h6> for headings, <p> for paragraphs, <b>, <i> for bold and italic text, and <q> for quotations. It also covers using the style attribute to control properties like background color, text color, font, size, and alignment.

Uploaded by

Philip Flora
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

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

You might also like