The web Programming: HTML web designing

Showing posts with label HTML web designing. Show all posts

Friday, 2 May 2014

HTML Videos

Videos can be embedded in HTML pages with several methods.

Playing Videos in HTML

Example

Try it yourself »

Problems, Problems, and Solutions

Playing videos in HTML is not easy!
You must add a lot of tricks to make sure your video will play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac , iPad, iPhone).
In this chapter W3Schools summarizes the problems and the solutions.

HTML Video - Using <embed>

The <embed> tag defines a container for external (non-HTML) content.
The following HTML fragment displays a Flash video embedded in a web page:

Example

Try it yourself »

Problems

If the browser does not support Flash, the video will not play
iPad and iPhone do not support Flash videos

HTML Video - Using <object>

The <object> tag tag can also define a container for external (non-HTML) content.
The following HTML fragment displays a Flash video embedded in a web page:

Example

Try it yourself »

Problems:

If the browser does not support Flash, the video will not play
iPad and iPhone do not support Flash videos

The HTML5 <video> Element

The HTML5 <video> tag defines a video or movie.
The <video> element works in all modern browsers.
The following example uses the HTML5 <video> tag, which specifies one MP4 file (for Internet Explorer, Chrome, Firefox 21+, and Safari), and one OGG file (for older Firefox and Opera). If something fails, it will display a text:

Example

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

Try it yourself »

Problems:

You must convert your videos to many different formats
The <video> element does not work in older browsers

HTML Video - The Best Solution

The best solution is to use the HTML5 <video> element + the <embed> element.
The example below uses the <video> element and tries to play the video either as MP4 or OGG. If that fails, the code "falls back" to try the <embed> element:

HTML 5 + <object> + <embed>

Try it yourself »

Problems:

You must convert your videos to many different formats

HTML Video - YouTube Solution

However, maybe the easiest way to display videos in HTML pages, is to use YouTube (see next chapter)!

HTML Video - Using A Hyperlink

If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.
The following code fragment displays a link to a Flash video. If a user clicks on the link, the browser will launch a helper application to play the file:

Example

<a href="intro.swf">Play a video file</a>

Try it yourself »

Tips About Inline Videos

When a video is included in a web page it is called inline video.
If you plan to use inline videos, be aware that many people find it annoying. Also note that some users might have turned off the inline video option in their browser.
Our best advice is to include inline videos only in pages where the user expects to see a video. An example of this is a page which opens after the user has clicked on a link to see the video.

HTML Multimedia Tags

= Tag added in HTML5.

Tag	Description
<embed>	Defines an embedded object
<object>	Defines an embedded object
<param>	Defines a parameter for an object
<audio>	Defines sound content
<video>	Defines a video or movie
<source>	Defines multiple media resources for media elements (<video> and <audio>)
<track>	Defines text tracks for media elements (<video> and <audio>)

HTML Sounds / Audio

Sounds can be embedded in HTML pages with several methods.

Problems, Problems, and Solutions

Playing audio in HTML is not easy!
You must know a lot of tricks to make sure your audio files will play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac , iPad, iPhone).
In this chapter W3Schools summarizes the problems and the solutions.

Using Plug-ins

A plug-in is a small computer program that extends the standard functionality of the browser.
Plug-ins can be added to HTML pages using the <object> tag or the <embed> tag.
These tags define containers for resources (normally non-HTML resources), which, depending on the type, will either be displayed by the browsers, or by an external plug-in.

HTML Audio - Using <embed>

The <embed> tag defines a container for external (non-HTML) content.
The following code fragment should play an MP3 file embedded in a web page:

Example

Try it yourself »

Problems:

Different browsers support different audio formats
If a browser does not support the file format, the audio will not play without a plug-in
If the plug-in is not installed on the users' computer, the audio will not play

HTML Audio - Using <object>

The <object> tag can also define a container for external (non-HTML) content.
The following code fragment should play an MP3 file embedded in a web page:

Example

Try it yourself »

Problems:

Different browsers support different audio formats
If a browser does not support the file format, the audio will not play without a plug-in
If the plug-in is not installed on the users' computer, the audio will not play

The HTML5 <audio> Element

The HTML5 <audio> tag defines sound, such as music or other audio streams.
The <audio> element works in all modern browsers.
The following example uses the HTML5 <audio> tag, which specifies one MP3 file (for Internet Explorer, Chrome, Firefox 21+, and Safari), and one OGG file (for older Firefox and Opera). If something fails, it will display a text:

