HTML & CSS3 Notes

1. Introduction to HTML / एचटीएमएल का परिचय

English

What is HTML? HTML (HyperText Markup Language) is the standard language for creating web pages. It describes the structure of a webpage using markup. HTML consists of a series of elements that tell the browser how to display content.

Basic Structure of an HTML Document:

<!DOCTYPE html> – declares that this is an HTML5 document
<html> – root element
<head> – contains meta-information (title, links, styles)
<body> – contains visible page content

Tags and Elements: HTML tags are keywords surrounded by angle brackets like <tagname>. Most elements have an opening tag and a closing tag.

सरल हिंदी

HTML क्या है? HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) वेब पेज बनाने की मानक भाषा है। यह टैग्स की मदद से पेज की संरचना तय करता है।

HTML दस्तावेज़ की बुनियादी संरचना:

<!DOCTYPE html> – यह HTML5 डॉक्यूमेंट है यह घोषित करता है।
<html> – सबसे ऊपर का मूल तत्व।
<head> – पेज के बारे में जानकारी (टाइटल, स्टाइल, लिंक) यहाँ आती है।
<body> – पेज पर दिखने वाला सारा कंटेंट यहाँ लिखा जाता है।

टैग और एलिमेंट: HTML टैग कोणाकार ब्रैकेट्स में लिखे जाते हैं जैसे <tagname>। अधिकांश एलिमेंट के शुरू और बंद करने वाले टैग होते हैं।

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Explanation: This is the minimal HTML5 structure. The <h1> tag defines a heading, <p> defines a paragraph.

व्याख्या: यह HTML5 की सबसे छोटी संरचना है। <h1> शीर्षक के लिए और <p> पैराग्राफ के लिए उपयोग किया जाता है।

↑ Back to Top

2. Basic HTML Tags / बुनियादी एचटीएमएल टैग

English

Common tags:

<h1> to <h6> – headings (h1 largest, h6 smallest)
<p> – paragraph
<br> – line break (self-closing)
<hr> – horizontal rule (thematic break)
 – HTML comment

सरल हिंदी

सामान्य टैग:

<h1> से <h6> – शीर्षक (h1 सबसे बड़ा, h6 सबसे छोटा)
<p> – पैराग्राफ
<br> – लाइन तोड़ने के लिए (स्व-समापन)
<hr> – क्षैतिज रेखा (विषय विराम)
 – HTML में कमेंट

<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph with a<br>line break.</p>
<hr>
<p>Another paragraph.</p>
<!-- This is a comment -->

↑ Back to Top

3. Text Formatting / टेक्स्ट फॉर्मेटिंग

English

Formatting tags:

<b> / <strong> – bold / important text
<i> / <em> – italic / emphasized text
<u> – underlined
<mark> – highlighted text
<small> – smaller text
<del> – deleted (strikethrough)
<ins> – inserted (underlined)
<sub> – subscript
<sup> – superscript

सरल हिंदी

फॉर्मेटिंग टैग:

<b> / <strong> – मोटा (बोल्ड) / महत्वपूर्ण टेक्स्ट
<i> / <em> – तिरछा (इटैलिक) / जोर देने वाला टेक्स्ट
<u> – रेखांकित (अंडरलाइन)
<mark> – हाइलाइट किया हुआ
<small> – छोटा टेक्स्ट
<del> – हटा दिया गया (बीच में लकीर)
<ins> – जोड़ा गया (अंडरलाइन)
<sub> – सबस्क्रिप्ट (नीचे का अक्षर)
<sup> – सुपरस्क्रिप्ट (ऊपर का अक्षर)

<p><b>Bold</b>, <i>italic</i>, <u>underline</u>.</p>
<p><strong>Strong</strong>, <em>emphasized</em>, <mark>marked</mark>.</p>
<p>H<sub>2</sub>O and E = mc<sup>2</sup>.</p>

↑ Back to Top

4. Lists / सूचियाँ

English

Three types of lists:

Unordered list (<ul>) – bullet points
Ordered list (<ol>) – numbered
Description list (<dl>) – terms and descriptions

सरल हिंदी

तीन प्रकार की सूचियाँ:

अक्रमित सूची (<ul>) – बिंदुओं के साथ
क्रमित सूची (<ol>) – नंबर के साथ
वर्णन सूची (<dl>) – शब्द और उनके विवरण के लिए

<ul>
    <li>Apple</li>
    <li>Banana</li>
</ul>

<ol>
    <li>First</li>
    <li>Second</li>
</ol>

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
</dl>

↑ Back to Top

