HTML Tutorial Part-2: Ek Aur Kadam Aage – Apna Web Page Banana Seekhein
Table of Contents
Aap sabka swagat hai! Agar aapne Part-1 miss kar diya hai, toh HTML Basics Part-1 ko zaroor padhein. Wahaan humne HTML ka base samjhaaya tha. Iss blog mein hum zyada depth mein jaayenge aur ek actual webpage banakar dekhenge. Yahaan aapko milega ek proper structure banane ka gyaan, HTML ke naye tags ka introduction, aur multi-page linking ka fun experience!
Iss Blog Mein Aap Kya Seekhenge?
- Webpage structure kaise banate hain? (Headers, Paragraphs, Links aur Images).
- Attributes ka role aur unka sahi use kaise karein.
- Ek webpage ko doosre se kaise link karein.
- Homework aur challenges jo aapki practice ko next level tak le jaaye.
Step 1: Apna Webpage Structure Samajhna
Sabse pehle hum basic blocks ko samjhein:
- Header: Ye title ya heading hoti hai jo sabse prominent hoti hai.
- Paragraph: Text likhne ke liye yeh use hota hai.
- Image: Page ko visually attractive banata hai.
- Link: Ek page ko doosre se connect karta hai.
Basic Code Structure
Yeh raha ek simple structure jo har webpage ke liye zaroori hai:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mera Pahla Webpage</title>
</head>
<body>
<!-- Header -->
<h1>Swagat Hai Aapka</h1>
<!-- Paragraph -->
<p>Namaste! Yeh mera pehla webpage hai jo main HTML seekhte hue bana raha hoon.</p>
<!-- Image -->
<img src="https://via.placeholder.com/150" alt="Sample Image">
<!-- Link -->
<a href="https://www.google.com" target="_blank">Google Ko Dekhein</a>
</body>
</html>
Isse index.html naam se save karein aur apne browser mein kholke dekhein. Aapka pehla structured webpage tayar hai!
Step 2: Tags aur Attributes Ko Samajhna
1. <h1> to <h6>: Headers
Aapko HTML mein 6 types ki headings milti hain:
<h1>sabse badi aur important hoti hai.<h6>sabse chhoti aur kam important hoti hai.
Example:
<h1>Yeh Hai Heading 1</h1>
<h2>Yeh Hai Heading 2</h2>
<h3>Yeh Hai Heading 3</h3>
2. <p>: Paragraph
Text likhne ke liye paragraph tag use hota hai.
Example:
<p>Yeh ek paragraph ka example hai.</p>
3. <img>: Image
Image dikhane ke liye aap <img> tag ka use karte hain. Iske important attributes:
src: Image ka URL ya file ka path.alt: Agar image load na ho, to ye text dikhega.
Example:
<img src="https://via.placeholder.com/150" alt="Example Image">
4. <a>: Links
Ye tag ek page ko doosre page ya kisi resource se connect karta hai.
href: Jaha link jaana hai.target="_blank": Link ko naye tab mein kholta hai.
Example:
<a href="about.html">About Page Par Jaayein</a>
Step 3: Multi-Page Linking Kaise Karein
1. Ek Naya Page Banayein
Ek naye file ka naam about.html rakhein aur niche diya gaya code copy karein:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About Page</title>
</head>
<body>
<h1>Mere Baare Mein</h1>
<p>Yeh hai mera about page jo maine HTML mein banaya hai.</p>
<a href="index.html">Home Par Wapas Jaayein</a>
</body>
</html>
2. Link Karein
Ab apne index.html mein ek link add karein:
<a href="about.html">Mere Baare Mein Jaanein</a>
Step 4: Homework
-
Contact Page Banayein:
- Ek header, ek paragraph aur home page ke link ka use karein.
-
Images Add Karein:
- Apne favorite image ka URL dhundhein aur
<img>tag mein lagayein.
- Apne favorite image ka URL dhundhein aur
-
Links Ko Explore Karein:
- Apne favorite website ko apne page ke through link karein.
Step 5: Bonus Challenge
Ek Personal Website banane ki koshish karein:
- Home Page: Aapka introduction aur about page ka link.
- Portfolio Page: Apne projects ko showcase karein (real ya imaginary).
- Contact Page: Social media profiles ke links add karein.
Pro Tips for Beginners
-
Online Editors Use Karein:
Agar file save karne mein dikkat ho rahi ho, to CodePen ya JSFiddle ka use karein. -
File Ka Extension Sahi Rakhein:
File ko.htmlextension ke saath save karein. -
Code Validate Karein:
Apne code ko W3C Validator se check karein.
Part-1 Ka Link
Agar aapne ab tak Part-1 nahi pada hai, toh HTML Basics Part-1 par jaayein aur shuruaat se seekhein.
Conclusion
Is blog mein aapne seekha:
- Webpage kaise structure karein.
- Links aur images ka use.
- Ek se zyada pages kaise link karein.
Ab practice karein aur Part-3 ke liye ready ho jaayein jisme hum lists, tables aur forms ke baare mein seekhenge.
SEO Tags for Blog
- HTML Basics in Hinglish
- Webpage Structure for Beginners
- Linking Multiple HTML Pages
- How to Create Web Pages Easily
- Web Development Hinglish Guide
.jpg&description=HTML Tutorial Part-2 for Beginners: Attributes and Styling){kind=link}