HTML

HTML ist die Basis für Webseiten und definiert die Struktur des Inhalts. Die HTML5-Spezifikation ist kompatibel zu den älteren Standards HTML3 und HTML4 sowie XHTML1.0 und XHTML 1.1.
HTML5 steht aber nicht nur für Webseiten, sondern auch für «Apps», die immer näher an Desktop-Programme rücken, und für eBooks, die ebenfalls auf HTML, CSS und Javascript aufbauen. Ein Paradebeispiel einer solchen «App» die mit den Webfrontendtechnologien aufgebaut wurde, ist der HTML-Editor «Brackets», welchen wir bei uns im Kurs verwenden.

Mit HTML5 ist also nicht nur die Auszeichnungssprache für Webseiten gemeint, sondern bezeichnet auch etwas allgemeiner die Techniken hinter Webseiten. HTML5 ist der Sammelbegriff für HTML, CSS und Javascript, beinhaltet also auch CSS3 und ein verbessertes Javascript. CSS3 bringt bessere Mechanismen für die Positionierung sowie Animationen und Transformationen. Javascript holt immer mehr Funktionen des Backends – der Programme auf dem Server – in den Browser, um schnellere und effizientere Webseiten zu liefern.

Die Trennung in die drei Bereiche – HTML für die Struktur, CSS für die Darstellung, Javascript für das Verhalten – bleibt so, wie sie es immer war. HTML bleibt auch in HTML5 eine einfache Markupsprache und ist die Basis für das Webdesign.

HTML5 wird zwar durch das World-Wide-Web Konsortium (W3C) standardisiert, wurde aber von der unabhängigen Arbeitsgruppe WHATWG entwickelt. Als HTML5 ins Leben gerufen wurde, konzentrierte sich das W3C vollumfänglich auf XHTML und sagte dem klassischen HTML den Tod voraus. Wie wir sehen, kam es anders, XHTML ist praktisch tot und HTML5 lebt in jugendlicher Frische. Weitere Infos findest du z.B. auf Wikipedia.

Die HTML Sprachsuppe entschlüsselt

Wenn du dich mit HTML auseinandersetzt, triffst du sehr schnell auf neue und möglicherweise auch verwirrende Sprachkonstrukte. Du kannst beruhigt sein: Diese anfängliche «Wand vor dem Kopf» senkt sich mit ein bisschen Praxis und Sicherheit sehr schnell und du wirst erkennen, dass die Sprache HTML aus nur wenigen Elementen besteht. 3 Begriffe musst du dir aber bereits schon zum Anfang gut merken: Elemente, den englischen Ausdruck «Tags» sowie Attribute.

Elemente

Elemente sind Bezeichner, welche die Struktur als auch den Inhalt eines Objekts auf einer Seite definieren. Zugegeben, dies tönt zuallererst einmal kompliziert. Vielleicht lichtet sich der Nebel wenn ich euch gleich ein paar der meistverwendeten Elemente nenne: Es sind dies Titelelemente (Heading) auf den verschiedenen Ebenen (z.B. Haupttitel, Kapiteltitel, Untertitel…), Abschnitte (Paragraph), Hyperlinks, Listen, Formulare u.s.w.

Elemente erkennt man am kleiner-und-grösser Zeichen < >, welche den Elementnamen umschliessen. Ein Element sieht also folgendermassen aus:
<a>

Tags

Sobald wir Elemente mit einem kleiner und grösser Zeichen – die sog. spitzen Klammern –  auszeichnen oder umschliessen, erstellen wir ein Tag. Tags kommen in der Regel immer paarweise vor, d.h. mit einem öffnenden und schliessenden Tag.

Ein öffnendes Tag wird opening tag genannt, ein schliessendes Tag entsprechend closing tag.

Ein opening tag markiert den Anfang oder Start eines Elements. Es besteht aus dem Kleiner-Zeichen, dem Elementnamen oder -bezeichner und endet mit dem Grösser-Zeichen. Zum Beispiel: <div>

Ein closing tag markiert den Schluss/das Ende eines Elements. Es besteht aus einem Kleiner-Zeichen, einem Forward-Slash, dem Elementnamen und endet mit dem Grösser-Zeichen. Zum Beispiel: </div>

