Logo

Eigene Homepage

Bilder


"Wie geht das eigentlich mit Bildern?"

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.

<figure style="text-align: center;"> <img alt="Unser Ferienhaus" title="Unser Ferienhaus" src="Bilder/Ferienhaus.jpg"> <figcaption> Unser Ferienhaus </figcaption> </figure>

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:

Unser Ferienhaus
Unser Ferienhaus
Schlafzimmer Küche Wohnzimmer

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:

<figure style="float: left;" <img alt="Unser Ferienhaus" title="Unser Ferienhaus" src="Bilder/Ferienhaus.jpg"> </figure>

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:

Unser Ferienhaus

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!

<figure style="padding: 10px;"> <img height="150" width="200" usw.>

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.

.links { float: left; } .rechts { float: right; } .mitte { text-align: center; }

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:



<figure class="links"> <img src=" usw. </figure>
So sieht die Notation dann in
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 ...


Zurück zur Seite 10 <------> Weiter zur Seite 12

Feedback Mein Gästebuch nach oben