HTML लेआउट तत्व और तकनीकें
वेबसाइटें अक्सर पत्रिका या समाचार पत्र की तरह कई कॉलमों में सामग्री प्रदर्शित करती हैं।
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
HTML में कई शब्दार्थ तत्व शामिल हैं जो एक वेब पेज के विभिन्न भागों को परिभाषित करते हैं:
| HTML5 Semantic Elements | Description |
|---|---|
<header> |
किसी दस्तावेज़ या अनुभाग के लिए शीर्षक परिभाषित करता है |
<nav> |
रूटिंग लिंक के एक सेट को परिभाषित करता है |
<section> |
किसी दस्तावेज़ में एक अनुभाग को परिभाषित करता है |
<article> |
स्वतंत्र, आत्मनिर्भर सामग्री को परिभाषित करता है |
<aside> |
सामग्री को सामग्री से अलग परिभाषित करता है (साइडबार की तरह)। |
<footer> |
किसी दस्तावेज़ या अनुभाग के लिए फ़ुटनोट को परिभाषित करता है |
<details> |
अतिरिक्त विवरण परिभाषित करता है जिसे उपयोगकर्ता खोल और बंद कर सकता है |
<summary> |
<details>तत्व के लिए शीर्षक परिभाषित करता है |
सिमेंटिक तत्वों पर अधिक जानकारी के लिए, हमारे HTML सिमेंटिक्स अध्याय पर जाएँ।
मल्टी-कॉलम लेआउट बनाने के लिए चार अलग-अलग तकनीकें हैं। प्रत्येक तकनीक के अपने फायदे और नुकसान हैं:
यदि आप जल्दी से अपना लेआउट बनाना चाहते हैं, तो आप सीएसएस फ्रेमवर्क का उपयोग कर सकते हैं।
सीएसएस फ्लोट विशेषता का उपयोग करके संपूर्ण वेब लेआउट बनाया जा सकता है।
फ्लेक्सबॉक्स यह सुनिश्चित करता है कि जब पृष्ठ लेआउट को विभिन्न स्क्रीन आकार और डिस्प्ले डिवाइस को स्वीकार करने की आवश्यकता होती है तो तत्व पूर्वानुमानित व्यवहार करते हैं।
सीएसएस ग्रिड लेआउट मॉड्यूल पंक्तियों और स्तंभों के साथ ग्रिड-आधारित लेआउट प्रणाली प्रदान करता है।
यदि आप जल्दी से अपना लेआउट बनाना चाहते हैं, तो आप जैसिफ टीम सीएसएस या बूटस्ट्रैप जैसे सीएसएस फ्रेमवर्क का उपयोग कर सकते हैं।
यहां आप स्क्रैच से या टेम्पलेट का उपयोग करके अपनी वेबसाइट बना सकते हैं। * क्रेडिट कार्ड की आवश्यकता नहीं
सीएसएस फ्लोट विशेषता का उपयोग करके संपूर्ण वेब लेआउट बनाया जा सकता है। फ़्लोट सीखना आसान है - बस याद रखें कि फ़्लोट और स्पष्ट गुण कैसे काम करते हैं।
समस्याएँ:फ़्लोटिंग तत्व दस्तावेज़ प्रवाह से जुड़े होते हैं, जो लचीलेपन को प्रभावित कर सकते हैं।
फ़्लोट पर अधिक जानकारी के लिए हमारा सीएसएस फ़्लोट और क्लियर अध्याय देखें।
फ्लेक्सबॉक्स यह सुनिश्चित करता है कि जब पृष्ठ लेआउट को विभिन्न स्क्रीन आकार और डिस्प्ले डिवाइस को स्वीकार करने की आवश्यकता होती है तो तत्व पूर्वानुमानित व्यवहार करते हैं।
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex: 1 0 200px;
margin: 10px;
}फ्लेक्सबॉक्स पर अधिक जानकारी के लिए हमारे सीएसएस फ्लेक्सबॉक्स अध्याय पर जाएँ।
सीएसएस ग्रिड लेआउट मॉड्यूल पंक्तियों और स्तंभों के साथ एक ग्रिड-आधारित लेआउट सिस्टम प्रदान करता है, जिससे फ्लोट और पोजिशनिंग का उपयोग किए बिना वेब पेज डिजाइन करना आसान हो जाता है।
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-gap: 20px;
}
.header {
grid-column: 1 / -1;
}
.sidebar {
grid-row: 2 / 4;
}सीएसएस ग्रिड पर अधिक जानकारी के लिए हमारा सीएसएस ग्रिड परिचय अध्याय देखें।
अपने ज्ञान का परीक्षण करने के लिए निम्नलिखित अभ्यास आज़माएँ: