HTML Examples

HTML के सभी विषय उदाहरण सहित

HTML पाठ्यक्रम की संपूर्ण सामग्री

मूल HTML

उन्नत HTML

HTML तत्व

उन्नत सुविधाएं

HTML प्रविष्टियाँ और ग्राफ़िक्स

अतिरिक्त सुविधाएं

1HTML मूल बातें

HTML दस्तावेज़

प्रत्येक HTML दस्तावेज़ की एक विशिष्ट संरचना होती है:

उदाहरण: मूल HTML दस्तावेज़

<!DOCTYPE html> <एचटीएमएल> <सिर> <शीर्षक>पहला HTML पृष्ठ</शीर्षक> </head> <शरीर> <h1>हैलो वर्ल्ड!</h1> <p>यह मेरा पहला HTML पेज है।</p> </body> </html>

HTML हेडर

HTML में 6 शीर्षक स्तर हैं:

उदाहरण: सभी हेडर स्थितियाँ

<h1>महत्वपूर्ण शीर्षक</h1> <h2>उपशीर्षक</h2> <h3>उपशीर्षक</h3> <h4>उप-उपशीर्षक</h4> <h5>संक्षिप्त शीर्षक</h5> <h6>बहुत छोटा शीर्षक</h6>

HTML कॉलम

<p> टैग का उपयोग पैराग्राफ बनाने के लिए किया जाता है:

उदाहरण: अनुच्छेद

<p>यह एक पैराग्राफ है. HTML में पैराग्राफ स्वचालित रूप से ऊपर और नीचे मार्जिन होता है।</p>

❓अभ्यास: कौन सा HTML टैग एक शीर्षक बनाता है?

<h6>
✗ ग़लत! <h6> एक बहुत छोटा शीर्षक है
<h1>
✓ ठीक है! <h1> मुख्य शीर्षक है

2HTML गुण

शीर्षक विशेषता

तत्व में अतिरिक्त जानकारी लाता है:

<p title='यह एक टूलटिप है'> वाद्य सहायता के साथ अनुच्छेद </p>

href विशेषता

लिंक का उपयोग इसके लिए किया जाता है:

<a href='https://jassifteam.com'> जसिफ टीम की वेबसाइट </a>

वैकल्पिक विशेषता

टेक्स्ट को छवि में बदलें प्रदान करता है:

<img src="logo.jpg" alt="Jassif Team Logo">

⚠️चेतावनी: बिना उद्धरण के गुण

हमेशा उद्धरण चिह्नों में विशेषता मान संलग्न करें:

<!-- ठीक है --> <a href='page.html'>लिंक</a> <!-- ग़लत --> <a href=page.html>लिंक</a>

3HTML हेडर

HTML क्षैतिज नियम

<hr> टैग एक क्षैतिज नियम बनाता है:

उदाहरण

<h1>शीर्षक 1</h1> <घंटा> <p>कुछ पाठ</p>

HTML Head

<head> भाग में दस्तावेज़ के बारे में शीर्ष जानकारी होती है:

उदाहरण

<सिर> <शीर्षक>मेरा वेब पेज</शीर्षक> <मेटा चारसेट='यूटीएफ-8'> <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1.0"> <शैली> बॉडी { पृष्ठभूमि-रंग: हल्का नीला; } </शैली> </head>

4HTML कॉलम

कर का अंतराल

<br> टैग एक लाइन ब्रेक बनाता है:

उदाहरण

<p>यह पहली पंक्ति है।<br> यह दूसरी पंक्ति है.<br> यह तीसरी पंक्ति है.</p>

प्री टैग

<pre> टैग पूर्व-स्वरूपित पाठ प्रदर्शित करता है:

उदाहरण

<पूर्व> पंक्ति 1 पंक्ति 2 इंडेंटेड लाइन पंक्ति 3 </पूर्व>

5HTML शैलियाँ

बाद में पैटर्न का रंग

<body style="background-color: lightblue;">
</body>

पाठ का रंग

<पी शैली='रंग: लाल;'> लाल पाठ </p>

पाठ संरेखण

<पी शैली = "टेक्स्ट-एलाइन: सेंटर;"> केंद्र-संरेखित पाठ </p>

💡संकेत: शैलियों का महत्व

सीएसएस शैलियाँ निम्नलिखित क्रम में कार्यान्वित की जाती हैं:

  1. इनलाइन शैलियाँ (बहुत उच्च महत्व)
  2. आंतरिक शैलियाँ (<शैली> टैग)
  3. बाहरी शैली फ़ाइलें (कम से कम महत्वपूर्ण)

6HTML पाठ स्वरूपण

उदाहरण: सभी फ़ॉर्मेटिंग टैग

<b>बोल्ड टेक्स्ट</b> <strong>महत्वपूर्ण पाठ</strong> <i>इटैलिक टेक्स्ट</i> <em>जोरदार पाठ</em> <छोटा>संक्षिप्त पाठ</छोटा> <चिह्न>चिह्नित पाठ</चिह्न> <डेल>हटाया गया टेक्स्ट</डेल> <ins>पाठ जोड़ा गया</ins> H<sub>2</sub>O (सबस्क्रिप्ट) x<sup>2</sup> (सुपरस्क्रिप्ट)

7HTML उद्धरण और उद्धरण नोट्स

एक संक्षिप्त उद्धरण

<q>संक्षिप्त उद्धरण</q>

वॉल्यूम उद्धरण

<ब्लॉककोट> एक लम्बा उद्धरण </ब्लॉककोट>

संक्षेपाक्षर

<abbr title="Hyper Text Markup Language">
HTML
</abbr>

8HTML टिप्पणियाँ

उदाहरण: विभिन्न प्रकार की प्रतिक्रिया

<!-- आकस्मिक टिप्पणी --> <p>प्रदर्शित किया जाने वाला पाठ</p> <!-- एकाधिक पंक्तियाँ टिप्पणी करें --> <!-- अक्षम कोड: <p>यह अनुच्छेद प्रदर्शित नहीं किया जाएगा</p> -->

9 HTML CSS

इनलाइन सीएसएस

<p style=”रंग: नीला; फ़ॉन्ट-आकार: 16px;”> इनलाइन शैली </p>

आंतरिक सीएसएस

<style>
    body {
        background-color: lightgray;
    }
    h1 {
        color: navy;
    }
</style>

बाहरी सीएसएस

<link rel="stylesheet" href="styles.css">

10HTML लिंक

पूर्ण यूआरएल

<a href='https://jassifteam.com'> बाहरी लिंक </a>

आश्रित यूआरएल

<a href='about.html'> आंतरिक लिंक </a>

वेब टेब में खोलें

<a href='page.html' target='_blank'> नए टैब में खोलें </a>

11HTML छवियां

मूल छवि

<img src="photo.jpg" alt="व्याख्या">

आयाम सहित छवि

<img src="photo.jpg" alt="व्याख्या" width="300" height="200">

सीएसएस के साथ छवि का आकार

<img src="photo.jpg" alt="व्याख्या" style="width:300px;height:200px;">

12एचटीएमएल टेबल

उदाहरण: मूल तालिका

<तालिका सीमा='1'> <tr> <th>नाम</th> <th>उम्र</th> </tr> <tr> <td>रमन</td> <td>25</td> </tr> </तालिका>

13HTML सूचियाँ

एक अव्यवस्थित सूची

<ul><li> <li>कॉफ़ी</li> <li>चाय</li> </ul>

एक क्रमबद्ध सूची

<ol> <li>प्रथम</li> <li>दूसरा</li> </ol>

14HTML ब्लॉक और इनलाइन तत्व

उदाहरण

<!-- ब्लॉक तत्व --> <div>यह एक ब्लॉक है</div> <!-- इनलाइन तत्व --> <p>यह <span>इनलाइन</span> तत्व</p> है

15HTML Div तत्व

उदाहरण: डिव संरचना

<div शैली = "पृष्ठभूमि: हल्का नीला; पैडिंग: 20px;"> <h2>शीर्षक</h2> <p>कुछ पाठ</p> </div>

16HTML कक्षाएं

उदाहरण

<div class='कंटेनर'> <p class='text-red'>लाल टेक्स्ट</p> <p class='text-blue'>नीला टेक्स्ट</p> </div>

17 HTML Id

उदाहरण

<div आईडी='हेडर'> होम पेज </div> <div आईडी='सामग्री'> सामग्री भाग </div>

18 HTML Layout

उदाहरण: मूल लेआउट

<div id='header'>होम</div> <div id='nav'>नेविगेशन</div> <div id='content'>सामग्री</div> <div id='footer'>Addicnote</div>

19 HTML IFrame

उदाहरण

<iframe src="https://jassifteam.com" 
        width="500" height="300">
</iframe>

20 HTML Head Elements

उदाहरण: निरपेक्ष सिर

<सिर> <शीर्षक>पृष्ठ शीर्षक</शीर्षक> <मेटा चारसेट='यूटीएफ-8'> <मेटा नाम = "विवरण" सामग्री = "विवरण"> <मेटा नाम='कीवर्ड' सामग्री='एचटीएमएल, सीएसएस'> <मेटा नाम = "व्यूपोर्ट" सामग्री = "चौड़ाई = डिवाइस-चौड़ाई, प्रारंभिक-स्केल = 1.0"> <लिंक rel='स्टाइलशीट' href='styles.css'> <शैली>/*आंतरिक सीएसएस */</शैली> </head>

21 HTML Scripts

JavaScript जोड़ना

<स्क्रिप्ट> चेतावनी('हैलो!'); </स्क्रिप्ट>

बाहरी जावास्क्रिप्ट

<script src="script.js"></script>

22 HTML Computercode Elements

उदाहरण

<कोड>कोड</कोड> <kbd>कीबोर्ड इनपुट</kbd> <samp>प्रोग्राम आउटपुट</samp> <var>चर</var>

23 HTML Forms

उदाहरण: मूल रूप

<फॉर्म एक्शन = "/ सबमिट" विधि = "पोस्ट"> <लेबल for='नाम'>नाम:</लेबल> <इनपुट प्रकार = "टेक्स्ट" आईडी = "नाम" नाम = "नाम"> <इनपुट प्रकार = "सबमिट करें" मान = "सबमिट करें"> </रूप>

24 HTML Form Elements

पाठ्य से भरा

<input type="text" name="username">

पासवर्ड

<input type="password" name="password">

चयन पट्टी

<नाम चुनें='शहर'> <option value="chn">चेन्नई</option> <option value='mdu'>मदुरै</option> </चयन करें>

25 HTML Input Types

सामान्य इनपुट प्रकार

<input type="text">
<input type="password">
<input type="email">
<input type="number">
<input type="date">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="submit">
<input type="button">

26 HTML Input Attributes

placeholder

<इनपुट प्रकार='पाठ' प्लेसहोल्डर = "अपना नाम दर्ज करें">

required

<input type="text" name="email" required>

readonly

<इनपुट प्रकार = "पाठ" मान = "बदलना अध्याय" केवल पढ़ने के लिए>

27 HTML Canvas Graphics

उदाहरण: मूल कैनवास

<canvas id="myCanvas" width="200" height="100">
</canvas>

<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 150, 75);
</script>

28 HTML SVG Graphics

घेरा

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" 
            fill="red"/>
</svg>

आयत

<svg width="200" height="100">
    <rect width="150" height="80" 
          fill="blue"/>
</svg>

29 HTML Media

वीडियो

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

ध्वनि

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

30 HTML Geolocation

उदाहरण: स्थान प्राप्त करने के लिए

<बटन ऑनक्लिक='getLocation()'> स्थान प्राप्त करें </बटन> <स्क्रिप्ट> फ़ंक्शन getLocation() { यदि (नेविगेटर.जियोलोकेशन) { नेविगेटर.जियोलोकेशन.getCurrentPosition(शोपोज़िशन); } } </स्क्रिप्ट>

31 HTML Local Storage

उदाहरण

<स्क्रिप्ट> // सहेजें localStorage.setItem('नाम', 'रमन'); // प्राप्त करें var नाम = localStorage.getItem("नाम"); // हटाएं localStorage.removeItem('नाम'); </स्क्रिप्ट>

32 HTML Media Examples

उदाहरण: यूट्यूब वीडियो

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID">
</iframe>

33 More HTML Examples

Drag and Drop

<div ड्रैगगेबल='सही'>खींचने योग्य</div>

Web Workers

<script>
var worker = new Worker("worker.js");
</script>

Progress Bar

<progress value="70" max="100"></progress>

❓अंतिम अभ्यास: HTML में स्थान की जानकारी प्राप्त करने के लिए किस API का उपयोग किया जाता है?

Storage API
✗ ग़लत! डेटा भंडारण के लिए स्टोरेज एपीआई
Geolocation API
✓ ठीक है! स्थान की जानकारी प्राप्त करने के लिए जियोलोकेशन एपीआई का उपयोग किया जाता है