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

यह अच्छा है कि कंप्यूटर का आविष्कार किया गया। एक सुकून भरा माहौल बनाने के लिए आप अपने लिए सही माहौल बना सकते हैं। दरअसल, अब हम यही करने जा रहे हैं।

उन कार्यों को पूरा करने के लिए जिनकी आपको आवश्यकता होगी (अपग्रेड करने का एक कारण होगा):

यदि दिलचस्पी है, तो आप जांच सकते हैं कि आपका वेब ब्राउज़र किस हद तक मानक का समर्थन करता है। एचटीएमएल 5. लिंक का पालन करें http://html5test.com , वहां आपको अंक दिखाई देंगे, जिसका योग मानक से समर्थित बिंदुओं की संख्या से बनता है। लेखन के समय, मेरी मशीन (उबंटू 10.10) पर, ओपेरा 11.10 स्कोर 258, जबकि फायरफॉक्स 4 केवल 240 स्कोर करता है। मुझे आश्चर्य है कि आपके पास क्या है?

इस ट्यूटोरियल में, हम:

• हम आपके साथ HTML5 मानक के अनुसार एक पेज बनाएंगे
• नए शब्दार्थ तत्वों का उपयोग करें,
• थोड़ा ड्रा करें
• जांचें कि वीडियो हमारे पेज पर कैसे प्रदर्शित होता है,
• आइए नए प्रपत्र तत्वों का परीक्षण करें।

काम के लिए, हमारे लिए एक बनाना पर्याप्त होगा एचटीएमएल फ़ाइल index.htmlऔर एक सीएसएस फ़ाइल Styles.css. कार्य प्रगति के रूप में पृष्ठ पर स्क्रिप्ट दिखाई देंगे, इसलिए अपने ब्राउज़र के लिए आपको इस बारे में चेतावनी देने के लिए तैयार रहें। पृष्ठ पर लिपियों के निष्पादन की अनुमति देना आवश्यक होगा।

पेज फ्रेम तैयार करना

ब्राउज़र को पेज को व्यक्तिगत रूप से जानना चाहिए! यदि आप उसे नहीं बताते कि वह कौन है और वह कहाँ से आती है, तो वह संगतता मोड चालू कर देगा और आपको क्लाइंट ब्राउज़र में अनुमान लगाना होगा - "आपका शब्द कैसे प्रतिक्रिया देगा"। ऐसा होने से रोकने के लिए, आपको पृष्ठ कोड के अनुरूप, पृष्ठ की शुरुआत में सही दस्तावेज़ प्रकार लिखना होगा।

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

आएँ शुरू करें। अपने डेस्कटॉप पर एक फ़ोल्डर बनाएं, इसमें HTML और CSS फाइलों की हमारी प्यारी जोड़ी होगी। utf-8 में एन्कोडेड एक साधारण टेक्स्ट फ़ाइल index.html बनाएं। यह वर्ण एन्कोडिंग लंबे समय से सभी गैर-अंग्रेज़ी पाठों के लिए मानक रहा है।

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

हमने यहां जो कुछ भी वर्णित किया है वह लिस्टिंग # 1 में है:

लिस्टिंग 1. HTML5 दस्तावेज़ की मूल संरचना

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

ढांचा तैयार है, लेकिन अभी भी हमारे लिए पृष्ठ को ब्राउज़र में प्रदर्शित करना बहुत जल्दी है। हम आगे बढ़ते हैं - पृष्ठ के शब्दार्थ तत्व।

सामग्री मार्कअप बनाना

फ्रेम पर सिमेंटिक ब्लॉक रखें

अब हम इस बारे में अधिक विशिष्ट होंगे कि हम पृष्ठ पर क्या रखेंगे। आइए निम्नलिखित से शुरू करें: हमें HTML5 के नए सिमेंटिक तत्वों का अधिकतम लाभ उठाने की आवश्यकता है।

हमारा पृष्ठ उस कंपनी के बारे में समाचारों का पूरा पाठ प्रदर्शित करने का काम करेगा जिसे साइट समर्पित है। इसे या तो मुख्य पृष्ठ से एक्सेस किया जाएगा, जहां नवीनतम समाचार पोस्ट किया गया है, या समाचार संग्रह से।

एक कंटेनर में ब्लॉक रखें

. हम इन तत्वों के निम्नलिखित अनुक्रम का पालन करेंगे:

- शीर्षलेख
- - समूह
- नौसेना
- लेख
- - हेडर
- - "विषय"
- - अनुभाग
- - - हेडर
- - - "विषय"
- पाद लेख

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

हमने यहां जो कुछ भी वर्णित किया है वह सूची संख्या 2 में प्रस्तुत किया गया है। हम पृष्ठ का पूरा कोड प्रदान नहीं करते हैं, लेकिन केवल टैग के बीच क्या होना चाहिए …

.

लिस्टिंग 2. HTML5 सिमेंटिक ब्लॉक रखना

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

आइए मुखौटा को पेंट करें

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

