Images and Multimedia HTML in Hindi

Images and Multimedia.

Embedding images with <img> Tag.

यदि आप किसी एचटीएमएल वेब पेज में किसी भी प्रकार के इमेज, ग्राफ़िक्स, वॉलपेपर, बैकग्राउंड, या फोरेग्रॉउंड इमेज को इन्सर्ट करने के लिए एचटीएमएल में <img> टैग का उपयोग करके कई प्रकार के इमेजेज को अपने मौजूदा एचटीएमएल वेब पेज में एम्बेड कर वेब पेज पर कई प्रकार के ग्राफ़िक्स को प्रदर्शित किया जा है।

So, let’s embed or insert the image in an html web page.

So, let us now know in detail about html img tag.

Image src (source) – सोर्स एट्रिब्यूट उस इमेज फ़ाइल का URL (यूनिफ़ॉर्म रिसोर्स लोकेटर) लोकेशन या स्टोरेज पथ है. यह इमेज एम्बेड लोकेशन ऑनलाइन या ऑफलाइन कंप्यूटर हार्ड ड्राइव लोकेशन भी हो सकती है. जिसे आप अपने वर्त्तमान एचटीएमएल वेब पेज में प्रदर्शित करना चाहते हैं। आपको छवि फ़ाइल के लिए रिलेटिव या अब्सोलुट इमेज स्टोरेज लोकेशन या पथ प्रदान करना होगा। उपरोक्त उदाहरण में, “imagename.png” वास्तविक इमेज फ़ाइल के पथ के लिए स्टोरेज प्लेसहोल्डर है।

Image Alt (Alternative Text) – एम्बेड इमेज ऑल्ट एट्रिब्यूट इमेज के लिए वैकल्पिक टेक्स्ट प्रदान करती है। यह इमेज फाइल के पहुंच के उद्देश्यों के लिए आवश्यक है, और यह जानकारी तब प्रदर्शित होती है, जब वेब पेज में एम्बेड इमेज लोड नहीं की जा सकती या दृष्टिबाधित उपयोगकर्ताओं के लिए स्क्रीन रीडर द्वारा प्रदर्शित नहीं की जाती है। इसमें मौजूदा इमेज या उसके उस वेब पेज में उद्देश्य का वर्णन गया होता है। कई बार ये इमेज ऑनलाइन या ऑफलाइन किसी कारणवश प्रदर्शित नहीं होती है. तब alt टैग विजिटर को इन इमेजेज के बारे में जानकारी प्रदर्शित करते है।

Here’s an example of how to embed an image with the entire image <img> tag in an html web page.

आप किसी भी एचटीएमएल वेब पेज में इमेज के स्वरूप को नियंत्रित करने के लिए अतिरिक्त विशेषताएँ भी प्रदर्शित कर सकते हैं. जैसे किसी एम्बेड इमेज के डायमेंशन निर्धारित करने के लिए हाइट और विड्थ, या इमेज को और अधिक फॉर्मेट या स्टाइल करने के लिए इंटरनल या एक्सटर्नल सीएसएस का उपयोग कर सकते हैं।

Img Tag Example in Html

<!DOCTYPE html>

<html>

<head>

<title>html Image insert tag example</title>

</head>

<body>

<h1>Img Tag Example in Html</h1>

<p>Embedding images with <img> Tag in Html.</p>

<!– Embedding an image from internal source –>

<!– Embedding an image from external internet source –>

<p> Online Image source location- <a href=”https://unsplash.com/photos/Ftx92UKO3Xg”>Chromebook image</a></p>

</body>

</html>

Image attributes: src, alt, width, and height.

किसी भी एचटीएमएल वेब पेज में इमेज <img> टैग का उपयोग करके एचटीएमएल में इमेजेज को एम्बेड करते समय, आप इमेज के प्रदर्शन और इमेज पहुंच के विभिन्न पहलुओं को नियंत्रित करने के लिए कई इमेज बिल्ट-इन इमेज ऐट्रिब्यूट्स का उपयोग कर सकते हैं।

Here is a description of the major html image attributes.

Real Image Source Source.

एम्बेड इमेज सोर्स src एट्रिब्यूट उस इमेज फ़ाइल के सोर्स URL (यूनिफार्म रिसोर्स लोकेटर) को निर्दिष्ट करती है. जिसे आप अपने मौजूद एचटीएमएल वेब पेज पर प्रदर्शित करना चाहते हैं। याद रखे की यहाँ इमेज सोर्स ऑफलाइन या ऑनलाइन स्टोरेज हो सकते है।

This is a required img tag with src attribute and alt text description.

html image source simple example.

Image alternative text description.

The alt attribute provides alternative text information for images in any HTML web page.

