"if you encounter any errors in SAP, send me a screenshot at pramod@learntosap.com, and I will help you resolve the issue."

HTML Images Tag –

HTML TUTORIALS-

HTML Images Tag –

Introduction-

HTML Images Tag -

-HTML (HyperText Markup Language) is the standard language used to create web pages. HTML, Images are a key part of modern web design They help communicate ideas visually, make websites more attractive, and improve user engagement.In this tutorial, will explain in detailes standard HTML images, image maps, background images using CSS, and the elements..

-)🔗 1. HTML Images ( tag) Syntax:-

✅ The most basic and common way to display an image in HTML is by using the <img>tag. It is an empty tag (self-closing) and requires the src and alt attributes...

✅ src (source): This attribute specifies the path to the image file. It can be a relative path (like images/photo.jpg) or an absolute URL (like https://learntosap.com/image.jpg)...

✅ alt (alternative text): This attribute provides descriptive text for the image. It is displayed if the image fails to load and helps screen readers describe the image for visually impaired users...

 <img src="image.jpg" alt="Description of image">

✅ 🌐 Image from Local Foldere-👇

 <img src="image/pic1.jpg" alt="My Picture">

✅ 🌍 Image from the Internet-👇

 <img src="https://www.learntosap.com/html/image.jpg" alt="website image">

✅ 📘 Common Image Example)-👇


                             
                   
                   
                             Example of HTML Logo Image (Insert on the Logo)
                  
                   
                             Example of HTML Logo Image (Insert on the Logo)

✅ Common Image Examples:-width and height: Define the size of the image.👇

 <img src="image.jpg" alt="Company Logo" width="700" height="500">

✅ Image Maps Examples-👇


                           <img src="image.jpg" usemap="#worldmap" alt="World Map">
                           <map name="worldmap">
                           <area shape="rect" coords="34,44,270,350" href="usa.html" alt="USA">
                           <area shape="circle" coords="337,300,50" href="india.html" alt="India">
                           </map>

✅ Image Background Images (CSS) Examples-👇


<!DOCTYPE html>
<html>
<head>
  <title>Background Image Example</title>
  <style>
    body {
      background-image: url('image.jpg'); /* Replace with your image path */
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
      color: Blue;
    }

    .content {
      text-align: center;
      padding-top: 200px;
    }
  </style>
</head>
<body>
  <div class="content">
    <h1>www.learntosap.com</h1>
    <p>Welcome to our website.</p>
  </div>
</body>
</html>

📌 Common Image Example: Repeat Horizontally-👇


<!DOCTYPE html>
<html>
<head>
  <title>Repeat Horizontally</title>
  <style>
    body {
      background-image: url('image.jpg');
      background-repeat: repeat-x; /* Repeats only horizontally */
    }
  </style>
</head>
<body>
  <h1>This background repeats only horizontally.</h1>
</body>
</html>

📌 Common Image Example:✅ Example: Repeat Vertically-👇


<style>
  body {
    background-image: url('image.jpg');
    background-repeat: repeat-y; /* Repeats only vertically */
  }
</style>

📌 Common Image Example:✅ Example: No Repeat-👇


<style>
  body {
    background-image: url('image.jpg');
    background-repeat: no-repeat; /* No repeat */
  }
</style>

📌 Common Image Example:✅ Example: Repeat Both (Default)-👇


<!DOCTYPE html>
<html>
<head>
  <title>Background Repeat Example</title>
  <style>
    body {
      background-image: url('image.jpg');
      background-repeat: repeat; /* Repeats both directions */
    }
  </style>
</head>
<body>
  <h1>Background Repeat Example</h1>
  <p>This background image repeats both horizontally and vertically.</p>
</body>
</html>

📌 Common Image Example:✅ Example: of Picture -👇


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Picture Element Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      padding: 20px;
    }

    img {
      max-width: 100%;
      height: auto;
      border: 2px solid #ccc;
    }
  </style>
</head>
<body>

  <h1>Responsive Image with &lt;picture&gt; Element</h1>

  <picture>
    <!-- For screens 700px and wider -->
    <source media="(min-width: 700px)" srcset="image.jpg">
    
    <!-- For screens between 400px and 799px -->
    <source media="(min-width: 400px)" srcset="image.jpg">
    
    <!-- Default image for smaller screens -->
    <img src="image.jpg" alt="Beautiful landscape">
  </picture>

  <p>This image changes based on the screen size using the &lt;picture&gt; element.</p>

</body>
</html>

Live Code Preview

May Be Like Important Link-

-How To Import Data(LSMW) LEGACY SYSTEM MIGRATION WORKBENCH

-Define Condition Type-OBYZ

-Genral Ledger Chart Of Accounts-OBD4

-Document 90039783 saved (no accounting document generated)