HTML पृष्ठ कसे तयार करावे

तुम्हाला तुमचे स्वतःचे वेब पेज तयार करायचे असल्यास, तुम्हाला HTML ची समज असणे आवश्यक आहे. This article explains how to create an HTML page. तसेच, xml साइटमॅप कसा तयार करायचा आणि चित्र आणि लिंक कशी जोडायची ते तुम्ही शिकाल. xml साइटमॅप तयार करणे देखील महत्त्वाचे आहे, जे तुम्हाला तुमची साइट व्यवस्थापित करण्यात आणि तुमची रहदारी वाढविण्यात मदत करू शकते. पुढील पायरी म्हणजे टेम्पलेट निवडणे.

Creating a html page

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

HTML दस्तऐवज तयार करण्यासाठी, तुम्हाला टेक्स्ट एडिटर वापरावे लागेल. बहुतेक संगणकांमध्ये डीफॉल्टनुसार मजकूर संपादक असतो. विंडोज वापरकर्ते इंटरनेट एक्सप्लोरर वापरतील, तर Mac वापरकर्ते TextEdit वापरू शकतात. व्यावसायिक दिसणारे वेबपृष्ठ तयार करण्यासाठी तुम्ही फॅन्सी टेक्स्ट एडिटर इन्स्टॉल करू शकता, परंतु तुमच्या पहिल्या HTML पृष्ठासाठी, ते आवश्यक नाही. तुम्ही एक साधा टेक्स्ट एडिटर आणि कोणताही वेब ब्राउझर देखील वापरू शकता. तुम्हाला कोणता प्रोग्राम वापरायचा याची खात्री नसल्यास, विनामूल्य HTML संपादक डाउनलोड करण्याचा प्रयत्न करा.

html पृष्ठावर दोन मुख्य विभाग आहेत: शरीर आणि डोके. मुख्य भागामध्ये वेबसाइटची वास्तविक सामग्री आहे, शीर्षक आणि मेटा माहितीसाठी हेड विभाग वापरला जातो. शरीरात इतर सर्व घटक असतात, प्रतिमा आणि इतर ग्राफिक्ससह. हेडर विभाग हे तुमचे नेव्हिगेशन लिंक ठेवण्याचे ठिकाण आहे. आपण मुख्य भाग लिहिल्यानंतर, तुम्ही दस्तऐवजाची सामग्री घालण्यास तयार आहात. तुमची वेबसाइट प्रत्येकासाठी प्रवेशयोग्य आहे याची खात्री करण्यासाठी शरीर आणि डोके घटक वापरण्याची खात्री करा.

Creating a xml sitemap

If you have an HTML page, शोध इंजिनांना तुमची वेबसाइट क्रॉल करण्यात मदत करण्यासाठी तुम्हाला XML साइटमॅप तयार करायचा असेल. जरी हे आपल्या शोध रँकिंगवर परिणाम करणार नाही, हे शोध इंजिनांना तुमची सामग्री समजून घेण्यास आणि त्यांचा क्रॉलिंग दर समायोजित करण्यात मदत करेल. ह्या मार्गाने, तुमची वेबसाइट शोध इंजिन परिणामांमध्ये अधिक दृश्यमान असेल. प्रारंभ करण्यासाठी येथे काही सोप्या पायऱ्या आहेत:

HTML साइटमॅप तयार करणे सोपे आहे. तुम्हाला फक्त तुमच्या साइटच्या पृष्ठांची एक साधी सारणी बनवायची आहे, प्रत्येक पृष्ठाच्या दुव्यांसह. नंतर हेडर किंवा फूटरमध्ये त्या साइटमॅप पृष्ठाशी लिंक करा. ह्या मार्गाने, आपल्या साइटवर किती पृष्ठे आहेत हे महत्त्वाचे नाही, लोक त्यांच्याद्वारे सहजपणे नेव्हिगेट करू शकतात. शिवाय, साइटमॅप तयार करण्यासाठी तुम्हाला एसइओ सबमिट करण्याची गरज नाही.

तुमचे HTML पेज लाइव्ह झाल्यावर, Google Search Console वर सबमिट करा. तुम्ही कोणताही फाइल विस्तार वापरू शकता आणि तुमच्या XML साइटमॅपला नाव देऊ शकता. तुम्ही Google वर XML साइटमॅप सबमिट करू शकता, पण ते आवश्यक नाही. Google चे क्रॉलर्स नवीन सामग्री शोधण्यात सामान्यतः चांगले असतात, आणि तुम्हाला त्यांना साइटमॅप सबमिट करण्याची आवश्यकता नाही. तुम्ही ते इतर सर्च इंजिनवर देखील सबमिट करू शकता, परंतु हे तुम्हाला Google द्वारे शोधले जाईल याची हमी देत ​​नाही.

आपल्या वेब पृष्ठावर 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 मध्ये कोड घालणे टाळावे, कारण ते तुमच्या वेबसाइटला क्रॉस-साइट स्क्रिप्टिंग असुरक्षा दाखवू शकते. जर तुम्ही JavaScript सारखी स्क्रिप्टिंग भाषा वापरत असाल, तुम्ही innerHTML विशेषता वापरू शकता.

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