Guide Part 2: HTML Tags, Structure र वास्तविक प्रयोग
Part 1 मा हामीले HTML के हो, किन चाहिन्छ, र सानो पेज कसरी बनाउने भनेर बुझ्यौँ।
अब Part 2 मा HTML ले कसरी वेबपेज “बोल्छ”, र कुन–कुन ट्यागले के काम गर्छ भन्ने कुरा सजिलो भाषामा बुझौँ।
HTML किन “ट्याग” मा आधारित छ?
HTML मा सबै कुरा ट्याग (Tag) भित्र लेखिन्छ।
ट्याग भनेको:
कम्प्युटरलाई निर्देशन दिने चिन्ह
जस्तै:
<h1>= यो ठूलो शीर्षक हो
<p>= यो सामान्य लेख हो
<a>= यो लिंक हो
<img>= यो फोटो हो
मानौँ ट्याग भनेको घर बनाउँदा प्रयोग हुने इँटा, ढोका, झ्याल जस्तै हो।
HTML ट्याग कसरी काम गर्छ?
धेरैजसो HTML ट्याग जोडीमा हुन्छन्:
<ट्याग> सामग्री </ट्याग>
उदाहरण:
<p> म नेपालमा बस्छु। </p>
सुरुको <p> ले भन्छ: “paragraph सुरु” अन्त्यको </p> ले भन्छ: “paragraph सकियो”
Heading Tags — शीर्षक लेख्ने तरिका
HTML मा ६ प्रकारका heading हुन्छन्:
<h1> सबैभन्दा ठूलो शीर्षक </h1>
<h2> अलि सानो </h2>
<h3> अझ सानो </h3>
...
<h6> सबैभन्दा सानो </h6>
प्रयोग:
<h1>→ पेजको मुख्य शीर्षक (एकै पटक प्रयोग गर्न राम्रो)
<h2>, <h3>→ उप–शीर्षक
गाउँको उदाहरण:
सूचना बोर्डको ठूलो अक्षर = <h1>
भित्रका बुँदा शीर्षक = <h2>
Paragraph — लेख लेख्ने ट्याग
<p>
यो एउटा लेख हो।
HTML ले यसलाई paragraph भनेर बुझ्छ।
</p>
सबै कथा, जानकारी, विवरण <p> भित्र लेखिन्छ।
Link — अरू पेजमा लैजाने बाटो
<a href="https://google.com"> Google खोल्नुहोस् </a>
<a>= anchor (लिंक)
href= कहाँ लैजाने हो
प्रयोग:
- Facebook page
- YouTube channel
- अर्को HTML पेज
मानौँ:
गाउँको बोर्डमा “यहाँ थिच्नुहोस्” लेखिएको कागज = <a> ट्याग
Image — फोटो राख्ने तरिका
<img src="photo.jpg" alt="मेरो फोटो">
src= फोटो कहाँ छ
alt= फोटो नखुलेमा देखिने शब्द
<img>ट्याग बन्द गर्नुपर्दैन (self-closing)
List — सूची बनाउने (धेरै उपयोगी)
1️⃣ Unordered List (बुलेट चिन्ह)
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
2️⃣ Ordered List (नम्बर सहित)
<ol>
<li>कम्प्युटर खोल्नु</li>
<li>HTML लेख्नु</li>
<li>ब्राउजरमा खोल्नु</li>
</ol>
स्कुलको पाठ्यक्रम, कामको सूची, मेनु—सबैमा प्रयोग हुन्छ।
Simple Full Page Example (गाउँमै काम लाग्ने)
<!DOCTYPE html>
<html>
<head>
<title>मेरो गाउँ</title>
</head>
<body>
<h1>मेरो गाउँको वेबसाइट</h1>
<p>
यो वेबसाइट हाम्रो गाउँको जानकारी दिन बनाइएको हो।
</p>
<h2>हाम्रो गाउँमा के–के छ?</h2>
<ul>
<li>विद्यालय</li>
<li>स्वास्थ्य चौकी</li>
<li>खेल मैदान</li>
</ul>
<a href="contact.html">सम्पर्क गर्नुहोस्</a>
</body>
</html>
यही कोडले गाउँको परिचय पेज बनिसक्छ।
HTML ले के गर्न सक्दैन?
इमान्दार कुरा गरौँ HTML ले:
- डिजाइन सुन्दर बनाउँदैन
- बटन चलाउँदैन
- डेटा save गर्दैन
त्यसका लागि:
- CSS → सजावट
- JavaScript → चलायमान
- PHP / Backend → डेटा
तर,
HTML बिना यी सबै बेकार छन्।
Part 2 बाट के सिक्यौँ?
✅ HTML ट्याग के हो
✅ Heading, paragraph, link, image, list
✅ सानो तर पूरा वेबपेज
✅ HTML को वास्तविक प्रयोग
Comments
test coment
Test Comment