Links, Zeilenumbrüche und Linien
Bislang sind wir noch weit davon entfernt mit unserem Ergebnis zufrieden zu sein. Ich denke
niemand möchte sich selbst, oder wen auch immer mit so einer Seite im Internet präsentieren.
Das ist höchstens etwas zur Veröffentlichung von Rezepten oder so :-). Also stramm weiter im Text:
Links - die ersten aktiven Elemente
Links (eigentlich
Hyperlinks) waren die ersten
aktiven Elemente im WWW. Erst sie machen das
Web zu dem, was es ist.
Links verweisen von einer Seite
zu einer anderen Seite des selben Projektes (so wie die Links hier
in der linken Navigatiensleiste), oder zu Seiten eines ganz
anderen Internetauftritts.(
Beispiel).
Der Einbau von Links ist ziemlich simpel. Wie Ihr Euch sicher schon gedacht habt, muss der Link in dafür
gedachte TAGs eingebettet werden. Hier ist es das <a> - TAG. Hier ein Beispiel:
Quellcode:
<a
href="http://www.compiclub.de"
title="Beispiel"
target="_blank">
Compiclub.de
</a>
So viel Code für so wenig Ausgabe? Nun, das muss aber so sein Ich erkläre Ech Mal die
Bedeutung
der Einzelnen Bestandteile des Link-Tags im Einzelnen:
- <a leitet mit dem öffnenden Tag den Link ein
- href="http://www.compiclub.de" Zeigt an wohin die Reise gehen soll, also das Ziel des Links
- title="Beispiellink" Zeigt einen Titel an, wenn der Anwender mit der Maus über den Link fährt - das mögen die Suchmaschinen! (probierts selbst)
- target="_blank" sorgt dafür, dass die verlinkte Website in einem neuen Browserfenster aufgeht. So wird der Besucher nicht von Eurer Seite weggeführt.
- > Schließt den öffnenden Link-Tag. Diese Klammer fehlte ja noch, ist Euch das aufgefallen? :-)
- </a> Rundet die Sache ab und schließt unseren Link-TAG
- das, was zwischen den Tags steht ist das, was der Betrachter Eurer Webseite tatsächlich sieht, der Rest bleibt ihm verborgen. In unserem Beispiel ist es der Text Compiclub.de
Es gibt also nicht nur öffnende und schließende Tags. Viele Tags haben innnerhalb des öffnenden Tags (niemals im schließenden!) so genannte
ATTRIBUTE.
Die Attribute beeinflussen die Eigenschaften des Tags. Manche von ihnen haben Auswirkungen auf die Erscheinung von Elementen, die von diesen Tags umschlossen sind.
Andere sind
zwingend erforderlich, wie das
href=" "-Attribut in unserem Link. Ohne diesen wäre es ja auch kein Link, denn er "wüsste" ja gar nicht
auf welche Seite hier verwiesen wird.
Bei vielen Elementen finden wir
innerhalb des öffnenden TAGs so genannte
ATTRIBUTE, denen wiederrum bestimmte
WERTE zugewiesen sind.
Die Attribute verleihen den Tags zusätzliche nützliche Eigenschaften. Manchmal sind sie aber auch unbedingt erforderlich. Wie das Attribut "href= " im
<a>-Tag
Zeilenumbrüche
Wie Ihr gesehen habt, nutzt der Browser bei der Interprätation unseres
Projektes
die volle Breite des gerade geöffneten Fensters. Spielt mal etwas mit der Browser-Fenstergröße und Ihr werdet sehen was ich meine.
Der Browser setzt den Zeilenumbruch immer dort, wo das Fenster gerade aufhört. Es gibt
eine Möglichkeit ihm verständlich zu machen wo er die Zeile umbrechen soll.
Und zwar auch dann, wenn ihm das ganze Browserfenster zur Verfügung steht.
Das geht mit dem <br>-TAG. Dieses TAG ist eines von denen, die kein schließendes Tag benötigen. Setzt es überall dort ein, wo Ihr einen Zeilenumbruch haben wollt.
Ein Beispiel:
Quellcode:
Jetzt kommt ein <br> Zeilenumbruch
Browservorschau:
Jetzt kommt ein
Zeilenumbruch
Ziemlich einfach, oder? Seid bitte stets sparsam mit der Verwendung des Zeilenumbruch-Tags. Wir werden weitere, viel schönere Möglichkeiten
lernen wie man den Text mit Umbrüchen und allem PiPaPo formatiert. Aber manchmal ist eben auch so ein <br> ganz nützlich.
Wenn Ihr später
diese Seite ganz leicht wiederfinden wollt, empfehle ich Euch das Anlegen von
Favoriten bei Mr-Wong!
So stehen Euch alle Lesezeichen zu den wichtigsten
Compiclub-Lektionen an jedem Internetrechner parat. Ihr findet auf jeder
Compiclub-Seite unten links das Mister-Wong-Logo. Mit nur zwei Klicks ist
die Seite dann abgespeichert. Ist sehr praktisch - ich nutze es ebenfalls.
Horizontale Linien
Hier lernen wir einen weiteren Vertreter der Tags, die kein schließendes Tag benötigen.
Das <hr>-TAG.
Dieses erzeugt
eine horizontale Linie quer durch den ganzen Inhalt und
strukturiert ihn damit ein wenig.
Es kann ebenfalls mit
Attributen "gefüttert" werden, aber dazu später mehr.
Quellcode:
eine Linie <hr> ist schnell erzeugt
Browservorschau:
eine Linie
ist schnell erzeugt
So eine horizontale Linie ist im Gegensatz zum <br>-TAG bis heute
sehr viel in Gebrauch. Hier kann ein
sehr schönes Style-Element mit sehr
wenig Einsatz erzeugt werden. Wenige Zeichen -
große Wirkung!
Sollen wir das gerade gelernte an unserem Projekt ausprobieren? Klicke auf Weiter und es geht auch schon direkt los!
<<< zurück II weiter >>>
