Voraussetzungen:
HTML
CSS
Idee
Hast du schon eine Idee, was für eine Webseite du machen möchtest?
Falls nicht, sind hier einige Vorschläge:
Webseite über dich
Dein Name, dein Alter, Hobbies und andere Infos, die du gerne auf der Webseite haben möchtest
Webseite über ein Haustier
Du kannst verschiedene Informationen über dein Haustier, wie Name, Alter, Farbe, Lieblingsessen und Lieblingsspielzeug hinzufügen. Außerdem kannst du Bilder und sogar Videos von deinem Haustier hinzufügen.
Webseite über ein Videospiel
Stelle dein Lieblingsvideospiel vor, füge Bilder hinzu, verlinke auf andere Webseiten und gib anderen Spielern Tipps.
1. Editor
Um eine Webseite zu programmieren, brauchst du ein Programm, mit dem du Programmiercode schreiben kannst.
Ich empfehle dir Visual Studio Code, ein kostenloser, web basierter Code-Editor.
Das Beste: du brauchst ihn nichtmal herunterladen. Gehe einfach auf https://vscode.dev und du kannst loslegen.
2. Ordner anlegen
Wenn du den Editor zum ersten Mal öffnest, sieht er wie folgt aus:
Mit dem Button kannst du einen Ordner auf deinem Computer öffnen.
Erstelle einen neuen Ordner für deine Webseite.
Clicke bei den folgenden Popups auf und
3. HTML Datei erstellen
Als erstes legen wir die HTML-Datei deiner Webseite an.
Auf der linken Seite des Editors findest du deinen Ordner und Dateien in deinem Ordner (aktuell ist dieser noch leer).
Drücke mit der rechten Maustaste in den freien Bereich unter deinem Ordnernamen und wähle „Neue Datei…“.
Nenne deine Datei „index.html“ und drücke die Enter-Taste, um die Datei zu erstellen.
Clicke bei folgenden Popups auf und
Wenn alles funktioniert hat, solltest du links deine neu erstellte Datei sehen und rechts sollte ein Bereich angezeigt werden, in dem du nun den Code deiner Webseite schreiben kannst.
4. Code schreiben
Nun können wir den ersten Code schreiben.
Das Grundgerüst deiner Webseite bilden folgende Tags: Doctype, html, head und body.
Um dir etwas Tipparbeit zu sparen, gib einfach ein Ausrufezeichen (!) ein und drücke, wenn das Popup kommt, die Taste
Nun sollten 11 Zeilen Code automatisch generiert werden.
Mach dir keinen Kopf, wenn du nicht jede Zeile verstehst,
wichtig ist nur, dass du den <head> tag und den <body> Tag erkennst.
Nun kannst du loslegen mit den Inhalten deiner Webseite.
Suche in deinem Code nach dem <Body> Tag (Zeile 8-10) und programmiere eine Überschrift mit dem <h1> Tag.
Ganzer Code
5. Webseite speichern und ansehen
Nun musst du deinen Code speichern.
Klicke dafür oben rechts auf die drei Striche und wähle dann > Datei > Speichern.
Um deine Webseite anzusehen, musst du nun die index.html Datei in in einem Browser öffnen.
Öffne dafür im Datei Explorer den Ordner mit deiner Webseite.
Drücke dann mit der rechten Maustaste auf deine Datei und Wähle „Öffnen mit“ und wähle dann ein Browser, wie Chrome, Firefox, Edge...
Du solltest nun deine Webseite mit deiner Überschrift sehen.
6. CSS Datei erstellen und einbinden
Um deine Webseite zu gestalten, brauchst du CSS.
Erstelle wie in Schritt 3 eine neue Datei und nenne sie style.css.
Übertrage folgenden Code in die neue Datei, um die Überschrift grün zu färben.
Denk dran, die Datei zu speichern (wie in Schritt 5).
Gehe nun zurück in deine index.html Datei und füge folgenden Code in deinen head-Tag hinzu, um die CSS-Datei einzubinden.
Ganzer Code
Kommt noch
- Bilder & Videos (auch hochladen)
- Navbar