Example

<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>

Try it yourself »

Problems:

You must convert the audio files into different formats
The <audio> element does not work in older browsers

HTML Audio - The Best Solution

The best solution is to use the HTML5 <audio> element + the <embed> element.
The example below uses the <audio> element and tries to play the audio either as MP3 or OGG. If that fails, the code "falls back" to try the <embed> element:

Example

Try it yourself »

Problems:

You must convert the audio files into different formats
The <embed> element cannot "fall-back" to display an error message

HTML Audio - Using A Hyperlink

If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.
The following code fragment displays a link to an MP3 file. If a user clicks on the link, the browser will launch a helper application to play the file:

Example

<a href="horse.mp3">Play the sound</a>

Try it yourself »

Tips About Inline Sounds

When sound is included in a web page, or as part of a web page, it is called inline sound.
If you plan to use inline sounds, be aware that many people will find it annoying. Also note that some users might have turned off the inline sound option in their browser.
Our best advice is to include inline sounds only in pages where the user expects to hear sounds. An example of this is a page which opens after the user has clicked on a link to hear a recording.

HTML Multimedia Tags

= Tag added in HTML5.

Tag	Description
<embed>	Defines an embedded object
<object>	Defines an embedded object
<param>	Defines a parameter for an object
<audio>	Defines sound content
<video>	Defines a video or movie
<source>	Defines multiple media resources for media elements (<video> and <audio>)
<track>	Defines text tracks for media elements (<video> and <audio>)

HTML5 Web Workers

A web worker is a JavaScript running in the background, without affecting the performance of the page.

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.

Browser Support

Internet Explorer 10, Firefox, Chrome, Safari and Opera support Web workers.

HTML5 Web Workers Example

The example below creates a simple web worker that count numbers in the background:

Example

Count numbers:

Try it yourself »

Check Web Worker Support

Before creating a web worker, check whether the user's browser supports it:

if(typeof(Worker) !== "undefined")
{
// Yes! Web worker support!
// Some code.....
}
else
{
// Sorry! No Web Worker support..
}

Create a Web Worker File

Now, let's create our web worker in an external JavaScript.
Here, we create a script that counts. The script is stored in the "demo_workers.js" file:

var i = 0;

function timedCount()
{
i = i + 1;
postMessage(i);
setTimeout("timedCount()",500);
}

timedCount();

The important part of the code above is the postMessage() method - which is used to post a message back to the HTML page.
Note: Normally web workers are not used for such simple scripts, but for more CPU intensive tasks.

Create a Web Worker Object

Now that we have the web worker file, we need to call it from an HTML page.
The following lines checks if the worker already exists, if not - it creates a new web worker object and runs the code in "demo_workers.js":

if(typeof(w) == "undefined")
{
w = new Worker("demo_workers.js");
}

Then we can send and receive messages from the web worker.
Add an "onmessage" event listener to the web worker.

w.onmessage = function(event){
document.getElementById("result").innerHTML = event.data;
};

When the web worker posts a message, the code within the event listener is executed. The data from the web worker is stored in event.data.

Terminate a Web Worker

When a web worker object is created, it will continue to listen for messages (even after the external script is finished) until it is terminated.
To terminate a web worker, and free browser/computer resources, use the terminate() method:

w.terminate();

Full Web Worker Example Code

We have already seen the Worker code in the .js file. Below is the code for the HTML page:

Example

<!DOCTYPE html>
<html>
<body>

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

<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, your browser does not support Web Workers...";
}
}

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

</body>
</html>

Try it yourself »

Web Workers and the DOM

Since web workers are in external files, they do not have access to the following JavaScript objects:

The window object
The document object
The parent object

HTML5 Application Cache

With HTML5 it is easy to make an offline version of a web application, by creating a cache manifest file.

What is Application Cache?

HTML5 introduces application cache, which means that a web application is cached, and accessible without an internet connection.
Application cache gives an application three advantages:

Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server

Browser Support

Internet Explorer 10, Firefox, Chrome, Safari and Opera support Application cache.

HTML5 Cache Manifest Example

The example below shows an HTML document with a cache manifest (for offline browsing):

Example

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

Try it yourself »

Cache Manifest Basics

To enable application cache, include the manifest attribute in the document's <html> tag:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Every page with the manifest attribute specified will be cached when the user visits it. If the manifest attribute is not specified, the page will not be cached (unless the page is specified directly in the manifest file).
The recommended file extension for manifest files is: ".appcache"

	A manifest file needs to be served with the correct MIME-type, which is "text/cache-manifest". Must be configured on the web server.

The Manifest File

The manifest file is a simple text file, which tells the browser what to cache (and what to never cache).
The manifest file has three sections:

CACHE MANIFEST - Files listed under this header will be cached after they are downloaded for the first time
NETWORK - Files listed under this header require a connection to the server, and will never be cached
FALLBACK - Files listed under this header specifies fallback pages if a page is inaccessible

CACHE MANIFEST

The first line, CACHE MANIFEST, is required:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

The manifest file above lists three resources: a CSS file, a GIF image, and a JavaScript file. When the manifest file is loaded, the browser will download the three files from the root directory of the web site. Then, whenever the user is not connected to the internet, the resources will still be available.

NETWORK

The NETWORK section below specifies that the file "login.asp" should never be cached, and will not be available offline:

NETWORK:
login.asp

An asterisk can be used to indicate that all other resources/files require an internet connection:

NETWORK:
*

FALLBACK

The FALLBACK section below specifies that "offline.html" will be served in place of all files in the /html/ catalog, in case an internet connection cannot be established:

FALLBACK:
/html/ /offline.html

Note: The first URI is the resource, the second is the fallback.

Updating the Cache

Once an application is cached, it remains cached until one of the following happens:

The user clears the browser's cache
The manifest file is modified (see tip below)
The application cache is programmatically updated

Example - Complete Cache Manifest File

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

	Tip: Lines starting with a "#" are comment lines, but can also serve another purpose. An application's cache is only updated when its manifest file changes. If you edit an image or change a JavaScript function, those changes will not be re-cached. Updating the date and version in a comment line is one way to make the browser re-cache your files.

Notes on Application Cache

Be careful with what you cache.
Once a file is cached, the browser will continue to show the cached version, even if you change the file on the server. To ensure the browser updates the cache, you need to change the manifest file.
Note: Browsers may have different size limits for cached data (some browsers have a 5MB limit per site).

HTML5 Web Storage

HTML5 web storage, better than cookies.

What is HTML5 Web Storage?

With HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance.
The data is stored in name/value pairs, and a web page can only access data stored by itself.
Unlike cookies, the storage limit is far larger (at least 5MB) and information is never transferred to the server.

Browser Support

Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.
Note: Internet Explorer 7 and earlier versions, do not support Web Storage.

HTML5 Web Storage Objects

HTML5 Web Storage provides two new objects for storing data on the client:

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

Before using web storage, check browser support for localStorage and sessionStorage:

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

The localStorage Object

The localStorage object stores the data with no expiration date. The data will not be deleted when the browser is closed, and will be available the next day, week, or year.

Example

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

Try it yourself »

Example explained:

Create a localStorage name/value pair with name="lastname" and value="Smith"
Retrieve the value of "lastname" and insert it into the element with id="result"

The example above could also be written like this:

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

The syntax for removing the "lastname" localStorage item is as follows:

localStorage.removeItem("lastname");

Note: Name/value pairs are always stored as strings. Remember to convert them to another format when needed!
The following example counts the number of times a user has clicked a button. In this code the value string is converted to a number to be able to increase the counter:

Example

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

Try it yourself »

The sessionStorage Object

The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.
The following example counts the number of times a user has clicked a button, in the current session:

Example

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

Try it yourself »

HTML5 Video

Many modern websites show videos. HTML5 provides a standard for showing them.

Check if your browser supports HTML5 video

Video on the Web

Before HTML5, there was no standard for showing videos/movies on web pages.
Before HTML5, videos could only be played with a plug-in (like flash). However, different browsers supported different plug-ins.
HTML5 defines a new element which specifies a standard way to embed a video or movie on a web page: the <video> element.

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <video> element.
Note: Internet Explorer 8 and earlier versions, do not support the <video> element.

HTML5 Video - How It Works

To show a video in HTML5, this is all you need:

Example

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

Try it yourself »

The control attribute adds video controls, like play, pause, and volume.
It is also a good idea to always include width and height attributes. If height and width are set, the space required for the video is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the video, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the video loads).
You should also insert text content between the <video> and </video> tags for browsers that do not support the <video> element.
The <video> element allows multiple <source> elements. <source> elements can link to different video files. The browser will use the first recognized format.

Video Formats and Browser Support

Currently, there are 3 supported video formats for the <video> element: MP4, WebM, and Ogg:

Browser	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4	YES	YES
Safari	YES	NO	NO
Opera	NO	YES	YES

MP4 = MPEG 4 files with H264 video codec and AAC audio codec
WebM = WebM files with VP8 video codec and Vorbis audio codec
Ogg = Ogg files with Theora video codec and Vorbis audio codec

MIME Types for Video Formats

Format	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

HTML5 <video> - DOM Methods and Properties

HTML5 has DOM methods, properties, and events for the <video> and <audio> elements.
These methods, properties, and events allow you to manipulate <video> and <audio> elements using JavaScript.
There are methods for playing, pausing, and loading, for example and there are properties (like duration and volume). There are also DOM events that can notify you when the <video> element begins to play, is paused, is ended, etc.
The example below illustrate, in a simple way, how to address a <video> element, read and set properties, and call methods.

Example 1

Create simple play/pause + resize controls for a video:

Video courtesy of Big Buck Bunny.

The example above calls two methods: play() and pause(). It also uses two properties: paused and width.
Try it yourself »

For a full reference go to our HTML5 Audio/Video DOM Reference.

HTML5 Video Tags

Tag	Description
<video>	Defines a video or movie
<source>	Defines multiple media resources for media elements, such as <video> and <audio>
<track>	Defines text tracks in media players

HTML5 Canvas

The <canvas> element is used to draw graphics, on the fly, on a web page.

The example at the left shows a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text that is drawn onto the canvas.

What is Canvas?

The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

Browser Support

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element.
Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Create a Canvas

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.
Note: By default, the <canvas> element has no border and no content.
The markup looks like this:

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.
Tip: You can have multiple <canvas> elements on one HTML page.
To add a border, use the style attribute:

Example

Try it yourself »

Draw Onto The Canvas With JavaScript

All drawing on the canvas must be done inside a JavaScript:

Example

Try it yourself »

Example explained:
First, find the <canvas> element:

var c = document.getElementById("myCanvas");

Then, call its getContext() method (you must pass the string "2d" to the getContext() method):

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

The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.
The next two lines draw a red rectangle:

ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);

The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).
The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style.

Canvas Coordinates

The canvas is a two-dimensional grid.
The upper-left corner of the canvas has coordinate (0,0)
So, the fillRect() method above had the parameters (0,0,150,75).
This means: Start at the upper-left corner (0,0) and draw a 150x75 pixels rectangle.
Coordinates Example
Mouse over the rectangle below to see its x and y coordinates:

Canvas - Paths

To draw straight lines on a canvas, we will use the following two methods:

moveTo(x,y) defines the starting point of the line
lineTo(x,y) defines the ending point of the line

To actually draw the line, we must use one of the "ink" methods, like stroke().

Example

Define a starting point in position (0,0), and an ending point in position (200,100). Then use the stroke() method to actually draw the line:
JavaScript:

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

Try it yourself »

To draw a circle on a canvas, we will use the following method:

arc(x,y,r,start,stop)

To actually draw the circle, we must use one of the "ink" methods, like stroke() or fill().

Example

Create a circle with the arc() method:
JavaScript:

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

Try it yourself »

Canvas - Text

To draw text on a canvas, the most important property and methods are:

font - defines the font properties for text
fillText(text,x,y) - Draws "filled" text on the canvas
strokeText(text,x,y) - Draws text on the canvas (no fill)

Using fillText():

Example

Write a 30px high filled text on the canvas, using the font "Arial":
JavaScript:

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

Try it yourself »

Using strokeText():

Example

Write a 30px high text (no fill) on the canvas, using the font "Arial":
JavaScript:

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

Try it yourself »

Canvas - Gradients

Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.
There are two different types of gradients:

createLinearGradient(x,y,x1,y1) - Creates a linear gradient
createRadialGradient(x,y,r,x1,y1,r1) - Creates a radial/circular gradient

Once we have a gradient object, we must add two or more color stops.
The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
To use the gradient, set the fillStyle or strokeStyle property to the gradient, and then draw the shape, like a rectangle, text, or a line.
Using createLinearGradient():

Example

Create a linear gradient. Fill rectangle with the gradient:
JavaScript:

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

Try it yourself »

Using createRadialGradient():

Example

Create a radial/circular gradient. Fill rectangle with the gradient:
JavaScript:

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

Try it yourself »

Canvas - Images

To draw an image on a canvas, we will use the following method:

drawImage(image,x,y)

Image to use:

Example

Draw the image onto the canvas:
JavaScript:

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

Try it yourself »

HTML Canvas Reference

For a complete reference of all the properties and methods that can be used with the Canvas object (with try-it examples on every property and method), go to our Canvas Reference.

The HTML <canvas> Tag

Tag	Description
<canvas>	Used to draw graphics, on the fly, via scripting (usually JavaScript)

HTML Colors

Colors are displayed combining RED, GREEN, and BLUE light.

Color Values

CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF).
Hex values are written as 3 double digit numbers, starting with a # sign.

Color Examples

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

Try it yourself »

16 Million Different Colors

The combination of Red, Green and Blue values from 0 to 255 gives a total of more than 16 million different colors to play with (256 x 256 x 256).
Most modern monitors are capable of displaying at least 16384 different colors.
If you look at the color table below, you will see the result of varying the red light from 0 to 255, while keeping the green and blue light at zero.
To see a full list of color mixes when the red light varies from 0 to 255, click on one of the hex or rgb values below.

Red Light	HEX	RGB
	#000000	rgb(0,0,0)
	#080000	rgb(8,0,0)
	#100000	rgb(16,0,0)
	#180000	rgb(24,0,0)
	#200000	rgb(32,0,0)
	#280000	rgb(40,0,0)
	#300000	rgb(48,0,0)
	#380000	rgb(56,0,0)
	#400000	rgb(64,0,0)
	#480000	rgb(72,0,0)
	#500000	rgb(80,0,0)
	#580000	rgb(88,0,0)
	#600000	rgb(96,0,0)
	#680000	rgb(104,0,0)
	#700000	rgb(112,0,0)
	#780000	rgb(120,0,0)
	#800000	rgb(128,0,0)
	#880000	rgb(136,0,0)
	#900000	rgb(144,0,0)
	#980000	rgb(152,0,0)
	#A00000	rgb(160,0,0)
	#A80000	rgb(168,0,0)
	#B00000	rgb(176,0,0)
	#B80000	rgb(184,0,0)
	#C00000	rgb(192,0,0)
	#C80000	rgb(200,0,0)
	#D00000	rgb(208,0,0)
	#D80000	rgb(216,0,0)
	#E00000	rgb(224,0,0)
	#E80000	rgb(232,0,0)
	#F00000	rgb(240,0,0)
	#F80000	rgb(248,0,0)
	#FF0000	rgb(255,0,0)

Shades of Gray

Gray colors are displayed using an equal amount of power to all of the light sources. To make it easier for you to select the right gray color we have compiled a table of gray shades for you:

Gray Shades	HEX	RGB
	#000000	rgb(0,0,0)
	#080808	rgb(8,8,8)
	#101010	rgb(16,16,16)
	#181818	rgb(24,24,24)
	#202020	rgb(32,32,32)
	#282828	rgb(40,40,40)
	#303030	rgb(48,48,48)
	#383838	rgb(56,56,56)
	#404040	rgb(64,64,64)
	#484848	rgb(72,72,72)
	#505050	rgb(80,80,80)
	#585858	rgb(88,88,88)
	#606060	rgb(96,96,96)
	#686868	rgb(104,104,104)
	#707070	rgb(112,112,112)
	#787878	rgb(120,120,120)
	#808080	rgb(128,128,128)
	#888888	rgb(136,136,136)
	#909090	rgb(144,144,144)
	#989898	rgb(152,152,152)
	#A0A0A0	rgb(160,160,160)
	#A8A8A8	rgb(168,168,168)
	#B0B0B0	rgb(176,176,176)
	#B8B8B8	rgb(184,184,184)
	#C0C0C0	rgb(192,192,192)
	#C8C8C8	rgb(200,200,200)
	#D0D0D0	rgb(208,208,208)
	#D8D8D8	rgb(216,216,216)
	#E0E0E0	rgb(224,224,224)
	#E8E8E8	rgb(232,232,232)
	#F0F0F0	rgb(240,240,240)
	#F8F8F8	rgb(248,248,248)
	#FFFFFF	rgb(255,255,255)

Web Safe Colors?

