HTML Bilder: Einbetten und Stylen mit src, alt und Größe lernen

Einführung

Bilder sind ein fundamentaler Bestandteil moderner Webseiten und machen Inhalte ansprechender und visuell attraktiver. In HTML werden Bilder mithilfe des <img>-Tags in ein Dokument eingebettet. Dieses Tag ist leistungsstark und verfügt über mehrere Attribute zur Steuerung der Bildquelle, Größe und Zugänglichkeit.

In diesem Lab lernen Sie, wie Sie ein Bild auf einer Webseite anzeigen. Sie beginnen mit dem Einfügen eines einfachen Bildes und fügen dann schrittweise Attribute hinzu, um alternativen Text bereitzustellen, seine Abmessungen festzulegen, einen Tooltip hinzuzufügen und es schließlich in einen klickbaren Link umzuwandeln.

Die Umgebung wurde 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" in der Vorschau anzeigen können.

Fügen Sie das img-Tag mit dem src-Attribut für die Bildquelle ein

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 ist ein leeres Tag, was bedeutet, dass es keinen schließenden Tag hat. Das wichtigste Attribut des <img>-Tags ist src, das den Pfad zu dem Bild angibt, das Sie anzeigen möchten.

Öffnen Sie zuerst 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  hinzu. Setzen Sie das src-Attribut auf labex.svg, die Bilddatei, die in Ihrem Projektverzeichnis bereitgestellt wird.

<!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 zum Tab Web 8080 in der oberen Leiste der Laborumgebung. Sie sollten das LabEx-Logo auf der Seite sehen.

Fügen Sie das alt-Attribut für die Bildbeschreibung hinzu

In diesem Schritt fügen Sie das alt-Attribut zu Ihrem <img>-Tag hinzu. Das alt-Attribut bietet alternativen Text für ein Bild. Dieser Text wird angezeigt, wenn das Bild aus irgendeinem Grund nicht geladen werden kann. Wichtiger ist, dass er von Screenreadern verwendet wird, um das Bild für sehbehinderte Benutzer zu beschreiben, wodurch Ihre Website zugänglicher wird.

Ä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 wie folgt 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. Im Tab Web 8080 werden Sie keine visuellen Änderungen sehen, da das Bild korrekt geladen wird. Das Hinzufügen des alt-Attributs ist jedoch eine entscheidende Best Practice für die Webentwicklung.

Legen Sie die Attribute width und height für die Bildgröße fest

In diesem Schritt lernen Sie, die Größe Ihres Bildes mit den Attributen width und height zu steuern. Standardmäßig zeigt ein Browser ein Bild in seinen ursprünglichen Abmessungen an. Durch Angabe von width und height können Sie das Bild in der Größe ändern und dem Browser helfen, den richtigen Speicherplatz dafür zu reservieren, bevor es geladen wird, wodurch ein Verschieben des Seitenlayouts verhindert wird.

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

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

Die vollständige index.html-Datei wird nun wie folgt 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" width="200" height="50" />
  </body>
</html>

Speichern Sie die Datei und wechseln Sie zum Tab Web 8080. Sie werden feststellen, dass die Größe des Bildes auf die von Ihnen angegebenen Abmessungen geändert wurde.

In diesem Schritt fügen Sie dem <img>-Tag ein title-Attribut hinzu. Das title-Attribut liefert zusätzliche Informationen über ein Element. Bei Bildern werden diese Informationen normalerweise als Tooltip angezeigt, wenn ein 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 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 den 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.

Bettung von img in einem a-Tag für klickbare Bildlinks

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

Betten Sie Ihren vorhandenen <img>-Tag mit einem <a>-Tag ein. 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 endgültige index.html-Datei wird wie folgt 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>
    <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 beim Überfahren des Bildes in einen Zeiger ändert, was darauf hinweist, dass es sich um einen Link handelt. Ein Klick auf das Bild versucht, zur LabEx-Homepage zu navigieren.

Zusammenfassung

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

In diesem Lab haben Sie die folgenden Schlüsselkonzepte behandelt:

Einbetten eines Bildes mit dem <img>-Tag.
Festlegen der Bildquelle mit dem src-Attribut.
Bereitstellen von alternativem Text für die Barrierefreiheit mit dem alt-Attribut.
Steuern der Bildabmessungen mit den Attributen width und height.
Hinzufügen eines Tooltips mit dem title-Attribut.
Ein Bild zu einem klickbaren Link machen, indem es in einen <a>-Tag eingebettet wird.

Dies sind wesentliche Fähigkeiten für die Erstellung von reichhaltigen und interaktiven Webseiten. Sie können nun sicher Bilder in Ihren zukünftigen HTML-Projekten hinzufügen und verwalten.

HTML Bilder