0% found this document useful (0 votes)

7 views

03 HTML

Uploaded by

gamime02

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)

7 views

03 HTML

Uploaded by

gamime02

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

HTML Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?
• HTML stands for Hyper Text Markup Language (not a programming language)
• HTML is the standard markup language for creating Web pages
• HTML describes the structure of a Web page (specifies the layout and style 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.
• The browser does not display the HTML tags, but uses the tags to interpret the content of the page

(Write a simple html page with notepad and run it in browser)

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

1
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:

<tagname> Content goes here... </tagname>

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:

2
HTML Page Structure
Below is a visualization of an HTML page structure:

Note: The content inside the <body> section (the white area above) will be displayed in a browser. The
content inside the <title> element will be shown in the browser's title bar or in the page's tab.

3
HTML Editors
A simple text editor is all you need to learn HTML.

Learn HTML Using Notepad or TextEdit

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a simple text editor like Notepad (PC) or
TextEdit (Mac).

We believe that using a simple text editor is a good way to learn HTML.

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.

4
Step 2: Write Some HTML
Write or copy the following HTML code into Notepad:

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</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" and set the encoding to UTF-8 (which is the preferred
encoding for HTML files).

Tip: You can use either .htm or .html as file extension. There is no difference; it is up to you.

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

Vscode
Create a folder on desktop.

Open Vscode.

Create a file with name myfirst.html

Write code without intellisense

Write code with intellisense

Write code with “Code snippents”

6
HTML Basic Examples
In this chapter there are some basic HTML examples.

Don't worry if we use tags you have not learned about yet.

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>

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

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

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.aydin.edu.tr">This is a 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.

8
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="einstein.jpg" alt="Einstein" width="275" height="183">

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.

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

10
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements (<html>, <body>, <h1> and <p>):

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

<h1>My First Heading</h1>

<p>My First Paragraph</p>

</body>
</html>

Example Explained
The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

The <body> element defines the document's body.

It has a start tag <body> and an end tag </body>.

Then, inside the <body> element there are two other elements: <h1> and <p>:

<h1>My First Heading</h1>

<p>My first paragraph.</p>

The <h1> element defines a heading.

It has a start tag <h1> and an end tag </h1>:

<h1>My First Heading</h1>

11
The <p> element defines a paragraph.

It has a start tag <p> and an end tag </p>:

<p>My first paragraph.</p>

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>

However, never rely on this! Unexpected results and errors may occur if you
forget the end tag!

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

The HTML standard does not require lowercase tags, but W3C recommends lowercase in
HTML, and demands lowercase for stricter document types like XHTML.

It is recommended to use lowercase tag names.

12
HTML Tag Reference
W3Schools' tag reference contains additional information about these tags and their
attributes.

Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

For a complete list of all available HTML tags, visit

https://www.w3schools.com/tags/default.asp

13
HTML Attributes
HTML attributes provide additional information about HTML elements.

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.aydin.edu.tr">ISTANBUL AYDIN UNIVERSITY</a>

You will learn more about links in W3school HTML Links chapter.

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

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

You will learn more about images in W3school “HTML Images chapter”.

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>

You will learn more about styles in “HTML Styles chapter”.

15
The lang Attribute
You should always include the lang attribute inside the <html> tag, to declare the language
of the Web page. This is meant to assist search engines and browsers.

The following example specifies English as the language:

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Country codes can also be added to the language code in the lang attribute. So, the first
two characters define the language of the HTML page, and the last two characters define
the country.

The following example specifies English as the language and United States as the country:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

You can see all the language codes in W3school HTML Language Code Reference.

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>

Suggestion: Always Use Lowercase Attributes

The HTML standard does not require lowercase attribute names.

The title attribute (and all other attributes) can be written with uppercase or lowercase
like title or TITLE.

16
Suggestion: Always Quote Attribute Values

The HTML standard does not require quotes around attribute values.

However, quotes in HTML is recommended, and demands quotes for stricter document
types like XHTML.

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

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

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

Example
<p title=About W3Schools>

Always use quotes around attribute values.

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

HTML Attribute Reference

A complete list of all attributes for each HTML element, is listed in:

HTML Attribute Reference.

17
HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.

Example

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

HTML Headings
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.
18
<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>

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.

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

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>

The <hr> tag is an empty tag, which means that it has no end tag.

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

Solution - The HTML <pre> Element (preserve)

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>