5. Links and Images / लिंक और छवियाँ

English

Anchor tag (<a>): Creates hyperlinks. href attribute specifies the URL.

Image tag (<img>): Embeds an image. src attribute for image source, alt for alternative text (accessibility). Self-closing.

सरल हिंदी

एंकर टैग (<a>): लिंक बनाने के लिए। href एट्रिब्यूट में URL देते हैं।

इमेज टैग (<img>): तस्वीर लगाने के लिए। src में तस्वीर का पता, alt में वैकल्पिक टेक्स्ट (यदि तस्वीर न दिखे)। यह स्व-समापन टैग है।

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

<img src="image.jpg" alt="Description of image" width="300">

↑ Back to Top

6. Tables / तालिकाएँ

English

Table elements:

<table> – defines a table
<tr> – table row
<th> – table header cell (bold, centered)
<td> – table data cell
colspan / rowspan – merge cells

सरल हिंदी

तालिका के तत्व:

<table> – तालिका बनाता है
<tr> – पंक्ति (row)
<th> – शीर्षक सेल (मोटा और केंद्रित)
<td> – डेटा सेल
colspan / rowspan – सेल मिलाने के लिए

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>Alice</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>30</td>
    </tr>
</table>

↑ Back to Top

7. Forms / फॉर्म

English

Form elements: <form> container. Common input types: text, password, email, number, radio, checkbox, submit, etc. <label> improves accessibility.

सरल हिंदी

फॉर्म के तत्व: <form> कंटेनर। सामान्य इनपुट टाइप: text, password, email, number, radio, checkbox, submit आदि। <label> का इस्तेमाल एक्सेसिबिलिटी के लिए करते हैं।

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    <br>
    <input type="submit" value="Submit">
</form>

↑ Back to Top

8. Semantic HTML / सीमेंटिक एचटीएमएल

English

Semantic tags clearly describe their meaning. Examples: <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>. They help with SEO and accessibility.

सरल हिंदी

सीमेंटिक टैग अपने अर्थ को स्पष्ट बताते हैं। जैसे <header> (शीर्ष), <nav> (नेविगेशन), <main> (मुख्य सामग्री), <section> (अनुभाग), <article> (लेख), <aside> (पक्ष सामग्री), <footer> (पाद)। इनसे सर्च इंजन और स्क्रीन रीडर को समझने में आसानी होती है।

<header>
    <h1>My Website</h1>
</header>
<nav>
    <a href="#">Home</a> | <a href="#">About</a>
</nav>
<main>
    <article>
        <h2>Blog Post</h2>
        <p>Content here...</p>
    </article>
</main>
<footer>
    <p>© 2025</p>
</footer>

↑ Back to Top

9. Introduction to CSS / सीएसएस का परिचय

English

What is CSS? CSS (Cascading Style Sheets) is used to style HTML elements. It controls layout, colors, fonts, and responsiveness.

Three ways to add CSS:

Inline: style="property:value;" inside an element
Internal: <style> in the <head>
External: separate .css file linked via <link>

सरल हिंदी

CSS क्या है? CSS (कैस्केडिंग स्टाइल शीट्स) का उपयोग HTML एलिमेंट्स को स्टाइल करने के लिए किया जाता है। यह रंग, लेआउट, फ़ॉन्ट आदि सेट करता है।

CSS जोड़ने के तीन तरीके:

इनलाइन: किसी एलिमेंट में style="property:value;" लिखकर
आंतरिक: <head> में <style> टैग के अंदर
बाहरी: अलग .css फाइल बनाकर <link> से जोड़कर

<!-- inline -->
<p style="color:blue;">Blue text</p>

<!-- internal -->
<style>
    p { color: red; }
</style>

<!-- external (in head) -->
<link rel="stylesheet" href="styles.css">

↑ Back to Top

10. CSS Selectors / सीएसएस सेलेक्टर

English

Selectors:

Element: p { }
Class: .myclass { }
ID: #myid { }
Universal: * { }
Attribute: [type="text"] { }
Pseudo-class: :hover, :first-child
Pseudo-element: ::before, ::after

सरल हिंदी

सेलेक्टर के प्रकार:

एलिमेंट: p { }
क्लास: .myclass { }
आईडी: #myid { }
यूनिवर्सल: * { } (सभी पर)
एट्रिब्यूट: [type="text"] { }
स्यूडो-क्लास: :hover (माउस ले जाने पर), :first-child (पहला बच्चा)
स्यूडो-एलिमेंट: ::before, ::after (एलिमेंट से पहले/बाद में सामग्री जोड़ना)

<style>
    p { color: blue; }               /* element */
    .highlight { background: yellow; } /* class */
    #main { font-size: 20px; }        /* ID */
    a:hover { color: red; }            /* pseudo-class */
</style>

↑ Back to Top

11. Colors and Backgrounds / रंग और पृष्ठभूमि

English

Color properties: color (text color), background-color, background-image. Colors can be named, hex, rgb, hsl.

सरल हिंदी

रंग से जुड़े प्रॉपर्टी: color (टेक्स्ट का रंग), background-color (पृष्ठभूमि का रंग), background-image (पृष्ठभूमि में तस्वीर)। रंग के नाम, hex (#ff0000), rgb(255,0,0), hsl से दे सकते हैं।

<style>
    body { background-color: lightblue; }
    h1 { color: #ff6347; }  /* tomato */
    div { background-image: url('bg.jpg'); }
</style>

↑ Back to Top

12. CSS Box Model / बॉक्स मॉडल

English

Every element is a rectangular box with:

content – text/images
padding – space inside border
border – border around padding
margin – space outside border

सरल हिंदी

हर एलिमेंट एक आयताकार बॉक्स होता है जिसमें:

content – असली सामग्री (टेक्स्ट, तस्वीर)
padding – कंटेंट और बॉर्डर के बीच का खाली स्थान
border – पैडिंग के चारों ओर की रेखा
margin – बॉर्डर के बाहर का खाली स्थान (अन्य एलिमेंट से दूरी)

<style>
    div {
        width: 200px;
        padding: 10px;
        border: 2px solid black;
        margin: 15px;
    }
</style>

↑ Back to Top

13. Text and Fonts / टेक्स्ट और फ़ॉन्ट

English

Common text properties: font-family, font-size, font-weight, text-align, line-height, text-decoration, text-transform.

सरल हिंदी

सामान्य टेक्स्ट प्रॉपर्टी: font-family (फ़ॉन्ट का नाम), font-size (आकार), font-weight (मोटाई), text-align (संरेखण), line-height (पंक्तियों के बीच की दूरी), text-decoration (रेखांकन), text-transform (अक्षरों का केस)।

<style>
    p {
        font-family: Arial, sans-serif;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        line-height: 1.5;
        text-decoration: underline;
    }
</style>

↑ Back to Top

14. Borders and Shadows / बॉर्डर और छाया

English

Border: border: width style color; (e.g., border: 2px solid red;)
Border-radius: rounded corners.
Box-shadow: adds shadow to an element.
Text-shadow: shadow to text.

सरल हिंदी

बॉर्डर: border: मोटाई शैली रंग; जैसे border: 2px solid red;
Border-radius: कोने गोल करने के लिए।
Box-shadow: बॉक्स के चारों ओर छाया।
Text-shadow: टेक्स्ट की छाया।

<style>
    div {
        border: 2px solid #333;
        border-radius: 10px;
        box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
    }
    h1 {
        text-shadow: 2px 2px 5px grey;
    }
</style>

↑ Back to Top

15. Display and Positioning / डिस्प्ले और पोजिशनिंग

English

display: block, inline, inline-block, none, flex, grid.

position: static (default), relative, absolute, fixed, sticky. Used with top, left, etc.

सरल हिंदी

display: block (पूरी चौड़ाई लेता है), inline (सिर्फ जगह), inline-block (दोनों), none (छुपाना), flex, grid.

position: static (सामान्य), relative (अपनी जगह से थोड़ा हटके), absolute (सबसे नज़दीकी positioned एलिमेंट के सापेक्ष), fixed (ब्राउज़र व्यू पर स्थिर), sticky (स्क्रॉल के साथ चिपकने वाला)।

<style>
    .box {
        display: inline-block;
        position: relative;
        top: 10px;
        left: 20px;
    }
    .fixed-header {
        position: fixed;
        top: 0;
        width: 100%;
    }
</style>

↑ Back to Top

16. Flexbox / फ्लेक्सबॉक्स

English

Flexbox is a one-dimensional layout model for distributing space along a row or column.

Container properties: display: flex, flex-direction, justify-content, align-items, flex-wrap.

Item properties: flex-grow, flex-shrink, flex-basis, align-self.

सरल हिंदी

फ्लेक्सबॉक्स एक-आयामी लेआउट मॉडल है। यह रो या कॉलम में आइटम्स को व्यवस्थित करता है।

कंटेनर प्रॉपर्टी: display: flex, flex-direction (दिशा), justify-content (क्षैतिज संरेखण), align-items (लंबवत संरेखण), flex-wrap (अगली लाइन में जाने देना)।

आइटम प्रॉपर्टी: flex-grow (बढ़ने की क्षमता), flex-shrink (सिकुड़ने की), flex-basis (आधार आकार), align-self (अपना अलग align)।

<style>
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .item {
        flex: 1; /* grow equally */
        margin: 5px;
    }
</style>

↑ Back to Top

17. CSS Grid / सीएसएस ग्रिड

English

Grid is a two-dimensional layout system. Define rows and columns with grid-template-rows / grid-template-columns.

सरल हिंदी

ग्रिड दो-आयामी लेआउट सिस्टम है। पंक्तियाँ (rows) और कॉलम (columns) खुद डिफाइन करते हैं।

<style>
    .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr;
        gap: 10px;
    }
    .item {
        background: lightgray;
    }
</style>

↑ Back to Top

18. Responsive Design / रिस्पॉन्सिव डिज़ाइन

English

Responsive design makes web pages look good on all devices. Key ingredients:

<meta name="viewport" content="width=device-width, initial-scale=1">
Media queries (@media (max-width: 600px) { ... })
Flexible images and grids (use percentages, fr units)

सरल हिंदी

रिस्पॉन्सिव डिज़ाइन से वेब पेज हर स्क्रीन साइज (मोबाइल, टैबलेट, डेस्कटॉप) पर सही दिखता है।

<meta name="viewport" ...> – यह सुनिश्चित करता है कि पेज डिवाइस की चौड़ाई के अनुसार स्केल हो।
मीडिया क्वेरी (@media (max-width: 600px) { }) – छोटी स्क्रीन पर अलग स्टाइल लागू करने के लिए।
लचीली छवियाँ और ग्रिड – प्रतिशत या fr यूनिट का उपयोग।

<style>
    .container { width: 100%; }
    @media (max-width: 600px) {
        .container { background: lightblue; }
    }
</style>

↑ Back to Top

19. CSS Animations / सीएसएस एनिमेशन

English

Transitions: smoothly change property values over time. transition: property duration timing-function delay;

Animations: more complex, using @keyframes and animation properties.

सरल हिंदी

ट्रांज़िशन: किसी प्रॉपर्टी को धीरे-धीरे बदलने के लिए। transition: all 0.5s ease;

एनिमेशन: @keyframes से अलग-अलग चरण बनाकर और animation प्रॉपर्टी से लागू करते हैं।

<style>
    .box {
        width: 100px;
        height: 100px;
        background: red;
        transition: background 0.5s;
    }
    .box:hover {
        background: blue;
    }

    @keyframes example {
        from {background: red;}
        to {background: yellow;}
    }
    .animated {
        animation: example 2s infinite alternate;
    }
</style>

↑ Back to Top

HTML & CSS3 Notes (English + Simple Hindi)

Topics of HTML

1. Introduction to HTML / एचटीएमएल का परिचय

English

सरल हिंदी

2. Basic HTML Tags / बुनियादी एचटीएमएल टैग

English

सरल हिंदी

3. Text Formatting / टेक्स्ट फॉर्मेटिंग

English

सरल हिंदी

4. Lists / सूचियाँ

English

सरल हिंदी

5. Links and Images / लिंक और छवियाँ

English

सरल हिंदी

6. Tables / तालिकाएँ

English

सरल हिंदी

7. Forms / फॉर्म

English

सरल हिंदी

8. Semantic HTML / सीमेंटिक एचटीएमएल

English

सरल हिंदी

9. Introduction to CSS / सीएसएस का परिचय

English

सरल हिंदी

10. CSS Selectors / सीएसएस सेलेक्टर

English

सरल हिंदी

11. Colors and Backgrounds / रंग और पृष्ठभूमि

English

सरल हिंदी

12. CSS Box Model / बॉक्स मॉडल

English

सरल हिंदी

13. Text and Fonts / टेक्स्ट और फ़ॉन्ट

English

सरल हिंदी

14. Borders and Shadows / बॉर्डर और छाया

English

सरल हिंदी

15. Display and Positioning / डिस्प्ले और पोजिशनिंग

English

सरल हिंदी

16. Flexbox / फ्लेक्सबॉक्स

English

सरल हिंदी

17. CSS Grid / सीएसएस ग्रिड

English

सरल हिंदी

18. Responsive Design / रिस्पॉन्सिव डिज़ाइन

English

सरल हिंदी

19. CSS Animations / सीएसएस एनिमेशन

English

सरल हिंदी