{"id":10344,"date":"2019-07-02T18:34:02","date_gmt":"2019-07-02T16:34:02","guid":{"rendered":"http:\/\/udo.springfeld.eu\/blog\/?p=10344"},"modified":"2019-07-03T19:35:46","modified_gmt":"2019-07-03T17:35:46","slug":"hello-world-wide-web","status":"publish","type":"post","link":"https:\/\/udo.springfeld.eu\/blog\/2019\/07\/02\/hello-world-wide-web\/","title":{"rendered":"Hello, World Wide Web!"},"content":{"rendered":"

Wer Programmieren lernt oder eine Programmiersprache kennen lernen m\u00f6chte, beginnt oft mit »Hello, World!«, wobei es sich um einem minimalen Rumpf f\u00fcr ein Programm und eine einzelne Anweisung in der Sprache handelt handelt, n\u00e4mlich die »Hello, World!« am Bildschirm auszugeben.<\/p>\n

W\u00e4hrend es bei herk\u00f6mmlichen Programmiersprachen besonderen Voraussetzungen bedarf, ist die Web Plattform unabh\u00e4ngig hiervon. Ein in jedem Betriebssystem vorhandener Editor und Browser gen\u00fcgt. Probieren wir es aus, vier Schritte und wenige Minuten gen\u00fcgen:<\/p>\n

    \n
  1. Editor starten<\/li>\n
  2. <!doctype html><\/code> einf\u00fcgen<\/li>\n
  3. Speichern unter <\/li>\n
      \n
    • Codierung: UTF-8 ausw\u00e4hlen<\/li>\n
    • Dateiname (mit Hochkommata): „Hello World Web.html“<\/li>\n
    • Speichern klicken<\/li>\n<\/ul>\n
    • Datei doppelklicken<\/li>\n<\/ol>\n

      Und so sollte der Editor hiernach ungef\u00e4hr aussehen:
      \n<\/p>\n

      Nun begib dich dorthin, wo du die Datei gespeichert hast, und \u00f6ffne die Datei mit einem Doppelklick. Es wird das Standardprogramm f\u00fcr .html-Dateien ge\u00f6ffnet, und hierin deine Datei, und wie du siehst: Siehst du nichts.<\/p>\n

      Denn tats\u00e4chlich haben wir zwar valides HTML geschrieben, aber nur dessen Deklaration. Der Browser wei\u00df nun, was er zu erwarten hat. HTML.<\/p>\n

      Jetzt m\u00fcssen wir nur noch HTML hinzuf\u00fcgen, und das kommt daher wie diese ersten 16 Byte: in ein Paar Tags. Ein Element ist meist ein Paar aus \u00f6ffnendem und schlie\u00dfendem Tag – Ausnahmen wie die Dokumenttyp-Deklaration best\u00e4tigen diese Regel. Und das alles umfassende Element einer HTML-Seite ist das html-Element, das mit einem \u00f6ffnenden <html> (ohne Schr\u00e4gsttrich) und seinem schlie\u00dfenden <\/html><\/code> (mit Schr\u00e4gstrich) daher kommt. Oder anders ausgedr\u00fcckt: <html><\/html><\/code> ist ein leeres html-Elemenent.<\/p>\n

      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<\/strong>, in dem noch zwei weitere Elementtypen liegen, die ihrerseits nur jeweils einmal in einem HTML-Dokument vorkommen k\u00f6nnen, und zwar Head- und Body-Element: Das Head-Element beinhaltet Metadaten, die nicht auf der Website selbst in Erscheinung treten, sondern h\u00f6chstens Dinge beinhalten, die das Erscheinen der Website beeinflussen. Und das body-Element ist, wenn man die Webseite selbst (zutreffend) als Baumstruktur bezeichnen m\u00f6chte: die Wurzel. Oder nochmal Schritt f\u00fcr Schritt:<\/p>\n

        \n
      1. html-Element hinzuf\u00fcgen: <html><\/html><\/code><\/li>\n
      2. head-Element hierin hinzuf\u00fcgen.<head><head><\/code><\/li>\n
      3. head-Element hinten an das head-Element anf\u00fcgen.<body><\/body><\/code><\/li>\n
      4. Speichern. Fertig.<\/li>\n<\/ol>\n

        Und so sollte das Dokument aus Editor-Perspektive nach Speichern aussehen:<\/p>\n

        <!doctype html>
        \n<html>
        \n<head><\/head>
        \n<body><\/body>
        \n<\/html>
        \n<\/code><\/p>\n

        Nun f\u00fcgen wir einfach das gew\u00fcnschte »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\u00fcnde schon zwischen dem \u00f6ffnenDEN und schlie\u00dfenden Body-Tag oben. Und so sollte das nun wieder im Browser aufgerufene Hello, World Wide Web.html nun daherkommen:<\/p>\n

        \"\"<\/p>\n

        Unspektakul\u00e4r. Aber auch die CD-ROM wurde nicht an einem Tag erbaut.<\/p>\n","protected":false},"excerpt":{"rendered":"

        Hello, World Wide Web! ist das Hello, World! der Web-Plattform. Erfahre wie du in wenigen Minuten eine eigene Webseite erstellst, und zwar ganz ohne Hex-erei, ausschlie\u00dflich mit Bordmitteln deines, dieses Desktop-Betriebssystem.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[189],"tags":[2],"class_list":["post-10344","post","type-post","status-publish","format-standard","hentry","category-tipps-tutorials-tricks-tweaks","tag-html"],"_links":{"self":[{"href":"https:\/\/udo.springfeld.eu\/blog\/wp-json\/wp\/v2\/posts\/10344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/udo.springfeld.eu\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/udo.springfeld.eu\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/udo.springfeld.eu\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/udo.springfeld.eu\/blog\/wp-json\/wp\/v2\/comments?post=10344"}],"version-history":[{"count":20,"href":"https:\/\/udo.springfeld.eu\/blog\/wp-json\/wp\/v2\/posts\/10344\/revisions"}],"predecessor-version":[{"id":10372,"href":"https:\/\/udo.springfeld.eu\/blog\/wp-json\/wp\/v2\/posts\/10344\/revisions\/10372"}],"wp:attachment":[{"href":"https:\/\/udo.springfeld.eu\/blog\/wp-json\/wp\/v2\/media?parent=10344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/udo.springfeld.eu\/blog\/wp-json\/wp\/v2\/categories?post=10344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/udo.springfeld.eu\/blog\/wp-json\/wp\/v2\/tags?post=10344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}