msb-public
/
Web-Dev-For-Beginners
mirror of https://github.com/microsoft/Web-Dev-For-Beginners.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'main'
${ noResults }
Web-Dev-For-Beginners/translations/ne/3-terrarium/1-intro-to-html/README.md

23 KiB
Raw Permalink Blame History

टेरारियम प्रोजेक्ट भाग १: HTML को परिचय

HTML को परिचय

स्केच नोट Tomomi Imura द्वारा

प्रि-लेक्चर क्विज

प्रि-लेक्चर क्विज

भिडियो हेर्नुहोस्

Git र GitHub को आधारभूत भिडियो

परिचय

HTML, वा हाइपरटेक्स्ट मार्कअप भाषा, वेबको 'कंकाल' हो। यदि CSS ले तपाईंको HTML लाई 'सजाउँछ' र JavaScript ले यसलाई जीवन दिन्छ भने, HTML तपाईंको वेब एप्लिकेसनको शरीर हो। HTML को सिन्ट्याक्सले पनि यो विचारलाई प्रतिबिम्बित गर्दछ, किनकि यसमा "head", "body", र "footer" ट्यागहरू समावेश छन्।

यस पाठमा, हामी HTML प्रयोग गरेर हाम्रो भर्चुअल टेरारियमको इन्टरफेसको 'कंकाल' लेआउट गर्नेछौं। यसमा शीर्षक र तीन स्तम्भहरू हुनेछन्: दायाँ र बायाँ स्तम्भ जहाँ ड्र्याग गर्न मिल्ने बिरुवाहरू रहनेछन्, र बीचको क्षेत्र जसले वास्तविक काँच-जस्तो टेरारियमको रूपमा काम गर्नेछ। यस पाठको अन्त्यसम्ममा, तपाईं स्तम्भहरूमा बिरुवाहरू देख्न सक्नुहुनेछ, तर इन्टरफेस अलि अजीब देखिनेछ; चिन्ता नगर्नुहोस्, अर्को खण्डमा तपाईं CSS शैलीहरू थपेर इन्टरफेसलाई राम्रो देखिने बनाउनुहुनेछ।

कार्य

तपाईंको कम्प्युटरमा 'terrarium' नामको फोल्डर बनाउनुहोस् र त्यसको भित्र 'index.html' नामको फाइल बनाउनुहोस्। तपाईं यो Visual Studio Code मा गर्न सक्नुहुन्छ। नयाँ VS Code विन्डो खोल्नुहोस्, 'open folder' क्लिक गर्नुहोस्, र तपाईंको नयाँ फोल्डरमा जानुहोस्। Explorer प्यानमा सानो 'file' बटन क्लिक गरेर नयाँ फाइल बनाउनुहोस्:

VS Code मा एक्सप्लोरर

वा

तपाईं git bash मा यी कमाण्डहरू प्रयोग गर्न सक्नुहुन्छ:

  • mkdir terrarium
  • cd terrarium
  • touch index.html
  • code index.html वा nano index.html

index.html फाइलहरूले ब्राउजरलाई संकेत गर्छ कि यो फोल्डरको डिफल्ट फाइल हो; जस्तै https://anysite.com/test जस्ता URL हरू फोल्डर संरचनाको आधारमा बनाइएका हुन सक्छन् जसमा test नामको फोल्डर र त्यसको भित्र index.html हुन्छ; index.html URL मा देखिनु पर्दैन।

DocType र html ट्यागहरू

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

टिप: VS Code मा, तपाईं ट्यागमाथि होभर गर्न सक्नुहुन्छ र MDN Reference गाइडहरूबाट यसको प्रयोगको बारेमा जानकारी प्राप्त गर्न सक्नुहुन्छ।

दोस्रो लाइन <html> ट्यागको ओपनिङ ट्याग हुनुपर्छ, र अहिले यसको क्लोजिङ ट्याग </html> द्वारा पछ्याइएको। यी ट्यागहरू तपाईंको इन्टरफेसका रूट एलिमेन्टहरू हुन्।

कार्य

तपाईंको index.html फाइलको माथि यी लाइनहरू थप्नुहोस्:

<!DOCTYPE html>
<html></html>

✅ DocType सेट गरेर विभिन्न मोडहरू निर्धारण गर्न सकिन्छ: Quirks Mode र Standards Mode। यी मोडहरू पुरानो ब्राउजरहरूलाई समर्थन गर्न प्रयोग गरिन्थ्यो जुन अहिले सामान्यतया प्रयोग गरिँदैन (जस्तै Netscape Navigator 4 र Internet Explorer 5)। तपाईं मानक DocType घोषणा प्रयोग गर्न सक्नुहुन्छ।

डकुमेन्टको 'head'

HTML डकुमेन्टको 'head' क्षेत्रले तपाईंको वेब पृष्ठको बारेमा महत्त्वपूर्ण जानकारी समावेश गर्दछ, जसलाई मेटाडाटा पनि भनिन्छ। हाम्रो केसमा, हामी वेब सर्भरलाई चार कुराहरू बताउँछौं:

  • पृष्ठको शीर्षक
  • पृष्ठ मेटाडाटा जसमा समावेश छ:
    • 'character set', जसले पृष्ठमा प्रयोग गरिएको क्यारेक्टर इन्कोडिङको बारेमा बताउँछ
    • ब्राउजर जानकारी, जसमा x-ua-compatible समावेश छ, जसले IE=edge ब्राउजरलाई समर्थन गरिएको संकेत गर्छ
    • पृष्ठ लोड हुँदा viewport कसरी व्यवहार गर्ने भन्ने जानकारी। viewport लाई प्रारम्भिक स्केल 1 मा सेट गर्दा पृष्ठ पहिलो पटक लोड हुँदा जूम स्तर नियन्त्रण हुन्छ।

कार्य

तपाईंको डकुमेन्टमा <html> ट्यागहरूको बीचमा 'head' ब्लक थप्नुहोस्।

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

✅ यदि तपाईंले viewport मेटा ट्यागलाई यसरी सेट गर्नुभयो भने: <meta name="viewport" content="width=600"> के हुन्छ? viewport को बारेमा थप पढ्नुहोस्।

डकुमेन्टको body

HTML ट्यागहरू

HTML मा, तपाईं आफ्नो .html फाइलमा ट्यागहरू थपेर वेब पृष्ठका एलिमेन्टहरू सिर्जना गर्नुहुन्छ। प्रत्येक ट्याग सामान्यतया ओपनिङ र क्लोजिङ ट्याग हुन्छ, जस्तै: <p>hello</p> जसले अनुच्छेद संकेत गर्छ। आफ्नो इन्टरफेसको body सिर्जना गर्न <html> ट्यागको जोडीभित्र <body> ट्यागहरूको सेट थप्नुहोस्; तपाईंको मार्कअप अब यसरी देखिन्छ:

कार्य

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

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

छविहरू

एक HTML ट्याग जसलाई क्लोजिङ ट्याग आवश्यक पर्दैन, त्यो <img> ट्याग हो, किनकि यसमा src एलिमेन्ट हुन्छ जसले वस्तु रेंडर गर्न आवश्यक सबै जानकारी समावेश गर्दछ।

तपाईंको एपमा images नामको फोल्डर सिर्जना गर्नुहोस् र त्यसमा source code folder का सबै छविहरू थप्नुहोस्; (त्यहाँ १४ वटा बिरुवाका छविहरू छन्)।

कार्य

यी बिरुवाका छविहरूलाई <body></body> ट्यागहरूको बीचमा दुई स्तम्भहरूमा थप्नुहोस्:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
		</div>
	</div>
</div>

नोट: Spans vs. Divs। Divs 'ब्लक' एलिमेन्ट मानिन्छन्, र Spans 'इनलाइन'। यदि तपाईंले यी divs लाई spans मा परिवर्तन गर्नुभयो भने के हुन्छ?

यस मार्कअपसँग, बिरुवाहरू अब स्क्रिनमा देखिन्छन्। यो धेरै नराम्रो देखिन्छ, किनकि तिनीहरू CSS प्रयोग गरेर अझै स्टाइल गरिएको छैन, र हामी यो अर्को पाठमा गर्नेछौं।

प्रत्येक छविमा alt टेक्स्ट हुन्छ जुन तपाईंले छवि देख्न वा रेंडर गर्न नसक्ने अवस्थामा देखिन्छ। यो समावेश गर्न महत्त्वपूर्ण विशेषता हो जसले पहुँचयोग्यता सुनिश्चित गर्छ। भविष्यका पाठहरूमा पहुँचयोग्यताको बारेमा थप जान्नुहोस्; अहिलेका लागि, सम्झनुहोस् कि alt विशेषताले छवि देख्न नसक्ने प्रयोगकर्ताहरूलाई वैकल्पिक जानकारी प्रदान गर्छ (जस्तै, ढिलो कनेक्शन, src विशेषतामा त्रुटि, वा प्रयोगकर्ताले स्क्रिन रिडर प्रयोग गरेमा)।

✅ के तपाईंले ध्यान दिनुभयो कि प्रत्येक छविमा एउटै alt ट्याग छ? के यो राम्रो अभ्यास हो? किन वा किन होइन? के तपाईं यो कोड सुधार गर्न सक्नुहुन्छ?

सेम्यान्टिक मार्कअप

सामान्यतया, HTML लेख्दा अर्थपूर्ण 'सेम्यान्टिक्स' प्रयोग गर्नु राम्रो हुन्छ। यसको मतलब के हो? यसको मतलब तपाईं HTML ट्यागहरूलाई तिनीहरू डिजाइन गरिएको डेटा वा अन्तरक्रियाको प्रकारको प्रतिनिधित्व गर्न प्रयोग गर्नुहुन्छ। उदाहरणका लागि, पृष्ठको मुख्य शीर्षक पाठले <h1> ट्याग प्रयोग गर्नुपर्छ।

तपाईंको ओपनिङ <body> ट्यागको ठीक तल निम्न लाइन थप्नुहोस्:

<h1>My Terrarium</h1>

सेम्यान्टिक मार्कअप प्रयोग गर्दा जस्तै हेडरहरू <h1> र अनऑर्डर्ड सूचीहरू <ul> को रूपमा रेंडर गर्दा स्क्रिन रिडरहरूले पृष्ठमा नेभिगेट गर्न मद्दत गर्छ। सामान्यतया, बटनहरू <button> को रूपमा लेखिनुपर्छ र सूचीहरू <li> को रूपमा। जबकि विशेष शैली गरिएको <span> एलिमेन्टहरू क्लिक ह्यान्डलरहरूसँग बटनको नक्कल गर्न प्रयोग गर्न सकिन्छ, अपाङ्ग प्रयोगकर्ताहरूलाई पृष्ठमा बटन कहाँ छ भनेर निर्धारण गर्न र यससँग अन्तरक्रिया गर्न प्रविधिहरू प्रयोग गर्न सजिलो हुन्छ, यदि एलिमेन्ट बटनको रूपमा देखा पर्दछ भने। यस कारणले गर्दा, सकेसम्म सेम्यान्टिक मार्कअप प्रयोग गर्न प्रयास गर्नुहोस्।

✅ स्क्रिन रिडर र यो वेब पृष्ठसँग कसरी अन्तरक्रिया गर्छ हेर्नुहोस्। के तपाईं देख्न सक्नुहुन्छ कि गैर-सेम्यान्टिक मार्कअपले प्रयोगकर्तालाई किन निराश पार्न सक्छ?

टेरारियम

इन्टरफेसको अन्तिम भागमा टेरारियम सिर्जना गर्न स्टाइल गरिने मार्कअप समावेश छ।

कार्य:

अन्तिम </div> ट्यागको माथि यो मार्कअप थप्नुहोस्:

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

✅ तपाईंले यो मार्कअप स्क्रिनमा थप्नुभयो, तर तपाईंले केही पनि रेंडर भएको देख्नुहुन्न। किन?

🚀चुनौती

HTML मा केही पुराना 'मजेदार' ट्यागहरू छन् जुन खेल्न रमाइलो हुन्छ, यद्यपि तपाईंले यी ट्यागहरू जस्ता डिप्रिकेटेड ट्यागहरू आफ्नो मार्कअपमा प्रयोग गर्नु हुँदैन। तैपनि, के तपाईंले पुरानो <marquee> ट्याग प्रयोग गरेर h1 शीर्षकलाई क्षैतिज रूपमा स्क्रोल गर्न सक्नुहुन्छ? (यदि तपाईंले गर्नुभयो भने, पछि यसलाई हटाउन नबिर्सनुहोस्)

पोस्ट-लेक्चर क्विज

पोस्ट-लेक्चर क्विज

समीक्षा र आत्म-अध्ययन

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

वेब र मोबाइल उपकरणहरूको लागि साइटहरू निर्माण गर्ने बारेमा Microsoft Learn मा थप जान्नुहोस्।

असाइनमेन्ट

तपाईंको HTML अभ्यास गर्नुहोस्: ब्लग मक्कअप निर्माण गर्नुहोस्

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