HTML steht für HyperText Markup Language. Hypertext definiert die Verbindung zwischen den Online-Seiten. Es wird verwendet, um das Textdokument innerhalb des Tags zu definieren, das die Struktur von Websites definiert. Diese Sprache wird verwendet, um Text zu kommentieren, damit eine Maschine ihn erkennen und Text entsprechend bearbeiten kann. Die meisten Auszeichnungssprachen (z. B. HTML) sind für Menschen lesbar. Die Sprache verwendet Tags, um zu definieren, welche Manipulationen am Text vorgenommen werden müssen.

Um ein Bild in eine HTML-Seite einzufügen, wird das <img> -Tag verwendet. Dazu müssen wir die Breite und Höhe des Attributs des Bildes in Pixel verwenden. Geben Sie beide Attribute an.

Syntax:  

<img src="url" alt="some_text">

Attribut:  

  • src: Das src steht für Quelle. Jedes Bild hat ein src - Attribut, das dem Browser mitteilt, wo das Bild zu finden ist, das Sie anzeigen möchten. Die URL des bereitgestellten Bildes verweist auf den Ort, an dem das Bild gespeichert ist.
  •  alt: Wenn das Bild nicht angezeigt werden kann, dient das alt -Attribut als alternative Beschreibung für das Bild. Der Wert des Alt -Attributs ist ein benutzerdefinierter Text.

Einstellen von Breite und Höhe des Bildes: Die Attribute width und height werden verwendet, um die Breite und Höhe eines Bildes anzugeben. Die Attributwerte werden standardmäßig in Pixel angegeben.

Syntax:

<img src="url" alt="some_text" width=""  height="">

Notiz: 

  • px: Pixel – Pixel (1px = 1/96 von 1 Zoll) 
  • Zoll: Zoll – Zoll (1 Zoll = 96 Pixel = 2,54 cm) 
  • pt: Punkte – Punkte (1 pt = 1/72 von 1 Zoll) 

Beispiel 1: Ein Bild mit einer Höhe von 600 Pixeln und einer Breite von 500 Pixeln. Das width -Attribut gibt die Breite eines Bildes in Punkt an.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h2>Welcome To GFG</h2>
      
<p>Image with width and height in points</p>
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png"
        alt="Welcome To GFG"
        width="60pt" height="80pt">
</body>
  
</html>

Ausgabe:            

Beispiel 2: Ein weiteres Beispiel, um die Verwendung von Breiten- und Höhenattributen zu zeigen . Wir haben die Breite mit 450 Pixel und die Höhe mit 220 Pixel angegeben.

HTML

<!DOCTYPE html>
<html>
  
<body>
    <h2>Welcome To GFG</h2>
    <h3>img tag with width and height attribute</h3>
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/GeeksforGeeksLogoHeader.png"
        alt="Welcome To GFG"
        width="450" height="220">
</body>
  
</html>

Ausgabe:            

Beispiel 3: Ein weiteres HTML-Programm, um die Verwendung des <img> -Tags mit den Attributen width und height zu zeigen. In diesem Code haben wir den Wert von Höhe und Breite als 250 Pixel angenommen.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Setting width and height 
        attribute of image
    </title>
</head>
  
<body>
    <p> 
        Image is inserted using width and 
        height attribute in pixels.
    </p>
  
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo" 
        width="250" height="250">
  
      
<p>Height of this image is 250 pixels</p>
  
      
<p>Width of this image is 250 pixels</p>
  
    <p>
        Image is inserted using width and 
        height attribute in points.
    </p>
  
    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo" 
        width="50pt" height="35pt">
  
    <p>Height of this image is 50 points</p>
    <p>Width of this image is 35 points</p>
</body>
  
</html>

Ausgabe: