Linkvormatierungen
Verlinkungen (alias Hyperlinks) sind eine der wichtigsten Dinge im World Wide Web. Mit ihnen kann man viele Dinge machen, z.B. Linktausche eingehen, zu anderen Seiten verweisen und eine strukturierte Website einrichten. Außerdem werden Seiten wie Google gerne auf gut strukturierte Links aufmerksam und beachten diese besonders.
>> Seiten verlinken
>> interne und externe Verlinkungn
>> E-Mail Links
>> Download Links
>> Textmarken
>> Bilder einfügen
>> Bilder editieren
>> Bilder ausrichen
>> Bilder verlinken
>> Listen
>> Tabellen
Nun viel Spaß mit dem Tutorial. Alle Dinge die in diesem Tutorial erklärt werden, beziehen sich auf den Body-Bereich
Um das Verlinken zu testen legen wir in unserem Verzeichnis als erstes die Datei „link.html“ an. Auf diese werden wir jetzt in unserem Hauptdokument verlinken. Geben wir zu erst den Verlinkungstag ein:
<a></a>
Mit diesem Code lässt sich noch nicht viel anfangen, da man nicht einstellen kann, wohin der Link geht.
<a href=“link.html“>Linktext</a>
Nun taucht in der HTML-Datei der Text “Linktext“ auf, der sollte blau sein und unterstrichen und anklickbar sein. Testen sie es aus. Sie werden auf der Linkseite landen.
<a href=“link.html“ title=“Linkbeschreibung“>Linktext</a>
Fährt man nun über den Linktext so erkennt man, das unter dem Link beim drüber fahren ein Feld mit dem Text „Linkbeschreibung“ auftaucht.
<a href=“link.html“ title=“Linkbeschreibung“ target=“_blank“>Linktext</a>
Nun probieren wir den Link erneut aus, wir sehen, dass er sich in einem neuen Fenster bzw. Tab öffnet (Achtung: Dies ist nur bei Framesets valide)
Interne und externe Verlinkungen
Natürlich gibt es in HTML nicht nur die Möglichkeit, interne Seiten wie im Teil „Seiten verlinken“ zu verlinken, sondern auch externe, übergeordnete, untergeordnete Seiten. Fangen wir mit dem Externen Verlinken an:
<a href=“http://www.google.de“>Google</a>
Wie sie sehen wurde auf Google verlinkt. Externe Links können nur mit http:// geöffnet werden, sonst sucht es die Datei im Verzeichnis
<a href=“ordner/seite.html“>LINK</a>
Durch diese Anzeige, wird auf eine Seite im Unterverzeichnis verlinkt.
<a href=“../seite.htm“>LINK</a>
Durch diese Anzeige (..) erreichen sie eine Datei in einem übergeordneten Ordner/ Verzeichnis.
<a href=“/Ordner/seite.html“>LINK</a>
Beginnt die URL des Links mit einem Schrägstrich, so fängt der Browser im Hautpverzeichnis an zu suchen
Diese Dinge lassen sich beliebig miteinander kombinieren, z.B.:
<a href=“/Ordner/../seite.htm“>LINK</a>
Überall im Internet kann man sich Dateien downloaden, mit Hilfe von HTML und dem Tag a erzeugen sie ganz einfach solche Downloadlinks.
<a href=“zipdatei.zip“>Download</a>
Erstellen sie nun ein Zip-Verzeichnis mit dem Namen zipdatei.zip. Danach öffnen sie die HTML-Datei und öffnen den Link. Der Brwoser wird sie fragen, was er mit der Datei tun soll.
Man kann Dateien in fast jedem Format downloaden, so kann man .exe, .zip, .rar, .doc, .xls, .bat und noch viele mehr downloaden. Eigentlich kann man jede Datei im Internet downloaden. Je nach Browserkonfiguration werden manche Dateien direkt im Browser geöffnet, z.B. .txt oder .pdf.
Beim Anbieten von Dateien sollten sie unbedingt darauf achten, das sie die Erlaubnis haben, die Dateien zu veröffentlichen.
Mit Textmarken (auch Anker genannt) kann man innerhalb von HTML-Dateien Links einrichten, die auf eine jeweilige Stelle im Text verlinken.
Richten wir dazu zuerst eine HTML-Seite mit viel Text an und unterteilen sie in Absätze. Nun wollen wir versuchen, das man durch ein oberes Inhaltsverzeichnis an jeden Absatzanfang verlinkt wird. Suchen sie sich am Besten einen Text mit 5 Absätzen, dann können sie dieses Tutroial am Besten ausführen.
<p><a id=“Anker1“></a>Text des ersten Absatzes […]</p>
<p><a id=“Anker2“></a>Text des zweiten Absatzes […]</p>
<p><a id=“Anker3“></a>Text des dritten Absatzes […]</p>
<p><a id=“Anker4“></a>Text des vierten Absatzes […]</p>
<p><a id=“Anker5“></a>Text des fünften Absatzes […]</p>
Nun haben wir unsere Anker gesetzt auf die später das Inhaltsverzeichnis oben verlinken soll. Jetzt brauchen wir kein href oder title mehr, das Attribut name genügt.
<p>
<a href=“#Anker1“>Zu Absatz 1</a><br />
<a href=“#Anker2“>Zu Absatz 2</a><br />
<a href=“#Anker3“>Zu Absatz 3</a><br />
<a href=“#Anker4“>Zu Absatz 4</a><br />
<a href=“#Anker5“>Zu Absatz 5</a><br />
</p>
Nun haben wir unser Inhaltsverzeichnis eingerichtet. Klickt man nun auf einen Link, so wird man zu dem Anker geschoben. Das Linkziel beginnt mit # und endet mit dem Namen der Endmarke.
<a href=“seite.html#Anker“>Zur externen Textmarke</a>
Man kann auch auf eine externe Textmarke verweisen, das geht mit der Seitenadresse gefolgt von einem Doppelkreuz und dem Ankernamen.
Um eine Homepage ansehnlich zu gestalten, reicht es nicht einfach nur Text zu schreiben und ein paar Verlinkungen einzufügen. Erst Bilder machen die Homepage schöner und ansprechender für die Nutzer. Bilder können dazu genutzt werden, einzelne Textstellen mit einem Bild zu erklären.
Ein Bild kann mit dem img-Tag einfügen, da dieser keinen Inhalt enthält, wird er nach den Regeln von XHTML so dargestellt:
<img />
Nun sehen wir noch kein Bild in der Datei. Dafür fehlt das Attribut src. Der Wert dieses Attributs ist die Adresse des Bildes (ähnlich der Homepageadressen Kapitel 2)
<img src=“bild.jpg“ />
Nun sieht man im Dokument ein Bild. Es wird ohne irgendwelche Einstellungen dargestellt.
<img src=“bild.jpg“ alt="Beschreibung" />
Nun wurde ein weiteres Pflichtattribut hinzugefügt. alt wird angezeigt, wenn das Bild nicht lädt. (Achtung: ohne alt ist das Dokument invalid)
Im vorherigen Teil haben wir nur die Größe eingestellt, aber es gibt noch viel mehr Funktionen als diese wenigen Funktionen:
<img src=“bild.jpg“ alt="" border=“2px“ />
Nun sieht man um das Bild einen schwarzen Rand von 2px-Dicke. Meistens sehen diese Ränder aber dumm aus und sind daher nicht so geeignet.
<img src=“bild.jpg“ alt="" width="400" height="300" />
Das Bild wurde nun auf eine Größe 400*300 verkleinert bzw. vergrößert. width steht für die Breite, height für die Höhe
<img src=“bild.jpg“ title=”Ein Bild” />
Mit dem Attribut title legt man einen Text fest, der erscheint wenn man mit dem Cursor über das Bild fährt. Man kann alle Attribute miteinander in einen HTML-Tag packen
Die ersten Erklärungen in diesem Tutorial sind veraltet. Wir haben sie nur der Vollständigkeit halber mit in die Beschreibung genommen. Bitte erstellen sie zu erst einen Absatz mit HTML (Kapitel 1).
<p><img src=“bild.jpg“ align=“right” />Text des Absatzes</p>
Wenn sie dieses Ergebnis nun im Browser testen, ist das Bild rechts und der Text links. Sie könnnen das Attribut align mit den Werten left, center und right füllen. (invalid)
<p><img src=“bild.jpg“ align=“right” vspace=“50“ hspace=“20“ />Text des Absatzes</p>
Mit den Attributen vspace und hspace können sie das Bild noch genauer ausrichten. (invalid)
Nun kommen wir zu der besseren Variante um Bilder in Absätzen auszurichten. Mit CSS.
<p><img src=“bild.jpg“ style=“float: right;“ />Text des Absatzes</p>
Mit der Eingabe des Attributs style, in dessen Anführungszeichen immer CSS-Code steht kann man alles einstellen. Mit dem CSS-Weert float (Gegenstück zum HTML-Attribut align) können sie das Bild mit den Werten left, center und right ausrichen.
<p><img src=“bild.jpg“ style=float: right; margin-left: 40px; margin-top: 20px;” />Text des Absatzes</p>
Nun können sie mit den CSS-Attributen margin-left (Abstand zwischen Text und Bild) und margin-top (Abstand nach oben) das Bild genauer ausrichten.
Um ein Bild zu verlinken, muss man einfach nur einen <a>-Tag um das Bild setzen, ähnlich wie beim Text verlinken:
<a href=“http://www.N-for-S.de.tl“><img src=”bild.jpg” /></a>
Wenn man dieses Ergebnis nun im Browser testet, erscheint ein nerviger blauer Rand um das Bild, diesen kann man jedoch ganz einfach entfernen:
<a href=“http://www.N-for-S.de.tl“><img src=”bild.jpg” border=”0” /></a>
Testen wir dieses Ergebnis im Browser erneut sehen wir, dass das Bild keinen Rand mehr hat und trotzdem verlinkt wird. Man kann ein Bild mit allen Regeln des Verlinkens (siehe Kapitel 2) verlinken. Wenn man aber mehrere Links auf ein Bild legen will, braucht man eine Imagemap. Dies geht so:
<img src=“bild.jpg“ usemap=“#bild“ />
<map id=“bild“ name=“bild“>
<area shape=“circ“ coord=“100, 50, 50“ href=”http://www.N-for-S.de.tl” />
</map>
Über den Tag area innerhalb des Tags map wird die Ausrichtung eingegeben über die das Bild auf den Link verlinkt. Der erste Wert ist die x-Koordinate, der zweite die y-Koordinate und der dritte der Radius des Kreises. Man kann außerdem Rechteckte und Polygone einfügen:
<area shape=“rect“ coord=“50, 75, 200, 275“ href=“http://www.N-for-S.de.tl” />
<area shape=“poly“ coord=“50, 75, 100, 275, 200, 275“ href=“http://www.N-for-S.de.tl” />
Bei dem Rechteck (erster Code) sind die ersten beiden Werte die Position der linken-oberen Ecke, die darauf folgenden zwei der der rechten Unteren. Beim Polygon (zweiter Codeabschnitt) ergeben alle zwei Zahlen eine Koordinate, dazwischen werden Geraden erstellt.
Listen
Das Prinzip von Listen ist sehr einfach und schnell zu verstehen. So wird eine Liste erstellt:Geordnet (nummeriert):
<ol>
<li>Erstes Element</li>
<li>Zweites Element</li>
</ol>
Ungeordnet (Punkte):
<ul>
<li>Erstes Element</li>
<li>Zweites Element</li>
</ul>
So sehen die Listen aus:
| Geordnet | Ungeordnet |
|
|
Allgemein gilt also, dass ul eine ungeordnete Liste darstellt und ol eine geordnete Liste. Durch das Tag li werden die einzelnen Listenelemente ausgezeichnet.
Listen verschachteln:
Natürlich kann man Listen auch nach seinen Wünschen verschachteln. Um es ihnen zu verdeutlichen, arbeiten wir nun mit einer ungeordneten Liste, es ist natürlich auch mit einer geordneten Liste möglich:
<ul>
<li>Erstes Element</li>
<ul>
<li>Unterelement</li>
<li>Unterelement 2</li>
</ul>
<li>Zweites Element</li>
</ul>
Wir sehen, dass in die Liste ul einfach eine weitere Liste eingefügt wurde. Die Unterbegriffe werden dann als Unterpunkte des hervorgegangenen Listenelements angezeigt. Das sieht dann so aus:
- Erstes Element
- Unterelement
- Unterelement 2
- Zweites Element
Listen können beliebig tief verschachtelt werden, zur Übersicht sollte man aber mehr als 3 Ebenen vermeiden
Listen verschönern
Listen können beliebig verändert werden, auf jeden Fall vom Style her. Da es bei einer geordneten Liste Zahlen gibt, sollten sie diese aber nur auf ungeordnete Listen anwenden. Wir beginnen als Erstes wieder mit einer normalen Liste, der wir aber das style-Attribut hinzufügen:
<ul style="">
<li>Erstes Element</li>
<li>Zweites Element</li>
</ul>
Nun fügen wir dem Attribut style die CSS-Eigenschaft list-style-type und ordnen diesem den Wert square zu:
<ul style="list-style-type: square;">
<li>Erstes Element</li>
<li>Zweites Element</li>
</ul>
Schauen wir uns einmal das Ergebnis an:
- Erstes Element
- Zweites Element
Listen eignen sich sehr schön zur Gliederung einer Navigation. Die benötigten Infos um sie zu erstellen finden sie im vorhergegangenen Link.
Tabellen
Tabellen sind eine einfache Art, um Daten übersichtlich und ordentlich zu gliedern. Dies ist auch mit HTML möglich. Im folgenden Tutorial erstellen wir eine einfach zweispaltige Tabelle mit drei Zeilen.<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Das ist der allgemeine Aufbau einer Tabelle. Nun fügen wir ihnen die Zeilen hinzu die durch tr (table row = Tabellenzeile) gegliedert werden:
<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
Nun ist die Tabelle in Zeilen gegliedert, fügen wir nun die einzelnen Zellen ein, das geht im thead mit th (Tabellenkopfzelle) oder td (Tabellenzelle)
<table>
<thead>
<tr>
<th>Kopfzeile 1</th>
<th>Kopfzeile 2</th>
<th>Kopfzeile 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zelle 1</td>
<td>Zelle 2</td>
<td>Zelle 3</td>
</tr>
<tr>
<td>Zelle 4</td>
<td>Zelle 5</td>
<td>Zelle 6</td>
</tr>
</tbody>
</table>