100% found this document useful (1 vote)

183 views

HTML-Chapter 1 - 4

HTML is the standard markup language used to create web pages. It uses tags to structure and label content like headings, paragraphs, links, and images. An HTML document has a basic structure including <html>, <head>, and <body> tags. Within the <body> tags are elements that define different semantics like headings, paragraphs, lists, and more. HTML elements consist of opening and closing tags that can be nested to show relationships between content.

Uploaded by

Mekdi Zekarias

Available Formats

Download as PDF, TXT or read online on Scribd

100% found this document useful (1 vote)

183 views

HTML-Chapter 1 - 4

Uploaded by

Mekdi Zekarias

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 126

Chapter 1: HTML

Part I
HTML Introduction
HTML is the standard markup language for creating Web pages. With
HTML you can create your own Website.

What is HTML?
 HTML stands for Hyper Text Markup Language
 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

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

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

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

</head>

<body>

3
<h1>This is a heading</h1>

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

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

</body>

</html>

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.

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 W3C Recommendation: HTML 3.2

4
1999 W3C Recommendation: HTML 4.01

2000 W3C Recommendation: XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

2014 W3C Recommendation: HTML5

2016 W3C Candidate Recommendation: HTML 5.1

2017 W3C Recommendation: HTML5.1 2nd Edition

2017 W3C Recommendation: HTML5.2

This course follows the latest HTML5 standard.

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

5
Learn HTML Using Notepad
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).

Follow the steps below to create your first web page with Notepad.

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

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

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

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

Nested HTML Elements

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

All HTML documents consist of nested HTML elements.

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

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

<h1>My First Heading</h1>

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>

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

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.w3schools.com">Visit W3Schools</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:

11
1. Absolute URL - Links to an external image that is hosted on another
website. Example:
src="https://www.w3schools.com/images/img_girl.jpg".

2. Relative URL - Links to an image that is hosted within the website.

Here, the URL does not include the domain name. If the URL begins
without a slash, it will be relative to the current page. Example:
src="img_girl.jpg". If the URL begins with a slash, it will be relative to the
domain. Example: src="/images/img_girl.jpg".

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

The width and height Attributes

The <img> tag should also contain the width and height attributes, which
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">

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>

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

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>

Always Use Lowercase Attributes

The HTML standard does not require lowercase attribute names.
13
The title attribute (and all other attributes) can be written with uppercase
or lowercase like title or TITLE.

Always Quote Attribute Values

The HTML standard does not require quotes around attribute values.

However, W3C recommends quotes in HTML, and demands quotes for

stricter document types like XHTML.

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

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

Section 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
HTML headings are titles or subtitles that you want to display on a
webpage.

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

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

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>

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

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.

17
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

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font, 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>

Exercise:
Use the correct HTML tag to add a paragraph with the text "Hello World!".

18
<html>
<body>

</body>
</html>

HTML Tag Description

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

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

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

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

Example
Set the background color for a page to 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>

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

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

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.
22
Example
<b>This text is bold</b>

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

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

HTML <i> and <em> Elements

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

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

Example
<i>This text is italic</i>

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

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

Example
<em>This text is emphasized</em>

HTML <small> Element

The HTML <small> element defines smaller text:

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

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

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>

24
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 Text Formatting Elements

Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

25
<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

HTML Quotation and

Citation Elements
In this section 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.

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

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>

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

The contact information can be an email address, URL, physical address,

phone number, social media handle, etc.

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

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

HTML <cite> for Work Title

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

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

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

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

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.

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

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

Exercise:
Use an HTML element to add quotation marks around the letters "cool".

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

29
<q> Defines a short inline quotation

HTML Comments
HTML comments are not displayed in the browser, but they can help
document your HTML source code.

HTML Comment Tags

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.

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

Example

<p>This is a paragraph.</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:

Example

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

31
Violet

LightGray

HTML supports 140 standard color names.

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

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

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

33
rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

The following two <div> elements have their background color set with
RGBA and HSLA values, which adds an Alpha channel to the color.

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

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

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

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

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>

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.

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

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

37
 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;
background-color: transparent;
text-decoration: underline;
}
</style>

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

Example

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

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>

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

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

Section 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

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

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

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.
41
Note: Always specify the width and height of an image.

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>

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

42
tutorial" style="width:42px;height:42px;">
</a>

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

Section Summary
 Use the HTML <img> element to define an image
 Use the HTML src attribute to define the URL of the image

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

Note: Loading large images takes time, and can slow down your web
page. Use images carefully.

44
Part II
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

The <table> tag defines an HTML table.

Each table row is defined with a <tr> tag. Each table header is defined
with a <th> tag. Each table data/cell is defined with a <td> tag.

By default, the text in <th> elements are bold and centered.

By default, the text in <td> elements are regular and left-aligned.

45
Example
A simple HTML table:

<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: The <td> elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other
tables, etc.

HTML Table - Add a Border

To add a border to a table, use the CSS border property:

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

Remember to define borders for both the table and the table cells.

HTML Table - Left-align Headings

By default, table headings are bold and centered.

46
To left-align the table headings, use the CSS text-align property:

Example
th {
text-align: left;
}

HTML Table - Cell that Spans Many

Columns
To make a cell span more than one column, use the colspan attribute:

Example
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>

HTML Table - Cell that Spans Many

Rows
To make a cell span more than one row, use the rowspan attribute:

Example
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>

47
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>

HTML Table - Add a Caption

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 must be inserted immediately after

the <table> tag.

A Special Style for One Table

To define a special style for one particular table, add an id attribute to the
table:

48
Example
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

Now you can define a special style for this table:

#t01 {
width: 100%;
background-color: #f1f1c1;
}

Section Summary
 Use the HTML <table> element to define a table
 Use the HTML <tr> element to define a table row
 Use the HTML <td> element to define a table data
 Use the HTML <th> element to define a table heading
 Use the HTML <caption> element to define a table caption
 Use the CSS border property to define a border
 Use the CSS text-align property to align cell text
 Use the colspan attribute to make a cell span many columns
 Use the rowspan attribute to make a cell span many rows
 Use the id attribute to uniquely define one table

Exercise:
Add a table row with two table headers.

The two table headers should have the value "Name" and "Age".

49
<table>

<tr>
<td>Jill Smith</td>
<td>50</td>
</tr>
</table>

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:

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

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>

51
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

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:

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

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>

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

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>

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

Section 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

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:

55
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

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>

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

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

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

Section 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

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
<dl>
<dt>Coffee</dt>

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

Section 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

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.

A block-level element always takes up the full width available (stretches

out to the left and right as far as it can).

A block level element has a top and a bottom margin, whereas an inline
element does not.

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

Example
<div>Hello World</div>

Here are the block-level elements in HTML:

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>,<div>,

<dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>,

59
<h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>,
<p>, <pre>, <section>, <table>, <tfoot>, <ul>, <video>

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:

<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>,

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

60
million inhabitants.</p>
</div>

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>

Section Summary
 There are two display values: block and inline
 A block-level element always starts on a new line and takes up the
full width available
 An inline element does not start on a new line and it only takes up
as much width as necessary
 The <div> element is a block-level and is often used as a container
for other HTML elements
 The <span> element is an inline container used to mark up a part of
a text, or a part of a document

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.

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

62
</div>

</body>
</html>

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

63
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<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>

Section Summary
 The HTML class attribute specifies one or more class names for an
element
 Classes are used by CSS and JavaScript to select and access
specific elements
 The class attribute can be used on any HTML element
 The class name is case sensitive
 Different HTML elements can point to the same class name

xExercise:
Create a class selector named "special".

Add a color property with the value "blue" inside the "special" class.

64
<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<p class="special">My paragraph</p>

</body>
</html>

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

65
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, and must not
contain whitespaces (spaces, tabs, etc.).

Section Summary
 The id attribute is used to specify 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 by CSS and JavaScript to style/select a
specific element
 The value of the id attribute is case sensitive

66
HTML Iframes
An HTML iframe is used to display a web page within a web page.

HTML Iframe Syntax

The HTML <iframe> tag specifies an inline frame.

An inline frame is used to embed another document within the current

HTML document.

Syntax
<iframe src="url" title="description">

Tip: It is a good practice to always include a title attribute for

the <iframe>. This is used by screen readers to read out what the content
of the iframe is.

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.

The height and width are specified in pixels by default:

Example
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe
Example"></iframe>

Or you can add the style attribute and use the

CSS height and width properties:

Example
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" titl
e="Iframe Example"></iframe>

67
Iframe - Remove the Border
By default, an iframe has a border around it.

To remove the border, add the style attribute and use the
CSS border property:

Example
<iframe src="demo_iframe.htm" style="border:none;" title="Iframe
Example"></iframe>

With CSS, you can also change the size, style and color of the iframe's
border:

Example
<iframe src="demo_iframe.htm" style="border:2px solid
red;" title="Iframe Example"></iframe>

Iframe - Target for a Link

An iframe can be used as the target frame for a link.

The target attribute of the link must refer to the name attribute of the
iframe:

Example
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe
Example"></iframe>

<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.c

om</a></p>

68
Section Summary
 The HTML <iframe> tag specifies an inline frame
 The src attribute defines the URL of the page to embed
 Always include a title attribute (for screen readers)
 The height and width attributes specifies the size of the iframe
 Use border:none; to remove the border around the iframe

69
Part III
HTML Forms
An HTML form is used to collect user input. The user input is most
often sent to a server for processing.

Example
First name:
John

Last name:
Doe

Submit

The <form> Element

The HTML <form> element is used to create an HTML form for user input:

<form>
form elements
</form>

The <form> element is a container for different types of input elements,

such as: text fields, checkboxes, radio buttons, submit buttons, etc.

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on

the type attribute.

Here are some examples:

70
Type Description

<input type="text"> Displays a single-line text input field

<input type="radio"> Displays a radio button (for selecting one of many

choices)

<input Displays a checkbox (for selecting zero or more of many

type="checkbox"> choices)

<input type="submit"> Displays a submit button (for submitting the form)

<input type="button"> Displays a clickable button

Text Fields
The <input type="text"> defines a single-line input field for text input.

Example
A form with input fields for text:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

This is how the HTML code above will be displayed in a browser:

71
First name:

Last name:

Note: The form itself is not visible. Also note that the default width of an
input field is 20 characters.

The <label> Element

Notice the use of the <label> element in the example above.

The <label> tag defines a label for many form elements.

The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focuses on the input
element.

The <label> element also help users who have difficulty clicking on very
small regions (such as radio buttons or checkboxes) - because when the
user clicks the text within the <label> element, it toggles the radio
button/checkbox.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.

Radio Buttons
The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Example
A form with radio buttons:

<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>

72
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>

This is how the HTML code above will be displayed in a browser:

Male

Female

Other

Checkboxes
The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number

of choices.

Example
A form with checkboxes:

This is how the HTML code above will be displayed in a browser:

I have a bike

I have a car

I have a boat

73
The Submit Button
The <input type="submit"> defines a button for submitting the form data to
a form-handler.

The form-handler is typically a file on the server with a script for

processing input data.

The form-handler is specified in the form's action attribute.

Example
A form with a submit button:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

This is how the HTML code above will be displayed in a browser:

First name:
John

Last name:
Doe

Submit

The Name Attribute for <input>

Notice that each input field must have a name attribute to be submitted.

If the name attribute is omitted, the value of the input field will not be sent
at all.

Example
74
This example will not submit the value of the "First name" input field:

<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>

HTML Form Attributes

This chapter describes the different attributes for the
HTML <form> element.

The Action Attribute

The action attribute defines the action to be performed when the form is
submitted.

Usually, the form data is sent to a file on the server when the user clicks
on the submit button.

In the example below, the form data is sent to a file called

"action_page.php". This file contains a server-side script that handles the
form data:

Example
On submit, send form data to "action_page.php":

Tip: If the action attribute is omitted, the action is set to the current
page.

75
The Target Attribute
The target attribute specifies where to display the response that is
received after submitting the form.

The target attribute can have one of the following values:

Value Description

_blank The response is displayed in a new window or tab

_self The response is displayed in the current window

_parent The response is displayed in the parent frame

_top The response is displayed in the full body of the window

framename The response is displayed in a named iframe

The default value is _self which means that the response will open in the
current window.

Example
Here, the submitted result will open in a new browser tab:

<form action="/action_page.php" target="_blank">

76
The Method Attribute
The method attribute specifies the HTTP method to be used when
submitting the form data.

The form-data can be sent as URL variables (with method="get") or as HTTP

post transaction (with method="post").

The default HTTP method when submitting form data is GET.

Example
This example uses the GET method when submitting the form data:

<form action="/action_page.php" method="get">

Example
This example uses the POST method when submitting the form data:

<form action="/action_page.php" method="post">

Notes on GET:

 Appends the form data to the URL, in name/value pairs

 NEVER use GET to send sensitive data! (the submitted form data is
visible in the URL!)
 The length of a URL is limited (2048 characters)
 Useful for form submissions where a user wants to bookmark the
result
 GET is good for non-secure data, like query strings in Google

Notes on POST:

 Appends the form data inside the body of the HTTP request (the
submitted form data is not shown in the URL)
 POST has no size limitations, and can be used to send large
amounts of data.
 Form submissions with POST cannot be bookmarked

Tip: Always use POST if the form data contains sensitive or personal
information!

77
The Autocomplete Attribute
The autocomplete attribute specifies whether a form should have
autocomplete on or off.

When autocomplete is on, the browser automatically complete values

based on values that the user has entered before.

Example
A form with autocomplete on:

<form action="/action_page.php" autocomplete="on">

The Novalidate Attribute

The novalidate attribute is a boolean attribute.

When present, it specifies that the form-data (input) should not be

validated when submitted.

Example
A form with a novalidate attribute:

<form action="/action_page.php" novalidate> er

List of All <form> Attributes
Attribute Description

accept- Specifies the character encodings used for form submission

charset

78
action Specifies where to send the form-data when a form is submitted

autocomplete Specifies whether a form should have autocomplete on or off

enctype Specifies how the form-data should be encoded when submitting it to the server (only for
method="post")

method Specifies the HTTP method to use when sending form-data

name Specifies the name of the form

novalidate Specifies that the form should not be validated when submitted

rel Specifies the relationship between a linked resource and the current document

target Specifies where to display the response that is received after submitting the form

HTML Form Elements

This chapter describes all the different HTML form elements.

The HTML <form> Elements

The HTML <form> element can contain one or more of the following form
elements:

79
 <input>
 <label>
 <select>
 <textarea>
 <button>
 <fieldset>
 <legend>
 <datalist>
 <output>
 <option>
 <optgroup>

The <input> Element

One of the most used form element is the <input> element.

The <input> element can be displayed in several ways, depending on

the type attribute.

Example
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">

The <label> Element

The <label> element defines a label for several form elements.

The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input
element.

The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.

80
The <select> Element
The <select> element defines a drop-down list:

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <option> elements defines an option that can be selected.

By default, the first item in the drop-down list is selected.

To define a pre-selected option, add the selected attribute to the option:

Example
<option value="fiat" selected>Fiat</option>

Visible Values:
Use the size attribute to specify the number of visible values:

Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

Allow Multiple Selections:

Use the multiple attribute to allow the user to select more than one value:

81
Example
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

Example
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

The rows attribute specifies the visible number of lines in a text area.

The cols attribute specifies the visible width of a text area.

This is how the HTML code above will be displayed in a browser:

You can also define the size of the text area by using CSS:

Example
<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

82
The <button> Element
The <button> element defines a clickable button:

Example
<button type="button" onclick="alert('Hello World!')">Click
Me!</button>

Note: Always specify the type attribute for the button element. Different
browsers may use different default types for the button element.

The <fieldset> and <legend> Elements

The <fieldset> element is used to group related data in a form.

The <legend> element defines a caption for the <fieldset> element.

Example
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>

This is how the HTML code above will be displayed in a browser:

Personalia:First name:
John

Last name:
Doe

Submit

83
The <datalist> Element
The <datalist> element specifies a list of pre-defined options for
an <input> element.

Users will see a drop-down list of the pre-defined options as they input
data.

The list attribute of the <input> element, must refer to the id attribute of
the <datalist> element.

Example
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>

The <output> Element

The <output> element represents the result of a calculation (like one
performed by a script).

Example
Perform a calculation and show the result in an <output> element:

84
<br><br>
<input type="submit">
</form>

HTML Input Types

This chapter describes the different types for the
HTML <input> element.

HTML Input Types

Here are the different input types you can use in HTML:

 <input type="button">
 <input type="checkbox">
 <input type="color">
 <input type="date">
 <input type="datetime-local">
 <input type="email">
 <input type="file">
 <input type="hidden">
 <input type="image">
 <input type="month">
 <input type="number">
 <input type="password">
 <input type="radio">
 <input type="range">
 <input type="reset">
 <input type="search">
 <input type="submit">
 <input type="tel">
 <input type="text">
 <input type="time">
 <input type="url">
 <input type="week">

Tip: The default value of the type attribute is "text".

Input Type Text

<input type="text"> defines a single-line text input field:

85
Example
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

This is how the HTML code above will be displayed in a browser:

First name:

Last name:

Input Type Password

<input type="password"> defines a password field:

Example
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>

This is how the HTML code above will be displayed in a browser:

Username:

Password:

The characters in a password field are masked (shown as asterisks or

circles).

86
Input Type Submit
<input type="submit"> defines a button for submitting form data to
a form-handler.

The form-handler is typically a server page with a script for processing

input data.

The form-handler is specified in the form's action attribute:

Example
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>

This is how the HTML code above will be displayed in a browser:

First name:
John

Last name:
Doe

Submit

If you omit the submit button's value attribute, the button will get a
default text:

87
<input type="submit">
</form>

Input Type Reset

<input type="reset"> defines a reset button that will reset all form values
to their default values:

This is how the HTML code above will be displayed in a browser:

First name:
John

Last name:
Doe

Submit Reset

If you change the input values and then click the "Reset" button, the
form-data will be reset to the default values.

Input Type Radio

<input type="radio"> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

Example

88
<form>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</form>

This is how the HTML code above will be displayed in a browser:

Male

Female

Other

Input Type Checkbox

<input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number

of choices.

Example
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>

This is how the HTML code above will be displayed in a browser:

I have a bike

I have a car

I have a boat

89
Input Type Button
<input type="button"> defines a button:

Example
<input type="button" onclick="alert('Hello World!')" value="Click
Me!">

This is how the HTML code above will be displayed in a browser:

Input Type Color

The <input type="color"> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input

field.

Example
<form>
<label for="favcolor">Select your favorite color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>

Input Type Date

The <input type="date"> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input

field.

Example
<form>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">
</form>

You can also use the min and max attributes to add restrictions to dates:

90
Example
<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-02">
</form>

Input Type Datetime-local

The <input type="datetime-local"> specifies a date and time input field, with
no time zone.

Depending on browser support, a date picker can show up in the input

field.

Example
<form>
<label for="birthdaytime">Birthday (date and time):</label>
<input type="datetime-
local" id="birthdaytime" name="birthdaytime">
</form>

Input Type Email

The <input type="email"> is used for input fields that should contain an e-
mail address.

Depending on browser support, the e-mail address can be automatically

validated when submitted.

Some smartphones recognize the email type, and add ".com" to the
keyboard to match email input.

Example
<form>
<label for="email">Enter your email:</label>

91
<input type="email" id="email" name="email">
</form>

Input Type File

The <input type="file"> defines a file-select field and a "Browse" button for
file uploads.

Example
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>

Input Type Month

The <input type="month"> allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input

field.

Example
<form>
<label for="bdaymonth">Birthday (month and year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>

Input Type Number

The <input type="number"> defines a numeric input field.

You can also set restrictions on what numbers are accepted.

The following example displays a numeric input field, where you can enter
a value from 1 to 5:

Example

92
<form>
<label for="quantity">Quantity (between 1 and 5):</label>
<input type="number" id="quantity" name="quantity" min="1" max="5"
>
</form>

Input Restrictions
Here is a list of some common input restrictions:

Attribute Description

checked Specifies that an input field should be pre-selected when the

page loads (for type="checkbox" or type="radio")

disabled Specifies that an input field should be disabled

max Specifies the maximum value for an input field

maxlength Specifies the maximum number of character for an input field

min Specifies the minimum value for an input field

pattern Specifies a regular expression to check the input value

against

93
readonly Specifies that an input field is read only (cannot be changed)

required Specifies that an input field is required (must be filled out)

size Specifies the width (in characters) of an input field

step Specifies the legal number intervals for an input field

value Specifies the default value for an input field

The following example displays a numeric input field, where you can enter
a value from 0 to 100, in steps of 10. The default value is 30:

Example
<form>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="0" max="10
0" step="10" value="30">
</form>

Input Type Range

The <input type="range"> defines a control for entering a number whose
exact value is not important (like a slider control). Default range is 0 to
100. However, you can set restrictions on what numbers are accepted
with the min, max, and step attributes:

Example
<form>
<label for="vol">Volume (between 0 and 50):</label>

94
<input type="range" id="vol" name="vol" min="0" max="50">
</form>

Input Type Search

The <input type="search"> is used for search fields (a search field behaves
like a regular text field).

Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>

Input Type Tel

The <input type="tel"> is used for input fields that should contain a
telephone number.

Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-
9]{2}-[0-9]{3}">
</form>

Input Type Time

The <input type="time"> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input

field.

Example
<form>
<label for="appt">Select a time:</label>

95
<input type="time" id="appt" name="appt">
</form>

Input Type Url

The <input type="url"> is used for input fields that should contain a URL
address.

Depending on browser support, the url field can be automatically

validated when submitted.

Some smartphones recognize the url type, and adds ".com" to the
keyboard to match url input.

Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>

Input Type Week

The <input type="week"> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input

field.

Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>

HTML Input Attributes

This section describes the different attributes for the
HTML <input> element.

96
The value Attribute
The input value attribute specifies an initial value for an input field:

Example
Input fields with initial (default) values:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

The readonly Attribute

The input readonly attribute specifies that an input field is read-only.

A read-only input field cannot be modified (however, a user can tab to it,
highlight it, and copy the text from it).

The value of a read-only input field will be sent when submitting the form!

Example
A read-only input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" readonly><
br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

The disabled Attribute

The input disabled attribute specifies that an input field should be
disabled.

97
A disabled input field is unusable and un-clickable.

The value of a disabled input field will not be sent when submitting the
form!

Example
A disabled input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John" disabled><
br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
</form>

The size Attribute

The input size attribute specifies the visible width, in characters, of an
input field.

The default value for size is 20.

Note: The size attribute works with the following input types: text,
search, tel, url, email, and password.

Example
Set a width for an input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" size="4">
</form>

98
The maxlength Attribute
The input maxlength attribute specifies the maximum number of characters
allowed in an input field.

Note: When a maxlength is set, the input field will not accept more than
the specified number of characters. However, this attribute does not
provide any feedback. So, if you want to alert the user, you must write
JavaScript code.

Example
Set a maximum length for an input field:

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" size="50"><br>
<label for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin" maxlength="4" size="4">
</form>

The min and max Attributes

The input min and max attributes specify the minimum and maximum
values for an input field.

The min and max attributes work with the following input types: number,
range, date, datetime-local, month, time and week.

Tip: Use the max and min attributes together to create a range of legal
values.

Example
Set a max date, a min date, and a range of legal values:

<form>
<label for="datemax">Enter a date before 1980-01-01:</label>
<input type="date" id="datemax" name="datemax" max="1979-12-
31"><br><br>

99
<label for="datemin">Enter a date after 2000-01-01:</label>
<input type="date" id="datemin" name="datemin" min="2000-01-
02"><br><br>

<label for="quantity">Quantity (between 1 and 5):</label>

The multiple Attribute

The input multiple attribute specifies that the user is allowed to enter
more than one value in an input field.

The multiple attribute works with the following input types: email, and
file.

Example
A file upload field that accepts multiple values:

<form>
<label for="files">Select files:</label>
<input type="file" id="files" name="files" multiple>
</form>

The pattern Attribute

The input pattern attribute specifies a regular expression that the input
field's value is checked against, when the form is submitted.

The pattern attribute works with the following input types: text, date,
search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

Tip: Learn more about regular expressions in our JavaScript tutorial.

Example

100
An input field that can contain only three letters (no numbers or special
characters):

<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>

The placeholder Attribute

The input placeholder attribute specifies a short hint that describes the
expected value of an input field (a sample value or a short description of
the expected format).

The short hint is displayed in the input field before the user enters a
value.

The placeholder attribute works with the following input types: text,
search, url, tel, email, and password.

Example
An input field with a placeholder text:

<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

The required Attribute

The input required attribute specifies that an input field must be filled out
before submitting the form.

The required attribute works with the following input types: text, search,
url, tel, email, password, date pickers, number, checkbox, radio, and file.

Example

101
A required input field:

<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</form>

The step Attribute

The input step attribute specifies the legal number intervals for an input
field.

Example: if step="3", legal numbers could be -3, 0, 3, 6, etc.

Tip: This attribute can be used together with the max and min attributes
to create a range of legal values.

The step attribute works with the following input types: number, range,
date, datetime-local, month, time and week.

Example
An input field with a specified legal number intervals:

<form>
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
</form>

Note: Input restrictions are not foolproof, and JavaScript provides many
ways to add illegal input. To safely restrict input, it must also be checked
by the receiver (the server)!

The autofocus Attribute

The input autofocus attribute specifies that an input field should
automatically get focus when the page loads.

Example
Let the "First name" input field automatically get focus when the page
loads:

102
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>

The height and width Attributes

The input height and width attributes specify the height and width of
an <input type="image"> element.

Example
Define an image as the submit button, with height and width attributes:

<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" h
eight="48">
</form>

The list Attribute

The input list attribute refers to a <datalist> element that contains pre-
defined options for an <input> element.

Example
An <input> element with pre-defined values in a <datalist>:

103
<option value="Safari">
</datalist>
</form>

The autocomplete Attribute

The input autocomplete attribute specifies whether a form or an input field
should have autocomplete on or off.

Autocomplete allows the browser to predict the value. When a user starts
to type in a field, the browser should display options to fill in the field,
based on earlier typed values.

The autocomplete attribute works with <form> and the

following <input> types: text, search, url, tel, email, password,
datepickers, range, and color.

Example
An HTML form with autocomplete on, and off for one input field:

<form action="/action_page.php" autocomplete="on">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br
><br>
<input type="submit" value="Submit">
</form>

Tip: In some browsers you may need to activate an autocomplete

function for this to work (Look under "Preferences" in the browser's
menu).

HTML Input form Attributes

This section describes the different form attributes for the
HTML <input> element.

104
The form Attribute
The input form attribute specifies the form the <input> element belongs to.

The value of this attribute must be equal to the id attribute of the <form>
element it belongs to.

Example
An input field located outside of the HTML form (but still a part of the
form):

<form action="/action_page.php" id="form1">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
</form>

<label for="lname">Last name:</label>

The formaction Attribute

The input formaction attribute specifies the URL of the file that will process
the input when the form is submitted.

Note: This attribute overrides the action attribute of the <form> element.

The formaction attribute works with the following input types: submit and
image.

Example
An HTML form with two submit buttons, with different actions:

<form action="/action_page.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">

105
<input type="submit" formaction="/action_page2.php" value="Submit
as Admin">
</form>

The formenctype Attribute

The input formenctype attribute specifies how the form-data should be
encoded when submitted (only for forms with method="post").

Note: This attribute overrides the enctype attribute of the <form> element.

The formenctype attribute works with the following input types: submit and
image.

Example
A form with two submit buttons. The first sends the form-data with
default encoding, the second sends the form-data encoded as
"multipart/form-data":

<form action="/action_page_binary.asp" method="post">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="submit" value="Submit">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
</form>

