« vorheriger Beitrag  · nächster Beitrag »

01.11.11 · 00:05 Uhr

HTML und die Darstellung von Inhalten im Internet

Kategorie: Technik  ·  Kommentare: 19

Heute soll es einmal um ein Thema gehen, mit dem ein Großteil der Bevölkerung (und 100% der Leser dieses Blogs) regelmäßig zu tun haben, über das sich vermutlich aber nur wenige Gedanken machen. Tatsächlich ist es jetzt gerade beim Lesen dieses Beitrags von Bedeutung, nämlich die Frage, wie Inhalte im Internet überhaupt dargestellt werden können. Mittlerweile gibt es dafür zwar verschiedene Möglichkeiten, aber ich möchte mich auf eine der ursprünglichsten Varianten beschränken: die Darstellung mit Hilfe der Auszeichnungssprache HTML.^*

_{^*Ich hoffe, hier wenigstens dem ein oder anderen Leser noch etwas Neues erzählen zu können. Sollte dies tatsächlich der Fall sein, so mögen sich doch bitte einmal einige der so neu Informierten in den Kommentaren melden, damit ich einmal einen kleinen Überblick darüber bekomme, wie denn so die Wissensverteilung unter den Lesern ist.}

HTML ist ein Akronym für Hyptertext Markup Language und bezeichnet eine sogenannte Auszeichnungssprache. Auszeichnungssprachen fanden ursprünglich im Umfeld der Typografie Anwendung und wurden benutzt, um besondere textliche Hervorhebungen wie Fett- oder Kursivdruck im Originaltext für den späteren Druck zu markieren. Später entstanden insbesondere im IT-Umfeld verschiedene Methoden, um den Inhalt von Dokumenten zu beschreiben, welche heutzutage im Allgemeinen unter dem Begriff Auszeichnungssprache zusammengefasst werden. Insbesondere HTML ist unter diesen Sprachen sehr weit verbreitet, da es genutzt wird, um einen Großteil der Websites im Internet zu beschreiben. Eine Auszeichnungssprache an sich ist erst einmal eine vollkommen passive Sache. Sie dient wie gesagt dazu, ein bestimmtes Format näher zu beschreiben; das müssen auch nicht zwangsläufig Texte sein, da praktisch jede Information mit einer Auszeichnungssprache notiert werden kann. Nutzbar wird die so gespeicherte Information aber erst, wenn sie durch ein wie auch immer geartetes Programm ausgewertet wird - im Falle von HTML wäre das etwa der Webbrowser, der ein HTML-Dokument aus dem Internet herunterlädt und dann in der durch den Autoren des Dokumentes gewünschten Form darstellt (das funktioniert allerdings nicht immer ganz so, wie es soll, insbesondere dann, wenn ein Auszeichnungsformat durch verschiedene Programme unterschiedlich interpretiert wird, wie es etwa bei Webbrowsern der Fall ist). Die Kombination aus Sprache und interpretierendem Programm ermöglicht also die vollständige Nutzung der Daten. Wie ein Programm zur Auswertung einer Auszeichnungssprache funktioniert, werden wir ein andermal betrachten (nämlich dann, wenn es um die Funktionsweise von Parsern geht) - hier möchte ich dagegen die eingangs erwähnte Sprache HTML näher vorstellen und beschreiben, wie man damit eine Website aufbauen kann.

Die folgenden Ausführungen können Interessierte übrigens direkt nachahmen; dazu reicht es, in einem beliebigen einfachen Texteditor (Notepad, Wordpad oder ähnliches - Microsoft Word ist hier nicht unbedingt geeignet) eine neue Datei anzulegen und diese unter einem beliebigen Namen mit der Dateiendung .html abzuspeichern. Öffnet man diese Datei im Anschluss per Doppelklick, sollte sich der entsprechend dargestellte Inhalt im Standardbrowser zeigen (ich habe ja die Hoffnung, dass wenigstens der ein oder andere das hier geschriebene direkt mit ausprobiert).

Die Auszeichnungssprache HTML folgt einem bestimmten Schema. Hierbei wird der darzustellende Text direkt in eine Datei geschrieben; zusätzlich kann er aber auch noch durch sogenannte Tags, also Markierungen um bestimmte Formatierungsinformationen (fett, kursiv usw.) angereichert oder (ebenfalls durch Tags) strukturiert werden. Aber fangen wir von vorne an.

Das einfachste aller HTML-Dokumente besteht direkt aus dem Text, den es repräsentieren soll; der Browser wird dann auch nichts weiter tun, als das Dokument auf die denkbar einfachste aller Möglichkeiten darzustellen, ähnlich einem ganz einfachen Texteditor (nur natürlich ohne die Bearbeitungsfunktionalität). Der folgende Beispieltext (gern auch als HTML-Code bezeichnet) in ein HTML-Dokument geschrieben wäre demzufolge die einfachste Art von Webpage überhaupt:

Ich lese gern Scienceblogs.de

Nun trifft man derartige Seiten im Internet natürlich höchst selten an; für gewöhnlich wird der Text einer Website auf die ein oder andere Art strukturiert und formatiert (also in der optischen Darstellung modifiziert) sein. Beides geschieht mit Hilfe sogenannter Tags, genauer: mit Hilfe von Tag-Paaren, bestehend aus Start-Tag und End-Tag. Ein Start-Tag besteht dabei immer aus einem von gewinkelten Klammern eingeschlossenen Bezeichner (und einer Menge von Eigenschaften, dazu aber mehr), also zum Beispiel <b>; das dazugehörige End-Tag sieht genauso aus, nur mit einem zusätzlichen Slash hinter der öffnenden Klammer, also etwa </b>. Die möglichen Bezeichner in den Klammern sind mit ihrer Bedeutung durch den HTML-Standard, einer formalen Spezifikation unter Federführung des W3C, mehr oder weniger vorgegeben, wobei jedoch leider viele Browser eigene Elemente eingeführt haben. Zwischen dem Start- und End-Tag werden die zu strukturierenden oder formatierenden Textbestandteile geschrieben, wobei diese wiederum Tags enthalten können und so weiter. Das beispielhaft genannte Tag-Paar mit einem b sorgt etwa dafür, dass der eingeschlossene Text fett hervorgehoben wird; nehmen wir also unser Beispiel von oben und schreiben

Ich lese <b>gern</b> Scienceblogs.de

so erhalten wir (probiert es aus) als Darstellung im Browser:

  Ich lese gern Scienceblogs.de

Die Tags zur Text-Formatierung haben übrigens oft deskriptiven Charakter, das heißt anstatt eine genaue Formatierung vorzugeben, wird notiert, was ein Text darstellen soll. Bestes Beispiel hierfür sind etwa Überschriften; anstatt ein Textelement als Fett und in einer größeren Schriftgröße zu markieren, wird es lediglich als Überschrift getaggt, etwa so (h1 ist das Tag für Hauptüberschriften):

<h1>Ich lese gern Scienceblogs.de</h1>

Der Browser erledigt dann den Rest und stellt den Text entsprechend formatiert dar:

Ich lese gern Scienceblogs.de

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):

<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

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:

Ich lese gern <a href="http://scienceblogs.de/">SB.de</a>

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.

Autor: Marcus Frenkel· 19 Kommentare· Permalink· Trackback-URL

Tags: HTML· Website