Ab 14 Jahren
Die ersten eigenen Webseiten bauen
nicht notwendig
Unser erstes Ziel ist es, eine Webseite zu erstellen und die erste Willkommensnachricht auf dieser anzuzeigen. Um starten zu können, brauchen wir gar nicht viel. Lediglich Visual Studio Code (VSCode) und ein beliebiger Browser. Wie VSCode funktioniert, hast du bereits im letzten Modul gelernt. Der Browser ist dafür da, dass wir uns die Webseite direkt anzeigen lassen können. Ab geht’s!
1) Wir öffnen VSCode auf unserem Gerät und klicken oben links auf “Datei -> Ordner öffnen” bzw. “File -> Open Folder”.
2) Es öffnet sich der Datei-Explorer. Hier erstellen wir nun an einer beliebigen Stelle einen neuen Ordner mit dem Namen “html” und öffnen diesen. Nun sehen wir den Ordnernamen oben links in VSCode. Dieser Ordner ist nun unser Projektordner.
3) Innerhalb dieses Ordners erstellen wir eine Datei. Das funktioniert, in dem wir unterhalb des Namens unseres Projektordners rechtsklick drücken und “Neue Datei” bzw. “New File” auswählen. Diese Datei nennen wir “willkommen.html”.
4) Sobald die Datei erstellt ist, öffnet sich im rechten Bereich von VSCode der Editor, in dem wir den Code für unsere HTML-Datei schreiben können. Hier schreiben wir lediglich ein “!” und drücken die Enter-Taste. Wie von Zauberhand ist das Grundgerüst der HTML-Datei fertig erstellt und wir brauchen uns hier drüber schon keine Gedanken mehr zu machen.
5) Das Grundgerüst besteht aus mehreren Bereichen. Der Bereich, der uns gerade am meisten interessiert, ist der Platz zwischen den zwei <body>-Tags. Hier können wir zum Beispiel Text einfügen, der dann auf der Webseite angezeigt wird. Als Text schreiben wir hier “Willkommen auf meiner Webseite!”.
6) Jetzt können wir uns auch schon mal die Webseite angucken. Dafür klicken wir in VSCode unten rechts auf “Go Live”. Dadurch öffnet sich der Browser mit unserer Webseite. Hier können wir auch den Text sehen, den wir gerade geschrieben haben. Und so schnell gehts! Wir haben in Windeseile unsere allererste eigene Webseite gebaut.
Die erste Webseite steht schon mal – Top!! Bislang ist der Inhalt aber noch relativ übersichtlich. Unser nächstes Ziel ist es, die Webseite mit richtigen HTML-Tags zu füllen und dadurch mehr Informationen auf dieser anzuzeigen. Das schaffen wir aber auch mit links!
1) Zuerst erstellen wir eine neue HTML-Datei mit dem Namen “uberschriften.html”. Hier erstellen wir wieder das Grundgerüst, in dem wir im Editor ein “!” schreiben und die Enter-Taste drücken.
2) Inhalte setzen wir in den <body>-Tag. Bislang haben wir hier lediglich Text reingeschrieben. Wir können hier aber auch mit HTML-Tags arbeiten. Als ersten HTML-Tag erstellen wir eine Überschrift. Eine Überschrift in HTML wird mit dem <h1>-Tag erstellt. In VSCode können wir dafür einfach im Body “h1” tippen und dann die Enter-Taste drücken, um den Tag zu erstellen.
3) Zwischen den Anfangstag (<h1>) und den Endtag (</h1>) der H1 setzen wir nun unseren Text für die Überschrift. Zum Beispiel, wie in der letzten Datei “Willkommen auf meiner Webseite!”.
4) Öffnet man die Seite nun im Browser sieht man schnell, dass diese Überschrift nun deutlich größer ist, als es bei der anderen Seite der Fall war. Das liegt daran, dass unser HTML-Code erkennt, dass es sich hier nun um eine Überschrift handelt. Überschriften werden größer dargestellt als normaler Text.
5) Neben der H1 gibt es auch noch weitere Überschriften. Nämlich H2, H3, H4, H5 und H6. Diese werden genauso erstellt, wie die H1 und unterscheiden sich in der Größe, in der sie angezeigt werden.