Der Inhalt (sei es Text, Bild, Video etc.) der zwischen die opening und closing tags eingeschlossen ist, ist wie nicht anders erwartet der Inhalt dieses Elements. Ein Hyperlink/Anker (engl. anchor)  besteht also zum Beispiel aus dem öffnenden <a> tag und dem schliessenden </a> tag. Alles was zwischen diesen beiden tags steht ist der Inhalt dieses Hyperlinks/anchor-tags.
<a>weitere Informationen</a>

Attribute

Attribute sind Eigenschaften (engl. properties) welche zusätzliche Informationen zu einem Element liefern. Am häufigsten verwendet wird:

  • das id Attribut, welches ein Element genau definiert und entsprechend nur einmal pro Seite verwendet werden darf
  • das class Attribut,welches ein Element klassifiziert
  • das src Attribut (source = Quelle), welches den Speicherort des einzubettenden Inhalts angibt
  • das href Attribut, welches die Hyperlink Referenz auf eine verlinkte Ressource definiert, also die Seite oder den Ort an den ich beim Klick auf den Link springen möchte

Attribute werden immer und ausschliesslich im opening tag angegeben, jeweils durch einen Leerschlag getrennt nach dem Elementnamen. In der Regel bestehen Attribute jeweils aus einem name und einem value, also einem Namen sowie einem Wert. Geschrieben/Formatiert werden diese Attribute mit dem Attributnamen, gefolgt von einem Gleichheitszeichen (=) in direktem Anschluss  sowie dem in Anführungszeichen eingeschlossen Wert. Ein Hyperlink mit einem Verweis auf eine andere Website sieht also mit dem entsprechenden href-Attribute folgendermassen aus:
<a href="http://www.apple.com/">Die Apple Homepage</a>

Gratulation: nun kennst du also bereits den Aufbau der Sprache HTML. Nun ist es an der Zeit, dass wir uns dem grundlegenden Aufbau einer HTML-Seite zuwenden. Hierfür arbeiten wir mit dem ausgezeichneten Freeware Editor Brackets (http://www.brackets.io) ein durch Adobe initiiertes und tatkräftig unterstütztes OpenSource Projekt.
Und, hast du es schon bemerkt? Der Text in Klammern ist ein Hyperlink und verweist auf die Website, unter welcher der Editor Brackets heruntergeladen werden kann.

Doch zunächst noch dies: Die Bezeichnung HTML möchten wir auch noch kurz entschlüsseln. Dies ist ein Akronym, also eine Abkürzung, welche(s) aus zwei Teilen zusammengesetzt ist:

  1. HT = Hypertext, also Text der markiert werden kann und dann irgendeine Aktion ausgelöst wird
  2. ML = Markup Language, zu Deutsch Auszeichnungssprache, also eine Sprache mit der wir Inhalte je nach semantischer Bedeutung auszeichnen.

Und so sieht ein rudimentäres HTML5 Dokument aus

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>

</body>
</html>

Im den vergangenen Unterrichtseinheiten haben wir verschiedene Tags/Elemente kennengelernt, um den Inhalt auszuzeichnen. So gibt es Elemente für die Auszeichnung von Struktureinheiten/-bereichen, für Blockelemente, Inlineelemente, Formulare etc. Oder um den Wortschatz aus dem Glossar des Online Nachschlagewerks Selfhtml (http://wiki.selfhtml.org/wiki/Referenz:HTML/) zu verwenden:

  • Grundstruktur
    • html
    • head
    • body
    • title
    • meta
    • link
    • style
    • (base)
  • Seitenstrukturierung (neu in HTML5)
    • header
    • footer
    • section
    • article
    • nav
    • aside
    • main (neu in HTML 5.1)
    • address
  • Textstrukturierung (Blockelemente)
    • z.B. h1 – h6, p, ul, ol, dl etc.
  • Textauszeichnung (Inline Elemente)
    • z.B. a, b, i, strong, em, cite etc.
  • Tabellen
  • Formulare
  • Multimedia und Grafiken

Ein mit den HTML5 Seitenstrukturierungselementen versehenes Grundgerüst könnte also so aussehen:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
</head>
<body>
  <header></header
  <nav></nav>
  <main>
    <article></article>
    <aside></aside>
  </main>
  <footer></footer>
</body>
</html>