`

MODULE 05: Continuation TO HTML

INSTRUCTOR: EDAN A. BELGICA

Continuation TO HTML

HTML Attributes

HTML attributes provide additional information about HTML elements.

• All HTML elements can have attributes

• Attributes provide additional information about elements

• Attributes are always specified in the start tag

• Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:

Example:

<a href="https://www.google.com">Google</a>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to
the image to be displayed:

Example:

<img src="img_girl.jpg">
`
There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website.

Example: src="https://www.w3schools.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission to use it, you may be
in violation of copyright laws. In addition, you cannot control external images; it can suddenly be
removed or changed.

2. Relative URL - Links to an image that is hosted within the website. Here, the URL does not include
the domain name. If the URL begins without a slash, it will be relative to the current page. Example:
src="img_girl.jpg". If the URL begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change domain.

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specify the width and height
of the image (in pixels):

Example:

<img src="img_girl.jpg" width="500" height="600">

The alt Attribute

Example:

<img src="img_girl.jpg" alt="Girl with a jacket">

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and more.

Example:

<p style="color:red;">This is a red paragraph.</p>

The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse over the element:

Example:

<p title="I'm a tooltip">This is a paragraph.</p>

`
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 least important heading.

Example:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

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.

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:

Example:

<h1>This is heading 1</h1>

<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>

HTML 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:

Example:

<p>This is<br>a paragraph<br>with line breaks.</p>

`
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:

<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 Styles

The HTML style attribute is used to add styles to an element, such as color, font, size, and more.

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:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

Background Color

The CSS background-color property defines the background color for an HTML element.

Example:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
`
Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>

</body>

Text Color

The CSS color property defines the text color for an HTML element:

Example:

<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example:

<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>

Text Size

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

Example:

<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment

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

Example:

<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>
`
HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Formatting elements were designed to display special types of text:

• <b> - Bold text

• <strong> - Important text

• <i> - Italic text

• <em> - Emphasized text

• <mark> - Marked text

• <small> - Smaller text

• <del> - Deleted text

• <ins> - Inserted text

• <sub> - Subscript text

• <sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example:

<b>This text is bold</b>

The HTML <strong> element defines text with strong importance. The content inside is typically
displayed in bold.

Example:

<strong>This text is important!</strong>

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The content inside is
typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from another language, a
thought, a ship name, etc.

Example:

<i>This text is italic</i>

`
The HTML <em> element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis, using verbal stress.

Example:

<em>This text is emphasized</em>

HTML <small> Element

The HTML <small> element defines smaller text:

Example:

<small>This is some smaller text.</small>

HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

<p>Do not forget to buy <mark>milk</mark> today.</p>

HTML <del> Element

The HTML <del> element defines text that has been deleted from a document. Browsers will usually
strike a line through deleted text:

Example:

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document. Browsers will usually
underline inserted text:

Example:

<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>

HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a character below the
normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical
formulas, like H2O:

Example:

<p>This is _subscripted text.</p>

`
HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears half a character above
the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for
footnotes, like WWW[1]:

Example:

<p>This is ^{superscripted} text.</p>

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

Example:

<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> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.", "Dr.",
"ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation systems and search-
engines.

Tip: Use the global title attribute to show the description for the abbreviation/acronym when you
mouse over the element.

Example:

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner of a document or an
article.

The contact information can be an email address, URL, physical address, phone number, social
media handle, etc.

The text in the <address> element usually renders in italic, and browsers will always add a line break
before and after the <address> element.
`
Example:

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

HTML <cite> for Work Title

The HTML <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a
painting, a sculpture, etc.).

Note: A person's name is not the title of a work.

The text in the <cite> element usually renders in italic.

Example:

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

The HTML <bdo> tag is used to override the current text direction:

Example:

<bdo dir="rtl">This text will be written from right to left</bdo>

HTML Colors

HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA
values.

HTML supports 140 standard color names.

Background Color

You can set the background color for HTML elements:

Example:

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>
`
Text Color

You can set the color of text:

Example:

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Border Color

You can set the color of borders:

Example:

<h1 style="border:2px solid Tomato;">Hello World</h1>

<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values,
and HSLA values.

The following three <div> elements have their background color set with RGB, HEX, and HSL values:

The following two <div> elements have their background color set with RGBA and HSLA values,
which add an Alpha channel to the color (here we have 50% transparency):

<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>

HTML RGB and RGBA Colors

An RGB color value represents RED, GREEN, and BLUE light sources.

An RGBA color value is an extension of RGB with an Alpha channel (opacity).

RGB Color Values

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 with a value between 0 and
255.

This means that there are 256 x 256 x 256 = 16777216 possible colors!

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255), and the
other two (green and blue) are set to 0.

Another example, rgb(0, 255, 0) is displayed as green, because green is set to its highest value
(255), and the other two (red and blue) 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).

Shades of Gray

Shades of gray are often defined using equal values for all three parameters:
`
RGBA Color Values

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

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of the color.

HEX Color Values

#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 other
two (green and blue) are set to 00.

Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the
other two (red and blue) are set to 00.

To display black, set all color parameters to 00, like this: #000000.

To display white, set all color parameters to ff, like this: #ffffff.
`

Shades of Gray

Shades of gray are often defined using equal values for all three parameters:

HTML HSL and HSLA Colors

HSL stands for hue, saturation, and lightness.

HSLA color values are an extension of HSL with an Alpha channel (opacity).

HSL Color Values

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 value. 0% is black, and 100% is white.

`

Saturation

Saturation can be described as the intensity of a color.

100% is pure color, no shades of gray.

50% is 50% gray, but you can still see the color.

0% is completely gray; you can no longer see the color.

`
Lightness

The lightness of a color can be described as how much light you want to give the color, where 0%
means no light (black), 50% means 50% light (neither dark nor light), and 100% means full lightness
(white).

Shades of Gray

Shades of gray are often defined by setting the hue and saturation to 0, and adjusting the lightness
from 0% to 100% to get darker/lighter shades:
`
HSLA Color Values

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):

References:

https://www.w3schools.com/html/html_basic.asp

https://www.w3schools.com/html/html_colors.asp