Archive

Category Archives for "HTML5"

html

web workers in HTML5 usage

web workers in HTML5

Web workers is programs actually JavaScript program or line of codes which is running in background without having any effect on other pages and functions.

Web worker is the same concept like multithreading in java. It actually brings multithreading to JavaScript. If you want to run a program independent of your working page, you must use web workers. Let your page is editor where you write something, and you want a program that check the grammar of text in that editor. But it should check grammar without having any intervention with your main page. That grammar checker must be used as web workers. This will be running synchronously.

The most important job of web worker is that it brings us the concept of parallel processing, where you can execute many processes in parallel.

web workers

Types of web worker

They are of two types.

  • Dedicated web workers :- these are web workers that link to that script which loaded it
  • Shared web workers :-  these allowed any script to communicate with the web workers

All the new browsers support web workers.

Limitation of web worker

  • You cannot access many of its objects, because it’s running independently
  • They cannot access DOM it means you are not able to modify any html page
  • It cannot access function in main page
  • There is restriction with some of objects like window, documents etc.]
  • It can only access only that objects which are not related to documents directly

Important about web worker

Web worker use some functions like timeout, setinterval like main functions. This is used where you want your web worker to be run periodically not permanent according to your need. Some important functions like

  • setTimeout()
  • clearTimeout()
  • setInterval()
  • and many JavaScript timers

How to start web workers

Web workers can be started automatically by main functions. Then desired function is performed.

How to terminate web workers

Web workers must be stopped after performing its desired function. It can be terminated by one of the two methods.

  • Terminating by main function
  • Terminating by itself

 

Terminating by main function

Web workers are terminated automatically from main function. By calling terminate() function web worker is forced to terminate.

Terminating by itself

By calling close() function from web workers itself can cause a web worker to be terminated.

Data passing in web workers

As it is cleared that data must be exchange between main function and web worker. That data is not shared instead is copied from main function to web worker i-e that doesn’t share same instances.

How to create web workers

To create web workers you must use the following syntax.

Var  Some_object = new Worker(“File_name.js”);

HTML5 geolocation examples

HTML5 GEOLOCATION

HTML 5 geolocation is used to find the location of users. It is done by using html5 Geolocation API’s, which take the geographical position or coordinates of users.  It is against user privacy to locate his position. There for you cannot locate user position until user permit you.

HTML5 geolocation uses the function getCurrentPosition(). The name is self-explanatory. It is used to get the current latitude and longitude of users.

HTML5 geolocation example


<html>

<body>

<p id="place">Click the button to get your html5 geolocation(Latitude and Longitude):</p>

<button onclick="getYourLocation()">Use it</button>

<script>

var x=document.getElementById("place");

function getYourLocation()

{

<!-- html5 geolocation checking-->

if (navigator.geolocation)

{

<!-- html5 geolocation code-->

navigator.geolocation.getCurrentPosition(showPosition);

}

else{x.innerHTML="html5 Geolocation is not supported........!";}

}

function showPosition(position)

{

x.innerHTML="Latitude: " + position.coords.latitude +

"<br>Longitude: " + position.coords.longitude;

}

</script>

</body>

</html>

HTML5 GEOLOCATION OUTPUT

html5 geolocation

When you click button it will show your html5 geolocation position.

html5 geolocation

NOTE: Some of you will see that it is not working on your browsers. This is because your browser does not allow it to locate you. You will first change your browser setting. Then try it, it will work correctly.

if (navigator.geolocation):-

The above expression is used to know whether browser support html5 geolocation or not.

Showing html5 geolocation on a map


<html>

<body>

<p id="place">Click the button to get your coordinates(Latitude and Longitude):</p>

<button onclick="getYourLocation()">Use It</button>

<div id="map"></div>

<script>

var x=document.getElementById("place");

function getLocation()

{

<!-- html5 geolocation checking-->

if (navigator.geolocation)

{

<!-- html5 geolocation code-->

navigator.geolocation.getCurrentPosition(showPosition);

}

else

{  x.innerHTML="Geolocation is not supported......!";}

}

function showPosition(position)

{

var latitude_longitude = position.coords.latitude+","+position.coords.longitude;

var img_address="http://maps.googleapis.com/maps/api/staticmap?center="

+latitude_longitude+"&zoom=14&size=400x300&sensor=false";

document.getElementById("map").innerHTML="<img src='"+img_address+"'>";

}

</script>

</body>

</html>

HTML5 GEOLOCATION OUTPUT

html5 geolocation

When you click the button, you will see result like that

html5 geolocation

Position on Map

html5 geolocation also provide facility that, You can also print your position on map shown by marker. You can also know about certain information like Turn by turn navigation or GPS  and Important points near user etc.

Example of position on map


<html>

<body>

<p id="place">Click the button to get your position(Location and longitude):</p>

<button onclick="getLocation()">Use It</button>

<div id="map"></div>

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script>

var x=document.getElementById("place");

function getLocation()

{

<!-- html5 geolocation checking-->

if (navigator.geolocation)

{

<!-- html5 geolocation code-->

navigator.geolocation.getCurrentPosition(showPosition,showError);

}

else

{x.innerHTML="Geolocation is not supported.......";}

}

function showPosition(position)

{

latitude=position.coords.latitude;

longitude=position.coords.longitude;

lat_lon=new google.maps.LatLng(latitude, longitude)

mapholder=document.getElementById('map')

map.style.height='250px';

map.style.width='500px';

var myOptions={

center:lat_lon,zoom:14,

mapTypeId:google.maps.MapTypeId.ROADMAP,

mapTypeControl:true,

navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}

};

var map=new google.maps.Map(document.getElementById("map"),myOptions);

var marker=new google.maps.Marker({position:latlon,map:map,title:"I see you.......You are here!"});

}

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="OH NO….Location information is unavailable."

break;

case error.TIMEOUT:

x.innerHTML="OOPS….The request to get user location timed out."

break;

case error.UNKNOWN_ERROR:

x.innerHTML="An unknown error occurred here."

break;

}

}

</script>

</body>

</html>

HTML5 GEOLOCATION OUTPUT

html5 geolocation

html5 geolocation

When I run it on  my  browser. Output because my browser not allowed it.

Here you can manage your settings.


<a href="http://maps.google.com/maps/api/js?sensor=false">http://maps.google.com/maps/api/js?sensor=false</a>

This is a Google Map API key. You can get this key with your google account.

function showError(error):-

I used it actually for error handling in html5 geolocation.

HTML5 GEOLOCATION OUTPUT

My location is tracked as shown below.

html5 geolocation

The above program also describes how to use marker to map. And add control to your map. You can also add animated marker and various symbols.

Types of error used in error handling

  • error.PERMISSION_DENIED:
  • error.POSITION_UNAVAILABLE:
  • error.TIMEOUT:
  • error.UNKNOWN_ERROR:

Data related to getCurrentPosition()

coords.latitude The latitude as a decimal number
coords.longitude The longitude as a decimal number
coords.accuracy The accuracy of position
coords.altitudeAccuracy The altitude accuracy of position
coords.heading The heading as degrees clockwise from North

WatchPosition() in HTML5 geolocation

In html5 geolocation this method is same as getCurrentPosition() but it also send updated position as the user move from one place to another place. For example you are tracking car having GPS, which return the updated position of user. The watchPosition() function will perform this.

Example of watchposition()


<html>

<body>

<p id="place">Get your coordinates:</p>

<button onclick="getYourLocation()">Use It</button>

<script>

var x=document.getElementById("place");

function getYourLocation()

{

<!-- html5 geolocation checking-->

if (navigator.geolocation)

{

<!-- html5 geolocation code-->

navigator.geolocation.watchPosition(showPosition);

}

else

{x.innerHTML="Geolocation is not supported .......";}

}

function showPosition(position)

{

x.innerHTML="Latitude: " + position.coords.latitude +  "<br>Longitude: " + position.coords.longitude;

}

</script>

</body>

</html>

HTML5 GEOLOCATION OUTPUT

html5 geolocation

Web storage HTML5 usage

Web storage HTMl5

Before web storage HTML 5 data were strong in cookies which are not very secure and fast. The data was not included with every server request. And only access when asked.

But web storage HTML 5 defines technique due to which data can be store locally on browsers. The method is fast and secure than cookies. As it is clear that large amount of data affect the performance of websites. But HTML 5 made it possible to store large amount of data locally on browsers without affecting website’s performance.

Every web page can only access only that data which is stored by it.

Like other elements web storage html5 feature is also working with new browsers.

Types of web storage HTML5

To store data on client browser we used two types of web storage html5 storage object.

  • localStorage: web storage html5 store data for long time without any expiration of data
  • sessionStorage: web storage html5 store data for only that specific session

localStorage Object

This object of web storage html5 is used to store data locally for infinite time. When you close browser the data will remain there whenever you want to access it. Store data in key/values pair for every page. And no page access data from some other page key/values pair. You must convert this key in to other formats when needed because it is actually stored in string format.

Example of localStorage


<html>

<body>

<div id="some_where"></div>

<script>

<!-- local web storage-->

if(typeof(Storage)!=="undefined")

{

localStorage.last_name="Rafi";

document.getElementById("some_where").innerHTML="Last name for storge : " + localStorage.last_name;

}

else

{

document.getElementById("some_where").innerHTML="This line will execute if your browser does not support web storage...";

}

</script>

</body>

</html>

Ouput web storage html5

web storage

How to use localStorage


<html>

<head>

<script>

function clickCounter()

{

<!-- local web storage-->

if(typeof(Storage)!=="undefined")

{

if (localStorage.count_on_click)

{

<!-- local web storage-->

localStorage.count_on_click=Number(localStorage.count_on_click)+1;

}

else

{

localStorage.count_on_click=1;

}

document.getElementById("some_where").innerHTML="You have clicked the button " + localStorage.count_on_click + " time(s).";

}

else

{

document.getElementById("some_where").innerHTML="This line will execute if your browser does not support web storage...";

}

}

</script>

</head>

<body>

<p><button onclick="clickCounter()" type="button">Click me!</button></p>

<div id="some_where"></div>

<h2><p>Click the button to see the counter increase.</p></h2>

<h1><p>Must read</p></h1>

<p>Close the browser tab and try again, if you not reset the counter it will continue to count.</p>

</body>

</html>

Output

web storage

After click button

web storage

After closing window and the opening window when you click Click me button then will count from 3 which was last value.

web storage

In this way data is store for infinite time. This is due to HTML 5 features.

sessionStorage Object

As the name suggest that it is web storage html5 of data for that session only. When the user close window data will be deleted. You will understand it better by following example.

Example of web storage html5

</pre>
<html>

<head>

<script>

function Counter()

{

<!-- session web storage-->

if(typeof(Storage)!=="undefined")

{

<!-- session web storage-->

if (sessionStorage.count_on_click)

{

sessionStorage.count_on_click=Number(sessionStorage.count_on_click)+1;

}

else

{

<!-- session web storage-->

sessionStorage.count_on_click=1;

}

document.getElementById("some_where").innerHTML="You have clicked the button " + sessionStorage.count_on_click + " time(s) in this session.";

}

else

{

document.getElementById("some_where").innerHTML="This line will execute if your browser does not support web storage...";

}

}

</script>

</head>

<body>

<p><button onclick="Counter()" type="button">Click me!</button></p>

<div id="some_where"></div>

<h2><p>Click the button to see the counter increase.</p></h2>

<h1><p>Must read</p></h1>

<p>Close the browser tab and try again, if you not reset the counter it will continue to count.</p>

</body>

</html>

Output web storage html5

web storage

3

html5 semantic tags understanding

html5 semantic tags

We are familiar with a lot of tags during learning html. Some of these tags tell about its content and some do not. There are two type of tags in html5.

  • html5 semantic tags
  • html5 non semantic tags

In this article html5 semantic tags and non semantic tags will be discussed. And also examples of html5 semantic tags will be provided.

Non Semantic tags in HTML5

The following tags do not describe its content clearly.

  1. <span>
  2. <div> etc.

html5 semantic tags

Following are the html5 semantic tags

  1. html5 header
  2. html5 footer
  3. html5 aside
  4. html5 article
  5. html5 figure
  6. html5 section
  7. html5 nav
  8. html5 figcaption
  9. html5 mark
  10. html5 time
html5 semantic tags

semantic tags in html5

HTML5 Header

html5 header in html5 semantic tag,  the name indicate that is used for header of documents. It actually acts as a container for all the introductory sections of documents. This header may consist of several headers within this.

Example of html5 header


<html>

<body>

<!-- html5 semantic tags-->

<header>

<h1>Trusit in geeks</h1>

<p>Rafi ullah Afridi</p>

</header>

<p>We will provide you each and every thing about HTML 5 </p>

</body>

</html>

Output

html5 semantic tags

header in html5

HTML5 Footer

html5 footer tag in  html5 semantic tags specifies the footer of the documents. This section contains Contact information; author information’s and copy right information etc.

Example of html5 footer

<html>

<body>

<!-- html5 semantic tags-->

<footer>

<p>Posted by: Rafi ullah Afridi</p>

<p><time pubdate datetime="20-11-2013"></time></p>

</footer>

</body>

</html>

Output

html5 semantic tags

footer in html5

HTML5 Aside

html5 aside in html5 semantic tags specifies content that is on the side of document such as side bar.

Example of html5 aside

<html>

<body>

<p>My name is Rafi ullah Afridi.And i am programmer</p

<!-- html5 semantic tags-->

<aside>

<h2>Trustingeeks.com</h2>

<p>Here you will find every thing about IT such as programming languages.</p>

</aside>

</body>

</html>

Output

html5 semantic tags

aside in html5

HTML5 Article

html5 article is in html5 semantic tags.The name indicates that it must be independent content. It is used with some information like Blogs, Comments or new story. And it can be distribute independently on web from rest of document

Example of html5 article

<html>

<body>

<!-- html5 semantic tags-->

<artical>

<h2>Trustingeeks.com is new website.</h2>

</artical>

</body>

</html>

Output

html5 semantic tags

article in html5

HTML5 Figure and HTML5 figcaption

Both are  html5 semantic tags.

The <figure> tag is used with content, like diagrams, illustrations, photos etc.

The <figurecaption> is used within <figure> tag, and used to define caption for figure.

Example of html5 figure and html5 figcaption

<html>

<body>

<!-- html5 semantic tags-->

<figure>

<img src="r.jpg" alt="Rafi afridi" width="200" height="200">

<figcaption>Fig1. - The first letter of My name.</figcaption>

</figure>

</body>

</html>

Output

html5 semantic tags

figure and figurecaption in html5

HTML5 Section

html5 section in html5 semantic tags, as the name indicate that it is collection of content in a document. And used to define a section.

Example of html5 section

<html>

<body>

<!-- html5 semantic tags-->

<section>

<h1>TrustInGeeks</h1>

<p>The author of Java articles is Muhabbat khan...</p>

</section>

</body>

</html>

Output

html5 semantic tags

section in html5

HTML5 Nav

html5 Nav is in html5 semantic tags is basically short form of Navigation. It is used for set of navigation links.

Example of html5 nav

<html>

<body>

<!-- html5 semantic tags-->

<nav>

<a href="">HTML 5 By RAFI ULLAH AFRIDI</a></br>

<a href="">CSS 3 By MIRWAISE KHAN</a></br>

<a href="">Android By MUHABBAT KHAN</a></br>

<a href="">PHP  By FAISAL ABDULLAH</a></br>

<a href="">JAVA By MUHABBAT KHAN</a>

</nav>

</body>

</html>

Output

html5 semantic tags

nav in html5

 

HTML5 Time

Used to define time and date. It is in html5 semantic tags.

Example of html5 time

<html>

<body>

<!-- html5 semantic tags-->

<p>I am writing this article on <time>05:45</time> pm Thursday.</p>

</body>

</html>

Output

html5 semantic tags

time in html5

HTML5 Mark

html5 mark tag in html5 semantic tags is used for marking contents within documents. It is used to mark something important.

Example of html5 mark

<html>

<body>

<!-- html5 semantic tags-->

<p>I am writing HTML5 for <mark>trustingeek.com</mark> website.</p>

</body>

</html>

Output

html5 semantic tags

mark in html5

HTML5 input element attributes

HTML5 input Attributes

HTML 5 input element has a lot of attributes. Now I am going to discussed some of the attributes of <input> element. The following are some of that attributes of html5 input element.

  1. Autocomplete
  2. Autofocus
  3. formaction
  4. Form
  5. Multiple
  6. placeholder
  7. Pattern
  8. required
  9. Step
  10. List
  11. Maxlength
  12. formtarget

Autocomplete HTML5 input attribute

This html5 input element attribute actually tell us whether the auto complete should be enabled or disabled.

It has two values on and off.

Example of html5 input


<html>

<body>

First name:<input type="text" name="fname" autocomplete="on"><br>

Last name: <input type="text" name="lname" autocomplete="on"><br>

Your E-mail: <input type="email" name="email" autocomplete="off">

</body>

</html>

Output

As you start type your name it will give you suggestion about it.

When it is off it will not show suggestions.

HTML5 input

Autofocus HTML5 input attribute

This html5 input element when you enter to some page cursor will automatically blink on that field which is defined autofocus.

Example of html5 input


<html>

<body>

Enter your first name: <input type="text" name="fname" autofocus><br>

Enter your last name: <input type="text" name="lname"><br>

</body>

</html>

Output

HTML5 input

Form action HTML5 input attribute

Its value is the URL of that file that process our inputs when we submit our forms. That file will be somewhere on server on somewhere else.

Example of html5 input


<html>

<body>

Enter your name: <input type="text" name="lname"><br>

<input type="submit" formaction="file_name.file_extension" value="admin">

</body>

</html>

Output

HTML5 input

Form html5 input attribute

List of different id,s from which input element belongs to.

Syntax:    <input form=”form_id”>

Multiple HTML5 input attribute

html5 input element attribute which is strong feature of HTML 5 enabled us to select any number of input files at a time. You can select more than one file using this tag.

Example of html5 input


<html>

<body>

Select any number of files: <input type="file" name="something" multiple>>

</body>

</html>

Output

HTML5 input

When you click on button and choose as many file as you want. You will notice.

HTML5 input

Placeholder HTML5 input attribute

html5 input element attribute which provide description about input element that what kind of input the field is expecting. It gives you hint so that you won’t make mistakes.

Example of html5 input


<html>

<body>

<form action="Your_file.extension">

<input type="text" name="fname" placeholder="Your First name">

<br>

<input type="text" name="lname" placeholder="Your Last name">

<br>

<input type="submit" value="Submit">

</form>

</body>

</html>

Output

HTML5 input

Note: You can use this attribute with text, search, url, tel, email, and password.

Pattern HTML5 input attribute

This html5 input element attribute will provide you a regular expression against which your input will be checked. For example you specify that input must contain a number at 8th position. And user gives name and then number at 9th position it will show you error message.

Example of html5 input

<html>

<body>

<form action="your_file.extension">

Enter your name: <input type="text"  pattern="[A-Za-z]{4}">

<input type="submit">

</form>

</body>

</html><b></b>

Output

HTML5 input

pattern=”[A-Za-z]{4}:

This above code is a regular expression. I told my program that user input will be checked against this pattern. User can enter any letter both upper case and lower case but not more than 4 letters. To know about Regular Expression visit our website for RE tutorials.

Required HTML5 input attribute

This html5 input element attributes work before you submit your form at client side. It specifies whether the field is required or not. When you are going to create your email account. And you don’t input your first name and submit form. A red * will be shown in side of First name field. It is actually due to required attribute.

Example of html5 input


<html>

<body>

<form action="file.php">

Enter your name: <input type="text" name="username" required>

<input type="submit" value="Submit">

</form>

</body>

</html>

Output

HTML5 input

As I mention above that field is required so when you try to submit it without fill It will prompt you an error message.

Step HTML5 input attribute

This html5 input element attribute is used to tell program how many number we want to skip in the field. Same as “for” loop in C++ and Java.

Example of html5 input


<html>

<body>

<form action="file.php">

<input type="number" step="4">

<input type="submit">

</form>

</body>

</html>

<b>

 Output

HTML5 input

When clicked pointed buttons. The Number will increase but will skip 4. Next output will be 8.Then 12. And so on.

HTML5 input

List HTML5 input attribute

Used for predefining list in datalist.

Example of html5 input


<html>

<body>

<form action="file.php">

<input list="Students">

<datalist id="Students">

<option value="Rafi">

<option value="Afridi">

<option value="Geeks">

<option value="Hamdard">

<option value="Muhabbat">

</datalist>

<input type="submit">

</form>

</body>

</html>

Output

It gives you suggestion that you might want to type Rafi.Because I have predefine name Rafi in datalist in above example.

HTML5 input

Maxlength HTML5 input attribute

As the name indicates it specifies the maximum number of input characters in that input filed. Let suppose you specify that name should not be greater than 20 characters. The user is trying to input 30 character long names. The field will not accept that. And simply discard them.

Example of html5 input


<html>

<body>

<form>

Enter your name: <input type="text" name="username" maxlength="15"><br>

<input type="submit" value="SEND">

</form>

</body>

</html>

Output

HTML5 input

Formtarget HTML5 input attribute

It specify where to show your response when you submit your form or request. Sometime when you click on button, response page shown in separate tab or in same tab or another page.
possible values are

  1. _blank
  2. _self
  3. _parent
  4. _top
  5. framename

Example of html5 input


<html>

<body>

<form>

Your first name: <input type="text" name="f-name"><br>

Your last name: <input type="text" name="l-name"><br>

<input type="submit" formtarget="_blank" value="SEND">

</form>

</body>

</html>

Output

HTML5 input

Output page will be shown in another blank page/tab in same window.

HTML5 input types

HTML5 input types

One of the most important features of HTML 5 is its new html5 input types for users. The user is now free from extra work. For example the date input when you used in your coding. It automatically arranges for user where the day, month or year should go. I will explain each of following.

  1. number
  2. color
  3. date
  4. email
  5. datetime
  6. search
  7. tel
  8. datetime-local
  9. url
  10. week
  11. month
  12. range
  13. time

Number in HTML5 input types

Among html5 input types this is used to input numbers.

Example of number in HTML5

<html>

<body>

Numbers between 1 and 5: <input type="number"  name="quantity"  min="1"  max="5">

</body>

</html>

Output

HTML5 input types

Min=”1”: Show the lowest level of numbers or from where number start.

Max=”5”: Show the upper level of numbers or where number ends.

Step=”3”: It shows that 3 number will skip. Like 1 … 5 … 9

COLORS in HTML5 input types

Among html5 input types this is used to input color directly.

Example of COLORS in HTML5

<html>

<body>

Select your favorite color: <input type="color" name="favorite-color">

</body>

</html>

Output

select color

Click on that icon or button you will see the following window.

HTML5 input types

Here you can select any color you want.

For same output you might write dozens of code in previous HTML versions.

You will see soon some more interesting elements of input. After click OK.

chose

DATE in HTML5 input types

How to pick date automatically? For this purpose we used DATE input type.

Example of DATE in HTML5

<html>

<body>

Your Birthday: <input type="date" name="b-day">

</body>

</html>

Output

HTML5 input types

Now you can directly select day, month and year. When you click on a triangular icon. You will see

HTML5 input types

EMAIL in HTML5 input types

One of the important input type in html5 input types.This field is used for email. And it is important because when user submits form email will be automatically validated. So programmer no more worries about email validation.

Example of EMAIL in HTML5

<html>

<body>

Enter your E-mail: <input type="email" name="email">

</body>

</html>

Output

HTML5 input types

DATETIME in HTML5 input types

Among html5 input types the datetime type allows the user to select a date and time with time zone.

Example of DATETIME in HTML5

<html>

<body>

Enter date and time: <input type="datetime" name="date-time">

</body>

</html>

Output

HTML5 input types

SEARCH in HTML5 input types

Among html5 input types this is used to define a search field like Google search.

Google Search: <input type="search" name="google-search">

HTML5 input types

It is same is text field but it is specially designed for search.

TEL in HTML5 input types

Define a field for inputting a telephone number.

Enter Telephone Number: <input type="tel" name="u-tel">

DATETIME-LOCAL in HTML5 input types

As the name indicated that it allow users  to enter date and time but without time zone.

Birthday (date and time): <input type="datetime-local" name="day-time-lo">

URL in HTML5 input types

The URL type is used URL address.

The value of the URL field is automatically validated when the user submit form.

This automatic validation helps programmers to save their time and load.

Example of URL in HTML5 input types

<html>

<body>

Add your homepage: <input type="url" name="homepage">

</body>

</html>

WEEK in HTML5 input types

This help to enter the week of year without time zone.

Example of WEEK in HTML5

<html>

<body>

Select a week: <input type="week" name="week_year">

</body>

</html>

Output

HTML5 input types

MONTH in HTML5 input types

Use to select month and year without time zone.

Example of MONTH in HTML5

<html>

<body>

Month and Year <input type="month" name="bdaymonth">

</body>

</html>

Output:

HTML5 input types

RANGE in HTML5 input types

Among html5 input types, range is used for input fields that should contain a value from a range of numbers.

Restrictions can also be set that which numbers are accepted.

Define a control for entering a number whose exact value is not important. Example is like a slider control.

Example of RANGE in HTML5

<html>

<body>

<input type="range" name="points" min="1" max="20">

</body>

</html>

Output

HTML5 input types

By using mouse you can slide it.

TIME in HTML5 input types

Among html5 input types this is used to input time with no time zone.

Example of TIME in HTML5

<html>

<body>

Select a time: <input type="time" name="user_time">

</body>

</html>

Output:

HTML5 input types

What is TIME ZONE?

Time zone is defined as a place having uniform standard time which is used for commercial and social purposes.Time zones tend to follow the boundaries of countries and their subdivisions.

About Author

rafi
RAFI ULLAH AFRIDI
HAMDARD UNIVERSITY KARACHI

rafi_lkl@yahoo.com

html5 drag and drop understanding

html5 drag and drop

html5 drag and drop is actually in the standards of HTML 5.When you pick  up some object and put it in some another place. This is actually html5 drag and drop.

drag and drop html5 example

<!DOCTYPE HTML>

<html>

<head>

<style type="text/css">

#div1

{width:300px;

height:80px;

padding:10px;

border:2px solid red;

}

</style>

<script>

function Drop_Allow(arg)

{

arg.preventDefault();

}

function drag(arg)

{

arg.dataTransfer.setData("Text",arg.target.id);

}

function drop(arg)

{

arg.preventDefault();

var data=arg.dataTransfer.getData("Text");

arg.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

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

</div>

<br>

<img id="drag1" src="r.jpg" ondragstart="drag(event)"
draggable="true"  width="330" height="70">

</body>

</html>

output

html5 drag and drop

Drag R image to red box.

html5 drag and drop

How to make an element draggable

In drag and drop html5, When you want to make an element drag able simply use “draggable=”true/false”” property inside that element. If you want an image to be drag able use commond like

<imgdraggable=”true”>

Drag what?

Now what do you want to drag. For this purpose in  html5 drag and drop  you wil use ondragstart attribute and  setData() method.

After then you should specify what should happen when the element is dragged.

In the above example, the ondragstart attribute calls a function drag (event), that tell what data to be dragged.

The dataTransfer.setData() method sets the data type and the value of the dragged data.


function drag(arg)

{

arg.dataTransfer.setData("Text",arg.target.id);

}

Drop where?

OndragoverandpreventDefault();

in  html5 drag and drop, ondragover define where the element can be drop. But the problem is that bydefault one element cannot be drop in to another element. To allow this we use preventDefault(); method.


functionDrop_Allow(arg)

{

arg.preventDefault();

}

This function must be called from place where you wnt to drop the element.

Drop – ondrop

In html5 drag and drop, when the data is dragged and then data is dropped,a drop event occurs.

In the above example, the ondrop attribute calls a method, drop(event).

Explanation

  1. We Call preventDefault() to prevent the browser default handling of the data
  2. Get the dragged data with the dataTransfer.getData(“Text”) method. This method will return any data that was set to the same type in the setData() method
  3. The dragged data is the id of the dragged element (“drag1”)
  4. Append the dragged element into the drop element

Back and Forth html5 drag and drop of elements

You are also able to drag an element from one place to another. The reverse is also possible. Here is an example code for back and forth drag and drop of an elements.

<html>

<head>

<style type="text/css">

#div1, #div2

{   float:left;

width:100px;

height:40px;

margin:10px;

padding:10px;

border:1px dotted blue;

}

</style>

<script>

functionallowDrop(args)

{

args.preventDefault();

}

function drag(args)

{

args.dataTransfer.setData("Text",args.target.id);

}

function drop(args)

{

args.preventDefault();

var data=args.dataTransfer.getData("Text");

args.target.appendChild(document.getElementById(data));

}

</script>

</head>

<body>

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

<imgsrc="r.jpg" draggable="true" ondragstart="drag(event)" id="drag1"
width="100" height="30"></div>

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

</body>

</html>

OUTPUT

html5 drag and drop

Drag image.

html5 drag and drop

Drop into second box.

html5 drag and drop

Authour:  RAFI ULLAH AFRIDI

Experience:   I have 3  years of   expirence in  web-development  and  programmming  .

HTML5 svg introduction

HTML5 SVG

HTML5 SVG is basically short form of Scalable Vector Graphics which is actually type of graphics.
HTML5 SVG is used to define vector-based graphics for the Web pages. Graphics are defined in XML format through SVG.As we know that images are when zoomed or edited it loses its quality.

But SVG graphics cannot lose its quality when edited or zoomed. It maintains its quality. And it is main reason for that SVG are famous and mostly used. HTML5 SVG is according to W3C standards.

Advantages of HTML5 SVG

HTML5 SVG is advantageous over other image formats (like JPEG and GIF) are due to fact othat HTML5 SVG images:

1)       HTML5 SVG can be created and edited with any text editor

2)       html5 SVG are scalable means can be transfer from one platform to another.

3)       html5 SVG can be searched, indexed, scripted, and compressed

4)       html5 SVG are zoom able (and the image can be zoomed without degradation)

5)       html5 SVG can be printed with high quality at any resolution you used

What are the basic Shapes of html5 SVG or SVG html5?

The basic shapes of html5 SVG are

1)      The ‘rect’ element for RECTANGLE

2)      The ‘circle’ element for CIRCLE

3)      The ‘ellipse’ element for ELLIPSE

4)      The ‘line’ element for LINE

5)      The ‘polyline’ element for POLYLINE

6)      The ‘polygon’ element for POLYGON

Example of HTML5 SVG


<?xml version="1.0" standalone="no"?>

<!DOCTYPEsvg>

<svg width="12cm" height="4cm" viewBox="0 0 1200 400">

<!-- Show outline of canvas using 'rect' element -->

<rect x="1" y="1" width="1198" height="398"

fill="none" stroke="blue" stroke-width="2"/>

<rect x="200" y="100" width="300" height="200"

fill="red" stroke="navy" stroke-width="20"  />

</svg>

[/html>

Svg html5

Attributes of HTML5 SVG RECTANGLE

x = “<X-coordinate>

The x-axis coordinate of the side of the rectangle which has the smaller x-axis coordinate value in the current user coordinate system.
If the attribute is not specified, the effect is as if a value of “0” were specified.

y = “<Y-coordinate>

The y-axis coordinate of the side of the rectangle which has the smaller y-axis coordinate value in the current user coordinate system.
If the attribute is not specified, the effect is as if a value of “0” were specified.

width = “<length>

The width of the rectangle.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.

height = “<length>

The height of the rectangle.
A negative value is an error (see Error processing). A value of zero disables rendering of the element.

rx = “<length>

For rounded rectangles, the x-axis radius of the ellipse used to round off the corners of the rectangle.

ry = “<length>

For rounded rectangles, the y-axis radius of the ellipse used to round off the corners of the rectangle.

HTML5 SVG  RECT with Animation


<?xml version="1.0" standalone="no"?>

<!DOCTYPEsvg>

">

<svg width="12cm" height="4cm" viewBox="0 0 1200 400">

<desc>Example rect02 - rounded rectangles</desc>

<!---- Show outline of canvas using 'rect' element ------->

<rect x="1" y="1" width="1198" height="398"

fill="none" stroke="blue" stroke-width="2"/>

<rect x="100" y="100" width="400" height="200" rx="50"

fill="blue" />

<g transform="translate(500 200) rotate(-20)">

<rect x="0" y="0" width="400" height="200" rx="50"

fill="yellow" stroke="purple" stroke-width="30" />

</g>

</svg>

Note:  g transform=”translate(500 200) rotate(-30) is used for Animation.

Rect Svg html5

html5 SVG Circle


<?xml version="1.0" standalone="no"?>

<!DOCTYPEsvg>

<svg width="15cm" height="10cm" viewBox="0 0 1200 400">

<desc>Example circle01 - circle filled with red and stroked with blue</desc>

<!-- Show outline of canvas using 'rect' element -->

<rect x="1" y="1" width="1198" height="398"

fill="none" stroke="blue" stroke-width="2"/>

<circle cx="500" cy="200" r="100"

fill="red" stroke="blue" stroke-width="10"  />

</svg>

HTML5 SVG

HTML5 SVG Line


<?xml version="1.0" standalone="no"?>

<!DOCTYPEsvg>

<svg width="20cm" height="4cm" viewBox="0 0 1200 400"

version="1.1">

<desc>Example line01 - lines expressed in user coordinates</desc>

<!-- Show outline of canvas using 'rect' element -->

<rect x="1" y="1" width="1500" height="398"

fill="none" stroke="blue" stroke-width="2" />

<g stroke="red" >

<line x1="100" y1="300" x2="300" y2="100"

stroke-width="5"  />

<line x1="300" y1="300" x2="500" y2="100"

stroke-width="10"  />

<line x1="500" y1="300" x2="700" y2="100"

stroke-width="15"  />

<line x1="700" y1="300" x2="900" y2="100"

stroke-width="20"  />

<line x1="900" y1="300" x2="1100" y2="100"

stroke-width="25"  />

<line x1="1100" y1="300" x2="1300" y2="100"

stroke-width="30"  />

<line x1="1300" y1="300" x2="1500" y2="100"

stroke-width="35"  />

</g>

</svg>

html5 svg

SVG  HTML5  Polygon


<?xml version="1.0" standalone="no"?>

<!DOCTYPEsvg>

<svg width="12cm" height="4cm" viewBox="0 0 1200 400">

<desc>Example polygon01 - star and hexagon</desc>

<!-- Show outline of canvas using 'rect' element -->

<rect x="1" y="1" width="1198" height="398"

fill="none" stroke="blue" stroke-width="2" />

<polygon fill="blue" stroke="green" stroke-width="10"

points="300,75  370,161 460,161 390,215

420,301 350,250 277,300 310,215

230,161 320,161" /></svg>

Html5 svg ploygone

html5 videos understanding

HTML 5 Videos

Nowadays every browser has plug-in for video or movies. But HTML5 videos defines new element <VIDEO> to embed html5 videos or movies to web pages. All new browsers support <VIDEO> element.

In this tutorial we learn how can we use this feature of HTML5 videos to embed video or movies to web pages.

Simple code for html5 videos


<!DOCTYPE html>

<html>

<body>

<video width="500" height="400" controls>

<source src="1.mp4" type="video/mp4">

Your browser does not support the html5 videos tag.

</video>

</body>

</html>

html5 videos

The type of video may be mp4, WebM, Ogg. It depends upon your browser. I am using Google Chrome so it support all three format of html5 videos.

<SOURCE> tag define where actually the html5 videos is, Means the video address in your hard drive.

Note: The video should be in the folder where you save your HTML file.

DOM properties for html5 videos

As it is important that a page should be in your control, not work by them. For this reason there are some methods and properties to control video like play, pause, start, stop etc.

EXAMPLE OF HTML5 VIDEOS


<!DOCTYPE html>

<html>

<body>

<div style="text-align:center">

<button onclick="playPause()">Play/Pause</button>

<button onclick="makeBig()">Big</button>

<button onclick="makeSmall()">Small</button>

<button onclick="makeNormal()">Normal</button>

<br>

<video id="video" width="400">

<source src="1.mp4" type="video/mp4">

Your browser does not support HTML5 video.

</video>

</div>

<script>

varmyVideo=document.getElementById("video");

function playPause()

{

if (myVideo.paused)

myVideo.play(); <!—myVideo is variable call play() method to play video-->

&nbsp;

else

myVideo.pause(); <!—myVideo is variable call pause() method to pause video-->

}

function makeBig()

{

myVideo.width=600; <!—myVideo is variable set Width of video.-->

}

function makeSmall()

{

myVideo.width=360;

}

function makeNormal()

{

myVideo.width=460;

}

</script>

</body>

</html>

When I click Big button.

html5 videos

when i click small button

html5 videos

Example of html5 videos


<!DOCTYPE html>

<html>

<body>

<br>

<video width="320" height="240" controls>

<source src="1.mp4" type="video/mp4">

<source src="1.ogg" type="video/ogg">

<track src="subtitles_en.vtt" kind="subtitles" srclang="en"

label="English">

</video>

</div>

</body>

</html>

html5 videos

In above tag CONTROLS means video will now show volume, its timeline etc.

<TRACK> in html5 videos element is used for advance video display. Like subtitle and many other properties.

HTML 5 Audio

Like video there was no standard for playing audio on web pages. All the browsers use flash (plug-in) for playing audio. But HTML 5 uses for the first time new element for audio by the name <AUDIO>.

Like video all latest versions of browsers support audio element.


<!DOCTYPE html>

<html>

<body>

<audio controls>

<source src="1.ogg" type="audio/ogg">

<source src="1.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

</body>

</html>

html5 videos

The control attribute is same as in video is used to adds audio controls, like play, pause, and volume.

SRC show the complete path of audio file. I have audio file and web page in same folder. You have to specify complete path of your file. That is an important point to learn.

Audio exist in many formats like mp3, Ogg, wav etc.

Defines multiple media resources for media elements, such as <video> and <audio>

 

You can earn money online HERE

HTML5 introduction and use

HTML5 introduction

For HTML5 introduction we know that web is constantly changing, therefore HTML standards used for web is also changing. HTML5 is the new version of HTML which is still under progress. It’s using same methodology as HTML used.

What’s New in HTML5?

There are several new things which you will experience during HTML5 work. But the major new things are.

1)      New attributes

2)      2D/3D graphics

3)      Local SQL database

4)      Web application

5)      Full CSS3 support available

6)      Video and Audio Streaming    etc.

How HTML5 start?

HTML5 introduction:- WHATWG short form of Web Hypertext Application Technology Working Group decides to create a new version of HTML and for this purpose it cooperates with W3C short form of World Wide Web Consortium. And new version of HTML came into being. There exist some rules which should be applied during its establishment.

1)      Newly added HTML5 features should be according to basic HTML, CSS, DOM, and JavaScript

2)      External plugins should be minimized

3)      Error Handling should be improved

4)      HTML5 should be device independent

5)      Public should know about its development process

HTML5 introduction :- New features

1)      Some of the interesting new features of HTML5 are.

2)      For 2D drawing it used <CANVAS>  tag

3)      For video it used <VIDEO>  tag

