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

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:

Ich lese gern <a href=”https://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.gern

Kommentare (24)

  1. #1 Martin
    November 1, 2011

    Sehr schöner Einstieg in HTML. Für mich ist das Thema neu und sehr interessant. Gern mehr dazu.

  2. #2 12stein
    November 1, 2011

    Freu mich schon auf den naechsten Artikel , Java-Script ? 🙂

  3. #3 Marcus Frenkel
    November 1, 2011

    @12stein
    Nein, eher nicht. Aber gute Idee, das kann ich auch noch irgendwann bringen, danke. 😉

  4. #4 Leon
    November 1, 2011

    Leider keine gute Einführung, da sie den gleichen Fehler macht, wie so viele andere auch, nämlich HTML als Layoutsprache vorzustellen.

    Gerade die als Beispiel benutzen B- und I-Tags widersprechen dem Zweck von HTML, da sie keine semantische Aussage darstellen. STRONG- und EM-Tags wären hier das richtige gewesen.

    HTML ist eben KEINE Sprache um Layouts und Aussehen von Dokumenten zu beschreiben, sondern semantische Struktur zu kennzeichnen. Für das Aussehen gibt es CSS.

  5. #5 Marcus Frenkel
    November 1, 2011

    @Leon
    Ich erlaube, mich selber zu zitieren:

    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.

    Und weiter:

    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.

    CSS wird also noch kommen. Und initial war HTML eine Sprache zum Beschreiben des Layouts. Dass es das jetzt nicht mehr ist, steht ja auf einem ganz anderen Blatt.

    Übrigens geht es in den Artikeln hier nicht darum, dass die Leser HTML lernen – sie sollen eher erfahren, was es überhaupt ist. Und dazu ist nun einmal die geschichtliche Entwicklung von Interesse.

  6. #6 Wiesodenn
    November 1, 2011

    Ich bin auf HTML gestossen als ich in Blogs kommentierte und z. B. zitieren wollte.

    Ich habe diese Befehlsübersicht gefunden und die hilft mir doch nicht schlecht.

    Das genügt mir, betreibe ja keine Webseite.

  7. #7 Manea-K
    November 1, 2011

    Meld! Schöner Text. Überhaupt gefällt mir Dein Blog sehr gut. Bitte weiter so.

  8. #8 A.P.
    November 1, 2011

    Tja, mh, eine mehr oder weniger praktische Einführung in HTML und ein wissenschaftliches Blog – wie passt das zusammen? Wer hier neues gelernt hat, hat vermutlich vor der Lektüre gar nichts gewusst. Insofern ist meine Meinung, dass es keine Fortsetzung bräuchte. Ich finde die Einführung auch nicht gelungen, da die Begriffe irgendwie sehr unpräzise verwendet werden. Für ein HTWK-Seminar mag das reichen…

  9. #9 Marcus Frenkel
    November 2, 2011

    @A.P.
    Wenn Markup Languages Ihrer Meinung nach nicht in den wissenschaftlichen Bereich der Informatik gehören, ist das natürlich Ihr gutes Recht, so zu denken. Dann aber rein Interesse halber eine Frage an Sie: was ist dann “Wissenschaft” im Umfeld der Informatik?

  10. #10 Wb
    November 2, 2011

    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.

    Ergänzend: Man unterscheidet zwischen Seitungsbeschreibung und Auszeichnung, die Mehrschichtigkeit i.p. Stil ist schon angeschrieben worden…

    Macht den Braten aber nicht fett, lädt aber wie gehabt zu jenen Diskussionen ein.

  11. #11 Wb
    November 3, 2011

    Hüstel, ‘Seitenbeschreibungssprachen’ natürlich, prallt aber ohnehin ab, diese Ergänzung, gell?

    Ergänzen kann man hier vielleicht, dass die Auszeichnung, der “Hypertext” bereits bereit stand als sich das ARPA- oder Internet noch nicht durchgesetzt hat. – Die Eigenartigkeiten der schriftlichen Kommunikation (“Am Anfang war das Wort”, meint: “Am Anfang war der persistierte Text – dennoch cool diese biblische Boebachtung) sind quasi mit der Webkommunikation zusammen entwickelt worden, natürlich war (und ist) auch Knuth “irgendwie” dabei.

    MFG
    Wb

  12. #12 Martin
    November 8, 2011

    Leider enthält der obrige Link einen schwerwiegenden Syntaxfehler.

    Richtig lautet er

    Ich lese gern <a href=”https://scienceblogs.de/”>SB.de</a>

  13. #13 Marcus Frenkel
    November 8, 2011

    @Martin
    Na na na, nicht übertreiben. Wie schwerwiegend es ist, darüber lässt sich streiten, immerhin funktioniert der Link meist auch ohne den abschließenden Slash. Außerdem ist es kein Syntax-Fehler, sondern ein Semantik-Fehler.
    Aber danke für den Hinweis, ich habe es korrigiert – man will ja “guten” HTML-Code schreiben…

  14. #14 Martin
    November 8, 2011

    @Marcus ERWISCHT!
    Dieser kleine Fehler ist viel schwerwiegender als zunächst vermutet wird (und so häufig!). Darüber würde es sich lohnen einen eigenen Artikel zu verfassen.

    Betrachten wir beispielsweise die Abfrage
    (“https://meinserver.meinedomain/ich” also telnet auf meinserver Port 80 “GET ich” anstelle von “https://meinserver.meinedomain/ich/” demnach telnet auf meinserver Port 80 “GET ich/”).

    Im ersten Fall weiss der Server nicht, ob unter “ich” ein Ordner gemeint ist und daraus dann die Standard HTML-Datei (meist index.html) zurückgeliefert werden soll, oder ob es sich um eine Datei “ich” handelt, die so, wie sie referenziert wird, zurückgeliefert werden soll.
    Der Server schickt daher eventuell eine Fehlermeldung an den Browser zurück, dass diese Datei nicht gefunden wurde und schlägt die korrekte Adresse vor (ich not found. Try ich/).
    Die meisten Browser folgen dieser Aufforderung automatisch (früher hat man das noch einstellen können) und laden sofort die Seite nach. Man sieht das in den Logfiles des Servers oder wenn man händisch mit telnet anfragt.
    Im Browser erscheint dann auch sofort der fehlende “/”, weil nochmals abgefragt wurde. Eine automatische neuerliche Abfrage sieht auch der HTML Standard ausdrücklich vor, jedoch steht dort auch, dass man das abstellen können sollte …?

    Ich denke nun wird klar wie schlimm das tatsächlich ist. Ein fehlender “/” bewirkt eine doppelte Abfrage und einen Fehlereintrag in der Logdatei, alles das kostet Ressourcen und Bandbreite!
    Schon mancher Server ist nur deswegen in die Knie gegangen (z.B. überall fehlende “/” und doppelte Anfragen). Hier kann durch saubere Programmierung wirklich viel gewonnen werden. Vielleicht ist das einen eigenen Artikel wert?

  15. #15 radicchio
    November 8, 2011

    einfach mal den quelltext anzeigen lassen.

  16. #16 Marcus Frenkel
    November 8, 2011

    @Martin
    Ich weiß schon um die Problematik des fehlenden Slashes hinter URLs. 😉
    Deswegen schrieb ich auch, dass es ohne den Slash funktioniert, da der Normalnutzer das erneute Abfragen der URL als Ordnerpfad nicht mitbekommt (ich weise noch einmal darauf hin, dass dies hier kein Blog für IT-Profis ist 😉 ).
    Und ganz ehrlich: die Ressourcen-“Verschwendung” durch die doppelte Anfrage ist in Zeiten von DSL doch eher gering, vor allem auch im Vergleich mit den vielen Prozessen, die auf einem durchschnittlichen Rechner im Hintergrund laufen und zu Update-Zwecken mit dem Internet kommunizieren. Viel schlimmer finde ich es, wenn eine Website ihre Inhalte lediglich unter der www-Subdomain hält und unter der Hauptdomain keine Inhalte hat.

  17. #17 12stein
    November 8, 2011

    Hallo Marcus , hast du vielleicht eine Ahnung wie man Assembler-Code aus der Programmiersprache Ruby heraus aufruft ?
    Ich habe nach “ruby inline assembler code” geggogelt aber nichst verwertbares gefunden.

  18. #18 Marcus Frenkel
    November 8, 2011

    @12stein
    Die Frage passt zwar nun überhaupt nicht hierher, ich antworte trotzdem einmal darauf (in Zukunft bitte per Mail 😉 ):

    Ruby ist eine interpretierte Sprache, daher ist es meines Wissens nicht möglich, Assembler-Code direkt aus Ruby heraus aufzurufen, da dieser immer Plattform-spezifisch ist (im Gegensatz zum dem Bytecode von interpretierten Sprachen). Dagegen ist es aber möglich, aus Ruby z.B. eine C-Funktion aufzurufen (wie das geht, findet man leicht im Netz), welche dann beliebigen Assembler-Code enthalten kann (da sie ja vorher kompiliert werden muss).

    Ich hoffe, das hilft.

  19. #19 Wb
    November 9, 2011

    Schon mancher Server ist nur deswegen in die Knie gegangen (z.B. überall fehlende “/” und doppelte Anfragen). Hier kann durch saubere Programmierung wirklich viel gewonnen werden. Vielleicht ist das einen eigenen Artikel wert?

    Definitiv! – Man freut sich bereits auf einen derartigen Artikel, der sicherlich unglaublich hilfreich sein wird.

  20. #20 Bell
    November 25, 2012

    Wäre schon, wenn es zu scienceblog.de mal eine FAQ gäbe, der man entnehmen kann, welche der zahlreichen Textformatierungen, denn hier für einen einfache Leser wie meinereiner, zugelassen sind.

    Habe ich leider nicht gefunden … also probiere ich mal einiges aus, denn es gibt hier ja nicht einmal mehr eine Vorschau:

    Überschrift h1

    center

    blue

    ul
    1
    2

    ol
    1
    2

    blockquote

  21. #21 Bell
    November 25, 2012

    … außer blockquote funktioniert also nichts …. hätte ich mir natürlich auch denken können,

  22. #22 Bell
    November 25, 2012

    a href=
    test.de

  23. #23 Bell
    November 25, 2012

    … wie schön, das funzt also auch

  24. #24 rolak
    November 25, 2012

    Die Liste gibt es, Bell.