एचटीएमएल ट्यूटोरियल

एचटीएमएल होम एचटीएमएल परिचय एचटीएमएल संपादक एचटीएमएल बेसिक एचटीएमएल तत्व एचटीएमएल गुण एचटीएमएल शीर्षक एचटीएमएल पैराग्राफ एचटीएमएल शैलियाँ एचटीएमएल स्वरूपण एचटीएमएल कोटेशन एचटीएमएल टिप्पणियाँ एचटीएमएल रंग एचटीएमएल सीएसएस एचटीएमएल लिंक एचटीएमएल छवियाँ एचटीएमएल फ़ेविकॉन एचटीएमएल टेबल्स एचटीएमएल सूचियां एचटीएमएल ब्लॉक और इनलाइन एचटीएमएल क्लासेस एचटीएमएल आईडी एचटीएमएल इफ्रेम्स एचटीएमएल जावास्क्रिप्ट HTML फ़ाइल पथ एचटीएमएल हेड एचटीएमएल लेआउट एचटीएमएल उत्तरदायी एचटीएमएल कंप्यूटर कोड HTML शब्दार्थ एचटीएमएल स्टाइल गाइड एचटीएमएल इकाइयां एचटीएमएल प्रतीक एचटीएमएल इमोजी एचटीएमएल वर्णसेट एचटीएमएल यूआरएल एनकोड एचटीएमएल बनाम एक्सएचटीएमएल

एचटीएमएल फॉर्म

एचटीएमएल फॉर्म एचटीएमएल फॉर्म गुण एचटीएमएल फॉर्म एलिमेंट्स एचटीएमएल इनपुट प्रकार एचटीएमएल इनपुट गुण HTML इनपुट फॉर्म विशेषताएँ

एचटीएमएल ग्राफिक्स

एचटीएमएल कैनवास एचटीएमएल एसवीजी

एचटीएमएल मीडिया

एचटीएमएल मीडिया एचटीएमएल वीडियो एचटीएमएल ऑडियो एचटीएमएल प्लग-इन एचटीएमएल यूट्यूब

एचटीएमएल एपीआई

एचटीएमएल जियोलोकेशन एचटीएमएल ड्रैग/ड्रॉप एचटीएमएल वेब स्टोरेज एचटीएमएल वेब वर्कर्स एचटीएमएल एसएसई

एचटीएमएल उदाहरण

एचटीएमएल उदाहरण एचटीएमएल प्रश्नोत्तरी एचटीएमएल व्यायाम एचटीएमएल प्रमाणपत्र एचटीएमएल सारांश एचटीएमएल अभिगम्यता

एचटीएमएल संदर्भ

एचटीएमएल टैग सूची एचटीएमएल गुण HTML वैश्विक गुण एचटीएमएल ब्राउज़र समर्थन एचटीएमएल घटनाक्रम एचटीएमएल रंग एचटीएमएल कैनवास एचटीएमएल ऑडियो/वीडियो एचटीएमएल सिद्धांत एचटीएमएल कैरेक्टर सेट एचटीएमएल यूआरएल एनकोड एचटीएमएल लैंग कोड HTTP संदेश HTTP तरीके पीएक्स से ईएम कन्वर्टर कुंजीपटल अल्प मार्ग

एचटीएमएल शैलियाँ - सीएसएस


CSS का मतलब कैस्केडिंग स्टाइल शीट्स है।

CSS बहुत काम बचाता है। यह एक साथ कई वेब पेजों के लेआउट को नियंत्रित कर सकता है।


सीएसएस = शैलियाँ और रंग

टेक्स्ट में हेरफेर करें
रंग,  बक्से


सीएसएस क्या है?

कैस्केडिंग स्टाइल शीट्स (सीएसएस) का उपयोग वेबपेज के लेआउट को प्रारूपित करने के लिए किया जाता है।

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

युक्ति: कैस्केडिंग शब्द का अर्थ है कि मूल तत्व पर लागू शैली माता-पिता के भीतर सभी बच्चों के तत्वों पर भी लागू होगी। इसलिए, यदि आप मुख्य भाग के पाठ का रंग "नीला" पर सेट करते हैं, तो सभी शीर्षकों, अनुच्छेदों और मुख्य भाग के अन्य पाठ तत्वों को भी एक ही रंग मिलेगा (जब तक कि आप कुछ और निर्दिष्ट नहीं करते)!


सीएसएस का उपयोग करना

CSS को HTML दस्तावेज़ों में 3 तरीकों से जोड़ा जा सकता है:

  • इनलाइनstyle - HTML तत्वों के अंदर विशेषता का उपयोग करके
  • आंतरिक - अनुभाग <style>में एक तत्व का उपयोग करके<head>
  • बाहरी - <link> बाहरी सीएसएस फ़ाइल से लिंक करने के लिए एक तत्व का उपयोग करके

CSS जोड़ने का सबसे आम तरीका है, शैलियों को बाहरी CSS फाइलों में रखना। हालाँकि, इस ट्यूटोरियल में हम इनलाइन और आंतरिक शैलियों का उपयोग करेंगे, क्योंकि यह प्रदर्शित करना आसान है, और आपके लिए इसे स्वयं आज़माना आसान है।


इनलाइन सीएसएस

एक इनलाइन CSS का उपयोग एक HTML तत्व में एक अनूठी शैली लागू करने के लिए किया जाता है।

एक इनलाइन सीएसएस styleएक HTML तत्व की विशेषता का उपयोग करता है।

निम्न उदाहरण तत्व के टेक्स्ट रंग <h1>को नीला और तत्व के टेक्स्ट रंग <p>को लाल रंग में सेट करता है:

उदाहरण

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


आंतरिक सीएसएस

एक HTML पृष्ठ के लिए शैली को परिभाषित करने के लिए एक आंतरिक CSS का उपयोग किया जाता है।

एक आंतरिक सीएसएस एक तत्व <head>के भीतर एक HTML पृष्ठ के अनुभाग में परिभाषित किया गया है।<style>

निम्न उदाहरण सभी <h1>तत्वों (उस पृष्ठ पर) के टेक्स्ट रंग को नीला और सभी <p>तत्वों के टेक्स्ट रंग को लाल रंग में सेट करता है। इसके अलावा, पृष्ठ को "पाउडरब्लू" पृष्ठभूमि रंग के साथ प्रदर्शित किया जाएगा: 

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

बाहरी सीएसएस

कई HTML पृष्ठों के लिए शैली को परिभाषित करने के लिए एक बाहरी स्टाइल शीट का उपयोग किया जाता है।

बाहरी स्टाइल शीट का उपयोग करने के लिए, <head>प्रत्येक HTML पृष्ठ के अनुभाग में इसमें एक लिंक जोड़ें:

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

बाहरी स्टाइल शीट को किसी भी टेक्स्ट एडिटर में लिखा जा सकता है। फ़ाइल में कोई HTML कोड नहीं होना चाहिए, और इसे .css एक्सटेंशन के साथ सहेजा जाना चाहिए।

यहाँ "styles.css" फ़ाइल कैसी दिखती है:

"styles.css":

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

युक्ति: बाहरी स्टाइल शीट के साथ, आप एक फ़ाइल को बदलकर, पूरी वेब साइट का रूप बदल सकते हैं!


सीएसएस रंग, फ़ॉन्ट और आकार

यहां, हम कुछ सामान्य रूप से उपयोग किए जाने वाले CSS गुणों को प्रदर्शित करेंगे। आप उनके बारे में बाद में जानेंगे।

CSS colorगुण उपयोग किए जाने वाले टेक्स्ट रंग को परिभाषित करता है।

CSS font-familyगुण उपयोग किए जाने वाले फ़ॉन्ट को परिभाषित करता है।

CSS font-sizeगुण उपयोग किए जाने वाले टेक्स्ट आकार को परिभाषित करता है।

उदाहरण

CSS रंग, फ़ॉन्ट-परिवार और फ़ॉन्ट-आकार के गुणों का उपयोग:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

सीएसएस बॉर्डर

CSS borderगुण एक HTML तत्व के चारों ओर एक सीमा को परिभाषित करता है।

युक्ति: आप लगभग सभी HTML तत्वों के लिए एक सीमा निर्धारित कर सकते हैं।

उदाहरण

सीएसएस सीमा संपत्ति का उपयोग: 

p {
  border: 2px solid powderblue;
}

सीएसएस पैडिंग

CSS paddingगुण टेक्स्ट और बॉर्डर के बीच एक पैडिंग (स्पेस) को परिभाषित करता है।

उदाहरण

CSS बॉर्डर और पैडिंग गुणों का उपयोग:

p {
  border: 2px solid powderblue;
  padding: 30px;
}

सीएसएस मार्जिन

CSS marginसंपत्ति सीमा के बाहर एक मार्जिन (स्थान) को परिभाषित करती है।

उदाहरण

CSS बॉर्डर और मार्जिन गुणों का उपयोग:

p {
  border: 2px solid powderblue;
  margin: 50px;
}

बाहरी सीएसएस से लिंक करें

बाहरी स्टाइल शीट को एक पूर्ण यूआरएल या वर्तमान वेब पेज के सापेक्ष पथ के साथ संदर्भित किया जा सकता है।

उदाहरण

यह उदाहरण स्टाइल शीट से लिंक करने के लिए एक पूर्ण URL का उपयोग करता है:

<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">

उदाहरण

यह उदाहरण वर्तमान वेब साइट पर html फ़ोल्डर में स्थित स्टाइल शीट से लिंक करता है: 

<link rel="stylesheet" href="/html/styles.css">

उदाहरण

यह उदाहरण वर्तमान पृष्ठ के समान फ़ोल्डर में स्थित स्टाइल शीट से लिंक करता है:

<link rel="stylesheet" href="styles.css">

आप फ़ाइल पथों के बारे में और अधिक अध्याय HTML फ़ाइल पथ में पढ़ सकते हैं ।


अध्याय का सारांश

  • styleइनलाइन स्टाइलिंग के लिए HTML विशेषता का उपयोग करें
  • <style>आंतरिक सीएसएस को परिभाषित करने के लिए HTML तत्व का प्रयोग करें
  • <link>बाहरी CSS फ़ाइल को संदर्भित करने के लिए HTML तत्व का उपयोग करें
  • <head><शैली> और <लिंक> तत्वों को संग्रहीत करने के लिए HTML तत्व का उपयोग करें
  • colorटेक्स्ट रंगों के लिए CSS गुण का उपयोग करें
  • font-familyटेक्स्ट फॉन्ट के लिए CSS प्रॉपर्टी का उपयोग करें
  • font-sizeटेक्स्ट साइज के लिए CSS प्रॉपर्टी का इस्तेमाल करें
  • borderबॉर्डर के लिए CSS प्रॉपर्टी का उपयोग करें
  • paddingसीमा के अंदर जगह के लिए सीएसएस संपत्ति का प्रयोग करें
  • marginसीमा के बाहर स्थान के लिए CSS गुण का उपयोग करें

युक्ति: आप हमारे सीएसएस ट्यूटोरियल में सीएसएस के बारे में और जान सकते हैं


एचटीएमएल व्यायाम

व्यायाम के साथ खुद को परखें

व्यायाम:

दस्तावेज़ (बॉडी) की पृष्ठभूमि का रंग पीला करने के लिए CSS का उपयोग करें।

<!DOCTYPE html>
<html>
<सिर>
<शैली>

  :पीला;

</style>
</head>
<body>

<h1>मेरा होम पेज</h1>

</body>
</html>


HTML स्टाइल Tags

Tag Description
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource

सभी उपलब्ध HTML टैग्स की पूरी सूची के लिए, हमारे HTML टैग संदर्भ पर जाएं ।