HTML शिकत आहे

लेखक: Christy White
निर्मितीची तारीख: 7 मे 2021
अद्यतन तारीख: 1 जुलै 2024
Anonim
एक उच्च आय कौशल के साथ $146,000 का भुगतान प्...
व्हिडिओ: एक उच्च आय कौशल के साथ $146,000 का भुगतान प्...

सामग्री

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

पाऊल टाकण्यासाठी

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

  1. एक HTML दस्तऐवज उघडा. विंडोजसाठी नोटपॅड किंवा वर्ड आणि मॅकसाठी मजकूर संपादकासह बरेच शब्द प्रक्रिया प्रोग्राम HTML दस्तऐवज तयार करण्यासाठी वापरले जाऊ शकतात. नवीन कागदजत्र उघडा आणि आपला दस्तऐवज वेब पृष्ठ म्हणून जतन करण्यासाठी वरच्या मेनूमधून फाइल जतन करा select किंवा ".doc", ".rtf" किंवा इतर काहीही ".html" किंवा ".htm वर फाइल विस्तार बदलण्यासाठी निवडा. ".
    • आपण आता एक चेतावणी पाहू शकता की आपला दस्तऐवज रिच टेक्स्ट स्वरूपनात (आरटीएफ) वरुन "साधा मजकूर" स्वरुपात बदलला जात आहे आणि काही स्वरूपन पर्याय आणि प्रतिमा योग्य प्रकारे जतन केल्या जात नाहीत. आपण या चेतावणीकडे दुर्लक्ष करू शकता; HTML दस्तऐवज हे पर्याय वापरत नाहीत.
    • .html आणि .htm फायली समान आहेत. हे दोन्ही कार्य करते.
  2. ब्राउझरसह आपला कागदजत्र पहा. आपले रिक्त कागदजत्र जतन करा, ते बंद करा आणि नंतर कागदजत्र पुन्हा उघडण्यासाठी जतन करण्यात आले त्या ठिकाणी डबल-क्लिक करा. आपला कागदजत्र आता आपल्या ब्राउझरद्वारे रिक्त वेब पृष्ठ म्हणून उघडला जावा. जर ते कार्य करत नसेल तर फाईलचे चिन्ह आपल्या ब्राउझरच्या अ‍ॅड्रेस बारवर ड्रॅग करा. नंतर, आपण या लेखाच्या चरणांचे अनुसरण करीत आपले HTML दस्तऐवज संपादित केल्यास, कोडमधील बदल कसे दिसतात हे तपासण्यासाठी आपण ब्राउझरकडे परत जात रहाल.
    • टीपः आपले वेबपृष्ठ अद्याप ऑनलाइन नाही. हे पृष्ठ दुसर्‍यासाठी प्रवेश करण्यायोग्य नाही आणि आपल्याला याची चाचणी घेण्यासाठी कार्यरत इंटरनेट कनेक्शनची आवश्यकता नाही. आपण HTML ब्राउझर वेबसाइट असल्यासारखेच "ब्राउझर" वाचण्यासाठी आपला ब्राउझर वापरता.
  3. "टॅग" म्हणजे काय ते समजून घ्या. अंतिम मजकूर टॅग्ज सारख्या सामान्य मजकूरावरील टॅग्ज दृश्यमान नाहीत. हे पृष्ठ आणि पृष्ठावरील सामग्री कशी प्रदर्शित करावी हे टॅग आपल्या ब्राउझरला सांगतात. प्रारंभ टॅगमध्ये सूचना आहेत. उदाहरणार्थ, ते ब्राउझरला मजकूर ठळकपणे प्रदर्शित करण्यास सांगू शकतो. सूचना कोठे लागू होतात ते ब्राउझरला सांगण्यासाठी शेवटचा टॅग आवश्यक आहे: या उदाहरणात, प्रारंभ आणि शेवटचा टॅग मधील सर्व मजकूर ठळक आहे. शेवटचे टॅग देखील कंसात ठेवले आहेत, परंतु स्लॅश पहिल्या कंसात नंतर.
    • कंसात प्रारंभ टॅग लिहा: आजचा दिवस आहे>
    • कंसात शेवटचे टॅग लिहा, परंतु प्रथम कंसानंतर स्लॅश ठेवा: /हा बंद करणारा टॅग आहे>)
    • लेखात नंतर वाचा फंक्शनल टॅग कसे लिहावे. या चरणात, आपल्याला टॅग कसे लिहायचे ते लक्षात ठेवणे आवश्यक आहे:> आणि />.
    • इतर एचटीएमएल अभ्यासक्रमांमध्ये, टॅगला "घटक" म्हणून देखील संबोधले जाते आणि टॅग उघडणे आणि बंद करणे दरम्यान मजकूर देखील "घटक सामग्री" म्हणून संदर्भित केला जातो.
  4. आपला प्रथम एचटीएमएल> टॅग लिहा. प्रत्येक एचटीएमएल दस्तऐवज ए सह प्रारंभ होतो html>टॅग आणि एक सह समाप्त / html>टॅग हे ब्राउझरला सांगते की या टॅगमधील प्रत्येक गोष्ट HTML मध्ये लिहिली आहे. आपल्या कागदजत्रात हे टॅग जोडा:
    • लिहा html> आपल्या दस्तऐवजाच्या शीर्षस्थानी.
    • स्वत: ला थोडी जागा देण्यासाठी अनेकदा एंटर दाबा किंवा परत जा, नंतर लिहा / html>
    • तुझी आठवण येते सर्वकाही या दोन टॅग दरम्यान या लेखात.
  5. आपल्या दस्तऐवजाचा मुख्य भाग बनवा. एचटीएमएल> आणि << एचटीएमएल> टॅग दरम्यान आपण एक लिहा डोके>प्रारंभ टॅग आणि ए / डोके>-पुढील टॅग. या टॅग दरम्यान पुन्हा थोडी जागा तयार करा. या टॅग दरम्यान काहीही लिहिलेले वेब पृष्ठावरच दृश्यमान नाही. खालील चरण वापरून पहा आणि माहिती कोठे दर्शविली जात आहे हे आपण पाहू शकता की नाही ते पहा:
    • डोके> आणि / डोके> टॅग दरम्यान लिहा: शीर्षक> आणि / शीर्षक>
    • टॅग शीर्षक> आणि / शीर्षक> दरम्यान आपण लिहा: एचटीएमएल कसे शिकायचे (चित्रांसह) - विकी.
    • कागदजत्र जतन करा आणि ब्राउझरमध्ये उघडा (किंवा कागदजत्र जतन करा आणि पृष्ठ अद्याप उघडे असल्यास ब्राउझरवरील पृष्ठ रीफ्रेश करा). अ‍ॅड्रेस बारच्या वर पृष्ठाच्या शीर्षस्थानी आपण काय लिहिले आहे ते आपण पाहता?
  6. मुख्य भाग> विभाग तयार करा. या नवशिक्याच्या दस्तऐवजात इतर सर्व काही मुख्यपृष्ठ> विभागात ठेवले आहे आणि ते वेब पृष्ठावर दर्शविले आहे. नंतर टॅग </ head>, परंतु च्या समोर टॅग </ html> आपण लिहीता शरीर> आणि / बॉडी>. या लेखात आम्ही चर्चा करीत असलेली प्रत्येक गोष्ट आम्ही शरीर टॅगच्या दरम्यान ठेवतो. आपल्याकडे आता असे दस्तऐवज असावे (बुलेटशिवाय):
    • html>
    • डोके>
    • शीर्षक> HTML शिकू - विकी / शीर्षक>
    • / डोके>
    • शरीर>
    • / बॉडी>
    • / html>
  7. भिन्न शैलींमध्ये मजकूर जोडा. आता अशी वेळ आपण ब्राउझरमध्ये दृश्यमान होईल असे काहीतरी लिहायला सुरुवात केली आहे! आपण बदल जतन केल्यावर आणि ब्राउझरमधील पृष्ठ रीफ्रेश केल्यावर आपण मुख्य टॅग्जवर लिहिता प्रत्येक गोष्ट ब्राउझरमध्ये दृश्यमान असेल. लिहा नाही चिन्हे काहीतरी आणि >कारण आपला ब्राउझर त्यास साध्या मजकुराऐवजी HTML सूचना म्हणून वर्णन करेल. उदाहरणार्थ लिहा हॅलो वर्ल्ड! ("हॅलो वर्ल्ड!" साठी इंग्रजी, विशिष्ट प्रोग्रामिंग भाषेतील कोणत्याही प्रोग्रामिंग कोर्समधील हे पहिले उदाहरण म्हणून जागतिक स्तरावरचा मजकूर आहे) किंवा आणखी काही, आणि मजकूराच्या आधी आणि नंतर पुढील टॅग्ज ठेवले आणि काय होते ते पहा:
    • em> हॅलो वर्ल्ड </ em> तिर्यक मजकूरासारखे दिसते: हॅलो वर्ल्ड!
    • strong> हॅलो वर्ल्ड </ strong> ठळक मजकूरासारखे दिसते: हॅलो वर्ल्ड!
    • s> हॅलो वर्ल्ड </ s> स्ट्राइकथ्रू मजकूरासारखे दिसते: हॅलो वर्ल्ड!
    • समर्थन> हॅलो वर्ल्ड! सुपरस्क्रिप्टसारखे दिसते:
    • उप> हॅलो वर्ल्ड </ sub> मथळ्यासारखे दिसते: हॅलो वर्ल्ड!
    • संयोजन पहा: कसे दिसते ईएम </ strong> हॅलो वर्ल्ड </ strong> </em> चालता हो?
  8. आपला मजकूर परिच्छेदांमध्ये विभाजित करा. आपण आपल्या दस्तऐवजात मजकूराच्या वेगवेगळ्या रेषा घातल्यास आपल्याला दिसेल की सर्व रेषा एकामागून एक ठेवलेल्या आहेत. आपण स्वतः नवीन ओळी आणि कोरे रेषा प्रोग्राम कराव्यात:
    • p> हा वेगळा विभाग आहे. </ p>
    • हे वाक्य पहिल्या ओळीवर आहे आणि पुढील वाक्य आहे.
      हा पहिला टॅग आहे ज्यास अंतिम टॅगची आवश्यकता नाही! आम्ही अशा टॅगला कॉल करतो रिक्त टॅग.
    • विभागांची नावे स्पष्ट करण्यासाठी हेडर तयार करा:
      h1> शीर्षलेख </ h1>: सर्वात मोठे शक्य शीर्षलेख
      h2> शीर्षलेख </ h2> (2 लेव्हल शीर्षलेख)
      h3> शीर्षलेख </ h3> (3 स्तर शीर्षलेख)
      h4> शीर्षलेख </ h4> (4 स्तर शीर्षलेख)
      h5> शीर्षलेख </ h5> (सर्वात लहान शक्य शीर्षलेख)
  9. याद्या कसे तयार करावे ते शिका. वेबपृष्ठावर याद्या तयार करण्याचे बरेच मार्ग आहेत. आपल्याला काय आवडते हे शोधण्यासाठी खालील पद्धती वापरून पहा. लक्षात ठेवा की टॅगची एक जोडी संपूर्ण यादीच्या आसपास ठेवली गेली आहे (जसे की </ b> आणि अनियर्डर केलेल्या सूचीसाठी टॅग) आणि टॅगची एक वेगळी जोडी यादीमधील प्रत्येक वस्तूच्या आसपास ठेवली आहे, जसे की लि> आणि / ली> .
    • बुलेट केलेल्या याद्या तयार करण्यासाठी खालील कोड वापरा:
      << li> एक आयटम </ li> <i> इतर आयटम </ li> <i> इतर आयटम </ li> </ul>
    • किंवा क्रमांकित याद्या तयार करण्यासाठी हा कोडः
      << li> आयटम </ li> ली> </ i> <i> आयटम </ li> <<<
    • किंवा तथाकथित परिभाषा सूची तयार करण्यासाठी हा कोडः
      डीएल> डीटी> कॉफी </ डीटी> डीडी> - हॉट ड्रिंक </ dd> डीटी> दूध </ d> <d> - कोल्ड ड्रिंक </ d> </ d>
  10. नवीन रेखा, क्षैतिज रेखा आणि प्रतिमांसह आपले पृष्ठ अधिक आकर्षक बनवा. आता आपल्या पृष्ठामध्ये इतर गोष्टी जोडण्याची वेळ आली आहे. खालील टॅग वापरून पहा (प्रतिमा ऑनलाइन पोस्ट केली पाहिजे जेणेकरुन आपण प्रतिमेचा दुवा वापरू शकाल):
    • एक ओळ घाला: बीआर> किंवा एचआर>
    • प्रतिमा घाला: img src = "the_url_of_your_image">
  11. पृष्ठावरील इतर ठिकाणी दुवे घाला. आपण हा कोड इतर पृष्ठे आणि वेबसाइटशी दुवा साधण्यासाठी देखील वापरू शकता, परंतु आपल्याकडे अद्याप वेबसाइट नसल्यामुळे आम्ही "अँकर" वर लक्ष केंद्रित करू, ज्या पृष्ठाशी आपण जोडू शकता अशा विशिष्ट ठिकाणी:
    • प्रथम, आपण दुवा साधू इच्छित असलेल्या पृष्ठाच्या बिंदूवर अ> टॅगसह एक अँकर तयार करा. आपल्या अँकरला एक स्पष्ट नाव द्या जे लक्षात ठेवण्यास सोपे आहे:

      a name = "Tips"> हा मजकूर आहे ज्याभोवती आपण आपला अँकर ठेवला. </ a>
    • आपल्या अँकरशी किंवा दुसर्‍या वेबपृष्ठाशी दुवा साधण्यासाठी href> टॅग वापरा:

      a href = "वेबपृष्ठाचा url किंवा या पृष्ठावरील अँकरचे नाव"> दुवा म्हणून दर्शविलेले मजकूर किंवा प्रतिमा येथे लिहा. </ a>
    • दुसर्‍या पृष्ठावरील अँकरशी दुवा साधण्यासाठी, आपल्या अँकरच्या नावानंतर, url नंतर # वर्ण जोडा. उदाहरणार्थ http://www.wikihow.com/HTML-leren# टिपा आपल्याला या पृष्ठावरील थेट "टिप्स" विभागात नेतील.

भाग २ चा 2: प्रगत HTML शिकणे

  1. गुणधर्मांबद्दल जाणून घ्या. टॅगमध्ये विशेषता ठेवल्या जातात आणि प्रारंभ आणि शेवटच्या टॅग दरम्यान "घटक सामग्री" मध्ये अतिरिक्त समायोजन करण्यासाठी वापरले जातात. ते कधीही एकटे उभे राहत नाहीत. ते खालीलप्रमाणे लिहिले आहेत: नाव = "मूल्य". नाव विशेषता नाव दर्शविते (उदाहरणार्थ, "रंग") आणि मूल्य या विशिष्ट प्रकरणाचे वर्णन करते (उदा. "लाल").
    • जर आपण या लेखाच्या मागील भागाकडे बारकाईने पाहिले असेल तर आपल्याकडे आधीपासूनच विशेषता आल्या आहेत. Img> टॅग विशेषता वापरते src, एक अँकर विशेषता वापरते नाव आणि दुवे विशेषता वापरतात href. आपण ते सर्व आकाराचे असल्याचे सांगू शकता ___='___’ अनुसरण.
  2. एचटीएमएल सारण्यांसह प्रयोग करा. एक टेबल किंवा आलेख तयार करण्यासाठी आपल्याला बर्‍याच टॅगची आवश्यकता आहे:
    • संपूर्ण सारणीच्या आसपास टेबल टॅगसह (इंग्रजीमध्ये "टेबल") प्रारंभ करा:टेबल </ टेबल>
    • प्रत्येक पंक्तीच्या सामग्रीच्या आसपास टॅग ठेवा: tr>
    • पहिल्या पंक्तीमध्ये स्तंभ शीर्षलेख ठेवा: व्या>
    • सलग पंक्तींमध्ये सेल ठेवा: td>
    • हे सर्व एकत्र कसे येते याचे हे एक उदाहरणः

      सारणी </ tr> स्तंभ 1: महिना / व्या <<< स्तंभ 2: पैसे वाचविले </ th> </ tr> <<< जानेवारी / टीडी> टीडी> € 100 / टीडी </ tr> / टेबल>
  3. मुख्य विभागात वापरले इतर टॅग जाणून घ्या. आपण प्रत्येक दस्तऐवजाच्या सुरूवातीस असलेले टॅग हेड> आधीपासून शिकलात आहे. शीर्षक> टॅग व्यतिरिक्त, मुख्य विभागात इतर टॅग असू शकतात:
    • मेटा टॅग तयार करण्यासाठी वापरले जातात मेटाडेटा वेब पृष्ठाबद्दल हा डेटा वेब पृष्ठे वर्गीकृत करण्यासाठी शोध इंजिनद्वारे वापरला जातो. आपले पृष्ठ शोध इंजिनवर दृश्यमान करण्यासाठी आपण एक किंवा अधिक मेटा टॅग लावू शकता (अंतिम टॅग आवश्यक नाहीत), प्रत्येक टॅगमध्ये नेमके एक नाव गुणधर्म आणि सामग्रीचे गुणधर्म असणे आवश्यक आहे, उदाहरणार्थ: मेटा नाव = "वर्णन" सामग्री = "येथे ठेवले वर्णन ">; किंवा मेटा नाव = "कीवर्ड" सामग्री = "येथे स्वल्पविरामाने विभक्त केलेले कीवर्डची सूची येथे लिहा."
    • दुवा> टॅग पृष्ठावरील इतर फायलींचा दुवा साधण्यासाठी वापरले जातात. सामान्यत: सीएसएस शैली पत्रके एचटीएमएल पृष्ठांशी संबद्ध करण्यासाठी वापरली जातात, ही पृष्ठे वेगळ्या प्रकारच्या कोडसह तयार केली जातात आणि पृष्ठाची एकंदर शैली निर्धारित करण्यासाठी वापरली जातात.
    • स्क्रिप्ट> टॅग्ज जावास्क्रिप्ट फायली HTML पृष्ठासह संबद्ध करण्यासाठी वापरले जातात. वापरकर्त्याने पृष्ठावर काही केले तर जावास्क्रिप्ट पृष्ठ बदलू देते.
  4. विद्यमान पृष्ठांवरील HTML सह खेळा. वेब पृष्ठांचा स्त्रोत कोड पाहणे हा आपला HTML ज्ञान विस्तृत करण्याचा एक चांगला मार्ग आहे. पृष्ठावर उजवे क्लिक करा आणि "स्त्रोत पहा", "पृष्ठ स्त्रोत दर्शवा" किंवा तत्सम निवडा. आपल्याला माहित नसलेला एखादा विशिष्ट टॅग काय करतो ते शोधा किंवा उत्तरासाठी ऑनलाइन शोधा.
    • आपण इतर लोकांच्या वेबसाइट संपादित करू शकत नाही परंतु आपण आपल्या स्वतःच्या कागदजत्रात HTML कोड कॉपी करू शकता आणि भिन्न adjustडजस्टमेंट काय करतात हे पाहण्यासाठी त्यासह प्ले करू शकता. टीप: बर्‍याच वेबसाइट्स सीएसएस स्टाईल शीट वापरतात म्हणून आपणास बर्‍याच रंग किंवा इतर शैली दिसू शकणार नाहीत.
  5. अधिक सखोल लेख वाचून एचटीएमएलबद्दल जाणून घ्या. डब्ल्यू 3 स्कूल किंवा कोडेकेडेमी सारख्या अधिक एचटीएमएल टॅगमध्ये प्रभुत्व मिळविण्यासाठी इंटरनेटवर बरीच संसाधने आहेत. तेथे बर्‍याच एचटीएमएल पुस्तके उपलब्ध आहेत, परंतु वेळोवेळी HTML मानक बदलल्यामुळे आपण अलीकडील आवृत्ती वापरत असल्याचे सुनिश्चित करा. एकदा आपण एका चांगल्या स्तरावर एचटीएमएल मिळविल्यानंतर आपण आपल्या वेब पृष्ठाच्या डिझाइनवर आणि शैलीवर अधिक नियंत्रण ठेवण्यासाठी सीएसएसकडे जाऊ शकता. यानंतर, पुढची पायरी सहसा जावास्क्रिप्ट असते.

टिपा

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

चेतावणी

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

गरजा

  • एक शब्द प्रक्रिया प्रोग्राम, जसे की नोटपॅड (विंडोज) किंवा मजकूर संपादक (मॅक).
  • कागदाचा कागद किंवा नोटबुक (पर्यायी)
  • एचटीएमएल लिहिण्यासाठी खास बनविलेले प्रोग्राम, जसे की विंडोजसाठी नोटपॅड ++ किंवा मॅकसाठी टेक्स्टरंगलर (पर्यायी)