0% found this document useful (0 votes)

91 views117 pages

Bcac501 - It - Part-1-Html

The document provides an introduction to HTML, including: 1. HTML stands for Hypertext Markup Language and is used to define the structure and layout of web pages. HTML elements tell browsers how to display content like headings, paragraphs, links, etc. 2. A simple HTML document structure includes elements like <html>, <head>, <title>, and <body> to define the root element, page head/title, and visible page content. 3. Common HTML elements are described like headings (<h1>-<h6>), paragraphs (<p>), links (<a>), and images (<img>) which include attributes to specify things like the link URL or image source file.

Uploaded by

dordelderek the last

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

91 views117 pages

Bcac501 - It - Part-1-Html

Uploaded by

dordelderek the last

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 117

Subject: - BCAC501 (IT)

Contents:

1. HTML Introduction --- 2

2. HTML History --- 4
3. HTML Editors --- 5
4. View HTML Source --- 8
5. HTML Attributes --- 10
6. HTML Headings --- 12
7. HTML Paragraph [<p>, <hr>, <br>, <pre>] --- 14 - 18
8. HTML Styles --- 18
9. HTML Formatting Elements --- 21
10. HTML Quotation and Citation Elements --- 25
11. HTML Comments --- 28
12. HTML Colors --- 30
13. HTML Styles – CSS --- 40
14. HTML Links --- 46
15. HTML Images --- 53
16. HTML Picture --- 71
17. HTML Table --- 73
18. HTML List [<ul>, <ol>, <dl>] --- 102 - 117

P a g e 1 | 117
HTML Introduction
What is HTML?

• HTML stands for Hyper Text Markup Language

• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page
• HTML consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.

A Simple HTML Document

Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Example Explained

• The <!DOCTYPE html> declaration defines that this document is an

HTML5 document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is
shown in the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph

P a g e 2 | 117
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:
<tag_name> Content goes here... </tag_name>
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag!

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read

HTML documents and display them correctly.

A browser does not display the HTML tags, but uses them to determine how
to display the document:

HTML Page Structure

Below is a visualization of an HTML page structure:
<html>
<head>
<title>Page title</title> Note: The content inside the <body>
</head> section will be displayed in a browser. The
content inside the <title> element will be
shown in the browser's title bar or in the
<body>
page's tab.
</body>
</html>
P a g e 3 | 117
HTML History

Since the early days of the World Wide Web, there have
been many versions of HTML:

Year Version

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 HTML 3.2

1999 HTML 4.01

2000 XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 HTML5

2016 HTML 5.1

2017 HTML5.1 2nd Edition

2017 HTML5.2

P a g e 4 | 117
HTML Editors
HTML Using Notepad or TextEdit
Web pages can be created and modified by using professional HTML editors.
However, for learning HTML it is recommend to use a simple text editor like
Notepad (PC) or TextEdit (Mac).
Follow the steps below to create your first web page with Notepad or
TextEdit.

Step 1: Open Notepad (PC)

Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen).
Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files

correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as
HTML code instead of formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML

Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" OR "index.html" and set the encoding to UTF-
8 (which is the preferred encoding for HTML files).

Step 4: View the HTML Page in Your Browser

Open the saved HTML file in your favorite browser (double click on the file, or
right-click - and choose "Open with").

The result will look much like this:

P a g e 5 | 117
HTML Basic Examples
HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE
html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers
to display web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading:

P a g e 6 | 117
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links

HTML links are defined with the <a> tag:

Example
<a href="https://www.Ggoogle.com">This is a Google link</a>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as
attributes:

Example
<img src="TMSL.jpg" alt="Techno Main Saltlake" width="104" height="142">

P a g e 7 | 117
How to View HTML Source?

Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:

Right-click in an HTML page and select "View Page Source" (in Chrome) or
"View Source" (in Edge), or similar in other browsers. This will open a window
containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect

Element" to see what elements are made up of (you will see both the HTML and
the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or
Styles panel that opens.

HTML Elements
An HTML element is defined by a start tag, some content, and an end
tag.

HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end tag!
P a g e 8 | 117
Never Skip the End Tag

Some HTML elements will display correctly, even if you forget the end tag:

Example
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>

Empty HTML Elements

HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing
tag:

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

HTML is Not Case Sensitive

HTML tags are not case sensitive: <P> means the same as <p>.

HTML Tag Reference

Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

P a g e 9 | 117
HTML Attributes
• 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.tmsl.com">Visit TMSL</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.

P a g e 10 | 117
The width and height Attributes

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

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

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to
slow connection, or an error in the src attribute, or if the user uses a screen
reader.

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

Example

See what happens if we try to display an image that does not exist:

<img src="img_typo.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>

Good:
<a href="https://www.TMSL.com/html/">Visit our HTML tutorial</a>

Bad:
<a href=https://www.TMSL.com/html/>Visit our HTML tutorial</a>

Sometimes you have to use quotes. This example will not display the title
attribute correctly, because it contains a space:

P a g e 11 | 117
Example <p title=About TMSL>

Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but
single quotes can also be used.

In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes:

<p title='John "ShotGun" Nelson'>

Or vice versa:

<p title="John 'ShotGun' Nelson">

Summary

• All HTML elements can have attributes

• The href attribute of <a> specifies the URL of the page the link goes to
• The src attribute of <img> specifies the path to the image to be displayed
• The width and height attributes of <img> provide size information for
images
• The alt attribute of <img> provides an alternate text for an image
• The style attribute is used to add styles to an element, such as color,
font, size, and more
• The lang attribute of the <html> tag declares the language of the Web
page
• The title attribute defines some extra information about an element

HTML Headings

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
P a g e 12 | 117
Heading 6
HTML Headings Example

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>

Note: Browsers automatically add some white space (a margin) before and
after a heading.

Headings Are Important

Search engines use the headings to index the structure and content of your web
pages.

Users often skim a page by its headings. It is important to use headings to show
the document structure.

<h1> headings should be used for main headings, followed by <h2> headings, then
the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.

Bigger Headings

Each HTML heading has a default size. However, you can specify the size for
any heading with the style attribute, using the CSS font-size property:

Example
<h1 style="font-size:60px;">Heading 1</h1>

P a g e 13 | 117
HTML Paragraphs
A paragraph always starts on a new line, and is usually a block of text.

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.

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Display
You cannot be sure how HTML will be displayed.
Large or small screens, and resized windows will create different results.
With HTML, you cannot change the display by adding extra spaces or extra lines
in your HTML code.
The browser will automatically remove any extra spaces and lines when the
page is displayed:
Example
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
P a g e 14 | 117
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
<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<p>This is some other text.</p>
<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

</body>
</html>

O/P

The <hr> tag is an empty tag, which means that it has no end tag.
P a g e 15 | 117
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 <br> tag is an empty tag, which means that it has no end tag.

The Poem Problem

This poem will display on a single line:

Example

<!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<p>
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.

</p>
</body>
</html>

P a g e 16 | 117
Solution - 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

<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<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>
</body>
</html>

P a g e 17 | 117
Tag Reference

Tag Description

<p> Defines a paragraph

<hr> Defines a thematic change in the content

<br> Inserts a single line break

<pre> Defines pre-formatted text

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

Example

I am Red
I am Blue

I am Big
<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>

P a g e 18 | 117
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:

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

You will learn more about CSS later in this tutorial.

Background Color

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

Example
Set the background color for a page to powderblue:

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

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

P a g e 19 | 117
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>

Summary

• 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

P a g e 20 | 117
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.

Example

This text is bold

This text is italic

This is subscript and superscript

HTML Formatting Elements

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>

P a g e 21 | 117
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:

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

P a g e 22 | 117
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 <sub>subscripted</sub> 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 <sup>superscripted</sup> text.</p>

<html>

<head>

<title> Example of different elements...</title>

</head>

<body>

<pre>

<b>This text is bold</b>

P a g e 23 | 117
<strong>This text is important!</strong>

<i>This text is italic</i>

<em>This text is emphasized</em>

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

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

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

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

<p>This is <sub>subscripted</sub> text.</p>

<p>This is <sup>superscripted</sup> text.</p>

</pre>

</body>

</html>

P a g e 24 | 117
HTML Quotation and Citation Elements
In this chapter we will go through
the <blockquote>,<q>, <abbr>, <address>, <cite>, and <bdo> HTML
elements.

Example

Here is a quote from WWF's website:

For nearly 60 years, WWF has been protecting the future of nature. The world's
leading conservation organization, WWF works in 100 countries and is
supported by more than one million members in the United States and close to
five million globally.

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another
source.

Browsers usually indent <blockquote> elements.

Example
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.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 by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

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>
P a g e 25 | 117
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.

P a g e 26 | 117
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 Quotation and Citation Elements

Tag Description

<abbr> Defines an abbreviation or acronym

<address> Defines contact information for the author/owner of a document

<bdo> Defines the text direction

<blockquote> Defines a section that is quoted from another source

<cite> Defines the title of a work

<q> Defines a short inline quotation

P a g e 27 | 117
HTML Comments
HTML comments are not displayed in the browser, but they can help
document your HTML source code.

HTML Comment Tag

You can add comments to your HTML source by using the following syntax:

Notice that there is an exclamation point (!) in the start tag, but not in the end
tag.

Note: Comments are not displayed by the browser, but they can help document
your HTML source code.

Add Comments

With comments you can place notifications and reminders in your HTML code:

Example

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

Hide Content

Comments can be used to hide content.

Which can be helpful if you hide content temporarily:

Example
<p>This is a paragraph.</p>

<p>This is a paragraph too.</p>

P a g e 28 | 117
You can also hide more than one line, everything between the <!-- and the --
> will be hidden from the display.

Example

Hide a section of HTML code:

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

<p>This is a paragraph too.</p>

are also great for debugging HTML, because you can comment out HTML lines of
code, one at a time, to search for errors.

Hide Inline Content

Comments can be used to hide parts in the middle of the HTML code.

Example

Hide a part of a paragaph:

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

P a g e 29 | 117
HTML Colors
HTML colors are specified with predefined color names, or with RGB,
HEX, HSL, RGBA, or HSLA values.

Color Names

In HTML, a color can be specified by using a color name:

Background Color

You can set the background color for HTML elements:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

P a g e 30 | 117
Text Color

You can set the color of text:

Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

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:

Hello World
Hello World
Hello World
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.

P a g e 31 | 117
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 adds an Alpha channel to the color (here we have 50%
transparency):

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

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)

P a g e 32 | 117
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).

Experiment by mixing the RGB values below:

P a g e 33 | 117
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):

Experiment by mixing the RGBA values below:

P a g e 34 | 117
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

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

Experiment by mixing the HEX values below:

P a g e 35 | 117
Shades of Gray

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

P a g e 36 | 117
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.

P a g e 37 | 117
Experiment by mixing the HSL values below:

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.

P a g e 38 | 117
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) 100% means full lightness (white).

Shades of Gray

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

P a g e 39 | 117
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):

Experiment by mixing the HSLA values below:

P a g e 40 | 117
HTML Styles - CSS

CSS stands for Cascading Style Sheets.

CSS saves a lot of work. It can control the layout of multiple web pages
all at once.

P a g e 41 | 117
What is CSS?

Cascading Style Sheets (CSS) is used to format the layout of a webpage.

With CSS, you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background images
or background colors are to be used, different displays for different devices and
screen sizes, and much more!

Tip: The word cascading means that a style applied to a parent element will
also apply to all children elements within the parent. So, if you set the color of
the body text to "blue", all headings, paragraphs, and other text elements
within the body will also get the same color (unless you specify something
else)!

Using CSS

CSS can be added to HTML documents in 3 ways:

• Inline - by using the style attribute inside HTML elements

• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files.
However, in this tutorial we will use inline and internal styles, because this is
easier to demonstrate, and easier for you to try it yourself.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:

P a g e 42 | 117
Example
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

Internal CSS

An internal CSS is used to define a style for a single HTML page.

An internal CSS is defined in the <head> section of an HTML page, within

a <style> element.

The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition, the
page will be displayed with a "powderblue" background color:

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

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

</body>
</html>

External CSS

An external style sheet is used to define the style for many HTML pages.

P a g e 43 | 117
To use an external style sheet, add a link to it in the <head> section of each
HTML page:

Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>

The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

Tip: With an external style sheet, you can change the look of an entire web
site, by changing one file!

P a g e 44 | 117
CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn
more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example

Use of CSS color, font-family and font-size properties:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

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

</body>
</html>

CSS Border

The CSS border property defines a border around an HTML element.

P a g e 45 | 117
Tip: You can define a border for nearly all HTML elements.

Example

Use of CSS border property:

p {
border: 2px solid powderblue;
}

CSS Padding

The CSS padding property defines a padding (space) between the text and the
border.

Example

Use of CSS border and padding properties:

p {
border: 2px solid powderblue;
padding: 30px;
}

CSS Margin

The CSS margin property defines a margin (space) outside the border.

Example

Use of CSS border and margin properties:

p {
border: 2px solid powderblue;
margin: 50px;
}

Summary

• Use the HTML style attribute for inline styling

• Use the HTML <style> element to define internal CSS

P a g e 46 | 117
• Use the HTML <link> element to refer to an external CSS file

• Use the HTML <head> element to store <style> and <link> elements

• Use the CSS color property for text colors

• Use the CSS font-family property for text fonts

• Use the CSS font-size property for text sizes

• Use the CSS border property for borders

• Use the CSS padding property for space inside the border

• Use the CSS margin property for space outside the border

HTML Links
Links are found in nearly all web pages. Links allow users to click their
way from page to page.

HTML Links - Hyperlinks

HTML links are hyperlinks.

You can click on a link and jump to another document.

When you move the mouse over a link, the mouse arrow will turn into a little
hand.

Note: A link does not have to be text. A link can be an image or any other
HTML element!

HTML Links - Syntax

The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

P a g e 47 | 117
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.

The link text is the part that will be visible to the reader.

Clicking on the link text, will send the reader to the specified URL address.

Example

This example shows how to create a link to W3Schools.com:

<a href="https://www.tmsl.com/">Visit W3Schools.com!</a>

By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue

• A visited link is underlined and purple
• An active link is underlined and red

Tip: Links can of course be styled with CSS, to get another look!

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

• _self - Default. Opens the document in the same window/tab as it was

clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window

Example

Use target="_blank" to open the linked document in a new browser window or tab:

<a href="https://www.tmsl.com/" target="_blank">Visit W3Schools!</a>

P a g e 48 | 117
Absolute URLs vs. Relative URLs

Both examples above are using an absolute URL (a full web address) in
the href attribute.

A local link (a link to a page within the same website) is specified with
a relative URL (without the "https://www" part):

Example

<h2>Absolute URLs</h2>
<p><a href="https://www.tmsl.org/">TMSL</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>

Link to an Email Address

Use mailto: inside the href attribute to create a link that opens the user's
email program (to let them send a new email):

Example
<a href="mailto:[email protected]">Send email</a>

Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

P a g e 49 | 117
JavaScript allows you to specify what happens at certain events, such as a click
of a button:

Example
<button onclick="document.location='default.asp'">HTML Tutorial</button>

Link Titles

The title attribute specifies extra information about an element. The

information is most often shown as a tooltip text when the mouse moves over
the element.

Example
<a href="https://www.tmsl.com/html/" title="Go to TMSL HTML section">Visit
our HTML Tutorial</a>

Summary
• Use the <a> element to define a link
• Use the href attribute to define the link address
• Use the target attribute to define where to open the linked document
• Use the <img> element (inside <a>) to use an image as a link
• Use the mailto: scheme inside the href attribute to create a link that
opens the user's email program

HTML Link Tags

Tag Description

<a> Defines a hyperlink

HTML Links - Different Colors

P a g e 50 | 117
An HTML link is displayed in a different color depending on whether it has
been visited, is unvisited, or is active.

HTML Link Colors

By default, a link will appear like this (in all browsers):

• An unvisited link is underlined and blue

• A visited link is underlined and purple
• An active link is underlined and red

You can change the link state colors, by using CSS:

Example

Here, an unvisited link will be green with no underline. A visited link will be pink
with no underline. An active link will be yellow and underlined. In addition,
when mousing over a link (a:hover) it will become red and underlined:

a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}

a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}

a:active {
color: yellow;

P a g e 51 | 117
background-color: transparent;
text-decoration: underline;
}
</style>

Link Buttons

a:hover, a:active {
background-color: red;
}
</style>

HTML Links - Create Bookmarks

HTML links can be used to create bookmarks, so that readers can jump to
specific parts of a web page.

Create a Bookmark in HTML

Bookmarks can be useful if a web page is very long.

P a g e 52 | 117
To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the
bookmark.

Example

First, use the id attribute to create a bookmark:

<h2 id="C4">Chapter 4</h2>

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:

Example
<a href="#C4">Jump to Chapter 4</a>

You can also add a link to a bookmark on another page:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

Summary
• Use the id attribute (id="value") to define bookmarks in a page
• Use the href attribute (href="#value") to link to the bookmark

HTML Images
Images can improve the design and the appearance of a web page.

P a g e 53 | 117
Example
<img src="pic_trulli.jpg" alt="Italian Trulli">

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

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

HTML Images Syntax

The HTML <img> tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.

The <img> tag is empty, it contains attributes only, and does not have a closing
tag.

The <img> tag has two required attributes:

• src - Specifies the path to the image

• alt - Specifies an alternate text for the image

Syntax
<img src="url" alt="alternatetext">

P a g e 54 | 117
The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the
image from a web server and inserts it into the page. Therefore, make sure that
the image actually stays in the same spot in relation to the web page, otherwise
your visitors will get a broken link icon. The broken link icon and the alt text
are shown if the browser cannot find the image.

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user
for some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example
<img src="img_chania.jpg" alt="Flowers in Chania">

