Vidya Vatika

🌿 विद्या वाटिका: शिक्षकों और छात्रों के लिए ज्ञान साझा करने का मंच

विद्या वाटिका, Gurumittra.in का एक विशेष अनुभाग है जहाँ शिक्षक और छात्र किसी भी शैक्षिक विषय पर अपना ज्ञान, विचार, रचनात्मकता और अनुभव साझा कर सकते हैं।

पाठ योजनाओं और शिक्षण विधियों से लेकर निबंध, परियोजनाएँ, कविताएँ और नवीन विचारों तक—यदि यह सीखने में योगदान देता है, तो यह यहाँ शामिल होना चाहिए।

🌱 साथ मिलकर सीखें
🌱 ज्ञान साझा करें
🌱 एक समुदाय के रूप में विकसित हों

बिहार के शिक्षकों और छात्रों के लिए – बिहार के शिक्षा समुदाय द्वारा

🌼 अपना ज्ञान साझा करें। दूसरों को प्रेरित करें। साथ मिलकर विकास करें।
केवल Gurumittra.in पर

कृपया किसी भी विषय पर अपनी विशेषज्ञता हमारे साथ साझा करें... इसे आपके नाम और पदनाम के साथ gurumittra.in पर प्रकाशित किया जाएगा।

HTML for 9-12

HTML (HyperText Markup Language) वेब पेज बनाने की सबसे बुनियादी भाषा है। यदि आप बिल्कुल शुरुआत से सीखना चाहते हैं, तो यह पहला पाठ आपके लिए है।

Lesson 1: HTML क्या है?

HTML एक Markup Language है जिसका उपयोग वेब पेज की संरचना (Structure) बनाने के लिए किया जाता है।

उदाहरण:

<h1>Welcome to My Website</h1> <p>This is my first webpage.</p>

Output:

Welcome to My Website

This is my first webpage.

HTML Document Structure

हर HTML पेज की एक बेसिक संरचना होती है:

<!DOCTYPE html>

<html>

<head>

<title>My First Web Page</title>

</head>

<body>

<h1>Hello World!</h1>

<p>This is my first HTML page.</p>

</body>

</html>

Explanation

Tag	Purpose
<!DOCTYPE html>	HTML5 document declaration
<html>	HTML document starts
<head>	Information about page
<title>	Browser tab title
<body>	Visible content of webpage

Common HTML Tags

Heading Tags

<h1>Main Heading</h1>

<h2>Sub Heading</h2>

<h3>Small Heading</h3>

Paragraph

<p>This is a paragraph.</p>

Line Break

First Line<br> Second Line

Bold Text

Italic Text

<i>Italic Text</i>

Create Your First Webpage

Open Notepad and type:

<!DOCTYPE html>

<html>

<head>

<title>My First Page</title>

</head>

<body>

<h1>My Name is Kamlesh</h1>

<p>I am learning HTML.</p>

</body>

</html>

Save as:

index.html

Double-click the file to open it in Chrome.

Practical Exercise 1

Create a page with:

Your Name
School Name
District Name
One paragraph about yourself

Example:

<!DOCTYPE html> <html> <head> <title>About Me</title> </head> <body> <h1>Ramesh Raman</h1> <h2>UHSS Tarha Dandari</h2> <p> I am interested in computers and web development. </p> </body> </html>

Homework

Create a webpage containing:

3 headings
2 paragraphs
1 bold text
1 italic text
1 line break

Next Lesson (Lesson 2)

हम सीखेंगे:

HTML Attributes
Images (<img>)
Links (<a>)
Lists (<ul>, <ol>)
Comments ()

यही वे टैग हैं जिनसे आप अपनी पहली वास्तविक वेबसाइट बनाना शुरू करेंगे।

Lesson 2: HTML Attributes, Links, Images, Lists & Comments

पिछले पाठ में आपने HTML की बेसिक संरचना सीखी। अब हम वे टैग सीखेंगे जिनसे वेब पेज अधिक उपयोगी और आकर्षक बनता है।

1. HTML Attributes

Attributes किसी टैग को अतिरिक्त जानकारी देते हैं।

उदाहरण:

<p title="This is a paragraph"> Move mouse here </p>

यहाँ title एक attribute है।

सामान्य रूप:

<tag attribute="value">Content</tag>

2. HTML Links (<a> Tag)

किसी वेबसाइट या पेज पर जाने के लिए लिंक का उपयोग किया जाता है।

<a href="https://www.google.com"> Open Google </a>

New Tab में खोलना

<a href="https://www.google.com" target="_blank"> Open Google </a>

3. Images (<img> Tag)

वेब पेज पर चित्र दिखाने के लिए।

Width और Height सेट करना

Attribute	Purpose
src	Image location
alt	Alternative text
width	Width
height	Height

4. Lists

Unordered List (Bullets)

<ul>

<li>Science</li>

<li>English</li>

</ul>

Output:

Math
Science
English

Ordered List (Numbers)

<ol>

<li>Study</li>

<li>Sleep</li>

</ol>

Output:

Wake Up
Study
Sleep

5. HTML Comments

Comments browser में दिखाई नहीं देते।

उदाहरण:

<h1>My Website</h1>

Mini Project: Student Profile Page

<!DOCTYPE html>

<html>

<head>

<title>Student Profile</title>

</head>

<body>

<h1>Kumar Sinha</h1>

<h2>My Subjects</h2>

<ul>

<li>Science</li>

<li>Computer</li>

</ul>

<h2>Daily Routine</h2>

<ol>

<li>Go to School</li>

<li>Study</li>

</ol>

<p> Visit <a href="https://www.w3schools.com" target="_blank"> W3Schools </a> to learn more HTML. </p>

</body>

</html>

Practice Exercise

Create a webpage that contains:

✅ Your Name
✅ One Photo
✅ Your School Name
✅ 5 Favourite Subjects (Bullet List)
✅ Daily Routine (Number List)
✅ A link to Google

Quick Quiz

Which tag creates a hyperlink?
- a) <img>
- b) <a>
- c) <link>
Which attribute specifies image location?
- a) href
- b) alt
- c) src
Which tag creates a numbered list?
- a) <ul>
- b) <ol>
- c) <li>

Answers: 1-b, 2-c, 3-b

Next Lesson (Lesson 3)

हम सीखेंगे:

Tables (<table>)
Forms (<form>)
Input Fields
Buttons
Labels
Creating a Student Registration Form

यहीं से HTML का वास्तविक उपयोग शुरू होता है।

Lesson 3: Tables, Forms & Student Registration Form

1. HTML Table (<table>)

टेबल का उपयोग डेटा को Rows (पंक्तियों) और Columns (स्तंभों) में दिखाने के लिए किया जाता है।

Example

<!DOCTYPE html>

<html>

<body>

<h2>Student Marks Table</h2>

<tr> <th>Roll No</th> <th>Name</th> <th>Marks</th> </tr> <tr> <td>101</td> <td>Rahul</td> <td>85</td> </tr> <tr> <td>102</td> <td>Priya</td> <td>92</td> </tr> </table> </body> </html>

Important Tags

Tag	Meaning
<table>	Table बनाता है
<tr>	Table Row
<th>	Table Heading
<td>	Table Data

2. HTML Form (<form>)

Form का उपयोग User से जानकारी लेने के लिए किया जाता है।

Basic Structure

3. Input Fields

Text Box

Password

Email

Number

Date

4. Labels (<label>)

Label Input Field का नाम दिखाता है।

Output:

Name: [__________]

5. Buttons

Submit Button

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

Reset Button

<button type="reset">Reset</button>

6. Radio Button

Gender चुनने के लिए

<input type="radio" name="gender"> Male <input type="radio" name="gender"> Female

7. Checkbox

Hobbies चुनने के लिए

<input type="checkbox"> Reading <input type="checkbox"> Sports <input type="checkbox"> Music

Project: Student Registration Form

<!DOCTYPE html> <html> <head> <title>Student Registration Form</title> </head> <body> <h1>Student Registration Form</h1> <form> <label>Student Name:</label> <input type="text"><br><br> <label>Father's Name:</label> <input type="text"><br><br> <label>Email:</label> <input type="email"><br><br> <label>Mobile Number:</label> <input type="number"><br><br> <label>Date of Birth:</label> <input type="date"><br><br> <label>Gender:</label> <input type="radio" name="gender"> Male <input type="radio" name="gender"> Female <br><br> <label>Hobbies:</label> <input type="checkbox"> Reading <input type="checkbox"> Sports <input type="checkbox"> Music <br><br> <button type="submit">Register</button> <button type="reset">Reset</button> </form> </body> </html>

Assignment

Question 1

एक Student Registration Form बनाइए जिसमें:

Name
Father's Name
Class
Mobile Number
Gender
Submit Button

हो।

Question 2

निम्न डेटा की Table बनाइए:

Roll No	Name	Class	Marks
1	Amit	9	78
2	Neha	9	88
3	Ravi	9	91

Lesson 4 (Next)

हम सीखेंगे:

HTML Lists (<ul>, <ol>, <li>)
Images (<img>)
Links (<a>)
Embedding Videos
Creating a Complete School Website Home Page

यहीं से आप वास्तविक वेबसाइट बनाना शुरू करेंगे।

Samadhan

Vidya Vatika

🌿 विद्या वाटिका: शिक्षकों और छात्रों के लिए ज्ञान साझा करने का मंच

HTML for 9-12

Lesson 1: HTML क्या है?

Welcome to My Website

HTML Document Structure

Explanation

Common HTML Tags

Heading Tags

Paragraph

Line Break

Bold Text

Italic Text

Create Your First Webpage

Practical Exercise 1

Homework

Next Lesson (Lesson 2)

Lesson 2: HTML Attributes, Links, Images, Lists & Comments

1. HTML Attributes

2. HTML Links (<a> Tag)

New Tab में खोलना

3. Images (<img> Tag)

Width और Height सेट करना

4. Lists

Unordered List (Bullets)

Ordered List (Numbers)

5. HTML Comments

Mini Project: Student Profile Page

Practice Exercise

Quick Quiz

Next Lesson (Lesson 3)

Lesson 3: Tables, Forms & Student Registration Form

1. HTML Table (<table>)

Example

Important Tags

2. HTML Form (<form>)

Basic Structure

3. Input Fields

Text Box

Password

Email

Number

Date

4. Labels (<label>)

5. Buttons

Submit Button

Reset Button

6. Radio Button

7. Checkbox

Project: Student Registration Form

Assignment

Question 1

Question 2

Lesson 4 (Next)

Quick Link

Contact

Quick Link

Newsletter

⚠️ Disclaimer