HTML5 Kya Hai




Web Development के क्षेत्र मे HTML बहुत ही महत्वपूर्ण Language है. जब भी कोई Web Development के क्षेत्र मे कदम रखता है तो उसे सबसे पहले HTML सीखनी पड़ती है. HTML बहुत ही आसान Language है जिसे आसानी से सीखा जा सकता है. इसकी सरलता के कारण ही HTML शुरआत से एक लोकप्रिय Language रही है.

HTML5 HTML का Latest Version है. HTML एक Programming Language नही है यह एक Markup Language है. HTML5 Hypertext Markup Language के लिए version 5 है इसे World Wide Web Consortium (W3C) ने अक्टूबर 2014 मे इसे Published किया था.

HTML5 Web Pages को बताए जाने वाली Language और Code का सबसे Recent Version है. HTML5 Websites को Design किए जाने के तरीके में महत्वपूर्ण रूप से बदलाव करेगा. यह पहले से ही नई Technology के लिए एक पसंदीदा Platform है.

Apple iPhones, iPads और Google Android Phones पहले से ही HTML5 के Elements का उपयोग करते है.

HTML5 Features

HTML5 के ऐसे बहुत से Features है जो इसे पुराने Versions से ज्यादा बेहतर बनाते है. HTML5 के कुछ खास Features के बारे मे आप नीचे देख सकते है.

  • Video Elements − Designers अब तीसरी पार्टी के Proprietary Plug-in Software जैसे Flash की तरह बिना Web Pages को बना सकते है. HTML 5 का उपयोग YouTube Video को Display करने के लिये किया जाता है. यह Video Controls में निर्मित सुविधा को और अधिक आकर्षक और प्रयोग में आसान बना देता है.

  • Application Cache − Outlook की लाइनो पर लेकिन Email Client की आवश्यकता को Minus कर अब आप स्थानीय रूप से Email की तरह Web Apps को Store कर सकते है. Google ने पहले ही अपने Google Gears Mail Client को HTML5 के साथ इस सुविधा का इस्तेमाल कर लिया है Google Wave HTML5 का प्रयोग भी करता है.

  • Canvas for Images − Canvas Element जो HTML5 के साथ आता है यह आपको Graphics और Photos को हेरफेर करने देता है जिससे Images के आसान Rendering को सक्षम किया जा सकता है. Designers को अब Intermediate Technologies जैसे JQuery का उपयोग करने की आवश्यकता नहीं है.

  • Geolocation − HTML5 मे Geolocation Feature विभिन्न Geo Location Technologies GPS (Global Positioning system), IP Address, RFID (Radio frequency ID), Wi-Fi, Bluetooth MAC Address और GSM/CDMA cell IDs का उपयोग करके स्थान पहचान को सक्षम बनाता है. यह System Privacy Regulations से जुड़ा हुआ है और इसे उपयोग किए जाने से पहले व्यक्तियों द्वारा Authorized होने की आवश्यकता होती है.

  • Web Workers − यह Feature वास्तविक समय मे किसी Web Page के प्रदर्शन के बिना Interfering किए स्वतंत्र रूप से Complex Tasks को Execute करने के लिए Web Application को सक्षम करती है.

HTML5 in Hindi Introduction

HTML5 Tutorial Audio, Video, Header, Footer, Data, Datalist, Article इत्यादि सहित सभी 40+ HTML Tag का विवरण प्रदान करता है.

HTML5 HTML का एक उन्नत रूप है. इसमे HTML से ज्यादा Attributes है. HTML5 एक प्रकार की कंप्यूटर की Language है इसका प्रयोग Website के Webpage बनाने के लिए किया जाता है. किसी भी Website को बनाने के लिए कुछ चीज़े प्रमुख होती है. जैसे के HTML5, CSS, JAVA SCRIPT और भी कई प्रकार की Languages प्रयोग की जाती है Website बनाने मे. पर इनमे से सब से ज्यादा प्रयोग HTML5 का किया जाता है जैसे इंसानी शरीर में हड्डियाँ होती है वैसे ही HTML5 किसी Website के लिए हड्डियों का काम करता है, बिना HTML5 के आप Website नहीं बना सकते.

एक ब्लॉगर के लिए ये बहुत ही उपयोगी हो सकती है. जब हम किसी भी ब्लॉग के इस्तेमाल करना शुरू करते है तो जिस Website की मदद से आप ब्लॉग चला रहे है वो Website पहले से ही बने हुए Design के ब्लॉग आप को देते है. लेकिन आप अगर उन Design से खुश नहीं है तो आप उस ब्लॉग के HTML5 Code मे जा कर अपनी मर्ज़ी से बदलाव कर सकते है. लेकिन इसके लिए आप को HTML5 को सीखना जरुरी है बाकी कंप्यूटर की Languages के मुकाबले इसे सीखना बहुत ही आसान है.

HTML5 HTML का Latest Version है. HTML Programming Language नही है यह एक Markup Language है. एक Webpage के Nuts और Bolts Fit और एक साथ काम करने के बारे में जानने के लिए आपको HTML 5 की पूर्ण क्षमता का उपयोग करने का Motive देता है. HTML का Previous Version HTML 4.01, 1999 में आया था और उसके बाद से Internet मे काफी बदलाव आये है.

यह Special रूप से अतिरिक्त Plugins की आवश्यकता के बिना Rich Content देने के लिए Designed किया गया थ. Current Version Animation से Graphics, Music से Movies तक सब कुछ Delivers होता है और यह Complicated Web Applications के निर्माण के लिए भी उपयोग किया जा सकता है. HTML5 मे Code को Debugg करना बहुत Simple है और यह Search Engine Optimization (SEO) की भी सुविधा प्रदान करता है.

HTML5 में बहुत से Tag के बारे में विस्तार से बताया गया है . जैसे की Audio, Video, Header, Footer, Data, Datalist, Articl.

For Example

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Tutorials Root</title>
   </head>
	
   <body>	
   
      <header role="banner">
         <h1>HTML5 Document Structure Example</h1>
         <p>This page should be tried in safari, chrome or Mozila.</p>
      </header>
      
      <footer>
         <p>Created by Tutorials Root</p>
      </footer>
      
   </body>   
</html>

Output

HTML5 in Hindi Tags

HTML5 ने कई नए Tag और विशेषताओ को पेश किया गया है. पिछले संस्करणों से Attribute Syntax बदल गया है. HTML5 मे Structure, Form, Graphics और Media Categories मे नए तत्व शामिल किये गये है.

HTML5 मे नए Tag की सूची शामिल की गयी है. यह HTML5 Tags Elements एक बेहतर Document Structure प्रदान करता है. HTML5 मे बहुत से Tags को Define किया गया है. जिनकी सूची आप नीचे देख सकते है.

Tags (Elements) Description
<article>

<article> टैग का उपयोग सामग्री को स्वतंत्र परिभाषित करने के लिये होता है. जैसे कि blog entry or newspaper article.

<aside>

<aside> टैग का उपयोग साइडबार में किया जाता है.

<audio>

<audio> टैग का उपयोग ऑडियो को HTML फ़ाइल में play करने के लिए किया जाता है.

<canvas>

<canvas> टैग का उपयोग वेब पेज में ग्राफिक डिजाइन करने के लिए किया जाता है.

<details>

<details> टैग उपयोगकर्ता को अतिरिक्त जानकारी दिखाता है जिसके द्वारा उपयोगकर्ता उसको अपने अनुसार hide और show कर सकता है.

<embed>

<embed> टैग बाहरी इंटरैक्टिव सामग्री का उपयोग परिभाषित करने के लिए करता है.

<figure>

<figure> टैग का इस्तेमाल स्व-निहित को परिभाषित करने के लिय होता है . Like this photos, diagrams etc.

<footer>

<footer> टैग का उपयोग footer section को परिभाषित करने के लिये किया जाता है.

<header>

<header> टैग का उपयोग header section को परिभाषित करने के लिये किया जाता है.

<mark>

<mark> टैग का उपयोग content को highlight करने के लिये किया जाता है . mark tag को दस्तावेज़ के लिए भी उपयोग किया जाता है.

<meter>

<meter> टैग का उपयोग known range में measurement को दरसाने करने के लिये किया जाता है.

<nav>

<nav> टैग का उपयोग दस्तावेज़ में navigation link को परिभाषित करने के लिये किया जाता है.

<progress>

<progress> टैग प्रगति (progress) task को दरसाता है.

<ruby>

<ruby> टैग ruby annotation के साथ <rp> और <rt> दोनों को निर्दिष्ट करता है.

<section>

<section> टैग दस्तावेज़ में section को परिभाषा करता है। section एक दूसरे से स्वतंत्र होते हैं और अलग अलग जानकारी का प्रतिनिधित्व करते है.

<time>

<time> टैग का उपयोग date/time को परिभाषित करने के लिये किया जाता है.

<video>

<video> टैग का उपयोग video को HTML File में play करने के लिये किया जाता है.

<wbr>

<wbr> टैग का उपयोग line break को परिभाषित करने के लिये किया जाता है.

HTML5 in Hindi Audio

किसी Web Page पर Sound डालना आसान नही होता है क्योंकि Browsers मे Embedded Media Files को Define करने के लिए एक Uniform Standard नही होता है.

इस Chapter मे हम आपके Web Page मे Sound को Embed करने के कई तरीकों को बताएंगे जो कि एक सरल Link के उपयोग से Latest HTML5 <audio> Element के उपयोग के लिए है.

Using the HTML5 Audio Element

