एचटिएमएल

स्क्रिप्टिङ भाषा
(एच.टी.एम.एल.बाट अनुप्रेषित)

एचटिएमएल (अङ्ग्रेजी: HTML, पुरा रूप: Hyper Text Markup Language) एउटा स्क्रिप्टिङ भाषा हो जसको प्रयोग विभिन्न वेबसाइटहरू निर्माण गर्नको लागि गरिन्छ। यो कुनै पनि दस्तावेजमा अक्षरहरूमा आधारित जानकारीहरूको संरचना निर्धारण गर्ने स्क्रिप्टिङ भाषा हो। एचटिएमएलले अक्षर विशेषको लिङ्क, शीर्षक, अनुच्छेद, सूची आदिको रूपमा नोट गर्दछ तथा यसमा अन्तर्क्रियात्मक फारम, संलग्न चित्र, तथा अन्य ओब्जेक्ट जोड्दछ। एचटिएमएल ट्याग्सको रूपमा लेखिन्छ जुन एङ्गल ब्राकेट ("<" तथा ">") द्वारा घेरिएको हुन्छ। एचटिएमएल केही हदसम्म कुनै दस्तावेजको दृश्य, रूप आदिलाई निर्धारित गर्न सक्दछ तथा यसमा स्क्रिप्टिङ भाषा कोड जस्तो जाभास्क्रिप्ट, पिएचपी आदिमा पनि संलग्न गर्न सकिन्छ।

एचटिएमएल
(हाइपरटेक्स्ट मार्कअप ल्याङ्वेज)
पछिल्लो संस्करणको आधिकारिक लोगो, एचटिएमएल५[]
फाइल नाम विस्तार
  • .html
  • .htm
इन्टरनेट मिडीया प्रकारtext/html
कोड प्रकारTEXT
विकास कर्ताह्वाटडब्लुजी
पहिलो संस्करण१९९३; ३१ वर्ष अघि (१९९३)
पछिल्लो संसकरण
ढाँचा प्रकारदस्तावेज फाइल ढाँचा
निहितएचटिएमएल तत्व
निहित गर्नेवेब ब्राउजर
देखि विस्तारएसजिएमएल
बाट विस्तारएक्सएचटिएमएल
खुला ढाँचा?हो
वेबसाइटhtml.spec.whatwg.org

एच.टि.एम.एल सन् १९८९ मा टिम बर्नर्स लीद्वारा आविष्कार गरिएको थियो।[]

एच.टि.एम.एल हाइपर टेक्स्ट मार्कअप भाषा हो जहाँ ,

हाइपरटेक्स्ट: समूहीकरण मार्फत समान तत्वहरू जोड्ने पाठ

मार्कअप: हार्डकपी वा डिजिटल ढाँचामा छापिने कुनै पनि चीज टाइपसेट गर्नको लागि शैली पुस्तकलाई मार्कअप भनिन्छ।

भाषा: कम्प्युटर प्रणालीले आदेशहरू बुझ्न प्रयोग गर्ने भाषा।

एच.टि.एम.एल को प्रारम्भिक सार्वजनिक रूपमा उपलब्ध व्याख्या "एच.टि.एम.एल ट्यागहरू" भनिने कागजात थियो, जसलाई टिम बर्नर्स-लीले सन् १९९१ को अन्तमा वेबमा सन्दर्भ गरे।


एच.टि.एम.एल पृष्ठमा जाभास्क्रिप्ट, सीएसएस, र जानकारी समावेश छ। यसलाई मानव शरीरको उदाहरणबाट बुझौं:

जाभास्क्रिप्ट : हाम्रो पाचन, र श्वासप्रश्वास प्रणाली हो जसले संरचना दिन्छ,

सीएसएस : हाम्रो छाला हो,

एच.टि.एम.एल : हाम्रो कंकाल हो।

यसरी मानव शरीर र एच.टि.एम.एल मिलेर बनेको छ।


तपाईंलाई एच.टि.एम.एल लेख्नको लागि नोटप्याड, सबलाइम टेक्स्ट[], वा भिजुअल स्टुडियो कोड[] जस्ता पाठ सम्पादक चाहिन्छ। यस सन्दर्भमा पाठ सम्पादकले कागजको टुक्रालाई जनाउँछ जहाँ तपाईंले वेबपेजको लागि कोडिङ लेख्नुहुन्छ। एच.टि.एम.एल पाठ सम्पादकहरूको प्रयोगले तपाईंको कोडिङ स्पष्ट र उपयोगी छ भन्ने ग्यारेन्टी दिन्छ। यसले तपाईंलाई स्वचालित रूपमा कोड वा ट्यागहरू सम्मिलित गरेर त्रुटि कम गर्न मद्दत गर्नेछ।

वेब-आधारित कागजातहरू र वेबसाइटहरू मुख्य रूपमा एच.टि.एम.एल मा लेखिएका छन्। यसले इन्टरनेट स्ट्रिमिङका लागि फाइल वा फाइलहरूको सेटको ढाँचा र व्यवस्था बुझ्न ब्राउजरलाई समर्थन गर्दछ।


सम्पूर्ण एच.टि.एम.एल पृष्ठको आधारभूत संरचना यहाँ व्याख्या गरिएको छ।

कागजात प्रकार घोषणा

सम्पादन गर्नुहोस्

कागजात प्रकार घोषणा (अङ्ग्रेजी: DTD, पुरा रूप: Document type definition[])

धेरै माथि वा एच.टि.एम.एल कागजातको सुरुमा, ( अङ्ग्रेजी: <!DOCTYPE html> ) देखा पर्दछ। यहाँ, ब्राउजरलाई सूचित गरिएको छ कि यो पृष्ठ HTML को संस्करण द्वारा सिर्जना गरिएको हो।

एच.टि.एम.एल को मूल तत्व

"प्राथमिक कन्टेनर" जसमा अन्य सबै तत्वहरू छन् (अङ्ग्रेजी: <html> ) ट्याग, जुन घोषणा (अङ्ग्रेजी: DTD) को तल लेखिएको छ।

यसमा HTML कागजातको भाषा निर्दिष्ट गर्ने क्षमता छ। उदाहरण, यहाँ ( अङ्ग्रेजी: <html lang="en-US"> ) ले पृष्ठ अमेरिकी अंग्रेजीमा लेखिएको छ भनी संकेत गर्छ।

हेड (अंग्रेजीमा लेख्दा: <head>)

सम्पादन गर्नुहोस्

पृष्ठको मेटाडेटा हेड मा पाइन्छ, जुन एच.टि.एम.एल र बडी ट्यागहरू बीच अवस्थित छ। यसले पृष्ठहरूको बारेमा जानकारी वर्णन गर्दछ। तिनीहरू ४ फरक विषयहरू समावेश छन्।

यहाँ एच.टि.एम.एल (अंग्रेजीमा: <html>) लेखे पछि हामीले हेड (अंग्रेजीमा: <head>) लेख्छौं जसको मतलब विषयहरू माथिबाट सुरु हुन्छ। तपाईं सोच्न सक्नुहुन्छ कि तपाईंको शरीर एच.टि.एम.एल हो र तपाईंको शरीर तपाईंको टाउकोबाट सुरु हुन्छ। एच.टि.एम.एल मा पनि त्यस्तै छ।

यो सूचीबद्धहरू हेड (अंग्रेजीमा लेख्दा: <head> </head>) ट्याग भित्र लेखिएको हुनुपर्छ ।

शीर्षक (अंग्रेजीमा: <title>)

सम्पादन गर्नुहोस्

यो शीर्षक वेबपेजको मुख्य विषय। शीर्षक पृष्ठको आँखा हो। यो शरीर ट्याग र भित्र हेड ट्याग अघि सुरु हुन्छ। फेरि, मानौं कि हामी कसैलाई आफ्नो आँखा र अनुहार हेरेर थाहा छ, त्यहि यहाँ जान्छ शीर्षकको रूपमा सम्पूर्ण वेबपेजलाई के भनिन्छ।

तपाईंले फेसबुक डोट कम (facebook.com)प्रविष्ट गर्दा पृष्ठको शीर्षमा फेसबुक हेर्न सक्नुहुन्छ। त्यो शीर्षक ट्याग हो। यसलाई शीर्षक (अंग्रेजीमा: <title> फेसबुक </title>) को रूपमा लेखिएको छ ।

शैली (अंग्रेजीमा लेख्द: <style>)

सम्पादन गर्नुहोस्

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

  उदाहरण अंग्रेजीमा :

<style>body{

background-color:red;

}</style>

यसको अर्थ पृष्ठको सम्पूर्ण शरीरलाई रातो रङ बनाउनुहोस्।

लिङ्क (अंग्रेजीमा लेख्दा: <link>)

सम्पादन गर्नुहोस्

यो लिङ्क ट्यागले हामीले बाह्य साइटबाट प्रयोग गरिरहेका स्रोतहरू संकेत गर्छ। यदि तपाइँ अन्य वेबपेजको डिजाइन प्रयोग गर्न चाहनुहुन्छ भने तपाइँ तिनीहरूको सीएसएस लिङ्क प्रतिलिपि गर्न सक्नुहुन्छ जुन तपाइँको पृष्ठको लागि मेकअपको रूपमा कार्य गर्दछ।

उदाहरण अंग्रेजीमा :

<head>

<link rel="stylesheet" href="styles.css">

</head>

यहाँ हामीले माथि रातो रङको लागि जस्तै पृष्ठ डिजाइन गर्दैनौं। अब हामीसँग हाम्रो कम्प्युटर फोल्डरमा (अंग्रेजी: style.css) नामक अर्को पृष्ठ छ जसमा पृष्ठको रंग रातो बनाउन कोड लेखिएको छ। त्यसोभए, कहिलेकाहीँ यदि तपाइँको पृष्ठमा डिजाइन कोडहरू धेरै लामो छन् भने तपाइँ .css फाइलमा सबै शैली कोडहरू लेख्न सक्नुहुन्छ र यो एच.टि.एम.एल पृष्ठ कोडमा फाइलको नाम लिङ्क गर्न सक्नुहुन्छ।

मेटा (अंग्रेजीमा लेख्दा: <meta>)

सम्पादन गर्नुहोस्

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

बडी (अंग्रेजीमा लेख्दा: <body>)

सम्पादन गर्नुहोस्

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

अब हामी हाम्रो टाउकोबाट हाम्रो शरीरमा सरेका छौं। हाम्रो शरीरमा धेरै अंगहरू, खुट्टाहरू, हातहरू छन्। एच.टि.एम.एल मा बडी ट्याग उस्तै हो।


तल नेपालीमा अभिवादनहरू देखाउने सरल एचटिएमएल पृष्ठको ढाँचा छ।

<!DOCTYPE html>
<html>
  <head>
    <title>title name here</title>
  </head>
  <body>
    <div>
        <p>Namaste ! Nepal</p>
    </div>
  </body>
</html>

सन्दर्भ सामग्रीहरू

सम्पादन गर्नुहोस्
  1. "W3C Html" 
  2. w3.org
  3. "Sublime Text - the sophisticated text editor for code, markup and prose", www.sublimetext.com, अन्तिम पहुँच २०२२-१०-१९ 
  4. "Visual Studio Code - Code Editing. Redefined", code.visualstudio.com (अङ्ग्रेजीमा), अन्तिम पहुँच २०२२-१०-१९ 
  5. "Document Type Definition - DTD", GeeksforGeeks (en-usमा), २०२०-११-०५, अन्तिम पहुँच २०२२-१०-१९ 

बाह्य कडीहरू

सम्पादन गर्नुहोस्