Layout

Lektion 4 - Links & Bilder

Lass uns nun deine Vorbereitungen aus der letzten Lektion nutzen und alles über deine Startseite auf deiner Webseite sichtbar machen.

4.1 Hyperlinks

In Lektion 1 hast du erfahren, das Hyperlinks die einzelnen Seiten einer Webseite verbinden. Abgekürzt werden aber auch sie Links genannt. Das Tag, das Links erzeugen kann, heißt Anchor, das ist wieder englisch und heißt Verankerung. Verankert werden hier die Seiten.

<a href="index.html">Startseite</a>

Einem Link-Tag können mehrere Eigenschaften zugewiesen werden, eine ist aber unumgänglich: die Seite, auf die der Link verweist. Das Schlüsselwort ist in diesem Falle href und die Eigenschaft, die ihm zukommt, die Seite, in diesem Falle unsere index.html. Wieder gibt es ein öffnendes und ein schließendes Tag, die den Namen des Links einschließen.

Inklusive der index.html hast du nach der letzten Lektion insgesamt 8 HTML-Seiten auf deinem Server. Wir wollen nun auf deiner Startseite index.html deine Unterseiten verlinken. Dafür müssen wir die Ordnerhierarchie kennen. Öffne nun die Seite index.html in deinem Editor. Die Links zu den Seiten sollen zentriert auf der Startseite unter der Überschrift zu finden sein.

<p align="center">
    <font size="5" color="#FF0000">
        <b><u>
Willkommen auf meiner Webseite!</u></b>
    </font>
</p>

<p align="center"><a href="seiten/uebermich.html">&Uuml;ber mich</a></p>

<p align="justify">Hier lerne ich Schritt für Schritt HTML. Das Grundger&uuml;st ist bereits aufgesetzt, grade versuche ich mich am Text. Es kann nicht mehr lange dauern, dann wird hier der erste Link und das erste Bild angezeigt werden. Bis dahin werde ich flei&szlig;ig die Aufgaben auf dieser Seite ausf&uuml;hren, damit ich bald meine eigene Webseite mit meinem eigenen Inhalt erstellen kann, die von der ganzen Welt betrachtet werden kann.</p>

Den ersten Link haben wir schon einmal. Er verweist auf die Seite 'uebermich.html' im Ordner "seiten" und heißt "Über mich". Nun kannst du sehen, wie von der Startseite aus dem Stammordner auf eine Unterseite in einem Unterordner zugegriffen wird. Füge nun die anderen Links hinzu, lasse aber ein wenig Platz dazwischen, damit sie nicht zu sehr aneinanderkleben.

<p align="center">
   <a href="seiten/uebermich.html">&Uuml;ber mich</a> &nbsp; &nbsp;
   <a href="seiten/vorhaben.html">Pl&auml;ne</a> &nbsp; &nbsp;
   <a href="seiten/lektion05.html">&Uuml;bung</a> &nbsp; &nbsp;
   <a href="bilder/fotos/galerie1.html">Fotos 1 </a> &nbsp; &nbsp;
   <a href="bilder/fotos/galerie2.html">Fotos 2 </a> &nbsp; &nbsp;
   <a href="bilder/fotos/urlaub04/galerie.html">Urlaub '04 </a> &nbsp; &nbsp;
   <a href="bilder/fotos/urlaub05/galerie.html">Urlaub '05</a>
</p>

Wenn du einige Zeilenumbrüche im Quelltext einfügst und den Inhalt der Absätze etwas einrückst, wird es etwas übersichtlicher. Bei der Übersetzung der Seite durch den Browser spielen Zeilenumbrüche und Leerzeichen im Quelltext, wie gesagt, keine Rolle.
Wenn du nun auf einen Link klickst, öffnet sich die Seite und das Menü ist weg. Also wäre ein Link zurück auf die Startseite nicht verkehrt. Öffne die Seite übermich.html und füge den Link zurück zur Startseite wieder zentriert unter die Überschrift ein.

<p align="center"><a href="../index.html">Zurück</a></p>

Das gleiche mache mit allen anderen Unterseiten. Denk aber daran, immer den richtigen Pfad aus dem jeweiligen Ordner, in dem sich die Seite befindet, ins Stammverzeichnis, wo die Startseite ist, zu wählen.

 

4.2 Eigenschaften von Links

Eine wichtige Eigenschaft, die Links zukommen kann, ist das Ziel, in dem sich die Seite, auf die der Link verweist, öffnet. Das Schlüsselwort ist target, übersetzt heißt es Ziel. Ein Ziel wäre zum Beispiel ein neues Browserfenster. Diese Eigenschaft 'öffne die Seite in einem neuen Fenster" heißt '_blank'.

<a href="http://www.telien.de" target="_blank">Telien</a>

Dieser Link verweist auf Telien. Da sich Telien in keinem deiner Ordner befindet, musst du es über die vollständige URL (Universal Ressource Loader) aufrufen.

 

Eine weitere Eigenschaft, die ein Link haben kann, ist sein Name. Er wird dem Link über das Schlüsselwort title zugewiesen.

<a href="http://www.telien.de" target="_blank" title="Gehe zu Telien"> Telien </a>

Wenn du nun mit der Maus über diesen Link fährst, kannst du den Titel des Links lesen.

 

Linkbezeichnungen kann man genauso formatieren, wie reinen Text. Setze diesen Link doch einmal ganz unten auf deine Startseite. Rechtsbündig und vielleicht etwas kleiner als in deiner normalen Schrift.

<p align="right">
    <font size="2">
Dieser Kurs ist Teil von
        <a href="http://www.telien.de" target="_blank" title="Gehe zu Telien"><b>Telien </b></a>
    </font>
</p>

=> Dieser Kurs ist Teil von Telien

 

4.3 Bilder

Ein Bild einzufügen funktioniert ähnlich wie bei einem Link. Ein großer Unterschied ist allerdings, dass es nur ein einziges Tag gibt, also kein schließendes Tag. Das Bild-Tag heißt Image, wie der Name übersetzt sagt, und wird mit IMG aufgerufen. Der Verweis zum Bild geschieht über das Schlüsselwort src, dem als Eigenschaft der Pfad zum Bild mitgegeben wird.

<img src="bilder/gifs/3.gif">

Dieses Bild kannst du zum Beispiel zentriert auf deiner Startseite unter den Links platzieren.

<p align="center">
    <font size="5" color="#FF0000">
        <b><u>
Willkommen auf meiner Webseite!</u></b>
    </font>
</p>

<p align="center">
   <a href="seiten/uebermich.html">Über mich</a> &nbsp; &nbsp;
   <a href="seiten/vorhaben.html">Pläne</a> &nbsp; &nbsp;
   <a href="seiten/lektion05.html">Übung</a> &nbsp; &nbsp;
   <a href="bilder/fotos/galerie1.html">Fotos 1 </a> &nbsp; &nbsp;
   <a href="bilder/fotos/galerie2.html">Fotos 2 </a> &nbsp; &nbsp;
   <a href="bilder/fotos/urlaub04/galerie.html">Urlaub '04 </a> &nbsp; &nbsp;
   <a href="bilder/fotos/urlaub05/galerie.html">Urlaub '05</a>
</p>

<p align="center"><img src="bilder/gifs/3.gif"></p>

<p align="justify">Hier lerne ich Schritt für Schritt HTML. Das Grundgerüst ist bereits aufgesetzt, grade versuche ich mich am Text. Es kann nicht mehr lange dauern, dann wird hier der erste Link und das erste Bild angezeigt werden. Bis dahin werde ich fleißig die Aufgaben auf dieser Seite ausführen, damit ich bald meine eigene Webseite mit meinem eigenen Inhalt erstellen kann, die von der ganzen Welt betrachtet werden kann.</p>

<p align="right">
    <font size="2">
Dieser Kurs ist Teil von
        <a href="http://www.telien.de" target="_blank" title="Gehe zu Telien"><b>Telien</b></a>
    </font>
</p>

 

4.4 Eigenschaften von Bildern

Eigenschaften von Bildern, du du beim Einfügen eines Bildes immer anfügen solltest, sind folgende vier:

Schlüsselwort

width
height
alt
border

Bedeutung

Breite
Höhe
Alternativ Text
Rahmen

Wenn man den Bildern die Eigenschaften Höhe und Breite mitgibt, setzt der Browser während des Ladens der Seite Platzhalter in der angegeben Größe an die Stelle, wo die Bilder laden sollen. Auf diese Weise kann deine Seite schneller geladen werden. Außerdem sind die Angaben von Höhe und Breite hilfsreich, wenn du ein Bild kleiner oder größer anzeigen lassen möchtest, als es wirklich ist. Die Eigenschaften Höhe und Breite werden in Pixel angegeben.

<img src="bilder/gifs/3.gif" width="80" height="80">

Unser Bild ist 80 Pixel hoch und 80 Pixel breit. Das kannst du herausfinden, wenn du in deinem Explorer mit der rechten Maustaste auf das Bild klickst, auf Eigenschaften gehst und dort die Karteikarte "Dateiinfo" auswählst.

 

Manche Menschen verhindern grundsätzlich das Anzeigen von Bildern im Browser. Deshalb ist die Eigenschaft 'alt' wichtig. Wenn das Bild nicht angezeigt werden kann, erscheint stattdessen dieser Text.

<img src="bilder/gifs/3.gif" width="80" height="80" alt="Blume">

Im Internet Explorer erscheint der Text auch, wenn du mit der Maus über das Bild fährst. Das funktioniert allerdings nicht in allen Browsern. Wenn du einem Bild einen Titel bei Mouseover übergeben möchtest, verwende die Eigenschaft 'title'.

 

Eine weitere Eigenschaft von Bilder ist die Breite eines Rahmens, der sie umgibt. Auch er wird wieder in Pixel gemessen, wobei ein Rahmen von 0 Pixeln nicht zu sehen ist, und ein Rahmen von z. B. 5 Pixeln eher breit ist.

<img src="bilder/gifs/3.gif" width="80" height="80" alt="Blume" border="2">

Blume

4.5 Hintergrundbild

Eine Eigenschaft, die der ganzen Webseite zukommt, ist ein Hintergrundbild. Deshalb muss es im Body-Tag eingefügt werden.

<BODY text="#000000" bgcolor="#FFFFFF" link="#0000FF" vlink="#0000FF" alink="#0000FF" background="bilder/gruen2.jpg">

Das Schlüsselwort ist background und heißt übersetzt "Hintergrund". Als Eigenschaft übergibst du den Pfad von der Seite aus zum Hintergrundbild. Auf der Seite index.html ist das also background="bilder/gruen2.jpg", auf der Seite galerie2.html wäre der Pfad background="../bilder/gruen2.jpg".

 

4.6 Bilder als Links

Manchmal setzt man sich Bilder auf die Webseite, die zu Links werden. Zum Beispiel verlinkt man einen Banner mit einer Webseite, oder einen Button auf seiner Webseite mit einer Unterseite. Button könnten z.B. so aussehen:

Über mich Foto Galerie Pläne Übung Zurück

Speicher diese Button im Ordner bilder/ und lade sie hoch.
Um aus einem Bild ein Link zu machen, schließt man das img-Tag ganz einfach von den anchor-Tags ein. An der Stelle, wo eigentlich der Name des Links ist, erscheint nun ein Bild.

<a href="seiten/uebermich.html"><img src="bilder/but_uebermich.gif" width="89" height="25" alt="&Uuml;ber mich" border="0"></a>


hr

4.7 Übungen

  • Suche dir ein Hintergrundbild aus, speicher es ab und lade es hoch. Füge es auf allen Seiten ein und wähle eine passende Schrift- und Linkfarbe, so dass man alles gut lesen kann.

  • Ersetze das Linkmenü auf der Startseite durch die Button 'Über mich' (seiten/uebermich.html), 'Foto Galerie' (bilder/galerie1.html), 'Pläne' (seiten/vorhaben.html) und 'Übung' (seiten/lektion05.html).

  • Füge auf jeder Seite unter der Überschrift den Zurück-Button zur Startseite ein (außer auf der Startseite selbst).

  • Füge auf den Seiten bilder/galerie1.html, bilder/galerie2.html, bilder/urlaub04/galerie.html und bilder/urlaub05/galerie.html jeweils Textlinks zu den 4 Seiten ein, so dass die ganzen Galerien auf allen Galerieseiten untereinander verlinkt sind.

  • Füge die Bilder urlaub04_1.jpg und urlaub04_2.jpg auf die Seite bilder/urlaub04/galerie.html ein

  • Füge das Bild urlaub05_1.jpg auf die Seite bilder/urlaub05/galerie.html ein und erzähle kurz, wie der Urlaub war.

  • Suche dir weitere Bilder und lade sie hoch. Tu so, als seien es Fotos von dir (was auf den Bildern tatsächlich zu sehen ist, spielt keine Rolle) und verteile sie auf den Seiten bilder/galerie1.html und bilder/galerie2.html, wobei du die Fotos kurz kommentierst.

  • Auf der Seite seiten/vorhaben.html machst du dir Gedanken, über welches Thema du gerne eine Webseite hättest.

  • Verziere deine Seiten mit Bildern aus dem Ordner gifs.

« zurück Inhalt | Fragen       Kurs weiter »
Layout