ChristophTutorials - (Video)Tutorialseite und IT-Blog

Zitat der Woche

Früher hatten wir die spanische Inquisition. Jetzt haben wir die Kompatibilität.
- Herbert Klaeren

Letzte Artikel

Zufällige Artikel

Verzeichnisse

Blogverzeichnis - Blog Verzeichnis bloggerei.de Blogverzeichnis Blog Verzeichnis Blog Top Liste - by TopBlogs.de Blog Button
Datenschutzerklärung
Impressum
HTML - Bilder - 31.10.2010
In diesem Tutorial wird recht kurz gezeigt, wie man Bilder und Gif-Animationen in eine Seite einbinden kann.
Das Tag und das Attribut
Das Tag um Bilder einzubinden heißt <img>. Wie <br> wird es nicht geschlossen. Es ist unser erstes Tag, für das wir Attribute brauchen. Das hier nötige Attribut heißt "src" und enthält als Wert den absoluten oder relativen Pfad zum Bild. Hier ein kleines Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Bilderbeispiel</title>
 </head>
 <body>
  <img src="bild.jpg"><!--relativer Pfad-->
  <img src="http://seite.de/bild.png"><!--absoluter Pfad-->
 </body>
</html>
Die Bildformate
Die im Internet üblichen Bildformate sind JPG, Gif und PNG. Alle einigermaßen modernen Browser sollten diese Bildformate darstellen können. Gif und PNG können transparente Bereiche enthalten, bei JPG funktioniert das nur bei einigen Browsern. Für Animierte Bilder kann man Gif verwenden.
Alternativen aufzeigen
Ein weiteres wichtiges, aber freiwilliges Attribut für <img> heißt "alt". Als Wert erhält dieses Attribut einen alternativen Text, der bei Browsern, die nur Text verstehen (z.B für Blinde) angezeigt wird und der von Suchmaschienen verwertet wird. Außerdem wird der Alternativtext angezeigt, wenn das richtige Bild nicht gefunden werden konnte. Man sollte dieses Attribut also verwenden. Man sollte es auch verwenden, wenn es sich nur um eine Grafik für das Design der Seite oder eine sinnlose Grafik handelt. Dann weisst man dem alt-Attribut nur die leeren Anführungszeichen zu.
Hier ein kurzes Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Bildbeispiel - 2</title>
 </head>
 <body>
  <img src="bild.jpg" alt="Beispielbild">
  <img src="trennstrich.gif" alt="">
 </body>
</html>
Die Bildgröße festlegen
Es gibt sogar noch zwei ebenfalls freiwillige Attribute: "width" (Bildbreite) und "height" (Bildhöhe). Als Wert wird eine Pixel- oder Prozentangabe erwartet. Hierbei sind zwei Dinge zu beachten:
  • Die Einheit Pixel wird nicht angegeben. Man schreibt einfach die Zahl. Die Prozentangabe muss aber mit dem %-Zeichen beendet werden.
  • Die Prozentangabe bezieht sich auf den zur Verfügung stehenden Platz. Das heißt: Wie viel Prozent der Seite / des beinhaltenden Elements sollen von dem Bild ausgefüllt werden?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Bildbeispiel - 3</title>
 </head>
 <body>
   <!--Pixelangabe:-->
  <img src="bild.jpg" alt="" width="293" height="129">
   <!--Das Bild nimmt 20% der Breite des Elements ein:-->
  <img src="bild.jpg" alt="" width="20%">
   <!--Nimmt 10% der Breite und 20% der Höhe ein:-->
  <img src="bild.jpg" alt="" width="10%" height="20%">
 </body>
</html>
Und es gibt wiederum drei Gründe, aus denen man diese Attribute verwenden kann:
  • um ein Bild in einer anderen Größe darzustellen, als der, in der es vorliegt, was aber meistens nicht so gut aussieht, man sollte das vorher mit einem Bildbearbeitungsprogramme machen
  • um ein Bild zu verzerren, indem man nicht proportional die Breite und Höhe verändert
  • um den Seitenaufbau zu verschnellern und zu verbessert, wenn man die richtige Größe der Grafik angibt, weiß der Browser schon vorher, wie viel Platz er für sie reservieren soll, bevor der die Grafik geöffnet hat
Zusammenfassung
In diesem Tutorial habe wir gelernt, wie man Bilder am besten einbindet, welche Attribute man sonst noch verwenden kann und wieso man sie benutzen sollte und welche Bildformate dafür empfehlenswert sind.

Kommentare:

- kein Kommentar -
Um einen Kommentar zu schreiben ist eine Anmeldung nötig.