HTML - Das erste BildHTML CSS Grundlagen

Wie fügt man ein Bild ein:

<html>
<head>
<title>TITEL</title>
</head>
<body>
<h1>Hallo!</h1>
<img src="/images/grafik.gif" width="300" height="300">
<h2>Zweite &Uuml;berschrift</h2>
<p>Ein Absatz mit<br/>
Zeilenumbruch</p>
<p><a href="http://www.philophax.de">Ein Link zu PhiloPhax</a></p>
</body>
</html>

Ansehen!

Ein Bild ist schnell eingebaut:

"img src" bedeutet "image source" und bezeichnet den Platz im WWW, auf dem die Grafik zu finden ist.
<img src="/images/grafik.gif" width="300" height="300"> referenziert die Grafik "grafik.gif" im Ordner "images" auf dem Server, auf dem auch die Site liegt. Mit "width" und "height" gibt man die Größe der Grafik in Pixel an.

<img src="http://www.philophax.de/images/grafik.gif" width="300" height="300"> zeigt auf den gleichen Ort; mit diesem Tag kann die Datei von einer anderen Präsentation, die nicht im gleichen Verzeichnis liegt, eingebunden werden.

Im Web werden normalerweise folgende Grafikformate benutzt: .GIF für Grafiken (kann auch transparente Bereiche enthalten), .JPG für Fotos und .PNG. Das letztgenannte Format beinhaltet quasi das Beste von den beiden vorigen Formaten.

Was passiert nun, wenn man die Größe verändert: wir schreiben mal (bei unveränderter Grafik) width="142" height="142" in den Tag und sehen uns das an. Ergebnis: die Grafik hat die zwar die richtige Größe, aber sie sicht nicht so sehr schön aus. Man muss die Bilder in der Größe auf den Server stellen, in der man sie anzeigen will. Wie man das macht? Dazu kommen wir später.

Weiter: Was passiert im head-Bereich?

·· PhiloPhax · Schwarzwald.net · Reiserat ·
· Schnelladende Layouts · Webtaugliche Texte · Suchmaschinenoptimierung · Bildbearbeitung fürs Web · Wordpress ·
· Holzgerlingen liegt bei Böblingen zwischen Stuttgart und Tübingen an der B 464