Neben der reinen Formatierung des Textes ist es üblich, diesen auch zusätzlich noch zu strukturieren. Ein HTML-Dokument wird dabei traditionell in einen Kopfteil mit allgemeinen Informationen über das Dokument und einen Körper mit dem eigentlichen Inhalt unterteilt. Der Inhalt kann wiederum in Überschriften, Absätze, Listen, Tabellen und ähnliche Elemente unterteilt werden, für die es jeweils eigene Tags gibt. Eine einfache vollständig strukturierte HTML-Datei könnte etwa so aussehen (das umschließende html-Tag markiert den Inhalt als HTML):
<head>
<title>Einführung in HTML</title>
</head>
<body>
<h1>Darum mag ich Scienceblogs:</h1>
<p>
Ich lese <b>gern</b> Scienceblogs.de, da es
<ul>
<li><i>informativ</i></li>
<li><i>spannend und</i></li>
<li><i>gut geschrieben</i></li>
</ul> ist.
</p>
</body>
</html>
Eine kurze Erklärung der Elemente: mit head und body werden der Kopfteil und der Körper des HTML-Dokumentes markiert; mit Hilfe des title-Tags wird der im Browser angezeigte Titel der Webpage notiert; das p-Tag beschreibt einen Absatz im Dokument. Mit dem Tag ul wird schließlich eine (ungeordnete) Liste und mit li ein einzelnes Element in der Liste beschrieben (welches mit Hilfe des i-Tags außerdem kursiv dargestellt wird). Der Teil des HTML-Körpers würde demzufolge etwa so aussehen:
Darum mag ich Scienceblogs:
Ich lese gern Scienceblogs.de, da es
- informativ
- spannend und
- gut geschrieben
ist.
Wer mehr über die einzelnen HTML-Elemente erfahren möchte, ist auf de.selfhtml.org gut aufgehoben. Zudem bieten viele Browser die Möglichkeit, den HTML-Text einer Webpage direkt anzuzeigen (normalerweise sieht man ja nur die fertig formatierte Struktur). Wer sich dafür interessiert, findet meist im Kontext-Menü (Rechtsklick in einer Webpage) oder allgemeinen Menü (in jedem Browser woanders, meist aber oben links) des Browsers eine entsprechende Option. Die hier vorgestellten Möglichkeiten zur Textformatierung und -strukturierung können übrigens nicht nur durch die Ersteller einer Website genutzt werden; auch die Anwender einer Website können sich manchmal der Tags bedienen, etwa wenn sie Kommentare unter Artikel schreiben möchten (ob das funktioniert, hängt in der Regel vom eingesetzten System ab – auf Scieneblogs funktioniert es).
Wäre man nur auf die Tags zur Strukturierung einer Website angewiesen, würde man ziemlich viele von ihnen benötigen, um alle möglichen Formatierungen auszudrücken. Aus diesem Grund ist es möglich, bestimmte Tags mit Eigenschaften zu versehen, die weiteren Einfluss auf die (inhaltliche und optische) Darstellung nehmen. Die Eigenschaft eines Tags wird im Start-Tag hinter der Tag-Bezeichnung in der Form eigenschaft=wert notiert, wobei die verfügbaren Eigenschaften wiederum vom Tag abhängen. Ein relativ häufig benutztes Tag hierfür dürfte der Anker zur Markierung von Hyperlinks sein. Das Tag a (für anchor) besitzt die mögliche Eigenschaft href, durch welche das Ziel eines Verweises (also etwa ein Link) angegeben werden kann. Auf unser Eingangs-Beispiel bezogen, könnte man also folgendes schreiben:
Damit hätte man einen einfachen Hyperlink auf eine Adresse im Internet definiert, der auf der Webpage wie folgend aussehen würde:
Ich lese gern SB.de
Mit den hier vorgestellten Tags ist es möglich, einfache Websites zu gestalten. Größere optische Änderungen an der Standard-Darstellung können sich jedoch mit dieser Methode leider ziemlich aufwändig gestalten, da jedes Tag separat mit Formatierungs-Eigenschaften versehen werden müsste. Um die Gestaltung von Websites weiter zu vereinfachen, wurden daher die Cascading Style Sheets (kurz CSS) eingeführt, mit denen die Formatierung weitaus besser gestaltet werden kann; darüber werde ich aber im nächsten Artikel etwas erzählen.gern
Kommentare (24)