Sample Codes

Sample HTML Codes
1. HTML Basic
HTML document
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML headings
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>

</body>
</html>
HTML paragraphs
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
HTML links
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
HTML images
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
</body>
</html>
HTML buttons
<!DOCTYPE html>
<html>
<body>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>
<button>Click me</button>
</body>
</html>
HTML lists
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
2. HTML Attributes
The title attribute
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title Attribute</h2>

<p title="I'm a tooltip">
Mouse over this paragraph, to display the title attribute as a tooltip.
</p>
</body>
</html>
The href attribute
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>

<p>HTML links are defined with the a tag. The link address is specified in the href
attribute:</p>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
The width and height attributes
<!DOCTYPE html>
<html>
<body>
<h2>Size Attributes</h2>
<p>Images in HTML have a set of size attributes, which specifies the width and
height of the image:</p>
<img src="img_girl.jpg" width="500" height="600">
</body>
</html>
The alt attribute
<!DOCTYPE html>
<html>
<body>
<h2>The alt Attribute</h2>

<p>The alt attribute should reflect the image content, so users who cannot see the
image gets an understanding of what the image contains:
</p>
<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">
</body>
</html>
Attribute without quotes
<!DOCTYPE html>
<html>
<body>
<a href=https://www.w3schools.com>This is a link</a>
</body>
</html>
Attribute without quotes does not work
<!DOCTYPE html>
<html>
<body>
<h1>About W3Schools</h1>
<p title=About W3Schools>

Can’t 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>
3. HTML Headings
HTML headings
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
HTML horizontal rules
<!DOCTYPE html>
<html>
<body>

<p>This is some text.</p>
<hr>

<p>This is some other text.</p>
<hr>

<p>This is some other text.</p>
</body>
</html>
HTML head
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
<body>
<p>The HTML head element contains meta data.</p>

<p>Meta data is data about the HTML document.</p>
</body>
</html>
4. HTML Paragraphs
HTML paragraphs
<!DOCTYPE html>
<html>
<body>
</body>
</html>
More HTML paragraphs
<!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>
The use of line breaks in HTML
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a paragraph<br>with line breaks</p>
</body>
</html>
Poem problems (some problems with HTML formatting)
<!DOCTYPE html>
<html>
<body>
<p>In HTML, spaces and new lines are ignored:</p>
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.
</p>
</body>
</html>
How to control the line breaks and spaces with the <pre> tag
<!DOCTYPE html>
<html>
<body>
<p>The pre tag preserves both spaces and line breaks:</p>

<pre>
My Bonnie lies over the sea.
Oh, bring back my Bonnie to me.

</pre>
</body>
</html>
5. HTML Styles
HTML styles
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
HTML background color
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
</body>
</html>
HTML text color
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
</body>
</html>
HTML text font
<!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>
HTML text size
<!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>
HTML text alignment
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>

<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
6. HTML Text Formatting
Bold formatting using the <b> element
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
Strong formatting using the <strong> element
<!DOCTYPE html>
<html>
<body>
<p><strong>This text is strong.</strong></p>
</body>
</html>
Italic formatting using the <i> element
<!DOCTYPE html>
<html>
<body>
<p><i>This text is italic.</i></p>
</body>
</html>
Emphasized formatting using the <em> element
<!DOCTYPE html>
<html>
<body>
<p><em>This text is emphasized.</em></p>
</body>
</html>
Small formatting using the <small> element
<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>
Marked formatting using the <mark> element
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>
Marked deleted using the <del> element
<!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>
Marked inserted using the <ins> element
<!DOCTYPE html>
<html>
<body>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>
Marked deleted and inserted using <del> and <ins>
<!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>
Subscript formatting using the <sub> element
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
</body>
</html>
Superscript formatting using the <sup> element
<!DOCTYPE html>
<html>
<body>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
7. HTML Quotations and Citations
Formatting short quotations with the <q> element.
<!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>
Formatting quoted sections with the <blockquote> element.
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
</body>
</html>
Formatting document author/owner information with the <address> element
<!DOCTYPE html>
<html>
<body>
<p>The HTML address element defines contact information (author/owner) of a document or

article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
Formatting abbreviations and acronyms the <abbr> element
<!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>
Formatting work title with the <cite> element
<!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 Edvard Munch. Painted in 1893.</p>
</body>
</html>
Formatting text direction with the <bdo> element
<!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>
8. HTML Comments
Hidden comments
<!DOCTYPE html>
<html>
<body>



</body>
</html>
Conditional comments
<!DOCTYPE html>
<html>
<body>


</body>
</html>
Comments for debugging
<!DOCTYPE html>
<html>
<body>

