सीएसएस शिकणे कोठे सुरू करावे. एचटीएमएल आणि सीएसएस शिकण्यासाठी सर्वोत्तम संसाधने. मैफलीची तयारी

आजकाल इंटरनेटवर काम करणाऱ्या आणि html म्हणजे काय हे माहित नसलेल्या व्यक्तीची कल्पना करणे कठीण आहे. अनेकांना ही भाषा शिकायची आहे. असे दिसते की काहीही सोपे असू शकत नाही - या विषयाला वाहिलेली भयानक पुस्तके आहेत. एचटीएमएल भाषा खरोखरच इतकी क्लिष्ट आहे का की तिच्यासाठी प्रचंड व्हॉल्यूम समर्पित आहेत?

या लेखात मी देण्याचा प्रयत्न करू इच्छितो मूलभूत ज्ञानज्यांना लेआउट शिकायचे आहे, त्यांना योग्य दिशेने निर्देशित करण्यासाठी या विषयाबद्दल. याचा अर्थ असा नाही की मी जे लिहिले ते अपरिवर्तनीय सत्य आहे. मला फक्त नवशिक्यांना सामान्य समस्यांबद्दल थोडी माहिती हवी आहे.

सुरुवातीला, मी या लेखाची ढोबळ रूपरेषा देऊ इच्छितो. एखाद्याला एखाद्या गोष्टीमध्ये स्वारस्य नसल्यास, ते सुरक्षितपणे ते वगळू शकतात.

• आपल्याला कोणते टॅग माहित असणे आवश्यक आहे?
• ते सुंदर कसे बनवायचे?

एचटीएमएल म्हणजे काय आणि त्याची गरज का आहे?

html ही प्रोग्रामिंग भाषा नाही, जसे अनेकांना वाटते. ती फक्त एक मार्कअप भाषा आहे. दस्तऐवजाची रचना निश्चित करणे हा त्याचा उद्देश आहे. जर कोणी तुम्हाला सांगितले की व्याख्या करण्यासाठी html आवश्यक आहे देखावापृष्ठे - त्याच्यावर विश्वास ठेवू नका! ही व्यक्ती एकतर भूतकाळातील आहे किंवा विषय पूर्णपणे समजत नाही.

html घटकांची सिमेंटिक (अर्थपूर्ण) व्यवस्था परिभाषित करते. कोणता परिच्छेद खालीलप्रमाणे आहे, कोणती सामग्री तार्किकदृष्ट्या जोडलेली आहे आणि कोणती पूर्णपणे आहे भिन्न संचडेटा, चित्र कुठे टाकायचे आणि कुठे जायचे या लिंकवर क्लिक करून. तत्वतः, जर आता फक्त html चा वापर पेज लेआउटसाठी केला गेला असेल, तर सर्व साइट्स दिसायला फारशा वेगळ्या नसतील. कोणी म्हंटल तर प्रतिष्ठापन पार्श्वभूमी चित्र - कार्य html- त्याच्या तोंडावर थुंकणे, त्याच्यावर विश्वास ठेवू नका.

HTML, इतर अनेक वेब-संबंधित तंत्रज्ञानाप्रमाणे, W3C कन्सोर्टियमद्वारे समर्थित आहे. तुम्हाला सर्व काही प्रथमतः जाणून घ्यायचे असल्यास, कृपया त्यांच्या वेबसाइटला भेट द्या. परंतु मी तुम्हाला चेतावणी दिली पाहिजे: W3C द्वारे जारी केलेली वैशिष्ट्ये आहेत सल्लागार स्वभाव, त्यामुळे ब्राउझर नेहमी समान html कोड वेगळ्या पद्धतीने समजतात. यामुळे मांडणी प्रत्यक्षात आहे त्यापेक्षा खूपच क्लिष्ट दिसते.

सध्या नवीनतम html तपशील 4.0 आहे. तसेच आहेत, xhtml भाषा, जे विकसकासाठी जास्त मागणी आहे कारण त्यात अधिक कठोर मानके आहेत. तर, html मधील टॅग कोणत्याही परिस्थितीत लिहिले जाऊ शकतात, परंतु xhtml मध्ये - फक्त लोअर केसमध्ये. वगैरे. मी xhtml स्पेसिफिकेशनला चिकटून आहे आणि खाली त्याचे वर्णन करेन.

HTML भाषेमध्ये टॅगचा संच असतो. हे ब्राउझरसाठी निर्देश आहेत जे ते आपल्या दस्तऐवजाची रचना सांगतात. कृपया लक्षात ठेवा: रचना. आज आणखी एक तंत्रज्ञान दिसण्यासाठी जबाबदार आहे - सीएसएस, ज्याची खाली चर्चा केली जाईल. html शिकण्यासाठी, खरं तर, तुम्हाला टॅग आणि त्यांच्या गुणधर्मांचा संच शिकण्याची आवश्यकता आहे आणि तेच! तुम्ही चाचणी साइट तयार करणे सुरू करू शकता.

आपल्याला कोणते टॅग माहित असणे आवश्यक आहे?

प्रारंभ करण्यासाठी, आपल्याला टॅगचा एक छोटा संच शिकण्याची आवश्यकता आहे. आता मी त्यांची यादी करेन, विशिष्ट निकषांनुसार त्यांचे गट करून. (ग्रुपिंग ही माझी विषयाची व्यक्तिनिष्ठ दृष्टी आहे आणि ती पूर्णपणे सत्य असल्याचा दावा करत नाही)

• मूलभूत: एचटीएमएल, डोके, शीर्षक, शरीर;
• स्ट्रक्चरल: div, span;
• मजकूर: p, ul, ol, li, h1-h6, br, pre;
• टेबल्स: टेबल, tr, td;
• दुवे: a;
• मल्टीमीडिया: img, ऑब्जेक्ट;
• फ्रेम्स: फ्रेमसेट, फ्रेम, iframe;
• फॉर्म: फॉर्म, इनपुट, टेक्स्टेरिया, लेबल, सिलेक्ट, ऑप्शन;
• पर्यायी: तास;
• विशेष: स्क्रिप्ट, लिंक, मेटा;

जसे आपण पाहू शकता, इतके टॅग नाहीत. तथापि, त्यांना शिकण्यास बराच वेळ लागू शकतो कारण यापैकी अनेक टॅगमध्ये असे गुणधर्म असू शकतात ज्यामुळे घटक वेगळ्या पद्धतीने वागतात.

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

ते सुंदर कसे बनवायचे?

जो कोणी वरील टॅग वापरून पेज डिझाईन करण्याचा प्रयत्न करतो तो अगदी विनम्रपणे डिझाईन केलेले पेज असेल, जे काळ्या मजकूर आणि निळ्या लिंकसह पांढरे असेल. काही लोक टेबल वापरून माहिती ब्लॉक्सच्या स्थितीत विविधता आणू शकतात आणि गुणधर्म संरेखित करा. कोणीतरी चित्रे टाकून पृष्ठ जिवंत करण्याचा प्रयत्न करेल. तथापि, आहे विशेष उपायपृष्ठांचे स्वरूप सानुकूलित करण्यासाठी. हे CSS आहे.

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

लेआउट शिकणे सुरू करण्यासाठी सर्वोत्तम ठिकाण कोठे आहे?

नंतर टाइपसेटिंग सुरू करणे चांगले तुम्हाला तत्त्वे समजतीलवेब काम. वैयक्तिकरित्या, मी याप्रमाणे प्रशिक्षण योजना तयार करेन:

तत्त्वे शिकणे वेब कामआणि क्लायंट-सर्व्हर संरचना

टॅग आणि त्यांच्या गुणधर्मांचा अभ्यास, त्यांच्या वापरावरील व्यावहारिक व्यायामासह

अभ्यास करत आहे CSS नियमत्यांच्या वापरावरील व्यावहारिक व्यायामासह

अभ्यास टेबल लेआउट

मांडणी साधी मांडणीटेबल

सारण्यांसह जटिल लेआउटचे लेआउट

DOCTYPE निर्देश एक्सप्लोर करत आहे

अभ्यास करत आहे ब्लॉक लेआउट(div टॅग)

दिवा वापरून सोप्या लेआउटची मांडणी

divs वापरून जटिल लेआउटची मांडणी

गुरूकडून युक्त्या, युक्त्या, खाचखळगे आणि इतर शहाणपण

तत्वतः, साठी प्राथमिकएचटीएमएलच्या मूलभूत गोष्टींची तयारी आणि ज्ञान, फक्त पहिल्या 5 गुणांवर जाणे पुरेसे आहे. (हा पर्याय वेब प्रोग्रामरसाठी आदर्श असेल जे वेबसाइट लेआउट करणार नाहीत. त्यांना स्क्रिप्टच्या अंमलबजावणीमुळे मिळालेला डेटा प्रदर्शित करण्यासाठी फक्त html चे ज्ञान आवश्यक आहे.)

नवशिक्यांसाठी HTML मूलभूत गोष्टी, प्रत्येक नवशिक्या वेबमास्टर किंवा ब्लॉगरला आता काय माहित असले पाहिजे. तुम्हाला मूलभूत वेबसाइट्स कशी तयार करायची हे शिकायचे असल्यास, कोड स्वतः समजून घ्या, मूलभूत माहिती न घेता काय मागे आहे आणि काय करावे हे जाणून घ्या HTML भाषाहे करणे केवळ अशक्य आहे. माझ्या ब्लॉगवर माझ्याकडे लेखांची संपूर्ण शृंखला असेल जी मी A ते Z पर्यंत या विषयासाठी समर्पित करेन, मी दस्तऐवजात उपस्थित असलेल्या प्रत्येक टॅगचे वर्णन करेन, त्याचा अर्थ काय आणि ते योग्यरित्या कसे वापरावे.

HTML मूलभूत

जर तुम्हाला सर्वात मूलभूत गोष्टी माहित नसतील तर तुमचा मार्ग बंद आहे. माझा विश्वास आहे की वेबसाइट विकसित करण्याचा आणि तयार करण्याचा निर्णय घेणाऱ्या प्रत्येक व्यक्तीला मूलभूत गोष्टी, साइटमध्ये काय समाविष्ट आहे, ती कशी कार्य करते आणि कोडमध्येच काय होते हे जाणून घेतले पाहिजे आणि समजून घेतले पाहिजे.

अर्थात, बऱ्याच प्रोग्रामिंग भाषा आहेत, त्या सर्व त्यांच्या स्वत: च्या मार्गाने जटिल आहेत, परंतु अशा काही आहेत ज्या आपल्याला पूर्णपणे माहित असणे आवश्यक आहे. जर तुम्हाला मेलद्वारे पाठवल्या जाणाऱ्या पत्राची सुंदर रचना करायची असेल, तर तुमचा स्वतःचा व्हीकॉन्टाक्टे गट आहे, इतरांमध्ये एक गट आहे. सामाजिक नेटवर्कमध्ये, त्याच यूट्यूब चॅनेल, तुम्हाला कोणत्याही साइट इंजिनवरील कोडसह टिंकर करणे आवश्यक आहे, मूलभूत संकल्पनाआपल्याला फक्त माहित असणे आवश्यक आहे.

मी फक्त काही उदाहरणे दिली, खरं तर, आता हे ज्ञान इंटरनेटवर अधिकाधिक वापरले जात आहे. मी थिअरीस्टपेक्षा अभ्यासक आहे, म्हणून या विभागातील माझ्या लेखांमध्ये मी तुम्हाला चरण-दर-चरण कसे आणि काय केले याची उदाहरणे दाखवीन. मी दोन्ही उदाहरणे पृष्ठे आणि संपूर्ण साइट पोस्ट करेन.

HTML दस्तऐवज सर्वात सोपा आहे मजकूर दस्तऐवज, टॅगिंग भाषा तुम्हाला दररोज इंटरनेटवर आढळते. टॅग्ज दस्तऐवजाच्या संरचनेचे वर्णन करतात. टॅग कोनीय म्हणून स्वरूपित केले आहेत< >कंस, ज्यामध्ये टॅगचे नाव लिहिलेले आहे. ब्राउझर दस्तऐवजाची रचना पाहतो, ते तयार करतो आणि आपल्या मॉनिटरवर त्याच्या सूचनांनुसार प्रदर्शित करतो, जर नक्कीच, आपण सर्वकाही योग्यरित्या केले असेल.

तुम्ही पूर्ण झालेले चित्र पाहण्यापूर्वी ही संपूर्ण प्रक्रिया सुरू होते. ब्राउझर एका दस्तऐवजावर क्रमाने प्रक्रिया करतात, सुरुवातीपासून शेवटपर्यंत. पृष्ठावर असले पाहिजे त्या प्रत्येक गोष्टीसह. टेबल्स, चित्रे, स्क्रिप्ट्स आणि इतर, याशिवाय CSS शैली समाविष्ट आहेत.

नवशिक्यांसाठी मूलभूत

html म्हणजे काय - विकिपीडिया काय लिहितो ते पाहिल्यास - (हायपरटेक्स्ट मार्कअप भाषा) भाषा हायपरटेक्स्ट मार्कअपकागदपत्रे इंटरनेटवरील बहुतेक पृष्ठांमध्ये या भाषेत पृष्ठ मार्कअप असते. ही भाषाब्राउझरद्वारे अर्थ लावलेला, परिणामी स्वरूपित मजकूर आपल्या संगणक मॉनिटरवर किंवा मोबाइल डिव्हाइसवर प्रदर्शित केला जातो.

ही भाषा जन्मतःच अतिशय सोपी आणि शिकण्यास सुलभ आहे. कोणीही त्याच्या मूलभूत गोष्टी शिकू आणि समजू शकतो. अशी भाषा वापरण्यासाठी, आपल्याला वर्णनक माहित असणे आणि वापरणे आवश्यक आहे, ज्याला टॅग देखील म्हणतात. टॅगच्या सहाय्याने दस्तऐवज तयार केला जातो.

दस्तऐवजाच्या संरचनेत काय असावे, कोणते टॅग असावेत. एका छोट्या उदाहरणाने सर्वकाही पाहू. मी एमएस ऑफिसमध्ये काही मजकूर लिहिला आणि तो या स्क्रीनशॉटमध्ये दाखवला.

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

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

इव्हगेनी नेस्मेलोव्हचा ब्लॉग! वेबसाइट नवशिक्यांसाठी html आणि css च्या मूलभूत गोष्टी

कोणत्याही html दस्तऐवजात कोणते टॅग असतात, त्यात काय समाविष्ट असते आणि ते सर्व कुठे लिहावे?

< html > < body > < h2 >< / h2 > < p >माझ्या ब्लॉगवर आपले स्वागत आहे, आता HTML मूलभूत ट्यूटोरियल घ्या. जर तुम्हाला हा लेख आवडला असेल, तर तुम्ही तुमच्या ईमेल इनबॉक्समध्ये नवीन लेख प्राप्त करण्यासाठी या ब्लॉगची सदस्यता घेऊ शकता.< / p > < h2 >Evgenia Nesmelov चा ब्लॉग! नेस्मेलोव्ह. ru नवशिक्यांसाठी HTML आणि CSS च्या मूलभूत गोष्टी< / h2 > < / body > < / html >

कोणत्याही कोडमध्ये अँगल ब्रॅकेटमध्ये ठेवलेल्या वर्णांचा समावेश असतो. या सर्वांना घटक म्हणतात. सर्व घटकांमध्ये सहसा दोन टॅग असतात, उघडणे आणि बंद करणे. मी तुम्हाला सुरुवातीला टॅग्जकडे काळजीपूर्वक पाहण्याचा सल्ला देतो; जर तुम्ही त्यापैकी एक चुकला आणि तो बंद केला नाही, तर तुम्हाला त्रुटी शोधण्यासाठी कोडचे मोठे भाग सुधारावे लागतील.

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

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

मजकूर

< strong > < i >मजकूर< / strong > < / i >

HTML दस्तऐवज रचना

मी तुम्हाला पुन्हा एकदा आठवण करून देतो, तुम्हाला दस्तऐवजात उपस्थित असलेल्या नियमांचे पालन करणे आवश्यक आहे. अशा प्रकारे ब्राउझरला पृष्ठावर काय आहे, त्याचा क्रम, सामग्री इत्यादी समजते.

टॅग हा एक घटक आहे जो वेब ब्राउझरला विशिष्ट कार्य करण्यास सांगतो. उदाहरणार्थ, परिच्छेद, सारणी, फॉर्म किंवा प्रतिमेची उपस्थिती.

विशेषता - टॅग सुधारित करते. उदाहरणार्थ, तुम्ही परिच्छेद मध्यभागी किंवा उजवीकडे संरेखित करू शकता, पृष्ठावरील प्रतिमेचे स्थान देखील सेट करू शकता, इत्यादी.

टॅग नेहमी बंद करा, तुम्ही ते उघडल्यास, ते बंद करण्याचे सुनिश्चित करा. IN अन्यथाएक त्रुटी असेल आणि तुमचा दस्तऐवज पृष्ठावर योग्यरित्या प्रदर्शित होणार नाही. अपवाद देखील आहेत, जे विसरता कामा नये.

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

पहिल्यापासून सुरुवात करूया. दस्तऐवजाच्या सुरुवातीला मी एक टॅग उघडला आणि शेवटी मी तो बंद केला. हा कोडपूर्णपणे प्रत्येक दस्तऐवजात उपस्थित आहे, ते ब्राउझरला सांगते की या टॅगमध्ये ठेवलेली प्रत्येक गोष्ट HTML कोड आहे. हे दस्तऐवजाचे मूळ आहे; या टॅगच्या मागे असलेली प्रत्येक गोष्ट यापुढे दस्तऐवजात समाविष्ट केली जात नाही आणि ब्राउझरद्वारे समजली जात नाही. दस्तऐवजाच्या अगदी सुरुवातीस, टॅग उघडला जातो आणि अगदी शेवटी तो बंद करणे आवश्यक आहे.

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

सामग्री

< head >सामग्री< / head >

हे टॅग डोक्यात समाविष्ट केले आहे, ते आत लिहिलेले असणे आवश्यक आहे हेड टॅग. हा शीर्षक टॅग अनिवार्य आहे आणि प्रत्येक HTML दस्तऐवजात उपस्थित असणे आवश्यक आहे. या व्यतिरिक्त, ते ब्राउझर विंडोचे शीर्षक म्हणून दिसते. अशा शीर्षलेखाची लांबी 60 वर्णांपेक्षा जास्त नसावी. अशा शीर्षकाचा मजकूर जास्तीत जास्त असावा संपूर्ण माहिती, जे पृष्ठाची सामग्री वैशिष्ट्यीकृत करते.

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

नंतर आवश्यक टॅगशीर्षक, एक पर्यायी, परंतु तितकाच महत्त्वाचा मेटा टॅग आहे. हा टॅग सिंगल आहे. हा टॅग वापरून, तुम्ही पेज (वर्णन) आणि त्यातील कीवर्ड (कीवर्ड) साठी वर्णन सेट करता.

याव्यतिरिक्त, मध्ये मेटा टॅगपृष्ठाच्या लेखकाबद्दलचा डेटा आणि इतर मेटाडेटा गुणधर्म असू शकतात. तुम्ही संपूर्ण पृष्ठाचे अनुक्रमणिका रोखू शकता शोधयंत्र. ठेवा स्वयंचलित अद्यतनपृष्ठ 20 सेकंदांनंतर किंवा 5 सेकंदांनंतर दुसऱ्या पृष्ठावर संक्रमण.

< meta name = "robots" content = "index, follow" > < meta http - equiv = "refresh" content = "20" > < meta http - equiv = "refresh" content = "5; url=http://сайт/" >

असे अनेक मेटा घटक असू शकतात, कारण ते पूर्णपणे वाहून नेऊ शकतात विविध माहिती. इतर वापरकर्ते, जेव्हा ते ब्राउझरमध्ये पृष्ठ उघडतात, तेव्हा तुमचे सर्व वर्णन दिसत नाहीत;

स्टाईल टॅग पृष्ठावर शैली सेट करण्यासाठी देखील वापरला जाऊ शकतो. आपण खूप वापरल्यास विविध शैली css, या प्रकरणात त्यांना वेगळ्या फाईलमध्ये सेट करण्याचा सल्ला दिला जातो. आपल्याला त्यापैकी अनेक निर्दिष्ट करण्याची आवश्यकता असल्यास, हे सर्व थेट html दस्तऐवजात निर्दिष्ट केले जाऊ शकते.

.बेस (रुंदी: 100px; पार्श्वभूमी-रंग: #000; उंची: 150px; रंग: #fff; )

< style type = "text/css" > पाया( रुंदी: 100px; पार्श्वभूमी - रंग : #000; उंची: 150px; रंग: #fff;

किंवा विशेषत: एका टॅगमध्ये शैली जोडा हे करण्यासाठी, तुम्हाला टॅगमध्येच एक शैली घटक जोडण्याची आवश्यकता आहे. हा टॅग एका कंटेनरमध्ये वापरला जाणे आवश्यक आहे जे पृष्ठासाठी शैली सेट करते. तुम्ही असे अनेक टॅग वापरू शकता, ही चूक होणार नाही.

मागील टॅगसारखे थोडेसे, लिंक टॅग तुम्हाला दुसऱ्या फाईलमध्ये असलेल्या दस्तऐवजासाठी शैली सेट करण्याची परवानगी देतो. दुसऱ्या शब्दांत, आपण कनेक्ट करू शकता विद्यमान दस्तऐवज पूर्ण टेबल css शैली, ज्यामध्ये अनेक गुणधर्म असतात. अशा प्रकारे, आपण दस्तऐवजाचा आकार कमी करता, जो शेवटी लोड होईल आणि संगणकावर जलद उघडेल किंवा मोबाइल डिव्हाइसकमी इंटरनेट गतीसह.

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

< link href = "css/style-lg.css" rel = "stylesheet" > < link href = "css/style-md.css" rel = "stylesheet" > < link href = "css/style-sm.css" rel = "stylesheet" >

स्क्रिप्ट टॅग वापरून, तुम्ही वेगवेगळ्या परिस्थिती (स्क्रिप्ट) कागदपत्राशी जोडू शकता. क्लोजिंग टॅग आवश्यक आहे. स्क्रिप्ट स्वतः दस्तऐवजाच्या सुरुवातीला, आत किंवा शेवटी स्थित असू शकते.

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

पृष्ठ शीर्षलेख h1 h2 h3

पुढे जाऊ या, आपल्याला एक टॅग दिसेल जो त्याच प्रकारे उघडतो आणि बंद होतो. हा टॅग मजकूराचे मुख्य शीर्षक दर्शवतो, बहुतेक प्रकरणांमध्ये, H1 शीर्षकाखाली पृष्ठ शीर्षक असते. खरं तर, फक्त सहा डेटा शीर्षके आहेत. . ते SEO मध्ये देखील वापरले जातात, परंतु हा थोडा वेगळा विषय आहे. यासाठी मी एक लेख नक्कीच हायलाइट करेन आणि देईन तपशीलवार वर्णनत्यांच्यासाठी, ब्लॉग अद्यतनांची सदस्यता घ्या जेणेकरून तुम्हाला काहीही चुकणार नाही.

लेखातील अशा शीर्षकांची उपस्थिती मदत करेल महत्वाची भूमिकापृष्ठ पुढे करताना. याव्यतिरिक्त, त्यांचा वापर तुम्हाला स्पष्ट पृष्ठ रचना, त्याचे शीर्षक, उपशीर्षक, हायलाइट्स, उपपरिच्छेद इत्यादी देतो. त्यांचा नेहमी वापर करा आणि सराव करा. अनेक CMS वर, जसे की वर्डप्रेस, मजकूर लिहिताना, तुम्ही “हेडिंग 1”, “हेडिंग 2”, “हेडिंग 3” इत्यादी पाहू शकता. ते h1, h2 आणि h3 साठी जबाबदार आहेत.

आपण नवीन परिच्छेदातून मुख्य मजकूर लिहिल्यास, आपण एक टॅग लिहू शकता

सुरुवातीला आणि शेवटी बंद करा

. html मध्ये परिच्छेद चिन्हांकित करणे हे MS Word दस्तऐवजात नवीन परिच्छेद तयार करण्यासारखे आहे. मी दस्तऐवजात नवीन काहीही जोडले नाही. परंतु हे सर्व html डॉक्युमेंटमध्ये असले पाहिजे असे नाही. आणखी एक उदाहरण पाहू, वर्णन थोड्या वेळाने येईल.

HTML दस्तऐवज

हा मजकूर ठळक असेल, आणि हे देखील तिर्यक मध्ये आहे

< ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >HTML दस्तऐवज< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html >

मूलभूत घटक हेड आणि शीर्षक

प्रत्येक दस्तऐवज समाविष्टीत आहे प्रमुख घटकआणि शीर्षक. पहिला, जो पहिल्या टॅग नंतर लगेच येतो. या टॅगमध्ये पृष्ठाबद्दलची सर्व माहिती आहे, त्यात घटक देखील आहेत. शीर्षक - पृष्ठाच्या शीर्षकाबद्दल माहिती, दुसऱ्या शब्दांत पृष्ठाचे शीर्षक, त्याचे नाव. तुम्ही सूचित करता ते शीर्षकात आहे योग्य नावपृष्ठ ज्यावर वापरकर्ता तुम्हाला शोधेल शोध इंजिन, खूप महत्त्वाचा मुद्दा. दोन्ही घटक खुले आणि बंद देखील असणे आवश्यक आहे. प्रत्येक घटक "/" सह बंद आहे. परिणाम असे चित्र आहे.

शीर्षक आणि पृष्ठ सामग्री

< / html >

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

नोटपॅड ++ संपादक

कोडसह कार्य करण्यासाठी, Notepad++ प्रोग्राम वापरा. हे विनामूल्य आहे आणि ते इंटरनेटवर शोधणे कठीण नाही. कोणताही कोड समजण्यासाठी खूप सोयीस्कर आहे; ते ओपनिंग आणि क्लोजिंग टॅग देखील सहजतेने प्रदर्शित करते. आम्ही 40 पेक्षा जास्त प्रोग्रामिंग भाषांच्या वाक्यरचनेचे समर्थन करतो. तुम्हाला html च्या मूलभूत गोष्टी शिकण्याची गरज आहे.

नोटपॅड नेहमीच्या नोटपॅडपेक्षा सर्व प्रकारे श्रेष्ठ आहे. च्या साठी जास्तीत जास्त सुविधा, साधेपणा आणि अभ्यास हा संपादकआपण प्रथम आपल्या संगणकावर स्थापित करणे आवश्यक आहे. सर्वात महत्वाचा फायदा आणि सुविधा नोटपॅड संपादक++ कोड लिहिताना इशारे दाखवते, ज्यामुळे तुमचे काम अधिक जलद आणि चांगले होते.

DOCTYPE घटक

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

ते सहसा अगदी सुरुवातीस ठेवलेले असतात. तेथे बरेच पर्याय आहेत आणि ते सर्व एकमेकांपासून भिन्न आहेत, मी एक उदाहरण लिहीन जे बर्याचदा वापरले जाते. हे रिक्त म्हणून वापरले जाऊ शकते तयार टेम्पलेट. पुढे प्रत्येक ओळीचे स्पष्ट वर्णन असेल, यामध्ये कोणतीही समस्या नसावी.

html च्या मूलभूत गोष्टींबद्दल थोडक्यात स्पष्ट भाषेत: ही ओळ ब्राउझरला सांगते हा दस्तऐवज XHTML आवृत्ती 1.0 आहे, वापरली जाते इंग्रजी भाषाआणि हा सर्व गोंधळ बाजूला आहे या पत्त्यावर. पुढे, मेटा टॅगमध्ये आम्ही वापरलेले एन्कोडिंग सूचित करतो. सर्वात सामान्यपणे वापरलेले विंडोज 1251 आहे.

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

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

आपल्याला काय लक्षात ठेवण्याची आवश्यकता आहे हा धडा html च्या मूलभूत गोष्टींबद्दल:

जवळजवळ सर्व टॅग उघडतात आणि बंद होतात;

दस्तऐवज टॅगसह सुरू होतो;

टॅगची उपस्थिती;

टॅगची उपस्थिती;

साफ html रचनादस्तऐवज.

सर्व मुख्य पृष्ठांना नेहमी अनुक्रमणिका असे नाव दिले पाहिजे. हे असेच स्वीकारले जाते आणि प्रत्येकाला त्याची सवय होते, फाईल विस्तार काहीही असो, ते html किंवा php असू शकते. त्याला नेहमी असेच म्हणतात.

Webformyself वरून HTML मूलभूत गोष्टींबद्दल व्हिडिओ पहा.

हायपरटेक्स्ट मार्कअप भाषा, मूलभूत घटकआणि रचना. मी माझ्या ब्लॉगवर हे सर्व आणि बरेच काही वर्णन करण्याचा प्रयत्न करेन. सर्व प्रथम, ते नवशिक्यांसाठी लिहिले जाईल उपयुक्त माहिती, एक कोड उदाहरण प्रदान केले आहे आणि तयार पृष्ठासह स्वतः उदाहरण डाउनलोड करण्याची संधी आहे.

एचटीएमएल ही हायपरटेक्स्ट मार्कअप भाषा आहे ज्याने इंटरनेट बनवले जे आपल्याला माहित आहे आणि आवडते. या अद्भुत साधनामुळे साइट्स सुंदर आणि आधुनिक दिसतात आणि वापरण्यास सुलभता देखील सुनिश्चित करतात. एचटीएमएल फक्त वेब पृष्ठाच्या घटकांना वापरकर्त्यासाठी अनुकूल स्वरूपात व्यवस्था करते. त्याचे कार्य MS Word किंवा OpenOffice सारखे लोक काय करतात त्याच्याशी तुलना करता येते. ते परिच्छेद असलेल्या दस्तऐवजात अक्षरांचा चेहरा नसलेला वस्तुमान बदलतात, लघुप्रतिमा, तिर्यक, सारण्या आणि अगदी प्रतिमा. एचटीएमएल भाषा अंदाजे समान गोष्ट करते, फक्त फरक इतकाच आहे की त्याचे दस्तऐवज ब्राउझरमध्ये प्रदर्शित केले जातात आणि या साधनाची क्षमता मजकूर संपादकापेक्षा खूप विस्तृत आहे. मार्कअपसाठी टॅग वापरले जातात - विशेष संघ, वेब पृष्ठाच्या संरचनेचे वर्णन करणे. ते कोन कंसात बंद केलेले आहेत - जेणेकरून ब्राउझर त्यांना मोठ्या प्रमाणात मजकूरापासून वेगळे करू शकेल. पुढे, आम्ही नवशिक्यांसाठी HTML च्या मूलभूत गोष्टी कव्हर करू.

व्हिज्युअल संपादक

नुकतेच एचटीएमएल शिकण्याच्या मार्गावर निघालेले नवशिक्या सहसा अशा प्रोग्राम्ससह त्यांचे कार्य सुरू करतात जे तुम्हाला कोणत्याही माहितीशिवाय वेबसाइट तयार करण्याची परवानगी देतात. त्यामध्ये तुम्ही स्क्रीनवरील घटकांना ब्राउझरमध्ये ज्या प्रकारे प्रदर्शित केले जातील त्या पद्धतीने व्यवस्था करू शकता. असे दिसते की हा शाश्वत कृपेचा स्त्रोत आहे जो आपल्याला बहुसंख्य वेब विकासकांपासून मुक्त होऊ देतो. परंतु सर्व काही इतके सोपे नाही, कारण व्हिज्युअल संपादकांमध्ये बऱ्याच कमतरता आहेत ज्यामुळे गंभीर प्रकल्पांमध्ये त्यांचा वापर करणे अशक्य होते.

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

टॅग्ज

वर नमूद केल्याप्रमाणे, टॅग ब्राउझरला वेब पृष्ठाच्या संरचनेचे वर्णन करतात. त्यापैकी बहुतेकांना ओपनिंग आणि क्लोजिंग टॅग आहे, परंतु सर्व नाही. उदाहरणार्थ, ..., जेथे ठिपक्यांऐवजी सामग्री आहे. पहिला टॅग कुठून सुरू होतो ते दाखवतो आणि दुसरा तो बंद करतो. आत इतर पृष्ठ मार्कअप घटक असू शकतात; टॅग वेळेवर बंद करणे महत्वाचे आहे जेणेकरून पृष्ठ योग्यरित्या प्रदर्शित होईल.

एकल टॅग देखील आहेत जे बंद करण्याची आवश्यकता नाही. त्यांच्यामध्ये, सामग्री आत स्थित आहे, ज्याप्रमाणे ती बहुतेक HTML टॅगसाठी लिहिली जाऊ शकते आणि घटकाचे गुणधर्म सेट करते. हे ओपनिंग टॅगमध्ये सूचित केले आहे आणि असे काहीतरी दिसते: attribute="...", जेथे बिंदूंऐवजी विशेषता मूल्य आहे. टॅग जाणून घेणे हे पहिले आणि सर्वात जास्त आहे महत्वाचे पाऊल HTML मध्ये प्रभुत्व मिळवण्यासाठी. या कलेच्या मूलभूत गोष्टींमध्ये वेब पृष्ठाची रचना समजून घेणे देखील समाविष्ट आहे.

दस्तऐवज रचना

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

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

डोके

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

दुवा

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

शरीर

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

• - सबस्ट्रिंग हायलाइट करण्यासाठी वापरले जाते जे सीएसएस मध्ये वर्णन केलेल्या विशेष शैलीच्या अधीन असेल;
• - वेब पृष्ठावर एक दुवा तयार करते; संक्रमण पत्ता href विशेषता द्वारे निर्दिष्ट केला आहे;
• - आमच्या काळातील सर्वात लोकप्रिय टॅगपैकी एक; जो कोणी HTMLl भाषेची मूलभूत माहिती शिकण्याचा निर्णय घेतो त्याने त्यावर विशेष लक्ष दिले पाहिजे, कारण हा एक ब्लॉक घटक आहे, ज्याच्या आधारावर आधुनिक साइट्सचा सिंहाचा वाटा बनविला जातो (ब्लॉकचे पॅरामीटर्स css आणि इतर ब्लॉक्समध्ये सेट केले जातात. या टॅगमध्ये स्थित असू शकते);

• मजकूरातून परिच्छेद निवडतो; परिच्छेदाची सामग्री ओपनिंग आणि क्लोजिंग टॅग दरम्यान आहे;

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

  तुमचे स्वतःचे वेब पेज तयार करण्यासाठी तुम्हाला आवश्यक असलेले हे सर्व टॅग नाहीत, परंतु नवशिक्यांसाठी HTML च्या मूलभूत गोष्टी मांडण्यासाठी ते पुरेसे आहेत.

  CSS

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

  

  CSS लागू करत आहे

  वेब पृष्ठे तयार करण्यासाठी, तुम्हाला HTML आणि CSS च्या मूलभूत गोष्टी माहित असणे आवश्यक आहे, कारण आता या क्षेत्रात कॅस्केडिंग स्टाईल शीट्सच्या ज्ञानाशिवाय काहीही करायचे नाही. ते संपूर्ण दस्तऐवजावर लागू होणाऱ्या कोणत्याही घटकासाठी विशेषता सेट करतात. अशा प्रकारे तुम्ही एकाच वेळी सर्व घटकांसाठी रंग सेट करू शकता

  किंवा फक्त एक नियम लिहून. वेब पृष्ठे दिसण्यासाठी आधुनिक आवश्यकता लक्षात घेता, कॅस्केडिंग शैली पत्रके वापरणे अनिवार्य आहे.

  सीएसएस फाइल दस्तऐवजाशी जोडण्यासाठी, एक लिंक टॅग आहे. त्याच्या वापराचे तत्त्व थोडे वर वर्णन केले गेले होते, परंतु सर्व शैली एकाच ठिकाणी एकत्र करण्याचा हा एकमेव पर्याय नाही. एक टॅग देखील आहे, जो दस्तऐवजाच्या "हेड" मध्ये स्थित आहे आणि आपल्याला CSS फायली न वापरता शैली लिहिण्याची परवानगी देतो. एक किंवा दुसरी पद्धत वापरणे आवश्यक नाही. सर्वोत्तम परिणाम प्राप्त करण्यासाठी ते यशस्वीरित्या एकत्र केले जाऊ शकतात. स्टाइल शीटसह फाइल तयार करण्यासाठी, तुम्हाला .css विस्तारासह फाइल तयार करणे आवश्यक आहे, उदाहरणार्थ, Styles.css.

  JavaScript

  बर्याचदा, एखादी व्यक्ती जी HTML ऑफर करते ती साधने त्याच्या कार्यांसाठी पुरेशी नाहीत हे समजण्यास प्रारंभ करण्याचा निर्णय घेते. मूलभूत गोष्टी आपल्याला एक सुंदर पृष्ठ तयार करण्यास अनुमती देतील, परंतु आपल्याला अचानक ते परस्परसंवादी बनवण्याची आवश्यकता असल्यास काय? या हेतूंसाठी, एक अद्वितीय प्रोग्रामिंग आहे जे HTML सह उत्तम प्रकारे संवाद साधते. याला JavaScript म्हणतात, कारण ती लोकप्रिय जावा भाषेचा धाकटा भाऊ म्हणून कल्पित होती. आज, या भाषांनी महत्त्वपूर्ण फरक प्राप्त केला आहे आणि त्यांच्यातील अंतर फक्त वाढत आहे.

  

  JavaScript तुम्हाला टॅग तयार आणि संपादित करण्याची परवानगी देऊन HTML ची क्षमता वाढवू शकते. तसेच, हे अद्भुत साधन वापरून, तुम्ही Cokie सह कार्य करू शकता, पृष्ठ रीलोड न करता सर्व्हरवरून डेटा डाउनलोड करू शकता आणि साइटला HTML क्षमतांपेक्षा अधिक परस्परसंवादी बनवू शकता. या भाषेलाही सुरक्षिततेशी संबंधित मर्यादा आहेत. जर JavaScript सर्व्हरच्या बाजूने वापरली जात नसेल, तर ती त्याच्या क्षमतेवर मर्यादा घालणाऱ्या परिस्थितीनुसार कार्यान्वित केली जाईल, जेणेकरून आक्रमणकर्ते कोणत्याही संगणकावर दुर्भावनापूर्ण कोड वापरू शकत नाहीत.

  संपादक

  नवशिक्यासाठी HTML मूलभूत गोष्टींसाठी वेब पृष्ठे तयार करण्यासाठी सर्वात सोयीस्कर आणि व्यावहारिक प्रोग्रामचे ज्ञान आवश्यक आहे. वर लिहिल्याप्रमाणे, Dreamweaver आणि सारखे व्हिज्युअल संपादक या हेतूंसाठी योग्य नाहीत. तर, तुम्ही नेहमीच्या नोटपॅडमध्ये टॅग लिहावे का? हा पर्याय देखील शंकास्पद आहे, कारण मानक नोटपॅडमध्ये कोणतेही विशेष लेआउट साधने नाहीत. Notepad++ हे कार्य चांगल्या प्रकारे हाताळू शकते. या उत्पादनाचा मोठा फायदा हा आहे की ते मुक्त स्त्रोत आहे आणि ते पूर्णपणे विनामूल्य वितरित केले जाते. यात सोयीस्कर वाक्यरचना हायलाइटिंग आणि टॅग स्वयंचलितपणे बंद करणे आहे. Notepad++ इंटरफेस भाषांची विस्तृत निवड देखील प्रदान करते, आणि त्याच्या क्षमता असंख्य ऍड-ऑन्ससह सहजपणे विस्तारित केल्या जातात.

  

  Sublime Text 3 हा Notepad++ सारखाच एक प्रोग्राम आहे, परंतु शुल्कासाठी उपलब्ध आहे. तिनेच बहुतेक विकसकांची मने जिंकली. Sublime Text 3 JavaScript, CSS आणि HTML साठी योग्य आहे. तुम्हाला त्याच्यासोबत काम करण्याच्या मूलभूत गोष्टी शिकून घ्याव्या लागतील, परंतु ते फायदेशीर आहे. यात फाइन-ट्यूनिंगसाठी खरोखर अमर्याद शक्यता आहेत, जे तुम्हाला शक्य तितक्या तुमच्या गरजेनुसार प्रोग्राम तयार करण्यास अनुमती देते.

  नवशिक्यांसाठी HTML आणि CSS मूलभूत

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

  

  Adobe Photoshop मध्ये काम करण्याचे कौशल्य या प्रकरणात अनावश्यक होणार नाही. हा प्रोग्राम तुम्हाला वेब पृष्ठावरील छायाचित्रे, चित्रे आणि इतर ग्राफिक घटकांसह कार्य करण्यास अनुमती देतो. याक्षणी, हे फोटोशॉप आहे जे अशा कार्यांचा उत्तम सामना करते; ज्यांना हे Adobe उत्पादन आवडत नाही त्यांच्यासाठी Lightroom, GIMP, Illustrator आणि तत्सम फंक्शन्स असलेले इतर प्रोग्राम्स आहेत.

  HTML चे ज्ञान काय देते?

  वेब पृष्ठ निर्मिती कौशल्ये आज अतिशय समर्पक आहेत, कारण इंटरनेट झपाट्याने विस्तारत आहे. प्रत्येक एंटरप्राइझ, अगदी लहान स्टोअर, कार्यशाळा आणि क्रीडा क्लब - प्रत्येकाला स्वतःची वेबसाइट हवी आहे. आणि अर्थातच, यासाठी त्यांना CSS आणि HTML माहित असलेल्या विकसकाची आवश्यकता असेल. मूलभूत गोष्टी मास्टर करणे सोपे आहे, त्यानंतर ही सरावाची बाब आहे. लेआउट तंत्रज्ञान सतत विकसित होत असल्याने, फ्रंट-एंड विकसकांना नेहमीच मागणी असते. जो कोणी या मनोरंजक उद्योगात स्वतःला झोकून देण्याचा निर्णय घेतो तो कधीही काम केल्याशिवाय राहणार नाही.

  या मालिकेसह मला HTML ला समर्पित धड्यांची मालिका उघडायची आहे. मी हा निर्णय घेतला कारण मी वापरकर्त्यांना सुरवातीपासून वेबसाइट कशी तयार करावी हे शिकवण्याचा प्रयत्न करू इच्छितो. हा विचार खूप दिवसांपासून डोक्यात होता. HTML सह कोठून सुरुवात करावी किंवा इंजिन स्थापित करण्यासाठी आणि ते पुढे कॉन्फिगर करण्यासाठी थेट पुढे जाण्याचा एकच प्रश्न होता.

  पण जर तुम्ही इंजिन शिकून सुरुवात केली, तर काही वापरकर्ते ज्यांना एचटीएमएल माहित नाही ते सोडले जातील. म्हणून मी मूलभूत गोष्टींपासून सुरुवात करण्याचे ठरवले आणि ते अशा प्रकारे करायचे की कोणत्याही नवशिक्याला काय आणि कसे हे समजू शकेल.

  तर HTML म्हणजे काय?

  संक्षेप म्हणजे हायपरटेक्स्ट मार्कअप लँग्वेज (हायपरटेक्स्ट मार्कअप लँग्वेज).

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

  मी सर्वात सोप्या वेब पृष्ठाचे उदाहरण पाहून प्रारंभ करण्याचा प्रस्ताव देतो. आता तुम्ही विशिष्ट टॅग म्हणजे काय यावर तुमचे लक्ष केंद्रित करू नये. प्रत्येक गोष्टीसाठी एक वेळ आहे, प्रारंभ करणाऱ्यांसाठी, कोडमध्ये सर्वकाही कोठे आहे आणि ब्राउझरमध्ये जे प्रदर्शित केले जाते त्याच्याशी ते कसे संबंधित आहे याकडे लक्ष द्या. HTML दस्तऐवजाचे उदाहरण विचारात घ्या:

  पृष्ठ शीर्षक माझ्या आयुष्यातील एक दिवस मैफिलीची तयारी

  आज मी लवकर उठलो कारण पुढे माझा दिवस कठीण होता. शेवटी, आज मला एका मैफिलीत शंभर प्रेक्षकांसमोर सादरीकरण करायचे आहे. आणि सर्वकाही व्यवस्थित होईल याची खात्री करण्यासाठी, मला तालीम कार्यक्रम पुन्हा करावा लागेल

  तालीम

  सर्व काही एक अडचण न होता. आमच्या संघातील कोणीही लय गमावली नाही, आणि जसे घडले, प्रत्येकजण व्यर्थ काळजी करत होता.

  मैफिल

  प्रत्येकाने चांगले प्रदर्शन केले, जरी मला वाटते की असा एक क्षण होता जेव्हा आमच्या ड्रमरने त्याचा टेम्पो गमावला. पण आम्ही हुशारीने या परिस्थितीतून बाहेर पडलो.

  प्रथम, तुम्हाला हा मजकूर काही टेक्स्ट एडिटरमध्ये टाईप करावा लागेल (मला नोटपॅड ++ हे सर्वात सोयीचे वाटते) आणि फाइल इंडेक्स .html नावाखाली तुमच्या डिस्कवर कुठेतरी सेव्ह करा. सेव्ह केलेल्या फाईलवर डबल-क्लिक केल्यावर तुम्हाला असे काहीतरी दिसणारे पेज दिसेल.

  कृपया लक्षात घ्या की टॅग स्वतः प्रदर्शित केले जात नाहीत, परंतु त्यांच्या दरम्यान असलेली सामग्री स्वतः प्रदर्शित केली जाते. आणि येथून तुम्ही असा निष्कर्ष काढू शकता की टॅग हे HTML मध्ये डिझाइन घटक म्हणून काम करतात.

  स्त्रोत कोड पहा. तुम्ही आधीच लक्षात घेतले असेल की, “एक” या शब्दापूर्वी एक छोटासा इंडेंट आहे. तथापि, ब्राउझरने ते विचारात घेतले नाही; त्याने ते शांतपणे गिळले, जणू ते अस्तित्वातच नव्हते. शिवाय, जर तुम्ही शब्दांमध्ये अनेक स्पेस ठेवण्याचा प्रयत्न केला तर ते सर्व ब्राउझरला एक स्पेस म्हणून समजतील - HTML मध्ये हे वैशिष्ट्य आहे.

  आणि येथे आणखी एक सल्ला आहे: HTML कोड लिहिताना, इतरांमध्ये नेस्ट केलेले टॅग इंडेंट करण्यासाठी स्वत: ला प्रशिक्षित करा. उदाहरणार्थ, शीर्षक आणि बॉडी टॅग html टॅगमध्ये नेस्ट केलेले आहेत. याचा अर्थ असा की जेव्हा तुम्ही हे टॅग लिहिता तेव्हा त्यानुसार इंडेंट करायला विसरू नका. सहसा ते दोन स्पेस किंवा टॅब वापरून केले जातात - ही चवची बाब आहे. हे का आवश्यक आहे? आता, मी वरील उदाहरण म्हणून दिलेल्या दस्तऐवजाच्या त्या छोट्या तुकड्यात, फारशी माहिती नाही, त्यामुळे तेथे गोंधळ होणे खूप समस्याप्रधान आहे. तथापि, पृष्ठावर अनेक नेस्टेड घटक असल्यास, या प्रचंड कोडमध्ये हरवण्यापेक्षा आणि आपण आता दस्तऐवजाच्या कोणत्या भागामध्ये आहात हे शोधण्यात अडचण येण्यापेक्षा काहीही सोपे होणार नाही. त्यामुळे लगेचच चांगल्या स्टाईलची सवय करून घेणे चांगले आहे, मग तुम्हाला ते स्वतः समजेल आणि ते तुम्हाला भविष्यात चांगले काम करेल.

  एचटीएमएल दस्तऐवजात असले पाहिजेत असे किमान टॅग सूचित करणे देखील योग्य आहे. मी या भागाबद्दल बोलत आहे:

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

  याव्यतिरिक्त, आपण HTML दस्तऐवजात टिप्पण्या लिहू शकता - ही पूर्णपणे सेवा माहिती आहे जी केवळ आपल्यासाठी आहे. सहसा या काही महत्त्वाच्या नोट्स असतात ज्या तुमच्यासाठी स्मरणपत्र म्हणून काम करतात किंवा फक्त लक्ष देण्यासारखे काहीतरी असतात. टिप्पण्यांवर ब्राउझरद्वारे प्रक्रिया केली जात नाही, याचा अर्थ वापरकर्त्याला त्या दिसणार नाहीत. ते सहसा असे लिहिले जातात:

  आता वरील उदाहरणातील कोणता टॅग कशासाठी जबाबदार आहे हे शोधण्याचा प्रयत्न करूया.

  html टॅग म्हणजे html कोडचे आउटपुट सुरू होते.

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

  शरीर - दस्तऐवजाचा मुख्य भाग सुरू होतो.

  h 1 - शीर्षक.

  h 2 - उपशीर्षक.

  p - परिच्छेद.

  बहुधा एवढेच! हा तुमचा पहिला HTML दस्तऐवज असल्यास, अभिनंदन! होय, तो आपल्याला पाहिजे तितका छान दिसत नाही. परंतु असे असले तरी, आमच्याकडे अशी सामग्री आहे ज्यावर आम्ही आधीच काम करू शकतो. आणि पुढील धड्यांमध्ये, सर्वकाही अधिक मनोरंजक असेल आणि आम्ही हळूहळू कॅस्केडिंग स्टाईल शीट्स (CSS) सह कार्य करण्यास स्पर्श करू.

  • < Назад

  टिप्पणी करण्यासाठी, आपल्याला नोंदणी करणे आवश्यक आहे.

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

  HTML मूलभूत गोष्टी शिकण्याच्या पायऱ्या

  HTML फाईल उघडा. बहुसंख्य मजकूर संपादक(Windows साठी Notepad किंवा Word, Mac साठी TextEdit) HTML फाइल्स तयार करण्यासाठी वापरता येतात. तयार करा नवीन दस्तऐवज, आणि वेब पृष्ठ म्हणून सेव्ह करा (फाइल > म्हणून जतन करा) किंवा फाइल विस्तार ".doc," ".rtf," किंवा अन्य विस्ताराऐवजी ".html" किंवा ".htm" वर बदला.

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

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

• मार्कअप टॅग जाणून घ्या. पृष्ठावर टॅग प्रदर्शित केले जात नाहीत, विपरीत साधा मजकूर. त्याऐवजी, ते पृष्ठ आणि त्यातील सामग्री कशी प्रदर्शित करायची ते ब्राउझरला सांगतात. "ओपनिंग टॅग" मध्ये सूचना असतात. उदाहरणार्थ, ठळक मजकुरासाठी एक टॅग आहे. तुम्हाला निर्देशाची व्याप्ती मर्यादित करण्यासाठी "क्लोजिंग टॅग" देखील आवश्यक आहे: या उदाहरणामध्ये, ओपनिंग आणि क्लोजिंग टॅगमधील मजकूर ठळक स्वरूपात दिसेल. टॅग समान चिन्हांमध्ये लिहिलेले असतात, परंतु बंद होणारा टॅग स्लॅशने सुरू होतो.

  • ओपनिंग टॅग समान चिन्हांमध्ये लिहिलेला आहे:< Открывающий тег >
  • क्लोजिंग टॅगमध्ये, टॅग डिस्क्रिप्टरच्या आधी स्लॅश ठेवला जातो (नाव): )
  • टॅग वापरण्याबद्दल जाणून घेण्यासाठी वाचा. या चरणासाठी, रेकॉर्डिंग स्वरूप लक्षात ठेवणे पुरेसे आहे असमानता चिन्हे दरम्यान टॅग लिहिलेले आहेत:< >आणि
  • काहींमध्ये HTML ट्यूटोरियल, टॅग्जना "एलिमेंट्स" म्हणतात, आणि ओपनिंग आणि क्लोजिंग टॅगमधील मजकुराला "एलिमेंट कंटेंट" म्हणतात.

• एडिटरमध्ये टॅग टाइप करा. प्रत्येक html फाईल टॅगने सुरू होणे आणि टॅगसह समाप्त होणे आवश्यक आहे. हे टॅग ब्राउझरला सूचित करतात की टॅगमधील सर्व सामग्री HTML मध्ये लिहिलेली आहे. फाइलमध्ये हे टॅग जोडा:

  • दस्तऐवजाच्या शीर्षस्थानी टाइप करा.
  • अनेक तयार करण्यासाठी अनेक वेळा एंटर दाबा रिकाम्या ओळी, नंतर टाइप करा
  • या निर्देशातील सर्व उदाहरणे या दोन टॅगमध्ये टाईप केलेली आहेत.

• फाइलमध्ये एक विभाग तयार करा. टॅग आणि टॅग दरम्यान, ओपनिंग टॅग आणि क्लोजिंग टॅग तयार करा. त्यांच्या दरम्यान काही रिकाम्या ओळी तयार करा. आणि टॅग दरम्यान लिहिलेली सामग्री पृष्ठावरच प्रदर्शित केली जात नाही. अंमलात आणा पुढील पायऱ्याहा टॅग कशासाठी आहे हे शोधण्यासाठी:

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

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

  • HTML शिकण्याचे 3 मार्ग - wikiHow

• विविध शैली वापरून मजकूर जोडा. वास्तविक पृष्ठ सामग्री जोडण्याची वेळ आली आहे! आपण दरम्यान लिहिता सर्वकाही शरीर टॅग, ब्राउझर अपडेट केल्यानंतर पृष्ठावर प्रदर्शित केले जाईल. वापरू नकाचिन्हे< или >, कारण ब्राउझर मजकुराऐवजी टॅग म्हणून सामग्रीचा अर्थ लावण्याचा प्रयत्न करेल. लिहा नमस्कार जग! (किंवा तुम्हाला जे हवे आहे), नंतर हे टॅग मजकूरात जोडण्याचा प्रयत्न करा आणि काय होते ते पहा:

  • नमस्कार जग! इटालिकमधील मजकूर हायलाइट करते: नमस्कार जग!
  • नमस्कार जग! मजकूर "ठळक" बनवते: हॅलो वर्ल्ड!
  • नमस्कार जग! मजकूर ओलांडतो: हॅलो वर्ल्ड!
  • नमस्कार जग! फॉन्टला सुपरस्क्रिप्ट म्हणून दाखवते: हॅलो वर्ल्ड!
  • नमस्कार जग! सबस्क्रिप्ट म्हणून फॉन्ट प्रदर्शित करते: हॅलो वर्ल्ड!
  • हे करून पहा भिन्न टॅगएकत्र: काय हॅलो जग! ?

• मजकूर परिच्छेदांमध्ये विभाजित करा. मध्ये मजकूराच्या अनेक ओळी लिहिण्याचा प्रयत्न केल्यास HTML फाइल, तुमच्या लक्षात येईल की ब्राउझरमध्ये लाइन ब्रेक दाखवले जात नाहीत. परिच्छेद खालील टॅगद्वारे परिभाषित केले आहेत:

  • हा एक वेगळा परिच्छेद आहे.

  • या वाक्यानंतर ओळ खंडित होतो.
    हे वाक्य सुरू होण्यापूर्वी टॅग करा.
    हा पहिला टॅग आहे ज्याला क्लोजिंग टॅगची आवश्यकता नाही. अशा टॅगला "रिक्त" म्हणतात.
  • विभाग शीर्षके दर्शविण्यासाठी शीर्षके तयार करा:
    शीर्षक मजकूर: सर्वात मोठे शीर्षक
    शीर्षक मजकूर (द्वितीय स्तरावरील शीर्षक)
    शीर्षक मजकूर (तृतीय स्तर शीर्षक)
    शीर्षक मजकूर (चौथ्या स्तरावरील शीर्षक)
    शीर्षक मजकूर (सर्वात लहान शीर्षक)

याद्या तयार करायला शिका. पृष्ठावर सूची तयार करण्याचे अनेक मार्ग आहेत. तुम्हाला सर्वात जास्त कोणते आवडते ते पाहण्यासाठी खालील पर्याय वापरून पहा. कृपया लक्षात ठेवा की सूची दोन टॅग्जमध्ये ठेवली आहे (उदाहरणार्थ, बुलेट केलेल्या सूचीसाठी), आणि सूचीचे घटक देखील विशेष टॅगसह हायलाइट केले आहेत, उदाहरणार्थ.

• बुलेट केलेली यादी:
  
  • पहिली ओळ
  • दुसरी ओळ
  • वगैरे
• क्रमांकित यादी:
  
• एक
• दोन
• तीन
• व्याख्यांची यादी:
  कॉफी - गरम पेय लिंबूपाणी - थंड पेय

• लाइन ब्रेक वापरून पृष्ठ लेआउट करा, आडव्या रेषा, आणि चित्रे. मजकुराव्यतिरिक्त काहीतरी जोडण्याची वेळ आली आहे. खालील टॅग वापरून पहा, किंवा मिळविण्यासाठी दुव्यांचे अनुसरण करा अधिक माहिती. तुम्ही पोस्ट करू इच्छित असलेल्या चित्राची लिंक तयार करण्यासाठी ऑनलाइन होस्टिंग वापरा:

  • ओळ अनुवाद:
    
  • क्षैतिज रेखा:
  • चित्र घाला:
• • अँकर टॅग तयार करा तुम्ही लिंक करू इच्छित असलेल्या पृष्ठावरील स्थानावर. अचूक आणि संस्मरणीय नाव घेऊन या:
  • सापेक्ष दुवा तयार करण्यासाठी किंवा बाह्य संसाधनाचा दुवा तयार करण्यासाठी टॅग वापरा:
  • दुसऱ्या पृष्ठाच्या सापेक्ष दुव्याशी लिंक करण्यासाठी, मुख्य लिंक आणि अँकरच्या नावानंतर # चिन्ह जोडा. उदाहरणार्थ, या पृष्ठाच्या टिप्स विभागातील दुवे.
  प्रगत HTML

  गुणधर्म जाणून घ्या. अतिरिक्त माहिती दर्शविण्यासाठी विशेषता टॅगमध्ये लिहिल्या जातात. विशेषतांचे स्वरूप हे आहे: name="value" , ​​जेथे नाव विशेषता निर्दिष्ट करते ("रंग", रंग गुणधर्मासाठी), आणि मूल्य त्याचे मूल्य निर्दिष्ट करते (उदाहरणार्थ, "लाल", रंग लाल साठी).

  • आधीच्या एचटीएमएल बेसिक विभागात गुणधर्म आधीपासून वापरले गेले होते. टॅग करा src विशेषता वापरते, सापेक्ष लिंक अँकर नाव विशेषता वापरतात आणि लिंक्स href विशेषता वापरतात. तुम्ही आधीच लक्षात घेतल्याप्रमाणे, सर्व गुणधर्म ___="___" स्वरूपात लिहिलेले आहेत?

• HTML सारण्यांसह प्रयोग करा. टेबल तयार करण्यासाठी विविध टॅग वापरणे समाविष्ट आहे. तुम्ही प्रयोग करू शकता किंवा सूचना वाचू शकता.

  • टेबल टॅग तयार करा:
  • प्रत्येक सारणी पंक्तीची सामग्री टॅगमध्ये संलग्न करा:
  • स्तंभ शीर्षलेख टॅगद्वारे निर्धारित केला जातो:
  • त्यानंतरच्या पंक्तींमधील सेल:
  • हे टॅग वापरण्याचे उदाहरण:
    स्तंभ 1: महिना स्तंभ 2: पैसे वाचवले

    जानेवारी	100 रूबल