HTML5 और CSS3 संक्षिप्त मार्गदर्शिका: टैग, गुणधर्म, और ऑनलाइन HTML व्यूअर के साथ HTML पेजों का पूर्वावलोकन कैसे करें
क्या आपको कोई विशिष्ट HTML टैग या CSS गुणधर्म याद रखने में मुश्किल होती है? यह मार्गदर्शिका आपके लिए है। यह अंतिम एचटीएमएल संक्षिप्त मार्गदर्शिका सबसे आवश्यक HTML5 टैग और CSS3 गुणधर्मों को कवर करती है, जिसमें व्यावहारिक कोड स्निपेट्स भी शामिल हैं। क्या आप सोच रहे हैं कि स्थानीय सर्वर के बिना एचटीएमएल पेज का पूर्वावलोकन कैसे करें? हमारे एकीकृत ऑनलाइन एचटीएमएल व्यूअर का उपयोग करके हर उदाहरण को तुरंत परीक्षण और विज़ुअलाइज़ करना सीखें, एक तेज़ और अधिक कुशल कार्यप्रवाह के लिए।
अंतिम HTML5 टैग सूची: अपनी वेब सामग्री को संरचित करें
HTML (हाइपरटेक्स्ट मार्कअप लैंग्वेज) हर वेबपेज की रीढ़ है। HTML5 ने अर्थपूर्ण तत्व पेश किए जो आपकी सामग्री को स्पष्ट अर्थ देते हैं, जिससे पहुंच और SEO दोनों में सुधार होता है। यहां उन टैगों का विवरण दिया गया है जिनका आप सबसे अधिक उपयोग करेंगे।
मुख्य दस्तावेज़ संरचना और मेटाडेटा
ये टैग किसी भी HTML दस्तावेज़ का कंकाल बनाते हैं, जो ब्राउज़र और सर्च इंजन को आवश्यक जानकारी प्रदान करते हैं।
| टैग | विवरण |
|---|---|
<!DOCTYPE html> | दस्तावेज़ प्रकार को HTML5 घोषित करता है। |
<html> | एक HTML पेज का रूट तत्व। |
<head> | दस्तावेज़ के बारे में मेटा-सूचना शामिल करता है। |
<title> | ब्राउज़र टैब और खोज परिणामों के लिए शीर्षक निर्दिष्ट करता है। |
<meta> | कैरेक्टर सेट, व्यूपोर्ट सेटिंग्स और विवरण जैसे मेटाडेटा प्रदान करता है। |
<link> | बाहरी संसाधनों से लिंक करता है, मुख्य रूप से CSS स्टाइलशीट से। |
<script> | निष्पादन योग्य जावास्क्रिप्ट कोड को एम्बेड या लिंक करता है। |
<body> | दृश्यमान पृष्ठ सामग्री शामिल करता है। |
अर्थपूर्ण अनुभाग और समूहीकरण तत्व
अपनी सामग्री को तार्किक रूप से संरचित करने के लिए इन टैगों का उपयोग करें, जिससे आपके पेज लेआउट के विभिन्न हिस्सों को अर्थ मिले।
| टैग | विवरण |
|---|---|
<header> | किसी अनुभाग या पूरे पेज के लिए परिचयात्मक सामग्री का प्रतिनिधित्व करता है। |
<nav> | नेविगेशन लिंक शामिल करता है। |
<main> | दस्तावेज़ की मुख्य, प्रमुख सामग्री को निर्दिष्ट करता है। |
<article> | एक स्व-निहित रचना को परिभाषित करता है (जैसे, एक ब्लॉग पोस्ट, फोरम पोस्ट)। |
<section> | एक दस्तावेज़ के एक स्टैंडअलोन अनुभाग का प्रतिनिधित्व करता है। |
<aside> | मुख्य सामग्री के अतिरिक्त सामग्री को परिभाषित करता है (जैसे, एक साइडबार)। |
<footer> | किसी अनुभाग या पूरे पेज के लिए फ़ुटर का प्रतिनिधित्व करता है। |
<div> | प्रवाह सामग्री के लिए एक सामान्य कंटेनर जिसका कोई अर्थपूर्ण अर्थ नहीं है। |
पाठ-स्तर अर्थपूर्णता और हाइपरलिंक
इन टैगों का उपयोग टेक्स्ट को फॉर्मेट करने और अर्थ देने के लिए किया जाता है, शीर्षकों और पैराग्राफों से लेकर लिंक तक।
| टैग | विवरण |
|---|---|
<h1> से <h6> | हेडिंग स्तर, जिसमें <h1> सबसे महत्वपूर्ण है। |
<p> | एक पैराग्राफ को परिभाषित करता है। |
<a> | एक हाइपरलिंक बनाता है। href विशेषता URL निर्दिष्ट करती है। |
<strong> | मजबूत महत्व वाले टेक्स्ट को इंगित करता है (आमतौर पर बोल्ड)। |
<em> | जोर दिए गए टेक्स्ट को इंगित करता है (आमतौर पर इटैलिक)। |
<span> | टेक्स्ट सामग्री के लिए एक सामान्य इनलाइन कंटेनर। |
<br> | एक एकल लाइन ब्रेक डालता है। |
<blockquote> | एक ऐसे अनुभाग को परिभाषित करता है जिसे किसी अन्य स्रोत से उद्धृत किया गया है। |
फ़ॉर्म, इनपुट और इंटरैक्टिव तत्व
उपयोगकर्ता इंटरैक्शन के लिए फ़ॉर्म महत्वपूर्ण हैं। ये टैग आपको उपयोगकर्ता इनपुट एकत्र करने की अनुमति देते हैं।
| टैग | विवरण |
|---|---|
<form> | उपयोगकर्ता इनपुट के लिए एक HTML फ़ॉर्म बनाने का एक कंटेनर। |
<input> | सबसे बहुमुखी फ़ॉर्म तत्व; प्रकार type विशेषता द्वारा परिभाषित होता है (जैसे, text, password, checkbox, submit)। |
<textarea> | एक मल्टी-लाइन टेक्स्ट इनपुट नियंत्रण को परिभाषित करता है। |
<label> | एक <input> तत्व के लिए एक लेबल को परिभाषित करता है। |
<button> | एक क्लिक करने योग्य बटन को परिभाषित करता है। |
<select> | एक ड्रॉप-डाउन सूची बनाता है। |
<option> | एक <select> सूची के भीतर एक विकल्प को परिभाषित करता है। |
मीडिया, एम्बेड्स और बाहरी सामग्री
छवियों, वीडियो और अन्य एम्बेडेड सामग्री के साथ अपने पृष्ठों को जीवंत बनाएं।
| टैग | विवरण |
|---|---|
<img> | एक छवि को एम्बेड करता है। src (स्रोत) और alt (वैकल्पिक टेक्स्ट) विशेषताएँ आवश्यक हैं। |
<video> | एक वीडियो प्लेयर को एम्बेड करता है। |
<audio> | एक ध्वनि सामग्री प्लेयर को एम्बेड करता है। |
<iframe> | वर्तमान HTML दस्तावेज़ के भीतर किसी अन्य दस्तावेज़ को एम्बेड करने के लिए एक इनलाइन फ्रेम निर्दिष्ट करता है। |
सूचियां और तालिकाएँ: डेटा को प्रभावी ढंग से व्यवस्थित करना
सूचियों और तालिकाओं के साथ संबंधित वस्तुओं या सारणीबद्ध डेटा को स्पष्ट रूप से संरचित करें।
| टैग | विवरण |
|---|---|
<ul> | एक अनऑर्डर (बुलेटेड) सूची को परिभाषित करता है। |
<ol> | एक ऑर्डर (नंबर वाली) सूची को परिभाषित करता है। |
<li> | एक <ul> या <ol> के भीतर एक सूची आइटम को परिभाषित करता है। |
<table> | एक तालिका को परिभाषित करता है। |
<tr> | एक तालिका में एक पंक्ति को परिभाषित करता है। |
<th> | एक तालिका में एक हेडर सेल को परिभाषित करता है। |
<td> | एक तालिका में एक मानक डेटा सेल को परिभाषित करता है। |
<caption> | एक तालिका कैप्शन को परिभाषित करता है। |
आवश्यक CSS3 गुणधर्म सूची: अपने वेब पृष्ठों को एक पेशेवर की तरह स्टाइल करें
CSS (कैस्केडिंग स्टाइल शीट्स) आपके HTML को जीवंत बनाता है, लेआउट, रंगों, फोंट और समग्र दृश्य उपस्थिति को नियंत्रित करता है। यह सीएसएस संक्षिप्त मार्गदर्शिका उन गुणधर्मों को शामिल करती है जिन्हें आपको किसी भी डिज़ाइन में महारत हासिल करने की आवश्यकता होगी।
CSS चयनकर्ता और विशिष्टता
चयनकर्ता उन HTML तत्वों को लक्षित करते हैं जिन्हें आप स्टाइल करना चाहते हैं। उन्हें समझना CSS का प्रभावी ढंग से उपयोग करने का पहला कदम है।
| चयनकर्ता | उदाहरण | विवरण |
|---|---|---|
| प्रकार | p | सभी <p> तत्वों का चयन करता है। |
| क्लास | .my-class | class="my-class" वाले सभी तत्वों का चयन करता है। |
| ID | #my-id | id="my-id" वाले एकल तत्व का चयन करता है। |
| विशेषता | [href] | href विशेषता वाले सभी तत्वों का चयन करता है। |
| वंशज | article p | <article> के भीतर सभी <p> तत्वों का चयन करता है। |
| छद्म-वर्ग | a:hover | जब उपयोगकर्ता उस पर माउस घुमाता है तो एक लिंक का चयन करता है। |
बॉक्स मॉडल और आकार निर्धारण गुणधर्म
पृष्ठ पर प्रत्येक तत्व एक आयताकार बॉक्स होता है। बॉक्स मॉडल परिभाषित करता है कि इसका आकार, पैडिंग, बॉर्डर और मार्जिन एक साथ कैसे काम करते हैं।
| गुणधर्म | उदाहरण मान | विवरण |
|---|---|---|
width | 100px, 50%, auto | एक तत्व की चौड़ाई सेट करता है। |
height | 100px, 50vh, auto | एक तत्व की ऊंचाई सेट करता है। |
padding | 10px, 5px 10px | सामग्री और बॉर्डर के बीच की जगह सेट करता है। |
border | 1px solid black | बॉर्डर की चौड़ाई, शैली और रंग सेट करने के लिए एक शॉर्टहैंड। |
margin | 10px, 5px 10px | बॉर्डर के बाहर, तत्वों के बीच की जगह सेट करता है। |
box-sizing | border-box | पैडिंग और बॉर्डर सहित width और height की गणना कैसे की जाती है, इसे बदलता है। |
टाइपोग्राफी और टेक्स्ट स्टाइलिंग
पठनीय और सौंदर्यपूर्ण रूप से मनभावन सामग्री बनाने के लिए टेक्स्ट कैसा दिखता है इसे नियंत्रित करें।
| गुणधर्म | उदाहरण मान | विवरण |
|---|---|---|
font-family | "Arial", sans-serif | एक तत्व के लिए फ़ॉन्ट निर्दिष्ट करता है। |
font-size | 16px, 1.2em, 1rem | टेक्स्ट का आकार सेट करता है। |
font-weight | normal, bold, 700 | फ़ॉन्ट की मोटाई सेट करता है। |
color | black, #333, rgb(0,0,0) | टेक्स्ट का रंग सेट करता है। |
text-align | left, center, right | एक तत्व के भीतर टेक्स्ट को संरेखित करता है। |
line-height | 1.5 | टेक्स्ट की पंक्तियों के बीच की दूरी सेट करता है। |
फ्लेक्सबॉक्स के साथ लचीले लेआउट
फ्लेक्सबॉक्स पंक्तियों या स्तंभों में वस्तुओं को व्यवस्थित करने के लिए एक आयामी लेआउट मॉडल है। यह उत्तरदायी लेआउट बनाना सहज बनाता है।
| गुणधर्म (कंटेनर) | उदाहरण मान | विवरण |
|---|---|---|
display | flex | फ्लेक्सबॉक्स लेआउट मॉडल को सक्षम करता है। |
flex-direction | row, column | मुख्य अक्ष की दिशा परिभाषित करता है। |
justify-content | center, space-between | मुख्य अक्ष के साथ वस्तुओं को संरेखित करता है। |
align-items | center, stretch | क्रॉस अक्ष के साथ वस्तुओं को संरेखित करता है। |
flex-wrap | nowrap, wrap | वस्तुओं को कई लाइनों पर लपेटने की अनुमति देता है। |
CSS ग्रिड के साथ ग्रिड-आधारित लेआउट
CSS ग्रिड एक शक्तिशाली दो-आयामी लेआउट सिस्टम है, जो आपको स्तंभों और पंक्तियों दोनों को एक साथ नियंत्रित करने की अनुमति देता है।
| गुणधर्म (कंटेनर) | उदाहरण मान | विवरण |
|---|---|---|
display | grid | ग्रिड लेआउट मॉडल को सक्षम करता है। |
grid-template-columns | 1fr 1fr 100px, repeat(3, 1fr) | ग्रिड के स्तंभों को परिभाषित करता है। |
grid-template-rows | auto 100px | ग्रिड की पंक्तियों को परिभाषित करता है। |
gap | 10px | ग्रिड कोशिकाओं के बीच के अंतर का आकार सेट करता है। |
पृष्ठभूमि, बॉर्डर और छाया
इन सजावटी गुणधर्मों से अपने तत्वों में गहराई और शैली जोड़ें।
| गुणधर्म | उदाहरण मान | विवरण |
|---|---|---|
background-color | lightblue, #f0f0f0 | एक तत्व का पृष्ठभूमि रंग सेट करता है। |
background-image | url('image.jpg') | एक पृष्ठभूमि छवि सेट करता है। |
border-radius | 5px, 50% | एक तत्व के बॉर्डर के कोनों को गोल करता है। |
box-shadow | 10px 5px 5px black | एक तत्व के फ्रेम के चारों ओर एक छाया प्रभाव जोड़ता है। |
संक्रमण, परिवर्तन और एनिमेशन
चिकने दृश्य प्रभावों के साथ गतिशील और इंटरैक्टिव उपयोगकर्ता इंटरफेस बनाएं।
| गुणधर्म | उदाहरण मान | विवरण |
|---|---|---|
transition | all 0.3s ease-in-out | दी गई अवधि में चिकने गुणधर्म परिवर्तनों को सक्षम करता है। |
transform | rotate(45deg), scale(1.2) | एक तत्व पर 2D या 3D परिवर्तन लागू करता है। |
animation | slide-in 1s forwards | एक नामित एनीमेशन लागू करने के लिए एक शॉर्टहैंड। |
Html व्यूअर आपका पसंदीदा ऑनलाइन HTML एडिटर और व्यूअर क्यों है
एक बेहतरीन संक्षिप्त मार्गदर्शिका होना एक बात है, लेकिन परिणामों को तुरंत लागू करने और देखने में सक्षम होना ही वास्तव में सीखने और विकास को गति देता है। यहीं पर Html व्यूअर जैसा ऑनलाइन एचटीएमएल एडिटर आपका सबसे शक्तिशाली सहयोगी बन जाता है।
तेजी से प्रयोग के लिए तत्काल लाइव पूर्वावलोकन
इस मार्गदर्शिका से किसी भी कोड स्निपेट को कॉपी करें, उसे हमारे एडिटर में पेस्ट करें, और उसे वास्तविक समय में रेंडर होते देखें। फ़ाइलों को सहेजने, विंडोज़ के बीच स्विच करने, या अपने ब्राउज़र को ताज़ा करने की कोई आवश्यकता नहीं है। यह तत्काल फीडबैक लूप CSS गुणधर्मों को पूर्णता के लिए समायोजित करने या यह समझने के लिए एकदम सही है कि एक नया HTML टैग आपकी सामग्री को कैसे संरचित करता है। आप अभी इन स्निपेट्स का परीक्षण कर सकते हैं और अपने लिए जादू देख सकते हैं।
कोड को आसानी से संपादित, सुव्यवस्थित और संकुचित करें
हमारा उपकरण केवल एक दर्शक से कहीं अधिक है। यह एक संपूर्ण कार्यप्रवाह समाधान है। यदि आपने विभिन्न स्रोतों से कोड एकत्र किया है, तो हमारे "सुव्यवस्थित करें" बटन पर एक क्लिक से यह एक स्वच्छ, पठनीय संरचना में फॉर्मेट हो जाएगा। जब आप तैनात करने के लिए तैयार हों, तो "संकुचित करें" फ़ंक्शन आपके कोड को संपीड़ित करता है, जिससे तेज़ पेज लोड के लिए यह अनुकूलित हो जाता है। यह ऑल-इन-वन कार्यक्षमता आपकी पूरी कोडिंग प्रक्रिया को सुव्यवस्थित करती है।
कहीं भी, कभी भी पहुंच: किसी सेटअप की आवश्यकता नहीं
भारी IDEs स्थापित करने या जटिल स्थानीय वातावरण कॉन्फ़िगर करने के बारे में भूल जाएं। यह ऑनलाइन HTML एडिटर पूरी तरह से आपके ब्राउज़र में चलता है। चाहे आप कॉफ़ी शॉप में लैपटॉप पर हों या लैब में साझा कंप्यूटर पर, आपका शक्तिशाली HTML और CSS सैंडबॉक्स हमेशा बस एक URL की दूरी पर उपलब्ध रहता है, जब भी प्रेरणा मिलती है, तैयार रहता है।
वेब विकास में तेजी से महारत हासिल करें: आपकी आवश्यक HTML और CSS संक्षिप्त मार्गदर्शिका
HTML5 और CSS3 के मूलभूत सिद्धांतों के लिए इस पृष्ठ को अपनी निश्चित मार्गदर्शिका के रूप में बुकमार्क करें। सही टैग या गुणधर्म को जल्दी से खोजने, उसके सिंटैक्स को समझने और आत्मविश्वास के साथ अपनी परियोजनाओं का निर्माण करने के लिए इसका उपयोग करें। इससे भी महत्वपूर्ण बात, इस ज्ञान को हमारे उपकरण की व्यावहारिक शक्ति के साथ मिलाएं। यहां हर स्निपेट प्रयोग करने और सीखने का अवसर है। इस संक्षिप्त मार्गदर्शिका को जीवंत करने और आज अपने कोडिंग वर्कफ़्लो को बदलने के लिए HtmlViewer.cc एडिटर पर जाएं।
HTML और CSS संक्षिप्त मार्गदर्शिकाओं के बारे में अक्सर पूछे जाने वाले प्रश्न
मैं किसी वेबसाइट या स्थानीय फ़ाइल से HTML कोड को जल्दी से कैसे देखूं?
सबसे आसान तरीका एक ऑनलाइन एचटीएमएल व्यूअर का उपयोग करना है। हमारे उपकरण के साथ, आप सीधे कोड पेस्ट कर सकते हैं, एक HTML फ़ाइल अपलोड कर सकते हैं, या लाइव वेबसाइट से HTML स्रोत कोड देखने के लिए एक URL भी दर्ज कर सकते हैं। एक बार लोड होने के बाद, आप कोड और उसके दृश्य पूर्वावलोकन को साथ-साथ देख सकते हैं, जिससे यह सीखने और डीबगिंग के लिए एकदम सही हो जाता है।
HTML और CSS संक्षिप्त मार्गदर्शिका क्या है, और यह क्यों उपयोगी है?
एक HTML और CSS संक्षिप्त मार्गदर्शिका एक संक्षिप्त संदर्भ मार्गदर्शिका है जो आमतौर पर उपयोग किए जाने वाले टैग, गुणधर्म, सिंटैक्स और अवधारणाओं को सूचीबद्ध करती है। यह सभी स्तरों के डेवलपर्स के लिए अविश्वसनीय रूप से उपयोगी है क्योंकि यह समय बचाता है, हर विवरण को याद रखने की आवश्यकता को समाप्त करता है, और समस्या निवारण और वेब पृष्ठों को कुशलतापूर्वक बनाने के लिए एक त्वरित, विश्वसनीय संसाधन के रूप में कार्य करता है।
क्या मैं इन HTML5 और CSS3 कोड स्निपेट्स को तुरंत ऑनलाइन परीक्षण कर सकता हूं?
बिल्कुल! हमारा प्लेटफ़ॉर्म विशेष रूप से इसी के लिए डिज़ाइन किया गया है। आप इस मार्गदर्शिका से कोई भी उदाहरण कॉपी कर सकते हैं, उसे हमारे होमपेज पर एडिटर में पेस्ट कर सकते हैं, और तुरंत लाइव पूर्वावलोकन पैनल में परिणाम देख सकते हैं। स्वतंत्र रूप से प्रयोग करें और वास्तव में समझें कि विभिन्न कोड संयोजन कैसे जीवंत होते हैं।
मैं कैसे सुनिश्चित कर सकता हूं कि मेरा HTML और CSS सुलभ और अच्छी तरह से संरचित हैं?
सही ढंग से अर्थपूर्ण HTML5 टैग (<main>, <nav>, <article>) का उपयोग करके शुरू करें, क्योंकि वे अंतर्निहित अर्थ प्रदान करते हैं। CSS के लिए, पर्याप्त रंग कंट्रास्ट सुनिश्चित करें और फ़ॉन्ट आकार के लिए rem जैसी उत्तरदायी इकाइयों का उपयोग करें। एक बेहतरीन अभ्यास यह है कि अपने कोड को हमारे एडिटर में पेस्ट करें और "सुव्यवस्थित करें" सुविधा का उपयोग करें। यह आपके कोड को उचित इंडेंटेशन के साथ फॉर्मेट करता है, जिससे संरचना की समीक्षा करना और संभावित समस्याओं को पहचानना बहुत आसान हो जाता है।