The formmethod Attribute

The input formmethod attribute defines the HTTP method for sending form-
data to the action URL.

Note: This attribute overrides the method attribute of the <form> element.

The formmethod attribute works with the following input types: submit and
image.

The form-data can be sent as URL variables (method="get") or as an

HTTP post transaction (method="post").

Notes on the "get" method:

106
 This method appends the form-data to the URL in name/value pairs
 This method is useful for form submissions where a user want to
bookmark the result
 There is a limit to how much data you can place in a URL (varies
between browsers), therefore, you cannot be sure that all of the
form-data will be correctly transferred
 Never use the "get" method to pass sensitive information!
(password or other sensitive information will be visible in the
browser's address bar)

Notes on the "post" method:

 This method sends the form-data as an HTTP post transaction

 Form submissions with the "post" method cannot be bookmarked
 The "post" method is more robust and secure than "get", and "post"
does not have size limitations

Example
A form with two submit buttons. The first sends the form-data with
method="get". The second sends the form-data with method="post":

<form action="/action_page.php" method="get">

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit using GET">
<input type="submit" formmethod="post" value="Submit using POST">
</form>

The formtarget Attribute

The input formtarget attribute specifies a name or a keyword that indicates
where to display the response that is received after submitting the form.

Note: This attribute overrides the target attribute of the <form> element.

The formtarget attribute works with the following input types: submit and
image.

Example

107
A form with two submit buttons, with different target windows:

The formnovalidate Attribute

The input formnovalidate attribute specifies that an <input> element
should not be validated when submitted.

Note: This attribute overrides the novalidate attribute of

the <form> element.

The formnovalidate attribute works with the following input types: submit.

Example
A form with two submit buttons (with and without validation):

<form action="/action_page.php">
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
<input type="submit" formnovalidate="formnovalidate"
value="Submit without validation">
</form>

The novalidate Attribute

The novalidate attribute is a <form> attribute.

When present, novalidate specifies that all of the form-data should not be
validated when submitted.

108
Example
Specify that no form-data should be validated on submit:

<form action="/action_page.php" novalidate>

<label for="email">Enter your email:</label>
<input type="email" id="email" name="email"><br><br>
<input type="submit" value="Submit">
</form>

HTML Versus XHTML

XHTML is a stricter, more XML-based version of HTML.

What is XHTML?
 XHTML stands for EXtensible HyperText Markup Language
 XHTML is a stricter, more XML-based version of HTML
 XHTML is HTML defined as an XML application
 XHTML is supported by all major browsers

Why XHTML?
XML is a markup language where all documents must be marked up
correctly (be "well-formed").

XHTML was developed to make HTML more extensible and flexible to work
with other data formats (such as XML). In addition, browsers ignore
errors in HTML pages, and try to display the website even if it has some
errors in the markup. So XHTML comes with a much stricter error
handling.

The Most Important Differences from

HTML
 <!DOCTYPE> is mandatory
 The xmlns attribute in <html> is mandatory
 <html>, <head>, <title>, and <body> are mandatory

109
 Elements must always be properly nested
 Elements must always be closed
 Elements must always be in lowercase
 Attribute names must always be in lowercase
 Attribute values must always be quoted
 Attribute minimization is forbidden

110
Chapter 2: XML
Introduction to XML
XML is a software- and hardware-independent tool for storing and
transporting data.

What is XML?
 XML stands for eXtensible Markup Language
 XML is a markup language much like HTML
 XML was designed to store and transport data
 XML was designed to be self-descriptive
 XML is a W3C Recommendation

XML Does Not DO Anything

Maybe it is a little hard to understand, but XML does not DO anything.

This note is a note to Tove from Jani, stored as XML:

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

The XML above is quite self-descriptive:

 It has sender information.

 It has receiver information
 It has a heading
 It has a message body.

But still, the XML above does not DO anything. XML is just information
wrapped in tags.

111
Someone must write a piece of software to send, receive, store, or
display it:

Note
To: Tove

From: Jani

Reminder
Don't forget me this weekend!

The Difference Between XML and HTML

XML and HTML were designed with different goals:

 XML was designed to carry data - with focus on what data is

 HTML was designed to display data - with focus on how data looks
 XML tags are not predefined like HTML tags are

XML Does Not Use Predefined Tags

The XML language has no predefined tags.

The tags in the example above (like <to> and <from>) are not defined in
any XML standard. These tags are "invented" by the author of the XML
document.

HTML works with predefined tags like <p>, <h1>, <table>, etc.

With XML, the author must define both the tags and the document
structure.

XML is Extensible
Most XML applications will work as expected even if new data is added (or
removed).

112
Imagine an application designed to display the original version of
note.xml (<to> <from> <heading> <body>).

Then imagine a newer version of note.xml with added <date> and

<hour> elements, and a removed <heading>.

The way XML is constructed, older version of the application can still
work:

<note>
<date>2015-09-01</date>
<hour>08:30</hour>
<to>Tove</to>
<from>Jani</from>
<body>Don't forget me this weekend!</body>
</note>

Old Version

Note
To: Tove

From: Jani

Reminder
Don't forget me this weekend!

New Version

Note
To: Tove

From: Jani

Date: 2015-09-01 08:30

Don't forget me this weekend!

113
XML Simplifies Things
 It simplifies data sharing
 It simplifies data transport
 It simplifies platform changes
 It simplifies data availability

Many computer systems contain data in incompatible formats. Exchanging

data between incompatible systems (or upgraded systems) is a time-
consuming task for web developers. Large amounts of data must be
converted, and incompatible data is often lost.

XML stores data in plain text format. This provides a software- and
hardware-independent way of storing, transporting, and sharing data.

XML also makes it easier to expand or upgrade to new operating systems,

new applications, or new browsers, without losing data.

With XML, data can be available to all kinds of "reading machines" like
people, computers, voice machines, news feeds, etc.

XML Tree
XML documents form a tree structure that starts at "the root" and
branches to "the leaves".

114
XML Tree Structure

An Example XML Document

The image above represents books in this XML:

<?xml version="1.0" encoding="UTF-8"?>

<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="web">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>

115
</book>
</bookstore>

XML Tree Structure

XML documents are formed as element trees.

An XML tree starts at a root element and branches from the root
to child elements.

All elements can have sub elements (child elements):

The terms parent, child, and sibling are used to describe the relationships
between elements.

Parents have children. Children have parents. Siblings are children on the
same level (brothers and sisters).

All elements can have text content (Harry Potter) and attributes
(category="cooking").

Self-Describing Syntax
XML uses a much self-describing syntax.

A prolog defines the XML version and the character encoding:

<?xml version="1.0" encoding="UTF-8"?>

The next line is the root element of the document:

The next line starts a <book> element:

116
The <book> elements have 4 child elements: <title>, <author>,
<year>, <price>.

<title lang="en">Everyday Italian</title>

<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>

The next line ends the book element:

</book>

117
Chapter 3: CSS
Introduction to 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

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.

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

119
</body>
</html>

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!

120
CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties.

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.

Tip: You can define a border for nearly all HTML elements.

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

Link to External CSS

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

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

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

ss">

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

Section Summary
 Use the HTML style attribute for inline styling
 Use the HTML <style> element to define internal CSS
 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

Exercise:
Use CSS to set the background color of the document (body) to yellow.

<!DOCTYPE html>
<html>
<head>
<style>
123
:yellow;

</style>
</head>
<body>

<h1>My Home Page</h1>

</body>
</html>

124
Chapter 4: JavaScript
Introduction to Javascript
JavaScript makes HTML pages more dynamic and interactive.

The HTML <script> Tag

The HTML <script> tag is used to define a client-side script (JavaScript).

The <script> element either contains script statements, or it points to an

external script file through the src attribute.

Common uses for JavaScript are image manipulation, form validation, and
dynamic changes of content.

To select an HTML element, JavaScript most often uses

the document.getElementById() method.

This JavaScript example writes "Hello JavaScript!" into an HTML element

with id="demo":

Example
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

A Taste of JavaScript
Here are some examples of what JavaScript can do:

Example
JavaScript can change content:

document.getElementById("demo").innerHTML = "Hello JavaScript!";

125
Example
JavaScript can change styles:

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

Example
JavaScript can change attributes:

document.getElementById("image").src = "picture.gif";

The HTML <noscript> Tag

The HTML <noscript> tag defines an alternate content to be displayed to
users that have disabled scripts in their browser or have a browser that
doesn't support scripts:

Example
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support
JavaScript!</noscript>

126

Complete Practical Exercises HTML, CSS & JS
80% (5)
Complete Practical Exercises HTML, CSS & JS
12 pages
HTML
0% (1)
HTML
22 pages
HTML Notes by HEERA
No ratings yet
HTML Notes by HEERA
111 pages
Search Engine Optimization Project Report
No ratings yet
Search Engine Optimization Project Report
15 pages
Service Manual Konica 1015
50% (2)
Service Manual Konica 1015
24 pages
HTML - Note
100% (1)
HTML - Note
8 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
CSS Manual
No ratings yet
CSS Manual
88 pages
Introduction To Web Technology: Unit 3 HTML
No ratings yet
Introduction To Web Technology: Unit 3 HTML
49 pages
HTML Practical Handbook
100% (1)
HTML Practical Handbook
15 pages
HTML Complete Tutorial
No ratings yet
HTML Complete Tutorial
192 pages
Project On HTML
100% (1)
Project On HTML
15 pages
Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by
100% (1)
Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by
12 pages
HTML Cheat Sheet
No ratings yet
HTML Cheat Sheet
2 pages
HTML (BScCsit 5th Semester)
No ratings yet
HTML (BScCsit 5th Semester)
59 pages
HTML - Lab Activities
No ratings yet
HTML - Lab Activities
11 pages
Front End Development: HTML Documents
No ratings yet
Front End Development: HTML Documents
42 pages
Chapter 04 PHP and Mysql
No ratings yet
Chapter 04 PHP and Mysql
49 pages
HTML Tutorial
No ratings yet
HTML Tutorial
101 pages
Unit - 3 Cascading Style Sheets (CSS) : Web Technology
No ratings yet
Unit - 3 Cascading Style Sheets (CSS) : Web Technology
43 pages
Introduction To HTML5
100% (1)
Introduction To HTML5
23 pages
Lab WorkBook and Activity HTML CSS JavaS PDF
No ratings yet
Lab WorkBook and Activity HTML CSS JavaS PDF
64 pages
Web Lab Manual-CSE 2018-19
No ratings yet
Web Lab Manual-CSE 2018-19
49 pages
HTML Tutorials - I-Tech Software Education
100% (1)
HTML Tutorials - I-Tech Software Education
50 pages
ICT Lab Manual - Lab Experiment Complete
No ratings yet
ICT Lab Manual - Lab Experiment Complete
58 pages
Chapter 2 Introduction To HTML
No ratings yet
Chapter 2 Introduction To HTML
84 pages
WEB TECH Lab Manual
No ratings yet
WEB TECH Lab Manual
64 pages
HTML
No ratings yet
HTML
76 pages
SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
No ratings yet
SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
8 pages
HTML
No ratings yet
HTML
138 pages
HTML Css W3schools
No ratings yet
HTML Css W3schools
54 pages
What Is HTML
100% (1)
What Is HTML
181 pages
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
No ratings yet
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
98 pages
Dheeraj Vasisth HTML PracticaL
No ratings yet
Dheeraj Vasisth HTML PracticaL
23 pages
Introduction To Web Design and Programming
No ratings yet
Introduction To Web Design and Programming
25 pages
HTML Assignment
100% (1)
HTML Assignment
14 pages
Introducing HTML
No ratings yet
Introducing HTML
431 pages
Exp - 1 - HTML - Lab Manual
No ratings yet
Exp - 1 - HTML - Lab Manual
8 pages
HTML Css For Practice of Forms
No ratings yet
HTML Css For Practice of Forms
33 pages
HTML Notes
No ratings yet
HTML Notes
29 pages
HTML Question Answers
No ratings yet
HTML Question Answers
8 pages
Web Lab Programs
No ratings yet
Web Lab Programs
56 pages
Lecture 1 HTML & Css
No ratings yet
Lecture 1 HTML & Css
92 pages
Web Design & Development: Week 02 by Shakeel Ahmad
No ratings yet
Web Design & Development: Week 02 by Shakeel Ahmad
94 pages
HTML Tags Chart: Tag Name Code Example Browser View
No ratings yet
HTML Tags Chart: Tag Name Code Example Browser View
11 pages
Microsoft 98-381
No ratings yet
Microsoft 98-381
80 pages
Sample Master HTML and CSS Along With 100 Projects
No ratings yet
Sample Master HTML and CSS Along With 100 Projects
4 pages
HTML Slides
100% (3)
HTML Slides
104 pages
Css Intro2023
100% (1)
Css Intro2023
29 pages
HTML 5
0% (1)
HTML 5
110 pages
CSS Notes
No ratings yet
CSS Notes
38 pages
Web Programming Lab Manual
No ratings yet
Web Programming Lab Manual
57 pages
HTML5 Introduction by W3Schools
No ratings yet
HTML5 Introduction by W3Schools
3 pages
Visual Basic Notes
No ratings yet
Visual Basic Notes
115 pages
W3schools: CSS Attribute Selectors
No ratings yet
W3schools: CSS Attribute Selectors
5 pages
MCQ Bank HTML Download
No ratings yet
MCQ Bank HTML Download
13 pages
CPC06 Advance Web Development2
No ratings yet
CPC06 Advance Web Development2
36 pages
Audio & Video HTML
No ratings yet
Audio & Video HTML
218 pages
HTML Intro
No ratings yet
HTML Intro
137 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
Html4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
No ratings yet
Html4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML
10 pages
The Four Layers of The SEO Model: by SEO Expert Steve Wiideman
No ratings yet
The Four Layers of The SEO Model: by SEO Expert Steve Wiideman
35 pages
MS Word 03 Shortcut Keys
No ratings yet
MS Word 03 Shortcut Keys
6 pages
Ch 04 CSS Notes
No ratings yet
Ch 04 CSS Notes
107 pages
L-11 CRM Domestic Voice 661 Theory
No ratings yet
L-11 CRM Domestic Voice 661 Theory
20 pages
What Is The Internet
No ratings yet
What Is The Internet
17 pages
Web Technology Complete Notes
No ratings yet
Web Technology Complete Notes
228 pages
Q4 Elem ICT 6 Week 8889
No ratings yet
Q4 Elem ICT 6 Week 8889
4 pages
7085 Solution
No ratings yet
7085 Solution
87 pages
Unit Title Presentation Unit Summary: Unit Plan (Information Technology)
No ratings yet
Unit Title Presentation Unit Summary: Unit Plan (Information Technology)
5 pages
Quick Start Guide V2.3.0
No ratings yet
Quick Start Guide V2.3.0
33 pages
Emtech Lesson 5 Advanced Presentation Skills-1
No ratings yet
Emtech Lesson 5 Advanced Presentation Skills-1
8 pages
AngularJS Notes
No ratings yet
AngularJS Notes
37 pages
Front Page Marquee
No ratings yet
Front Page Marquee
5 pages
Sap Office
No ratings yet
Sap Office
3 pages
ScholarOne-Manuscripts-Reviewer-Guide
No ratings yet
ScholarOne-Manuscripts-Reviewer-Guide
30 pages
Differences Between Hypertext, Hypermedia and Multimedia
90% (20)
Differences Between Hypertext, Hypermedia and Multimedia
7 pages
Impact of Accessibility On Technical Writing - PPT by Qais Mujeeb
No ratings yet
Impact of Accessibility On Technical Writing - PPT by Qais Mujeeb
32 pages
Niagara Browser Access Guide
No ratings yet
Niagara Browser Access Guide
126 pages
Gurak ch13
No ratings yet
Gurak ch13
23 pages
Internet and World Wide Web
0% (1)
Internet and World Wide Web
13 pages
ASP Netcustomized
No ratings yet
ASP Netcustomized
514 pages
Hyper Links Lecture
No ratings yet
Hyper Links Lecture
9 pages
CorelDraw Pagemaker Photoshop 7.0
No ratings yet
CorelDraw Pagemaker Photoshop 7.0
139 pages
Quiz HTML CSS
No ratings yet
Quiz HTML CSS
11 pages
[Ebooks PDF] download Linked Data for the Perplexed Librarian ALCTS Monograph 1st Edition Scott Carlson full chapters
100% (1)
[Ebooks PDF] download Linked Data for the Perplexed Librarian ALCTS Monograph 1st Edition Scott Carlson full chapters
52 pages
Book Creator For Ipad Tutorial
100% (1)
Book Creator For Ipad Tutorial
39 pages
OAF Personalization Training Document
100% (1)
OAF Personalization Training Document
37 pages