Online Computer Courses Classes and Training Program

HTML & Web Development: खुद से सीखें और बनाएं

Digital Dhanbad Research Institute - December 17, 2024

 

HTML & Web Development: खुद से सीखें और बनाएं

Updated Table of Contents

  1. Introduction to HTML

    • HTML का परिचय
    • HTML का महत्व
    • HTML की संरचना (Structure)

  2. HTML Tags and Elements

    • HTML Tags क्या होते हैं?
    • Basic Tags और उनका उपयोग
    • Self-closing Tags और Closing Tags

  3. Text, Links and Basic Formatting

    • Headings और Paragraphs
    • Hyperlinks (Anchor Tags)
    • Text Formatting (Bold, Italic, Underline, etc.)

  4. Images and Media

    • Images को कैसे जोड़ें
    • Videos और Audios को Embed करना
    • Best Practices

  5. HTML Lists and Tables

    • Unordered और Ordered Lists
    • Tables बनाना
    • Data Tables और Forms

  6. Forms in HTML

    • Form Elements और Attributes
    • Form Validation
    • Best Practices for Forms

  7. Semantic HTML

    • Semantic HTML का महत्व
    • HTML5 Tags जैसे <nav>, <article>, <header>, आदि

  8. HTML5 Features

    • HTML5 का Overview
    • New Tags और API Features
    • HTML5 Audio, Video और Canvas Elements

  9. Introduction to CSS (Cascading Style Sheets)

    • CSS क्या है?
    • Inline, Internal और External CSS
    • Best Practices for CSS Styling

  10. Responsive Web Design

    • HTML और CSS का Responsive Design के लिए इस्तेमाल
    • Media Queries का प्रयोग
    • Flexbox और Grid Layouts

  11. HTML with JavaScript Basics

    • JavaScript का HTML में Integration
    • Simple Interactive Features
    • Forms Validation Using JavaScript

  12. Quizzes and Exercises

    • Each Chapter's Quiz
    • Practical Coding Exercises
    • Project Ideas to Build

Example of Enhanced Chapter: Chapter 1 - Introduction to HTML

What is HTML?

HTML, यानी HyperText Markup Language, एक markup language है जिसका उपयोग वेब पेज बनाने के लिए किया जाता है। HTML वेब पेजों की संरचना और content को define करता है। HTML द्वारा हम content को headings, paragraphs, lists, links, images, etc. में organize कर सकते हैं।

Why HTML is Important?

HTML एक web developer के लिए सबसे पहली और सबसे जरूरी skill है। अगर आपको web development सीखना है, तो HTML सीखना बेहद जरूरी है। इसके बिना वेबसाइट्स बनाना संभव नहीं है।

Structure of an HTML Document

HTML डोक्युमेंट की संरचना बहुत सिंपल होती है और इसमें मुख्य रूप से तीन हिस्से होते हैं:

  1. <!DOCTYPE html>: यह declaration HTML5 का version बताता है।
  2. <html>: यह HTML document को wrap करता है।
  3. <head>: यहाँ meta information रहती है जैसे document का title, character set, और external CSS/JS links।
  4. <body>: यह वह हिस्सा है जिसमें वे सारे elements होते हैं जो यूज़र को दिखाई देते हैं (जैसे heading, paragraphs, images, etc.)।

Example:

<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Welcome to my Website</h1>
    <p>This is a simple paragraph explaining HTML basics.</p>
  </body>
</html>

Code Explanation:

  • <!DOCTYPE html>: HTML5 के version का indicator।
  • <html>: यह HTML document को शुरू करता है।
  • <head>: इसमें page का title सेट किया गया है।
  • <body>: यह वह भाग है जिसमें page content रखा जाता है।

Exercise:

  1. एक HTML page बनाएं जिसमें आपका नाम, पसंदीदा रंग और एक image हो।
  2. अपने page में <h1>, <p>, और <img> tags का उपयोग करें।


Example Code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Favorite Things</title>
</head>
<body>
    <h1>My Name is Ajay Kumar</h1>
    <p>My favorite color is Blue.</p>
    <img src="https://via.placeholder.com/300" alt="Favorite Image">
</body>
</html>

Explanation:

  1. <h1> Tag: आपके नाम को बड़े आकार में प्रदर्शित करता है।
  2. <p> Tag: आपके पसंदीदा रंग के बारे में एक पैराग्राफ में जानकारी देता है।
  3. <img> Tag: एक placeholder image को दिखाता है। आप इस URL को अपनी पसंदीदा इमेज के URL से बदल सकते हैं।



Chapter 2: HTML Tags and Elements

What are HTML Tags?

HTML tags वे special keywords होते हैं जो web page के content को structure करने में मदद करते हैं। इनका उपयोग ब्राउज़र को बताने के लिए किया जाता है कि हमें किस तरह का content दिखाना है, जैसे headings, paragraphs, images, आदि।

Basic HTML Tags

HTML में बहुत सारे tags होते हैं, लेकिन कुछ basic tags निम्नलिखित हैं:

  1. <h1> to <h6>: Headings के लिए tags। <h1> सबसे बड़ा heading होता है, और <h6> सबसे छोटा।
  2. <p>: Paragraphs को define करने के लिए।
  3. <a>: Hyperlinks के लिए, जो एक page को दूसरे page या website पर लिंक करता है।
  4. <img>: Images को web page में embed करने के लिए।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Tags Example</title>
  </head>
  <body>
    <h1>This is a Main Heading</h1>
    <h2>This is a Sub-heading</h2>
    <p>This is a paragraph explaining HTML tags.</p>
    <a href="https://www.example.com">Visit Example Website</a>
    <img src="image.jpg" alt="Example Image">
  </body>
</html>

Code Explanation:

  • <h1>: Page का main heading।
  • <p>: यह एक paragraph है।
  • <a>: यह एक hyperlink है जो एक अन्य वेबसाइट पर ले जाएगा।
  • <img>: यह image को दिखाता है।

Best Practices:

  1. Headings का उपयोग content को structure करने के लिए करें, ताकि page पढ़ने में आसान हो।
  2. Hyperlinks में descriptive text डालें, ताकि users को पता चले कि वे लिंक पर क्लिक करने पर कहां जाएंगे।

Exercise:

  1. एक HTML page बनाएं जिसमें <h1>, <h2>, <p>, और <a> tags का उपयोग किया गया हो।
  2. <a> tag को एक बाहरी website से लिंक करें।
  3. अपनी खुद की image को <img> tag से embed करें।

यहां एक HTML पेज का उदाहरण है जिसमें <h1>, <h2>, <p>, और <a> टैग्स का उपयोग किया गया है:

Example Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Tags Example</title>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <h2>About Me</h2>
    <p>Hello! My name is Ajay Kumar, and I am learning HTML. This is my first web page using basic HTML tags.</p>
    <p>For more information, visit <a href="https://www.example.com" target="_blank">this link</a>.</p>
</body>
</html>

Explanation:

  1. <h1> Tag: यह प्रमुख शीर्षक (main heading) है, जो पेज का शीर्षक प्रदर्शित करता है।
  2. <h2> Tag: यह एक उपशीर्षक (subheading) है, जो "About Me" के बारे में जानकारी देता है।
  3. <p> Tag: यह पैराग्राफ टैग है, जो परिचय या जानकारी देता है।
  4. <a> Tag: यह एक लिंक टैग है, जो उपयोगकर्ता को एक नई वेबसाइट पर ले जाने के लिए है। इसमें href एट्रिब्यूट है जो लिंक का URL दर्शाता है, और target="_blank" का उपयोग करके लिंक को नई टैब में खोलने का निर्देश दिया गया है।


Chapter 3: Text, Links, and Basic Formatting

Text Formatting in HTML

HTML में text को format करने के लिए कई tags होते हैं:

  1. <b>: Text को bold करने के लिए।
  2. <i>: Text को italic करने के लिए।
  3. <u>: Text को underline करने के लिए।
  4. <strong>: Important text को highlight करने के लिए।
  5. <em>: Text में emphasis (importance) डालने के लिए।

Creating Links in HTML

Hyperlinks, जिसे anchor tags भी कहा जाता है, web page पर किसी अन्य page या external website का लिंक जोड़ने के लिए उपयोग होते हैं।

  1. <a> tag: Hyperlink बनाने के लिए।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Text and Links Example</title>
  </head>
  <body>
    <h1>HTML Text Formatting</h1>
    <p><b>This is bold text</b></p>
    <p><i>This is italic text</i></p>
    <p><u>This is underlined text</u></p>
    <p><strong>This is important text</strong></p>
    <p><em>This is emphasized text</em></p>
    <a href="https://www.google.com">Visit Google</a>
  </body>
</html>

Code Explanation:

  • <b>: Bold text को format करने के लिए।
  • <i>: Italic text के लिए।
  • <u>: Underlined text के लिए।
  • <a>: Google का link embed करने के लिए।

Exercise:

  1. एक page बनाएं जिसमें सभी formatting tags (bold, italic, underline, strong, और emphasis) का प्रयोग किया गया हो।
  2. एक paragraph लिखें जिसमें <a> tag का उपयोग करके external website link किया गया हो।

Chapter 4: Images and Media

Adding Images to HTML

Images को HTML page में जोड़ने के लिए <img> tag का उपयोग किया जाता है। इसके दो मुख्य attributes होते हैं:

  • src: Image का source (path या URL)।
  • alt: Image का alternate text (जो image न दिखने पर दिखाई देता है)।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Images Example</title>
  </head>
  <body>
    <h1>Adding Images in HTML</h1>
    <img src="image.jpg" alt="Example Image" width="500" height="600">
  </body>
</html>

Code Explanation:

  • src: Image का file path या URL।
  • alt: Image का description, जो तब दिखता है जब image load न हो सके।

Best Practices:

  • Image के path को relative और short रखें।
  • alt attribute का उपयोग करें ताकि screen readers और SEO में मदद मिले।

Exercise:

  1. एक page बनाएं जिसमें एक या ज्यादा images हों, और उनके alt attributes का सही उपयोग करें।
  2. Images को different sizes में show करें।



Chapter 5: HTML Lists and Tables

HTML Lists

HTML में lists का उपयोग data को organize और structure करने के लिए किया जाता है। HTML में मुख्य रूप से तीन प्रकार की lists होती हैं:

  1. Unordered List (<ul>): यह एक unordered (bulleted) list होती है। इसमें list items (li) किसी specific order में नहीं होते हैं, बस bulleted होते हैं।
  2. Ordered List (<ol>): यह एक ordered (numbered) list होती है, जिसमें items को क्रमबद्ध (sequential) तरीके से दर्शाया जाता है।
  3. Definition List (<dl>): यह list का उपयोग term और उनके descriptions को display करने के लिए किया जाता है। इसमें <dt> tag term को represent करता है और <dd> tag उस term का description देता है।

1. Unordered List (<ul>)

Unordered list में list items को unordered रूप से (bullets के साथ) दिखाया जाता है। इसका उपयोग तब करते हैं जब items का sequence कोई मायने नहीं रखता।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Unordered List Example</title>
  </head>
  <body>
    <h1>My Favorite Fruits</h1>
    <ul>
      <li>Apple</li>
      <li>Banana</li>
      <li>Orange</li>
    </ul>
  </body>
</html>

Code Explanation:

  • <ul>: Unordered list को define करता है।
  • <li>: List item को represent करता है।

2. Ordered List (<ol>)

Ordered list में items को numbering (1, 2, 3, आदि) के साथ दिखाया जाता है। इसका उपयोग तब करते हैं जब items का sequence या order महत्वपूर्ण होता है।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Ordered List Example</title>
  </head>
  <body>
    <h1>Steps to Make a Cup of Tea</h1>
    <ol>
      <li>Boil Water</li>
      <li>Add Tea Leaves</li>
      <li>Let it Steep</li>
      <li>Pour into a Cup</li>
      <li>Add Sugar or Milk (Optional)</li>
    </ol>
  </body>
</html>

Code Explanation:

  • <ol>: Ordered list को define करता है।
  • <li>: List item को represent करता है और order के साथ प्रदर्शित होता है।

3. Definition List (<dl>)

Definition list का उपयोग term और उसके descriptions को display करने के लिए किया जाता है। इसमें <dt> (definition term) और <dd> (definition description) tags होते हैं।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Definition List Example</title>
  </head>
  <body>
    <h1>Programming Languages</h1>
    <dl>
      <dt>HTML</dt>
      <dd>HTML is a markup language used for structuring web pages.</dd>
      <dt>CSS</dt>
      <dd>CSS is used for styling HTML elements on web pages.</dd>
      <dt>JavaScript</dt>
      <dd>JavaScript is a programming language used for adding interactivity to web pages.</dd>
    </dl>
  </body>
</html>

Code Explanation:

  • <dl>: Definition list को define करता है।
  • <dt>: Term को define करता है।
  • <dd>: Term के description को define करता है।

HTML Tables

HTML tables का उपयोग data को rows और columns में organize करने के लिए किया जाता है। एक basic table में निम्नलिखित elements होते हैं:

  • <table>: Table को define करता है।
  • <tr>: Table row को define करता है।
  • <th>: Table header cell को define करता है, जो bold और centered होते हैं।
  • <td>: Table data cell को define करता है, जो normal content होता है।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Table Example</title>
  </head>
  <body>
    <h1>Student Information</h1>
    <table border="1">
      <tr>
        <th>Roll No.</th>
        <th>Name</th>
        <th>Age</th>
      </tr>
      <tr>
        <td>1</td>
        <td>Amit Kumar</td>
        <td>15</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Ravi Sharma</td>
        <td>16</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Priya Rani</td>
        <td>14</td>
      </tr>
    </table>
  </body>
</html>

Code Explanation:

  • <table>: Table को define करता है।
  • <tr>: Table की rows को define करता है।
  • <th>: Table header cells को define करता है, जो header row में होते हैं।
  • <td>: Table data cells को define करता है।

Best Practices for Lists and Tables

  1. Lists को simple और readable रखें, ज्यादा items से बचें।
  2. Tables में data को सही तरीके से organize करें ताकि उसे पढ़ना आसान हो।
  3. Table में border और padding का सही उपयोग करें ताकि data clear और neat दिखाई दे।

Exercise:

  1. एक unordered list बनाए जिसमें आपकी पसंदीदा किताबें या movies हों।
  2. एक ordered list बनाए जिसमें किसी प्रक्रिया के steps (जैसे breakfast बनाने के steps) हों।
  3. एक table बनाए जिसमें student के नाम, रोल नंबर, और उम्र हो।

Conclusion:

HTML में lists और tables का उपयोग वेब पेजों पर data को organize करने और structure देने के लिए किया जाता है। Unordered और ordered lists को simple डेटा display करने के लिए उपयोग किया जाता है, जबकि tables का उपयोग ज्यादा structured डेटा को दर्शाने के लिए किया जाता है। इन दोनों का उपयोग सही तरीके से करना वेब पेज की usability को बढ़ाता है।



Chapter 6: HTML Forms and Input Elements

What are HTML Forms?

HTML Forms का उपयोग वेबसाइट पर user से data collect करने के लिए किया जाता है। जैसे, login forms, registration forms, feedback forms, आदि। Forms में input elements होते हैं, जिनकी मदद से user data भर सकता है और फिर submit कर सकता है।

Form elements में fields होते हैं जहां user text, numbers, dates आदि डाल सकता है। HTML form को submit करने के लिए <form> tag का इस्तेमाल किया जाता है।

Basic Form Structure

Form का basic structure इस प्रकार होता है:

  1. <form>: Form को define करता है।
  2. <input>: User से data लेने के लिए input fields को define करता है।
  3. <textarea>: Multi-line text input के लिए उपयोग होता है।
  4. <select>: Dropdown menu बनाता है।
  5. <button>: Form को submit करने के लिए button बनाता है।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Form Example</title>
  </head>
  <body>
    <h1>Registration Form</h1>
    <form action="/submit_form" method="POST">
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" required>
      <br><br>

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" required>
      <br><br>

      <label for="password">Password:</label>
      <input type="password" id="password" name="password" required>
      <br><br>

      <label for="gender">Gender:</label>
      <input type="radio" id="male" name="gender" value="male" required> Male
      <input type="radio" id="female" name="gender" value="female" required> Female
      <br><br>

      <label for="country">Country:</label>
      <select id="country" name="country">
        <option value="india">India</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
      </select>
      <br><br>

      <label for="message">Message:</label>
      <textarea id="message" name="message" rows="4" cols="50"></textarea>
      <br><br>

      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Code Explanation:

  • <form>: Form element को define करता है, जिसमें action (data भेजने का URL) और method (data भेजने का तरीका) attributes होते हैं।
  • <input>: Text, password, radio button, आदि के लिए input fields को define करता है।
  • <textarea>: Multi-line text input के लिए उपयोग किया जाता है।
  • <select>: Dropdown menu बनाने के लिए।
  • <button>: Form को submit करने के लिए button होता है।

Types of Input Fields

  1. Text Field: <input type="text"> – Single-line text input field, जैसे name, address, आदि।
  2. Password Field: <input type="password"> – Password को hide करने के लिए उपयोग होता है।
  3. Radio Button: <input type="radio"> – एक group में से एक option select करने के लिए।
  4. Checkbox: <input type="checkbox"> – Multiple options में से कई options select करने के लिए।
  5. Submit Button: <button type="submit"> – Form को submit करने के लिए।

Code Example: Radio Buttons and Checkbox

<!DOCTYPE html>
<html>
  <head>
    <title>Radio and Checkbox Example</title>
  </head>
  <body>
    <h1>Choose Your Preferences</h1>
    <form>
      <label for="newsletter">Subscribe to Newsletter:</label>
      <input type="checkbox" id="newsletter" name="newsletter" value="yes">
      <br><br>

      <label for="payment">Payment Method:</label>
      <input type="radio" id="credit" name="payment" value="credit"> Credit Card
      <input type="radio" id="debit" name="payment" value="debit"> Debit Card
      <input type="radio" id="paypal" name="payment" value="paypal"> PayPal
      <br><br>

      <button type="submit">Submit</button>
    </form>
  </body>
</html>

Code Explanation:

  • <input type="checkbox">: Multiple options को select करने के लिए checkbox।
  • <input type="radio">: एक group में से केवल एक option को select करने के लिए radio buttons।

Form Attributes

  1. action: Form data को भेजने का destination URL।
  2. method: Form data भेजने का तरीका, आमतौर पर GET या POST।
  3. name: Input field का name, जो form data के नाम के रूप में भेजा जाता है।
  4. required: Field को mandatory बनाने के लिए।

Best Practices for Forms

  1. Form में input fields को सही तरीके से label करें ताकि user को समझ में आए कि कौन सा data input करना है।
  2. Forms को mobile-friendly और responsive रखें, ताकि वो सभी devices पर ठीक से काम करें।
  3. Error messages या validation features को include करें ताकि user को गलत input देने पर सहायता मिले।

Exercise:

  1. एक form बनाएं जिसमें name, email, और phone number fields हों। इसमें एक radio button for gender और checkbox for newsletter subscription हो।
  2. Form का action set करें ताकि data किसी URL पर भेजा जा सके।
  3. Form के लिए validation लगाएं, जैसे कि email field empty न हो।

Conclusion:

HTML forms वेबसाइट के लिए बहुत जरूरी होते हैं क्योंकि इनके माध्यम से user से data लिया जा सकता है। Forms में विभिन्न input elements होते हैं जो data input करने के लिए उपयोग होते हैं, जैसे text fields, radio buttons, checkboxes, और submit buttons। इनका सही उपयोग वेबसाइट के user experience को बेहतर बनाता है और data collection प्रक्रिया को आसान बनाता है।


Chapter 7: HTML Links and Images

HTML Links (Hyperlinks)

HTML में links का उपयोग एक पेज को दूसरे पेज से जोड़ने के लिए किया जाता है। Links किसी भी webpage, website, या file को एक दूसरे से जोड़ने के लिए सबसे महत्वपूर्ण tool होते हैं। इन्हें anchor tags (<a>) द्वारा define किया जाता है।

HTML links में निम्नलिखित attributes होते हैं:

  • href: यह attribute URL (Uniform Resource Locator) को specify करता है, यानी उस पेज या resource का address जिसे link किया जाता है।
  • target: यह attribute specify करता है कि link क्लिक करने पर new tab में खुलेगा या वही पेज खुलेगा।

1. Basic Link Example

HTML link को बनाने के लिए anchor tag (<a>) का इस्तेमाल किया जाता है और इसके अंदर href attribute होता है।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Link Example</title>
  </head>
  <body>
    <h1>My Favorite Website</h1>
    <p>Click on the link below to visit my favorite website:</p>
    <a href="https://www.example.com" target="_blank">Visit Example</a>
  </body>
</html>

Code Explanation:

  • <a>: Link को define करता है।
  • href: Link का URL या destination page को define करता है।
  • target="_blank": Link को new tab में open करने के लिए।

2. Link to an Email Address

Links का उपयोग email addresses को भी hyperlink करने के लिए किया जा सकता है, जिससे user सीधे email client में जा सकता है।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Email Link Example</title>
  </head>
  <body>
    <h1>Contact Me</h1>
    <p>If you want to reach me, click below to send an email:</p>
    <a href="mailto:someone@example.com">Send Email</a>
  </body>
</html>

Code Explanation:

  • mailto:: Email client को open करने के लिए used होता है।

3. Link to a Specific Section in a Page

HTML में आप एक ही पेज के अंदर links के माध्यम से एक specific section पर जा सकते हैं, जिसे anchor link कहा जाता है। इसके लिए आपको destination section के लिए ID attribute का उपयोग करना होता है।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Anchor Link Example</title>
  </head>
  <body>
    <h1>My Website</h1>
    <p>Click the link to go to the "About" section:</p>
    <a href="#about">Go to About</a>
    <br><br>
    <h2 id="about">About Us</h2>
    <p>This is the about section of the website.</p>
  </body>
</html>

Code Explanation:

  • href="#about": Link को उसी पेज के id="about" वाले section पर ले जाता है।

HTML Images

HTML में images को embed करने के लिए <img> tag का उपयोग किया जाता है। इसके कुछ महत्वपूर्ण attributes होते हैं:

  • src: यह attribute image का path (URL) या file location specify करता है।
  • alt: यह attribute image का alternate text provide करता है, जो image नहीं दिखने पर display होता है।
  • width और height: इन attributes का उपयोग image की size को control करने के लिए किया जाता है।

1. Basic Image Example

HTML में image insert करने के लिए <img> tag का उपयोग किया जाता है, और इसके साथ src और alt attributes होते हैं।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Image Example</title>
  </head>
  <body>
    <h1>My Favorite Animal</h1>
    <img src="https://www.example.com/animal.jpg" alt="A cute animal" width="300" height="200">
  </body>
</html>

Code Explanation:

  • <img>: Image को define करता है।
  • src="https://www.example.com/animal.jpg": Image का URL, जहां से image को load किया जाएगा।
  • alt="A cute animal": Image का description या alternate text।
  • width="300" और height="200": Image के dimensions (size) को specify करता है।

2. Image as a Link

HTML में images को links के रूप में भी उपयोग किया जा सकता है। इसके लिए image को anchor tag (<a>) के अंदर रखा जाता है।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Image as Link Example</title>
  </head>
  <body>
    <h1>Click the Image to Visit Website</h1>
    <a href="https://www.example.com">
      <img src="https://www.example.com/logo.jpg" alt="Website Logo" width="200" height="100">
    </a>
  </body>
</html>

Code Explanation:

  • <a>: Anchor tag के अंदर image को रखा गया है ताकि image पर क्लिक करने से लिंक खुल सके।

3. Responsive Images

Images को responsive बनाने के लिए CSS का उपयोग किया जाता है ताकि वे विभिन्न screen sizes पर सही तरीके से display हों। इसके लिए width="100%" का इस्तेमाल किया जाता है।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive Image Example</title>
  </head>
  <body>
    <h1>Responsive Image</h1>
    <img src="https://www.example.com/image.jpg" alt="Responsive Image" style="width:100%; height:auto;">
  </body>
</html>

Code Explanation:

  • style="width:100%; height:auto;": Image को responsive बनाने के लिए width को 100% और height को auto सेट किया गया है।

Best Practices for Links and Images

  1. Links:

    • Links के लिए descriptive text उपयोग करें, जिससे user को पता चले कि link पर क्लिक करने से क्या होगा।
    • Link का color अलग और prominent रखें ताकि users आसानी से पहचान सकें।
    • External links के लिए target="_blank" का उपयोग करें ताकि वह नया tab में खुले।

  2. Images:

    • Images को optimize करें ताकि वे fast load हों।
    • Alt text का हमेशा इस्तेमाल करें ताकि users को image का context समझ में आए।
    • Image को responsive बनाएं, ताकि वे mobile devices पर सही तरीके से दिखें।

Exercise:

  1. एक simple webpage बनाएं जिसमें तीन links हों: एक external link, एक email link और एक anchor link.
  2. एक webpage बनाएं जिसमें एक image हो, और उस image पर क्लिक करने पर कोई लिंक open हो।
  3. एक responsive image बनाए जिसमें width="100%" और height="auto" हो।

Conclusion:

HTML में links और images दोनों ही web pages को अधिक interactive और engaging बनाने के लिए आवश्यक होते हैं। Links का उपयोग विभिन्न पृष्ठों, websites, या email addresses से कनेक्ट करने के लिए किया जाता है, जबकि images वेबसाइट के visual appeal को बढ़ाती हैं। इन दोनों का सही और effective उपयोग website के user experience को बेहतर बनाता है।


Chapter 8: HTML Tables

Introduction to Tables in HTML

HTML में tables का उपयोग structured data को rows और columns के रूप में display करने के लिए किया जाता है। Tables का प्रयोग ज्यादातर डेटा जैसे कि lists, schedules, financial information, और statistics को बेहतर तरीके से दिखाने के लिए किया जाता है।

HTML में table को बनाने के लिए <table> tag का उपयोग किया जाता है। इसके अंदर कई tags होते हैं जो table के structure को define करते हैं:

  • <table>: यह tag पूरे table को wrap करता है।
  • <tr>: यह tag table row को define करता है।
  • <th>: यह tag table header cells को define करता है।
  • <td>: यह tag table data cells को define करता है।

1. Basic Table Structure

सबसे पहले, हम एक basic table structure देखेंगे जिसमें rows और columns होंगे।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Basic Table Example</title>
  </head>
  <body>
    <h1>Student Information</h1>
    <table border="1">
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Grade</th>
      </tr>
      <tr>
        <td>Ajay</td>
        <td>16</td>
        <td>A</td>
      </tr>
      <tr>
        <td>Neha</td>
        <td>15</td>
        <td>B</td>
      </tr>
    </table>
  </body>
</html>

Code Explanation:

  • <table>: Table को define करता है।
  • <tr>: Row को define करता है।
  • <th>: Header cell को define करता है।
  • <td>: Data cell को define करता है।
  • border="1": Table के चारों ओर border display करने के लिए।

2. Adding a Table Border

Table में border को display करने के लिए हम border attribute का उपयोग कर सकते हैं। जैसा कि ऊपर example में दिखाया गया है, border="1" के द्वारा table को border दी गई है।

अगर आपको border की thickness को control करना है तो आप CSS का उपयोग कर सकते हैं।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Table Border Example</title>
    <style>
      table {
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid black;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Student Grades</h1>
    <table>
      <tr>
        <th>Name</th>
        <th>Math</th>
        <th>Science</th>
      </tr>
      <tr>
        <td>Ajay</td>
        <td>85</td>
        <td>90</td>
      </tr>
      <tr>
        <td>Neha</td>
        <td>78</td>
        <td>88</td>
      </tr>
    </table>
  </body>
</html>

Code Explanation:

  • border-collapse: collapse;: यह CSS rule table borders को collapse करता है ताकि borders के बीच extra space न हो।
  • padding: 10px;: Table cells के अंदर space (padding) add करता है।

3. Table with Column Span and Row Span

HTML tables में आप colspan और rowspan attributes का उपयोग कर सकते हैं ताकि एक cell को multiple columns या rows में फैलाया जा सके।

  • colspan: यह attribute एक cell को horizontal (column) direction में फैलाता है।
  • rowspan: यह attribute एक cell को vertical (row) direction में फैलाता है।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Table with colspan and rowspan</title>
  </head>
  <body>
    <h1>Product Sales</h1>
    <table border="1">
      <tr>
        <th>Product</th>
        <th>January</th>
        <th>February</th>
      </tr>
      <tr>
        <td rowspan="2">Laptop</td>
        <td>500</td>
        <td>600</td>
      </tr>
      <tr>
        <td>450</td>
        <td>550</td>
      </tr>
      <tr>
        <td colspan="2">Total</td>
        <td>2250</td>
      </tr>
    </table>
  </body>
</html>

Code Explanation:

  • rowspan="2": Laptop product के cell को दो rows में फैलाता है।
  • colspan="2": "Total" cell को दो columns में फैलाता है।

4. Styling Tables with CSS

HTML tables को visually attractive और readable बनाने के लिए आप CSS का उपयोग कर सकते हैं। CSS के माध्यम से आप table की colors, fonts, padding, और borders को customize कर सकते हैं।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Styled Table Example</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th {
        background-color: #4CAF50;
        color: white;
      }
      td, th {
        padding: 12px;
        text-align: center;
      }
      tr:nth-child(even) {
        background-color: #f2f2f2;
      }
    </style>
  </head>
  <body>
    <h1>Employee Records</h1>
    <table>
      <tr>
        <th>Employee Name</th>
        <th>Department</th>
        <th>Salary</th>
      </tr>
      <tr>
        <td>Ajay</td>
        <td>HR</td>
        <td>50000</td>
      </tr>
      <tr>
        <td>Neha</td>
        <td>Finance</td>
        <td>60000</td>
      </tr>
      <tr>
        <td>Amit</td>
        <td>Marketing</td>
        <td>55000</td>
      </tr>
    </table>
  </body>
</html>

Code Explanation:

  • nth-child(even): Even-numbered rows को एक अलग background color देता है, जिससे table को पढ़ने में आसानी होती है।
  • background-color: #4CAF50;: Header rows को एक attractive color देता है।

5. Responsive Tables

Responsive tables को विभिन्न screen sizes पर बेहतर display करने के लिए CSS का उपयोग किया जाता है। इसके लिए, हम table की width को percentage-based रखते हैं और overflow को manage करते हैं।

Code Example:

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive Table Example</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th, td {
        padding: 12px;
        text-align: left;
        border: 1px solid black;
      }
      @media screen and (max-width: 600px) {
        table {
          width: 100%;
          border: 0;
        }
        th, td {
          display: block;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <h1>Product Prices</h1>
    <table>
      <tr>
        <th>Product</th>
        <th>Price</th>
        <th>Availability</th>
      </tr>
      <tr>
        <td>Laptop</td>
        <td>$1000</td>
        <td>In Stock</td>
      </tr>
      <tr>
        <td>Smartphone</td>
        <td>$500</td>
        <td>Out of Stock</td>
      </tr>
    </table>
  </body>
</html>

Code Explanation:

  • @media screen and (max-width: 600px): यह media query mobile devices या small screen sizes के लिए styles को adjust करती है, ताकि table items vertically display हों और स्क्रीन पर सही तरीके से fit हो जाएं।

Best Practices for Tables

  1. Keep It Simple: Table का design simple रखें, ताकि data clearly दिखाई दे।
  2. Proper Use of Headers: Table headers (using <th>) का सही तरीके से उपयोग करें ताकि data को समझने में आसानी हो।
  3. Make It Responsive: Tables को responsive बनाएं ताकि वे mobile devices पर भी अच्छे से दिखें।
  4. Use CSS for Styling: Table को visually attractive बनाने के लिए CSS का इस्तेमाल करें।
  5. Avoid Large Tables: बहुत बड़ी tables से बचें, क्योंकि वे page को cluttered बना सकती हैं।

Exercise:

  1. एक table बनाएं जिसमें पाँच students की information हो: Name, Age, Grade, और City.
  2. एक table बनाएं जिसमें products की जानकारी हो: Product Name, Price, और Availability.
  3. एक responsive table बनाएं जो mobile screen पर अच्छे से fit हो।

Conclusion:

HTML tables का उपयोग data को structure और organize करने के लिए किया जाता है। Tables का सही और effective उपयोग वेबसाइट को organized और user-friendly बनाता है। Tables में CSS का उपयोग करने से उनका appearance और usability बढ़ जाती है, जिससे user experience बेहतर होता है।



Chapter 10: Semantic HTML

Introduction to Semantic HTML

Semantic HTML, एक प्रकार का HTML है, जिसमें tags को उनकी वास्तविक भूमिका और अर्थ के अनुसार उपयोग किया जाता है। यह वेबसाइट को और अधिक accessible, SEO-friendly और maintainable बनाता है। Semantic HTML से code का structure और meaning स्पष्ट होता है, जिससे developers और browsers को content को सही तरीके से समझने में मदद मिलती है।

Semantic tags को ऐसे HTML tags कहा जाता है जो content की meaning को define करते हैं, न कि केवल structure को। Traditional HTML tags जैसे <div> और <span> केवल visual layout के लिए उपयोग किए जाते थे, जबकि semantic tags का उपयोग content की भूमिका को अधिक clearly define करता है।

1. Why is Semantic HTML Important?

Semantic HTML के कई फायदे हैं:

  • SEO (Search Engine Optimization): Search engines को semantic tags को समझने में आसानी होती है, जिससे website की ranking improve होती है।
  • Accessibility: Screen readers और अन्य assistive technologies के लिए content को समझना आसान हो जाता है।
  • Code Readability and Maintainability: Semantic HTML code को पढ़ने और maintain करने में आसान होता है, क्योंकि tags का स्पष्ट meaning होता है।
  • Better Structure: Website के content को बेहतर तरीके से structure किया जा सकता है, जिससे developers को काम करने में आसानी होती है।

2. HTML5 Semantic Tags

HTML5 में कई नए semantic tags को introduce किया गया है, जो websites के structure को अधिक meaningful बनाते हैं।

  1. <header>: यह tag page या section का header define करता है। इसमें navigation links, logos, search bar आदि हो सकते हैं।

    Code Example:

    <header>
  <h1>Welcome to My Website</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#services">Services</a></li>
    </ul>
  </nav>
</header>

    Explanation:

    • <header>: Page का मुख्य header section होता है।
    • <nav>: Navigation links के लिए tag होता है, जो website के different sections के बीच movement allow करता है।

  2. <nav>: Navigation links के लिए tag है। यह यह बताता है कि इसमें navigation links होंगे, जिससे search engines और assistive technologies को content की importance का अंदाजा लगता है।

    Code Example:

    <nav>
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

  3. <article>: यह tag self-contained content को represent करता है, जो एक standalone piece हो, जैसे blog post, news article, या product description. यह website के content को specific section में define करता है।

    Code Example:

    <article>
  <h2>Latest Tech News</h2>
  <p>This is a blog post about the latest advancements in technology.</p>
</article>

  4. <section>: इस tag का उपयोग content के logical sections को divide करने के लिए किया जाता है। यह किसी particular topic, area, या content की एक unit हो सकती है।

    Code Example:

    <section>
  <h2>About Us</h2>
  <p>We are a tech company focused on innovation.</p>
</section>

  5. <footer>: यह tag page के bottom part को represent करता है। इसमें copyright information, social media links, और legal disclaimers हो सकते हैं।

    Code Example:

    <footer>
  <p>&copy; 2024 MyWebsite. All rights reserved.</p>
  <ul>
    <li><a href="#privacy">Privacy Policy</a></li>
    <li><a href="#terms">Terms of Service</a></li>
  </ul>
</footer>

  6. <aside>: यह tag content के उस हिस्से को define करता है जो main content से related तो होता है, लेकिन अलग होता है, जैसे sidebars, quotes, or advertisements.

    Code Example:

    <aside>
  <h3>Advertisement</h3>
  <p>Check out our latest product.</p>
</aside>

  7. <main>: यह tag page के primary content को define करता है। इस tag का use किसी page के मुख्य content को mark करने के लिए किया जाता है, जो एक page का central content होता है।

    Code Example:

    <main>
  <h2>Welcome to Our Blog</h2>
  <p>Here, we discuss various topics related to technology and programming.</p>
</main>

  8. <figure> और <figcaption>: <figure> tag का उपयोग images, illustrations, charts, आदि को define करने के लिए किया जाता है, जबकि <figcaption> tag का उपयोग figure के लिए caption देने के लिए किया जाता है।

    Code Example:

    <figure>
  <img src="tech_image.jpg" alt="Tech Innovations">
  <figcaption>Latest Tech Innovations</figcaption>
</figure>

3. Benefits of Using Semantic HTML

Semantic HTML का उपयोग करने से कई फायदे होते हैं:

  • Improved Accessibility: Semantic HTML website के content को assistive technologies, जैसे screen readers, के लिए अधिक accessible बनाता है।
  • SEO Benefits: Search engines semantic tags को better understand करते हैं, जिससे content का ranking improve होती है।
  • Maintainability: Semantic tags के उपयोग से code को maintain करना और समझना आसान हो जाता है, खासकर जब कोई दूसरे developer को code समझना हो।
  • Better Code Structure: Semantic tags का उपयोग content को logical structure देता है, जिससे readability और code organization बेहतर होती है।

4. Best Practices for Using Semantic HTML

  • Use Semantic Tags Appropriately: हमेशा सही semantic tags का उपयोग करें। जैसे <article> केवल content के independent section के लिए होता है, <section> content के logical divisions के लिए।
  • Avoid Overusing Non-semantic Tags: जैसे <div> और <span> को ज्यादा उपयोग करने से बचें जब तक आपको specific semantic tags की जरूरत न हो।
  • Keep Content Meaningful: Content को ऐसे structure करें कि semantic tags की मदद से उसका meaning सही तरीके से convey हो।

Conclusion

Semantic HTML का उपयोग websites को not only accessible और user-friendly बनाता है, बल्कि SEO और maintainability में भी सुधार लाता है। HTML5 में जो semantic tags दिए गए हैं, उनका सही तरीके से उपयोग करके आप अपने web pages को एक structured और meaningful रूप दे सकते हैं।



Chapter 11: HTML5 Features

1. HTML5 का Overview

HTML5, HTML का एक नया और महत्वपूर्ण संस्करण है, जिसे web development को modernize और simplify करने के उद्देश्य से design किया गया है। HTML5 ने web pages और applications के development में कई नए features और improvements को शामिल किया है, जो usability, multimedia, और responsiveness को enhance करते हैं। HTML5 को 2014 में W3C (World Wide Web Consortium) द्वारा officially finalize किया गया था और इसका प्रमुख लक्ष्य web applications को ज्यादा interactive और dynamic बनाना था।

HTML5 ने कई नए elements, attributes, और APIs (Application Programming Interfaces) को introduce किया है, जो web development को आसान और तेज बनाते हैं। इसके अलावा, HTML5 ने पुराने techniques, जैसे Flash, को replace किया और native browser support दिया multimedia content के लिए।

2. New Tags और API Features

HTML5 में कई नए tags और API features शामिल किए गए हैं, जो web page structure, media handling, और user interaction को बेहतर बनाते हैं। इनमें से कुछ प्रमुख features इस प्रकार हैं:

  1. New Structural Tags: HTML5 में कुछ नए structural tags को introduce किया गया है, जो content को logically structure करने में मदद करते हैं:

    • <header>: Page या section के header को define करता है।
    • <footer>: Page या section के footer को define करता है।
    • <article>: Independent, self-contained content को represent करता है।
    • <section>: Content के logical sections को divide करता है।
    • <nav>: Navigation links को group करता है।
    • <aside>: Main content से related, लेकिन अलग content को represent करता है (sidebars, advertisements आदि)।
    • <main>: Page के primary content को define करता है।
    • <figure> और <figcaption>: Images या illustrations के लिए caption जोड़ता है।

    Code Example:

    <header>
  <h1>My Website</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#services">Services</a></li>
    </ul>
  </nav>
</header>

  2. New Input Types: HTML5 ने input forms के लिए कई नए input types को introduce किया है, जो user experience को बेहतर बनाते हैं:

    • <input type="email">: Email input fields के लिए।
    • <input type="date">: Date input fields के लिए।
    • <input type="tel">: Telephone numbers के लिए।
    • <input type="range">: Slider input के लिए।
    • <input type="number">: Numbers के लिए input field।

    Code Example:

    <form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</form>

  3. APIs (Application Programming Interfaces): HTML5 में कुछ powerful APIs शामिल हैं जो web applications को और dynamic बनाते हैं:

    • Geolocation API: User के geographical location को track करने की सुविधा देता है।
    • Local Storage API: User data को browser के local storage में store करता है, जिससे data को save किया जा सकता है बिना server के interaction के।
    • Web Workers API: Background में scripts को run करने की सुविधा देता है, जिससे UI responsive रहता है।
    • Canvas API: Drawing graphics, animations और interactive content बनाने के लिए।

    Code Example (Geolocation API):

    <button onclick="getLocation()">Get Location</button>

<script>
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      alert("Geolocation is not supported by this browser.");
    }
  }

  function showPosition(position) {
    alert("Latitude: " + position.coords.latitude + 
    "\nLongitude: " + position.coords.longitude);
  }
</script>

3. HTML5 Audio, Video और Canvas Elements

HTML5 ने multimedia content को web pages पर natively handle करने के लिए कई new elements और features को introduce किया है। अब हमें media playback के लिए external plugins, जैसे Flash, की जरूरत नहीं पड़ती।

  1. HTML5 Audio: HTML5 का <audio> element audio files को directly web page पर play करने के लिए use किया जाता है। इससे हम audio files को easily embed कर सकते हैं बिना किसी external plugin के।

    Code Example (Audio):

    <audio controls>
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

    Explanation:

    • <audio>: Audio file को embed करने के लिए use किया जाता है।
    • controls: Play, pause, volume control जैसे options दिखाने के लिए use किया जाता है।
    • <source>: Audio source file को define करता है।

  2. HTML5 Video: HTML5 का <video> element video files को directly web page पर play करने के लिए use किया जाता है। इसमें भी audio की तरह controls attribute होता है जिससे user video को play, pause, और volume adjust कर सकते हैं।

    Code Example (Video):

    <video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

    Explanation:

    • <video>: Video file को embed करने के लिए use किया जाता है।
    • controls: Video के controls दिखाता है।
    • <source>: Video source file को define करता है।

  3. HTML5 Canvas: HTML5 का <canvas> element web pages पर dynamic graphics, drawings, और animations बनाने के लिए use किया जाता है। इसे JavaScript के साथ interact करके complex graphics और animations create किए जा सकते हैं।

    Code Example (Canvas):

    <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
  Your browser does not support the canvas element.
</canvas>

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

    Explanation:

    • <canvas>: Graphics और drawings create करने के लिए use किया जाता है।
    • getContext("2d"): Drawing context को define करता है।
    • fillRect(): Rectangle shape को draw करने के लिए use किया जाता है।

4. Benefits of HTML5 Features

  • No Need for Plugins: HTML5 features का उपयोग करके हमें external plugins जैसे Flash की आवश्यकता नहीं होती है।
  • Improved User Experience: HTML5 की multimedia capabilities, जैसे audio, video, और canvas, web applications और websites को ज्यादा interactive और engaging बनाती हैं।
  • Cross-Platform Compatibility: HTML5 का code सभी major browsers और devices पर work करता है, जिससे responsive websites बनाना आसान होता है।
  • Better Performance: HTML5 की native capabilities websites के performance को बेहतर बनाती हैं।

Conclusion

HTML5 ने web development को नया आकार दिया है और developers को कई powerful features दिए हैं। नए structural tags, multimedia support (audio, video), और advanced APIs (like Geolocation, Local Storage) web development को ज्यादा efficient और flexible बनाते हैं। इस chapter में HTML5 के कुछ प्रमुख features और उनके उपयोग के बारे में जाना, जो web pages को बेहतर बनाने में मदद करते हैं।


Chapter 12: Introduction to CSS (Cascading Style Sheets)

1. CSS क्या है?

CSS (Cascading Style Sheets) एक stylesheet language है, जो HTML और XML documents के लिए styling (presentation) को define करती है। इसका मुख्य उद्देश्य web pages के layout, color, fonts, और overall appearance को control करना है। CSS का उपयोग करके आप web pages को visually appealing बना सकते हैं और उन pages का look और feel बदल सकते हैं।

HTML केवल content को structure करता है, जबकि CSS उस content को display करने के तरीके को define करता है। CSS एक separation of concerns की तरह काम करता है, जिसमें content (HTML) और presentation (CSS) अलग होते हैं, जिससे web development अधिक organized और maintainable हो जाता है।

Benefits of CSS:

  • Consistency: एक ही CSS file को multiple pages में link करके सभी pages का appearance consistent रखा जा सकता है।
  • Flexibility: CSS web pages को different screen sizes और devices पर अच्छी तरह से display करने के लिए responsive designs create करने की सुविधा देती है।
  • Improved Load Times: Stylesheet को external file के रूप में रखना pages की loading speed को improve करता है क्योंकि browser एक बार file को load करता है और फिर उसे reuse करता है।

2. Inline, Internal और External CSS

CSS को तीन तरीके से apply किया जा सकता है:

  1. Inline CSS: Inline CSS का उपयोग individual HTML elements के अंदर directly styles को define करने के लिए किया जाता है। इसे style attribute के द्वारा किया जाता है। यह method छोटे styling changes के लिए उपयुक्त होती है, लेकिन बड़े projects में इसे avoid करना चाहिए।

    Code Example (Inline CSS):

    <p style="color: blue; font-size: 18px;">यह एक पारा है</p>

    Explanation:

    • style="color: blue; font-size: 18px;" attribute को HTML element के अंदर direct apply किया गया है।

  2. Internal CSS: Internal CSS का उपयोग एक single HTML document में styles को define करने के लिए किया जाता है। यह CSS rules <style> tag के अंदर document के <head> section में होते हैं। Internal CSS का उपयोग तब किया जाता है जब styles को एक ही page पर लागू करना हो, और इसे inline CSS से अधिक organized माना जाता है।

    Code Example (Internal CSS):

    <html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>यह एक पारा है</p>
</body>
</html>

    Explanation:

    • CSS को <style> tag के अंदर रखा गया है, जो <head> section में होता है। इसका प्रभाव entire document में उन HTML elements पर पड़ता है जिनका selector style के साथ match करता है।

  3. External CSS: External CSS सबसे अच्छा और scalable तरीका है styling को apply करने का, खासकर बड़े projects में। इसमें CSS code को एक separate file में रखा जाता है और HTML document के साथ link किया जाता है। External CSS का सबसे बड़ा फायदा यह है कि एक बार CSS file को define करने के बाद, इसे कई HTML pages में reuse किया जा सकता है, जिससे code duplication कम होता है।

    Code Example (External CSS):

    <link rel="stylesheet" type="text/css" href="style.css">
<p>यह एक पारा है</p>

    Explanation:

    • <link> tag का उपयोग HTML document में external CSS file को link करने के लिए किया जाता है। इस file में defined styles सभी linked HTML pages पर apply होंगे।

    Code Example (External CSS file style.css):

    p {
  color: blue;
  font-size: 18px;
}

    Advantages of External CSS:

    • Code reuse: CSS file को multiple HTML pages में link किया जा सकता है।
    • Faster loading: ब्राउज़र CSS file को cache करता है, जिससे loading speed बेहतर होती है।

3. Best Practices for CSS Styling

CSS के efficient use के लिए कुछ best practices को follow करना जरूरी है। यह practices web pages को more readable, maintainable, और optimized बनाती हैं।

  1. CSS Naming Conventions:

    • Use meaningful names: CSS classes और IDs के names meaningful और descriptive होने चाहिए। जैसे कि .header, .main-content, .footer आदि।
    • Use BEM (Block Element Modifier): BEM naming convention का use करने से CSS classes का structure organized रहता है और maintain करना आसान हो जाता है। Example: .button--primary, .nav__item.

    Code Example:

    .button--primary {
  background-color: blue;
  color: white;
}

  2. Minimize Inline Styles: Inline styles को avoid करें, क्योंकि ये maintainability को मुश्किल बनाते हैं। Internal या external CSS का उपयोग करना ज्यादा organized और scalable होता है।

  3. Use External CSS for Reusability: जब भी संभव हो, external CSS file का use करें। यह आपके HTML document को साफ और organized बनाए रखने में मदद करता है, और एक बार बनाए गए styles को कई pages में apply किया जा सकता है।

  4. Avoid Overuse of IDs in CSS: IDs बहुत specific होते हैं और इन्हें classes से ज्यादा use करने से style overrides की समस्या हो सकती है। Classes को prefer करें क्योंकि यह reusability को बढ़ाती है।

  5. Use Shorthand CSS Properties: CSS में कई shorthand properties उपलब्ध हैं, जिन्हें use करने से code compact और readable बनता है। जैसे:

    • Margin and Padding: 
      margin: 10px 20px 30px 40px; /* Top Right Bottom Left */
    • Font Property: 
      font: italic small-caps bold 16px/30px "Arial", sans-serif;

  6. Use Comments in CSS: CSS code में comments डालने से दूसरों को या future में आपको code को समझने में आसानी होती है। यह debugging और modifications के समय helpful होता है।

    Code Example (CSS Comments):

    /* This is a comment explaining the background color */
body {
  background-color: #f0f0f0;
}

  7. Responsive Design (Media Queries): CSS में media queries का use करके आप web page को different screen sizes के हिसाब से adjust कर सकते हैं, जिससे वह सभी devices पर सही तरीके से display होता है।

    Code Example (Media Queries):

    @media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

    Explanation:

    • @media rule का use करके हम page का look and feel adjust कर सकते हैं। यह specific conditions (जैसे viewport width) के आधार पर style apply करता है।

Conclusion

CSS (Cascading Style Sheets) web pages के appearance को control करने के लिए बहुत ही महत्वपूर्ण tool है। Inline, internal, और external CSS के माध्यम से हम अपने HTML documents को styling दे सकते हैं, और best practices follow करके हम efficient और maintainable CSS code लिख सकते हैं। Next chapter में हम CSS Box Model के बारे में सीखेंगे, जो web page elements के layout को manage करने में मदद करता है।



Chapter 13: Responsive Web Design

1. HTML और CSS का Responsive Design के लिए इस्तेमाल

Responsive Web Design (RWD) का उद्देश्य यह सुनिश्चित करना है कि एक वेबसाइट सभी devices पर अच्छी तरह से और सही तरीके से दिखाई दे, चाहे वह desktop, tablet या mobile हो। यह concept adaptive design से थोड़ा अलग है, जिसमें एक ही design को different screen sizes के लिए adjust किया जाता है, बजाय इसके कि अलग-अलग versions बनाए जाएं।

Responsive design के लिए HTML और CSS का उपयोग किया जाता है, जिसमें HTML structure के साथ-साथ CSS styling भी important होती है। CSS की मदद से, हम layout, content और overall look को manage करते हैं ताकि वे screen size के हिसाब से adjust हो जाएं।

HTML:

  • HTML में semantic tags (जैसे <header>, <footer>, <nav>, <section>) का उपयोग करके content को सही तरीके से structure किया जाता है, ताकि layout को adjust करना आसान हो।

CSS:

  • CSS में media queries, flexbox और grid layouts जैसी techniques का उपयोग करके layouts को flexible और adaptive बनाया जाता है। इन techniques का उद्देश्य content को सही proportion में show करना है, जिससे user experience बेहतर हो।

Benefits of Responsive Web Design:

  • Improved User Experience: सभी devices पर uniform appearance और navigation जिससे user experience बेहतर होता है।
  • SEO Benefits: Google responsive websites को prefer करता है, जिससे SEO ranking में improvement हो सकती है।
  • Cost-Effective: एक ही website को maintain करना, अलग-अलग versions के बजाय, अधिक cost-effective और efficient है।

2. Media Queries का प्रयोग

Media queries का उपयोग करके हम यह निर्धारित कर सकते हैं कि CSS rules कब apply हों। यह rules specific conditions (जैसे screen width, resolution, आदि) के आधार पर styles को change करने में मदद करते हैं। Media queries responsive design के सबसे महत्वपूर्ण भागों में से एक हैं।

Basic Syntax of Media Queries:

@media (condition) {
  /* CSS rules go here */
}

Example (Media Queries):

/* For screen widths larger than 768px */
@media (min-width: 768px) {
  body {
    background-color: lightblue;
  }
}

/* For screen widths smaller than 768px */
@media (max-width: 767px) {
  body {
    background-color: lightgreen;
  }
}

Explanation:

  • @media rule condition को define करता है, जैसे कि min-width (minimum screen width) या max-width (maximum screen width) के आधार पर style apply किया जाता है।
  • पहला media query large screens (tablets and desktop) के लिए है, और दूसरा small screens (mobile) के लिए है।

Types of Media Queries:

  • Width-based media queries: min-width, max-width
  • Resolution-based media queries: min-resolution, max-resolution
  • Device orientation: portrait, landscape

Example (Device Orientation):

@media (orientation: portrait) {
  body {
    font-size: 14px;
  }
}

@media (orientation: landscape) {
  body {
    font-size: 18px;
  }
}

Conclusion on Media Queries: Media queries responsive design के लिए crucial हैं, क्योंकि इन्हें use करके हम layout को devices के हिसाब से dynamically adjust कर सकते हैं। यह users को better experience देता है और website को flexible बनाता है।

3. Flexbox और Grid Layouts

Flexbox और CSS Grid Layouts दोनों ही layout systems हैं, जो web design को बहुत आसान और flexible बनाते हैं। इन दोनों techniques का उपयोग करके हम content को container के अंदर align और distribute कर सकते हैं, चाहे screen size कुछ भी हो।

Flexbox

Flexbox, या Flexible Box Layout, एक CSS layout model है जो content को align और distribute करने के लिए design किया गया है, चाहे content का size और container का size कुछ भी हो।

Flexbox Properties:

  • display: flex: यह property container को flexbox container बना देती है।
  • flex-direction: यह properties layout की direction को control करती है (row, column, row-reverse, column-reverse)।
  • justify-content: इसे content को main axis (horizontal या vertical) पर align करने के लिए use किया जाता है।
  • align-items: इसे cross axis (perpendicular to main axis) पर content को align करने के लिए use किया जाता है।
  • align-self: यह specific item को cross axis पर align करने के लिए use किया जाता है।

Example (Flexbox):

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  padding: 10px;
}

Explanation:

  • .container element को flex container बनाया गया है, और .item को flex items। justify-content: space-between; के द्वारा items के बीच space distribute किया गया है।

Advantages of Flexbox:

  • Items automatically adjust according to the available space.
  • Aligning items in rows or columns becomes much easier.
CSS Grid Layout

CSS Grid Layout, flexbox से ज्यादा advanced और powerful tool है। यह दो-dimensional layout system है, जिसमें rows और columns दोनों को control किया जा सकता है। CSS Grid complex layouts को handle करने के लिए सबसे efficient method है।

Grid Properties:

  • display: grid: यह property container को grid container बना देती है।
  • grid-template-columns और grid-template-rows: यह properties define करती हैं कि grid में कितनी columns और rows होंगी।
  • grid-column और grid-row: यह properties items को specific rows और columns में place करती हैं।

Example (CSS Grid Layout):

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.item {
  background-color: lightblue;
  padding: 20px;
}

Explanation:

  • grid-template-columns: repeat(3, 1fr); से तीन equal-width columns define किए गए हैं। gap property items के बीच gap add करती है।

Advantages of CSS Grid:

  • Allows for more complex layouts with both rows and columns.
  • More control over item placement and positioning.
When to Use Flexbox and Grid?
  • Flexbox: Best for 1-dimensional layouts (either rows or columns).
  • CSS Grid: Best for 2-dimensional layouts (both rows and columns).

Example (Responsive Design using Flexbox and Grid):

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item {
  flex: 1 1 30%;
  margin: 10px;
}

@media (max-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 1fr;
  }
}

Explanation:

  • Desktop screens पर flexbox layout use किया गया है, जिसमें items को horizontally space किया गया है। Mobile screens पर CSS Grid layout use किया गया है, जिसमें items को vertical stack किया गया है।

Conclusion

Responsive Web Design एक महत्वपूर्ण skill है जो web developers को modern websites बनाने में मदद करती है, जो विभिन्न devices पर सही तरीके से दिखाई देती हैं। Media queries, Flexbox, और CSS Grid layout जैसी techniques का उपयोग करके, हम dynamic और flexible layouts बना सकते हैं जो user-friendly और efficient होते हैं। 


Chapter 14: HTML with JavaScript Basics

1. JavaScript का HTML में Integration

JavaScript एक client-side scripting language है, जिसका उपयोग web pages पर interactive features और dynamic content को add करने के लिए किया जाता है। HTML में JavaScript को integrate करना आसान है और इसके कई तरीके हैं।

JavaScript को HTML में दो प्रमुख तरीकों से जोड़ा जा सकता है:

  • Inline JavaScript: JavaScript code को directly HTML elements के attributes में लिखा जाता है।
  • Internal JavaScript: JavaScript code को <script> tags के बीच HTML document में लिखा जाता है।
  • External JavaScript: JavaScript को अलग से एक .js file में रखा जाता है और उसे HTML file में <script> tag से link किया जाता है।

