सामग्री

• पावले
• 2 चा भाग 1: HTML मूलभूत गोष्टी शिकणे
• 2 चा भाग 2: प्रगत HTML
• टिपा
• चेतावणी
• आपल्याला काय आवश्यक आहे

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

पावले

2 चा भाग 1: HTML मूलभूत गोष्टी शिकणे

1. 1 HTML दस्तऐवज उघडा. बहुतांश मजकूर संपादक (विंडोजसाठी नोटपॅड किंवा नोटपॅड ++, मॅकसाठी टेक्स्टएडिट, जीएनयू / लिनक्ससाठी जीडिट) एचटीएमएल फाइल तयार करण्यासाठी वापरता येतात. एक नवीन दस्तऐवज तयार करा आणि फाईल → Save As in Web Page Format वापरून सेव्ह करा किंवा फाईल विस्तार .html किंवा .htm मध्ये .doc, .rtf किंवा दुसर्या विस्ताराऐवजी बदला.
   • आपल्याला एक चेतावणी प्राप्त होऊ शकते की फाईल आरटीएफ स्वरूपाऐवजी "साधा मजकूर" म्हणून जतन केली जाईल, किंवा स्वरूपन आणि प्रतिमा जतन केल्या जाणार नाहीत. हे ठीक आहे; HTML साठी या पर्यायांची गरज नाही.
2. 2 व्युत्पन्न केलेली फाईल ब्राउझरमध्ये उघडा. रिक्त फाइल जतन करा, ती आपल्या संगणकावर शोधा आणि ती उघडण्यासाठी त्यावर डबल-क्लिक करा. ब्राउझरमध्ये एक रिक्त पृष्ठ उघडले पाहिजे. तसे नसल्यास, फाइल आपल्या ब्राउझरच्या अॅड्रेस बारवर ड्रॅग करा. तुम्ही HTML फाईल संपादित करता तेव्हा, बदल पाहण्यासाठी तुम्ही हे पृष्ठ रिफ्रेश करू शकता.
   • कृपया लक्षात घ्या की अशा प्रकारे आपण इंटरनेटवर वेबसाइट तयार करत नाही. इतर लोकांना या पृष्ठावर प्रवेश मिळणार नाही आणि तुमच्या स्थानिक पृष्ठाची चाचणी घेण्यासाठी तुम्हाला इंटरनेट कनेक्शनची आवश्यकता नाही. ब्राउझर सहजपणे HTML कोडचा अर्थ लावतो, जसे की ती वेबसाइट आहे.
3. 3 मार्कअप टॅग काय आहेत ते समजून घ्या. नियमित मजकुराच्या विपरीत, टॅग पृष्ठावर दिसत नाहीत. त्याऐवजी, ते ब्राउझरला पृष्ठ आणि त्याची सामग्री कशी प्रदर्शित करावी हे सांगतात. "उघडण्याच्या" टॅगमध्ये सूचना आहेत. उदाहरणार्थ, तो ब्राउझरला सांगू शकतो की मजकूर म्हणून प्रदर्शित केला पाहिजे धीट... ब्राउझर जिथे सूचना संपेल तिथे दाखवण्यासाठी त्याला "एंड" टॅगची देखील आवश्यकता आहे. या उदाहरणात, प्रारंभ आणि शेवटच्या टॅगमधील मजकूर ठळकपणे प्रदर्शित केला जाईल. टॅग असमान चिन्हांच्या आत लिहिलेले आहेत, परंतु शेवटचा टॅग फॉरवर्ड स्लॅशने सुरू होतो.
   • ओपनिंग टॅग असमानता चिन्हे दरम्यान लिहिले आहे: उघडणारा टॅग>
   • क्लोजिंग टॅगमध्ये, टॅग डिस्क्रिप्टर (नाव) च्या पुढे फॉरवर्ड स्लॅश ठेवला आहे: /शेवटचा टॅग>
   • वेगवेगळे टॅग कसे वापरले जातात हे शोधण्यासाठी वाचा. या चरणासाठी, आपल्याला फक्त रेकॉर्डिंग स्वरूप लक्षात ठेवणे आवश्यक आहे. टॅग असमानता चिन्हे दरम्यान लिहिले आहेत:> आणि />
   • काही शिकवण्यांमध्ये, HTML टॅगला घटक म्हणतात आणि उघडण्याच्या आणि बंद होणाऱ्या टॅगमधील मजकूराला घटक सामग्री म्हणतात.
4. 4 संपादक मध्ये html> टॅग टाइप करा. प्रत्येक एचटीएमएल फाइल टॅगसह सुरू होणे आवश्यक आहे html> आणि टॅगसह समाप्त करा / html>... हे टॅग ब्राउझरला सांगतात की टॅगमधील सर्व सामग्री HTML मध्ये आहे. तुमच्या दस्तऐवजात हे टॅग जोडा:
   • बऱ्याचदा HTML फाइल्स ओळीने सुरू होतात ! डॉक्टाइप html>याचा अर्थ असा की ब्राउझरने संपूर्ण फाइल HTML म्हणून ओळखली पाहिजे. ही ओळ आवश्यक नाही, परंतु ती आपल्याला सुसंगततेच्या समस्यांचे निराकरण करण्यात मदत करू शकते.
   • डायल करा html> दस्तऐवजाच्या शीर्षस्थानी.
   • अनेक रिकाम्या रेषा तयार करण्यासाठी एंटर दाबा किंवा अनेक वेळा रिटर्न करा, नंतर टाइप करा / html>
   • लक्षात ठेवा, ते संपूर्ण तुम्ही या लेखात जो कोड तयार कराल तो या दोन टॅगमध्ये लिहावा लागेल.
5. 5 फाईलमध्ये एक डोके> विभाग तयार करा. Html> आणि / html> टॅग दरम्यान, एक ओपनिंग टॅग तयार करा डोके> आणि बंद टॅग / डोके>... त्यांच्यामध्ये काही रिकाम्या रेषा जोडा. हेड> आणि / हेड> टॅग दरम्यान लिहिलेली सामग्री पृष्ठावरच प्रदर्शित होत नाही. या चरणांचे अनुसरण करा आणि आपल्याला दिसेल की हा टॅग कशासाठी आहे:
   • डोके> आणि < / head> टॅग दरम्यान, लिहा शीर्षक> आणि / शीर्षक>
   • शीर्षक> आणि / शीर्षक> टॅग दरम्यान, लिहा HTML कसे शिकायचे - wikiHow.
   • तुमचे बदल सेव्ह करा आणि फाईल ब्राउझरमध्ये उघडा (किंवा फाइल आधीच उघडी असल्यास पेज रिफ्रेश करा). अॅड्रेस बारच्या वरच्या पृष्ठाच्या शीर्षकामध्ये दिसणारा मजकूर पहा?
6. 6 शरीर> विभाग तयार करा. या उदाहरणातील इतर सर्व टॅग आणि मजकूर मुख्य विभागात लिहिलेले आहेत, त्यातील सामग्री पृष्ठावर प्रदर्शित केली जाते. नंतर टॅग < / head> बंद करा, परंतु आधी tag / html> टॅग जोडा शरीर> आणि / शरीर>... या लेखाच्या उर्वरित भागांसाठी, शरीर विभागासह कार्य करा. तुमची फाईल यासारखी दिसली पाहिजे:
   html>
   डोके>
   title> HTML कसे शिकावे - विकीहाऊ / शीर्षक>
   / डोके>
   शरीर>
   / शरीर>
   / html>
7. 7 विविध शैली वापरून मजकूर जोडा. पृष्ठावर वास्तविक सामग्री जोडण्याची वेळ आली आहे! आपण बॉडी टॅग दरम्यान जे काही लिहाल ते ब्राउझरमध्ये रीफ्रेश झाल्यानंतर पृष्ठावर प्रदर्शित केले जाईल. वापरू नका चिन्हे किंवा >कारण ब्राउझर मजकूराऐवजी टॅग म्हणून सामग्रीचा अर्थ लावण्याचा प्रयत्न करेल. लिहा नमस्कार! (किंवा आपल्याला जे आवडते), नंतर हे टॅग मजकूरात जोडण्याचा प्रयत्न करा आणि काय होते ते पहा:
   • em> सर्वांना नमस्कार! मजकूर "तिरकस" बनवते: नमस्कार!
   • <strong> सर्वांना नमस्कार! मजकूर "ठळक" बनवते: नमस्कार!
   • s> सर्वांना नमस्कार! स्ट्राईकथ्रू मजकूर: नमस्कार!
   • sup> सर्वांना नमस्कार! < / sup> फॉन्ट सुपरस्क्रिप्ट म्हणून प्रदर्शित करतो:
   • sub> सर्वांना नमस्कार! < / sub> फॉन्ट सबस्क्रिप्ट म्हणून दाखवते: _{नमस्कार!}
   • वेगवेगळे टॅग एकत्र करून पहा. ते कसे दिसेल em> <strong> सर्वांना नमस्कार! < / strong> </em>?
8. 8 मजकूर परिच्छेदांमध्ये विभाजित करा. जर तुम्ही HTML फाईलमध्ये मजकुराच्या अनेक ओळी लिहिण्याचा प्रयत्न केला तर तुम्हाला लक्षात येईल की ब्राउझरमध्ये लाइन ब्रेक प्रदर्शित होत नाहीत. मजकूर परिच्छेदांमध्ये विभागण्यासाठी, आपल्याला टॅग जोडण्याची आवश्यकता आहे:
   • p> हा एक स्वतंत्र परिच्छेद आहे. < / p>
   • या वाक्यानंतर या ओळीच्या सुरू होण्यापूर्वी एक रेषा ब्रेक आहे.
     हा पहिला टॅग आहे ज्याला एंड टॅगची आवश्यकता नाही. या टॅगला "रिक्त" टॅग म्हणतात.
   • विभागाचे शीर्षक दाखवण्यासाठी शीर्षके तयार करा:
     h1> शीर्षक मजकूर / h1>: सर्वात मोठे शीर्षक
     h2> शीर्षक मजकूर / h2> (दुसऱ्या स्तराचे शीर्षक)
     h3> शीर्षक मजकूर / h3> (तिसऱ्या पातळीचे शीर्षक)
     h4> शीर्षक मजकूर / h4> (चौथ्या पातळीचे शीर्षक)
     h5> शीर्षक मजकूर / h5> (सर्वात लहान शीर्षक)
9. 9 याद्या तयार करायला शिका. वेब पृष्ठावर याद्या तयार करण्याचे अनेक मार्ग आहेत. खालील पर्याय वापरून पहा आणि तुम्हाला कोणता आवडेल ते ठरवा. लक्षात घ्या की संपूर्ण सूचीसाठी टॅगची एक जोडी आवश्यक आहे (उदाहरणार्थ, उल> आणि / उल> बुलेट केलेल्या सूचीसाठी), आणि प्रत्येक सूची आयटम टॅगच्या वेगळ्या जोडीने हायलाइट केला जातो, उदाहरणार्थ, li> आणि / li>.
   • बुलेट केलेली यादी:
     ul> li> पहिली ओळ < / li> li> दुसरी ओळ < / li> li> आणि असेच < / li> / ul>
   • क्रमांकित यादी:
     ol> li> one / li> li> two / li> li> three / li> / ol>
   • व्याख्या यादी:
     डीएल> डीटी> कॉफी / डीटी> डीडी> - गरम पेय / डीडी> डीटी> लिमोनेड / डीटी> डीडी> - कोल्ड ड्रिंक / डीडी> / डीएल>
10. 10 वापरून पृष्ठ लेआउट करा लाइन ब्रेक, क्षैतिज रेषा, आणि चित्रे. पृष्ठावर मजकूर व्यतिरिक्त काहीतरी जोडण्याची वेळ आली आहे. खालील टॅग वापरून पहा किंवा अधिक माहितीसाठी दुव्यांचे अनुसरण करा. आपण पोस्ट करू इच्छित असलेल्या प्रतिमेचा दुवा तयार करण्यासाठी ऑनलाइन होस्टिंग सेवा वापरा:
    • क्षैतिज रेखा: hr>
    • चित्र घाला: img src = "image link">
11. 11 दुवे जोडा. तुम्ही हे टॅग्ज इतर पेजेस आणि साइट्सवर हायपरलिंक्स तयार करण्यासाठी वापरू शकता, परंतु तुमच्याकडे अजून वेबसाइट नसल्यामुळे, तुम्ही आता अँकर लिंक्स कसे बनवायचे ते शिकू शकाल, म्हणजे पेजवरील विशिष्ट ठिकाणांचे लिंक्स:
    • ज्या पानावर तुम्हाला लिंक करायची आहे त्या> टॅगसह अँकर तयार करा. स्पष्ट आणि संस्मरणीय नाव घेऊन या:
      
      a name = "Tips"> तुम्ही ज्या मजकुराशी दुवा साधत आहात. < / a>
    • सापेक्ष दुवा किंवा बाह्य संसाधनाचा दुवा तयार करण्यासाठी href> टॅग वापरा:
      
      a href = "पृष्ठाचा दुवा किंवा पृष्ठामधील अँकरचे नाव"> मजकूर किंवा प्रतिमा जो दुवा म्हणून काम करेल. < / a>
    • दुसर्या पानावर नातेवाईक दुव्याशी जोडण्यासाठी, मुख्य दुव्याच्या नंतर # चिन्ह आणि अँकरचे नाव जोडा. उदाहरणार्थ, https://en.wikihow.com/learn-HTML#Tips या पृष्ठाच्या टिपा विभागाच्या दुवे.

2 चा भाग 2: प्रगत HTML

1. 1 गुणधर्म जाणून घ्या. गुणधर्म टॅगच्या आत लिहिलेले आहेत, जे अतिरिक्त माहिती दर्शवतात. गुणधर्मांचे स्वरूप खालीलप्रमाणे आहे: नाव = "मूल्य", कुठे शीर्षक विशेषता परिभाषित करते (उदाहरणार्थ, रंग रंग गुणधर्मासाठी), आणि मूल्य त्याचे मूल्य दर्शवते (उदाहरणार्थ, लाल लाल साठी).
   • एचटीएमएल बेसिक्स वरील मागील विभागात गुणधर्म वापरले गेले आहेत. Img> टॅग विशेषता वापरते src, सापेक्ष दुवा अँकर विशेषता वापरतात नावआणि दुवे विशेषता वापरतात href... आपण आधीच लक्षात घेतल्याप्रमाणे, सर्व गुणधर्म स्वरूपात लिहिलेले आहेत ___='___’.
2. 2 HTML टेबल्ससह प्रयोग करा. सारणीच्या निर्मितीमध्ये विविध टॅगचा वापर समाविष्ट असतो. आपण प्रयोग करू शकता किंवा अधिक तपशीलवार सूचना वाचू शकता.
   • टेबल टॅग तयार करा:टेबल> / टेबल>
   • सारणीतील प्रत्येक पंक्तीची सामग्री टॅगमध्ये जोडा: tr>
   • स्तंभाचे शीर्षक टॅगद्वारे परिभाषित केले आहे: th>
   • पुढील ओळींमधील पेशी: td>
   • हे टॅग वापरण्याचे उदाहरण:
     
     टेबल> tr> th> स्तंभ 1: महिना / th> th> स्तंभ 2: बचत / th> / tr> tr> td> जानेवारी / td> td> 5000 रूबल / td> / tr> / table>
3. 3 अतिरिक्त डोके विभाग टॅग जाणून घ्या. प्रत्येक html फाईलच्या सुरवातीला येणारा हेड> टॅग तुम्ही आधीच शिकला आहे. शीर्षक> टॅग व्यतिरिक्त, या विभागासाठी इतर टॅग आहेत:
   • मेटा टॅग ज्यात आहेत मेटाडेटासाइटची अनुक्रमणिका करण्यासाठी शोध इंजिनांद्वारे वापरली जाते. सर्च इंजिनमध्ये आपली साइट शोधणे सोपे करण्यासाठी, एक किंवा अधिक उघडणारे मेटा> टॅग वापरा (बंद टॅग आवश्यक नाहीत).प्रति टॅग एक गुणधर्म आणि एक मूल्य वापरा: मेटा नाव = "वर्णन" सामग्री = "पृष्ठ वर्णन">; किंवा मेटा नाव = "कीवर्ड" सामग्री = "स्वल्पविरामाने वेगळे केलेले कीवर्ड">
   • दुवा> टॅग जे तृतीय-पक्ष फायलींकडे निर्देशित करतात, जसे की स्टाईल शीट्स (CSS), जे वेगळ्या प्रकारच्या एन्कोडिंगचा वापर करून तयार केले जातात आणि आपल्याला रंग, मजकूर संरेखन आणि इतर अनेक वैशिष्ट्यांचा वापर करून HTML पृष्ठ बदलण्याची परवानगी देतात.
   • स्क्रिप्ट> टॅग्ज जावास्क्रिप्ट फायलींना पानाशी जोडण्यासाठी वापरले जातात. या फायली पृष्ठास परस्पर सुधारित करण्यासाठी आवश्यक आहेत (वापरकर्त्याच्या क्रियांच्या प्रतिसादात).
4. 4 इतर साइट्सच्या HTML कोडसह प्रयोग करा. इतर वेब पृष्ठांचे स्त्रोत कोड पाहणे HTML शिकण्याचा एक चांगला मार्ग आहे. आपण पृष्ठावर उजवे क्लिक करू शकता आणि आपल्या ब्राउझरच्या शीर्ष मेनूमधून स्त्रोत किंवा तत्सम काहीतरी निवडू शकता. अपरिचित टॅग काय करतो हे शोधण्याचा प्रयत्न करा किंवा त्याबद्दल माहितीसाठी इंटरनेट शोधा.
   • जरी आपण इतर लोकांच्या साइट्स संपादित करू शकत नसलो तरी, नंतर टॅगसह प्रयोग करण्यासाठी आपण आपल्या फाईलमध्ये स्त्रोत कोड कॉपी करू शकता. कृपया लक्षात घ्या की सीएसएस मार्कअप उपलब्ध नसेल आणि रंग आणि स्वरूपन भिन्न दिसू शकतात.
5. 5 अधिक तपशीलवार मार्गदर्शक एक्सप्लोर करणे प्रारंभ करा. इंटरनेटवर एचटीएमएल टॅगला समर्पित अनेक साइट्स आहेत, जसे की W3Schools किंवा HTMLbook. विक्रीवर कागदी पुस्तके देखील आहेत, परंतु मानके बदलतात आणि विकसित होतात म्हणून नवीनतम आवृत्ती शोधण्याचा प्रयत्न करा. अजून चांगले, आपल्या साइटच्या लेआउट आणि देखाव्यावर अधिक नियंत्रण ठेवण्यासाठी CSS मास्टर करा. CSS शिकल्यानंतर वेब डिझायनर सहसा जावास्क्रिप्ट शिकतात.

टिपा

• नोटपॅड ++ हा एक उत्तम विनामूल्य प्रोग्राम आहे, जो नियमित नोटपॅड प्रमाणेच आहे, परंतु आपण आपला कोड आपल्या ब्राउझरमध्ये ऑनलाइन जतन आणि चाचणी करू शकता. (हे जवळजवळ कोणत्याही भाषेचे समर्थन करते - एचटीएमएल, सीएसएस, पायथन, जावास्क्रिप्ट आणि असेच.)
• नेटवर काही साधे पान शोधा, तुमच्या संगणकावर कोड सेव्ह करा आणि त्यावर प्रयोग करा. मजकूर हलवण्याचा प्रयत्न करा, फॉन्ट बदला, प्रतिमा पुनर्स्थित करा - काहीही असो!
• आपण एक नोटबुक ठेवू शकता जिथे आपण टॅग लिहितो जेणेकरून ते नेहमी आपल्या हातात असतील. तुम्ही हे पान प्रिंट करून त्याचा संदर्भ घेऊ शकता.
• जेव्हा तुम्ही कोड लिहाल तेव्हा ते काळजीपूर्वक करा जेणेकरून तुम्हाला आणि इतर लोकांना ते समजेल. वापरा! - HTML टिप्पण्यांसाठी येथे टिप्पणी घाला -> ते पृष्ठावर प्रतिबिंबित होणार नाही, परंतु कोड दस्तऐवजात दृश्यमान असेल.
• एक्सएमएल आणि आरएसएस लोकप्रिय होत आहेत. एक्सएमएल आणि आरएसएस तंत्रज्ञान असलेल्या पृष्ठांसाठी कोड अननुभवी वापरकर्त्यासाठी वाचणे आणि समजणे अधिक कठीण आहे, परंतु ही साधने बरीच उपयुक्त आहेत.
• एचटीएमएल मधील मार्कअप टॅग केस-असंवेदनशील आहेत, परंतु आम्ही मानकीकरण आणि एक्सएचटीएमएल सुसंगतता दोन्हीसाठी फक्त लोअरकेस अक्षरे (या लेखातील उदाहरणांप्रमाणे) वापरण्याची शिफारस करतो.

चेतावणी

• काही टॅग्ज गेल्या काही वर्षांमध्ये वापरातून बाहेर पडले आहेत आणि ते बदलले गेले आहेत जे समान किंवा काही अतिरिक्त प्रभाव देतात.
• आपण आपल्या पृष्ठाची चाचणी घेऊ इच्छित असल्यास, W3 साइटवर जा आणि आधुनिक HTML आवश्यकता तपासा. एचटीएमएल मानके कालांतराने बदलतात, आणि काही टॅग नवीन ब्राउझरमध्ये बदलतात जे आधुनिक ब्राउझरमध्ये अधिक चांगले कार्य करतात.

आपल्याला काय आवश्यक आहे

• नोटपॅड (विंडोज) किंवा टेक्स्ट एडिट (मॅक) सारखा मजकूर संपादक
• पेपर / नोटपॅड (गरज नाही)
• HTML संपादक जसे की Notepad ++ (Windows) किंवा TextWrangler (Mac) (गरज नाही)