Add Images and Link in HTML – HTML में चित्र और लिंक जोड़ें :- इस पोस्ट में हम HTML के बेसिक के बारे में जानेगें, इस पोस्ट के पहले मैंने कई और पोस्ट लिखी हैं , जिन्हे आप देख सकते हैं.
HTML में चित्र और लिंक जोड़ें: – आज के पोस्ट में हम HTML बेसिक के बारे में जानेंगे, जैसा की पिछले पोस्ट में, मैंने ये बताया हैं, की कैसे HTML पेज बनाया जाता हैं, अब इस पोस्ट में हम देखेंगे की कैसे वेबसाइट की लिंक और इमेज (फोटो) को HTML में ऐड कर सकते हैं.
तो सबसे पहले देखते हैं की HTML लिंक क्या होता हैं, और इसको कैसे उपयोग में लाया जाता हैं
HTML Link :-
आप लोग कोई ब्लॉग या न्यूज़ पढ़ते हैं, तो उसके बीच में कोई यूआरएल / वेबलिंक को जोड़ने के लिए “href ” का उपयोग किया जाता हैं, यहाँ पर “href ” attribute का उपयोग किसी भी लिंक के गंतव्य के बारे में बतलाने का होता हैं .
जैसे की मैं चाहता हूँ ,की मेरे बनाये HTML पेज पर Google के वेबसाइट का लिंक हो, और यूजर उसपर क्लिक करें, तो “https://www.google.com/ ” खुल जाए, तो उसके लिए हमें नीचे दिया हुआँ कोड उपयोग में लाना होगा.
<a href=”https://www.google.com”>Google Link</a>
और इस कोड को मुझे अपने HTML पेज की coding में डालना होगा , जैसा की मैंने नीचे किया हैं .
<!DOCTYPE html>
<html>
<head>
<title>This is my first html page</title>
</head>
<body>
<h1><a href=”https://www.google.com”>Google Link</a></h1>
</body>
</html>
एक बार ऊपर दिए हुए कोड को आप .HTML कर के सेव कर देंगे और इस फाइल को ओपन करेंगे, तो आप को कुछ निचे दिए हुए स्क्रीन जैसा दिखेगा .
पर एक बार आप “Google Link ” पर क्लिक करेंगे, तो उसी पेज पर गूगल का वेबसाइट दिखने लगेगा, न की दूसरे tab पर , अगर आप चाहते हैं, की क्लिक करने पर लिंक दूसरे Tab पर खुले तो उसके लिए निचे दिए हुए कोड को उपयोग में लाये .
<a href=”https://www.google.com/” target=”_blank”> Google Link </a>
तो इस प्रकार आप लिंक को उसी पेज पर उसी TAB पर ओपन कर सकते हैं, या फिर उसी पेज के दूसरे Tab पर भी ओपन कर सकते हैं .
अब हम दूसरे टॉपिक को सीखेंगे जो की हैं, HTML Images .
HTML Images:- हाँ, तो सभी लोगो को फोटो अच्छी लगती हैं, चाहे वो न्यूज़ पेपर हो या फिर कोई वेबसाइट हो, अगर आप कोई न्यूज़ लिख रहे हैं, और उसमें फोटो न हो तो, वो न्यूज़ मैं कुछ पूरी सी नहीं लगती, ऐसा लगता हैं, मानो कोई कमी सी हैं, ठीक वैसे ही जैसे की मूवी की कहानी कितनी भी अच्छी हो, पर अगर उसमें अच्छा गाना न हो तो, फ़िल्म देखे में अच्छा नहीं लगता, उस न्यूज़ या समाचार , ब्लॉग को सुन्दर , एक अच्छा लुक देने के लिए, आप को उसमें फोटो को जोड़ देना चाहिए .
तो अभी हम समझेंगे की HTML में coding के उपयोग से हम फोटो को कैसे जोड़े ..
HTML images को हम <img> टैग से और स्रोत फ़ाइल को <src> से परिभाषित किया जाता हैं, इसके आलावा इमेज की लम्बाई और चौडाई को height और width से परिभाषित किया जाता हैं, एक इमेज को ऐड करने के लिए, आप निचे दिए हुए कोड को उपयोग में ला सकते हैं
<img src=”https://www.ibexinfos.com/wp-content/uploads/2021/05/cropped-IBEXINFOS-270×270.jpeg” alt=”Img” width=”32″ height=”32″>
आप अच्छे से समझने के लिए निचे दिए हुए पूरे कोड को कॉपी कर सकते हैं , तथा नोटपैड पर लिख कर, .HTML के नाम से सेव कर के, इस उदाहरण को अच्छे से समझ सकते हैं, इसके लिए आप मेरा पिछले ब्लॉग देख सकते हैं , जिसमें मैंने अच्छे से बताया हैं की कैसे, HTML की coding को notepad पर लिख कर सेव करना चाहिए.
<!DOCTYPE html>
<html>
<head>
<title>This is my first html page</title>
</head>
<body>
<h1><a href=”https://www.aforapple.co.in”>Aforapple Education</a></h1>
<h1>HTML Images</h1>
<img src=”https://www.ibexinfos.com/wp-content/uploads/2021/05/cropped-IBEXINFOS-270×270.jpeg” alt=”Img” width=”32″ height=”32″>
</body>
</html>
ऊपर दिए हुए कोड को रन कर के, देखने पर आप को निचे दिया हुआँ स्क्रीन दिखाई देगा.
तो आज हमने सीखा की HTML में लिंक और Images को कैसे जोड़ सकते हैं, अगले पोस्ट में, images को और भी अच्छे से जोड़ने, और एक सुन्दर HTML पेज बनाने के बारे में बात करेंगे, और कुछ नया सीखेंगे.
थैंक यू।