Ticker

6/recent/ticker-posts

HTML

Kishan sharma November 02, 2017

HTML IN HINDI:-



अगर आप वेब डेवलपर बनना चाहते है या अपनी खुद की वेबसाइट बनाना चाहते तो आप को HTML सीखना ही होगा क्योंकि HTML के बिना दुनिया का कोई भी वेबसाइट बनाना मुमकिन ही नहीं है । HTML सभी वेबसाइट का आधार है जिससे वेबसाइट का ढाँचा (structure) तैयार होता है ।
HTML का पूरा नाम हाइपर टेक्स्ट मार्कअप लैंग्वेज (Hyper Text Markup Language) है ।
अगर आप CSS , JavaScript ,PHP,MySQL अदि नहीं भी सीखते है तब भी आप सिर्फ HTML का उपयोग करके भी पूरा वेबसाइट बना सकते है लेकिन ये वेबसाइट उतना अच्छा नहीं होगा पर वेबसाइट तो बन ही सकता है।
HTML को Tim Berners-Lee द्वारा 1989 में बनाया गया था ।
समय-समय पर html के पुराने गुणों में संशोधन करके नया संस्करण संस्करण लॉन्च किया जाता है | दोस्तों अभी html का पांचवां संस्करण चल रहा है जिसे 2014 तक पूरी तरह से लॉन्च कर दिया गया था | इस पांचवी संस्करण में कई सारे नए गुणों को जोड़ दिया गया है जो कि पुराने संस्करण यानी कि html 4.0 में मौजूद नहीं था|
दोस्तों html को सीखना बहुत ही आसान है अगर आप कोशिश करें तो कुछ ही दिनों में html को बहुत अच्छी तरह से सीख सकते हैं |
HTML सीखने के लिए आपको दो चीजों की जरूरत पड़ती है पहला है Text-Editor (टेक्स्ट एडिटर) और दूसरा है Web-Browser (वेब ब्राउज़र) Text-Editor जैसे कि Notepad(नोटपेड) या Notepad++(नोटपेड प्लस प्लस) कोई भी टेक्स्ट एडिटर का उपयोग आप कर सकते हैं और Web-Browser जैसे कि mozilla firefox (मोज़िला फ़ायरफ़ॉक्स) , google chrome (गूगल क्रोम) या internet explorer( इंटरनेट एक्सप्लोरर) किसी भी वेब ब्राउज़र का उपयोग करके आप HTML सीख सकते हैं |
दोस्तों html सीखने के लिए आपको अलग से कोई भी सॉफ्टवेयर डाउनलोड करने की जरूरत नहीं है क्योंकि अगर आप windows ऑपरेटिंग सिस्टम यूज करते हैं तो पहले से ही आपके कंप्यूटर पर इंटरनेट एक्सप्लोरर(Web-Browser) और नोटपेड(Text-Editor) मौजूद है जिसका उपयोग आप वेबसाइट बनाने के लिए कर सकते हैं लेकिन मैं आपको यह सलाह दूंगा कि आप पहले नोटपेड प्लस प्लस टेक्स्ट एडिटर को डाउनलोड कर लें Notepad++ एक बहुत ही छोटा सा सॉफ्टवेयर है इसे डाउनलोड और इंस्टॉल करना बहुत ही आसान है लेकिन इसे वेबसाइट डेवलपर के लिए ही बनाया गया है इसलिए अगर आप इसका उपयोग HTML में सीखने के लिए करेंगे तो आपको HTML सीखने में बहुत आसानी होगा |
Notepad++ को डाउनलोड करने के लिए इस लिंक पर क्लिक करें (https://notepad-plus-plus.org/)
अगर आप internet explorer ब्राउज़र का उपयोग नहीं करना चाहते हैं तो आप google chrome वेब ब्राउज़र का उपयोग कर सकते हैं | google chrome बहुत ही अच्छा ब्राउज़र है |
Google Chrome को डाउनलोड करने के लिए इस लिंक पर क्लिक करें (https://www.google.com/chrome/)

PARTS OF HTML PAGE IN HINDI:-

HTML पेज का बुनियादी विवरण :-
HTML पेज को तीन भागों में बांटा जा सकता है:-
(किसी भी HTML पेज में इन तीनों भागों का रहना जरुरी है इनके बिना किसी HTML पेज को नहीं बनाया जा सकता है । )
HTML Header (एचटीएमएल का हैडर या सिर)
HTML Body (एचटीएमएल का बॉडी या शरीर)
HTML Footer (एचटीएमएल का फुटर या पैर )
HTML Header (एचटीएमएल का हैडर या सिर) :- ये HTML पेज का सबसे ऊपरी हिस्सा है। पेज के इस भाग में हम पेज के शीर्षक (Title) और element को लिखते हैं। element के उपयोग से हम पेज का विवरण, लेखक के नाम और keywords/खोजशब्दों (ऐसे शब्द जिनसे गूगल हमारे पेज को ढूंढ सके उन्हें keywords कहते है ) को लिखते हैं।
HTML Body (एचटीएमएल का बॉडी या शरीर) :- यह HTML पेज के मध्य भाग है , हमें वेब पेज पर जो कुछ लिखना होता है या जो चित्र (Images) लगाने होते है वो सभी इस HTML Body के अंदर लिखना होता है।
HTML Footer (एचटीएमएल का फुटर या पैर ) :- ये पेज के अंतिम भाग है | इस भाग में HTML पेज का अंत किया जाता है।

HTML TAGS :-

HTML Tags कुछ ऐसे शब्दों को कहते हैं जो पहले से ही HTML में Reserved या आरक्षित है और हर एक Tag का HTML में कुछ एक अलग मतलब होता है ।

HTML के हर TAG < और > इतना इतना से गिरा होता है ।

HTML Tag के कुछ उदाहरण :-
<html> यह एक टैग है ।
<body> यह एक टैग है ।

कोई भी html पेज बनाने के लिए हमें HTML Tags की जरूरत पड़ती है मतलब कि HTML Tags से ही html पेज बनता है ।

जब हम किसी html पेज को लिखना शुरु करते हैं तो शुरुआत हुई HTML Tags की मदद से ही होता है और अंत भी HTML Tags के मदद से ही होता है इसके अलावा एक पेज में हम जो कुछ भी colour, image, Table और List बनाना चाहते हैं वह HTML Tags की मदद से ही होता है ।

HTML 5 में लगभग 120 टैग है पर आप घबराइए नहीं क्योंकि 120 में से 40-50 Tag ही है जिनका उपयोग ज्यादा होता है और जब आप HTML सीखना शुरू करेंगे तो अपने आप इन Tag के नाम और इनका काम आपको याद हो जाएगा ।

16 September 2014 को HTML का पांचवा संस्करण (HTML 5.0) निकाला गया था मतलब की अभी हम जिस HTML को सीख रहे हैं वह HTML का पांचवा संस्करण है HTML के पांचवे संस्करण में HTML 4.0 के कुछ Tag को निकाल दिया गया है साथ ही कुछ नए Tag जो HTML 4.0 में नहीं थे उन्हें HTML 5 में जोड़ा गया है हम इन सारे Tag के बारे में बाद में विस्तार से पढ़ेंगे ।

दोस्तों HTML Tag कि सबसे जरूरी बात यह है कि जब भी हम किसी HTML Tag की शुरूआत करते हैं तो बाद में उस HTML Tag को बंद भी करना पड़ता है ।
जैसे की एक HTML Tag है <body> इसका शुरूआत <body> लिखकर होता है और इसे बंद करने के लिए हमें </body> लिखना पड़ता है । मतलब की एक / चिह्न को < चिह्न के बाद लगाना पड़ता है ।

दोस्तों पांच ऐसे भी HTML Tag है जिन्हें शुरुआत के बाद बंद करने की कोई जरूरत नहीं पड़ती लेकिन उनके के बारे में मैं आपको बाद में बताऊंगा फिलहाल आप इतना समझ लीजिए कि जितने भी HTML Tag की आप शुरुआत करेंगे उन्हें आप को बंद भी करना पड़ेगा ।
अगले पाठ में हम कुछ HTML Tag और उनके उपयोग के बारे में पढ़ेंगे ।

BASIC HTML TAGS IN HINDI :-

<html> Tag :- इस Tags का उपयोग तब होता है जब हम किसी HTML पेज को लिखना शुरु करते हैं मतलब कि अगर हम एक नया HTML Page बनाना चाहते हैं तो सबसे पहले हमें <html> लिखकर Page को शुरू करना पड़ता है | हर HTML Page में <html> Tag का होना जरूरी है |<html></html> Tag का उपयोग एक वेबसाइट में सिर्फ एक बार ही होता है |
<title> Tag :- हर HTML Page में <title> Tag का होना जरूरी है | <title></title> Tag का उपयोग एक वेबसाइट में सिर्फ एक बार ही होता है | इसका उपयोग Website title का लिखने में होता है निचे के चित्र में जो लाल रंग का निशान दिखाई दे रहा है उससे ही वेबसाइट का Title कहते हैं:-

<head> Tag:- हर HTML Page में <head> Tag का होना जरूरी है |<title> Tag को इस <head> </head> Tag के अंदर लिखा जाता है | <head> Tag के अंदर और भी बहुत कुछ लिखते है जिन्हें हम बाद में जानेंगे | <head></head> Tag का उपयोग एक वेबसाइट में सिर्फ एक बार ही होता है |
<body> Tag :- <body> Tag किसी Website का Content Area है मतलब कि हम एक वेबसाइट के में जो भी देखते हैं इस <body> </body> के अंदर ही वह सब लिखा जाता है | हर HTML Page में <body> Tag का होना जरूरी है | <body></body> Tag का उपयोग एक वेबसाइट में सिर्फ एक बार ही होता है |
आप चित्र में देखिए यह पूरा हिस्सा HTML Page का Body कहलाता है :-
<p> Tag :- <p> Tag का मतलब होता है Paragraph अगर आप <p> </p> Tag के अंदर कुछ लिखते हैं तो उसे Paragraph कहते हैं | <p> Tag का उपयोग आप अपनी जरूरत के हिसाब से एक वेबसाइट में कई बार कर सकते हैं |
h1 – h6 Tag :- HTML में 6 तरह के Header tag होते हैं |
  1. <h1> Welcome To Web3tutorial.com </h1>
  2. <h2>Learn Programming In Hindi</h2>
  3. <h3>Learn Web Designing In Hindi </h3>
  4. <h4>Learn Database And SQL In Hindi </h4>
  5. <h5>Learn Php And MySQL In Hindi </h5>
  6. <h6>Learn Bootstrap and AngularJs In Hindi</h6>
Header Tag का उपयोग किसी शब्द या वाक्य के सामने लगाकर उस शब्द या वाक्य को बड़ा और जरूरी दिखाने के लिए किया जाता है |
आप अपनी जरूरत के हिसाब से जितनी बार चाहे उतनी बार header tag का उपयोग अपने Web Page में कर सकते हैं लेकिन ऐसा सलाह दिया जाता है कि एक Wep Page पर <h1></h1> Tag का प्रयोग सिर्फ एक बार और <h2> </h2> Tag का प्रयोग सिर्फ दो बार करना चाहिए | बाकी <h3> से लेकर <h6> तक का उपयोग आप जितनी बार चाहे उतनी बार कर सकते हैं |
याद रहे दोस्तों ऊपर आपने जितने भी Tag के बारे में पढ़ा है उन सब Tag को बाद में बंद करना भी जरूरी होता है जैसे कि <html> Tag को </html> लिखकर बंद करना पड़ता है |
किसी Web Page में किस Tag का शुरूआत कहां से किया जाता है और उसे कहां बंद किया जाता है यह सब हम अगले पाठ में पढ़ेंगे |

MAKING A SIMPLE WEB PAGE :-


अगले पाठ में आपने जिन Tag के बारे में पढ़ा था उन्हीं Tag की मदद से इस पाठ में हम एक साधारण सा Web Page बना कर देखते हैं कि किस Tag की शुरुआत कहां से किया जाता है और उसे कहां खत्म किया जाता है |
उदाहरण 1:-
<html>
   <head>
         <title>Your Page Title</title>
    </head>
<body>
        <h1>This is a Heading</h1>
        <h2>This is a Heading</h2>
        <h3>This is a Heading</h3>
        <h4>This is a Heading</h4>
        <h5>This is a Heading</h5>
        <h6>This is a Heading</h6>
      <p>This is a paragraph.</p>
  </body>
</html>
ऊपर लिखे Code को पहले आप Copy करिए उसके बाद अपने Text – Editor जैसे कि Notepad++ पर उसे Paste कर दीजिए फिर Index.html नाम देकर उसे अपने कंप्यूटर पर Save करिए | उसके बाद index.html को डबल क्लिक करके अपने Web Browser जैसे की Google Chrome या Mozilla Firefox या Internet Explorer पर खोलें |
अब मैं आपको ऊपर उदाहरण 1 में लिखे कोड को समझाता हूं :-
आप देख सकते हैं कि Code में सबसे पहले <html> लिखा गया है और फिर Code के सबसे अंत में </html> को बंद किया गया है ऐसा इसलिए है क्योंकि किसी HTML Page की शुरुआत <html> Tag से होती है और उसे अंत भी </html> Tag से ही होता है |
उसके बाद के लिखे Code को हम दो भाग में बांट सकते हैं पहला <head> </head> और दूसरा <body> </body>
<head> </head> के अंदर Website का Title लिखा जाता है इसके अलावा हेड के अंदर और भी बहुत सारी जरूरी इंफॉर्मेशन लिखे जाते हैं लेकिन उनके बारे में अभी बता कर मैं आपको भ्रमित नहीं करना चाहता इसलिए उन चीजों के बारे में मैं आपको तब बताऊंगा जब आपको html का बेसिक ज्ञान हो जाएगा |
<body> </body> जहां head tag बंद होता है ( </head> ) वहां से <body> की शुरुआत होती है और ठीक HTML पेज के खत्म होने से पहले जहां </html> करते हैं उससे पहले हमें </body> को बंद करना होता है और जितनी भी चीजें हम किसी वेबसाइट में देखते हैं उन सब को हमें <body> </body> tag के अंदर ही लिखना होता है |

HTML CHARACTER FORMAT TAGS IN HINDI :-

आज हम HTML के कुछ और Tag के बारे में पड़ेंगे जिन्हें Character Format Tags कहते हैं इन सभी Tag को html page के <body> </body> के अंदर लिखा जाता है |
Character Format Tags का उपयोग किसी शब्द या वाक्य को रंग , फ़ॉन्ट , इटैलिक, बोल्ड आकार देने के लिए किया जाता है | अब हम उदाहरण की मदद से Character Format Tagsको समझते है ।

आज हम 4 CHARACTER FORMAT TAGS के बारे में पढ़ने वाले है <B>, <I>,<TT> और <U>

उदाहरण 1.
<b> Tag :- <B> Tag का प्रयोग शब्द या वाक्य को Bold करने के लिए किया जाता है ।
<html>
<head><title>Bold Text Example</title></head>
<body>
<b> Bold Text</b>
<p> Normal Text</p>
</body>
</html>
उदाहरण 2.
<i> Tag :- <i> Tag का प्रयोग शब्द या वाक्य को Italic करने के लिए किया जाता है ।
<html>
 <head><title> Italic Text Example</title></head>
 <body>
 <i> italic Tag </i>
 <p> Normal Text</p>
 </body>
 </html>
उदाहरण 3.
<tt> Tag:- <tt> Tag का प्रयोग शब्द या वाक्य को typewriter करने के लिए किया जाता है ।
<html>
<head><title> typewriter Text Example</title></head>
<body>
<tt> typewriter Tag </tt>
<p> Normal Text</p>
</body>
</html>


उदाहरण 4.
<u> Tag :- <u> Tag का प्रयोग शब्द या वाक्य को underlined करने के लिए किया जाता है ।
<html>
<head><title> underlined Text Example</title></head>
<body>
<u> underlined Tag </u>
<p> Normal Text</p>
</body>
</html>
अगले पाठ में हम कुछ और Character Format Tags के बारे में पढ़ेंगे ।

CHARACTER FORMAT TAGS PART 2 :-

आज हम 6 CHARACTER FORMAT TAGS के बारे में पढ़ने वाले है <EM> , <BIG> ,<SMALL> , <STRONG> <SUB> और <SUP>


उदाहरण 5.
<em> Tag :- <em> Tag का प्रयोग शब्द या वाक्य को emphasized करने के लिए किया जाता है ।
<html>
<head><title> emphasized  Text Example</title></head>
<body>
<em> Emphasized  Tag </em>
<p> Normal Text</p>
</body>
</html>

उदाहरण 6.
<big> Tag :– <big> Tag का प्रयोग शब्द या वाक्य को बड़ा बनाने के लिए किया जाता है ।
<html>
<head><title> big Text Example</title></head>
<body>
<big> big Tag </big>
<p> Normal Text</p>
</body>
</html>

उदाहरण 7.
<small> Tag :- <small> Tag का प्रयोग शब्द या वाक्य को small बनाने के लिए किया जाता है ।
<html>
<head><title> big Text Example</title></head>
<body>
<small> Small Tag </small>
<p> Normal Text</p>
</body>
</html>



उदाहरण 8.
<strong> Tag :- <strong> Tag का प्रयोग शब्द या वाक्य को strong बनाने के लिए किया जाता है ।
<html>
<head><title> big Text Example</title></head>
<body>
<strong> Strong Tag </strong>
<p> Normal Text</p>
</body>
</html>

उदाहरण 9.
<sub> Tag :- <sub> Tag का प्रयोग शब्द या वाक्य को subscripted बनाने के लिए किया जाता है ।
<html>
<head><title> big Text Example</title></head>
<body>
<sub> subscripted  </sub >
<p> Normal Text</p>
</body>
</html>

उदाहरण 10.
<sup> Tag :- <sup> Tag का प्रयोग शब्द या वाक्य को superscripted बनाने के लिए किया जाता है ।
<html>
<head><title> big Text Example</title></head>
<body>
<sup> superscripted  </sup>
<p> Normal Text</p>
</body>
</html>


CHARACTER FORMAT TAGS PART 3 :-

आज हम 2 CHARACTER FORMAT TAGS के बारे में पढ़ने वाले है <BDO> , <FONT>

लेकिन पहले हम पहले 10 Character Format Tags के बारे में पढ़ चुके हैं आज के Tag उनसे थोड़ा अलग है क्योंकि आज के Tag का उपयोग हम सीधे किसी शब्द या वाक्य पर नहीं कर सकते हमें इन Tag के साथ कुछ Attribute का उपयोग करना पड़ता है| <bdo> के साथ एक Attribute और <font> के साथ तीन तरह के Attribute का उपयोग किया जाता है |
इनका उपयोग कैसे करना है इसे हम उदाहरण की सहायता से समझते हैं

उदाहरण 11.
<bdo> Tag :- <bdo> Tag का प्रयोग शब्द या वाक्य को उलटा कर देता है ।
<html>
<head><title> big Text Example</title></head>
<body>
<bdo dir="rtl"> This text will go right-to-left. </bdo>
<p> Normal Text</p>
</body>
</html>
dir=”rtl” में dir का मतलब होता है Direction (दिशा) और rtl का मतलब होता है Right To Left (दाएं से बाएं।).
उदाहरण 12.
<font> Tag :– <font> Tag का प्रयोग शब्द या वाक्य को color , size , face (जैसे की arial , verdana) देता है ।
<html>
<body>
<p><font size="3" color="red"> Text Colour Is Red !</font></p>
<p><font size="2" color="blue">Text Colour Is Blue !</font></p>
<p><font face=" arial " color="green">Text Colour Is Green !</font></p>
</body>
</html>
ऊपर हमने <font> Tag के साथ तीन अलग-अलग Attribute का उपयोग किया है | आप चाहें तो तीनों Attribute का उपयोग एक साथ ही कर सकते हैं | Size Attribute के उपयोग से हम शब्द या वाक्य के Size को बढ़ाते हैं Color Attribute के उपयोग से हम शब्द या वाक्य के रंग को बदलते हैं और फिर face Attribute के उपयोग से हम शब्द या वाक्य के लिखने के तरीके को बदल सकते हैं |

HTML COMMENT TAG <!– –> :-

Comment Tag का उपयोग HTML के Code में Comment या टिप्पणी लिखने के लिए किया जाता है |
Comment को ब्राउज़रों में प्रदर्शित नहीं कर रहे हैं । मतलब कि आप Comment Tag के अंदर जो कुछ भी लिखते हैं उन्हें आप ब्राउज़र में नहीं देख सकते इन्हे आप Source Code में देख सकते हैं | Comment का उपयोग Code की व्याख्या करने के लिए जाता है या आप चाहें तो Comment Tag में अपना नाम भी लिख सकते हैं कि ताकि कोई भी इस कोड को देखकर पहचान सके कि इस कोड का लेखक आप हैं और इस Code को आपके द्वारा लिखा गया है |
एक HTML पेज में किसी भी जगह पर आप Comment का उपयोग कर सकते हैं जहां आपको इसकी जरूरत हो वहां आप Comment का उपयोग कर सकते हैं | अब इसके कुछ उदाहरण देखते हैं :-
उदाहरण 1.
<html>
<body>
<!-- This is a  Example Of  Comment  In HTML  -->
<p>This is a paragraph.</p>
<!—Write Your Name Here / अपना नाम यहां पर लिखिए -->
</body>
</html>
ऊपर के Code को जब आप अपने Text Editor पर Copy करके Paste करेंगे और उसके बाद अपने Web Browser पर उसे खोलेंगे तब आपको ब्राउजर पर सिर्फ This is a paragraph यही लाइन लिखा हुआ मिलेगा |

लेकिन आपने जो Comment Code में लिखे हैं अगर आप उन्हें देखना चाहते हैं तो आपको अपने Keyboard से ctrl और u को एक साथ दबाना पड़ेगा या फिर आप अपने Web Browser पर Mouse के दाहिने बटन से क्लिक करें और उसके बाद View Source Code पर क्लिक करें |

उसके बाद आप के सामने जो नया पेज खुल कर आएगा उसमें आप Comment और Source Code को देख सकते हैं|

HTML <BR> TAG :-

HTML <BR> TAG :-

दोस्तों इस पाठ में मैं आपको बहुत ही जरूरी HTML Tag के बारे में बताने वाला हूं जिसका नाम है <br> Tag
<br> Tag को line break के लिए इस्तेमाल किया जाता है मतलब कि अगर आप किसी जगह पर <br> Tag का उपयोग करते हैं तो वह लाइन वहीं खत्म हो जाएगा |
चलिए इसका कुछ उदाहरण देखते हैं :-
उदाहरण 1.
<html>
<head><title>Line Break Tag</title></head>
<body>
<p>Welcome To <br> web3tutorial.com</p>
<h1>This is <br> Tag Example By Web3tutorial.com</h1>
</body>
</html>

[Note :- अगर आपको समझ में नहीं आ रहा है कि ऊपर के उदाहरण में <br> Tag के उपयोग से क्या फायदा हुआ है तो आप ऊपर के उदाहरण में <br> को हटाकर एक बार कोड को चलाइए और फिर <br> को लगा कर एक बार कोड को चलाइए आप समझ जाएंगे कि <br> Tag के उपयोग से क्या फायदा हुआ है | ]

ऊपर के उदाहरण में आप देख सकते हैं कि किस तरह से हम <br> Tag का उपयोग किसी दो Tag के बीच में करके किसी वाक्य को दो हिस्सों में तोड़ सकते हैं |
लेकिन जरूरी नहीं है कि हम <br> Tag का उपयोग किसी दो Tag के बीच में ही करें हम चाहें तो इसका उपयोग बाहर भी कर सकते हैं आप नीचे के उदाहरण में देखिए कैसे हम <br> Tag का उपयोग कर सकते हैं |


उदाहरण 2.
<html>
<head><title>Line Break Tag</title></head>
<body>
<p>Welcome To web3tutorial.com</p>
<br><br>
<h1>This is Tag Example By Web3tutorial.com</h1>
</body>
</html>

दोस्तों आप ऊपर के दोनों उदाहरण में देख सकते हैं कि हमने किस तरह से <br> Tag का उपयोग किया है लेकिन याद रहे कि आपको <br> Tag को बंद करने की जरूरत नहीं है मतलब कि आप जब भी <br> Tag का उपयोग करते हैं तो आपको किसी Closing Tag की जरूरत नहीं पड़ती है |

<IMG> TAG :- IMAGE TAG

आपने किसी वेबसाइट के अंदर Image या चित्र तो देखा ही होगा किसी वेबसाइट के अंदर image को लगाने के लिए हम <img> Tag का उपयोग करते हैं |
<img src=”url” alt=”some_text” style=”width:width;height:height;”>
<Img> Tag के साथ कई सारे Attribute का उपयोग किया जा सकता है लेकिन दो सबसे ज्यादा जरूरी Attribute के नाम है src=” ” और alt=” ”
src Attribute (src=”Path Of The Image“) :- के अंदर Image का Path लिखा जाता है मतलब की इमेज आपके कंप्यूटर में Image किस जगह पर है उसका पूरा रास्ता आपको scr के अंदर लिखना है |
उदाहरण के लिए आप मान लीजिए कि आपने जिस HTML पेज के अंदर Image का उपयोग किया है वह इमेज आप के Desktop पर रखा हुआ है और वह HTML पेज को भी आपने Desktop के ऊपर ही सेव किया है तो आपको src=”image_name.png” या src=”image_name.jpg” लिखना है | मतलब की आप बस इमेज का नाम लिख दीजिए | लेकिन अगर वह image आपके Desktop पर किसी abc नाम के फोल्डर के अंदर रखा हुआ है तो आपको इस तरह से लिखना है src=”abc/image_name.png” या src=”image_name.jpg”

याद रहे दोस्तों की आपको इमेज के नाम के साथ साथ इमेज का फार्मेट भी src के अंदर लिखना है मतलब की आप जिस इमेज का उपयोग अपने web page में करना चाहते हैं उसका फॉर्मेट क्या है यह भी आपको src tag के अंदर लिखना होगा |
अब आप जिस Image का उपयोग अपने Web Page में कर रहे हैं उसका फॉर्मेट क्या है यह जानने के लिए आप पहले उससे Mouse के दाहिने बटन से Image पर क्लिक करें उसके बाद Properties पर क्लिक करें | आमतौर पर किसी image की फॉर्मेट .png या .jpg होता है |

Alt attribute(alt=”Name Of The Image“) :- Alt Attribute का उपयोग Image Tag के साथ इसलिए किया जाता है कि अगर किसी कारण बस आपका image Web Page पर नहीं दिख पा रहा है तो आप के इमेज की जगह उस Image का नाम या जो कुछ भी आप लिखना चाहते हैं वह इस Alt tag के अंदर लिख सकते हैं इसके अलावा सर्च इंजन जैसे कि गूगल आपके इमेज को नहीं बल्कि इमेज के साथ लिखे इस Alt attribute को पढ़ता है इसलिए इमेज के साथ Alt Attribute का लिखना बहुत जरूरी है |

चलिए एक उदाहरण के साथ देखते हैं कि अगर किसी Web Page में अगर हम Image को जोड़ना चाहें तो कैसे जोड़ सकते हैं
[Note:- शुरुआत में आप जिस Image का उपयोग अपने Web Page में करना चाहते हैं उसे और अपने Web Page दोनों को अपने Desktop पर ही Save करिए इससे आपको परेशानी नहीं होगा और बड़ी आसानी से आप Image को अपनी Website के साथ जोड़ सकेंगे |]
उदाहरण 1.
<html>
<body>
<img src="web.jpg"  alt="HTML Image" >
</body>
</html>
[Note:- ऊपर के उदाहरण में src=”web.jpg” में web उस Image का नाम है जिससे मैं अपने Web Page के साथ जोड़ना चाहते हैं और .jpg Image का फॉर्मेट है | आप web.jpg की जगह उस Image का नाम और फॉर्मेट लिखिए जिसका उपयोग आप अपने Web page में करने वाले हैं | अगर आपके पास कोई Image नहीं है तो आप इंटरनेट से इमेज डाउनलोड भी कर सकते हैं | इस बात का ध्यान रखें कि image को उसी जगह पर कॉपी करके पेस्ट कर लें जहां पर कि आप अपने web page को सेव करने वाले हैं ]

<IMG> TAG :- HEIGHT AND WIDTH ATTRIBUTE OF IMAGE TAG:-

आज हम <img> Tag के Height ,Width और Style Attribute के बारे में पढ़ने वाले हैं |
अगले पाठ में आपने Image को HTML पेज के साथ जोड़ना सीखा था इस पाठ में हम अपनी जरूरत के हिसाब से Image की ऊंचाई और चौड़ाई को नियंत्रित करना सीखेंगे |
दोस्तों अगर आप किसी Image की ऊंचाई (Height) और चौड़ाई (Width ) को नियंत्रित करना चाहते हैं तो आप बड़ी आसानी से <img> Tag के Attribute Height और Width की मदद से यह काम कर सकते हैं चलिए इसका एक उदाहरण देख लेते हैं |
उदाहरण 1.
पहले उदाहरण में हम Height और Width Attribute का उपयोग किए बिना देखते हैं एक html पेज में Image को जोड़कर देखते हैं :-
<html>
<head><title>Without Height And Width </title></head>
<body>
<img src="image_name.png" alt="Image Name">  
</body>
</html>



इस उदाहरण में हम Height और Width Attribute का उपयोग करके HTML पेज में Image को जोड़कर देखते हैं कि हमें क्या फर्क मिलता है:-
<html>
<head><title>With Height And Width Attribute </title></head>
<body>
<img src="image_name.png" alt="Image Name" width="200" height="200">  
</body>
</html>
[Note:- जब आप ऊपर लिखे उदाहरण को कॉपी करके अपने Text Editor पर Paste करेंगे और उसके बाद उसे Save करके अपने Web Browser पर खोलेंगे तब आपको एक बात का ध्यान रखना है कि जहां पर src=”image_name.png” लिखा हुआ है वहां पर आपको इमेज के नाम की जगह अपने कंप्यूटर में रखे इमेज के नाम को लिखना है और फॉर्मेट भी आपको अपने कंप्यूटर वाले Image का लिखना है । किस Image का फॉर्मेट कैसे चेक करना है या मैंने आपको इससे पहले वाले पाठ में बता दिया था ।]





Kishan sharma

Posted by: Kishan sharma

A certified Web Developer and SEO Expert. Throughout my career, I’ve continued to seek positions that expand on my knowledge and experience with Digital Marketing and Web Development . An ideal position for me is one that has access to various resources with SEO, PPC, Social Media, Wed Design, Graphic Design and other SEM efforts. My Passion is to learn new things in this Digital Marketing World and adopt techniques to make more powerful and profitable ways to bring conversions and other Business to a company.

Post a Comment

0 Comments