My First Heading My First Paragraph.

Introduction
08 January 2014 09:40
HTML Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
 The DOCTYPE declaration defines the document type
 The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content
 The text between <h1> and </h1> is displayed as a heading
 The text between <p> and </p> is displayed as a paragraph
HTML Page Structure

Below is a visualization of an HTML page structure:
What is HTML?
HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language
 HTML is a markup language
 A markup language is a set of markup tags
 The tags describe document content
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
HTML Tags
HTML markup tags are usually called HTML tags
 HTML tags are keywords (tag names) surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 The end tag is written like the start tag, with a forward slash before the tag name
HTML Page 1
 The end tag is written like the start tag, with a forward slash before the tag name
 Start and end tags are also called opening tags and closing tags
HTML Elements
"HTML tags" and "HTML elements" are often used to describe the same thing.
But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:
HTML Element:
<p>This is a paragraph.</p>
Web Browsers
The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and
display them as web pages.
The browser does not display the HTML tags, but uses the tags to determine how the content of the HTML page is to be
presented/displayed to the user:
HTML Versions
Since the early days of the web, there have been many versions of HTML:
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
HTML Page 2
<!DOCTYPE> Declaration
09 January 2014 09:15
HTML <!DOCTYPE> Declaration

Browser Support
The <!DOCTYPE> declaration is supported in all major browsers.
Definition and Usage
The <!DOCTYPE> declaration must be the very first thing in your HTML
document, before the <html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the
web browser about what version of HTML the page is written in.
In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML
4.01 was based on SGML. The DTD specifies the rules for the markup
language, so that the browsers render the content correctly.
HTML5 is not based on SGML, and therefore does not require a reference to a
DTD.
Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so
that the browser knows what type of document to expect.
Differences Between HTML 4.01 and HTML5

There are three different <!DOCTYPE> declarations in HTML 4.01. In HTML5
there is only one:
<!DOCTYPE html>
HTML Elements and Doctypes

Look at our table of all HTML elements, and what Doctype each element
appears in.
Tips and Notes

Note: The <!DOCTYPE> tag does not have an end tag.
Tip: The <!DOCTYPE> declaration is NOT case sensitive.
Tip: Use W3C's Validator to check that you have written a valid HTML /
XHTML document!
Common DOCTYPE Declarations

HTML 5
<!DOCTYPE html>
HTML 4.01 Strict
This DTD contains all HTML elements and attributes, but does NOT
INCLUDE presentational or deprecated elements (like font). Framesets
are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
This DTD contains all HTML elements and attributes, INCLUDING
HTML Page 3
presentational and deprecated elements (like font). Framesets are not
allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
This DTD is equal to HTML 4.01 Transitional, but allows the use of
frameset content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
This DTD contains all HTML elements and attributes, but does NOT
INCLUDE presentational or deprecated elements (like font). Framesets
are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
presentational and deprecated elements (like font). Framesets are not
allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
This DTD is equal to XHTML 1.0 Transitional, but allows the use of
frameset content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for
example to provide ruby support for East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
HTML document validation:

Let’s give the validator a spin and have it check out the lounge files. To follow along, just
point your browser to http://validator.w3.org.
Adding a <meta> tag to specify the content type

Most of you reading this book are probably using English or Western-European
languages (the so-called “Latin” languages), so you’ll need a <meta> tag in your HTML
that looks like this:
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1”>
HTML Page 4
Guide to Strict HTML 4.01:
The <html> element: don’t leave home without it.
Always start each page with a DOCTYPE, but following that, the <html> element must
always be the top, or root, element of your Web page. So, after the DOCTYPE, the
<html> tag will start your page and the </html> tag should end it, with everything else in
your page nested inside.
Remember to use both your <head> and your <body> for better HTML.
Only the <head> and <body> elements can go directly inside your <html> element. This
means that every other element must go either inside the <head> or the <body>
element. No exceptions! Feed your <body> only wholesome block elements. You can
put only block elements (<h1>, <h2>, ..., <h6>, <p>, <blockquote>, and so on) directly
inside your <body> element. All inline elements and text need to be inside another
block element before they can go in the <body> element.
What’s a <head> without a <title>?

Always give your <head> element a <title> element. It’s the law. Failure to do so will
result in HTML that isn’t compliant. The <head> element is the only place you should
put your <title>, <meta>, and <style> elements.
Keep block elements out of your inline elements.

The only things you can put in an inline element are text and other inline elements.
Block elements are not allowed under any circumstances.
Keep block elements out of your <p> element.

Paragraphs are for text, so keep block elements out of your paragraphs. Of course it is
perfectly fine to use all the inline elements you want in them (<em>, <a>, <strong>,
<img>, <q>, and so on).
Lists are for list items.

Only the <li> element is allowed in the <ul> and <ol> elements. Why would you want to
put anything other than a list item in an unordered or ordered list anyway?
Who knew? The <blockquote> only likes block elements.

The <blockquote> element requires one or more block elements inside it. While it’s
common to see text directly inside a block quote, that isn’t up to code here in Webville.
Please always put your text and inline elements inside block elements before adding
them to a <blockquote>.
Be careful about nesting an inline element inside another inline element.

While you can nest just about any inline element in another, there are a couple of cases
that don’t make sense. Never nest an <a> element inside another <a> element because
that would be too confusing for our visitors. Also, empty elements like <img> provide
no way to nest other inline elements within them.
HTML Page 5
Remember the nesting problem:
So it looks like strict HTML 4.01 prefers that images, which are inline elements, be
nested inside a block element, like a paragraph or a heading.
HTML Page 6
HTML Basics
09 January 2014 09:15
HTML Elements
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
 HTML elements can have attributes
 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes come in name/value pairs like: name="value"
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>
HTML5 has added a new attribute: manifest.
Differences Between HTML and XHTML

The xmlns attribute is required in XHTML, but is invalid in HTML.
However, the HTML validator at http://w3.org does not complain when the xmlns attribute is missing in an XHTML document.
This is because the namespace "xmlns=http://www.w3.org/1999/xhtml" is default, and will be added to the <html> tag even if
you do not include it.
Attributes
New : New in HTML5.
Attribute Value Description
manifestN URL Specifies the address of the document's cache manifest (for offline browsing)
ew
xmlns http://www.w3.org/19 Not supported in HTML. Only for XHTML. Specifies the XML namespace attribute (If you
99/xhtml need your content to conform to XHTML)
<body>
All layout attributes is removed from HTML5.
All layout attributes is deprecated in HTML 4.01.
HTML Page 7
<h1> to <h6> tags
The "align" attribute is deprecated in HTML 4.01, and is not supported in HTML5. Use CSS to align elements.
<hr>:
All layout attributes are deprecated in HTML 4.01, and are not supported in HTML5. Use CSS to style the <hr> element instead.
HTML Text Formatting
HTML Text Formatting Tags

Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines a part of text in an alternate voice or mood
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML "Computer Output" Tags

Tag Description
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<var> Defines a variable
<pre> Defines preformatted text
HTML Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction
<blockquote> Defines a section that is quoted from another source
<q> Defines an inline (short) quotation
<cite> Defines the title of a work
<dfn> Defines a definition term
HTML Link:
HTML Hyperlinks (Links)
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.
When you move the cursor over a link in a Web page, the arrow will turn into a little hand.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue
HTML Page 8
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
HTML Link Syntax

The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example
<a href="http://www.w3schools.com/">Visit W3Schools</a>
which will display like this: Visit W3Schools
Clicking on this hyperlink will send the user to W3Schools' homepage.
Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.
HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:
Example
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Try it yourself »
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.
Example
An anchor with an id inside an HTML document:
<a id="tips">Useful Tips Section</a>
Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>
Or, create a link to the "Useful Tips Section" from another page:
<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/".
Tips and Notes

Tip: The following attributes: download, hreflang, media, rel, target, and type cannot be present if the href attribute is not
present.
Tip: A linked page is normally displayed in the current browser window, unless you specify another target.
Tip: Use CSS to style links.
Attributes
New : New in HTML5.
charset char_encodin Not supported in HTML5. Specifies the character-set of a linked document
g
coords coordinates Not supported in HTML5. Specifies the coordinates of a link
downloadNe filename Specifies the hyperlink target to be downloaded
w
href URL Specifies the URL of the page the link goes to
hreflang language_cod Specifies the language of the linked document
HTML Page 9
hreflang language_cod Specifies the language of the linked document
e
mediaNew media_query Specifies what media/device the linked document is optimized for
name section_name Not supported in HTML5. Use the id attribute instead. Specifies the name of an anchor
rel alternate Specifies the relationship between the current document and the linked document
author
bookmark
help
license
next
nofollow
noreferrer
prefetch
prev
search
tag
rev text Not supported in HTML5. Specifies the relationship between the linked document and the
current document
shape default Not supported in HTML5. Specifies the shape of a link
rect
circle
poly
target _blank Specifies where to open the linked document
_parent
_self
_top
framename
typeNew MIME_type Specifies the MIME type of the linked document
HTML <head>
The HTML <head> Element

The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser
where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
The HTML <title> Element

The <title> tag defines the title of the document.
The <title> element is required in all HTML/XHTML documents.
The <title> element:
 defines a title in the browser toolbar
 provides a title for the page when it is added to favorites
 displays a title for the page in search-engine results
A simplified HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
HTML Page 10
</html>
The HTML <base> Element

The <base> tag specifies the base URL/target for all relative URLs in a page:
<head>
<base href="http://www.w3schools.com/images/" target="_blank">
</head>
The HTML <link> Element

The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The HTML <style> Element

The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>
The HTML <meta> Element

Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be
machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other
metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web
services.
<meta> tags always go inside the <head> element.
<meta> Tags - Examples of Use

Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Define a description of your web page:
<meta name="description" content="Free Web tutorials on HTML and CSS">
Define the author of a page:
<meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
The HTML <script> Element

The <script> tag is used to define a client-side script, such as a JavaScript.
The <script> element will be explained in a later chapter.
HTML head Elements

Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base> Defines a default address or a default target for all links on a page
<link> Defines the relationship between a document and an external resource
<meta> Defines metadata about an HTML document
HTML Page 11
<script> Defines a client-side script
<style> Defines style information for a document
Attributes: <meta>
New : New in HTML5.
charsetNew character_set Specifies the character encoding for the HTML document
content text Gives the value associated with the http-equiv or name attribute
http-equiv content-type Provides an HTTP header for the information/value of the content attribute
default-style
refresh
name application- Specifies a name for the metadata
name
author
description
generator
keywords
scheme format/URI Not supported in HTML5. Specifies a scheme to be used to interpret the value of the content
attribute
HTML <style> Tag

The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a browser.
Each HTML document can contain multiple <style> tags.
Tips and Notes

Tip: To link to an external style sheet, use the <link> tag.
Tip: To learn more about style sheets, please read our CSS Tutorial.
Note: If the "scoped" attribute is not used, each <style> tag must be located in the head section.

The "scoped" attribute is new in HTML5, which allows to define styles for a specified section of the document. If the
"scoped" attribute is present, the styles only apply to the style element's parent element and that element's child
elements.
Attributes
New : New in HTML5.
media media_quer Specifies what media/device the media resource is optimized for
y
scopedNe scoped Specifies that the styles only apply to this element's parent element and that element's child
w elements
type text/css Specifies the MIME type of the style sheet
HTML <script> Tag

The <script> tag is used to define a client-side script, such as a JavaScript.
The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
Tips and Notes
HTML Page 12
Tips and Notes
Note: If the "src" attribute is present, the <script> element must be empty.
Tip: Also look at the <noscript> element for users that have disabled scripts in their browser, or have a browser that doesn't
support client-side scripting.
Note: There are several ways an external script can be executed:
 If async="async": The script is executed asynchronously with the rest of the page (the script will be executed while the
page continues the parsing)
 If async is not present and defer="defer": The script is executed when the page has finished parsing
 If neither async or defer is present: The script is fetched and executed immediately, before the browser continues parsing
the page

The "type" attribute is required in HTML 4, but optional in HTML5.
The "async" attribute is new in HTML5.
The HTML 4.01 attribute: "xml:space", is not supported in HTML5.
Differences Between HTML and XHTML

In XHTML, the content inside scripts is declared as #PCDATA (instead of CDATA), which means that entities will be parsed.
This means that in XHTML, all special characters should be encoded, or all content should be wrapped inside a CDATA section:
<script type="text/javascript">
//<![CDATA[
var i=10;
if (i<5)
{
// some code
}
//]]>
</script>
Attributes
New : New in HTML5.
asyncNew async Specifies that the script is executed asynchronously (only for external scripts)
charset charset Specifies the character encoding used in an external script file
defer defer Specifies that the script is executed when the page has finished parsing (only for external scripts)
src URL Specifies the URL of an external script file
type MIME-type Specifies the MIME type of the script
xml:space preserve Not supported in HTML5. Specifies whether whitespace in code should be preserved
HTML Images
HTML Images - The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the
URL of the image you want to display.
Syntax for defining an image:
<img src="url" alt="some_text">
The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on
"www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two
paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
HTML Page 13
The value of the alt attribute is an author-defined text:
<img src="smiley.gif" alt="Smiley face">
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow
connection, an error in the src attribute, or if the user uses a screen reader).
HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space
required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know
the size of the image. The effect will be that the page layout will change during loading (while the images load).
Basic Notes - Useful Tips

Note: If an HTML file contains ten images - eleven files are required to display the page right. Loading images takes time, so my
best advice is: Use images carefully.
Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and
inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page,
otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.
HTML Image Tags

Tag Description
<img> Defines an image
<map> Defines an image-map
<area> Defines a clickable area inside an image-map
What’s the difference between JPEG and GIF?

Use JPEG for photos and complex graphics.
○ Does not support transparency
Use GIF for images with solid colors, logos, and geometric shapes.
○ Allows one background color to be set to “transparent” so that anything underneath the image will show through.
HTML Tables
HTML Table Tags
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for formatting
<col> Specifies column properties for each column within a <colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML Lists
HTML List Tags

Tag Description
<ol> Defines an ordered list
HTML Page 14
<ul> Defines an unordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
Tips and Notes

Tip: Use CSS to style lists.
HTML Page 15
HTML Basics 2
09 January 2014 09:51
HTML Blocks:
HTML <div> and <span>
HTML elements can be grouped together with <div> and <span>.
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 Grouping Tags

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
HTML Layouts
Web page layout is very important to make your website look good.
Design your webpage layout very carefully.
Website Layouts
Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create
backgrounds or colorful look for the pages.
Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data -
NOT as a layout tool!
HTML Layouts - Using <div> Elements

The div element is a block level element used for grouping HTML elements.
The following example uses five div elements to create a multiple column layout, creating the same result as in the previous
example:
Example
<!DOCTYPE html>
<html>
<body>
HTML Page 16
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">

<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">

<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">

Content goes here</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">

Copyright © W3Schools.com</div>
</div>
</body>
</html>
Try it yourself »
The HTML code above will produce the following result:
Main Title of Web Page
Menu
HTML
CSS
JavaScript
Content goes here
Copyright © W3Schools.com
HTML Layouts - Using Tables

A simple way of creating layouts is by using the HTML <table> tag.
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create
backgrounds or colorful look for the pages.
Using <table> to create a nice layout is NOT the correct use of the element. The purpose of the <table> element is to
display tabular data!
The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan
attribute:
Example
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">

<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
HTML Page 17
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Content goes here</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>
</body>
</html>
Try it yourself »
The HTML code above will produce the following result:
Main Title of Web Page
Menu Content goes here
HTML
CSS
JavaScript
Copyright © W3Schools.com
HTML Layout - Useful Tips

Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH
EASIER to maintain. You can change the layout of all your pages by editing one file. To learn more about CSS, study our CSS
tutorial.
Tip: Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website
templates (these are pre-built website layouts you can use and customize).
HTML Layout Tags

Tag Description
<div> Defines a section in a document (block-level)
<span> Defines a section in a document (inline)
HTML Page 18
HTML Forms
25 December 2014 12:07
HTML Forms and Input

=======================================================================================================
HTML Forms
HTML forms are used to pass data to a server.
An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form
can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form
HTML Forms - The Input Element

The most important form element is the <input> element.
The <input> element is used to select user information.
An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field,
checkbox, password, radio button, submit button, and more.
The most common input types are described below.
Text Fields
<input type="text"> defines a one-line input field that a user can enter text into:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
Password Field
<input type="password"> defines a password field:
<form>
Password: <input type="password" name="pwd">
</form>
Radio Buttons
<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Checkboxes
<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of
choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
Submit Button
<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute.
The file defined in the action attribute usually does something with the received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
HTML Page 19
</form>
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a
page called "html_form_action.asp". The page will show you the received input.
HTML Form Tags

New : New tags in HTML5.
Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<button> Defines a clickable button
<datalist>New Specifies a list of pre-defined options for input controls
<keygen>New Defines a key-pair generator field (for forms)
<output>New Defines the result of a calculation
HTML Page 20
HTML Tag Reference
09 January 2014 09:55
HTML Reference - (HTML5 Compliant)

Ordered Alphabetically
New : New tags in HTML5.
Tag Description
 Defines a comment
<! Defines the document type
DOCTYPE>
<a> Defines a hyperlink
<abbr> Defines an abbreviation
<acronym> Not supported in HTML5. Use <abbr> instead.
Defines an acronym
<address> Defines contact information for the author/owner of a
document
<applet> Not supported in HTML5. Use <object> instead.
Defines an embedded applet
<area> Defines an area inside an image-map
<article> Defines an article
New
<aside>New Defines content aside from the page content
<audio>New Defines sound content
<base> Specifies the base URL/target for all relative URLs in a
document
<basefont> Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a
document
<bdi>New Isolates a part of text that might be formatted in a different
direction from other text outside it
<bdo> Overrides the current text direction
<big> Not supported in HTML5. Use CSS instead.
Defines big text
<blockquote Defines a section that is quoted from another source
>
<body> Defines the document's body
<br> Defines a single line break
HTML Page 21
<br> Defines a single line break
<canvas> Used to draw graphics, on the fly, via scripting (usually
New JavaScript)
<center> Not supported in HTML5. Use CSS instead.
Defines centered text
<code> Defines a piece of computer code
<col> Specifies column properties for each column within a
<colgroup> element
<colgroup> Specifies a group of one or more columns in a table for
formatting
<command> Defines a command button that a user can invoke
New
<datalist> Specifies a list of pre-defined options for input controls
New
<dd> Defines a description/value of a term in a description list
<del> Defines text that has been deleted from a document
<details> Defines additional details that the user can view or hide
New
<dfn> Defines a definition term
<dialog> Defines a dialog box or window
New
<dir> Not supported in HTML5. Use <ul> instead.
Defines a directory list
<div> Defines a section in a document
<embed> Defines a container for an external (non-HTML) application
New
<figcaption> Defines a caption for a <figure> element
New
<figure> Specifies self-contained content
New
<font> Not supported in HTML5. Use CSS instead.
HTML Page 22
Defines font, color, and size for text
<footer> Defines a footer for a document or section
New
<frame> Not supported in HTML5.
Defines a window (a frame) in a frameset
<frameset> Not supported in HTML5.
Defines a set of frames
<h1> to Defines HTML headings
<h6>
<header> Defines a header for a document or section
New
<hr> Defines a thematic change in the content
<html> Defines the root of an HTML document
<iframe> Defines an inline frame
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<keygen> Defines a key-pair generator field (for forms)
New
<link> Defines the relationship between a document and an external
resource (most used to link to style sheets)
<map> Defines a client-side image-map
<mark>New Defines marked/highlighted text
<menu> Defines a list/menu of commands
<meter> Defines a scalar measurement within a known range (a gauge)
New
<nav>New Defines navigation links
<noframes> Not supported in HTML5.
HTML Page 23
Defines an alternate content for users that do not support
frames
<noscript> Defines an alternate content for users that do not support
client-side scripts
<object> Defines an embedded object
<output> Defines the result of a calculation
New
<p> Defines a paragraph
<param> Defines a parameter for an object
<progress> Represents the progress of a task
New
<q> Defines a short quotation
<rp>New Defines what to show in browsers that do not support ruby
annotations
<rt>New Defines an explanation/pronunciation of characters (for East
Asian typography)
<ruby>New Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<section> Defines a section in a document
New
<source> Defines multiple media resources for media elements (<video>
New and <audio>)
<span> Defines a section in a document
<strike> Not supported in HTML5. Use <del> instead.
Defines strikethrough text
HTML Page 24
<summary> Defines a visible heading for a <details> element
New
<time>New Defines a date/time
<title> Defines a title for the document
<track>New Defines text tracks for media elements (<video> and <audio>)
<tt> Not supported in HTML5. Use CSS instead.
Defines teletype text
<u> Defines text that should be stylistically different from normal
text
<video>New Defines a video or movie
<wbr>New Defines a possible line-break
HTML Page 25
HTML Global Attributes
09 January 2014 09:55
The global attributes below can be used on any HTML element.

New : New global attributes in HTML5.
Attribute Description
accesskey Specifies a shortcut key to activate/focus an element
class Specifies one or more classnames for an element (refers to a class
in a style sheet)
contenteditabl Specifies whether the content of an element is editable or not
eNew
contextmenuN Specifies a context menu for an element. The context menu
ew appears when a user right-clicks on the element
data-*New Used to store custom data private to the page or application
dir Specifies the text direction for the content in an element
draggableNew Specifies whether an element is draggable or not
dropzoneNew Specifies whether the dragged data is copied, moved, or linked,
when dropped
hiddenNew Specifies that an element is not yet, or is no longer, relevant
id Specifies a unique id for an element
lang Specifies the language of the element's content
spellcheckNe Specifies whether the element is to have its spelling and grammar
w checked or not
style Specifies an inline CSS style for an element
tabindex Specifies the tabbing order of an element
title Specifies extra information about an element
translateNew Specifies whether the content of an element should be translated
or not
HTML Page 26
HTML Global Event Attributes
09 January 2014 09:54
HTML Event Attributes
Global Event Attributes

HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an
element.
To learn more about programming events, please visit our JavaScript tutorial.
Below are the global event attributes that can be added to HTML elements to define event actions.
New : New event attributes in HTML5.
Window Event Attributes

Events triggered for the window object (applies to the <body> tag):
onafterprintNew script Script to be run after the document is printed
onbeforeprintNew script Script to be run before the document is printed
onbeforeunloadNew script Script to be run before the document is unloaded
onerrorNew script Script to be run when an error occur
onhaschangeNew script Script to be run when the document has changed
onload script Fires after the page is finished loading
onmessageNew script Script to be run when the message is triggered
onofflineNew script Script to be run when the document goes offline
ononlineNew script Script to be run when the document comes online
onpagehideNew script Script to be run when the window is hidden
onpageshowNew script Script to be run when the window becomes visible
onpopstateNew script Script to be run when the window's history changes
onredoNew script Script to be run when the document performs a redo
onresizeNew script Fires when the browser window is resized
onstorageNew script Script to be run when a Web Storage area is updated
onundoNew script Script to be run when the document performs an undo
onunload script Fires once a page has unloaded (or the browser window has been closed)
Form Events
Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements):
onblur script Fires the moment that the element loses focus
onchange script Fires the moment when the value of the element is changed
oncontextmenuNew script Script to be run when a context menu is triggered
onfocus script Fires the moment when the element gets focus
onformchangeNew script Script to be run when a form changes
onforminputNew script Script to be run when a form gets user input
oninputNew script Script to be run when an element gets user input
oninvalidNew script Script to be run when an element is invalid
onreset script Fires when the Reset button in a form is clicked
Not supported in HTML5
onselect script Fires after some text has been selected in an element
HTML Page 27
onselect script Fires after some text has been selected in an element
onsubmit script Fires when a form is submitted
Keyboard Events
onkeydown script Fires when a user is pressing a key
onkeypress script Fires when a user presses a key
onkeyup script Fires when a user releases a key
Mouse Events
Events triggered by a mouse, or similar user actions:
onclick script Fires on a mouse click on the element
ondblclick script Fires on a mouse double-click on the element
ondragNew script Script to be run when an element is dragged
ondragendNew script Script to be run at the end of a drag operation
ondragenterNew script Script to be run when an element has been dragged to a valid drop target
ondragleaveNew script Script to be run when an element leaves a valid drop target
ondragoverNew script Script to be run when an element is being dragged over a valid drop target
ondragstartNew script Script to be run at the start of a drag operation
ondropNew script Script to be run when dragged element is being dropped
onmousedown script Fires when a mouse button is pressed down on an element
onmousemove script Fires when the mouse pointer moves over an element
onmouseout script Fires when the mouse pointer moves out of an element
onmouseover script Fires when the mouse pointer moves over an element
onmouseup script Fires when a mouse button is released over an element
onmousewheelNew script Script to be run when the mouse wheel is being rotated
onscrollNew script Script to be run when an element's scrollbar is being scrolled
Media Events
Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most common in media
elements, like <audio>, <embed>, <img>, <object>, and <video>):
onabort script Script to be run on abort
oncanplayNew script Script to be run when a file is ready to start playing (when it has buffered enough to begin)
oncanplaythroughN script Script to be run when a file can be played all the way to the end without pausing for
ew buffering
ondurationchangeN script Script to be run when the length of the media changes
ew
onemptiedNew script Script to be run when something bad happens and the file is suddenly unavailable (like
unexpectedly disconnects)
onendedNew script Script to be run when the media has reach the end (a useful event for messages like
"thanks for listening")
onerrorNew script Script to be run when an error occurs when the file is being loaded
onloadeddataNew script Script to be run when media data is loaded
onloadedmetadata script Script to be run when meta data (like dimensions and duration) are loaded
New
HTML Page 28
New
onloadstartNew script Script to be run just as the file begins to load before anything is actually loaded
onpauseNew script Script to be run when the media is paused either by the user or programmatically
onplayNew script Script to be run when the media is ready to start playing
onplayingNew script Script to be run when the media actually has started playing
onprogressNew script Script to be run when the browser is in the process of getting the media data
onratechangeNew script Script to be run each time the playback rate changes (like when a user switches to a slow
motion or fast forward mode)
onreadystatechange script Script to be run each time the ready state changes (the ready state tracks the state of the
New media data)
onseekedNew script Script to be run when the seeking attribute is set to false indicating that seeking has ended
onseekingNew script Script to be run when the seeking attribute is set to true indicating that seeking is active
onstalledNew script Script to be run when the browser is unable to fetch the media data for whatever reason
onsuspendNew script Script to be run when fetching the media data is stopped before it is completely loaded for
whatever reason
ontimeupdateNew script Script to be run when the playing position has changed (like when the user fast forwards to
a different point in the media)
onvolumechangeNe script Script to be run each time the volume is changed which (includes setting the volume to
w "mute")
onwaitingNew script Script to be run when the media has paused but is expected to resume (like when the
media pauses to buffer more data)
HTML Page 29
HTML Quick List
10 January 2014 21:32
HTML Quick List from W3Schools. Print it, fold it, and put it in your pocket.
HTML Basic Document

<!DOCTYPE html>
<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body>
</html>
Basic Tags
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
<p>This is a paragraph.</p>
<br> (line break)
<hr> (horizontal rule)

Formatting
<b>Bold text</b>
<code>Computer code</code>
<em>Emphasized text</em>
<i>Italic text</i>
<kbd>Keyboard input</kbd>
<pre>Preformatted text</pre>
<small>Smaller text</small>
<strong>Important text</strong>
<abbr> (abbreviation)
<address> (contact information)
<bdo> (text direction)
<blockquote> (a section quoted from another source)
<cite> (title of a work)
<del> (deleted text)
<ins> (inserted text)
<sub> (subscripted text)
HTML Page 30
<sub> (subscripted text)
<sup> (superscripted text)
Links
Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>
Bookmark:
<a id="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>
Images
<img src="URL" alt="Alternate Text" height="42" width="42">
Styles/Sections
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<div>A block-level section in a document</div>

<span>An inline section in a document</span>
Unordered list
<ul>
<li>Item</li>
<li>Item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Definition list
<dl>
<dt>Item 1</dt>
<dd>Describe item 1</dd>
<dt>Item 2</dt>
<dd>Describe item 2</dd>
</dl>
Tables
<table border="1">
<tr>
<th>table header</th>
<th>table header</th>
</tr>
<tr>
<td>table data</td>
<td>table data</td>
</tr>
</table>
HTML Page 31
</table>
Iframe
<iframe src="demo_iframe.htm"></iframe>
Forms
<form action="demo_form.asp" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
Entities
< is the same as <
> is the same as >
© is the same as ©
HTML Page 32
Website Hosting Tips
10 January 2014 21:44
Hosting your own Web site

Hosting your web site on your own server is always an option. Here are some points to consider:
Hardware Expenses
To run a "real" web site, you will have to buy some powerful server hardware. Don't expect that a low cost PC will do
the job. You will also need a permanent (24 hours a day ) high-speed connection.
Software Expenses
Remember that server-licenses often are higher than client-licenses. Also note that server-licenses might have limits
on number of users.
Labor Expenses
Don't expect low labor expenses. You have to install your own hardware and software. You also have to deal with
bugs and viruses, and keep your server constantly running in an environment where "everything could happen".
Using an Internet Service Provider

Renting a server from an Internet Service Provider (ISP) is a common option.
Most small companies store their web site on a server provided by an ISP. Here are some advantages:
Connection Speed
Most ISPs have very fast connections to the internet.
Powerful Hardware
ISPs often have powerful web servers that can be shared by several companies. You can also expect them to have an
effective load balancing, and necessary backup servers.
Security and Stability
ISPs are specialists on web hosting. Expect their servers to have more than 99% up time, the latest software patches,
and the best virus protection.
Things to Consider with an ISP

24-hour support
Make sure your ISP offers 24-hours support. Don't put yourself in a situation where you cannot fix critical problems
without having to wait until the next working day. Toll-free phone could be vital if you don't want to pay for long
distance calls.
Daily Backup
Make sure your ISP runs a daily backup routine, otherwise you may lose some valuable data.
Traffic Volume
Study the ISP's traffic volume restrictions. Make sure that you don't have to pay a fortune for unexpected high traffic
if your web site becomes popular.
Bandwidth or Content Restrictions
Study the ISP's bandwidth and content restrictions. If you plan to publish pictures or broadcast video or sound, make
sure that you can.
E-mail Capabilities
Make sure your ISP supports the e-mail capabilities you need.
Database Access
If you plan to use data from databases on your web site, make sure your ISP supports the database access you need.
HTML Page 33
HTML Vs XHTML
09 January 2014 06:39
XHTML is HTML written as XML.
What Is XHTML?
 XHTML stands for EXtensible HyperText Markup Language
 XHTML is almost identical to HTML 4.01
 XHTML is a stricter and cleaner version of HTML
 XHTML is HTML defined as an XML application
 XHTML is supported by all major browsers.
Why XHTML?
Many pages on the internet contain "bad" HTML.
The following HTML code will work fine if you view it in a browser (even if it does NOT follow the HTML rules):
<html>
<head>
<title>This is bad HTML</title>
<body>
<h1>Bad HTML
<p>This is a paragraph
</body>
XML is a markup language where documents must be marked up correctly and "well-formed".
If you want to study XML, please read our XML tutorial.
Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on
mobile phones or other small devices. Smaller devices often lack the resources or power to interpret a "bad" markup
language.
Therefore - by combining the strengths of HTML and XML, XHTML was developed. XHTML is HTML redesigned as XML.
The Most Important Differences from HTML:

Document Structure
□ XHTML DOCTYPE is mandatory
□ The XML namespace attribute in <html> is mandatory
□ <html>, <head>, <title>, and <body> is mandatory
XHTML Elements
□ XHTML elements must be properly nested
□ XHTML elements must always be closed
□ XHTML elements must be in lowercase
□ XHTML documents must have one root element
XHTML Attributes
□ Attribute names must be in lower case
□ Attribute values must be quoted
□ Attribute minimization is forbidden
<!DOCTYPE ....> Is Mandatory

An XHTML document must have an XHTML DOCTYPE declaration.
A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.
The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html>, must specify
the xml namespace for the document.
The example below shows an XHTML document with a minimum of required tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
HTML Page 34
<title>Title of document</title>
</head>
<body>
......
</body>
</html>
XHTML Elements Must Be Properly Nested

In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>
XHTML Elements Must Always Be Closed

This is wrong:
<p>This is a paragraph
<p>This is another paragraph
This is correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>
Empty Elements Must Also Be Closed

This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />
XHTML Elements Must Be In Lower Case

This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>
Attribute Names Must Be In Lower Case

This is wrong:
<table WIDTH="100%">
This is correct:
<table width="100%">
Attribute Values Must Be Quoted

This is wrong:
<table width=100%>
This is correct:
<table width="100%">
Attribute Minimization Is Forbidden

This is wrong:
<input checked>
HTML Page 35
<input checked>
<input readonly>
<input disabled>
<option selected>
This is correct:
<input checked="checked">
<input readonly="readonly">
<input disabled="disabled">
<option selected="selected">
How to Convert from HTML to XHTML

1. Add an XHTML <!DOCTYPE> to the first line of every page
2. Add an xmlns attribute to the html element of every page
3. Change all element names to lowercase
4. Close all empty elements
5. Change all attribute names to lowercase
6. Quote all attribute values
The XHTML 1.0 check list: Here’s the list of things you must do to convert from HTML to XHTML
❏ Change your DOCTYPE to Strict XHTML. Or, you can use Transitional XHTML if you’re still using Transitional HTML.
❏ Add the xmlns, lang, and xml:lang attributes to your <html> opening tag.
❏ The <html> tag must be the first tag after the DOCTYPE and the </html> closing tag must be the last tag in the document.
❏ All element names must be written with lowercase letters.
❏ All opening tags must have closing tags. Or, if an element is empty, the tag must end with a space and then />.
❏ All attributes must have values, and those values must be surrounded by double quotes.
❏ Don’t use & in the content of your HTML. & is for starting entities, so use & instead. Also convert any other special
characters to entities.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>

