HTML Basic Guide (HyperText Markup Language) के बारे में
HTML एक markup language है जो वेबपेज की structure को define करती है। इसे headings, paragraphs, images, और links जैसे elements के जरिए content को organize करने के लिए इस्तेमाल किया जाता है। HTML वेब डेवलपमेंट का पहला और सबसे जरूरी step है।
HTML को सीखना आसान है क्योंकि इसमें tags और attributes का उपयोग होता है, जो साफ और logical होते हैं। उदाहरण के तौर पर, <p> tag का उपयोग paragraphs बनाने के लिए किया जाता है और <a> tag से hyperlinks जोड़े जाते हैं। सही HTML structure से आपकी वेबसाइट responsive और user-friendly बनती है।
HTML Documents
हर HTML डॉक्यूमेंट को document type declaration से शुरू करना जरूरी है:
<!DOCTYPE html>
यह ब्राउज़र को बताता है कि डॉक्यूमेंट HTML5 का है।
HTML Document की संरचना:
<html>: HTML डॉक्यूमेंट यहां से शुरू होता है।
</html>: HTML डॉक्यूमेंट यहां खत्म होता है।
दिखाई देने वाला हिस्सा:
जो content यूजर को स्क्रीन पर दिखता है, वह <body> और </body> के बीच लिखा जाता है।
<!DOCTYPE>
<!DOCTYPE> एक declaration है जो ब्राउज़र को बताता है कि HTML डॉक्यूमेंट किस version का है। यह वेबपेज को सही तरीके से दिखाने में मदद करता है।
एक बार इस्तेमाल होता है:
<!DOCTYPE> declaration को पूरे HTML पेज में सिर्फ एक बार इस्तेमाल किया जाता है।
यह हमेशा HTML टैग्स से पहले आता है।
Case Sensitive नहीं है:
इसका मतलब है कि आप इसे uppercase (<!DOCTYPE>) या lowercase (<!doctype>) में लिख सकते हैं। दोनों valid हैं।
HTML5 के लिए Declaration:
HTML5 का doctype declaration सबसे simple और short है:
<!DOCTYPE html>
<!DOCTYPE> क्यों जरूरी है?
Browser Rendering Mode:
यह सुनिश्चित करता है कि ब्राउज़र सही rendering mode में काम करे।
Standards Mode: ब्राउज़र HTML और CSS को पूरी तरह से web standards के हिसाब से दिखाता है।
Quirks Mode: अगर doctype नहीं दिया गया तो ब्राउज़र पुराने नियमों के मुताबिक rendering कर सकता है, जिससे वेबसाइट का layout बिगड़ सकता है।
Compatibility:
यह आधुनिक HTML5 features और CSS के इस्तेमाल में मदद करता है।
सभी पुराने और नए ब्राउज़र इसे support करते हैं।
Example: HTML Document with <!DOCTYPE>
<!DOCTYPE html>
<html>
<head>
<title>DOCTYPE Example</title>
</head>
<body>
<h1>यह HTML5 पेज है</h1>
<p>यहाँ हमने <!DOCTYPE> का उपयोग किया है।</p>
</body>
</html>
<!DOCTYPE html> ब्राउज़र को बताता है कि यह HTML5 डॉक्यूमेंट है।
इसके बिना, पेज का structure और styling सही नहीं हो सकती।
<!DOCTYPE> एक छोटा लेकिन जरूरी element है, जो ब्राउज़र को बताता है कि वेबपेज किस प्रकार का है। HTML5 में इसका उपयोग बेहद आसान और straightforward है, जो HTML coding को simple और efficient बनाता है।
HTML Headings
HTML Headings क्या हैं?
HTML में headings का उपयोग content को व्यवस्थित और structured तरीके से दिखाने के लिए किया जाता है।
Headings को <h1> से <h6> टैग के जरिए define किया जाता है।
<h1> सबसे महत्वपूर्ण और बड़ा heading होता है।
<h6> सबसे कम महत्वपूर्ण और छोटा heading होता है।
Headings का Structure
HTML में headings को इस प्रकार लिखा जाता है:
<h1>यह सबसे बड़ा और महत्वपूर्ण heading है</h1>
<h2>यह दूसरे स्तर का heading है</h2>
<h3>यह तीसरे स्तर का heading है</h3>
<h4>यह चौथे स्तर का heading है</h4>
<h5>यह पांचवें स्तर का heading है</h5>
<h6>यह सबसे छोटा और कम महत्वपूर्ण heading
Headings का उपयोग क्यों किया जाता है?
Content का Structure:
Headings text को hierarchy में प्रस्तुत करते हैं, जिससे content आसानी से समझने योग्य बनता है।
SEO (Search Engine Optimization):
Search engines (जैसे Google) headings को स्कैन करते हैं ताकि पेज के मुख्य विषय को समझ सकें।
<h1> सबसे ज्यादा महत्वपूर्ण होता है और पेज के मुख्य विषय को दर्शाता है।
Accessibility:
Screen readers headings का उपयोग करके visually impaired users को पेज structure समझने में मदद करते हैं।
Readable Layout:
Headings content को visually appealing और पढ़ने में आसान बनाते हैं।
Headings का उपयोग कैसे करें?
<h1>:
हर पेज पर केवल एक बार इस्तेमाल करें। यह पेज का मुख्य शीर्षक होना चाहिए।
Example:
<h1>वेबसाइट का मुख्य शीर्षक</h1>
अन्य Headings (<h2> से <h6>):
Subheadings के लिए इस्तेमाल करें।
Example
<h2>खाना पकाने के टिप्स</h2>
<h3>शाकाहारी रेसिपी</h3>
<h4>सूप और सलाद</h4>
Example-
<!DOCTYPE html>
<html>
<head>
<title>HTML Headings Example</title>
</head>
<body>
<h1>वेब डेवलपमेंट गाइड</h1>
<h2>HTML Basics</h2>
<h3>Headings का उपयोग</h3>
<h4>SEO के लिए Headings</h4>
<h5>Advanced Topics</h5>
<h6>Footnotes</h6>
</body>
</html>
Headings का Best Practice:
- Headings को content के महत्व के हिसाब से hierarchy में इस्तेमाल करें।
- Example:
<h1>→<h2>→<h3>।
- Example:
- Styling के लिए केवल headings का size बदलने के लिए
<h1>या<h2>का गलत इस्तेमाल न करें। इसके लिए CSS का उपयोग करें।
<style>
h2 { font-size: 24px; }
</style>
अतः HTML headings content को structure और readability देने का एक महत्वपूर्ण तरीका हैं। <h1> से <h6> तक का उपयोग सही hierarchy में करने से वेबसाइट user-friendly और search engine-friendly बनती है।
Hierarchy क्या है?
HTML Hierarchy:
HTML में elements को एक tree-like structure में व्यवस्थित किया जाता है।
Parent Element (मुख्य तत्व): सबसे ऊपरी स्तर का होता है।
Child Element (उप तत्व): Parent के अंदर लिखा जाता है।
Example:
<html> <!-- Parent -->
<head> <!-- Child -->
<title>Hierarchy Example</title> <!-- Sub-child -->
</head>
<body> <!-- Child -->
<h1>Heading</h1> <!-- Sub-child -->
<p>Paragraph</p> <!-- Sub-child -->
</body>
</html>
यहां <html> Parent है और इसके अंदर अन्य elements (जैसे <head> और <body>) Child के रूप में आते हैं।
HTML Paragraphs
HTML में paragraphs का उपयोग text को व्यवस्थित तरीके से दिखाने के लिए किया जाता है।
Paragraphs को <p> टैग के जरिए define किया जाता है।
यह हर पैराग्राफ को अलग-अलग ब्लॉक में प्रस्तुत करता है।
Syntax (लेखन शैली):
<p>यह एक पैराग्राफ है।</p>
<p>यह दूसरा पैराग्राफ है।</p>
HTML Paragraphs की विशेषताएं:
Automatic Line Break:
<p> टैग का उपयोग करने पर text के बीच automatic space और line break आ जाता है।
Readable Content:
Paragraphs text को पढ़ने में आसान बनाते हैं और content को sections में विभाजित करते हैं।
Inline Text Formatting के साथ इस्तेमाल:
Paragraph के अंदर अन्य HTML टैग्स (जैसे <b>, <i>, <a>) का उपयोग कर text को format किया जा सकता है।
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Paragraph Example</title>
</head>
<body>
<p>यह पहला पैराग्राफ है।</p>
<p>यह दूसरा पैराग्राफ है जिसमें <b>मोटा टेक्स्ट</b> है।</p>
<p>यह <i>इटैलिक टेक्स्ट</i> वाला पैराग्राफ है।</p>
</body>
</html>
Output:
- पहला पैराग्राफ: "यह पहला पैराग्राफ है।"
- दूसरा पैराग्राफ: "यह दूसरा पैराग्राफ है जिसमें मोटा टेक्स्ट है।"
- तीसरा पैराग्राफ: "यह इटैलिक टेक्स्ट वाला पैराग्राफ है।"
Paragraphs का Best Practice:
हर पैराग्राफ को <p> टैग में लिखें ताकि content अलग-अलग ब्लॉक्स में दिखे।
Paragraphs को छोटा और clear रखें।
Styling के लिए CSS का उपयोग करें, जैसे:
<style>
p {
color: blue;
font-size: 16px;
line-height: 1.5;
}
</style>
इस प्रकार HTML paragraphs (<p> टैग) text को structured और organized तरीके से दिखाने का सबसे आसान तरीका हैं। यह text को readability और clarity देने में मदद करता है। Proper styling के साथ इसका उपयोग आपके वेबपेज को अधिक आकर्षक और user-friendly बनाता है।
HTML Links और Attributes
HTML में Links का उपयोग किसी अन्य पेज, वेबसाइट, या resource (जैसे PDF, image, या वीडियो) पर नेविगेट करने के लिए किया जाता है।
Links को <a> (anchor) टैग का उपयोग करके बनाया जाता है।
Link की destination (जहां पर जाना है) को href attribute में define किया जाता है।
Syntax (लेखन शैली):
<a href="URL">Link Text</a>
<a>: यह link बनाने के लिए इस्तेमाल होता है।
href (Hypertext REFerence): यह attribute link की destination URL को define करता है।
Link Text: यह वह text है जिस पर user क्लिक करता है।
Example (उदाहरण):
<a href="https://www.webearningpoints.com/?m=1">यह एक लिंक है</a>
Output:
"यह एक लिंक है" पर क्लिक करने से user "https://www.webearningpoints.com/" वेबसाइट पर पहुंच जाएगा।
Attributes क्या हैं?
Attributes HTML elements को अतिरिक्त जानकारी प्रदान करते हैं।
Attributes हमेशा opening tag में लिखे जाते हैं।
Attribute में दो हिस्से होते हैं:
1. Name (नाम): जैसे href, src, alt।
2. Value (मूल्य): Attribute के लिए दी गई जानकारी।
Example:
<a href="https://www.example.com" target="_blank">Click Here</a>
href: Link का destination (URL)।
target="_blank": Link को नई tab में खोलने के लिए।
Important Points:
Link का Text:
<a> टैग के अंदर का text clickable होता है।
Example:
HTML Links क्या हैं?
HTML में Links का उपयोग किसी अन्य पेज, वेबसाइट, या resource (जैसे PDF, image, या वीडियो) पर नेविगेट करने के लिए किया जाता है।
Links को <a> (anchor) टैग का उपयोग करके बनाया जाता है।
Link की destination (जहां पर जाना है) को href attribute में define किया जाता है।
Syntax (लेखन शैली):
html
Copy code
<a href="URL">Link Text</a>
<a>: यह link बनाने के लिए इस्तेमाल होता है।
href (Hypertext REFerence): यह attribute link की destination URL को define करता है।
Link Text: यह वह text है जिस पर user क्लिक करता है।
Example (उदाहरण):
html
Copy code
<a href="https://www.w3schools.com">यह एक लिंक है</a>
Output:
"यह एक लिंक है" पर क्लिक करने से user "https://www.w3schools.com" वेबसाइट पर पहुंच जाएगा।
Attributes क्या हैं?
Attributes HTML elements को अतिरिक्त जानकारी प्रदान करते हैं।
Attributes हमेशा opening tag में लिखे जाते हैं।
Attribute में दो हिस्से होते हैं:
Name (नाम): जैसे href, src, alt।
Value (मूल्य): Attribute के लिए दी गई जानकारी।
Example:
<a href="https://www.example.com" target="_blank">Click Here</a>
href: Link का destination (URL)।
target="_blank": Link को नई tab में खोलने के लिए।
Important Points:
1. Link का Text:
<a> टैग के अंदर का text clickable होता है।
Example:
<a href="https://google.com">Google</a>
Output: "Google" पर क्लिक करके user Google की वेबसाइट पर जाएगा।
2. External और Internal Links:
External Link: किसी अन्य वेबसाइट पर ले जाने वाला link।
<a href="https://www.wikipedia.org">Wikipedia</a>
Output: Wikipedia
Internal Link: उसी वेबसाइट के दूसरे पेज पर ले जाने वाला link।
<a href="https://www.webearningpoints.com/2024/11/best-html-editors.html?m=1">best html editors</a>
Output: best html editors
Attributes के बिना Link:
अगर href attribute नहीं दिया गया, तो link काम नहीं करेगा।
Example with Multiple Attributes:
<a href="https://www.youtube.com" target="_blank" title="Visit YouTube">YouTube</a>
href: Link की destination।
target="_blank": Link को नई tab में खोलने के लिए।
title: जब user link पर cursor ले जाएगा तो एक tooltip दिखेगा।
Attributes के बारे में आगे सीखेंगे:
Attributes HTML elements को ज्यादा flexible और informative बनाते हैं। आने वाले chapters में आप और attributes जैसे id, class, style, आदि के बारे में जानेंगे।
अतः HTML Links (<a> टैग) वेबपेज को interactive बनाते हैं। href attribute link की दिशा तय करता है, और attributes links को additional functionality और styling प्रदान करते हैं। Proper attributes का उपयोग करके आप user experience को बेहतर बना सकते हैं।
HTML Images और Attributes
HTML Images क्या हैं?
HTML में images को जोड़ने के लिए <img> टैग का उपयोग किया जाता है।
<img> टैग self-closing है, यानी इसे बंद करने के लिए अलग से </img> की जरूरत नहीं होती।
Images को web page पर दिखाने के लिए <img> टैग में विभिन्न attributes का उपयोग किया जाता है, जैसे src, alt, width, और height।
Attributes और उनके उपयोग:
1. src (Source):
यह attribute image का source (फाइल का path या URL) बताता है।
src में local image file (जैसे images/pic.jpg) या external URL (जैसे https://example.com/image.jpg) दिया जा सकता है।
Example
<img src="picture.jpg">
2. alt (Alternative Text):
यह attribute तब उपयोगी होता है जब image load न हो पाए।
यह visually impaired users के लिए भी helpful है क्योंकि screen readers इसे पढ़ सकते हैं।
Example:
<img src="picture.jpg" alt="A beautiful sunset">
3. width और height:
ये attributes image के size को define करते हैं।
इन्हें pixels या percentages में लिखा जा सकता है।
Example:
<img src="picture.jpg" alt="A beautiful sunset" width="500" height="300">
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Images Example</title>
</head>
<body>
<h1>यह एक Image है:</h1>
<img src="sunset.jpg" alt="Sunset on the beach" width="600" height="400">
</body>
</html>
Output:
यह कोड एक image दिखाएगा जिसका नाम sunset.jpg है, और अगर image load नहीं होती, तो "Sunset on the beach" लिखा दिखेगा
Attributes के बिना Image:
अगर आप केवल <img> टैग लिखते हैं और src या alt नहीं देते, तो image नहीं दिखाई देगी, या error आ सकता है।
Example (गलत):
<img>
Image Optimization Tips:
1. File Format का ध्यान रखें:
JPEG: Photographs के लिए।
PNG: Transparent background के लिए।
SVG: Icons और graphics के लिए।
2. Responsive Images:
CSS का उपयोग करें ताकि image हर screen size पर अच्छी दिखे।
Example:
img {
max-width: 100%;
height: auto;
}
HTML Images (<img> टैग) web pages को आकर्षक और जानकारीपूर्ण बनाती हैं। src, alt, width, और height जैसे attributes के उपयोग से images को effectively manage किया जा सकता है। Proper attributes और optimization से user experience और SEO को बेहतर बनाया जा सकता है।
HTML Basic Guide for Beginners
HTML सीखना किसी भी beginner के लिए आसान और उपयोगी है क्योंकि यह websites की foundation है। इस guide में हमने HTML के basic elements, जैसे headings, paragraphs, links, images, और attributes को समझा। HTML की structure को समझकर आप simple webpages बना सकते हैं।
HTML सीखने के साथ-साथ इसे CSS और JavaScript के साथ integrate करना आपको interactive और आकर्षक websites बनाने में मदद करेगा। Practice करते रहें और concepts को implement करके अपनी skills को मजबूत बनाएं। HTML आपकी web development journey की पहली और सबसे महत्वपूर्ण सीढ़ी है
.png)