21
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

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:

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:

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

</body>

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

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>

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

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

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

26
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 60 years, WWF has worked to help people and nature thrive. As the world's leading
conservation organization, WWF works in nearly 100 countries. At every level, we
collaborate with people around the world to develop and deliver innovative solutions that
protect communities, wildlife, and the places in which they live.

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 60 years, WWF has worked to help people and nature thrive. As the world's
leading conservation organization, WWF works in nearly 100 countries. At every
level, we collaborate with people around the world to develop and deliver
innovative solutions that protect communities, wildlife, and the places in which
they live.
</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>

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

29
Hide Content
Comments can be used to hide content.

This can be helpful if you hide content temporarily:

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

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

You can also hide more than one line. Everything between 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>

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

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

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

HTML supports 140 standard color names.

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

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>

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

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

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

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>

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

Example
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Learn more about Color Values

You will learn more about RGB, HEX and HSL in the next chapters.

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

34
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h1>

</body>
</html>

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

<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>

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

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>

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.

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

<h1 style="background-color:#404040;">#404040</h1>
<h1 style="background-color:#686868;">#686868</h1>
<h1 style="background-color:#a0a0a0;">#a0a0a0</h1>
<h1 style="background-color:#bebebe;">#bebebe</h1>
<h1 style="background-color:#dcdcdc;">#dcdcdc</h1>
<h1 style="background-color:#f8f8f8;">#f8f8f8</h1>

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

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>

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

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>

<p>With HSL colors, less saturation mean less color. 0% is completely gray.</p>

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

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>

<p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p>

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

<h1 style="background-color:hsl(0, 0%, 20%);">hsl(0, 0%, 20%)</h1>

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

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>

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

CSS = Styles and Colors

M a n i p u l a t e T e x t C o l o r s , B o x e s

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.

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

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>

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

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!

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

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

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

45
Link to External CSS
External style sheets can be referenced with a full URL or with a path relative to the
current web page.

Example
This example uses a full URL to link to a style sheet:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

Example
This example links to a style sheet located in the html folder on the current web site:

<link rel="stylesheet" href="/html/styles.css">

Example
This example links to a style sheet located in the same folder as the current page:

<link rel="stylesheet" href="styles.css">

You can read more about file paths in the chapter HTML File Paths.

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

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

47
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.w3schools.com/" target="_blank">Visit W3Schools!</a>

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.w3.org/">W3C</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>

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

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>

Tip: Learn more about JavaScript in JavaScript Tutorial.

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.w3schools.com/html/" title="Go to W3Schools HTML section">
Visit W3school HTML Tutorial </a>

More on Absolute URLs and Relative URLs

Example
Use a full URL to link to a web page:

<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>

Example
Link to a page located in the html folder on the current web site:

<a href="/html/default.asp">HTML tutorial</a>

49
Example
Link to a page located in the same folder as the current page:

<a href="default.asp">HTML tutorial</a>

You can read more about file paths in the chapter HTML File Paths.

HTML Links - Different Colors

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

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

a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>

Link Buttons
A link can also be styled as a button, by using CSS:

Example
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

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

To learn more about CSS, go to W3school CSS Tutorial.

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

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>

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

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

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

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

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

Tip: A screen reader is a software program that reads the HTML code, and allows the user
to "listen" to the content. Screen readers are useful for people who are visually impaired
or learning disabled.

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:

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.

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

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="W3Schools.com">

56
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; they 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>

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

Tip: To learn more about CSS Float, read CSS Float Tutorial.

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

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

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

image .pjp

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

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

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

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

The Areas
Then, add the clickable areas.

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

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

61
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":

62
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

Now you have enough data to create a clickable circular area:

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

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

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?

64
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":

65
Image Map and JavaScript
A clickable area can also trigger a JavaScript function.

Add a click event to the <area> element to execute a JavaScript function:

Example
Here, we use the onclick attribute to execute a JavaScript function when the area is
clicked:

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:

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

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>

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

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>

Learn More CSS

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

To learn more about CSS background properties, study W3school CSS Background
Tutorial.
69
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:

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.

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

Note: The browser will use the first <source> element with matching attribute values, and
ignore any following <source> elements.

71
HTML Favicon
A favicon is a small image displayed next to the page title in the browser tab.

How To Add a Favicon in HTML

You can use any image you like as your favicon. You can also create your own favicon on
sites like https://www.favicon.cc.

