1. HTML als Textformatierungssprache

1.4 Html-Tags mit Attributen

Hyperlinks mit <a href="...">

Die Vorlesung heißt ja Web-Engineering, nicht Page-Engineering. Und eine ganz entscheidendes Eigenschaft des Webs ja, dass verschiedene Dokumente verknüpft sind, beispielsweise durch Hyperlinks zu schaffen. In HTML geht das mit dem <a>-Tag. Das <a> steht für anchor, Englisch für Anker, weil hier eben Querverweise verankert werden.

Links:
<ol>
    <li><a href="index.html">Übersichtsseite des Kurses</a></li>
    <li><a href="../index.html">Dominik Scheders Homepage an der HSZG</a></li>
    <li><a href="http://www.hszg.de">Startseite der HSZG</a></li>
</ol>                        

Wir betrachten nun <a>-Tags etwas genauer, weil hier ein neues Konzept zum ersten Mal auftaucht. Bisher hatten unsere HTML-Dokumente, zumindest im body, die folgende Struktur:

HTMLElement ::= StartTag Content EndTag
StartTag    ::= '<'  TagName '>'
EndTag      ::= '</' TagName '>' 

Die Struktur eines <a>-Tags ist komplizierter: <a href=target>. Das ist nur logisch: der Inhalt des Tags, also was zwischen Start- und Endtag steht, erscheint auf dem Bildschirm; für Hyperlinks brauchen wir aber noch weitere Information, die nicht auf dem Bildschirm dargestellt werden soll: das Ziel des Hyperlinks. In HTML-Sprech sagen wir: das <a>-Tag oben in Zeile 4 hat ein Attribut. Der Name des Attributes ist href; der Wert des Attributs ist der String "../index.html".

Ganz allgemein gesagt: Wenn im HTML-Quelltext <a href=target>Inhalt</a> steht, dann wird Inhalt auf der Seite dargestellt; der übliche Blauton und dass es plötzlich unterstrichen erscheint, wenn wir mit der Maus drüberfahren, sagt uns Dies ist ein Link!. Wenn man draufklickt, leitet der Browser uns zum target weiter. Das target ist entweder

• ein relativer Link, wie "../index.html", der den Ort des Ziels relativ zu dem jetzigen Dokument anzeigt, oder
• ein absoluter Link wie "http://www.hszg.de"
• ob ein absoluter lokaler Pfad wie "/Users/dominik/teaching/2022-herbst-scheder-lehre/WE-I" als relativer oder absoluter Pfad gelten sollte, darüber will ich jetzt nicht nachdenken.

Wichtig ist noch, dass man mit <a> auch an bestimmte Stellen in einem Dokument springen kann:

<p>
  <a href="../../TI-2/lecture-notes/05-04-LL1-grammars.html#grammar-aaaaabb">
    Theoretische Informatik, Abschnitt 5.4, Übung 5.4.4
  </a>
</p>

Bilder mit <img src="...">

Ein weiteres wichtiges Tag, das ein Attribut benötigt, ist <img>. Damit können Sie Bilder in Ihre HTML-Seite einbinden:

<img src="../AuK/logo.png" width="50%">  

Ein <img> benötigt natürlich immer ein Attribut: den Link zur Bilddatei per src=target. In diesem Beispiel hier ist das ein relativer Link ../../AuK/logo.png; natürlich können Sie auch absolute Links verwenden, um Bilder von Drittseiten anzuzeigen (dann müssen Sie aber eventuell auf Copyright etc. achten).

Beachten Sie auch das zweite Attribut width="50%">. Fehlt es, wird das Bild eventuell im Originalformat angezeigt, in diesem Fall also zu groß. Beachten Sie, dass sich die Prozentzahl 50% weder die Breite des Bildes in der Datei noch auf die Bildschirmbreite bezieht, sondern auf die Seite des HTML-Elements, das das Bild enthält.

Dies ist das HTML-Element, das das Bildelement enthält, also das Parent-Element.

<a href="pfad-zur-verlinkten-Datei">Text, der als klickbarer Link angezeigt wird</a>