If a browser cannot find an image, it will display the value of the alt attribute:

Example
<img src="wrongname.gif" alt="Flowers in Chania">

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

Example
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">

Alternatively, you can use the width and height attributes:

P a g e 55 | 117
Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">

The width and height attributes always define the width and height of the image
in pixels.

Note: Always specify the width and height of an image. If width and height are
not specified, the web page might flicker while the image loads.

Width and Height, or Style?

The width, height, and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from
changing the size of images:

Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in
the src attribute:

P a g e 56 | 117
Example
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">

Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL
in the src attribute:

Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Sch
ools.com">

Notes on external images: 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.

Animated Images

HTML allows animated GIFs:

Example
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">

Image as a Link

To use an image as a link, put the <img> tag inside the <a> tag:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;">
</a>

P a g e 57 | 117
Image Floating

Use the CSS float property to let the image float to the right or to the left of a
text:

Example
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley

face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Common Image Formats

Here are the most common image file types, which are supported in all
browsers (Chrome, Edge, Firefox, Safari, Opera):

Abbreviation File Format File Extension

APNG Animated Portable Network .apng

Graphics

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

JPEG Joint Photographic Expert Group .jpg, .jpeg, .jfif, .pjpeg,

image .pjp

P a g e 58 | 117
PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

Summary

• Use the HTML <img> element to define an image

• Use the HTML src attribute to define the URL of the image
• Use the HTML alt attribute to define an alternate text for an image, if it
cannot be displayed
• Use the HTML width and height attributes or the
CSS width and height properties to define the size of the image
• Use the CSS float property to let the image float to the left or to the
right

HTML Image Tags

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources

P a g e 59 | 117
HTML Image Maps
With HTML image maps, you can create clickable areas on an image.

Image Maps

The HTML <map> tag defines an image map. An image map is an image with
clickable areas. The areas are defined with one or more <area> tags.

Try to click on the computer, phone, or the cup of coffee in the image below:

Example

Here is the HTML source code for the image map above:

P a g e 60 | 117
How Does it Work?

The idea behind an image map is that you should be able to perform different
actions depending on where in the image you click.

To create an image map you need an image, and some HTML code that
describes the clickable areas.

The Image

The image is inserted using the <img> tag. The only difference from other
images is that you must add a usemap attribute:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

The usemap value starts with a hash tag # followed by the name of the image
map, and is used to create a relationship between the image and the image
map.

Tip: You can use any image as an image map!

Create Image Map

Then, add a <map> element.

The <map> element is used to create an image map, and is linked to the image by
using the required name attribute:

The name attribute must have the same value as the <img>'s usemap attribute .

P a g e 61 | 117
The Areas

Then, add the clickable areas.

A clickable area is defined using an <area> element.

Shape

You must define the shape of the clickable area, and you can choose one of
these values:

• rect - defines a rectangular region

• circle - defines a circular region
• poly - defines a polygonal region
• default - defines the entire region

You must also define some coordinates to be able to place the clickable area
onto the image.

Shape="rect"

The coordinates for shape="rect" come in pairs, one for the x-axis and one for the
y-axis.

So, the coordinates 34,44 is located 34 pixels from the left margin and 44 pixels
from the top:

P a g e 62 | 117
The coordinates 270,350 is located 270 pixels from the left margin and 350
pixels from the top:

Now we have enough data to create a clickable rectangular area:

Example
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

This is the area that becomes clickable and will send the user to the page
"computer.htm":

P a g e 63 | 117
Shape="circle"

To add a circle area, first locate the coordinates of the center of the circle:

337,300

Then specify the radius of the circle:

44 pixels

P a g e 64 | 117
Now you have enough data to create a clickable circular area:

Example
<area shape="circle" coords="337, 300, 44" href="coffee.htm">

This is the area that becomes clickable and will send the user to the page
"coffee.htm":

P a g e 65 | 117
Shape="poly"

The shape="poly" contains several coordinate points, which creates a shape

formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable link?

P a g e 66 | 117
We have to find the x and y coordinates for all edges of the croissant:

The coordinates come in pairs, one for the x-axis and one for the y-axis:

Example
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329
,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

This is the area that becomes clickable and will send the user to the page
"croissant.htm":

P a g e 67 | 117
Summary
• Use the HTML <map> element to define an image map

• Use the HTML <area> element to define the clickable areas in the image

map

• Use the HTML usemap attribute of the <img> element to point to an image

map

HTML Image Tags

Tag Description

<img> Defines an image

<map> Defines an image map

<area> Defines a clickable area inside an image map

<picture> Defines a container for multiple image resources

P a g e 68 | 117
HTML Background Images
A background image can be specified for almost any HTML element.

Background Image on a HTML element

To add a background image on an HTML element, use the HTML style attribute
and the CSS background-image property:

Example

Add a background image on a HTML element:

<p style="background-image: url('img_girl.jpg');">

You can also specify the background image in the <style> element, in
the <head> section:

Example

Specify the background image in the <style> element:

Background Image on a Page

If you want the entire page to have a background image, you must specify the
background image on the <body> element:

Example

Add a background image for the entire page:

P a g e 69 | 117
Background Repeat

If the background image is smaller than the element, the image will repeat
itself, horizontally and vertically, until it reaches the end of the element:

Example
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>

To avoid the background image from repeating itself, set the background-
repeat property to no-repeat.

Example
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>

Background Cover

If you want the background image to cover the entire element, you can set
the background-size property to cover.

P a g e 70 | 117
Also, to make sure the entire element is always covered, set the background-
attachment property to fixed:

This way, the background image will cover the entire element, with no
stretching (the image will keep its original proportions):

Example
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>

Background Stretch

If you want the background image to stretch to fit the entire element, you can
set the background-size property to 100% 100%:

Try resizing the browser window, and you will see that the image will stretch,
but always cover the entire element.

Example
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>

P a g e 71 | 117
Learn More CSS

From the examples above you have learned that background images can be
styled by using the CSS background properties.

HTML <picture> Element

The HTML <picture> element allows you to display different pictures for
different devices or screen sizes.

The HTML <picture> Element

The HTML <picture> element gives web developers more flexibility in specifying
image resources.

The <picture> element contains one or more <source> elements, each referring
to different images through the srcset attribute. This way the browser can
choose the image that best fits the current view and/or device.

Each <source> element has a media attribute that defines when the image is the
most suitable.

Example

Show different images for different screen sizes:

P a g e 72 | 117
Note: Always specify an <img> element as the last child element of
the <picture> element. The <img> element is used by browsers that do not
support the <picture> element, or if none of the <source> tags match.

When to use the Picture Element

There are two main purposes for the <picture> element:

1. Bandwidth

If you have a small screen or device, it is not necessary to load a large image
file. The browser will use the first <source> element with matching attribute
values, and ignore any of the following elements.

2. Format Support

Some browsers or devices may not support all image formats. By using
the <picture> element, you can add images of all formats, and the browser will
use the first format it recognizes, and ignore any of the following elements.

Example

The browser will use the first image format it recognizes:

P a g e 73 | 117
HTML Tables
HTML tables allow web developers to arrange data into rows and
columns.

Example

Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial Moctezuma Francisco Chang Mexico

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus Winecellars Yoshi Tannamuri Canada

Magazzini Alimentari Riuniti Giovanni Rovelli Italy

P a g e 74 | 117
Define an HTML Table

A table in HTML consists of table cells inside rows and columns

Example

A simple HTML table:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

Table Cells

Each table cell is defined by a <td> and a </td> tag.

td stands for table data.

Everything between <td> and </td> are the content of the table cell.

Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
P a g e 75 | 117
Note: table data elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other tables,
etc.

Table Rows

Each table row starts with a <tr> and end with a </tr> tag.

tr stands for table row.

Example
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

You can have as many rows as you like in a table, just make sure that the
number of cells are the same in each row.

Note: There are times where a row can have less or more cells than another.
You will learn about that in a later chapter.

Table Headers

Sometimes you want your cells to be headers, in those cases use the <th> tag
instead of the <td> tag:

P a g e 76 | 117
Example

Let the first row be table headers:

<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

By default, the text in <th> elements are bold and centered, but you can change
that with CSS.

HTML Table Tags

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

P a g e 77 | 117
<caption> Defines a table caption

<colgroup> Specifies a group of one or more columns in a table for

formatting

<col> Specifies column properties for each column within a <colgroup>

element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

HTML Table Borders

HTML tables can have borders of different styles and shapes.

How To Add a Border

When you add a border to a table, you also add borders around each table cell:

To add a border, use the CSS border property on table, th, and td elements:

Example
table, th, td {
border: 1px solid black;
}

P a g e 78 | 117
Collapsed Table Borders

To avoid having double borders like in the example above, set the CSS border-
collapse property to collapse.

This will make the borders collapse into a single border:

Example
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

Style Table Borders

If you set a background color of each cell, and give the border a white color (the
same as the document background), you get the impression of an invisible
border:

Example
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}

P a g e 79 | 117
Round Table Borders

With the border-radius property, the borders get rounded corners:

Example
table, th, td {
border: 1px solid black;
border-radius: 10px;
}

Skip the border around the table by leaving out table from the css selector:

Example
th, td {
border: 1px solid black;
border-radius: 10px;
}

Dotted Table Borders

With the border-style property, you can set the appereance of the border.

P a g e 80 | 117
The following values are allowed:

• dotted

• dashed

• solid

• double

• groove

• ridge

• inset

• outset

• none

• hidden

Example
th, td {
border-style: dotted;
}

Border Color

With the border-color property, you can set the color of the border.

P a g e 81 | 117
Example
th, td {
border-color: #96D4D4;
}

HTML Table Sizes

HTML tables can have different sizes for each column, row or the entire
table.

Use the style attribute with the width or height properties to specify the
size of a table, row or column.

HTML Table Width

To set the width of a table, add the style attribute to the <table> element:

P a g e 82 | 117
Example

Set the width of the table to 100%:

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Note: Using a percentage as the size unit for a width means how wide will this
element be compared to its parent element, which in this case is
the <body> element.

HTML Table Column Width

To set the size of a specific column, add the style attribute on

a <th> or <td> element:

Example

Set the width of the first column to 70%:

P a g e 83 | 117
<table style="width:100%">
<tr>
<th style="width:70%">Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML Table Row Height

To set the height of a specific row, add the style attribute on a table row
element:

Example

Set the height of the second row to 200 pixels:

<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
P a g e 84 | 117
<tr style="height:200px">
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

HTML Table Headers

HTML tables can have headers for each column or row, or for many
columns/rows.

HTML Table Headers

Table headers are defined with th elements, each th element represents a table
cell.

Example
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>

P a g e 85 | 117
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Vertical Table Headers

To use the first column as table headers, define the first cell in each row as
a th element:

Example
<table>
<tr>
<th>Firstname</th>
<td>Jill</td>
<td>Eve</td>
</tr>
<tr>
<th>Lastname</th>
<td>Smith</td>
<td>Jackson</td>
</tr>
<tr>
<th>Age</th>
<td>94</td>
<td>50</td>
</tr>
</table>

Align Table Headers

By default, table headers are bold and centered:

Firstname Lastname Age

Jill Smith 50

Eve Jackson 94

P a g e 86 | 117
To left-align the table headers, use the CSS text-align property:

Example
th {
text-align: left;
}

Header for Multiple Columns

You can have a header that spans over two or more columns.

Name Age

Jill Smith 50

Eve Jackson 94

To do this, use the colspan attribute on the <th> element:

Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

P a g e 87 | 117
Table Caption

You can add a caption that serves as a heading for the entire table.

Monthly savings

Month Savings

January $100

February $50

Note: The <caption> tag should be inserted immediately after the <table> tag.

