Google Play badge

हाइपरटेक्स्ट मार्कअप भाषा


पाठ: हाइपरटेक्स्ट मार्कअप भाषा (HTML)

HTML को अर्थ हाइपरटेक्स्ट मार्कअप ल्याङ्ग्वेज हो। यो वेब पृष्ठहरू निर्माण गर्न प्रयोग गरिने विशेष भाषा हो। जब तपाईं वेबसाइटमा जानुहुन्छ, कम्प्युटरले तपाईंलाई शब्दहरू, चित्रहरू र लिङ्कहरू देखाउन HTML पढ्छ। HTML लाई वेबसाइटको निर्माण ब्लकको रूपमा सोच्नुहोस्। जसरी तपाईं घर वा कार बनाउन लेगो टुक्राहरू प्रयोग गर्नुहुन्छ, हामी वेब पृष्ठ निर्माण गर्न HTML ट्यागहरू प्रयोग गर्छौं।

HTML भनेको के हो?

HTML भनेको कम्प्युटरलाई वेब पृष्ठमा पाठ, छवि, भिडियो र लिङ्कहरू कसरी प्रदर्शन गर्ने भनेर बताउने कोड हो। यो तपाईंको लागि तस्वीर कोर्ने साथीलाई निर्देशन दिनु जस्तै हो। HTML ले वेब पृष्ठको कुनै भागको सुरुवात र अन्त्य चिन्ह लगाउन कोण कोष्ठक भित्र शब्दहरू प्रयोग गर्दछ, जसलाई ट्याग भनिन्छ।

HTML किन महत्त्वपूर्ण छ?

तपाईंले भ्रमण गर्ने हरेक वेबसाइटले कुनै न कुनै रूपमा HTML प्रयोग गर्दछ। HTML बिना, तपाईंले हेर्नको लागि कुनै वेब पृष्ठहरू हुने थिएनन्। HTML ले सामग्री व्यवस्थित गर्न मद्दत गर्दछ र कम्प्युटरलाई पृष्ठ कसरी प्रदर्शन गर्ने भनेर बताउँछ। वेब विकासमा यो पहिलो कुरा हो जुन कसैले सिक्छ किनभने यसले इन्टरनेटलाई काम गर्छ!

HTML कागजातको आधारभूत संरचना

HTML कागजातको एउटा विशेष संरचना हुन्छ। यो <code><!DOCTYPE html></code> नामक घोषणाबाट सुरु हुन्छ जसले कम्प्युटरलाई पृष्ठले HTML प्रयोग गरिरहेको बताउँछ। त्यसपछि कागजातलाई दुई मुख्य भागमा विभाजन गरिन्छ: टाउको र शरीर।

एउटा धेरै साधारण HTML कागजात यस्तो देखिन्छ:

<कोड><!DOCTYPE html>
<html>>
<हेड>>
<title>मेरो पहिलो वेब पेज</title>
</head>
<शरीर>>
<p>नमस्ते, संसार!</p>
</शरीर>
</html> </code>

यस उदाहरणमा, <head> खण्डले पृष्ठको शीर्षक दिन्छ, र <body> खण्ड त्यो हो जहाँ तपाईंले स्क्रिनमा देखा पर्ने सामग्री राख्नुहुन्छ।

HTML ट्याग र तत्वहरू

HTML ले वेब पृष्ठको विभिन्न भागहरू चिन्ह लगाउन ट्यागहरू प्रयोग गर्दछ। ट्याग भनेको कोण कोष्ठक भित्रको शब्द हो। उदाहरणका लागि, <code><p></code> ले कम्प्युटरलाई बताउँछ कि त्यसपछिको अनुच्छेद अनुच्छेद हो। जब तपाईं अनुच्छेद समाप्त गर्नुहुन्छ, तपाईंले अन्त्य संकेत गर्न समापन ट्याग, <code></p></code> प्रयोग गर्नुहुन्छ।

HTML मा एउटा तत्वमा एउटा ओपनिङ ट्याग, केही सामग्री, र एउटा क्लोजिङ ट्याग हुन्छ। उदाहरणका लागि:

<code><p>यो एउटा अनुच्छेद हो।</p></code>

प्रत्येक ट्यागले वेब ब्राउजरलाई सामग्री कसरी प्रदर्शन गर्ने भनेर निर्देशन दिन्छ।

सामान्य HTML ट्यागहरू

HTML मा धेरै ट्यागहरू छन्। केही सबैभन्दा सामान्य ट्यागहरू यस प्रकार छन्:

HTML विशेषताहरू

विशेषताहरूले HTML तत्वको बारेमा अतिरिक्त जानकारी प्रदान गर्दछ। तिनीहरूलाई ट्यागको कोण कोष्ठक भित्रको उद्घाटन ट्यागमा थपिन्छ। सबैभन्दा सामान्य विशेषताहरू छवि ट्यागसँग प्रयोग हुने srcalt हुन्।

उदाहरणका लागि, छवि थप्नको लागि, तपाईंले लेख्न सक्नुहुन्छ:

<code><img src="picture.jpg" alt="राम्रो तस्वीर"></code>

यहाँ, src ले ब्राउजरलाई छवि फाइल कहाँ छ भनेर बताउँछ, र यदि यो प्रदर्शन गर्न सकिँदैन भने alt ले छविको विवरण प्रदान गर्दछ।

टाउको र शरीरका भागहरू

HTML कागजात दुई भागमा विभाजित छ:

HTML मा लिङ्कहरू सिर्जना गर्दै

लिङ्कहरूले तपाईंलाई एउटा पृष्ठबाट अर्को पृष्ठमा जान अनुमति दिन्छ। HTML मा, हामी <a> ट्याग प्रयोग गरेर लिङ्कहरू सिर्जना गर्छौं। ट्याग भित्र रहेको href विशेषताले ब्राउजरलाई लिङ्कको गन्तव्य बताउँछ।

उदाहरणका लागि:

<code><a href="https://www.example.com">Example.com मा जानुहोस्</a></code>

जब तपाईं यो लिङ्कमा क्लिक गर्नुहुन्छ, तपाईंको ब्राउजरले example.com वेबसाइट खोल्नेछ।

वेब पृष्ठमा छविहरू थप्दै

तस्बिरहरूले वेब पृष्ठलाई उज्यालो बनाउँछन् र यसलाई अझ रोचक बनाउँछन्। तस्बिर थप्नको लागि, तपाईंले <img> ट्याग प्रयोग गर्नुहुन्छ। याद गर्नुहोस्, <img> ट्यागमा बन्द हुने ट्याग हुँदैन।

यहाँ तपाईंले छवि कसरी थप्नुहुन्छ:

<code><img src="sunflower.jpg" alt="चम्किलो सूर्यमुखी"></code>

यो कोडले ब्राउजरलाई सूर्यमुखीको छवि प्रदर्शन गर्न भन्छ। src विशेषताले छविको स्थानलाई औंल्याउँछ, र alt विशेषताले छविको विवरण प्रदान गर्दछ।

HTML मा सूचीहरू प्रयोग गर्दै

सूचीहरूले जानकारीलाई सफा ढाँचामा व्यवस्थित गर्छन्। HTML मा दुई मुख्य प्रकारका सूचीहरू छन्:

यहाँ क्रमबद्ध नभएको सूचीको उदाहरण छ:

<कोड><ul>
<li>एप्पल</li>
<li>केरा</li>
<li>चेरी</li>
</ul> </code>

अनि यहाँ क्रमबद्ध सूचीको उदाहरण छ:

<कोड><ol>
<li>पहिलो</li>
<li>दोस्रो</li>
<li>तेस्रो</li>
</ol> </code>

HTML मा तालिकाहरू

तालिकाहरूले पङ्क्ति र स्तम्भहरूमा जानकारी प्रदर्शन गर्न मद्दत गर्छन्। जब तपाईंलाई डेटा तुलना गर्न वा ग्रिडमा वस्तुहरू सूचीबद्ध गर्न आवश्यक पर्दछ तब तिनीहरू उपयोगी हुन्छन्।

यहाँ HTML तालिकाको एउटा साधारण उदाहरण छ:

<code><टेबल बोर्डर="1">
<tr>
<th>नाम</th>
<th>उमेर</th>
</tr>
<tr>
<td>एलिस</td>
१०
</tr>
</टेबल> </कोड>

