Monday, November 11, 2013

HTML5 All in one Tutorial with Examples

12:55 AM By


HTML5 is the combined project of : WHATWG(WHAT Working Group) + W3C(World Wide Web Consortium).
Today in this tutorial, i have collected all the html5 features with direct examples from various sites. Main purpose of this blog is to give you insight of whole HTML5 feature in one-in-all file. Now you can just copy all html tag and can use in your website. Now let's try it!

HTML5-CANVAS: html5-canvas-animated-clown-face

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

HTML5 Form Examples
----------------------

1. Autofocus:



2. PlaceHolder:



3. Email:



4. URL:



5. Number as spinbox:

NUMBERS AS SPINBOXES

6. Number as a slider:

NUMBERS AS slider

DATE:

7. Date:



Month:

Week:

Time:

8. Search:



Speech Input:

9. Color Picker:



----------------FORM VALIDATION--------------

10. Turn Off Form Validation: form novalidate

Email:

11. Required Fields



12. Telephone



-------------AUDIO--------------------

13. Audio:



14. Video:



-------------------------------------

15. Video Size Change:



---------------YouTube In iFrame:--------------

----------YouTube Embedded----------------

16. HTML5 Canvas

HTML Canvas Studio
HTML 5 defines the canvas element as:
“a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”
A canvas is a rectangle in your page where you can use JavaScript to draw anything you want.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

17. File API

File API & FileReader available

Drag an image from your desktop on to the drop zone above to see the browser read the contents of the file and use it as the background - without uploading the file to any servers.

``````````````````````````````````````````````````````

Desktop Drag-Out

Drag files out onto the desktop: .pdf file .mp3 file
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


18. HTML5 Patterens


Your browser does not support the Canvas element.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

19. DRAG AND DROP(D&D)> Drag the HTML5-Logo image into the rectangle:



~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

20. Using Geolocation::::::Get Your Coordinate:::::::

Click the button to get your coordinates:


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

21. HTML5 Geolocation::::::GET YOUR POSITION ON GOOGLE MAP:::::::::::


HTML5 Geolocation is used to locate a user's position


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

22. Web Storage: Local Storage

// use localStorage for persistent storage
// use sessionStorage for per tab storage
saveButton.addEventListener('click', function () {
  window.localStorage.setItem('value', area.value);
  window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
textarea.value = window.localStorage.getItem('value');

Save text value on the client side (crash-safe)


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

23.Web Storage: Session Storage

Click the button to see the counter increase.


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

24.Web Worker:

HTML5 Web Workers Multithreading in JavaScript
HTML5 Web Workers:Best Article
============================

This demo shows how main window animation isn't interrupted by Web Workers. Note that the animation does not work in Opera (due to lack of requestAnimationFrame support).

Use arrow keys to change the direction of the animated square. The square is animated with requestAnimationFrame.

Click the button below to start or stop the worker.

Messages from Worker:


===============================================
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

25: WEB-GL


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

26. SVG-Examples:

Small SVG example Hello, World!
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Best Link to Learn SVG
A. Rectangle

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

B: A Simple Polyline

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

C: Linear Gradient Fill

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

D Stroke Line Join - Miter

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

E: Stroke Line Cap - Line Cap Butt , Round, Square

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

F: Styling Text
Styled SVG text
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Whole HTML5 added features all in one document

Link To Peek-Poke Website:



Please Leave your feedback. If you have any question. Let me help you!
Regards,
Yadab Raj Ojha
Software Developer from Kathmandu, Nepal.
E-Mail: luckyyadab@gmail.com

5 comments:

  1. UnknownNovember 11, 2013 at 1:42 AM

    nice blog keep it up.....................

    ReplyDelete
  2. UnknownNovember 11, 2013 at 1:44 AM

    Thanks, Arjun Rokaya Sir, I will try even more better in my next blog.

    ReplyDelete
  3. GTNovember 28, 2013 at 8:58 AM

    YRO bro... welcome to blogging world...
    Best of luck.

    I just shared this article in my page.

    Take a look:

    http://ganeshtiwaridotcomdotnp.blogspot.com/2013/11/html5-tutorial-with-examples.html

    ReplyDelete
    Replies
    1. UnknownDecember 3, 2013 at 8:21 AM

      Thanks Ganesh Tiwari Sir, for adding my post in your blog! It inspire me to add more contents.

      Delete
  4. UnknownOctober 6, 2015 at 11:24 PM



    Great Post ! HTML5 tutorial with simple and easy examples, Covering HTML5 Introduction, Semantic Elements,Attributes,Canvas,SVG,Multimedia,Video,Audio,Plug-ins,YouTube Videos, Geolocation, Drag and Drop, Local Storage, Coding Conventions / Style Guide. HTML5 Tutorial & CSS3 Tutorial.

    ReplyDelete