Some years ago, when computers supported max 256 different colors, a list of 216 "Web Safe Colors" was suggested as a Web standard, reserving 40 fixed system colors.
This is not important now, since most computers can display millions of different colors, but the choice is left to you.
The 216 cross-browser color palette was created to ensure that all computers would display the colors correctly when running a 256 color palette:

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

HTML Iframes

An iframe is used to display a web page within a web page.

Syntax for adding an iframe:

The URL points to the location of the separate page.

Iframe - Set Height and Width

The height and width attributes are used to specify the height and width of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

Example

Try it yourself »

Iframe - Remove the Border

The frameborder attribute specifies whether or not to display a border around the iframe.
Set the attribute value to "0" to remove the border:

Example

Try it yourself »

Use iframe as a Target for a Link

An iframe can be used as the target frame for a link.
The target attribute of a link must refer to the name attribute of the iframe:

Example

Try it yourself »

HTML iframe Tag

Tag	Description
<iframe>	Defines an inline frame

HTML Forms and Input

HTML Forms are used to select different kinds of user input.

Try it Yourself - Examples

Create text fields
How to create text fields. The user can write text in a text field.
Create password field
How to create a password field.
(You can find more examples at the bottom of this page)

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:

<form>
.
input elements
.
</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>

How the HTML code above looks in a browser:
Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.

Password Field

<input type="password"> defines a password field:

<form>
Password: <input type="password" name="pwd">
</form>

How the HTML code above looks in a browser:
Note: The characters in a password field are masked (shown as asterisks or circles).

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>

How the HTML code above looks in a browser:

Checkboxes

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

How the HTML code above looks in a browser:

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="demo_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

How the HTML code above looks in a browser:
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 "demo_form_action.asp". The page will show you the received input.

More Examples

Radio buttons
How to create radio buttons.
Checkboxes
How to create checkboxes. A user can select or unselect a checkbox.
Simple drop-down list
How to create a simple drop-down list.
Drop-down list with a pre-selected value
How to create a drop-down list with a pre-selected value.
Textarea
How to create a multi-line text input control. In a text-area the user can write an unlimited number of characters.
Create a button
How to create a button.

Form Examples

Fieldset around form-data
How to create a border around elements in a form.
Form with text fields and a submit button
How to create a form with two text fields and a submit button.
Form with checkboxes
How to create a form with two checkboxes and a submit button.
Form with radio buttons
How to create a form with two radio buttons, and a submit button.
Send e-mail from a form
How to send e-mail from a form.

HTML Form Tags

= Tag added 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>	Specifies a list of pre-defined options for input controls
<keygen>	Defines a key-pair generator field (for forms)
<output>	Defines the result of a calculation

ad

ad

Bidvertiser Ad

q ad 2

Friday, 2 May 2014

Playing Videos in HTML

Example

Problems, Problems, and Solutions

HTML Video - Using <embed>

Example

HTML Video - Using <object>

Example

The HTML5 <video> Element

Example

HTML Video - The Best Solution

HTML 5 + <object> + <embed>

HTML Video - YouTube Solution

HTML Video - Using A Hyperlink

Example

Tips About Inline Videos

HTML Multimedia Tags

Problems, Problems, and Solutions

Using Plug-ins

HTML Audio - Using <embed>

Example

Problems:

HTML Audio - Using <object>

Example

Problems:

The HTML5 <audio> Element

Example

Problems:

HTML Audio - The Best Solution

Example

Problems:

HTML Audio - Using A Hyperlink

Example

Tips About Inline Sounds

HTML Multimedia Tags

What is a Web Worker?

Browser Support

HTML5 Web Workers Example

Example

Check Web Worker Support

Create a Web Worker File

Create a Web Worker Object

Terminate a Web Worker

Full Web Worker Example Code

Example

Web Workers and the DOM

What is Application Cache?

Browser Support

HTML5 Cache Manifest Example

Example

Cache Manifest Basics

The Manifest File

CACHE MANIFEST

NETWORK

FALLBACK

Updating the Cache

Example - Complete Cache Manifest File

Notes on Application Cache

What is HTML5 Web Storage?

Browser Support

HTML5 Web Storage Objects

The localStorage Object

Example

Example

The sessionStorage Object

Example

Check if your browser supports HTML5 video

Video on the Web

Browser Support

HTML5 Video - How It Works

Example

Video Formats and Browser Support

MIME Types for Video Formats

HTML5 <video> - DOM Methods and Properties

Example 1

HTML5 Video Tags