HTML Commands

HTML Basic
HTML document
HTML headings
HTML paragraphs
HTML links
HTML images
Examples explained
1) <!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Rezultati
My First Heading
My first paragraph.
2) <!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>

</body>
</html>
Rezultati
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
3) <!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Rezultati
This is a paragraph.
4) <!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com">This is a link</a>
</body>
</html>
Rezultati
This is a link
5) <!DOCTYPE html>
<html>
<body>
<img src="w3schools.jpg" alt="W3Schools.com" width="104"

height="142">
</body>
</html>
Rezultati
HTML Attributes
The title attribute

The href attribute
The width and height attributes
The alt attribute
Attribute without quotes
Attribute without quotes does not work
Examples explained
1) <!DOCTYPE html>
<html>
<body>
<h1>About W3Schools</h1>
<p title="About W3Schools">

W3Schools is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>
<p><b>
If you move the mouse over the paragraph above,
the title will display as a tooltip.
</b></p>
</body>
</html>
Rezultati
About W3Schools
W3Schools is a web developer's site. It provides tutorials and references covering

many aspects of web programming, including HTML, CSS, JavaScript, XML, SQL,
PHP, ASP, etc.
If you move the mouse over the paragraph above, the title will display as a
tooltip.
2) <!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com">This is a link</a>
</body>
</html>
Rezultati
This is a link
3) <!DOCTYPE html>
<html>
<body>
<img src="w3schools.jpg" width="104" height="142">
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<body>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

</body>
</html>
Rezultati
5) <!DOCTYPE html>
<html>
<body>
<a href=http://www.w3schools.com>This is a link</a>
</body>
</html>
Rezultati
This is a link
6) <!DOCTYPE html>
<html>
<body>
<h1>About W3Schools</h1>
<p title=About W3Schools>
You cannot omit quotes around an attribute value

if the value contains spaces.
</p>
<p><b>
If you move the mouse over the paragraph above,
your browser will only display the first word from the title.
</b></p>
</body>
</html>
Rezultati
About W3Schools
You cannot omit quotes around an attribute value if the value contains spaces.
If you move the mouse over the paragraph above, your browser will only display
the first word from the title.
HTML Headings
HTML headings
HTML horizontal rules
HTML head
Examples explained
1) <!DOCTYPE html>
<html>
<body>
</body>
</html>
Rezultati
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
2) <!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<hr>
<hr>
</body>
</html>
Rezultati
The hr tag defines a horizontal rule:
3) <!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data.</p>

<p>Meta data is data about the HTML document.</p>
</body>
</html>
Rezultati
The HTML head element contains meta data.
Meta data is data about the HTML document.
HTML Paragraphs
HTML paragraphs
More HTML paragraphs
The use of line breaks in HTML
Poem problems (some problems with HTML formatting)
How to control the line breaks and spaces with the <pre> tag
Examples explained
1) <!DOCTYPE html>
<html>
<body>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of the browser
window. If you resize the browser window, the number of lines in this
paragraph will change.
</p>
</body>
</html>
Rezultati
This paragraph contains a lot of lines in the source code, but the browser ignores it.
This paragraph contains a lot of spaces in the source code, but the browser ignores it.
The number of lines in a paragraph depends on the size of the browser window. If you
resize the browser window, the number of lines in this paragraph will change.
3) <!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
</html>
Rezultati
This is
a para
graph with line breaks
4) <!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.

Oh, bring back my Bonnie to me.
</p>
</body>
</html>
Rezultati
In HTML, spaces and new lines are ignored:
My Bonnie lies over the ocean. My Bonnie lies over the sea. My Bonnie lies over the
ocean. Oh, bring back my Bonnie to me.
5) <!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>

</pre>
</body>
</html>
Rezultati
The pre tag preserves both spaces and line breaks:

HTML Styles
HTML styles
HTML background color
HTML text color
HTML text font
HTML text size
HTML text alignment
Examples explained
1) <!DOCTYPE html>
<html>
<body>
<h2 style="color:red;">I am red</h2>
<h2 style="color:blue;">I am blue</h2>
</body>
</html>
Rezultati
I am red
I am blue
2) <!DOCTYPE html>
<html>
<body style="background-color:lightgrey;">
<h1>This is a heading</h1>
</body>
</html>
Rezultati
This is a heading
3) <!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Rezultati
This is a heading
4) <!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
Rezultati
This is a heading
Thisisaparagraph.
5) <!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
Rezultati
This is a heading
6) <!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered heading</h1>
</body>
</html>
Rezultati
Centered heading
HTML Text Formatting
Bold formatting using the <b> element

Strong formatting using the <strong> element
Italic formatting using the <i> element
Emphasized formatting using the <em> element
Small formatting using the <small> element
Marked formatting using the <mark> element
Marked deleted using the <del> element
Marked inserted using the <ins> element
Marked deleted and inserted using <del> and <ins>
Subscript formatting using the <sub> element
Superscript formatting using the <sup> element
Examples explained
1) <!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>

</body>
</html>
Rezultati
This text is normal.
This text is bold.
2) <!DOCTYPE html>
<html>
<body>
<p><strong>This text is strong.</strong></p>
</body>
</html>
Rezultati
This text is strong.
3) <!DOCTYPE html>
<html>
<body>
<p><i>This text is italic.</i></p>
</body>
</html>
Rezultati
This text is italic.
4) <!DOCTYPE html>
<html>
<body>
<p><em>This text is emphasized.</em></p>
</body>
</html>
Rezultati
This text is emphasized.
5) <!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>
Rezultati
HTML Small Formatting
6) <!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>

</body>
</html>
Rezultati
HTML Marked Formatting
7) <!DOCTYPE html>
<html>
<body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
Rezultati
The del element represents deleted (removed) text.
My favorite color is blue red.
8) <!DOCTYPE html>
<html>
<body>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>

</body>
</html>
Rezultati
The ins element represent inserted (added) text.
My favorite color is red.
9) <!DOCTYPE html>
<html>
<body>
The del element represent deleted (removed) text.

The ins element represent inserted (added) text.
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
</body>
</html>
Rezultati
The del element represent deleted (removed) text. The ins element represent inserted
(added) text.
My favorite color is blue red.
10) <!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>
Rezultati
This is subscripted text.
11)<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
Rezultati
This is superscripted
text.
HTML Quotations and Citations
Formatting short quotations with the <q> element.

Formatting quoted sections with the <blockquote> element.
Formatting document author/owner information with the <address> element
Formatting abbreviations and acronyms the <abbr> element
Formatting work title with the <cite> element
Formatting text direction with the <bdo> element
Examples explained
1) <!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
</body>
</html>
Rezultati
Browsers usually insert quotation marks around the q element.
WWF's goal is to: Build a future where people live in harmony with nature.
2) <!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</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>
</body>
</html>
Rezultati
Browsers usually indent blockquote elements.
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.
3) <!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information (author/owner) of a

document or article.</p>
<address>
Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
Rezultati
The HTML address element defines contact information (author/owner) of a

document or article.
Written by Jon Doe.

Visit us at:
Example.com
Box 564, Disneyland
USA
4) <!DOCTYPE html>
<html>
<body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in

1948.</p>
<p>Marking up abbreviations can give useful information to browsers, translation
systems and search-engines.</p>
</body>
</html>
Rezultati
The WHO was founded in 1948.
Marking up abbreviations can give useful information to browsers, translation systems

and search-engines.
5) <!DOCTYPE html>
<html>
<body>
<p>The HTML cite element defines the title of a work.</p>
<p>Browsers usually display cite elements in italic.</p>
<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
</body>
</html>
Rezultati
The HTML cite element defines the title of a work.
Browsers usually display cite elements in italic.
The Scream by Edward Munch. Painted in 1893.
6) <!DOCTYPE html>
<html>
<body>
<p>If your browser supports bi-directional override (bdo), the next line will be written
from right to left (rtl):</p>
<bdo dir="rtl">This line will be written from right to left</bdo>
</body>
</html>
Rezultati
If your browser supports bi-directional override (bdo), the next line will be written
from right to left (rtl):
This line will be written from right to left
HTML Computercode Elements
Keyboard input formatting using the <kbd> element

Computer output formatting using the <samp> element
Programming code formatting using the <code> element
Programming code formatting preserving whitespace and line-breaks
Variable formatting using the <var> element
Examples explained
1) <!DOCTYPE html>
<html>
<body>
<p>The kbd element represents keyboard input:</p>
<p><kbd>File | Open...</kbd></p>
</body>
</html>
Rezultati
The kbd element represents keyboard input:
File | Open...
2) <!DOCTYPE html>
<html>
<body>
<p>The samp element represents sample output from a computer
program:</p>
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-
v6.189
</samp>
</body>
</html>
Rezultati
The samp element represents sample output from a computer program:
demo.example.com login: Apr 12 09:10:17 Linux 2.6.10-

grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
3) <!DOCTYPE html>
<html>
<body>
<p>Programming code example:</p>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</body>
</html>
Rezultati
Programming code example:
var x = 5; var y = 6; document.getElementById("demo").innerHTML = x + y;
4) <!DOCTYPE html>
<html>
<body>
<p>The code element does not preserve whitespace and line-breaks.</p>
<p>To fix this, you can put the code element inside a pre element:</p>
<pre>
<code>
var x = 5;
var y = 6;
</code>
</pre>
</body>
</html>
Rezultati
The code element does not preserve whitespace and line-breaks.
To fix this, you can put the code element inside a pre element:
var x = 5;
var y = 6;
5) <!DOCTYPE html>
<html>
<body>
<p>Einstein wrote: <var>E</var> =

<var>m</var><var>c</var><sup>2</sup>.</p>
</body>
</html>
Rezultati
Einstein wrote: E = mc2.
HTML Comments
Hidden comments
Conditional comments
Comments for debugging
Examples explained
1) <!DOCTYPE html>
<html>
<body>



</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<body>


</body>
</html>
Rezultati
Nuk ka
3) <!DOCTYPE html>
<html>
<body>

</body>
</html>
Rezultati
Nuk ka
HTML CSS
HTML with inline CSS

HTML with internal CSS
HTML with external CSS
HTML with CSS fonts
HTML with CSS using the id attribute
HTML with CSS using the class attribute
HTML and CSS borders
HTML and CSS padding
HTML and CSS margin
HTML and CSS full demo
Examples explained
1) <!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>
Rezultati
This is a Blue Heading
2) <!DOCTYPE html>
<html>
<head>
<style>
body {background-color: lightgrey;}
h1 {color: blue;}
p {color: green;}
</style>
</head>
<body>
</body>
</html>
Rezultati
This is a heading
3) <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
Rezultati
This is a heading
4) <!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>
</body>
</html>
Rezultati
This is a heading
Thisisaparagraph.
5) <!DOCTYPE html>
<html>
<head>
<style>
p#p01 {
color: blue;
}
</style>
</head>
<body>
<p id="p01">I am different.</p>
</body>
</html>
Rezultati
I am different.
6) <!DOCTYPE html>
<html>
<head>
<style>
p.error {
color: red;
}
</style>
</head>
<body>
<p class="error">I am different.</p>
<p class="error">I am different too.</p>
</body>
</html>
Rezultati
I am different.
I am different too.
7) <!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid grey;
</style>
</head>
<body>
</body>
</html>
Rezultati
This is a heading
This is a paragraph
This is a paragraph
This is a paragraph
8) <!DOCTYPE html>
<html>
<head>
<style>
p{
padding: 10px;
}
</style>
</head>
<body>
</body>
</html>
Rezultati
This is a heading
This is a paragraph
This is a paragraph
This is a paragraph
9) <!DOCTYPE html>
<html>
<head>
<style>
p{
padding: 10px;
margin: 30px;
}
</style>
</head>
<body>
</body>
</html>
Rezultati
This is a heading
This is a paragraph
This is a paragraph
This is a paragraph
10) <!DOCTYPE html>

<html>
<body>
<div style="position:relative;">
<div style="opacity:0.5;position:absolute;left:50px;top:-
30px;width:300px;height:150px;background-color:#40B3DF"></div>
<div
style="opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:
170px;background-color:#73AD21"></div>
<div style="margin-
top:30px;width:360px;height:130px;padding:20px;border-
radius:10px;border:10px solid #EE872A;font-size:120%;">
<h1>CSS = Styles and Colors</h1>
<div style="letter-spacing:12px;font-
size:15px;position:relative;left:25px;top:25px;">Manipulate Text</div>
<div style="color:#40B3DF;letter-spacing:12px;font-
size:15px;position:relative;left:25px;top:30px;">Colors,
<span style="background-
color:#B4009E;color:#ffffff;"> Boxes</span></div>
</div>
</div>
</body>
</html>
Rezultati
CSS = Styles and Colors
M a n i p u l a t e T e x t
C o l o r s , B o x e s
HTML Links
Linking, using an absolute URL

Linking, using a relative URL
Changing the color of links
Removing the underline from links
Changing the target of a link
An image as a link
Creating a bookmark link
A link that breaks out of a frame
A mailto link
A mailto link with subject
Examples explained
1) <!DOCTYPE html>
<html>
<body>
<p><a href="http://www.w3schools.com/html/">Visit our HTML

tutorial</a></p>
</body>
</html>
Rezultati
Visit our HTML tutorial

2) <!DOCTYPE html>
<html>
<body>
<p><a href="html_images.asp">HTML Images</a> is a link to a page on this

website.</p>
<p><a href="http://www.w3.org/">W3C</a> is a link to a website on the

World Wide Web.</p>
</body>
</html>
Rezultati
HTML Images is a link to a page on this website.
W3C is a link to a website on the World Wide Web.
3) <!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
a:visited {
color: pink;
a:hover {
color: red;
text-decoration: underline;
a:active {
color: yellow;
text-decoration: underline;
</style>
</head>
<body>
<p>You can change the default colors of links</p>
<a href="html_images.asp" target="_blank">HTML Images</a>
</body>
</html>
Rezultati
You can change the default colors of links
HTML Images
4) <!DOCTYPE html>
<html>
<body>
<a href="html_images.asp" style="text-decoration:none">HTML Images</a>
</body>
</html>
Rezultati
HTML Images
5) <!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com/html/" target="_blank">Visit our HTML

tutorial!</a>
<p>If you set the target attribute to "_blank", the link will open in a new
browser window or tab.</p>
</body>
</html>
Rezultati
Visit our HTML tutorial!
If you set the target attribute to "_blank", the link will open in a new browser window
or tab.
6) <!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"

style="width:42px;height:42px;border:0">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border
around the image.</p>
</body>
</html>
Rezultati
The image is a link. You can click on it.
We have added "border:0" to prevent IE9 (and earlier) from displaying a border
around the image.
7) <!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>

<h2>Chapter 5</h2>
<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 10</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>
<h2>Chapter 14</h2>
<h2>Chapter 15</h2>
<h2>Chapter 16</h2>
<h2>Chapter 17</h2>

</body>
</html>
Rezultati
Jump to Chapter 4
Chapter 1
This chapter explains ba bla bla
Chapter 2
Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8

Chapter 9
Chapter 10
Chapter 11
Chapter 12
Chapter 13
Chapter 14
Chapter 15
Chapter 16
Chapter 17
8) <!DOCTYPE html>
<html>
<body>
<p>Locked in a frame? <a href="http://www.w3schools.com/html/"
target="_top">Click here!</a></p>
</body>
</html>
Rezultati
Locked in a frame? Click here!
9) <!DOCTYPE html>
<html>
<body>
<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
Send Mail</a>
</p>
<p>The link will only work if you have email installed.</p>
<p>(Spaces between words should be replaced by %20 to ensure that the browser will
display the text properly)</p>
</body>
</html>
Rezultati
This is an email link: Send Mail
The link will only work if you have email installed.
(Spaces between words should be replaced by %20 to ensure that the browser will
display the text properly)
10) <!DOCTYPE html>
<html>
<body>
<p>
This is another mailto link:
<a href="mailto:someone@example.com?
cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Sum
mer%20Party&body=You%20are%20invited%20to%20a%20big%20summer
%20party!" target="_top">Send mail!</a>
</p>
<p>The link will only work if you have email installed.</p>
<p>(Spaces between words should be replaced by %20 to ensure that the browser will
display the text properly)</p>
</body>
</html>
Rezultati
This is another mailto link: Send mail!
The link will only work if you have email installed.
(Spaces between words should be replaced by %20 to ensure that the browser will
display the text properly)
HTML Images
The Mountain
An image height and width using attributes
An image height and width using CSS
An image height and width using both
An image in another folder
An image with a broken link
An image on another server
Using an image as a link
A moving image
An image map with clickable regions
A floating image
Examples explained
1) <!DOCTYPE html>
<html>
<body>
<h2>Spectacular Mountain</h2>
<img src="pic_mountain.jpg" alt="Mountain View"

style="width:304px;height:228px;">
</body>
</html>
Rezultati
Spectacular Mountain
2) <!DOCTYPE html>
<html>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Rezultati
3) <!DOCTYPE html>
<html>
<body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
Rezultati
4) <!DOCTYPE html>
<html>
<head>
<style>
img {
width:100%;
</style>
</head>
<body>
<p>It is better to use the style attribute (instead of the width and height attributes),
because it prevents
internal or external styles sheets to change the original size of an image:</p>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body>
</html>
Rezultati
It is better to use the style attribute (instead of the width and height attributes),
because it prevents internal or external styles sheets to change the original size of an
image:
5) <!DOCTYPE html>
<html>
<body>
<img src="/images/html5.gif" alt="HTML5 Icon"

</body>
</html>
Rezultati
6) <!DOCTYPE html>
<html>
<body>
<p>If a browser cannot find an image, it will display the alternate text:</p>
<img src="wrongname.gif" alt="HTML5 Icon"

</body>
</html>
Rezultati
If a browser cannot find an image, it will display the alternate text:
7) <!DOCTYPE html>
<html>
<body>
<img src="http://www.w3schools.com/images/w3schools_green.jpg"
alt="W3Schools.com" style="width:104px;height:142px;">
</body>
</html>
Rezultati
8) <!DOCTYPE html>
<html>
<body>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"

style="width:42px;height:42px;border:0;">
</a>
<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the
image.</p>
</body>
</html>
Rezultati
The image is a link. You can click on it.
Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the
image.
9) <!DOCTYPE html>
<html>
<body>
<p>The GIF standard allows moving images.</p>
<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">
</body>
</html>
Rezultati
The GIF standard allows moving images.

10) <!DOCTYPE html>
<html>
<body>
<p>Click on the sun or on one of the planets to watch it closer:</p>
<img src="planets.gif" alt="Planets" usemap="#planetmap"

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
Rezultati
Click on the sun or on one of the planets to watch it closer:

11)<!DOCTYPE html>
<html>
<body>
<p><strong>Float the image to the right:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph

with a floating image.
</p>
<p><strong>Float the image to the left:</strong></p>
<p>
<img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
A paragraph with a floating image. A paragraph with a floating image. A paragraph

with a floating image.
</p>
<p>Please use the CSS float property. The align attribute is deprecated in HTML 4,
and not supported in HTML5.</p>
</body>
</html>
Rezultati
Float the image to the right:
A paragraph with a floating image. A paragraph with a floating image. A

paragraph with a floating image.
Float the image to the left:
A paragraph with a floating image. A paragraph with a floating image. A

paragraph with a floating image.
Please use the CSS float property. The align attribute is deprecated in HTML 4, and
not supported in HTML5.
HTML Tables
Basic HTML tables

A table with borders
A table with collapsed borders
A table with cell padding
A table with headings
A table with left-aligned headings
Horizontal/Vertical table headings
A table with a caption
Table cells that span more than one column
Table cells that span more than one row
A table with cell spacing
A table with HTML tags inside
Tables with different style using id I
Tables with different style using id II
Tables with different style using class I
Tables with different style using class II
Examples explained
1) <!DOCTYPE html>
<html>
<body>
<h2>HTML Tables</h2>
<p>HTML tables start with a table tag.</p>
<p>Table rows start with a tr tag.</p>

<p>Table data start with a td tag.</p>
<hr>
<h2>1 Column:</h2>
<table>
<tr>
<td>100</td>
</tr>
</table>
<hr>
<h2>1 Row and 3 Columns:</h2>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<hr>
<h2>3 Rows and 3 Columns:</h2>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>700</td>
<td>800</td>
<td>900</td>
</tr>
</table>
<hr>
</body>
</html>
Rezultati
HTML Tables
HTML tables start with a table tag.
Table rows start with a tr tag.
Table data start with a td tag.
1 Column:
100
1 Row and 3 Columns:

100 200 300
3 Rows and 3 Columns:

