0% found this document useful (0 votes)

824 views

HTML Commands

html

Uploaded by

hysenn

Available Formats

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

0% found this document useful (0 votes)

824 views

HTML Commands

html

Uploaded by

hysenn

Available Formats

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

You are on page 1/ 257

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>

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

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

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

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

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

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

<hr>

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

</body>

</html>

Rezultati

The hr tag defines a horizontal rule:

This is a paragraph.

3) <!DOCTYPE html>

<html>

<head>

<title>My First HTML</title>

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

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

Rezultati

This is a paragraph.

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.

My Bonnie lies over the ocean.

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>

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

</pre>

</body>

</html>

Rezultati

The pre tag preserves both spaces and line breaks:

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.

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

</body>
</html>

Rezultati

This is a heading

This is a paragraph.

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

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

6) <!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Rezultati

Centered heading

This is a paragraph.

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>This text is normal.</p>

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

</body>
</html>

Rezultati

This text is normal.

This text is strong.

3) <!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Rezultati
This text is normal.

This text is italic.

4) <!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

Rezultati

This text is normal.

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>

<p>Browsers usually indent blockquote elements.</p>

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>

</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;
document.getElementById("demo").innerHTML = x + y;
</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;
document.getElementById("demo").innerHTML = x + y;

5) <!DOCTYPE html>
<html>
<body>

<p>Einstein wrote: <var>E</var> =

</body>
</html>

Rezultati

Einstein wrote: E = mc2.

HTML Comments

Hidden comments
Conditional comments
Comments for debugging
Examples explained

1) <!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Rezultati

This is a paragraph.

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

</body>
</html>

Rezultati

Nuk ka

3) <!DOCTYPE html>
<html>
<body>

<!-- Do not display this at the moment

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

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

Rezultati

This is a heading

This is a paragraph.

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

Rezultati

This is a heading

This is a paragraph.

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>

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

</body>
</html>

Rezultati

This is a heading
Thisisaparagraph.

5) <!DOCTYPE html>
<html>
<head>
<style>
p#p01 {
color: blue;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>

</body>
</html>

Rezultati

This is a paragraph.

This is a paragraph.
I am different.

6) <!DOCTYPE html>
<html>
<head>
<style>
p.error {
color: red;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class="error">I am different.</p>
<p>This is a paragraph.</p>
<p class="error">I am different too.</p>

</body>
</html>

Rezultati

This is a paragraph.

I am different.

This is a paragraph.

I am different too.

7) <!DOCTYPE html>

<html>

<head>

<style>
p{

border: 1px solid grey;

</style>

</head>

<body>

<h1>This is a heading</h1>

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

</body>

</html>

Rezultati

This is a heading

This is a paragraph

8) <!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid grey;
padding: 10px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

</body>
</html>

Rezultati

This is a heading

This is a paragraph

9) <!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid grey;
padding: 10px;
margin: 30px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>

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

Rezultati

This is a heading

This is a paragraph

10) <!DOCTYPE html>

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

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>

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

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

<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>

<p>This chapter explains ba bla bla</p>

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

<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 10</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>

<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>

<p>This chapter explains ba bla bla</p>

</body>

</html>

Rezultati

Jump to Chapter 4

Chapter 1

This chapter explains ba bla bla

Chapter 2

This chapter explains ba bla bla

Chapter 3

This chapter explains ba bla bla

Chapter 4

This chapter explains ba bla bla

Chapter 5

This chapter explains ba bla bla

Chapter 6

This chapter explains ba bla bla

Chapter 7

This chapter explains ba bla bla

Chapter 8

This chapter explains ba bla bla

Chapter 9

This chapter explains ba bla bla

Chapter 10

This chapter explains ba bla bla

Chapter 11

This chapter explains ba bla bla

Chapter 12

This chapter explains ba bla bla

Chapter 13

This chapter explains ba bla bla

Chapter 14

This chapter explains ba bla bla

Chapter 15

This chapter explains ba bla bla

Chapter 16

This chapter explains ba bla bla

Chapter 17

This chapter explains ba bla bla

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:[email protected]?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:

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

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

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

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

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

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

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

</body>
</html>

Rezultati

If a browser cannot find an image, it will display the alternate text:

7) <!DOCTYPE html>

<html>

<body>

</body>

</html>
Rezultati

8) <!DOCTYPE html>

<html>

<body>

<p>The image is a link. You can click on it.</p>

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

style="width:145px;height:126px;">

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

</tr>

</table>

<hr>

<h2>1 Row and 3 Columns:</h2>

<table>

<tr>

</tr>

</table>
<hr>

<h2>3 Rows and 3 Columns:</h2>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

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

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

<tr>

</tr>

</table>

</body>

</html>

Rezultati

Jill Smith 50
Eve Jackson 94
John Doe 80

3) <!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

</style>

</head>

<body>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Rezultati

Jill Smith 50
Eve Jackson 94
John Doe 80

4) <!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 15px;

}
</style>

</head>

<body>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

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

border: 1px solid black;

border-collapse: collapse;

}
th, td {

padding: 5px;

</style>

</head>

<body>

<tr>

<th>Firstname</th>

<th>Lastname</th>

<th>Points</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Eve</td>
<td>Jackson</td>

</tr>

<tr>

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

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 5px;

th {

text-align: left;

</style>

</head>

<body>

<tr>
<th>Firstname</th>

<th>Lastname</th>

<th>Points</th>

</tr>

<tr>

<td>Smith</td>

</tr>

<tr>

<td>Jackson</td>

</tr>

<tr>

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

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 5px;

text-align: left;
}

</style>

</head>

<body>

<h2>Horizontal Headings:</h2>

<tr>

<th>Telephone</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>
<h2>Vertical Headings:</h2>

<tr>

<td>Bill Gates</td>

</tr>

<tr>

<th>Telephone:</th>

</tr>

<tr>

<th>Telephone:</th>

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

border: 1px solid black;

border-collapse: collapse;

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>

</tr>

<tr>

<td>February</td>

</tr>

</table>

</body>
</html>

Rezultati

Monthly savings
Month Savings
January $100
February $50
9) <!DOCTYPE html>

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse: collapse;

th, td {

padding: 5px;

text-align: left;

</style>

</head>

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

<tr>

<th colspan="2">Telephone</th>

</tr>

<tr>

<td>Bill Gates</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 {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>

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

<table style="width:100%">
<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 {
border: 1px solid black;
padding: 5px;
}
table {
border-spacing: 15px;
}
</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>

<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 {
border: 1px solid black;
border-collapse: collapse;
}
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 {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>

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

First Name Last Name Points

Jill Smith 50
Eve Jackson 94
John Doe 80

14) <!DOCTYPE html>

<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
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>

</body>
</html>

Rezultati

First Name Last Name Points

Jill Smith 50
Eve Jackson 94
John Doe 80

First Name Last Name Points

Jill Smith 50
Eve Jackson 94
John Doe 80

15) <!DOCTYPE html>

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table.names {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>

<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

First Name Last Name Points

Jill Smith 50
Eve Jackson 94
John Doe 80

First Name Last Name Points

Jill Smith 50
Eve Jackson 94
John Doe 80

16) <!DOCTYPE html>

<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
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 {
background-color: black;
color: white
}
</style>
</head>
<body>

<br>

</body>
</html>

Rezultati

First Name Last Name Points

Jill Smith 50
Eve Jackson 94
John Doe 80

First Name Last Name Points

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>

</ol>

</body>

</html>

Rezultati

Ordered List
1. Coffee

2. Tea

3. Milk

7) <!DOCTYPE html>

<html>

<body>

<h2>Ordered List with Numbers</h2>

<li>Coffee</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>

<li>Coffee</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>

<li>Coffee</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>

<li>Coffee</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>

<li>Coffee</li>

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

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

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

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

<li>JavaScript</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 {

background-color: black;

color: white;

padding: 10px 20px;

text-decoration: none;

border-radius: 4px 4px 0 0;

ul#menu li a:hover {

background-color: orange;

</style>

</head>

<body>

<h2>Horizontal List</h2>

<li><a href="/js/default.asp">JavaScript</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>

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

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

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

background-color:black;

color:white;

margin:20px;

padding:20px;

</style>

</head>

<body>

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

<div class="cities">
<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 {

background-color:black;

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 {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

</style>

</head>

<body>

<h1>City Gallery</h1>

</div>

London<br>

Paris<br>

Tokyo

</div>
<div id="section">

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

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

background-color:black;

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 {

background-color:black;

color:white;

clear:both;

text-align:center;

padding:5px;

</style>

</head>

<body>

<h1>City Gallery</h1>

</header>

<nav>

London<br>

Paris<br>

Tokyo

</nav>
<section>

<h1>London</h1>

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

</section>

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

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

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

<h1>This is a heading</h1>

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

Rezultati

This is a heading
This is a paragraph.

2)<!DOCTYPE html>

<html>

<title>Page Title</title>

<body>

<h1>This is a heading</h1>

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

</body>

</html>

Rezultati

This is a heading
This is a paragraph.
3)<!DOCTYPE html>

<html>

<title>Page Title</title>

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

<title>Page Title</title>

<style>

body {background-color:yellow;}

p {color:blue;}

</style>

<body>

<h1>This is a heading</h1>

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

</body>

</html>
Rezultati

5)<!DOCTYPE html>

<html>

<title>Page Title</title>

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

<body>

<h1>This is a heading</h1>

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

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

<body>

<p>All meta information goes before the body.</p>

</body>

</html>

Rezultati

All meta information goes before the body.

7)<!DOCTYPE html>
<html>

<title>Page Title</title>

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>

<title>Page Title</title>

<base href="http://www.w3schools.com/images/" target="_blank">

<body>

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

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

</script>

</body>

</html>

Rezultati

Hello JavaScript!

2)<!DOCTYPE html>

<html>

<body>

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

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

First name:<br>

<input type="text" name="firstname" value="Mickey">

<input type="text" name="lastname" value="Mouse">

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

<input type="text" name="lastname" value="Mouse">

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

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>

<legend>Personal information:</legend>

First name:<br>

<input type="text" name="firstname" value="Mickey">

<br>

Last name:<br>

<input type="text" name="lastname" value="Mouse">

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

</fieldset>

</form>

</body>

</html>

Rezultati
6)<!DOCTYPE html>

<html>

<body>

<h2>Send e-mail to [email protected]:</h2>

<form action="MAILTO:[email protected]" 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 [email protected]:

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>

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

</select>

</form>

</body>

</html>

Rezultati
2)<!DOCTYPE html>

<html>

<body>

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

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

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

</select>

</body>

</html>

Rezultati

3)<!DOCTYPE html>

<html>

<body>

<textarea name="message" rows="10" cols="30">

The cat was playing in the garden.

</textarea>

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

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

<option value="Internet Explorer">

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

Encryption: <keygen name="security">

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

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

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

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

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

<p><b>Note:</b> type="number" is not supported in IE9 and earlier.</p>

</body>

</html>

Rezultati
7)<!DOCTYPE html>

<html>

<body>

<p>

Depending on browser support:<br>

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>

Depending on browser support:<br>

A date picker can pop-up when you enter the input field.

</p>

Birthday:

<input type="date" name="bday">

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

type="date" is not supported in Internet Explorer.</p>

</body>

</html>

Rezultati
10)<!DOCTYPE html>

<html>

<body>

<p>

Depending on browser support:<br>

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>

<p>

Depending on browser support:<br>

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>

type="range" is not supported in Internet Explorer 9 and earlier versions.

</p>

</body>

</html>

Rezultati
12)<!DOCTYPE html>

<html>

<body>

<p>

Depending on browser support:<br>

A date picker can pop-up when you enter the input field.

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

<p>

Depending on browser support:<br>

A date picker can pop-up when you enter the input field.

</p>

Select a week:

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

</form>

type="week" is not supported in Internet Explorer.

</p>

</body>

</html>

Rezultati
14)<!DOCTYPE html>

<html>

<body>

<p>

Depending on browser support:<br>

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>

<p>

Depending on browser support:<br>

A date picker can pop-up when you enter the input field.

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

Depending on browser support:<br>

A date picker can pop-up when you enter the input field.

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

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>

Search Google:

<input type="search" name="googlesearch">

</form>

</body>

</html>

Rezultati

19)<!DOCTYPE html>

<html>

<body>

<form action="action_page.php">
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:

</form>

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>

<form action="action_page.php">
First name:<input type="text" name="fname" autofocus><br>

Last name: <input type="text" name="lname"><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>

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

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

<form action="action_page.php">
First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<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

supported in Internet Explorer 9 and earlier versions.</p>

</body>

</html>

Rezultati

6)<!DOCTYPE html>

<html>

<body>

<form action="demo_post_enctype.asp" method="post">

First name: <input type="text" name="fname"><br>

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

<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

supported in Internet Explorer 9 and earlier versions.</p>

</body>

</html>

Rezultati

7)<!DOCTYPE html>

<html>

<body>

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

First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

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

<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

supported in Internet Explorer 9 and earlier versions.</p>

</body>

</html>

Rezultati

8)<!DOCTYPE html>

<html>

<body>

<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

supported in Internet Explorer 9 and earlier versions, or in Safari.</p>

</body>

</html>

Rezultati

9)<!DOCTYPE html>

<html>

<body>

<form action="action_page.php">
First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><br>

<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

supported in Internet Explorer 9 and earlier versions.</p>

</body>

</html>

Rezultati

10)<!DOCTYPE html>

<html>

<body>

<form action="action_page.php">
First name: <input type="text" name="fname"><br>

Last name: <input type="text" name="lname"><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>

Rezultati

11)<!DOCTYPE html>

<html>

<body>

<form action="action_page.php">
Webpage: <input type="url" list="url_list" name="link">

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

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
supported in Internet Explorer 9 and earlier versions.</p>

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

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

</form>
<p><strong>Note:</strong> The placeholder attribute of the input tag is not
supported in Internet Explorer 9 and earlier versions.</p>

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

supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</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

supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</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>

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>

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

#d3d3d3;">

Your browser does not support the HTML5 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>

Rezultati

3)<!DOCTYPE html>
<html>

<body>

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

#d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

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

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

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script>

</body>

</html>

Rezultati
4)<!DOCTYPE html>

<html>

<body>

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

#d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

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

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

ctx.font = "30px Arial";

ctx.fillText("Hello World",10,50);

</script>
</body>

</html>

Rezultati

5)<!DOCTYPE html>

<html>

<body>

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

#d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

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

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

ctx.font = "30px Arial";

ctx.strokeText("Hello World",10,50);

</script>

</body>

</html>

Rezultati

6)<!DOCTYPE html>
<html>

<body>

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

#d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

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>

Rezultati
7)<!DOCTYPE html>

<html>

<body>

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

#d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>

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

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

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

ctx.fillRect(10,10,150,80);

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

Your browser does not support the HTML5 canvas tag.</canvas>

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

function myCanvas() {

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

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

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>

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

Rezultati

3)<!DOCTYPE html>

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

Rezultati

4)<!DOCTYPE html>

<html>

<polygon points="100,10 40,198 190,78 10,78 160,198"

style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />

Sorry, your browser does not support inline SVG.

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

Sorry, your browser does not support inline SVG.

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

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

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>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

var x = document.getElementById("demo");
function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition, showError);

} else {

x.innerHTML = "Geolocation is not supported by this browser.";

function showPosition(position) {

x.innerHTML = "Latitude: " + position.coords.latitude +

"<br>Longitude: " + position.coords.longitude;

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>

<button onclick="getLocation()">Try It</button>

var x = document.getElementById("demo");

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition, showError);

} else {

x.innerHTML = "Geolocation is not supported by this browser.";

function showPosition(position) {

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+"'>";

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

<html>

<body>

<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition, showError);

} else {

x.innerHTML = "Geolocation is not supported by this browser.";

function showPosition(position) {

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

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

<html>

<body>

<p>Click the button to get your coordinates.</p>

<button onclick="getLocation()">Try It</button>

var x = document.getElementById("demo");
function getLocation() {

if (navigator.geolocation) {

navigator.geolocation.watchPosition(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
HTML5 Local Storage

Store a name permanently

Store a counter permanently
Store a counter for one session

Examples explained

1)<!DOCTYPE html>
<html>

<body>

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

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>

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 {

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

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>

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

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 {

document.getElementById("result").innerHTML = "Sorry, your browser does

not support Web Workers...";

}
function stopWorker() {

w.terminate();

w = undefined;

</script>

</body>

</html>

Rezultati

4)<!DOCTYPE html>
<html>

<body>

<h1>Getting server updates</h1>

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

<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

Complete Download UDC Universal Decimal Classification Standard Edition Vol2 Bsi PDF All Chapters
100% (12)
Complete Download UDC Universal Decimal Classification Standard Edition Vol2 Bsi PDF All Chapters
85 pages
HTML
0% (1)
HTML
22 pages
Guide c07 740642
No ratings yet
Guide c07 740642
51 pages
Manual PHD
No ratings yet
Manual PHD
222 pages
HTML and CSS
No ratings yet
HTML and CSS
93 pages
HTML Tutorial
No ratings yet
HTML Tutorial
200 pages
Java Program
No ratings yet
Java Program
59 pages
1.1 HTML Fundamentals
No ratings yet
1.1 HTML Fundamentals
97 pages
HTML Notes
No ratings yet
HTML Notes
29 pages
HTML Tags Chart
100% (3)
HTML Tags Chart
10 pages
HTML PDF
No ratings yet
HTML PDF
3 pages
HTML Tutorials1
No ratings yet
HTML Tutorials1
134 pages
HTML Tutorials - I-Tech Software Education
100% (1)
HTML Tutorials - I-Tech Software Education
50 pages
Begin To Code With JavaScript by Rob Miles Draft
No ratings yet
Begin To Code With JavaScript by Rob Miles Draft
415 pages
Html5 PDF
100% (2)
Html5 PDF
151 pages
HTML Project On Business Schools
60% (5)
HTML Project On Business Schools
110 pages
HTML Interview Questions and Answers
No ratings yet
HTML Interview Questions and Answers
56 pages
HTML w3 Schools
No ratings yet
HTML w3 Schools
30 pages
HTML 5.2-Estandar PDF
No ratings yet
HTML 5.2-Estandar PDF
1,793 pages
Javascript
No ratings yet
Javascript
55 pages
CSS Examples
No ratings yet
CSS Examples
74 pages
Project On HTML
100% (1)
Project On HTML
15 pages
Inline CSS:: CSS: Cascading Style Sheet
No ratings yet
Inline CSS:: CSS: Cascading Style Sheet
44 pages
Center For Information and Language Engineering (CILE) Diploma in Computer Application (DCA)
No ratings yet
Center For Information and Language Engineering (CILE) Diploma in Computer Application (DCA)
4 pages
HTML Codes Foa Website
100% (1)
HTML Codes Foa Website
180 pages
Introduction To HTML (W3school)
No ratings yet
Introduction To HTML (W3school)
57 pages
HTML Tut
No ratings yet
HTML Tut
82 pages
HTML Tags Chart: Tag Name Code Example Browser View
No ratings yet
HTML Tags Chart: Tag Name Code Example Browser View
11 pages
HTML
No ratings yet
HTML
115 pages
Web Technologies Lecture Notes On Unit 2
100% (2)
Web Technologies Lecture Notes On Unit 2
35 pages
JavaScript Tutorial
100% (27)
JavaScript Tutorial
20 pages
HTML Shortcuts
No ratings yet
HTML Shortcuts
4 pages
HTML - Note
100% (1)
HTML - Note
8 pages
SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
No ratings yet
SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
8 pages
Python RegEx
No ratings yet
Python RegEx
8 pages
HTML Css Java Tutorial
0% (1)
HTML Css Java Tutorial
80 pages
Unit-1 HTML Common Tags
No ratings yet
Unit-1 HTML Common Tags
45 pages
Java Programs
No ratings yet
Java Programs
7 pages
HTML
No ratings yet
HTML
68 pages
Java Tutorials RoseIndia
No ratings yet
Java Tutorials RoseIndia
209 pages
Chapter 04 PHP and Mysql
No ratings yet
Chapter 04 PHP and Mysql
49 pages
HTML Css W3schools
No ratings yet
HTML Css W3schools
54 pages
Web Technology Lab: Department of Computer Science & Engineering
No ratings yet
Web Technology Lab: Department of Computer Science & Engineering
42 pages
HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
No ratings yet
HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text
80 pages
The Java Programming Language: Topics
No ratings yet
The Java Programming Language: Topics
64 pages
Previous Next
No ratings yet
Previous Next
8 pages
Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by
100% (1)
Prof. Varsha Tank (IT/ICT Dept. - Ljiet) : Presented by
12 pages
Module 3
No ratings yet
Module 3
60 pages
JSP Notes (Java Server Page) RNSIT Notes
33% (3)
JSP Notes (Java Server Page) RNSIT Notes
38 pages
CSS Elements List
No ratings yet
CSS Elements List
4 pages
All You Should Know About HTML.
No ratings yet
All You Should Know About HTML.
169 pages
Sample Codes
No ratings yet
Sample Codes
118 pages
What Is HTML????
No ratings yet
What Is HTML????
12 pages
Web Development Notes
No ratings yet
Web Development Notes
16 pages
HTML
No ratings yet
HTML
3 pages
DOCTYPE html
No ratings yet
DOCTYPE html
19 pages
HTML Basic Tags
No ratings yet
HTML Basic Tags
10 pages
What Is HTML
No ratings yet
What Is HTML
28 pages
HTML Introduction
No ratings yet
HTML Introduction
92 pages
HTML Headings Are Defined With The To Tags
No ratings yet
HTML Headings Are Defined With The To Tags
7 pages
HTML N HTML 5 Tutorial
No ratings yet
HTML N HTML 5 Tutorial
143 pages
HTML N HTML 5 Tutorial
100% (1)
HTML N HTML 5 Tutorial
143 pages
Cybersecurity Challenges and Solutions
No ratings yet
Cybersecurity Challenges and Solutions
5 pages
Lesson 1: Comparing OSI Model Network Functions
No ratings yet
Lesson 1: Comparing OSI Model Network Functions
24 pages
Abusing HTML 5 Structured Client-Side Storage
75% (4)
Abusing HTML 5 Structured Client-Side Storage
12 pages
Social Media Marketing: The Pros and Cons
100% (1)
Social Media Marketing: The Pros and Cons
4 pages
Thesis Nearly
No ratings yet
Thesis Nearly
49 pages
Learn Programming - Coding Courses
33% (3)
Learn Programming - Coding Courses
2 pages
OSI Model Notes
No ratings yet
OSI Model Notes
3 pages
Guide To Firewalls and Network Security: Chapter 7 Solutions
No ratings yet
Guide To Firewalls and Network Security: Chapter 7 Solutions
3 pages
Gktoday December 2 PDF
No ratings yet
Gktoday December 2 PDF
125 pages
Viorel's Tutorial - Front End Web Development & Digital Expertise
No ratings yet
Viorel's Tutorial - Front End Web Development & Digital Expertise
12 pages
25 Amazing Ebook Websites PDF
No ratings yet
25 Amazing Ebook Websites PDF
8 pages
Ener Vista
No ratings yet
Ener Vista
27 pages
LTE WorldSummit Brochure 2013 #LTEWS
No ratings yet
LTE WorldSummit Brochure 2013 #LTEWS
18 pages
Thinkific Case Study - Elizabeth Rider PDF
No ratings yet
Thinkific Case Study - Elizabeth Rider PDF
8 pages
Getting Started On SimplyCodes Guide
No ratings yet
Getting Started On SimplyCodes Guide
7 pages
Vnrvjiet: : Sheet No Name of Laboratory: Name of Experiment: Web Technologies Experiment No: 12
No ratings yet
Vnrvjiet: : Sheet No Name of Laboratory: Name of Experiment: Web Technologies Experiment No: 12
25 pages
City & Guilds Training Presentation For All
No ratings yet
City & Guilds Training Presentation For All
109 pages
Fortios Firewall 56
No ratings yet
Fortios Firewall 56
380 pages
Chapter 2
No ratings yet
Chapter 2
54 pages
Algosec Security Management Suite
No ratings yet
Algosec Security Management Suite
4 pages
2.2.1.12 Lab - Windows Task Manager
No ratings yet
2.2.1.12 Lab - Windows Task Manager
11 pages
Emerging_Technologies_MCQ_
No ratings yet
Emerging_Technologies_MCQ_
308 pages
Asking To Make An Alteration
No ratings yet
Asking To Make An Alteration
2 pages
Panasonic Label PDF
No ratings yet
Panasonic Label PDF
1 page
Shads Billionaires Guide v7
No ratings yet
Shads Billionaires Guide v7
199 pages
G - To - Fayissaa Report
No ratings yet
G - To - Fayissaa Report
42 pages
Eng TELE-satellite 0911
No ratings yet
Eng TELE-satellite 0911
146 pages
Gantt - Work Wages and Profits PDF
No ratings yet
Gantt - Work Wages and Profits PDF
215 pages