फॉण्ट और इमेज -> इमेज टैग

<img> टैग
इस टैग का प्रयोग ब्राउज़र में किसी इमेज को प्रदशित करने के लिए किया जाता है, निम्न प्रकार की इमेज फ़ाइल को लगभग सभी ब्राउज़र सपोर्ट करते है -:

फ़ाइल टाइप                                               एक्सटेंशन नेम
GIF (Graphics Interchange Format)             .gif
JPEG  (Joint Photographic Experts Group)    .jpg or.jpeg
XBM (X Bitmaps)                                       .xbm
XPM (X Pixelmaps)                                    .xpm
PNG  (Portalbe Network Graphics)              .png
BMP  (Bitmap)                                          .bmp

<img> टैग के साथ निम्नलिखित एट्रीब्युट्स का प्रयोग किया जाता है ..

फॉण्ट और इमेज

वेब पेज पर टेक्स्ट को विभिन्न फोंट्स, रंगो, तथा आकार में प्रदर्शित कराया जा सकता है, इसके लिए <font> टैग का प्रयोग किया जाता है, इस टैग के तीन एट्रीब्युट्स (face, color, size) की सहायता से वेब पेज पर प्रदर्शित होने वाले टेक्स्ट को अलग-अलग फोंट्स, रंग तथा आकार में दिखाया जा सकता है..

वेबपेज पर टेक्स्ट के अलावा इमेज को भी प्रदर्शित कराया जा सकता है, जिसके लिए <img> टैग का प्रयोग करना होता है, यदि इस टैग को हम एंकर टैग के बीच लगा देंगे तो इमेज पर क्लीक करने पर भी वह लिंक कार्य करेगा, लिंक सेट करना मैं आगे बताऊंगा ...

<font> टैग
इस टैग का प्रयोग टेक्स्ट को निश्चित फॉण्ट, साइज़ (1 से 7) तथा कलर में प्रदर्शित करने के लिए किया जाता है, इस टैग के साथ निम्नलिखित एट्रीब्युट्स का प्रयोग किया जा सकता है...

कुछ ध्यान रखने योग्य बिंदु

 दूसरा अध्याय समाप्त हो गया है अब कुछ ध्यान रखने योग्य बिंदु...


* <b>, <i>, <u> टैग्स का प्रयोग टेक्स्ट या उसके किसी भाग को बोल्ड, इटेलिक, तथा अंडरलाइन करने के लिए किया जाता है..
* यदि हम टेक्स्ट या उसके किसी भाग को <big> टैग के बीच में रखते हैं तो उसका फॉण्ट साइज़ 1 से बढ़ जाता है..
* <small> टैग का प्रयोग फॉण्ट साइज़ को घटाने के लिए किया जाता है..
* <sub> तथा <sup> टैग्स को स्ट्राइक थ्रू प्रभाव देने के लिए किये जाता है ..
* स्पेशल करेक्टर को प्रदर्शित करने के लिए इनके कोड अथवा नाम वेल्यु का प्रयोग करना होता है..
* <Hn> टैग का प्रयोग हैडिंग देने के लिए होता है, हैडिंग h1 से h6 तक हो सकते है..
* <hr> टैग का प्रयोग उर्ध्वाकार (आड़ी) लाइन बनाने के लिए किया जाता है...
* <comment> टैग के बीच में लिखा गया टेक्स्ट आउटपुट (ब्राउज़र) में प्रदर्शित नहीं होता..

div टैग (Division Tag)

इस टैग का प्रयोग नया सेक्शन बनाने के लिए किया जाता है, इस प्रकार बनाये गए सेक्शन के अलाइनमेंट अलग-अलग हो सकते है, इस टैग के साथ निम्नलिखित एट्रीब्यूट का प्रयोग किया जाता है..

एट्रीब्यूट   विवरण
align  नए सेक्शन का अलाइनमेंट  left,right या  center सेट करने के लिए..
           उदाहरण: <div align="center">
           डिफाल्ट वेल्यु:left


