Bilder in HTML einfügen und gestalten

Einführung

In diesem Lab lernen Sie, wie Sie Bilder effektiv in HTML einfügen und gestalten können, indem Sie verschiedene Techniken und Attribute verwenden. Das Lab behandelt essentielle Fähigkeiten wie das Hinzufügen von einfachen Bildern mit Quelle und Alternativtext, das Festlegen fester Bildmaße, das Ausrichten von Bildern und das Erstellen informativer Tooltips. Indem Sie den schrittweisen Anweisungen folgen, gewinnen Sie praktische Erfahrungen bei der Manipulation von Bildelementen, um das Design von Webseiten zu verbessern und die Benutzererfahrung zu erhöhen.

Durch praktische Übungen werden Sie verschiedene HTML-Attribute wie src, alt, width, height und title erkunden, um die Darstellung und Zugänglichkeit von Bildern zu steuern. Diese Fähigkeiten sind grundlegend für Webentwickler, die optisch ansprechende und reaktionsfähige Webseiten mit richtig integrierten und gestalteten Bildern erstellen möchten.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/MultimediaandGraphicsGroup(["Multimedia and Graphics"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/TextContentandFormattingGroup -.-> html/para_br("Paragraphs and Line Breaks") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/img_maps("Image Maps") html/MultimediaandGraphicsGroup -.-> html/embed_media("Embedding External Media") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-452362{{"Bilder in HTML einfügen und gestalten"}} html/para_br -.-> lab-452362{{"Bilder in HTML einfügen und gestalten"}} html/layout -.-> lab-452362{{"Bilder in HTML einfügen und gestalten"}} html/multimedia -.-> lab-452362{{"Bilder in HTML einfügen und gestalten"}} html/img_maps -.-> lab-452362{{"Bilder in HTML einfügen und gestalten"}} html/embed_media -.-> lab-452362{{"Bilder in HTML einfügen und gestalten"}} html/inter_elems -.-> lab-452362{{"Bilder in HTML einfügen und gestalten"}} html/custom_attr -.-> lab-452362{{"Bilder in HTML einfügen und gestalten"}} end

Einfaches Bild mit den Attributen src und alt hinzufügen

In diesem Schritt lernen Sie, wie Sie einfache Bilder auf einer HTML-Seite hinzufügen können, indem Sie das <img>-Tag und seine wesentlichen Attribute verwenden. Bilder sind ein entscheidender Bestandteil des Web-Designs und tragen dazu bei, dass Webseiten optisch ansprechender und informativer werden.

Zunächst erstellen wir eine HTML-Datei, mit der wir arbeiten können. Öffnen Sie die WebIDE und erstellen Sie eine neue Datei namens images.html im Verzeichnis ~/project.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My First Images</title>
  </head>
  <body>
    <!-- We'll add our images here -->
  </body>
</html>

Das <img>-Tag ist ein selbstschließendes Tag, das zur Einbettung von Bildern in ein HTML-Dokument verwendet wird. Es hat zwei kritische Attribute:

src (Quelle): Gibt den Pfad zur Bilddatei an.
alt (Alternativtext): Liefert eine Textdarstellung des Bildes.

Fügen wir nun ein Bild zu unserer HTML-Datei hinzu:

<body>
  <img
    src="https://file.labex.io/static/images/labex-logo-dark.png"
    alt="LabEx Logo"
  />
</body>

Das src-Attribut zeigt auf die Bild-URL, und das alt-Attribut liefert eine Beschreibung, die:

Angezeigt wird, wenn das Bild nicht geladen werden kann.
Screenreadern hilft, das Bild für sehbehinderte Benutzer zu beschreiben.
Die Suchmaschinenoptimierung (SEO) verbessert, indem es Suchmaschinen Kontextinformationen liefert.

Speichern Sie die Datei und öffnen Sie sie in einem Webbrowser, um das Bild zu sehen.

Anmerkungen: Erfahren Sie mehr über Wie man HTML-Dateien in der WebIDE vorschaut.

Feste Bildmaße mit Breite und Höhe festlegen

In diesem Schritt lernen Sie, wie Sie die Größe von Bildern mithilfe der width- und height-Attribute in HTML steuern können. Mit diesen Attributen können Sie die genauen Maße eines Bildes festlegen, was die Seitenlayout und die Ladeleistung verbessern kann.

Öffnen Sie die images.html-Datei, die Sie im vorherigen Schritt erstellt haben. Wir werden das vorhandene Bild ändern und ein paar weitere hinzufügen, um verschiedene Größenanpassungstechniken zu demonstrieren.

HTML bietet zwei Attribute zum Festlegen der Bildmaße:

width: Legt die Bildbreite in Pixeln fest.
height: Legt die Bildhöhe in Pixeln fest.

Lassen Sie uns unser vorheriges Bild aktualisieren und einige neue Beispiele hinzufügen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Dimensions</title>
  </head>
  <body>
    <!-- Original image with fixed dimensions -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
    />

    <!-- Another image with different dimensions -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="300"
      height="150"
    />

    <!-- Image with only width specified -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="250"
    />
  </body>
</html>

Wichtige Punkte zu Bildmaßen:

Die Maße werden in Pixeln angegeben.
Sie können entweder die Breite, die Höhe oder beide festlegen.
Wenn nur eine Dimension angegeben wird, skaliert das Bild proportional.
Das Festlegen von Maßen hilft, Layoutänderungen auf der Seite während des Bildladens zu vermeiden.

Die Beispielausgabe in einem Webbrowser zeigt drei Bilder unterschiedlicher Größe.

Bilder mit dem veralteten Attribut align ausrichten

In diesem Schritt lernen Sie über das veraltete align-Attribut zur Positionierung von Bildern in HTML. Obwohl das moderne Web-Design CSS für das Layout verwendet, ist es wichtig, diese historische Methode zur Bildausrichtung zu verstehen.

Öffnen Sie die images.html-Datei aus den vorherigen Schritten und ändern Sie sie, um verschiedene Bildausrichtungen zu demonstrieren:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Alignment</title>
  </head>
  <body>
    <p>
      <!-- Left-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="left"
        width="150"
        height="75"
      />
      This text will flow around the left-aligned image.
    </p>

    <p>
      <!-- Right-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="right"
        width="150"
        height="75"
      />
      This text will flow around the right-aligned image.
    </p>

    <p>
      <!-- Center-aligned image -->
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="LabEx Logo"
        align="middle"
        width="150"
        height="75"
      />
      This text is aligned with the middle of the image.
    </p>
  </body>
</html>

Das align-Attribut unterstützt drei Hauptwerte:

left: Richtet das Bild links aus, wobei der Text um es herum fließt.
right: Richtet das Bild rechts aus, wobei der Text um es herum fließt.
middle: Richtet das Bild vertikal mit der Textbasislinie aus.

Wichtige Hinweise:

Das align-Attribut ist in HTML5 veraltet.
Das moderne Web-Design verwendet CSS float oder Flexbox für das Layout.
Dieses Attribut wird nur aus historischen Gründen beibehalten.

Die Beispielausgabe zeigt Bilder, die an verschiedenen Positionen innerhalb von Absätzen platziert sind.

Hinweis: Das Labby-Dialogfeld kann das rechts ausgerichtete Bild verdecken.

In diesem Schritt lernen Sie, wie Sie das title-Attribut verwenden, um Tooltip-Informationen zu Bildern hinzuzufügen. Tooltips bieten zusätzlichen Kontext oder eine Beschreibung, wenn ein Benutzer mit der Maus über ein Element fährt.

Öffnen Sie die images.html-Datei aus den vorherigen Schritten und ändern Sie sie, um die Verwendung von Tooltips zu demonstrieren:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Image Tooltips</title>
  </head>
  <body>
    <!-- Image with a simple tooltip -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="Official LabEx Logo"
    />

    <!-- Image with a more descriptive tooltip -->
    <img
      src="https://file.labex.io/static/images/labex-logo-dark.png"
      alt="LabEx Logo"
      width="200"
      height="100"
      title="LabEx Logo: Learn coding through hands-on labs"
    />

    <!-- Multiple images with different tooltips -->
    <div>
      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Programming Logo"
        width="150"
        height="75"
        title="Web Development"
      />

      <img
        src="https://file.labex.io/static/images/labex-logo-dark.png"
        alt="Cloud Logo"
        width="150"
        height="75"
        title="Cloud Computing"
      />
    </div>
  </body>
</html>

Wichtige Punkte zum title-Attribut:

Bietet zusätzliche Informationen, wenn Sie mit der Maus über ein Bild fahren.
Funktioniert mit Bildern, Text und den meisten HTML-Elementen.
Hilft, die Benutzererfahrung zu verbessern, indem es Kontextinformationen liefert.
Wird in einem kleinen Popup angezeigt, wenn Sie mit der Maus über das Element fahren.

Wenn Sie in einem Webbrowser mit der Maus über diese Bilder fahren, sehen Sie den Tooltip-Text erscheinen.

Zusammenfassung

In diesem Lab haben die Teilnehmer gelernt, wie man effektiv mit Bildern in HTML arbeitet, indem sie die Schlüsseltechniken für die Bildeinbettung und -gestaltung beherrschen. Das Lab hat essentielle Fähigkeiten behandelt, wie das Hinzufügen von Bildern mit dem <img>-Tag und wichtigen Attributen wie src und alt, die eine korrekte Anzeige und Zugänglichkeit der Bilder gewährleisten. Die Lernenden haben Methoden zur Steuerung der Bildmaße über die width- und height-Attribute untersucht und verstanden, wie diese Einstellungen das Seitenlayout und die Leistung beeinflussen.

Die praktischen Übungen haben die Schüler durch verschiedene Bildmanipulationstechniken geführt, einschließlich der Festlegung fester Bildgrößen, dem Hinzufügen von Tooltip-Informationen mit dem title-Attribut und dem Experimentieren mit verschiedenen Bildausrichtungsstrategien. Durch die praktische Arbeit mit HTML-Bildelementen haben die Teilnehmer wertvolle Einblicke in die Erstellung von optisch ansprechenden und responsiven Webseitenlayouts gewonnen.