Advertisement
  1. Code
  2. HTML & CSS

सभी ब्राउज़रों के हिसाब से HTML 5 मार्क-अप को सही तरीके से कैसे बनाएं - यहां तक कि IE6 भी

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called HTML5 and You.
Quick Tip: New HTML5 Form Features
HTML5 Audio and Video: What you Must Know

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

HTML 5 वेब डिज़ाइनर के लिए कुछ शानदार नए फीचर्स प्रदान करता है जो पठनीय, अर्थात् अर्थपूर्ण लेआउट कोड करना चाहते हैं। हालांकि, HTML 5 के लिए सपोर्ट अभी भी विकसित हो रहा है, और Internet Explorer सपोर्ट जोड़ने के लिए आखिरी है। इस ट्यूटोरियल में, हम कुछ HTML 5 के नए सिमेंटिक एलिमेंट्स का उपयोग करके एक सामान्य लेआउट तैयार करेंगे, फिर हमारे डिज़ाइन को पीछे-संगत बनाने के लिए जावास्क्रिप्ट और CSS का उपयोग करें-Internet Explorer के साथ कम्पेटिबल। हां, यहां तक कि IE 6।


ट्यूटोरियल विवरण

  • Technology: HTML
  • Version: 5
  • Defficulty: इंटरमीडिएट
  • Estimated Completion Time: 1 घंटा

क्या वीडियो टुटोरिअल को अधिक पसंद करते हैं?

HTML 5 एलिमेंट्स का क्विक अवलोकन

HTML 5 वर्किंग ड्राफ्ट semantically-अर्थपूर्ण रूप से एक नया सेट प्रदान करता है
एक टिपिकल वेब पेज लेआउट को डेस्क्रिबे करने के लिए एलिमेंट। उन एलिमेंट्स का उपयोग करना जो "meaningful" हैं (यानी शामिल कंटेंट को वर्णित करते हैं)
आपके कोड को पढ़ने और व्यवस्थित करना आपके लिए आसान बनाता है, और सर्च इंजन और स्क्रीन रीडर्स को पढ़ने और अपने कंटेंट को ऑर्गनिज़ बनाना आसान बनाता है।
अपने कंटेंट को ऑर्गनिज़ बनाना आसान बनाता है।

HTML 5 एलिमेंट्स जिनका हम उपयोग करेंगे:

  • header
  • footer
  • nav
  • article
  • hgroup

एलिमेंट्स के नामों को पढ़कर, आपको यह पता होना चाहिए कि वे क्या हैं, और यही पॉइंट की बात है!
अब आप अपने सभी टेबललेस डिज़ाइनों में <div> को कोसना बंद कर सकते हैं, और इसके बजाय हेडर को "<header>" से बना सकते हैं और
"<footer>" से फूटर को।

एक एलिमेंट जो स्पष्ट नहीं हो सकता है वह <hgroup> है। यह एलिमेंट केवल हेडर एलिमेंट्स के समूह को परिभाषित करता है (<h1>
- <h6>) ताकि आप एक ब्लॉग पोस्ट टाइटल और सबटाइटल को एक साथ ग्रुप कर सकें, उदाहरण के लिए। इसे पेज के header के रूप में सोचें,
लेकिन कंटेंट section का header।

Step 1: HTML

हम वेब पर सबसे आम लेआउट को फिर से बनाने जा रहे हैं, 2-कॉलम लेआउट:

यह लेआउट आमतौर पर <div> एलिमेंट्स (या, shudder, a <table>) के वॉटरफॉल के साथ एक साथ रखा जाता है, लेकिन HTML 5 के साथ
आप इस page को काफी स्वाभाविक रूप से कोड कर सकते हैं।

और "main" एलिमेंट के भीतर इसे गोल करने के लिए, मैं कुछ सिंपल पोस्ट टेम्पलेट्स जोड़ने जा रहा हूं:

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

कुछ savvier पाठक पूछ सकते हैं "main कॉलम के लिए <div> के बजाय <section> का उपयोग क्यों नहीं किया?
अधिक "मीनिंगफुल?" आप निश्चित रूप से कर सकते हैं, और यह "मान्य" होगा, लेकिन <section> एलिमेंट इस
लेआउट फंक्शन के लिए नहीं है। spec से:

सेक्शन एलिमेंट एक सामान्य कंटेनर एलिमेंट नहीं है। जब स्टाइल उद्देश्यों के लिए एलिमेंट की आवश्यकता होती है या
स्क्रिप्टिंग के लिए एक कन्वेनैंस के रूप में, ऑथर को इसके बजाय <div> एलिमेंट का उपयोग करने के लिए प्रोत्साहित किया जाता है। एक सामान्य नियम यह है कि
सेक्शन एलिमेंट केवल तभी उपयुक्त है जब एलिमेंट के कंटेंट डॉक्यूमेंट की आउटलाइन में स्पष्ट रूप से सूचीबद्ध हो।

Step 2: CSS

इन एलिमेंट्स को पोजिशन करना आसान होगा यदि वे सभी <div>s हों - हम जानते हैं कि उन्हें प्रत्येक ब्राउज़र द्वारा
कैसे हैंडल किया जाता है, इसलिए हम जानते हैं कि उन्हें CSS कैसे लिखना है। हालांकि, यह केवल मामला है क्योंकि प्रत्येक ब्राउज़र हर पेज पर डिफ़ॉल्ट स्टाइलशीट लागू करता है।
भले ही आपने एक स्पेसिफी नहीं किया है, फिर भी जब भी आपके द्वारा लिखे गए पेज को Firefox या IE में लोड किया जाता है तो काम पर CSS होता है।