4)      For audio it used <AUDIO>  tag

5)      Calendars, Date, Time, Email like new form controls are included.

HTML5 Supported Browser

HTML5 introduction :-

There is no such browser having full support of HTML5. But all the famous browsers like safari, opera, Chrome etc. are continuously adding new features.

Miscellaneous elements of HTML5

HTML5 introduction :- For better structure of code and also for semantic purposes HTML5 added some new elements.

1)     <article>

2)      <mark>

3)      <progress>

4)      <summary>

5)      <dialog>

and so many tags which we will discussed soon.

HTML5 Removed elements.

HTML5 introduction :-Some elements of previous standard HTML 4.01 has been removed from new standard.

1)      <applet>

2)      <font>

3)      <strike>

4)      <frameset>

5)      <dir> etc. are removed from this new standard.

CANVAS!

HTML5 introduction :- HTML5 new elements is used for drawing graphics using Scripting like JAVASCRIPT. It’s just act like a container for graphics. It don’t draw anything for you, you must use scripting language to draw anything. It has several built-in functions.

How to create a CANVAS

<canvas width="”250”" height="”400”"> …………</canvas>
<canvas id="“canvas1”" width="”250”" height="”400”">………</canvas>

By doing so a container or rectangular area is create.This is 250 pixels wide and 400 pixels high. By default canvas will not show any border or content or color. If you want to show it’s border ant content you must use


#FF0000 is actually color in R G B system.

Example of CANVAS

<!DOCTYPE html>

<html>

<body>

<canvas id="Canvas1" width="200" height="100" style="border:1px solid #00FF00;">

HTML5 not supported.</canvas>

<script>

varrafi=document.getElementById("Canvas1");

var afridi= rafi.getContext("2d");

<!-- Create gradient ---- >

var gradient=afridi.createLinearGradient(0,0,200,0);

gradient.addColorStop(0,"Green");

gradient.addColorStop(1,"RED");

gradient.fillStyle= gradient;

gradient.fillRect(10,10,150,80);

</script>

</body>

</html>

OUTPUT of Example

html5 output

CANVAS line

HTML5 introduction :- For drawing a straight line on the canvas, HTML5 use following two methods. moveTo(x,y)    Starting point of line lineTo(x,y)      Ending  point of line

Line example


<canvas id="Canvas1" style="border:1px solid #0000FF;" width="200" height="100">
HTML5 Not supported.</canvas>
<script >
var rafi=document.getElementById(“Canvas1");

var afridi= rafi.getContext("2d");

afridi.moveTo(0,0);

afridi.lineTo(200,100);

afridi.stroke();
</script>

HTML5 introduction

stroke();

moveTo(0,0);

lineTo(200,100);    These two functions only define the start and end of line. But to draw actual visible line we must use stroke() which is “ink” method.

CANVAS line

HTML5 introduction :- Beside geometrical shapes we can also draw text on canvas following must be used, FONT – define text’s font properties fillText(text,x,y) – as name suggest that it draws filled text on canvas. It takes three argument first one is the text to be shown, 2nd and 3rd show the position (Coordinate) on which text should be displayed.

HTML5 introduction

It will show letters like  strokeText(text,x,y) – Same as above discussed but it will displayed font which will not be color filled like HTML5 introduction

Line Example

<canvas id="Canvas1" style="border: 1px solid #0000FF;" width="200" height="100">
HTML5 Not supported.</canvas>
<canvas id="Canvas2" style="border: 1px solid #FF00FF;" width="200" height="100">
HTML5 Not supported.</canvas>

<script >
varrafi=document.getElementById("Canvas1");

var afridi=rafi.getContext("2d");

afridi.moveTo(0,0);

afridi.lineTo(200,100);

afridi.stroke();
</script>
<!--—Code for strokeText() functions----------------->
<script>
varrafi=document.getElementById(“Canvas2");

var afridi= rafi.getContext("2d");

afridi.font="50px Arial";

afridi.strokeText("RAFI AFRIDI",10,50);
</script>
<pre>

CANVAS Gradients!

HTML5 introduction :-Up to now we are able to draw shapes and we can fill these shapes with solid colors. But what about those shapes, which are not limited to solid color? To solve this problem HTML 5 has Canvas Gradients method. There are two type of gradients: createLinearGradients(x1,y1,x2,y2) – draw a linear gradient createRadialGradient(x1,y1,r1,x2,y2,r2) – create a radial gradient  By doing so only objects of gradient created. Then we must use 2 or more color stops (addColorStop()) methods and its position. Gradient position can be anywhere between 0 and 1. Then use normal functions to draw shapes like rectangle, Circle etc.

HTML5 introduction

Example of Gradient

<!DOCTYPE html>

<html>

<body>

<canvas id="Canvas1" width="200" height="100" style="border:1px solid #00FF00;">

HTML5 not supported.</canvas>

<script>

varrafi=document.getElementById("Canvas1");

var afridi= rafi.getContext("2d");

<!-- Create gradient ---- >

var gradient=afridi.createLinearGradient(0,0,200,0);

gradient.addColorStop(0,"Green");

gradient.addColorStop(1,"RED");

gradient.fillStyle= gradient;

gradient.fillRect(10,10,150,80);

</script>

</body>

</html>

Position of Gradients

HTML5 introduction :- As the positions in gradient is between 0 and 1. What does it means? It actually shows which color will come first and so on. For example gradient.addColorStop(0,”RED”); gradient.addColorStop(0.5,”BLUE”);

gradient.addColorStop(1,”RED “);

The above code shows that first GREEN color will appear then RED then YELLOW because it’s positions are 0, 0.5, 1 respectively. The Gradient will be somewhat like this

HTML5 introduction  

Author:  RAFI ULLAH AFRIDI