Headings & Paragraphs Free web designing Course
Tutorials #5
पिछले भाग में, हमने हेड टैग्स पर चर्चा की है। इसलिए, इस HTML ट्यूटोरियल में, हम <body> टैग की मूल बातें देखेंगे। चूंकि यह पाठ्यक्रम शुरुआती और उन्नत दोनों के लिए है, इसलिए, हम प्रत्येक मूल विषय को जानेंगे। कुछ छात्रों को अभी भी यह समझने में परेशानी हो रही थी कि एम्मेट एबॉर्शन क्या है। एम्मेट संक्षिप्त नाम बस हमारे काम को आसान बनाता है जिससे हमें HTML का मूल टेम्पलेट प्रदान किया जा सके।
संक्षिप्तीकरण एम्मेट टूलकिट का दिल है। यह विजुअल स्टूडियो कोड के साथ स्वचालित रूप से बिल्ट-इन आता है। हमें सरल हेडिंग टैग के साथ शुरू करना चाहिए मूल रूप से छह प्रकार के शीर्षक टैग होते हैं <h1>, <h2>, <h3>, <h4>, <h5>, और <h6>। ये h1 से छह शीर्षक टैग हैं जो सबसे बड़े फ़ॉन्ट आकार और h6 सबसे छोटे फ़ॉन्ट आकार हैं। एक महत्वपूर्ण है जिसे आपको H1 टैग के बारे में जानना चाहिए।
हर वेबसाइट में केवल एक <h1> टैग होता है, जो वेबसाइट का मुख्य शीर्षक है। आपको सामान्य पैराग्राफ टेक्स्ट को कभी भी हेडिंग के रूप में नहीं लिखना चाहिए, इसे केवल बोल्ड बनाने के लिए। यह सलाह दी जाती है कि केवल एक बार <h1> टैग का उपयोग करने से किसी वेबसाइट के एसईओ (सर्च इंजन ऑप्टिमाइजेशन) में मदद मिलेगी और यहां तक कि विभिन्न सर्च इंजनों में इसे उच्च रैंकिंग मिलेगी।
फिर पैराग्राफ टैग आता है जिसे <p> द्वारा दर्शाया जाता है। जब भी हम अपनी वेबसाइट पर एक पैराग्राफ जोड़ना चाहते हैं तो हम केवल प्रारूप में पैराग्राफ टैग का उपयोग कर सकते हैं-
<p>some random texts</p>
एक नया पैराग्राफ लिखने के लिए, बस एक नई लाइन पर कूदें और एक पैराग्राफ टैग में नया पैराग्राफ लिखना शुरू करें। Paragrapgh टैग की 4 अलग-अलग लाइनें पाने के लिए, हम बस p * 4 लिख सकते हैं।
आइए अब हम एम्मेट संक्षिप्त नाम के मुख्य लाभ पर चर्चा करते हैं। यदि हम किसी भी संख्या के शब्दों के लिए कुछ यादृच्छिक पाठ चाहते हैं तो हम इंटरनेट से किसी भी लेख की प्रतिलिपि बना सकते हैं या केवल यादृच्छिक शब्द लिख सकते हैं, जो निश्चित रूप से अच्छा नहीं लगेगा। इससे बचने के लिए, हम लोरेम और शब्दों की संख्या को एक पैराग्राफ में लिख सकते हैं। आइए एक उदाहरण से समझते हैं-
<p>Lorem40</p>
यह कोड हमें 40 शब्दों का एक पैराग्राफ देगा।
अगले टैग जो हम देखने जा रहे हैं वे हैं <strong> और <em> (जोर) टैग। मजबूत टैग के बीच कुछ टेक्स्ट लिखने से टेक्स्ट का वह हिस्सा बोल्ड हो जाएगा। और इम टैग के बीच कोई भी टेक्स्ट लिखना, उस हिस्से को इटैलिक के रूप में बदल देगा। हालाँकि, बाद में ये पाठ CSS की मदद से बदले जा सकते हैं।
अब एक पैराग्राफ में एक लाइन बदलने के लिए हम आसानी से <br> टैग का उपयोग कर सकते हैं। यह एक स्व-समापन टैग है जो एक पंक्ति को तोड़ने में मदद करता है। हालाँकि, बहुत से <br> टैग का उपयोग करना अभ्यास के लिए अच्छा नहीं है। जब हम CSS सीखने जा रहे हैं तो हम इस पर अधिक चर्चा करेंगे।
<p>first<br><br><br><br>This is a new line</p>
फिर अगला टैग <hr> टैग है जो एक स्व-समापन टैग भी है। यह वेबपेज पर एक लाइन की तरह एक क्षैतिज शासक को जोड़ने में मदद करता है। इनके अलावा बोल्ड और इटैलिक टैग भी हैं लेकिन उन्हें HTML 5 में उपयोग करने की सलाह दी जाती है। इसके बजाय मजबूत और इम टैग का उपयोग करने की सिफारिश की जाती है।
शुरुआत में, आप सोच सकते हैं, हमारी वेबसाइटें थोड़ी बदसूरत दिख रही हैं, लेकिन जब हम CSS सेक्शन में जाएंगे, तो मेरा विश्वास कीजिए, हमारी वेबसाइट अन्य पेशेवर वेबसाइटों की तरह अधिक आकर्षक लगने लगेगी। इसलिए संपूर्ण वेब विकास पाठ्यक्रम के बारे में अधिक जानकारी प्राप्त करने के लिए ट्यूटोरियल के साथ बने रहें।
वीडियो में वर्णित / लिखे अनुसार कोड
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="This is description">
<meta name="keywords" content="html, html tutorials, web development">
<meta name="robots" content="INDEX, FOLLOW">
<title>Document</title>
<!-- This is how you include external css -->
<link rel="stylesheet" href="harry.css">
<!-- This is how you include external JavaScript -->
<script src="harry.js"></script>
</head>
<body>
CODE SIKHO HINDI
</body>
</html>
