HTML5-Tutorium: JavaScript: Hello World 01
Ein neues Projekt erstellen
- Visual Studio Code (VSC) starten
Datei
→Ordner öffnen
- Erstellen Sie unter einem sinnvollen Pfad auf Ihrem Rechner einen neuen Ordner (z. B.
.../webprog/hello_world/HelloWorld01
und öffnen Sie diesen Ordner.
Links sehen Sie ein Icon bestehend aus zwei übereinander liegenden Papierblättern. Wenn Sie darauf klicken, sehen einen Dateibaum mit dem soeben geöffneten Ordner. Er enthält noch noch keine Dateien.
Der Ordnernamen wir mit Großbuchstaben dargestellt. Wenn Sie die Maus über diesen Ordnernamen bewegen, erscheinen Icons zum Erzeugen von Dateien und Ordnern (sowie zwei weitere Icons). Erstellen Sie eine HTML-Datei index.html
vom Typ HTML 5 file
.
In die HTML-Datei wurde von WebStorm folgender Code automatisch eingefügt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
Die erste Zeile legt den Typ der Datei fest. Diese Information benötigen die Browser, damit
sie den nachfolgenden HTML-Code richtig interpretieren und rendern können.
Mit <!DOCTYPE html>
wird festgelegt, dass es sich um eine HTML5-Datei handelt.
Eine HTML-4.01-Datei, die die sich an die strengen HTML-4-Vorgaben hält (strict
)
würde eine wesentlich komplexere Doctype-Angabe erfordern:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
Es gibt noch diverse weitere HTML-Varianten. Wir werden uns allerdings auf HTML5 konzentrieren.
Die zweite und die letzte Zeile des Dokuments (<html lang="en">
und </html>
)
begrenzen den eigentlichen HTML-Code. Das Attribut lang
zeigt dem Browser an,
in welcher Sprache das Dokument verfasst ist. Wenn ein deutsches HTML-Dokument erstellt werden
soll, müssen Sie den Wert en
(Englisch) in de
(Deutsch) ändern.
Da es sich bei „Hello World“ jedoch um einen englischen Text handelt, ändern wir den Attributwert nicht.
Innerhalb des öffnenden und des schließenden HTML-Tags müssen die beiden wesentlichen Bereiche eines HTML-Dokuments mit Inhalt gefüllt werden.
Im Body-Bereich stehen die eigentlichen Inhalte, die dem Leser im Contentbereich des Browsers angezeigt werden sollen. Da WebStorm keine Ahnung hat, was für Inhalte präsentiert werden sollen, ist dieser Bereich noch leer.
Im Head-Bereich stehen dagegen Informationen, die für den Browser zwar interessant sind, die aber nicht gerendert und daher im Content-Bereich des Browsers nicht dargestellt werden müssen. Typische Vertreter sind der Titel des Dokuments, der im Browser-Tab angezeigt wird, sowie die Zeichenkodierung (UTF-8, ISO-8859-1, ASCII, ...). In HTML5 werden Zeichen standardmäßig in UTF-8 kodiert. In HTML 4 war noch ISO 8859-1 Standard. In ISO 8859-1 (ISO Latin 1) gibt es maximal 256 Zeichen. Davon sind 191 spezifiziert.[1] Mit UTF-8 können dagegen theoretisch über 4 Billionen Zeichen kodiert werden, praktisch werden aber (derzeit) nur etwas mehr als eine Million Kodierungen als korrekt angesehen.[2].
- ↑ ISO/IEC 8859-1:1998
- ↑ [https://tools.ietf.org/html/rfc3629 Request for Comments 3629, UTF-8, a transformation format of ISO 10646]