Bild einbetten
Um ein Bild in unserem HTML-Dokument anzeigen zu können, müssen Sie das Element img verwenden, das die folgenden Attribute aufweist:
- src
- alt
- Höhe
- Breite
- usemap
- ismap
In diesem Moment konzentrieren wir uns auf die ersten beiden Attribute, src und alt ; Mit src können wir den Pfad angeben , über den der Browser das Bild durchsucht. Es kann sich um einen relativen Pfad oder sogar um eine URL handeln. Mit dem alt- Attribut können wir einen Text einfügen. Dieser Text wird nur angezeigt, wenn das Bild nicht verfügbar ist es liegt nicht in dem pfad, in dem es im src angegeben wurde oder auch der browser kann es nicht interpretieren.
Sehen wir uns ein Beispiel an, wie Sie ein Bild in unser HTML-Dokument einfügen:
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> </ head> <body> Hier ist eine übliche Form für die Darstellung der drei Aktivitäten in einem Triathlon. <p> <img src = "triathlon.png" alt = "Triathlon Image" width = "200" height = "67" /> </ p> Das erste Symbol steht für Schwimmen, das zweite für Radfahren und das dritte für Schwimmen steht für Laufen. </ body> </ html>
In diesem Beispiel sehen wir auch zwei weitere Attribute, die Breite und die Höhe, die diese, wie ihre Namen andeuten, zur Regulierung der Breite und Höhe des Bildes angeben. Auf diese Weise können wir garantieren, dass das Bild in den von uns festgelegten Größen bleibt Wenn das Bild größer ist, wird es in der Größe angepasst. Sie müssen jedoch vorsichtig sein, da das Bild das gleiche Gewicht hat. Daher ist es ratsam, das bereits bearbeitete Bild in der erforderlichen Größe zu platzieren und unsere Seite schneller zu laden.
Betten Sie ein Bild in einen Hyperlink ein
Eine andere häufige Verwendung ist die Verwendung eines Bilds als Link für andere Seiten, entweder durch Platzieren des Symbols eines Teams, beispielsweise eines nachfolgenden Pfeils. Bei den neuen CSS-Frameworks könnte dies weniger häufig sein, aber wir werden sehen, wie es gemacht wird um diese Option in unserem Portfolio von HTML-Tools zu haben.
Um das Bild einzubetten, platzieren wir das img- Element einfach in einem <a> -Element, das auf eine Seite verweist, wie zum Beispiel:
<! DOCTYPE HTML> <html> <head> <title> Beispiel </ title> </ head> <body> Hier ist eine übliche Form für die Darstellung der drei Aktivitäten in einem Triathlon. <p> <a href="otherpage.html"> <img src = "triathlon.png" ismap alt = "Triathlon Image" width = "200" height = "67" /> </a> </ p> Das erste Symbol steht für Schwimmen, das zweite für Radfahren und das dritte für Schwimmen steht für Laufen. </ body> </ html>
Damit erreichen wir, dass das Bild jetzt unser Link ist, wie wir auf dem nächsten Bildschirm sehen werden, ändert sich das Bild nicht in der Art und Weise, wie es angezeigt wird:
Wenn wir auf das Bild klicken, gelangen wir zum Ziel innerhalb des <a> -Elements. Wenn wir zusätzlich das Attribut ismap verwenden , senden wir die Koordinaten der Position im Bild, auf die wir geklickt haben, damit wir im nächsten Moment unseres Navigationsprozesses mit diesen Zahlen arbeiten können. Nachdem wir dieses Tutorial abgeschlossen haben, können wir nun mit Bildern angereicherte Seiten erstellen und mit ihnen interagieren, selbst an den Stellen, an denen ein Benutzer klicken kann.