Inline JavaScript Example:

<button onclick="alert('Hello, World!')">Click Me</button>

Explanation:

  • यहाँ पर onclick attribute का use किया गया है, जो button click होने पर एक alert box दिखाता है।

Internal JavaScript Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Example</title>
    <script>
        function greet() {
            alert('Hello, Welcome to JavaScript!');
        }
    </script>
</head>
<body>
    <button onclick="greet()">Click Me</button>
</body>
</html>

Explanation:

  • यहाँ <script> tag के अंदर JavaScript function greet() define किया गया है, जो button click करने पर alert message show करेगा।

External JavaScript Example:

  1. JavaScript File (script.js):
function greet() {
    alert('Hello from External JavaScript!');
}
  1. HTML File (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External JavaScript Example</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="greet()">Click Me</button>
</body>
</html>

Explanation:

  • src="script.js" के द्वारा JavaScript को HTML document से link किया गया है। इस तरीके से JavaScript को अलग से manage किया जा सकता है, जिससे code को maintain करना आसान होता है।

2. Simple Interactive Features

JavaScript का उपयोग web pages पर interactive elements जैसे button clicks, mouse hover events, form submissions, और dynamic content updates के लिए किया जाता है। निम्नलिखित कुछ common interactive features हैं जो JavaScript के माध्यम से implement किए जाते हैं:

Button Click Interaction:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Interaction</title>
    <script>
        function changeText() {
            document.getElementById('message').innerHTML = 'Button clicked!';
        }
    </script>
</head>
<body>
    <button onclick="changeText()">Click Me</button>
    <p id="message">Hello, Click the button!</p>
</body>
</html>

Explanation:

  • जब button पर click किया जाता है, JavaScript function changeText() को call किया जाता है, जो <p> tag के अंदर का text बदल देता है।

Mouse Hover Interaction:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mouse Hover Interaction</title>
    <script>
        function changeColor() {
            document.getElementById('hover-text').style.color = 'red';
        }

        function resetColor() {
            document.getElementById('hover-text').style.color = 'black';
        }
    </script>
</head>
<body>
    <p id="hover-text" onmouseover="changeColor()" onmouseout="resetColor()">Hover over this text to change color</p>
</body>
</html>

Explanation:

  • यहाँ पर onmouseover event का use किया गया है, जो text को red color में बदल देता है जब user mouse pointer text पर लाता है, और onmouseout event से color वापस black हो जाता है।

3. Forms Validation Using JavaScript

Forms validation एक महत्वपूर्ण process है जो data integrity को सुनिश्चित करता है। JavaScript का use करके हम user द्वारा input किए गए data को validate कर सकते हैं और केवल valid data ही submit होने दे सकते हैं।

Basic Form Validation Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation</title>
    <script>
        function validateForm() {
            var name = document.getElementById('name').value;
            if (name == "") {
                alert("Name must be filled out");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <form onsubmit="return validateForm()">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Explanation:

  • validateForm() function checks if the name field is empty. अगर field empty है, तो एक alert show होगा और form submission रोक दिया जाएगा (return false)। अगर input valid है, तो form submit हो जाएगा (return true)।

Form Validation with Multiple Fields:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiple Fields Validation</title>
    <script>
        function validateForm() {
            var name = document.getElementById('name').value;
            var email = document.getElementById('email').value;
            if (name == "" || email == "") {
                alert("Both fields must be filled out");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <form onsubmit="return validateForm()">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Explanation:

  • यहाँ पर दो fields validate किए गए हैं: name और email। अगर किसी भी field को छोड़ा जाता है तो form submit नहीं होगा और user को alert show होगा।

Advanced Validation (Regular Expressions): Regular expressions (RegEx) का use करके हम और complex validation rules apply कर सकते हैं जैसे email format check करना।

Example (Email Validation):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Email Validation</title>
    <script>
        function validateEmail() {
            var email = document.getElementById('email').value;
            var pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            if (!pattern.test(email)) {
                alert("Please enter a valid email address");
                return false;
            }
            return true;
        }
    </script>
</head>
<body>
    <form onsubmit="return validateEmail()">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>

Explanation:

  • यहाँ पर RegEx pattern का use किया गया है जो email address को validate करता है, और अगर format सही नहीं होता है तो user को एक alert दिखाया जाता है।

Conclusion

JavaScript का HTML के साथ integration web pages को dynamic और interactive बनाता है। इसके माध्यम से हम simple interactive features, जैसे button clicks और mouse hover events, और form validation जैसी important functionalities को easily implement कर सकते हैं। यह web development का essential part है जो user experience को बेहतर बनाता है। 


Tags:

Post a Comment

0 Comments

कमेंट केवल पोस्ट से रिलेटेड करें