In diesem kleinen Tutorial wollen wir einmal das Einfügen von Bildern lernen, da dies oft sehr hilfreich ist. Zunächst betrachten wir die Anwendungsbereiche von Bildern in HTML-Dokumenten:
Bilder normal einfügen
Als Hintergrundbild der Homepage
Als Hintergrundbild in Tabellen
Als Linkhintergründe
Ich könnte jetzt noch mehr aufzählen aber das wäre dann zu viel verlangt.
Erklärung
Wir beginnen den Image Tag mit < IMG>. Anstatt "Bild URL" müsst ihr natürlich die Adresse des Bildes angeben, das ihr einfügen wollt. Bei border(engl. = Rand) könnt ihr die Ramendicke eines Bildes bestimmen. Bei 0 hat es gar keinen Rand, bei 1 ist der Rand 1 Pixel dick. Durch alt="" Bestimmten wir den Text in der Infobox, die Ihr seht, wenn ihr mit eurem Cursor länger auf einerm Link oder Bild verweilt. Dieser sollte aber nicht ellenlang sein, da er sonst vom IE abgekürzt wird. Wenn ihr width und height gar nicht erst definiert, dann wird das Bild in seinen vorgegebenen Massen eingegeben. Man sollte bedenken, dass auch diese Werte in Pixeln sind, also sollte man diese nicht zu klein halten.
1c. Als Hintergrund der Homepage
Manchmal möchte man auch ein Bild als Hintergrundbild einfügen. Dies ist nicht ganz so kompliziert wie das normale einfügen.
code:
1:
<body background="Bild URL">
Auch hier müsst ihr wieder das Bild URL durch eure Bild Adresse ersetzen. Wie ihr wahrscheinlich schon wisst, ist body der Hauptbereich eines HTML-Dokuments.
1d. Als Hintergrund in Tabellen
Nun, ich brauche mal wieder keinen Code aufzuschreiben, denn ihr müsst einfach den Hintergrundbild-Code nehmen und body durch table ersetzen. Natürlich kann man dann auch noch weitere Definitionen in der Tabelle vornehmen.
2. Hintergrundbild scrollt nicht mit
Ihr kennt das sicherlich auch, ihr habt einen schönen Hintergrund, aber wenn ihr auf einer Seite viel Text habt, wiederholt sich das Hintergrundbild. Dem kann man vorbeugen, indem man folgendes nach dem Definieren eines Hintergrundbildes angibt:
code:
1:
<body background="Bild URL" bgproperties="fixed">
Fazit
Bilder einfügen ist sehr leicht, man muss insgesamt nur 6 Definitionen zur Bild-Verarbeitung kennen und wissen, wie man diese einsetzt.
Ich hoffe dieses Tutorial hat euch geholfen und ihr könnt es sinnvoll einsetzen.
__________________
code:
1:
2:
3:
4:
5:
<style type="text/ CSS">
* HTML body {
display:none;
}
</style>
Das mag ich am IE ^^
29.12.2006 22:32
Der Betreiber und die Moderatoren vom www.coder-board.de distanzieren sich hiermit ausdrücklich von dem von NetzSchleicher am 29.12.2006 um 22:32 verfassten Beitrag. Sollte dieser Beitrag Ihre Rechte verletzen, bitten wir um Benachrichtigung unter Berücksichtigung der dort aufgeführten Möglichkeiten.
