Hello दोस्तो, आज हम आपको Html के बारे में बताएंगे।
Html क्या है।
Html एक तरह की Standard Markup Language है। जो Website और Webpage बनाने में use होती है। यह Website के Basic Structure को बनाने में काम आता है। आप html से अपनी website बनाके internet server पर भी upload कर सकते है। और आपकी website किसी भी browser में देखी जा सकती है।
Html का full form Hyper Text Markup Language है।
ये भाषा computer की अन्य भाषा जैसे C, C++, JAVA आदि के मुकाबले बहुत ही सरल है, इसका इस्तेमाल करना कोई भी व्यक्ति आसानी से और बहुत कम समय में सिख सकता है।
आपको इसकी कोडिंग करने के लिए Text Editor/Notpad के अलावा VS Code App - laptop/computer के लिए और Spck Editor App smartphone में use कर सकते है। इसके अलावा भी और भी application है। आप जो चाहे use कर सकते है। लेकिन मेरे हिसाब से ये application best है।
HTML छोटे छोटे code की series से बना होता है , इन छोटे codes को tags कहते हैं. HTML tags browser को बताता है की उस tag के अन्दर लिखे गए elements को website में कैसे और कहाँ दिखाया जाये।
HTML code को लिख लेने के बाद आपके document को save करना होता है, उसको save करने के लिए html file के नाम के साथ .htm या फिर .html extension लिखना जरुरी है तभी वो आपके html document को आपके browser में दिखायेगा वरना नहीं।
Save कर लेने के बाद आपको अपना html document देखने के लिए browser को खोलना होता है। वो browser आपके html file को read करेगा और आपके सही तरीके से लिखे हुए code को convert कर सही रूप से आपके website को दिखाऐगा जैसा आपने code लिखते वक़्त सोचा होगा।
आपका web browser html tags को website में नहीं दिखाता बल्कि आपके document को सही तरह से दिखाने के लिए उन tags का इस्तेमाल करता है।
Create File
हमे code करने से पहले Index.html फाइल create करेंगे।
Index.html क्यों? Index.html इसलिए क्यों क्योंकि यह हमारा webpage का main page / starting page होता है।
Html Boiler Plate
फिर हम html की boiler plate code लायेंगे ! इसको type करके फिर Emmet पर क्लिक करके।
Html Boiler Plate वो होता है जिसके अंदर हम Html Coding करते है।
<!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">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
यह document के version और किस type में है वो बताने का काम करता है।
<html lang="en">
lang="en" यह आपके content की language बताने में हेल्प करता है। की आपका content english या hindi में है। और भी language.
Head Tag
<head> - - </head>
Head tag के अंदर meta tags, title और stylesheet link or style css भी आता है।
Title Tag
<title>Your_Title</title>
Title tag के अंदर आप अपने हिसाब से कोई भी title/Name लीख सकते है।
Example:- <title>Document</title> Replace Document <title>Vansh Techno World </title>
जब हम अपने html page को browser में देखेंगे तो हमें यही Title browser के सबसे ऊपर title bar में बाये तरफ दिखाई देगा।
Body Tag
<body> - - </body>
body tag के अंदर content होते है
जैसे की Headings tag, paragraph tag, div tag और इसी के जैसे tags होते है।
ऐसे ही और भी बहुत से tag हैं जो आप body tag के अन्दर लिख सकते हैं, सभी tags के बारे में बता पाना यहाँ संभव नहीं इसलिए मैंने सिर्फ basic tag के बारे में बताया है।
Comment Tag
<!-- -->
Comment/text लिखना अनिवार्या है य नहीं ये आपके ऊपर निर्भर करता है की आप अपने html document में comment लिखना चाहते हैं या नहीं। अगर आप अपने html code में comments लिखना चाहते है और उसे कोई और को दिखाना नही चाहते है तो इस टैग का use करके आप ऐसा कर सकते है।
Open And Closings Tags - <> </>
अधिकतर html element में opening and closing tags होते है। जिसके अंदर content होते है। हमे opening and closing tags का ध्यान रखना होता है। हमे ओपन tags के साथ closing tags लगना जरूरी होता है।
अगर आप एक starting tag को लगाने के बाद उसका end tag नहीं लगाएंगे तो उस tag का असर आपके browser में नहीं दिखेगा, इसलिए end tag लिखना अनिवार्य है।
Example - open <html> tag + content + closing </html> tag ,
open <head> tag + content + closing </head> tag,
open <body> tag + content + closing </body> tag और भी आदि।
इसके अलावा ऐसे भी कुछ tags होते है जिसमे हमे closing tag का use नही करना होता है। इन्हें खाली तत्व / Empty elements/tags कहा जाता है
Example - <br> tag इसी तरह के और भी tags हो सकते है।
HTML tags का keyword case-insensitive है इसका मतलब है की आप tag का नाम बड़े अक्षर (capital letter) या छोटे अक्षर (small letter) में लिख सकते हैं ये पूरी तरह से आप पर निर्भर करता है की आप अपने tag को कैसे लिखना चाहेंगे।
Heading Tags
Heading tag heading लिखने के लिए use होता है।इसके total 6 heading tags होते है।
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<!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">
<title>Document</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>
Shortcut
हम h1 type करके फिर Emmet पर क्लिक करके। आपका पूरा tag आजाएगा।
Paragraph Tags
Paragraph tag Paragraph/text लिखने के लिए use होता है।
<p> Paragraph/text <p>
Shortcut:- हम p type करके फिर Emmet पर क्लिक करेंगे। आपका पूरा tag आजाएगा।
Lorem Ipsum
lorem Ipsum आप तब use कर सकते है जब आपको समझ नहीं आ राहा हो इस topic पे क्या लिखूं तो आप Example/Demo के लिए इससे use कर सकते है।
Shortcut:- हम lorem type करके फिर Emmet पर क्लिक करेंगे। आपका पूरा lorem Ipsum का paragraph आजाएगा।
Read Also: माझी आई निबंध मराठी | Majhi Aai Nibandh Marathi 2022
