Introduction to HTML एच टी एम एल का
परिचय----
एचटीएमएल (HyperText
Markup Language / HTML) वेब पन्नों और
वेब आधारित एप या पेज बनाने में इस्तेमाल
होने वाली एक मार्कअप भाषा है। वेब ब्राउज़र द्वारा किसी वेबसाइट के पन्ने को
खोलने पर उसके वेब सर्वर से एचटीएमएल के रूप में दस्तावेज (डॉक्युमेंट) प्राप्त
होता है, जिसे वेब ब्राउज़र
मल्टीमीडिया वेब पन्ने में बदल देता है।
इसमें सीएसएस (CSS)
और जावास्क्रिप्ट (JS) का भी इस्तेमाल कर सकते हैं, जो इसे और भी उपयोगी बना देता है। ये जावास्क्रिप्ट में
लिखे किसी प्रोग्राम को वेब पन्नों में दिखाया या इस्तेमाल कर सकता है और सीएसएस
के द्वारा इसके रूप और आकार को हम तय भी कर सकते हैं। वर्ल्ड वाइड वेब कॉन्सोर्शियम
(W3C), जो एचटीएमएल और सीएसएस के
मानक का रखरखाव करती आ रही है, सीएसएस के
इस्तेमाल को 1997 से प्रोत्साहित
कर रही है।
एचटीएमएल मार्कअप
में कई जरूरी चीजें होती है, जिनमें टैग (और
उनके गुण) मुख्य होते हैं। टैग ज्यादातर दो के समूह में होते हैं। जैसे
|
<h1>
और
</h1>
|
हैडर टैग हैं।
इसमें पहले वाले को खुला टैग और दूसरे वाले को बंद टैग कहते हैं। इनमें खुला टैग
शुरू में होता है और उसके बाद कोई पाठ या अन्य टैग होते हैं और अंत में उस टैग को
बंद करने वाला टैग होता है। हमेशा ही खुले और बंद टैग नहीं होते हैं। कई टैग ऐसे
होते हैं, जिन्हें बस एक टैग के रूप
में लिखा जाता है और उसके अंदर उसके गुण लिखे जाते हैं। इसी तरह का एक टैग
|
<img>
|
भी है। इस तरह के
टैग में खुले और बंद टैग नहीं होते हैं। केवल एक टैग में उसके गुण लिख कर इनका
इस्तेमाल किया जाता है। एक सामान्य एचटीएमएल मार्कअप का नीचे उदाहरण दिया गया है।
|
<!DOCTYPE html>
<html>
<head>
<title>This is a
title</title>
</head>
<body>
<p>Hello
world!</p>
</body>
</html>
|
इसमें
|
<html>
और
</html>
|
के बीच आने वाला
सब कुछ एक वेब पन्ने को दर्शाता है। हालांकि केवल
|
<body>
और
</body>
|
के बीच वाला भाग
ही पन्ने पर दिखाई देता है। ब्राउज़र में पन्ने का शीर्षक दिखाने के लिए
|
<title>ये पन्ने का
शीर्षक है</title>
|
का इस्तेमाल होता
है।
HTML Page Structure
Below is a visualization of an HTML page structure:
|
<html>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
|
HTML Versions
Since the early days of
the web, there have been many versions of HTML:
|
Version
|
Year
|
|
HTML
|
1991
|
|
HTML+
|
1993
|
|
HTML 2.0
|
1995
|
|
HTML 3.2
|
1997
|
|
HTML 4.01
|
1999
|
|
XHTML 1.0
|
2000
|
|
HTML5
|
2012
|
|
XHTML5
|
2013
|
नोट आज कल प्राय: <!DOCTYPE> का प्रयोग करते है । यह
एचटीएमएल 5 का नया तरीका है जिससे आप एचटीएमएल कंटेन्ट को वेब ब्राउजर पर सही
तरीके से दिखा सके ।
इसलिए इसका प्रयोग प्रोग्राम को लिखने से पहले प्रयोग करे ।
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration helps the browser to display a web page
correctly.
एक वेब पेज मे बहुत से डाक्युमेंट होते है जो अलग अलग
प्रकार के होते है ये सभी एचटीएमएल का प्रयोग करके बनाये जाते है।इन सभी को
ब्राउजर पर अच्छी तरह से दिखाने के लिए इसका प्रयोग करते है।
एचटीएमएल प्रो्ग्राम को कैसे लिखे व रन करे------
नोटपैड या टेक्स्टएडिटर का उपयोग करके HTML लिखना
HTML को एक पेशेवर HTML
संपादक का उपयोग करके संपादित किया जा सकता है
जैसे:
1 Adobe Dreamweaver
2 Microsoft Expression Web
3 CoffeeCup HTML Editor
हालाँकि,
HTML सीखने के लिए हम नोटपैड
(पीसी) या टेक्स्टएडिट (मैक) जैसे टेक्स्ट एडिटर की सलाह देते हैं। हम मानते हैं
कि एक साधारण टेक्स्ट एडिटर का उपयोग करना HTML सीखने का एक अच्छा तरीका है।
नोटपैड के साथ
अपना पहला वेब पेज बनाने के लिए नीचे दिए गए 4 चरणों का पालन करें।
चरण 1: नोटपैड प्रारंभ करें
नोटपैड शुरू करने
के लिए यहां जाएं:
Start-----All Programs---------
Accessories----------------- Notepad
चरण 2: अपने HTML को नोटपैड के साथ संपादित करें
अपने नोटपैड में
अपना HTML कोड लिखें:
चरण 3: अपना HTML
सहेजें
नोटपैड फ़ाइल
मेनू में Save as .. चुनें।
जब आप HTML
फ़ाइल सहेजते हैं, तो आप .htm या .html फ़ाइल एक्सटेंशन का उपयोग कर सकते हैं। कोई
अंतर नहीं है, यह पूरी तरह से
आप पर निर्भर है।
फ़ाइल को उस
फ़ोल्डर में सहेजें, जिसे याद रखना
आसान है
चरण 4: अपने
ब्राउज़र में HTML चलाएँ
अपना वेब
ब्राउज़र शुरू करें और फ़ाइल, ओपन मेनू से अपनी
HTML फ़ाइल खोलें, या बस फ़ोल्डर ब्राउज़ करें और अपनी HTML
फ़ाइल पर डबल-क्लिक करें।
परिणाम इस तरह
दिखना चाहिए:
HTML दस्तावेज़ बनाना:
HTML डॉक्यूमेंट बनाना आसान है। HTML को कोड करना शुरू
करने के लिए आपको केवल दो चीजों की आवश्यकता है: एक नोटपैड और एक वेब ब्राउज़र।
नोटपैड सरल-पाठ संपादकों का सबसे मूल है और आप शायद इसके साथ एक उचित मात्रा में HTML कोड करेंगे।
HTML सीखने के लिए आप हमारे HTML Online Editor का उपयोग कर सकते हैं। यहाँ एक HTML डॉक्यूमेंट बनाने
के सरल उपाय दिए गए हैं:
1 नोटपैड या अन्य
टेक्स्ट एडिटर खोलें।
2 पृष्ठ के शीर्ष
पर <html> टाइप करें।
3 अगली पंक्ति
में, पाँच स्थानों पर इंडेंट करें और अब शुरुआती हेडर टैग
जोड़ें: <head>।
4 अगली पंक्ति
में, दस रिक्त स्थान लिखें और <title> </title>लिखें।
5 अगली पंक्ति पर
जाएं, मार्जिन से पांच स्थानों को इंडेंट करें और समापन हेडर टैग
डालें: </ head>।
6 अगली पंक्ति
में मार्जिन से पांच रिक्त स्थान टाइप करें <body>।
7 अब एक और लाइन
को छोड़ें और अपने साथी के ठीक नीचे स्थित क्लोजिंग टैग टाइप करें: </ body>।
8 अंत में, अगली पंक्ति पर
जाएं और </ html> टाइप करें।
9 फ़ाइल मेनू में, इस रूप में
सहेजें चुनें।(In the File menu, choose Save As.)
10 इसमेंइस
प्रकार सहेजें विकल्प बॉक्स में, सभी फ़ाइलें चुनें।(In the Save as Type
option box, choose All Files.)
11 फ़ाइल का नाम
टेम्पलेट .htm।
12 सहेजें पर
क्लिक करें।(Click Save.)
अब आपके पास मूल HTML दस्तावेज़ है, कुछ परिणाम देखने
के लिए निम्नलिखित कोड को शीर्षक और बॉडी टैग में रखें।
|
<html>
<head>
<title>This
is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document
description goes here.....</p>
</body>
</html>
|
अब आपने एक HTML पेज बनाया है और आप परिणाम देखने के लिए इस HTML फ़ाइल को खोलने
के लिए एक वेब ब्राउज़र का उपयोग कर सकते हैं। आशा है कि आप समझ गए होंगे कि वेब
पेज कुछ भी नहीं हैं, लेकिन वे कुछ सामग्री के साथ सरल HTML फाइलें हैं जिन्हें वेब ब्राउजर का उपयोग करके प्रदान किया जा सकता है।
HTML दस्तावेज़
संरचना:
एक HTML दस्तावेज़ शुरू होता है और <html> और> / html> टैग के साथ समाप्त होता है। ये टैग ब्राउज़र को बताते हैं
कि संपूर्ण दस्तावेज़ HTML में बना है। इन
दो टैग के अंदर, दस्तावेज़ को दो खंडों
में विभाजित किया गया है:
1 <Head> ... </ head> तत्व, जिसमें दस्तावेज़
के बारे में जानकारी होती है जैसे दस्तावेज़ का शीर्षक, दस्तावेज़ का लेखक आदि। इस टैग के अंदर की
जानकारी बाहर प्रदर्शित नहीं होती है।
2 <Body> ... </ body> तत्व, जिसमें आपके
स्क्रीन पर दिखाई देने वाले दस्तावेज़ की वास्तविक सामग्री होती है।
No comments:
Post a Comment
Please Do Not Enter Any Spam Link in the comment Box.