मुखपृष्ठ » वेब डिजाइन » HTML5 / CSS3 वेबपृष्ठों का निर्माण करने के लिए शुरुआती मार्गदर्शिका

    HTML5 / CSS3 वेबपृष्ठों का निर्माण करने के लिए शुरुआती मार्गदर्शिका

    यह लेख हमारा हिस्सा है "HTML5 / CSS3 ट्यूटोरियल सीरीज़" - आपको एक बेहतर डिजाइनर और / या डेवलपर बनाने में मदद करने के लिए समर्पित है. यहां क्लिक करे एक ही श्रृंखला से अधिक लेख देखने के लिए.

    HTML5 और CSS3 ने केवल 2 वर्षों में वेब को तूफान से उड़ा दिया है। इससे पहले कि वेब डिज़ाइनरों द्वारा वेब पेज बनाने की उम्मीद की जाती है, और उनके आने के साथ वैकल्पिक मीडिया, एक्सएमएल-शैली टैग और वेब डिज़ाइनरों के लिए प्रगतिशील इनपुट विशेषताओं जैसे भयानक समर्थन का एक शानदार नमूना आया है। एनीमेशन जैसी सुविधाएँ.

    हालांकि अधिकांश डेवलपर्स संभावित अभी तक जटिल डेमो का प्रदर्शन करते हैं, एचटीएमएल 5 / सीएसएस 3 वास्तव में रॉकेट साइंस नहीं हैं, और मैं आपको एक मानक एचटीएमएल 5 / सीएसएस 3 वेब पेज बनाने के लिए आराम की प्रक्रिया के माध्यम से चल रहा हूं, जिसमें अभी तक गहन स्पष्टीकरण और टाडा है। सीखने के संसाधन और मुफ्त HTML5 टेम्पलेट जैसे बोनस आपके लिए उपलब्ध हैं, इसलिए इस अवसर को अपने HTML5 यात्रा को किक-स्टार्ट करने के लिए लें!

    HTML4 और HTML5 के बीच परिवर्तन

    आप सोच रहे होंगे कि HTML5 में स्विच करना क्यों महत्वपूर्ण है। वहाँ कारणों की एक असंख्य हैं, लेकिन ज्यादातर क्योंकि तुम हो जाएगा वैश्विक इंटरनेट मानकों के साथ काम करना हर दूसरे डिजाइनर की तरह। इस तरह आपको ऑनलाइन और आपके लिए अधिक समर्थन मिलेगा वेबसाइटें आधुनिक ब्राउज़रों में ठीक से प्रस्तुत करेंगी जो लगातार सुधारे जाते हैं.

    (छवि स्रोत: W3C)

    HTML4 और HTML5 के बीच तुलना सतह के स्तर पर हाजिर करना मुश्किल है। नए HTML5 ड्राफ्ट को देखने से आप चुनिंदा तत्व और सही किए गए एरर हैंडलिंग प्रोसीजर देख सकते हैं। ब्राउज़र डेवलपर्स ने विशेष रूप से डिफ़ॉल्ट वेब पेजों को प्रस्तुत करने के लिए नए विनिर्देशों का आनंद लिया है.

    HTML5 से अधिक हमारे आधुनिक वेब ब्राउज़र का रूपांतरण है। इन नई विशिष्टताओं के साथ वेब एक पूरे के रूप में देखा जाता है आवेदन मंच HTML (विशेष रूप से HTML5), CSS और जावास्क्रिप्ट के लिए बनाया जाना चाहिए। इसके अलावा, इस प्रणाली सुरुचिपूर्ण ढंग से वेब डिजाइनरों और डेवलपर्स के बीच सामंजस्य बनाता है सामान्य मानकों को सेट करके जिसे सभी ब्राउज़रों को पालन करना चाहिए.

    इसके अतिरिक्त कई तत्वों का निर्माण किया गया है नए जमाने के डिजिटल मीडिया का प्रतिनिधित्व करें. इसमें शामिल है तथा जो मल्टीमीडिया समर्थन के लिए विशाल हैं। कुछ ब्राउज़रों में आप HTML में सीधे फॉर्म सत्यापन को पूरा कर सकते हैं। दी गई अभी भी jQuery के लिए एक भारी जरूरत है, क्योंकि कई सॉफ्टवेयर डेवलपर्स हैं जो अभी तक सुविधाओं को पहचानने के लिए हैं। यदि आप टैग की एक सूची चाहते हैं, तो उनके बारे में अधिक जानने के लिए इस W3Schools तालिका की जाँच करें.

    नंगे HTML5 कंकाल

    मुझे किसी भी विषय को समझने का सबसे आसान तरीका लगता है इसमें गोता लगाएँ. तो मैं एक वेब पेज के लिए एक बहुत ही बुनियादी HTML5 कंकाल टेम्पलेट का निर्माण करूंगा। मैंने कुछ नए तत्वों को शामिल किया है, जो मुझे थोड़ी देर बाद वर्गीकृत करने की उम्मीद है.

       हमारा पहला HTML5 पेज     

    आपका स्वागत है, एक और सभी!

    यहाँ कुछ सामग्री.

    लेकिन कुछ यहाँ भी!

    कुछ कॉपीराइट और कानूनी नोटिस यहाँ। शायद © का प्रतीक थोड़ा प्रयोग करें.

    अभी यह मानक HTML4 वेब पेज से बहुत अलग नहीं है। आप जो नोटिस कर सकते हैं, वह यह है कि हम किसी भी अधिक स्व-समापन टैग को शामिल करने की आवश्यकता नहीं है. यह वास्तव में अद्भुत खबर है क्योंकि यह आपकी विकास परियोजनाओं से बहुत समय बचाएगा.

    जो लोग नहीं जानते, उनके लिए XHTML ड्राफ्ट में कई तत्वों को लेबल किया गया था स्वयं बंद होने. ये 'आगे से आगे' संचालक के संकेत के साथ आगे स्लैश के साथ समाप्त होता है यह संकेत करने के लिए कि आपको कहीं और एक समापन टैग शामिल करने की आवश्यकता नहीं होगी। उदाहरण के लिए, एक मेटा कीवर्ड टैग बनाने के लिए जिसका आप उपयोग करेंगे एक समापन की आवश्यकता के बिना अन्यत्र.

    यह नियम अभी भी HTML5 में लागू होता है। लेकिन अब आप अतिरिक्त फ़ॉरवर्ड स्लैश की भी आवश्यकता नहीं है! पूरी तरह से है वैध, हालाँकि आपको XHTML / XML मानक का उपयोग जारी रखने की अनुमति है। सभी मानकों के अनुरूप ब्राउज़रों के लिए दोनों तत्व समान तरीके से रेंडर करेंगे.

    हमारे पृष्ठ क्षेत्रों को परिभाषित करना

    हमारे नए कोड का अधिकांश भाग बहुत चौंकाने वाला नहीं होना चाहिए। हमारी doctype प्रफुल्लित करने वाला सरल है पहले से कहीं ज्यादा, शरीर की अत्यधिक विशेषताओं की आवश्यकता नहीं है, और हमारे शीर्षक में जानकारी स्पष्ट रूप से लेबल की गई है। आगे बढ़ते हुए मैं आपका ध्यान हमारे अंदर की सामग्री पर केंद्रित करना चाहता हूं टैग। इसमें मुख्य पृष्ठ की संरचना शामिल है। मैंने जानबूझकर कुछ अच्छे HTML5 टैग का उपयोग किया है कि आप उन्हें अपने काम में कैसे शामिल कर सकते हैं.

    पहले आप देखेंगे कि पूरा पृष्ठ है एक के भीतर समझाया div टैग. मैंने इसे एक आईडी के साथ लेबल किया है आवरण, इसका अर्थ है कि यह हमारी पूरी वेबसाइट सामग्री के आसपास है। ये है अधिकतम चौड़ाई या स्थिति सामग्री सेट करने के लिए उपयोगी है स्क्रीन पर चारों ओर। अगला मैंने पृष्ठ को 3 मुख्य तत्वों में विभाजित किया है - एक

    , प्रमुख
    , और एक छोटी
    . अपने कस्टम हेडर क्षेत्र के अंदर मैंने पृष्ठ का शीर्षक, और नेविगेशन आइटम्स का सरलीकृत प्रदर्शन जोड़ा है
    © Savtec
    उपयोगी जानकारी और वेब विकास युक्तियाँ। प्रोग्रामिंग, वेब डिज़ाइन, CSS, HTML, JAVASCRIPT। कॉन्फ़िगर करें और WINDOWS पुनर्स्थापित करें। खरोंच से साइटों और अनुप्रयोगों का निर्माण।