HTML और CSS के लिए शुरुआती गाइड

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

बुनियादी बातों का परिचय

यह HTML और CSS के लिए एक शुरुआती गाइड है जो आपको यथासंभव जल्दी एक साधारण साइट बनाने का तरीका दिखाएगा। परिणाम जरूरी नहीं कि "मानक-अनुपालक" हों। और यदि आप इसे आगे tweak और विस्तार करना चाहते हैं तो आपको अपने दम पर कुछ पढ़ना होगा। लेकिन यह एक साइट होगी और अधिकांश ब्राउज़रों में "जैसा होना चाहिए" वैसा ही काम करेगी।

चूंकि स्थान प्रीमियम पर है, हम वेब विकास और डिजाइन के हर पहलू में बहुत गहराई से नहीं जाएंगे। इसके बजाय, हम आपको शून्य से पूरी तरह से काम करने वाले वेबपेज तक जाने के चरणों के माध्यम से ले जाएंगे, इस प्रक्रिया में सब कुछ क्या करता है यह समझाते हुए।

दो आवश्यक फाइलें

एक आधुनिक साइट में कई फाइलें होती हैं, लेकिन दो सबसे आवश्यक हैं: एक HTML और एक CSS फाइल। HTML फाइल एक पेज के तत्वों और संरचना को परिभाषित करती है। CSS फाइल उन तत्वों की उपस्थिति को परिभाषित करती है।

दोनों अनिवार्य रूप से विशिष्ट रूप से संरचित टेक्स्ट वाली विशिष्ट टेक्स्ट फाइलें हैं। आपको उन्हें बनाने या tweak करने के लिए किसी विशेष प्रकार के प्रोग्राम की आवश्यकता नहीं है: कोई भी "सरल" टेक्स्ट एडिटर करेगा। "सरल" से, हमारा मतलब आपके विशिष्ट नोटपैड-शैली के एप्लिकेशन से है, न कि LibreOffice के एडिटर या Microsoft Word जैसी किसी चीज़ से जो किसी भी तरह से टेक्स्ट को "समृद्ध" कर सके।

पहला चरण अपने डेस्कटॉप पर दो खाली टेक्स्ट फाइलों के साथ एक नया फोल्डर बनाना है। उनमें से एक का नाम "index.html" और दूसरे का "style.css" रखें।

अपना कार्यक्षेत्र सेट करें

अपना पसंदीदा ब्राउज़र चलाएं और HTML फाइल को इसमें लोड करें, या तो "File -> Open" चुनकर या इसकी विंडो में फाइल को ड्रैग एंड ड्रॉप करके।

HTML और CSS फाइल दोनों को अपने पसंदीदा नोटपैड-प्रकार के टेक्स्ट एडिटर में खोलें।

एक ही समय में सभी तीन विंडो को देखने में सक्षम होना काम करने का सबसे सुविधाजनक तरीका है। यदि आपके पास उन्हें फैलाने के लिए दो स्क्रीन नहीं हैं, तो हम नीचे हमारी तस्वीर की तरह विंडो की व्यवस्था करने की सलाह देते हैं।

अपनी ब्राउज़र विंडो को स्क्रीन के एक तरफ "चिपकाएं" ताकि यह आधा (लंबवत) घेर ले और दो नोटपैड विंडो को दूसरी तरफ रखें, एक दूसरे के नीचे।

बिल्डिंग ब्लॉक्स

HTML फाइल वाले नोटपैड पर कुछ लिखें और परिवर्तनों को सेव करें। अगला, F5 दबाकर अपनी ब्राउज़र विंडो को रीफ्रेश करें। आप तुरंत अपने ब्राउज़र विंडो में आपके द्वारा लिखा गया टेक्स्ट देखेंगे।

अपनी पहली साइट सेट करने पर बधाई! और हम मजाक नहीं कर रहे हैं, क्योंकि इंटरनेट पर पहली साइटें उनके स्वरूप में आपके द्वारा अभी बनाई गई चीज़ से बहुत अलग नहीं थीं। उस समय, महत्वपूर्ण बात सामग्री ही थी।

HTML आपको "यह चिह्नित करने देता है कि सामग्री का प्रत्येक टुकड़ा क्या है," "कोड" के एक विशिष्ट सेट का उपयोग करके। कुछ सबसे महत्वपूर्ण हैं:

• html: एक HTML दस्तावेज़ को दर्शाता है। प्रत्येक HTML फाइल की शुरुआत में होना चाहिए।
• body: ब्राउज़र पर आपके द्वारा देखी जाने वाली सभी सामग्री इस body टैग में संलग्न है। यह एक HTML दस्तावेज़ के दृश्य पहलू का प्रतिनिधित्व करता है।
• p: टेक्स्ट पैराग्राफ
• img: इमेज
• a href: वेब पते के लिंक
• div: किसी भी सामग्री के टुकड़े के चारों ओर एक "बॉक्स" सेट करता है जिसे आप CSS के साथ "स्टाइल" कर सकते हैं।

सामग्री के एक टुकड़े को "परिभाषित" करने के लिए, इसे आमतौर पर शुरुआत और अंत में मामूली अंतर के साथ उसी कोड से संलग्न करना होता है। उदाहरण के लिए, टेक्स्ट का एक पैराग्राफ इस प्रकार परिभाषित किया जाता है:

<p>Standard Text Paragraph</p>

"<p>" इंगित करता है कि "क्या अनुसरण करता है एक पैराग्राफ है" और "</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" बॉक्स बनाए हैं। उनमें से प्रत्येक में शब्दों में से एक है।

CSS के माध्यम से उनकी उपस्थिति को परिभाषित करने में सक्षम होने के लिए, हमने प्रत्येक को एक कीवर्ड सौंपा, एक "पहचान" ("कोड में id=name"), उनकी सामग्री के अनुरूप: header, content, और footer। एक वेबपेज में सभी तत्वों में ऐसा उपनाम हो सकता है, जिसे या तो "class" या "id" के रूप में सेट किया जाता है। Classes उन वस्तुओं के लिए उपनाम परिभाषित करती हैं जो एक ही वेबपेज पर कई बार दिखाई देते हैं, जैसे पैराग्राफ, लिंक, आदि। IDs उन तत्वों के लिए उपनाम परिभाषित करते हैं जो प्रत्येक पेज में केवल एक बार दिखाई देते हैं, जैसे साइट का नाम या लोगो।

वास्तविक सामग्री

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

"CONTENT" के लिए भी ऐसा ही करें, लेकिन केवल टेक्स्ट दर्ज करने के बजाय, यह भी सुनिश्चित करें कि प्रत्येक पैराग्राफ की शुरुआत और अंत को "चिह्नित" करें जैसा कि हमने पहले देखा था। "CONTENT" को दो या तीन पैराग्राफ टेक्स्ट से बदलें।

अब लिंक के बारे में बात करने का समय भी है। अपने टेक्स्ट में किसी भी वाक्यांश को लिंक में बदलने के लिए, इसे इस प्रकार संरचित करें:

<a href="ADDRESS">TEXT</a>

आप इसे कॉपी-पेस्ट कर सकते हैं और "ADDRESS" को "आप अपने लिंक को किस ओर इंगित करना चाहते हैं" से और "TEXT" को उस वाक्यांश से बदल सकते हैं जो आपकी साइट में दिखाई देगा। हमने अपने फुटर में एक वाक्यांश को अपनी वेबसाइट से निम्नलिखित के साथ लिंक किया:

<a href="https://www.maketecheasier.com">Make Tech Easier</a>

अंत में, "FOOTER" शब्द को अपने नाम से, एक छोटे वाक्य से जो इंगित करता है कि साइट को किसने डिज़ाइन किया या इसका मालिक है, या कुछ और जो आप चाहते हैं, से बदलें।

परिवर्तनों को सेव करें और उन्हें वहां देखने के लिए अपना ब्राउज़र रीफ्रेश करें।

आपको Style (.CSS) मिल गया है

किसी भी वेब पेज का पहला तत्व head है। इसमें, हम आमतौर पर कोड पाते हैं जो साइट की पहचान, इसका नाम, निर्माता, और भाषा, साथ ही HTML के अलावा इसमें उपयोग की जाने वाली किसी भी तकनीक को परिभाषित करता है। यहीं पर अधिकांश बाहरी JavaScript और CSS फाइलों के लिंक रहते हैं। अपने HTML फाइल के सबसे ऊपर, html टैग के ठीक बाद निम्नलिखित डालकर एक को अपनी साइट पर जोड़ें:

<head> </head>

CSS के साथ वेबपेज के तत्वों को स्टाइल करने में सक्षम होने के लिए, आपको HTML के अंदर से CSS फाइल लोड करने की आवश्यकता होगी। और इसका मतलब है इसे अपने "head" में शामिल करना। निम्नलिखित इंगित करता है कि HTML पेज "stylesheet" फाइल से "लिंक" करेगा, प्रकार "text/css" का, नाम "style.css":

<link rel="stylesheet" type="text/css" href="style.css">

हमारा कोड कॉपी और पेस्ट करें, ठीक जैसा आप देखते हैं, "head" के "अंदर" - यानी, "”" के नीचे और "”" के ऊपर। परिवर्तनों को सेव करें और अपना ध्यान CSS फाइल पर केंद्रित करें। वहां, निम्नलिखित दर्ज करें:

body {} #header, #content, #footer {} #header, #footer {} #header {} #content {} #footer {} img {}

वास्तविक साइट

CSS, या Cascading Style Sheets, बस डिस्प्ले नियमों के सेट हैं जो वेब पेज के विशिष्ट तत्वों से मेल खाते हैं। CSS के साथ हम "कहां" और "कैसे" सब कुछ एक वेबपेज पर दिखाई देगा, दोनों को स्टाइल कर सकते हैं।

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

body से शुरू करें, जिसमें आपकी वेबसाइट पर सब कुछ शामिल है। इसे निम्नानुसार संशोधित करें:

body { width: 100%; position: relative; margin: 0; padding: 0; }

उपरोक्त नियम कहते हैं कि हम चाहते हैं कि हमारी साइट ब्राउज़र विंडो की पूरी चौड़ाई पर कब्जा करे (width: 100%), कि हम नहीं चाहते कि इसकी ब्राउज़र विंडो के किनारों से कोई दूरी हो (margin: 0), और इसके चारों ओर कोई खाली स्थान न हो (padding: 0)।

एक तत्व के सभी नियमों को कोष्ठक के बीच संलग्न किया जाना चाहिए, और प्रत्येक नियम को ";" के साथ समाप्त होना चाहिए जैसे निम्नलिखित:

#Element_ID { RULE 1; RULE 2; RULE 3; }

अपने "#header, #content, #footer" CSS को निम्नलिखित में अपडेट करके जारी रखें:

#header, #content, #footer { float: left; position: relative; }

इसके साथ, आप कह रहे हैं कि सभी तीन तत्वों की स्थिति कुछ सामान्य नियमों का पालन करना चाहिए: प्रत्येक पिछले एक के सापेक्ष "relative" होना चाहिए और इसका "अनुसरण" करना चाहिए (float: left)। उनके आकार, आकार, उपस्थिति, या किसी अन्य कारक की परवाह किए बिना, उनमें से प्रत्येक अगले तत्व को "धक्का" देगा, और वे कभी ओवरलैप नहीं होंगे।

अपनी वेबपेज को वास्तविक साइट की तरह दिखाने के लिए #header, #footer को निम्नलिखित से अपडेट करें:

#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 और केंद्रित हो।

background और color नियम क्रमशः निर्दिष्ट करते हैं, पूरे हेडर और फुटर "डिव बॉक्स" का रंग क्या होगा और उनमें निहित किसी भी टेक्स्ट का रंग। "RGBA" लाल-हरा-नीला रंग मिश्रण मानक के आधार पर रंग सेट करता है। प्रत्येक रंग का मान 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" किसी भी इमेज का "स्थान" और फ़ाइल नाम है, जो ऑनलाइन या स्थानीय रूप से उपलब्ध है, और "TEXT" एक्सेसिबिलिटी उद्देश्यों के लिए यह क्या दर्शाता है इसका विवरण।

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

CSS फाइल पर वापस जाएं और घोषित करें कि आप सभी इमेज (img) को बाएं-संरेखित कैसे चाहते हैं, अन्य तत्वों के प्रवाह का अनुसरण करते हुए (float: left और position: relative)।

पेज की सीमाओं से अधिक न होने के लिए, निर्दिष्ट करें कि आप उनकी चौड़ाई को पेज की अधिकतम (width: 100%) कैसे चाहते हैं। इमेज को आपके टेक्स्ट को छूने से बचने के लिए, ऊपर और नीचे कुछ वर्टिकल मार्जिन जोड़ें। परिणाम इस तरह दिखना चाहिए:

img { float: left; position: relative; width: 100%; margin: 5px 0; padding: 0; }

एक और इमेज जोड़कर पूरा करें, इस बार बाएं या दाएं संरेखित। जैसा पहले, आपको पहले HTML कोड पर वापस जाना चाहिए और वहां अपनी इमेज का लिंक पेस्ट करना चाहिए, जैसा हमने पहले देखा था। अंतर यह है कि आपको तत्व में एक "class", एक पहचानकर्ता जोड़ना होगा। फिर आप CSS डिस्प्ले नियमों को उस पर और किसी भी अन्य तत्व पर निर्दिष्ट करेंगे जहां वही class "संलग्न" है।

हमने अपनी class का नाम "alignright" रखा क्योंकि हम चाहते हैं कि जहां भी यह संलग्न हो, कोई भी वस्तु पेज के दाईं ओर प्रदर्शित हो।

कोड स्वयं बनाने का प्रयास करें। अपने "style.css" में एक .alignright {} class जोड़ें, और फिर नियम बनाएं जो इसे स्टाइल करें। CSS कोड को निर्दिष्ट करना चाहिए कि हम तत्वों को पेज के दाईं ओर फ्लोट करना चाहते हैं और 46% चौड़े हों (width: 46%)। हम नहीं चाहते कि इमेज टेक्स्ट को छुए, इसलिए हमें उनके चारों ओर 2% गैप भी जोड़ना चाहिए, जिसे 1% मार्जिन (किसी अन्य तत्व से दूरी) और 1% पैडिंग (तत्व के चारों ओर "कुछ अतिरिक्त खाली स्थान") के रूप में विभाजित किया गया है।

इस प्रकार, हमारे नियमों को परिभाषित करना चाहिए कि .alignright class के साथ संलग्न कोई भी इमेज पेज की चौड़ाई का 46% लेगा, साथ ही प्रत्येक तरफ 1% मार्जिन, साथ ही प्रत्येक तरफ 1% पैडिंग। यह सब 50% तक जुड़ जाता है - पेज की चौड़ाई का ठीक आधा। परिणाम कुछ इस तरह दिखना चाहिए:

img.alignright { float: right; width: 46%; margin: 1%; padding: 1%; }

अगला पेज

आपका पहला वेबपेज तैयार और पूरी तरह से चालू है। HTML और CSS दोनों के बारे में अधिक सीखकर, आप इसकी सामग्री को और समृद्ध कर सकते हैं, नए तत्व जोड़ सकते हैं, और इसकी उपस्थिति में सुधार कर सकते हैं। अगले चरण के रूप में, HTML फाइल को कॉपी और रीनेम करने का प्रयास करें, इसकी सामग्री को संशोधित करें और प्रत्येक नए पेज को दूसरों से लिंक करें।

यह बहुत कठिन नहीं लगता, है ना? वेब विकास में आपका स्वागत है: विभिन्न पेजों को कॉपी, संशोधित और लिंक के माध्यम से जोड़कर, आपने अपनी पहली पूर्ण, "उचित," बहु-पृष्ठ साइट बना ली होगी!