Src Attribute के उपयोग

HTML में src attribute का उपयोग किसी external resource को web page में जोड़ने के लिए किया जाता है। इसका प्रयोग मुख्य रूप से images, videos, audio files, और JavaScript files को embed करने के लिए किया जाता है। नीचे इसके प्रमुख अनुप्रयोग दिए गए हैं:
Src attribute के उपयोग
1. Images जोड़ने के लिए:

src attribute image file का path बताता है।
Example:
<img src="image.jpg" alt="Sample Image">

2. Videos embed करने के लिए:

src attribute video file का URL बताता है।
Example:
<video src="video.mp4" controls></video>

3. Audio Files जोड़ने के लिए:

इसे audio files play करने के लिए use किया जाता है।
Example:
<audio src="audio.mp3" controls></audio>

4. External JavaScript Files जोड़ने के लिए:

External JavaScript को link करने के लिए src attribute का उपयोग किया जाता है।
Example:
<script src="script.js"></script>

5. Iframe में External Resources Embed करने के लिए:
Iframe में किसी external web page या resource को load किया जाता है।
Example:

<iframe src="https://www.example.com" width="600" height="400"></iframe>

Key Notes:

1. Path Specification:

src attribute में absolute path (e.g., https://example.com/image.jpg) या relative path (e.g., images/pic.jpg) दोनों का उपयोग किया जा सकता है।

2. Browser Requests:

src attribute file को load करने के लिए browser को external request भेजने के लिए trigger करता है।

src attribute HTML में multimedia और external scripts को जोड़ने का essential tool है, जिससे webpages dynamic और interactive बनते हैं।

src attribute के अन्य उपयोग

src attribute का उपयोग HTML में कई अन्य tags के साथ भी किया जाता है, जिससे विभिन्न resources और functionalities को web page पर लाया जा सकता है। यहां अन्य उपयोग बताए गए हैं:

1. Input Element में (Type = "image")

Image-based submit button बनाने के लिए src attribute का उपयोग किया जाता है।
Example:

<input type="image" src="button.jpg" alt="Submit Button" width="100" height="50">

2. Source Tag के साथ (Picture और Media Elements के लिए)

  • Responsive images और videos के लिए, <source> tag में src attribute का उपयोग किया जाता है
Example (Picture):


<picture>
    <source src="image-large.jpg" media="(min-width: 800px)">
    <source src="image-small.jpg" media="(max-width: 799px)">
    <img src="image-default.jpg" alt="Responsive Image">
</picture>

Example (Video)

<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    Your browser does not support the video tag.
</video>
3. Embed Tag के साथ (External Applications Embed करने के लिए)

External applications या files (जैसे PDFs, flash files) embed करने के लिए।
Example:


<embed src="document.pdf" width="600" height="400">

4. Track Tag के साथ (Captions या Subtitles के लिए)

Videos में captions या subtitles जोड़ने के लिए।
Example:

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

5. Object Tag के साथ (External Content Embed करने के लिए)

External content या plugins जैसे flash और PDFs को embed करने के लिए।
Example:

<object data="file.pdf" type="application/pdf" width="600" height="400">
    Your browser does not support PDFs.
</object>

6. Iframe के Advanced Use-Cases में:

External websites, applications, या map services जैसे content embed करने के लिए।
Example:

<iframe src="https://www.google.com/maps" width="600" height="400"></iframe>

Versatility: src attribute images, videos, audios, JavaScript, external applications, और responsive resources को manage करने में versatile है।
Optimization: सही usage से performance और user experience बेहतर होती है।

src attribute का उपयोग HTML में multimedia, interactive elements, और external resources जोड़ने के लिए व्यापक रूप से होता है, जिससे web pages modern और dynamic बनते हैं।

मोबाइल में पड़ी audio files को HTML में src attribute के माध्यम से कैसे use करें


आप अपने मोबाइल में पड़ी audio files को HTML में src attribute के माध्यम से use कर सकते हैं, लेकिन इसके लिए कुछ चीजें ध्यान में रखनी होंगी:

1. Local Audio File का Use:


आपकी मोबाइल डिवाइस पर पड़ी ऑडियो फाइल को HTML में उपयोग करने के लिए:

फ़ाइल का absolute path या relative path देना होगा।
Mobile browsers पर, files को सही तरीके से access करने के लिए आपको file path को exact specify करना होगा।
Example:


<audio controls>
    <source src="file:///storage/emulated/0/Music/audio.mp3" type="audio/mpeg"> Your browser does not support the audio element.
</audio>

Limitations:

File Path Compatibility: Mobile browsers सीधे local files को access नहीं कर सकते हैं।

Security Restrictions: Local files को access करने के लिए browser permissions की आवश्यकता हो सकती है।

2. File Upload और Access:

अगर आप अपनी मोबाइल फाइल को direct use नहीं कर पा रहे हैं, तो आप इसे upload करके use कर सकते हैं:

Cloud Storage:
अपनी file को Google Drive, Dropbox या किसी अन्य cloud पर upload करें और public link use करें।
Example:

<audio controls>
    <source src="https://example.com/audio.mp3" type="audio/mpeg">
</audio>

Local Server Setup:
एक local server app (जैसे Termux या HTTP Server) का उपयोग करें और फाइल को serve करें।

  • Steps:

    1. Local server app install करें।
    2. अपनी audio file को server directory में रखें।
    3. Server का URL HTML के src में उपयोग करें।
3. Web Hosting का Use:
यदि आप अपनी audio file को किसी वेबसाइट पर उपयोग करना चाहते हैं, तो इसे किसी web hosting platform पर upload करें।

Example Platforms: GitHub Pages, Netlify, या अन्य hosting services।
Example:

<audio controls>
    <source src="https://mywebsite.com/audio.mp3" type="audio/mpeg">
</audio>

4. PWA (Progressive Web App) से Access:
अगर आप offline mobile files access करना चाहते हैं:

PWA (Progressive Web App) technology का उपयोग करें।
Files को local storage में cache करें और फिर src में add करें।

आप अपनी मोबाइल की audio file को HTML में use कर सकते हैं, लेकिन direct access के लिए browsers में limitations हो सकती हैं। बेहतर होगा कि आप file को upload करके या local server setup करके इस्तेमाल करें।

Src Attribute के उपयोग:

src attribute HTML का एक महत्वपूर्ण हिस्सा है, जिसका उपयोग multimedia elements (जैसे images, audio, video), external scripts, और अन्य resources को webpage में जोड़ने के लिए किया जाता है। यह web pages को interactive और dynamic बनाने में मदद करता है।

मोबाइल में पड़ी फाइल्स का उपयोग करते समय, direct access की limitations हो सकती हैं। इस स्थिति में files को cloud storage या local server के माध्यम से link करना बेहतर होता है। सही configuration और hosting के साथ, आप किसी भी resource को आसानी से उपयोग कर सकते हैं।

src attribute का प्रभावी उपयोग web development को seamless और user-friendly बनाता है।


Read Also 













Posted by

No comments:

Post a Comment

Please अपने नाम से ही comment करें browser में अपनी ID से sign in करें इसके बाद comment करें ।

Subscribe to: Post Comments (Atom)