Lesson 2.Basic tags
अब जब हम जानते हैं कि दस्तावेज़ के प्रकार को कैसे declare किया जाए, तो आइए हम उन अन्य टैगों को देखें जो आमतौर पर एक html वेबपेज में उपयोग किए जाते हैं। दस्तावेज़ को परिभाषित करने के लिए मूल टैग आपके संदर्भ के लिए इस अध्याय में वर्णित किए गए हैं।
Heading
दस्तावेज़ की बॉडी, आवश्यक संरचना देने के लिए, इसे शीर्षकों, पैराग्राफ, सूचियों, तालिकाओं और चित्रों में विभाजित किया जाना चाहिए। html शीर्षकों के छह स्तरों का समर्थन करता है, जिन्हें टैग्स का उपयोग करके परिभाषित किया जा सकता है, <h1>, <h2>, <h3>, <h4>, <h5> और <h6>। इन विभिन्न शीर्षक स्तरों का भिन्न फ़ॉन्ट आकार होता है। जो स्तर के बढ़ने के साथ घटता जाता है। ठीक है, हर बार जब एक हेडिंग टैग का सामना करना पड़ता है, तो डिफ़ॉल्ट रूप से, हेडिंग हेडिंग से पहले और बाद में एक लाइन जोड़ता है। शीर्ष स्तर पर अंतर प्रदर्शित करने वाले दस्तावेज़ को नीचे दिया गया है।<!doctype html>
<html>
<head>
<title>heading demo</title>
</head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>
इस कोड के अनुरूप वेबपेज इस प्रकार है
Paragraph
Html में पैराग्राफ बनाने के लिए, <p> </ p> टैग का उपयोग किया जाता है। इन टैग के भीतर प्रकट होने वाली कोई भी चीज HTML के पैराग्राफ दिशानिर्देशों के अनुसार स्वरूपित है। स्पष्ट है, <p> प्रारंभिक टैग है और </ p > समापन टैग है।<!doctype html>
<html>
<head>
<title>Paragraph demo</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
</body>
</html>
इस कोड के अनुरूप वेबपेज इस तरह दिखेगा
Line Break
जब भी <br/> टैग का सामना किया जाता है, तो इस टैग को सफल करने वाला पाठ अगली पंक्ति पर प्रदर्शित होता है। इस टैग को एक खाली तत्व के रूप में भी संदर्भित किया जाता है क्योंकि खुलने और बंद होने वाले टैग के बीच कुछ भी प्रदर्शित नहीं होता है, इसलिए एक ही टैग होता है। उपयोग किया गया।
कृपया ध्यान दें कि वर्णों के बीच एक स्थान होना चाहिए br / और। यदि आप अंतरिक्ष को याद करते हैं, तो पुराने ब्राउज़र tag.moreover को समझने में सक्षम नहीं होंगे, यदि आप आगे स्लैश (/) को याद करते हैं, तो टैग होगा XHTML द्वारा अमान्य माना गया।
<!doctype html>
<html>
<head>
<title>line break demo</title>
</head>
<body>
<p>hey<br />this is the next line.<br />thanks<br />this is also on the next line</p>
</body>
</html>
इस कोड के अनुरूप वेबपेज इस तरह दिखेगा
Centering content
सामग्री को तत्व के केंद्र में लाने के लिए, जो तालिका कोशिकाओं के लिए सही है, <center> टैग का उपयोग किया जा सकता है। इस टैग के व्यवहार को प्रदर्शित करने के लिए नमूना कोड नीचे दिया गया है
<!doctype html>
<html>
<head>
<title>centering content demo</title>
</head>
<body>
<p>not the center!</p>
<center>
<p>centered!</p>
</center>
</body>
</html>
इस कोड के अनुरूप वेबपेज इस तरह दिखेगा
Horizontal Lines
किसी दस्तावेज़ के अनुभागों के बीच भिन्न करने के लिए, आप उन पंक्तियों को खींचना पसंद कर सकते हैं जो उन्हें अलग करती हैं। <hr /> टैग, ऐसी क्षैतिज रेखाएँ बनाई जा सकती हैं। यह टैग उस जगह से एक क्षैतिज रेखा बनाता है जहाँ इसका उपयोग किया जाता है। वेबपेज का राइट मार्जिन। इस टैग के व्यवहार को प्रदर्शित करने के लिए नमूना कोड नीचे दिया गया है
<!doctype html>
<html>
<head>
<title>horizontal line demo</title>
</head>
<body>
<p>Section 1</p>
<hr />
<p>Section 2</p>
</body>
</html>
इस कोड के अनुरूप वेबपेज इस तरह दिखेगा
लाइन ब्रेक टैग (<br />) की तरह, hr टैग भी एक खाली एलिमेंट है। इस प्रकार, टैग खोलने और बंद करने के कोई टैग नहीं हैं। टैग, टैग के बीच कोई टेक्स्ट नहीं जाता है। यहां यह नोट करना महत्वपूर्ण है कि घंटा और / के बीच एक जगह होनी चाहिए या फिर कुछ ब्राउज़रों को पहचानने में सक्षम नहीं हो सकता है जिसे एक्सएचटीएमएल द्वारा अमान्य माना जाता है।
Preformatted tag
कुछ मामलों में, आप नहीं चाहते कि ब्राउज़र वेबपृष्ठ प्रदर्शित करे क्योंकि यह HTML दस्तावेज़ में लिखा गया है। प्रीफॉर्मेट किए गए टैग का उपयोग दस्तावेज़ के स्वरूपण को संरक्षित करने के लिए किया जा सकता है। इसके अलावा, जो पाठ <pre> और </ pre> के बीच दिखाई देता है वह उस स्वरूपण को बनाए रखता है जो इसे स्रोत दस्तावेज़ से प्राप्त होता है। इस टैग के व्यवहार को प्रदर्शित करने के लिए कोड को सबमिट करें। नीचे दिए गए-
<!doctype html>
<html>
<head>
<title>preformatted tag demo</title>
</head>
<body>
<pre>
function demofunction( str_text ){
Alert( str_text )
}
</pre>
</body>
</html>
इस कोड के अनुरूप वेबपेज इस तरह दिखेगा
यदि आप <pre> और </ pre> टैग हटाते हैं, तो आउटपुट कुछ इस तरह दिखाई देगा
Non Breaking Spaces
यदि आप नहीं चाहते हैं कि ग्राहक ब्राउज़र आपके पाठ को वर्ण सीमा के आधार पर तोड़ता है, तो आप इस टैग के व्यवहार को प्रदर्शित करने के लिए गैर ब्रेकिंग स्पेस या नमूना कोड का उपयोग कर सकते हैं-<!doctype html>
<html>
<head>
<title>Non Breaking Spaces demo</title>
</head>
<body>
<p>demo:"12 angry men."</p>
</body>
</html>
इस कोड के अनुरूप वेबपेज इस तरह दिखेगा
Elements in html
प्रारंभिक टैग जिसमें एक दस्तावेज़ को परिभाषित करने के लिए अन्य टैग शामिल हो सकते हैं, को एक तत्व .moreover के रूप में संदर्भित किया जाता है, यदि अन्य तत्व शामिल हैं, तो टैग में संबंधित समापन टैग होगा। उदाहरण के लिए, <p> में एक समापन टैग है < / p> जबकि <br /> में एक क्लोजिंग टैग नहीं है। ऐसे क्लोजिंग टैग नहीं रखने वाले कोड को शून्य एलिमेंट भी कहा जाता है। html डॉक्यूमेंट को html एलिमेंट्स के पेड़ के रूप में देखा जा सकता है, इस ट्री का इस्तेमाल किया जा सकता है। एचटीएमएल दस्तावेज़ के किस भाग में HTML पृष्ठ कैसे प्रदर्शित किया जाएगा और किस तरह की सामग्री रखी जा सकती है, इसकी कल्पना करें। यह तब तक आपको आश्चर्यचकित कर सकता है, जो html टैग और एलिमेंट्स के बीच अंतर है। एक एलिमेंट एक टैग के साथ शुरू होता है और एक tag.therefore के साथ समाप्त होता है, टैग के सेट का उपयोग करके बनाई गई इकाई एक एलीमेंट है।उदाहरण के लिए, यदि <p> ओपनिंग टैग है और </ p> क्लोजिंग टैग है, तो परिणाम के रूप में बनाया गया तत्व पैराग्राफ एलिमेंट है। html तत्वों के नेस्टिंग की अनुमति देता है। दूसरे शब्दों में, आपके पास एक तत्व दूसरे तत्वों के अंदर हो सकता है। और एक तत्व के अंदर संलग्न कई तत्व। नीचे दिए गए नमूना कोड में, तत्व सिर का तत्व शीर्षक है, जबकि तत्व शरीर में तत्व, h1 और P हैं। इसके अलावा, तत्व h1 में तत्व i और तत्व p में तत्व u है।
<!doctype html>
<html>
<head>
<title>Nested Elements demo </title>
</head>
<body>
<h1>text is <i>italic</i>heading</h1>
<p>text is <u>underlined</u>
paragraph</p>
</body>
</html>
इस कोड के अनुरूप वेबपेज इस तरह दिखेगा
Also Read:-
0 टिप्पणियाँ