यद्यपि आप आज हमारी साइटों को शक्ति प्रदान करने वाली कई अलग-अलग प्रौद्योगिकियां पा सकते हैं, संपूर्ण इंटरनेट पर दो सबसे महत्वपूर्ण फाइलें HTML और CSS हैं। हां, अगर आपको कुछ जटिल चाहिए, तो आपको उनके साथ जाने के लिए और तकनीकों की भी आवश्यकता होगी। लेकिन अगर आप केवल एक साधारण व्यक्तिगत वेबपेज बनाना चाहते हैं, तो आपको HTML और CSS की आवश्यकता है।
बुनियादी बातों का परिचय
यह HTML और CSS के लिए एक शुरुआती गाइड है जो आपको दिखाएगा कि कैसे जल्दी से जल्दी एक साधारण साइट बनाई जाए। परिणाम अनिवार्य रूप से "मानकों के अनुरूप" नहीं होंगे। और यदि आप इसे और अधिक ट्वीक और विस्तारित करना चाहते हैं तो आपको स्वयं कुछ पढ़ना होगा। लेकिन यह एक साइट होगी और अधिकांश ब्राउज़रों में "जैसा होना चाहिए" काम करेगी।
चूंकि अंतरिक्ष एक प्रीमियम पर है, इसलिए हमने वेब विकास और डिजाइन के हर पहलू में बहुत गहराई तक नहीं जाना है। इसके बजाय, हम आपको शून्य से पूरी तरह से काम करने वाले वेबपेज पर जाने के चरणों के बारे में बताएंगे, यह समझाते हुए कि प्रक्रिया में सब कुछ क्या करता है।
दो आवश्यक फ़ाइलें
एक आधुनिक साइट में कई फाइलें होती हैं, लेकिन दो सबसे जरूरी हैं:एक HTML और एक CSS फ़ाइल। HTML फ़ाइल किसी पृष्ठ के तत्वों और संरचना को परिभाषित करती है। CSS फ़ाइल उन तत्वों की उपस्थिति को परिभाषित करती है।
दोनों अनिवार्य रूप से विशिष्ट पाठ फ़ाइलें हैं, जिनमें विशेष रूप से संरचित पाठ शामिल हैं। उन्हें बनाने या उन्हें ट्वीक करने के लिए आपको किसी विशेष प्रकार के प्रोग्राम की आवश्यकता नहीं है:कोई भी "सरल" टेक्स्ट एडिटर करेगा। "सरल" से हमारा मतलब आपके विशिष्ट नोटपैड-शैली के एप्लिकेशन से है, लिबरऑफिस के संपादक या Microsoft Words जैसा कुछ नहीं जो किसी भी तरह से पाठ को "समृद्ध" कर सके।
पहला कदम अपने डेस्कटॉप पर दो खाली टेक्स्ट फाइलों के साथ एक नया फ़ोल्डर बनाना है। उनमें से एक का नाम "index.html" और दूसरे का "style.css" रखें।
अपना कार्यक्षेत्र सेट करें
अपना पसंदीदा ब्राउज़र चलाएं और उसमें HTML फ़ाइल लोड करें, या तो "फ़ाइल -> खोलें" का चयन करके या फ़ाइल को उसकी विंडो में खींचकर और छोड़ कर।
अपने पसंदीदा नोटपैड-टाइप टेक्स्ट एडिटर में HTML और CSS फ़ाइल दोनों को खोलें।
एक ही समय में तीनों विंडो देखने में सक्षम होना काम करने का सबसे सुविधाजनक तरीका है। यदि आपके पास उन्हें फैलाने के लिए दो स्क्रीन नहीं हैं, तो हम अनुशंसा करते हैं कि नीचे हमारे चित्र की तरह खिड़कियों को व्यवस्थित करें।
अपनी ब्राउज़र विंडो के आधे हिस्से (खड़ी) पर कब्जा करने के लिए स्क्रीन के एक तरफ "स्टिक" करें और दो नोटपैड विंडो को दूसरी तरफ रखें, एक दूसरे के नीचे।
बिल्डिंग ब्लॉक्स
HTML फ़ाइल के साथ नोटपैड पर कुछ लिखें और परिवर्तनों को सहेजें। इसके बाद, F5 दबाकर अपनी ब्राउज़र विंडो को रिफ्रेश करें। आपके द्वारा लिखा गया टेक्स्ट तुरंत आपकी ब्राउज़र विंडो में दिखाई देगा।
बस अपनी पहली साइट स्थापित करने के लिए बधाई! और हम मजाक नहीं कर रहे हैं, क्योंकि इंटरनेट पर पहली साइटें आपके द्वारा अभी बनाई गई चीज़ों की तुलना में उनके स्वरूप में बहुत भिन्न नहीं थीं। महत्वपूर्ण बात, उस समय, सामग्री ही थी।
HTML आपको "कोड" के एक विशिष्ट सेट का उपयोग करके "सामग्री का प्रत्येक भाग क्या है" को चिह्नित करने देता है। कुछ सबसे महत्वपूर्ण हैं:
html:एक html दस्तावेज़ को दर्शाता है। प्रत्येक html फ़ाइल के प्रारंभ में होना चाहिए।body:ब्राउज़र पर आप जो भी सामग्री देखते हैं, वह इसbody. में संलग्न है टैग। यह एक html दस्तावेज़ के दृश्य पहलू का प्रतिनिधित्व करता है।p:टेक्स्ट पैराग्राफimg:छवियांa href:वेब पतों के लिंकdiv:किसी भी सामग्री के चारों ओर एक "बॉक्स" सेट करता है जिसे आप सीएसएस के साथ "शैली" कर सकते हैं।
सामग्री के एक टुकड़े को "परिभाषित" करने के लिए, इसे आमतौर पर शुरुआत और अंत में थोड़े अंतर के साथ एक ही कोड से संलग्न करना पड़ता है। उदाहरण के लिए, टेक्स्ट के पैराग्राफ को इस प्रकार परिभाषित किया गया है:
<p>Standard Text Paragraph</p>
"
" इंगित करता है कि "जो इस प्रकार है वह एक पैराग्राफ है" और "
" कि "पैराग्राफ यहां समाप्त होता है।" दोनों ही मामलों में "p" को "div" से बदलकर, आप "पैराग्राफ के रूप में चिह्नित करने" के बजाय सामग्री को संलग्न करने वाले बॉक्स को परिभाषित करते हैं।ध्यान दें कि अपवाद हैं:इमेज (img) और डिवाइडिंग लाइन (hr) जैसे तत्वों के लिए "क्लोजिंग कोड" की आवश्यकता नहीं होती है।
बदलें और रीफ़्रेश करें
अपनी HTML फ़ाइल की सभी चीज़ों को निम्न से बदलें:
<html> <body> <div id="header">HEADER</div> <div id="content">CONTENT</div> <div id="footer">FOOTER</div> </body> </html>
अपने ब्राउज़र को रीफ़्रेश करें (F5), और आप देखेंगे कि HEADER, CONTENT, और FOOTER शब्द एक के बाद एक दिखाई देंगे। हमने अभी तीन अदृश्य, स्वायत्त "div" बॉक्स बनाए हैं। उनमें से प्रत्येक में एक शब्द है।
सीएसएस के माध्यम से उनकी उपस्थिति को परिभाषित करने में सक्षम होने के लिए, हमने प्रत्येक को एक "पहचान" (कोड में "आईडी =नाम") एक कीवर्ड सौंपा, जो उनकी सामग्री के अनुरूप है:हेडर, सामग्री और पाद लेख। वेबपेज के सभी तत्वों में ऐसा उपनाम हो सकता है, जिसे "वर्ग" या "आईडी" के रूप में सेट किया गया हो। कक्षाएं उन आइटम के लिए उपनाम निर्धारित करती हैं जो एक ही वेबपेज पर कई बार दिखाई देते हैं, जैसे पैराग्राफ, लिंक, आदि। आईडी उन तत्वों के लिए उपनाम निर्धारित करते हैं जो प्रत्येक पृष्ठ में केवल एक बार दिखाई देते हैं, जैसे साइट का नाम या लोगो।
वास्तविक सामग्री
डिव कोड के बीच “HEADER” शब्द हटाएं – उनकी संरचना को बदले बिना – और इसके बजाय, वह नाम दर्ज करें जो आप अपनी साइट के लिए चाहते हैं।
अपनी "सामग्री" के लिए भी ऐसा ही करें, लेकिन केवल पाठ दर्ज करने के बजाय, प्रत्येक पैराग्राफ की शुरुआत और अंत को "चिह्नित" करना सुनिश्चित करें जैसा कि हमने पहले देखा था। "सामग्री" को टेक्स्ट के दो या तीन अनुच्छेदों से बदलें।
अब लिंक के बारे में भी बात करने का समय है। अपने टेक्स्ट के किसी भी वाक्यांश को लिंक में बदलने के लिए, उसकी संरचना इस प्रकार करें:
<a href="ADDRESS">TEXT</a>
आप इसे कॉपी-पेस्ट कर सकते हैं और "ADDRESS" को "आप अपने लिंक को किस ओर इंगित करना चाहते हैं" और "टेक्स्ट" को उस वाक्यांश से बदल सकते हैं जो आपकी साइट पर दिखाई देगा। हमने अपने पाद लेख में एक वाक्यांश को निम्नलिखित के साथ अपनी वेबसाइट से जोड़ा है:
<a href="https://www.maketecheasier.com">Make Tech Easier</a>
अंत में, "FOOTER" शब्द को अपने नाम से बदलें, एक छोटा वाक्य जो दर्शाता है कि साइट को किसने डिज़ाइन किया है या उसका मालिक है या आप जो कुछ भी चाहते हैं।
परिवर्तनों को सहेजें और उन्हें वहां देखने के लिए अपने ब्राउज़र को रीफ़्रेश करें।
आपके पास स्टाइल (.CSS) है
किसी भी वेब पेज का पहला एलिमेंट हेड होता है। इसमें, हमें आमतौर पर वह कोड मिलता है जो साइट की पहचान, उसके नाम, निर्माता और भाषा के साथ-साथ किसी भी तकनीक को परिभाषित करता है - HTML के अलावा - इसमें उपयोग किया जाता है। यह वह जगह है जहां किसी भी बाहरी जावास्क्रिप्ट और सीएसएस फाइलों के अधिकांश लिंक रहते हैं। html के ठीक बाद, अपनी HTML फ़ाइल के शीर्ष पर निम्न को सम्मिलित करके अपनी साइट में एक जोड़ें टैग:
<head> </head>
CSS के साथ वेबपेज के तत्वों को स्टाइल करने में सक्षम होने के लिए, आपको HTML के अंदर से CSS फाइल को लोड करना होगा। और इसका अर्थ है इसे अपने "सिर" में शामिल करना। निम्नलिखित इंगित करता है कि HTML पृष्ठ "टेक्स्ट / सीएसएस" प्रकार की "स्टाइलशीट" फ़ाइल से "लिंक" करेगा। "style.css" नाम दिया गया है:
<link rel="stylesheet" type="text/css" href="style.css">
हमारे कोड को कॉपी और पेस्ट करें, जैसे आप इसे देखते हैं, "अंदर" सिर - यानी "" के नीचे और "" के ऊपर। परिवर्तनों को सहेजें और अपना ध्यान CSS फ़ाइल की ओर मोड़ें। वहां, निम्नलिखित दर्ज करें:
body {}
#header, #content, #footer {}
#header, #footer {}
#header {}
#content {}
#footer {}
img {}
असली साइट
CSS, या कैस्केडिंग स्टाइल शीट्स, केवल प्रदर्शन नियमों के सेट हैं जो किसी वेब पेज के विशिष्ट तत्वों के अनुरूप होते हैं। CSS के साथ हम वेबपेज पर "कहां" और "कैसे" सब कुछ प्रदर्शित कर सकते हैं।
पिछले चरण में हमने अपने पृष्ठ के सभी तत्वों के लिए रिक्त नियमों का एक सेट पेश किया था। अब, देखते हैं कि हम उनमें ऐसे पैरामीटर कैसे जोड़ सकते हैं जो उनके स्वरूप को परिभाषित करेंगे।
शरीर से शुरू करें, जिसमें आपकी वेबसाइट पर सब कुछ शामिल है। इसे इस प्रकार संशोधित करें:
body {
width: 100%;
position: relative;
margin: 0;
padding: 0;
} उपरोक्त नियम बताते हैं कि हम चाहते हैं कि हमारी साइट ब्राउज़र विंडो की पूरी चौड़ाई (चौड़ाई:100%) पर कब्जा कर ले, कि हम नहीं चाहते कि यह ब्राउज़र विंडो के किनारों (मार्जिन:0) से कोई दूरी बनाए, और नहीं इसके चारों ओर कोई खाली जगह चाहिए (पैडिंग:0)।
किसी तत्व के सभी नियम कोष्ठक के बीच संलग्न होने चाहिए, और प्रत्येक नियम ";" के साथ समाप्त होना चाहिए। निम्न की तरह:
#Element_ID {
RULE 1;
RULE 2;
RULE 3;
} अपने “#header, #content, #footer” CSS को निम्न में अपडेट करके जारी रखें:
#header, #content, #footer {
float: left;
position: relative;
}
इसके साथ, आप कह रहे हैं कि तीनों तत्वों की स्थिति को कुछ सामान्य नियमों का पालन करना चाहिए:प्रत्येक को पिछले एक के "सापेक्ष" और "अनुसरण" करना चाहिए (float: left ) कोई फर्क नहीं पड़ता कि उनका आकार, आकार, रूप, या कोई अन्य कारक, उनमें से प्रत्येक अगले तत्व को "धक्का" देगा, और वे कभी भी ओवरलैप नहीं होंगे।
अपने वेबपेज को एक वास्तविक साइट की तरह दिखाने के लिए निम्नलिखित के साथ #हेडर, #फुटर अपडेट करें:
#header, #footer {
width: 100%;
height: 100px;
background: rgba(0,0,0,0.9);
color: rgba(255,255,255,0.9);
text-align: center;
font-size: 12px;
} उपरोक्त परिभाषित करता है कि हम चाहते हैं कि हमारी वेबसाइट का शीर्षलेख और पाद लेख दोनों 100% चौड़ा, 100 पिक्सेल ऊँचा हो, और उनमें प्रदर्शित पाठ 3em आकार का और केंद्रित हो।
पृष्ठभूमि और रंग नियम क्रमशः निर्दिष्ट करते हैं कि पूरे शीर्षलेख और पाद लेख "डिव बॉक्स" में कौन सा रंग होगा और उनमें निहित किसी भी पाठ का रंग होगा। "आरजीबीए" लाल-हरे-नीले रंग मिश्रण मानक के आधार पर रंग सेट करता है। प्रत्येक रंग का मान 0 से 255 तक हो सकता है, जिसमें विभिन्न लाल, हरे और नीले मानों के संयोजन किसी भी रंग के प्रदर्शन की अनुमति देते हैं। अंतिम संख्या पारदर्शिता से मेल खाती है। तो RGBA(255,0,0,0.5) हमें एक पारभासी लाल देगा, जबकि RGBA(50,50,255,1) एक चमकदार और "ठोस" नीला रंग देगा।
साइट की मूल सामग्री पर ध्यान केंद्रित करके समाप्त करें। इसके स्वरूप को इस प्रकार परिभाषित करें:
#content {
width: 80%;
background: rgba(255,255,255,0.9);
color: rgba(0,0,0,0.9);
margin: 0 10%;
} सभी परिवर्तनों को फिर से सहेजें, और उन्हें देखने के लिए अपनी ब्राउज़र विंडो को रीफ़्रेश करें।
इमेज स्टाइलिंग
अपनी साइट पर चित्र जोड़ने के लिए, आपको HTML फ़ाइल पर वापस जाना होगा। वहां, "अंदर" सामग्री लेकिन पहले पैराग्राफ से पहले, निम्नलिखित दर्ज करें:
<img src="/PATH/FILE.JPG" alt="TEXT">
जहां "PATH" और "FILE.JPG" किसी भी छवि का "स्थान" और फ़ाइल नाम है, जो ऑनलाइन या स्थानीय रूप से उपलब्ध है, और "टेक्स्ट" इसका एक विवरण है कि यह एक्सेसिबिलिटी उद्देश्यों के लिए क्या दर्शाता है।
यदि आप इस जोड़ के बाद परिवर्तनों को सहेजने और जाँचने का प्रयास करते हैं, तो आप पाएंगे कि आपकी साइट विकृत हो गई है। आपकी वेबसाइट पर छवियों को कैसे प्रदर्शित किया जाना चाहिए, इस पर सीएसएस नियम बनाने के बाद समस्या ठीक हो जाएगी।
CSS फ़ाइल पर वापस लौटें और घोषित करें कि आप कैसे चाहते हैं कि सभी चित्र (img) अन्य तत्वों के प्रवाह (फ्लोट:लेफ्ट और पोजीशन:रिलेटिव) का अनुसरण करते हुए लेफ्ट-अलाइन हों।
पृष्ठ सीमाओं को पार न करने के लिए, निर्दिष्ट करें कि आप कैसे चाहते हैं कि उनकी चौड़ाई स्वयं पृष्ठ की अधिकतम हो (चौड़ाई:100%)। छवियों को आपके टेक्स्ट को छूने से बचने के लिए, ऊपर और नीचे कुछ लंबवत मार्जिन जोड़ें। परिणाम इस तरह दिखना चाहिए:
img {
float: left;
position: relative;
width: 100%;
margin: 5px 0;
padding: 0;
}
एक और छवि जोड़कर पूरा करें, इस बार बाईं या दाईं ओर संरेखित करें। पहले की तरह, आपको पहले HTML कोड पर वापस जाना चाहिए और वहां अपनी छवि का लिंक पेस्ट करना चाहिए, जैसा कि हमने पहले देखा था। अंतर यह है कि आपको तत्व के लिए एक "वर्ग", एक पहचानकर्ता जोड़ना होगा। फिर आप उस पर सीएसएस डिस्प्ले नियमों और किसी भी अन्य तत्वों के माध्यम से निर्दिष्ट करेंगे जहां एक ही कक्षा "संलग्न" है।
हमने अपनी कक्षा का नाम "संरेखण" रखा है क्योंकि हम चाहते हैं कि कोई भी वस्तु, जहाँ वह संलग्न हो, पृष्ठ के दाईं ओर प्रदर्शित हो।
कोड स्वयं बनाने का प्रयास करें। एक .alignright {} अपने "style.css" में वर्ग बनाएं और फिर ऐसे नियम बनाएं जो इसे शैलीबद्ध करें। CSS कोड को यह निर्दिष्ट करना चाहिए कि हम चाहते हैं कि तत्व पृष्ठ के दाईं ओर तैरें और 46% चौड़ा (चौड़ाई:46%) हो। हम नहीं चाहते कि छवियां टेक्स्ट को स्पर्श करें, इसलिए हमें उनके चारों ओर 2% का अंतर भी जोड़ना चाहिए, 1% मार्जिन (किसी अन्य तत्व से दूरी) और 1% पैडिंग (कुछ “तत्व के चारों ओर अतिरिक्त रिक्त स्थान) के रूप में विभाजित करना चाहिए ”)।
इस प्रकार, हमारे नियमों को परिभाषित करना चाहिए कि .alignright . के साथ कोई भी छवि संलग्न वर्ग पृष्ठ की चौड़ाई का 46%, साथ ही प्रत्येक पक्ष पर 1% मार्जिन, साथ ही प्रत्येक पक्ष पर 1% पैडिंग लेगा। यह सब 50% तक जोड़ता है - पृष्ठ की चौड़ाई का ठीक आधा। परिणाम कुछ इस तरह दिखना चाहिए:
img.alignright {
float: right;
width: 46%;
margin: 1%;
padding: 1%;
} अगला पेज
आपका पहला वेबपेज तैयार है और पूरी तरह से चालू है। HTML और CSS दोनों के बारे में अधिक सीखकर, आप इसकी सामग्री को और समृद्ध कर सकते हैं, नए तत्व जोड़ सकते हैं और इसकी उपस्थिति में सुधार कर सकते हैं। अगले चरण के रूप में, HTML फ़ाइल की प्रतिलिपि बनाने और उसका नाम बदलने, उसकी सामग्री को संशोधित करने और प्रत्येक नए पृष्ठ को दूसरों से जोड़ने का प्रयास करें।
यह बहुत कठिन नहीं लगता, है ना? वेब विकास में आपका स्वागत है:लिंक के माध्यम से विभिन्न पृष्ठों को कॉपी, संशोधित और लिंक करके, आपने अपनी पहली पूर्ण, "उचित," बहु-पृष्ठ साइट बनाई होगी!