लोअरकेस घटक हे वेब पृष्ठाचे ते घटक आहेत जे दुसऱ्या घटकाचा थेट भाग आहेत, उदाहरणार्थ, मजकूर परिच्छेद. ते प्रामुख्याने मजकूर किंवा त्याचे स्वरूप बदलण्यासाठी वापरले जातात तार्किक निवड.
टॅग करा HTML च्या महत्त्वाच्या घटकांपैकी एक आहे आणि दुवे तयार करण्याच्या हेतूने आहे. नाव किंवा href टॅग विशेषतांच्या उपस्थितीवर अवलंबून लिंक किंवा अँकर सेट करते.
फॉन्टच्या ठळकपणाची व्याख्या करते.
टॅग करा सामान्य मजकुराच्या तुलनेत फॉन्ट आकार एकाने वाढवते. HTML मध्ये, फॉन्ट आकार 1 ते 7 पर्यंत अनियंत्रित युनिटमध्ये मोजला जातो, सरासरी डीफॉल्ट मजकूर आकार 3 असतो. अशा प्रकारे, टॅग जोडणे एका पारंपारिक युनिटने मजकूर वाढवते.
टॅग करा
हा टॅग असलेल्या स्थानावर एक नवीन रेषा सेट करते. परिच्छेद टॅग विपरीत
टॅग वापरणे
ओळीच्या आधी रिक्त इंडेंट जोडत नाही.
टॅग करा मजकूरावर जोर देण्याचा हेतू आहे. ब्राउझर हा मजकूर तिर्यकांमध्ये प्रदर्शित करतात.
फॉन्टची इटॅलिक शैली सेट करते.
टॅग करा वेब पृष्ठावर GIF, JPEG किंवा PNG ग्राफिक स्वरूपात प्रतिमा प्रदर्शित करण्यासाठी डिझाइन केलेले. आवश्यक असल्यास, ड्रॉईंगला टॅग लावून दुसऱ्या फाईलची लिंक बनवता येते
कंटेनर मध्ये . या प्रकरणात, प्रतिमेभोवती एक फ्रेम प्रदर्शित केली जाते, जी टॅगमध्ये सीमा="0" विशेषता जोडून काढली जाऊ शकते.
.
टॅग करा सामान्य मजकुराच्या तुलनेत फॉन्ट आकार एकाने कमी करते. त्याची क्रिया टॅग सारखीच आहे , परंतु अगदी उलट कार्य करते.
दस्तऐवजातील इनलाइन घटक परिभाषित करण्यासाठी डिझाइन केलेला सार्वत्रिक टॅग.
टॅग करा मजकूरावर जोर देण्याचा हेतू आहे. ब्राउझर हा मजकूर ठळक अक्षरात प्रदर्शित करतात.
सबस्क्रिप्ट म्हणून फॉन्ट प्रदर्शित करते. मजकूर ओळीच्या उर्वरित वर्णांच्या बेसलाइनच्या खाली स्थित आहे आणि आकार कमी केला आहे - H 2 O.
फॉन्ट सुपरस्क्रिप्ट म्हणून प्रदर्शित करते. त्याची क्रिया समान आहे , परंतु मजकूर मजकूर बेसलाइनच्या वर प्रदर्शित केला जातो - m 2 .
ब्लॉक आणि इनलाइन घटकांमधील फरक खालीलप्रमाणे आहे.
- इनलाइन घटकांमध्ये फक्त डेटा किंवा इतर इनलाइन घटक असू शकतात, तर ब्लॉक घटकांमध्ये इतर ब्लॉक घटक, इनलाइन घटक आणि डेटा असू शकतात. दुसऱ्या शब्दांत, इनलाइन घटक कोणत्याही प्रकारे ब्लॉक घटक संचयित करू शकत नाहीत.
- ब्लॉक घटक नेहमी नवीन ओळीवर सुरू होतात आणि इनलाइन घटक अशा प्रकारे उच्चारले जात नाहीत.
- ब्लॉक घटक ब्राउझर विंडोची संपूर्ण उपलब्ध रुंदी व्यापतात, तर इनलाइन घटक त्यांच्या सामग्री आणि पॅडिंग, मार्जिन आणि बॉर्डर व्हॅल्यूएवढे रुंद असतात.
साहजिकच तुम्ही हेडर घटक आधीच लक्षात घेतले असेल -
आणि परिच्छेद
नवीन ओळ सुरू करा. याचे कारण असे की ते वेगवेगळ्या स्तरावरील ब्लॉक घटकांची उदाहरणे आहेत. ब्राउझर ब्लॉक घटकांना लहान आयताकृती भागात बंदिस्त केल्याप्रमाणे हाताळतात - ब्लॉक जे पृष्ठे बनवतात. डीफॉल्टनुसार, प्रत्येक ब्लॉक घटक नवीन ओळीवर सुरू होतो आणि सामान्यत: रिकाम्या ओळींद्वारे शीर्षस्थानी आणि तळाशी सीमांकित केला जातो.
खालील उदाहरणामध्ये, ब्लॉक घटकांच्या सीमा हिरव्या रंगात हायलाइट केल्या आहेत:
उदाहरण: ब्लॉक आणि इनलाइन घटक
- स्वतः करून पहा"
ब्लॉक घटक मूळ घटकाची संपूर्ण रुंदी घेते आणि वरच्या आणि खाली रिकाम्या ओळींनी बांधलेले असते
ब्लॉक घटक
ने सुरुवात करा नवीन ओळ, ए इनलाइन घटक
ब्लॉक घटक (h2) मूळ घटकाची संपूर्ण रुंदी घेते
आणि वर आणि खाली रिकाम्या रेषांनी बांधलेले आहे
ब्लॉक घटक (p) नवीन ओळीवर सुरू होतो,
ए इनलाइन घटक (ईएम)
नवीन ओळीवर सुरू होत नाही, परंतु परिच्छेदाचा भाग म्हणून राहते
मजकूर कसा दिसतो याकडे लक्ष द्या, ज्याला आम्ही तिर्यक (em) म्हणून चिन्हांकित केले आहे. हे नवीन ओळीवर सुरू होत नाही, परंतु परिच्छेदामध्येच राहते. हे घडते कारण घटक इनलाइन किंवा लोअरकेस आहे. इनलाइन घटक नवीन ओळीवर सुरू होत नाहीत, परंतु ब्लॉक घटकांमध्ये समाविष्ट असतात. इनलाइन घटकांना फक्त त्यांच्यातील सर्व घटक भौतिकरित्या व्यापलेली रुंदी आवश्यक आहे.
ब्लॉक आणि इनलाइन घटकांमधील फरक खालीलप्रमाणे आहे:
- इनलाइन घटक संचयित करू शकत नाहीत ब्लॉक घटक, परंतु फक्त डेटा किंवा इतर इनलाइन घटक असू शकतात.
- ब्लॉक घटक इतर ब्लॉक घटक, इनलाइन घटक, तसेच डेटा असू शकतात.
- ब्लॉक घटक नेहमी नवीन ओळीवर सुरू होतात आणि सामान्यत: वरच्या आणि खालच्या बाजूस बांधलेले असतात रिकाम्या ओळी.
- ब्लॉक घटक संपूर्ण रुंदी घेतात मूळ घटक, उदाहरणार्थ, ब्राउझर विंडो.
- इनलाइन घटक त्यांच्या सामग्रीच्या समान रुंदी तसेच पॅडिंग, मार्जिन आणि सीमा मूल्ये व्यापतात.
ब्लॉक घटकांची उदाहरणे:
-
इनलाइन घटकांची उदाहरणे:
सामान्य घटक
आणिघटक
- हे सामान्य आहे ब्लॉकएक घटक जो एक किंवा अधिक ब्लॉक घटक गट करण्यासाठी वापरला जातो. हे असे सूचित करते की घटक एकत्रितपणे एक विशिष्ट शब्दार्थ एकक बनवतात आणि विचारात घेतले पाहिजे, उदाहरणार्थ, टेबलमध्ये CSS शैली, एक युनिट म्हणून. घटक वापरणेCSS स्टाइल शीट्ससह, तुम्ही तेच देऊ शकाल शैलीकंटेनरमध्ये ठेवलेल्या सर्व घटकांसाठी.तर टॅग
सेवा देते:
- एखाद्या व्यक्तीसाठी कोणतीही सेटिंग्ज लागू करा माहिती ब्लॉकऑनलाइन;
- HTML दस्तऐवजातील मजकूर, प्रतिमा आणि इतर घटकांसाठी कंटेनर व्हा.घटक - हे सामान्य आहे अंगभूतघटक जो इनलाइन घटकांसाठी वापरला जातो जे नवीन रेषा सादर करत नाहीत. घटक फक्त मजकूर आणि इतर इनलाइन घटक असू शकतात (तुम्ही तेथे ब्लॉक घटक ठेवू शकत नाही: शीर्षके, सूची, सामग्री गट घटक इ.).
घटक पासून — लोअरकेस, म्हणजे, यास ब्राउझर विंडोच्या संपूर्ण रुंदीची आवश्यकता नाही, नंतर त्यास फक्त त्यामध्ये असलेल्या सर्व घटकांनी भौतिकरित्या व्यापलेली रुंदी आवश्यक आहे. म्हणून घटक अनेकदा स्वरूपनासाठी वापरले जाते वैयक्तिक शब्दपरिच्छेदाच्या आत.ब्लॉक आणि इनलाइन घटक लेआउट दरम्यान एकमेकांना उत्तम प्रकारे पूरक आहेत, प्रत्येकाने स्वतःचे विशिष्ट स्थान व्यापलेले आहे. परंतु प्रकरणे उद्भवतात जेव्हा या घटकांची वैशिष्ट्ये स्पष्टपणे अपुरी असतात. फोटो गॅलरी अंजीर मध्ये दर्शविली आहे. 3.28 मध्ये मथळ्यासह प्रतिमा समाविष्ट असलेल्या विभागांचा समावेश आहे आणि विभाग क्षैतिजरित्या रांगेत आहेत, संपूर्ण उपलब्ध रुंदी व्यापतात. जेव्हा ब्राउझर विंडो लहान केली जाते, तेव्हा विभाग दुसऱ्या ओळीवर जातात.
तांदूळ. ३.२८. फोटो गॅलरी
तुम्ही विभाग तयार करण्यासाठी टॅग वापरत असल्यास
, ब्लॉक घटक म्हणून ते प्रत्येक वेळी नवीन ओळीवर सुरू होईल. इनलाइन घटकांसाठी, तुम्ही संपूर्ण विभागाचा पार्श्वभूमी रंग सेट करू शकत नाही आणि त्याचे परिमाण सेट करू शकत नाही. अशा प्रकरणांमध्ये सर्वात लोकप्रिय उपाय वापरणे आहे फ्लोट गुणधर्म, ज्याची पुढील भागात चर्चा केली जाईल. आत्तासाठी, मी इनलाइन-ब्लॉक घटकांवर लक्ष केंद्रित करेन, जे इनलाइन आणि ब्लॉक घटकांचे फायदे एकत्र करतात.HTML मध्ये कोणताही टॅग नाही जो इनलाइन-ब्लॉक घटकांना संदर्भित करतो;
Div (प्रदर्शन: इनलाइन-ब्लॉक;)
या घटकांची वैशिष्ट्ये खालीलप्रमाणे आहेत.
- इनलाइन-ब्लॉक घटकांमध्ये मजकूर, इनलाइन किंवा ब्लॉक घटक ठेवण्याची परवानगी आहे.
- ब्लॉकच्या सामग्रीवर आधारित ब्राउझरद्वारे घटकाची उंची स्वयंचलितपणे मोजली जाते.
- रुंदी सामग्री आणि पॅडिंग, मार्जिन आणि सीमा मूल्यांच्या समान आहे.
- अनेक सलग घटक एका ओळीवर ठेवले जातात आणि आवश्यक असल्यास दुसऱ्या ओळीवर हस्तांतरित केले जातात.
- अनुलंब-संरेखित गुणधर्म वापरून अनुलंब संरेखित केले जाऊ शकते.
- रुंदी आणि उंची सेट करण्याची परवानगी आहे.
- मार्जिन कोलॅप्सिंग इफेक्ट काम करत नाही.
अंजीर मध्ये दर्शविलेली गॅलरी तयार करण्यासाठी. टॅगसाठी 3.28
तुम्ही डिस्प्ले व्हॅल्यू इनलाइन-ब्लॉकवर सेट करावी आणि टॅगद्वारे त्यामध्ये इमेज आणि मथळा जोडा(उदाहरण ३.१८).
उदाहरण 3.18. डिस्प्ले वापरणे
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
गॅलरी 
सेंट सोफिया कॅथेड्रल
पोलिश चर्च
व्यापारी क्लब
सेंट व्लादिमीरचे स्मारक
सर्व फोटो असल्याने समान आकार, ब्लॉकची रुंदी स्पष्टपणे सेट केली आहे आणि 150px इतकी आहे, परंतु उंची निर्दिष्ट केलेली नाही, म्हणून, चित्राला दीर्घ मथळ्यासह, विभागांची उंची भिन्न असेल (चित्र 3.29).
तांदूळ. ३.२९. भिन्न विभाग उंची
ही समस्या नाही, कारण भिन्न उंची असूनही विभाग व्यवस्थित पंक्तींमध्ये दिसतील. या प्रकरणात, फोटो वर्गामध्ये ही गुणधर्म जोडून तुम्ही अनुलंब-संरेखित करून संरेखन प्रकार बदलू शकता. तुम्ही व्हॅल्यू टॉप निर्दिष्ट केल्यास, विभागांचे प्रदर्शन बदलेल (चित्र 3.30).
तांदूळ. ३.३०. शीर्ष संरेखन
मुख्य समस्या म्हणजे IE ब्राउझरची आवृत्ती ७.० पर्यंतचा समावेश आहे. हा ब्राउझर फक्त इनलाइन घटकांवर इनलाइन-ब्लॉक लागू करतो आणि ब्लॉक घटकांसह योग्यरित्या कार्य करत नाही. या ब्राउझरला आमचे उदाहरण योग्यरित्या प्रदर्शित करण्यासाठी पटवून देण्यासाठी, आम्हाला इनलाइन-ब्लॉक ऐवजी इनलाइन मूल्य वापरणे आवश्यक आहे आणि hasLayout गुणधर्म सेट करणे आवश्यक आहे. इनलाइन जोडल्याने इतर ब्राउझरमधील लेआउट खंडित होईल, म्हणून योग्य निर्णयफायदा घेईल सशर्त टिप्पण्या(उदाहरण ३.१९).
उदाहरण 3.19. IE साठी शैली
डिझाइन म्हणजे लागू करणे निर्दिष्ट कोड IE ब्राउझर आवृत्ती 7.0 आणि खालच्या आवृत्तीसाठी. इतर ब्राउझर त्याला एक टिप्पणी मानतात आणि त्याकडे दुर्लक्ष करतात. झूम मालमत्तेसाठी, ते मानक नसलेले आहे आणि hasLayout गुणधर्म सेट करण्याच्या उद्देशाने आहे, जे थेट सेट केले जाऊ शकत नाही.
ऑनलाइन स्टोअरमध्ये आढळणाऱ्या विविध उत्पादनांच्या कॅटलॉगसाठी इनलाइन ब्लॉक घटक वापरणे देखील सोयीचे आहे. ते सहसा चित्र आणि मथळ्यासह प्रदर्शित केले जातात. हे सर्व वर बनवलेल्या गॅलरीसारखेच आहे, त्यामुळे उंची संरेखन आणि IE वर्तन (उदाहरण 3.20) विचारात घेऊन, त्याच्या कोडमध्ये बदल करणे बाकी आहे.
उदाहरण 3.20. कॅटलॉग
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
कॅटलॉग 
व्हिडिओ 1856
फोटो 315
मोबाइल उपकरणे 2109
संगणक आणि कार्यालयीन उपकरणे 4296
घरगुती उपकरणे 731
परिणाम हे उदाहरणअंजीर मध्ये दर्शविले आहे. ३.३१.
तांदूळ. ३.३१. कॅटलॉग
प्रत्येक टॅग विचारू नये म्हणून
, ज्यापैकी बरेच काही असू शकते, उदाहरणामध्ये तुमचा स्वतःचा वर्ग ओळखला जातोअभिज्ञापक कॅटलॉगसह आणि त्यामधील टॅगवर शैली लागू केली जाते.एचटीएमएल ( हायपरटेक्स्ट मार्कअप भाषा) घटक ऐतिहासिकदृष्ट्या एकतर "ब्लॉक-लेव्हल" घटक किंवा "इनलाइन" घटक म्हणून वर्गीकृत केले गेले. डीफॉल्टनुसार, ब्लॉक-स्तरीय घटक त्याच्या मूळ घटकाची (कंटेनर) संपूर्ण जागा व्यापतो, ज्यामुळे "ब्लॉक" तयार होतो. याचा अर्थ काय हे स्पष्ट करण्यात हा लेख मदत करतो.
ब्राउझर सामान्यत: घटकाच्या आधी आणि नंतर दोन्ही नवीन लाइनसह ब्लॉक-स्तरीय घटक प्रदर्शित करतात. तुम्ही त्यांना बॉक्सच्या स्टॅकच्या रूपात कल्पना करू शकता.
ब्लॉक-स्तरीय घटक नेहमी नवीन ओळीवर सुरू होतो आणि उपलब्ध पूर्ण रुंदी घेतो (जितके शक्य असेल तितके डावीकडे आणि उजवीकडे पसरते).
खालील उदाहरण ब्लॉक-स्तरीय घटकाचा प्रभाव दाखवते:
ब्लॉक-स्तरीय घटक
HTML
हा परिच्छेद ब्लॉक-स्तरीय घटक आहे; परिच्छेदाचा मूळ घटक प्रदर्शित करण्यासाठी त्याची पार्श्वभूमी रंगीत केली गेली आहे.
CSS
p ( पार्श्वभूमी-रंग: #8ABB55; )वापर
- ब्लॉक-स्तरीय घटक केवळ घटकामध्ये दिसू शकतात.
ब्लॉक-स्तरीय वि. इनलाइन
ब्लॉक-स्तरीय घटक आणि इनलाइन घटकांमध्ये दोन मुख्य फरक आहेत:
सामग्री मॉडेल सामान्यतः, ब्लॉक-स्तरीय घटकांमध्ये इनलाइन घटक आणि (कधी कधी) इतर ब्लॉक-स्तरीय घटक असू शकतात. या स्ट्रक्चरल भेदामध्ये अंतर्निहित कल्पना आहे की ब्लॉक घटक इनलाइन घटकांपेक्षा "मोठ्या" रचना तयार करतात. डीफॉल्ट स्वरूपन डीफॉल्टनुसार, ब्लॉक-स्तरीय घटक नवीन ओळींवर सुरू होतात, परंतु इनलाइन घटक एका ओळीत कुठेही सुरू होऊ शकतात.
घटक
खालील सर्व HTML "ब्लॉक-लेव्हल" घटकांची संपूर्ण यादी आहे (जरी HTML5 मध्ये नवीन असलेल्या घटकांसाठी "ब्लॉक-लेव्हल" तांत्रिकदृष्ट्या परिभाषित केलेले नाही).
Contact information. !} Article content. element represents a portion of a document whose content is only indirectly related to the document" s main content.> Aside content. Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the !} घटक.">
लांब ("ब्लॉक") अवतरण. !}
प्रकटीकरण विजेट. घटक डायलॉग बॉक्स किंवा इतर परस्परसंवादी घटक, जसे की निरीक्षक किंवा विंडोचे प्रतिनिधित्व करतो.">