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?