</body>
</html>
9. HTML CSS
HTML with inline CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>
HTML with internal CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
</body>
</html>
HTML with external CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>
HTML with CSS fonts
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
</body>
</html>
HTML with CSS using the id attribute
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
}
</style>
</head>
<body>
<p id="p01">I am different.</p>
</body>
</html>
HTML with CSS using the class attribute
<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color: red;
}
</style>
</head>
<body>
<p class="error">I am different.</p>
<p class="error">I am different too.</p>
</body>
</html>
HTML and CSS borders
<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
}
</style>
</head>
<body>
</body>
</html>
HTML and CSS padding
<!DOCTYPE html>
<html>
<head>
<style>
p {
padding: 30px;
}
</style>
</head>
<body>
</body>
</html>
HTML and CSS margin
<!DOCTYPE html>
<html>
<head>
<style>
p {
margin: 50px;
}
</style>
</head>
<body>
</body>
</html>
HTML and CSS full demo
<!DOCTYPE html>
<html>
<body>
<div style="position:relative;">
<div style="opacity:0.5;position:absolute;left:50px;top:-
30px;width:300px;height:150px;background-color:#40B3DF"></div>
<div
style="opacity:0.3;position:absolute;left:120px;top:20px;width:100px;height:170px;ba
ckground-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>
10. HTML Links
Linking, using an absolute URL
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p><a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a></p>
</body>
</html>
Linking, using a relative URL
<!DOCTYPE html>
<html>
<body>
<h2>Local Links</h2>
<p><a href="html_images.asp">HTML Images</a> is a link to a page on this

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

Web.</p>
</body>
</html>
Removing the underline from links
<!DOCTYPE html>
<html>
<body>
<a href="html_images.asp" style="text-decoration:none">HTML Images</a>
</body>
</html>
Changing the color of links
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<p>You can change the default colors of links</p>
<a href="html_images.asp" target="_blank">HTML Images</a>
</body>
</html>
A link that breaks out of a frame
<!DOCTYPE html>
<html>
<body>
<p>Locked in a frame? <a href="https://www.w3schools.com/html/" target="_top">Click

here!</a></p>
</body>
</html>
Changing the target of a link
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://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>
An image as a link
<!DOCTYPE html>
<html>
<body>
<h2>Image Links</h2>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>
<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border
around the image.</p>
</body>
</html>
A mailto link
<!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>
A mailto link with subject
<!DOCTYPE html>
<html>
<body>
<p>
This is another mailto link:
<a
href="mailto:[email protected][email protected]&bcc=andsomeoneelse@examp
le.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20par
ty!" 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>
Creating a bookmark link
<!DOCTYPE html>
<html>
<body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2>
<h2>Chapter 3</h2>
<h2 id="C4">Chapter 4</h2>

<h2>Chapter 5</h2>
<h2>Chapter 6</h2>
<h2>Chapter 7</h2>
<h2>Chapter 8</h2>
<h2>Chapter 9</h2>
<h2>Chapter 10</h2>
<h2>Chapter 11</h2>
<h2>Chapter 12</h2>
<h2>Chapter 13</h2>
<h2>Chapter 14</h2>
<h2>Chapter 15</h2>
<h2>Chapter 16</h2>
<h2>Chapter 17</h2>
<h2>Chapter 18</h2>
<h2>Chapter 19</h2>
<h2>Chapter 20</h2>
<h2>Chapter 21</h2>
<h2>Chapter 22</h2>
<h2>Chapter 23</h2>
</body>
</html>
11. HTML Images
An image
<!DOCTYPE html>
<html>
<body>
<h2>Italian Trulli</h2>
<img src="pic_trulli.jpg" alt="Italian Trullti" style="width:100%">
</body>
</html>
An image height and width using attributes
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>In this example, we specify the width and height of an image with the width and
height attributes:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
</body>
</html>
An image height and width using CSS
<!DOCTYPE html>
<html>
<body>
<h2>Image Size</h2>
<p>Use the style attribute to specify the width and height of an image:</p>
<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
</body>
</html>
An image height and width using both
<!DOCTYPE html>
<html>
<head>
<style>
/* This stylesheet sets the width of all images to 100%: */
img {
width: 100%;
}
</style>
</head>
<body>
<h2>Styling Images</h2>
<p>The image below has the width attribute set to 128 pixels, but the stylesheet
overrides it, and sets the width to 100%.</p>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
<p>The image below uses the style attribute, where the width is set to 128 pixels which
overrides the stylesheet:</p>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
An image in another folder
<!DOCTYPE html>
<html>
<body>
<h2>Images in Another Folder</h2>

<p>It is common to store images in a sub-folder. You must then include the folder name
in the src attribute:</p>
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
</body>
</html>
An image with a broken link
<!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>
An image on another server
<!DOCTYPE html>
<html>
<body>
<h2>Images on Another Server</h2>
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"

style="width:104px;height:142px;">
</body>
</html>
Using an image as a link
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<p>The image is a link. You can click on it.</p>
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial"
style="width:42px;height:42px;border:0;">
</a>
<p>Add "border:0;" to prevent IE9 (and earlier) from displaying a border around the
image.</p>
</body>
</html>
A moving image
<!DOCTYPE html>
<html>
<body>
<h2>Animated Images</h2>
<p>The GIF standard allows moving images.</p>
<img src="programming.gif" alt="Computer man" style="width:48px;height:48px;">
</body>
</html>
An image map with clickable regions
<!DOCTYPE html>
<html>
<body>
<h2>Image Maps</h2>
<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;">
<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>
A floating image
<!DOCTYPE html>
<html>
<body>
<h2>Floating Images</h2>
<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>
</body>
</html>
12. HTML Tables
Basic HTML tables
<!DOCTYPE html>
<html>
<body>
<h2>HTML Tables</h2>
<p>HTML tables start with a table tag.</p>

<p>Table rows start with a tr tag.</p>
<p>Table data start with a td tag.</p>
<hr>
<h2>1 Column:</h2>
<table>
<tr>
<td>100</td>
</tr>
</table>
<hr>
<h2>1 Row and 3 Columns:</h2>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>
<hr>
<h2>3 Rows and 3 Columns:</h2>
<table>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
<tr>
<td>700</td>
<td>800</td>
<td>900</td>
</tr>
</table>
<hr>
</body>
</html>
A table with borders
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Bordered Table</h2>
<p>Use the CSS border property to add a border to the table.</p>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
A table with collapsed borders
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border-collapse: collapse;
}
</style>
</head>
<body>
<h2>Collapsed Borders</h2>
<p>If you want the borders to collapse into one border, add the CSS border-collapse
property.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
A table with cell padding
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<h2>Cellpadding</h2>
<p>Cell padding specifies the space between the cell content and its borders.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the padding to 5px.</p>
</body>
</html>
A table with headings
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
A table with left-aligned headings
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<h2>Left-align Headings</h2>
<p>To left-align the table headings, use the CSS text-align property.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Horizontal/Vertical table headings
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Horizontal Headings:</h2>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<h2>Vertical Headings:</h2>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
</body>
</html>
A table with a caption
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Table Caption</h2>
<p>To add a caption to a table, use the caption tag.</p>
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Table cells that span more than one column
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns</h2>

<p>To make a cell span more than one column, use the colspan attribute.</p>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>
Table cells that span more than one row
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows</h2>

<p>To make a cell span more than one row, use the rowspan attribute.</p>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>
A table with cell spacing
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
padding: 5px;
}
table {
border-spacing: 15px;
}
</style>
</head>
<body>
<h2>Border Spacing</h2>
<p>Border spacing specifies the space between the cells.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<p>Try to change the border-spacing to 5px.</p>
</body>
</html>
A table with HTML tags inside
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table:
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pineapples</li>
</ul>
</td>
<td>HELLO</td>
</tr>
</table>
</body>
</html>
Tables with different style using id I
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<h2>Styling Tables</h2>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Tables with different style using id II
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
}
th, td {
padding: 15px;
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>
<h2>Styling Tables</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Tables with different style using class I
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
table.names {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table class="names">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Tables with different style using class II
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
}
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
table.names tr:nth-child(even) {
background-color: #eee;
}
table.names tr:nth-child(odd) {
background-color:#fff;
}
table.names th {
color: white
}
</style>
</head>
<body>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table class="names">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
13. HTML Lists
An unordered list (default)
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
An unordered list with disc bullets
<!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>
An unordered list with circle bullets
<!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>
An unordered list with square bullets
<!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>
An unordered list without bullets
<!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>
An ordered list (default)
<!DOCTYPE html>
<html>
<body>
<h2>An ordered HTML list</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
An ordered list with numbers
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
An ordered list with letters
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
An ordered list with lowercase letters
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Letters</h2>
<ol type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
An ordered list with roman numbers
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
An ordered list with lowercase roman numbers
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
A description list
<!DOCTYPE html>
<html>
<body>
<h2>A Description List</h2>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
A nested list I
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>

<p>List can be nested (lists inside lists):</p>
<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 II
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
</body>
</html>
A horizontal list
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline;
}
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul>
</body>
</html>
A horizontal list menu
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
}
li a:hover {
}
</style>
</head>
<body>
<h2>Navigation Menu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a
navigation menu:</p>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
14. HTML Block and inline elements
Styling <div> elements
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the
United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two
millennia, its history going back to its founding by the Romans, who named it
Londinium.</p>
</div>
</body>
</html>
Styling <span> elements
<!DOCTYPE html>
<html>
<body>
<h1>My <span style="color:red">Important</span> Heading</h1>
</body>
</html>
15. HTML Classes
Style all elements with a specified class name
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
color: white;
padding: 20px;
}
</style>
</head>
<body>
<h2>The class Attribute</h2>

<p>Use CSS to style an element with the class name "cities":</p>
<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
Londinium.</p>
</div>
</body>
</html>
Access elements with a specified class name, with JavaScript
<!DOCTYPE html>
<html>
<head>
<style>
.cities {
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Multiple classes
<!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>
Same class, different tag
<!DOCTYPE html>
<html>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<body>
<h2>Same Class, Different Tag</h2>

<p>Even if the two elements do not have the same tag name, they can have the same
class name, and get the same styling:</p>
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France.</p>
</body>
</html>
16. HTML Id
Style an element with a specific id
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Access an element with a specific id, with JavaScript
<!DOCTYPE html>
<html>
<body>
<h2>Using The id Attribute in JavaScript</h2>

<p>JavaScript can access an element with a specified id by using the
getElementById() method:</p>
<h1 id="myHeader">Hello World!</h1>

<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>
Difference between class and id
<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */

.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2>Difference Between Class and ID</h2>

<p>An HTML page can only have one unique id applied to one specific element, while a
class name can be applied to multiple elements.</p>


<h1 id="myHeader">My Cities</h1>


<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
17. HTML Layout
Layout using float
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */

header {
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */

nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */

nav ul {
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px; /* only for demonstration, should be removed */
}
/* Clear floats after the columns */

section:after {
content: "";
display: table;
clear: both;
}
/* Style the footer */
footer {
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next
to each other, on small screens */
@media (max-width: 600px) {
nav, article {
width: 100%;
height: auto;
}
}
</style>
</head>
<body>
<h2>CSS Layout Float</h2>

<p>In this example, we have created a header, two columns/boxes and a footer. On smaller
screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect (you will learn more about this in
our next chapter - HTML Responsive.)</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<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>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Layout using flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */

header {
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Container for flexboxes */

section {
display: -webkit-flex;
display: flex;
}
/* Style the navigation menu */

nav {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */

nav ul {
padding: 0;
}
/* Style the content */

article {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: #f1f1f1;
padding: 10px;
}
/* Style the footer */

footer {
padding: 10px;
text-align: center;
color: white;
}
/* Responsive layout - makes the menu and the content (inside the section) sit on top of
each other instead of next to each other */
@media (max-width: 600px) {
section {
-webkit-flex-direction: column;
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>CSS Layout Flexbox</h2>

<p>In this example, we have created a header, two columns/boxes and a footer. On smaller
screens, the columns will stack on top of each other.</p>
<p>Resize the browser window to see the responsive effect.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 eand earlier
versions.</p>
<header>
<h2>Cities</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#">London</a></li>
<li><a href="#">Paris</a></li>
<li><a href="#">Tokyo</a></li>
</ul>
</nav>
<article>
<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>
Londinium.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Layout using flexbox 2
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.flex-container > * {
padding: 10px;
flex: 1 100%;
}
.main {
text-align: left;
background: cornflowerblue;
}
.header {background: coral;}

.footer {background: lightgreen;}
.aside {background: moccasin;}
@media all and (min-width: 768px) {

.aside { flex: 1 auto; }
.main { flex: 3 0px; }
.aside { order: 1; }
.main { order: 2; }
.footer { order: 4; }
}
</style>
</head>
<body>
<div class="flex-container">
<header class="header">Header</header>
<aside class="aside">Aside</aside>
<article class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis.
Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a
consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam
ullamcorper interdum est nec tincidunt.</p>
</article>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
Layout using flexbox 3
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.flex-container > * {
padding: 10px;
flex: 1 100%;
}
.main {
text-align: left;
background: cornflowerblue;
}
.header {background: coral;}

.footer {background: lightgreen;}
.aside1 {background: moccasin;}
.aside2 {background: violet;}
@media all and (min-width: 768px) {

.aside { flex: 1 auto; }
.main { flex: 3 0px; }
.aside1 { order: 1; }
.main { order: 2; }
.aside2 { order: 3; }
.footer { order: 4; }
}
</style>
</head>
<body>
<div class="flex-container">
<header class="header">Header</header>
<aside class="aside aside1">Aside 1</aside>
<article class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sed ex turpis.
Cras luctus nibh lectus, in ullamcorper ex tempor eleifend. Nulla bibendum, eros a
consequat vestibulum, orci massa fermentum quam, sed commodo nunc ex vitae nisl. Aliquam
ullamcorper interdum est nec tincidunt.</p>
</article>
<aside class="aside aside2">Aside 2</aside>
<footer class="footer">Footer</footer>
</div>
</body>
</html>
18. HTML IFrame
Inline frame (a frame inside an HTML page)
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes</h2>
<p>An iframe is used to display a web page within a web page:</p>
<iframe src="demo_iframe.htm"></iframe>
</body>
</html>
19. HTML head Elements
A valid HTML document with no <html> <body, and <head>
<!DOCTYPE html>
<title>Page Title</title>
A valid HTML document with no <head> element
<!DOCTYPE html>
<html>
<body>
</body>
</html>
The <title> element defines the document title
<!DOCTYPE html>
<html>
<head>
</head>
<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>
The <style> element contains style information
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
<h1>This is a Heading</h1>
</body>
</html>
The <link> element defines a relationship to an external resource
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a Heading</h1>
</body>
</html>
The <meta> element defines special meta information
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">
</head>
<body>
<p>All meta information goes before the body.</p>
</body>
</html>
The <script> element defines client-side JavaScripts
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</head>
<body>
<h1>My Web Page</h1>

<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
The <base> element defines the base URL for all URLs
<!DOCTYPE html>
<html>
<head>
<base href="https://www.w3schools.com/images/" target="_blank">
</head>
<body>
<img src="html5.gif">
<p>Since we have specified a base URL, the browser will look for the image
"html5.gif" at "https://www.w3schools.com/images/html5.gif"</p>
<p><a href="https://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>
20. HTML Scripts
Insert a script
<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to Change Text</h2>

<p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script>
</script>
</body>
</html>
Use of the <noscript> tag
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text written inside the
noscript element.</p>
</body>
</html>
21. HTML Computercode Elements
Keyboard input formatting using the <kbd> element
<!DOCTYPE html>
<html>
<body>
<h2>The kbd Element</h2>

<p>The kbd element represents user input:</p>
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
</body>
</html>
Computer output formatting using the <samp> element
<!DOCTYPE html>
<html>
<body>
<h2>The samp Element</h2>

<p>The samp element represents output from a program or computing system:</p>
<p>If you input wrong value, the program will return <samp>Error!</samp></p>
</body>
</html>
Programming code formatting using the <code> element
<!DOCTYPE html>
<html>
<body>
<h2>The code Element</h2>

<p>Programming code example:</p>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</body>
</html>
Programming code formatting preserving whitespace and line-breaks
<!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>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
</body>
</html>
Variable formatting using the <var> element
<!DOCTYPE html>
<html>
<body>
<h2>The var Element</h2>

<p>Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.</p>
</body>
</html>
22. HTML Forms
Form with text input
<!DOCTYPE html>
<html>
<body>
<h2>Text Input</h2>
<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>
Form with radio button input
<!DOCTYPE html>
<html>
<body>
<h2>Text Input</h2>
<form>
First name:<br>
<br>
Last name:<br>
</form>
<p>Also note that the default width of a text input field is 20 characters.</p>
</body>
</html>
Form with text fields and a submit button
<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
</body>
</html>
Form with a text fields without a name attribute
<!DOCTYPE html>
<html>
<body>
<h2>The name Attribute</h2>
First name:<br>
<input type="text" value="Mickey">
<br>
Last name:<br>
<br><br>
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called
"/action_page.php".</p>
<p>Notice that the value of the "First name" field will not be submitted, because
the input element does not have a name attribute.</p>
</body>
</html>
Grouping Form Data
<!DOCTYPE html>
<html>
<body>
<h2>Grouping Form Data with Fieldset</h2>

<p>The fieldset element is used to group related data in a form, and the legend
element defines a caption for the fieldset element.</p>
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<br><br>
</fieldset>
</form>
</body>
</html>
23. HTML Form Elements
A simple drop-down list
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
A drop-down list with a pre-selected value
<!DOCTYPE html>
<html>
<body>
<h2>Pre-selected Option</h2>
<p>You can preselect an option with the selected attribute.</p>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>
</form>
</body>
</html>
A textarea (a multi-line text input field)
<!DOCTYPE html>
<html>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<textarea name="message" rows="10" cols="30">The cat was playing in the
garden.</textarea>
<br>
</form>
</body>
</html>
An input button
<!DOCTYPE html>
<html>
<body>
<h2>The button Element</h2>
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
Using the <datalist> Element
<!DOCTYPE html>
<html>
<body>
<h2>The datalist Element</h2>

<p>The datalist element specifies a list of pre-defined options for an input
element.</p>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
<p><b>Note:</b> The datalist tag is not supported in Safari or IE9 (and earlier).</p>
</body>
</html>
Using the <output> Element
<!DOCTYPE html>
<html>
<body>
<h2>The output Element</h2>

<p>The output element represents the result of a calculation.</p>
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
</form>
<p><strong>Note:</strong> The output element is not supported in Edge 12 or Internet

Explorer and earlier versions.</p>
</body>
</html>
24. HTML Input Types
Input type text
<!DOCTYPE html>
<html>
<body>
<h2>Text field</h2>
<p>The <strong>input type="text"</strong> defines a one-line text input field:</p>
First name:<br>
<br>
Last name:<br>
<br><br>
</form>

<p>Also note that the default width of a text field is 20 characters.</p>
</body>
</html>
Input type password
<!DOCTYPE html>
<html>
<body>
<h2>Password field</h2>
<p>The <strong>input type="password"</strong> defines a password field:</p>
<form action="">
User name:<br>
<input type="text" name="userid">
<br>
User password:<br>
<input type="password" name="psw">
</form>
<p>The characters in a password field are masked (shown as asterisks or

circles).</p>
</body>
</html>
Input type radio
<!DOCTYPE html>
<html>
<body>
<h2>Radio Buttons</h2>
<p>The <strong>input type="radio"</strong> defines a radio button:</p>
<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>
Input type checkbox
<!DOCTYPE html>
<html>
<body>
<h2>Checkboxes</h2>
<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<input type="checkbox" name="vehicle1" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle2" value="Car">I have a car
<br><br>
</form>
</body>
</html>
Input type button
<!DOCTYPE html>
<html>
<body>
<h2>Input Button</h2>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</body>
</html>
Input type number - with restrictions
<!DOCTYPE html>
<html>
<body>
<h2>Number Field</h2>
<p>The <strong>input type="number"</strong> defines a numeric input field.</p>
<p>You can use the min and max attributes to add numeric restrictions in the input
field:</p>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>
<p><b>Note:</b> type="number" is not supported in IE9 and earlier.</p>
</body>
</html>
Input type number - with steps
<!DOCTYPE html>
<html>
<body>
<h2>Numeric Steps</h2>
<p>Depending on browser support:<br>Fixed steps will apply in the input field.</p>
Quantity:
<input type="number" name="quantity"
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>
Input type date - with date picker
<!DOCTYPE html>
<html>
<body>
<h2>Date Field</h2>
<p>The <strong>input type="date"</strong> is used for input fields that should
contain a date.</p>
<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">
</form>
<p><strong>Note:</strong> type="date" is not supported in Safari or Internet

Explorer 11 and earlier versions.</p>
</body>
</html>
Input type date - with restrictions
<!DOCTYPE html>
<html>
<body>
<h2>Date Field Restrictions</h2>

<p>Use the min and max attributes to add restrictions to dates:</p>
Enter a date before 1980-01-01:<br>
<input type="date" name="bday" max="1979-12-31"><br><br>
Enter a date after 2000-01-01:<br>
<input type="date" name="bday" min="2000-01-02"><br><br>
</form>
<p><strong>Note:</strong> type="date" is not supported in Safari or Internet

</body>
</html>
Input type color - with color picker
<!DOCTYPE html>
<html>
<body>
<h2>Color Picker</h2>
<p>The <strong>input type="color"</strong> is used for input fields that should
contain a color.</p>
<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 11 and earlier

versions or Safari 9.1 and earlier versions.</p>
</body>
</html>
Input type range
<!DOCTYPE html>
<html>
<body>
<h2>Range Field</h2>
<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>
<b>Note:</b>
type="range" is not supported in Internet Explorer 9 and earlier versions.
</p>
</body>
</html>
Input type month
<!DOCTYPE html>
<html>
<body>
<h2>Month Field</h2>
<p>The <strong>input type="month"</strong> allows the user to select a month and
year.</p>
input field.</p>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
<p><strong>Note:</strong> type="month" is not supported in Firefox, Safari, or

Internet Explorer 11 and earlier versions.</p>
</body>
</html>
Input type week
<!DOCTYPE html>
<html>
<body>
<h2>Week Field</h2>
<p>The <strong>input type="week"</strong> allows the user to select a week and
year:</p>
input field.</p>
Select a week:
<input type="week" name="year_week">
</form>
<p><strong>Note:</strong> type="week" is not supported in Firefox, Safari or

Internet Explorer 11 and earlier versions.</p>
</body>
</html>
Input type time
<!DOCTYPE html>
<html>
<body>
<h2>Time Field</h2>
<p>The <strong>input type="time"</strong> allows the user to select a time (no time
zone):</p>
<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><strong>Note:</strong> type="time" is not supported in Safari or Internet

</body>
</html>
Input type datetime
<!DOCTYPE html>
<html>
<body>
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>
Input type datetime-local
<!DOCTYPE html>
<html>
<body>
<h2>Local Date Field</h2>

<p>The <strong>input type="datetime-local"</strong> specifies a date and time input
field, with no time zone.</p>
input field.</p>
Birthday (date and time):
<input type="datetime-local" name="bdaytime">
<input type="submit" value="Send">
</form>
<p><strong>Note:</strong> type="datetime-local" is not supported in Firefox, Safari

or Internet Explorer 12 and earlier versions.</p>
</body>
</html>
Input type email
<!DOCTYPE html>
<html>
<body>
<h2>Email Field</h2>
<p>The <strong>input type="email"</strong> is used for input fields that should
contain an e-mail address:</p>
E-mail:
<input type="email" name="email">
</form>
<p>
<b>Note:</b>type="email" is not supported in IE9 and earlier.</p>
</body>
</html>
Input type search
<!DOCTYPE html>
<html>
<body>
<h2>Search Field</h2>
<p>The <strong>input type="search"</strong> is used for search fields (behaves like
a regular text field):</p>
Search Google:
<input type="search" name="googlesearch">
</form>
</body>
</html>
Input type tel
<!DOCTYPE html>
<html>
<body>
<h2>Telephone Field</h2>
<p>The <strong>input type="tel"</strong> is used for input fields that should
contain a telephone number:</p>
Telephone:
<input type="tel" name="usrtel">
</form>
<p><b>Note:</b> type="tel" is only supported in Safari 8 and newer versions.</p>
</body>
</html>
Input type url
<!DOCTYPE html>
<html>
<body>
<h2>URL Field</h2>
<p>The <strong>input type="url"</strong> is used for input fields that should
contain a URL address:</p>
Add your homepage:
<input type="url" name="homepage">
</form>
<p><b>Note:</b>
The type="url" is not supported in IE9 and earlier versions.</p>
</body>
</html>
25. HTML Input Attributes
The autocomplete attribute
<!DOCTYPE html>
<html>
<body>
<h2>The autocomplete Attribute</h2>
<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>
The novalidate attribute
<!DOCTYPE html>
<html>
<body>
<h2>The novalidate Attribute</h2>

<p>The novalidate attribute specifies that the form data should not be validated
when submitted.</p>
<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 10 and earlier
versions.</p>
</body>
</html>
The autofocus_attribute
<!DOCTYPE html>
<html>
<body>
<h2>The autofocus Attribute</h2>

<p>The autofocus attribute specifies that the input field should automatically get
focus when the page loads.</p>
First name:<input type="text" name="fname" autofocus><br>
</form>
<p><strong>Note:</strong> The autofocus attribute of the input tag is not supported

in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
The form attribute
<!DOCTYPE html>
<html>
<body>
<h2>The form Attribute</h2>

<p>The form attribute specifies one or more forms an input element belongs to.</p>
<form action="/action_page.php" id="form1">

First name: <input type="text" name="fname"><br>
</form>
<p>The "Last name" field below is outside the form element, but still part of the
form.</p>
Last name: <input type="text" name="lname" form="form1">
</body>
</html>
The formaction attribute
<!DOCTYPE html>
<html>
<body>
<h2>The formaction Attribute</h2>

<p>The formaction attribute specifies the URL of a file that will process the input
control when the form is submitted.</p>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="/action_page2.php" value="Submit to another
page">
</form>
<p><strong>Note:</strong> The formaction attribute of the input tag is not supported

</body>
</html>
The formenctype attribute
<!DOCTYPE html>
<html>
<body>
<h2>The formenctype Attribute</h2>

<p>The formenctype attribute specifies how the form data should be encoded when
submitted (only for forms with method="post").</p>
<form action="/action_page_binary.asp" method="post">

<input type="submit" formenctype="multipart/form-data" value="Submit as
Multipart/form-data">
</form>
<p><strong>Note:</strong> The formenctype attribute of the input tag is not

supported in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
The formmethod attribute
<!DOCTYPE html>
<html>
<body>
<h2>The formmethod Attribute</h2>

<p>The formmethod attribute defines the HTTP method for sending form-data to the
action URL.</p>
<form action="/action_page.php" method="get">

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

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

supported in Internet Explorer 9 and earlier versions, or in Safari 10 and earlier
versions.</p>
</body>
</html>
The formtarget attribute
<!DOCTYPE html>
<html>
<body>
<h2>The formtarget Attribute</h2>

<p>The formtarget attribute specifies a name or a keyword that indicates where to
display the response that is received after submitting the form.</p>
<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

</body>
</html>
The height and width attributes
<!DOCTYPE html>
<html>
<body>
<h2>The height and width Attributes</h2>

<p>The height and width attributes specify the height and width of an input
type="image" element.</p>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
<p><b>Note:</b> The input type="image" sends the X and Y coordinates of the click
that activated the image button.</p>
</body>
</html>
The list attribute
<!DOCTYPE html>
<html>
<body>
Webpage: <input type="url" list="url_list" name="link">
<datalist id="url_list">
<option label="W3Schools" value="https://www.w3schools.com">
<option label="Google" value="http://www.google.com">
<option label="Microsoft" value="http://www.microsoft.com">
</datalist>
</form>
</body>
</html>
The min and max attributes
<!DOCTYPE html>
<html>
<body>
<h2>The min and max Attributes</h2>

<p>The min and max attributes specify the minimum and maximum values for an input
element.</p>
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
<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>
The multiple attribute
<!DOCTYPE html>
<html>
<body>
<h2>The multiple Attributes</h2>

<p>The multiple attribute specifies that the user is allowed to enter more than one
value in the input element.</p>
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

</body>
</html>
The pattern attribute
<!DOCTYPE html>
<html>
<body>
<h2>The pattern Attribute</h2>

<p>The pattern attribute specifies a regular expression that the input element's
value is checked against.</p>
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 10 and earler versions.</p>
</body>
</html>
The placeholder attribute
<!DOCTYPE html>
<html>
<body>
<h2>The placeholder Attribute</h2>

<p>The placeholder attribute specifies a hint that describes the expected value of
an input field (a sample value or a short description of the format).</p>
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
</form>
<p><strong>Note:</strong> The placeholder attribute of the input tag is not

</body>
</html>
The required attribute
<!DOCTYPE html>
<html>
<body>
<h2>The required Attribute</h2>

<p>The required attribute specifies that an input field must be filled out before
submitting the form.</p>
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 prior version 10.1.</p>
</body>
</html>
The step attribute
<!DOCTYPE html>
<html>
<body>
<h2>The step Attribute</h2>

<p>The step attribute specifies the legal number intervals for an input element.</p>
<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>
26. HTML5 Canvas
Draw on the canvas with JavaScript
<!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>
<script>
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>
Draw a line with lineTo()
<!DOCTYPE html>
<html>
<body>

<script>
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
</body>
</html>
Draw a circle with arc()
<!DOCTYPE html>
<html>
<body>

<script>
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
Draw a text with fillText()
<!DOCTYPE html>
<html>
<body>

<script>
ctx.font = "30px Arial";
ctx.fillText("Hello World",10,50);
</script>
</body>
</html>
Draw a text with strokeText()
<!DOCTYPE html>
<html>
<body>

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

<script>
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
</script>
</body>
</html>
Draw a circular gradient
<!DOCTYPE html>
<html>
<body>

<script>
// Create gradient
var grd = ctx.createRadialGradient(75,50,5,90,60,100);

</script>
</body>
</html>
Draw an image with drawImage()
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
<p><button onclick="myCanvas()">Try it</button></p>
<script>
function myCanvas() {
var img = document.getElementById("scream");
ctx.drawImage(img,10,10);
}
</script>
</body>
</html>
28. HTML5 SVG
SVG Circle
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">

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

<rect width="400" height="100"
style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
</body>
</html>
SVG Rounded Rectangle
<!DOCTYPE html>
<html>
<body>

<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
</body>
</html>
SVG Star
<!DOCTYPE html>
<html>
<body>

<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
</body>
</html>
SVG Logo
<!DOCTYPE html>
<html>
<body>
<svg height="130" width="500">

<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%"
style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana"
x="50" y="86">SVG</text>
</svg>
</body>
</html>
29. HTML5 Media
Play Bunny
<!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="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>
Play bear video with controls
<!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>
Play bear video with autoplay
<!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>
<p><b>Note:</b> The autoplay attribute does not work on some mobile devices.</p>
</body>
</html>
Play Horse sound with controls
<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
</html>
Play a YouTube video in HTML
<!DOCTYPE html>
<html>
<body>
<iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">

</iframe>
</body>
</html>
30. HTML5 Geolocation
Get geolocation coordinates
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Handle geolocation errors
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
x.innerHTML = "Latitude: " + position.coords.latitude +
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
Get geolocation and watch the position
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";}
}
x.innerHTML="Latitude: " + position.coords.latitude +
}
</script>
</body>
</html>
31. HTML5 Local Storage
Store a name permanently
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
// Check browser support
if (typeof(Storage) !== "undefined") {
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not
support Web Storage...";
}
</script>
</body>
</html>
Store a counter permanently
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web
storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is
not reset).</p>
</body>
</html>
Store a counter for one session
<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";
} else {
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>
32. More HTML5 Examples
HTML5 drag and drop
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the W3Schools image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)"
width="336" height="69">
</body>
</html>
HTML5 web workers
<!DOCTYPE html>
<html>
<body>
<p>Count numbers: <output id="result"></output></p>

<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
<p><strong>Note:</strong> Internet Explorer 9 and earlier versions do not support

Web Workers.</p>
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
support Web Workers...";
}
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</body>
</html>
HTML5 server sent events
<!DOCTYPE html>
<html>
<body>
<h1>Getting server updates</h1>

<script>
if(typeof(EventSource) !== "undefined") {
var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};
} else {
support server-sent events...";
}
</script>
</body>
</html>

Sample Codes

Uploaded by

Copyright:

Available Formats

Sample Codes

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Sample Codes

Uploaded by

Copyright:

Available Formats

Sample HTML Codes

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<h1>This is heading 1</h1>

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

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

<h2>An Unordered HTML List</h2>

<h2>An Ordered HTML List</h2>

The title attribute

<h2 title="I'm a header">The title Attribute</h2>

The href attribute

<h2>The href Attribute</h2>

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

The width and height attributes

<img src="img_girl.jpg" width="500" height="600">

<h2>The alt Attribute</h2>

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

Attribute without quotes

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

Attribute without quotes does not work

<p title=About W3Schools>

HTML horizontal rules

<h1>This is heading 1</h1>

<h2>This is heading 2</h2>

<h2>This is heading 2</h2>

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

More HTML paragraphs

<p>This is<br>a paragraph<br>with line breaks</p>

Poem problems (some problems with HTML formatting)

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

My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

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

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

HTML background color

HTML text color

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

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

HTML text size

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

HTML text alignment

<h1 style="text-align:center;">Centered Heading</h1>

Bold formatting using the <b> element

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

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

Strong formatting using the <strong> element

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

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

Italic formatting using the <i> element

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

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

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

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

Small formatting using the <small> element

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