100 200 300
400 500 600
700 800 900
2) <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
</style>
</head>
<body>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Rezultati
Jill Smith 50
Eve Jackson 94
John Doe 80
3) <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {

border-collapse: collapse;
</style>
</head>
<body>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Rezultati
Jill Smith 50
Eve Jackson 94
John Doe 80
4) <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
th, td {
padding: 15px;
}
</style>
</head>
<body>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the padding to 5px.</p>
</body>
</html>
Rezultati
Jill Smith 50
Eve Jackson 94
John Doe 80
Try to change the padding to 5px.
5) <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Rezultati
Firstname Lastname Points

Jill Smith 50
Eve Jackson 94
John Doe 80
6) <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
th, td {
padding: 5px;
th {
text-align: left;
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Rezultati
Firstname Lastname Points

Jill Smith 50
Eve Jackson 94
John Doe 80
7) <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Horizontal Headings:</h2>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h2>Vertical Headings:</h2>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Rezultati
Horizontal Headings:
Name Telephone Telephone
Bill Gates 555 77 854 555 77 855
Vertical Headings:
Name: Bill Gates
Telephone: 555 77 854
Telephone: 555 77 855
8) <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
th, td {
padding: 5px;
text-align: left;
</style>
</head>
<body>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Rezultati
Monthly savings
Month Savings
January $100
February $50
9) <!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
th, td {
padding: 5px;
text-align: left;
</style>
</head>
<body>
<h2>Cell that spans two columns:</h2>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Rezultati
Cell that spans two columns:

Name Telephone
Bill Gates 555 77 854 555 77 855
10) <!DOCTYPE html>

<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>

<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
Rezultati
Cell that spans two rows:

Name: Bill Gates
555 77 854
Telephone:
555 77 855
11) <!DOCTYPE html>

<html>
<head>
<style>
table, th, td {
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>
Rezultati
Jill Smith 50
Eve Jackson 94
John Doe 80
Try to change the border-spacing to 5px.
12) <!DOCTYPE html>

<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
Rezultati
This cell contains a table:

This is a paragraph
A B
This is another paragraph C D
This cell contains a list
apples
HELLO
bananas
pineapples
13) <!DOCTYPE html>

<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Rezultati
First Name Last Name Points

Jill Smith 50
Eve Jackson 94
John Doe 80

Jill Smith 50
Eve Jackson 94
John Doe 80
14) <!DOCTYPE html>

<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<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>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Rezultati

Jill Smith 50
Eve Jackson 94
John Doe 80

Jill Smith 50
Eve Jackson 94
John Doe 80
15) <!DOCTYPE html>

<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
table.names {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table class="names">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Rezultati

Jill Smith 50
Eve Jackson 94
John Doe 80

Jill Smith 50
Eve Jackson 94
John Doe 80
16) <!DOCTYPE html>

<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
table.names tr:nth-child(even) {
background-color: #eee;
}
table.names tr:nth-child(odd) {
background-color:#fff;
}
table.names th {
color: white
}
</style>
</head>
<body>
<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>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table class="names">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Rezultati

Jill Smith 50
Eve Jackson 94
John Doe 80

Jill Smith 50
Eve Jackson 94
John Doe 80
HTML Lists
An unordered list (default)

An unordered list with disc bullets
An unordered list with circle bullets
An unordered list with square bullets
An unordered list without bullets
An ordered list (default)
An ordered list with numbers
An ordered list with letters
An ordered list with lowercase letters
An ordered list with roman numbers
An ordered list with lowercase roman numbers
A description list
A nested list I
A nested list II
A horizontal list
A horizontal list menu
Examples explained
1) <!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Default Bullets</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Rezultati
Unordered List with Default Bullets

Coffee
Tea
Milk
2) <!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Rezultati
Unordered List with Disc Bullets

Coffee
Tea
Milk
3) <!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Rezultati
Unordered List with Circle Bullets

o Coffee
o Tea
o Milk
4) <!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Rezultati
Unordered List with Square Bullets

Coffee
Tea
Milk
5) <!DOCTYPE html>
<html>
<body>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Rezultati
Unordered List without Bullets
Coffee
Tea
Milk
6) <!DOCTYPE html>
<html>
<body>
<h2>Ordered List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Rezultati
Ordered List
1. Coffee
2. Tea
3. Milk
7) <!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Rezultati
Ordered List with Numbers

1. Coffee
2. Tea
3. Milk
8) <!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Rezultati
Ordered List with Letters

A. Coffee
B. Tea
C. Milk
9) <!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Letters</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Rezultati
Ordered List with Lowercase Letters

a. Coffee
b. Tea
c. Milk
10) <!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>

<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Rezultati
Ordered List with Roman Numbers

I. Coffee
II. Tea
III. Milk
11) <!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Rezultati
Ordered List with Lowercase Roman Numbers

i. Coffee
ii. Tea
iii. Milk
12) <!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>

<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
Rezultati
A Description List
Coffee
- black hot drink
Milk
- white cold drink
13) <!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Rezultati
A Nested List
Coffee
Tea
o Black tea
o Green tea
Milk
14) <!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>

<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
Rezultati
A Nested List
Coffee
Tea
o Black tea
o Green tea
China
Africa
Milk
15) <!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
Rezultati
Horizontal List
HTML CSS JavaScript PHP
16) <!DOCTYPE html>
<html>
<head>
<style>
ul#menu {
padding: 0;
ul#menu li {
display: inline;
ul#menu li a {
color: white;
padding: 10px 20px;

border-radius: 4px 4px 0 0;
ul#menu li a:hover {
background-color: orange;
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li><a href="/html/default.asp">HTML</a></li>
<li><a href="/css/default.asp">CSS</a></li>
<li><a href="/js/default.asp">JavaScript</a></li>
<li><a href="/php/default.asp">PHP</a></li>
</ul>
</body>
</html>
Rezultati
Horizontal List
HTML CSS JavaScript PHP
HTML Block and inline elements
Styling <div> elements

Styling <span> elements
Examples explained
1)<!DOCTYPE html>
<html>
<body>
<div style="background-color:black; color:white; padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for
two millennia, its history going back to its founding by the Romans, who
named it Londinium.</p>
</div>
</body>
</html>
Rezultati
2) <!DOCTYPE html>
<html>
<body>
<h1>My <span style="color:red">Important</span> Heading</h1>
</body>
</html>
Rezultati
My Important Heading
London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing HTML Classes
Classing <div> elements I

Classing <div> elements II
Classing <span> elements
Examples explained
1)<!DOCTYPE html>
<html>
<head>
<style>
.cities {
background-color:black;
color:white;
margin:20px;
padding:20px;
</style>
</head>
<body>
<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two
millennia, its history going back to its founding by the Romans, who named it
Londinium.</p>
</div>
</body>
</html>
Rezultati
2)<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
color:white;
margin:20px;
padding:20px;
</style>
</head>
<body>
<h2>London</h2>
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
millennia, its history going back to its founding by the Romans, who named it
Londinium.</p>
</div>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
<p>Situated on the Seine River, it is at the heart of the le-de-France region, also
known as the rgion parisienne.</p>
<p>Within its metropolitan area is one of the largest population centers in Europe,
with over 12 million inhabitants.</p>
</div>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most
populous metropolitan area in the world.</p>
<p>It is the seat of the Japanese government and the Imperial Palace, and the
home of the Japanese Imperial Family.</p>
<p>The Tokyo prefecture is part of the world's most populous metropolitan area
with 38 million people and the world's largest urban economy.</p>
</div>
</body>
</html>
Rezultati
3)<!DOCTYPE html>
<html>
<head>
<style>
span.note {font-size:120%;color:red;}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
Rezultati
My Important Heading
This is some important text.
HTML Layout
Layout using <div> elements

Layout using semantic elements
Layout using <table> elements
Examples explained
1)<!DOCTYPE html>
<html>
<head>
<style>
#header {
color:white;
text-align:center;
padding:5px;
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
#footer {
color:white;
clear:both;
text-align:center;
padding:5px;
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo
</div>
<div id="section">
<h2>London</h2>
Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div id="footer">
Copyright W3Schools.com
</div>
</body>
</html>
Rezultat
City Gallery
London
Paris
Tokyo
London
London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
2)<!DOCTYPE html>
<html>
<head>
<style>
header {
color:white;
text-align:center;
padding:5px;
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
section {
width:350px;
float:left;
padding:10px;
footer {
color:white;
clear:both;
text-align:center;
padding:5px;
</style>
</head>
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo
</nav>
<section>
<h1>London</h1>
Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
millennia,
its history going back to its founding by the Romans, who named it Londinium.</p>
</section>
<footer>
</footer>
</body>
</html>
Rezultati
3)<!DOCTYPE html>
<html>
<head>
<style>
table.lamp {
width:100%;
border:1px solid #d4d4d4;
table.lamp th, td {
padding:10px;
table.lamp th {
width:40px;
}
</style>
</head>
<body>
<table class="lamp">
<tr>
<th>
<img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
</th>
<td>
The table element was not designed to be a layout tool.
</td>
</tr>
</table>
</body>
</html>
Rezultati
HTML IFrame
Inline frame (a frame inside an HTML page)
Examples explained
1)<!DOCTYPE html>
<html>
<body>
<iframe src="demo_iframe.htm"></iframe>
</body>
</html>
Rezultati
HTML head Elements
A valid HTML document with no <html> <body, and <head>

A valid HTML document with no <head> element
The <title> element defines the document title
The <style> element contains style information
The <link> element defines a relationship to an external resource
The <meta> element defines special meta information
The <script> element defines client-side JavaScripts
The <base> element defines the base URL for all URLs
Examples explained
1)<!DOCTYPE html>
<title>Page Title</title>
Rezultati
This is a heading
2)<!DOCTYPE html>
<html>
<body>
</body>
</html>
Rezultati
This is a heading
3)<!DOCTYPE html>
<html>
<body>
<p>The content of the body element is displayed in the browser window.</p>
<p>The content of the title element is displayed in the browser tab, in favorites and
in search engine results.</p>
</body>
</html>
Rezultati
The content of the body element is displayed in the browser window.
The content of the title element is displayed in the browser tab, in favorites and in
search engine results.
4)<!DOCTYPE html>
<html>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
<body>
</body>
</html>
Rezultati
5)<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>
</body>
</html>
Rezultati
6)<!DOCTYPE html>
<html>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta charset="UTF-8">
<body>
<p>All meta information goes before the body.</p>
</body>
</html>
Rezultati
All meta information goes before the body.

7)<!DOCTYPE html>
<html>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Rezultati
8)<!DOCTYPE html>
<html>
<base href="http://www.w3schools.com/images/" target="_blank">
<body>
<img src="html5.gif">
<p>
Since we have specified a base URL, the browser will look for the image "html5.gif"
at "http://www.w3schools.com/images/html5.gif"
</p>
<p><a href="http://www.w3schools.com">W3Schools</a>
</p>
<p>
The link above opens in a new window. This is because the base target is set to
"_blank".
</p>
</body>
</html>
Rezultati
Since we have specified a base URL, the browser will look for the image "html5.gif"
at "http://www.w3schools.com/images/html5.gif"
W3Schools
The link above opens in a new window. This is because the base target is set to
"_blank".
HTML Scripts
Insert a script
Use of the <noscript> tag
Examples explained
1)<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
</script>
</body>
</html>
Rezultati
Hello JavaScript!
2)<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written inside the
noscript element.</p>
</body>
</html>
Rezultati
Hello JavaScript!
A browser without support for JavaScript will show the text written inside the noscript
element.
HTML Forms
Form with text input

Form with radio button input
Form with text fields and a submit button
Form with a text fields without a name attribute
Grouping Form Data
Send e-mail from a form
Examples explained
1)<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text input field is 20 characters.</p>
</body>
</html>
Rezultati
2)<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
</body>
</html>
Rezultati
Male
Female
Other
3)<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<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>
Rezultati
First name:
Mickey
Last name:
Mouse
Submit
If you click the "Submit" button, the form-data will be sent to a page called
"action_page.php".
4)<!DOCTYPE html>
<html>
<body>
First name:<br>
<input type="text" value="Mickey">

<br>
Last name:<br>
<br><br>
</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>
Rezultati
First name:
Mickey
Last name:
Mouse
Submit
If you click the "Submit" button, the form-data will be sent to a page called
"action_page.php".
Notice that the value of the "First name" field will not be submitted, because the input
element does not have a name attribute.
5)<!DOCTYPE html>
<html>
<body>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<br><br>
</fieldset>
</form>
</body>
</html>
Rezultati
6)<!DOCTYPE html>
<html>
<body>
<h2>Send e-mail to someone@example.com:</h2>
<form action="MAILTO:someone@example.com" method="post"

enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment"
size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
Rezultati
Send e-mail to someone@example.com:

Name:
your name
E-mail:
your email
Comment:
your comment
Send Reset
HTML Form Elements
A simple drop-down list

A drop-down list with a pre-selected value
A textarea (a multi-line text input field)
An input button
Using the <datalist> Element
Using the <keygen> Element
Using the <output> Element
Examples explained
1)<!DOCTYPE html>
<html>
<body>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
Rezultati
2)<!DOCTYPE html>
<html>
<body>
<p>You can preselect an option with the selected attribute.</p>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
</form>
</body>
</html>
Rezultati
3)<!DOCTYPE html>
<html>
<body>
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<br><br>
</form>
</body>
</html>
Rezultati
4)<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
Rezultati
5)<!DOCTYPE html>
<html>
<body>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and

earlier).</p>
</body>
</html>
Rezultati
6)<!DOCTYPE html>
<html>
<body>
Username: <input type="text" name="user">
<br><br>
Encryption: <keygen name="security">
<br><br>
</form>
</body>
</html>
Rezultati
7)<!DOCTYPE html>
<html>
<body>
<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>
<br><br>
</form>
</body>
</html>
Rezultati
HTML Input Types
Input type text
Input type password
Input type radio
Input type checkbox
Input type button
Input type number - with restrictions
Input type number - with steps
Input type date - with date picker
Input type date - with restrictions
Input type color - with color picker
Input type range
Input type month
Input type week
Input type time
Input type datetime
Input type datetime-local
Input type email
Input type search
Input type tel
Input type url
Examples explained
1)<!DOCTYPE html>
<html>
<body>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
<br><br>
</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>
Rezultati
First name:
Last name:
Submit
Note that the form itself is not visible.
Also note that the default width of a text field is 20 characters.
2)<!DOCTYPE html>
<html>
<body>
<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>
<p>The characters in a password field are masked (shown as asterisks or

circles).</p>
</body>
</html>
Rezultati
User name:
User password:
The characters in a password field are masked (shown as asterisks or circles).
3)<!DOCTYPE html>
<html>
<body>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
</form>
</body>
</html>
Rezultati
Male
Female
Other
Submit
4)<!DOCTYPE html>
<html>
<body>
<input type="checkbox" name="vehicle1" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car">I have a car
<br><br>
</form>
</body>
</html>
Rezultati
I have a bike
I have a car
Submit
5)<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</body>
</html>
Rezultati
6)<!DOCTYPE html>
<html>
<body>
<p>
Depending on browser support:<br>
Numeric restrictions will apply in the input field.
</p>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
<p><b>Note:</b> type="number" is not supported in IE9 and earlier.</p>
</body>
</html>
Rezultati
7)<!DOCTYPE html>
<html>
<body>
<p>
Fixed steps will apply in the input field.
</p>
Quantity:
<input type="number" name="points"
min="0" max="100" step="10" value="30">
</form>
<p><b>Note:</b>type="number" is not supported in IE9 and earlier.
</p>
</body>
</html>
Rezultati
8)<!DOCTYPE html>
<html>
<body>
<p>
A date picker can pop-up when you enter the input field.
</p>
Birthday:
<input type="date" name="bday">
</form>
<p><b>Note:</b> type="date" is not supported in Internet Explorer.</p>
</body>
</html>
Rezultati
9)<!DOCTYPE html>
<html>
<body>
Enter a date before 1980-01-01:<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
Enter a date after 2000-01-01:<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
</form>
<p><strong>Note:</strong>
type="date" is not supported in Internet Explorer.</p>
</body>
</html>
Rezultati
10)<!DOCTYPE html>
<html>
<body>
<p>
A color picker can pop-up when you enter the input field.
</p>
Select your favorite color:
<input type="color" name="favcolor" value="#ff0000">
</form>
<p><b>Note:</b> type="color" is not supported in Internet Explorer.</p>

</body>
</html>
Rezultati
11)<!DOCTYPE html>
<html>
<body>
<p>
The input type "range" can be displayed as a slider control.
</p>
<form action="action_page.php" method="get">
Points:
<input type="range" name="points" min="0" max="10">
</form>
<p>
<b>Note:</b>
type="range" is not supported in Internet Explorer 9 and earlier versions.
</p>
</body>
</html>
Rezultati
12)<!DOCTYPE html>
<html>
<body>
<p>
</p>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
<p><b>Note:</b>
type="month" is not supported in Internet Explorer.
</p>
</body>
</html>
Rezultati
13)<!DOCTYPE html>
<html>
<body>
<p>
</p>
Select a week:
<input type="week" name="year_week">
</form>
<p><b>Note:</b>
type="week" is not supported in Internet Explorer.
</p>
</body>
</html>
Rezultati
14)<!DOCTYPE html>
<html>
<body>
<p>
A time picker might pop-up when you enter the input field.
</p>
Select a time:
<input type="time" name="usr_time">
</form>
<p><b>Note:</b>
type="time" is not supported in Firefox or Internet Explorer.
</p>
</body>
</html>
Rezultati
15)<!DOCTYPE html>
<html>
<body>
<p>
</p>
Birthday (date and time):
<input type="datetime" name="bdaytime">
</form>
<p><b>Note:</b> type="datetime" is not supported in Chrome, Firefox, or

Internet Explorer.</p>
</body>
</html>
Rezultati
16)<!DOCTYPE html>
<html>
<body>
<p>
</p>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
<input type="submit" value="Send">
</form>
<p><b>Note:</b>
type="datetime-local" is not supported in Firefox and Internet Explorer.
</p>
</body>
</html>
Rezultati
17)<!DOCTYPE html>
<html>
<body>
E-mail:
<input type="email" name="email">
</form>
<p>
<b>Note:</b>type="email" is not supported in IE9 and earlier.</p>
</body>
</html>
Rezultati
18)<!DOCTYPE html>
<html>
<body>
Search Google:
<input type="search" name="googlesearch">
</form>
</body>
</html>
Rezultati
19)<!DOCTYPE html>
<html>
<body>
Telephone:
<input type="tel" name="usrtel">
</form>
<p><b>Note:</b> type="tel" is supported only in Safari 8.</p>
</body>
</html>
Rezultati
20)<!DOCTYPE html>
<html>
<body>
Add your homepage:

<input type="url" name="homepage">
</form>
<p><b>Note:</b>
The type="url" is not supported in IE9 and earlier versions.</p>
</body>
</html>
Rezultati
HTML Input Attributes
The autocomplete attribute

The novalidate attribute
The autofocus_attribute
The form attribute
The formaction attribute
The formenctype attribute
The formmethod attribute
The formnovalidate attribute
The formtarget attribute
The height and width attributes
The list attribute
The min and max attributes
The multiple attribute
The pattern attribute
The placeholder attribute
The required attribute
The step attribute
Examples explained
1)<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
</form>
<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>
</body>
</html>
Rezultati
2)<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" novalidate>

E-mail: <input type="email" name="user_email">
</form>
<p><strong>Note:</strong> The novalidate attribute of the form tag is not

supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
Rezultati
3)<!DOCTYPE html>
<html>
<body>
First name:<input type="text" name="fname" autofocus><br>
</form>
<p><strong>Note:</strong> The autofocus attribute of the input tag is not

supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Rezultati
4)<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" id="form1">

First name: <input type="text" name="fname"><br>
</form>
<p>The "Last name" field below is outside the form element, but still part of the
form.</p>
Last name: <input type="text" name="lname" form="form1">
</body>
</html>
Rezultati
5)<!DOCTYPE html>
<html>
<body>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo_admin.asp" value="Submit as admin">
</form>
<p><strong>Note:</strong> The formaction attribute of the input tag is not

</body>
</html>
Rezultati
6)<!DOCTYPE html>
<html>
<body>
<form action="demo_post_enctype.asp" method="post">

<input type="submit" formenctype="multipart/form-data" value="Submit as

Multipart/form-data">
</form>
<p><strong>Note:</strong> The formenctype attribute of the input tag is not

</body>
</html>
Rezultati
7)<!DOCTYPE html>
<html>
<body>
<form action="action_page.php" method="get">

<input type="submit" formmethod="post" formaction="demo_post.asp"

value="Submit using POST">
</form>
<p><strong>Note:</strong> The formmethod attribute of the input tag is not

</body>
</html>
Rezultati
8)<!DOCTYPE html>
<html>
<body>
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formnovalidate value="Submit without validation">
</form>
<p><strong>Note:</strong> The formnovalidate attribute of the input tag is not

</body>
</html>
Rezultati
9)<!DOCTYPE html>
<html>
<body>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
<p><strong>Note:</strong> The formtarget attribute of the input tag is not

</body>
</html>
Rezultati
10)<!DOCTYPE html>
<html>
<body>
<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>
Rezultati
11)<!DOCTYPE html>
<html>
<body>
Webpage: <input type="url" list="url_list" name="link">
<datalist id="url_list">
<option label="W3Schools" value="http://www.w3schools.com">
<option label="Google" value="http://www.google.com">
<option label="Microsoft" value="http://www.microsoft.com">
</datalist>
</form>
</body>
</html>
Rezultati
12)<!DOCTYPE html>
<html>
<body>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
</form>
<p><strong>Note:</strong> The max and min attributes of the input tag is not
supported in Internet Explorer 9 and earlier versions, or in Firefox.</p>
<p><strong>Note:</strong> The max and min attributes will not work for dates
and time in Internet Explorer 10, since IE 10 does not support these input
types.</p>
</body>
</html>
Rezultati
13)<!DOCTYPE html>
<html>
<body>
Select images: <input type="file" name="img" multiple>
</form>
<p>Try selecting more than one file when browsing for files.</p>
<p><strong>Note:</strong> The multiple attribute of the input tag is not
</body>
</html>
Rezultati
14)<!DOCTYPE html>
<html>
<body>
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}"

title="Three letter country code">
</form>
<p><strong>Note:</strong> The pattern attribute of the input tag is not supported
in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
Rezultati
15)<!DOCTYPE html>
<html>
<body>
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
</form>
<p><strong>Note:</strong> The placeholder attribute of the input tag is not
</body>
</html>
Rezultati
16)<!DOCTYPE html>
<html>
<body>
Username: <input type="text" name="usrname" required>
</form>
<p><strong>Note:</strong> The required attribute of the input tag is not

</body>
</html>
Rezultati
17)<!DOCTYPE html>
<html>
<body>
Username: <input type="text" name="usrname" required>
</form>
<p><strong>Note:</strong> The required attribute of the input tag is not

</body>
</html>
Rezultati
17)<!DOCTYPE html>
<html>
<body>
<input type="number" name="points" step="3">
</form>
<p><strong>Note:</strong> The step attribute of the input tag is not supported in

Internet Explorer 9, and earlier versions.</p>
</body>
</html>
Rezultati
HTML5 Canvas
Draw on the canvas with JavaScript

Draw a line with lineTo()
Draw a circle with arc()
Draw a text with fillText()
Draw a text with strokeText()
Draw a linear gradient
Draw a circular gradient
Draw an image with drawImage()
Examples explained
1)<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid

#c3c3c3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
Rezultati
2)<!DOCTYPE html>
<html>
<body>

#d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
Rezultati
3)<!DOCTYPE html>
<html>
<body>

#d3d3d3;">
<script>
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
Rezultati
4)<!DOCTYPE html>
<html>
<body>

#d3d3d3;">
<script>
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>
</body>
</html>
Rezultati
5)<!DOCTYPE html>
<html>
<body>

#d3d3d3;">
<script>

ctx.font = "30px Arial";
ctx.strokeText("Hello World",10,50);
</script>
</body>
</html>
Rezultati
6)<!DOCTYPE html>
<html>
<body>

#d3d3d3;">
<script>
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
</script>
</body>
</html>
Rezultati
7)<!DOCTYPE html>
<html>
<body>

#d3d3d3;">
<script>
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
</script>
</body>
</html>
Rezultati
8)<!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;">
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>
</body>
</html>
Rezultati
HTML5 SVG
SVG Circle
SVG Rectangle
SVG Rounded Rectangle
SVG Star
SVG Logo
Examples explained
1)<!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>
Rezultati
2)<!DOCTYPE html>
<html>
<body>
<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>
Rezultati
3)<!DOCTYPE html>
<html>
<body>
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>
Rezultati
4)<!DOCTYPE html>
<html>
<body>
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
Rezultati
5)<!DOCTYPE html>
<html>
<body>
<svg height="130" width="500">

<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%"
style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana"
x="50" y="86">SVG</text>
</svg>
</body>
</html>
Rezultati
HTML5 Media
Play Bunny
Play bear video with controls
Play bear video with autoplay
Play Horse sound with controls
Examples explained
1)<!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 HTML5 video.
</video>
<p>
Video courtesy of
<a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>
Rezultati
2)<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
Rezultati
3)<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
Rezultati
4)<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Rezultati
HTML5 Geolocation
Get geolocation coordinates

Handle geolocation errors
Get geolocation with a map
Get geolocation with Google map script
Get geolocation and watch the position
Examples explained
1)<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
</script>
</body>
</html>
Rezultati
2)<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Latitude: " + position.coords.latitude +
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."

break;
</script>
</body>
</html>
Rezultati
3)<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position.</p>
<div id="mapholder"></div>
<script>
} else {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img
src='"+img_url+"'>";
break;
break;
case error.TIMEOUT:
break;
break;
</script>
</body>
</html>
Rezultati
4)<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position.</p>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
} else {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon)
mapholder = document.getElementById('mapholder')
mapholder.style.height = '250px';
mapholder.style.width = '500px';
var myOptions = {
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
var map = new google.maps.Map(document.getElementById("mapholder"),

myOptions);
var marker = new google.maps.Marker({position:latlon,map:map,title:"You are
here!"});
break;
break;
case error.TIMEOUT:
break;
break;
</script>
</body>
</html>
Rezultati
5)<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";}
x.innerHTML="Latitude: " + position.coords.latitude +
</script>
</body>
</html>
Rezultati
HTML5 Local Storage
Store a name permanently

Store a counter permanently
Store a counter for one session
Examples explained
1)<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML =
localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not

support Web Storage...";
</script>
</body>
</html>
Rezultati
Smith
2)<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
document.getElementById("result").innerHTML = "You have clicked the button

" + localStorage.clickcount + " time(s).";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does

not support web storage...";
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue
to count (is not reset).</p>
</body>
</html>
Rezultati
3)<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button
" + sessionStorage.clickcount + " time(s) in this session.";
} else {

not support web storage...";
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter is reset.</p>
</body>
</html>
Rezultati
More HTML5 Examples
HTML5 drag and drop

HTML5 application cache
HTML5 web workers
HTML5 server sent events
1)<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true"

ondragstart="drag(event)" width="336" height="69">
</body>
</html>
Rezultati
2)<!DOCTYPE html>
<html manifest="demo_html.appcache">
<body>
<script src="demo_time.js"></script>
<p id="timePara"><button onclick="getDateTime()">Get Date and

Time</button></p>
<p><img src="img_logo.gif" width="336" height="69"></p>
<p>Try opening <a href="tryhtml5_html_manifest.htm" target="_blank">this

page</a>, then go offline, and reload the page. The script and the image should
still work.</p>
</body>
</html>
Rezultati
3)<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not

support Web Workers.</p>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {

not support Web Workers...";
}
function stopWorker() {
w.terminate();
w = undefined;
</script>
</body>
</html>
Rezultati
4)<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>
<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not

support server-sent events...";
</script>
</body>
</html>
Rezultati
HTML Element Reference
W3Schools Home
Next Reference
HTML Tags Ordered Alphabetically

= New in HTML5.
Tag Description
 Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation or an acronym
<acronym> Not supported in HTML5. Use <abbr> instead.

Defines an acronym
<address> Defines contact information for the author/owner of a document
<applet> Not supported in HTML5. Use <embed> or <object> instead.

Defines an embedded applet
<area> Defines an area inside an image-map
<article> Defines an article
<aside> Defines content aside from the page content
<audio> Defines sound content
<b> Defines bold text
<base> Specifies the base URL/target for all relative URLs in a document
<basefont> Not supported in HTML5. Use CSS instead.

Specifies a default color, size, and font for all text in a document
<bdi> Isolates a part of text that might be formatted in a different direction

text outside it
<bdo> Overrides the current text direction
<big> Not supported in HTML5. Use CSS instead.

Defines big text
<blockquote> Defines a section that is quoted from another source
<body> Defines the document's body

<br> Defines a single line break
<button> Defines a clickable button
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption> Defines a table caption
<center> Not supported in HTML5. Use CSS instead.

Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
<col> Specifies column properties for each column within a <colgroup> ele
<colgroup> Specifies a group of one or more columns in a table for formatting
<datalist> Specifies a list of pre-defined options for input controls
<dd> Defines a description/value of a term in a description list
<del> Defines text that has been deleted from a document
<details> Defines additional details that the user can view or hide
<dfn> Represents the defining instance of a term
<dialog> Defines a dialog box or window
<dir> Not supported in HTML5. Use <ul> instead.

Defines a directory list
<div> Defines a section in a document
<dl> Defines a description list
<dt> Defines a term/name in a description list
<em> Defines emphasized text
<embed> Defines a container for an external (non-HTML) application
<fieldset> Groups related elements in a form
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content
<font> Not supported in HTML5. Use CSS instead.

Defines font, color, and size for text
<footer> Defines a footer for a document or section
<form> Defines an HTML form for user input
<frame> Not supported in HTML5.

Defines a window (a frame) in a frameset
<frameset> Not supported in HTML5.

Defines a set of frames
<h1> to <h6> Defines HTML headings
<head> Defines information about the document
<header> Defines a header for a document or section
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<i> Defines a part of text in an alternate voice or mood
<iframe> Defines an inline frame

<img> Defines an image
<input> Defines an input control
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<keygen> Defines a key-pair generator field (for forms)
<label> Defines a label for an <input> element
<legend> Defines a caption for a <fieldset> element
<li> Defines a list item
<link> Defines the relationship between a document and an external resour

to link to style sheets)
<main> Specifies the main content of a document
<map> Defines a client-side image-map
<mark> Defines marked/highlighted text
<menu> Defines a list/menu of commands

<menuitem> Defines a command/menu item that the user can invoke from a popu
<meta> Defines metadata about an HTML document
<meter> Defines a scalar measurement within a known range (a gauge)
<nav> Defines navigation links
<noframes> Not supported in HTML5.

Defines an alternate content for users that do not support frames
<noscript> Defines an alternate content for users that do not support client-side
<object> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<output> Defines the result of a calculation
<p> Defines a paragraph

<param> Defines a parameter for an object
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<rp> Defines what to show in browsers that do not support ruby annotatio
<rt> Defines an explanation/pronunciation of characters (for East Asian ty
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<script> Defines a client-side script
<section> Defines a section in a document
<select> Defines a drop-down list

<small> Defines smaller text
<source> Defines multiple media resources for media elements (<video> and
<span> Defines a section in a document
<strike> Not supported in HTML5. Use <del> or <s> instead.

Defines strikethrough text
<strong> Defines important text
<style> Defines style information for a document
<sub> Defines subscripted text
<summary> Defines a visible heading for a <details> element
<sup> Defines superscripted text
<table> Defines a table
<tbody> Groups the body content in a table
<td> Defines a cell in a table
<textarea> Defines a multiline input control (text area)

<tfoot> Groups the footer content in a table
<th> Defines a header cell in a table
<thead> Groups the header content in a table
<time> Defines a date/time
<title> Defines a title for the document
<tr> Defines a row in a table
<track> Defines text tracks for media elements (<video> and <audio>)
<tt> Not supported in HTML5. Use CSS instead.

Defines teletype text
<u> Defines text that should be stylistically different from normal text
<ul> Defines an unordered list
<var> Defines a variable
<video> Defines a video or movie

<wbr> Defines a possible line-break
W3Schools Home
Next Reference
W3SCHOOLS EXAMS
HTML, CSS, JavaScript, PHP, jQuery, and XML Certifications
COLOR PICKER
SHARE THIS PAGE
LEARN MORE:
Google Maps
Animated Buttons
Modal Boxes
JS Animations
Progress Bars
Dropdowns
HTML Includes
Color Palettes

HTML Commands

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Commands

Transféré par

Droits d'auteur :

Formats disponibles

HTML Basic

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<h1>This is heading 1</h1>

<a href="http://www.w3schools.com">This is a link</a>

<img src="w3schools.jpg" alt="W3Schools.com" width="104"

The title attribute

<p title="About W3Schools">

W3Schools is a web developer's site. It provides tutorials and references covering

<a href="http://www.w3schools.com">This is a link</a>

<img src="w3schools.jpg" width="104" height="142">

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

<a href=http://www.w3schools.com>This is a link</a>

<p title=About W3Schools>

You cannot omit quotes around an attribute value

If you move the mouse over the paragraph above,

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h3>This is heading 3</h3>

<h4>This is heading 4</h4>

<h5>This is heading 5</h5>

<h6>This is heading 6</h6>

<p>The hr tag defines a horizontal rule:</p>

The hr tag defines a horizontal rule:

<title>My First HTML</title>

<p>The HTML head element contains meta data.</p>

The HTML head element contains meta data.

Meta data is data about the HTML document.

<p>This is<br>a para<br>graph with line breaks</p>

<p>In HTML, spaces and new lines are ignored:</p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

In HTML, spaces and new lines are ignored:

<p>The pre tag preserves both spaces and line breaks:</p>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

Oh, bring back my Bonnie to me.

The pre tag preserves both spaces and line breaks:

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

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

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

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

HTML Text Formatting

Bold formatting using the <b> element

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

<p><b>This text is bold.</b></p>

This text is normal.

This text is bold.

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

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

This text is normal.

This text is strong.

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

<p><i>This text is italic.</i></p>

This text is italic.

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

<p><em>This text is emphasized.</em></p>

This text is normal.

This text is emphasized.

<h2>HTML <small>Small</small> Formatting</h2>

HTML Small Formatting