CodeGym/Kurse/Frontend SELF DE/Erstes Web-Projekt

Erstes Web-Projekt

Verfügbar

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:

Erstes HTML-Dokument

Und geben den Dateinamen ein:

Dateiname

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

HTML-Datei

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:

Der Weg zu tausend Meilen beginnt mit einem einzigen Schritt!

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."
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:

IDE-Oberfläche

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:

Ergebnisanzeige

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:

Fehler

Was wir hier sehen:

  1. Das Wort in der 9. Zeile ist kein Tag mehr, daher schreibt WebStorm es jetzt in Grau und nicht in Gelb.
  2. 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.
  3. Die Anzahl der Fehler im Dokument wird in der oberen rechten Ecke angezeigt – wir haben einen.
  4. 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:

Fehler

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.

1
Aufgabe
Frontend SELF DE,  Level 3Lektion 4
Gesperrt
Teile, wer du sein möchtest
Teile, wer du sein möchtest
1
Aufgabe
Frontend SELF DE,  Level 3Lektion 4
Gesperrt
Installation des Plugins
Installation des Plugins
1
Aufgabe
Frontend SELF DE,  Level 3Lektion 4
Gesperrt
Stelle eine Frage im Help-Bereich
Stelle eine Frage im Help-Bereich
Kommentare
  • Beliebt
  • Neu
  • Alt
Du musst angemeldet sein, um einen Kommentar schreiben zu können
Auf dieser Seite gibt es noch keine Kommentare