Html Lernen (Bilder)


Im Kapitell acht wird alles rund um das Thema Bilder beschrieben. Z.B.: Bilder einbinden, Größe der Bilder ändern, oder Bilder als Link.


8.0 Bilder einbinden

Bilder werden mit dem Befehl <img src="Name.gif"> in Html Dokumente eingebunden. Es können verschiedene Bild Dateien eingebunden werden es muss nur dementsprechen die Endung geänder werden zb.: .gif .jpg oder .bmp.

<Html>

<Head>
<Title>Bilder</Title>
</Head>
<Body>

<img src="Bild.gif">
<br>
<img src="Bild2.jpg">
<br>
<img src="Bild3.bmp">


</Body>

</Html>
Bei diesem Beispiel muss die Bild-Datei in dem gleichen Ordner wie die Html-Datei sein. Der Name der Bild-Datei kann beliebig geändert werden muss aber dann auch im Html Dokument geändert werden!



8.1 Bilder in einem extra Ordner

Wenn Sie die Bilder nicht mit den Html-Datein in einen Ordner sondern in einen extra Ordner seperat speichern wollen müssen sie wie folgt den Befehl abändern! Der Ordner mit den Bilder heißt z.b.: Urlaubsbilder

<Html>

<Head>
<Title>Bilder</Title>
</Head>
<Body>

<img src="Urlaubsbilder/Bild.gif">
<br>
<img src="Urlaubsbilder/Bild2.jpg">
<br>
<img src="Urlaubsbilder/Bild3.bmp">


</Body>

</Html>




8.2 Größe der Bilder ändern

Sie können Bilder so groß oder so klein machen wie Sie wollen, die einzige Auswirkung kann sein das die Bildqualität darunter leidet!

<Html>

<Head>
<Title>Bilder</Title>
</Head>
<Body>

<img src="Bild.gif" height="31" width="9">
<br>
<img src="Urlaubsbilder/Bild3.bmp" height="53" width="86">


</Body>

</Html>




8.3 Bild aus dem WWW

Wenn Sie ein Bild aus dem WWW in ihre Homepage einbinden wollen ohne es erst herunterladen zu wollen geht das natülich auch. (Aber nie Copyrightrechte verletzten)

<Html>

<Head>
<Title>Bilder</Title>
</Head>
<Body>

<img src="http://www.html-hilfe.de/Bilder/top.jpg">
<br>
<img src="Urlaubsbilder/Bild3.bmp" height="53" width="86">


</Body>

</Html>




8.4 Bild als Link

Wie im Kapitel 7 schon erklärt wir der normla befehl eines Links genommen und satt dem Text der Befehl des Bildes benutzt.

<Html>

<Head>
<Title>Bilder</Title>
</Head>
<Body>

<a href="Name.html"><img src="Bild.gif" height="31" width="9"></a>

</Body>

</Html>