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.

Bookmark setzen... These icons link to social bookmarking sites where readers can share and discover new web pages.
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Bloglines
  • MisterWong
  • MySpace
  • Reddit
  • SEOigg
  • Technorati
  • TwitThis
  • Y!GG
  • Google Bookmarks

Weiterführende Links: