HTML Part-3: Tables, Forms, and Multimedia Basics with Clear Examples and Outputs
Table of Contents
Web development sikhi ja rahi hai? Kya aapne pehle ke parts (HTML Basics aur Attributes) miss kar diye? Part-1: HTML Basics aur Part-2: Attributes and Styling ko zarur padhein.
Ab hum HTML ke third aur mazedar part mein ghusne wale hain: Tables, Forms, aur Multimedia. Yahaan aapko na sirf concepts, balki live examples aur outputs bhi milenge, taaki sab kuch crystal clear ho!
1. Tables: Data Ko Organize Karna Sikhein
Tables ka use tab hota hai jab aapko information ko rows aur columns mein dikhana ho. For example: timetable, price lists, ya contact details.
Basic Table Example
<table border="1">
<tr>
<th>Day</th>
<th>Subject</th>
<th>Time</th>
</tr>
<tr>
<td>Monday</td>
<td>Math</td>
<td>10:00 AM</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Science</td>
<td>11:00 AM</td>
</tr>
</table>
Explanation:
<table>: Table ka main container.<tr>: Table row define karta hai.<th>: Table header hota hai (bold aur centered).<td>: Table cell hoti hai jo data rakhti hai.
Output:
| Day | Subject | Time |
|---|---|---|
| Monday | Math | 10:00 AM |
| Tuesday | Science | 11:00 AM |
Dekha, kitna simple hai?
2. Forms: User Input Kaise Le?
Forms ka use user ke data ko collect karne ke liye hota hai, jaise login/signup forms, feedback forms, etc.
Signup Form Example
<form action="/submit" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Sign Up">
</form>
Explanation:
<form>: Form ka container.action: Data submit hone ka destination (e.g., server link).method: Data bhejne ka tareeqa (GET ya POST).<label>: Field ke naam ko dikhata hai.<input>: Input lene ke liye.type: Batata hai ki kaunsa input type hai (text, email, password).
Output:
Username: []
Email: []
Password: [_________]
[Sign Up Button]
(Ab is form ka output bilkul live lag raha hoga, hai na?)
3. Multimedia: Webpage Ko Interesting Banaiye
Multimedia ka use user engagement ke liye hota hai, jaise images, videos, ya audios.
Image Example
<img src="sunset.jpg" alt="Beautiful Sunset" width="500">
Explanation:
src: Image ka location (path).alt: Alternative text jo tab show hota hai jab image load na ho.width: Image ka size set karta hai (pixels mein).
Output:
A beautiful image of a sunset (jo image aapne lagayi hogi).
Video Example
<video controls width="500">
<source src="intro.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Explanation:
controls: Play/pause aur volume buttons show karta hai.source: Video ka path aur type specify karta hai.
Output:
Ek video player screen with play/pause button (jo bhi aapka video file ho).
4. Example Webpage: Sab Kuch Saath Mein
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Part-3</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<h2>Schedule</h2>
<table border="1">
<tr>
<th>Day</th>
<th>Activity</th>
</tr>
<tr>
<td>Monday</td>
<td>Reading</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Coding</td>
</tr>
</table>
<h2>Contact Me</h2>
<form action="/contact" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Send">
</form>
<h2>Watch My Video</h2>
<video controls width="500">
<source src="example.mp4" type="video/mp4">
</video>
</body>
</html>
Isko ek file mein save karke dekhiye, aapka ek functional webpage ready hai!
Homework for Practice
- Ek table banaiye jo aapki monthly expenses dikhaye (columns: Item, Cost, Date).
- Ek feedback form banaiye jisme user rating de sake (1-5).
- Ek video embed karke ek webpage banaiye jo aapki favorite movie ka trailer show kare.
Conclusion
Ab aap tables, forms, aur multimedia ko effectively use karna seekh chuke hain. Aage wale part mein hum navigation aur CSS ka introduction dekhenge jo ek webpage ko aur bhi attractive aur interactive banayega. Stay tuned!
(Aapko ye part pasand aaya? Part-1 aur Part-2 bhi zarur padhein!)
.jpg&description=HTML Tutorial Part-3: Tables, Forms, and Multimedia Basics with Clear Examples and Outputs){kind=link}