HTML
Content
HTML Introduction
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Basic Examples
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
<a href="http://www.w3schools.com">This is a link</a>
HTML Images
<img src="w3schools.jpg" alt="W3Schools.com" width="104"
height="142">
HTML Elements
HTML Elements
An HTML element is everything from the start tag to the end
tag:
Nested HTML Elements
Most HTML elements can be nested (can contain other HTML
elements).
Don't Forget the End Tag
Some HTML elements might display correctly even if you
forget the end tag:
The example above works in most browsers, because the
closing tag is considered optional.
Never rely on this. Many HTML elements will produce
unexpected results and/or errors if you forget the end tag.
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br>
tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash
inside the start tag, like <br />, is the proper way of closing
empty elements in XHTML (and XML).
HTML Tip: Use Lowercase Tags
HTML tags are not case sensitive: <P> means the same as
<p>. Many web sites use uppercase HTML tags.
W3Schools use lowercase tags because the World Wide Web
Consortium (W3C) recommends lowercase in HTML 4,
anddemands lowercase tags in XHTML.
HTML Attributes
Attributes are always specified in the start tag
Attributes come in name/value pairs
like: name="value"
<a href="http://www.w3schools.com">This is a link</a>
Always Quote Attribute Values
Attribute values should always be enclosed in quotes.
Double style quotes are the most common, but single style
quotes are also allowed.
Tip: In some rare situations, when the attribute value itself
contains quotes, it is necessary to use single quotes:
name='John "ShotGun" Nelson'
HTML Tip: Use Lowercase
Attributes
Attribute names and attribute values are case-insensitive.
However, the World Wide Web Consortium (W3C)
recommends lowercase attributes/attribute values in their
HTML 4 recommendation.
Newer versions of (X)HTML will demand lowercase attributes.
HTML Headings
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the
least important heading.
Headings Are Important
Use HTML headings for headings only. Don't use headings to
make text BIG or bold.
Search engines use your headings to index the structure and
content of your web pages.
Since users may skim your pages by its headings, it is
important to use headings to show the document structure.
H1 headings should be used as main headings, followed by
H2 headings, then the less important H3 headings, and so on.
HTML Lines
The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
HTML Paragraphs
HTML Paragraphs
Paragraphs are defined with the <p> tag.
HTML Line Breaks
Use the <br> tag if you want a line break (a new line)
without starting a new paragraph.
HTML Text Formatting
HTML Formatting Tags
HTML uses tags like <b> and <i> for formatting output,
like bold or italic text.
These HTML tags are called formatting tags
Often <strong> renders as <b>, and <em> renders as
<i>.
However, there is a difference in the meaning of these tags:
<b> or <i> defines bold or italic text only.
<strong> or <em> means that you want the text to be
rendered in a way that the user understands as "important".
Today, all major browsers render strong as bold and em as
italics. However, if a browser one day wants to make a text
highlighted with the strong feature, it might be cursive for
example and not bold!
Example1
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
Output:
This is
preformatted text.
It preserves both spaces
and line breaks.
Example2
<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
Output:
Computer code
Keyboard input
Sample text
Computer variable
Example3
<address>
Written by W3Schools.com<br>
<a href="mailto:[email protected]">Email us</a><br>
Address: Box 564, Disneyland<br>
Phone: +12 34 56 78
</address>
Output:
Written by W3Schools.com
Email us
Address: Box 564, Disneyland
Phone: +12 34 56 78
Example4
<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>
Example5
<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>
Output:
If your browser supports bi-directional override (bdo), the
next line will be written from the right to the left (rtl):
txet werbeH emos si ereH
Example6
<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 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>
<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>
Output:
Example7
<p>My favorite color is <del>blue</del>
<ins>red</ins>!</p>
Output:
Example8
<p>Do not forget to buy <mark>milk</mark> today.</p>
Output:
HTML Text Formatting Tags
HTML "Computer Output" Tags
HTML Citations, Quotations, and
Definition Tags
HTML Comments
Comment tags <!-- and --> are used to insert comments in
HTML.
they can help document your HTML.
Comments are also great for debugging HTML, because you
can comment out HTML lines of code, one at a time, to search
for errors:
Conditional Comments
<!--[if IE 8]>
.... some HTML here ....
<![endif]-->
HTML Links
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
HTML Links - The target Attribute
<a href="http://www.w3schools.com/" target="_blank">Visit
W3Schools!</a>
HTML Links - The id Attribute
The id attribute can be used to create a bookmark inside an
HTML document.
Tip: Bookmarks are not displayed in any special way. They
are invisible to the reader.
<a id="tips">Useful Tips Section</a>
<a href="#tips">Visit the Useful Tips Section</a>
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
Basic Notes - Useful Tips
Note: Always add a trailing slash to subfolder references. If
you link like this: href="http://www.w3schools.com/html",
you will generate two requests to the server, the server will
first add a slash to the address, and then create a new
request like this: href="http://www.w3schools.com/html/".
If you link an image, IE9 and earlier versions can show a
border around image. So its better to set border of the image
to 0.
Example1
<p>
This is an email link:
<a
href="mailto:[email protected]?Subject=Hello%20agai
n" target="_top">
Send Mail</a>
</p>
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.
Example2
<p>
This is another mailto link:
<a
href="mailto:[email protected]?cc=someoneelse@exa
mple.com&[email protected]&subject=Su
mmer%20Party&body=You%20are%20invited%20to%20a%2
0big%20summer%20party!" target="_top">Send mail!</a>
</p>
This is another mailto link: Send mail!
Note: Spaces between words should be replaced by %20 to
ensure that the browser will display the text properly.
HTML Head
<head>
<meta charset="UTF-8">
<meta name="keywords" content="HTML, CSS, XML, XHTML,
JavaScript">
<meta name="description" content="Free Web tutorials on
HTML and CSS">
<meta name="author" content="Hege Refsnes">
<!-- Refresh document every 30 seconds: -->
<meta http-equiv="refresh" content="30">
<title>Title of the document</title>
<base href="http://www.w3schools.com/images/"
target="_blank">
<link rel="stylesheet" type="text/css"
href="mystyle.css">
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
<script type = “text/javascript” src =
“js/main.js”></script>
</head>
HTML Styles - CSS
Links without underline:
<a href="http://www.w3schools.com" style="text-
decoration:none;">Visit W3Schools.com!</a>
CSS can be added to HTML in the following ways:
Inline - using the style attribute in HTML elements
Internal - using the <style> element in the <head>
section
External - using an external CSS file
The preferred way to add CSS to HTML, is to put CSS syntax
in separate CSS files.
Inline Styles
<p style="color:blue;margin-left:20px;">This is a
paragraph.</p>
Internal Style Sheet
<head>
<style>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
External Style Sheet
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
HTML Images
Example1
<p><img src="hackanm.gif" alt="Computer man" width="48"
height="48"></p>
Example2
<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>
Example3
<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>
Example4
<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 Tables
Example1
<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>
</tr>
</table>
</body>
Example2
<head>
<style>
table,th,td
{
border:1px solid black;
border-collapse:collapse;
}
</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>
</tr>
</table></body>
An HTML Table with a Border
Attribute
<table border="1" style="width:300px">
Example3
<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>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
Example4
Table with a caption
<table>
<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>
Example5
<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>
</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>
Example6
<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>
HTML Table Tags
HTML Lists
HTML Unordered Lists
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
HTML Ordered Lists
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
HTML Description Lists
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Different types of Ordered Lists
<h4>Letters list:</h4>
<ol type="A">
<li>Apples</li>
<li>Bananas</li>
<li>Lemons</li>
<li>Oranges</li>
</ol>
The value of type attribute can be A, a, I, i, 1 etc
Example1
<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>
HTML Blocks
HTML Block Elements
Most HTML elements are defined as block level elements or
as inline elements.
Block level elements normally start (and end) with a new
line when displayed in a browser.
Examples: <h1>, <p>, <ul>, <table>
HTML Inline Elements
Inline elements are normally displayed without starting a
new line.
Examples: <b>, <td>, <a>, <img>
The HTML <div> Element
The HTML <div> element is a block level element that can
be used as a container for grouping other HTML elements.
The <div> element has no special meaning. Except that,
because it is a block level element, the browser will
display a line break before and after it.
When used together with CSS, the <div> element can be
used to set style attributes to large blocks of content.
Another common use of the <div> element, is for document
layout. It replaces the "old way" of defining layout
using tables. Using <table> elements for layout is not
the correct use of <table>. The purpose of the <table>
element is to display tabular data.
The HTML <span> Element
The HTML <span> element is an inline element that can be
used as a container for text.
The <span> element has no special meaning.
When used together with CSS, the <span> element can be
used to set style attributes to parts of the text.
HTML Layouts
Read css layouts for better understanding of layouts.
HTML Forms and Input
Example1
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
Password: <input type="password" name="pwd">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
<input type="checkbox" name="vehicle" value="Bike">I have
a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have
a car
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<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>
<textarea rows="10" cols="30">
The cat was playing in the garden.
</textarea>
<input type="button" value="Hello world!">
<input type="submit" value="Submit">
</form>
Example2
<form name="input" action="demo_form_action.asp"
method="get">
<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>
Example3
<h3>Send e-mail to [email protected]:</h3>
<form action="MAILTO:[email protected]" method="post"
enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment"
size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
Example4
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
Eample5
<form
oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
Example6
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Example7
<form action="demo_form.asp" method="get">
<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>
<input type="submit">
</form>
Example8
<form action="demo_form.asp">
<label for="male">Male</label>
<input type="radio" name="sex" id="male"
value="male"><br>
<label for="female">Female</label>
<input type="radio" name="sex" id="female"
value="female"><br><br>
<input type="submit" value="Submit">
</form>
HTML Iframes
An iframe is used to display a web page within a web page.
<iframe src="demo_iframe.htm" width="200" height="200"></
iframe>
<iframe src="demo_iframe.htm" frameborder="0"></iframe>
Use iframe as a Target for a Link
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com" target="iframe_a">W
3Schools.com</a></p>
HTML Scripts
<script>
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
</script>
<noscript>Sorry, your browser does not support
JavaScript!</noscript>
Study javascript for more
HTML Entities
HTML Symbols
HTML Uniform Resource
Locators
Common URL Schemes
