अब हम पहला HTML Web Page बनाते हैं। इस Page
द्वारा हम विभिन्न प्रकार के Basic Concepts को समझ सकते हैं।
|
<!DOCTYPE html>
<html> <head><title>HTML
– Fast Track Course </title></head><body> <h1>HTML
– Introduction </h1><p>
document type को पारिभाषित करता है । यह HTML5
वर्जन मे काम आता है । यह प्रदर्शित नही होता है यानि यह छुपा हुआ होता है । यहहमारे
web page के सभी अन्य elements को लिखा जाता है। यह प्रदर्शित नही होता है
यानि यह छुपा हुआ होता है ।
</p></body> </html> |
- <!DOCTYPE html> - document type को पारिभाषित करता है । यह HTML5 वर्जन मे काम आता है । यह प्रदर्शित नही होता है यानि यह छुपा हुआ होता है ।
- <html> और </html> के बीच में हमारे web page के सभी अन्य elements को लिखा जाता है। यह प्रदर्शित नही होता है यानि यह छुपा हुआ होता है ।
- <body> और </body> के बीच में जो page content लिखा जाता है वह हमे हमारे web page में दिखाई देता है ।
- <h1> और </h1> के बीच जो लिखा जाता है वह heading की तरह दिखता है ।
- <p> और </p> के बीच जो लिखा जाता है वह paragraph की तरह दिखता है ।
इस Example को
Notepad में Type करके sample.htm नाम के साथ IIS Local Host के wwwroot Folder में अथवा WAMP के www Folder में अथवा XAMPP
के htdocs
Folder में “mysite”
नाम का एक Sub-Folder Create करके उसमें Save करें और Web Browser को Open करके
उसके Address Bar में http://localhost/mysite/sample.htm Type करके Enter
करें।
इस Web Page पर
हम Title Bar में Page का Title, Heading व Paragraph देख सकते हैं, जो कि हमने
Notepad में Type किया था, लेकिन हमने Notepad में जिन HTML Tags को Use किया था,
वे HTML Tags हमें दिखाई नहीं दे रहे हैं, क्योंकि वे सभी Tags Document को
Browser में Structure या Organize करने के उपयोग में आ गए हैं। Web Page Create
करते समय हमने जो Texts Angle Brackets के बीच लिखे थे, वे सभी HTML Tags थे जबकि
अन्य Texts वे Information हैं, जिन्हें हम Browser में Render करना चाहते थे।
HTML Tags क्या होते है ?
- HTML tags कुछ शब्द (tag names) होते है, जो किसी शब्द को दोनो और से Angle brackets (<……..>) से बाँधते है, जैसे - <html>
- HTML tags सामान्यत: जोडे मे होते है, जैसे <b> और </b>
- जोडे का पहला tag - start tag, और दुसरा tag - end tag कहलाता है ।
- end tag भी start tag की तरह ही लिखा जाता है, पर इसमें tag के नाम के पहले forward slash ( / )
- Start and end tags को opening tags और closing tags भी कहा जाता है ।
Example - <tagname> आपका
content </tagname>
HTML Elements क्या होते है ?
"HTML tags" और "HTML elements" को सामान्यत: एक ही वस्तु कहा जाता है। पर असल में, एक HTML element वह सब कुछ है जो start tag और end tag के बीच लिखा जाता है:
Example - <p>This is a paragraph.</p>
यदि हम अपने Example की पहली
व आखिरी Code Line को देखें, तो हम एक HTML Tag Pair को देख सकते हैं जिसमें
<html></html> लिखा गया है। दो Opening and Closing Angle Brackets व
उसमें लिखे गए Texts को Tag
कहा जाता है। हम देख सकते हैं कि हमारे Example में बहुत सारे Tags का प्रयोग किया
गया है।
हमारे
उदाहरण में हर Tag एक जोडे के रूप में है। Opening Tag व Closing Tag में केवल
इतना अन्तर होता है कि Closing Tag में हमेंशा एक Forward Slash का प्रयोग किया
जाता है। जब एक HTML Tag Pair के बीच कुछ Information Texts को लिखा जाता है, तब
बनने वाले पूरे Statement को Element
कहा जाता है। HTML Tag and Element
पिछले उदाहरण में
हमने सबसे पहले <html></html> Tag Pair को उपयोग में लिया है। किसी भी
Web Page में लिखा जाने वाला ये एक जरूरी Element है, क्योंकि Web Page में जो कुछ
भी दिखाई देता है, वह सबकुछ इसी Tag Pair में लिखा जाना जरूरी होता है।
हर
<html></html> Tag Pair के हमेंशा दो हिस्से होते हैं, जिनमें पहला
हिस्सा Web Browser व Search Engines से सम्बंधित जानकारियों के लिए होता है। इस
हिस्से को <head></head> Tag Pair के रूप में Identify किया जाता है,
जबकि दूसरा हिस्सा <body></body> Tag Pair के रूप में होता है और हम
अपने Web Page को Structure करने के लिए जितने भी Tags उपयोग में लेते हैं उन सभी
Tags को यहीं Use करना होता है।
उदाहरण के लिए
Web Page का Title Web Browser के Title Bar में दिखाई देता है, इसलिए
<title></title> Tag Pair को हमने <head> Element में उपयोग में
लिया है, जबकि अपने Web Page के Contents की Heading को Web Browser में Render
करने के लिए हमने <h1> Element का प्रयोग <body> Element में किया है।
हमने पहले भी
उल्लेख किया था कि Markup Tags Documents में किसी Text को Highlight करने अथवा
उसे Special Meaning देने का काम करते हैं। ये Tags Browser को जो Special Meaning
देते हैं, वे Description ही Document को Structure करते हैं। हमारे उदाहरण में जब
हम <h1> Opening Tag User करते हैं, तो ये Tab Web Browser को बताता है कि
यहां से Heading 1 का Text शुरू हो रहा है, जबकि </h1> Closing Tag Web
Browser को बताता है, कि यहां पर Heading 1 का Text समाप्त हो रहा है। यदि हम इन
Tags का प्रयोग ना करें, तो सारे Texts Web Browser के लिए सामान्य Texts होंगे और
Browser किसी भी Text को अलग तरह से Markup या Highlight नहीं करेगा।
विभिन्न प्रकार के HTML Tags ही
Web Browser को बताते है, कि किस Text को Heading के रूप में Render करना है और
किस Text को सामान्य Paragraph क रूप में। कई बार हमें एक Element के अन्दर दूसरे
Element की Nesting करनी पडती है। इस स्थिति में Outer Element Parent Element कहलाता है, जबकि Inner
Element Child Element
कहलाता है।
0 comments:
Post a Comment