Podcast Beta
Questions and Answers
वेब पेज की संरचना और सामग्री को परिभाषित करने के लिए इस्तेमाल किए जाने वाले कीवर्ड या वाक्यांश क्या हैं?
खुला टैग और बंद टैग क्या हैं?
सेमेंटिक एलिमेंट क्या हैं?
रеспॉन्सिव डिजाइन क्या है?
Signup and view all the answers
मीडिया क्वेरीज़ क्या हैं?
Signup and view all the answers
फ्लूイड ग्रिड क्या है?
Signup and view all the answers
सेमेंटिक एलिमेंट के क्या फायदे हैं?
Signup and view all the answers
रеспॉन्सिव डिजाइन के क्या फायदे हैं?
Signup and view all the answers
Study Notes
HTML Tags
- Definition: HTML tags are keywords or phrases surrounded by angle brackets (<>) that define the structure and content of a web page.
-
Types:
-
Opening tags: `` (e.g.,
<p>
) -
Closing tags:
</p>
(e.g., ``) -
Self-closing tags: `` (e.g.,
<br>
)
-
Opening tags: `` (e.g.,
-
Examples:
- Headings:
,
, ``, etc. - Paragraphs:
<p>
- Links:
<a>
- Images: ``
- Lists:
</a></p><a>
,</a><a>
, ``
- Headings:
Semantic Elements
- Definition: HTML semantic elements provide meaning to the structure of a web page, making it easier for search engines and screen readers to understand the content.
-
Examples:
- Headers:
,
, `` - Content sections:
,
, `` - Figures and captions:
,
- Table elements:
,
,,
, ``
- Headers:
-
Benefits:
- Improved search engine optimization (SEO)
- Enhanced accessibility for screen readers and other assistive technologies
- Better code readability and maintainability
Responsive Design
- Definition: Responsive design is an approach to web development that focuses on creating websites that adapt to different screen sizes and devices.
-
Key concepts:
- Media queries: Used to define different styles for different screen sizes and devices
-
Flexible grids and images: Use relative units (e.g.,
%
,em
,rem
) to scale elements - Mobile-first design: Design for small screens first, then add complexity for larger screens
-
Techniques:
- Fluid grids: Use relative units to create flexible grid systems
-
Responsive images: Use
srcset
andsizes
attributes to load appropriate image sizes - Breakpoints: Define specific screen sizes to apply different styles
-
Benefits:
- Improved user experience across different devices and screen sizes
- Increased mobile traffic and engagement
- Better search engine rankings due to improved user experience
HTML टैग
- HTML टैग वेबसाइट की संरचना और सामग्री को परिभाषित करने के लिए कीवर्ड या वाक्यांश हैं जो कोणीय ब्रैकेट्स में घिरे हुए हैं।
- प्रकार:
- ओपनिंग टैग:
<
(उदाहरण: ``) - क्लोजिंग टैग:
(उदाहरण:
) - सेल्फ-क्लोजिंग टैग:
(उदाहरण:
)
- ओपनिंग टैग:
- उदाहरण:
- हेडिंग:
,
, ``, इत्यादि - पैराग्राफ: ``
- लिंक: ``
- इमेज: ``
- सूची:
,
, ``
- हेडिंग:
सेमान्टिक एलिमेंट्स
- सेमान्टिक एलिमेंट्स वेबसाइट की संरचना को अर्थ प्रदान करते हैं, जिससे सर्च इंजन और स्क्रीन रीडर्स के लिए सामग्री को समझना आसान हो जाता है।
- उदाहरण:
- हेडर्स:
,
, `` - कंटेंट सेक्शन:
,
, `` - फिगर और कैप्शन:
,
- टेबल एलिमेंट्स:
,
,,
, ``
- हेडर्स:
- लाभ:
- बेहतर सर्च इंजन ऑप्टिमाइज़ेशन (एसईओ)
- स्क्रीन रीडर्स और अन्य सहायक तकनीकों के लिए बेहतर एक्सेसिबिलिटी
- बेहतर कोड रीडेबिलिटी और मेंटेनेंस
रेस्पॉन्सिव डिज़ाइन
- रेस्पॉन्सिव डिज़ाइन एक वेबसाइट विकास दृष्टिकोण है जो विभिन्न स्क्रीन साइज़ और डिवाइसेस के लिए समायोजन करता है।
- प्रमुख अवधारणाएं:
- मीडिया क्वेरी: अलग-अलग स्क्रीन साइज़ और डिवाइसेस के लिए अलग-अलग स्टाइल्स परिभाषित करने के लिए प्रयोग किया जाता है
- फ्लेक्सिबल ग्रिड्स और इमेज: स्केलिंग एलिमेंट्स के लिए रिलेटिव यूनिट्स (उदाहरण:
%
,em
,rem
) का उपयोग करें - मोबाइल-फ़र्स्ट डिज़ाइन: छोटे स्क्रीन साइज़ के लिए डिज़ाइन करें, फिर बड़े स्क्रीन साइज़ के लिए जटिलता जोड़ें
- तकनीकें:
- फ्लेक्सिबल ग्रिड्स: रिलेटिव यूनिट्स का उपयोग करके फ्लेक्सिबल ग्रिड सिस्टम बनाना
- रेस्पॉन्सिव इमेज:
srcset
औरsizes
विशेषताओं का उपयोग करके उपयुक्त छवि साइज़ लोड करना - ब्रेकपॉइंट्स: विशिष्ट स्क्रीन साइज़ पर अलग-अलग स्टाइल्स áppl
- लाभ:
- अलग-अलग डिवाइसेस और स्क्रीन साइज़ पर बेहतर यूज़र एक्सपीरियंस
- मोबाइल ट्रैफ़िक और इंगेजमेंट में वृद्धि
- बेहतर सर्च इंजन रैंकिंग के कारण अच्छा यूज़र एक्सपीरियंस
Studying That Suits You
Use AI to generate personalized quizzes and flashcards to suit your learning preferences.
Description
इस क्विज में HTML टैग्स और सेमेंटिक एलिमेंट्स की मूल बातें समझाइ गई हैं. टैग्स के प्रकार और उदाहरण दिए गए हैं. साथ ही सेमेंटिक एलिमेंट्स की परिभाषा और उनके उपयोग के बारे में बताया गया है.