HTML5 Kya Hai

First Page
Next Page

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 शामिल किये गये है और यह ऐसे 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 के लिए Bones का काम करता है, बिना HTML5 के आप Website नहीं बना सकते.

HTML5 एक ब्लॉगर के लिए बहुत ही उपयोगी साबित होती है. जब आप किसी ब्लॉग का उपयोग करना शुरू करते है तो जिस 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 मे सामान्यत 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> Element एक Dialog Box को बनाने के लिए उपयोग किया जाता है जैसे कि एक Popup या Modal Window जो की Active Browser Window के भीतर प्रदान की जाती है.

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

HTML में <section> टैग का उपयोग header, footer, lesson आदि को HTML डॉक्यूमेंट में परिभाषित करने के लिए किया जाता है, जिसे हम Sections कह सकते हैं.

HTML में <section> टैग का उपयोग header, footer, lesson आदि को HTML डॉक्यूमेंट में परिभाषित करने के लिए किया जाता है, जिसे हम Sections कह सकते हैं.

Section को यँहा पर ऐसे Content के Group के Reference मे Use किया गया है जो किसी एक Topic से Related है.

Everyone <section> Element को Heading या Child <section> Element द्वारा विशिष्ट रूप से 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

<figure> तत्व में कैप्शन जोड़ने के लिए, <figcaption> टैग का उपयोग किया जाता है. आप HTML5 में <figure> तत्व के लिए एक कैप्शन को शामिल करने के लिए निम्न कोड को चलाने का उपयोग कर सकते हैं.

Advantages of HTML5 <figure> Tag

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

  • <figure> Tag का उपयोग Search Engines लिए बहुत अच्छा माना जाता है क्योकि इससे वेब पेज Read करने मे सहयता मिलती होती है. इसलिए इसको SEO के लिए बहुत अच्छा माना जाता है.

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 ग्रेगोरियन कैलेंडर मे Date और Time को Define करता है.

Syntax of HTML5 <time> Tag

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


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

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

HTML <wbr> Tag का प्रयोग केवल एक HTML Document के भीतर एक Line Break को Specify करने के लिए किया जाता है.

<wbr> Tag के बिना Tag को एक long text को पढ़ना बहुत मुश्किल है कुछ समय आपको अधिक पढ़ने के लिए Scroll Right करना होता है.

आप जब भी <wbr> Tag का उपयोग करते हो तो Auto Line को Breaks करते हो जब Content HTML Document Field को Overlap करती है.

Syntax of HTML5 <wbr> Tag


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

Attributes of HTML5 <wbr> Tag

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

Event Attributes of HTML5 <wbr> Tag

<wbr> Tag सभी प्रकार के Global Event Attributes का समर्थन करता है.

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 है.

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

Canvas एक अलग तकनीक मानी जाती है. इसके साथ दोस्तों आपको विभिन प्रकार के Graphics Draw करने के लिए अलग प्रकार के Methods अप्लाई करने होंगे है. इन 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 मे आप देख सकते है की किस प्रकार अच्छे से Specify किया गया है Canvas Tag मै Id, Height, Width, Attributes को परिभाषित किया गया है. दोस्तों जब भीआप किसी <canvas> Element का विवरण करते है तो इन Attributes को परिभाषित करना आवश्यक होता है. इन Attributes मे Id Attribute Javascript के द्वारा <canvas> का Context प्राप्त करने के लिए उपयोग किया जाता है और width और height Attributes Canvas की height और width को Define करते है <canvas> Tag को </canvas> Ending Tag से Close किया जाता है.

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

एसवीजी स्केलेबल वेक्टर ग्राफिक्स पर स्थिर है और यह एक्सएमएल में 2 डी-ग्राफिक्स और ग्राफिकल एप्लिकेशन का वर्णन करने के लिए एक भाषा है और फिर एक्सएमएल को एसवीजी दर्शक द्वारा प्रस्तुत किया जाता है. एसवीजी ज्यादातर वेक्टर प्रकार Diagrams जैसे Pie Chart, एक X में Two-dimensional Graphing, Y Coordinate System आदि के लिए उपयोगी है.

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

First Page
Next Page