इमेंजे आपके वेबपेज पर सरल तरीके से ब्यूटी के साथ-साथ कई concepts को समझने या समझाने के भी लिए बहुत ज़रुरी है। यह tutorial आपको web page पर images को उपयोग करने के आसान तरीके बतायेगा।
इमेंज को इंसर्ट करना(Insert Image): आप अपने webpage में <img> tag का उपयोग करके किसी भी image को insert कर सकते हो। इस टैग को उपयोग करने का simple syntax निम्नलिखित है-
img src = "Image URL" ... attributes-list/>
<img> tag एक empty tag होता है जिसका अर्थ है इसमें सिर्फ attributes की लिस्ट ही हो सकती है, जिसका कोई closing tag नहीं है।
उदाहरण
आइए निम्नलिखित उदाहरण को try करने के लिए हम अपनी HTML file और test. png image file को समान directory में रखते हैं।
<!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <img src = "/html/images/test.png" alt = "Test Image" /> </body> </html>
आउटपुट
इसके लिए आप अपनी सुविधा अनुसार PNG, JPEG या फिर GIF image file का उपयोग कर सकते हैं। लेकिन पहले आपको सुनिश्चित करना होगा, कि आपने src attribute में सही image file name को specify किया है। क्योंकि इमेंज नेम हमेेशा से ही sensitive case रहा है।
इसमें alt attribute एक Mandatory attribute है, जो कि किसी image के लिए किसी alternate text को स्पेसिफाई करता है। जब image display नहीं हो पाती है।
इमेंज लोकेशन को सेट करें(Set Image Location): आमतौर पर हम अपनी सभी images को एक अलग directory में रखते हैं। तो आइए हम HTML file test. htm को अपने home directory रखें। और इस home directory के अंदर subdirectory images को create करेंगे और अपनी image को test. png में रखेंगे।
उदाहरण
मान लें कि हमारी Image की location "/html/image/test.png" है, और इसके लिए निम्नलिखित उदाहरण को try करें:
<!DOCTYPE html> <html> <head> <title>Using Image in Webpage</title> </head> <body> <p>Simple Image Insert</p> <img src = "/html/images/test.png" alt = "Test Image" /> </body> </html>आउटपुट
 |
| technicalviews in hindi |
इमेंज की विड्थ/हाइट को सेट करें(Set Image Width/ Height): आप width और height attributes के द्वारा अपनी आवश्यकतानुसार इमेंज की width और height को set कर सकते हो। जहां आप अपनी इमेंज की width और height के वास्तविक साइज को pixels या percentage में स्पेसिफाई कर सकते हैं।
उदाहरण
<!DOCTYPE html> <html> <head> <title>Set Image Width and Height</title> </head> <body> <p>Setting image width and height</p> <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/> </body> </html>
आउटपुट
 |
इमेंज के बार्डर को सेट करें(Set Image Border): बाई डिफाल्ट image के आस-पास बार्डर होता है, जहाँ आप border attribute के द्वारा बार्डर की थिकनेस को pixels में specify कर सकते हैं। इसमें 0 में thickness का अर्थ होता है, कि picture के चारों ओर कोई बार्डर नहीं है।
उदाहरण
<!DOCTYPE html> <html> <head> <title>Set Image Border</title> </head> <body> <p>Setting image Border</p> <img src = "/html/images/test.png" alt = "Test Image" border = "3"/> </body> </html>
आउटपुट
इमेंज की अलाइन्मेन्ट को सेट करें(Set Image Alignment): बाई डिफाल्ट image page के बाई ओर align होगी, लेकिन आप इसे सेंटर या दाईं ओर set करने के लिए align attribute का उपयोग कर सकते हैं।
उदाहरण
<!DOCTYPE html> <html> <head> <title>Set Image Alignment</title> </head> <body> <p>Setting image Alignment</p> <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/> </body> </html>
आउटपुट
भारतीय भाषाओं में सहजता से अनुवाद करने और किसी अन्य टूल की अपेक्षा दोगुना अनुवाद करने के लिएहमारे टूल https://transzaar.com/ का उपयोग कर अधिक से अधिक लाभ कमाएँ।
