HTML-Bilder: Einbetten und Formatieren mit src, alt und Größenangaben

Einführung

Bilder sind ein wesentlicher Bestandteil moderner Webseiten; sie machen Inhalte ansprechender und visuell attraktiver. In HTML werden Bilder mithilfe des <img>-Tags in ein Dokument eingebettet. Dieses Tag ist sehr leistungsfähig und bietet verschiedene Attribute, um die Quelle, die Größe und die Barrierefreiheit des Bildes zu steuern.

In diesem Lab lernen Sie, wie Sie ein Bild auf einer Webseite anzeigen. Sie beginnen mit dem Einfügen eines einfachen Bildes und ergänzen dieses schrittweise um Attribute für Alternativtexte, Dimensionen, Tooltips und machen es schließlich zu einem anklickbaren Link.

Die Umgebung ist bereits mit einer index.html-Datei und einer Bilddatei namens labex.svg im Verzeichnis ~/project vorkonfiguriert. Ein Webserver läuft ebenfalls, sodass Sie Ihre Änderungen in Echtzeit im Tab Web 8080 betrachten können.

Einfügen des img-Tags mit dem src-Attribut für die Bildquelle

In diesem Schritt lernen Sie, wie Sie ein Bild zu Ihrer HTML-Seite hinzufügen. Das <img>-Tag wird verwendet, um ein Bild einzubetten. Es handelt sich um ein leeres Tag, was bedeutet, dass es kein schließendes Tag besitzt. Das wichtigste Attribut des <img>-Tags ist src, das den Pfad zu dem Bild angibt, das Sie anzeigen möchten.

Öffnen Sie zunächst die Datei index.html im Verzeichnis ~/project über den Dateiexplorer auf der linken Seite.

Fügen Sie nun das <img>-Tag innerhalb des <body>-Bereichs direkt unter dem Kommentar  ein. Setzen Sie das src-Attribut auf labex.svg, die Bilddatei, die in Ihrem Projektverzeichnis bereitgestellt wurde.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" />
  </body>
</html>

Speichern Sie die Datei nach dem Hinzufügen des Codes. Um das Ergebnis zu sehen, wechseln Sie in der oberen Leiste der Lab-Umgebung zum Tab Web 8080. Sie sollten nun das LabEx-Logo auf der Seite sehen.

img tag

Hinzufügen des alt-Attributs für die Bildbeschreibung

In diesem Schritt fügen Sie Ihrem <img>-Tag das alt-Attribut hinzu. Das alt-Attribut liefert einen Alternativtext für ein Bild. Dieser Text wird angezeigt, falls das Bild aus irgendeinem Grund nicht geladen werden kann. Noch wichtiger ist, dass er von Screenreadern verwendet wird, um das Bild für sehbehinderte Nutzer zu beschreiben, was Ihre Webseite barrierefreier macht.

Ändern Sie das <img>-Tag in Ihrer index.html-Datei, um ein alt-Attribut einzufügen. Ein guter alt-Text sollte eine prägnante Beschreibung des Bildes sein.

<img src="labex.svg" alt="LabEx Logo" />

Ihre vollständige index.html-Datei sollte nun so aussehen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" />
  </body>
</html>

Speichern Sie die Datei. Sie werden im Tab Web 8080 keine visuelle Änderung feststellen, da das Bild korrekt geladen wird. Dennoch ist das Hinzufügen des alt-Attributs eine entscheidende Best Practice in der Webentwicklung.

Festlegen der width- und height-Attribute für die Bildgröße

In diesem Schritt lernen Sie, die Größe Ihres Bildes mithilfe der Attribute width und height zu steuern. Standardmäßig zeigt ein Browser ein Bild in seinen Originalmaßen an. Durch die Angabe von width und height können Sie die Größe des Bildes anpassen und dem Browser helfen, den korrekten Platzbedarf zu reservieren, bevor das Bild geladen wird, was ein Verschieben des Seitenlayouts verhindert.

Lassen Sie uns die Breite unseres Bildes auf 200 Pixel und die Höhe auf 50 Pixel festlegen. Fügen Sie die Attribute width und height zu Ihrem <img>-Tag in der index.html hinzu.

<img src="labex.svg" alt="LabEx Logo" width="200" height="50" />

Die vollständige index.html-Datei sieht nun so aus:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img src="labex.svg" alt="LabEx Logo" width="200" height="50" />
  </body>
</html>

Speichern Sie die Datei und wechseln Sie zum Tab Web 8080. Sie werden feststellen, dass das Bild nun auf die von Ihnen angegebenen Maße skaliert wurde.

Verwendung des title-Attributs für Tooltips bei Bildern

In diesem Schritt fügen Sie dem <img>-Tag ein title-Attribut hinzu. Das title-Attribut liefert zusätzliche Informationen zu einem Element. Bei Bildern werden diese Informationen normalerweise als Tooltip angezeigt, wenn der Benutzer mit der Maus über das Bild fährt.

Fügen wir unserem Bild einen Titel hinzu, um den Benutzern einen Hinweis darauf zu geben, was passiert, wenn sie darauf klicken (was wir im nächsten Schritt implementieren werden). Fügen Sie das title-Attribut zu Ihrem <img>-Tag in der index.html hinzu.

<img
  src="labex.svg"
  alt="LabEx Logo"
  width="200"
  height="50"
  title="Go to LabEx Homepage"
/>

Ihre index.html-Datei sollte nun folgenden Code enthalten:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <img
      src="labex.svg"
      alt="LabEx Logo"
      width="200"
      height="50"
      title="Go to LabEx Homepage"
    />
  </body>
</html>

Speichern Sie die Datei und aktualisieren Sie den Tab Web 8080. Bewegen Sie nun Ihren Mauszeiger über das Bild. Ein kleines Feld mit dem Text "Go to LabEx Homepage" sollte erscheinen.

title attribute

Einbetten des img-Tags in ein a-Tag für anklickbare Bilder

In diesem letzten Schritt machen Sie das Bild zu einem anklickbaren Link. Dazu müssen Sie das <img>-Tag in ein Anker-Tag <a> einbetten. Das <a>-Tag definiert einen Hyperlink, und sein href-Attribut gibt die URL der Seite an, zu der der Link führt.

Umschließen Sie Ihr vorhandenes <img>-Tag mit einem <a>-Tag. Setzen Sie das href-Attribut des <a>-Tags auf https://labex.io.

<a href="https://labex.io">
  <img
    src="labex.svg"
    alt="LabEx Logo"
    width="200"
    height="50"
    title="Go to LabEx Homepage"
  />
</a>

Ihre finale index.html-Datei sieht dann so aus:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Images Lab</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>My Image Page</h1>
    <a href="https://labex.io">
      <img
        src="labex.svg"
        alt="LabEx Logo"
        width="200"
        height="50"
        title="Go to LabEx Homepage"
      />
    </a>
  </body>
</html>

Speichern Sie die Datei und gehen Sie zum Tab Web 8080. Sie werden feststellen, dass sich der Mauszeiger in eine Hand verwandelt, wenn Sie über das Bild fahren, was anzeigt, dass es sich um einen Link handelt. Ein Klick auf das Bild führt Sie zur LabEx-Homepage.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss dieses Labs! Sie haben erfolgreich gelernt, wie man mit Bildern in HTML arbeitet.

In diesem Lab haben Sie folgende Schlüsselkonzepte behandelt:

Einbetten eines Bildes mit dem <img>-Tag.
Festlegen der Bildquelle mit dem src-Attribut.
Bereitstellen von Alternativtext für die Barrierefreiheit mit dem alt-Attribut.
Steuern der Bilddimensionen mit den Attributen width und height.
Hinzufügen eines Tooltips mit dem title-Attribut.
Umwandeln eines Bildes in einen anklickbaren Link durch Einbetten in ein <a>-Tag.

Dies sind grundlegende Fähigkeiten für die Erstellung reichhaltiger und interaktiver Webseiten. Sie können nun selbstbewusst Bilder in Ihren zukünftigen HTML-Projekten hinzufügen und verwalten.