P a g e 88 | 117
HTML Table Padding & Spacing
HTML tables can adjust the padding inside the cells, and also the space
between the cells.

HTML Table - Cell Padding

Cell padding is the space between the cell edges and the cell content.

By default the padding is set to 0.

To add padding on table cells, use the CSS padding property:

Example
th, td {
padding: 15px;
}

To add padding only above the content, use the padding-top property.

And the others sides with the padding-bottom, padding-left, and padding-
right properties:

Example
th, td {
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}

P a g e 89 | 117
HTML Table - Cell Spacing
Cell spacing is the space between each cell.
By default the space is set to 2 pixels.
To change the space between table cells, use the CSS border-spacing property
on the table element:

Example
table {
border-spacing: 30px;
}

HTML Table Colspan & Rowspan

HTML tables can have cells that spans over multiple rows and/or columns.

HTML Table - Colspan

To make a cell span over multiple columns, use the colspan attribute:

Example
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
P a g e 90 | 117
Note: The value of the colspan attribute represents the number of columns to
span.

HTML Table - Rowspan

To make a cell span over multiple rows, use the rowspan attribute:

Example
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>

Note: The value of the rowspan attribute represents the number of rows to
span.

HTML Table Styling

Use CSS to make your tables look better.

HTML Table - Zebra Stripes

If you add a background color on every other table row, you will get a nice
zebra stripes effect.

P a g e 91 | 117
To style every other table row element, use the :nth-child(even) selector like
this:

Example
tr:nth-child(even) {
background-color: #D6EEEE;
}

Note: If you use (odd) instead of (even), the styling will occur on row 1,3,5 etc.
instead of 2,4,6 etc.

HTML Table - Vertical Zebra Stripes

To make vertical zebra stripes, style every other column, instead of every
other row.

Set the :nth-child(even) for table data elements like this:

Example
td:nth-child(even), th:nth-child(even) {
background-color: #D6EEEE;
}

Note: Put the :nth-child() selector on both th and td elements if you want to
have the styling on both headers and regular table cells.

P a g e 92 | 117
Combine Vertical and Horizontal Zebra Stripes

You can combine the styling from the two examples above and you will have
stripes on every other row and every other column.

If you use a transparent color you will get an overlapping effect.

Use an rgba() color to specify the transparency of the color:

Example
tr:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

th:nth-child(even),td:nth-child(even) {
background-color: rgba(150, 212, 212, 0.4);
}

Horizontal Dividers

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

P a g e 93 | 117
First Name Last Name Savings

Joe Swanson $300

If you specify borders only at the bottom of each table row, you will have a
table with horizontal dividers.

Add the border-bottom property to all tr elements to get horizontal dividers:

Example
tr {
border-bottom: 1px solid #ddd;
}

Hoverable Table

Use the :hover selector on tr to highlight table rows on mouse over:

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

P a g e 94 | 117
Example
tr:hover {background-color: #D6EEEE;}

HTML Table Colgroup

The <colgroup> element is used to style specific columns of a table.

HTML Table Colgroup

The <colgroup> element should be used as a container for the column

specifications.

Each group are specified with a <col> element.

The span attribute specifies how many columns that gets the style.

The style attribute specifies the style to give the columns.

Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Colgroup</h2>
<p>Add the a colgroup with a col element that spans over two columns to define a style for the two
columns:</p>
P a g e 95 | 117
<table style="width: 100%;">
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
<th>SUN</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>

P a g e 96 | 117
<td>27</td>
<td>28</td>
</tr>
</table>

</body>
</html>

Note: The <colgroup> tag must be a child of a <table> element and should be
placed before any other table elements, like <thead>, <tr>, <td> etc., but after
the <caption> element, if present.

Legal CSS Properties

There are only a very limited selection of CSS properties that are allowed to be
used in the colgroup:

width property
visibility property
background properties
border properties

All other CSS properties will have no effect on your tables.

Multiple Col Elements

If you want to style more columns with different styles, use

more <col> elements inside the <colgroup>:

P a g e 97 | 117
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Multiple Col Elements</h2>

<p>Add multiple col elements in the colgroup:</p>

<table style="width: 100%;">

</body>
</html>

Empty Colgroups

If you want to style columns in the middle of a table, insert a

"empty" <col> element (with no styles) for the columns before:

Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
P a g e 99 | 117
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

<h2>Empty Colgroups</h2>
<p>Add "empty" col elements that represents the columns before the columns you want to style:</p>

<table style="width: 100%;">

P a g e 100 | 117
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>

</body>
</html>

Hide Columns

You can hide columns with the visibility: collapse property:

Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>

P a g e 101 | 117
<h2>Hide Columns</h2>
<p>You can hide specific columns with the visibility property:</p>

<table style="width: 100%;">

P a g e 102 | 117
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
</table>

<p><b>Note:</b> The table columns does not collapse properly in Safari browsers.</p>
</body>
</html>

HTML Lists
HTML lists allow web developers to group a set of related items in lists.

Example

An unordered HTML list:

• Item
• Item
• Item
• Item

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

P a g e 103 | 117
Example
<!DOCTYPE html>
<html>
<body>

<h2>An Unordered HTML List</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<h2>An Ordered HTML List</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with
the <li> tag.

The list items will be marked with bullets (small black circles) by default:

P a g e 104 | 117
Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

An unordered HTML list

• Coffee
• Tea
• Milk

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

An ordered HTML list

1. Coffee
2. Tea
3. Milk

HTML Description Lists

HTML also supports description lists.

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:

P a g e 105 | 117
Example
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

A Description List
Coffee

- black hot drink

Milk

- white cold drink

HTML List Tags

Tag Description

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

P a g e 106 | 117
HTML Unordered Lists
The HTML <ul> tag defines an unordered (bulleted) list.

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example

<!DOCTYPE html>
<html>
<body>

<h2>An unordered HTML list</h2>

<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>

An unordered HTML list

• Coffee
• Tea
• Milk

Unordered HTML List - Choose List Item Marker

The CSS list-style-type property is used to define the style of the list item
marker. It can have one of the following values:

P a g e 107 | 117
Value Description

disc Sets the list item marker to a bullet (default)

circle Sets the list item marker to a circle

square Sets the list item marker to a square

none The list items will not be marked

Example - Disc
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Disc Bullets</h2>

<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>

Unordered List with Disc Bullets

• Coffee
• Tea
• Milk

P a g e 108 | 117
Example - Circle
<!DOCTYPE html>
<html>
<body>

<h2>Unordered List with Circle Bullets</h2>

<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>

Unordered List with Circle Bullets

o Coffee
o Tea
o Milk

Example - Square
<ul style="list-style-type:square;">

Example - None
<ul style="list-style-type:none;">

Nested HTML Lists

Lists can be nested (list inside list):

Example
<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>

<p>Lists can be nested (list inside list):</p>

<ul>
<li>Coffee</li>
<li>Tea
P a g e 109 | 117
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>

A Nested List

Lists can be nested (list inside list):

• Coffee
• Tea
o Black tea
o Green tea
• Milk

Note: A list item (<li>) can contain a new list, and other HTML elements, like
images and links, etc.

Horizontal List with CSS

HTML lists can be styled in many different ways with CSS.

One popular way is to style a list horizontally, to create a navigation menu:

Example
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {

P a g e 110 | 117
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}

li a:hover {
background-color: #111111;
}
</style>
</head>
<body>

<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>

<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

Summary
• Use the HTML <ul> element to define an unordered list
• Use the CSS list-style-type property to define the list item marker
• Use the HTML <li> element to define a list item
• Lists can be nested
• List items can contain other HTML elements
• Use the CSS property float:left to display a list horizontally
P a g e 111 | 117
HTML Ordered Lists
The HTML <ol> tag defines an ordered list. An ordered list can be
numerical or alphabetical.

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example

<!DOCTYPE html>
<html>
<body>

<h2>An ordered HTML list</h2>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

An ordered HTML list

1. Coffee
2. Tea
3. Milk

Ordered HTML List - The Type Attribute

The type attribute of the <ol> tag, defines the type of the list item marker:

P a g e 112 | 117
Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Example - Numbers:
<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Numbers</h2>

<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

P a g e 113 | 117
Ordered List with Numbers

1. Coffee
2. Tea
3. Milk

Example - Uppercase Letters:

<!DOCTYPE html>
<html>
<body>

<h2>Ordered List with Letters</h2>

<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Ordered List with Letters

A. Coffee
B. Tea
C. Milk

Lowercase Letters:
<ol type="a">

Uppercase Roman Numbers:

Lowercase Roman Numbers:

Control List Counting

By default, an ordered list will start counting from 1. If you want to start
counting from a specified number, you can use the start attribute:

P a g e 114 | 117
Example

<!DOCTYPE html>
<html>
<body>

<h2>The start attribute</h2>

<p>By default, an ordered list will start counting from 1. Use the start attribute to start counting from
a specified number:</p>

<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol type="I" start="50">

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>

Nested HTML Lists

Lists can be nested (list inside list):

P a g e 115 | 117
Example
<!DOCTYPE html>
<html>
<body>

<h2>A Nested List</h2>

<p>Lists can be nested (list inside list):</p>

<ol>
<li>Coffee</li>
<li>Tea
<ol>
<li>Black tea</li>
<li>Green tea</li>
</ol>
</li>
<li>Milk</li>
</ol>

</body>
</html>

Note: A list item (<li>) can contain a new list, and other HTML elements, like
images and links, etc.

Summary

• Use the HTML <ol> element to define an ordered list

• Use the HTML type attribute to define the numbering type
• Use the HTML <li> element to define a list item
• Lists can be nested
• List items can contain other HTML elements

P a g e 116 | 117
HTML Other Lists
HTML also supports description lists.

HTML Description Lists

A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:

Example
<!DOCTYPE html>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

</body>
</html>

Summary
• Use the HTML <dl> element to define a description list
• Use the HTML <dt> element to define the description term
• Use the HTML <dd> element to describe the term in a description list

P a g e 117 | 117

Forza Horizon 5 Color Sheet-7
No ratings yet
Forza Horizon 5 Color Sheet-7
48 pages
Shade Selection
100% (1)
Shade Selection
41 pages
Munsell Soil Color Book
100% (2)
Munsell Soil Color Book
9 pages
Best HTML Notes
No ratings yet
Best HTML Notes
34 pages
Complete HTML XML JS CSS WT-Course-Material
No ratings yet
Complete HTML XML JS CSS WT-Course-Material
174 pages
Contemporary Analysis of Traditional Color Theory
No ratings yet
Contemporary Analysis of Traditional Color Theory
7 pages
1.HTML Tutorial
No ratings yet
1.HTML Tutorial
1 page
HTML Tutorial
No ratings yet
HTML Tutorial
42 pages
HTML Notes
No ratings yet
HTML Notes
96 pages
W3school (HTML Notes)
0% (1)
W3school (HTML Notes)
13 pages
HTML Notes
No ratings yet
HTML Notes
22 pages
HTML
No ratings yet
HTML
76 pages
Cartoon Creation
100% (1)
Cartoon Creation
31 pages
HTML Codes Foa Website
100% (1)
HTML Codes Foa Website
180 pages
Indian Standard: Colours FOR Ready Mixed Paints and Enamels
No ratings yet
Indian Standard: Colours FOR Ready Mixed Paints and Enamels
20 pages
A Notes On HTML Css and Javascript
No ratings yet
A Notes On HTML Css and Javascript
61 pages
Hunter Color Lab
No ratings yet
Hunter Color Lab
32 pages
WebDevelopment BackEnd
No ratings yet
WebDevelopment BackEnd
22 pages
HTML Short Notes
100% (1)
HTML Short Notes
3 pages
HTML
No ratings yet
HTML
68 pages
Basics To Master HTML
No ratings yet
Basics To Master HTML
51 pages
CSIT128 All Slides
No ratings yet
CSIT128 All Slides
421 pages
HTML Lesson 1
No ratings yet
HTML Lesson 1
5 pages
HTML Cheat Sheet - Copie
No ratings yet
HTML Cheat Sheet - Copie
9 pages
HTML-Notes 1
No ratings yet
HTML-Notes 1
27 pages
Color Charts - Harji 2
100% (1)
Color Charts - Harji 2
22 pages
Introducing HTML
No ratings yet
Introducing HTML
431 pages
HTML 5
0% (1)
HTML 5
110 pages
Programming The Web Notes
100% (1)
Programming The Web Notes
217 pages
Actc HTML Notes
No ratings yet
Actc HTML Notes
48 pages
Introduction To HTML
No ratings yet
Introduction To HTML
103 pages
Javascript
No ratings yet
Javascript
145 pages
HTML Note Imp HTML
No ratings yet
HTML Note Imp HTML
165 pages
COLORS
No ratings yet
COLORS
74 pages
HTML 5 Crash Course
No ratings yet
HTML 5 Crash Course
7 pages
HTML Notes
No ratings yet
HTML Notes
44 pages
01 - Build Form Using HTML
No ratings yet
01 - Build Form Using HTML
43 pages
The Racers Life
No ratings yet
The Racers Life
74 pages
Shade Selection
No ratings yet
Shade Selection
70 pages
Dressmaking 9 Q1 M1
No ratings yet
Dressmaking 9 Q1 M1
21 pages
Lec 8 - DOM
No ratings yet
Lec 8 - DOM
144 pages
Lecture 1 HTML & Css
No ratings yet
Lecture 1 HTML & Css
92 pages
Introduction To HTML (W3school)
No ratings yet
Introduction To HTML (W3school)
57 pages
HTML Notes
No ratings yet
HTML Notes
22 pages
Color Theory
No ratings yet
Color Theory
10 pages
HTML Tutorials - I-Tech Software Education
100% (1)
HTML Tutorials - I-Tech Software Education
50 pages
HTML Introduction
No ratings yet
HTML Introduction
26 pages
Css Cheat Sheet
No ratings yet
Css Cheat Sheet
1 page
HTML
No ratings yet
HTML
115 pages
Info2180 Lecture 3
No ratings yet
Info2180 Lecture 3
125 pages
Create Wings On Fire Emotional Scene Photo Manipulation in Adobe Photoshop
No ratings yet
Create Wings On Fire Emotional Scene Photo Manipulation in Adobe Photoshop
42 pages
Website Designing
No ratings yet
Website Designing
45 pages
What Is HTML
No ratings yet
What Is HTML
66 pages
Unit1 DIP PDF
No ratings yet
Unit1 DIP PDF
81 pages
JavaScript Mini
No ratings yet
JavaScript Mini
15 pages
HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
No ratings yet
HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
80 pages
CSS (Cascading Style Sheet)
No ratings yet
CSS (Cascading Style Sheet)
95 pages
01 HTML
No ratings yet
01 HTML
96 pages
COMP2 Images and Graphics-2
No ratings yet
COMP2 Images and Graphics-2
77 pages
Collor Ip
No ratings yet
Collor Ip
29 pages
03 HTML
No ratings yet
03 HTML
113 pages
WDP Material One
No ratings yet
WDP Material One
97 pages
Color Video Formation and Perception
No ratings yet
Color Video Formation and Perception
20 pages
CGMUNIT Animation
No ratings yet
CGMUNIT Animation
25 pages
Html5 Overview
No ratings yet
Html5 Overview
1 page
Photospetrometer PCC English
No ratings yet
Photospetrometer PCC English
45 pages
HTML
No ratings yet
HTML
12 pages
Color Theory I (Presentation) Author Sunywcc 2d Design
No ratings yet
Color Theory I (Presentation) Author Sunywcc 2d Design
30 pages
Basics of CSS and Some Common Mistakes
No ratings yet
Basics of CSS and Some Common Mistakes
51 pages
Lecture 02 - HTML Basics1
No ratings yet
Lecture 02 - HTML Basics1
74 pages
Brightness Color Meter
No ratings yet
Brightness Color Meter
4 pages
The Nature of Screen Printing Inks
No ratings yet
The Nature of Screen Printing Inks
11 pages
Dip Module 4 Colour Image Processing
No ratings yet
Dip Module 4 Colour Image Processing
17 pages
Chapter 6
No ratings yet
Chapter 6
30 pages
Highlight - Removal Access19
No ratings yet
Highlight - Removal Access19
15 pages
Brightness Calculation in Digital Image Processing
No ratings yet
Brightness Calculation in Digital Image Processing
30 pages
Web Development
No ratings yet
Web Development
32 pages
From Color To Emotion
No ratings yet
From Color To Emotion
14 pages
WD File
No ratings yet
WD File
59 pages
ZLAB-The ZLAB Color Appearance Model For Practical Image Reproduction Applications, Fairchild
No ratings yet
ZLAB-The ZLAB Color Appearance Model For Practical Image Reproduction Applications, Fairchild
6 pages
CSS Shorthand Cheat Sheet by Example
No ratings yet
CSS Shorthand Cheat Sheet by Example
11 pages
Changing Colors Tutorial
No ratings yet
Changing Colors Tutorial
6 pages
Vue JS CheatSheet
No ratings yet
Vue JS CheatSheet
2 pages
Character of Color
No ratings yet
Character of Color
16 pages
Css Tutorial
No ratings yet
Css Tutorial
27 pages
JavaScript Tutorial
No ratings yet
JavaScript Tutorial
6 pages
HTML5 Introduction by W3Schools
No ratings yet
HTML5 Introduction by W3Schools
3 pages
PBT & Pet: N.A.G.Wilson UWU/SCT/07/0047
No ratings yet
PBT & Pet: N.A.G.Wilson UWU/SCT/07/0047
6 pages
Css Cheat Sheet: Syntax Syntax External Style Sheet Internal Style
No ratings yet
Css Cheat Sheet: Syntax Syntax External Style Sheet Internal Style
4 pages