HTML Exampleg

1
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
</body>
</html>
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
This is a paragraph.
<!DOCTYPE html>
<html>
<body>
<a href="http://www.w3schools.com">
This is a link</a>
</body>
</html>
This is a link
2

<!DOCTYPE html>
<html>
<body>

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

<!DOCTYPE html>
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<hr>
<hr>
</body>
</html>
The hr tag defines a horizontal rule:



<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
3

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 your browser window. If you resize the
browser window, the number of lines in this paragraph will change.
</p>

</body>
</html>
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 your browser window. If you
resize the browser window, the number of lines in this paragraph will change.
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
This is
a para
graph with line breaks
<!DOCTYPE html>
<html>
<body>

<p>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

4

Oh, bring back my Bonnie to me.
</p>

<p>Note that your browser ignores the layout!</p>

</body>
</html>
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.
Note that your browser ignores the layout!
<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>
This text is bold
This text is strong
This text is emphasized
This text is italic
This text is small
This is
subscript
and
superscript

<!DOCTYPE html>
<html>
<body>

<pre>
This is
preformatted text.
It preserves both spaces
5

and line breaks.
</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
print i
next i
</pre>

</body>
</html>

This is
preformatted text.
It preserves both spaces
and line breaks.
The pre tag is good for displaying computer code:
for i = 1 to 10
print i
next i

<!DOCTYPE html>
<html>
<body>

<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br>

<p><b>Note:</b> These tags are often used to display computer/programming code.</p>

</body>
</html>

Computer code
Keyboard input
Sample text
Computer variable
Note: These tags are often used to display computer/programming code.
<!DOCTYPE html>
<html>
6

<body>

<address>
Written by W3Schools.com<br>
<a href="mailto:us@example.org">Email us</a><br>
Address: Box 564, Disneyland<br>
Phone: +12 34 56 78
</address>

</body>
</html>
Written by W3Schools.com
Email us
Address: Box 564, Disneyland
Phone: +12 34 56 78
<!DOCTYPE html>
<html>
<body>

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Can I get this <abbr title="as soon as possible">ASAP</abbr>?</p>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over
the acronym or abbreviation.</p>

</body>
</html>
The WHO was founded in 1948.
Can I get this ASAP?
The title attribute is used to show the spelled-out version when holding the mouse pointer
over the acronym or abbreviation.
<!DOCTYPE html>
<html>
<body>

<p>
If your browser supports bi-directional override (bdo), the next line will be written from the right to
the left (rtl):
</p>

<bdo dir="rtl">
Here is some Hebrew text
</bdo>

7

</body>
</html>
If your browser supports bi-directional override (bdo), the next line will be written from
the right to the left (rtl):
Here is some Hebrew text
<!DOCTYPE html>
<html>
<body>

<h2>The blockquote Element</h2>
<p>The blockquote element specifies a section that is quoted from another source.</p>
<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The worlds 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>
<p><b>Note:</b> Browsers usually indent blockquote elements.</p>

<h2>The q Element</h2>
<p>The q element defines a short quotation.</p>

<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
<p><b>Note:</b> Browsers insert quotation marks around the q element.</p>

</body>
</html>
The blockquote Element
The blockquote element specifies a section that is quoted from another source.
Here is a quote from WWF's website:
For 50 years, WWF has been protecting the future of nature. The worlds 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.
Note: Browsers usually indent blockquote elements.
The q Element
The q element defines a short quotation.
8

WWF's goal is to: Build a future where people live in harmony with nature. We hope
they succeed.
Note: Browsers insert quotation marks around the q element.
<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

<p>Notice that browsers will strikethrough deleted text and underline inserted text.</p>

</body>
</html>
My favorite color is blue red!
Notice that browsers will strikethrough deleted text and underline inserted text.
<!DOCTYPE html>
<html>
<body>




</body>
</html>
<!DOCTYPE html>
<html>
<body>



</body>
</html>
Blank
<!DOCTYPE html>
<html>
<body>



</body>
</html>
Blank
<!DOCTYPE html>
<html>
<body>

<div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-
color:#40B3DF;"></div>

<div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;">

<div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-
color:#8AC007;"></div>

<h3>Look! Styles and colors</h3>
<div style="letter-spacing:12px;">Manipulate Text</div>
<div style="color:#40B3DF;">Colors <span style="background-
color:#B4009E;color:#ffffff;">Boxes</span></div>
<div style="color:#000000;">and more...</div>

</div>

</body>
</html>

<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
10

<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Center-aligned heading</h1>

</body>
</html>
Center-aligned heading
<!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>
This is a heading
<!DOCTYPE html>
11

<html>
<body>

<p style="font-family:verdana;font-size:110%;color:green">
This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph
with some text in it. This is a paragraph with some text in it.
</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
h2 {color:blue;}
p {color:green;}
</style>
</head>

<body>

<h1>All header 1 elements will be red</h1>
<h2>All header 2 elements will be blue</h2>
<p>All text in paragraphs will be green.</p>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<a href="http://www.w3schools.com" style="text-decoration:none;">Visit W3Schools.com!</a>

</body>
</html>

12

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
<h1>I am formatted with an external style sheet</h1>
<p>Me too!</p>
</body>

</html>

<!DOCTYPE html>
<html>
<body>

<p>
<a href="default.asp">HTML Tutorial</a> This is a link to a page on this website.
</p>

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

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Create a link of an image:
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" width="42" height="42"></a></p>

<p><b>Note:</b> For IE 9 and earlier versions, the image-link above will show a border around the
image. To remove the border around the image, add style="border:0;" to the img element.</p>

<p>Image-link: Still a link, but with no borders:
<a href="default.asp"><img style="border:0;" src="smiley.gif" alt="HTML tutorial" width="42"
height="42"></a></p>

13

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>
<a href="#C4">See also Chapter 4.</a>
</p>

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

<h2>Chapter 2</h2>

<h2>Chapter 3</h2>

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

<h2>Chapter 5</h2>

14

<h2>Chapter 6</h2>

<h2>Chapter 7</h2>

<h2>Chapter 8</h2>

<h2>Chapter 9</h2>

<h2>Chapter 10</h2>

<h2>Chapter 11</h2>

<h2>Chapter 12</h2>

<h2>Chapter 13</h2>

<h2>Chapter 14</h2>

<h2>Chapter 15</h2>

<h2>Chapter 16</h2>

<h2>Chapter 17</h2>

</body>
</html>
See also Chapter 4.
Chapter 1
This chapter explains ba bla bla
Chapter 2
15

Chapter 3
Chapter 4
Chapter 5
Chapter 6
Chapter 7
Chapter 8
Chapter 9
Chapter 10
Chapter 11
Chapter 12
Chapter 13
16

Chapter 14
Chapter 15
Chapter 16
Chapter 17
<!DOCTYPE html>
<html>

<body>

<p>Locked in a frame?</p>
<a href="http://www.w3schools.com/" target="_top">Click here!</a>

</body>
</html>
Locked in a frame?
Click here!
<!DOCTYPE html>
<html>
<body>

<p>
This is an email link:
<a href="mailto:someone@example.com?Subject=Hello%20again" target="_top">
Send Mail</a>
</p>

<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will
display the text properly.
</p>

</body>
</html>
17

This is an email link: Send Mail
Note: Spaces between words should be replaced by %20 to ensure that the browser will display
the text properly.
<!DOCTYPE html>
<html>
<body>

<p>
An image:
<img src="smiley.gif" alt="Smiley face" width="42" height="42"></p>

<p>
A moving image:
<img src="hackanm.gif" alt="Computer man" width="48" height="48"></p>

<p>
Note that the syntax of inserting a moving image is no different from a non-moving image.
</p>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>An image from another folder:</p>
<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32"><p>An image from
W3Schools:</p>
<img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"
width="104" height="142">

</body>
</html>
18

<!DOCTYPE html>
<html>
<body>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:left" width="42" height="42"> A paragraph with
an image. The image will float to the left of this text.
</p>

<p>
<img src="smiley.gif" alt="Smiley face" style="float:right" width="42" height="42"> A paragraph with
an image. The image will float to the right of this text.
</p>

<p><b>Note:</b> Here we have used the CSS "float" property to align the image; as the align
attribute is deprecated in HTML 4, and is not supported in HTML5.</p>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Create a link of an image:
<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" width="42" height="42"></a></p>

19

<p><b>Note:</b> For IE 9 and earlier versions, the image-link above will show a border around the
image. To remove the border around the image, add style="border:0;" to the img element.</p>

<p>Image-link: Still a link, but with no borders:
<a href="default.asp"><img style="border:0;" src="smiley.gif" alt="HTML tutorial" width="42"
height="42"></a></p>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

20

<p>
HTML tables start with a table tag.<br>
Table rows start with a tr tag.<br>
Table data start with a td tag.
</p>
<hr>

<h3>1 Column:</h3>
<table>
<tr>
<td>100</td>
</tr>
</table>
<hr>

<h3>1 Row and 3 Columns:</h3>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<hr>

<h3>3 Rows and 3 Columns:</h3>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>700</td>
<td>800</td>
<td>900</td>
</tr>

</table>
<hr>

</body>
</html>
21

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

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

<table style="width:300px">
<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>
22

</tr>
</table>

</body>
</html>

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

<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

<!DOCTYPE html>
23

<html>
<head>
<style>
table, th, td
{
}
th, td
{
padding:15px;
}
</style>
</head>
<body>

<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<p>Try to change the padding to 5px.</p>

</body>
</html>

<!DOCTYPE html>
24

<html>
<head>
<style>
table, th, td
{
padding:5px;
}
table
{
border-spacing:15px;
}
</style>
</head>
<body>

<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

<p>Try to change the spacing to 5px.</p>

</body>
</html>

25

<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
}
th,td
{
padding:5px;
}
</style>
</head>
<body>

<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>

26

<!DOCTYPE html>
<html>
<head>
<style>
table,th,td
{
}
th,td
{
padding:5px;
}
th
{
text-align:left;
}
</style>
</head>
<body>

<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Points</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>

</body>
</html>
27

<!DOCTYPE html>
<html>

<head>
<style>
table, th, td
{
}
th, td
{
padding:5px;
}
</style>
</head>

<body>

<h3>Horizontal Headings:</h3>

<table>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>

<h3>Vertical Headings:</h3>

<table>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
28

<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>

</body>
</html>

<!DOCTYPE html>
<html>

<head>
<style>
table, th, td
{
}
th, td
{
padding:5px;
}
</style>
</head>

<body>

<table>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
29

</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>

</body>
</html>

<!DOCTYPE html>
<html>

<head>
<style>
table, th, td
{
}
th, td
{
padding:5px;
}
</style>
</head>

<body>

<h3>Cell that spans two columns:</h3>
<table>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
30

</table>

<h3>Cell that spans two rows:</h3>
<table>
<tr>
<th>First 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>

<!DOCTYPE html>
<html>

<head>
<style>
table, th, td
{
}
th, td
{
padding:5px;
}
</style>
31

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

32

<!DOCTYPE html>
<html>
<body>

<h4>An Unordered List:</h4>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
An Unordered List:
Coffee
Tea
Milk
<!DOCTYPE html>
<html>
<body>

<h4>An Ordered List:</h4>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

</body>
</html>
An Ordered List:
1. Coffee
2. Tea
3. Milk
<!DOCTYPE html>
<html>
<body>

<h4>Numbered list:</h4>
<ol>
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
33

<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Lowercase letters list:</h4>
<ol type="a">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Roman numbers list:</h4>
<ol type="I">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

<h4>Lowercase Roman numbers list:</h4>
<ol type="i">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>

</body>
</html>
Numbered list:
1. Apples
2. Bananas
3. Lemons
4. Oranges
Letters list:
A. Apples
B. Bananas
C. Lemons
D. Oranges
Lowercase letters list:
34

a. Apples
b. Bananas
c. Lemons
d. Oranges
Roman numbers list:
I. Apples
II. Bananas
III. Lemons
IV. Oranges
Lowercase Roman numbers list:
i. Apples
ii. Bananas
iii. Lemons
iv. Oranges
<!DOCTYPE html>
<html>
<body>

<p><b>Note:</b> The type attribute of the ul tag is deprecated in HTML 4, and is not supported in
HTML5.
Therefore we have used the style attribute and the CSS list-style-type property, to define different
types of unordered lists below:</p>

<h4>Disc bullets list:</h4>
<ul style="list-style-type:disc">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>Circle bullets list:</h4>
<ul style="list-style-type:circle">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>

<h4>Square bullets list:</h4>
<ul style="list-style-type:square">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ul>
35

</body>
</html>
Note: The type attribute of the ul tag is deprecated in HTML 4, and is not supported in HTML5.
Therefore we have used the style attribute and the CSS list-style-type property, to define
different types of unordered lists below:
Disc bullets list:
Apples
Bananas
Lemons
Oranges
Circle bullets list:
o Apples
o Bananas
o Lemons
o Oranges
Square bullets list:
Apples
Bananas
Lemons
Oranges
<!DOCTYPE html>
<html>
<body>

<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>
A nested List:
36

Coffee
Tea
o Black tea
o Green tea
Milk
<!DOCTYPE html>
<html>
<body>

<h4>A nested List:</h4>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>

</body>
</html>
A nested List:
Coffee
Tea
o Black tea
o Green tea
China
Africa
Milk
<!DOCTYPE html>
<html>
<body>

<h4>A Definition List:</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
37

</dl>

</body>
</html>
A Definition List:
Coffee
- black hot drink
Milk
- white cold drink
<!DOCTYPE html>
<html>
<body>

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

<p><b>Note:</b> The form itself is not visible. Also note that the default width of a text
field is 20 characters.</p>

</body>
</html>
First name:
Last name:
Note: The form itself is not visible. Also note that the default width of a text field is 20
characters.
<!DOCTYPE html>
<html>
<body>

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

<p><b>Note:</b> The characters in a password field are masked (shown as asterisks or
circles).</p>

</body>
</html>
Username:
Password:
38

Note: The characters in a password field are masked (shown as asterisks or circles).
<!DOCTYPE html>
<html>
<body>

<form action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

</body>
</html>
I have a bike
I have a car
<!DOCTYPE html>
<html>
<body>

<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

<p><b>Note:</b> When a user clicks on a radio-button, it becomes checked, and all other
radio-buttons with equal name become unchecked.</p>

</body>
</html>
Male
Female
Note: When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with
equal name become unchecked.
<!DOCTYPE html>
<html>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
39

</form>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
40

<!DOCTYPE html>
<html>
<body>

<form action="">
<input type="button" value="Hello world!">
</form>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

</body>
</html>

41

<!DOCTYPE html>
<html>
<body>

<form name="input" action="demo_form_action.asp" method="get">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>

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

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
<br><br>
</form>


</body>
</html>

42

<!DOCTYPE html>
<html>
<body>

<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
</form>


</body>
</html>

<!DOCTYPE html>
<html>
<body>

<h3>Send e-mail to someone@example.com:</h3>

<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>

</body>
</html>
43

<!DOCTYPE html>
<html>
<body>

<iframe src="demo_iframe.htm"></iframe>

<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>

</body>
</html>

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

<body>
44

<img src="stickman.gif" width="24" height="39"> - Notice that we have only specified a
relative address for the image. Since we have specified a base URL in the head section, the
browser will look for the image at "http://www.w3schools.com/images/stickman.gif"
<br><br>
<a href="http://www.w3schools.com">W3Schools</a> - Notice that the link opens in a new
window, even if it has no target="_blank" attribute. This is because the target attribute of
the base element is set to "_blank".

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta charset="UTF-8">
</head>
<body>

<p>All meta information goes in the head section...</p>

</body>
</html>
All meta information goes in the head section...
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

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

</body>
</html>
45

Hello JavaScript!
<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

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

HTML Exampleg

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML Exampleg

Caricato da

Copyright:

Formati disponibili

1

Potrebbero piacerti anche