7.1 Erstes HTML-Dokument
Lass uns unser erstes HTML-Dokument (HTML-Datei) erstellen. In der Regel wird die Haupt-HTML-Datei eines Web-Projekts index.html genannt: Ich schlage vor, dass wir uns an diese ruhmreiche Tradition halten. Dazu klicken wir mit der rechten Maustaste auf den Ordner web-storm-10:

Und geben den Dateinamen ein:

WebStorm erstellt für dich die Datei und öffnet sie sofort:

Tatsächlich ist das ein leeres HTML-Dokument. Alles, was du hier siehst, sind technische Informationen. Alle echten Daten werden innerhalb der Tags <body>
und </body>
platziert. Was Tags sind, erfährst du ausführlicher in der nächsten Vorlesung.
Schreiben wir doch mal eine interessante und pompöse Nachricht innerhalb dieser Tags. Zum Beispiel so etwas:
Der Weg zu tausend Meilen beginnt mit einem einzigen Schritt!
Du kannst es einfach kopieren und in die Zeile 8 (innerhalb der Tags <body>
) einfügen. Gewöhne dich daran, Texte zu kopieren — so gibt es weniger Fehler und Tippfehler. So sieht mein Dokument jetzt aus:

Wenn meine Textvariante nicht düster und pompös genug für dich ist, wähle deine eigene — es ist schließlich dein erstes Web-Projekt. Ich schlage noch 3 Optionen zur Auswahl vor:
- "Die dunkle Seite bietet mir, was das Licht nicht kann: wahre Freiheit."
- "Die dunkle Seite ist der Weg zur Macht, die keine Grenzen kennt."
- "Ich wähle mein Schicksal, und es liegt in der Dunkelheit."

7.2 Start des ersten Projekts
Starten wir jetzt unser Projekt und sehen, wie unser HTML-Datei im Browser dargestellt wird.
Um das Projekt zu starten, musst du auf das grüne Dreieck im oberen Menü klicken. Links davon steht der Dateiname, der ausgeführt wird:

Du kannst deine Datei auch ausführen, indem du Shift+F10 drückst.
Lass uns das tun, und du siehst, wie dein erster HTML-Datei im Browser dargestellt wird. So sieht mein Ergebnis aus:

Die orangefarbene Schrift im URL zeigt den Host an — unser Projekt-Webserver, der von WebStorm gestartet wurde.
Der grüne Schriftzug im URL zeigt den Pfad zu index.html vom Stammverzeichnis unseres Projekts an.
Der blaue Schriftzug ist technische Information für WebStorm.
Der rot markierte Text wurde vom Browser basierend auf unserem HTML-Dokument angezeigt.
7.3 Fehlerbehebung
Was passiert, wenn wir einen Fehler machen? Wie reagiert der Browser und WebStorm darauf?
Lass uns das erste Zeichen in der 9. Zeile löschen und schauen, wie WebStorm reagiert. Hier ist, was ich bekommen habe:

Was wir hier sehen:
- Das Wort in der 9. Zeile ist kein Tag mehr, daher schreibt WebStorm es jetzt in Grau und nicht in Gelb.
- In der 10. Zeile hast du einen schließenden
<html>
-Tag, obwohl der<body>
-Tag vor dem schließenden<html>
-Tag erscheinen sollte. Daher sieht WebStorm hier einen Fehler. - Die Anzahl der Fehler im Dokument wird in der oberen rechten Ecke angezeigt – wir haben einen.
- Die Fehlerstellen werden auch auf der Scroll-Leiste rechts unten dupliziert. Sehr praktisch für lange Dokumente.
Starten wir jetzt diese Datei und sehen, wie der Browser auf den Fehler reagiert:

Der Browser denkt auch, dass der unvollständige <body>
-Tag einfach nur Text ist, daher zeigt er ihn auch als normalen Text an.
Das Fehlen des schließenden <body>
-Tags hat den Browser ebenfalls nicht gestört: Probleme mit Tags können noch schlimmer sein. Insgesamt ist es ziemlich anständig geworden.