उदाहरण के लिए, यहां स्टाइल को <div> डिफ़ॉल्ट "html.css" फ़ाइल में अप्लाई किया गया है जो Firefox के साथ आता है:

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

अब हम इन एलिमेंट्स का इलाज <div>s की तरह कर सकते हैं, आश्वस्त रहे कि वे लगातार डिस्प्ले होते हैं।

समस्या

आइए अब तक के हमारे लेआउट पर नज़र डालें। मैंने इस कोड के एक और अधिक फ्लेशेड संस्करण को एक साथ रखा है और इसका कुछ ब्राउज़र में
परीक्षण किया है। सफारी 4 में अपना लेआउट देखें:

हालांकि, Internet Explorer 6 में क्या होता है देखें:

इस तस्वीर में क्या ग़लती है? स्पष्ट रूप से CSS में display: block; सेट करके, हमें ब्राउज़र के उस एलिमेंट के लिए
हमारे इरादे से कम्यूनिकेट करना चाहिए।

दुर्भाग्यवश, IE उन एलिमेंट्स को अनदेखा कर रहा है जो CSS की परवाह किए बिना पहचान नहीं पाते हैं। हमारे कंटेंट अपने पैरेंट के कंटेनर में
लेफ्ट फ्लोट रहती है, जैसे कि HTML 5 एलिमेंट मौजूद नहीं थे। किसी भी तरह, हमें अज्ञात एलिमेंट को रेंडर करने के लिए IE प्राप्त करने की आवश्यकता है,
और उन्हें उचित रूप से स्टाइल करना ऐसा नहीं करता है।

Step 3: जावास्क्रिप्ट

सौभाग्य से, IE को कुछ सरल जावास्क्रिप्ट के माध्यम से नए एलिमेंट्स को पहचानने का एक तरीका है।

मैंने पहली बार John Resig के ब्लॉग पर इस तकनीक के बारे में पढ़ा; उसने इसे बुलाया
"HTML 5 Shiv।"


The Shiv

इसमें बस प्रत्येक नए, अपरिचित एलिमेंट के लिए document.createElement() को कॉल करना शामिल है।

परंपरागत रूप से आप DOM की कुछ शाखा में सीधे एलिमेंट को इंजेक्ट करने के लिए यह कॉल करेंगे; दूसरे शब्दों में,
<body> टैग के भीतर एक मौजूदा कंटेनर में। आप इस अज्ञात एलिमेंट समस्या को ठीक करने के लिए भी ऐसा कर सकते हैं। तथापि,
यह चाल <head> टैग में document.createElement() को कॉल करके भी काम करती है, जिसमें कोई एलिमेंट शामिल नहीं है!
इससे पढ़ने और लिखना बहुत आसान हो जाता है:

चीजों को और भी सुविधाजनक बनाने के लिए, Remy Sharp ने
"HTML 5 Enabling Script" जारी की है,
जो उपरोक्त हमारे कोड के समान ही है, लेकिन सभी HTML 5 एलिमेंट्स के लिए।

चूंकि HTML 5 हमारे नए पेजेज को मार्क करने के तरीके से अधिक ध्यान दे रहा है, और IE को नए एलिमेंट्स को स्वीकार करने का एकमात्र तरीका है, जैसे कि <article>, HTML5 shiv का उपयोग करना है, मैंने जल्दी ही एक मिनी स्क्रिप्ट जो सभी नए एलिमेंट्स को सक्षम बनाती है लिखी है...

अब जब हमने अपनी जावास्क्रिप्ट को जोड़ दिया है, तो हम अपने नए JS कोड के साथ Internet Explorer में फिर से देखें:

उत्तम। Internet Explorer 6 के साथ साथ Safari 4 भी अब HTML 5 कोड को डिस्प्ले कर रहा है।

निष्कर्ष

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

HTML 5 के हर बिट को निचोड़ने के लिए आप और अधिक टिप्स प्राप्त कर सकते हैं जो आप अपने प्रोडक्शन कोड में कर सकते हैं? हमें कमैंट्स में बताएं!

एक प्लस ट्यूटोरियल लिखें

क्या आप जानते थे कि आप हमारे लिए प्लस ट्यूटोरियल और/या स्क्रीनकास्ट लिखने के लिए $600 तक कमा सकते हैं? हम HTML, CSS, PHP, और JavaScript पर गहराई से और अच्छी तरह लिखित ट्यूटोरियल की तलाश में हैं। यदि आप क्षमता रखते हैं, तो कृपया netfuts@tutsplus.com पर Jeffrey से संपर्क करें।

कृपया ध्यान दें कि वास्तविक मुआवजे अंतिम ट्यूटोरियल और स्क्रीनकास्ट की गुणवत्ता पर निर्भर करेगा।

Write a PLUS tutorial
  • Twitter पर हमें फ़ॉलो करें, या वेब पर सर्वोत्तम वेब डेवलपमेंट ट्यूटोरियल के लिए NetTuts+ RSS Feed की सदस्यता लें।
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.