यस तालिकामा, <tr> ले तालिका पङ्क्ति परिभाषित गर्दछ, <th> तालिका हेडर (बोल्ड टेक्स्ट) को लागि प्रयोग गरिन्छ, र <td> तालिका डेटा (कोषहरू) को लागि प्रयोग गरिन्छ।

मल्टिमिडियासँग काम गर्दै: अडियो र भिडियो

HTML ले तपाईंलाई ध्वनि र भिडियो जस्ता मल्टिमिडिया पनि थप्न दिन्छ। <audio> ट्यागको साथ, तपाईंले ध्वनि फाइलहरू समावेश गर्न सक्नुहुन्छ। <video> ट्यागको साथ, तपाईं आफ्नो वेब पृष्ठमा भिडियो प्लेयरहरू इम्बेड गर्न सक्नुहुन्छ।

यहाँ भिडियो इम्बेड कोडको उदाहरण छ:

<code><video width="320" height="240" controls>
<स्रोत src="movie.mp4" प्रकार="भिडियो/mp4">
</भिडियो> </कोड>

यो कोडले प्ले गर्न, पज गर्न वा भोल्युम परिवर्तन गर्न बटनहरू सहितको भिडियो प्लेयर सिर्जना गर्दछ। नियन्त्रण विशेषताले ब्राउजरलाई यी बटनहरू देखाउन भन्छ।

दैनिक जीवनमा HTML

इन्टरनेटमा भएका हरेक वेबसाइट HTML बाट बनाइएको हुन्छ। कल्पना गर्नुहोस् कि तपाईं आफ्नो स्कूलको वेबसाइट, रमाइलो खेल साइट, वा अनलाइन कथा पढ्दै हुनुहुन्छ। HTML ले पाठ, चित्र र अन्य सामग्रीहरू व्यवस्थित गर्न पर्दा पछाडि काम गरिरहेको छ ताकि तपाईंले तिनीहरूलाई स्पष्ट रूपमा देख्न सक्नुहुन्छ।

उदाहरणका लागि, जब तपाईं आफ्नो मनपर्ने कार्टुन पात्रको तस्वीर अनलाइन देख्नुहुन्छ वा रमाइलो विषयको बारेमा थप पढ्न लिङ्कमा क्लिक गर्नुहुन्छ, HTML ले त्यो काम गर्छ।

एउटा साधारण HTML परियोजना उदाहरण

एउटा साधारण परियोजना हेरौं। कल्पना गर्नुहोस् तपाईं आफ्नो मनपर्ने जनावर, जस्तै बिरालोको बारेमा एउटा सानो वेब पृष्ठ बनाउन चाहनुहुन्छ। तपाईं शीर्षक, बिरालोको बारेमा एउटा अनुच्छेद, एउटा तस्वीर, र रमाइलो बिरालो तथ्यहरू भएको वेबसाइटको लिङ्क पनि समावेश गर्न सक्नुहुन्छ।

तपाईंको HTML कोड यस्तो देखिन सक्छ:

<कोड><!DOCTYPE html>
<html>>
<हेड>>
<title>मेरो मनपर्ने जनावर</title>
</head>
<शरीर>>
<h1>बिरालाहरूको बारेमा सबै</h1>
<p>बिरालाहरू चंचल र कोमल हुन्छन्। तिनीहरूलाई सुत्न र गुरगुराउन मन पर्छ। धेरै मानिसहरू बिरालाहरूलाई घरपालुवा जनावरको रूपमा राख्न मन पराउँछन्।</p>
<img src="cat.jpg" alt="एउटा प्यारो बिरालो">
<a href="https://www.catfacts.com">बिरालोहरूको बारेमा थप जान्नुहोस्</a>
</शरीर>
</html> </code>

यो परियोजनाले शीर्षकहरू, अनुच्छेदहरू, छविहरू र लिङ्कहरू प्रयोग गर्दछ। यसले धेरै भागहरू भएको पूर्ण वेब पृष्ठ निर्माण गर्न HTML कसरी प्रयोग गरिन्छ भनेर देखाउँछ।

HTML, CSS, र JavaScript

HTML ले वेब पृष्ठको संरचना निर्माण गर्छ भने, त्यहाँ अन्य उपकरणहरू छन् जसले वेबसाइटहरूलाई रमाइलो तरिकाले देखाउन र व्यवहार गर्न मद्दत गर्छ।

आज हामी HTML बारे सिक्दै भए पनि, CSS र JavaScript बारे जान्दा हामीलाई वेबसाइट कसरी बनाइन्छ भनेर बुझ्न मद्दत गर्छ।

थप HTML ट्यागहरू र तिनीहरूको प्रयोगहरू

HTML अन्वेषण गर्दा, तपाईंले धेरै अन्य ट्यागहरू फेला पार्नुहुनेछ। यहाँ जान्नको लागि केही थप छन्:

यी ट्यागहरूले तपाईंको सामग्री वेब पृष्ठमा कसरी देखिन्छ भन्ने कुरामा थप नियन्त्रण दिन्छ।

HTML को विकास

HTML पहिलो पटक सिर्जना भएदेखि धेरै परिवर्तन भएको छ। समयसँगै धेरै नयाँ ट्याग र सुविधाहरू थपिएका छन्। HTML को प्रत्येक नयाँ संस्करणले जटिल र सुन्दर वेबसाइटहरू सिर्जना गर्न सजिलो बनाउँछ। आज, HTML ले CSS र JavaScript सँग मिलेर आधुनिक वेबसाइटहरू निर्माण गर्दछ जुन प्रयोग गर्न रमाइलो छ र राम्रो देखिन्छ।

यो विकासको अर्थ HTML सिक्न सजिलो छ र साधारण वेब पृष्ठहरूदेखि जटिल वेब अनुप्रयोगहरूसम्म सबै कुरा सिर्जना गर्न पर्याप्त शक्तिशाली छ।

अनलाइन सुरक्षित रहने

HTML सिक्नु रमाइलो भए पनि, इन्टरनेटमा सुरक्षित रहनु सधैं महत्त्वपूर्ण छ। जब तपाईं वेबसाइटहरू भ्रमण गर्नुहुन्छ वा अनलाइन सामग्री अन्वेषण गर्नुहुन्छ, यदि तपाईं कुनै कुराको बारेमा अनिश्चित हुनुहुन्छ भने सधैं वयस्कलाई मद्दतको लागि सोध्न नबिर्सनुहोस्। तपाईंको सुरक्षा पहिले आउँछ, र HTML सिक्नु सधैं रमाइलो र सुरक्षित अनुभव हुनुपर्छ।

समीक्षा: मुख्य HTML सर्तहरू

आज तपाईंले सिकेका केही महत्त्वपूर्ण शब्दहरू हेरौं:

वास्तविक-विश्व अनुप्रयोगहरू

HTML धेरै वास्तविक-विश्व सेटिङहरूमा प्रयोग गरिन्छ। यहाँ केही उदाहरणहरू छन्:

यी उदाहरणहरूले दैनिक जीवनका धेरै भागहरूमा HTML कसरी धेरै उपयोगी उपकरण हो भनेर देखाउँछन्।

मुख्य बुँदाहरूको सारांश

आज हामीले सिक्यौं कि HTML हाइपरटेक्स्ट मार्कअप ल्याङ्ग्वेजको लागि छोटो छ। यो वेब पृष्ठहरू सिर्जना गर्न प्रयोग गरिने आधारभूत भाषा हो। यहाँ सम्झनु पर्ने मुख्य बुँदाहरू छन्:

इन्टरनेटमा तपाईंले देख्नुहुने हरेक वेबसाइटको जग HTML हो। ट्याग र विशेषताहरू जस्ता साधारण निर्माण ब्लकहरूको साथ, तपाईं रमाइलो र अन्तरक्रियात्मक पृष्ठहरू सिर्जना गर्न सक्नुहुन्छ। तपाईंले सिक्न जारी राख्दै जाँदा, तपाईंले देख्नुहुनेछ कि HTML ले वेब पृष्ठहरूलाई जीवन्त बनाउन कसरी मद्दत गर्छ, जसले इन्टरनेटलाई अन्वेषण गर्न उपयोगी र रोमाञ्चक ठाउँ बनाउँछ।

Download Primer to continue