Bilder - How to Internet

howtointer.net
BEGINNER ADVANCED EXPERT DEVELOPER

Bilder

Um Bilder in unsere Webseite einzufügen können wir <img> verwenden.

<img src="http://howtointer.net/Chapters/Berlin.JPG">

Statt dem href-Attribut (wie bei Links) nutzen wir hier das src-Attribut (source), aber auch hier fügen wir die "Quelle" unseres Bildes ein. Dies kann entweder ein Link aus den Internet sein (dieser muss aber mit .jpg oder .png enden) oder wir speichern das Bild im selben Ordner wie unsere .html Datei ab und rufen dann einfach ihren Namen auf.

<img src="Berlin.jpg">

Wie du sehen kannst benötigt übrigens auch <img> kein Closing-Tag.
Zurzeit wird das Bild allerdings in seiner natürlichen Grö&szml;e angezeigt. Um es an unsere eigenen Bedürfnisse anzupassen, können wir die Attribute height (Höhe) und width (Breite) verwenden.

See the Pen EKXRvx by Marcel Deuter (@howtointernet) on CodePen.

Unter HTML und CSS gibt es grundsätzlich 3 Einheiten:

Pixel sind eigentlich eine relativ schlechte Einheit und wir werden sie endgütlig abschaffen, sobald wir über "Responive Webdesign" sprechen. Also Webdesign, welches für alle Bildschirmgrößen optimiert ist.

Wir können nun also unsere px Angaben problemlos durch relative Angaben ersetzen. Wenn wir eines der beiden Attribute weglassen, wird das andere automatisch daran angepasst, sodass unser Bild nicht verzerrt erscheint.

See the Pen KzqeXr by Marcel Deuter (@howtointernet) on CodePen.

Verändere jetzt ruhig dein Browserfenster und sieh, wie sich das Bild daran anpasst.

Mit <alt> können wir übrigens einen Text hinzufügen, welcher erscheint, falls das Bild nicht geladen werden kann. Außerdem können wir unseren Bild auch einen Rahmen hinzufügen, um es vom Hintergrund abzugrenzen. Dies geht mit <border>. Die Breite wird dabei in Pixel angegeben.

<img src=Bild.jpg" border="5px" alt="Dies ist ein Bild">