HTML Kurs – Bilder mit dem img-Tag

HTML - Kurs Nachdem Sie Texte formatiert darstellen können, soll nun in diesem Teil des HTML Kurs, der img Tag vorgestellt werden, mit welchem Bilder auf ihrer Webseite einbinden können.

Bilder oder Grafiken kommen im Internet in den verschiedenen Designs
oft sehr vielfach vor. Es gibt zwei hauptsächliche Grafikformate,
das *.gif Format, und das *.jpg Format. In beiden können Grafiken
gespeichert sein. Diese beiden Bildtypen werden von jedem Browser
erkannt. Bilder die im *.jpg Format gespeichert sind, sind meistens
Fotos oder ähnliche.

Bilder werden in HTML mit dem <img> Tag eingebunden.
Erstellen Sie hierzu wiederum eine neue Seite, mit der Grundstruktur.
Speichern Sie folgende Grafik als Beispielsgrafik ab.

Das devmag.net Logo - Sie lernen HTML in unserem HTML Kurs!

Hierzu klicken Sie mit der Rechten Maustaste auf die Grafik, und
wählen im sich öffnenden Menü "Bild speichern
unter..", Speichern Sie diese Grafik im gleichen Verzeichnis
wie ihre neue HTML Seite. Der Code für diese soll wie folgt
aussehen.

<html>
<head>

<title>Bilder mit HTML</title>

</head>

<body>

<h1>Bilder mit HTML</h1><hr>
<p align = "left"><img
src="devmag_logo_sw.gif" width="84" height="42">
</p>

</body>
</html>

Das Ergebnis sieht recht einfach aus, eben so wie oben
die Grafik eingefügt worden ist. Der <img> hat
insgesamt drei Attribute. Mit dem ersten Attribut, dem "src"
Attribut wird angegeben, wo sich die Grafik befindet, wo Sie gespeichert
ist. In diesem Fall ist sie im selben Ordner, also der gleichen
Verzeichnisebene. Wäre Sie in einem höheren Ordner, wie
z.B. einem Bilder Ordner, dann müsste die Quellenangabe wie
folgt aussehen:
src="images/devmag_logo_sw.gif"

Die zwei weiteren Angaben geben die Größe des
Bildes in Pixeln an. Das "width" steht für
die Breite, das "height" für die Höhe.

Dem Bild können Sie nun noch ein ALT Attribut geben. Dieser
Text, welchen Sie über dieses Attribut definieren erscheint,
wenn Sie mit der Maus über der Grafik für ein paar Sekunden
bleiben, oder wenn die Grafik nicht geladen werden konnte. Ändern
Sie den Teil wie folgt um.

<img
src="devmag_logo_sw.gif" width="84" height="42"
alt="Das devmag.net Logo">

Das Ergebnis sieht dann wie folgt aus.


Mit der Maus


Bild konnte nicht geladen werden

Im nächsten Teil erfahren Sie, wie Sie die Objekte anhand von
Tabellen anordnen können.

This entry was posted in HTML. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *