HTML पृष्ठ कसरी सिर्जना गर्ने

यदि तपाईं आफ्नो वेब पेज बनाउन चाहनुहुन्छ भने, तपाईसँग HTML को समझ हुनुपर्छ. This article explains how to create an HTML page. साथै, तपाईले xml साइटम्याप कसरी बनाउने र कसरी चित्र र लिङ्क थप्ने भनेर सिक्नुहुनेछ. यो xml साइटम्याप सिर्जना गर्न पनि महत्त्वपूर्ण छ, जसले तपाईंलाई तपाईंको साइट व्यवस्थित गर्न र तपाईंको ट्राफिक बढाउन मद्दत गर्न सक्छ. अर्को चरण टेम्प्लेट छनोट गर्नु हो.

Creating a html page

HTML एउटा मार्कअप भाषा हो. वेब पृष्ठको प्रत्येक तत्वलाई ट्यागद्वारा प्रतिनिधित्व गरिन्छ. ट्याग कोण कोष्ठक द्वारा पहिचान गरिएको छ, र प्रत्येक तत्वमा एक वा धेरै ट्यागहरू छन्. केही तत्वहरूलाई केवल एउटा ट्याग चाहिन्छ; अरूलाई दुई आवश्यक हुन सक्छ. खुल्ने र बन्द हुने ट्यागहरूमा फर्वार्ड स्ल्याश हुन्छ (/). उदाहरणका लागि, अनुच्छेद तत्व p ट्याग द्वारा प्रतिनिधित्व गरिएको छ. उद्घाटन र बन्द ट्यागहरू बीचको पाठ अनुच्छेद पाठ हो.

HTML कागजात सिर्जना गर्न, तपाईंले पाठ सम्पादक प्रयोग गर्न आवश्यक हुनेछ. धेरै जसो कम्प्युटरहरूमा पूर्वनिर्धारित रूपमा पाठ सम्पादक हुन्छ. विन्डोज प्रयोगकर्ताहरूले इन्टरनेट एक्सप्लोरर प्रयोग गर्नेछन्, जबकि म्याक प्रयोगकर्ताहरूले TextEdit प्रयोग गर्न सक्छन्. तपाइँ एक पेशेवर देखिने वेबपेज सिर्जना गर्न एक फैंसी पाठ सम्पादक स्थापना गर्न सक्नुहुन्छ, तर तपाईको पहिलो HTML पृष्ठको लागि, यो आवश्यक छैन. तपाईं एक साधारण पाठ सम्पादक र कुनै पनि वेब ब्राउजर पनि प्रयोग गर्न सक्नुहुन्छ. यदि तपाइँ कुन प्रोग्राम प्रयोग गर्ने बारे निश्चित हुनुहुन्न भने, नि:शुल्क HTML सम्पादक डाउनलोड गर्ने प्रयास गर्नुहोस्.

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

Creating a xml sitemap

If you have an HTML page, तपाईंले खोज इन्जिनहरूलाई तपाईंको वेबसाइट क्रल गर्न मद्दत गर्नको लागि XML साइटम्याप सिर्जना गर्न सक्नुहुन्छ. यद्यपि यसले तपाइँको खोज रैंकिंगलाई असर गर्दैन, यसले खोज इन्जिनहरूलाई तपाईंको सामग्री बुझ्न र तिनीहरूको क्रलिङ दर समायोजन गर्न मद्दत गर्नेछ. यो बाटो, तपाईको वेबसाइट खोज इन्जिन परिणामहरूमा अधिक देखिनेछ. यहाँ सुरू गर्न केही सजिलो चरणहरू छन्:

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

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

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

Adding a picture

In HTML, तपाईं img ट्याग प्रयोग गरेर पृष्ठमा छवि थप्न सक्नुहुन्छ. यो ट्यागले छवि र यसको विशेषताहरू मात्र समावेश गर्दछ; यसलाई बन्द ट्याग आवश्यक छैन. यो छवि ट्याग HTML कागजातको मुख्य भाग भित्र सम्मिलित हुनुपर्छ. तस्विरको चौडाइ र उचाइको अतिरिक्त, तपाईंले चित्रको वर्णन गर्ने alt विशेषता समावेश गर्नुपर्छ. Alt ट्याग यस्तो लेखिनु पर्छ जस्तो कि तपाईंले यसलाई देख्न नसक्ने व्यक्तिको लागि विवरण लेख्दै हुनुहुन्छ.

HTML कागजातमा तस्विर थप्नको लागि अलिकति CSS र HTML ज्ञान चाहिन्छ. छवि आकार र रिजोल्युसन विचार गर्न सबैभन्दा महत्त्वपूर्ण कारकहरू मध्ये दुई हुन्. छविको आकारले कागजातको सामग्रीमा यो कसरी फिट हुनेछ भनेर निर्धारण गर्नेछ. यदि तपाईं फरक रिजोल्युसन वा पक्ष अनुपात प्रयोग गर्न चाहनुहुन्छ भने, तपाईं छवि रिसाइज पनि प्रयास गर्न सक्नुहुन्छ. यद्यपि, याद गर्नुहोस् कि स्केलिंगले सधैं तपाईले अपेक्षा गरे अनुसार काम गर्दैन.

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

Adding a link

You can add a link in HTML to your document using an a> href विशेषताको साथ ट्याग गर्नुहोस्. यसले कागजातको लागि बुकमार्क सिर्जना गर्नेछ र यसलाई नयाँ ट्याबमा खोल्नेछ. तपाइँ कागजातमा छवि सम्मिलित गर्नको लागि href विशेषता पनि प्रयोग गर्न सक्नुहुन्छ. तपाईंले HTML बटनलाई लिङ्कमा रूपान्तरण गर्न JavaScript कोडको साथ लिङ्क प्रयोग गर्न सक्नुहुन्छ. एकचोटि तपाईंले यो गर्नुभयो, तपाइँ CSS वा JavaScript कोडको साथ तपाइँको लिङ्क शैली गर्न सक्नुहुन्छ.

लिङ्क एक वेब स्रोतबाट अर्कोमा जडान हो. यो दुई छेउहरु मिलेर बनेको छ, स्रोत एङ्कर र गन्तव्य एंकर. लिङ्क छविबाट पाठ फाइलमा केहि पनि हुन सक्छ. धेरैजसो सामाजिक सञ्जाल साइटहरू र वेबसाइटहरूले प्रयोगकर्ताहरूलाई विशेष URL मा निर्देशित गर्न लिङ्कहरू प्रयोग गर्छन्. HTML लाई लिङ्कको स्थान निर्दिष्ट गर्न पनि प्रयोग गर्न सकिन्छ. यो एउटा’ विशेषताले तपाईंलाई URL मा कोड तत्वहरू लिङ्क गर्न अनुमति दिन्छ.

लिङ्क डिजाइन गर्दा, तपाइँका आगन्तुकहरूले सामग्री कसरी प्रयोग गर्नेछन् भनेर विचार गर्न निश्चित गर्नुहोस्. लिङ्क पाठ वर्णनात्मक हुनुपर्छ, ताकि तिनीहरूले वास्तवमा के आशा गर्नुपर्छ भनेर थाहा पाउनेछन्. एउटै URL को दोहोरिने स्क्रिन रिडरहरूको लागि कुरूप छ, र यसले तिनीहरूलाई कुनै उपयोगी जानकारी दिँदैन. स्क्रिन रिडरहरूले प्रयोगकर्ताहरूलाई विभिन्न स्टाइल वा अधोरेखित बनाएर लिङ्कहरू अवस्थित हुँदा पनि बताउँछन्. यसरी, उनीहरूले सजिलैसँग आवश्यक जानकारी पाउन सक्छन्.

Adding a table

Adding a table to an HTML page is simple, तर त्यहाँ केहि चीजहरू छन् जुन तपाईंले यो गर्नु अघि विचार गर्नुपर्छ. तपाईंको तालिकाको पृष्ठभूमि रंग तपाईंको आगन्तुकको आँखा समात्न र महत्त्वपूर्ण जानकारीमा ध्यान आकर्षित गर्न महत्त्वपूर्ण छ।. तपाईंले हेक्स रङ कोडहरू वा रङ नामहरू प्रयोग गरेर तालिकाको हेडर तत्व र डेटा तत्वको लागि फरक रङ सेट गर्न सक्नुहुन्छ।. जसरी पनि, तपाईको टेबल सजिलै देखिनेछ.

तपाइँ td तत्व संग तालिका हेडर र तालिका डेटा थप्न सक्नुहुन्छ, जसले व्यक्तिलाई परिभाषित गर्छ “बक्सहरू” सामग्रीको लागि. तालिका हेडर थप्नु भनेको वेबपेजमा डाटा प्रदर्शन गर्ने पहिलो चरण हो, र यदि तपाईं चाहनुहुन्छ भने तपाईंले पहिलो थप्नु पर्छ. तालिकामा तीन पङ्क्ति शीर्षकहरू पनि हुनुपर्छ. एउटा हेडर खाली हुनुपर्छ. यदि तपाईंको तालिकामा स्तम्भहरू छन्, तपाईंले प्रत्येक स्तम्भको लागि पङ्क्ति हेडरहरू पनि सिर्जना गर्नुपर्छ.

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

Adding a div

Adding a div to an HTML file allows you to add a section of your webpage without re-writing the whole page. div तत्व पाठ को लागी एक विशेष कन्टेनर हो, छविहरू, र अन्य तत्वहरू. तपाइँ यसलाई तपाइँलाई मनपर्ने कुनै पनि नाम दिन सक्नुहुन्छ र तपाइँका आवश्यकताहरू अनुरूप यसको विशेषताहरू परिवर्तन गर्न सक्नुहुन्छ. तपाईं आफ्नो पृष्ठमा div र अन्य तत्वहरू बीच खाली ठाउँ सिर्जना गर्न वर्ग वा मार्जिन पनि थप्न सक्नुहुन्छ.

तपाइँ div भित्र कोड सम्मिलित गर्न innerHTML विशेषता पनि प्रयोग गर्न सक्नुहुन्छ. यो विधिले स्ट्रिङमा संलग्न कोड स्वीकार गर्छ, र यदि यो div भित्र छैन, सामग्री हटाइनेछ. तपाईंले यस तरिकाले div मा कोड घुसाउनबाट जोगिनु पर्छ, किनकि यसले तपाईंको वेबसाइटलाई क्रस-साइट स्क्रिप्टिङ कमजोरीहरूमा पर्दाफास गर्न सक्छ. यदि तपाइँ जाभास्क्रिप्ट जस्ता स्क्रिप्टिङ भाषा प्रयोग गर्दै हुनुहुन्छ भने, तपाईं innerHTML विशेषता प्रयोग गर्न सक्नुहुन्छ.

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