एचटीएमल-HTML
वेब पेज बनाने के लिए जिस भाषा का प्रयोग किया जाता है उसे एचटीएमएल (HTML )कहते है। एचटीएमल भाषा ब्राउजर के द्वारा इन्टरप्रेरट (Interpreted) की जाती है। वेब पेजो को हम तकनीक भाषा में एचटीएमल डाक्यूमेन्ट भी कहते है। एचटीएमल भाषा स्पेषल कोड़ के द्वारा शब्दों को नये डियाजन और दूसरे बेव पेजो से जोड़ती है। बेव पेजों को एचटीएमल टेग (Tags) में लिखा जाता है।
एचटीएमल टेग
(HTML Tags)
टेग एचटीएमल भाषा इस तरह से निर्देषित किय गये जिससे वही सीधे शब्दों , पिक्चर और वीडीयों फाइलों को एमडेड (embedded) भाषा में परिवर्तित कर सकते है। एचटीएमल टेग ब्राउजर को कुछ इस तरह से निर्देषित करते है कि जिससे सामान्य शब्द अलग र्फोमेट में प्रदर्षित होता है। एचटीएमल टेग को एचटीएमल में लिखने का साईन कुछ इस प्रकार है।
एचटीएमल
टेग दो प्रकार के होते है। 1 पेयरड टेग (Paired Tags) 2 सिगूलर टेग (Singular Tags)
1 पेयरड टेग (Paired Tags ) - वह टेग पेयरड टेग कहा जाता है जो अपने कंपनियन या क्लोज टेग <>... </>के साथ आता है जैसे <B></B>. पेयरड टेग का प्रभाव शब्द या टेक्सट पर तभी पड़ता है जब वह इन दोनो पेयरड टैग के बीच मे लिखा जाता है। <B>Hello</B>
"पेयरड टेग में प्रथम टेग को ओपनिग टैग (opening tag ) <B> तथा दूसरे टैग को क्लोजिग टैग (closing tag) </B> कहा जाता है।"
2 सिगूलर टेग (Sinular Tags) - यह टेग को हम सिगल टेग भी कहते है क्योकि इसे क्लोज टेग या कंपनियन की टेग की आवष्यकता नहीं होती है। उदाहरण <BR/> इसको लाईन ब्रेक के लिए प्रयोग किया जाता है। इस टेग को कंपनीयन टेग की आवष्यकता नहीं होती है।
कुछ एचटीएमल टेग को सही प्रकार चलाने के लिए अतरिक्त सूचनाओं की आवष्कता पड़ती है। जैसे एक पिक्चर को इमेज टेग<img> में उपयोग करते समय उसकी हाईट और विडथ भी बतानी पड़ती है। <img src= width= height=/> जो अतरिक्त सूचनाएं हम टेग में उपयोग करते है उनको टेग के एटरीब्यूट (Attribute) कहा जाता है। एटरीब्यूट को टेग की बॉडी में स्पेस का प्रयोग करते लिखा जाता है। हम टेग में एक से ज्यादा एटरीब्यूट का प्रयोग आवष्कता के हिसाब कर सकते है।
एचटीएमल कमाण्ड़ (HTML COMMAND)
एचटीएमल प्रोग्राम का ढांचा(Structure of HTML)
प्रत्येक एचटीएमल प्रोग्राम को व्यवस्थित ढांचा होता है। सम्पूर्ण एचटीएमल प्रोग्राम एचटीएमल टेगस से परिबद्व होता है। इन टेगस के मध्य दो स्पेषल टेगस प्रयोग किये जाते है पहला है हेड टेग <Head> </Head> तथा दूसरा है बॉडी टेग<Body> </Body>.
हेड टेग (Head Tags)
हेड टेग में कुछ खास तरह की सूचना एचटीएमल पेज के लिए रखनी होती है जैसे हम अपने एचटीएमल पेज का टाईटल हेड टेग में लिखते है साथ ही साथ अगर हम अपने एचटीएमल पेज पर किसी तरह की जावा स्क्रीप्ट , सीएसएस प्रयोग कर रहे है तो वह भी हमे हेड टेग में लिखनी पड़ती है। हेड टेग को एचटीएमल पेज का शुरूआत टेग भी कहा जाता है।
इसका उदारहण है
<Head>
<Title>Home Page</Title>
</Head>
बॉडी टेग (Body Tags)
एचटीएमल पेज का बेकग्राउंड कलर (background color), टेक्स्ट कलर(text color), फोन्ट साईज(font size), पेज विडथ(width) यह सारी कार्यप्रणाली हमे बॉडी टेग में व्यवस्थित करनी पड़ती है। इसके लिए हमे बॉडी टेग के एटरीब्यूट का प्रयोग करना पड़ता है
कुछ एटरीब्यूटस के उदाहरण हम यहां देखते है
नोट - एचटीएमल में बेकग्राउडं में पिक्चर का प्रयोग करने के लिए सही एडेस सेट करना। जब भी हम हमारे पेज के बेकग्राउडं के लिए पिक्चर सेट करते तब हमे बॉडी टेग के बेकग्राउड़ एटरीब्यूट में पिक्चर का एडेस सेट करना पड़ता है साथ ही साथ जो एडेस हमने बेकग्राउड़ एटरीब्यूट में सेट किया है वह हमारी वर्तमान वर्किग डायेरक्टी में होना चाहिए वो इसलिए क्योकि यह डायेरिक्टी ही वेब सर्वर पर स्टोर की जाती है न कि हमारे कम्प्यूटर का रिलेटिव एडेस।
<body style="background:url(../boxes.jpeg)">
<body style="background:url(item.jpeg)">
<body style="background:url(images/item.jpeg)">
टाईटल्स और फूटर (TITLES AND FOOTERS)
टाईटल्स Title
एक वेब पेज समझने के लिए उसके सही टाईटल्स होना बेहद जरूरी है और यह हम टाईटल्स टेग के जरिए कर सकते है। हम अपने पेज पर जो भी टाईटल्स सेट करना चाते है उसे टाईटल्स टेग के मध्य लिखना होता है और यह टाईटल ब्राउजर के टाईटल्स बार में प्रदर्षित हो जाता है।
<Html>
<Head>
<Title> My Page
<Title>
</Head>
</Html>
फूटर Footer
जिस तरह एक पेज का टाईटल हेड टेग के टाईटल टेग के मध्य रखा जाता है उसी प्रकार कुछ महत्वपूर्ण सूचनाएॅ हमे पेज के सबसे निचले क्रम में रखनी होती है जैसे कॉपीराइट इनफॉरमेषन, कानॅटेक्ट सूचना आदि। फूटर टेग मे हमे निम्न कोड़िग करनी होगी
<ADDRESS>................<ADDRESS>
<Html>
<Head>
<Title> MYPAGE </Title>
</Head>
<Body>
<Address>......This is footer section</Address>
</Body>
2 सिगूलर टेग (Sinular Tags) - यह टेग को हम सिगल टेग भी कहते है क्योकि इसे क्लोज टेग या कंपनियन की टेग की आवष्यकता नहीं होती है। उदाहरण <BR/> इसको लाईन ब्रेक के लिए प्रयोग किया जाता है। इस टेग को कंपनीयन टेग की आवष्यकता नहीं होती है।
कुछ एचटीएमल टेग को सही प्रकार चलाने के लिए अतरिक्त सूचनाओं की आवष्कता पड़ती है। जैसे एक पिक्चर को इमेज टेग<img> में उपयोग करते समय उसकी हाईट और विडथ भी बतानी पड़ती है। <img src= width= height=/> जो अतरिक्त सूचनाएं हम टेग में उपयोग करते है उनको टेग के एटरीब्यूट (Attribute) कहा जाता है। एटरीब्यूट को टेग की बॉडी में स्पेस का प्रयोग करते लिखा जाता है। हम टेग में एक से ज्यादा एटरीब्यूट का प्रयोग आवष्कता के हिसाब कर सकते है।
एचटीएमल कमाण्ड़ (HTML COMMAND)
एचटीएमल प्रोग्राम का ढांचा(Structure of HTML)
प्रत्येक एचटीएमल प्रोग्राम को व्यवस्थित ढांचा होता है। सम्पूर्ण एचटीएमल प्रोग्राम एचटीएमल टेगस से परिबद्व होता है। इन टेगस के मध्य दो स्पेषल टेगस प्रयोग किये जाते है पहला है हेड टेग <Head> </Head> तथा दूसरा है बॉडी टेग<Body> </Body>.
हेड टेग (Head Tags)
हेड टेग में कुछ खास तरह की सूचना एचटीएमल पेज के लिए रखनी होती है जैसे हम अपने एचटीएमल पेज का टाईटल हेड टेग में लिखते है साथ ही साथ अगर हम अपने एचटीएमल पेज पर किसी तरह की जावा स्क्रीप्ट , सीएसएस प्रयोग कर रहे है तो वह भी हमे हेड टेग में लिखनी पड़ती है। हेड टेग को एचटीएमल पेज का शुरूआत टेग भी कहा जाता है।
इसका उदारहण है
<Head>
<Title>Home Page</Title>
</Head>
बॉडी टेग (Body Tags)
एचटीएमल पेज का बेकग्राउंड कलर (background color), टेक्स्ट कलर(text color), फोन्ट साईज(font size), पेज विडथ(width) यह सारी कार्यप्रणाली हमे बॉडी टेग में व्यवस्थित करनी पड़ती है। इसके लिए हमे बॉडी टेग के एटरीब्यूट का प्रयोग करना पड़ता है
कुछ एटरीब्यूटस के उदाहरण हम यहां देखते है
| बेकग्राउड़ मार्जिन सेट करना | इसके बॉडी टेग में स्टाईलषिट प्रयोग में ली जाती है। |
| बेकग्राउड कलर सेट करना | इसके लिए बॉडी टेग का बीकलर एटरीब्यूट को प्रयोग लिया जाता है। |
| बेकग्राउड पिक्चर सेट करना | इसके लिए स्टाईलषिट प्रयोग ली जाती है। |
| टेक्सट | इसके जरिए हमे बॉडी टेक्स्ट का डिफाल्ट कलर सेट कर सकते है। |
नोट - एचटीएमल में बेकग्राउडं में पिक्चर का प्रयोग करने के लिए सही एडेस सेट करना। जब भी हम हमारे पेज के बेकग्राउडं के लिए पिक्चर सेट करते तब हमे बॉडी टेग के बेकग्राउड़ एटरीब्यूट में पिक्चर का एडेस सेट करना पड़ता है साथ ही साथ जो एडेस हमने बेकग्राउड़ एटरीब्यूट में सेट किया है वह हमारी वर्तमान वर्किग डायेरक्टी में होना चाहिए वो इसलिए क्योकि यह डायेरिक्टी ही वेब सर्वर पर स्टोर की जाती है न कि हमारे कम्प्यूटर का रिलेटिव एडेस।
<body style="background:url(../boxes.jpeg)">
<body style="background:url(item.jpeg)">
<body style="background:url(images/item.jpeg)">
टाईटल्स और फूटर (TITLES AND FOOTERS)
टाईटल्स Title
एक वेब पेज समझने के लिए उसके सही टाईटल्स होना बेहद जरूरी है और यह हम टाईटल्स टेग के जरिए कर सकते है। हम अपने पेज पर जो भी टाईटल्स सेट करना चाते है उसे टाईटल्स टेग के मध्य लिखना होता है और यह टाईटल ब्राउजर के टाईटल्स बार में प्रदर्षित हो जाता है।
<Html>
<Head>
<Title> My Page
<Title>
</Head>
</Html>
फूटर Footer
जिस तरह एक पेज का टाईटल हेड टेग के टाईटल टेग के मध्य रखा जाता है उसी प्रकार कुछ महत्वपूर्ण सूचनाएॅ हमे पेज के सबसे निचले क्रम में रखनी होती है जैसे कॉपीराइट इनफॉरमेषन, कानॅटेक्ट सूचना आदि। फूटर टेग मे हमे निम्न कोड़िग करनी होगी
<ADDRESS>................<ADDRESS>
<Html>
<Head>
<Title> MYPAGE </Title>
</Head>
<Body>
<Address>......This is footer section</Address>
</Body>
</Html>
Font and Color
Font and Color
Font-Family
|
यह प्रोपर्टी फोन्ट शैल सेट करने काम करती है इस टूल से हम विभिन्न तरह के फोन्ट अपने एचटीएमल पे जमें उपयोग कर सकते हैं। जैसे&Calibri, Arial, Comic sans MS etc
|
Font-Size
|
इस टूल के जरिए हम फोन्ट की साईज पिक्सल (pixel/em) और % में सेट कर सकते है।
|
color
|
इस टूल के जरिए हम फोन्ट का कलर नाम से (English
Name) या hexadecimal code के जरिए सेट कर सकते है।
|
<p
style=”Font-family: Calibri; Font-size:10px;color:blue;”> Hello Html</p>
Lists
लिस्ट के प्रकार
लिस्ट दो प्रकार की होती है पहली UnOrdered List (Bullets), दूसरी Ordered
Lists(Numbering)
Unordered
List(Bullets)
एक अनओड़र लिस्ट को हम टेग से शुरू करते है और टेग से बंद करते है। प्रत्येक आईटम को इसमे लिस्ट टेग के द्वारा इसमे जोड़ा जाता है।
<ul
style=”list-style-type:circle/square”>
<li>Html
<li>Java
Script
<li>Java
</ul>
Outputs:
- · Html
- JAVA Script
- JAVA
Ordered
Lists(Numbering)
एक ओडरड लिस्ट टेग के साथ शुरू होती है और टेग पर बंद होती है। सभी आईटम टेग के अंदर लिखे जाते है।
नम्बर लिस्ट के कुछ उदाहरण इस प्रकार है
·
List-style-type:
decimal will show (1, 2, 3, 4 etc.)
·
List-style-type:
lower-alpha will show (a, b, c, d, etc.)
· List-style-type:
lower-roman will show (i, ii, iii, iv, v, etc.)
|
<ol
style=”list-style-type: decimal” start=”2”>
<li>
Raj Kumar
<li>
Manoj Kumar
<li>
Mukesh Kumar
</ol>
Definition
Lists
ष्यह लिस्ट टेग और टेग के साथ प्रदेषित होती है
<DL>
<DT>
JAVA
<DD>
OOP Language
<DT>
SQL
<DD>
Database Language
</DL>
Output:
Java
OOP Language
SQL
Database Language
Add Image
Tag to Html Document
एचटीएमल पेज की फोरमेटिंग में हम अपने पेज पर पिक्चर को भी सजा सकते है इसके लिए इमेज टैग का उपयोग किया जाता है ं इमेज टैग पिक्चर एक्सटेषन में को सर्पो करता है।
<HTML>
<HEAD>
<TITLE>SHOW IMAGE</TITLE>
</HEAD>
<BODY STYLE="background-image:url(images/pic.jpg);">
<IMG SRC="images/pic123.jpg"/>
</BODY>
</HTML>
No comments:
Post a Comment