Nachdem wir nun ein ganzes Kapitel lang nicht eine Zeile Code geschrieben haben, ist es jetzt an der Zeit dies zu tun. In diesem Unterkapitel lernst du, wie du mit HTML deine allererste Webseite erstellst. Dabei erkläre ich dir Schritt für Schritt, was zu tun ist. Wenn du jedoch nicht weiter kommst, denk an das Kapitel 1.5 und schaue dir den Schritt noch einmal genau an und kontrolliere jedes einzelne Zeichen. Oft ist nämlich das Problem, dass einzelne Zeichen verkehrt geschrieben werden!
Ein Projektordner ist ein ganz normaler Ordner auf deiner Festplatte, worin alle erforderlichen Dateien enthalten sind. Um es uns ganz einfach zu machen, erstellen wir einen Ordner auf dem Desktop, den wir "Erste Webseite" nennen.
Nun öffnen wir Visual Studio Code. Dies sollte ungefähr so aussehen:
Hier klicken wir oben links auf "File" und in dem Untermenü auf "Open folder..."
Es öffnet sich der Explorer. Hier wählst du deinen Ordner aus. Es erscheint auf der linken Seite die Ordneransicht.
Auf der rechten Seite des Ordnernamens siehst du Aktionsbuttons. Hier klickst du auf den Button "New File...", und nennst diese Datei "index.html". Du könntest diese auch "seite.html" nennen. Jedoch ist die index.html die Datei, die zuerst angesteuert wird, wenn wir den Ordner auf einem Webserver hochladen und auf die Seite zugreifen.
Ein kleines Beispiel dazu:
Wir gehen im Internetbrowser auf https://www.youtube.com. Im Hintergrund wird auf die index.html Datei zugegriffen. Bedeutet, dass wir im Hintergrund nicht https://www.youtube.com, sondern https://www.youtube.com/index.html aufrufen. Da diese jedoch standardmäßig aufgerufen wird, brauchen wir diese nicht hinzufügen. Hätte YouTube ihre HTML-Datei jedoch seite.html genannt, müssten wir eigenhändig immer https://www.youtube.com/seite.html eingeben. Daher nennen wir unsere erste HTML-Datei immer index.html.
Haben wir die Datei jetzt benannt, öffnet sich diese direkt in Visual Studio Code:
Hier können wir nun unsere index.html Datei bearbeiten. Hierfür starten wir am leichtesten, indem wir einen beliebigen Text hinzufügen. Beispielsweise "Hallo Welt! Dies ist meine erste Webseite!".
Speichern wir nun die Datei mit Strg + S, können wir diese öffnen. Hierfür gehen wir zurück zu unserem Desktop, öffnen den Ordner und öffnen die index.html mit einem Doppelklick. Es startet sich dein Standardbrowser mit der erstellten Seite.
Sollte dies nicht der Fall sein, achte darauf, dass du die Datei gespeichert hast! Ob die Datei nicht gespeichert ist, erkennst du an dem Symbol rechts neben dem Namen. Ist dort ein X zu sehen, ist die Datei gespeichert. Ist dort ein Kreis zu sehen, ist die Datei nicht gespeichert.
Datei nicht gespeichert:
Datei gespeichert:
Wenn sich nicht dein gewollter Browser geöffnet hat, dann achte darauf, dass du deinen Standardbrowser richtig eingestellt hast. Wie du diesen auf Windows änderst, siehst du auf der Microsoft Support Seite.
Herzlichen Glückwunsch! Du hast deine erste Internetseite erstellt! Ist doch einfacher, als gedacht oder nicht?