<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
<title>Head First Lounge</title>
</head>
<body>
</body>
</html>
HTML Page 36
HTML 5 About
11 January 2014 07:07
HTML5 is The New HTML Standard

HTML5
 New Elements
 New Attributes
 Full CSS3 Support
 Video and Audio
 2D/3D Graphics
 Local Storage
 Local SQL Database
 Web Applications
HTML5 Multimedia
With HTML5, playing video and audio is easier than ever.
 HTML5 <video>
 HTML5 <audio>
HTML5 Graphics
With HTML5, drawing graphics is easier than ever:
 Using the <canvas>element
 Using inline SVG
 Using CSS3 2D/3D
HTML5 Applications
With HTML5, web application development is easier than ever.
 Local data storage
 Local file access
 Local SQL database
 Application cache
 Javascript workers
 XHTMLHttpRequest 2
Semantic Elements
New elements for headers, footers, menus, sections and articles.
Sections can be used in place of <div> judicially.
HTML5 Forms
New form elements, new attributes, new input types, automatic validation.
Greatly helps in validating a form.
HTML5 uses CSS3

 New Selectors
 New Properties
HTML Page 37
 New Properties
 Animations
 2D/3D Transformations
 Rounded Corners
 Shadow Effects
 Downloadable Fonts
HTML Page 38
Intro
11 January 2014 07:18
What is HTML5?
HTML5 will be the new standard for HTML.
The previous version of HTML, HTML 4.01, came in 1999. The internet has changed significantly since then.
HTML5 is intended to subsume not only HTML 4, but also XHTML 1 and DOM Level 2 HTML.
HTML5 is designed to deliver almost everything you want to do online without requiring additional plugins. It does
everything from animation to apps, music to movies, and can also be used to build complicated applications that run in your
browser.
HTML5 is also cross-platform (it does not care whether you are using a tablet or a smartphone, a netbook, notebook or a
Smart TV).
HTML5 can also be used to write web applications that still work when you are not online.
The HTML 5 working group includes AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, and hundreds of other
vendors.
HTML5 is still a work in progress. However, all major browsers support many of the new HTML5 elements and APIs.
How Did HTML5 Get Started?

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology
Working Group (WHATWG).
WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In 2006, they decided to
cooperate and create a new version of HTML.
Some rules for HTML5 were established:
 New features should be based on HTML, CSS, DOM, and JavaScript
 The need for external plugins (like Flash) needs to be reduced
 Error handling should be easier than in previous versions
 Scripting has to be replaced by more markup
 HTML5 should be device-independent
 The development process should be visible to the public
The HTML5 <!DOCTYPE>

In HTML5 there is only one <!doctype> declaration, and it is very simple:
<!DOCTYPE html>
Minimum HTML5 Document

Below is a simple HTML5 document, with the minimum of required tags:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
HTML5 - New Features

Some of the most interesting new features in HTML5:
 The <canvas> element for 2D drawing
 The <video> and <audio> elements for media playback
 Support for local storage
 New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
 New form controls, like calendar, date, time, email, url, search
HTML Page 39
 New form controls, like calendar, date, time, email, url, search
Browser Support for HTML5

HTML5 is not yet an official standard, and no browsers have full HTML5 support.
But all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest
versions.
HTML Page 40
HTML5 New Elements
11 January 2014 07:35
HTML5 New Elements
New Elements in HTML5

The internet, and the use of the internet, has changed a lot since HTML 4.01 became a standard in 1999.
Today, several elements in HTML 4.01 are obsolete, never used, or not used the way they were intended. All those
elements are removed or re-written in HTML5.
To better handle today's internet use, HTML5 also includes new elements for drawing graphics, adding media content,
better page structure, better form handling, and several APIs to drag/drop elements, find Geolocation, include web
storage, application cache, web workers, etc.
The New <canvas> Element

Note: The links in the tables below point to our HTML 5 Reference. However, you will learn more about these new
elements throughout this tutorial.
Tag Description
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
New Media Elements

Tag Description
<audio> Defines sound content
<video> Defines a video or movie
<source> Defines multiple media resources for <video> and <audio>
<embed> Defines a container for an external application or interactive content (a plug-in)
<track> Defines text tracks for <video> and <audio>
New Form Elements

Tag Description
New Semantic/Structural Elements

HTML5 offers new elements for better structure:
Tag Description
<aside> Defines content aside from the page content
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<command> Defines a command button that a user can invoke
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
HTML Page 41
<nav> Defines navigation links
<ruby> Defines a ruby annotation (for East Asian typography)
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<rp> Defines what to show in browsers that do not support ruby annotations
<time> Defines a date/time
<wbr> Defines a possible line-break. [it is different from <br>, which makes line-break compulsory]
Removed Elements
The following HTML 4.01 elements are removed from HTML5:
 <acronym>
 <applet>
 <basefont>
 <big>
 <center>
 <dir>
 <font>
 <frame>
 <frameset>
 <noframes>
 <strike>
 <tt>
HTML Page 42
HTML5 Canvas
11 January 2014 09:10
HTML Page 43
SVG
11 January 2014 09:10
What is SVG?
 SVG stands for Scalable Vector Graphics
 SVG is used to define vector-based graphics for the Web
 SVG defines the graphics in XML format
 SVG graphics do NOT lose any quality if they are zoomed or resized
 Every element and every attribute in SVG files can be animated
 SVG is a W3C recommendation
SVG Advantages
Advantages of using SVG over other image formats (like JPEG and GIF) are:
 SVG images can be created and edited with any text editor
 SVG images can be searched, indexed, scripted, and compressed
 SVG images are scalable
 SVG images can be printed with high quality at any resolution
 SVG images are zoomable (and the image can be zoomed without degradation)
