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

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


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

Sr.No.
संपत्ति मूल्य और विवरण
1
कोई नहीं
तैरता नहीं
2
बाएं
बाईं ओर तैरता है
3
दाएं
दाईं ओर तैरता है
4
आरंभिक
डिफ़ॉल्ट मान

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

उदाहरण

आप HTML में फ्लोटिंग इमेज का उपयोग करने के लिए निम्न कोड को चलाने का प्रयास कर सकते हैं। यहां फ्लोट राइट और फ्लोट लेफ्ट 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 में ब्लॉकक्वाट का उपयोग कैसे करें?

    टैग लंबे उद्धरणों को इंगित करने के लिए है। इसमें केवल ब्लॉक-स्तरीय तत्व होना चाहिए, न कि केवल सादा पाठ। यह किसी अन्य स्रोत से उद्धृत अनुभाग को निर्दिष्ट करता है और इसमें केवल ब्लॉक-स्तरीय तत्व होते हैं। टैग में एक विशेषता, उद्धरण भी होता है, जिसका उपयोग आपके द्वारा HTML दस्तावेज़ में उल्लिखित उद्धर

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

    HTML में एक लिंक के रूप में छवि का उपयोग करने के लिए, टैग के साथ-साथ href विशेषता वाले टैग का उपयोग करें। टैग वेब पेज में इमेज का उपयोग करने के लिए है और टैग लिंक जोड़ने के लिए है। छवि टैग src विशेषता के अंतर्गत, छवि का URL जोड़ें। इसके साथ ही ऊंचाई और चौड़ाई भी जोड़ें। उदाहरण HTML में लिंक के

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

    एचटीएमएल में एनिमेटेड छवियां वेब पेज पर एक छवि है जो चलती है। यह जीआईएफ फॉर्मेट में है यानी ग्राफिक्स इंटरचेंज फॉर्मेट फाइल। HTML में एनिमेटेड इमेज जोड़ना काफी आसान है। आपको . का उपयोग करने की आवश्यकता है src . के साथ टैग करें गुण। स्रोत विशेषता छवि का URL जोड़ती है। साथ ही, ऊंचाई . का उपयोग क