HTML tutorial in Hindi: इस ब्लॉग में आपको HTML के बारे में विस्तृत जानकारी प्राप्त होगी। HTML क्या है, इसकी विशेषताएं, इतिहास, और विकास के बारे में जानकारी शामिल है। साथ ही, हिंदी में एक HTML वेब पेज का उदाहरण भी प्रदान किया गया है।
Table of Contents
HTML tutorial in Hindi:
What is HTML?
HTML (Hypertext Markup Language): एक वेब डेवलपमेंट भाषा है जिसका उपयोग वेब पेजों को बनाने में किया जाता है। HTML को वेब पेज के संरचना और अनुक्रम को परिभाषित करने के लिए इस्तेमाल किया जाता है। यह एक मानकीकृत भाषा है जिसमें टैग (Tags) और एट्रिब्यूट (Attributes) का उपयोग किया जाता है। इसका मुख्य उद्देश्य यह है कि उपयोक्ता को वेब पृष्ठों के बीच लिंक करें और वेब पेज की संरचना को परिभाषित करें।
Features of HTML:
HTML की कुछ मुख्य विशेषताएं हैं:
- Simple: HTML सरल और सुलभ होता है जिससे इसे सीखना और उपयोग करना आसान होता है।
- Plateform Independent: HTML अनुप्रयोगी है, यानी यह किसी भी प्लेटफार्म या डिवाइस पर काम करेगा।
- Global Standard: HTML एक वैश्विक मानक है और इंटरनेट पर जानकारी को संचारित करने के लिए उपयोग होता है।
- Compatibilty: HTML कई डिवाइसों पर संवेदनशील है, जैसे कि मोबाइल फोन, टैबलेट, और कंप्यूटर।
- Case insensitive: Html is non case sensitive langauage that means you can write its code in upper or lower case.
History of HTML:
HTML का इतिहास विकसित है। इसे 1990 में टिम बर्नर्स-ली द्वारा विकसित किया गया था। HTML 1.0 में बसिक स्ट्रक्चर, टैग, और हाइपरलिंक्स का समर्थन था। लेकिन समय के साथ, HTML कई अद्यतन करने के लिए विकसित हुआ और अब HTML5 एक व्यापक मानक है जिसमें नई विशेषताओं का समर्थन किया गया है।
वेब पेज बनाने के लिए अन्य भाषाओं में CSS (Cascading Style Sheets) और JavaScript भी महत्वपूर्ण हैं। CSS का उपयोग वेब पेज के रूपांतरण और स्टाइलिंग के लिए किया जाता है, जबकि JavaScript वेब पेज पर गतिविधियों को नियंत्रित करने और इंटरैक्टिविटी जोड़ने के लिए प्रयोग किया जाता है।
A Sample HTML Program:
एक HTML वेब पेज का मूल संरचना निम्नलिखित हो सकता है:
<!DOCTYPE html>
<html>
<head>
<title>My first web page: Smartvalue </title>
</head>
<body>
<h1>Good Morning! Guys this is a sample page</h1>
<p>Here may be a paragraph</p>
<a href="https://www.example.com">An example weblink</a>
</body>
</html>एक HTML वेब पेज का उदाहरण हिंदी में:
<!DOCTYPE html>
<html>
<head>
<title>मेरा वेब पेज</title>
</head>
<body>
<h1>नमस्ते, यह मेरा पहला वेब पेज है!</h1>
<p>यहाँ कुछ पाठ हो सकता है।</p>
<a href="https://www.example.com">एक उदाहरण लिंक</a>
</body>
</html>HTML full form:
Full form of HTML and others webtools abbreviations is given below.
HTML: HyperText Markup Language
- XHTML: eXtensible HyperText Markup Language
- DHTML: Dynamic HyperText Markup Language
- CSS: Cascading Style Sheets
- XML: eXtensible Markup Language
- HTTP: HyperText Transfer Protocol
- HTTPS: HyperText Transfer Protocol Secure
- URL: Uniform Resource Locator
- API: Application Programming Interface
- FTP: File Transfer Protocol
- DNS: Domain Name System
- IP: Internet Protocol
- TCP: Transmission Control Protocol
- UDP: User Datagram Protocol
- WWW: World Wide Web
- PHP: Hypertext Preprocessor
- JS: JavaScript
- JSON: JavaScript Object Notation
- SQL: Structured Query Language
- AJAX: Asynchronous JavaScript and XML
यहाँ कुछ इंटरनेट संबंधित शब्दों और वेब उपकरणों के पूरे रूप और उनके उपयोगों का हिंदी में वर्णन है:
- HTML: हाइपरटेक्स्ट मार्कअप भाषा – यह एक प्रमुख वेब डेवलपमेंट भाषा है जिसका उपयोग वेब पेजों को बनाने के लिए किया जाता है।
- XHTML: एक्सटेंसिबल हाइपरटेक्स्ट मार्कअप भाषा – यह HTML की एक संशोधित संस्करण है जो और अधिक सख्तता और वैधता को सुनिश्चित करता है।
- DHTML: डायनामिक हाइपरटेक्स्ट मार्कअप भाषा – यह एक प्रौद्योगिकी है जो वेब पेज पर डायनामिक और इंटरैक्टिव विशेषताओं को बनाने में मदद करती है।
- CSS: कास्केडिंग स्टाइल शीट्स – यह वेब पेज की रूपरेखा और अंदरूनी स्टाइलिंग को परिभाषित करने के लिए इस्तेमाल होती है।
- XML: एक्सटेंसिबल मार्कअप भाषा – यह संगठन और डेटा एक्सचेंज के लिए इस्तेमाल होती है, जैसे कि वेब सेवाओं और डेटाबेस कंपाइलेशन।
- HTTP: हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल – यह डेटा को वेब सर्वर से वेब क्लाइंट के बीच संचारित करने के लिए इस्तेमाल होता है।
- HTTPS: हाइपरटेक्स्ट ट्रांसफर प्रोटोकॉल सुरक्षित – यह सुरक्षित संचार के लिए HTTP का सुरक्षित संस्करण है।
- URL: यूनिफ़ॉर्म रिसोर्स लोकेटर – यह वेब पेजों के पते को परिभाषित करने के लिए उपयोग होता है।
- API: एप्लिकेशन प्रोग्रामिंग इंटरफेस – यह एक सॉफ्टवेयर कंपोनेंट को दूसरे कंपोनेंटों के साथ संचार करने के लिए इस्तेमाल होता है।
- FTP: फ़ाइल ट्रांसफ़र प्रोटोकॉल – यह फ़ाइलों को वेब सर्वर से अपलोड और डाउनलोड करने के लिए इस्तेमाल होता है।
ये कुछ उदाहरण हैं, लेकिन अधिक इंटरनेट संबंधित शब्दों और उपकरणों की सूची है। कृपया उन्हें विस्तार से समझने और अध्ययन करने के लिए जारी रखें।.
How to Write HTML Code: HTML compiler
html कोड को लिखने के लिए हमें दो चीजों की आवश्यकता होती है 1. एक टेक्स्ट एडिटर जैसे की Notepad या वर्डपैड और दूसरा एक वेब ब्राउज़र जैसे गूगल क्रोम, नेट एस्केप नेविगेटर, माइक्रोसॉफ्ट Edge, ओपेरा मिनी, मोज़िला फायरफॉक्स, कंपाइलर HTML compiler सॉफ्टवेयर जैसे की विजुअल स्टूडियो, माइक्रोसॉफ्ट स्टूडियो का प्रयोग करके भी एचटीएमएल कोड लिखकर वेब पेज तैयार कर सकते हैं|
To write HTML code, we need two things: 1. A text editor like Notepad or Word pad and second, a web browser like Google Chrome, Net Escape Navigator, Microsoft Edge, Opera Mini, Mozilla Firefox, compiler software like Visual Studio can also be used to create web pages by writing HTML code using Microsoft Studio.
What is a Web Browser?
HTML Elements and HTML Tags:
HTML में उपयोग होने वाले कुछ मुख्य तत्व (HTML Elements) हैं:
- HTML तत्व (HTML Elements): HTML तत्व वेब पृष्ठों के संरचना और सामग्री को परिभाषित करने के लिए इस्तेमाल होते हैं। प्रत्येक HTML तत्व का एक आगंतुक (टैग) होता है जो उसकी शुरुआत और समाप्ति को दर्शाता है।
- HTML टैग (HTML Tags): HTML टैग वेब पेज के संरचना को परिभाषित करने के लिए इस्तेमाल होते हैं। ये टैग अक्सर शुरुआत टैग
<tag>और समाप्ति टैग</tag>के रूप में होते हैं। - HTML टैग के प्रकार (Types of HTML Tags): HTML Tags कई प्रकार के होते हैं, जैसे कि शीर्षक टैग, पैराग्राफ टैग, लिंक टैग, इमेज टैग, आदि।
- खाली और संवाहक टैग (Empty and Container Tags):
- खाली टैग (Empty Tags): ये टैग जिनमें कोई सामग्री नहीं होती है, उन्हें खाली टैग कहा जाता है, जैसे
<img>और<br>। - संवाहक टैग (Container Tags): ये टैग जिनमें सामग्री होती है, उन्हें संवाहक टैग कहा जाता है, जैसे
<p>और<div>।
- खोलने और बंद करने वाले टैग (Opening and Closing Tags): HTML टैग दो हिस्सों में बांटे जाते हैं – एक खोलने वाले टैग और एक बंद करने वाले टैग। खोलने वाले टैग
<tag>से शुरू होते हैं, और बंद करने वाले टैग</tag>से समाप्त होते हैं।
ये तत्व HTML में विभिन्न प्रकार की संरचनाओं को परिभाषित करने में मदद करते हैं।
HTML Tags:
HTML Tags (<!DOCTYPE html>): HTML दस्तावेज़ का प्रारंभ करने के लिए इस्तेमाल होता है। यह विशिष्ट एचटीएमएल संस्करण का डिक्लेरेशन करता है।
<!DOCTYPE html>
<html>
<head>
<title>मेरा पृष्ठ</title>
</head>
<body>
<h1>नमस्ते, यह मेरा पहला पृष्ठ है!</h1>
</body>
</html>
<head> टैग: वेब पेज की मेटा-डेटा और संरचना से संबंधित जानकारी को चिह्नित करता है।
<title> टैग: वेब पेज का शीर्षक परिभाषित करता है। इसका उपयोग ब्राउज़र के शीर्षक में प्रदर्शित होने वाले टाइटल के रूप में होता है।
<meta> टैग: वेब पृष्ठ की मेटा डेटा, जैसे कि लेखक, विवरण, और अन्य मेटा जानकारी को परिभाषित करता है।<meta charset="UTF-8">
<meta name="description" content="यह एक उदाहरण वेब पृष्ठ है।">
<meta name="keywords" content="वेब, उदाहरण, HTML">
<body> टैग: वेब पेज की वास्तविक सामग्री को परिभाषित करता है, जैसे कि टेक्स्ट, इमेज, लिंक, आदि।
<body>
<h1>मुख्य शीर्षक</h1>
<p>यहाँ कुछ पाठ हो सकता है।</p>
<img src="example.jpg" alt="उदाहरण चित्र">
</body>
`<body>` टैग HTML में एक महत्वपूर्ण html tags है जो वेब पेज की मुख्य सामग्री को परिभाषित करता है। इस टैग का उपयोग किया जाता है ताकि वेब पेज की दिखाई गई भाग की सामग्री और संरचना को परिभाषित किया जा सके।
`<body>` टैग के कुछ महत्वपूर्ण गुण होते हैं:
1. **bgcolor**: इस गुण का उपयोग बैकग्राउंड के रंग को परिभाषित करने के लिए किया जाता है।
```html
<body bgcolor="lightblue">
```
2. **text**: इस गुण का उपयोग पाठ के रंग को परिभाषित करने के लिए किया जाता है।
```html
<body text="black">
```
3. **link**: इस गुण का उपयोग हैपरलिंक के रंग को परिभाषित करने के लिए किया जाता है।
```html
<body link="blue">
```
4. **vlink**: इस गुण का उपयोग व्हिजिटेड हैपरलिंक के रंग को परिभाषित करने के लिए किया जाता है।
```html
<body vlink="purple">
```
5. **alink**: इस गुण का उपयोग एक्टिव हैपरलिंक के रंग को परिभाषित करने के लिए किया जाता है।
```html
<body alink="red">
```
ये गुण हमें वेब पेज के दिखाई गए भागों के रंगों को परिभाषित करने में मदद करते हैं।
<font> टैग: वेब पेज के पाठ के लिए फॉन्ट परिभाषित करता है। यह वर्तमान में अज्ञात और अविश्वसनीय है और अधिकांश ब्राउज़रों में समर्थित नहीं है। इसकी बजाय CSS का उपयोग करें।
<font color="red" size="5">रोगी पाठ</font>
<p> टैग: वाक्यांश (पैराग्राफ) को परिभाषित करता है।
<p>यहाँ कुछ पाठ हो सकता है।</p>
html interview questions:
यहाँ कुछ HTML साक्षात्कार प्रश्न और उनके उत्तर हैं:
- HTML क्या है?
- उत्तर: HTML (Hypertext Markup Language) एक मार्कअप भाषा है जिसका उपयोग वेब पेजों के संरचना और सामग्री को परिभाषित करने के लिए किया जाता है।
2. HTML में क्या अंतर है और टैग में?
- उत्तर:
<div>टैग एक ब्लॉक-स्तरीय तत्व है जो एक बड़े क्षेत्र को परिभाषित करता है, जबकि<span>टैग एक इनलाइन तत्व है जो छोटे क्षेत्र को परिभाषित करता है।
3. HTML में क्या होते हैं खाली और संवाहक टैग?
- उत्तर: खाली टैग (Empty Tags) जिनमें कोई सामग्री नहीं होती है, जबकि संवाहक टैग (Container Tags) जिनमें सामग्री होती है। उदाहरण के लिए,
<img>एक खाली टैग है जो छवियों को प्रदर्शित करता है, और<p>एक संवाहक टैग है जो पैराग्राफ को परिभाषित करता है।
4. HTML में मेटा टैग का क्या उपयोग है?
- उत्तर: मेटा टैग वेब पृष्ठ की मेटा डेटा, जैसे कि लेखक, विवरण, और अन्य मेटा जानकारी को परिभाषित करने के लिए उपयोग होता है। यह जानकारी वेब सर्च इंजनों के लिए उपयोगी होती है।
5. HTML में शीर्षक और उपशीर्षक (Heading and Subheading) कितने प्रकार के होते हैं?
- उत्तर: HTML में 6 प्रमुख शीर्षक टैग होते हैं, जिन्हें
<h1>से<h6>तक कोड किया जाता है। उपशीर्षकों को<h1>से<h6>तक के शीर्षकों के अंतर्गत<h1>और<h2>के बीच कोड किया जाता है।
ये कुछ साधारण HTML साक्षात्कार प्रश्न हैं जो आपको HTML में मास्टर होने में मदद करेंगे।
Interview Questions in Hindi related to CSS:
- CSS क्या है और इसका उपयोग क्यों किया जाता है?
- उत्तर: CSS (Cascading Style Sheets) एक वेब डिज़ाइन भाषा है जिसका उपयोग वेब पृष्ठों की रूपरेखा, आकार, रंग और अन्य स्टाइलिंग प्रॉपर्टीज़ को परिभाषित करने के लिए किया जाता है।
- CSS के क्या फायदे हैं?
- उत्तर: CSS का उपयोग वेब पेजों को अधिक संरचित और सुंदर बनाने में मदद करता है, साथ ही वेबसाइट की लोडिंग समय को कम करता है, और साइट की सामग्री को विभिन्न उपकरणों पर सही रूप से प्रदर्शित करने में मदद करता है।
- CSS स्टाइल प्रॉपर्टी क्या होती है?
- उत्तर: CSS में स्टाइल प्रॉपर्टी एक विशिष्ट विशेषता को परिभाषित करती है, जैसे कि रंग, आकार, फॉन्ट, मार्जिन, पैडिंग, और अन्य।
- CSS में क्लास क्या है?
- उत्तर: CSS में क्लास एक संदर्भ होता है जो एक या अधिक विशेषताओं को एक समूह के सभी तत्वों पर लागू करने के लिए प्रयोग किया जाता है।
- CSS में पैडिंग (Padding) और मार्जिन (Margin) में क्या अंतर है?
- उत्तर: पैडिंग एक तत्व के आसपास की रिक्ति को परिभाषित करता है, जबकि मार्जिन एक तत्व के चारों ओर की रिक्ति को परिभाषित करता है।