Home Career Tutorial web dev HTML Tutorial 2025: Basics se Advanced Tak Sikhiye Hindi Hinglish Mein

HTML Tutorial 2025: Basics se Advanced Tak Sikhiye Hindi Hinglish Mein

 


HTML Tutorial: Basics Se Advance Tak

Introduction

Apne ideas ko online live karne ke liye HTML sabse pehla step hai. Chalo dekhte hain kaise:

'Hello World' Page in HTML

Ye ek classic example hai jo batata hai ki HTML kitna fun aur easy hai. Isse aap apni pehli webpage ka structure dekh sakte hain:

HTML

<!DOCTYPE html>

<html>

<head>

     <title>Page Title</title>

</head>

<body>

     <p>Hello World</p>

</body>

</html>

  • <!DOCTYPE html>: Ye browser ko batata hai ki ye ek HTML5 document hai. Sabse latest aur common version.
  • <html>: Ye aapke poore webpage ka root element hai, matlab sab kuch iske andar aata hai.
  • <head>: Ismein webpage ke baare mein metadata hota hai, jo user ko directly dikhta nahi hai, jaise page ka title, character set, CSS files ka link, etc.
  • <title>: Browser tab ya window ke title bar mein jo text dikhta hai, wo yahan define hota hai.
  • <body>: Ye aapke webpage ka main content area hai. Jo kuch bhi aapko screen par dikhana hai (text, images, links, videos), wo sab iske andar aata hai.
  • <p>: Ye ek paragraph tag hai. Ismein text likhte hain. Yahan humne "Hello World" likha hai.

How Does HTML Work?

HTML ek markup language hai. Ye plain text mein instructions provide karta hai jo browser samajhta hai aur uske according content ko display karta hai. Jab aap koi webpage request karte ho, server HTML file bhejta hai, aur browser us HTML ko padhkar aapke liye ek visual page banata hai.

Why Learn HTML?

HTML seekhna bahut zaroori hai kyunki:

  • Foundation hai: Har webpage HTML par hi bani hoti hai.
  • Structure: Ye aapke content ko structure deta hai, jo SEO (Search Engine Optimization) aur accessibility ke liye important hai.
  • Gateway: Agar aapko JavaScript frameworks (React) ya CSS (styling) seekhna hai, toh HTML basics bahut kaam aayenge.

HTML Basics

HTML basics seekhkar aap apni khud ki web pages banana shuru kar sakte hain aur apne ideas ko online life de sakte hain.

HTML Editors

Web development ke liye sabse popular aur free code editor VS Code (Visual Studio Code) hai.

  • Kya hai: Microsoft ka banaya hua ek powerful aur lightweight code editor.
  • Kyon use karein: Syntax highlighting, intelligent code completion (IntelliSense), built-in Git integration, aur extensions ka ek huge ecosystem jo har tarah ki development ke liye useful hai.
  • Features: Debugging, live server, code formatting, aur bhi bahut kuch.

HTML Comments

Comments woh text hote hain jo aap apne code mein likhte ho takleef ke liye. Browser unhein ignore kar deta hai, matlab wo webpage par dikhte nahi hain.

  • Syntax: ``
  • Kyon zaroori: Code ko explain karne ke liye, temporarily kisi code ko disable karne ke liye, ya future mein khud ko ya doosre developers ko yaad dilane ke liye.

HTML Element

Ek HTML element start tag, content, aur end tag se milkar banta hai.

  • Example: <p>This is a paragraph</p>
    • <p>: Start tag
    • This is a paragraph: Content
    • </p>: End tag
  • Types:
    • Block-level Elements: Ye poori width lete hain aur naye line se shuru hote hain (e.g., <div>, <p>, <h1>).
    • Inline Elements: Ye sirf content ki width lete hain aur naye line se shuru nahi hote (e.g., <span>, <a>, <img>).

HTML Attributes (Important Ones)

Attributes tags ko extra information dete hain. Ye hamesha start tag mein hote hain aur name="value" pair mein likhe jaate hain.

  • id: Element ko ek unique identifier deta hai. JavaScript aur CSS mein specific element ko target karne ke liye use hota hai.
    • Example: <div id="mySection">...</div>
  • class: Elements ko group karne ke liye use hota hai. Ek class value multiple elements par apply ho sakti hai. CSS mein styling ke liye common hai.
    • Example: <p class="highlight-text">...</p>
  • href: Hyperlinks (<a> tag) ke liye destination URL specify karta hai.
    • Example: <a href="https://www.google.com">Google</a>
  • src: Images (<img>) aur media files (<audio>, <video>) ke liye source file ka path specify karta hai.
    • Example: <img src="image.jpg" alt="My Image">
  • alt: Images (<img>) ke liye alternative text provide karta hai. Jab image load nahi hoti ya screen reader use hota hai, tab ye text dikhta hai. SEO aur accessibility ke liye important hai.
    • Example: <img src="logo.png" alt="Company Logo">
  • style: Inline CSS styles apply karne ke liye. (Generally external CSS files prefer kiye jaate hain, par quick test ya specific cases mein useful hai).
    • Example: <p style="color: blue;">Blue text</p>
  • width / height: Images, videos, ya other elements ki dimensions set karne ke liye.
    • Example: <img src="pic.jpg" width="100" height="100">
  • target: Links (<a> tag) ke liye specify karta hai ki linked document kahan open hoga. _blank sabse common hai (new tab mein open karne ke liye).
    • Example: <a href="page.html" target="_blank">Open in new tab</a>
  • value: Form fields (<input>, <button>, <option>) ke default value ko define karta hai.
    • Example: <input type="text" value="Default Name">
  • type: Form input fields (<input>) ka type specify karta hai (e.g., text, password, email, submit).
    • Example: <input type="email" placeholder="Enter your email">
  • name: Form elements ko name deta hai. Server-side par data submit karte waqt ye name use hota hai.
    • Example: <input type="text" name="username">
  • disabled: Elements ko disable karta hai, matlab user usse interact nahi kar sakta.
    • Example: <button disabled>Click Me</button>

HTML Doctype

<!DOCTYPE html>: Ye document type declaration hai. Ye browser ko batata hai ki webpage kis HTML standard (version) ko follow kar rahi hai. Modern web ke liye hamesha HTML5 ka <!DOCTYPE html> use hota hai.

HTML Heading

Headings webpage par sections aur content ko organize karne ke liye use hote hain. <h1> sabse important heading hai, aur <h6> sabse kam important.

  • Example:

HTML

<h1>Main Heading</h1>

<h2>Sub-heading</h2>

<h3>Smaller Heading</h3>

  • Kyon zaroori: SEO (search engines headings ko content structure samajhne ke liye use karte hain) aur accessibility ke liye.

HTML Paragraphs

Text content ko display karne ka sabse basic element.

  • Tag: <p>
  • Example:

HTML

<p>This is my first paragraph on the webpage.</p>

<p>And this is the second paragraph.</p>

HTML Links

Links (hyperlinks) ek page se doosre page par ya same page ke doosre section par navigate karne ke liye use hote hain.

  • Tag: <a> (anchor tag)
  • Attribute: href (destination URL)
  • Example:

HTML

<a href="https://www.example.com">Visit Example Website</a>

<a href="about.html">Go to About Us Page</a>

HTML Images

Webpage par images display karne ke liye.

  • Tag: <img> (ye ek self-closing tag hai, iska koi end tag nahi hota)
  • Attributes: src (image file ka path), alt (alternative text), width, height.
  • Example:

HTML

<img src="my-picture.jpg" alt="A beautiful landscape" width="300" height="200">

HTML Semantics

Semantic HTML tags woh tags hote hain jo content ke meaning (matlab) ko describe karte hain, na ki sirf uske appearance ko. Ye search engines aur assistive technologies (like screen readers) ke liye bahut important hain.

  • Non-Semantic (generic): <div>, <span> (ye sirf containers hain, koi specific meaning nahi dete)
  • Semantic Tags (Important ones):
    • <header>: Document ya section ka introductory content ya navigational links.
    • <nav>: Navigation links ka set.
    • <main>: Document ka main content. Har page par ek hi <main> tag hona chahiye.
    • <article>: Self-contained content, jaise blog post, news article.
    • <section>: Document ka ek generic standalone section.
    • <aside>: Content jo main content se related ho, par side mein show ho (e.g., sidebar, related links).
    • <footer>: Document ya section ka footer content (copyright info, contact details).
    • <figure> / <figcaption>: Self-contained content, usually images ya diagrams, unke caption ke saath.
  • Kyon zaroori: Better SEO, improved accessibility, aur code readability.

HTML Entities

Kuch characters (jaise <, >) HTML code mein special meaning rakhte hain. Agar aap unhein text ke roop mein dikhana chahte hain, toh entities use karte hain. Special symbols ke liye bhi.

  • Examples:
    • < (less than): &lt;
    • > (greater than): &gt;
    • & (ampersand): &amp;
    • © (copyright symbol): &copy;
    • (non-breaking space): &nbsp;

HTML Symbols

HTML entities ke through hi symbols display kiye jaate hain.

  • Example:

HTML

<p>This is a copyright symbol: &copy; 2024</p>

<p>I love &#10084; HTML.</p> ```

 

HTML Basic Tags Questions (Practical Applications)

HTML tags web pages ke building blocks hain. Inhein samajhkar aur effectively use karke aap well-structured aur informative webpages bana sakte hain.

Add a Paragraph in HTML

(Already covered in HTML Paragraphs section above, using <p> tag.)

Create a Link in HTML

(Already covered in HTML Links section above, using <a> tag with href attribute.)

Div Tag in HTML (<div>)

  • Kya hai: Ek generic block-level container element. Ye webpage ke sections ko group karne ke liye use hota hai. By default, iska koi visual effect nahi hota.
  • Kyon zaroori: Styling ke liye content ko group karna (CSS ke saath), ya JavaScript se manipulate karne ke liye.
  • Example:

HTML

<div id="product-card" class="product-container">

    <h2>Product Name</h2>

    <p>Product description goes here.</p>

    <button>Add to Cart</button>

</div>

Span Tag in HTML (<span>)

  • Kya hai: Ek generic inline container element. Ye text ke chhote parts ko group karne ke liye use hota hai, taaki unhein style kiya ja sake ya JavaScript se manipulate kiya ja sake.
  • Kyon zaroori: Text ke specific portions par CSS style apply karna, ya JavaScript events add karna.
  • Example:

HTML

<p>This is a <span style="color: red;">red</span> text inside a paragraph.</p>

Add a Header on a Webpage (<header>)

(Already covered in HTML Semantics section above.)

Add a Footer on a Webpage (<footer>)

(Already covered in HTML Semantics section above.)

Line Break in HTML (<br>)

  • Kya hai: Single line break create karta hai. Ye ek self-closing tag hai.
  • Kyon zaroori: Jab aap chahte hain ki text naye line se shuru ho, bina naya paragraph banaye.
  • Example:

HTML

<p>This is the first line.<br>This is the second line.</p>

Add a Navigation Bar in HTML (<nav>)

  • Kya hai: Navigation links ke set ko contain karta hai. Ye ek semantic tag hai.
  • Kyon zaroori: Website navigation ko clearly define karne ke liye, jo accessibility aur SEO ke liye important hai.
  • Example:

HTML

<nav>

    <ul>

        <li><a href="/">Home</a></li>

        <li><a href="/about">About Us</a></li>

        <li><a href="/services">Services</a></li>

        <li><a href="/contact">Contact</a></li>

    </ul>

</nav>

(Note: <ul> (unordered list) aur <li> (list item) tags bhi navigation mein common hain.)

Link JavaScript to HTML

JavaScript code ko HTML page se link karne ke do main tareeke hain:

  1. External JavaScript File: Most common aur recommended method. .js extension wali file banao aur HTML mein link karo.
    • Tag: <script>
    • Attribute: src (JavaScript file ka path)
    • Placement: Best practice hai ki <script> tag ko <body> ke end mein rakhein, just closing </body> tag se pehle. Isse HTML load hone tak JS files ki loading ka wait nahi karna padta, aur page jaldi dikhta hai.
    • Example:

HTML

<!DOCTYPE html>

<html>

<head>

    <title>My Page</title>

</head>

<body>

    <h1>Welcome!</h1>

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

</html>

(Aur script.js file mein console.log("Hello from JS!"); jaisa code hoga)

  1. Internal JavaScript: HTML file ke andar hi <script> tags ke beech JavaScript code likhna. Small scripts ke liye theek hai, par large projects ke liye messy ho jaata hai.
    • Example:

HTML

<!DOCTYPE html>

<html>

<head>

    <title>My Page</title>

</head>

<body>

    <h1>Welcome!</h1>

    <script>

        // Your JavaScript code here

        alert("Hello from internal JS!");

    </script>

</body>

</html>

HTML Tags – Important Tags Only (A to Z ki zaroorat nahi)

Upar bahut saare important tags cover ho chuke hain (e.g., <html>, <head>, <body>, <title>, <p>, <h1> to <h6>, <a>, <img>, <div>, <span>, <br>, <nav>, <header>, <footer>, <main>, <article>, <section>, <aside>).

Kuch additional important tags jo aage kaam aayenge:

  • <input>: Forms mein user se input lene ke liye (text, numbers, passwords, checkboxes, radio buttons).
  • <button>: Clickable buttons banane ke liye.
  • <form>: Input elements ko group karne aur server par data submit karne ke liye.
  • <ul>, <ol>, <li>: Unordered (bullet points) aur Ordered (numbered) lists banane ke liye. <li> list items hain.
  • <table>, <tr>, <th>, <td>: Tables banane ke liye.
  • <iframe>: Doosre web pages ko apne page mein embed karne ke liye.
  • <video>, <audio>: Video aur audio files embed karne ke liye.

HTML Tables

HTML tables information ko rows aur columns mein organize karne ka ek structured tareeka provide karte hain, jisse users ke liye samajhna aur navigate karna aasan ho jaata hai.

What is a Table in HTML? (<table>)

  • Kya hai: Data ko row aur column format mein display karne ke liye container.
  • Example:

HTML

<table>

    </table>

Add a Table Row in HTML (<tr>)

  • Kya hai: Table ke andar ek single row banata hai.
  • Example:

HTML

<table>

    <tr> </tr>

    <tr> </tr>

</table>

Add a Table Header in HTML (<th>)

  • Kya hai: Table header cell. Ye by default bold aur centrally aligned hota hai.
  • Kyon zaroori: Columns ko names dene ke liye.
  • Example:

HTML

<table>

    <tr>

        <th>Name</th>

        <th>Age</th>

        <th>City</th>

    </tr>

</table>

Add a Table Cell in HTML (<td>)

  • Kya hai: Table data cell. Ye normal data cells hote hain.
  • Example:

HTML

<table>

    <tr>

        <th>Name</th>

        <th>Age</th>

    </tr>

    <tr>

        <td>Alice</td>

        <td>30</td>

    </tr>

</table>

Set Captions in HTML Table (<caption>)

  • Kya hai: Table ke liye ek title ya description provide karta hai.
  • Placement: Hamesha <table> tag ke just baad.
  • Example:

HTML

<table>

    <caption>Employee Details</caption>

    <tr>

        <th>Name</th>

        <th>Department</th>

    </tr>

    <tr>

        <td>Bob</td>

        <td>HR</td>

    </tr>

</table>

Group Columns in HTML (<colgroup> & <col>)

  • Kya hai: Columns ko group karne aur un par styling apply karne ke liye.
  • Kyon zaroori: Column-wise styling (e.g., width, background-color) apply karne ke liye, bina har cell mein CSS likhe.
  • Example:

HTML

<table>

    <colgroup>

        <col span="2" style="background-color: #f2f2f2;"> <col style="background-color: lightblue;"> </colgroup>

    <tr>

        <th>Header 1</th>

        <th>Header 2</th>

        <th>Header 3</th>

    </tr>

    <tr>

        <td>Data 1</td>

        <td>Data 2</td>

        <td>Data 3</td>

    </tr>

</table>

HTML Lists

HTML lists information ko clearly organize karti hain. Ye step-by-step instructions, ingredients lists, ya items ko rank karne ke liye perfect hain. Isse readability badhti hai aur users ko content samajhne mein help milti hai.

Lists in HTML

HTML mein teen main types ki lists hoti hain:

Ordered Lists in HTML (<ol>)

  • Kya hai: Items ki ek ordered list (numbered list) banati hai.
  • Tag: <ol>
  • List Item Tag: Har item ke liye <li> use hota hai.
  • Example:

HTML

<ol>

    <li>First step</li>

    <li>Second step</li>

    <li>Third step</li>

</ol>

Unordered Lists in HTML (<ul>)

  • Kya hai: Items ki ek unordered list (bullet points) banati hai.
  • Tag: <ul>
  • List Item Tag: Har item ke liye <li> use hota hai.
  • Example:

HTML

<ul>

    <li>Apple</li>

    <li>Banana</li>

    <li>Cherry</li>

</ul>

Description Lists in HTML (<dl>, <dt>, <dd>)

  • Kya hai: Description list banati hai, jahan terms ko unki descriptions ke saath list kiya jaata hai.
  • Tags:
    • <dl>: Description list container
    • <dt>: Description term
    • <dd>: Description details
  • Example:

HTML

<dl>

    <dt>HTML</dt>

    <dd>HyperText Markup Language, web pages banane ke liye.</dd>

    <dt>CSS</dt>

    <dd>Cascading Style Sheets, web pages ko style karne ke liye.</dd>

</dl>

HTML Formatting

HTML apne tags aur attributes provide karta hai website ke text, images, aur baaki content ko style karne ke liye. Ye visual appeal ko improve karta hai, users ko content navigate karne mein help karta hai, aur users ko important information signal karta hai. Chalo kuch common HTML formatting tags explore karte hain.

Make Text Italic in HTML (<em>, <i>)

  • <em> (Emphasis Tag): Semantic meaning deta hai ki text par emphasis hai (stress).
    • Example: <p>I *really* love <em>HTML</em>.</p>
  • <i> (Italic Tag): Sirf visual styling ke liye (italicize karta hai), koi semantic meaning nahi deta.
    • Example: <p>This text is <i>italic</i>.</p>

Create Small text in HTML (<small>)

  • Kya hai: Text ko physically smaller font size mein display karta hai.
    • Example: <p>Main content. <small>This is fine print.</small></p>

Mark Text in HTML (<mark>)

  • Kya hai: Text ko highlight karta hai (by default yellow background).
    • Example: <p>Please <mark>read this important notice</mark>.</p>

Add a Subscript in HTML (<sub>)

  • Kya hai: Text ko normal line se thoda neeche, aur smaller font size mein display karta hai (like in chemical formulas).
    • Example: <p>Water is H<sub>2</sub>O.</p>

Strong Tag in HTML (<strong>)

  • Kya hai: Semantic meaning deta hai ki text bahut important hai. By default bold dikhta hai.
    • Example: <p><strong>Warning:</strong> Do not proceed without permission.</p>

Bold Text in HTML (<b>)

  • Kya hai: Sirf visual styling ke liye (bold karta hai), koi semantic meaning nahi deta.
    • Example: <p>This text is <b>bold</b>.</p>

Highlight Text in HTML

(Already covered by <mark> tag above.)

Show a Deleted Text in HTML (<del>)

  • Kya hai: Text jo document se delete ho gaya hai, us par strikethrough line daalta hai.
    • Example: <p>Old Price: <del>$29.99</del> New Price: $19.99</p>

How to Emphasize Text in HTML

(Already covered by <em> tag above.)

Add a Superscript in HTML (<sup>)

  • Kya hai: Text ko normal line se thoda upar, aur smaller font size mein display karta hai (like in mathematical powers).
    • Example: <p>E = mc<sup>2</sup></p>

HTML Forms

HTML forms users ko aapki website ke saath interact karne dete hain. Unhein contact details collect karne, surveys run karne, site search karne, aur bahut kuch ke liye use karein. Chalo HTML forms ke baare mein aur explore karte hain.

What is a Form in HTML? (<form>)

  • Kya hai: User input collect karne ke liye ek container. Ismein input fields, buttons, dropdowns, etc. hote hain.
  • Attributes:
    • action: Server par data submit karne ke liye URL.
    • method: HTTP method (GET ya POST) data submit karne ke liye.
  • Example:

HTML

<form action="/submit-form" method="post">

    </form>

Add an Input Field in HTML (<input>)

  • Kya hai: Most versatile form element. User se different types ka data lene ke liye.
  • Attributes: type (text, email, password, number, checkbox, radio, submit, etc.), name, id, value, placeholder, required.
  • Example:

HTML

<input type="text" id="username" name="username" placeholder="Enter your name" required>

<input type="email" id="useremail" name="useremail" placeholder="Your email">

<input type="password" id="userpass" name="userpass" placeholder="Password">

<input type="checkbox" id="newsletter" name="newsletter" value="yes">

<input type="radio" id="male" name="gender" value="male">

Label tag in HTML (<label>)

  • Kya hai: Form controls (jaise input fields) ke liye label define karta hai.
  • Kyon zaroori: Accessibility ke liye. Jab user label par click karta hai, toh associated input field activate ho jaati hai.
  • Attribute: for (ye input field ki id se match hona chahiye).
  • Example:

