22 KiB
टेरॅरियम प्रकल्प भाग 1: HTML ची ओळख
स्केच नोट Tomomi Imura यांनी तयार केलेली
व्याख्यानपूर्व प्रश्नमंजुषा
व्हिडिओ पहा
परिचय
HTML, म्हणजेच हायपरटेक्स्ट मार्कअप लँग्वेज, वेबचे 'संकल्पना' आहे. जर CSS तुमच्या HTML ला सजवते आणि JavaScript त्याला जिवंत करते, तर HTML तुमच्या वेब अनुप्रयोगाचे शरीर आहे. HTML चे सिंटॅक्स देखील याच कल्पनेला प्रतिबिंबित करते, कारण त्यात "head", "body", आणि "footer" टॅग्स असतात.
या धड्यात, आपण HTML चा वापर करून आपल्या आभासी टेरॅरियमच्या इंटरफेसचा 'संकल्पना' तयार करू. यात एक शीर्षक आणि तीन स्तंभ असतील: उजवीकडील आणि डावीकडील स्तंभ जिथे ड्रॅग करण्यायोग्य झाडे असतील, आणि मध्यभागी एक क्षेत्र असेल जे खरे काचेच्या टेरॅरियमसारखे दिसेल. या धड्याच्या शेवटी, तुम्हाला स्तंभांमध्ये झाडे दिसतील, पण इंटरफेस थोडा विचित्र दिसेल; काळजी करू नका, पुढील विभागात तुम्ही CSS शैली जोडून इंटरफेस अधिक चांगला बनवाल.
कार्य
तुमच्या संगणकावर 'terrarium' नावाचा फोल्डर तयार करा आणि त्यात 'index.html' नावाची फाईल तयार करा. तुम्ही Visual Studio Code मध्ये तुमचा टेरॅरियम फोल्डर तयार केल्यानंतर नवीन VS Code विंडो उघडून, 'open folder' वर क्लिक करून, तुमच्या नवीन फोल्डरकडे नेव्हिगेट करून हे करू शकता. Explorer पॅनमधील लहान 'file' बटणावर क्लिक करा आणि नवीन फाईल तयार करा:
किंवा
तुमच्या git bash वर हे आदेश वापरा:
mkdir terrariumcd terrariumtouch index.htmlcode index.htmlकिंवाnano index.html
index.html फाईल्स ब्राउझरला सूचित करतात की ती फोल्डरमधील डीफॉल्ट फाईल आहे; जसे की
https://anysite.com/testसारख्या URL मध्येtestनावाचा फोल्डर आणि त्यातindex.htmlअसू शकतो; URL मध्येindex.htmlदिसण्याची गरज नाही.
DocType आणि html टॅग्स
HTML फाईलची पहिली ओळ म्हणजे तिचा डोकटाइप. हे थोडे आश्चर्यकारक आहे की ही ओळ फाईलच्या अगदी वर असणे आवश्यक आहे, परंतु हे जुन्या ब्राउझरना सांगते की पृष्ठ सध्याच्या HTML स्पेसिफिकेशनचे अनुसरण करून स्टँडर्ड मोडमध्ये रेंडर करणे आवश्यक आहे.
टिप: VS Code मध्ये, तुम्ही टॅगवर होवर करू शकता आणि MDN संदर्भ मार्गदर्शकांमधून त्याच्या वापराबद्दल माहिती मिळवू शकता.
दुसरी ओळ <html> टॅगची ओपनिंग टॅग असावी, आणि त्यानंतर लगेच त्याचा क्लोजिंग टॅग </html> असावा. हे टॅग्स तुमच्या इंटरफेसचे मूळ घटक आहेत.
कार्य
तुमच्या index.html फाईलच्या वरच्या भागात या ओळी जोडा:
<!DOCTYPE html>
<html></html>
✅ DocType सेट करून काही वेगवेगळे मोड्स ठरवले जाऊ शकतात: Quirks Mode आणि Standards Mode. हे मोड्स खूप जुने ब्राउझर (Netscape Navigator 4 आणि Internet Explorer 5) समर्थित करण्यासाठी वापरले जात होते, जे आजकाल सामान्यतः वापरले जात नाहीत. तुम्ही स्टँडर्ड डोकटाइप डिक्लेरेशन वापरू शकता.
दस्तऐवजाचा 'head'
HTML दस्तऐवजाचा 'head' भाग तुमच्या वेब पृष्ठाबद्दल महत्त्वाची माहिती समाविष्ट करतो, ज्याला metadata असेही म्हणतात. आपल्या प्रकरणात, आपण वेब सर्व्हरला सांगतो की हे पृष्ठ रेंडर करण्यासाठी पाठवले जाईल, या चार गोष्टी:
- पृष्ठाचे शीर्षक
- पृष्ठ मेटाडेटा ज्यामध्ये:
- 'character set', पृष्ठात कोणते अक्षर एन्कोडिंग वापरले आहे हे सांगते
- ब्राउझर माहिती, ज्यामध्ये
x-ua-compatibleसमाविष्ट आहे जे IE=edge ब्राउझर समर्थित असल्याचे दर्शवते - पृष्ठ लोड झाल्यावर viewport कसे वागावे याबद्दलची माहिती. viewport ला प्रारंभिक स्केल 1 वर सेट करणे पृष्ठ लोड झाल्यावर झूम स्तर नियंत्रित करते.
कार्य
तुमच्या दस्तऐवजामध्ये <html> टॅगच्या ओपनिंग आणि क्लोजिंग टॅग्सच्या दरम्यान 'head' ब्लॉक जोडा.
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
✅ जर तुम्ही viewport meta टॅग असे सेट केले: <meta name="viewport" content="width=600">, तर काय होईल? viewport बद्दल अधिक वाचा.
दस्तऐवजाचा body
HTML टॅग्स
HTML मध्ये, तुम्ही तुमच्या .html फाईलमध्ये टॅग्स जोडून वेब पृष्ठाचे घटक तयार करता. प्रत्येक टॅगमध्ये सामान्यतः ओपनिंग आणि क्लोजिंग टॅग असतो, जसे की: <p>hello</p> जे परिच्छेद दर्शवते. तुमच्या इंटरफेसचे शरीर तयार करण्यासाठी <html> टॅगच्या जोडीच्या आत <body> टॅग्सचा संच जोडा; तुमचे मार्कअप आता असे दिसते:
कार्य
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body></body>
</html>
आता, तुम्ही तुमचे पृष्ठ तयार करणे सुरू करू शकता. सामान्यतः, तुम्ही पृष्ठातील वेगवेगळ्या घटकांसाठी <div> टॅग्स वापरता. आपण प्रतिमांचा संच असलेले <div> घटक तयार करू.
प्रतिमा
एक HTML टॅग ज्याला क्लोजिंग टॅगची गरज नाही तो म्हणजे <img> टॅग, कारण त्यात src घटक असतो जो पृष्ठाला आयटम रेंडर करण्यासाठी आवश्यक असलेली सर्व माहिती प्रदान करतो.
तुमच्या अॅपमध्ये images नावाचा फोल्डर तयार करा आणि त्यात source code folder मधील सर्व प्रतिमा जोडा; (झाडांच्या 14 प्रतिमा आहेत).
कार्य
त्या झाडांच्या प्रतिमा <body></body> टॅग्सच्या दरम्यान दोन स्तंभांमध्ये जोडा:
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
</div>
</div>
</div>
टीप: स्पॅन वि. डिव्ह. डिव्ह 'ब्लॉक' घटक मानले जातात, आणि स्पॅन 'इनलाइन'. जर तुम्ही या डिव्हला स्पॅनमध्ये रूपांतरित केले तर काय होईल?
या मार्कअपसह, झाडे आता स्क्रीनवर दिसतात. हे खूप वाईट दिसते, कारण त्यांना अद्याप CSS वापरून शैली दिलेली नाही, आणि आपण पुढील धड्यात ते करू.
प्रत्येक प्रतिमेसाठी alt टेक्स्ट असतो जो प्रतिमा दिसत नसल्यास किंवा रेंडर होत नसल्यास दिसतो. हे अॅक्सेसिबिलिटीसाठी समाविष्ट करणे महत्त्वाचे आहे. भविष्यातील धडांमध्ये अॅक्सेसिबिलिटीबद्दल अधिक जाणून घ्या; सध्या, लक्षात ठेवा की alt अॅट्रिब्युट वापरकर्त्यासाठी प्रतिमेची पर्यायी माहिती प्रदान करते जर काही कारणास्तव प्रतिमा पाहता येत नसेल (मंद कनेक्शन, src अॅट्रिब्युटमधील त्रुटी, किंवा वापरकर्ता स्क्रीन रीडर वापरत असल्यास).
✅ तुम्ही लक्षात घेतले का की प्रत्येक प्रतिमेसाठी एकच alt टॅग आहे? हे चांगले सराव आहे का? का किंवा का नाही? तुम्ही हा कोड सुधारू शकता का?
सेमॅंटिक मार्कअप
सामान्यतः, HTML लिहिताना अर्थपूर्ण 'सेमॅंटिक्स' वापरणे अधिक चांगले असते. याचा अर्थ काय? याचा अर्थ असा की तुम्ही HTML टॅग्सचा वापर डेटा किंवा परस्परसंवादाच्या प्रकाराचे प्रतिनिधित्व करण्यासाठी कराल ज्यासाठी ते डिझाइन केले गेले आहेत. उदाहरणार्थ, पृष्ठावरील मुख्य शीर्षक मजकूरासाठी <h1> टॅग वापरावा.
तुमच्या ओपनिंग <body> टॅगच्या खालील ओळ जोडा:
<h1>My Terrarium</h1>
सेमॅंटिक मार्कअप वापरणे, जसे की हेडर्ससाठी <h1> आणि अनऑर्डर्ड लिस्टसाठी <ul> वापरणे, स्क्रीन रीडर्सना पृष्ठामध्ये नेव्हिगेट करण्यात मदत करते. सामान्यतः, बटणांसाठी <button> लिहिले पाहिजे आणि यादीसाठी <li> वापरले पाहिजे. जरी विशेषतः स्टाइल केलेल्या <span> घटकांसह क्लिक हँडलर्स वापरून बटणांची नक्कल करणे शक्य असले तरी, अपंग वापरकर्त्यांसाठी तंत्रज्ञानाचा वापर करून पृष्ठावर बटण कुठे आहे हे ठरवणे आणि त्यावर परस्परसंवाद करणे चांगले आहे, जर घटक बटण म्हणून दिसत असेल. याच कारणास्तव, शक्य तितक्या सेमॅंटिक मार्कअप वापरण्याचा प्रयत्न करा.
✅ स्क्रीन रीडर कसा वेब पृष्ठाशी संवाद साधतो हे पाहा: स्क्रीन रीडर कसे कार्य करतात. तुम्हाला असे वाटते का की नॉन-सेमॅंटिक मार्कअप वापरल्याने वापरकर्त्याला त्रास होईल?
टेरॅरियम
या इंटरफेसचा शेवटचा भाग म्हणजे टेरॅरियम तयार करण्यासाठी शैली दिले जाणारे मार्कअप तयार करणे.
कार्य:
शेवटच्या </div> टॅगच्या वर हे मार्कअप जोडा:
<div id="terrarium">
<div class="jar-top"></div>
<div class="jar-walls">
<div class="jar-glossy-long"></div>
<div class="jar-glossy-short"></div>
</div>
<div class="dirt"></div>
<div class="jar-bottom"></div>
</div>
✅ जरी तुम्ही स्क्रीनवर हे मार्कअप जोडले असले तरी, तुम्हाला काहीही दिसत नाही. का?
🚀आव्हान
HTML मध्ये काही जुन्या 'मजेशीर' टॅग्स आहेत जे अजूनही वापरण्यास मजेदार आहेत, जरी तुम्ही या टॅग्स सारखे अप्रचलित टॅग्स तुमच्या मार्कअपमध्ये वापरू नयेत. तरीही, तुम्ही <marquee> टॅग वापरून h1 शीर्षक आडवे स्क्रोल करू शकता का? (जर तुम्ही केले, तर नंतर ते काढून टाकायला विसरू नका)
व्याख्यानानंतरची प्रश्नमंजुषा
पुनरावलोकन आणि स्व-अभ्यास
HTML ही 'विश्वासार्ह' बिल्डिंग ब्लॉक प्रणाली आहे ज्यामुळे वेब आजच्या स्थितीत पोहोचला आहे. काही जुने आणि नवीन टॅग्स अभ्यासून त्याचा इतिहास जाणून घ्या. तुम्ही शोधू शकता का की काही टॅग्स का अप्रचलित झाले आणि काही जोडले गेले? भविष्यात कोणते टॅग्स सादर केले जाऊ शकतात?
वेब आणि मोबाइल डिव्हाइससाठी साइट्स तयार करण्याबद्दल अधिक जाणून घ्या Microsoft Learn वर.
असाइनमेंट
तुमच्या HTML चा सराव करा: ब्लॉग मॉकअप तयार करा
अस्वीकरण:
हा दस्तऐवज AI भाषांतर सेवा Co-op Translator वापरून भाषांतरित करण्यात आला आहे. आम्ही अचूकतेसाठी प्रयत्नशील असलो तरी, कृपया लक्षात ठेवा की स्वयंचलित भाषांतरांमध्ये त्रुटी किंवा अचूकतेचा अभाव असू शकतो. मूळ भाषेतील दस्तऐवज हा अधिकृत स्रोत मानला जावा. महत्त्वाच्या माहितीसाठी, व्यावसायिक मानवी भाषांतराची शिफारस केली जाते. या भाषांतराचा वापर करून उद्भवलेल्या कोणत्याही गैरसमज किंवा चुकीच्या अर्थासाठी आम्ही जबाबदार राहणार नाही.