Grafiken einbinden
Grafiken und Bilder werden über das Element „<img>“ in ein HTML Dokument eingebettet. Als Grafikformate kommen üblicherweise GIF, JPG und bei den neueren Browsern auch PNG in Frage. Diese Formate sind Komprimierungen einer ursprünglichen Bilddatei. GIF Dateien werden idealerweise für Bilder mit weniger als 256 Farben, in der Regel sind das Grafiken, verwendet, während JPG verbreitet für Fotografien eingesetzt wird. Man erhält die Dateien durch Abspeichern in einem dafür vorgesehenen Bildbearbeitungsprogramm, wobei man in der Regel den Grad der Komprimierung einstellen kann. Bei der Komprimierung sollte man das Dateivolumen möglichst gering halten, denn trotz großer Bandbreite können große Bilddateien den Aufbau einer Webseite maßgeblich verzögern.
<p><img src=“grafik.gif“ width=“400″ height=“200″ border=“2″ name=“umsatzgrafik“ alt=“Umsatz 2006″ title=“2006 sind die Umsätze von Monat zu Monat gestiegen“></p>
Grafiken sind in HTML „Inline Elemente“, das heißt, sie erzeugen keine neue Zeile im Fließtext, wie es Blockelemente (Absätze, Tabellen etc.) tun. In der „strict“ Variante von HTML stehen sie selbst in einem Blockelement. Im Beispiel steht die Grafik in einem Absatz-Element „<p>“. Das <img>-Element kann durch Attribute weiter spezifiziert werden. Am wichtigsten ist die Angabe, wo die Datei zu finden ist. Dies wird mit dem Attribut „src“ (engl. Quelle) notiert. Ob man nun mit einem absoluten oder relativen Pfad referenziert ist egal – es gelten dieselben Regeln wie für Hyperlinks.
Breite und Höhe
Die Angaben „width“ und „height“ beschreiben die Dimensionen Breite und Höhe des Bildes. Im vorliegenden Fall bezieht sich die Angabe auf „Pixel“. Es können aber genausogut Prozentangaben gemacht werden (10% etc.). Eine Größenangabe ist zwar nicht zwingend erforderlich, empfiehlt sich aber, da der Seitenaufbau dadurch schneller wird. Der Browser weiß so bereits vor dem Laden der Grafikdatei, wieviel Platz er für das Bild reservieren muss. Dadurch wird zudem ein ruckelnder Seitenaufbau umgangen. Angaben in Prozenten sind eher unüblich, können aber beispielsweise bei der Visualisierung von Umfrageergebnissen sinnvoll sein. Haben sich 63 Prozent für „ja“ und 47 Prozent für „nein“ entschieden, braucht man nur eine einzige Grafik für ein Balkendiagramm, die man dann auf den entsprechenden Wert skaliert.
Rahmen
Über das Attribut „border“ lässt sich eine Bildumrahmung festlegen. Falls im Browser nicht anders eingestellt, erscheint eine verlinkte Grafik mit einem Rahmen. Will man das ausschließen, muss border=“0″ gesetzt sein. Das Border-Attribut wird jedoch irgendwann aus HTML verschwinden (deprecated), weswegen man Rahmen über Stylesheets verwirklichen sollte, die auch wesentlich mehr Möglichkeiten eröffnen.
Beschreibungen
Mit dem Attribut „name“ erhält die Grafik einen eindeutigen Namen, der über Javascript angesprochen werden kann. Gerade Navigationsleisten, bei denen beim Überfahren mit der Maus jeweils eine andere Grafik angezeigt wird – wie auf dieser Webseite – machen hiervon Gebrauch. Zwingend ist diese Angabe jedoch nicht. Im „alt“-Attribut wird ein Alternativtext notiert, der immer dann erscheint, wenn die Bilddatei nicht geladen wurde (falsche Quellenangabe, Serverprobleme etc.). Der Alternativtext sollte die Maße des Bildes nicht überschreiten und bei kleinen Bildern daher kurz sein. Mit dem „title“-Attribut schließlich kann man eine Grafik mit einem Erklärungstext versehen, der dann erscheint, wenn der Nutzer mit der Maus darüber fährt. Das „title“ Attribut eignet sich auch hervorragend, um Hyperlinks näher zu beschreiben. So bekommt der Leser genauere Angaben darüber, was ihn erwartet, wenn er den Link klickt.
Grafiken im Fließtext
Im obigen Beispiel steht die Grafik als einziges Element in einem Absatz. Häufig sollen jedoch textbegleitende Bilder oder Vorschaubilder so eingebunden werden, dass sie vom laufenden Text umflossen werden. Solche Formatierungen sind mit Hilfe von CSS-Angaben zur Platzierung und gegebenenfalls zu Abständen sehr leicht zu bewerkstelligen.