0% found this document useful (0 votes)

244 views218 pages

Audio & Video HTML

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. It uses tags to define elements like headings, paragraphs, links, images and more. A basic HTML document structure includes an <html> tag to define the root element, <head> for metadata, and <body> to contain the visible page content. Common elements include <h1>-<h6> headings, <p> paragraphs, and <a> links. The <!DOCTYPE> declaration identifies the document as HTML.

Uploaded by

Raj Computer Academy Vasai West

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

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

244 views218 pages

Audio & Video HTML

Uploaded by

Raj Computer Academy Vasai West

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

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 218

HTML is the standard markup language for creating Web pages.

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

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

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

</body>
</html>

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

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>

Start tag Element content

<h1> My First Heading

<p> My first paragraph.

<br> none

<p>My first paragraph.</p>

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

1989 Tim Berners-Lee invented www

1991 Tim Berners-Lee invented HTML

1993 Dave Raggett drafted HTML+

1995 HTML Working Group defined HTML 2.0

1997 HTML 3.2

1999 HTML 4.01

2000 XHTML 1.0

2008 WHATWG HTML5 First Public Draft

2012 WHATWG HTML5 Living Standard

HTML History
Since the early days of the World Wide Web, there have been many
versions of HTML:
This tutorial follows the latest HTML5 standard.

Learn HTML Using Notepad or TextEdit

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

However, for learning HTML we recommend a simple text editor like

Notepad (PC) or TextEdit (Mac).

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

2014 HTML5

2016 HTML 5.1

2017 HTML5.1 2nd Edition

2017 HTML5.2

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

Step 1: Open Notepad (PC)

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your
screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)
Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files

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

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

Then open a new document to place the code.

Step 2: Write Some HTML

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>

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

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:

With our free online editor, you can edit the HTML code and view the
result in your browser.

It is the perfect tool when you want to test code fast. It also has color
coding and the ability to save and share code with others:
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

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

</body>
</html>
In this chapter we will show some basic HTML examples.

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

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

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

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

EXAMPLE
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>

THE <!DOCTYPE> DECLARATION

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

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

The <!DOCTYPE> declaration is not case sensitive.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

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

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

EXAMPLE
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML PARAGRAPHS
HTML paragraphs are defined with the <p> tag:
EXAMPLE
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML LINKS
HTML links are defined with the <a> tag:

EXAMPLE
<a href="https://www.googles.com">This is a link</a>

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

Attributes are used to provide additional information about HTML

elements.

You will learn more about attributes in a later chapter.

HTML IMAGES
HTML images are defined with the <img> tag.

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

EXAMPLE
<img src="googles.jpg" alt="Googles.com" width="104" height="142">

HOW TO VIEW HTML SOURCE?

Have you ever seen a Web page and wondered "Hey! How did they do
that?"
VIEW HTML SOURCE CODE:
Right-click in an HTML page and select "View Page Source" (in Chrome)
or "View Source" (in Edge), or similar in other browsers. This will open a
window containing the HTML source code of the page.

INSPECT AN HTML ELEMENT:

