**Dies ist eine alte Version des Dokuments!**

Aufträge HTML

In den folgenden Übungen erstellst du kleine Webseiten und lernst dabei die Grundlagen von HTML und CSS kennen.

Auftrag 1 – Grundgerüst einer Webseite erstellen

Ziele: In dieser Übung lernst du den Editor für das Erstellen von Webseite kennen und erstellst ein einfaches Grundgerüst einer Webseite.


  1. Lade den Editor Visual Studio Code (kurz VSCode) herunter und installiere diesen: https://code.visualstudio.com

  2. Erstelle einen Ordner mit Namen „website_ksr“ und speichere an einem passendenden Ort auf deinem Computer.

  3. Starte nun VSCode und öffne darin diesen Ordner: Datei > Ordner öffnen > Ordner „website_ksr“ suchen und öffnen.

  4. Klicke auf das Symbole (1) oben links, um den „Explorer“ zu öffnen. Darin, also im Feld (2), siehst du alle Files und Unterordner, die im geöffneten Ordner vorhanden sind. Mit (3) kannst du darin neue Files und Unterordner erstellen. Mit Doppelklick auf ein File, wird dieses im Feld (4) geöffnet.
  5. Erstelle nun ein neues File, welches zwingend den Namen index.html haben muss.

  6. Öffne nun index.html in VSCode und erstelle darin das Grundgerüst der Website. Tippe dazu folgendes ab (nicht copy paste):
    <html>
<head>
    <meta charset="UTF-8">
    <title>Titel der Website</title>
</head>
<body>
    Hier kommt der Inhalt der Website hinein.
</body>
</html>
  7. Verschaffe dir einen Überblick über den HTML-Code oben: Lese hierzu die Theorie bis und mit HTML-Grundgerüst aus head und body.

  8. Gratulation, du hast deine erste Website erstellt! Öffne sie nun im Browser: Navigiere im File Explorer deines Computers (nicht von VSCode) zu deiner Website (also index.html) und öffne diese per Doppelklick. Nun sollte die Website im Browser angezeigt werden.

Tipp: Arbeiten mit VSCode

Wenn man mit VSCode arbeitet, sollte man nicht einzelne Files mit Doppelklick öffnen. Besser öffnet man wie oben beschrieben den ganzen Ordner. Jetzt kann diesen in der „Explorer“-Ansicht direkt verwalten: Files bearbeiten, neue Files und Ordner erstellen, …

Tipp: index.html

Die Hauptseite jeder Website trägt den Namen index.html. Wähle deshalb immer diesen Namen, ganz egal, um was es bei der Website geht.
  • gf_informatik/web/uebungen.1698155039.txt.gz
  • Zuletzt geändert: 2023-10-24 13:43
  • von hof