HTML

HYPER TEXT MARKUP LANGUAGE

HTML

HTML 5

Intro	Support	New Elements	Semantics
Migration	Style Guide	Canvas	SVG
Google Maps	Media	Video	Audio
Plugins	Youtube	Geolocation	Drag/Drop
Web Storage	Web Workers	SSE

HTML

Introduction

HTML is the standard markup language for creating Web pages.

HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use them to render the content of the page

⟰⬆￪⇧↿↾↑↟⇈

Editors

Notepad
Notepad++
Sublime Text
Text Edit ( Mac )
Netbeans
Adobe Dreamweaver
Eclipse
Atom

⟰⬆￪⇧↿↾↑↟⇈
Basic

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

</html>

<h1> to <h6>	Defines HTML headings
<p></p>	Defines a paragraph	Id, name
<a></a>	Defines a hyperlink	Href, name
<img></img>	Defines an image	Src, alt, width, height
<button></button>	Defines a clickable button	Value, name, type , action

⟰⬆￪⇧↿↾↑↟⇈

Elements

<tagname>Content goes here...</tagname>
Do Not Forget End Tag
<br > , </hr> is the empty HTML Elements
Always use Lowercase tag

⟰⬆￪⇧↿↾↑↟⇈

Attributes

All HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"

Href : <a href=””>Hyperlink</a>

Src: <img src="img.jpg">

Width & Height: <img src="img.jpg" width=” 400px” height=”500px”>

Alt: <img src=”” alt=”” >

Style: <p style=”color:blue” >Blue</p>

Lang: <html lang=”en-US”>

Title: <p title=”This is title”>Title</p>

Attribute	Description
alt	Specifies an alternative text for an image, when the image cannot be displayed
disabled	Specifies that an input element should be disabled
href	Specifies the URL (web address) for a link
id	Specifies a unique id for an element
src	Specifies the URL (web address) for an image
style	Specifies an inline CSS style for an element
title	Specifies extra information about an element (displayed as a tool tip)

⟰⬆￪⇧↿↾↑↟⇈

Headings

Tag	Description
<html>	Defines the root of an HTML document
<body>	Defines the document's body
<head>	A container for all the head elements (title, scripts, styles, meta information, and more)
<h1> to <h6>	Defines HTML headings
<hr>	Defines a thematic change in the content

⟰⬆￪⇧↿↾↑↟⇈

Paragraphs

<p></p>	Defines a paragraph
<br>	Inserts a single line break
<pre></pre>	Defines pre-formatted text

⟰⬆￪⇧↿↾↑↟⇈

Styles

Use the style attribute for styling HTML elements
Use background-color for background color
Use color for text colors
Use font-family for text fonts
Use font-size for text sizes
Use text-align for text alignment

⟰⬆￪⇧↿↾↑↟⇈

Formatting

Formatting elements were designed to display special types of text:

<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text

⟰⬆￪⇧↿↾↑↟⇈

Quotations

<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
<cite>	Defines the title of a work
<q>	Defines a short inline quotation

⟰⬆￪⇧↿↾↑↟⇈

Comments

You can add comments to your HTML source by using the following syntax:

⟰⬆￪⇧↿↾↑↟⇈

Colors

Color Names: red, blue, green, yellow, orange
Background Color: <tagname style=”background-color:color_name;”></tagname>
Text Color: <tagname style=” color:color_name;”></tagname>
Border Color: <tagname style=” border: ?px solid/? color_name;”></tagname>
Color Values:

RGB Value: rgb(red, green, blue)
HEX Value: #rrggbb
HSL Value: hsl(hue, saturation, lightness)
RGBA Value: rgba(red, green, blue, alpha)
HSLA Value: hsla(hue, saturation, lightness, alpha)

⟰⬆￪⇧↿↾↑↟⇈

CSS

Styling HTML with CSS

CSS stands for Cascading Style Sheets.

CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

CSS saves a lot of work. It can control the layout of multiple web pages all at once.

CSS can be added to HTML elements in 3 ways:

· Inline - by using the style attribute in HTML elements

Eg: <h1 style="color:blue;">This is a Blue Heading</h1>

· Internal - by using a <style> element in the <head> section

<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>

· External - by using an external CSS file

<head>
<link rel="stylesheet" href="styles.css">
</head>

⟰⬆￪⇧↿↾↑↟⇈

Links

Use the <a> element to define a link

Use the href attribute to define the link address

<a href="html_images.html">HTML Images</a>

Use the target attribute to define where to open the linked document

Use the <img> element (inside <a>) to use an image as a link

Use the id attribute (id="value") to define bookmarks in a page

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

Use the href attribute (href="#value") to link to the bookmark

<a href="#C4">Jump to Chapter 4</a>

⟰⬆￪⇧↿↾↑↟⇈

Images

Use the HTML <img> element to define an image
Use the HTML src attribute to define the URL of the image
Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
Use the HTML width and height attributes to define the size of the image
Use the CSS width and height properties to define the size of the image (alternatively)
Use the CSS float property to let the image float
Use the HTML <map> element to define an image-map

Use the HTML <area> element to define the clickable areas in the image-map
Use the HTML <img>'s element usemap attribute to point to an image-map
Use the HTML <picture> element to show different images for different devices

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

⟰⬆￪⇧↿↾↑↟⇈

Tables

<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

Use the CSS border property to define a border
Use the CSS border-collapse property to collapse cell borders
Use the CSS padding property to add padding to cells
Use the CSS text-align property to align cell text
Use the CSS border-spacing property to set the spacing between cells

⟰⬆￪⇧↿↾↑↟⇈

Lists

<ul>	Defines an unordered list
<ol>	Defines an ordered list
<li>	Defines a list item
<dl>	Defines a description list
<dt>	Defines a term in a description list
<dd>	Describes the term in a description list

Use the CSS list-style-type property to define the list item marker
Use the CSS property float:left or display:inline to display a list horizontally

Unordered List Item:

disc	Sets the list item marker to a bullet (default)
circle	Sets the list item marker to a circle
square	Sets the list item marker to a square
none	The list items will not be marked

Ordered Types:

type="1"	The list items will be numbered with numbers (default)
type="A"	The list items will be numbered with uppercase letters
type="a"	The list items will be numbered with lowercase letters
type="I"	The list items will be numbered with uppercase roman numbers
type="i"	The list items will be numbered with lowercase roman numbers

⟰⬆￪⇧↿↾↑↟⇈

Blocks

Block level elements in HTML:

· <address>

· <article>

· <aside>

· <blockquote>

· <canvas>

· <dd>

· <div>

· <dl>

· <dt>

· <fieldset>

· <figcaption>

· <figure>

· <footer>

· <form>

· <h1>-<h6>

· <header>

· <hr>

· <li>

· <main>

· <nav>

· <noscript>

· <ol>

· <output>

· <p>

· <pre>

· <section>

· <table>

· <tfoot>

· <ul>

· <video>

Inline elements in HTML:

· <a>
· <abbr>
· <acronym>
· <b>
· <bdo>
· <big>
· <br>
· <button>
· <cite>
· <code>
· <dfn>
· <em>
· <i>
· <img>
· <input>
· <kbd>
· <label>
· <map>
· <object>
· <q>
· <samp>
· <script>
· <select>
· <small>
· <span>
· <strong>
· <sub>
· <sup>
· <textarea>
· <time>
· <tt>
<var>

<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)

⟰⬆￪⇧↿↾↑↟⇈

Classes

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color: black;
    color: white;
    margin: 20px;
    padding: 20px;
}
</style>
</head>
<body>

<div class="cities">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="cities">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="cities">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

When a user clicks on a button, hide all elements with the class name "city":

⟰⬆￪⇧↿↾↑↟⇈

Id

Use CSS to style an element with the id "myHeader":

Use the id attribute to manipulate text with JavaScript:

⟰⬆￪⇧↿↾↑↟⇈

Javascript

document.getElementById("image").src = "picture.gif";

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";

</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

⟰⬆￪⇧↿↾↑↟⇈

File paths

Path	Description
<img src="picture.jpg">	picture.jpg is located in the same folder as the current page
<img src="images/picture.jpg">	picture.jpg is located in the images folder in the current folder
<img src="/images/picture.jpg">	picture.jpg is located in the images folder at the root of the current web
<img src="../picture.jpg">	picture.jpg is located in the folder one level up from the current folder

⟰⬆￪⇧↿↾↑↟⇈
Head

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
<script>	Defines a client-side script
<style>	Defines style information for a document

⟰⬆￪⇧↿↾↑↟⇈

