उपयोगी टिप्स

पाठ १

Pin
Send
Share
Send
Send


पहले पाठ में, हमने पहले ही html पेज बनाने के एक छोटे से उदाहरण की जांच की। अब एक और अधिक जटिल पृष्ठ बनाएँ। मैं यह नोट करना चाहता हूं कि मैं यह बताऊंगा कि विशेष सॉफ्टवेयर के उपयोग के बिना ऐसा कैसे करें। काम के लिए आवश्यक सभी विंडोज से एक नियमित नोटपैड है। अधिक सुविधाजनक काम के लिए, मैं नोटपैड ++ (एचटीएमएल टैग को उजागर करने की क्षमता वाला एक उन्नत नोटबुक) डाउनलोड करने की सलाह देता हूं। तो चलिए शुरू करते हैं।

नोटपैड खोलें और उसमें निम्नलिखित कॉपी करें:

अगला, फ़ाइल प्रकार बॉक्स में "सहेजें के रूप में" पर क्लिक करें, "सभी फाइलें" चुनें, और नाम में index.html लिखें। नाम के अंत में एक्सटेंशन .html (not .txt) शामिल करना सुनिश्चित करें, अन्यथा ब्राउज़र इसे वेब दस्तावेज़ के रूप में व्याख्या नहीं करेंगे।

यदि किसी कारण से आप html पेज बनाने में असमर्थ हैं, तो आप पिछले उदाहरण को लिंक से डाउनलोड कर सकते हैं: index.rar।

अब उन शब्दों के बारे में कुछ शब्द जो हम इस पृष्ठ को बनाने के लिए उपयोग करते हैं।

टैग का वर्णन।

बहुत पहला टैग है (यह टैग जोड़ा गया है, यानी समापन टैग की आवश्यकता है) - इसका उपयोग कंटेनर के रूप में किया जाता है, जिसके अंदर पृष्ठ की सभी सामग्री (पाठ, चित्र आदि) स्थित होती है। हालाँकि यह टैग वैकल्पिक है, लेकिन इसका उपयोग एक अच्छे टोन नियम की बात करता है। इसलिए, मैं आपको इसका उपयोग करने की सलाह देता हूं।

अगला टैग है यह भी एक युग्मित टैग है। यह टैग पृष्ठ (शीर्षक को छोड़कर) पर प्रकट नहीं होता है, लेकिन अतिरिक्त पृष्ठ पैरामीटर - पृष्ठ विवरण (खोज इंजन द्वारा उपयोग किया गया), कीवर्ड (खोज इंजन द्वारा प्रयुक्त), शैली, स्क्रिप्ट, शीर्षक, और बहुत कुछ इंगित करना आवश्यक है।

टैग - जोड़ा हुआ टैग, पृष्ठ शीर्षक को इंगित करने के लिए आवश्यक है। इसके अलावा, इस टैग को केवल टैग के अंदर रखा जाना चाहिए!

और आखिरी, हमारे कोड में, टैग है। साथ ही टैग किया गया (और

केस स्टडीज

किसी भी साइट को खोलें और सोर्स कोड देखें। यह कीबोर्ड शॉर्टकट Ctrl + U का उपयोग करके सीधे ब्राउज़र में किया जा सकता है।

अब आप देखते हैं कि पेशेवर HTML कोड कैसे लिखते हैं और इसके लिए बहुत पैसा मिलता है। हमारे पहले पृष्ठ से अलग, है ना? लेकिन यह भी कुछ महीनों में सीखा जा सकता है। और यदि आप एक जूनियर प्रोग्रामर के रूप में नौकरी के साथ सीएसएस और जावास्क्रिप्ट के ज्ञान के साथ एक पूर्ण शिक्षा प्राप्त करना चाहते हैं, तो आपको पूरे एक वर्ष तक अध्ययन करना होगा।

एचटीएमएल 5 टेक्नोलॉजी सूट

HTML5 नए तत्वों, नए गुणों और नए व्यवहार के साथ HTML मानक का नवीनतम और सबसे शक्तिशाली संस्करण है। HTML5 शब्द का अर्थ प्रौद्योगिकियों का एक समूह भी है, आपको विभिन्न प्रकार की साइटें और वेब एप्लिकेशन बनाने की अनुमति देता है।

वास्तव में, HTML5 शब्द का अर्थ दस अलग-अलग मानकों से अधिक है। और एचटीएमएल 5 की कुछ तकनीकों को अभी तक अंतिम रूप नहीं दिया गया है। सभी ब्राउज़र उनका समर्थन नहीं करते (या प्रत्येक ब्राउज़र अलग है)।

जब हम इंटरैक्टिव साइटों और AJAX के बारे में बात करते हैं, तो हम लगभग हमेशा HTML5 प्रौद्योगिकियों के बारे में बात कर रहे हैं।

HTML5 में वीडियो और ध्वनि संचारित करने के लिए प्रोग्रामिंग इंटरफेस (एपीआई) हैं, चैट के लिए, जिसमें ब्राउज़र के माध्यम से वीडियो चैट और कई अन्य दिलचस्प इंटरैक्टिव चीजें शामिल हैं। HTML5 आपको ब्राउज़र गेम बनाने की अनुमति देता है। यहां तक ​​कि YouTube अब HTML5 के माध्यम से काम कर रहा है, हालांकि पहले इसे फ्लैश की आवश्यकता थी।

औपचारिक रूप से, नियमित HTML (HTML4) से HTML5 पर स्विच करना बहुत सरल है: बस वेब पेज कोड की शुरुआत में टैग लिखें दस्तावेज़ के प्रकार को इंगित करने के लिए।

HTML लिखना कैसे सीखे

आपने पहले ही जान लिया है कि HTML में एक साधारण पेज कैसे लिखा जाता है। बस मूल तत्वों को जानें - और प्रयोग करें। अपने आप को एक विशिष्ट कार्य निर्धारित करें (उदाहरण के लिए, अपने आईपी के लिए एक व्यवसाय कार्ड साइट बनाएं) या एक फ्रीलांसर के रूप में एक भुगतान किया गया कार्य लें और इसे लागू करने का प्रयास करें।

आप निर्देशिका, Google में झाँक सकते हैं, सवाल और जवाब के साथ मंचों और साइटों पर सलाह माँग सकते हैं। या सबसे समान साइट ढूंढें, इसका कोड खोलें - और समझें कि यह कैसे काम करता है। आप इसे अपनी आवश्यकताओं के लिए बदल सकते हैं, बस लेखकों के कॉपीराइट और टिप्पणियों को मिटाना याद रखें।

किसी और के काम की कॉपी-पेस्ट प्रोग्रामिंग में एक सामान्य घटना है, यहां इसे ओपन सोर्स कहा जाता है, एक बहुत ही फैशनेबल और उन्नत स्ट्रीम।

लोग एक दूसरे के साथ अपने कार्यक्रम और कोड स्निपेट साझा करते हैं। कुछ डेवलपर्स अपने कोड को खोलना नहीं चाहते हैं, वे साइटों पर स्क्रिप्ट्स को एन्क्रिप्ट (ऑब्फ़सकेट) करते हैं, लेकिन उन्हें विशेष टूल के साथ पार्स भी किया जा सकता है।

आधुनिक और सुंदर डिजाइन के साथ अधिक जटिल कार्यक्षमता के साथ इंटरैक्टिव साइट बनाने के लिए, आपको सीएसएस, जावास्क्रिप्ट, वेब डिजाइन और कुछ अन्य विषयों का अध्ययन करने की आवश्यकता है। यहां अधिक मौलिक तैयारी की आवश्यकता है।

वेब प्रोफेशन प्रोफेशन वार्षिक प्रशिक्षण कार्यक्रम उन शुरुआती लोगों के लिए आदर्श है जो एचटीएमएल, सीएसएस शैलियों और जावास्क्रिप्ट और PHP प्रोग्रामिंग भाषाओं पर एक साफ स्लेट चाहते हैं। नतीजतन, आप सीखेंगे कि कैसे अपनी खुद की वेब परियोजनाएं बनाएं और जूनियर डेवलपर की स्थिति का दावा करने में सक्षम होंगे।

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

  • शिक्षकों से लाइव प्रतिक्रिया
  • पाठ्यक्रम सामग्री के लिए असीमित उपयोग
  • पार्टनर कंपनियों में इंटर्नशिप
  • एक वास्तविक ग्राहक से स्नातक परियोजना
  • अपनी थीसिस का बचाव करने वाले स्नातकों के लिए भागीदार कंपनियों में रोजगार की गारंटी

हमें आवश्यकता होगी

1) का चयन पाठ संपादक। पहली बार पर्याप्त नोटपैड (नोटपैड) (इसमें हमें केवल एक टीम की आवश्यकता है के रूप में सहेजें)

यदि आप तुरंत विशेष पाठ संपादकों में प्रोग्रामिंग शुरू करना चाहते हैं, तो निम्नलिखित पर ध्यान दें:
1) के लिए विंडोज
नोटपैड ++ (डाउनलोड या यहाँ)
Intype (डाउनलोड)

पारंपरिक पाठ संपादकों से उनका अंतर यह है कि वे स्वचालित रूप से इंडेंट करते हैं! फ़ाइल को एक अलग एन्कोडिंग में सहेजना संभव बनाएं (ध्यान दें कि आप इसे भविष्य में सामना करेंगे), विभिन्न रंगों में रंग टैग, जैसे कि पाठ के नीचे कोड। एक नियमित संपादक में, यह एक ही रंग होगा।

2) किसी भी इंटरनेट ब्राउज़र, उदाहरण के लिए, इंटरनेट एक्सप्लोरर खिड़कियों के लिए या सफारी Mac OS X और iOS के लिए। हाँ हाँ आप भी कर सकते हैं मोज़िला, Google क्रोम, ओपेरा, Yandex और मेल ब्राउज़र और इतने पर।

चलो एक HTML पेज बनाते हैं

1) डेस्कटॉप पर एक फ़ोल्डर बनाएँ एचटीएमएल । हम ऐसा करेंगे ताकि पाठ एक स्थान पर संरचित और निहित हो।

2)बनाने एक पाठ संपादक में हमारी फ़ाइल, उदाहरण के लिए नोटपैड (नोटपैड) में। आगे के रूप में सहेजें.

UTF-8 को चुनने के लिए एन्कोडिंग बेहतर है, फिर चुनें सभी फ़ाइल प्रकार और उदाहरण के लिए, .html के साथ फ़ाइल का नाम चुनें index.html

हम एक निर्देशिका (फ़ोल्डर) के रूप में चुनते हैं जहां हमारे को बचाने के लिए एचटीएमएल
प्रेस बनाए रखने के। हो गया!

अक्सर सवाल पूछते हैं कि फ़ाइल एक्सटेंशन दिखाई नहीं दे रहा है। आइए इसे क्रम में लें

फ़ाइल नाम विस्तार - फ़ाइल नाम में जोड़े गए वर्णों का एक क्रम और फ़ाइल के प्रकार (प्रारूप) को पहचानने का इरादा रखता है। सीधे शब्दों में कहें, यह .txt है .doc .exe .jpg और इसी तरह फ़ाइल नाम के अंत में

फ़ाइल एक्सटेंशन देखने की क्षमता फ़ाइल के प्रकार को सही ढंग से निर्धारित करने में मदद कर सकती है और आपको मैन्युअल रूप से (कमांड के साथ) अनुमति देती है नाम बदलने) न केवल एक्सटेंशन, बल्कि फ़ाइल प्रकार (उदाहरण के लिए, txt से HTML तक) को भी बदलें

यह इस तरह नहीं दिखना चाहिए: फोटो, पाठ दस्तावेज़, खेल
यह इस तरह दिखना चाहिए: photo.jpg, text document.txt, game.exe

लेकिन अगर आपके पास अभी भी फ़ाइल नाम पहले संस्करण की तरह दिखते हैं (उदाहरण के लिए, फ़ाइल नाम के अंत में .txt, jpg, .exe), तो निम्न कार्य करें:

हम फ़ाइलों और फ़ोल्डरों की सेटिंग को देखते हैं:

के लिए विन XP कोई भी फ़ोल्डर खोलें - उपकरण (ऊपरी पैनल में) - फ़ोल्डर गुण - दृश्य - पंजीकृत फ़ाइलों के लिए एक्सटेंशन छिपाएं (अनचेक करें) - लागू करें

के लिए जीत 7 कोई भी फ़ोल्डर खोलें - व्यवस्था करें - फ़ाइल और खोज विकल्प -देवाएँ - पंजीकृत फ़ाइल प्रकारों के लिए एक्सटेंशन छिपाएं (अनचेक करें) - लागू करें

के लिए मैक ओएस डेस्कटॉप पर क्लिक करें - खोजक - प्राथमिकताएं (उन्नत) - उन्नत - सभी फ़ाइल एक्सटेंशन दिखाएँ (एक्सटेंशन लागू करें) में चेक बॉक्स का चयन करें

3) इसमें पूरे कोड (टिप्पणियों के साथ) नीचे दिए गए हैं:

4) फ़ाइल खोलें। आप इस फाइल को खोलने के लिए एक और ब्राउजर चुन सकते हैं, इसके लिए हमारी फाइल पर राइट क्लिक करें index.html - के साथ खोलें और सूची से एक ब्राउज़र का चयन करें, उदाहरण के लिए, इंटरनेट एक्सप्लोरर, Google क्रोम, मोज़िला, यैंडेक्स ब्राउज़र, आदि।

परिणामस्वरूप, परिणामी इंटरनेट ब्राउज़र को खोलना index.html , आपको इस तरह का एक पेज देखना चाहिए:


चित्र 1

पर चित्र 1 हम देखते हैं कि कैसे, परिणामस्वरूप, ब्राउज़र ने आपके पृष्ठ को प्रदर्शित किया। निम्नलिखित तत्वों के पाठ को लाल रंग में हाइलाइट किया गया है:

नीचे प्रस्तुत कोड में, आप HTML दस्तावेज़ के मूल न्यूनतम देख सकते हैं। इसे सीखना आवश्यक है और स्थानों में उद्घाटन और समापन टैग को भ्रमित नहीं करना है।


टैग सिर दस्तावेज़ के प्रमुख पर प्रकाश डाला गया। यह उन तत्वों को निर्धारित करता है जो मुख्य रूप से आपके पृष्ठ (नाम, कीवर्ड, लेखक आदि) के तत्वों को संसाधित करने में ब्राउज़र की मदद से जुड़े हैं। हम बाद में इसकी सामग्री के बारे में बात करेंगे।

टैग शीर्षक पेज नाम के लिए खड़ा है। यह एकमात्र ऐसा टैग है, जिसमें निहित है सिरवह पृष्ठ पर प्रदर्शित होता है। उद्घाटन के बाद और समापन टैग से पहले क्या दर्ज करना है यह इंटरनेट पर आपके पृष्ठ का शीर्षक होगा

उदाहरणों में टैग के बाईं ओर सभी इंडेंटेशन वैकल्पिक हैं। उन्हें चित्रण के लिए बनाया गया है ताकि आप टैग की एक जोड़ी देखें।

टैग शव पृष्ठ के मुख्य भाग को इंगित करता है। टैग खोलने और बंद करने के बाद क्या दर्ज करें शव और आपके पृष्ठ की सामग्री होगी


HTML में लगभग सभी टैग खोलना और बंद करना (अपवाद, उदाहरण के लिए, img टैग, जो एक छवि के सम्मिलन को इंगित करता है)।


एक बार फिर, मुझे याद है कि लिखना न भूलना महत्वपूर्ण है बंद टैग अन्य सभी प्रकार के टैग के लिए, अन्यथा ब्राउज़र ठीक से समझ नहीं पाएगा कि आप इस या उस तत्व को कहाँ समाप्त करना चाहते हैं। नीचे के रूप में:


बोल्ड शब्द के बाद, हम जानबूझकर समापन टैग बी भूल गए। परिणामस्वरूप, ब्राउज़र ने निम्न प्रदर्शित किया

मैं पाठ को उजागर करना चाहता हूं बोल्ड, और यह एक पहले से ही है इटैलिक में

जैसा कि आप देख सकते हैं, पाठ अंत तक बोल्ड में हाइलाइट किया जाएगा, और जो इटैलिक में निहित था वह बोल्ड और इटैलिक होगा। इसलिए सावधान!

5) अगर आप अपनी फाइल में कुछ एडिट करना चाहते हैं index.html (और यह अब केवल ब्राउज़र द्वारा डिफ़ॉल्ट रूप से खोला गया है), फिर हमारी फ़ाइल पर सही माउस बटन पर क्लिक करें index.html - चुनें के साथ खोलें और सूची से हम एक पाठ संपादक का चयन करते हैं, यह या तो होगा नोटपैड (अंग्रेजी नोटपैड में), या आपके द्वारा इंस्टॉल किया गया एक और टेक्स्ट एडिटर।

सिद्धांत रूप में, मूल बातें समझाया। हालांकि html पृष्ठ काफी सरल दिखता है, लेकिन अगले पाठों में मैं आपको इन और अन्य तत्वों और उनके उद्देश्य के बारे में विस्तार से बताऊंगा - हम चित्र सम्मिलित करेंगे, लिंक बनाएंगे और बहुत कुछ)

Pin
Send
Share
Send
Send