HTML5 <audio> Element Web Pages मे Audio Embed करने का एक Standard तरीका प्रदान करता है.

हालांकि Audio Element Comparatively New है लेकिन यह अधिकांश Modern Web Browsers मे काम करता है.

एक Source के साथ Browser Default Set का उपयोग करके HTML5 Document मे एक Audio को Inserts करता है.

<audio> Tag का उपयोग Audio को HTML File मे Play करने के लिए किया जाता है.

For Example

<!DOCTYPE HTML>
<html>
   <body>
      
      <audio controls autoplay>
         <source src="horse.ogg" type="horse/ogg" />
         <source src="audio.wav" type="audio/wav" />
      </audio>
      
   </body>
</html>

Output

HTML5 in Hindi Video

एक Video File को दो तरीकों से एक HTML Page पर डाला जा सकता है. पहला तरीके मे <embed /> Tag का उपयोग करके इस Tag को Ending/Finishing Tag की आवश्यकता नही होती है और यह काम करता रहता है ज्यादातर एक Photo के लिए एक Tag के समान यह काम करता है.

<video> Tag का उपयोग HTML में Video File को Play करने के लिए किया जाता है.


<embed src="example.mpeg" autostart="false" height="30" width="144" />


इसके अलावा आप एक Link का उपयोग करके एक Video File को Insert कर सकते हो.


<a href="example.mpeg" title="Download movie">film name</a>


Supported Extensions for the Embed Tag

  • .swf - Made by Macromedia Flash

  • .wmv - Microsoft Windows Media Video

  • .mov - Quick Time Movie, belongs to Apple

  • .mpeg - Created by Moving Pictures Expert Group

Attributes of the Embed Tag

  • Autostart

  • Hidden

  • Volume

  • Loop

  • Playcount

Inserting a YouTube Video Using Embed Tag

आप ऐसा बहुत आसान तरीके से कर सकते हैं क्योंकि YouTube आपको HTML Code प्रदान करता है


<object width="425" height="344" data="https://youtu.be/vOcj2I9gfFQ"></object>



<embed src="https://www.youtube.com/embed/F9Bo89m2f6g" allowfullscreen="true" width="425" height="344">



<iframe width="854" height="480" src="https://www.youtube.com/embed/vOcj2I9gfFQ?ecver=1" frameborder="0" gesture="media" allowfullscreen></iframe>


HTML5 Video Tag

HTML5 के परिचय के साथ Video Tag आधुनिक Browsers द्वारा बहुत तेज़ी से फैल गया.

अगर यह सब पढ़ने के बाद आप अभी भी HTML5 Video Tag का प्रयोग करके अपना खुद का Player बनाने मे सहमत नही है तो आप Player के लिए Video Tag बनाने के लिए सरल लेकिन शक्तिशाली Generator का उपयोग कर सकते है.

Video Tag को HTML Page पर एक Video को जोड़ने के लिए उपयोग किया जाता है.

फिलहाल HTML5 मे Video Tag तीन प्रकार की Video Files का समर्थन करता है.

  • mp4 - MIME-type video/mp4

  • webm - MIME-type video/webm

  • ogg - MIME-type video/ogg

For Example

<!DOCTYPE HTML>
<html>
   <body>
      
      <video width="400" controls>
         <source src="mov_bbb.mp4" type="video/mp4" />
         <source src="mov_bbb.ogg" type="video/ogg" />
      </video>
      
   </body>
</html>

Output

HTML5 in Hindi Article

HTML मे Article Tag अपने आप मे स्वतंत्र रूप से उपयोग की जाने वाली Website का एक हिस्सा है. Article Tag किसे भी Website मे या Blog मे अपनी एक अलग पहचान रखता है Article Tag ज्यादा तर News Story में Blog Post या Magazine मे इस्तेमाल होता है.

HTML Article Element मे वास्तविक Content या तो इसमे कई अलग अलग Section Element या एक से अधिक Article Elements शामिल होते है. अगर इसमे Article Element शामिल होता है तो Internal Articles के Content बाहरी Article के Content से Related होते है.

यदि Author के Article की जानकारी प्रदान करना आवश्यक है तो इसका उपयोग करके <address> का उपयोग किया जा सकता है.

एक Article के प्रकाशन के समय Element Date और Time का Pubdate Attribute के उपयोग से Described किया जा सकता है.

<article> Tag का Content आपकी Website के बाकी Content से Independent होता है. यानी इस Content को दूसरे Contents की आवश्यकता नहीं होती है. जैसे की Newspaper मे अलग अलग Articles होते है और वे सब Independent होते है उसी प्रकार आपकी Website मे हर Article Tag Independent होता है.

एक Article मे सामान्यत Headings और Paragraphs होते है. Headings और Paragraphs को क्रमश <h1> और <p> Tags द्वारा परिभाषित किया जाता है. किसी Article का HTML Syntax इस प्रकार होता है.

Syntax

<article>  
   <h1>Tutorial of HTML5 Article Element</h1>  
   <p>Lorem Ipsum is simply dummy text of the printing</p>  
</article> 

Attributes of HTML5 <article> Tag

<article> Tag का कोई Element Specific Attribute नहीं होता है. लेकिन ये Tag सभी Global Attributes जैसे की Id, Class, Title आदि को समर्थन करता है.

For Example

<!DOCTYPE HTML>  
<html lang="en">  
   <head>  
      <meta charset=utf-8>  
      <title>HTML5 Article Example</title>  
   </head>  
   <body>  
      <article>  
         <h1>Tutorial of HTML5 Article Element</h1>  
         <p>Lorem Ipsum is simply dummy text of the printing</p>  
      </article>  
      <p><strong>Note:</strong> Lorem Ipsum is simply dummy 
      text of the printing and typesetting industry.</p>
   </body>  
</html>  

Output

Styling <article> Tag

किसी भी दूसरे HTML Element की तरह <article> पर भी आप CSS Rules Apply कर सकते है. CSS द्वारा आप Article की Width परिभाषित करने से लेकर Color और Display भी परिभाषित कर सकते है

article
{
   width:100px;
   color:#3b58e4;
   display:block;
}

HTML5 in Hindi Dialog

<dialog> का उपयोग Dialog Box, Popup और Window को Define करने के लिए किया जाता है.

एक <dialog> Element के Behavior को Define करने के लिए आमतौर पर JavaScript का उपयोग करने की आवश्यकता होती है. यह एक Window या एक Dialog Box को Define करता है.

Syntax For <dialog> Element

<dialog>
   content
</dialog>

For Example

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
    border: 2px solid red;
}
</style>
</head>
<body>

<p><b>Note:</b> The dialog tag is currently only supported in 
Chrome version 37+, Safari 6+ and Opera 24+.</p>

<table>
  <tr>
    <th>Sunday<dialog open>This is an open dialog window</dialog></th>
    <th>Monday</th>
    <th>Tuesday</th>
  </tr>
  <tr>
    <td>30</td>
    <td>28</td>
    <td>26</td>
  </tr>
  <tr>
    <td>30</td>
    <td>28</td>
    <td>26</td>
  </tr>
  <tr>
    <td>30</td>
    <td>28</td>
    <td>26</td>
  </tr>
  <tr>
    <td>30</td>
    <td>28</td>
    <td>26</td>
  </tr>
  
</table>

</body>
</html>

Output

HTML5 in Hindi Section

HTML5 मे <section> Tag किसी Web Page या Web Application के Generic Sections को Define करता है. Section को यँहा पर ऐसे Content के Group के Reference मे उपयोग किया गया है जो किसी एक Topic से Related है.

सभी Sections एक दूसरे से Independent होते है और अलग अलग Information Represent करते है. <section> Tag के माध्यम से Search Engines को आपके Page को समझने मे आसानी होती है. हर <section> Element को Heading या Child <section> Element द्वारा Uniquely Identify किया जाता है.

Difference Between <section> Tag And <div>

<section> Element एक Container Element नही होता है. अगर आपको सिर्फ एक ऐसे Container Element की जरुरत है जिसमे आप दूसरे Element को डाल सके और उसे Design कर सके तो ऐसा करने के लिए आपको <div> Element का उपयोग करना चाहिए.

<div> Element का कोई Special Meaning नही होता है. Search Engines द्वारा <div> Element को Skip कर दिया जाता है क्योंकि <div> Element को सिर्फ दूसरे Elements को Contain करने के लिए उपयोग किया जाता है.

For Example

<!DOCTYPE HTML>
<html>
   <body>
      
      <section>
         <h1>Tutorialroot</h1>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting.
         Lorem Ipsum has been the industry's standard dummy text ever since the
         1500s, when an unknown printer took a galley of type and scrambled
         it to make.</p>
      </section>
		
      <section>
         <h1>Tutorialroot</h1>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting.
         Lorem Ipsum has been the industry's standard dummy text ever since the
         1500s, when an unknown printer took a galley of type and scrambled
         it to make.</p>
      </section>

      <p><strong>Note:</strong> Lorem Ipsum is simply dummy text of 
      the printing and typesetting industry.</p>
      
   </body>
</html>

Output

HTML5 in Hindi Figcaption

HTML5 का <figure> Tag Content की एक Unit को Describe करता है जो Self Contained होती है और Page के Main Content Flow से Independent होती है. इसके साथ आप Caption भी वैकल्पिक रूप से उपयोग कर सकते है. इस Unit को Remove करने से Main Content Flow पर कोई Affect नही पड़ता है. <figure> Tag मे Mainly Diagram, Photos और Code Include किये जाते है.

Advantages of HTML5 <figure> Tag

  • <figure> Tag के साथ <figcaption> Tag का उपयोग किया जाता है. इस Tag के द्वारा Diagram, Code और उदाहरण आदि को शीर्षक दिया जा सकता है. इससे उपयोगकर्ता की Engagment और Readability बढ़ती है. HTML5 से पहले Images आदि को Title देने का कोई Mechanism नही था.

  • <figure> Tag के द्वारा Search Engines को Page को Read करने मे आसानी होती है. इसे SEO के लिए बेहतर माना जाता है.

  • Web Page मे Code आदि Include करने के लिए <div> या <p> की आवश्यकता नही होती है.

Difference Between <img> and <figure> Tags

  • <img> Tag के द्वारा Include की गयी Images वेब पेज से Linked होती है लेकिन उसमे Included नही होती है <img> Tag एक खाली Space Create करता है जो पेज लोड होते समय URL पर दी गयी Image द्वारा भर जाता है. दूसरी तरफ <figure> Tag का Content वेब पेज मे ही Included होता है.

  • <img> Tag के द्वारा Link की गयी Images को Title देने के लिए आपको <p> आदि दूसरे Tag का उपयोग करने होंगे. इस Title को कोई Search Engines भी Read नही कर सकेंगे. दूसरी तरफ <figure> Tag मे आप <figcaption> Tag का उपयोग करते हुए Diagram, Code और उदाहरण आदि को Title दे सकते है जो Search Engines द्वारा आसानी से Readable होता है. <figcaption> Tag को <figure> Tag से पहले बाद मे या फिर अंदर कँही भी उपयोग किया जा सकता है.

Syntax of HTML5 <figure> Tag

<figure>

   Code, Diagram, Example

</figure>

For Example

<!DOCTYPE HTML>
<html>
   <body>
      
      <section>
         <h1>Tutorialroot</h1>
         <p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
      </section>
		
      <figure>
         <img src="figcaption.jpg" alt="The Figcaption" width="304"height="228">
         <figcaption>Fig.1 - A view of the Running Girl .</figcaption>
      </figure>

   </body>
</html>

Output

HTML5 in Hindi Time

आपको कभी कभी अपने Web Page मे ये बताने की आवश्यकता होती है की कोई कार्य किस Time, Day, Month या किस Year मे किया था. जैसे जब कोई Article Publish किया जाता है तो उसकी Publish Date और Time Show किया जाता है.

HTML5 से पहले कोई भी ऐसा Tag नहीं था जिसके द्वारा Date और Time को Markup किया जा सके.

HTML5 किसी Web Page मे Date और Time को Markup करने के लिए <time> Tag प्रदान करता है <time> Tag Georgian Calendar मे Date और Time को Define करता है.

Syntax of HTML5 <time> Tag

<time> Tag का Syntax आप नीचे देख सकते है


<time attribute="value">Text</time>


जैसा की आप ऊपर Syntax मे देख सकते है <time> Tag Opening और Closing Tags के द्वारा परिभाषित किया जाता है. <time> Tag के साथ दो Attributes उपलब्ध है जिनके बारे मे आपको आगे Details मे बताया जाएगा <time> Tag के Opening और Closing Syntax के बीच आप वह Text परिभाषित करते है जिसे आप Mark करना चाहते है.

For Example

<!DOCTYPE HTML>
<html>
   <body>
      
      <p>We open at <time>10:00</time> every morning.</p>

      <p>I have a date on <time datetime="2008-02-14 20:00">Propose day</time>
      </p>
      
   </body>
</html>

Output

HTML5 in Hindi Wbr

जब आपके Content मे कोई String बहुत बड़ी हो तो छोटी स्क्रीन पर ब्राउज़र मे वह ठीक से Break नही होती है और आपके Paragraph के Structure को बिगाड़ देती है. इसके लिए HTML5 मे Solution Provide किये गये है. HTML5 आपको <wbr> Tag प्रदान करती है. इसको Word Break Opportunity कहा जाता है. इस Tag को आप किसी Long String के बीच मे उपयोग कर सकते है.

<wbr> Tag Line Break की Opportunity को Define करता है. इसका मतलब यह है की <wbr> Tag के द्वारा आप बताते है की जरुरत पड़ने पर ब्राउज़र String को कँहा से Break कर सकता है.

HTML <wbr> Tag का प्रयोग केवल एक HTML Document के भीतर एक Line Break को Specify करने के लिए किया जाता है. <wbr> Tag के बिना Tag को एक Long Text को पढ़ना बहुत मुश्किल होता है कुछ समय आपको अधिक पढ़ने के लिए Scroll Right करना होता है.

Difference between <wbr> and <br> Tag

  • <br> Tag Line Break को Force करता है <wbr> Tag Text को केवल जरुरत पड़ने पर ही Break करता है.

  • <br> Tag Line को Break करने के लिए उपयोग किया जाता है <wbr> Tag Word को Break करने के लिए उपयोग किया जाता है.

<wbr> Tag Long Strings के बीच उपयोग किया जाता है जिनमे Space नही होता है. हालाँकि इसकी जगह <br> Tag भी उपयोग किया जा सकता है लेकिन जैसा की मैने आपको बताया <br> Tag द्वारा Line Tag Avaliable Space होने पर भी Text को Next Line मे ही Show करता है.

Syntax of HTML5 <wbr> Tag


string<wbr>string<wbr>string<wbr>string


जैसा की आप ऊपर दिए गए Syntax मे देख सकते है <wbr> Tag द्वारा एक String मे कई Line Break Opportunities Define की गयी है.

Attributes of HTML5 <wbr> Tag

<wbr> Tag के लिए कोई Element Specific Attribute नही होता है ये सभी Global Attributes जैसे की id, Class आदि को Support करता है.

Event Attributes of HTML5 <wbr> Tag

<wbr> सभी Global Event Attributes को support करता है

For Example

<!DOCTYPE HTML>
<html>
   <head>
      <title>HTML wbr Tag Example</title>
   <head>
   <body>
      
      <p>Try to shrink the browser window, to view how the very long word in 
      the paragraph below will break:</p>

      <p>This is a veryveryveryveryveryveryveryveryveryveryveryveryveryvery
         veryveryveryvery<wbr>longwordthatwillbreakatspecific<wbr>places
         whenthebrowserwindowisresized.</p>

      <p><b>Note:</b> The wbr element is not supported in 
         Internet Explorer 11 and earlier versions.</p>
      
   </body>
</html>

Output

HTML5 in Hindi Canvas

अब तक Web Pages मे Graphics और Animations बनाने के लिए कोई Mechanism नही था. इसके लिए Flash और Silverlight जैसी Technologies उपयोग की जाती रही है. लेकिन अब HTML5 की वजह से Web Developers Graphics और Animations Directly Webpages मे बनाने के लिए Capable है.

Webpages मे अब Animations Show करने के लिए आपको किसी प्रकार की Flash File को Webpage मे Add करने की आवश्यकता नही है. इसके अलावा आपको Animation Show करने के लिए किसी प्रकार के Extensions जैसे की Flash Player आदि की भी आवश्यकता नही है.

HTML5 का <canvas> Tag Web Page मे Graphics Design करने के लिए उपयोग किया जाता है. <canvas> Element सिर्फ Graphics के लिए एक Container का काम करता है. इसमे Graphics Draw करने के लिए आप Scripting Language का उपयोग करते है. ज्यादातर इसके साथ Javascript उपयोग की जाती है.

Canvas अपने आप मे एक अलग टैकनोलजी है. इसके साथ आपको अलग अलग Graphics Draw करने के लिए अलग अलग Methods Available है. इन Methods को Canvas के Context के द्वारा Access किया जाता है.

Canvas Element एक Element है जो Width और Height Attributes का उपयोग करके HTML Code को Define करता है.

Canvas Element की Real Power हालांकि HTML5 Canvas API का लाभ उठाकर पूरी की गई है .

API का प्रयोग JavaScript मे लिखकर किया जाता है जो Canvas Area को Drawing Functions के माध्यम से Access कर सकता है इस प्रकार गतिशील रूप से उत्पन्न Graphics के लिए अनुमति देता है.

<canvas> Element में स्वयं Drawing Capabilities नहीं है बल्कि यह JavaScript के लिए एक Container है ताकि Users Server से आवश्यक कुछ भी नही के साथ Browser मे Shapes और Text को आकर्षित कर सके.

आप 2D Graphics को आकर्षित कर सकते है और एक Rectangular Bitmap Canvas मे colors Set कर सकते है.

Syntax of HTML5 <canvas> Tag

<canvas id="canvas-id" width="int-number" height="int-number">

   Syntax of HTML5 Canvas Tag

</canvas>

ऊपर दिए गए Syntax मे आप देख सकते है Canvas Tag मे id, width और height Attributes Define किये गए है. जब आप कोई <canvas> Element को Specify करते है तो इन Attributes को परिभाषित करना अनिवार्य होता है. इन Attributes मे id Attribute Javascript के द्वारा <canvas> का Context प्राप्त करने के लिए उपयोग किया जाता है और width और height Attributes Canvas की height और width को Define करते है <canvas> Tag को </canvas> Ending Tag से Close किया जाता है.

जब तक आप <canvas> की Border Specify नही करते है तो <canvas> Properly Show नही होता है <canvas> की Border आप Style Attribute द्वारा इस प्रकार Define कर सकते है.

Example of HTML5 <canvas> Tag

नीचे <canvas> Element द्वारा एक Rectangle Draw करने के उदाहरण देख सकते है

For Example

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">
      <title>HTML5 Canvas Example</title>
      <style>
         #canvasDiv{
            border: 2px #82d502  solid;
         }
      </style>
   </head>
   <body>
      <h2>HTML5 Canvas Example</h2>
      <script type="text/javascript">
         var canvas  = document.getElementById("canvasDiv");
         if (canvas.getContext)
         {   
            var ctx = canvas.getContext('2d');   
            // code for drawing goes here   
         } 
         else 
         {   
            // canvas unsupported code goes here 
         }  
      </script>	
      <canvas id="canvasDiv" width="200" height="200"></canvas>
   </body>
</html> 

Output

Canvas Drawing Rectangle

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Canvas Drawing Rectangles Example</title>
      <style>
         #bodyCanvas {
            width: 400px;
            height:200px;
            margin: 0px auto;
         }
      </style>      
      <script type="text/javascript">
         function drawRectangle(){            
            var canvas = document.getElementById('canvasDiv');
            if (canvas.getContext)
            {
               
               var ctx = canvas.getContext('2d');
               
               ctx.fillRect(30,30,120,120);
               ctx.clearRect(50,50,80,80);
               ctx.strokeRect(55,55,70,70);
            }            
            else 
            {
               alert('You need Safari or Firefox 1.5+ to see this example.');
            }
         }
      </script>		
   </head>   
   <body id="bodyCanvas" onload="drawRectangle();">
      <h2>Canvas Drawing Rectangles Example</h2>
      <canvas id="canvasDiv"></canvas>
   </body>	
</html> 

Output

Canvas Drawing Paths

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Canvas Drawing Paths Example</title>
      <style>
         #bodyCanvas {
            width: 500px;
            height:200px;
            margin: 0px auto;
         }
      </style>      
      <script type="text/javascript">
         function drawPaths(){            
            var canvas = document.getElementById('canvasDiv');
            if (canvas.getContext)
            {
               
               var ctx = canvas.getContext('2d');
               
               ctx.beginPath();
               ctx.arc(75,75,50,0,Math.PI*2,true);  // Outer circle
               
               ctx.moveTo(110,75);
               ctx.arc(75,75,35,0,Math.PI,false);   // Mouth
               
               ctx.moveTo(65,65);
               ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
               
               ctx.moveTo(95,65);
               ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
               
               ctx.stroke();
            }            
            else 
            {
               alert('You need Safari or Firefox 1.5+ to see this example.');
            }
         }
      </script>		
   </head>   
   <body id="bodyCanvas" onload="drawPaths();">
      <h2>Canvas Drawing Paths Example</h2>
      <canvas id="canvasDiv"></canvas>
   </body>	
</html> 

Output

Canvas Drawing Lines

<!DOCTYPE HTML>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Canvas Drawing Lines Example</title>
      <style>
         #bodyCanvas {
            width: 500px;
            height:200px;
            margin: 0px auto;
         }
      </style>      
      <script type="text/javascript">
         function drawLines(){            
            var canvas = document.getElementById('canvasDiv');
            if (canvas.getContext)
            {
               
               var ctx = canvas.getContext('2d');
               
               // Filled triangle
               ctx.beginPath();
               ctx.moveTo(25,25);
               ctx.lineTo(125,25);
               ctx.lineTo(25,125);
               ctx.fill();
            
               // Stroked triangle
               ctx.beginPath();
               ctx.moveTo(145,145);
               ctx.lineTo(145,45);
               ctx.lineTo(45,145);
               ctx.closePath();
               ctx.stroke();
               
               // Straight Line
               ctx.beginPath();
               ctx.moveTo(285,45);
               ctx.lineTo(185,45);
               ctx.closePath();
               ctx.stroke();
            }            
            else 
            {
               alert('You need Safari or Firefox 1.5+ to see this example.');
            }
         }
      </script>		
   </head>   
   <body id="bodyCanvas" onload="drawLines();">
      <h2>Canvas Drawing Lines Example</h2>
      <canvas id="canvasDiv"></canvas>
   </body>	
</html> 

Output

HTML5 in Hindi SVG

Scalable Vector Graphics (SVG) एक XML-based image का Format है जिसका उपयोग Web के लिए दो Dimensional Vector पर आधारित Graphics को परिभाषित करने के लिए किया जाता है.

Image की गुणवत्ता को खोए बिना एक Vector Image को किसी भी हद तक बढ़ाया जा सकता है.

SVG Image और उनके व्यवहार को XML Files मे परिभाषित किया जाता है. इसका अर्थ है कि SVG Images को किसी Text Editor के साथ बनाया और Edited किया जा सकता है.

SVG एक Scalable Vector Graphics है SVG का इस्तेमाल Web Page और Graphics को परिभाषित करने के लिए किया जाता है.

For Example

<!DOCTYPE html>
<html>
   <head> 
      <title>HTML5 SVG Circle Example</title>
      <meta charset="utf-8" />
      <style>
         #svgCricle {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
   </head>
   <body>   
      <h2 align="center">HTML5 SVG Circle Example</h2>		
      <svg id="svgCricle" height="300" xmlns="http://www.w3.org/2000/svg">
         <circle id="circleFill" cx="50" cy="50" r="50" fill="green" />
      </svg>      
   </body>
</html>

Output

SVG Rectangle Example

एक SVG <rect> Element एक Rectangle को Represents करता है इस Element का उपयोग करके आप विभिन्न Width, Height विभिन्न Stroke Outline के साथ Rectangle को आकर्षित कर सकते हैं और तेज या Rounded Corners आदि के साथ Colors को Fill सकते है.

<!DOCTYPE html>
<html>
   <head> 
      <title>HTML5 SVG Rectangle Example</title>
      <meta charset="utf-8" />
      <style>
         #svgRectangle {
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
   </head>
   <body>   
      <h2 align="center">HTML5 SVG Rectangle Example</h2>		
     <svg id="svgRectangle" height="200" xmlns="http://www.w3.org/2000/svg">
      <rect id="rectangleFill" width="300" height="100" fill="blue" />
      </svg>      
   </body>
</html>

Output

SVG Line Example

SVG <line> Element SVG Images के अंदर Draw Lines के लिए उपयोग किया जाता है.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG Line Example</title>
      <meta charset="utf-8" />
      <style>
         #svgLine{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>
   </head>	
   <body>	
      <h2 align="center">HTML5 SVG Line Example</h2>		
      <svg id="svgLine" height="200" xmlns="http://www.w3.org/2000/svg">
         <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/>
         <line x1="30" y1="120" x2="300" y2="150" style="stroke:blue;stroke-width:3"/>
      </svg>		
   </body>
</html>

Output

SVG Ellipse Example

Ellipse को आकर्षित करने के लिए SVG <ellipse> Element का उपयोग किया जाता है एक Ellipse एक Circle है जिसमें समान Height और Width नही है दूसरे शब्दों मे X और Y Directions मे इसका Radius अलग होता है.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG Ellipse Example</title>
      <meta charset="utf-8" />
      <style>
         #svgEllipse{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
   </head>	
   <body>	
      <h2 align="center">HTML5 SVG Ellipse Example</h2>		
      <svg id="svgEllipse" height="300" xmlns="http://www.w3.org/2000/svg">
         <ellipse cx="150" cy="100" rx="150" ry="75" fill="red" />
      </svg>		
   </body>
</html>

Output

SVG Polyline Example

SVG <polyline> Element का उपयोग कई Connected Lines (poly = multiple) को आकर्षित करने के लिए किया जाता है.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG Polyline Example</title>
      <meta charset="utf-8" />
      <style>
         #svgPolyline{
            position: relative;
            left: 40%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>
   </head>	
   <body>	
      <h2 align="center">HTML5 SVG Polyline Example</h2>		
      <svg id="svgPolyline" height="300" xmlns="http://www.w3.org/2000/svg">
          <polyline points="80,80 80,120 120,120 120,140 140,140 140,160" fill="green" />
      </svg>		
   </body>
</html>

Output

SVG Gradients Example

SVG Gradients एक असमान Fashion मे Color के Shapes को भरने का एक तरीका है इस तरह से एक Shapes को भरना या Stroke एक Color से दूसरे में बदल सकता है यह कुछ प्रकार के Graphics के लिए बहुत अच्छा लग सकता है.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG Gradients Example</title>
      <meta charset="utf-8" />
      <style>
         #svgGradients{
            position: relative;
            left: 43%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
   </head>	
   <body>	
      <h2 align="center">HTML5 SVG Gradients Example</h2>		
      <svg id="svgGradients" height="300" xmlns="http://www.w3.org/2000/svg">
         <defs>			
               <radialGradient id="gradientRadial" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                  <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
                  <stop offset="100%" style="stop-color:rgb(201,124,24); stop-opacity:1"/>
               </radialGradient>				
         </defs>			
         <ellipse cx="150" cy="100" rx="150" ry="70" style="fill:url(#gradientRadial)" />	
      </svg>
   </body>
</html>

Output

SVG Star Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML5 SVG Star Example</title>
      <meta charset="utf-8" />
      <style>
         #svgStar{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
   </head>	
   <body>	
      <h2 align="center">HTML5 SVG Star Example</h2>		
      <svg id="svgStar" height="300" xmlns="http://www.w3.org/2000/svg">
         <polygon points="100,10 40,180 190,60 10,60 160,180" fill="purple"/>
      </svg>
   </body>
</html>

Output