Bild einfügen

<img src="URL-des-Bildes">

Beispiel:

<img src="http://www.ramnip.net/data/disk.gif">

Ergebnis:

Erweiterungen:
Mit den Parametern width (Breite) und height (Höhe) kann man dem <img>-Tag eine Größe in Pixel zuweisen. Die Datei selbst hat dann zwar immer noch die echte Größe und Abmessung, wird im Dokument aber in der gewünschten Pixel-Abmessung gezeigt. Bei Vergrößerungen zieht dies natürlich Qualitätsverluste nach sich.

Beispiel:

<img src="http://www.ramnip.net/data/disk.gif" width="32" height="32">

Ergebnis:

Tipp: Bild-Hinweis

<img src="http://www..../bild.jpg" alt="Dies ist eine Diskette!">

Berührt die Maus das Bild, so wird ein Hinweis angezeigt. Dies ist eine Diskette!

Hyper-Link

<a href="URL-der-Seite" target="_blank">Link-Text</a>

Beispiel:

<a href="http://www.ramnip.de/" target="_blank">Ramnips Farbtabelle</a>

Ergebnis: Ramnips Farbtabelle

Erläuterungen:
Der Zusatz target="_blank" öffnet die Seite in einem neuen Browser-Fenster. Falls die Seite im aktuellen Fenster geladen werden soll target="_blank" weglassen.

Wichtig: Am Ende des Codes darf nicht </a> vergessen werden!
</a> ist die Anweisung an den Browser, dass hier der Link endet.

Tipp: Link-Hinweis

<a href="http://www.ramnip.de/" target="_blank" title="Ramnips Farbtabelle">Hier klicken und Farben finden</a>

Berührt die Maus den Link, so wird ein Hinweis angezeigt.: Hier klicken und Farben finden

Bild-Hyper-Link

<a href="URL-der-Seite" target="_blank"><img src="URL-des-Bildes" border="0"></a>

Beispiel:

<a href="http://www.ramnip.de/" target="_blank"><img src="http://www.ramnip.net/data/disk.gif" border="0"></a>

Ergebnis:

Erläuterungen:
Wir haben hier einfach den Bild- und Link-html-code miteinander verkuppelt.
Der aufmerksame Leser wird es bemerkt haben - es taucht ein weiterer Parameter auf. Die Wirkung von target="_blank" hatte ich bereits oben beim Hyper-Link erklärt.
Neu im Bild-Code: der Zusatz border="0". Dieser Zusatz entfernt einen automatisch auftretenden Rahmen um das Bild.
Wer diesen Rahmen trotzdem haben möchte, lässt border="0" einfach weg oder schreibt an Stelle der 0 die gewünschte Rahmenstärke durch eine Ziffer hinein.

Wichtig: Am Ende des Codes darf nicht </a> vergessen werden!
</a> ist die Anweisung an den Browser, dass hier der Link endet.

E-Mail-Link

Altbekannter HTML-Code: <a href="mailto:Name@Server.Länderkennung">Text</a>

Doch diesen werden wir nicht verwenden. Grund: Es gibt Suchroboter im WWW die auf Webdokumenten E-Mails anhand ihres Aufbaus (name@server.länderkennung) auslesen und auf Spamlisten setzen um damit unerwünschte Viren oder Werbung in beliebige Postfächer zu versenden. Ich empfehle daher E-Mail-Links nur durch ein Script anzuzeigen. Das hier vorliegende ist ein einfaches aber funktionstüchtiges:

<script> b="server.länderkennung"; a="name"; x='<a href=\"mailto:'; y="@"; z='">'+a+y+b+'</a>'; document.write(x+a+y+b+z);</script>

Beispiel:

<script> b="freenet.de"; a="ramnip"; x='<a href=\"mailto:'; y="@"; z='">'+a+y+b+'</a>'; document.write(x+a+y+b+z);</script>

Ergebnis: ramnip@freenet.de

Spezialtipp: Email-Link mit Betreff und Bodyvorgabe - ramnip@freenet.de

<script> b="freenet.de"; a="ramnip"; x='<a href=\"mailto:'; y="@"; z='?subject=Hallo Ramnip, Mail von der HP-Help&body=Hi!%0A%0ASurfe grade auf www.ramnip.net herum!%0AUnd Teste die Email mit vorgegebenen Betreff sowie Body.">'+a+y+b+'</a>'; document.write(x+a+y+b+z);</script>

Erläuterung: %0A ist ein Zeilenumbruch im Bodyteil, einfach etwas durchprobieren

Bild-E-Mail-Link

<script> b="freenet.de"; a="ramnip"; x='<a href=\"mailto:'; y="@"; z='"><img src="http://www..../bild.jpg" border="0"></a>'; document.write(x+a+y+b+z);</script>

Hier muss also nur das '+a+y+b+' herausgelöscht und das klassische Bildtag eingefügt werden.

Hintergrund-Bild

Im Knuddels-Homepageeditor schreibt man einfach in die betreffende Zeile die Adresse des Bildes, den Rest übernimmt der Editor dann von allein. Es versteht sich natürlich von selbst, dass die Adresse auch zu einer Datei führen muss, die ein Bild beinhaltet. Also z.B. "JPG" oder "GIF".

Wer es aber von allein oder auf einer anderen HP einstellen möchte bedient sich hiermit:

<body background="URL-des-Bildes">

Probleme beim Firefoxbrowser?
Wird der Hintergrund nicht feststehend angezeigt? Dann mit CSS aushelfen:
<style type="text/css"></style>

Hinweis: HTML ist, was Hintergrundbildeinstellung angeht, sehr sehr faul - es gibt nämlich keinerlei Möglichkeit das Bild gezielt auszurichten. Hat man ein kleines Bild welches aneinandergesetzt eine große Fläche ergibt, so reicht HTML an der Stelle vollkommen aus.
Viel gezielter kann jedoch CSS mit Hintergründen umgehen. Mehr dazu erfährst du im Bereich "CSS/Stylesheets".