HTML5 / CSS3 के साथ आरंभ करें: टिप्स, शोकेस और कोडिंग नमूने

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


इस लेख का उद्देश्य पाठकों को इस बारे में जानकारी देना है कि आपको HTML5 के बारे में क्या पता होना चाहिए और सबसे महत्वपूर्ण रूप से कुछ टिप्स & हल्के, आकर्षक और इंटरैक्टिव HTML5 पेज बनाने के गुर.

1. HTML5 में बेसिक

एचटीएमएल 5

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

यहाँ अपनी जाँच करने के लिए एक त्वरित सुझाव है ब्राउज़र संगतता.

एक निश्चित ब्राउज़र की सीमा को और समझने के लिए, आप इसका उल्लेख कर सकते हैं यहाँ.

2. पाठ प्रभाव – HTML5 में छाया और अग्रिम पाठ प्रभाव जोड़ना

HTML5 में पाठ प्रभाव

पाठ पर मूल छाया प्रभाव

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

कोडिंग नमूना

# शादो H1 {
पाठ-छाया: 0px 1px 1px rgba (0,0,0, 2);
}

अग्रिम आग की तरह प्रभाव पर पाठ

अगला टिप आपको यह दिखाने के लिए है कि HTML5 कोडिंग को एक समान दिखने वाले पाठ में कैसे ट्विक किया जा सकता है। यदि आप पर्याप्त प्रयोग करते हैं, या अन्य उदाहरण पाते हैं, तो प्रभावों को अनुकूलित करने की संभावनाएं अनंत हैं। नोट: यह उदाहरण किसी भी छवि संपादन सॉफ्टवेयर द्वारा नहीं बनाया गया है। HTML5 में बस सादा कोड.

कोडिंग नमूना

# फायर एच 1 {
पाठ-संरेखित करें: केंद्र;
मार्जिन: 200px ऑटो;
फ़ॉन्ट परिवार: "लीग गोथिक", कूरियर;
फ़ॉन्ट-आकार: 200px; पाठ-परिवर्तन: अपरकेस;
रंग: #fff;
पाठ-छाया: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60pxpx # cd4606, 0 -80px 70px # 973716, 10px -90px -90px 80px # 451b0e;
}

अन्य महान उदाहरण: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. HTML5 में गोल कोना

HTML5 में गोल कोना

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

कोडिंग नमूना

div {
बॉर्डर: 2px ठोस # 434343;
गद्दी: 10 पीएक्स;
पृष्ठभूमि: # e3e3e3;
-moz-border-radius: 10px;
-वेबकिट-बॉर्डर-त्रिज्या: 10 पीएक्स;
चौड़ाई: 500 पीएक्स;
}

नोट: मोज़ेज़ का मतलब मोज़िला है, और वेबकैट सफारी और क्रोम के लिए है.

अन्य महान उदाहरण: http://fjd1.com/roundcorner.html

4. HTML5 में स्केलेबल वेक्टर ग्राफिक (SVG)

एचटीएमएल 5 ट्यूटोरियल, गाइड, और नमूने

स्केलेबल वेक्टर ग्राफिक या सामान्यतः (एसवीजी) के रूप में जाना जाता है एक 2-डायमेंशन वेक्टर ग्राफिक्स है जिसे एक्सएमएल टेक्स्ट फाइलों में परिभाषित किया गया है। दूसरे शब्दों में, क्योंकि उनका डीएनए XML टेक्स्ट फ़ाइल पर आधारित है, उन्हें वेब प्लेटफ़ॉर्म पर बनाया या संपादित किया जा सकता है। जिसका मतलब यह भी है, आसानी से पैमाने हो सकते हैं, और खोज इंजन छवि को पढ़ने और समझने में सक्षम हैं.

नमूना कोड

अन्य महान उदाहरण:

एचटीएमएल 5 में एंबेडिंग मूवी फ़ाइल

HTML5 में वीडियो

HTML5 की क्षमताओं का प्रदर्शन करने के लिए यहां एक और दिलचस्प हिस्सा है। ऑनलाइन वीडियो के कई फ़्लैश के रूप में आमतौर पर webuser को प्रस्तुत किया जाता है। हाल तक तक, HTML5 में वीडियो एम्बेड करना धीरे-धीरे गति प्राप्त कर रहा है (YouTube अच्छा उदाहरण है) और फ्लैश धीरे-धीरे अपना आकर्षण खो रहा है। ऐसा क्यों हैं? मोबाइल उपयोगकर्ता। यदि आप चाहते हैं कि आपका वीडियो iPhone और Android फोन दोनों में चला सके, तो HTML5 आगे बढ़ने का एक तरीका है.

वीडियो एम्बेड करने के लिए, आपको यह जानना होगा कि वर्तमान में विभिन्न ब्राउज़रों द्वारा समर्थित 3 प्रारूप हैं; .mp4 (H.264 + AAC), .ogg (थेओरा + वोरबिस), .webm (VP8 + वोरबिस)

नमूना कोड

अन्य महान उदाहरण: https://www.html5rocks.com/en/tutorials/video/basics/

6. HTML5 में स्लाइड प्रस्तुति

एचटीएमएल 5 ट्यूटोरियल, गाइड, और नमूने

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

नमूना कोड

पूर्व {
संक्रमण: सभी 1s आसानी-से;
}

प्री: होवर {
पृष्ठभूमि-रंग: # F2F5FE;
सीमा-रंग: काला;
}

div {
परिवर्तन: रोटा 3 डी (1,1,0, 45 डीजी);
}

अन्य महान उदाहरण:

HTML5 में संपादन योग्य सामग्री

एचटीएमएल 5 ट्यूटोरियल, गाइड, और नमूने

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

नमूना कोड

यह सामग्री संपादन योग्य है!

अन्य महान उदाहरण: http://html5demos.com/contenteditable

8. HTML5 में इंटरएक्टिव वेब कैनवास

एचटीएमएल 5 ट्यूटोरियल, गाइड, और नमूने

एचटीएमएल 5 में एसवीजी के अलावा, कैनवास अगली सबसे अच्छी चीज है जो कभी भी वेब पर हुई थी। कैनवस 2 आयाम आकृतियों के प्रतिपादन की अनुमति देता है जो फ्लैश की मदद के बिना पूरे स्तर पर अन्तरक्रियाशीलता लाता है.

फिर भी, एचटीएमएल 5 में सरल कोडिंग जो अद्भुत एनीमेशन इंटरैक्शन बनाता है, यहां उल्लेख के लायक है.

अन्य महान उदाहरण: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. HTML5 में खींचें और छोड़ें

एचटीएमएल 5 ट्यूटोरियल, गाइड, और नमूने

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

नमूना कोड (मूल DnD)

document.addEventListener (‘ड्रैगस्टार्ट’, फंक्शन (ईवेंट) {
event.dataTransfer.setData (‘पाठ’, ‘अनुकूलित पाठ’);
event.dataTransfer.effectAllowed = ‘कॉपी’;
}, असत्य);

अन्य महान उदाहरण: http://www.html5rocks.com/en/tutorials/dnd/basics/

HTML5 में शुद्ध सीएसएस डेटा चार्ट

एचटीएमएल 5 ट्यूटोरियल, गाइड, और नमूने

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

अन्य महान उदाहरण: http://cssglobe.com/pure-css-data-chart/

HTML 5 के लिए पर्याप्त नहीं मिल सकता है?

तो हम करते है! यहाँ विषय पर अधिक है, उन्हें बाहर की जाँच करें.

* HTML 5 वेबसाइटों के 30 बहुत अच्छे उदाहरण
* HTML 5 से आरंभ करना
* 2012 में HTML 5 ट्यूटोरियल अवश्य पढ़ें
* जानें HTML 5: 10 पाठ अवश्य पढ़ें

इसके अलावा, बाहर की जाँच करें  रॉबिन निक्सन द्वारा यह HTML 5 क्रैश कोर्स. रॉबिन निक्सन लर्निंग PHP, MySQL और जावास्क्रिप्ट के लेखक हैं; पाठ्यक्रम एचटीएमएल 5 में जानने के लिए बहुत कुछ सब कुछ शामिल करता है – जिसमें मूल HTML कोडिंग, ड्राइंग के लिए एचटीएमएल 5 कैनवास, जियोलोकेशन, स्थानीय भंडारण, साथ ही साथ एचटीएमएल 5 ऑडियो और वीडियो शामिल हैं।.

मूल लेख सबसे पहले पर प्रकाशित हुआ है WHSR ब्लॉग; अब यह प्रबंधित और BuildThis.io कर्मचारियों द्वारा अद्यतन किया गया है.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map