उदाहरण: नीचे दिए गए उदाहरण में <div> टैग को समझाया गया है..

comment टैग (comment tag)

comment टैग दो प्रकार के होते हैं

<comment> टैग
इस टैग के बीच में लिखा गया टेक्स्ट आउटपुट में प्रदर्शित नहीं होता
उदाहरण: नीचे दिए गए उदाहरण में <comment> टैग को समझाया गया है..

<html>
<head>
<title>Demo</title>
</head>
<body>
  <comment>this is demo</comment>
<p>htmlhindime</p>
</body>
</html>

hr टैग (Horizontal Rule Tag)

इस टैग का प्रयोग क्षैतिज लाइन बनाने के लिए किया जाता है, इस टैग के साथ निम्नलिखित एट्रीब्युट्स  का प्रयोग किया जाता है:

---

एट्रीब्युट                    विवरण
size           लाइन की मोटाई निर्धारित करने के लिए
                उदाहरण: <hr size=20>
width          लाइन की चौड़ाई निर्धारित करने के लिए,चौड़ाई को प्रतिशत अथवा
                 पिक्सेल में दिया जाता है
                  उदाहरण: <hr width="20%">, <hr width="20">
noshade      लाइन का शेड हटाने के लिए
                   उदाहरण: <hr width="20%" noshade>
align          लाइन का अलाइनमेंट left, right या  center करने के लिए..
                उदाहरण: <align="center">
color         लाइन का कलर सेट करने के लिए
                उदाहरण: <hr width="20" color="red">

Hn टैग (Heading Tag)

इस टैग का प्रयोग हेडिंग देने के लिए किया जाता है, हेडिंग h1 से लेकर  h6 तक हो सकते हैं, इस टैग के साथ निम्नलिखित एट्रीब्यूट का प्रयोग किया जाता है..

एट्रीब्यूट        विवरण
align   हैडिंग का अलाइनमेंट left, right, center या justify सेट करने के लिए..
             उदाहरण: h1 align<"center">
             डिफाल्ट वेल्यु: left

उदाहरण:नीचे दिए गए उदाहरण में h1 से h6 तक टैग को दर्शाया गया है..


 <html>
<head>

blink टैग

इस टैग के बिच में लिखा गया टेक्स्ट ब्लिंक करता हुआ दिखाई देता है...

उदाहरण: नीचे दिए गए उदाहरण में <blink> टैग को समझाया गया है..


<html>
<head>
<title>Demo blink</title>
</head>
<body>
<blink>this is demo of  blink</blink>
</body>
</html>

स्पेशल कैरेक्टर्स

वेब पेज पर स्पेशल कैरेक्टर्स जैसे ®, © आदि को प्रदर्शित करवाया जाता है, इन स्पेशल कैरेक्टर्स को वेबपेज पर प्रदर्शित करने के लिए इनके कोड अथवा नेम वेल्यु का प्रयोग करना होता है,
मुख्यत: स्पेशल कैरेक्टर्स की सारणी नीचे दी गयी है....



कोड         नेम वेल्यु           कैरेक्टर्स
&#034;    &QUOT;               "
&#169;    &COPY;              ©
&#174;    &REG;                ®
&#060;    &LT;                   <
&#062;     &GT;                   >
&#038;     &AMP;                &
&#153;     &TRADE;             TM
&#160;     &NBSP;               NON BRAKING SPACE

strike, sub, sup टैग

strike टैग का प्रयोग टेक्स्ट को स्ट्राइक थ्रू प्रभाव देने के लिए किया जाता है, इसके लिए <s> टैग का प्रयोग भी किया जाता है...
<sub> और <sup> का प्रयोग टेक्स्ट पर सब स्क्रिप्ट या सुपर स्क्रिप्ट प्रभाव देने के लिए किया जाता है....
उदाहरण: नीछे दिए गए उदाहरण में इन तीनो टैग को समझाया गया है..

 <html>
    <head>
      <title>Demo</title>
    </head>
    <body>
        <p>
        <strike>this is strike</strike> <br>
        <s>this is strike</s> <br>

big और small टैग

<big> टैग


ब्राउज़र में जो टेक्स्ट प्रदर्शित होता है उसका फॉण्ट साइज़ 1 से 7 तक हो सकता है, जब हम फॉण्ट के साइज़ को निर्धरित नहीं करते तो उसका डिफॉल्ट फॉण्ट साइज़ 3 होता है, यदि हम टेक्स्ट या उसके किसी भाग को <big> टैग के बीच में लिखते हैं तो उसका फॉण्ट साइज़ 1 से बढ़ जाता है, इसी प्रकार <big> टैग का प्रयोग यदि दो बार किया जाये तो टेक्स्ट का साइज़ 2 से बढ़ जाता है अर्थात 5 हो जाता है ...


 <small> टैग

जिस प्रकार <big> टैग का प्रयोग साइज़ को बढ़ाने के लिए किया जाता है उसी प्रकार <small> टैग का प्रयोग फॉण्ट साइज़ को घटाने के लिए किया जाता है..

b, i, u टैग

इन टैग्स का प्रयोग टेक्स्ट या उसके किसी भाग को बोल्ड, इटेलिक तथा अंडरलाइन करने के लिए किया जाता है....

उदाहरण: नीचे दिए गए उदाहरण में <b>, <i> तथा <u> टैग को समझाया गया है...


<html>
    <head>
      <title>Demo</title>
    </head>
    <body>
        <p>
        <b>this is a bold</b> <br>
        <i>this is italic</i> <br>
        <u>this is underline</u><br>
        <b><i><u>this is a bold, italic and underline</b></i></u>

फोर्मेटिंग (Formating)

वेब पेज पर प्रदर्शित होने वाले टेक्स्ट को कभी अलग-अलग फोर्मेट में प्रदर्शित करवाने की आवश्यकता पड़ सकती है, उदाहरण के लिए किसी हेडिंग को बड़े साइज़ में प्रदर्शित करना या किसी महत्वपूर्ण शब्द को बोल्ड या अंडरलाइन करके दिखाना आदि, इस प्रकार के कार्यों को करने के लिए HTML में कई टैग उपस्थित है जैसे <b>, <i>, <u>,<big>, <strike> आदि... इन टैग्स का प्रयोग करके किसी वेब पेज को अधिक प्रभावशाली बनाया जा सकता है...

HTML का पहला अध्याय समाप्त हो गया है

 अब कुछ ध्यान दें योग्य बातें पढ़ें ...

: एचएमटीएल एक प्रोग्रामिंग लेंग्वेज है जिसमें वेब पेजों को बनाने और दिखने के लिए विभिन्न टैग्स का प्रयोग किया जाता है...
: एचएमटीएल कोड को किसी भी टेक्स्ट एडिटर जैसे नोटपेड आदि में लिखा जा सकता है...
: एचएमटीएल में लिखे गए कोड का आउटपुट देखने के लिए हमें ब्राउज़र का प्रयोग करना होता है...
: एचएमटीएल फाइल का एक्सटेंशन .htm या .html होता है...
: टैग को < से प्रारम्भ तथा > से समाप्त किया जाता है...
: एट्रीब्यूट का प्रयोग किसी टैग की विभिन्न प्रोपर्टीज की निर्धारित करने के लिए किया जाता है...
: एचएमटीएल पेज को मुख्यत: दो भागों में विभाजित किया जा सकता है: head सेक्शन तथा body सेक्शन ...
: यदि हमें आउटपुट में पैराग्राफ को वैसा ही देखना चाहतें है जैसा की हमने टाइप किया है तो इसके लिए <pre> टैग का प्रयोग किया जाता है...
: <br> टैग के बाद दिया जाने वाला टेक्स्ट अथवा ग्राफिक अगली लाइन में आता है...

br टैग (Line Break)

इस टैग का प्रयोग लाइन ब्रेक करने के लिए किया जाता है, अर्थात टैग के बाद दिया जाने वाला टेक्स्ट अथवा ग्राफिक अगली लाइन में आता है ..

उदाहरण : नीचे दिए गए उदाहरण में पैराग्राफ  टैग के अंदर <br> टैग का प्रयोग किया गया है..
<br> टैग जहाँ दिया गया है वहाँ से आगे का टेक्स्ट अगली लाइन में प्रिंट होगा अर्थात hello,पहली लाइन में तथा this is demo अगली लाइन में प्रिंट होगा...

pre टैग (Pre Formatted Text)

इस टैग का प्रयोग वहाँ किया जाता है जबी हमें टाइप किया हुआ हुबहू देखना होता है...

नीचे दिए गए उदाहरण में <pre> का प्रयोग किया गया है,इस टैग का प्रयोग करने से पैराग्राफ के शब्दों को जिस प्रकार लिखा (खाली स्पेस, टैब,इंटर ) जाता है,वे उसी प्रकार ब्राउज़र में आउटपुट दिखते हैं..


<html>
   <head>
<title>Demo</title>
</head>
<body>

<p>hello, this is
           a demo </p>

p टैग (पैराग्राफ टैग)

इस टैग का प्रयोग पैराग्राफ लिखने के लिए किया जाता है, जब इस टैग का प्रयोग किया जाता है तो पैराग्राफ के ऊपर तथा नीचे की तरफ एक खाली लाइन जुड़ जाती है,
इस टैग के साथ निम्नलिखित एट्रिब्यूट का प्रयोग किया जाता है.....

एट्रिब्यूट  विवरण
align    पैराग्राफ का अलाइनमेंट left, right, center या justyfy  सेट करने के लिए
            उदाहरण -:<p algin ="left">  डिफाल्ट वैल्यू -: left

उदाहरण : नीचे दिए गए उदाहरण में ब्राउज़र के बॉडी सेक्शन में एक पैराग्राफ प्रिंट कराया गया है...

एचटीएमएल की शुरुआत

आज  से हम एचटीएमएल की शुरुआत करते है तो सबसे पहले निम्न टैग को समझ लिजिए...


<html> टैग

यह टैग एचटीएमएल पेज के प्रारम्भ में होता है तथा इसे </HTML> टैग से पेज के अंत में बंद किया जाता है।
यह टैग ब्राउज़र को यह बताता है की इन टैग्स के बीच में एचटीएमएल कोड है।

<head> टैग

इस टैग में टाइटल बार पर नजर आने वाला टेक्स्ट, स्क्रिप्ट अन्य डाक्यूमेंट हैडर तथा मेटा टैग आदि लिखें जाते हैं, इसे पेज के <body> के शुरू होने से पूर्व </head> से बंद किया जाता है।
टाइटल बार पर किसी टेक्स्ट को प्रदर्शित करने के लिए इस टैग में <title> टैग का प्रयोग किया जाता है।

एचटीएमएल प्रोग्राम का प्रारूप

एचटीएमएल पेज मुख्यत: दो भागों में विभाजित किया जा सकता है।

-: head सेक्शन तथा
-: body सेक्शन

इसे समझने के लिए निम्न उदाहरण देखिये:

<html>
<head>
     <title>
   HTML basics
   </title>
</head>
<body>
       my frist web page.
</body>
</html>

एचटीएमएल एट्रिब्यूट

एट्रिब्यूट का प्रयोग किसी टेग की विभिन्न प्रोपर्टीज को निर्धारित करने के लिए किया जाता है। उदहारण के लिए <p> टेग के align एट्रिब्यूट का प्रयोग करके पैराग्राफ का अलाइमेंट left, right अथवा center सेट किया जा सकता  है। इसी प्रकार <body> टेग के bgcolor एट्रिब्यूट का प्रयोग करके ब्राउज़र की बॉडी का बेकग्राउंड कलर सेट किया जा सकता है।

नीचे दिए गए उदाहरण में <body> टेग के bgcolor तथा <p> टेग के align एट्रिब्यूट का प्रयोग करके बॉडी का बेकग्राउंड रंग नीला तथा पैराग्राफ का center अलाइमेंट सेट किया है।