Right-click on an element (or a blank area), and choose "Inspect" or
"Inspect Element" to see what elements are made up of (you will see both
the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the
Elements or Styles panel that opens.

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

HTML ELEMENTS
The HTML element is everything from the start tag to the end tag:

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

Examples of some HTML elements:

<h1>My First Heading</h1>

Start tag Element content

<h1> My First Heading

<p> My first paragraph.

<br> NONE

<p>My first paragraph.</p>

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!

NESTED HTML ELEMENTS

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

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements

(<html>, <body>, <h1> and <p>):

EXAMPLE
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
EXAMPLE EXPLAINED
The <html> element is the root element and it defines the whole HTML
document.

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

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

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

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

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

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

<h1>My First Heading</h1>

<p>My first paragraph.</p>

The <h1> element defines a heading.

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

<h1>My First Heading</h1>

The <p> element defines a paragraph.

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

<p>My first paragraph.</p>

NEVER SKIP THE END TAG

Some HTML elements will display correctly, even if you forget the end
tag:
EXAMPLE
<html>
<body>

<p>This is a paragraph
<p>This is a paragraph

</body>
</html>

However, never rely on this! Unexpected results and errors may

occur if you forget the end tag!

EMPTY HTML ELEMENTS

HTML elements with no content are called empty elements.

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

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

HTML IS NOT CASE SENSITIVE

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

The HTML standard does not require lowercase tags, but

C recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML.

At Googles we always use lowercase tag names.

HTML TAG REFERENCE

Tag Description

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

Googles' tag reference contains additional information about these tags

and their attributes.

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.googles.com">Visit Googles</a>

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

THE SRC ATTRIBUTE

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

EXAMPLE
<img src="img_girl.jpg">

There are two ways to specify the URL in the src attribute:

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

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

Notes: External images might be under copyright. If you do not get

permission to use it, you may be in violation of copyright laws. In addition,
you cannot control external images; it can suddenly be removed or changed.

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

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

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

THE WIDTH AND HEIGHT ATTRIBUTES

The <img> tag should also contain the width and height attributes, which
specifies the width and height of the image (in pixels):
EXAMPLE
<img src="img_girl.jpg" width="500" height="600">

THE ALT ATTRIBUTE

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

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

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

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

You will learn more about images in our HTML Images chapter.

THE STYLE ATTRIBUTE

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

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

You will learn more about styles in our HTML Styles chapter.
THE LANG ATTRIBUTE
You should always include the lang attribute inside the <html> tag, to
declare the language of the Web page. This is meant to assist search
engines and browsers.

The following example specifies English as the language:

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

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

The following example specifies English as the language and United

States as the country:

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

You can see all the language codes in our HTML Language Code
Reference.
THE TITLE ATTRIBUTE
The title attribute defines some extra information about an element.

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

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

WE SUGGEST: ALWAYS USE LOWERCASE ATTRIBUTES

The HTML standard does not require lowercase attribute names.

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

However, C recommends lowercase attributes in HTML, and

demands lowercase attributes for stricter document types like XHTML.

At Googles we always use lowercase attribute names.

WE SUGGEST: ALWAYS QUOTE ATTRIBUTE VALUES

The HTML standard does not require quotes around attribute values.

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

stricter document types like XHTML.

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

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

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

EXAMPLE
<p title=About Googles>

At Googles we always use quotes around attribute values.

SINGLE OR DOUBLE QUOTES?

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

In some situations, when the attribute value itself contains double quotes,
it is necessary to use single quotes: <p title='John "ShotGun" Nelson'>

Or vice versa:

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

CHAPTER 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 EXERCISES
Top of Form

TEST YOURSELF WITH EXERCISES

EXERCISE:
Add a "tooltip" to the paragraph below with the text "About Googles".

<p ="About Googles">Googles is a web developer's

site.</p>

Submit Answer »

Start the Exercise

Bottom of Form

HTML ATTRIBUTE REFERENCE

A complete list of all attributes for each HTML element, is listed in our:
HTML
Attribute Reference.

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>

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

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

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

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

TEXT SIZE
The CSS font-size property defines the text size for an HTML element:
EXAMPLE
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

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

EXAMPLE
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

HTML FORMATTING ELEMENTS

Formatting elements were designed to display special types of text:

● <b> - Bold text

● <strong> - Important text
● <i> - Italic text
● <em> - Emphasized text
● <mark> - Marked text
● <small> - Smaller text
● <del> - Deleted text
● <ins> - Inserted text
● <sub> - Subscript text
● <sup> - Superscript text

HTML <B> AND <STRONG> ELEMENTS

The HTML <b> element defines bold text, without any extra importance.
EXAMPLE
<b>This text is bold</b>

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

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

HTML <I> AND <EM> ELEMENTS

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

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

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

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

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

EXAMPLE
<em>This text is emphasized</em>
HTML <SMALL> ELEMENT
The HTML <small> element defines smaller text:

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

HTML <MARK> ELEMENT

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

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

HTML <DEL> ELEMENT

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

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 H O:
2

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

HTML <SUP> ELEMENT

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

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

HTML <BLOCKQUOTE> FOR QUOTATIONS

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

Browsers usually indent <blockquote> elements.

EXAMPLE
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported
by 1.2 million members in the United States
and close to 5 million globally.
</blockquote>
HTML <Q> FOR SHORT QUOTATIONS
The HTML <q> tag defines a short quotation.

Browsers normally insert quotation marks around the quotation.

EXAMPLE
<p>WWF's goal is to: <q>Build a future where people live in harmony
with nature.</q></p>

HTML <ABBR> FOR ABBREVIATIONS

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",
"CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation

systems and search-engines.

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

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

HTML <ADDRESS> FOR CONTACT INFORMATION

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

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

phone number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers
will always add a line break before and after the <address> element.

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

HTML <CITE> FOR WORK TITLE

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

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

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

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

HTML <BDO> FOR BI-DIRECTIONAL OVERRIDE

BDO stands for Bi-Directional Override.

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

EXAMPLE
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML COMMENT TAG
You can add comments to your HTML source by using the following
syntax:

Notice that there is an exclamation point (!) in the start tag, but not in
the end tag.
Note: Comments are not displayed by the browser, but they can help
document your HTML source code.

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

EXAMPLE

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

HIDE CONTENT
Comments can be used to hide content.

Which can be helpful if you hide content temporarily:

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

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

You can also hide more than one line, everything between the  will be hidden from the display.
EXAMPLE
Hide a section of HTML code:

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

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

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

HIDE INLINE CONTENT

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

EXAMPLE
Hide a part of a paragaph:

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

HTML COLORS

HTML colors are specified with predefined color names, or with RGB,
HEX, HSL, RGBA, or HSLA values.
COLOR NAMES
In HTML, a color can be specified by using a color name:
Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

LightGray

HTML supports 140 standard color names.

BACKGROUND COLOR
You can set the background color for HTML elements:

Hello World

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

EXAMPLE
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
TEXT COLOR
You can set the color of text:

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

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

suscipit lobortis nisl ut aliquip ex ea commodo consequat.

EXAMPLE
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

BORDER COLOR
You can set the color of borders:

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:

The following two <div>rgb(255,

elements have
99,their
71) background color set with
RGBA
#ff6347

hsl(9, 100%, 64%)

and HSLA values, which adds an Alpha channel to the color (here we have
50% transparency):

rgba(255, 99, 71, 0.5)

hsla(9, 100%, 64%, 0.5)

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

CSS stands for Cascading Style Sheets.
CSS saves a lot of work. It can control the layout of multiple web
pages all at once.

CSS = STYLES AND COLORS

Manipulate Text

Colors, Boxes

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

With CSS, you can control the color, font, the size of text, the spacing
between elements, how elements are positioned and laid out, what
background images or background colors are to be used, different displays
for different devices and screen sizes, and much more!
Tip: The word cascading means that a style applied to a parent element
will
also apply to all children elements within the parent. So, if you set the
color
of the body text to "blue", all headings, paragraphs, and other text
elements
within the body will also get the same color (unless you specify something
else)!

USING CSS
CSS can be added to HTML documents in 3 ways:

● Inline - by using the style attribute inside HTML elements

● Internal - by using a <style> element in the <head> section
● External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS
files. However, in this tutorial we will use inline and internal styles, because
this is easier to demonstrate, and easier for you to .

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

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

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

EXAMPLE
<h1 style="color:blue;">A Blue

Heading</h1> <p style="color:red;">A red

paragraph.</p>

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

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

within a <style> element.

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

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

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

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!

CSS COLORS, FONTS AND SIZES

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

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

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

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

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

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

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

</body>
</html>

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

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

EXAMPLE
Use of CSS border property:

p {
border: 2px solid powderblue;
}

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

EXAMPLE
Use of CSS border and padding properties:

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

CSS MARGIN
The CSS margin property defines a margin (space) outside the border.
EXAMPLE
Use of CSS border and margin properties:

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

LINK TO EXTERNAL CSS

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

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

<link rel="stylesheet" href="https://www.

schools.com/html/styles.css">

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

Try it Yourself
»

EXAMPLE

HTML LINKS
Links are found in nearly all web pages. Links allow users to click their
way from page to page.
HTML LINKS - HYPERLINKS
HTML links are hyperlinks.

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

When you move the mouse over a link, the mouse arrow will turn into a
little hand.
Note: A link does not have to be text. A link can be an image or any other
HTML element!

HTML LINKS - SYNTAX

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

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

The most important attribute of the <a> element is the href attribute,
which indicates the link's destination.

The LINK TEXT is the part that will be visible to the reader.

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

EXAMPLE
This example shows how to create a link to Schools.com:

<a href="https://www. schools.com/">Visit Schools.com!</a>

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

● An unvisited link is underlined and blue

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

Tip: Links can of course be styled with CSS, to get another look!
HTML LINKS - THE TARGET ATTRIBUTE
By default, the linked page will be displayed in the current browser
window. To change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

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

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

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

<a href="https://www. schools.com/" target="_blank">Visit

Schools!</a>

ABSOLUTE URLS VS. RELATIVE URLS

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

A local link (a link to a page within the same website) is specified

with a relative URL (without the "https://www" part):

EXAMPLE
<h2>Absolute URLs</h2>
<p><a href="https://www. .org/"> C</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.

JavaScript allows you to specify what happens at certain events, such as

a click of a button:

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

Tip: Learn more about JavaScript in our JavaScript Tutorial.

LINK TITLES
The title attribute specifies extra information about an element. The
information is most often shown as a tooltip text when the mouse moves
over the element.

EXAMPLE
<a href="https://www. schools.com/html/" title="Go to
Schools
HTML section">Visit our HTML Tutorial</a>

MORE ON ABSOLUTE URLS AND RELATIVE URLS

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

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

tutorial</a>

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

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

Try it Yourself
»

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

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

HTML LINKS - DIFFERENT COLORS

An HTML link is displayed in a different color depending on whether it
has been visited, is unvisited, or is active.

HTML LINK COLORS

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

● An unvisited link is underlined and blue

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

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

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

<style> a:link { color:

green; background-color:
transparent; text-decoration:
none;
}

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

a:hover, a:active { background-

color: red;
}
</style>

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

HTML LINK TAGS

HTML IMAGES
Tag Description

<a> Defines a hyperlink

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

EXAMPLE
<img src="pic_trulli.jpg" alt="Italian Trulli">

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

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

HTML IMAGES SYNTAX

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

Images are not technically inserted into a web page; images are linked to
web pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a
closing tag.

The <img> tag has two required attributes:

● src - Specifies the path to the image

● alt - Specifies an alternate text for the image

SYNTAX
<img src="url" alt="ALTERNATETEXT">
THE SRC ATTRIBUTE
The required src attribute specifies the path (URL) to the image.

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

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

THE ALT ATTRIBUTE

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

The value of the alt attribute should describe the image:

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

If a browser cannot find an image, it will display the value

of the alt attribute:

EXAMPLE
<img src="wrongname.gif" alt="Flowers in Chania">
Tip: A screen reader is a software program that reads the HTML code, and
allows the user to "listen" to the content. Screen readers are useful for
people who are visually impaired or learning disabled.

IMAGE SIZE - WIDTH AND HEIGHT

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

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

Alternatively, you can use the width and height attributes:

EXAMPLE
<img src="img_girl.jpg" alt="Girl in a
jacket" width="500" height="600">

The width and height attributes always define the width and height of the
image in pixels.
Note: Always specify the width and height of an image. If width and height
are not specified, the web page might flicker while the image loads.

WIDTH AND HEIGHT, OR STYLE?

The width, height, and style attributes are all valid in HTML.
However, we suggest using the style attribute. It prevents styles sheets
from changing the size of images:

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

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

<img src="html5.gif" alt="HTML5 Icon"

style="width:128px;height:128px;">

</body>
</html>

IMAGES IN ANOTHER FOLDER

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

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

IMAGES ON ANOTHER SERVER/WEBSITE

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

EXAMPLE
<img src="https://www. schools.com/images/
schools_green.jpg" alt=" Schools.com">

Notes on external images: External images might be under copyright.

If you do not get permission to use it, you may be in violation of copyright
laws. In addition, you cannot control external images; it can suddenly be
removed or changed.
ANIMATED IMAGES
HTML allows animated GIFs:

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

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

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

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

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

APNG Animated Portable Network Graphics .apng

GIF Graphics Interchange Format .gif

ICO Microsoft Icon .ico, .cur

.jpg, .jpe
JPEG Joint Photographic Expert Group image
g,

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

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

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

COMMON IMAGE FORMATS

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

PNG Portable Network Graphics .png

SVG Scalable Vector Graphics .svg

With HTML image maps, you can create clickable areas on an image.

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

Try to click on the computer, phone, or the cup of coffee in the image
below:
EXAMPLE
Here is the HTML source code for the image map above:

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

HOW DOES IT WORK?

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

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

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

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

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

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

CREATE IMAGE MAP
Then, add a <map> element.

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

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

THE AREAS
Then, add the clickable areas.

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

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

● rect - defines a rectangular region

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

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

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

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

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

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

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

SHAPE="CIRCLE"
To add a circle area, first locate the coordinates of the center of the
circle:

337,300
Then specify the radius of the circle:

44 pixels

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

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

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

SHAPE="POLY"
The shape="poly" contains several coordinate points, which creates a
shape formed with straight lines (a polygon).

This can be used to create any shape.

Like maybe a croissant shape!

How can we make the croissant in the image below become a clickable
link?
We have to find the x and y coordinates for all edges of the croissant:
The coordinates come in pairs, one for the x-axis and one for the y-axis:

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

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

A background image can be specified for almost any HTML element.

BACKGROUND IMAGE ON A HTML ELEMENT
To add a background image on an HTML element, use the
HTML style attribute and the CSS background-image
property:

EXAMPLE
Add a background image on a HTML element:

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

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

EXAMPLE
Specify the background image in the <style> element:

BACKGROUND IMAGE ON A PAGE

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

EXAMPLE
Add a background image for the entire page:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
BACKGROUND REPEAT
If the background image is smaller than the element, the image will
repeat itself, horizontally and vertically, until it reaches the end of the
element:

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

To avoid the background image from repeating itself,

set the background-repeat property to no-repeat.

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

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

Also, to make sure the entire element is always covered,

set the background-attachment property to fixed:

This way, the background image will cover the entire element, with no
stretching (the image will keep its original proportions):
EXAMPLE
<style> body { background-image:
url('img_girl.jpg'); background-
repeat: no-repeat; background-
attachment: fixed; background-size:
cover;
}
</style>

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

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

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

HTML TABLES

HTML tables allow web developers to arrange data into rows and
columns.
EXAMPLE

Company Contact

Alfreds Futterkiste Maria Anders

Centro comercial Moctezuma Francisco Chang

Ernst Handel Roland Mendel

Island Trading Helen Bennett

Laughing Bacchus Winecellars Yoshi Tannamuri

Magazzini Alimentari Riuniti Giovanni Rovelli

Try it Yourself »

DEFINE AN HTML TABLE

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

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

VIDEO INTRODUCTION TO HTML TABLES

We have made a video tutorial that covers all the basics of HTML - in a
new fun format :-}
Watch the chapter about HTML Tables for free!

Subscribe to PRO for $4.99/month to access the full video with 22

chapters!

You also unlock powerful features, such as Schools ad-free and

website hosting, and you can cancel the subscription at any time.

See the full details here.

TABLE CELLS
Each table cell is defined by a <td> and a </td>

tag. td stands for table data.

Everything between <td> and </td> are the content of the table cell.
EXAMPLE
<table>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
</table>
Note: table data elements are the data containers of the table.
They can contain all sorts of HTML elements; text, images, lists, other
tables,
etc.

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

tr stands for table row.

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

You can have as many rows as you like in a table, just make sure that the
number of cells are the same in each row.
Note: There are times where a row can have less or more cells than
another.
You will learn about that in a later chapter.

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

EXAMPLE
Let the first row be table headers:
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>

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

HTML EXERCISES
Top of Form
TEST YOURSELF WITH EXERCISES
EXERCISE:
Add a table row with two table headers.

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

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

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

Submit Answer »

Start the Exercise

Bottom of Form
HTML TABLE TAGS

HTML TABLE BORDERS

<td> Defines a cell in a table

<caption> Defines a table caption

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

Specifies column properties for each column within a <colgroup>

<col>
eleme

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

HTML tables can have borders of different styles and shapes.

HOW TO ADD A BORDER

When you add a border to a table, you also add borders around each
table cell:
To add a border, use the CSS border property on table, th, and td
elements:

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

COLLAPSED TABLE BORDERS

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

This will make the borders collapse into a single border:

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

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

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

ROUND TABLE BORDERS

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

EXAMPLE
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
Skip the border around the table by leaving out table from the css
selector:

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

DOTTED TABLE BORDERS

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

● dotted
● dashed
● solid
● double
● groove
● ridge
● inset
● outset
● none
● hidden
EXAMPLE
th, td {
border-style: dotted;
}

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

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

HTML TABLE BORDERS

HTML tables can have borders of different styles and shapes.

HOW TO ADD A BORDER

When you add a border to a table, you also add borders around each
table cell:
To add a border, use the CSS border property on table, th, and td
elements:

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

COLLAPSED TABLE BORDERS

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

This will make the borders collapse into a single border:

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

STYLE TABLE BORDERS

If you set a background color of each cell, and give the border a white
color (the same as the document background), you get the impression of an
invisible border:
E XAMPLE
table, th, td { border:
1px solid white; border-
collapse: collapse;
} th,
td {
background-color: #96D4D4;
}

ROUND TABLE BORDERS

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

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

Skip the border around the table by leaving out table from the css
selector:
EXAMPLE
th, td {
border: 1px solid black;
border-radius: 10px;
}

DOTTED TABLE BORDERS

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

● dotted
● dashed
● solid
● double
● groove
● ridge
● inset
● outset
● none
● hidden
EXAMPLE
th, td {
border-style: dotted;
}
BORDER COLOR
With the border-color property, you can set the color of the border.

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

HTML TABLE SIZES

HTML tables can have different sizes for each column, row or the
entire table.
Use the style attribute with the width or height properties to specify
the size of a table, row or column.

HTML TABLE WIDTH

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

EXAMPLE
Set the width of the table to 100%:

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

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

HTML TABLE COLUMN WIDTH

To set the size of a specific column, add the style attribute
on a <th> or <td> element:

EXAMPLE
Set the width of the first column to 70%:

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

HTML TABLE ROW HEIGHT

To set the height of a specific row, add the style attribute on a table row
element:
EXAMPLE
Set the height of the second row to 200 pixels:

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

HTML EXERCISES
Top of Form

TEST YOURSELF WITH EXERCISES EXERCISE:

Use CSS styles to make the table 300 pixels wide.

<table >
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>

Bottom of Form

HTML TABLE HEADERS

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

EMIL TOBIAS LINUS

8:00

9:00

10:00

11:00

12:00

13:00

T
M W TH
U FRI
ON ED U
E

8:0
0

9:0
0

10:
00
11:
00

12:
00

DECEMBER

HTML TABLE HEADERS

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

EXAMPLE
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
VERTICAL TABLE HEADERS
To use the first column as table headers, define the first cell in each row
as a th element:

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

ALIGN TABLE HEADERS

By default, table headers are bold and centered:

Firstname Lastname Age

Jill Smith 50

Eve Jackson 94

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

EXAMPLE
th {
text-align: left;
}

HEADER FOR MULTIPLE COLUMNS

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

Name Age

Jill Smith 50

Eve Jackson 94

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

EXAMPLE
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
You will learn more about colspan and rowspan in the Table colspan &
rowspan chapter.
TABLE CAPTION
You can add a caption that serves as a heading for the entire table.

Monthly savings

Month Savings

January $100

February $50

HTML EXERCISES
Top of Form
TEST YOURSELF WITH EXERCISES
EXERCISE:
Add a table caption that says "Names".
<table>

<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
</table>

Bottom of Form

HTML TABLE PADDING & SPACING

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

With Padding

hello hello hello

With Spacing
hel hel hel
lo lo lo
hel hel hel
lo lo lo
hel hel hel
lo lo lo

HTML TABLE - CELL PADDING

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

By default the padding is set to 0.

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

EXAMPLE
th, td {
padding:
15px; }

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

And the others sides with the padding-bottom, padding-left,

and padding-right properties:

EXAMPLE
th, td { padding-
top: 10px; padding-
bottom: 20px;
padding-left: 30px;
padding-right: 40px;
}
HTML TABLE - CELL SPACING
Cell spacing is the space between each cell.

By default the space is set to 2 pixels.

To change the space between table cells, use the

CSS border-spacing property on the table
element:

EXAMPLE
table { border-
spacing: 30px;
}

HTML TABLE COLSPAN & ROWSPAN

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

NAME

APRIL
2022

FIESTA

HTML TABLE - COLSPAN

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

EXAMPLE
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>

HTML TABLE STYLING

Use CSS to make your tables look better.
HTML TABLE - ZEBRA STRIPES
If you add a background color on every other table row, you will get a
nice zebra stripes effect.

1 2 3 4

5 6 7 8

9 10 11 12

13 14 15 16

17 18 19 20

To style every other table row element, use the :nth-child(even)

selector like this:

EXAMPLE
<!DOCTYPE html>

<html>

<head>

<style> table { border-

collapse: collapse; width:

100%;

th, td { text-

align: left;

padding: 8px;

tr:nth-child(even) { background-

color: #D6EEEE;

}
</style>

</head>

<body>

<h2>Zebra Striped Table</h2>

<p>For zebra-striped tables, use the nth-child() selector and add a background-color to all even
(or odd) table rows:</p>

<table>

<tr>

<th>First Name</th>

<th>Points</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Griffin</td>

</tr>

<tr>

<td>Swanson</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>
<td>$250</td>

</tr>

</table>

</body>

</html>

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

HTML TABLE - VERTICAL ZEBRA STRIPES

To make vertical zebra stripes, style every other COLUMN, instead of every
other ROW.

1 2 3 4

5 6 7 8

9 10 11 12

13 14 15 16

17 18 19 20

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

EXAMPLE
<!DOCTYPE html>

<html>

<head>

<style>

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

border-collapse: collapse;

th:nth-child(even),td:nth-child(even) {

background-color: #D6EEEE;

</style>

</head>

<body>

<h2>Striped Table</h2>

<p>For zebra-striped tables, use the nth-child() selector and add a

background-color to all even (or odd) table rows:</p>

<tr>

</tr>
<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>Note: Put the :nth-child() selector on both th and td elements if

you want to have the styling on both headers and regular table cells.

COMBINE VERTICAL AND HORIZONTAL ZEBRA STRIPES

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

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

1 2 3 4
5 6 7 8
9 10 11 12
13 14 15 16
17 18 19 20
Use an rgba() color to specify the transparency of the color:

EXAMPLE
<!DOCTYPE html>

<html>

<head>
<style> table, th, td

{ border: 1px solid black;

border-collapse: collapse;

tr:nth-child(even) { background-color:

rgba(150, 212, 212, 0.4);

th:nth-child(even),td:nth-child(even) { background-

color: rgba(150, 212, 212, 0.4);

</style>

</head>

<body>

<h2>Striped Table</h2>

<p>For zebra-striped tables, use the nth-child() selector and add a

background-color to all even (or odd) table rows:</p>
<table style="width:100%">

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table> </body>

</html>
HORIZONTAL DIVIDERS
First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

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

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

dividers:

EXAMPLE
<!DOCTYPE html>

<html>

<head>
<style> table { border-

collapse: collapse; width:

100%;

}
tr { border-bottom: 1px solid

#ddd;

</style>

</head>

<body>

<h2>Bordered Table Dividers</h2>

<p>Add the border-bottom property to the tr elements for horizontal

dividers:</p>

<table>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Savings</th>

</tr>
<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Lois</td>
<td>Griffin</td>

</tr>

<tr>

<td>Swanson</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

</tr>

</table>

</body>
</html>

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

First Name Last Name Savings

Peter Griffin $100

Lois Griffin $150

Joe Swanson $300

EXAMPLE
<!DOCTYPE html>

<html>

<head> <style> table

{ border-collapse:

collapse; width: 100%;

th, td {
padding: 8px; text-align:

left; border-bottom: 1px

solid #DDD;

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

</style>

</head>

<body>

<h2>Hoverable Table</h2>
<p>Move the mouse over the table rows to see the effect.</p>

<table>

<tr>

<th>First Name</th>

<th>Points</th>

</tr>

<tr>

<td>Peter</td>

<td>Griffin</td>

</tr>

<tr>

<td>Griffin</td>
<td>$150</td>

</tr>

<tr>

<td>Swanson</td>

</tr>

<tr>

<td>Cleveland</td>

<td>Brown</td>

</tr>
</table>

</body>

</html>

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

HTML TABLE COLGROUP

If you want to style the two first columns of a table,
use the <colgroup> and <col> elements.
MON TUE WED THU FRI SAT SUN

1 2 3 4 5 6 7

8 9 10 11 12 13 14

15 16 17 18 19 20 21

22 23 24 25 26 27 28

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

specifications.

Each group are specified with a <col> element.

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

The style attribute specifies the style to give the columns.

<!DOCTYPE html>

<html>

<head>

solid black; border-

collapse: collapse;

</style>

</head>

<body>

<h2>Colgroup</h2>

<p>Add the a colgroup with a col element that spans over two columns to define a style for the
two columns:</p>

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

<col span="2" style="background-color: #D6EEEE">

</colgroup>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>
</body>

</html>

MULTIPLE COL ELEMENTS

If you want to style more columns with different styles, use
more <col> elements inside the <colgroup>:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td { border:

1px solid black;

border-collapse:

collapse;

</style>

</head>

<body>

<h2>Multiple Col Elements</h2>

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

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

<col span="2" style="background-color: #D6EEEE">

<col span="3" style="background-color: pink">

</colgroup>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table> </body>

</html>

EMPTY COLGROUPS
If you want to style columns in the middle of a table, insert a
"empty" <col> element (with no styles) for the columns before:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td { border: 1px

solid black; border-

collapse: collapse;

}
</style>

</head>

<body>

<h2>Empty Colgroups</h2>

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

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

<col span="2" style="background-color: pink">

</colgroup>

<tr>

</tr>

<tr>

</tr>
<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>
HIDE COLUMNS
You can hide columns with the visibility: collapse property:

<!DOCTYPE html>

<html>

<head>

<style>

table, th, td { border: 1px

solid black; border-

collapse: collapse;

</style>

</head>

<body>

<h2>Hide Columns</h2>

<p>You can hide specific columns with the visibility property:</p>

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

<col span="3" style="visibility: collapse">

</colgroup>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tr>

</table>

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

</html>
HTML FORMS
First name:

Last name:

An HTML form is used to collect user input. The user input is most
often sent to a server for processing
<!DOCTYPE html>

<html>

<body>

<h2>HTML Forms</h2>

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

<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>

</body>

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

All the different form elements are covered in this chapter: HTML Form
Elements.

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:

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 type="checkbox"> Displays a checkbox (for selecting zero
or more of many 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.

<!DOCTYPE html>

<html>

<body>

<h2>Text input fields</h2>

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

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of text input fields is 20 characters.</p>

</body>
</html>

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

First name:

Last name:

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 focus 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:
<!DOCTYPE html>

<html>

<body>
<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>

<input type="radio" id="html" name="fav_language" value="HTML">

<input type="radio" id="css" name="fav_language" value="CSS">

<input type="radio" id="javascript" name="fav_language" value="JavaScript">

<label for="javascript">JavaScript</label>

</form>

</body>

</html>

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

Choose your favorite Web language:

HTML

CSS

JavaScript

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:
<!DOCTYPE html>

<html>

<body>

<h2>Checkboxes</h2>

<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

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

<input type="submit" value="Submit">

</form>

</body>

</html>

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

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:
<!DOCTYPE html>

<html>

<body>

<h2>HTML Forms</h2>

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

<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>

</body>

</html>

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

First name:

Last name:
HE 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
This example will not submit the value of the "First name" input field:
<!DOCTYPE html>

<html>

<body>

<h2>The name Attribute</h2>

<label for="fname">First name:</label><br>

<input type="text" id="fname" value="John"><br><br>

<input type="submit" value="Submit">

</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>

<p>Notice that the value of the "First name" field will not be submitted, because the input element
does not have a name attribute.</p>

</body>

</html>

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:

● <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
<!DOCTYPE html>

<html>

<body>

<h2>The input Element</h2>

<label for="fname">First name:</label><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

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.

THE <SELECT> ELEMENT

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

<!DOCTYPE html>

<html>

<body>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<label for="cars">Choose a car:</label>

<option value="volvo">Volvo</option>

</select>

</form>

</body>

</html>

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

<html>

<body>

<h2>Pre-selected Option</h2>

<p>You can preselect an option with the selected attribute:</p>

<label for="cars">Choose a car:</label>

<select id="cars" name="cars">

<option value="volvo">Volvo</option>

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

</select>

</form>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h2>Visible Option Values</h2>

<p>Use the size attribute to specify the number of visible values.</p>

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="3">

<option value="volvo">Volvo</option>

</select><br><br>

</form>

</body>

</html>
ALLOW MULTIPLE SELECTIONS:
Use the multiple attribute to allow the user to select more than one value:

<!DOCTYPE html>

<html>

<body>

<h2>Allow Multiple Selections</h2>

<p>Use the multiple attribute to allow the user to select more than one value.</p>

<label for="cars">Choose a car:</label>

<select id="cars" name="cars" size="4" multiple>

<option value="volvo">Volvo</option>

</select><br><br>

</form>

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
</body>

</html>

HE <TEXTAREA> ELEMENT
The <textarea> element defines a multi-line input field (a text area):
EXAMPLE
<!DOCTYPE html>

<html>

<body>

<h2>Textarea</h2>

<p>The textarea element defines a multi-line input field.</p>

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

</form>

</body>

</html>

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:

<!DOCTYPE html>

<html>

<body>
<h2>Styling Textarea</h2>

<p>Use CSS to change the size of the textarea:</p>

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

garden.</textarea>

<br>

</form>

</body>

</html>

THE <BUTTON> ELEMENT

The <button> element defines a clickable button:

EXAMPLE
<!DOCTYPE html>

<html>

<body>

<h2>The button Element</h2>

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

</body>

</html>

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

Click Me!
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.

<!DOCTYPE html>

<html>

<body>

<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend element defines a
caption for the fieldset element.</p>

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

</body>

</html>

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

Top of Form
Personalia:First name:

Last name:

Bottom of Form

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.

<!DOCTYPE html>

<html>

<body>

<h2>The datalist Element</h2>

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

<input list="browsers" name="browser">

<option value="Internet Explorer">

</datalist>

</form>

<p><b>Note:</b> The datalist tag is not supported in Safari prior version 12.1.</p>

</body>

</html>

THE <OUTPUT> ELEMENT

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

<!DOCTYPE html>

<html>

<body>

<h2>The output Element</h2>

<p>The output element represents the result of a calculation.</p>

<input type="range" id="a" name="a" value="50">

100 +

<input type="number" id="b" name="b" value="50">

<output name="x" for="a b"></output>

</form>

<p><strong>Note:</strong> The output element is not supported in Edge prior version 13.</p>

</body>

</html>
<p>The output element represents the result of a calculation.</p>

<form action="/action_page.php" oninput="x.value=parseInt(a.value)

+parseInt(b.value)">

<input type="range" id="a" name="a" value="50">

100 +

<input type="number" id="b" name="b" value="50">

<output name="x" for="a b"></output>

</form>

<p><strong>Note:</strong> The output element is not supported in Edge prior version 13.</p>

</body>

</html>

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:

Example
<!DOCTYPE html>

<html>

<body>
<h2>Text field</h2>

<p>The <strong>input type="text"</strong> defines a one-line text

input field:</p>

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

<input type="submit" value="Submit">

</form>

<p>Note that the form itself is not visible.</p>

<p>Also note that the default width of a text field is 20 characters.</p>

</body>

</html>

Input Type Password

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

Example
<!DOCTYPE html>

<html>

<body>

<h2>Password field</h2>
<p>The <strong>input type="password"</strong> defines a password
field:</p>

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

<input type="submit" value="Submit">

</form>

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

circles).</p>

</body>

</html>

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:

<!DOCTYPE html>

<html>

<body>

<h2>Submit Button</h2>
<p>The <strong>input type="submit"</strong> defines a button for
submitting form data to a form-handler:</p>

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

<p>If you click "Submit", the form-data will be sent to a page called
"/action_page.php".</p>

</body>

</html>

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

Example
<!DOCTYPE html>

<html>

<body>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" value="John"><br>

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

</form>

</body>

</html>

Input Type Reset

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

Example
<!DOCTYPE html>

<html>

<body>

<h2>Reset Button</h2>

<p>The <strong>input type="reset"</strong> defines a reset button

that resets all form values to their default values:</p>

<label for="fname">First name:</label><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>

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

</body>

</html>

nput Type Radio

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

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

Example

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
Input Type Button
<input type="button"> defines a button:

Example

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.

<!DOCTYPE html>

<html>

<body>

<h2>Show a Color Picker</h2>

<p>The <strong>input type="color"</strong> is used for input fields

that should contain a color.</p>

<label for="favcolor">Select your favorite color:</label>

<input type="color" id="favcolor" name="favcolor" value="#ff0000">

<input type="submit" value="Submit">

</form>

<p><b>Note:</b> type="color" is not supported in Internet Explorer 11

or Safari 9.1 (or earlier).</p>

</body>
</html>

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

<!DOCTYPE html>

<html>

<body>

<h2>Date Field</h2>

<p>The <strong>input type="date"</strong> is used for input fields that

should contain a date.</p>

<label for="birthday">Birthday:</label>

<input type="date" id="birthday" name="birthday">

<input type="submit" value="Submit">

</form>

<p><strong>Note:</strong> type="date" is not supported in Internet

Explorer 11 or prior Safari 14.1.</p>

</body>

</html>
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
<!DOCTYPE html>

<html>

<body>

<h2>Date Field</h2>

<p>The <strong>input type="date"</strong> is used for input fields that

should contain a date.</p>

<label for="birthday">Birthday:</label>

<input type="date" id="birthday" name="birthday">

<input type="submit" value="Submit">

</form>

<p><strong>Note:</strong> type="date" is not supported in Internet

Explorer 11 or prior Safari 14.1.</p>

</body>

</html>
nput 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
<!DOCTYPE html>

<html>

<body>

<h2>Local Date Field</h2>

<p>The <strong>input type="datetime-local"</strong> specifies a date

and time input field, with no time zone.</p>

<label for="birthdaytime">Birthday (date and time):</label>

<input type="datetime-local" id="birthdaytime" name="birthdaytime">

<input type="submit" value="Submit">

</form>

<p><strong>Note:</strong> type="datetime-local" is not supported in

Internet Explorer 11 or prior Safari 14.1.</p>

</body>

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

<!DOCTYPE html>

<html>

<body>

<h2>Email Field</h2>

<p>The <strong>input type="email"</strong> is used for input fields

that should contain an e-mail address:</p>

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

<input type="email" id="email" name="email">

<input type="submit" value="Submit">

</form>

</body>

</html>

Input Type File

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

Input Type Hidden

The <input type="hidden"> defines a hidden input field (not visible to a user).

A hidden field lets web developers include data that cannot be seen or modified
by users when a form is submitted.

A hidden field often stores what database record that needs to be updated
when the form is submitted.

Note: While the value is not displayed to the user in the page's content, it is
visible (and can be edited) using any browser's developer tools or "View
Source" functionality. Do not use hidden inputs as a form of security!

<!DOCTYPE html>

<html>

<body>

<h1>A Hidden Field (look in source code)</h1>

<label for="fname">First name:</label>

<input type="text" id="fname" name="fname"><br><br>

<input type="hidden" id="custId" name="custId" value="3487">

<input type="submit" value="Submit">

</form>

<p><strong>Note:</strong> The hidden field is not shown to the user,

but the data is sent when the form is submitted.</p>

</body>
</html>

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

<html>

<body>

<h2>Month Field</h2>

<p>The <strong>input type="month"</strong> allows the user to select

a month and year.</p>

<label for="bdaymonth">Birthday (month and year):</label>

<input type="month" id="bdaymonth" name="bdaymonth">

<input type="submit" value="Submit">

</form>

<p><strong>Note:</strong> type="month" is not supported in Firefox,

Safari, or Internet Explorer 11.</p>

</body>

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

<!DOCTYPE html>

<html>

<body>

<h2>Number Field</h2>

<p>The <strong>input type="number"</strong> defines a numeric input

field.</p>

<p>You can use the min and max attributes to add numeric restrictions
in the input field:</p>

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

<input type="number" id="quantity" name="quantity" min="1"

max="5">

<input type="submit" value="Submit">

</form>

</body>

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

maxlengt Specifies the maximum number of character for an input

h field

min Specifies the minimum value for an input field

pattern Specifies a regular expression to check the input value

against

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:

<!DOCTYPE html>

<html>

<body>

<h2>Numeric Steps</h2>

<p>Depending on browser support: Fixed steps will apply in the input

field.</p>

<label for="quantity">Quantity:</label>

<input type="number" id="quantity" name="quantity" min="0"

max="100" step="10" value="30">

<input type="submit" value="Submit">

</form>

</body>

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

<!DOCTYPE html>

<html>

<body>

<h2>Range Field</h2>

<p>Depending on browser support: The input type "range" can be

displayed as a slider control.</p>

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

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

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

<input type="submit" value="Submit">

</form>

</body>

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

<!DOCTYPE html>

<html>

<body>

<h2>Search Field</h2>

<p>The <strong>input type="search"</strong> is used for search fields

(behaves like a regular text field):</p>

<label for="gsearch">Search Google:</label>

<input type="search" id="gsearch" name="gsearch">

<input type="submit" value="Submit">

</form>

</body>

</html>

<!DOCTYPE html>

<html>

<body>

<h2>Search Field</h2>

<p>The <strong>input type="search"</strong> is used for search fields

(behaves like a regular text field):</p>
<form action="/action_page.php">

<label for="gsearch">Search Google:</label>

<input type="search" id="gsearch" name="gsearch">

<input type="submit" value="Submit">

</form>

</body>

</html>

Input Type Tel

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

<!DOCTYPE html>

<html>

<body>

<h2>Telephone Field</h2>

<p>The <strong>input type="tel"</strong> is used for input fields that

should contain a telephone number:</p>

<label for="phone">Enter a phone number:</label><br><br>

<input type="tel" id="phone" name="phone" placeholder="123-45-678"

pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>

<small>Format: 123-45-678</small><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

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.

<!DOCTYPE html>

<html>

<body>

<h1>Show a Time Input Control</h1>

<p>The <strong>input type="time"</strong> allows the user to select a

time (no time zone):</p>

<p>If the browser supports it, a time picker pops up when entering the
input field.</p>

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

<input type="time" id="appt" name="appt">

<input type="submit" value="Submit">

</form>

<p><strong>Note:</strong> type="time" is not supported in Internet

Explorer 11 or prior Safari 14.1.</p>
</body>

</html>

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.

<!DOCTYPE html>

<html>

<body>

<h1>Display a URL Input Field</h1>

<p>The <strong>input type="url"</strong> is used for input fields that

should contain a URL address:</p>

<label for="homepage">Add your homepage:</label>

<input type="url" id="homepage" name="homepage">

<input type="submit" value="Submit">

</form>

</body>

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

<!DOCTYPE html>

<html>

<body>

<h1>Display a Week Input Control</h1>

<p>The <strong>input type="week"</strong> allows the user to select a

week and year.</p>

<p>If the browser supports it, a date picker pops up when entering the
input field.</p>

<label for="week">Select a week:</label>

<input type="week" id="week" name="week">

<input type="submit" value="Submit">

</form>

<p><strong>Note:</strong> type="week" is not supported in Firefox,

Safari or Internet Explorer 11.</p>

</body>

</html>
HTML Input Attributes

This chapter describes the different attributes for the

HTML <input> element.

The value Attribute

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

Example
Input fields with initial (default) values:

<!DOCTYPE html>

<html>

<body>

<h1>The input value attribute</h1>

<p>The value attribute specifies an initial value for an input field:</p>

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

</html>

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!

<!DOCTYPE html>

<html>

<body>

<h1>The input readonly attribute</h1>

<p>The readonly attribute specifies that an input field should be read-

only (cannot be changed):</p>

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

<input type="submit" value="Submit">

</form>

</body>

</html>
The disabled Attribute
The input disabled attribute specifies that an input field should be disabled.

A disabled input field is unusable and un-clickable.

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

<!DOCTYPE html>

<html>

<body>

<h1>The input disabled attribute</h1>

<p>The disabled attribute specifies that an input field should be disabled

(unusable and un-clickable):</p>

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

<input type="submit" value="Submit">

</form>

</body>

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

<!DOCTYPE html>

<html>

<body>

<h1>The input size attribute</h1>

<p>The size attribute specifies the width (in characters) of an input

field:</p>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" size="50"><br>

<input type="text" id="pin" name="pin" size="4"><br><br>

<input type="submit" value="Submit">

</form>

</body>

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

<!DOCTYPE html>

<html>

<body>

<h1>The input maxlength attribute</h1>

<p>The maxlength attribute specifies the maximum number of characters

allowed in an input field:</p>

<label for="fname">First name:</label><br>

<input type="text" id="fname" name="fname" size="50"><br>

<input type="text" id="pin" name="pin" maxlength="4"

size="4"><br><br>

<input type="submit" value="Submit">

</form>

</body>

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

<!DOCTYPE html>

<html>

<body>

<h1>The input multiple attributes</h1>

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

<label for="files">Select files:</label>

<input type="file" id="files" name="files" multiple><br><br>

<input type="submit" value="Submit">

</form>

<p>To select multiple files, hold down the CTRL or SHIFT key while
selecting.</p>

</body>

</html>
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
An input field that can contain only three letters (no numbers or special
characters):

<!DOCTYPE html>

<html>

<body>

<h1>The input pattern attribute</h1>

<p>The pattern attribute specifies a regular expression that the input

element's value is checked against.</p>

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

<input type="submit" value="Submit">

</form>

<p><strong>Note:</strong> The pattern attribute of the input tag is not

supported in Safari 10 (or earlier).</p>
</body>

</html>

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:

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
A required input field:

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:

<!DOCTYPE html>
<html>
<body>

<h1>The input step attribute</h1>

<form action="/action_page.php">
<label for="points">Points:</label>
<input type="number" id="points" name="points" step="3">
<input type="submit">
</form>

</body>
</html>

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:

<!DOCTYPE html>

<html>

<body>

<h1>The input autofocus attribute</h1>

<p>The autofocus attribute specifies that the input field should
automatically get focus when the page loads.</p>

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

<input type="submit" value="Submit">

</form>

</body>

</html>

The height and width Attributes

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

Tip: Always specify both the height and width attributes for images. If height
and width are set, the space required for the image is reserved when the page
is loaded. Without these attributes, the browser does not know the size of the
image, and cannot reserve the appropriate space to it. The effect will be that
the page layout will change during loading (while the images load).

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

<!DOCTYPE html>

<html>

<body>
<h1>The input height and width attributes</h1>

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

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

height="48">

</form>

<p><b>Note:</b> The input type="image" sends the X and Y coordinates of

the click that activated the image button.</p>

</body>

</html>

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>:
<!DOCTYPE html>

<html>

<body>

<h1>The input list attribute</h1>

<p>The list attribute refers to a datalist element that contains

pre-defined options for an input element.</p>

<input list="browsers" name="browser">

<option value="Internet Explorer">

</datalist>

<input type="submit" value="Submit">

</form>

<p><b>Note:</b> The datalist tag is not supported in Safari 12.0 (or

earlier).</p>

</body>

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

<!DOCTYPE html>

<html>

<body>

<h1>The autocomplete attribute</h1>

<p>The autocomplete attribute specifies whether or not an input

field should have autocomplete enabled.</p>

<p>Fill in and submit the form, then reload the page to see how
autocomplete works.</p>

<p>Notice that autocomplete is "on" for the form, but "off" for the
e-mail field!</p>

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

<label for="email">Email:</label>

<input type="email" id="email" name="email"

autocomplete="off"><br><br>

<input type="submit" value="Submit">

</form>

</body>

</html>

HTML Input form* Attributes

This chapter describes the different form* attributes for the

HTML <input> element.

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

<!DOCTYPE html>

<html>

<body>

<h1>The input formaction attribute</h1>

<p>The formaction attribute specifies the URL of a file that will

process the input when the form is submitted.</p>

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

<input type="submit" formaction="/action_page2.php" value="Submit

as Admin">

</form>

</body>
</html>

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

<!DOCTYPE html>

<html>

<body>

<h1>The input formenctype attribute</h1>

<p>The formenctype attribute specifies how the form data should be

encoded when submitted.</p>

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

</html>

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:

● 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":
The form target 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
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):

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.

Example
Specify that no form-data should be validated on submit:
HTML Canvas Graphic
The HTML <canvas> element is used to draw graphics on a web page.

The graphic to the left is created with <canvas>. It shows four elements: a
red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor
text.

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

The <canvas> element is only a container for graphics. You must use JavaScript
to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.

Canvas Examples
A canvas is a rectangular area on an HTML page. By default, a canvas has no
border and no content.

The markup looks like this:

Note: Always specify an id attribute (to be referred to in a script), and

a width and height attribute to define the size of the canvas. To add a border,
use the style attribute.

Here is an example of a basic, empty canvas:

Example
<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px

solid #000000;">

Your browser does not support the HTML canvas tag.

</canvas>

</body>

</html>

Add a JavaScript
After creating the rectangular canvas area, you must add a JavaScript to do the
drawing.

Here are some examples:

Draw a Line

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px

solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(200,100);

ctx.stroke();

</script>

</body>

</html>

Draw a Circle

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

</body>
</html>

Draw a Text

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

</body>
</html>
Stroke Text

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

</body>
</html>

Draw Linear Gradient

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);
</script>

</body>
</html>

Draw Image
<!DOCTYPE html>
<html>
<body>

<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream"
width="220" height="277">

<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML canvas tag.</canvas>

<p><button onclick="myCanvas()">Try it</button></p>

</body>
</html>
HTML SVG Graphics

SVG defines vector-based graphics in XML format.

What is SVG?
● SVG stands for Scalable Vector Graphics
● SVG is used to define graphics for the Web
● SVG is a W3C recommendation

The HTML <svg> Element

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic
images.

SVG Circle
<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">

<circle cx="50" cy="50" r="40"
stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>
SVG Rectangle
<!DOCTYPE html>
<html>
<body>

<svg width="400" height="100">

<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

SVG Rounded Rectangle

<!DOCTYPE html>
<html>
<body>

<svg width="400" height="180">

<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
Sorry, your browser does not support inline SVG.
</svg>

</body>
</html>

SVG Star
Example

SVG Logo
SVG
Example

Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.

Canvas draws 2D graphics, on the fly (with a JavaScript).

SVG is XML based, which means that every element is available within the SVG
DOM. You can attach JavaScript event handlers for an element.

In SVG, each drawn shape is remembered as an object. If attributes of an SVG

object are changed, the browser can automatically re-render the shape.

Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is

forgotten by the browser. If its position should be changed, the entire scene
needs to be redrawn, including any objects that might have been covered by
the graphic.

Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:

Canvas SVG

● Resolution dependent ● Resolution independent

● No support for event ● Support for event handlers
handlers ● Best suited for applications with
● Poor text rendering large rendering areas (Google Maps)
capabilities ● Slow rendering if complex (anything
● You can save the that uses the DOM a lot will be
resulting image as .png slow)
or .jpg ● Not suited for game applications
● Well suited for graphic-
intensive games
HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can
hear or see, like images, music, sound, videos, records, films, animations, and
more.

Web pages often contain multimedia elements of different types and formats.

Browser Support
The first web browsers had support for text only, limited to a single font in a
single color.

Later came browsers with support for colors, fonts, images, and multimedia!

Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file
extension.

Multimedia files have formats and different extensions

like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Common Video Formats
There are many video formats out there.

The MP4, WebM, and Ogg formats are

supported by HTML.

The MP4 format is recommended by

YouTube.

Format File Description

MPEG .mpg MPEG. Developed by the Moving Pictures

.mpeg Expert Group. The first popular video format
on the web. Not supported anymore in HTML.

AVI .avi AVI (Audio Video Interleave). Developed by

Microsoft. Commonly used in video cameras
and TV hardware. Plays well on Windows
computers, but not in web browsers.

WMV .wmv WMV (Windows Media Video). Developed by

Microsoft. Commonly used in video cameras
and TV hardware. Plays well on Windows
computers, but not in web browsers.

QuickTime .mov QuickTime. Developed by Apple. Commonly

used in video cameras and TV hardware.
Plays well on Apple computers, but not in web
browsers.

RealVideo .rm RealVideo. Developed by Real Media to allow

.ram video streaming with low bandwidths. Does
not play in web browsers.

Flash .swf Flash. Developed by Macromedia. Often

.flv requires an extra component (plug-in) to play
in web browsers.

Ogg .ogg Theora Ogg. Developed by the Xiph.Org

Foundation. Supported by HTML.

WebM .web WebM. Developed by Mozilla, Opera, Adobe,

m and Google. Supported by HTML.

MPEG-4 .mp4 MP4. Developed by the Moving Pictures

or MP4 Expert Group. Commonly used in video
cameras and TV hardware. Supported by all
browsers and recommended by YouTube.

Note: Only MP4, WebM, and Ogg video are supported by the HTML standard.

Common Audio Formats

MP3 is the best format for compressed recorded music. The term MP3 has
become synonymous with digital music.

If your website is about recorded music, MP3 is the choice.

Format File Description

MIDI .mid MIDI (Musical Instrument Digital Interface). Main format for all
.midi electronic music devices like synthesizers and PC sound cards.
MIDI files do not contain sound, but digital notes that can be
played by electronics. Plays well on all computers and music
hardware, but not in web browsers.

RealAudi .rm RealAudio. Developed by Real Media to allow streaming of audio

o .ram with low bandwidths. Does not play in web browsers.

WMA .wma WMA (Windows Media Audio). Developed by Microsoft. Plays well
on Windows computers, but not in web browsers.

AAC .aac AAC (Advanced Audio Coding). Developed by Apple as the default
format for iTunes. Plays well on Apple computers, but not in web
browsers.

WAV .wav WAV. Developed by IBM and Microsoft. Plays well on Windows,
Macintosh, and Linux operating systems. Supported by HTML.

Ogg .ogg Ogg. Developed by the Xiph.Org Foundation. Supported by HTML.

MP3 .mp3 MP3 files are actually the sound part of MPEG files. MP3 is the
most popular format for music players. Combines good
compression (small files) with high quality. Supported by all
browsers.

MP4 .mp4 MP4 is a video format, but can also be used for audio. Supported
by all browsers.

Note: Only MP3, WAV, and Ogg audio are supported by the HTML standard.
HTML Multimedia

Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?
Multimedia comes in many different formats. It can be almost anything you can
hear or see, like images, music, sound, videos, records, films, animations, and
more.

Web pages often contain multimedia elements of different types and formats.

Browser Support
The first web browsers had support for text only, limited to a single font in a
single color.

Later came browsers with support for colors, fonts, images, and multimedia!

Multimedia Formats
Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file
extension.

Multimedia files have formats and different extensions

like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Common Video Formats
There are many video formats out there.

The MP4, WebM, and Ogg formats are

supported by HTML.

The MP4 format is recommended by YouTube.

Form Fil Description

at e

MPEG .m MPEG. Developed by the Moving Pictures Expert Group. The

pg first popular video format on the web. Not supported anymore
.m in HTML.
pe
g

AVI .av AVI (Audio Video Interleave). Developed by Microsoft.

i Commonly used in video cameras and TV hardware. Plays well
on Windows computers, but not in web browsers.

WMV .w WMV (Windows Media Video). Developed by Microsoft.

mv Commonly used in video cameras and TV hardware. Plays well
on Windows computers, but not in web browsers.

Quick .m QuickTime. Developed by Apple. Commonly used in video

Time ov cameras and TV hardware. Plays well on Apple computers, but
not in web browsers.

RealV .r RealVideo. Developed by Real Media to allow video streaming

ideo m with low bandwidths. Does not play in web browsers.
.ra
m

Flash .sw Flash. Developed by Macromedia. Often requires an extra

f component (plug-in) to play in web browsers.
.flv

Ogg .og Theora Ogg. Developed by the Xiph.Org Foundation. Supported

g by HTML.

Web .w WebM. Developed by Mozilla, Opera, Adobe, and Google.

M eb Supported by HTML.
m

MPEG .m MP4. Developed by the Moving Pictures Expert Group.

-4 p4 Commonly used in video cameras and TV hardware. Supported
or by all browsers and recommended by YouTube.
MP4

Note: Only MP4, WebM, and Ogg video are supported by the HTML standard.

Common Audio Formats

MP3 is the best format for compressed recorded music. The term MP3 has
become synonymous with digital music.

If your website is about recorded music, MP3 is the choice.

For Fil Description

mat e

MIDI .mi MIDI (Musical Instrument Digital Interface). Main format for all
d electronic music devices like synthesizers and PC sound cards.
MIDI files do not contain sound, but digital notes that can be
.mi played by electronics. Plays well on all computers and music
di hardware, but not in web browsers.

Real .rm RealAudio. Developed by Real Media to allow streaming of

Audi audio with low bandwidths. Does not play in web browsers.
o .ra
m

WMA .w WMA (Windows Media Audio). Developed by Microsoft. Plays

ma well on Windows computers, but not in web browsers.
AAC .aa AAC (Advanced Audio Coding). Developed by Apple as the
c default format for iTunes. Plays well on Apple computers, but
not in web browsers.

WAV .wa WAV. Developed by IBM and Microsoft. Plays well on Windows,
v Macintosh, and Linux operating systems. Supported by HTML.

Ogg .og Ogg. Developed by the Xiph.Org Foundation. Supported by

g HTML.

MP3 .m MP3 files are actually the sound part of MPEG files. MP3 is the
p3 most popular format for music players. Combines good
compression (small files) with high quality. Supported by all
browsers.

MP4 .m MP4 is a video format, but can also be used for audio.
p4 Supported by all browsers.

Note: Only MP3, WAV, and Ogg audio

HTML Audio
The HTML <audio> element is used to play an audio file on a web page.

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

Example

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

HTML Audio - How It Works

The controls attribute adds audio controls, like play, pause, and volume.

The <source> element allows you to specify alternative audio files which the
browser may choose from. The browser will use the first recognized format.

The text between the <audio> and </audio> tags will only be displayed in
browsers that do not support the <audio> element.
HTML <audio> Autoplay
To start an audio file automatically, use the autoplay attribute:

Example

<audio controls autoplay>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

Note: Chromium browsers do not allow autoplay in most cases. However, muted
autoplay is always allowed.

Add muted after autoplay to let your audio file start playing automatically (but
muted):

Example

<audio controls autoplay muted>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>
HTML Audio Formats
There are three supported audio formats: MP3, WAV, and OGG. The browser
support for the different formats is:
Browser MP3 WAV OGG

Edge/IE YES YES* YES*

Chrome YES YES YES

Firefox YES YES YES

Safari YES YES NO

Opera YES YES YES

HTML Audio - Media Types

File Format Media Type

MP3 audio/mpeg

OGG audio/ogg

WAV audio/wav

HTML Audio Tags

Tag Description

<audio> Defines sound content

<source> Defines multiple media resources for media elements, such as

HTML5 supports <video> and <audio> controls. The Flash, Silverlight and similar technologies
are used to play the multimedia items.

this table defines that which web browser supports which audio file format.
Browser mp3 wav ogg

Internet Explorer yes no no

Google Chrome yes yes yes

Mozilla Firefox yes* yes yes

Opera no yes yes

Apple Safari yes yes no

HTML Audio Tag Example

Let's see the code to play mp3 file using HTML audio tag. Try Catch

<source src="koyal.mp3" type="audio/mpeg">

Your browser does not support the html audio tag.

</audio>

Let's see the example to play ogg file using HTML audio tag.

1. <audio controls>
2. <source src="koyal.ogg" type="audio/ogg">
3. Your browser does not support the html audio tag.
4. </audio>

Supporting Browsers
Element Chrome IE Firefox Opera Safari

<audio> Yes Yes Yes Yes Yes

Attributes of HTML Audio Tag
There is given a list of HTML audio tag.

Attribut Description
e

controls It defines the audio controls which is displayed with play/pause

buttons.

autoplay It specifies that the audio will start playing as soon as it is ready.

loop It specifies that the audio file will start over again, every time
when it is completed.

muted It is used to mute the audio output.

preload It specifies the author view to upload audio file when the page
loads.

src It specifies the source URL of the audio file.

HTML Audio Tag Attribute Example

Here we are going to use controls, autoplay, loop and src attributes of HTML audio tag.

<audio controls autoplay loop>

<source src="koyal.mp3" type="audio/mpeg"></audio>

MIME Types for HTML Audio format

The available MIME type HTML audio tag is given below.

Audio Format MIME Type

mp3 audio/mpeg

ogg audio/ogg

wav audio/wav
HTML Video
The HTML <video> element is used to show a video on a web page.

The HTML <video> Element

To show a video in HTML, use the <video> element:
<!DOCTYPE html>
<html>
<body>

<video width="400" controls>

<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>

<p>
Video courtesy of
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck
Bunny</a>.
</p>

</body>
</html>

Example

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>
How it Works
The controls attribute adds video controls, like play, pause, and volume.

It is a good idea to always include width and height attributes. If height and
width are not set, the page might flicker while the video loads.

The <source> element allows you to specify alternative video files which the
browser may choose from. The browser will use the first recognized format.

The text between the <video> and </video> tags will only be displayed in
browsers that do not support the <video> element.

HTML <video> Autoplay

To start a video automatically, use the autoplay attribute:

Example

<video width="320" height="240" autoplay>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

Note: Chromium browsers do not allow autoplay in most cases. However, muted
autoplay is always allowed.

Add muted after autoplay to let your video start playing automatically (but
muted):
Example

<video width="320" height="240" autoplay muted>

<source src="movie.mp4" type="video/mp4">

<source src="movie.ogg" type="video/ogg">

Your browser does not support the video tag.

</video>

HTML Video Formats

There are three supported video formats: MP4, WebM, and Ogg. The
browser support for the different formats is:
Browser MP4 WebM Ogg

Edge YES YES YES

Chrome YES YES YES

Firefox YES YES YES

Safari YES YES NO

Opera YES YES YES

HTML Video - Media Types

File Format Media Type

MP4 video/mp4

WebM video/webm

Ogg video/ogg
HTML Video - Methods, Properties, and Events
The HTML DOM defines methods, properties, and events for the <video>
element.
This allows you to load, play, and pause videos, as well as setting duration
and volume.
There are also DOM events that can notify you when a video begins to play,
is paused, etc.

Example: Using JavaScript

<!DOCTYPE html>
<html>
<body>

<div style="text-align:center">
<button onclick="playPause()">Play/Pause</button>
<button onclick="makeBig()">Big</button>
<button onclick="makeSmall()">Small</button>
<button onclick="makeNormal()">Normal</button>
<br><br>
<video id="video1" width="420">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
</div>

function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}

function makeBig() {
myVideo.width = 560;
}

function makeSmall() {
myVideo.width = 320;
}

function makeNormal() {
myVideo.width = 420;
}
</script>

<p>Video courtesy of <a href="https://www.bigbuckbunny.org/"

target="_blank">Big Buck Bunny</a>.</p>

</body>
</html>

HTML Video Tags

Tag Description

<video> Defines a video or movie

<source> Defines multiple media resources for media elements, such

as <video> and <audio>

<track> Defines text tracks in media players

HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files such
as a movie clip, song clip on the web page.

Currently, there are three video formats supported for HTML video tag:

1. mp4
2. webM
3. ogg
Let's see the table that defines which web browser supports video file
format.

Browser mp4 webM ogg

Internet Explorer yes no no

Google Chrome yes yes yes

Mozilla Firefox yes yes yes

Opera no yes yes

Apple Safari yes no no

Android also supports mp4 format.

HTML Video Tag Example

Let's see the code to play mp4 file using HTML video tag.

1. <video controls>
2. <source src="movie.mp4" type="video/mp4">
3. Your browser does not support the html video tag.
4. </video>

Let's see the example to play ogg file using HTML video tag.

1. <video controls>
2. <source src="movie.ogg" type="video/ogg">
3. Your browser does not support the html video tag.
4. </video>
Supporting Browsers

Element Chrome IE Firefox Opera Safari

<video> Yes Yes Yes Yes Yes

Attributes of HTML Video Tag

Let's see the list of HTML 5 video tag attributes.

Attribu Description
te

controls It defines the video controls which is displayed with play/pause

buttons.

height It is used to set the height of the video player.

width It is used to set the width of the video player.

poster It specifies the image which is displayed on the screen when the
video is not played.

autopla It specifies that the video will start playing as soon as it is ready.
y

loop It specifies that the video file will start over again, every time
when it is completed.

muted It is used to mute the video output.

preload It specifies the author view to upload video file when the page
loads.

src It specifies the source URL of the video file.

HTML Video Tag Attribute Example
Let's see the example of video tag in HTML where are using height, width, autoplay, controls
and loop attributes.

1. <video width="320" height="240" controls autoplay loop>

2. <source src="movie.mp4" type="video/mp4">
3. Your browser does not support the html video tag.
4. </video>

MIME Types for HTML Video format

The available MIME type HTML video tag is given below.

Video Format MIME Type

mp4 video/mp4

ogg video/ogg

webM video/webM
HTML Plug-ins
Plug-ins are computer programs that extend the standard functionality of
the browser.

Plug-ins
Plug-ins were designed to be used for many different purposes:

● To run Java applets

● To run Microsoft ActiveX controls
● To display Flash movies
● To display maps
● To scan for viruses
● To verify a bank id

Warning !
Most browsers no longer support Java Applets and Plug-ins.
ActiveX controls are no longer supported in any browsers.
The support for Shockwave Flash has also been turned off in modern
browsers.

The <object> Element

The <object> element is supported by all browsers.

The <object> element defines an embedded object within an HTML document.

It was designed to embed plug-ins (like Java applets, PDF readers, and Flash
Players) in web pages, but can also be used to include HTML in HTML:

Example

<object width="100%" height="500px" data="snippet.html"></object>

Or images if you like:

Example

The <embed> element also defines an embedded object within an HTML

document.

Web browsers have supported the <embed> element for a long time. However,
it has not been a part of the HTML specification before HTML5.

Example

Note that the <embed> element does not have a closing tag. It can not contain
alternative text.

The <embed> element can also be used to include HTML in HTML:

Example

<embed width="100%" height="500px" src="snippet.html">

HTML YouTube Videos
The easiest way to play videos in HTML, is to use YouTube.

Struggling with Video Formats?

Converting videos to different formats can be difficult and time-consuming.

An easier solution is to let YouTube play the videos in your web page.

YouTube Video Id
YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a
video.

You can use this id, and refer to your video in the HTML code.

Playing a YouTube Video in HTML

To play your video on a web page, do the following:

● Upload the video to YouTube

● Take a note of the video id
● Define an <iframe> element in your web page
● Let the src attribute point to the video URL
● Use the width and height attributes to specify the dimension of the
player
● Add any other parameters to the URL (see below)

Example

<iframe width="420" height="315"

src="https://www.youtube.com/">

</iframe>
YouTube Autoplay + Mute
You can let your video start playing automatically when a user visits the page,
by adding autoplay=1 to the YouTube URL. However, automatically starting a
video is annoying for your visitors!

Note: Chromium browsers do not allow autoplay in most cases. However, muted
autoplay is always allowed.

Add mute=1 after autoplay=1 to let your video start playing automatically (but
muted).

YouTube - Autoplay + Muted

<iframe width="420" height="315"

src="https://www.youtube.com/">

</iframe>

YouTube Playlist
A comma separated list of videos to play (in addition to the original URL).

YouTube Loop
Add loop=1 to let your video loop forever.

Value 0 (default): The video will play only once.

Value 1: The video will loop (forever).

YouTube - Loop
<iframe width="420" height="315"

src="https://www.youtube.com/">

</iframe>

YouTube Controls
Add controls=0 to not display controls in the video player.

Value 0: Player controls does not display.

Value 1 (default): Player controls display.

YouTube - Controls

<iframe width="420" height="315"

src="https://www.youtube.com/">

</iframe>

HTML Video Tag Example

Let's see the code to play mp4 file using HTML video tag.

5. <video controls>
6. <source src="movie.mp4" type="video/mp4">
7. Your browser does not support the html video tag.
8. </video>

Let's see the example to play ogg file using HTML video tag.

5. <video controls>
6. <source src="movie.ogg" type="video/ogg">
7. Your browser does not support the html video tag.
8. </video>

Supporting Browsers

Element Chrome IE Firefox Opera Safari

<video> Yes Yes Yes Yes Yes

Attributes of HTML Video Tag

Let's see the list of HTML 5 video tag attributes.

Attribu Description
te

controls It defines the video controls which is displayed with play/pause

buttons.

height It is used to set the height of the video player.

width It is used to set the width of the video player.

poster It specifies the image which is displayed on the screen when the
video is not played.

autopla It specifies that the video will start playing as soon as it is ready.
y

loop It specifies that the video file will start over again, every time
when it is completed.

muted It is used to mute the video output.

preload It specifies the author view to upload video file when the page
loads.
src It specifies the source URL of the video file.

HTML Video Tag Attribute Example

Let's see the example of video tag in HTML where are using height, width, autoplay, controls
and loop attributes.

5. <video width="320" height="240" controls autoplay loop>

6. <source src="movie.mp4" type="video/mp4">
7. Your browser does not support the html video tag.
8. </video>

MIME Types for HTML Video format

The available MIME type HTML video tag is given below.

Video Format MIME Type

mp4 video/mp4

ogg video/ogg

webM video/webM
HTML Plug-ins
Plug-ins are computer programs that extend the standard functionality of
the browser.

Plug-ins
Plug-ins were designed to be used for many different purposes:

● To run Java applets

● To run Microsoft ActiveX controls
● To display Flash movies
● To display maps
● To scan for viruses
● To verify a bank id

The <object> Element

The <object> element is supported by all browsers.

The <object> element defines an embedded object within an HTML document.

It was designed to embed plug-ins (like Java applets, PDF readers, and Flash
Players) in web pages, but can also be used to include HTML in HTML:
Example

<object width="100%" height="500px" data="snippet.html"></object>

Or images if you like:

Example

The <embed> Element

The <embed> element is supported in all major browsers.

The <embed> element also defines an embedded object within an HTML

document.

Web browsers have supported the <embed> element for a long time. However,
it has not been a part of the HTML specification before HTML5.

Example

Note that the <embed> element does not have a closing tag. It can not contain
alternative text.

The <embed> element can also be used to include HTML in HTML:

Example

<embed width="100%" height="500px" src="snippet.html">

HTML YouTube Videos
The easiest way to play videos in HTML, is to use YouTube.

Struggling with Video Formats?

Converting videos to different formats can be difficult and time-consuming.

An easier solution is to let YouTube play the videos in your web page.

YouTube Video Id
YouTube will display an id (like tgbNymZ7vqY), when you save (or play) a
video.

You can use this id, and refer to your video in the HTML code.

Playing a YouTube Video in HTML

To play your video on a web page, do the following:

● Upload the video to YouTube

<iframe width="420" height="315"

src="https://www.youtube.com/">

</iframe>

YouTube Autoplay + Mute

You can let your video start playing automatically when a user visits the page,
by adding autoplay=1 to the YouTube URL. However, automatically starting a
video is annoying for your visitors!

Note: Chromium browsers do not allow autoplay in most cases. However, muted
autoplay is always allowed.

Add mute=1 after autoplay=1 to let your video start playing automatically (but
muted).

YouTube - Autoplay + Muted

<iframe width="420" height="315"

src="https://www.youtube.com/">

</iframe>

YouTube Playlist
A comma separated list of videos to play (in addition to the original URL).

YouTube Loop
Add loop=1 to let your video loop forever.

Value 0 (default): The video will play only once.

Value 1: The video will loop (forever).

YouTube - Loop

<iframe width="420" height="315"

src="https://www.youtube.com/">

</iframe>

YouTube Controls
Add controls=0 to not display controls in the video player.

Value 0: Player controls does not display.

Value 1 (default): Player controls display.

YouTube - Controls

<iframe width="420" height="315"

src="https://www.youtube.com/">

</iframe>

معالجة مايكروية محاضرة 1 .MH
100% (1)
معالجة مايكروية محاضرة 1 .MH
26 pages
Modern Frontends With HTMX
No ratings yet
Modern Frontends With HTMX
269 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
Multimedia System: Chapter Five: Basics of Digital Audio
No ratings yet
Multimedia System: Chapter Five: Basics of Digital Audio
42 pages
Structured Programming
100% (1)
Structured Programming
42 pages
Digital Literacy Notes
100% (1)
Digital Literacy Notes
49 pages
Final Project Report Found
No ratings yet
Final Project Report Found
86 pages
Biology Grade 10 Short Note With Worksheet-1
No ratings yet
Biology Grade 10 Short Note With Worksheet-1
30 pages
Cfisd Homework
100% (1)
Cfisd Homework
7 pages
Data Communication & Computer Network-lab-Manual
No ratings yet
Data Communication & Computer Network-lab-Manual
68 pages
W & U I D: EB SER Nterface Evelopment
No ratings yet
W & U I D: EB SER Nterface Evelopment
6 pages
Test Questions - CSS
No ratings yet
Test Questions - CSS
44 pages
P2S1 It RM
No ratings yet
P2S1 It RM
129 pages
Railway Reservation
No ratings yet
Railway Reservation
24 pages
Web Technology Lab Program
60% (5)
Web Technology Lab Program
61 pages
Password Manager
No ratings yet
Password Manager
29 pages
Chapter 1 - Intro To Programming Language 20182019
No ratings yet
Chapter 1 - Intro To Programming Language 20182019
54 pages
WT Unit 1 Ppts Web Development Process
No ratings yet
WT Unit 1 Ppts Web Development Process
142 pages
Unit Internet-1
100% (1)
Unit Internet-1
23 pages
HTML Introduction
No ratings yet
HTML Introduction
26 pages
Lesson 2 Forms
100% (1)
Lesson 2 Forms
37 pages
Platform Technologies - P4
No ratings yet
Platform Technologies - P4
38 pages
Hardware Networking
No ratings yet
Hardware Networking
26 pages
Introduction To HTML
No ratings yet
Introduction To HTML
60 pages
TM03 Website Information Architecture
No ratings yet
TM03 Website Information Architecture
53 pages
Grade 8
No ratings yet
Grade 8
2 pages
Cmis 320 Homework 4
100% (1)
Cmis 320 Homework 4
6 pages
Lesson 3 Web 2.0
No ratings yet
Lesson 3 Web 2.0
34 pages
Online Car Rental System Project Report
No ratings yet
Online Car Rental System Project Report
80 pages
Chapter 1: Basics of Database Lesson 1: Introduction To Database
No ratings yet
Chapter 1: Basics of Database Lesson 1: Introduction To Database
10 pages
KNR Travels
No ratings yet
KNR Travels
89 pages
10 Odukoya WUNMI
No ratings yet
10 Odukoya WUNMI
74 pages
Network Devices PPT Made by Yajat
No ratings yet
Network Devices PPT Made by Yajat
26 pages
Introduction To Google Sites
No ratings yet
Introduction To Google Sites
15 pages
Web Technology
No ratings yet
Web Technology
46 pages
Chapter 2 Web Programming Best
No ratings yet
Chapter 2 Web Programming Best
49 pages
HTML Form Attributes - Javatpoint
No ratings yet
HTML Form Attributes - Javatpoint
9 pages
A Project Report On
No ratings yet
A Project Report On
78 pages
Coding - Intro To CSS
No ratings yet
Coding - Intro To CSS
29 pages
Css Cheatsheet
No ratings yet
Css Cheatsheet
1 page
1st Summative-Test-NET-12-for 2nd Quater
100% (1)
1st Summative-Test-NET-12-for 2nd Quater
5 pages
27 B.com Computer Applications (Hons) Major
No ratings yet
27 B.com Computer Applications (Hons) Major
72 pages
A Web Based Food Ordering Systemfoodizonefinal
No ratings yet
A Web Based Food Ordering Systemfoodizonefinal
84 pages
HTML Videos and Audio
No ratings yet
HTML Videos and Audio
9 pages
CSS Notes
No ratings yet
CSS Notes
61 pages
Lect 2 Web Development Process Model
No ratings yet
Lect 2 Web Development Process Model
29 pages
Web Technologies Notes7
No ratings yet
Web Technologies Notes7
79 pages
AAiT Network All Chapters
No ratings yet
AAiT Network All Chapters
53 pages
Web Dev Full Stack
No ratings yet
Web Dev Full Stack
17 pages
HTML 1
No ratings yet
HTML 1
35 pages
Front End Development.
No ratings yet
Front End Development.
14 pages
Introduction To Operating System
No ratings yet
Introduction To Operating System
74 pages
Oral Question Bank
No ratings yet
Oral Question Bank
6 pages
Flappy Bird
No ratings yet
Flappy Bird
22 pages
1.1 Objectives
No ratings yet
1.1 Objectives
28 pages
A Technical Report On Student
No ratings yet
A Technical Report On Student
13 pages
It Skills For Management and Technology Platform: Prof Sandesh Akre
No ratings yet
It Skills For Management and Technology Platform: Prof Sandesh Akre
61 pages
Technology and Information System - Chapter 6
No ratings yet
Technology and Information System - Chapter 6
32 pages
CNE Tutorial 02 - Real - LAN and LAN With Packet Tracer
No ratings yet
CNE Tutorial 02 - Real - LAN and LAN With Packet Tracer
18 pages
MULTIMEDIA Unit 1
No ratings yet
MULTIMEDIA Unit 1
14 pages
Introduction To Computer Architecture
No ratings yet
Introduction To Computer Architecture
47 pages
Technology and Information System - Chapter 4
No ratings yet
Technology and Information System - Chapter 4
29 pages
Lec-5 Software Design
No ratings yet
Lec-5 Software Design
23 pages
Karishma Resume 1
No ratings yet
Karishma Resume 1
1 page
Introduction To Programming Languages
No ratings yet
Introduction To Programming Languages
14 pages
Chapter 03: Basic Application Software: Mcgraw-Hill
No ratings yet
Chapter 03: Basic Application Software: Mcgraw-Hill
29 pages
First Long Test Grade 9
100% (1)
First Long Test Grade 9
2 pages
System Analysis and Design
No ratings yet
System Analysis and Design
17 pages
Computer Hardware Trainer
No ratings yet
Computer Hardware Trainer
10 pages
Online Education Portal
No ratings yet
Online Education Portal
14 pages
World Wide Web
No ratings yet
World Wide Web
43 pages
Industrial Training 5th Sem
No ratings yet
Industrial Training 5th Sem
16 pages
Basic Web Page Creation: How To Create A Web Page Using Notepad?
No ratings yet
Basic Web Page Creation: How To Create A Web Page Using Notepad?
15 pages
Cambridge IGCSE: Information and Communication Technology 0417/31
No ratings yet
Cambridge IGCSE: Information and Communication Technology 0417/31
12 pages
Lab 5 - Combinational Logic-Adders and Subtractors
No ratings yet
Lab 5 - Combinational Logic-Adders and Subtractors
11 pages
LE - Weeks 7-9 Programming 12 (.Net Technology Programming)
No ratings yet
LE - Weeks 7-9 Programming 12 (.Net Technology Programming)
10 pages
Programming 511 Assignment 2 (2023 Updated)
No ratings yet
Programming 511 Assignment 2 (2023 Updated)
5 pages
Quiz On Computer History and Hardware
No ratings yet
Quiz On Computer History and Hardware
4 pages
Presentation ON: Introduction To Microprocessor
No ratings yet
Presentation ON: Introduction To Microprocessor
20 pages
It 301 - Adet Lesson 1
No ratings yet
It 301 - Adet Lesson 1
7 pages
Apple Talk
No ratings yet
Apple Talk
13 pages
Assignment Object DataBase
No ratings yet
Assignment Object DataBase
14 pages
Web Engineering
No ratings yet
Web Engineering
21 pages
Unit-3 Questions
No ratings yet
Unit-3 Questions
6 pages
Introduction To HTML - Notes
No ratings yet
Introduction To HTML - Notes
4 pages
Lab3 Web
No ratings yet
Lab3 Web
5 pages
Grade 11 Commerce Practical Project Work 2021 22 Final
No ratings yet
Grade 11 Commerce Practical Project Work 2021 22 Final
4 pages
Outcomes-Based Teaching and Learning Plan For Web Design: Binangonan Catholic College
No ratings yet
Outcomes-Based Teaching and Learning Plan For Web Design: Binangonan Catholic College
6 pages
Khushi Verma CV
No ratings yet
Khushi Verma CV
2 pages
Anishaben Parmar: Education Skills
No ratings yet
Anishaben Parmar: Education Skills
1 page