HTML

<label for="username">Username:</label>

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

Add a Button in HTML (<button>)

  • Kya hai: Clickable button. Form submit karne ke liye ya JavaScript functions trigger karne ke liye use hota hai.
  • Attribute: type (submit, reset, button). Default submit hota hai.
  • Example:

HTML

<button type="submit">Submit Form</button>

<button type="button" onclick="alert('Hello!');">Click Me</button>

Add a Dropdown in HTML (<select>, <option>)

  • Kya hai: Dropdown list banane ke liye jahan user multiple options mein se ek ya zyada select kar sakta hai.
  • Tags:
    • <select>: Dropdown list container
    • <option>: Har dropdown item
  • Attributes: name (select tag), value (option tag), selected (default selected option).
  • Example:

HTML

<label for="country">Choose your country:</label>

<select id="country" name="country">

    <option value="usa">USA</option>

    <option value="ind" selected>India</option>

    <option value="uk">UK</option>

</select>

Add a Textarea in HTML (<textarea>)

  • Kya hai: Multiline text input field. Long messages ya comments lene ke liye.
  • Attributes: rows, cols (visual size control karte hain), name, id, placeholder.
  • Example:

HTML

<label for="message">Your Message:</label><br>

<textarea id="message" name="user_message" rows="5" cols="30" placeholder="Type your message here..."></textarea>

Fieldset Tag in HTML (<fieldset>)

  • Kya hai: Form ke andar related elements ko group karne ke liye. Ye elements ke around ek border bana deta hai.
  • Kyon zaroori: Long forms ko organize karne aur readability improve karne ke liye.
  • Example:

HTML

<fieldset>

    </fieldset>

Legend Tag in HTML (<legend>)

  • Kya hai: <fieldset> element ke liye ek caption define karta hai. Ye border ke andar dikhta hai.
  • Placement: fieldset tag ke andar, sabse pehla element.
  • Example:

HTML

<fieldset>

    <legend>Personal Information</legend>

    <label for="fname">First Name:</label>

    <input type="text" id="fname" name="fname">

    </fieldset>

Datalist Tag in HTML (<datalist>)

  • Kya hai: Input field ke liye pre-defined options ki list provide karta hai. Jab user type karta hai, toh suggestions dikhte hain.
  • Kyon zaroori: User ko input mein help karne ke liye.
  • Example:

HTML

<label for="browser">Choose your browser:</label>

<input list="browsers" name="browser" id="browser">

<datalist id="browsers">

    <option value="Edge">

    <option value="Firefox">

    <option value="Chrome">

    <option value="Safari">

</datalist>

HTML Advanced Concepts

HTML ke basics master karne ke baad, hum dynamic, interactive, aur meaningful web pages banane ke liye advanced HTML concepts explore kar sakte hain.

iframe in HTML (<iframe>)

  • Kya hai: Ek webpage ke andar doosri webpage embed karne ke liye.
  • Attributes: src (embedded page ka URL), width, height, frameborder.
  • Kyon zaroori: Google Maps, YouTube videos, ya kisi aur website ke content ko apni site par dikhane ke liye.
  • Example:

HTML

<iframe src="https://www.youtube.com/embed/yourvideoid" width="560" height="315" frameborder="0" allowfullscreen></iframe>

File Paths

Ye batata hai ki files (images, CSS, JS) aapki HTML file ke relative kahan stored hain.

  • Absolute File Paths: Poora URL (https://www.example.com/images/pic.jpg)
  • Relative File Paths (Most Common):
    • Same directory: image.jpg (agar image HTML file ke same folder mein hai)
    • Sub-directory: images/image.jpg (agar image images folder mein hai, jo HTML file ke same level par hai)
    • Parent directory: ../image.jpg (HTML file ke ek level upar wale folder mein image)

Favicon

  • Kya hai: Browser tab, bookmarks, aur search results mein dikhne wala small icon.
  • Kyon zaroori: Brand identity aur professionalism ke liye.
  • How to add: <head> section mein <link> tag se.
  • Example:

HTML

<head>

    <link rel="icon" type="image/x-icon" href="/images/favicon.ico">

</head>

Computer Code Elements (<code>, <kbd>, <samp>, <var>)

Ye semantic tags hain jo program code ya user input jaisi cheezon ko represent karte hain:

  • <code>: Computer code ka ek piece.
    • Example: <p>Thedocument.getElementById()method is used.</p>
  • <kbd>: User input (keyboard input).
    • Example: <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
  • <samp>: Sample output from a computer program.
    • Example: <p>Error: <samp>File not found.</samp></p>
  • <var>: A variable in programming or math.
    • Example: <p>If x = <var>y</var> + <var>z</var>.</p>

Add Emojis in HTML

Emojis ko HTML mein directly copy-paste kar sakte hain, ya unke numerical entity codes use kar sakte hain.

  • Example:

HTML

<p>I love HTML &#128150;</p> <p>&#128512; Happy Face</p>

Charsets in HTML

  • Kya hai: Character encoding set. Ye browser ko batata hai ki text ko kaise display karna hai.
  • Kyon zaroori: Special characters (jaise Hindi, Chinese characters) ko correctly display karne ke liye.
  • Most Common: UTF-8 (universal character set, sabse zyada characters support karta hai).
  • How to add: <head> section mein <meta> tag se.
  • Example:

HTML

<head>

    <meta charset="UTF-8">

</head>

URL Encoding in HTML

  • Kya hai: URLs mein special characters (like space, &, =, ?) ko web-friendly format mein convert karna. Browsers automatically karte hain, par jab manually URLs banate hain, toh pata hona chahiye.
  • Example: Space becomes %20.
    • Original: my page with spaces.html
    • Encoded: my%20page%20with%20spaces.html

Responsive Web Design

  • Kya hai: Websites banana jo different screen sizes (desktops, tablets, mobiles) par achhe dikhein aur adjust ho jao.
  • Kyon zaroori: Aajkal users alag-alag devices par websites access karte hain.
  • Key HTML-related concept: Viewport Meta Tag. Ye browser ko batata hai ki page ki width device ki screen width ke barabar honi chahiye, aur initial zoom level 1.0 hona chahiye.
  • Example:

HTML

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

(CSS Media Queries aur Flexible Grid Layouts iska main part hain, par HTML mein ye meta tag bahut important hai.)

HTML Layout

  • Kya hai: Webpage ke content ko organize karne ka tareeka (e.g., header, navigation, main content, sidebar, footer).
  • Tools: Abhi <div> aur semantic HTML tags ( <header>, <nav>, <main>, <section>, <aside>, <footer>) use hote hain. CSS (Flexbox, Grid) ke saath milkar ye layouts banaye jaate hain.

HTML Media Elements

Add Audio to a Webpage (<audio>)

  • Kya hai: Audio files ko webpage par embed karne ke liye.
  • Attributes: src, controls (play/pause controls dikhane ke liye), autoplay, loop, muted.
  • Example:

HTML

<audio controls>

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

    Your browser does not support the audio element.

</audio>

Add Video to a Webpage (<video>)

  • Kya hai: Video files ko webpage par embed karne ke liye.
  • Attributes: src, controls, width, height, autoplay, loop, muted, poster (video load hone se pehle dikhne wali image).
  • Example:

HTML

<video controls width="320" height="240" poster="thumbnail.jpg">

    <source src="movie.mp4" type="video/mp4">

    Your browser does not support the video tag.

</video>

HTML References (Short explanation)

HTML references essential resources hain jo webpages ke building blocks par comprehensive information aur guidance provide karte hain. Ye experienced developers aur beginners dono ke liye perfect hain.

  • Tags Reference: Saare HTML tags ki list aur unke use cases.
  • Attributes Reference: Saare HTML attributes ki list aur unke use cases.
  • Global Attributes Reference: Woh attributes jo almost har HTML tag par apply ho sakte hain (e.g., id, class, style).
  • Event Attributes Reference: Attributes jo JavaScript events (like onclick, onmouseover) ko trigger karte hain.
  • DOM Reference: Document Object Model (DOM) ke baare mein jaankari, jo HTML document ka programmatic representation hai (JavaScript se manipulate karne ke liye).
  • DOM Audio/Videos Reference: JavaScript se audio aur video elements ko kaise control karein.
  • HTML5 Reference: HTML5 standard se related specific details.

Ye references bahut helpful hote hain jab aapko kisi specific tag ya attribute ke baare mein detail mein jaanna ho. MDN Web Docs (Mozilla Developer Network) sabse acchi reference site hai.

 


Tags :

No comments:

Please comment under the community guideline.

Subscribe to: Post Comments ( Atom )
Powered by Blogger.