Differences Between SVG and Canvas

SVG is a language for describing 2D graphics in XML.
Canvas draws 2D graphics, on the fly (with a JavaScript).
SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers
for an element.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can
automatically re-render the shape.
Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is forgotten by the browser. If its position should be
changed, the entire scene needs to be redrawn, including any objects that might have been covered by the graphic.
Comparison of Canvas and SVG

The table below shows some important differences between Canvas and SVG:
Canvas SVG
• Resolution dependent • Resolution independent
• No support for event handlers • Support for event handlers
• Poor text rendering capabilities • Best suited for applications with large rendering areas (Google
• You can save the resulting image as .png Maps)
or .jpg • Slow rendering if complex (anything that uses the DOM a lot will be
• Well suited for graphic-intensive games slow)
• Not suited for game applications
HTML Page 44
Sample
Monday, March 28, 2016 11:27 AM
<html lang="en">
<head>
Utf-8
</head>
</html>
HTML Page 45
HTML
24 February 2015 08:15
HTML Tags Ordered by Category

= New in HTML5.
Basic HTML
Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
 Defines a comment
Formatting
Tag Description
<acronym> Not supported in HTML5. Use <abbr> instead.
Defines an acronym
<abbr> Defines an abbreviation or an acronym
<address> Defines contact information for the author/owner of a document/article
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo> Overrides the current text direction
<big> Not supported in HTML5. Use CSS instead.
Defines big text
<blockquote> Defines a section that is quoted from another source
<center> Not supported in HTML5. Use CSS instead.
Defines centered text
<code> Defines a piece of computer code
<del> Defines text that has been deleted from a document
<dfn> Represents the defining instance of a term
Defines font, color, and size for text
HTML Page 46
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<q> Defines a short quotation
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<strike> Not supported in HTML5. Use <del> or <s> instead.
Defines strikethrough text
<time> Defines a date/time
<tt> Not supported in HTML5. Use CSS instead.
Defines teletype text
<u> Defines text that should be stylistically different from normal text
<wbr> Defines a possible line-break
Forms and Input

Tag Description
HTML Page 47
Frames
Tag Description
<frame> Not supported in HTML5.
Defines a window (a frame) in a frameset
<frameset> Not supported in HTML5.
Defines a set of frames
Defines an alternate content for users that do not support frames
<iframe> Defines an inline frame
Images
Tag Description
<map> Defines a client-side image-map
<area> Defines an area inside an image-map
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<figure> Specifies self-contained content
Audio / Video
Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines a video or movie
Links
Tag Description
<a> Defines a hyperlink
<link> Defines the relationship between a document and an external resource (most used to link to style sheets)
<nav> Defines navigation links
Lists
Tag Description
<dir> Not supported in HTML5. Use <ul> instead.
Defines a directory list
HTML Page 48
<dd> Defines a description of a term/name in a description list
<menu> Defines a list/menu of commands
<menuitem> Defines a command/menu item that the user can invoke from a popup menu
Tables
Tag Description
<col> Specifies column properties for each column within a <colgroup> element
<colgroup> Specifies a group of one or more columns in a table for formatting
Styles and Semantics

Tag Description
<div> Defines a section in a document
<span> Defines a section in a document
<main> Specifies the main content of a document
<aside> Defines content aside from the page content
Meta Info
Tag Description
<base> Specifies the base URL/target for all relative URLs in a document
<basefont> Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a document
Programming
HTML Page 49
Programming
Tag Description
<noscript> Defines an alternate content for users that do not support client-side scripts
<applet> Not supported in HTML5. Use <embed> or <object> instead.
Defines an embedded applet
<embed> Defines a container for an external (non-HTML) application
<object> Defines an embedded object
<param> Defines a parameter for an object
HTML Page 50

My First Heading My First Paragraph.

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

My First Heading My First Paragraph.

Hochgeladen von

Copyright:

Verfügbare Formate

Introduction

08 January 2014 09:40

<h1>My First Heading</h1>

<p>My first paragraph.</p>

HTML Page Structure

HTML <!DOCTYPE> Declaration

Differences Between HTML 4.01 and HTML5

HTML Elements and Doctypes

Tips and Notes

Common DOCTYPE Declarations

HTML document validation:

Adding a <meta> tag to specify the content type

<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1”>

What’s a <head> without a <title>?

Keep block elements out of your inline elements.

Keep block elements out of your <p> element.

Lists are for list items.

Who knew? The <blockquote> only likes block elements.

Be careful about nesting an inline element inside another inline element.

HTML Tip: Use Lowercase Tags

Always Quote Attribute Values

Differences Between HTML and XHTML

HTML Text Formatting

HTML Text Formatting Tags

HTML "Computer Output" Tags

HTML Citations, Quotations, and Definition Tags

HTML Link Syntax

HTML Links - The target Attribute

HTML Links - The id Attribute

Basic Notes - Useful Tips

Tips and Notes

The HTML <head> Element

The HTML <title> Element

The HTML <base> Element

The HTML <link> Element

The HTML <style> Element

The HTML <meta> Element

<meta> Tags - Examples of Use

The HTML <script> Element

HTML head Elements

HTML <style> Tag

Tips and Notes

Differences Between HTML 4.01 and HTML5

HTML <script> Tag

Definition and Usage

Tips and Notes

Differences Between HTML 4.01 and HTML5

Differences Between HTML and XHTML

HTML Images - The Alt Attribute

HTML Images - Set Height and Width of an Image

Basic Notes - Useful Tips

HTML Image Tags

What’s the difference between JPEG and GIF?

HTML List Tags

Tips and Notes

HTML Block Elements

HTML Inline Elements

The HTML <div> Element

The HTML <span> Element

HTML Grouping Tags

HTML Layouts - Using <div> Elements

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">