हम यहां जो कोड देंगे उनमें से अधिकांश प्रारंभिक CSS मानकों में उपलब्ध थे। हम नई सुविधाओं की सूची देंगे।

डब्बे की छाया
यह पैरामीटर पृष्ठ के ब्लॉक तत्व के लिए निर्दिष्ट है, और इसके चारों ओर एक छाया बनाता है। पहले चार नंबर क्रमशः छाया के रैखिक पैरामीटर हैं, या तो पिक्सेल में इंगित किए जाते हैं पिक्सल, या अन्य रैखिक इकाइयाँ ( एम, पीटीई), या उनके बिना, शून्य आकार के मामले में। पहली संख्या का अर्थ है - दाईं ओर छाया की क्षैतिज कास्टिंग, यदि आप इसे बाईं ओर बनाना चाहते हैं - एक नकारात्मक संख्या डालें। अगला - लंबवत नीचे, मेकअप करने के लिए - एक नकारात्मक संख्या डालें। अगला छाया धुंधला की मात्रा है, फिर छाया फैलती है। रैखिक आयामों के बाद, छाया का रंग इंगित किया जाता है, और यदि आप एक आंतरिक छाया चाहते हैं, तो कीवर्ड इनसेट. यदि एक छाया आपके लिए पर्याप्त नहीं है, तो अपनी छाया कल्पनाओं को अल्पविराम से अलग करके महसूस करें।

पाठ की छाया
यह पैरामीटर पिछले एक की सेटिंग में समान है, केवल अंतर छाया प्रसार और आंतरिक छाया की अनुपस्थिति है। और कोई भी आपको अल्पविराम से अलग किए गए छायाओं की संख्या के बारे में कल्पना करने के लिए परेशान नहीं करता है।

सीमा-त्रिज्या (-मोज़-सीमा-त्रिज्या, -वेबकिट-सीमा-त्रिज्या)
ब्लॉक त्रिज्या। ब्लॉक में क्रमशः चार कोने हो सकते हैं, और इस पैरामीटर में समान संख्या में तत्व हो सकते हैं। ऊपरी बाएँ कोने से दक्षिणावर्त सूचीबद्ध। कोष्ठक में दिए गए पैरामीटर नाम Mozilla परिवार के ब्राउज़र और वेबकिट इंजन (Chrome, Safari) पर उपयोग किए जाते हैं। तो नियम के लिए निर्दिष्ट सेटिंग्स में डुप्लिकेट करें बॉर्डर-त्रिज्यामापदंडों के इस जोड़े में भी।

हम जिस डिज़ाइन के साथ आए हैं और उसे कोडित किया गया है, वह लिस्टिंग #3 जैसा दिखेगा। यह कोड आपको एक फाइल में डालने की जरूरत है Styles.css.

लिस्टिंग 3. नए HTML5 सिमेंटिक तत्वों के लिए CSS

* (फ़ॉन्ट-फ़ैमिली: ल्यूसिडा सैंस, एरियल, हेल्वेटिका, सेन्स-सेरिफ़; ) बॉडी (चौड़ाई: 480पीएक्स; मार्जिन: 0पीएक्स ऑटो; ) हैडर.मेनएच (-वेबकिट-बॉर्डर-त्रिज्या: 6पीएक्स; -मोज़-बॉर्डर-त्रिज्या: 6px; सीमा-त्रिज्या: 6px; -वेबकिट-बॉक्स-छाया: 0 3px 5px 0 #AA4400; -मोज़-बॉक्स-छाया: 0 3px 5px 0 #AA4400; बॉक्स-छाया: 0 3px 5px 0 #AA4400; पैडिंग: 5px ; टेक्स्ट-एलाइन: सेंटर; ) हैडर h1 (फ़ॉन्ट-साइज़: 36पीएक्स; मार्जिन: 0पीएक्स; ) हैडर एच2 (फ़ॉन्ट-साइज़: 18पीएक्स; मार्जिन: 0पीएक्स; रंग: #888; फॉन्ट-स्टाइल: इटैलिक; ) एनएवी उल ( सूची-शैली: कोई नहीं; पैडिंग: 0px; प्रदर्शन: ब्लॉक; स्पष्ट: दाएँ; पृष्ठभूमि-रंग: #666; गद्दी-बाएँ: 4px; ऊँचाई: 24px; -वेबकिट-सीमा-त्रिज्या: 12px; -मोज़-बॉर्डर-त्रिज्या : 12पीएक्स; बॉर्डर-त्रिज्या: 12पीएक्स; ) नेव उल ली (डिस्प्ले: इनलाइन; पैडिंग: 0पीएक्स 20पीएक्स 5पीएक्स 10पीएक्स; ऊंचाई: 24पीएक्स; बॉर्डर-राइट: 1पीएक्स सॉलिड #सीसीसी; ) नेव उल ली ए (रंग: #EFD3D3; टेक्स्ट -सजावट: कोई नहीं; फ़ॉन्ट-आकार: 13पीएक्स; फ़ॉन्ट-वेट: बोल्ड; ) नेवी उल ली ए: होवर (रंग: #fff;) लेख> हेडर समय (फ़ॉन्ट-आकार: 14पीएक्स; प्रदर्शन: ब्लॉक; चौड़ाई: 26पीएक्स; पैडिंग: 2px;t एक्सट-एलाइन: केंद्र; पृष्ठभूमि-रंग: #993333; रंग: #fff; फोंट की मोटाई: बोल्ड; -मोज़-बॉर्डर-त्रिज्या: 6px; -वेबकिट-सीमा-त्रिज्या: 6px; सीमा-त्रिज्या: 6px बाईंओर तैरना; मार्जिन-बॉटम: 10px; ) लेख> शीर्ष लेख समय अवधि (फ़ॉन्ट-आकार: 10px; फ़ॉन्ट-भार: सामान्य; पाठ-रूपांतरण: अपरकेस;) लेख> शीर्षलेख h1 (फ़ॉन्ट-आकार: 20px; फ्लोट: बाएँ; मार्जिन-बाएँ: 14px; पाठ-छाया : 2px 2px 1px #FFFFFF, 2px 2px 5px #888; ) लेख> शीर्ष लेख h1 a (रंग: #993333; पाठ-सजावट: कोई नहीं;) लेख> अनुभाग शीर्षलेख h1 (फ़ॉन्ट-आकार: 16px;) लेख p (स्पष्ट: दोनों; ) पाद लेख p (पाठ-संरेखण: केंद्र; फ़ॉन्ट-आकार: 12पीएक्स; रंग: #888; मार्जिन-टॉप: 24पीएक्स; ) लेख > अनुभाग (-मोज़-बॉर्डर-त्रिज्या: 6पीएक्स 0 00; -वेबकिट-बॉर्डर -त्रिज्या:6px 0 0 0; सीमा-त्रिज्या: 6px 0 0 0; बॉक्स-छाया: 3px 3px 3px 0 #FFAA88 इनसेट; पैडिंग: 5px; रंग: #665588; मार्जिन-टॉप: 40px; )

यदि आप अभी अपना इंडेक्स पेज खोलते हैं, तो यह पहले से ही दिखेगा, इतना सुस्त नहीं, चित्र 1 को देखें। पिछले दृश्य की तुलना में, यह सिर्फ सुपर होगा

चित्र 1. स्टाइल पेज व्यू

यदि पेज अलग दिखता है, तो आपने इसे गलत ब्राउज़र में खोला है। "गलत" से मेरा मतलब Mozilla4+, Chrome11.0+, Opera11.10+ के अलावा किसी अन्य ब्राउज़र से है, वे पेज को उसी तरह दिखाते हैं - चेक किया गया।

नोट: यदि कोई व्यक्ति लिस्टिंग में नियम प्रविष्टियों को नहीं समझता है, उदाहरण के लिए, आप यह नहीं समझते हैं कि आपको चयनकर्ता में > का उपयोग करने की आवश्यकता क्यों है? फिर अपने सवाल कमेंट में लिखें।

नमस्कार, प्रिय ब्लॉग पाठकों। आज हम नए HTML5 वेब पेज मार्कअप की मूल बातें के बारे में ज्यादा नहीं सीखेंगे। हम यह भी सीखेंगे कि अपनी मौजूदा साइट का इस नई HTML भाषा में अनुवाद कैसे करें।

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

इसलिए मैं आपको HTML5 पर स्विच करने की सलाह देता हूं, क्योंकि सब कुछ नया लगभग हमेशा बेहतर होता है, और निश्चित रूप से, बहुत आसान और अधिक सुविधाजनक।

डिव लेआउट (पुराना)

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

जैसा कि आप कोड से देख सकते हैं, प्रत्येक div की अपनी कक्षा होती है। उदाहरण के लिए, हेडरइनर क्लास वाला एक डिव एक साइट हेडर ब्लॉक है जिसे क्रमशः सीएसएस शैलियों में वर्णित किया गया है, रैपर क्लास वाला एक डिव मुख्य ब्लॉक है जिसमें पोस्ट के साथ 2 ब्लॉक होते हैं और एक साइड कॉलम होता है जिसमें colLeft कक्षाएं होती हैं। - पोस्ट के साथ बायाँ ब्लॉक और दाएँ कॉलम को colRight। और निश्चित रूप से, मैं footerInner वर्ग के तहत पाद लेख ब्लॉक के बारे में नहीं भूला।

इतने आसान तरीके से हमें एक ग्रिड मिला जिसमें से एक पूरी वेबसाइट निकलती है। या एक टेम्पलेट जैसे मेरे ब्लॉग पर।

लेकिन अब हमें इस कोड को HTML5 में अनुवाद करने की आवश्यकता है, लेकिन यह पता चला है कि यह नया मानक अपने साथ कुछ नए टैग लेकर आया है जिन्हें आपको हमारे कोड का अनुवाद करने से पहले जानना आवश्यक है।

HTML5 टैग

सबसे पहले, आइए उन टैगों को देखें जो पहले स्थान पर उपयोग किए जाते हैं, दूसरे शब्दों में, मुख्य: