अनुकूली लेआउट: सबक या सीधे लड़ाई में? और अंत में... वीडियो पाठ डाउनलोड करें।
नमस्ते, मेरा नाम अलेक्जेंडर ज़ेलेनिन है और मैं एक वेब डेवलपर हूं।
मैंने अक्सर यह राय सुनी है कि लेआउट शुरुआती फ्रंटएंडर्स का डोमेन है। हालाँकि वास्तव में यह किसी भी (लगभग) वेब प्रोजेक्ट का सबसे महत्वपूर्ण हिस्सा है। उपयोगकर्ता सबसे पहले यही देखते हैं. वर्तमान में, किसी बड़े प्रोजेक्ट में उच्च-गुणवत्ता वाले लेआउट (विशेष रूप से ब्लॉक डिज़ाइन) के लिए बड़ी संख्या में विभिन्न कौशल की आवश्यकता होती है।
इस लेख में मैं एक लेआउट डिजाइनर के लिए एक विकास योजना प्रस्तुत करता हूं
[क्लिक द्वारा बड़ा]
बेशक, यह कोई व्यापक और एकमात्र सही योजना नहीं है। संबंधित कौशलों, प्रासंगिक प्रौद्योगिकियों आदि का एक पूरा पहाड़ है। ग्रेडेशन व्यक्तिपरक है.
मैं तुरंत यह जोड़ना चाहूंगा कि लेख में शैक्षिक सामग्री के लिए कोई विशिष्ट लिंक नहीं होंगे। मुझे टिप्पणियों में कुछ अतिरिक्त जोड़ने में खुशी होगी।
हम क्या उम्मीद कर रहे हैं?
सबसे पहले यह समझना जरूरी है कि हम प्रत्येक स्तर पर किसी व्यक्ति से क्या अपेक्षा करते हैं। आपकी अपेक्षाएं भिन्न हो सकती हैं.
कनिष्ठ- मुख्य टैग जानता है, तैयार HTML साइट पर सामग्री को सही कर सकता है, टेक्स्ट को सही ढंग से प्रारूपित करना जानता है, बिना किसी समस्या के एक एम्बेडेड तत्व (यूट्यूब, यांडेक्स मानचित्र से वीडियो) सम्मिलित करता है, केवल अपने लिए एक संस्करण नियंत्रण प्रणाली के माध्यम से काम करता है (मास्टर, 1 योगदानकर्ता)। वह शुरू से ही कुछ सरल बना सकता है, और यह (व्यक्तिगत रूप से उसके लिए) काम भी नहीं करेगा। सामान्य तौर पर, यह एक स्वतंत्र इकाई नहीं है और इसके लिए ऊपर से नेतृत्व की आवश्यकता होती है।
मध्य- कमोबेश स्वायत्त इकाई (या छोटी और मध्यम आकार की परियोजनाओं के लिए पूरी तरह से स्वायत्त)। एक मध्यम आकार की वेबसाइट अच्छी तरह से बनाई जा सकती है, और इसे ब्राउज़र के सभी मौजूदा संस्करणों में सही ढंग से प्रदर्शित किया जाएगा। यह समझता है कि टेम्प्लेट इंजन कैसे काम करते हैं और उनका उपयोग कर सकते हैं (बशर्ते शेष कोड प्रदान किया गया हो)। अपने काम की योजना बनाने और दस्तावेजीकरण करने और समय सीमा का अनुमान लगाने में सक्षम। कोड शैली को बनाए रखने के महत्व को समझता है। समझता है कि ग्रिड सिस्टम और सीएसएस फ्रेमवर्क क्यों हैं। डिज़ाइनर के लेआउट से सभी आवश्यक जानकारी लेने में सक्षम। एक छोटी टीम के साथ बातचीत कर सकते हैं, शाखाएँ बना सकते हैं और अनुरोध खींच सकते हैं।
वरिष्ठ- किसी बड़े प्रोजेक्ट के लिए ब्लॉक सिस्टम डिज़ाइन कर सकते हैं। जानता है कि जब अन्य डेवलपर उसके कोड का उपयोग करते हैं तो पुनरावृत्ति और समस्या क्षेत्रों से कैसे बचा जाए। जटिल समस्याओं को सुलझाने और कार्यों को कुशलतापूर्वक तैयार करने में सक्षम। कम से कम एक विकास पद्धति (उदाहरण के लिए, बीईएम) को लागू करना जानता है। प्रोजेक्ट को यथाशीघ्र चालू कर सकते हैं. कई लोकप्रिय टेम्पलेट इंजनों को अच्छी तरह समझता है। संग्राहकों को लिखने और उससे जुड़ी प्रक्रिया को स्वचालित करने में सक्षम। कोड समीक्षा कर सकते हैं और अन्य कोड डेवलपर्स की निगरानी कर सकते हैं।
आइए अब थोड़ा और अधिक विशेष रूप से विचार करें कि प्रत्येक स्तर के प्रत्येक ब्लॉक में क्या शामिल है।
कनिष्ठ
एचटीएमएल- बुनियादी टैग और विशेषताओं का ज्ञान। सिद्धांत रूप में इसे कैसे लिखना है यह समझना।
टाइपोग्राफी- पाठ को प्रारूपित करने की क्षमता. पाठ लगभग किसी भी परियोजना का आधार होता है। जहां आवश्यक हो वहां नॉन-ब्रेकिंग रिक्त स्थान डालें, बोल्ड, इटैलिक, एबीबीआर इत्यादि में हाइलाइट करें। आप प्रिंटर या इसी तरह की सेवा का उपयोग कर सकते हैं, लेकिन परिणाम को समझने में सक्षम होंगे।
अर्थ विज्ञान- यह समझना कि कुछ कार्यों के लिए कुछ निश्चित टैग हैं। जानिए सही टैग कैसे चुनें.
मिडिया- किस प्रकार के मीडिया को पेज में एम्बेड किया जा सकता है।
इफ़्रेम- तृतीय-पक्ष विजेट (वीडियो, ऑडियो, मानचित्र, आदि) एम्बेड करना।
श्रव्य दृश्य- आप पढ़ाई स्थगित कर सकते हैं, क्योंकि iframe का उपयोग करके आंशिक रूप से हल किया गया। समझें कि ब्राउज़र कौन से प्रारूप चला सकता है, प्लेयर को कैसे डिज़ाइन किया जाए, इत्यादि।
इमेजिस- ब्राउज़र कौन से ग्राफिक प्रारूप और किस रूप में देखता है। कुछ प्रारूपों का उपयोग करने के फायदे और नुकसान।
रेखापुंज- जेपीजी, पीएनजी, जीआईएफ। प्रारूपों के बीच अंतर को समझें और आपको जो और जहां इसकी आवश्यकता है उसे लागू करने में सक्षम हों।
एसवीजी- आप पढ़ाई स्थगित कर सकते हैं, क्योंकि जितना हम चाहते हैं उससे कम बार उपयोग किया जाता है। पक्ष-विपक्ष, सीमाएँ आदि को समझें।
फोंट्स- आप पढ़ाई टाल सकते हैं. यह वास्तव में काफी जटिल विषय है, और सामान्य तौर पर मैं शुरुआती लोगों को सिस्टम फ़ॉन्ट का उपयोग करने की सलाह दूंगा। फ़ॉन्ट लोड करने, डिस्प्ले अनुकूलित करने, कस्टम फ़ॉन्ट के साथ रेंडरिंग अंतराल को कम करने में सक्षम हो।
टेबल लेआउट- वैकल्पिक। उन लोगों के लिए जो भविष्य में उच्च गुणवत्ता वाले ईमेल न्यूज़लेटर बनाना चाहते हैं।
सीएसएस 1- फ़ॉन्ट, रंग, संरेखण, आकार।
सीएसएस 2.1- ब्लॉक व्यवहार, स्थिति, पूर्ण डिज़ाइन का नियंत्रण।
चयनकर्ताओं- टैग, वर्ग, नेस्टेड तत्व के लिए सरल चयनकर्ता। सरल छद्म-चयनकर्ता जैसे: होवर।
नामकरण- कक्षाओं का नाम कैसे रखें ताकि इससे अत्यधिक कष्ट न हो।
ब्लॉक लेआउट- छवि को सचेत ब्लॉकों में तोड़ें, ब्लॉकों को HTML में लागू करें, और उन्हें CSS के साथ डिज़ाइन करें।
ब्राउज़र्स- आप पढ़ाई टाल सकते हैं. कौन से ब्राउज़र मौजूद हैं, उनका अंतर क्या है।
डेवलपर उपकरण- आप पढ़ाई टाल सकते हैं. प्रदर्शन समस्याओं को समझने के लिए ब्राउज़र टूल का उपयोग करें।
पाठ संपादक- डेवलपर्स के लिए कौन से टेक्स्ट एडिटर हैं और क्यों। SublimeText और Notepad++ उदाहरण के तौर पर दिए गए हैं, क्योंकि वे मुझसे परिचित हैं। उनमें बुनियादी चीज़ों को कॉन्फ़िगर करने में सक्षम हों, जैसे इंडेंटेशन, लाइन ब्रेक, इत्यादि।
संस्करण नियंत्रण प्रणाली- मैं व्यक्तिगत रूप से, कम से कम व्यक्तिगत रूप से, अपने लिए उनका उपयोग करने की क्षमता को बहुत महत्वपूर्ण मानता हूं। समझें कि ये सिस्टम क्यों बनाए गए हैं और वे क्या हैं।
गिट- सबसे लोकप्रिय संस्करण नियंत्रण प्रणाली के कार्य और सिद्धांतों को सामान्य शब्दों में समझें।
जीथब/बिटबकेट- गिट के लिए लोकप्रिय प्लेटफार्मों में से एक का उपयोग करने में सक्षम हो।
चेकआउट/कमिट/पुश/पुल- व्यक्तिगत उपयोग के लिए बुनियादी संचालन।
छिपाने की जगह- वर्तमान में अनावश्यक डेटा के अस्थायी भंडारण के लिए।
10 कार्य- अलग-अलग डिजाइन में कम से कम 10 कलाकृतियां बनाएं। आप परीक्षण कर सकते हैं, इससे कोई फर्क नहीं पड़ता। वर्तमान ज्ञान में पूर्ण होना जरूरी है।
मध्य
सीएसएस 3- ग्रेडेशन, छाया, एंटी-अलियासिंग, फिल्टर, परिवर्तन।
उन्नत चयनकर्ता- परिभाषित एक (+) का अनुसरण करने वाले तत्व, गिनती (एन-चाइल्ड), शैडो-डोम, पहले/बाद और इसी तरह से परिभाषित होते हैं।
एनिमेशन- वैकल्पिक। संक्रमण और एनीमेशन. सहज बदलाव, एनिमेशन। सीमाओं और नुकसानों को समझें.
ग्रिड- वे क्यों मौजूद हैं, उन्हें कैसे बनाया जाए, कौन से तैयार समाधान उपलब्ध हैं। उदाहरण के लिए, आप फ्लेक्सबॉक्स ग्रिड या कोई अन्य ग्रिड देख सकते हैं।
फ्रेमवर्क (सीएसएस)- उनकी आवश्यकता क्यों है, उनका उपयोग कैसे करें। यह सलाह दी जाती है कि कम से कम एक कुएं का उपयोग करना सीखें। प्रोटोटाइपिंग के लिए बहुत उपयोगी. डिज़ाइन बजट (अद्वितीय नहीं, लेकिन प्रयोग करने योग्य) के अभाव में परियोजना की गुणवत्ता में उल्लेखनीय सुधार होता है।
सीएसएस प्रीप्रोसेसर- आप पढ़ाई टाल सकते हैं. कार्य का अनुकूलन, अधिक सुंदर और पठनीय कोड। चर, मिश्रण, आदि। SASS, LESS, स्टाइलस जैसे एक या अधिक लोकप्रिय प्रीप्रोसेसरों के साथ काम करें।
मीडिया के प्रश्नों- आप पढ़ाई टाल सकते हैं. स्थितियों (डिवाइस, स्क्रीन आकार, पिक्सेल घनत्व, प्रिंट संस्करण, आदि) के आधार पर वांछित शैलियाँ प्रदर्शित करें।
कोड शैली- समझें कि शैली संबंधी परंपराएँ क्यों हैं, अध्ययन करें और किसी को लागू करना शुरू करें (मैं AirBNB से अनुशंसा करता हूँ)।
सूखा/चुंबन/ठोस- आप पढ़ाई टाल सकते हैं. महत्वपूर्ण विकास सिद्धांतों को समझें जो आगे की परियोजना सहायता को महत्वपूर्ण रूप से सरल बनाते हैं।
ओओसीएसएस- वैकल्पिक। समझें कि ऑब्जेक्ट-ओरिएंटेड सीएसएस क्या है और इसके लिए क्या है। इसका उपयोग कई परियोजनाओं में किसी न किसी रूप में किया जाता है (यद्यपि यह समझे बिना कि यही है)। आदर्श रूप से, डिज़ाइन करना सीखें। बड़ी परियोजनाओं के लिए बढ़िया हो सकता है.
प्रलेखन- समझें कि क्या और कैसे दस्तावेज़ बनाना है। दस्तावेज़। आप इसे टाल सकते हैं, लेकिन भविष्य में मार्कडाउन का अध्ययन करना सुनिश्चित करें।
योजना- एक तस्वीर से समय सीमा का अनुमान लगाना और काम का क्रम निर्धारित करना सीखें।
सड़न- आप पढ़ाई टाल सकते हैं. किसी कार्य को उपकार्यों में बाँटना सीखें। यह जितना दिखता है उससे कहीं अधिक कठिन है :-)
लक्ष्यों का समायोजन- आप पढ़ाई टाल सकते हैं. पाठ में कार्यों का स्पष्ट रूप से वर्णन करना सीखें ताकि अन्य डेवलपर्स, जिनमें कम योग्यता वाले लोग भी शामिल हैं, स्पष्ट रूप से समझ सकें कि उन्हें पूरा करने के लिए क्या करने की आवश्यकता है।
फ्लेक्सबॉक्स- मॉडल की समझ, उसे पूरी तरह से लागू करने की क्षमता।
पत्र लेआउट- वैकल्पिक। सामान्य तौर पर, कौशल अतिश्योक्तिपूर्ण नहीं है। मेल सिस्टम की विशेषताओं को समझें, अच्छी उपस्थिति बनाए रखें और स्पैम (यदि यह स्पैम नहीं है) में न पड़ें।
पॉलीफ़िल- समझें कि पिछड़ी संगतता बनाए रखते हुए सबसे मौजूदा विकास क्षमताओं का उपयोग कैसे करें। इस दृष्टिकोण के फायदे और नुकसान को समझें।
क्रॉस-प्लेटफ़ॉर्म लेआउट- समझें कि प्रोजेक्ट को न केवल विंडोज, लिनक्स और मैक के तहत, बल्कि स्मार्टटीवी या पीएस के तहत भी अच्छा दिखाने के लिए क्या करने की जरूरत है।
क्रॉस-ब्राउज़र लेआउट- ब्राउज़र रेंडरिंग में अंतर को समझें और उन्हें समान प्रदर्शित करें। CanIUse वेबसाइट इसमें बहुत मदद करती है।
मोबाइल लेआउट- आप पढ़ाई टाल सकते हैं. मोबाइल प्लेटफ़ॉर्म की सीमाओं को समझें. सीमित स्थान का बुद्धिमानी से उपयोग करें।
अनुकूलन- आप पढ़ाई टाल सकते हैं. कुछ तकनीकों की "कीमत" को समझें। किसी उपयोगकर्ता को साइट प्रदर्शित करने के चरणों को समझें। - आप पढ़ाई टाल सकते हैं. आकार, कैश, संपीड़न, संसाधन पूलिंग आदि से संबंधित अनुकूलन।
प्रतिपादन- आप पढ़ाई टाल सकते हैं. पोस्ट-लोड रेंडरिंग गति से संबंधित अनुकूलन।
एसईओ- आप पढ़ाई टाल सकते हैं. कम से कम खोज इंजन कैसे काम करते हैं इसकी बुनियादी समझ। खोज इंजन को यह पता लगाने में "मदद" करने की क्षमता कि कहाँ देखना है और क्या महत्वपूर्ण है।
टेम्पलेट इंजन- समझें कि आप कोड, समूह तत्वों और लेआउट पृष्ठों का पुन: उपयोग कैसे कर सकते हैं। सर्वर-साइड और क्लाइंट-साइड रेंडरिंग दोनों को सीखना अत्यधिक उचित है। इसमें "शुद्ध" भाषा में टेम्पलेट भी शामिल हैं (जैसे कि सरल PHP आवेषण)। हमें टेम्प्लेट इंजन के "पहले" (डेटा प्रवाह) कार्य में कोई रुचि नहीं है।
पीएचपी- आप पढ़ाई टाल सकते हैं. बुनियादी सिंटैक्स को समझें और पेज डिज़ाइन से संबंधित छोटे-मोटे संपादन करने में सक्षम हों।
मुख्यमंत्रियों- आप पढ़ाई टाल सकते हैं. पता लगाएं कि सीएमएस क्या मौजूद हैं और उन्हें क्यों बनाया गया था। कम से कम एक के लिए टेम्प्लेट लिखना सीखें (मैं वर्डप्रेस की अनुशंसा करता हूं)।
जावास्क्रिप्ट- आप पढ़ाई टाल सकते हैं. बुनियादी सिंटैक्स सीखें, समझें कि सरल हैंडलर कैसे संलग्न करें और DOM के साथ सरल कार्य करें।
jQuery- आप पढ़ाई टाल सकते हैं. सबसे लोकप्रिय जेएस लाइब्रेरी (निश्चित रूप से वेनिला.जेएस के बाद) के लिए प्लगइन्स का उपयोग करके काफी सामान्य समस्याओं को हल करने के लिए बहुत समय बचाना सीखें।
नोडजेएस- आप पढ़ाई टाल सकते हैं. एक साधारण सर्वर चलाने, स्टेटिक वितरित करने और सर्वर साइड पर रेंडर करने का तरीका जानें। आप एक्सप्रेस या किसी अन्य ढांचे का उपयोग कर सकते हैं।
विधानसभा- वैकल्पिक। जानें कि सीएसएस/एचटीएमएल फाइलों के एक समूह से किसी प्रोजेक्ट को आपकी आवश्यकतानुसार कैसे तैयार किया जाए। मेरा सुझाव है कि आप "विभिन्न" शिविरों के प्रतिनिधियों के रूप में, कम से कम ग्रंट और गल्प से परिचित हों।
आईडीई- वैकल्पिक। जानें कि आईडीई की आवश्यकता क्यों है और उनका उपयोग कैसे करें। समय बचाने के लिए कुछ आईडीई का उपयोग करना शुरू करें। महत्वपूर्ण: आईडीई सीखना एक प्रोग्रामिंग भाषा को पूरी तरह से सीखने के बराबर है, और इसमें बहुत अधिक समय निवेश करना इसके लायक नहीं हो सकता है। व्यक्तिगत रूप से, मैं टेक्स्ट संपादकों का उपयोग करता हूं (और केवल बहुत बड़ी परियोजनाओं के लिए आईडीई चालू करता हूं)।
शाखाओं में- गिट में शाखाओं का प्रबंधन करना सीखें।
मर्ज- संघर्ष समाधान के साथ शाखाओं का विलय करना सीखें।
फ़ेच/रीबेस- पता लगाएं कि वे किस लिए हैं, उनका उपयोग कब करना है, और आवश्यकतानुसार उनका उपयोग करना शुरू करें।
ग्राफ़िक संपादक- पता लगाएं कि वे क्या हैं और क्यों हैं। वेक्टर रेखापुंज से किस प्रकार भिन्न हैं? कम से कम डिज़ाइनर से लेआउट को "पढ़ने" के स्तर पर संपादक को समझना महत्वपूर्ण है। सही फ़ॉन्ट, आकार, रंग आदि चुनें. नज़र से तो नहीं, लेकिन ज़रूर. मैं कम से कम 1 रैस्टर (फ़ोटोशॉप) और 1 वेक्टर (फ़िग्मा) के साथ काम करने की सलाह देता हूँ।
50 कार्य- चरण के अंत तक आपके पास अध्ययन किए गए क्षेत्रों से कौशल का प्रदर्शन करने वाले लगभग 50 अलग-अलग कार्य होंगे।
वरिष्ठ
हालाँकि यह समूह चित्र में छोटा लगता है, वास्तव में यह सबसे बड़ा है। क्योंकि इस बिंदु पर, उन सभी चीज़ों का अध्ययन करना आवश्यक है जिन्हें टाल दिया गया है।
अनुकूली/उत्तरदायी लेआउट- उच्चतम स्तर को समझें और अब तक अर्जित सभी ज्ञान को संयोजित करें। प्रोजेक्ट हर जगह और हर चीज़ पर (कारण के भीतर) अच्छा दिखना चाहिए।
क्रमिक गिरावट/प्रगतिशील सुधार- समझें कि यह क्या है और क्यों। उपयोग।
गिटफ्लो- अन्य डेवलपर्स को यह समझाने में सक्षम हो कि शाखाएं कैसे बनाएं, उन्हें कहां मर्ज करें, कोड समीक्षा कैसे करें (लेआउट, निश्चित रूप से, कोड नहीं)।
कार्यलय- वैकल्पिक। एक ऐसी पद्धति को समझें जो आपको असीमित बड़ी परियोजनाएं बनाने की अनुमति देती है ताकि न्यूनतम सिंक्रनाइज़ेशन के साथ, विभिन्न टीमें एक-दूसरे के ब्लॉक का उपयोग कर सकें। ऐसी अन्य पद्धतियाँ भी हैं जो कोई ख़राब परिणाम नहीं देतीं। इस बिंदु तक, आप किसी न किसी तरह से उनके बारे में जान जाएंगे और यदि आप चाहें तो उनका अध्ययन कर सकते हैं।
100 कार्य- विभिन्न अर्जित कौशलों को प्रदर्शित करने वाले कुल सौ कार्य हैं। वस्तुतः यह सब सशर्त है। आपके पोर्टफोलियो में एक काम का टुकड़ा (विभिन्न हिस्सों से मिलकर) हो सकता है, जो पहले से ही दिखाएगा कि आप किसी भी चीज़ से डरते नहीं हैं।
निष्कर्ष
दरअसल, इनमें से कई विषय छोटे हैं। हालाँकि, विभिन्न कारकों का एक समूह अपने दिमाग में रखना बहुत मुश्किल है। 15 वर्षों के दौरान, मैंने दस से भी कम लेआउट डिजाइनरों (और सामान्य रूप से प्रोग्रामर) के साथ संवाद किया, जिन्हें मैं वरिष्ठ के रूप में वर्गीकृत करूंगा (वहां और भी अच्छे लेआउट डिजाइनर और प्रोग्रामर थे)।
ऑफहैंड, स्क्रैच से लेआउट का पूरी तरह से अध्ययन और अभ्यास करने में एक वर्ष बिताना काफी संभव है (या यदि आप घटक डिजाइन में जाते हैं तो अधिक)।
मुझे उम्मीद है कि जो लोग अपनी यात्रा की शुरुआत में हैं, आरेख उन्हें बताएगा कि वे और कहाँ जा सकते हैं, और प्रोग्रामिंग में तुरंत कूदना (या उसकी ओर बिल्कुल भी नहीं बढ़ना) आवश्यक नहीं है।
मैं आरेख से प्रत्येक आयत विषय की विस्तृत चर्चा के साथ एक पूर्ण निःशुल्क पाठ्यक्रम बनाने की भी योजना बना रहा हूं। मुझे सुझाव, समीक्षाएं, शुभकामनाएं आदि पाकर खुशी होगी।
पाठ्यक्रम संभवतः पूर्ण पाठ और ग्राफिक दोहराव के साथ वीडियो पाठ के प्रारूप में होगा। यदि चीजें ठीक रहीं, तो मैं भविष्य में टिप्पणियों में लिंक जोड़ूंगा। टैगों को जोड़ें
वेब डिज़ाइन न केवल एक कलात्मक पहलू है, इसमें कुछ तकनीकी पहलू भी शामिल हैं। विशेष रूप से, हम एक तैयार टेम्पलेट को html और css कोड में "अनुवाद" करने की प्रक्रिया के बारे में बात कर रहे हैं, जिसे कहा जाता है वेबसाइट लेआउट. वेबसाइट डिज़ाइन लेआउट की अपनी कुछ विशेषताएं, नियम और बारीकियाँ हैं, जिनके बारे में हम ब्लॉग के इस भाग में बात करेंगे। यहां आपको वेब पेज मार्कअप भाषा HTML और CSS शैलियों के बारे में सैद्धांतिक जानकारी के साथ-साथ लेआउट पर व्यावहारिक पाठ भी मिलेंगे। लेख विस्तृत स्पष्टीकरण के साथ विशिष्ट उदाहरणों का उपयोग करते हुए, टेम्पलेट डिज़ाइन करते समय उत्पन्न होने वाली कुछ स्थितियों पर चर्चा करेंगे।
इसके अलावा साइट के लेआउट अनुभाग में आपको भविष्य या शुरुआती लेआउट डिजाइनरों के लिए टिप्स और ट्रिक्स के साथ पोस्ट, HTML और CSS लेआउट के लिए उपयोगी हैक्स और रहस्यों के साथ नोट्स, साथ ही लेआउट के लिए उपयोग किए जाने वाले सॉफ़्टवेयर की समीक्षाएं मिलेंगी।
किसी तरह डिज़ाइन थीम को उज्ज्वल करने के लिए, आइए आज लेआउट पर एक और पाठ देखें - सीएसएस होवर प्रभावों के बारे में पिछली पोस्ट के बाद से बहुत समय बीत चुका है। यह नोट html में ईमेल का लिंक बनाने के मुद्दे पर केंद्रित होगा। यह सब सामान्य ए टैग का उपयोग करके कार्यान्वित किया जाता है, जिसका उपयोग इसकी सभी सादगी के बावजूद, न केवल हाइपरलिंक डिजाइन करने के लिए किया जा सकता है, बल्कि इसमें कई दिलचस्प बारीकियां भी हैं। मूल वाक्यविन्यास इस तरह दिखता है...
अक्सर वेबसाइटों पर आप होवर करने पर लिंक या बटन के डिज़ाइन में बदलाव देख सकते हैं। सीएसएस में एक विशेष छद्म-वर्ग: होवर आपको कार्य को कार्यान्वित करने की अनुमति देता है। आज हम कुछ लेआउट तकनीकों को देखेंगे जो हमें यह सुविधा बनाने की अनुमति देती हैं, और नीचे हम उनमें से सबसे दिलचस्प (संक्षिप्त विवरण/स्पष्टीकरण के साथ) की एक सूची प्रकाशित करेंगे। हम सभी विकल्पों को इसमें विभाजित करेंगे: बटन और लिंक के लिए प्रभाव। छवियों में होवर करें. सीएसएस पुस्तकालय (अलग से जुड़े हुए)। ये समूह बहुत मनमाने हैं, क्योंकि कई उदाहरण...
पिछले लेखों में से एक में, हमने साइट पर लिंक और टेक्स्ट के नीचे चमकदार पृष्ठभूमि धारियों को जोड़ने के रूप में एक मिनी डिज़ाइन प्रवृत्ति के बारे में लिखा था। इसी तरह का प्रभाव सामाजिक नेटवर्क के लिए आधुनिक चित्रणों में भी पाया जा सकता है जिनमें कुछ प्रकार की सामग्री होती है। आज हमने विषय को जारी रखने और लेआउट के दृष्टिकोण से मुद्दे पर विचार करने का निर्णय लिया है, यानी हम आपको बताएंगे कि HTML में टेक्स्ट/लिंक को कैसे रेखांकित किया जाए। एक चीज़ इसमें हमारी मदद करेगी...
इंटरनेट पर अधिकांश क्लासिक वेबसाइटें मुख्य नेविगेशन तत्व के रूप में एक क्षैतिज मेनू का उपयोग करती हैं। कभी-कभी इसमें विभिन्न अतिरिक्त सुविधाएं शामिल हो सकती हैं - बहु-स्तरीय संरचनाएं, उप-आइटम के लिए आइकन, एक खोज ब्लॉक, जटिल सूचियां इत्यादि। हाल ही में, ब्लॉग में पहले से ही PSD में स्टाइलिश मेनू का एक छोटा चयन था, और आज हम CSS + HTML का उपयोग करके ड्रॉप-डाउन मेनू बनाने के 4 व्यावहारिक उदाहरण देखेंगे। यह जानकारी नौसिखिया डेवलपर्स और उन लोगों के लिए उपयोगी होगी जो…
इससे पहले ब्लॉग में हम पहले ही लीनियर ग्रेडिएंट्स के बारे में बात कर चुके हैं और साथ ही विभिन्न जनरेटर सेवाओं के उदाहरण भी दे चुके हैं। आज हम सीएसएस का उपयोग करके एक सुंदर पृष्ठभूमि ग्रेडिएंट बनाने के लिए इस ज्ञान को अभ्यास में लाने का प्रयास करेंगे। साथ ही, इस प्रक्रिया में, हम CSS3 में परिवर्तनों को लागू करने के लिए दिलचस्प स्क्यू फ़ंक्शन से परिचित होंगे। हम कह सकते हैं कि पृष्ठभूमि छवि का मूल विचार BrightMedia वेबसाइट से उधार लिया गया था, जो CSS3 की सभी सुविधाओं के व्यावसायिक उपयोग का एक उत्कृष्ट उदाहरण है। सच है, हम दोहराएंगे नहीं...
आधुनिक वेबसाइटों पर आप बड़ी संख्या में विभिन्न प्रकार के ग्राफिक्स पा सकते हैं: उत्पादों की छवियां, उपयोगकर्ता अवतार, पेजों का डिज़ाइन बनाने वाली तस्वीरें, बटन, आइकन, लोगो आदि। और प्रोजेक्ट जितना बड़ा होगा, उतनी ही अधिक ग्राफ़िक फ़ाइलों का उपयोग किया जाएगा। जब आप ब्राउज़र में साइट का एक अलग पेज खोलते हैं, तो उसके सभी तत्व लोड हो जाते हैं। इसलिए, जब इस पर बहुत सारे ग्राफ़िक्स होते हैं, तो लोडिंग गति काफी धीमी हो जाती है। जिसके परिणामस्वरूप,…
मैंने CSS3 का उपयोग करके अपनी वेबसाइट पर मानक साइडबार ब्लॉक के लिए गोलाकार कोने बनाने का निर्णय लिया। पहले, मुझे याद है, इस कार्य को लागू करने के लिए, हमने प्रत्येक कोने के लिए अलग-अलग चित्र बनाए और उन्हें HTML में कई DIV ब्लॉकों का उपयोग करके संयोजित किया। सौभाग्य से, अब यह सब सीएसएस शैलियों में आसानी से निर्दिष्ट है। कुछ लेआउट और थीम (उदाहरण के लिए, महिला) के लिए, ऐसी सीएसएस राउंडिंग सीधी, सख्त रेखाओं की तुलना में अधिक दिलचस्प लगती है। सामान्य तौर पर, मुझे...
आज के प्रकाशन के साथ मैं बोल्ड फ़ॉन्ट्स के बारे में लेखों की एक श्रृंखला शुरू कर रहा हूं। प्रारंभ में मैंने इस विषय पर सभी बारीकियों और प्रश्नों को एक ही स्थान पर पोस्ट करने के बारे में सोचा, लेकिन वहां बहुत अधिक जानकारी थी। इसे धीरे-धीरे लेना बेहतर है। इसलिए, फ़ोटोशॉप चित्र बनाने के लिए फ़ॉन्ट की विभिन्न समीक्षाओं पर आगे बढ़ने से पहले, मैं लेआउट से संबंधित मुद्दों पर विचार करूंगा। आपको यहां फ़ॉन्ट का चयन मिलेगा: दिलचस्प बोल्ड, विभिन्न बोल्ड और रूसी मोटे फ़ॉन्ट। आज मैं आपको बताऊंगा कि शब्दों को बोल्ड कैसे बनाया जाता है...
वेबसाइट डिज़ाइन करते समय, CSS (कैस्केडिंगस्टाइलशीट्स) यानी कैस्केडिंग स्टाइल शीट्स का उपयोग करने की प्रथा है। यह टैग का एक सेट है जो पेज डिज़ाइन (इंडेंट, फ़ॉन्ट, रंग) के बुनियादी मापदंडों को निर्दिष्ट करता है, जिससे आप किसी वेबसाइट के प्रमुख तत्वों को एक निश्चित शैली में रखते हुए बना सकते हैं। प्रत्येक HTML तत्व के लिए आप अपनी शैली परिभाषित कर सकते हैं, यह सुविधाजनक है, CSS समय और प्रयास बचाता है। ऐसे कई इंटरनेट संसाधन हैं जो एक प्रकार के सीएसएस कंस्ट्रक्टर हैं और एक वेबमास्टर के काम को आसान बनाते हैं। हम पहले ही प्रकाशित कर चुके हैं...
वेब डेवलपमेंट सीखना एक काफी व्यापक विषय है, और आपको सबसे बुनियादी बातों - HTML और CSS - से शुरुआत करनी होगी। अब इंटरनेट पर ज्ञान प्राप्त करने के लिए बहुत सारे विभिन्न पाठ्यक्रम, स्कैन की गई किताबें और ट्यूटोरियल मौजूद हैं। हालाँकि, इनमें से किसी का भी अध्ययन करना HTML अकादमी प्रोजेक्ट जितना दिलचस्प नहीं होगा। यह उपयोगी संसाधन आपको उच्च गुणवत्ता वाले तरीके से और कम समय में वेब विकास/लेआउट की मूल बातें सीखने में मदद करेगा। संसाधन एक ऑनलाइन स्कूल के प्रारूप में बनाया गया है,…
,ब्लॉक लेआउट
जैसा कि आपने ऊपर अनुमान लगाया होगा, यह लेख विशेष रूप से ब्लॉक लेआउट पर ध्यान केंद्रित करेगा। यदि पिछला लेख एक परिचयात्मक था, तो अब हम एक उदाहरण पर अधिक विशेष रूप से गौर करेंगे - कैसे शुरुआत से एक वेबसाइट बनाएं. लेआउट के अपने अध्ययन के दौरान, मैं एक विस्तृत मैनुअल की तलाश में था कि सबसे सरल HTML पेज को चरण दर चरण कैसे तैयार किया जाए। इस लेख में, मैं कोड की प्रत्येक पंक्ति को यथासंभव विस्तार से देखना चाहता हूं और HTML के साथ काम करने के सिद्धांतों को समझाना चाहता हूं, ताकि इस व्यवसाय में नया कोई भी इसे समझ सके। मुझे उम्मीद है कि मैं यह कर सकता हूं. 🙂
तो, चलिए शुरू करते हैं। उदाहरण के लिए, मैंने एक साधारण प्रोटोटाइप लिया, इसे लेआउट नहीं कहा जा सकता, एक सामान्य लेआउट पीएसडी प्रारूप में तैयार किया जाता है, लेकिन यहां यह जेपीजी में है। हमारे लिए मुख्य बात यह है कि वेबसाइटों का लेआउट कैसे बनाया जाए, इसके सिद्धांत को समझना है ब्लॉक लेआउट.ब्लॉक लेआउट के साथ काम करने के लिए आपको न केवल जानने की जरूरत है एचटीएमएल, लेकिन सीएसएस(व्यापक शैली पत्रक)। लेखों की श्रृंखला के दौरान वेबसाइट लेआउट, हम बस सीएसएस शैलियों के उस सेट का अध्ययन करने जा रहे हैं, जो भविष्य में आपको लगभग किसी भी लेआउट/मॉकअप फ्रेमवर्क को लेआउट करने में हमेशा मदद करेगा, क्योंकि सिद्धांत समान है।
तो, यहाँ लेआउट (क्लिक करने योग्य) है।
हम देखते हैं कि इसके 4 तार्किक भाग हैं:
- वेबसाइट हेडर (इसके बाद हम इसे हेडर कहेंगे);
- बायां कॉलम (इसके बाद हम इसे बायां साइडबार कहेंगे);
- दायां कॉलम (इसके बाद हम इसे सामग्री कहेंगे);
- पाद लेख (इसके बाद हम पाद लेख कहेंगे);
तो, बेशक, आइए हेडर ब्लॉक से शुरुआत करें। हमारा मॉकअप 1000 पिक्सेल (px) चौड़ा है।
आरंभ करने के लिए, मैं कहूंगा कि लेआउट html टैग का उपयोग करके किया जाता है। उदाहरण के लिए,
आरंभ करने के लिए, आपको अपनी डिस्क पर एक नई निर्देशिका बनाने की आवश्यकता है, उदाहरण के लिए, myfirsthtml और कोड संपादक में (मैं उदात्त पाठ 3 का उपयोग करता हूं, लेखन के समय यह नवीनतम संस्करण है), 2 फ़ाइलें बनाएं Index.html और style.css. अब आइए Index.html खोलें और हमारे पेज के मार्कअप, अर्थात् हेडर से शुरू करें। लेकिन हेडर बनाने से पहले हमें किसी भी html पेज का मानक मार्कअप बनाना होगा। अब मैं तुम्हें दिखाता हूँ कि मेरा क्या मतलब है।
आइए अब प्रत्येक पंक्ति पर नजर डालें। टिप्पणियाँ:
लाइन 1:दस्तावेज़ का तथाकथित सिद्धांत यहां दर्शाया गया है; यह आवश्यक है ताकि ब्राउज़र समझ सके कि उसे वेब पेज की व्याख्या करने के लिए किस रूप की आवश्यकता है। सिद्धांत के 4 प्रकार हैं:
- एक्सएचटीएमएल 1.0
- एक्सएचटीएमएल 1.1
- एचटीएमएल 4.01
- एचटीएमएल 5
बदले में, XHTML 1.0 को उपप्रकारों में विभाजित किया गया है: सख्त सिंटैक्स (सख्त) - किसी भी स्वतंत्रता की अनुमति नहीं देता है, आप टैग का उपयोग नहीं कर सकते हैं , ; संक्रमणकालीन - लेआउट में कुछ स्वतंत्रता की अनुमति देता है जिसका उपयोग सख्त के साथ नहीं किया जा सकता है; फ़्रेम युक्त (फ़्रेमसेट)। XHTML 1.1 को किसी भी उपप्रकार में विभाजित नहीं किया गया है, यह एकमात्र है, डेवलपर्स ने यह भी भविष्यवाणी की थी कि यह धीरे-धीरे HTML को विस्थापित कर देगा, लेकिन यदि आप इसके बारे में अधिक विस्तार से पढ़ते हैं, तो HTML संस्करण 4 से 5 तक विकसित हुआ, और XHTML मानक निलंबित कर दिया गया इसका विकास, लेकिन फिर भी आपको ऐसी परियोजनाएं शायद ही मिलें जिनमें यह विशेष दस्तावेज़ निर्दिष्ट हो।
HTML 4.01 को भी 3 प्रकारों में विभाजित किया गया है: सख्त वाक्यविन्यास (सख्त), संक्रमणकालीन (संक्रमणकालीन) और युक्त फ्रेम (फ्रेमसेट)।
और अंत में एचटीएमएल 5सभी प्रकार के दस्तावेज़ों के लिए, सबसे सार्वभौमिक। भविष्य में, हमारे पास इस सिद्धांत के साथ बड़ी संख्या में लेख होंगे। मैं अपने सभी नए प्रोजेक्ट इसका उपयोग करके बनाता हूं। लेकिन आइए हम खुद से आगे न बढ़ें, अब हम HTML 4.01 का विश्लेषण कर रहे हैं। इस उदाहरण में, हम ट्रांजिशनल का उपयोग करते हैं; यह शुरुआती लोगों के लिए बहुत उपयुक्त है।
लाइन 2:टैग खोलें यह दस्तावेज़ प्रकार के तुरंत बाद आता है और इसमें संपूर्ण HTML कोड शामिल होता है, दस्तावेज़ के अंत में एक समापन टैग होता है.
- पृष्ठ का शीर्षक
पृष्ठ का शीर्षक - पृष्ठ विवरण
- कीवर्ड को अल्पविराम से अलग किया गया
- और बहुत सी अन्य मेटा जानकारी।
बाद
टैग का अनुसरण करता है . यहीं पर हम अपनी वेबसाइट प्रस्तुत करेंगे। इस टैग के भीतर सब कुछ सीधे ब्राउज़र में प्रदर्शित किया जाएगा।इसलिए हमने html4 का उपयोग करके मानक पेज मार्कअप को पूरा और विश्लेषण किया है। मैं इस पाठ को पूरा करूंगा, और मैं आपको अगले पाठ में एप्लिकेशन का उपयोग करके मुख्य तत्वों को कैसे प्रस्तुत करना है, बताऊंगा, जिसे मैं आने वाले दिनों में लिखूंगा। जोड़ना न भूलें
शुभ दिन, प्रिय पाठकों। एक बार जब आप इसे समझना शुरू कर देंगे तो वेबसाइट लेआउट एक दिलचस्प व्यवसाय है। एकमात्र समस्या वास्तव में अच्छी शिक्षण सामग्री ढूंढना है। सबसे पहले, कोड प्रतीकों के एक बेतुके सेट की तरह लग सकता है, लेकिन एक बार जब आप गुप्त ज्ञान में महारत हासिल कर लेते हैं, तो यह काफी सरल और समझने योग्य एल्गोरिदम में बदल जाता है, और आय और नैतिक संतुष्टि भी उत्पन्न करना शुरू कर देता है।
आज हम बात करेंगे कि html ब्लॉक लेआउट और CSS क्या हैं। जादुई प्रोग्रामिंग भाषा कम डरावनी हो जाएगी. मुझे उम्मीद है कि लेख के अंत तक आप कोड के कुछ तत्वों को देखना सीख गए होंगे और अपने लिए एक दृढ़ निर्णय लेने में सक्षम होंगे कि आपको इस सब में शामिल होना चाहिए या नहीं।
आप उन लेआउट डिजाइनरों से अधिक भाग्यशाली क्यों हैं जिन्होंने बहुत समय पहले काम करना शुरू किया था?
लेआउट दो प्रकार के होते हैं: ब्लॉक और टेबल। समय की शुरुआत में, लेआउट को तालिकाओं के रूप में बनाया गया था। सबसे पहले, केवल एक, बड़ा, बनाया गया था।
सिर, मुख्य भाग, इसमें बनाया गया था। जिसमें एक लोगो, कुछ बुनियादी जानकारी जैसे टेलीफ़ोन नंबर इत्यादि शामिल हैं।
मुख्य सामग्री भाग. लेख का पाठ, एक परिचयात्मक अभिवादन, या कुछ और।
पाद लेख नीचे स्थित है. इसका प्रयोग आज भी किया जाता है. एक नियम के रूप में, संपर्कों, रिक्तियों और "हमारे बारे में" जानकारी के छोटे लिंक यहां डाले गए हैं। वे संसाधन के अस्तित्व की तारीखें या बस जादुई शब्द "कॉपीराइट" संलग्न कर सकते हैं, जिसके साथ डेवलपर्स अपने कॉपीराइट को इंगित करने या उसकी रक्षा करने की उम्मीद करते हैं। दरवाजे पर लटकने वाली घोड़े की नाल के रूप में इसका उपयोग केवल भूतों को डरा सकता है, हालांकि, एक नियम के रूप में, वे पादलेख में नहीं देखते हैं।
थोड़ी देर बाद, नए मानक सामने आए। सारणीबद्ध लेआउट को ब्लॉक लेआउट द्वारा प्रतिस्थापित किया गया था। "div" टैग ब्लॉक लेआउट है। आप किसी भी साइट का कोड देख सकते हैं. राइट-क्लिक करें और व्यू एलिमेंट कोड चुनें। मेरे स्क्रीनशॉट पर एक नजर डालें. मुख्य पृष्ठ, पाद लेख, बाएँ और दाएँ कॉलम का एक ब्लॉक है। वे सभी हस्ताक्षरित हैं।
आधुनिक वेबसाइटें ब्लॉकों से बनाई जाती हैं; मैं आपको एक योजनाबद्ध उदाहरण दिखाऊंगा ताकि आप समझ सकें। यहाँ अंतर पृष्ठ कोड में है। आप देखिए, कोई मुख्य चिन्ह नहीं है। किसी न किसी भाग में रखे गए ब्लॉक। कभी-कभी वे एक-दूसरे को ओवरलैप कर सकते हैं या कई तत्वों को जोड़ सकते हैं, लेकिन एक अतिरिक्त तत्व (बड़ी तालिका) गायब हो गई है।
ब्लॉक सीएसएस का उपयोग करके डिज़ाइन किए गए हैं, जो एक विशेष प्रोग्रामिंग भाषा है। इसमें भ्रमित होना मुश्किल है, टेबल लेआउट का उपयोग करने की तुलना में यह कम बोझिल है, लेआउट डिजाइनर के लिए सब कुछ काफी तार्किक, स्पष्ट और सुविधाजनक है। ब्लॉक के लिए धन्यवाद, आप अधिक समस्याएं हल कर सकते हैं, दस्तावेज़ों को संपादित करना बहुत आसान है, और पेज बहुत तेज़ी से लोड होते हैं।
चरण-दर-चरण निर्देश: वेबसाइटें कैसे बनाई जाती हैं
आइए चरण-दर-चरण देखें कि एक पोर्टल इलेक्ट्रॉनिक संसाधन में कैसे बदल जाता है। इसमें कुछ भी जटिल नहीं है. हां, आपको पढ़ाई के लिए कुछ प्रयास करने होंगे, लेकिन इससे न केवल नैतिक संतुष्टि मिलेगी, बल्कि स्थिर आय भी होगी। लेआउट एक ऐसा व्यवसाय है जिसमें बहुत से लोग शामिल नहीं होते हैं।
80% से अधिक लोग बस प्रतीकों के एक समझ से बाहर सेट को देखते हैं, स्कूल के गणित के पाठ्यक्रम को याद करते हैं: लघुगणक, अंतर - वे पागल हो जाते हैं, डर जाते हैं और इस विषय के बारे में भूल जाते हैं: "बेहतर होगा कि मैं जाकर चीनी सीखूं, यह होगा आसान।"
आप पहले ही कुछ एल्गोरिदम देख चुके हैं और आश्वस्त हैं कि वर्ण सेट में दोहराए जाने वाले तत्व हैं। यह बहुत अच्छा है और, आप देखिए, यह इतना डरावना नहीं है।
चलिए अब देखते हैं कि वेबसाइट कैसे बनाई जाती है। सबसे पहले, डिज़ाइनर फ़ोटोशॉप में काम करते हैं। उन्हें कुछ इस तस्वीर जैसा मिलता है. हालाँकि, यह सिर्फ एक तस्वीर है, लेकिन इसमें कुछ अंतर हैं।
यह एक विशेष फ़ोटोशॉप प्रारूप में निर्मित होता है, जैसे नोटपैड txt या वर्ड डॉक। पीएसडी से, जैसा कि इस प्रारूप को कहा जाता है, ब्लॉक काट दिए जाते हैं। बाईं ओर मेनू में इसके लिए एक विशेष बटन है।
दस्तावेज़ कट जाने के बाद. इसे "वेब के लिए निर्यात किया जा सकता है" और परिणामस्वरूप, कंप्यूटर पर एक छवि फ़ोल्डर दिखाई देता है, जिसका उपयोग लेआउट डिजाइनर पूरी साइट पर चित्र वितरित करने के लिए करता है।
मैंने एक मिनट में यह विकल्प बनाया, यह सही नहीं है. मैं आपको बस एक अनुमानित परिणाम दिखाना चाहता था। आप मेरे पीएसडी लेआउट का इलेक्ट्रॉनिक संस्करण डाउनलोड कर सकते हैं ( डाउनलोड करना ) और अपना खुद का, सही संस्करण बनाने का प्रयास करें, देखें कि प्लेसमेंट के लिए कौन से चित्र उपयोगी हैं और आप उन्हें कैसे काटेंगे। साथ ही आप फोटोशॉप में खुद ही टेम्पलेट पर काम करने की कोशिश करेंगे.
शुरुआती लेआउट डिजाइनरों और डिजाइनरों के लिए, यह न केवल दिलचस्प होगा, बल्कि उपयोगी भी होगा। रंग बदलें, तत्वों को पुनर्व्यवस्थित करें, टेम्पलेट को संशोधित करें और देखें कि क्या अच्छा लगता है और कौन सा परिवर्तन आपको पसंद नहीं है।
आपकी पहली साइट. लेआउट में केवल पांच मिनट लगेंगे
आप नोटपैड++ में लेआउट पर ही काम कर सकते हैं। आज मैं एडोब ड्रीमविवर प्रोग्राम पर बात नहीं करूंगा, क्योंकि... यह एक अलग लेख का विषय है, लेकिन मैं ध्यान देता हूं कि यह विशेष रूप से लेआउट डिजाइनरों के लिए बनाया गया था।
किसी वेबसाइट पर काम आम तौर पर style.css फ़ाइल के निर्माण से शुरू नहीं होता है, लेकिन मुझे लगता है कि यह आपके लिए अधिक दिलचस्प होगा। यह मुख्य दस्तावेज़ है जो बताता है कि आपका पोर्टल कैसा दिखेगा। यह आसान है। आपको अंग्रेजी सीखने की भी जरूरत नहीं है.
पृष्ठभूमि पृष्ठभूमि का रंग है.
फोटोशॉप में कलर पैलेट पर डबल-क्लिक करके आप अन्य रंगों का पता लगा सकते हैं।
टेक्स्ट घटक वाला HTML दस्तावेज़ इस तरह दिखेगा। पहले से ही परिचित मेनू, बॉडी और कंटेनर... h2 टैग से भी आप परिचित होंगे। ये शीर्षक हैं. उनमें अपने शब्द लिखें.
इन दोनों दस्तावेजों को एक फ़ोल्डर में डाउनलोड करें और नोटपैड++ के साथ खोलें, फिर रंग और टेक्स्ट संपादित करें, फिर किसी भी ब्राउज़र से Index.html चलाएं ( डाउनलोड करना ).
परिणाम कुछ इस प्रकार होगा.
बधाई हो। यह इंटरनेट पर आपका पहला पेज है! आपने यह किया, आप सफल हुए। स्वाभाविक रूप से, रंग के बजाय, आप फ़ोटोशॉप से काटे गए चित्र को छवि दस्तावेज़ में सम्मिलित कर सकते हैं। ऐसा करने के लिए, आपको बस पथ निर्दिष्ट करना होगा। जैसा कि आप देख सकते हैं, यहां कुछ भी अति जटिल नहीं है।
और अंत में... वीडियो पाठ डाउनलोड करें
जैसा कि मैंने आपको पहले ही बताया था, लेआउट में सबसे कठिन काम अच्छी प्रशिक्षण सामग्री ढूंढना है। मैंने स्वयं किताबों से शुरुआत की और केवल दो सप्ताह बाद ही मैं अपनी पहली इंडेक्स फ़ाइल बनाने में सक्षम हो गया। जैसा कि आप समझते हैं, स्टाइल शीट (सीएसएस) के बिना यह इस तरह दिखेगा।
सहमत हूँ, यह बिल्कुल भी प्रभावशाली नहीं है। इसलिए, मेरा सुझाव है कि आप वीडियो पाठ्यक्रमों के माध्यम से मूल बातें सीखें। नीचे मैंने लिंक दिए हैं, उन पर क्लिक करके आप मुफ्त एचटीएमएल और सीएसएस पाठ डाउनलोड कर सकते हैं। वे आपको तेजी से अच्छे परिणाम प्राप्त करने की अनुमति देते हैं। इसके अलावा, पढ़ने के लिए दिलचस्प वीडियो देखने की तुलना में कहीं अधिक इच्छाशक्ति की आवश्यकता होती है।
- एचटीएमएल - शुरुआती लोगों के लिए पाठ .
- सीएसएस - शुरुआती लोगों के लिए पाठ .
- वेबसाइट लेआउट पर निःशुल्क मिनी-कोर्स .
मैं आपके प्रयासों में सफलता की कामना करता हूं। मुझे यकीन है कि बहुत जल्द आप न केवल अध्ययन करना शुरू कर देंगे, बल्कि ऑनलाइन काम भी करेंगे, और अविश्वसनीय परियोजनाओं को लागू भी करेंगे!
यदि आपको यह लेख पसंद आया है, तो न्यूज़लेटर की सदस्यता लें और अपने कौशल को बेहतर बनाने के लिए अधिक उपयोगी सामग्री प्राप्त करें!