आएँ शुरू करें.

HTML5 मार्कअप

सबसे पहले, हमें एक बनाने की जरूरत है एचटीएमएल निम्नलिखित मार्कअप के साथ दस्तावेज़:

 
 
 
 
Apple iPhone 4 - 16GB
 
सबसे अद्भुत iPhone अभी तक.
 
 
 
  
 
 
तेज़ ड्यूल-कोर A5 चिप। ऑल-न्यू ऑप्टिक्स वाला 8MP का कैमरा 1080p HD वीडियो भी शूट करता है। और सिरी का परिचय दे रहा है। यह अभी तक का सबसे अद्भुत आईफोन है.
 
 
उत्पाद की विशेषताएँ
 
 
फुल 1080p वीडियो रिकॉर्डिंग के साथ 8 मेगा पिक्सेल कैमरा
 
सिरी आवाज अस्सिटेंट
 
iCloud
 
एयर प्रिंट
 
रेटिना डिस्प्ले
 
फोटो और वीडियो जियोटैगिंग
 
 
 अभी खरीदें 
 
 

हम HTML5 कल्पना से कई नए टैग का उपयोग करते हैं हैडर, hgroup, आकृति, अनुभाग, और एक हमने पहले चर्चा की है; विवरण तथा सारांश टैग.

हालाँकि, हम इन टैग में नहीं जा रहे हैं, इसलिए नहीं कि हम इसके लिए तैयार नहीं हैं, बल्कि ये बुनियादी विषय हैं जिन्हें आप कहीं और आसानी से खोज सकते हैं। इसलिए, यदि आप वास्तव में HTML5 के लिए नए हैं, तो मैं आपको उन टैगों के निम्नलिखित संदर्भों को पढ़ने की सलाह दूंगा; उन्होंने उन्हें बड़े पैमाने पर समझाया है:

• आइए बात करते हैं शब्दार्थ की
• एचटीएमएल 5 हैडर तत्व
• Hgroup तत्व
• HTML5 टैग संदर्भ

अब देखते हैं हमारे पेज की पहली उपस्थिति.

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

शैलियाँ

हम इस स्टाइलशीट का उपयोग करके सभी डिफ़ॉल्ट शैलियों को सामान्य करके शुरू करेंगे और इसमें एक ढाल पृष्ठभूमि जोड़ेंगे एचटीएमएल टैग.

 html ऊंचाई: 100%; पृष्ठभूमि: # f3f3f3; पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # f3f3f3 0%, #ffffff 50%); पृष्ठभूमि: -webkit- ग्रेडिएंट (रैखिक, बाएं ऊपर, बाएं नीचे, रंग-रोकें (0%, # f3f3f3), रंग-रोकें (50%, # ffffff)); पृष्ठभूमि: -webkit- रैखिक-ढाल (शीर्ष, # f3f3f3 0%, # ffffff 50%); पृष्ठभूमि: -o-रैखिक-ढाल (शीर्ष, # f3f3f3 0%, # ffffff 50%); पृष्ठभूमि: -ms-रैखिक-ढाल (शीर्ष, # f3f3f3 0%, # ffffff 50%); पृष्ठभूमि: रैखिक-ढाल (शीर्ष, # f3f3f3 0%, # ffffff 50%); फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f3f3f3", endColorstr = "# ffffff", GradientType = 0); 

याद रखें कि हमारे उत्पाद तत्व सभी एक में लपेटे हुए हैं div उत्पाद वर्ग के साथ। इसलिए, यहां हम रैपर को केंद्र में रखना चाहते हैं और इसके बारे में चौड़ाई निर्धारित करते हैं 650 पिक्सेल.

 .आवरण चौड़ाई: 650px; मार्जिन: ऑटो; गद्दी: 25 पीएक्स 0 पीएक्स; 

शीर्ष लेख अनुभाग

शीर्ष लेख अनुभाग में हमारे पास दो शीर्षक हैं h1 तथा h4, तो आइए इन तत्वों को स्टाइल करें.

 h1, h4 font-family: Helvetica Neue, Arial, sans-serif; फ़ॉन्ट-वजन: सामान्य; मार्जिन: 0;  h1 फ़ॉन्ट-आकार: 24pt;  h4 font-size: 16pt; रंग: # अआ; 

और फिर नीचे की तरफ थोड़ा सा स्थान जोड़ें हैडर एक मार्जिन के साथ.

 हैडर मार्जिन-बॉटम: 20 पीएक्स; 

यदि आप शीर्ष लेख के दाईं ओर देखते हैं, तो उस पक्ष में बहुत अधिक व्हाट्सएप होगा.

तो क्यों न हम भी Apple लोगो को वहाँ रखें.

 हैडर मार्जिन-बॉटम: 20 पीएक्स; पृष्ठभूमि: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/apple.png') नो-रिपीट राइट सेंटर; 

उत्पाद छवि

इसके बाद, छवि को बाईं ओर फ्लोट करें और छवि को अधिकतम चौड़ाई सेट करें 350px.

 चित्रा फ्लोट: बाएं;  आंकड़ा img अधिकतम-चौड़ाई: 350px; 

चूंकि छवि को बाईं ओर धकेल दिया गया है, तो हम विवरण अनुभाग को दाईं ओर फ्लोट करेंगे और चौड़ाई सेट करेंगे 300px.

 खंड फ़ॉन्ट-परिवार: तहोमा, अरियल, संस-सेरिफ़; लाइन-ऊँचाई: 150%; सही नाव; चौड़ाई: 300 पीएक्स; रंग: # 333; 

अब देखते हैं अब तक का परिणाम.

यह अच्छा लग रहा है, लेकिन विवरण टैग अभी भी (क्रोम को छोड़कर) काम नहीं करता है, तो चलो बटन को अगला स्टाइल करें.

बटन

बटन शैलियों के लिए, हम Apple.com स्टोर से नकल करेंगे। और यहां वह सब सिंटैक्स है जिसे आपको बटन के लिए अपनी स्टाइलशीट में रखना होगा.

 बटन पृष्ठभूमि: # 36a9ea; पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # 36a9ea 0%, # 127fd2 100%); पृष्ठभूमि: -webkit- ग्रेडिएंट (रैखिक, बाएं ऊपर, बाएं नीचे, रंग-स्टॉप (0%, # 36a9ea), रंग-बंद (100%, # 127fd2); पृष्ठभूमि: -webkit- रैखिक-ढाल (शीर्ष, # 36a9ea 0%, # 127fd2 100%); पृष्ठभूमि: -ओ-लीनियर-ग्रेडिएंट (शीर्ष, # 36a9ea 0%, # 127fd2 100%); पृष्ठभूमि: -ms-रैखिक-ढाल (शीर्ष, # 36a9ea 0%, # 127fd2 100%); पृष्ठभूमि: रैखिक-ढाल (शीर्ष, # 36a9ea 0%, # 127fd2 100%); फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 36a9ea", endColorstr = "# 127fd2", GradientType = 0); बॉर्डर: 1px ठोस # 00599d; रंग: #fff; गद्दी: 8px 20px; -वेबकिट-बॉर्डर-त्रिज्या: 3 पीएक्स; सीमा-त्रिज्या: 3 पीएक्स; -webkit- बॉक्स-छाया: 0px 1px 1px 0px rgba (0, 0, 0, .1), इनसेट 0px 1px 0px 0px 0px rpxba (250, 250, 250, .3); बॉक्स-छाया: 0px 1px 1px 0px rgba (0, 0, 0, .1), इनसेट 0px 1px 0px 0px 0px rpxba (250, 250, 250, .3); पाठ-छाया: 0px 1px 1px # 156cc4; फ़िल्टर: ड्रॉपशेडो (रंग = # 156cc4, ऑफेक्स = 0, offy = 1); फ़ॉन्ट-आकार: 10pt;  बटन: होवर पृष्ठभूमि: # 2f90d5; पृष्ठभूमि: -मोज़-लीनियर-ग्रेडिएंट (शीर्ष, # 2f90d5 0%, # 0351b7 100%); पृष्ठभूमि: -webkit- ग्रेडिएंट (रैखिक, बाएं शीर्ष, बाएं नीचे, रंग-स्टॉप (0%, # 2f90d5), रंग-रोक (100%, # 0351b7); पृष्ठभूमि: -webkit-linear-gradient (शीर्ष, # 2f90d5 0%, # 0351b7 100%); पृष्ठभूमि: -ओ-लीनियर-ग्रेडिएंट (शीर्ष, # 2f90d5 0%, # 0351b7 100%); पृष्ठभूमि: -ms-रैखिक-ढाल (शीर्ष, # 2f90d5 0%, # 0351b7 100%); पृष्ठभूमि: रैखिक-ढाल (शीर्ष, # 2f90d5 0%, # 0351b7 100%); फ़िल्टर: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 2f90d5", endColorstr = "# 0351b7", GradientType = 0);  बटन: सक्रिय पृष्ठभूमि: # 127fd2; -webkit- बॉक्स-छाया: इनसेट 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px 0px rgba (0, 0, 0, 0); बॉक्स-छाया: इनसेट 0px 2px 1px 0px rgba (0, 47, 117, .5), 0px 1px 1px 0px 0px rgba (0, 0, 0, 0); 

अब बटन बेहतर दिखना चाहिए.

Internet Explorer में समस्या

हमेशा की तरह IE (इंटरनेट एक्सप्लोरर) हमेशा कुछ परेशानी का कारण बनता है; यदि आप इसे 9 से कम किसी IE में खोलते हैं, तो पृष्ठ अन-स्टाइल रहेगा.

ऐसा इसलिए है क्योंकि इंटरनेट एक्सप्लोरर नए तत्वों को नहीं पहचानता है (अनुभाग, हैडर, आदि) इसलिए जिन शैलियों को हमने निर्दिष्ट किया है, वे लागू करने में विफल हैं। इस प्रकार, अगले चरण में हम इस समस्या को हल करने पर काम करेंगे.

ब्राउज़र समर्थन का परीक्षण

हमारे पिछले पोस्ट में, हमने इस पॉलीफ़िल का उपयोग करके विवरण तत्व के लिए ब्राउज़र समर्थन से निपट लिया है; ताकि यह असमर्थित ब्राउज़रों में काम कर सके। हालांकि, इस बार हम इसे मॉर्डनिज के साथ करने के विभिन्न तरीकों की कोशिश करेंगे.

इसकी आधिकारिक वेबसाइट से, "Modernizr एक ओपन-सोर्स जावास्क्रिप्ट लाइब्रेरी है जो आपको अगली पीढ़ी के निर्माण में मदद करती है एचटीएमएल 5 तथा CSS3-संचालित वेबसाइटें". तकनीकी रूप से, मॉर्डनिजर कुछ नए तत्वों और विशेषताओं के लिए ब्राउज़र समर्थन का परीक्षण करेगा। यदि समर्थन प्रदान नहीं किया गया है, तो हमें फिर से एक वापसी प्रदान करनी चाहिए, चाहे वह अलग-अलग शैली देकर या प्रदान करके हो polyfills. इस मामले में, हम विवरण और सारांश तत्व का परीक्षण करने में मदद करने के लिए मॉर्डनिज़्र का उपयोग करेंगे.

1. Modernizr पर जाएं और इसके डाउनलोड पेज पर जाएं.

2. डाउनलोड पेज में, Modernizr पुस्तकालय को कॉन्फ़िगर करने के लिए कुछ विकल्प प्रदान करता है, इसलिए आपको केवल कुछ विशेषताओं का चयन करना होगा जो आपको वास्तव में अपनी वेबसाइट के लिए चाहिए। इस मामले में, हमें इसकी आवश्यकता है:

   • HTML5Shiv 3.4
   • सीएसएस कक्षाएं जोड़ें, यह सुविधा स्वतः ही html टैग में कक्षाएं सम्मिलित करेगी.
   • Modernizr.load,
   • समुदाय ऐड-ऑन बॉक्स पर जाएं और चुनें ELEM-विवरण,
   • एक्स्टेंसिबिलिटी सेक्शन में, सेलेक्ट करें Modernizr.addTest.
3. फ़ाइल को जनरेट और डाउनलोड करें.
4. इसे अपने html से लिंक करें और इंटरनेट एक्सप्लोरर में पेज को फिर से लोड करें। पेज को अब स्टाइल किया जाना चाहिए क्योंकि इंटरनेट एक्सप्लोरर अब टैग को पहचान सकता है.

और, यदि आप स्रोत को देखते हैं या तत्व का निरीक्षण करते हैं, तो आप पाएंगे कि html विवरण में नो-डिटेल्स वर्ग डाला गया है; यह दर्शाता है कि ब्राउज़र जहां हम पृष्ठ का पूर्वावलोकन कर रहे हैं; वर्तमान में विवरण तत्व का समर्थन नहीं कर रहा है। @@@@ [मैं इस वाक्य को नहीं समझ सकता। ]

फिर हम हुक के रूप में इस वर्ग का उपयोग करके एक कमबैक बना सकते हैं, जिसे हम अगले चरण में करेंगे.

द फॉलबैक

इस चरण में हम समान प्रदान करेंगे विवरण अन्य ब्राउज़र के लिए तत्व कार्यक्षमता (क्रोम को छोड़कर)। पिछली पोस्ट में, यह चरण स्वचालित रूप से इस स्क्रिप्ट का उपयोग करके किया गया था, लेकिन इस बार हम इसे अपने दम पर बनाएंगे.

ध्यान दें: बस हमारे पिछले पोस्ट से थोड़ी समीक्षा; विवरण तत्व वर्तमान में केवल क्रोम ब्राउज़र में समर्थित है.

तो, चलिए सबसे पहले CSS पर काम करना शुरू करते हैं.

सारांश टैग पर, हम इसके कर्सर मोड को पॉइंटर में बदलते हैं, इसलिए उपयोगकर्ता ध्यान देगा कि यह क्लिक करने योग्य है.

 सारांश कर्सर: सूचक; फ़ॉन्ट-आकार: 12pt; रूपरेखा: 0; 

एक मार्जिन के साथ विवरण तत्व के ऊपर और नीचे अधिक स्थान देने के लिए.

 विवरण मार्जिन: 20 पीएक्स 0 पीएक्स; 

डिफ़ॉल्ट रूप से, सारांश टैग में एक तीर होगा। लेकिन यहां हम इसे प्लस-माइनस आइकन से बदलना चाहेंगे.

ध्यान दें: आगे बढ़ने से पहले, मैंने पहले Fugue द्वारा इस संग्रह के आइकन डाउनलोड किए हैं, डाउनलोड करें और उन्हें एक फ़ाइल में वितरित करें.

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

 विवरण> सारांश: चौड़ाई से पहले: 16 पीएक्स; ऊंचाई: 16 पीएक्स; प्रदर्शन: इनलाइन-ब्लॉक; सामग्री: "; महत्वपूर्ण; पृष्ठभूमि: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min.png') नो-रिपीट सेंटर टॉप; मार्जिन-राइट; 5 पीएक्स; स्थिति: रिश्तेदार; शीर्ष: 2 पीएक्स ;;