यह उस एम्बेड इमेज पहुंच के लिए आवश्यक है. क्योंकि यह जानकारी तब प्रदर्शित होती है. जब वेब पेज में इमेज किसी कारणवश लोड नहीं किया जा सकता है, या दृष्टिबाधित इंटरनेट उपयोगकर्ताओं के लिए स्क्रीन रीडर द्वारा इस इमेज ऑल्ट टेक्स्ट जानकारी को जोर से पढ़ा जाता है। और इमेज टेक्स्ट को इमेज का डिस्क्रिप्शन प्रदर्शित करना चाहिए या उस इमेज का उद्देश्य बताना चाहिए।

html image source alt text simple example.

Image width.

इमेज विड्थ एट्रिब्यूट वर्त्तमान एचटीएमएल वेब पेज में इमेज पिक्सेल में मौजूदा इमेज की चौड़ाई को अपने जरूरत के अनुसार निर्दिष्ट कर सकते है।

निचे दिया गया एचटीएमएल वेब पेज कोड में आपको वेब पेज पर इमेज के प्रदर्शन आकार को नियंत्रित करने की अनुमति देता है।

html image width simple example.

Image height.

मौजूदा एचटीएमएल वेब पेज में इमेज की हाइट एट्रिब्यूट पिक्सेल में इमेज की ऊंचाई निर्दिष्ट करने के कई विकल्प प्रदान करती है।

इमेज विड्थ एट्रिब्यूट की तरह, यह आपको एचटीएमएल वेब पेज में इमेज के प्रदर्शन आकार को नियंत्रित करने की अनुमति देता है।

html image height simple example.

ऊपर लिखा गया एचटीएमएल कोड आप अपने वेबपेज पर इमेज कैसे दिखाई दे यह अनुकूलित करने के लिए इन इमेज एट्रिब्यूट उपयोग कर सकते हैं।

html image height and width simple example.

यहाँ दिया गया एचटीएमएल वेब पेज में कोड 500 पिक्सेल की विड्थ चौड़ाई और 300 पिक्सेल की हाइट ऊँचाई वाली एक इमेज प्रदर्शित करता है. जबकि इंटरनेट यूजर पहुंच के लिए इमेज ऑल्ट टेक्स्ट इन्फोर्मशन भी प्रदान करता है। अपनी मौजूदा एचटीएमएल वेब पेज में विशिष्ट इमेज और डिज़ाइन आवश्यकताओं से मेल खाने के लिए इमेज src, alt, विड्थ चौड़ाई और हाइट ऊंचाई के मानों को अपनी जरूरत के अनुसार आप स्वयं तय करे।

Html src, alt, width, and height Example.

<!DOCTYPE html>

<html>

<head>

<title>Html Image Attributes Example</title>

</head>

<body>

<h1>Image Attributes with width and height Example</h1>

<!– Embedding an image with src, alt, width, and height attributes on internal offline source –>

<!– You can embedding an image with src, alt, width, and height attributes on external online source –>

<p>Online Image source – <a href=”https://unsplash.com/photos/EhTcC9sYXsw”>Nice Macbook Image</a></p>

</body>

</html>

Embedding audio and video with <audio> and <video>

वर्त्तमान समय में एचटीएमएल 5 वर्शन और बाद के नए वर्शन में आप अपने डिज़ाइन एचटीएमएल वेब पेज में <audio> और <video> फाइल टैग का उपयोग करके एचटीएमएल वेब पेज में ऑडियो और वीडियो मल्टीमीडिया फाइल फॉर्मेट या रिसोर्सेज को एम्बेड कर सकते हैं। ये मल्टीमीडिया टैग/एलिमेंट आपको अपने वेब पेजों पर ऑडियो और वीडियो फ़ाइलें को प्रदर्शित करने की अनुमति देते हैं।

Here’s how you can use them in any html file.

Embedding audio file with <audio> tag in html web page.

Using basic audio insert html tags.

your web browser is too old, you need to update it.

</audio>

नए एचटीएमएल वर्शन में किसी भी वेब पेज में <audio> टैग का उपयोग ऑडियो फाइल सामग्री को वेब पेज में एम्बेड किया जाता है।

इसके साथ इन्सर्ट होने वाले ऑडियो फाइल में कण्ट्रोल ऐट्रिब्यूट्स, जिसमे ऑडियो प्लेबैक कण्ट्रोल, जैसे प्ले, पॉज़ और वॉल्यूम, आदि ऑडियो प्लेयर कण्ट्रोल को कण्ट्रोल कर सकते है।

