Online-HTML-Kurs (Teil 6): Bilder mit dem img-Tag
Um Grafiken einzufügen, kann man das <img>-Tag verwenden. Auch hier gibt es wieder einige elementspezifischen Attribute die uns die Positionierung und die Veränderung der Grafik erlauben. Aber zunächst einmal die einfachste Anwendung:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<img src="BILD.jpg">
</body>
</html>
Mit dem "src"-Attribut wird die Angabe gemacht, wo sich das Bild befindet. Befindet es sich im gleichen Ordner, so reicht eine Angabe wie oben. Ansonsten kann man das "src"-Attribut wie das "href"-Attribut für Bilddateien verwenden. Welche Grafikformate verwendet werden können, liegt ganz allein am Browser. Die gängigsten Formate wie "gif", "jpg", "bmp", usw. werden von allen Browsern unterstützt. Oft werden aber nur "gif" und "jpg"-Bilder verwendet, da diese wenig Speicherplatz verbrauchen und so schnell auch über langsame Internetleitungen übertragen werden können.
Doch schauen wir uns zunächst eine Reihe von anderen Attributen an:
<html>
<head>
<title>Dies ist der Titel</title>
</head>
<body>
<img src="BILD.jpg" alt="Bildersatzbeschreibung" align="middle" border="2" title="Bildtitel" width="20" height="20">
</body>
</html>
In diesem Beispiel sind bereits eine Menge anderer Attribute verwendet, die im folgenden erklärt werden.
Das Attribut "alt" stellt eine Alternative zur Bilddarstellung dar. Kann das Bild nicht geladen werden, erscheint der hier stehende Text an Stelle des Bildes. Nützlich ist dies für rein textbasierte Browser.
Das Attribut "align" gibt an, an welcher Stelle das Bild in der aktuellen Textzeile erscheinen soll. Mit dem Wert "middle" wird es vertikal zentriert. Mit "top" beginnt der oberste Rand des Bildes in der aktuellen Textzeile und mit "bottom" der unter Rand. Das Bild kann also über diese drei Werte vertikal verschoben werden. Mit den Werten "left" und "right" wird das Objekt links- oder rechtsbündig gemacht und von umgebendem Text umflossen. Möchte man das Bild horizontal zentrieren, benötigt man das <center>-Tag.
Mit dem "border"-Attribut lässt sich ein Rand um das Bild in der angegeben Pixelstärke zeichnen.
Das "title"-Attribut ist wiederum der Titel des Bildes, welchen wir wiederum sehen, wenn wir mit der Maus über das Bild fahren.
Mit den Attributen "width" und "height" kann man die Breite und Höhe eines Bildes festlegen. Dabei wird das Bild bei nur einer Angabe skaliert oder bei Angabe beider Attribute entsprechend verzerrt.
Kategorien
HTML , Step-by-Step1 TrackBacks
Folgende Einträge anderer Blogs beziehen sich auf den Eintrag Online-HTML-Kurs (Teil 6): Bilder mit dem img-Tag
TrackBack-URL dieses Eintrags: http://www.undertec.de/mt-cgi/mt-tb.cgi/233
Morgen beginnt wie bereits hier im Blog angekündigt der Online HTML-Kurs. Diese Seite soll dazu dienen ein Inhaltsverzeichnis zu allen Kursseiten bereitzustellen. Im Laufe der Zeit wird das Inhaltsverzeichnis ergänzt. Jeder Artikel kann kommentier... Mehr
Jetzt kommentieren