Tip: A favicon is a small image, so it should be a simple image with high contrast.

A favicon image is displayed to the left of the page title in the browser tab, like this:

To add a favicon to your website, either save your favicon image to the root directory of
your webserver, or create a folder in the root directory called images, and save your favicon
image in this folder. A common name for a favicon image is "favicon.ico".

Next, add a <link> element to your "index.html" file, after the <title> element, like this:

Example
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

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

</body>
</html>

Now, save the "index.html" file and reload it in your browser. Your browser tab should
now display your favicon image to the left of the page title.

72
Favicon File Format Support
The following table shows the file format support for a favicon image:

Browser ICO PNG GIF JPEG SVG

Edge Yes Yes Yes Yes Yes

Chrome Yes Yes Yes Yes Yes

Firefox Yes Yes Yes Yes Yes

Opera Yes Yes Yes Yes Yes

Safari Yes Yes Yes Yes Yes

73
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

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>

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

Try it Yourself »

Note: A table cell can contain all sorts of HTML elements: text, images, lists, links, other
tables, etc.

Table Rows
Each table row starts with a <tr> and ends 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 when a row can have less or more cells than another. You will
learn about that in a later chapter.
75
Table Headers
Sometimes you want your cells to be table header cells. In those cases use the <th> tag
instead of the <td> tag:

th stands for table header.

Example
Let the first row be table header cells:

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

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

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

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

77
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 appearance of the border.

78
The following values are allowed:

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

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

Example
th, td {
border-color: #96D4D4;
}

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

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>
80
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%:

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

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

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

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

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

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

You will learn more about colspan and rowspan in the Table colspan & rowspan chapter.

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

Monthly savings

Month Savings

January $100

February $50

85
To add a caption to a table, use the <caption> tag:

Example
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

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

HTML Table Padding & Spacing

HTML tables can adjust the padding inside the cells, and also the space between the
cells.

With Padding
With Spacing

hello hello hello hello hello hello

hello hello hello

hello hello hello
hello hello hello

hello hello hello

86
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;
}

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

87
HTML Table Colspan & Rowspan
HTML tables can have cells that span over multiple rows and/or columns.

HTML Table - Colspan

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

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

<h2>Cell that spans two columns</h2>

<p>To make a cell span more than one column, use the colspan attribute.</p>

<table style="width:100%">
<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>
</body>
</html>

Note: The value of the colspan attribute represents the number of columns to span.

88
HTML Table - Rowspan
To make a cell span over multiple rows, use the rowspan attribute:

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

<h2>Cell that spans two rows</h2>

<p>To make a cell span more than one row, use the rowspan attribute.</p>

<table style="width:100%">
<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>
</body>
</html>
Note: The value of the rowspan attribute represents the number of rows to span.

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

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.

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

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);
}

91
Horizontal Dividers
First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

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

Example
tr:hover {background-color: #D6EEEE;}

92
HTML Table Colgroup
The <colgroup> element is used to style specific columns of a table.

HTML Table Colgroup

If you want to style the two first columns of a table, use
the <colgroup> and <col> elements.

MON TUE WED THU FRI SAT SUN

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

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

Each group is specified with a <col> element.

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

The style attribute specifies the style to give the columns.

Note: There is a very limited selection of legal CSS properties for colgroups.

Example
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

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.

93
Legal CSS Properties
There is 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>:

Example
<table>
<colgroup>
<col span="2" style="background-color: #D6EEEE">
<col span="3" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

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
<table>
<colgroup>
<col span="3">
<col span="2" style="background-color: pink">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...
94
Hide Columns
You can hide columns with the visibility: collapse property:

Example
<table>
<colgroup>
<col span="2">
<col span="3" style="visibility: collapse">
</colgroup>
<tr>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
...

95
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

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
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

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

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

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
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

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

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
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

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

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

98
Example - None
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Nested HTML Lists

Lists can be nested (list inside list):

Example
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

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

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

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

Tip: You can learn much more about CSS in W3school CSS Tutorial.
100
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
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Ordered HTML List - The Type Attribute

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

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

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

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

Lowercase Letters:
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Uppercase Roman Numbers:

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

Lowercase Roman Numbers:

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

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

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

Nested HTML Lists

Lists can be nested (list inside list):

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

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

103
HTML Block and Inline Elements
Every HTML element has a default display value, depending on what type of element
it is.

There are two display values: block and inline.

Block-level Elements
A block-level element always starts on a new line, and the browsers automatically add
some space (a margin) before and after the element.

A block-level element always takes up the full width available (stretches out to the left
and right as far as it can).

Two commonly used block elements are: <p> and <div>.

The <p> element defines a paragraph in an HTML document.

The <div> element defines a division or a section in an HTML document.

The <p> element is a block-level element.

The <div> element is a block-level element.

Example
<p>Hello World</p>
<div>Hello World</div>

Here are the block-level elements in HTML:

104
Inline Elements
An inline element does not start on a new line.

An inline element only takes up as much width as necessary.

This is a <span> element inside a paragraph.

Example
<span>Hello World</span>

Here are the inline elements in HTML:

Note: An inline element cannot contain a block-level element!

The <div> Element

The <div> element is often used as a container for other HTML elements.

The <div> element has no required attributes, but style, class and id are common.

When used together with CSS, the <div> element can be used to style blocks of content:

Example
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

105
The <span> Element
The <span> element is an inline container used to mark up a part of a text, or a part of a
document.

The <span> element has no required attributes, but style, class and id are common.

When used together with CSS, the <span> element can be used to style parts of the text:

Example
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and
my father has <span style="color:darkolivegreen;font-weight:bold;">dark
green</span> eyes.</p>

106
HTML class Attribute
The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

Using The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also be
used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three <div> elements with a class attribute with the value
of "city". All of the three <div> elements will be styled equally according to the .city style
definition in the head section:

Example
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>

107
In the following example we have two <span> elements with a class attribute with the value
of "note". Both <span> elements will be styled equally according to the .note style definition
in the head section:

Example
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>

<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the
CSS properties within curly braces {}:

Example
Create a class named "city":

<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>

108
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

Multiple Classes
HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. <div class="city
main">. The element will be styled according to all the classes specified.

In the following example, the first <h2> element belongs to both the city class and also to
the main class, and will get the CSS styles from both of the classes:

Example
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both <h2> and <p> point to the "city" class and will share the
same style:

Example
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

109
Use of The class Attribute in JavaScript
The class name can also be used by JavaScript to perform certain tasks for specific
elements.

JavaScript can access elements with a specific class name with

the getElementsByClassName() method:

Example
Click on a button to hide all elements with the class name "city":

Don't worry if you don't understand the code in the example above.

You will learn more about JavaScript in W3school HTML JavaScript chapter, or you can
study W3school JavaScript Tutorial.

110
HTML id Attribute
The HTML id attribute is used to specify a unique id for an HTML element.

You cannot have more than one element with the same id in an HTML document.

Using The id Attribute

The id attribute specifies a unique id for an HTML element. The value of the id attribute
must be unique within the HTML document.

The id attribute is used to point to a specific style declaration in a style sheet. It is also
used by JavaScript to access and manipulate the element with the specific id.

The syntax for id is: write a hash character (#), followed by an id name. Then, define the
CSS properties within curly braces {}.

In the following example we have an <h1> element that points to the id name "myHeader".
This <h1> element will be styled according to the #myHeader style definition in the head
section:

Example
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>

<h1 id="myHeader">My Header</h1>

</body>
</html>

Note: The id name is case sensitive!

Note: The id name must contain at least one character, cannot start with a number, and
must not contain whitespaces (spaces, tabs, etc.).

111
Difference Between Class and ID
A class name can be used by multiple HTML elements, while an id name must only be used
by one HTML element within the page:

Example
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}

/* Style all elements with the class name "city" */

.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>

<h1 id="myHeader">My Cities</h1>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

Tip: You can learn much more about CSS in W3school CSS Tutorial.

112
HTML Bookmarks with ID and Links
HTML bookmarks are used to allow readers to jump to specific parts of a webpage.

Bookmarks can be useful if your page is very long.

To use a bookmark, you must first create it, and then add a link to it.

Then, when the link is clicked, the page will scroll to the location with the bookmark.

Example
First, create a bookmark with the id attribute:

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

Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:

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

Using The id Attribute in JavaScript

The id attribute can also be used by JavaScript to perform some tasks for that specific
element.

JavaScript can access an element with a specific id with the getElementById() method:

Example
Use the id attribute to manipulate text with JavaScript:

Tip: Study JavaScript in the HTML JavaScript chapter, or in W3school JavaScript Tutorial.

113

Etap Training Manual PDF
13% (8)
Etap Training Manual PDF
2 pages
Plotly Cheatsheet
No ratings yet
Plotly Cheatsheet
2 pages
WDP Material One
No ratings yet
WDP Material One
97 pages
HTML
No ratings yet
HTML
61 pages
Hướng dẫn lập trình web - HTML
No ratings yet
Hướng dẫn lập trình web - HTML
296 pages
HTML Introduction
No ratings yet
HTML Introduction
26 pages
Unit 3 HTML - RM - PDF
No ratings yet
Unit 3 HTML - RM - PDF
41 pages
Web development
No ratings yet
Web development
32 pages
HTML Intro
No ratings yet
HTML Intro
137 pages
W3school (HTML Notes)
No ratings yet
W3school (HTML Notes)
13 pages
_Lecture 02_HTML Basics1
No ratings yet
_Lecture 02_HTML Basics1
74 pages
HTML Notes
No ratings yet
HTML Notes
179 pages
Bcac501 - It - Part-1-Html
No ratings yet
Bcac501 - It - Part-1-Html
117 pages
HTML Introduction To Attributes
No ratings yet
HTML Introduction To Attributes
19 pages
HTML Is The Standard Markup Language For Creating Web Pages
No ratings yet
HTML Is The Standard Markup Language For Creating Web Pages
12 pages
HTML5 Tutorial
No ratings yet
HTML5 Tutorial
32 pages
Coding Bible PDF
No ratings yet
Coding Bible PDF
32 pages
HTML
No ratings yet
HTML
84 pages
HTML Tutorial
No ratings yet
HTML Tutorial
200 pages
Audio & Video HTML
No ratings yet
Audio & Video HTML
218 pages
HTML Materials
No ratings yet
HTML Materials
104 pages
HTML Tutorial
No ratings yet
HTML Tutorial
363 pages
HTML Introduction 254
No ratings yet
HTML Introduction 254
81 pages
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
No ratings yet
!doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
113 pages
HTML With CSS Programming
No ratings yet
HTML With CSS Programming
177 pages
HTML Lesson 1
No ratings yet
HTML Lesson 1
5 pages
Untitled Document
No ratings yet
Untitled Document
175 pages
Lecture1 HTML
No ratings yet
Lecture1 HTML
70 pages
HTML
No ratings yet
HTML
47 pages
CH3 HTML
No ratings yet
CH3 HTML
49 pages
HTML
No ratings yet
HTML
74 pages
Introduction To HTML
No ratings yet
Introduction To HTML
4 pages
Write HTML Using Notepad or Textedit: Example
No ratings yet
Write HTML Using Notepad or Textedit: Example
23 pages
1 - HTML Notes
No ratings yet
1 - HTML Notes
86 pages
introduction to HTML lanuage
No ratings yet
introduction to HTML lanuage
5 pages
HTML-Chapter 1 - 4
100% (1)
HTML-Chapter 1 - 4
126 pages
What Is HTML?: Example Result
No ratings yet
What Is HTML?: Example Result
19 pages
HTML
No ratings yet
HTML
14 pages
What Is HTML
No ratings yet
What Is HTML
32 pages
HTML Css Java Tutorial
0% (1)
HTML Css Java Tutorial
80 pages
Hypertext Markup Langauge
No ratings yet
Hypertext Markup Langauge
9 pages
Pascua, Nate Evan Sevdaz Bellus ICT Q1 W1
No ratings yet
Pascua, Nate Evan Sevdaz Bellus ICT Q1 W1
16 pages
Learning Material 2 HTML INTRODUCTION
No ratings yet
Learning Material 2 HTML INTRODUCTION
4 pages
HTML Chapter 1
No ratings yet
HTML Chapter 1
27 pages
PGDM 2010-12 HTML Tutorial
No ratings yet
PGDM 2010-12 HTML Tutorial
43 pages
HTML SYlABUS
No ratings yet
HTML SYlABUS
50 pages
Lecture 2
No ratings yet
Lecture 2
26 pages
HTML Notes
No ratings yet
HTML Notes
22 pages
HTML Introduction
No ratings yet
HTML Introduction
4 pages
HTML
No ratings yet
HTML
22 pages
HTML Basics
No ratings yet
HTML Basics
12 pages
HTML Notes
No ratings yet
HTML Notes
23 pages
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
No ratings yet
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
52 pages
HTML Note
No ratings yet
HTML Note
39 pages
Introduction to HTML
No ratings yet
Introduction to HTML
99 pages
Lesson 1 Introduction To HTML
No ratings yet
Lesson 1 Introduction To HTML
4 pages
What Is HTML
No ratings yet
What Is HTML
14 pages
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
No ratings yet
What Is HTML?: HTML Is The Standard Markup Language For Creating Web Pages
133 pages
HTML 1
No ratings yet
HTML 1
5 pages
HTML Tutorial
No ratings yet
HTML Tutorial
63 pages
HTML Tutorial
No ratings yet
HTML Tutorial
160 pages
HTML Beginner's Crash Course: HTML for Beginner's Guide to Learning HTML, HTML & CSS, & Web Design
From Everand
HTML Beginner's Crash Course: HTML for Beginner's Guide to Learning HTML, HTML & CSS, & Web Design
Quick Start Guides
4/5 (1)
CAD Standards
No ratings yet
CAD Standards
39 pages
Programming Concepts
No ratings yet
Programming Concepts
5 pages
maths-class-vii-practice-test-05-algebraic-expressions
No ratings yet
maths-class-vii-practice-test-05-algebraic-expressions
2 pages
Task 1
No ratings yet
Task 1
2 pages
Sas3fw Master Dev-16 00 10 00
No ratings yet
Sas3fw Master Dev-16 00 10 00
11 pages
Hermite Interpolation
No ratings yet
Hermite Interpolation
3 pages
Siwes Report
No ratings yet
Siwes Report
28 pages
Oracle Installation From Oracle-Base
No ratings yet
Oracle Installation From Oracle-Base
57 pages
Schmitt Trigger
No ratings yet
Schmitt Trigger
4 pages
Sastri Nagar Sector 2
No ratings yet
Sastri Nagar Sector 2
1 page
2017 Samsung TV F/W Upgrade Guide
No ratings yet
2017 Samsung TV F/W Upgrade Guide
6 pages
National-Level Science Talent Search Examination (NSTSE) Class 6 Paper 2019 Part 1
No ratings yet
National-Level Science Talent Search Examination (NSTSE) Class 6 Paper 2019 Part 1
4 pages
Unit 2
No ratings yet
Unit 2
23 pages
Union Bank of India Bank Clerk Exam (10 - 01 - 2010)
No ratings yet
Union Bank of India Bank Clerk Exam (10 - 01 - 2010)
20 pages
Analog Input/output Modules - EM 231 Analog Input Modules
No ratings yet
Analog Input/output Modules - EM 231 Analog Input Modules
11 pages
Technical Presentation Crane Control Program +N697 Dedicated For Cranes
No ratings yet
Technical Presentation Crane Control Program +N697 Dedicated For Cranes
48 pages
Sobel Operator
No ratings yet
Sobel Operator
5 pages
ECE-ND-2021-EC 2352-COMPUTER NETWORKS-260846343-80457(EC2352-PTEC2352-10144BME41-10144EC603)
No ratings yet
ECE-ND-2021-EC 2352-COMPUTER NETWORKS-260846343-80457(EC2352-PTEC2352-10144BME41-10144EC603)
2 pages
Isha Khans Assignments For Per 4 MESA 41 - 410 - CodeHS
No ratings yet
Isha Khans Assignments For Per 4 MESA 41 - 410 - CodeHS
5 pages
Simulasi Vending Machine Dengan Mengimplementasikan Finite State Automata
No ratings yet
Simulasi Vending Machine Dengan Mengimplementasikan Finite State Automata
7 pages
Workplace Team and Environment
No ratings yet
Workplace Team and Environment
22 pages
Analysis: Systems
No ratings yet
Analysis: Systems
14 pages
B.E.: Electronics & Communication Engineering: (Not For E&C Students)
No ratings yet
B.E.: Electronics & Communication Engineering: (Not For E&C Students)
5 pages
Mpa1 3 9220660 4 9211110
No ratings yet
Mpa1 3 9220660 4 9211110
15 pages
A Change in Me PDF 3
No ratings yet
A Change in Me PDF 3
1 page
DATA CENTER - Cooling & Raise Floor
100% (1)
DATA CENTER - Cooling & Raise Floor
45 pages
Assignment 2 - Frontsheet - Security
No ratings yet
Assignment 2 - Frontsheet - Security
26 pages
CoCU - 7 Office Risk Management
No ratings yet
CoCU - 7 Office Risk Management
7 pages