Layout

HTML5 offers new semantic elements that define the different parts of a web page:

· <header> - Defines a header for a document or a section

· <nav> - Defines a container for navigation links

· <section> - Defines a section in a document

· <article> - Defines an independent self-contained article

· <aside> - Defines content aside from the content (like a sidebar)

· <footer> - Defines a footer for a document or a section

· <details> - Defines additional details

· <summary> - Defines a heading for the <details> element

⟰⬆￪⇧↿↾↑↟⇈

Responsive

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones). We can make webpage responsive as:

• Setting The Viewport

• Responsive Images

• Responsive Text Size

• Media Queries

• W3.CSS

• Bootstrap

⟰⬆￪⇧↿↾↑↟⇈

Computer Code

<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>

<p>If you input wrong value, the program will return <samp>Error!</samp></p>

Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.

Tag	Description
<code>	Defines programming code
<kbd>	Defines keyboard input
<samp>	Defines computer output
<var>	Defines a variable
<pre>	Defines preformatted text

⟰⬆￪⇧↿↾↑↟⇈

Entities

Useful HTML Character Entities:

Result	Description	Entity Name	Entity Number
	non-breaking space
<	less than	<	<
>	greater than	>	>
&	ampersand	&	&
"	double quotation mark	"	"
'	single quotation mark (apostrophe)	'	'
¢	cent	¢	¢
£	pound	£	£
¥	yen	¥	¥
€	euro	€	€
©	copyright	©	©
®	registered trademark	®	®

Combining Diacritical Marks:

Mark	Character	Construct	Result
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

⟰⬆￪⇧↿↾↑↟⇈

Symbols

Mathematical Symbols Supported by HTML:

Char	Number	Entity	Description
∀	∀	∀	FOR ALL
∂	∂	∂	PARTIAL DIFFERENTIAL
∃	∃	∃	THERE EXISTS
∅	∅	∅	EMPTY SETS
∇	∇	∇	NABLA
∈	∈	∈	ELEMENT OF
∉	∉	∉	NOT AN ELEMENT OF
∋	∋	&ni;	CONTAINS AS MEMBER
∏	∏	∏	N-ARY PRODUCT
∑	∑	∑	N-ARY SUMMATION

Greek Letters Supported by HTML:

Char	Number	Entity	Description
Α	Α	Α	GREEK CAPITAL LETTER ALPHA
Β	Β	Β	GREEK CAPITAL LETTER BETA
Γ	Γ	Γ	GREEK CAPITAL LETTER GAMMA
Δ	Δ	Δ	GREEK CAPITAL LETTER DELTA
Ε	Ε	Ε	GREEK CAPITAL LETTER EPSILON
Ζ	Ζ	Ζ	GREEK CAPITAL LETTER ZETA

Other Entities Supported by HTML:

Char	Number	Entity	Description
©	©	©	COPYRIGHT SIGN
®	®	®	REGISTERED SIGN
€	€	€	EURO SIGN
™	™	™	TRADEMARK
←	←	←	LEFTWARDS ARROW
↑	↑	↑	UPWARDS ARROW
→	→	→	RIGHTWARDS ARROW
↓	↓	↓	DOWNWARDS ARROW
♠	♠	&spades;	BLACK SPADE SUIT
♣	♣	&clubs;	BLACK CLUB SUIT
♥	♥	&hearts;	BLACK HEART SUIT
♦	♦	&diams;	BLACK DIAMOND SUIT

⟰⬆￪⇧↿↾↑↟⇈

Charset

The ASCII Character Set

· ASCII uses the values from 0 to 31 (and 127) for control characters.

· ASCII uses the values from 32 to 126 for letters, digits, and symbols.

· ASCII does not use the values from 128 to 255.

The ANSI Character Set (Windows-1252)

· ANSI is identical to ASCII for the values from 0 to 127.

· ANSI has a proprietary set of characters for the values from 128 to 159.

· ANSI is identical to UTF-8 for the values from 160 to 255.

The ISO-8859-1 Character Set

· 8859-1 is identical to ASCII for the values from 0 to 127.

· 8859-1 does not use the values from 128 to 159.

· 8859-1 is identical to UTF-8 for the values from 160 to 255.

The UTF-8 Character Set

· UTF-8 is identical to ASCII for the values from 0 to 127.

· UTF-8 does not use the values from 128 to 159.

· UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255.

UTF-8 continues from the value 256 with more than 10 000 different characters.

⟰⬆￪⇧↿↾↑↟⇈

Url encode

URL - Uniform Resource Locator

scheme - defines the type of Internet service (most common is http or https)
prefix - defines a domain prefix (default for http is www)
domain - defines the Internet domain name (like w3schools.com)
port - defines the port number at the host (default for http is 80)
path - defines a path at the server (If omitted: the root directory of the site)
filename - defines the name of a document or resource

Scheme	Short for	Used for
http	HyperText Transfer Protocol	Common web pages. Not encrypted
https	Secure HyperText Transfer Protocol	Secure web pages. Encrypted
ftp	File Transfer Protocol	Downloading or uploading files
file		A file on your computer

⟰⬆￪⇧↿↾↑↟⇈

XHTML

What Is XHTML?

XHTML stands for EXtensible HyperText Markup Language
XHTML is almost identical to HTML
XHTML is stricter than HTML
XHTML is HTML defined as an XML application
XHTML is supported by all major browsers

The Most Important Differences from HTML:

Document Structure

XHTML DOCTYPE is mandatory
The xmlns attribute in <html> is mandatory
<html>, <head>, <title>, and <body> are mandatory

XHTML Elements

XHTML elements must be properly nested

<b><i>This text is bold and italic</i></b>

XHTML elements must always be closed

<p>This is a paragraph</p>

XHTML elements must be in lowercase

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

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

How to Convert from HTML to XHTML

Add an XHTML <!DOCTYPE> to the first line of every page
Add an xmlns attribute to the html element of every page
Change all element names to lowercase
Close all empty elements
Change all attribute names to lowercase
Quote all attribute values

⟰⬆￪⇧↿↾↑↟⇈

Forms

<form> attributes:

Attribute	Description
accept-charset	Specifies the charset used in the submitted form (default: the page charset).
action	Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete	Specifies if the browser should autocomplete the form (default: on).
enctype	Specifies the encoding of the submitted data (default: is url-encoded).
method	Specifies the HTTP method used when submitting the form (default: GET).
name	Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate	Specifies that the browser should not validate the form.
target	Specifies the target of the address in the action attribute (default: _self).

⟰⬆￪⇧↿↾↑↟⇈

Form Elements

HTML Form Elements

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>	Specifies a list of pre-defined options for input controls
<output>	Defines the result of a calculation

⟰⬆￪⇧↿↾↑↟⇈

Input types

HTML5 added several new input types:

color
date
datetime-local
email
month
number
range
search
tel
time
url
week

<input> Element

Type	Description
<input type="text">	Defines a one-line text input field
<input type="radio">	Defines a radio button (for selecting one of many choices)
<input type="submit">	Defines a submit button (for submitting the form)

⟰⬆￪⇧↿↾↑↟⇈

Input attributes

HTML Input Attributes:

· value
· readonly
· disabled
· size
· maxlength

HTML5 added the following attributes for <input>:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

and the following attributes for <form>:

autocomplete
novalidate

⟰⬆￪⇧↿↾↑↟⇈

HTML 5
Intro

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>

</html>

The most interesting new HTML5 elements are:
New semantic elements like <header>, <footer>, <article>, and <section>.
New attributes of form elements like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.

The most interesting new API's in HTML5 are:

HTML Geolocation
HTML Drag and Drop
HTML Local Storage
HTML Application Cache
HTML Web Workers
HTML SSE

⟰⬆￪⇧↿↾↑↟⇈

Support

· HTML5 is supported in all modern browsers.
· HTML5 defines eight new semantic elements {header, section, footer, aside, nav, main, article, figure}
· You can also add new elements to an HTML page with a browser trick <myHero>My Hero Element</myHero>
IE8 (and earlier) does not allow styling of unknown elements!
· HTML5Shiv is a javascript file that is referenced in a <script> tag.
· You should use the HTML5Shiv when you are using the new HTML5 elements such as: <article>, <section>, <aside>, <nav>, <footer>.

· <head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>

⟰⬆￪⇧↿↾↑↟⇈

New Elements

HTML5 offers new elements for better document structure:

Tag	Description
<article>	Defines an article in a document
<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
<details>	Defines additional details that the user can view or hide
<dialog>	Defines a dialog box or window
<figcaption>	Defines a caption for a <figure> element
<figure>	Defines self-contained content
<footer>	Defines a footer for a document or section
<header>	Defines a header for a document or section
<main>	Defines the main content of a document
<mark>	Defines marked/highlighted text
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links
<progress>	Represents the progress of a task
<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)
<section>	Defines a section in a document
<summary>	Defines a visible heading for a <details> element
<time>	Defines a date/time
<wbr>	Defines a possible line-break

⟰⬆￪⇧↿↾↑↟⇈

Semantics

HTML5 offers new semantic elements to define different parts of a web page:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

⟰⬆￪⇧↿↾↑↟⇈

Migration

Typical HTML4	Typical HTML5
<div id="header">	<header>
<div id="menu">	<nav>
<div id="content">	<section>
<div class="article">	<article>
<div id="footer">	<footer>

⟰⬆￪⇧↿↾↑↟⇈

Style Guide

Use Correct Document Type

<!doctype html>

Use Lower Case Element Names

Mixing uppercase and lowercase names is bad
Developers normally use lowercase names (as in XHTML)
Lowercase look cleaner
Lowercase are easier to write

Close All HTML Elements

Use Lower Case Attribute Names

Mixing uppercase and lowercase names is bad
Developers normally use lowercase names (as in XHTML)
Lowercase look cleaner
Lowercase are easier to write

Quote Attribute Values

Mixing uppercase and lowercase values is bad
Quoted values are easier to read
You MUST use quotes if the value contains spaces

Image Attributes

Spaces and Equal Signs

Avoid Long Code Lines

When using an HTML editor, it is inconvenient to scroll right and left to read the HTML code.

Try to avoid code lines longer than 80 characters.

Blank Lines and Indentation

Do not add blank lines without a reason.

For readability, add blank lines to separate large or logical code blocks.

For readability, add two spaces of indentation. Do not use the tab key.

Do not use unnecessary blank lines and indentation. It is not necessary to indent every element:

Omitting <html> and <body>?

In HTML5, the <html> tag and the <body> tag can be omitted.

Meta Data

Setting The Viewport

HTML Comments

Style Sheets

p.intro {font-family: Verdana; font-size: 16em;}

Loading JavaScript in HTML

Accessing HTML Elements with JavaScript

var obj = getElementById("Demo")
var obj = getElementById("demo")

Use Lower Case File Names

london.jpg, lowercase.ext

⟰⬆￪⇧↿↾↑↟⇈

Canvas

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Empty canvas:

Draw a Line

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();

Draw a Circle

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Draw a Text

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

Stroke Text

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);

Draw Linear Gradient

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

// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);

Draw Circular Gradient

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

Draw Image

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);

⟰⬆￪⇧↿↾↑↟⇈

SVG

What is SVG?

SVG stands for Scalable Vector Graphics
SVG is used to define graphics for the Web
SVG is a W3C recommendation

SVG Circle

SVG Rectangle

SVG Rounded Rectangle

SVG Star

SVG Logo

Canvas	SVG
· Resolution dependent · No support for event handlers · Poor text rendering capabilities · You can save the resulting image as .png or .jpg · Well suited for graphic-intensive games	· Resolution independent · Support for event handlers · Best suited for applications with large rendering areas (Google Maps) · Slow rendering if complex (anything that uses the DOM a lot will be slow) · Not suited for game applications

⟰⬆￪⇧↿↾↑↟⇈

Google Maps

<!DOCTYPE html>
<html>
<body>

My map will go here</div>

function myMap() {
    var mapOptions = {
        center: new google.maps.LatLng(51.5, -0.12),
        zoom: 10,
        mapTypeId: google.maps.MapTypeId.HYBRID
    }
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</body>
<html>

⟰⬆￪⇧↿↾↑↟⇈

Media

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see.

Examples: Images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

In this chapter you will learn about the different multimedia formats.

Multimedia Formats

Multimedia elements (like audio or video) are stored in media files.

The most common way to discover the type of a file, is to look at the file extension.

Multimedia files have formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi.

⟰⬆￪⇧↿↾↑↟⇈

Video

To show a video in HTML, use the <video> element:

<video width="320" height="240" controls or autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

⟰⬆￪⇧↿↾↑↟⇈

Audio

To play an audio file in HTML, use the <audio> element:

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

⟰⬆￪⇧↿↾↑↟⇈

Plugins

Plugins are computer programs that extend the standard functionality of a web browser.

Examples of well-known plug-ins are Java applets.

Plug-ins can be added to web pages with the <object> tag or the <embed> tag.

Plug-ins can be used for many purposes: display maps, scan for viruses, verify your bank id, etc.

The <object> Element

The <embed> Element

⟰⬆￪⇧↿↾↑↟⇈

Youtube

To play your video on a web page, do the following:

Upload the video to YouTube
Take a note of the video id
Define an <iframe> element in your web page
Let the src attribute point to the video URL
Use the width and height attributes to specify the dimension of the player
Add any other parameters to the URL (see below)

YouTube Autoplay

YouTube Loop

YouTube Controls

⟰⬆￪⇧↿↾↑↟⇈

Geolocation

Handling Errors and Rejections

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

Displaying the Result in a Map

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
    "+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_:KEY";

    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}

getCurrentPosition() Method - Return Data

Property	Returns
coords.latitude	The latitude as a decimal number (always returned)
coords.longitude	The longitude as a decimal number (always returned)
coords.accuracy	The accuracy of position (always returned)
coords.altitude	The altitude in meters above the mean sea level (returned if available)
coords.altitudeAccuracy	The altitude accuracy of position (returned if available)
coords.heading	The heading as degrees clockwise from North (returned if available)
coords.speed	The speed in meters per second (returned if available)
timestamp	The date/time of the response (returned if available)

Geolocation Object

⟰⬆￪⇧↿↾↑↟⇈

Drag/Drop

<!DOCTYPE HTML>
<html>
<head>
<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>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

⟰⬆￪⇧↿↾↑↟⇈

Web Storage

What is HTML Web Storage?

With web storage, web applications can store data locally within the user's browser.

Before HTML5, application data had to be stored in cookies, included in every server request. Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance.

Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Web storage is per origin (per domain and protocol). All pages, from one origin, can store and access the same data.

HTML Web Storage Objects

HTML web storage provides two objects for storing data on the client:

window.localStorage - stores data with no expiration date
window.sessionStorage - stores data for one session (data is lost when the browser tab is closed)

if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
} else {
// Sorry! No Web Storage support..
}

The localStorage Object

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

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

The sessionStorage Object

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

⟰⬆￪⇧↿↾↑↟⇈

Web Workers

What is a Web Worker?

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>

<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 {
        document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
    }
}

function stopWorker() {
    w.terminate();
    w = undefined;
}
</script>

</body>
</html>

⟰⬆￪⇧↿↾↑↟⇈

SSE

Server-Sent Events - One Way Messaging

A server-sent event is when a web page automatically gets updates from a server.

This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.

Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.

Receive Server-Sent Event Notifications

var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
document.getElementById("result").innerHTML += event.data + "<br>";
};

Check Server-Sent Events Support

if(typeof(EventSource) !== "undefined") {
    // Yes! Server-sent events support!
    // Some code.....
} else {
    // Sorry! No server-sent events support..
}

Server-Side Code Example

IN PHP

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

IN ASP

<%
Response.ContentType = "text/event-stream"
Response.Expires = -1
Response.Write("data: The server time is: " & now())
Response.Flush()
%>

The EventSource Object

Events	Description
onopen	When a connection to the server is opened
onmessage	When a message is received
onerror	When an error occurs

⟰⬆￪⇧↿↾↑↟⇈

AI Stha

Combining Diacritical Marks:

Mathematical Symbols Supported by HTML:

URL - Uniform Resource Locator

The Most Important Differences from HTML:

Document Structure

XHTML Elements

XHTML Attributes

Draw a Circle

Draw a Text

Stroke Text

Draw Linear Gradient

Draw Circular Gradient

Draw Image

No comments

Search

Facebook

Follow us

Popular Posts

Random Posts

Categories

Popular Posts

Introduction	Editors	Basic	Elements	Attributes
Headings	Paragraphs	Style	Formatting	Quotations
Comments	Colors	CSS	Links	Images
Tables	Lists	Blocks	Classes	Id
Iframes	Javascript	File paths	Head	Layout
Responsive	Computer Code	Entities	Symbols	Charset
Url encode	XHTML	Forms	Form Elements	Input types
Input Attributes