कैसे

HowTo होम

मेनू

चिह्न बार मेनू आइकन अकॉर्डियन टैब लंबवत टैब टैब हेडर पूरा पेज टैब होवर टैब शीर्ष नेविगेशन उत्तरदायी टोपनाव प्रतीक के साथ नेवबार खोज मेनू खोज पट्टी फिक्स्ड साइडबार पेज नेविगेशन उत्तरदायी साइडबार फ़ुलस्क्रीन नेविगेशन ऑफ-कैनवास मेनू होवर सिडेनव बटन प्रतीक के साथ साइडबार क्षैतिज स्क्रॉल मेनू लंबवत मेनू निचला नेविगेशन रिस्पॉन्सिव बॉटम नेवी बॉटम बॉर्डर एनएवी लिंक्स सही संरेखित मेनू लिंक केंद्रित मेनू लिंक समान चौड़ाई वाले मेनू लिंक निश्चित मेनू स्क्रॉल पर स्लाइड डाउन बार स्क्रॉल पर नेवबार छुपाएं स्क्रॉल पर नेवबार सिकोड़ें चिपचिपा नवबार छवि पर नवबार होवर ड्रॉपडाउन ड्रॉपडाउन पर क्लिक करें कैस्केडिंग ड्रॉपडाउन टोपनाव में ड्रॉपडाउन सिडेनव में ड्रॉपडाउन उत्तर नवबार ड्रॉपडाउन सबनेविगेशन मेनू ऊपर की ओर जाना मेगा मेनू मोबाइल मेनू परदा मेनू संक्षिप्त साइडबार संक्षिप्त साइडपैनल पृष्ठ पर अंक लगाना ब्रेडक्रम्ब्स बटन समूह लंबवत बटन समूह स्टिकी सोशल बार गोली नेविगेशन उत्तरदायी हैडर

इमेजिस

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

बटन

अलर्ट बटन रूपरेखा बटन स्प्लिट बटन एनिमेटेड बटन लुप्त होती बटन छवि पर बटन सोशल मीडिया बटन और पढ़ें कम पढ़ें लोड हो रहा है बटन डाउनलोड बटन गोली बटन अधिसूचना बटन चिह्न बटन अगला/पिछला बटन Nav . में और बटन ब्लॉक बटन टेक्स्ट बटन गोल बटन शीर्ष बटन पर स्क्रॉल करें

फार्म

लॉगिन फॉर्म साइनअप फॉर्म चेकआउट फॉर्म संपर्क करें प्रपत्र सोशल लॉग इन फॉर्म रजिस्टर फॉर्म प्रतीक के साथ प्रपत्र समाचार पत्रिका स्टैक्ड फॉर्म उत्तरदायी प्रपत्र पॉपअप फॉर्म इनलाइन फॉर्म इनपुट फ़ील्ड साफ़ करें संख्या तीर छुपाएं टेक्स्ट को क्लिपबोर्ड पर कॉपी करें एनिमेटेड खोज खोज बटन फ़ुलस्क्रीन खोज नवबार में इनपुट फील्ड नवबार में लॉगिन फॉर्म कस्टम चेकबॉक्स/रेडियो कस्टम चयन गिल्ली टहनी चेकबॉक्स चेक करें कैप्स लॉक का पता लगाएं एंटर पर ट्रिगर बटन पासवर्ड सत्यापन पासवर्ड दृश्यता टॉगल करें एकाधिक चरण प्रपत्र स्वत: पूर्ण स्वत: पूर्ण बंद करें वर्तनी जांच बंद करें फ़ाइल अपलोड बटन खाली इनपुट सत्यापन

फिल्टर

फ़िल्टर सूची फ़िल्टर तालिका फ़िल्टर तत्व ड्रॉपडाउन फ़िल्टर करें सूची क्रमबद्ध करें वर्तनी तालिका

टेबल

ज़ेबरा धारीदार तालिका सेंटर टेबल्स पूर्ण-चौड़ाई तालिका अगल-बगल टेबल्स उत्तरदायी टेबल्स तुलना तालिका

अधिक

फ़ुलस्क्रीन वीडियो मोडल बॉक्स मोडल हटाएं समय स्क्रॉल संकेतक प्रगति पट्टी कौशल बार रेंज स्लाइडर टूलटिप्स प्रदर्शन तत्व होवर पॉप अप खुलने और बंधनेवाला पंचांग एचटीएमएल शामिल है करने के लिए सूची लोडर स्टार रेटिंग यूजर रेटिंग ओवरले प्रभाव संपर्क चिप्स पत्ते फ़्लिप कार्ड प्रोफाइल कार्ड उत्पाद कार्ड अलर्ट पुकारें टिप्पणियाँ लेबल मंडलियां स्टाइल एचआर कूपन सूची समूह गोलियों के बिना सूची उत्तरदायी पाठ कटआउट टेक्स्ट चमकता हुआ पाठ निश्चित पाद लेख चिपचिपा तत्व समान ऊँचाई क्लियरफिक्स उत्तरदायी फ़्लोट्स काफ़ीहाउस फ़ुलस्क्रीन विंडो स्क्रॉल आरेखण चिकना स्क्रॉल ग्रेडियंट बीजी स्क्रॉल स्टिकी हैडर स्क्रॉल पर हैडर सिकोड़ें मूल्य निर्धारण तालिका लंबन आस्पेक्ट अनुपात उत्तरदायी इफ्रेम्स पसंद/नापसंद टॉगल करें टॉगल छुपाएं/दिखाएं डार्क मोड टॉगल करें टेक्स्ट टॉगल करें टॉगल क्लास कक्षा जोड़ें कक्षा हटाएं सक्रिय वर्ग ट्री व्यू संपत्ति निकालें ऑफलाइन डिटेक्शन छिपे हुए तत्व का पता लगाएं वेबपेज पुनर्निर्देशित करें ज़ूम होवर फ्लिप बॉक्स केंद्र लंबवत डीआईवी में केंद्र बटन होवर पर संक्रमण तीर आकार डाउनलोड लिंक पूर्ण ऊंचाई तत्व ब्राउज़र विंडो कस्टम स्क्रॉलबार स्क्रॉलबार छुपाएं स्क्रॉलबार दिखाएं/बल दें डिवाइस लुक सामग्री संपादन योग्य सीमा प्लेसहोल्डर रंग पाठ चयन रंग बुलेट रंग ऊर्ध्वाधर रेखा परकार चेतन प्रतीक काउंटडाउन टाइमर टाइपराइटर जल्द आ रहा है पेज चैट संदेश पॉपअप चैट विंडो विभाजित स्क्रीन प्रशंसापत्र अनुभाग काउंटर उद्धरण स्लाइड शो बंद करने योग्य सूची आइटम विशिष्ट डिवाइस ब्रेकप्वाइंट खींचने योग्य HTML तत्व जेएस मीडिया प्रश्न सिंटैक्स हाइलाइटर जे एस एनिमेशन जे एस स्ट्रिंग लंबाई जेएस घातांक जेएस डिफ़ॉल्ट पैरामीटर्स वर्तमान URL प्राप्त करें वर्तमान स्क्रीन आकार प्राप्त करें इफ्रेम तत्व प्राप्त करें

वेबसाइट

एक मुफ्त वेबसाइट बनाएं वेबसाइट बनाएं एक स्टेटिक वेबसाइट बनाएं एक वेबसाइट बनाएं (W3.CSS) एक वेबसाइट बनाएं (BS3) एक वेबसाइट बनाएं (बीएस 4) एक वेबसाइट बनाएं (BS5) वेबसाइट बनाएं और देखें एक लिंक ट्री वेबसाइट बनाएं एक पोर्टफोलियो बनाएं एक रिज्यूमे बनाएं एक रेस्तरां वेबसाइट बनाएं एक व्यवसाय वेबसाइट बनाएं एक वेबबुक बनाएं केंद्र वेबसाइट संपर्क अनुभाग पेज के बारे में बड़ा हैडर उदाहरण वेबसाइट

ग्रिड

2 कॉलम लेआउट 3 कॉलम लेआउट 4 कॉलम लेआउट ग्रिड का विस्तार सूची ग्रिड दृश्य मिश्रित कॉलम लेआउट कॉलम कार्ड ज़िग ज़ैग लेआउट ब्लॉग लेआउट

गूगल

गूगल चार्ट गूगल फ़ॉन्ट्स गूगल फॉन्ट पेयरिंग Google विश्लेषिकी सेट करें

कन्वर्टर्स

वजन बदलें तापमान परिवर्तित करें कन्वर्ट लंबाई कन्वर्ट स्पीड

ब्लॉग

एक डेवलपर नौकरी प्राप्त करें फ्रंट-एंड देव बनें।

कैसे करें - एक HTML बुक बनाएं


एक HTML बुक बनाना सीखें जो सभी डिवाइस, पीसी, लैपटॉप, टैबलेट और फोन पर काम करेगी।


सबसे पहले, एक बेसिक HTML पेज बनाएं

HTML वेबसाइट बनाने के लिए मानक मार्कअप भाषा है और CSS वह भाषा है जो HTML दस्तावेज़ की शैली का वर्णन करती है।

हम एक मूल HTML पुस्तक बनाने के लिए HTML और CSS को मिलाएंगे।

सबसे पहले HTML कंकाल से शुरुआत करें:

उदाहरण

<!DOCTYPE html>
<html>

<head>
<title>My Book</title>
<meta charset="UTF-8">
</head>

<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>

</html>

