[html5.wirlernen.at] [Aufgaben zur Lektion] [Video zur Lektion]

Lektion 7: Grafiken einfügen

Hier lernst du wie man in einer Webseite Grafiken einfügen kann...
Hier unten siehst du im HTML - Grundgerüst einen <img /> - tag.
Dieser <img /> - tag wird dazu verwendet Grafiken in eine Webseite einzubinden.
Wenn du das Listing näher betrachtest wird dir auffallen dass der tag zwar die GLEICHE Grafik über src (src steht für source - Herkunft) einbindet, aber unterschiedliche Werte für height (Höhe der Grafik) und width (Breite der Grafik) verwendet - dadurch bekommt die Grafik ein unterschiedliches Aussehen!
Bei alt wird ein so genannter Alternativtext eingeben der das Bild näher beschreiben soll - dies ist u.a. notwendig für Menschen mit einer Sehbehinderung die deine Webseite verwenden wollen!
Der Code mit dem <img > - tag:

<!DOCTYPE html>
<html lang="de">

<head>
    <title>Titel</title>
    <meta charset="UTF-8">
</head>

<body>

<img src="images/Gerald_G_Cartoon_Cat_Face.jpg" width="800" height="592" alt="Cartoon" /><br>
<img src="images/Gerald_G_Cartoon_Cat_Face.jpg" width="100" height="592" alt="Cartoon" /><br>
<img src="images/Gerald_G_Cartoon_Cat_Face.jpg" width="400" height="296" alt="Cartoon" /><br>
Die obige Grafik wurde am 19.12.2020 von der Open Clip Art Library heruntergeladen<br>
- URL: https://openclipart.org/detail/307/cartoon-cat-face-by-gerald_g

</body>
</html>

[Beispiel zur Lektion]

Für mehr Infos klicke hier OBEN auf der Seite auf das Video - Symbol...

⇑ Augabenstellung:
1. Mit welchem HTML - Tag können Grafiken eingebunden werden?
2. Erzeuge in einem Editor ein HTML5 - Grundgerüst! Lade von der URL https://pixabay.com/, https://archive.org ODER https://openclipart.org/ eine kostenlose bzw gemeinfreie Grafik bzw. ein Foto deiner Wahl herunter! Füge dann im Grundgerüst an der richtigen Stelle mit dem zutreffenden HTML - Tag diese Grafik bzw. Foto ein und speichere diese Datei als 007.html. Wähle für diese Webseite mit dem entsprechenden Tag einen aussagekräftigen Titel!