फिर, जब विवरण तत्व खुला होता है, तो पृष्ठभूमि की स्थिति नीचे की ओर जाएगी जो माइनस आइकन दिखाएगा.

 विवरण [खुला]> सारांश: पहले, details.open> सारांश: पृष्ठभूमि: url ('... /https://assets.hongkiat.com/uploads/html5-single-product-page/plus-min-png' से पहले ) नो-रिपीट सेंटर बॉटम; 

[खुला] साइन एक चयनकर्ता है। इस स्थिति में, यह सहायक ब्राउज़र में खुले विवरण का चयन करेगा.

अंत में हमें उस तीर को छुपाना चाहिए जिसे डिफ़ॉल्ट रूप से क्रोम में दिखाया गया है.

 विवरण> सारांश :: - वेबकिट-विवरण-मार्कर प्रदर्शन: कोई नहीं; 

फिर, कुछ समय के लिए ब्राउज़र में परिणाम देखें.

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

JQuery के साथ टॉगल प्रभाव

इससे पहले कि हम jQuery के भाग के साथ शुरू करें, मैं प्रेरणा के लिए इयान डेविलिन को धन्यवाद देना चाहूंगा, नीचे दी गई स्क्रिप्ट वास्तव में उसका थोड़ा सा बदलाव है.

सब ठीक है, चलो सारांश टैग को संग्रहीत करने के लिए एक चर बनाते हैं.

 var सारांश = $ ('विवरण सारांश'); 

फिर हम सारांश के सभी भाई तत्वों को एक के साथ लपेटते हैं div.

summary.siblings ()। wrapAll ( '
');

और उस डिव को छिपाएं जब विवरण तत्व में ओपन क्लास नहीं है.

$ ('विवरण: नहीं (.open) सारांश')। भाई-बहन ('div')। Hide ()।

जब सारांश पर क्लिक किया जाता है, तो हम चाहते हैं कि छिपी हुई div को दिखाया जाए, और विपरीत, जब div शुरू में खुला होता है, तो इसे छिपाया जाएगा.

 समरी.क्लिंक (फंक्शन () $ (यह)। भाईचारा ('div')। टॉगल (); $ ('डिटेल्स')। toggleClass ('ओपन');); 

यह सुनिश्चित करने के लिए कि उन कार्यों को केवल असमर्थित ब्राउज़रों में निष्पादित किया जाएगा, हम उन्हें इस सशर्त विवरण के अंदर लपेटते हैं.

 अगर ($ ('html'))। hasClass ('no-details')) // कोड यहाँ जाता है

और नीचे हमारे पास कोड है:

 if ($ ('html')। hasClass ('no-details')) var सारांश = $ ('details सारांश'); summary.siblings ()। wrapAll ( '
'); $ ('विवरण: नहीं (.open) सारांश')। भाई-बहन ('div')। Hide ()। समरी.क्लिंक (फंक्शन () $ (यह)। भाईचारा ('div')। टॉगल (); $ ('डिटेल्स')। toggleClass ('ओपन');); 

अब इसे ब्राउज़र में परीक्षण करते हैं; टॉगल प्रभाव अब सभी ब्राउज़रों पर काम करना चाहिए, मैंने व्यक्तिगत रूप से जांच की है (जब तक कि इंटरनेट एक्सप्लोरर 7).

• डेमो
• स्रोत डाउनलोड करें

सुझाव: वैकल्पिक रूप से आप इसे बदल सकते हैं .टॉगल () साथ में .slideToggle () स्लाइड प्रभाव बनाने के लिए। यदि आप चाहते हैं कि विवरण प्रारंभ में खोला जाए, तो आप विवरण तत्व में एक वर्ग खुला जोड़ सकते हैं.

निष्कर्ष

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

हालाँकि, मुझे पता है कि मैंने इस पोस्ट में विस्तार से सब कुछ नहीं बताया है, इसलिए यदि आप कुछ स्पष्ट करना चाहते हैं, तो नीचे दिए गए टिप्पणी बॉक्स में प्रश्न पोस्ट करने के लिए स्वतंत्र महसूस करें.