एचटीएमएल - हैडर
हमने सीखा है कि एक विशिष्ट HTML दस्तावेज़ में निम्नलिखित संरचना होगी -
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
यह अध्याय हेडर भाग के बारे में थोड़ा और विस्तार देगा जो HTML <head> टैग द्वारा दर्शाया गया है। <Head> टैग <शीर्षक>, <मेटा>, <लिंक>, <आधार>, <style>, <script>, और <noscript> टैग जैसे विभिन्न महत्वपूर्ण टैग का एक कंटेनर है।
HTML <शीर्षक> टैग
HTML <शीर्षक> टैग का उपयोग HTML दस्तावेज़ के शीर्षक को निर्दिष्ट करने के लिए किया जाता है। HTML दस्तावेज़ को शीर्षक देने के लिए निम्नलिखित उदाहरण है -
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
यह निम्नलिखित परिणाम का उत्पादन करेगा -
HTML <मेटा> टैग
HTML <meta> टैग का उपयोग HTML दस्तावेज़ के बारे में मेटाडेटा प्रदान करने के लिए किया जाता है जिसमें पेज एक्सपायरी, पेज लेखक, कीवर्ड की सूची, पृष्ठ विवरण आदि के बारे में जानकारी शामिल होती है।
HTML दस्तावेज़ के अंदर <meta> टैग के कुछ महत्वपूर्ण उपयोग निम्नलिखित हैं -
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by Tutorials Point">
<!-- Author information -->
<meta name = "author" content = "Tutorials Point">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
यह निम्नलिखित परिणाम का उत्पादन करेगा -
HTML <आधार> टैग
HTML <आधार> टैग का उपयोग किसी पृष्ठ में सभी रिश्तेदार URL के लिए आधार URL को निर्दिष्ट करने के लिए किया जाता है, जिसका अर्थ है कि दिए गए आइटम के लिए पता लगाने के दौरान अन्य सभी URL को आधार URL में सम्मिलित किया जाएगा।
उदाहरण के लिए, सभी दिए गए पृष्ठों और चित्रों को आधार URL http://www.tutorialsput.com/.com के साथ दिए गए URL को उपसर्ग करने के बाद खोजा जाएगा।
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>
यह निम्नलिखित परिणाम का उत्पादन करेगा -
लेकिन अगर आप आधार URL को किसी और चीज़ में बदलते हैं, उदाहरण के लिए, यदि आधार URL http://www.tutorialspoint.com/home है तो छवि और अन्य दिए गए लिंक http://www.tutorialspoint.com/home/images की तरह हो जाएंगे /logo.png और http://www.tutorialspoint.com/html/index.htm
HTML <लिंक> टैग
HTML <लिंक> टैग का उपयोग वर्तमान दस्तावेज़ और बाहरी संसाधन के बीच संबंधों को निर्दिष्ट करने के लिए किया जाता है। निम्नलिखित में उपलब्ध बाहरी शैली शीट फ़ाइल को लिंक करने के लिए एक उदाहरण हैcss वेब रूट के भीतर उप-निर्देशिका -
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
यह निम्नलिखित परिणाम का उत्पादन करेगा -
HTML <style> टैग
HTML <style> टैग का उपयोग वर्तमान HTML दस्तावेज़ के लिए स्टाइल शीट निर्दिष्ट करने के लिए किया जाता है। निम्नलिखित कुछ शैली पत्रक नियमों को परिभाषित करने के लिए एक उदाहरण है <style> टैग -
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>
यह निम्नलिखित परिणाम का उत्पादन करेगा -
Note- कैस्केडिंग स्टाइल शीट कैसे काम करती है, इसके बारे में जानने के लिए, कृपया सीएसएस पर उपलब्ध एक अलग ट्यूटोरियल देखें
HTML <script> टैग
HTML <script> टैग का उपयोग बाहरी स्क्रिप्ट फ़ाइल को शामिल करने या HTML दस्तावेज़ के लिए आंतरिक स्क्रिप्ट को परिभाषित करने के लिए किया जाता है। निम्नलिखित एक उदाहरण है जहां हम जावास्क्रिप्ट का उपयोग करके एक साधारण जावास्क्रिप्ट फ़ंक्शन को परिभाषित कर रहे हैं -
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>
यह निम्नलिखित परिणाम देगा, जहाँ आप दिए गए बटन पर क्लिक करने का प्रयास कर सकते हैं -
Note- जावास्क्रिप्ट कैसे काम करता है, इसके बारे में जानने के लिए, कृपया जावास्क्रिप्ट पर उपलब्ध एक अलग ट्यूटोरियल देखें