Bilder
Gut, dann zeige ich Dir jetzt mal, wie man ein Bild auf der Seite einfügt. Voraussetzung: das Bild sollte so groß sein, wie es auf der Seite erscheinen soll und es muss sich im Unterordner "Bilder" deines Homepageordners befinden. Ich nehme dafür das Bild "Ferienhaus.jpg", Du must dann Deinen Dateinamen dafür nehmen.
Bildbehälter zentriert
alt = falls das Bild nicht geladen werden
kann, wird dieser Text angezeigt.
Wichtig auch für Blinde.
Wenn Du mit der Maus auf das Bild zeigst, erscheint ...
Wo ist das Bild gespeichert und wie heißt es?
es folgt eine Bildunterschrift
so lautet sie
Ende der Bildunterschrift
Ende des Bildbehälters
Das müsste dann so aussehen:
Wenn das Bild so zentriert wird, erscheint der nächste Text darunter. Wenn Text rechts davon stehen soll, dann muss das Bild so eingebunden werden:
Ein Bildbehälter, der links steht
enthält dieses Bild
Wenn das Bild rechts stehen soll,
dann natürlich float:right;
Ende des Bildes
Probe aufs Exempel:
Und schon steht der Text rechts neben dem Bild. In diesem Beispiel habe ich die Bildgröße ausdrücklich bestimmt (es ist dasselbe Bild) und einen unsichtbaren Rand von 10 Pixel rund um das Bild gezogen, damit es freier dasteht und das Ganze einen schöneren Eindruck macht.
Und weil ich hier noch Platz habe: der Eintrag von alt= ist ein Muss, title= ein kann. Und immer schön an die Syntax denken - alle Zeichen müssen stimmen!
die freie Fläche um das Bild,
die Größe der Darstellung,
nur zusammen benutzen, sonst stimmt
das Seitenverhältnis nicht
Hast Du eigentlich im großen Bild oben mal auf Fenster und Türen geklickt? Wenn nicht, hol das nach. Schau mal, ab wo die Hand erscheint, nur auf den Fenstern und der Tür. Man nennt das "Imagemap" und die erstellt Dir Gimp - zu finden unter "Filter/Web". Was Gimp da erstellt, kannst Du an der Stelle im Editor, wo das Bild hinsoll, einfach einfügen.
Für den Fall, dass Bilder
- wie auf diesen Seiten -
mal links, mal rechts und auch mal
zentriert stehen sollen, kann man
in der CSS-Datei auch gleich Klassen
anlegen wie hier:
HTML aus. Entsprechend ist
"links" dann zu ersetzen durch
"rechts" bzw. "mitte".
Der Vorteil dieser Methode: den Klassen "links", "mitte" und "rechts" kann man mal eben schnell ein "padding" hinzufügen oder ein "margin-left" oder ...