Tutorial On Html 5 in Hindi

0
35
Tutorial On Html

Tutorial On Html 5

Tutorial On Html, HTML Hyper Text Markup Language के लिए है, जो वेब पेज विकसित करने के लिए वेब पर सबसे अधिक उपयोग की जाने वाली भाषा है। Hypertext से तात्पर्य उस तरीके से है जिसमें वेब पेज (HTML डॉक्यूमेंट) एक साथ जुड़े होते हैं।

इस प्रकार, Web pages पर उपलब्ध लिंक को Hypertext कहा जाता है। जैसा कि इसके नाम से पता चलता है, HTML एक मार्कअप लैंग्वेज है, जिसका अर्थ है कि आप HTML का उपयोग केवल टैग के साथ एक टेक्स्ट डॉक्यूमेंट को Markup करने के लिए करते हैं जो वेब ब्राउज़र को यह बताता है कि इसे कैसे प्रदर्शित करना है।

HTML को 1991 के अंत में Berners-Lee द्वारा बनाया गया था लेकिन HTML 2.0 पहला standard HTML specification था जो 1995 में प्रकाशित हुआ था। HTML 4.01 HTML का एक प्रमुख संस्करण था और इसे 1999 के अंत में प्रकाशित किया गया था।

हालाँकि HTML 4.01 संस्करण का व्यापक रूप से उपयोग किया जाता है, लेकिन वर्तमान में हमारे पास HTML-5 संस्करण है, जो HTML 4.01 का विस्तार है, और यह संस्करण 2012 में प्रकाशित हुआ था।

मूल रूप से, HTML को headings, paragraphs, lists जैसे दस्तावेजों की संरचना को परिभाषित करने के इरादे से विकसित किया गया था, और इसके अलावा शोधकर्ताओं के बीच वैज्ञानिक जानकारी को साझा करने की सुविधा प्रदान की गई थी। अब, HTML language में उपलब्ध विभिन्न Tags की मदद से वेब पेजों को format करने के लिए HTML का व्यापक रूप से उपयोग किया जा रहा है।

HTML छात्रों और काम करने वाले पेशेवरों के लिए एक बेहतरीन सॉफ्टवेयर इंजीनियर बनने के लिए जरूरी है, जब वे Web Development Domain में काम कर रहे होते हैं।

Tutorial On Html: Advantages of learning HTML

1. Create Web site
यदि आप HTML को अच्छी तरह से जानते हैं तो आप एक वेबसाइट बना सकते हैं या किसी मौजूदा वेब टेम्पलेट को कस्टमाइज़ कर सकते हैं।

2. Become a web designer
यदि आप एक पेशेवर वेब डिज़ाइनर के रूप में कैरर शुरू करना चाहते हैं, तो HTML और CSS डिजाइनिंग एक कौशल होना चाहिए।

3. Understand web
यदि आप अपनी वेबसाइट को ऑप्टिमाइज़ करना चाहते हैं, तो इसकी गति और प्रदर्शन को बढ़ावा देने के लिए, एचटीएमएल को सर्वश्रेष्ठ परिणाम देने के लिए जानना अच्छा है।

4. Learn other languages
एक बार जब आप HTML के मूल को समझ लेते हैं तो अन्य संबंधित तकनीकों जैसे javascript, php या angular को समझना आसान हो जाता है।

Tutorial On Html: Applications of HTML

जैसा कि पहले बताया गया है, HTML वेब पर सबसे अधिक उपयोग की जाने वाली भाषा में से एक है।

1. Web pages development
HTML का उपयोग उन पृष्ठों को बनाने के लिए किया जाता है जो वेब पर प्रस्तुत किए जाते हैं। वेब का लगभग हर पृष्ठ ब्राउज़र में अपने विवरण को प्रस्तुत करने के लिए इसमें html टैग लगा रहा है।

2. Internet Navigation
HTML ऐसे टैग प्रदान करता है जो एक पृष्ठ से दूसरे पृष्ठ पर नेविगेट करने के लिए उपयोग किए जाते हैं और इंटरनेट नेविगेशन में इसका अत्यधिक उपयोग किया जाता है।

3. Responsive UI
HTML पेज अब सभी प्लेटफॉर्म, मोबाइल, टैब, डेस्कटॉप या लैपटॉप पर अच्छी तरह से काम करते हैं जो responsive design strategy के कारण हैं।

4. Offline support
एक बार लोड किए गए HTML पृष्ठों को इंटरनेट की आवश्यकता के बिना मशीन पर ऑफ़लाइन उपलब्ध कराया जा सकता है।

5. Game development
HTML5 के पास समृद्ध अनुभव के लिए मूल समर्थन है और अब यह गेमिंग डेवलपमेंट क्षेत्र में भी उपयोगी है।

यह Tutorial on HTML इच्छुक वेब डिज़ाइनरों और डेवलपर्स के लिए डिज़ाइन किया गया है ताकि HTML को उसके सरल अवलोकन और व्यावहारिक उदाहरणों के साथ पर्याप्त रूप से समझा जा सके। यह Tutorial on HTML आपको HTML से शुरू करने के लिए पर्याप्त सामग्री देगा जहाँ से आप अपने आप को उच्च स्तर की विशेषज्ञता में ले जा सकते हैं।

Tutorial On Html: Hello World using HTML

बस आपको HTML के बारे में थोड़ा सा उत्साह देने के लिए, मैं आपको एक छोटा पारंपरिक HTML Hello Word प्रोग्राम का एक उदहारण देने जा रही हूं, आप डेमो लिंक का उपयोग करके इसे use कर सकते हैं।

<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Hello World</p>
</body>
</html>

Tutorial On Html

Tutorial On Html

Tutorial On Html: HTML Tags

जैसा कि पहले बताया गया है, HTML एक मार्कअप भाषा है और सामग्री को format करने के लिए विभिन्न टैग का उपयोग करती है। ये टैग angle braces <Tag Name> के भीतर संलग्न हैं। कुछ टैग को छोड़कर, अधिकांश टैग में उनके संबंधित end टैग होते हैं। उदाहरण के लिए, <html> का अपना end टैग है </ html> और <body> टैग का अपना end टैग है </ body> टैग आदि।

1. <html>
यह टैग पूर्ण HTML दस्तावेज़ संलग्न करता है और इसमें मुख्य रूप से दस्तावेज़ header शामिल होता है जिसे <head> … </ head> और दस्तावेज़ body द्वारा दर्शाया जाता है जिसे <body> … </ body> टैग द्वारा दर्शाया जाता है।

2. <head>
यह टैग दस्तावेज़ के हेडर का प्रतिनिधित्व करता है जो अन्य HTML टैग्स जैसे <title>, <link> आदि को रख सकता है।

3. <title>
दस्तावेज़ title का उल्लेख करने के लिए <title> टैग का उपयोग <head> टैग के अंदर किया जाता है।

4. <body>
यह टैग दस्तावेज़ के body का प्रतिनिधित्व करता है जो अन्य HTML टैग्स जैसे <h1>, <div>, <p> आदि रखता है।

5. <h1>
यह टैग हेडिंग को दर्शाता है।

6. <p>
यह टैग एक पैराग्राफ का प्रतिनिधित्व करता है।

7. The <!DOCTYPE> Declaration
दस्तावेज़ में उपयोग किए गए HTML के संस्करण को समझने के लिए वेब ब्राउज़र द्वारा <! DOCTYPE> घोषणा टैग का उपयोग किया जाता है। HTML का वर्तमान संस्करण 5 है और यह निम्नलिखित घोषणा का उपयोग करता है –

<!DOCTYPE html>

HTML सीखने के लिए, आपको विभिन्न टैगों का अध्ययन करने और यह समझने की आवश्यकता होगी कि पाठ दस्तावेज़ को प्रारूपित करते समय वे कैसे व्यवहार करते हैं। HTML सीखना सरल है क्योंकि उपयोगकर्ताओं को सुंदर वेबपेज बनाने के लिए टेक्स्ट या चित्रों को प्रारूपित करने के लिए विभिन्न टैगों के उपयोग को सीखना पड़ता है।

Tutorial On Html: Heading Tags

कोई भी दस्तावेज हेडिंग से शुरू होता है। आप अपने शीर्षकों के लिए विभिन्न आकारों का उपयोग कर सकते हैं। HTML में शीर्षकों के छह स्तर भी हैं, जो तत्वों का उपयोग करते हैं <h1>, <h2>, <h3>, <h4>, <h5>, और <h6>। किसी भी हेडिंग को प्रदर्शित करते समय, ब्राउजर पहले एक लाइन और उसके बाद एक हेडिंग जोड़ता है।

Example

<!DOCTYPE html>
<html>

<head>
<title>Heading Example</title>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>

</html>

Tutorial On Html, Output of this function:-

Tutorial On Html

Tutorial On Html: Paragraph Tag

<P> टैग आपके पाठ को विभिन्न पैराग्राफ में संरचना करने का एक तरीका प्रदान करता है। पाठ के प्रत्येक पैराग्राफ को एक उद्घाटन <p> और एक समापन </ p> टैग के बीच जाना चाहिए जैसा कि नीचे उदाहरण में दिखाया गया है –

<!DOCTYPE html>
<html>

<head>
<title>Paragraph Example</title>
</head>

<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>

Output of this function:-

Tutorial On Html

Tutorial On Html: Line Break Tag

जब भी आप <br /> एलिमेंट का इस्तेमाल करते हैं, तो अगली लाइन से कुछ भी शुरू होता है। यह टैग एक खाली तत्व का एक उदाहरण है, जहां आपको टैग खोलने और बंद करने की आवश्यकता नहीं है, क्योंकि उनके बीच जाने के लिए कुछ भी नहीं है।

Example:-
<!DOCTYPE html>
<html>

<head>
<title>Line Break Example</title>
</head>

<body>
<p>Hello<br />
You delivered your order.<br />
Thanks<br />
XYZ</p>
</body>
</html>

Output of this function:-

Tutorial On Html

Tutorial On Html: Centering Content

आप किसी भी सामग्री को पेज या किसी टेबल सेल के केंद्र में रखने के लिए <center> टैग का उपयोग कर सकते हैं।
Example

<!DOCTYPE html>
<html>

<head>
<title>Centring Content Example</title>
</head>

<body>
<p>This text is not in the center.</p>

<center>
<p>This text is in the center.</p>
</center>
</body>
</html>

Output of this function:-

Tutorial On Html

Tutorial On Html: Horizontal Lines

Horizontal लाइनों का उपयोग किसी दस्तावेज़ के ब्रेक-अप अनुभागों के लिए किया जाता है। <Hr> टैग दस्तावेज़ में वर्तमान स्थिति से सही मार्जिन तक एक रेखा बनाता है और तदनुसार लाइन को तोड़ता है। <hr /> टैग खाली तत्व का एक उदाहरण है, जहां आपको टैग खोलने और बंद करने की आवश्यकता नहीं है, क्योंकि उनके बीच जाने के लिए कुछ भी नहीं है।

उदाहरण के लिए, आप नीचे दिए गए उदाहरण में दो पैराग्राफ के बीच एक रेखा देना चाह सकते हैं:-

<!DOCTYPE html>
<html>

<head>
<title>Horizontal Line Example</title>
</head>

<body>
<p>This is the first paragraph is on top</p>
<hr />
<p>This is the second paragraph is at bottom</p>
</body>
</html>

Output of this function:-

Tutorial On Html

Tutorial On Html: Preserve Formatting

कभी-कभी, आप चाहते हैं कि आपका पाठ HTML दस्तावेज़ में लिखे गए सटीक प्रारूप का पालन करे। इन मामलों में, आप पहले से टैग किए गए टैग <pre> का उपयोग कर सकते हैं। opening <pre> टैग और closing </ pre> टैग के बीच कोई भी source document के formatting को preserve करेगा।

Example

<!DOCTYPE html>
<html>

<head>
<title>Preserve Formatting Example</title>
</head>

<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>

</html>

Output of this function:-

Tutorial On Html

इस HTML Tutorial में हमने कुछ HTML टैग और उनके उपयोग जैसे Heading tag <h1>, <h2>, Paragraph tag <p> और अन्य टैग देखे हैं।

LEAVE A REPLY

Please enter your comment!
Please enter your name here