उदाहरण समझाया गया

  • <!DOCTYPE html> दस्तावेज़ प्रकार HTML है
  • <html> </html> दस्तावेज़ की शुरुआत और अंत
  • <head> </head>दस्तावेज़ जानकारी की शुरुआत और अंत
  • <title>किताब का शीर्षक ("मेरी किताब")
  • <meta charset="UTF-8">प्रयुक्त वर्ण सेट (UTF-8)
  • <body> </body>दृश्यमान सामग्री की शुरुआत और अंत
  • <h1> </h1>शीर्षक की शुरुआत और अंत
  • <p> </p>पैराग्राफ की शुरुआत और अंत

ऊपर वर्णित कोड HTML टैग हैं।

HTML टैग का उपयोग HTML दस्तावेज़ की सामग्री को परिभाषित करने के लिए किया जाता है।

टैग एक <(कम-से-चिह्न) से शुरू होते हैं और एक >(अधिक-से-चिह्न) के साथ समाप्त होते हैं।

इस तरह <p>और </p>एक पैराग्राफ की शुरुआत और अंत को चिह्नित करने के लिए उपयोग किया जाता है।

नोट: यदि आप HTML का विस्तार से अध्ययन करना चाहते हैं, तो कृपया हमारा HTML ट्यूटोरियल पढ़ें ।

<html>पूरी तरह से सही होने के लिए, पुस्तक में प्रयुक्त भाषा को परिभाषित करने के लिए टैग में एक भाषा विशेषता जोड़ी जानी चाहिए :

<html lang="en">

निम्नलिखित मेटा जानकारी जोड़ने से आपकी पुस्तक सभी उपकरणों, पीसी, लैपटॉप, टैबलेट और फोन पर सही ढंग से प्रदर्शित होगी:

<meta name="viewport" content="width=device-width, initial-scale=1">

उदाहरण

<!DOCTYPE html>
<html lang="en">

<head>
<title>My Book</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
<h1>My Book</h1>
<p>HTML book created by me.</p>
</body>

</html>

सामग्री तालिका बनाएं

<body> </body>तत्वों के अंदर , सामग्री की एक तालिका जोड़ें:

<body>

<h1>Philosopy</h1>
<h3>Table of Contents</h3>

<p>1. Metaphysics</p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>

</body>

कुछ स्टाइल जोड़ें

अपनी पुस्तक में स्टाइलशीट जोड़ें:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

नोट: यदि आप CSS का विस्तार से अध्ययन करना चाहते हैं, तो कृपया हमारा CSS Tutorial पढ़ें ।



अध्याय 1 के लिए एक HTML पृष्ठ बनाएँ

फ़ाइल: दर्शन_अध्याय 1.htm

<body class="w3-content">
<div class="w3-container">

<h1>1. Metaphysics</h1>

<h3>The nature of reality.</h3>

<p>Metaphysics is the part of philosophy that studies the nature of reality.</p>

<p>When we look around, we can see:</p>
<ul>
<li>Nature</li>
<li>Animals</li>
<li>People</li>
<li>Houses</li>
<li>Cars</li>
<li>and much more</li>
</ul>

<p>Is this Virtual Reality real?</p>

<p>In Metaphysics, the questions is:</p>
<ul>
<li>What is real?</li>
<li>Is what we see real?</li>
<li>Is there more than we see?</li>
<li>Is there more than we sence?</li>
<li>Is there something else?</li>
<li>Is there something more?</li>
<li>Is there another dimension?</li>
</ul>
</div>

</body>

अध्याय 1 के लिए एक लिंक जोड़ें

<body>

<h1>Philosopy</h1>
<h3>Table of Contents</h3>

<p><a href="philosophy_chapter1.htm">1. Metaphysics</a></p>
<p>2. Epistemology</p>
<p>3. Logics</p>
<p>4. Ethics</p>
<p>5. Aesthetics</p>

</body>

ऊपर के उदाहरण में, हमने किताब के पहले अध्याय का नाम दिया है:

" दर्शन_अध्याय1 .htm "।

उपयोग करने के लिए नाम आप पर निर्भर है। शायद इसे "तत्वमीमांसा" कहा जाना चाहिए।

वैसे भी, ऊपर की तरह जारी रखें और अन्य अध्याय बनाएं:

"philosophy_chaper2.htm"
"philosophy_chaper3.htm"
"philosophy_chaper4.htm"
"philosophy_chaper5.htm"


प्रत्येक अध्याय के लिए एक लिंक जोड़ें

<body>

<h1>Philosopy</h1>
<h3>Table of Contents</h3>

<p>
<a href="philosophy_chapter1.htm">1. Metaphysics</a>
</p>

<p>
<a href="philosophy_chapter2.htm">2. Epistemology</a>
</p>

<p>
<a href="philosophy_chapter3.htm">3. Logics</a>
</p>

<p>
<a href="philosophy_chapter5.htm">4. Ethics</a>
</p>

<p>
<a href="philosophy_chapter4.htm">5. Aesthetics</a>
</p>

</body>