Scribd
Upload
6 views21 pages

Chapter 2

Chapter 3 covers basic HTML tags including <b>, <i>, <mark>, <del>, <sub>, <sup>, <pre>, <q>, and <abbr>, explaining their functions and semantic meanings. It also discusses HTML comments and various methods for specifying colors in HTML, such as color names, RGB, HEX, HSL, RGBA, and HSLA. The chapter provides examples of how to use these tags and color specifications in HTML code.

Uploaded by

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

Chapter 2

Chapter 3 covers basic HTML tags including <b>, <i>, <mark>, <del>, <sub>, <sup>, <pre>, <q>, and <abbr>, explaining their functions and semantic meanings. It also discusses HTML comments and various methods for specifying colors in HTML, such as color names, RGB, HEX, HSL, RGBA, and HSLA. The chapter provides examples of how to use these tags and color specifications in HTML code.

Uploaded by

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

Chapter 3

BASIC TAGS IN HTML


Title and Contents
• Basic Tags
• Tag b
• Tag I
• Tag mark
• Tag del
• Tag sub
• Tag sup
• Tag pre
• Tag abbr
• Html Comments
• Html Colors
HTML <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>
HTML <I> AND <EM> ELEMENTS
• The HTML <i> element defines italic text.
<i>This text is italic</i>
• The HTML <em> element defines emphasized text, with added
semantic importance.
<em>This text is emphasized</em>
Note: Browsers display <strong> as <b>, and <em> as <i> . However, there
is a difference in the meaning of these tags: <b> and <i> defines bold and
italic text, but <strong> and <em> means that the text is "important".
HTML <MARK> ELEMENT
• The HTML <mark> element defines marked/highlighted text:
<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML <DEL> ELEMENT
• The HTML <del> element defines deleted/removed text.
<p>My favorite color is <del>blue</del> red.</p>
HTML <SUB> ELEMENT
• The HTML <sub> element defines subscripted text.
<p>This is <sub>subscripted</sub> text.</p>
HTML <SUP> ELEMENT
• The HTML <sup> element defines superscripted text.
<p>This is <sup>superscripted</sup> text.</p>
THE HTML <PRE> ELEMENT
• The HTML <pre> element defines preformatted text.
<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>
HTML <Q> FOR QUOTATIONS
• The HTML <q> element defines a quotation.
<p>WWF's goal is to: <q>Build a future where people live
in harmony with nature.</q></p>
HTML <ABBR> FOR ABBREVIATIONS
• The HTML <abbr> element defines an abbreviation or an
acronym.
<p>The <abbr title="World Health
Organization">WHO</abbr> was founded in 1948.</p>
HTML COMMENTS
• Comment tags are used to insert comments in the HTML
source code.
• You can add comments to your HTML source by using the
following syntax:

<!-- Write your comments here -->


Note: Comments are not displayed by the browser, but they can
help document your HTML source code.
HTML COLORS
• HTML colors are specified using predefined color:
o names
o RGB
o HEX
o HSL
o RGBA
o HSLA
COLOR NAMES
• In HTML, a color can be specified by using a color name:
• 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)
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.
• For example, rgb (255, 0, 0) is displayed as red, because red is set to its
highest value (255) and the others are set to 0.
• To display black, set all color parameters to 0, like this: rgb (0, 0, 0).
• To display white, set all color parameters to 255, like this: rgb (255, 255,
255).
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)
• The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (not transparent at all):
HTML HEX COLORS
• 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).
• For example, #ff0000 is displayed as red, because red is set to
its highest value (ff) and the others are set to the lowest value
(00).
HTML HSL COLORS
• In HTML, a color can be specified using hue, saturation, and
lightness (HSL) in the form:
hsl(hue, saturation, lightness)
• 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
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)
• The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (not transparent at all):
EXAMPLES
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
THANK YOU.
Any Questions?

You might also like