एचटीएमएल <audio> टैग के अंदर, आप ब्राउज़र कम्पेटिबिलिटी इश्यूज के लिए विभिन्न ऑडियो प्रारूप निर्दिष्ट करने के लिए एक या अधिक <source> टैग/एलिमेंट का उपयोग कर सकते हैं। उपरोक्त उदाहरण में, हम मौजूदा वेब पेज में ऑडियो फाइल फॉर्मेट के रूप में एक एमपी3 फ़ाइल का सोर्स एम्बेड करते हैं।

html audio alternative text.

your web browser is too old, you need to update it.

<p>this audio file play simple alarm audio sound</p>

</audio>

आप अपने वेब पेज में यदि चाहे तो <audio> टैग एलिमेंट के अंदर अल्टरनेटिव टेक्स्ट इनफार्मेशन सामग्री को जोड़ सकते हैं. जो तब प्रदर्शित होगी जब आपका मौजूदा वेब ब्राउज़र या तो पुराना है, या वर्त्तमान ऑडियो टैग सोर्स का समर्थन नहीं करता है।

Html audio embedded example.

<!DOCTYPE html>

<html>

<head>

<title>HTML Audio Tag Example</title>

</head>

<body>

<h1>Let’s Try some html audio example</h1>

<!– Embedding an audio file from internal local hard drive sources–>

your web browser is too old, you need to update it.

</audio>

<!– Embedding an audio file from external internet sources–>

<p>Let’s play online Audio file – <a href=”https://www.bensound.com/royalty-free-music/track/stories-of-time-hopeful-synth”>Stories of time sound</a></p>

</body>

</html>

Embedding Video with <video>.

html video tag basic example.

यदि आप अपने मौजूदा वेब पेज या वेबसाइट में वीडियो मल्टीमीडिया ऑब्जेक्ट को एम्बेड करना चाहते है. तो आपको एचटीएमएल 5 वर्शन में सपोर्टेड वीडियो टैग/एलिमेंट का उपयोग करना होगा।

your web browser is too old, you need to update it.

</video>

एचटीएमएल <video> टैग का उपयोग अपने मौजूदा वेब पेज में वीडियो फाइल फॉर्मेट या मल्टीमीडिया सामग्री को एम्बेड करने के लिए किया जाता है।

वीडियो टैग स्वयं कण्ट्रोल एट्रिब्यूट वीडियो प्लेबैक को प्ले वीडियो नियंत्रण में जोड़ती है।

<video> टैग के अंदर, आप अपने कंप्यूटर में इन्सटाल्ड वेब ब्राउज़र कम्पेटिबिलिटी के लिए विभिन्न वीडियो प्रारूप निर्दिष्ट करने के लिए एक या अधिक <source> एलिमेंट्स का उपयोग कर सकते हैं। उपरोक्त उदाहरण में, हम स्रोत के रूप में एक MP4 फ़ाइल या mpeg, flv, आदि वीडियो फॉर्मेट उपयोग कर सकते हैं।

html embeds video alternative text.

Your browser is too old and does not support the video element.

<p>Alternative text for video</p>

</video>

एचटीएमएल ऑडियो टैग के समान, आप अपनी मौजूदा एचटीएमएल फाइल में <video> टैग के अंदर अल्टरनेटिव वीडियो सामग्री को जोड़ सकते हैं. जो सिर्फ किसी वेब ब्राउज़र में तब प्रदर्शित होगी जब वेब ब्राउज़र मौजूदा वीडियो फाइल या फॉर्मेट तत्व का समर्थन नहीं करता हो।

html video width and height attributes.

आप अपने वेब पेज पर वीडियो फाइल के डिफ़ॉल्ट प्ले वीडियो प्लेयर के डायमेंशन को निर्दिष्ट करने के लिए विड्थ और हाइट वीडियो एट्रीब्यूट्स भी सेट कर सकते हैं।

Your browser is too old and does not support the video element.

</video>

ये उदाहरण आपके किसी भी एचटीएमएल वेब पेजों पर ऑडियो और वीडियो फाइल फॉर्मेट या मल्टीमीडिया सामग्री को एम्बेड करने के लिए <audio> और <video> एलिमेंट्स का बुनियादी उपयोग प्रदान करते हैं। आप अपनी वेब ब्राउज़र या वेबसाइट ऑडियो और वीडियो ऐट्रिब्यूट्स रिक्वायरमेंट्स के अनुसार कस्टमाइज कर सकते है।

Embedding Video with <video> Example.

<!DOCTYPE html>

<html>

<head>

<title>HTML Video tag Example</title>

</head>

<body>

<h1>Basic HTML Video Tag Example</h1>

<!– Embedding a internal local hard drive video file example–>

Your browser is too old and does not support the video element.

</video>

<!– Embedding a external online hard drive video file example –>