Web-Kurs

Grafiken können in HTML-Dateien nicht fest eingebaut werden. Man muss sie dort per Verweis einbinden.

Tags, Parameter und deren Bedeutung siehe auch

Tags, Parameter und deren Bedeutung		siehe auch
`<img Attribute>` = image - ein Bild soll eingebunden werden Attribute im Starttag: `src` = source - Quelle, also der Bilddatei-Pfad bzw. der Web-Link `alt` = alternative - alternativer Text zur Beschreibung des Bildes `width` = Breite der Abbildung `height` = Höhe der Abbildung		Kurzbeschreibung SelfHTML Bearbeitung von WEB-Bildern mit Paintshop Pro, von Markus Kölle

<img Attribute> = image - ein Bild soll eingebunden werden

Attribute im Starttag:
src = source - Quelle, also der Bilddatei-Pfad bzw. der Web-Link
alt = alternative - alternativer Text zur Beschreibung des Bildes
width = Breite der Abbildung
height = Höhe der Abbildung

Kurzbeschreibung

SelfHTML

Bearbeitung von WEB-Bildern
mit Paintshop Pro, von Markus Kölle

Beispiel 6.1

HTML-Quelltext
<html> <head> <title>Web-Kurs, Beispiel 6.1</title> </head> <body> <h1><img src="images/achtung.jpg" width=58 height=76 alt="Verkehrszeichen ACHTUNG"> Achtung, diese Web-Seite ist noch <img src="images/achtung.gif" width=58 height=76 alt="Verkehrszeichen ACHTUNG"> eine Baustelle!</h1> </body> </html>

HTML-Quelltext


<html>
<head>
 <title>Web-Kurs, Beispiel 6.1</title>
</head>
<body>
<h1><img src="images/achtung.jpg" width=58 height=76 alt="Verkehrszeichen ACHTUNG">
Achtung, diese Web-Seite ist noch
<img src="images/achtung.gif" width=58 height=76 alt="Verkehrszeichen ACHTUNG">
eine Baustelle!</h1>
</body>
</html>

Darstellung des Browsers
Achtung, diese Web-Seite ist noch eine Baustelle!

Die Attribute width, height und alt sind nicht zwingend erforderlich, sie gehören aber zum Stile einer gekonnten Webseiten-Erstellung.

Mit den Angaben width und height kann der Browser den geladenen Text hinter der Grafik bereits darstellen, wenn die zumeist umfangreichere Grafik noch nicht geladen worden ist. Der Leser kann sich also bereits frühzeitig orientieren.
Ohne diese Angaben muss zuerst die Grafikdatei geladen werden, bevor der Browser den Text dahinter darstellen kann.

Eine gut designte Web-Page zeichnet sich auch dadurch aus, dass sich der Leser bei Bedarf darin zurechtfinden kann, wenn er keine Grafiken darstellen lässt.
Im Internet gibt es diesbezüglich viele Negativ-Beispiele, auch von IT-Unternehmen.
IT = information technology

Im Beispiel oben werden zwei gleiche Bilder in unterschiedlichen Grafikformaten eingebunden. Obwohl die Grafiken gleich groß sind, sind deren Dateien unterschiedlich groß, was den Abbildungen nicht anzusehen ist.
achtung.jpg: 7432 Byte (lange Download-Zeit)
achtung.gif: 456 Byte (kurze Download-Zeit)

Gegenwärtig werden von Browsern 3 Grafikformate verarbeitet.

JPEG (suffix jpg oder jpeg) für Fotografien oder fotorealistische Bilder (fließende Übergänge)
GIF (graphics interchange format, suffix gif) für Bilder mit bis zu 256 Farben und transparentem Hintergrund (Pläne, Comics)
PNG (portable network graphics) soll die Vorteile von JPEG und GIF vereinen

Wichtig ist also die Kenntnis vom geeigneten Grafikformat.

Achtung, diese Web-Seite ist noch eine Baustelle!