Bilder

In diesem Tutorial erkläre ich euch ein paar Basis-Codes für Bilder.

Bilder einfügen

Um ein Bild auf eine Webseite einzufügen, müsst ihr es grundsätzlich erst einmal hochladen. Dies macht ihr entweder auf eurem eigenen Server oder auf einer externen Gallery. Was ihr benötigt, ist die Bild-URL, beginnend mit http://. Mit dieser arbeiten wir.

Dieser Code ist eure Basis, ihr müsst lediglich die Bild-URL einfügen. Ihr könnt dem Bild aber auch weitere Attribute wie beispielsweise die Höhe oder Weite (in Pixeln) zuweisen. Tut ihr das nicht, nimmt es automatisch die originale Bildgröße an.

Bilder einen Titel geben

Mit der alt Funktion könnt ihr eurem Bild einen Titel geben, der erscheint, wenn ihr mit der Maus über das Bild fahrt. Im Firefox müsst ihr anstatt der alt Funktion "title" benutzen.

Ausrichtung der Bilder

Mit einem kleinen Codezusatz könnt ihr die Ausrichtung eures Bildes festlegen. Dafür nutzt ihr die Angaben "left" (links), "right" (rechts) und "center" (zentriert). Wenn auf eurer Seite zusätzlich Text ist, umfließt dieser nun automatisch das Bild.

Rahmen um Bilder

Um einen Rahmen um euer Bild zu legen, verwendet ihr das Attribut "border". Mit den Zahlen von 0 bis unendlich gebt ihr die Breite des Rahmens an. Die Farbe des Rahmens entspricht dabei immer der Schriftfarbe eurer Seite, wenn sie nicht mit CSS definiert wird.

Mit Hilfe eures CSS Styles ist es möglich auch ganz allgemein den Rahmen all eurer Bilder sowie die Rahmenfarbe festzulegen.

Eingeben müsst ihr hier den Hexcode für die Farbe und eine Zahl vor der Pixelangabe (px). Das Attribut "solid" beschreibt die Art des Rahmens. Solid steht dabei für einen normalen Rahmen mit durchgezogener Linie. Es ist jedoch auch möglich das Attribut "dotted" für einen gepunkteten Rahmen, "dashed" für einen gestrichelten Rahmen oder "double" für eine doppelte Linie zu verwenden.

Bildlink

Natürlich ist es auch möglich mit Bildern eine Webseite zu verlinken. Dafür benötigt ihr die URL der Seite und des gewünschten Bildes.

Wie ihr seht ist der Code ähnlich dem normalen Hyperlink (s. Kapitel Hyperlinks). Es wurde lediglich anstatt des Textes der Bildcode eingesetzt.