Digital Padhai – Free Computer Notes, IT-ITeS & Vocational Notes for Class 9 & 10

🌍 HTML & Web Design
एचटीएमएल एवं वेब डिज़ाइन

1. HTML क्या है?

HTML (HyperText Markup Language) वेब पेज बनाने की मानक भाषा है।
यह वेब पेज की संरचना और सामग्री को टैग्स के माध्यम से निर्धारित करती है।
इंटरनेट पर हर वेब पेज HTML (CSS और JavaScript के साथ) में लिखा होता है।

2. HTML दस्तावेज़ की मूल संरचना

<!DOCTYPE html>
<html>
<head>
<title>मेरा पहला वेबपेज</title>
</head>
<body>
<h1>नमस्ते दुनिया!</h1>
<p>यह मेरा पहला वेबपेज है।</p>
</body>
</html>

<!DOCTYPE html> – डॉक्यूमेंट का प्रकार।
<html> – वेबपेज का मुख्य टैग।
<head> – मेटा जानकारी, टाइटल, CSS लिंक।
<body> – दृश्य सामग्री।
<h1> से <h6> – हेडिंग।
<p> – पैराग्राफ।

3. सामान्य HTML टैग्स

टैग विवरण <a> हाइपरलिंक बनाता है <img> इमेज दिखाता है <ul> अनऑर्डर्ड लिस्ट <ol> ऑर्डर्ड लिस्ट <li> लिस्ट आइटम <div> कंटेनर <span> इनलाइन कंटेनर <form> फॉर्म बनाता है <input> इनपुट फील्ड <table> टेबल बनाता है <tr> टेबल की पंक्ति <td> टेबल का सेल <th> टेबल हेडर

4. HTML Attributes

एट्रिब्यूट एलिमेंट्स के बारे में अतिरिक्त जानकारी देते हैं।
उदाहरण: <a href="https://www.google.com" target="_blank">Google</a>
href – लिंक का URL
target="_blank" – लिंक नई टैब में खुले

5. CSS का परिचय

CSS (Cascading Style Sheets) HTML को स्टाइल करने के लिए।
रंग, फ़ॉन्ट, लेआउट, बॉर्डर आदि को नियंत्रित करता है।

<p style="color: blue; font-size: 18px;">यह स्टाइल किया गया पैराग्राफ है।</p>

6. CSS सिलेक्टर

सिलेक्टर उदाहरण विवरण Element p { color: red; } सभी <p> एलिमेंट्स स्टाइल ID #main { font-size: 20px; } id="main" वाले एलिमेंट्स Class .highlight { background-color: yellow; } class="highlight" वाले एलिमेंट्स Universal * { margin: 0; } सभी एलिमेंट्स

7. JavaScript का परिचय

वेब पेज में इंटरएक्टिविटी जोड़ने के लिए।
उदाहरण: बटन क्लिक, फॉर्म वेलिडेशन, डायनामिक कंटेंट

<button onclick="alert('नमस्ते दुनिया!')">Click करें</button>

8. वेब पेज लेआउट

Header (हैडर) – ऊपर का हिस्सा (लोगो, नेविगेशन)।
Navigation Bar (नेविगेशन) – पेज मेन्यू।
Main Content (मुख्य सामग्री) – लेख, इमेज।
Sidebar (साइडबार) – अतिरिक्त लिंक/जानकारी।
Footer (फूटर) – नीचे का हिस्सा (कॉपीराइट, संपर्क)।

9. Responsive Web Design

वेबसाइट मोबाइल, टैबलेट और डेस्कटॉप पर काम करनी चाहिए।
Media Queries CSS में स्क्रीन साइज़ के हिसाब से स्टाइल बदलने के लिए।

@media (max-width: 768px) { body { background-color: lightgray; } }

10. Web Hosting और Domain

Domain (डोमेन) – आपकी वेबसाइट का पता (जैसे www.example.com)
Hosting (होस्टिंग) – सर्वर स्पेस जहाँ वेबसाइट फाइल्स रखी जाती हैं।
लोकप्रिय होस्टिंग: GoDaddy, HostGator, Bluehost

1. What is HTML?

HTML (HyperText Markup Language) is the standard language used to create web pages.
It defines the structure and content of a webpage using tags.
Every webpage you see on the internet is written in HTML (along with CSS & JavaScript).

2. Basic Structure of HTML Document

<!DOCTYPE html> <!DOCTYPE html>
<html>
<head>
<title>मेरा पहला वेबपेज</title>
</head>
<body>
<h1>नमस्ते दुनिया!</h1>
<p>यह मेरा पहला वेबपेज है।</p>
</body>
</html>

<!DOCTYPE html> – Declares the document type.
<html> – Root element of the webpage.
<head> – Contains meta information, title, links to CSS.
<body> – Contains visible content.
<h1> to <h6> – Headings.
<p> – Paragraph.

3. Common HTML Tags

Tag Description <a> Creates hyperlinks <img> Displays images <ul> Unordered list <ol> Ordered list <li> List item <div> Container for grouping elements <span> Inline container <form> Creates form for user input <input> Input field inside form <table> Creates tables <tr> Table row <td> Table cell <th> Table header

4. HTML Attributes

Attributes provide additional information about elements.
Example: <a href="https://www.google.com" target="_blank">Google</a>
href – URL of the link.
target="_blank" – Opens link in new tab.

5. Introduction to CSS

CSS (Cascading Style Sheets) is used to style HTML elements.
Example: Colors, fonts, layout, spacing, borders.

<p style="color: blue; font-size: 18px;">This is a styled paragraph.</p>

6. CSS Selectors

Selector Example Description Element p { color: red; } Styles all <p> elements ID #main { font-size: 20px; } Styles element with id="main" Class .highlight { background-color: yellow; } Styles all elements with class="highlight" Universal * { margin: 0; } Styles all elements

7. Introduction to JavaScript

JavaScript is used to add interactivity to web pages.
Example: Button clicks, form validation, dynamic content.

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

8. Web Page Layout

Header – Top section (logo, navigation).
Navigation Bar – Menu for pages.
Main Content – Articles, text, images.
Sidebar – Extra links or info.
Footer – Bottom section (copyright, contact).

9. Responsive Web Design

Websites should work on mobile, tablet, and desktop.
Media Queries in CSS allow different styles for different screen sizes.

@media (max-width: 768px) { body { background-color: lightgray; } }

10. Web Hosting & Domain

Domain – Your website address (e.g., www.example.com).
Hosting – Server space where your website files are stored.
Popular hosting services: GoDaddy, HostGator, Bluehost.

Last Updated: 07-09-2025 07:25 AM | Posted by: Er. Manoj Kumar

🌍 HTML & Web Designएचटीएमएल एवं वेब डिज़ाइन

1. HTML क्या है?

2. HTML दस्तावेज़ की मूल संरचना

3. सामान्य HTML टैग्स

4. HTML Attributes

5. CSS का परिचय

6. CSS सिलेक्टर

7. JavaScript का परिचय

8. वेब पेज लेआउट

9. Responsive Web Design

10. Web Hosting और Domain

1. What is HTML?

2. Basic Structure of HTML Document

3. Common HTML Tags

4. HTML Attributes

5. Introduction to CSS

6. CSS Selectors

7. Introduction to JavaScript

8. Web Page Layout

9. Responsive Web Design

10. Web Hosting & Domain

🌍 HTML & Web Design
एचटीएमएल एवं वेब डिज़ाइन