Meisterklasse: HTML-Bild einfügen

Einführung

Das HTML <img>-Tag wird verwendet, um Bilder in Webseiten einzubetten. Es ist ein leeres Tag, was bedeutet, dass es kein Schließtag hat. Das src-Attribut ist erforderlich und gibt den Pfad oder die URL zum Bild an. Andere optionale Attribute umfassen alt, title, height, width usw. In diesem Lab werden Sie lernen, wie Sie das HTML <img>-Tag verwenden, um Bilder in Webseiten einzufügen.

Hinweis: Sie können im index.html programmieren und lernen, wie Sie HTML in Visual Studio Code schreiben. Klicken Sie bitte auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) 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/BasicStructureGroup -.-> html/head_elems("Head Elements") html/BasicStructureGroup -.-> html/charset("Character Encoding") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/MultimediaandGraphicsGroup -.-> html/multimedia("Multimedia Elements") html/MultimediaandGraphicsGroup -.-> html/img_maps("Image Maps") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70777{{"HTML-Bild einfügen"}} html/head_elems -.-> lab-70777{{"HTML-Bild einfügen"}} html/charset -.-> lab-70777{{"HTML-Bild einfügen"}} html/layout -.-> lab-70777{{"HTML-Bild einfügen"}} html/doc_flow -.-> lab-70777{{"HTML-Bild einfügen"}} html/multimedia -.-> lab-70777{{"HTML-Bild einfügen"}} html/img_maps -.-> lab-70777{{"HTML-Bild einfügen"}} html/inter_elems -.-> lab-70777{{"HTML-Bild einfügen"}} html/custom_attr -.-> lab-70777{{"HTML-Bild einfügen"}} end

Projekt einrichten

Der erste Schritt besteht darin, ein neues Verzeichnis namens "html-img-tag-lab" zu erstellen und darin eine Datei namens "index.html" zu erstellen. Öffnen Sie die Datei in Ihrem Code-Editor und fügen Sie den folgenden Code zum <head>-Abschnitt hinzu:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>HTML Img Tag Lab</title>
  </head>
  <body></body>
</html>

Fügen Sie ein Bild zu Ihrer Webseite hinzu

Um ein Bild zu Ihrer Webseite hinzuzufügen, benötigen Sie eine Bilddatei. Für dieses Beispiel nehmen wir an, dass Sie ein Bild namens "logo.png" in einem Ordner namens "images" im Stammverzeichnis haben. Um dieses Bild zu Ihrer Webseite mit dem <img>-Tag hinzuzufügen, fügen Sie den folgenden Code zum <body>-Abschnitt hinzu:

<img src="images/logo.png" alt="Logo" />

In diesem Code gibt das src-Attribut den Pfad zur Bilddatei an. Das alt-Attribut liefert alternative Text, der angezeigt wird, wenn das Bild aus irgendeinem Grund nicht geladen werden kann.

Fügen Sie zusätzliche Attribute zu Ihrem Bild hinzu

Sie können mehreren zusätzlichen Attributen zu Ihrem Bild hinzufügen, um dessen Aussehen und Verhalten zu steuern. Hier ist ein Beispiel, das zeigt, wie einige der am häufigsten verwendeten Attribute verwendet werden:

<img
  src="images/logo.png"
  alt="Logo"
  width="200"
  height="100"
  title="My Website Logo"
/>

In diesem Code steuern die Attribute width und height die Größe des Bilds. Das title-Attribut liefert einen Tooltip, wenn der Benutzer die Maus über das Bild bewegt.

Verwenden Sie eine Bildkarte

Eine Bildkarte ist ein Bild, auf dem definierte klickbare Bereiche, oder "Hotspots", vorhanden sind, die zu verschiedenen Zielen verlinken. Um eine Bildkarte zu erstellen, müssen Sie die Koordinaten jedes Hotspots und die URL definieren, zu der er verweist. Hier ist ein Beispiel für eine Bildkarte:

<img src="images/worldmap.gif" alt="Weltkarte" usemap="#worldmap" />

<map name="worldmap">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="https://www.northamerica.com"
    alt="Nordamerika"
  />
  <area
    shape="rect"
    coords="100,0,200,100"
    href="https://www.southamerica.com"
    alt="Südamerika"
  />
  <area
    shape="rect"
    coords="200,0,300,100"
    href="https://www.europa.com"
    alt="Europa"
  />
  <area
    shape="rect"
    coords="300,0,400,100"
    href="https://www.asia.com"
    alt="Asien"
  />
  <area
    shape="rect"
    coords="400,0,500,100"
    href="https://www.africa.com"
    alt="Afrika"
  />
</map>

In diesem Code gibt das usemap-Attribut den Namen der Karte an, die mithilfe des <map>-Tags definiert wird. Jeder <area>-Tag definiert einen Hotspot, indem er seine Form (z.B. "rect" für rechteckig), seine Koordinaten und die URL angibt, zu der er verweist.

Fügen Sie ein Bild als Hintergrund hinzu

Sie können auch ein Bild als Hintergrund eines HTML-Elements verwenden, wie beispielsweise des Körpers Ihrer Webseite. Hier ist ein Beispiel:

<style>
  body {
    background-image: url("images/background.jpg");
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

In diesem Code gibt die Eigenschaft background-image den Pfad zur Bilddatei an, und die Eigenschaft background-repeat setzt es so, dass es nicht wiederholt wird. Die Eigenschaft background-size skaliert das Bild, um den gesamten Hintergrund zu bedecken.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben erfolgreich gelernt, wie Sie das HTML <img>-Tag verwenden, um Bilder zu Ihren Webseiten hinzuzufügen. Sie haben auch gelernt, wie Sie mehrere übliche Attribute verwenden, um die Größe und das Aussehen Ihrer Bilder zu steuern, und wie Sie eine Bildkarte erstellen und ein Bild als Hintergrund verwenden.