Bilder auf der Webseite hinzufügen mit HTML
Grafiken und der <img />-Tag
Lassen Sie uns ein einfaches Beispiel versuchen. Hier ist die Webseite HTML-Lernen. Mit Hilfe all der ausgezeichneten Hinweise, die ich Ihnen in den letzten Kapiteln gegeben habe, sollten Sie in der Lage sein, ohne weiteres so eine Seite wie die folgende zu erstellen. Hier folgt der HTML-Code für diese Datei und Grafik zeigt, wie das aussieht:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
<html>
<head>
<title>HTML Lernen - Grundlagen und Tutorials</title>
</head>
<body>
<h1>
HTML Lernen - Grundlagen und Tutorials
</h1>
<hr />
<p>
Die Grundvoraussetzung für eine <strong>Grafik</strong>, die in <strong>HTML-Dokumente</strong> eingebunden werden soll, ist eine geringe Dateigröße bei hoher Auflösung. Daher haben sich im Laufe der Zeit drei verschiedene <strong>Formate</strong> im World Wide Web durchgesetzt: GIF, JPEG und PNG.
</p>
<p>
Hier folgt der <strong>HTML-Code</strong> für diese Datei und <strong>Grafik</strong> zeigt, wie das aussieht.:
</p>
<ul>
<li>Mo-Fr 09.00 - 17.00</li>
<li>Sa & So Geschlossen</li>
<li><strong>Neujahr (31-Oct)</strong>: ???</li>
</ul>
<p>
HTML-Lernen - Grundlagen und Tutorials:<br />
Darko Pipic<br />
Neue Str. 12<br />
18 569 Ummanz (Waase)
</p>
</body>
</html>
So weit, so gut. Jetzt können Sie Ihrer Webseite ein Bild hinzufügen.
Stellen Sie sich vor, Sie hätten ganz zufällig eine Grafik auf Ihrem Festplattenlaufwerk; würde sich das nicht gut am Anfang Ihrer Webseite machen. Das Bild, das man home.jpg nennt, ist im gleichen Verzeichnis zu finden wie die html-lernen.html page. Es liegt sozusagen schon für Ihre Webseite bereit.
Stellen Sie sich nun vor, dass Sie dieses Bild Ihrer Seite hinzufügen möchten, und zwar so, dass es eine Zeile für sich beansprucht und die Überschrift unter dem Bild erscheint: Dafür fügen Sie ein <img />-Tag der Datei in einem eigenen Absatz, kurz vor der Überschrift ein. (Bilder wie Links definieren nicht ihre eigenen Textelemente. Deshalb muss das <img />-Tag innerhalb eines Absatz- oder Kopfzeilenelements erscheinen).
<p>
<img src="user_male_64.png" alt="HTML Lernen" />
</p>
<h1>
HTML Lernen - Grundlagen und Tutorials
</h1>
Wenn Sie jetzt die html-lernen.html-Seite öffnen, sollte Ihr Browser das Bild auf der Seite, wie in der Abbildung anzeigen.
Falls es nicht klappt (wenn Ihr Browser ein seltsames Bildsymbol anstelle des Bildes zeigt), überprüfen Sie, ob Sie den Datei-Namen in der HTML-Datei korrekt angegeben haben. Bilddatei-Namen unterscheiden zwischen Groß- und Klein-Buchstaben, deshalb müssen alle Groß- und Klein-Buchstaben übereinstimmen (mit dem tatsächlichen Namen der Datei, die geladen werden soll). Wenn es immer noch nicht funktioniert, prüfen Sie genau, ob es sich bei der Grafik wirklich um eine GIF- oder JPEG-Datei handelt und ob sie mit dem richtigen Suffix ausgestattet ist.
Und schließlich stellen Sie sicher, dass Sie bei Ihrem Browser das Laden von Grafiken auch eingeschaltet haben.
Wenn ein Bild gut ist, dann wären zwei Bilder doch noch viel besser, finden Sie nicht? Versuchen Sie ein zweites <img />-Tag in der Nähe des ersten hinzuzufügen und sehen Sie, was passiert:
<p>
<img src="user_male_64.png" alt="HTML Lernen" />
<img src="user_female_64.png" alt="HTML Lernen" />
</p>
<h1>
HTML Lernen - Grundlagen und Tutorials
</h1>
Die Abbildung zeigt das Ergebnis im Safari.
Und das ist es auch schon! Unabhängig davon, wie klein oder groß das Bild ist, Sie fügen es auf die gleiche Weise in Ihre Webseite ein.