Hello, World Wide Web!
Wer Programmieren lernt oder eine Programmiersprache kennen lernen möchte, beginnt oft mit »Hello, World!«, wobei es sich um einem minimalen Rumpf für ein Programm und eine einzelne Anweisung in der Sprache handelt handelt, nämlich die »Hello, World!« am Bildschirm auszugeben.
Während es bei herkömmlichen Programmiersprachen besonderen Voraussetzungen bedarf, ist die Web Plattform unabhängig hiervon. Ein in jedem Betriebssystem vorhandener Editor und Browser genügt. Probieren wir es aus, vier Schritte und wenige Minuten genügen:
- Editor starten
<!doctype html>einfügen- Speichern unter
- Codierung: UTF-8 auswählen
- Dateiname (mit Hochkommata): „Hello World Web.html“
- Speichern klicken
- Datei doppelklicken
Und so sollte der Editor hiernach ungefähr aussehen:
Nun begib dich dorthin, wo du die Datei gespeichert hast, und öffne die Datei mit einem Doppelklick. Es wird das Standardprogramm für .html-Dateien geöffnet, und hierin deine Datei, und wie du siehst: Siehst du nichts.
Denn tatsächlich haben wir zwar valides HTML geschrieben, aber nur dessen Deklaration. Der Browser weiß nun, was er zu erwarten hat. HTML.
Jetzt müssen wir nur noch HTML hinzufügen, und das kommt daher wie diese ersten 16 Byte: in ein Paar Tags. Ein Element ist meist ein Paar aus öffnendem und schließendem Tag – Ausnahmen wie die Dokumenttyp-Deklaration bestätigen diese Regel. Und das alles umfassende Element einer HTML-Seite ist das html-Element, das mit einem öffnenden <html> (ohne Schrägsttrich) und seinem schließenden </html> (mit Schrägstrich) daher kommt. Oder anders ausgedrückt: <html></html> ist ein leeres html-Elemenent.
Jeder so genannte Tag bzw. Element beginnt und endet mit einer spitzen Klammer. In diesem Fall handelt es sich um die Dokumenttyp-Definition, die den Parser veranlasst das Dokument als HTML 5 zu behandeln. Das eigentlich HTML kommt nun erst noch, und zwar auf derselben Ebene, und es handelt sich ebenfalls um ein Tag, genau genommen das html-Element, in dem noch zwei weitere Elementtypen liegen, die ihrerseits nur jeweils einmal in einem HTML-Dokument vorkommen können, und zwar Head- und Body-Element: Das Head-Element beinhaltet Metadaten, die nicht auf der Website selbst in Erscheinung treten, sondern höchstens Dinge beinhalten, die das Erscheinen der Website beeinflussen. Und das body-Element ist, wenn man die Webseite selbst (zutreffend) als Baumstruktur bezeichnen möchte: die Wurzel. Oder nochmal Schritt für Schritt:
- html-Element hinzufügen:
<html></html> - head-Element hierin hinzufügen.
<head><head> - head-Element hinten an das head-Element anfügen.
<body></body> - Speichern. Fertig.
Und so sollte das Dokument aus Editor-Perspektive nach Speichern aussehen:
<!doctype html>
<html>
<head></head>
<body></body>
</html>
Nun fügen wir einfach das gewünschte »Hello, World Wide Web!« hinzu, und zwar in das Body-Element, das ja wie gesagt die Wurzel unseres darzustellenden Dokuments ist. Speichern. Fertig. Da ich mich nicht wiederholen will, stellen sie sich einfach vor, das stünde schon zwischen dem öffnenDEN und schließenden Body-Tag oben. Und so sollte das nun wieder im Browser aufgerufene Hello, World Wide Web.html nun daherkommen:
Unspektakulär. Aber auch die CD-ROM wurde nicht an einem Tag erbaut.
Hello, World Wide Web! via Twitter kommentieren