Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

HTML पेज में फ्लोटिंग इमेज का उपयोग कैसे करें?


HTML में फ्लोटिंग इमेज का उपयोग करने के लिए, CSS प्रॉपर्टी float का उपयोग करें। यह आपको इमेज को बाएं या दाएं फ्लोट करने की अनुमति देता है। अधिक प्रॉपर्टी मानों में निम्नलिखित शामिल हैं:

क्रमांक
प्रॉपर्टी मान और विवरण
1
none
फ्लोट नहीं
2
left
बाएं फ्लोट
3
right
दाएं फ्लोट
4
initial
डिफ़ॉल्ट मान

HTML पेज में फ्लोटिंग इमेज का उपयोग कैसे करें?

उदाहरण

आप HTML में फ्लोटिंग इमेज का उपयोग करने के लिए निम्नलिखित कोड चलाने का प्रयास कर सकते हैं। यहां float right और float left CSS एट्रिब्यूट का उपयोग है:

<!DOCTYPE html> <html>    <head>       <title>HTML Floating Image</title>    </head> <body>    <h1>Float Right</h1>    <p>The below image floats to the right.</p>    <p>       <img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:right" width="190" height="84" />       This is demo text. This is demo text.       This is demo text. This is demo text.       This is demo text. This is demo text.       This is demo text. This is demo text.       This is demo text. This is demo text.       This is demo text. This is demo text.       This is demo text. This is demo text.       This is demo text. This is demo text.    </p>    <h1>Float Left</h1>       <p>The below image floats to the left.</p>       <p>          <img src="https://www.tutorialspoint.com/green/images/logo.png" style="float:left" width="190" height="84" />          This is demo text. This is demo text.          This is demo text. This is demo text.          This is demo text. This is demo text.          This is demo text. This is demo text.          This is demo text. This is demo text.          This is demo text. This is demo text.          This is demo text. This is demo text.          This is demo text. This is demo text.       </p>    </body> </html>

आउटपुट

HTML पेज में फ्लोटिंग इमेज का उपयोग कैसे करें?


  1. HTML में ब्लॉककोट (<blockquote>) का उपयोग कैसे करें? HTML में ब्लॉककोट (<blockquote>) का उपयोग कैसे करें?

    लंबी कोटेशन के लिए <blockquote> टैग लंबी कोटेशन (उद्धरण) दर्शाने के लिए उपयोग होता है। इसमें केवल ब्लॉक-लेवल एलिमेंट्स होने चाहिए, सादा टेक्स्ट नहीं। इसका cite एट्रिब्यूट कोटेशन के स्रोत का URL बताता है। उदाहरण <!DOCTYPE html> <html> <head> <title>HTML blockquot

  1. HTML में इमेज को लिंक की तरह कैसे उपयोग करें? HTML में इमेज को लिंक की तरह कैसे उपयोग करें?

    <img> को <a> के अंदर रखें इमेज को लिंक बनाने के लिए <img> टैग को <a> टैग के अंदर रखें जिसमें href एट्रिब्यूट हो। src में इमेज URL, width/height में आकार दें। उदाहरण <!DOCTYPE html> <html> <head> <title>HTML Image as link</title> </head>

  1. HTML पेज में एनिमेटेड इमेज (GIF) कैसे उपयोग करें? HTML पेज में एनिमेटेड इमेज (GIF) कैसे उपयोग करें?

    एनिमेटेड GIF इमेज एनिमेटेड इमेज GIF फॉर्मेट (Graphics Interchange Format) में होती हैं। HTML में <img> टैग के src एट्रिब्यूट में GIF का URL दें। height और width एट्रिब्यूट्स से आकार सेट करें। उदाहरण <!DOCTYPE html> <html> <head> <title>Animated Image</title> &