M-XPro: Grafiken in HTML

Um eine Grafik einzubinden gibt es das Standalone-Tag <img> (img = Image = Bild) dieses Tag besitzt kein Start- und End-Tag. Hier der Beispielcode dazu:

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg">
</body>
</html>

Den Attribut src (source = Quelle) übergeben wir die Adresse oder das Verzeichnis. Hier im Beispiel ist es das Verzeichnis. Es ist auch möglich mit ../ in ein vorheriges Verzeichnis auf eine Grafik zuzugreifen oder z.B. mit "Bilder/Bild.jpg" in ein Unterverzeichnis auf eine Grafik zuzugreifen. Es ist natürlich auch möglich das komplette Verzeichnis anzugeben. Wenn sich aber unser Projektverzeichnis änder, müssen wir die Verzeichnisse der Grafiken ändern, deren kompletten Pfade angegeben wurden, deshalb sollte man es vermeiden komplette Verzeichnisse anzugeben. Die Grafiken sollten das Format GIF, JPG oder PNG haben.

Hier das Bild im Browser:

Nach der Adressangabe oder Verzeichnisangabe sollte noch das Attribut alt (alternativ) hinzugefügt werden. Wenn die Grafik nicht angezeigt werden kann, aus welchen Grund auch immer, wird der Text vom Attribut alt angezeigt, hier kann z.B. eine Beschreibung der Grafik angegeben werden. Wenn die Grafik nur dekorativ ist, sollte alt="" angeben werden.

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg" alt="Grafik">
</body>
</html>

Der Alternativtext sollte also immer angegeben werden. Hier ein Beispiel wenn der Browser die Grafik nicht anzeigen kann:

Wie man sehen kann, wird der Alternativtext im Browser ausgegeben.

Die Größe der Grafiken verändern
Wir können natürlich auch die Größe der Grafik mit den Attributen width (Breite) und height (Höhe) verändern. Wir können die Größe in Pixel angeben. Hier ein Beispiel:

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg" width="450" height="310" alt="Grafik">
</body>
</html>

Die Grafik wird in der angegebenen Größe dargestellt, auch wenn das Browserfenster kleiner sein sollte.

Wer die Seitenverhältnisse beibehalten möchte, kann auch nur eine Größe angeben dadurch wird die zweite Größe automatisch berechnet um das Seitenverhältnis beizubehalten. Hier ein Beispiel:

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg" width="200" alt="Grafik">
</body>
</html>

Es ist natürlich uns überlassen welche Größe wir angeben wollen. Wir könnten anstatt der Breite width auch nur die Höhe mit height angeben.

Es ist auch möglich die Größe anzugeben, die die Grafik im Browserfenster belegen soll, dafür geben wir den Prozentsatz an, dessen Fläche im Fenster die Grafik belegen soll. Wenn wir die Größe als Prozent angeben wollen müssen wir nur nach der Zahl ein %-Zeichen anhängen.

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg" width="100%" height="100%" alt="Grafik">
</body>
</html>

Hier im Beispiel wird die Grafik vergrößert oder verkleinert damit sie das ganze Browserfenster ausfüllt. Dabei werden die Seitenverhältnisse nicht eingehalten.

Wenn wir nur Breite oder nur Höhe angeben, wird das Seitenverhältnis beibehalten. Hier ein Beispiel:

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg" height="50%" alt="Grafik">
</body>
</html>

In diesen Beispiel nimmt die Grafik 50% der Fensterhöhe ein die Seitenverhältnisse werden dabei eingehalten, auch wenn die Breite des Fensters kleiner ist als die Breite der Grafik.

Rahmen für Grafiken erstellen
Mit dem Attribut border (Rahmen) kann ganz einfach ein Rahmen gezeichnet werden. Es muss border nur die Dicke des Rahmens in Pixel übergeben werden.

<html>
<head>
<title> Grafiken in HTML </title>
</head
<body>
<img src="Bild.jpg" height="50%" border="3" alt="Grafik">
</body>
</html>

M-XPro

Seiten

Montag, 12. Mai 2014

Grafiken in HTML

Keine Kommentare:

Kommentar veröffentlichen