Concept of Hypertext –
हाइपरटेक्सट एक एैसा टेक्स्ट है जो अन्य जानकारी से लिंक होता है। हाइपरटेक्सट डाक्यूमेंट में एक लिंक पर क्लिक करके किसी दूसरे जगह तुरंत जाया जा सकता है। हाइपरटेक्सट आमतैार पर वेब पेज से जुड़ी है लेकिन यह तकनीक 1960 के दशक के आसपास की है।
हाइपरटेक्सट एक तरीका है जिससे वेब पेज (HTML डाक्यूमेंट ) एक दूसरे से जुड़े रहते हैं। किसी वेब पेज पर उपलब्ध लिंक को हाइपर लिंक कहा जाता है।
HTML का परिचय (Introduction of HTML)
HTML का पूरा नाम Hyper Text Markup Language है। HTML का विकास इंटरनेट के लिए Tim Berners-Lee द्वारा किया गया था। यह वेब पेज बनाने की सबसे सरल और लोकप्रिय भाषा Markup Language है।
HTML की सहायता से वेब पेज की संरचना (Structure) तैयार की जाती है। HTML में बनाए गए वेब पेज में सामान्यतः टेक्स्ट, चित्र, लिंक, तालिकाएँ तथा अन्य वेब तत्व शामिल किए जाते हैं। HTML विभिन्न Elements और Tags से मिलकर बनी होती है।
Hyper Text Markup Language साधारण टेक्स्ट को Hyper Text में परिवर्तित करती है। Hyper Text वह टेक्स्ट होता है, जिसमें अन्य पेजों या दस्तावेजों के लिंक जुड़े होते हैं।
HTML Elements वेब ब्राउज़र को बताते हैं कि सामग्री को स्क्रीन पर किस प्रकार प्रदर्शित करना है।
HTML के संस्करण (Versions of HTML)
HTML के विभिन्न संस्करण समय-समय पर विकसित किए गए हैं, जैसे —
- HTML 1.0
- HTML 2.0
- HTML 3.2
- HTML 4.01
- XHTML
- HTML5
वर्तमान समय में HTML5 सबसे अधिक उपयोग किया जाने वाला संस्करण है।
वर्डवाइड वेब के शुरूआती दिनों से HTML के कई उपलब्ध है :
Year Version
1989 Tim Berners-Lee invented www
1991 Tim Berners-Lee invented HTML
1993 Dave Raggett drafted HTML+
1995 HTML Working Group defined HTML 2.0
1997 W3C Recommendation: HTML 3.2
1999 W3C Recommendation: HTML 4.01
2000 W3C Recommendation: XHTML 1.0
2008 WHATWG HTML5 First Public Draft
2012 WHATWG HTML5 Living Standard
2014 W3C Recommendation: HTML5
2016 W3C Candidate Recommendation: HTML 5.1
2017 W3C Recommendation: HTML5.1 2nd Edition
2017 W3C Recommendation: HTML5.2
Elements of HTML
एक एचटीएमएल इलीमेंट, ‘स्टार्ट टैग’ < > और ‘इंड टैग’ < / > से मिल कर बनता है । इन दोनों टैग के बीच में सामग्री डाली जाती है। र्स्टाट टैग और इंड टैग के बीच सबकुछ एक इलीमेंट होता है।
<tagname> सामग्री यहां रखते है ...... </tagname>
<h1> My first Heading. </h1>
<p> My first paragraph. </p>
| Start tag | Element content | End tag | |
| <h1> | My First Heading | </h1> | |
| <p> | My first paragraph | </p> | |
| <br> | Empty elements | ||
<br> इसमें कोइ इलीमेंट कंटेंट नहीं होता इन्हें खाली इलीमेंट कहते है इनमें इंड टैग भी नहीं होता। इस टैग के बाद की सामग्री अगले लाइन से आती है।
HTML टैग केस सेंसिटिव नहीं होते लेकिन इन्हें हमेशा लेावर केस में ही लिखने का प्रचलन है।
वेब पेज को एचटीएमएल एडीटर में लिखा एवं सुधार किया जाता है. नोटपैड, वीएस कोड, सबलाइम टेक्सट कुछ प्रचिलित एचटीएमएल एडीटर है। एडीटर में कोड लिखकर एचटीएचएल इक्सटेंशन के साथ सेव कर लेते है। फिर इस फाइल को किसी भी वेब ब्राउजर में खोल कर देख सकते है।
Syntax –
अपने सरलतम रूप में HTML डाक्यूमेंट को निम्न प्रकार से लिखा जाता है।
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
HTML के मूल टैग और Attributes
उपर दिए गए उदाहरण में निम्न HTML Tags और Attributes का उपयोग किया गया है —
<!DOCTYPE html>
HTML Document की शुरुआत <!DOCTYPE html> से की जाती है। यह Document Type को दर्शाता है तथा Web Browser को पेज सही प्रकार से प्रदर्शित करने में सहायता करता है।
यह टैग केवल एक बार, HTML पेज की शुरुआत में तथा <html> टैग के ऊपर लिखा जाता है।
<html> ... </html>
HTML Document <html> टैग से प्रारंभ होकर </html> टैग पर समाप्त होता है।
<html> टैग के बीच में पूरा Web Page रखा जाता है। इसके अंदर मुख्य रूप से दो भाग होते हैं —
<head> ... </head><body> ... </body>
<head> ... </head>
<head> Element में Document की Header Information रखी जाती है। इसमें विभिन्न Tags जैसे —
<title><link><meta>
आदि शामिल किए जाते हैं।
<title> ... </title>
<title> टैग <head> टैग के अंदर लिखा जाता है। इसका उपयोग Web Page का Title या नाम निर्धारित करने के लिए किया जाता है।
यह Title Browser के Title Bar या Tab में दिखाई देता है।
<body> ... </body>
<body> टैग Web Page की मुख्य सामग्री (Content) को प्रदर्शित करता है।
इसके बीच में लिखी गई सामग्री Browser में दिखाई देती है।
इस टैग के अंदर कई अन्य Elements जैसे —
<h1><div><p>
आदि का उपयोग किया जाता है।
HTML Tags
HTML एक Markup Language है। इसमें Web Page की सामग्री को Format करने के लिए विभिन्न प्रकार के Tags उपयोग किए जाते हैं।
HTML Tags Angle Brackets < > के बीच लिखे जाते हैं।
उदाहरण:
<tagname>
अधिकांश Tags के Opening तथा Closing दोनों Tags होते हैं।
उदाहरण:
<html> </html><body> </body>
Closing Tag में / चिन्ह का उपयोग किया जाता है।
HTML Headings
HTML में Heading बनाने के लिए <h1> से <h6> तक के Tags का उपयोग किया जाता है।
<h1>सबसे बड़ी Heading होती है।<h6>सबसे छोटी Heading होती है।
उदाहरण:
<h1>This is Heading 1</h1><h6>This is Heading 6</h6>
Paragraph <p>
HTML में Paragraph बनाने के लिए <p> टैग का उपयोग किया जाता है।
उदाहरण:
<p>This is a paragraph.</p>
HTML Links
HTML में Link बनाने के लिए <a> टैग का उपयोग किया जाता है।
Link का Address href Attribute द्वारा निर्धारित किया जाता है।
उदाहरण:
<a href="https://www.example.com">Visit Website</a>
Attributes
HTML Elements को अतिरिक्त जानकारी प्रदान करने के लिए Attributes का उपयोग किया जाता है।
Attributes की विशेषताएँ —
- सभी HTML Elements में Attributes हो सकते हैं।
- Attributes Element के बारे में अतिरिक्त जानकारी प्रदान करते हैं।
- Attributes हमेशा Start Tag में लिखे जाते हैं।
- इन्हें सामान्यतः
name="value"के रूप में लिखा जाता है।
उदाहरण:
href="home.html"
href Attribute
href Attribute का उपयोग <a> टैग में Hyperlink का पता (URL) निर्धारित करने के लिए किया जाता है।
उदाहरण:
<a href="https://www.aruncomputer.com">Go To ARUN COMPUTER PAGE</a>
src Attribute
src Attribute का उपयोग <img> टैग में Image का Path निर्धारित करने के लिए किया जाता है।
उदाहरण:
<img src="img_girl.jpg">
width और height Attribute
width तथा height Attributes का उपयोग Image की चौड़ाई और ऊँचाई निर्धारित करने के लिए किया जाता है।
उदाहरण:
<img src="arun.jpg" height="500" width="500">
दो Attributes के बीच Colon : का उपयोग नहीं किया जाता।
alt Attribute
यदि Image उपलब्ध न हो या किसी कारणवश प्रदर्शित न हो सके, तो alt Attribute द्वारा दिया गया Text दिखाई देता है।
उदाहरण:
<img src="img_girl.jpg" alt="Girl with a jacket">
style Attribute
style Attribute का उपयोग किसी Element में रंग (Color), Font, Size आदि निर्धारित करने के लिए किया जाता है।
उदाहरण:
<p style="color:red; font-size:20px;">This is a red paragraph.</p>
Style के अंदर विभिन्न Properties के बीच Colon : का उपयोग किया जाता है। है। पैराग्राफ हमेशा नइ लाइन से शुरू होगा। ब्राउजर अपने आप कुछ खाली जगह पैराग्राफ के उपर और नीचे जोड लेता है । पैरा के बीच स्पेस या जगह अपने आप हट जाती है
<p align=”center”> </p>
<p align=”left”> <p>
<p align=”right”> </p>
<p><font size ="30" > this is font size 30 and color blue</font> </p>
<p> <font color="blue"> this is font color blue</font> </p>
<p style="color:red; font-family:verdana;">This is a paragraph.</p>
<p style="font-size:30px;">This is a paragraph.</p>
<B> </B> यह टैग के बीच मैटर को बोल्ड कर देता है।
<I> </I> यह टैग के बीच मैटर को इटैलिक कर देता है।
<U> </U> यह टैग के बीच मैटर को अंडरलाइन कर देता है।
<sup> </sup> superscript
<sub> </sub> subscript
<body bgcolor="red" >
<div style=”background-color : red;” ><b><I> Lorem ipsum</b></I> dolor sit amet, numquam.</div>
Exam Questions –
1- एच टी एम एल की विशेषताओं को समझाइए एच टी एम एल टेग की सहायता से दिये गये प्रारूप के आधार पर पेज बनाने के कोड लिखिए। mcu-2019
- Backgroup should have yellow colour
- Create a 4*4 table
2- निम्नलिखित पर संक्षिप्त टिप्पणी लिखिए: mcu -2019
- Versions of HTML
- Hyperlink
- Attributes
- Hypertext
3- एचटीएमएल से आप क्या समझते है एचटीएमएल के बेसिक टैग्स को उचित उदाहरण सहित समझाइए।mcu-2023
4-एच टी एम एल सिंटैक्स यके तत्वों पर नोटस लिखिए। mcu 2024
5- आरेख के साथ कीजिए कि एचटीएमएल टैग को उपयोग करके वेबपेज कैसे डिजाइन किया जा सकता है। mcu 2024
6- एचटीटीपी और वेब सर्वर को समझाइए। mcu 2024
7- निम्न पर टिप्पणी लिखिए- mcu 2024
English नोट्स के लिए क्लिक करें ARUN COMPUTER