Lektion 8
Februar 28, 2021
Bilder einbinden
Das klingt nach ein bißchen Herausforderung …
Sie müssen dem browser zuerst mitteilen, dass Sie ein Bild (img, kurz für image) einfügen möchten. Dann müssen Sie ihm noch die Quelle (src, kurz für source) nennen. Logisch oder?
Bitte beachten Sie, dass das img- Element, wie das bereits bekannte <br />, Start- und End- Tag in einem ist. Wie „br“ ist img nicht an Text gebunden.
“Bild.jpg” ist der Name der Bilddatei, die Sie auf der Seite einfügen möchten. “.jpg” ist der Dateityp des Bildes. Wie die Endung “.htm” anzeigt, dass die Datei ein HTML-Dokument ist, zeigt “.jpg” dem Browser, dass es sich bei der Datei um ein Bild handelt.
Es gibt drei verschiedene Arten von Bildtypen, die man in eine Internetseite einbinden kann:
- GIF (Graphics Interchange Format)
- JPG / JPEG (Joint Photographic Experts Group)
- PNG (Portable Network Graphics)
Es gibt noch ein paar Dinge mehr, die Sie über Bilder wissen sollten.
Sie können ganz einfach Bilder einbinden, die in anderen Ordnern oder sogar auf anderen Webseiten gespeichert sind:
<img src=“images/logo.png“ /> Bild aus einem Ordner
<img src=“http://example.org/ordner/bild.png“ /> Bild aus einer Internetseite
Bilder zu ein Link:
<a href=“Seite2.html“><img src=“http://example.org/ordner/bild.png“ /></a>
Zwei weitere wichtige Attribute bei Bildern sind width und height:
<img src=“images/logo.png“ width=“30px“ height=“ 15px“ />
Die Attribute width und height werden benutzt, um die Breite (engl. width) und Höhe (engl. height) eines Bildes anzugeben. Die Höhe und Breite wird in Pixeln angegeben. Pixel sind die Einheit, mit der man die Auflösung von Bildschirmen angibt. Man könnte es auch mit “Bildpunkte” übersetzen. (Die gebräuchlichste Bildschirmauflösungen ist momentan 1024×768 Pixel.) Im Gegensatz z.B. zu Zentimetern sind Pixel eine relative Maßgröße, die von der Bildschirmauflösung des verwendeten Monitors abhängt. So kann es sein, dass 25 Pixel bei einem Nutzer einer hohen Auflösung etwa einem Zentimeter entspricht, während es bei einer niedrigen Auflösung etwa anderthalb Zentimetern auf dem Bildschirm entspricht.
Wenn Sie width und height nicht einsetzen, wird das Bild in seiner Originalgröße eingefügt. Mit width und height kann man die Anzeigegröße verändern:
