Übung 1: Einführung HTML

Speichere deine Dateien unter dem Dateinamen, der in Klammern bei der Aufgabe angegeben ist.

Aufgabe 1 (helloworld.html)

  1. Öffne den Windows Explorer.
  2. Erstelle auf dem Laufwerk P: diese Unterverzeichnisse:
    P:\Informatik\Block 3 - HTML und CSS\Lektion 01\
  3. Erstelle anschliessend in diesem Ordner eine leeres Textdokument, indem du die rechte Maus-taste verwendest und danach auf "Neu –> Textdokument" klickst. Name der Datei: helloworld
  4. Ändere die Dateiendung von "txt" auf "html". Bestätige die Warnung. Das Dateisymbol sollte sich nun ändern.
    Bemerkung: Falls (z.B. auf dem PC zuhause) die Dateiendung nicht angezeigt wird, so kann man sich diese mit Klick oben im Menü auf "Ansicht –> Dateinamenerweiterungen" anzeigen lassen.
  5. Doppelklicke die Datei, um sie mit dem (Standard-)Browser zu öffnen. Es erscheint eine leere Seite.
  6. Gehe retour in den Windows Explorer und klicke rechts auf die Datei, um sie mit dem Editor zu öffnen. Man findet ihn unter "Öffnen mit –> Andere App auswählen". Im Fenster wählt man "Weitere Apps ↓" und findet in der Liste den "Editor".
  7. Füge in den Editor folgenden Code ein:
  8. Speichere die Datei (Ctrl + S) und zeige sie im Browser an. Wenn das Browserfenster noch/bereits offen ist, musst du die Seite jeweils neu laden (F5).

✏ Auftrag

Wirf einen Blick in die Datei Cheatsheet-HTML-Tags.pdf, in der die gängigen HTML-Elemente (Tags) aufgeführt sind. Vervollständige deine Webseite gemäss diesem Screenshot und beantworte die Frage.

Aufgabe 2 (themenliste.html)

Um aufzählungsartige Listen zu erstellen, stehen in HTML die Tags <ul> und <li> zur Verfügung. Diese Tags werden ineinander verschachtelt, d.h. zuerst wird <ul> gesetzt und innerhalb von <ul> wird jedes Listenelement innerhalb der Tags <li> und </li> geschrieben. Für jeden Listenpunkt braucht es ein neues <li>. Am Ende muss das Tag <ul> wieder geschlossen werden. Für nummerierte Aufzählungen kann man statt <ul> das Tag <ol> (engl. ordered list) verwenden.

Erstelle eine neue HTML-Datei themenliste.html mit nachfolgendem Inhalt:

✏ Vervollständige den Code gemäss diesem Screenshot:

✏ Auftrag:

Schreibe eine sinnvolle Beschreibung (statt den Auslassungspunkten ...) zu jedem Thema hin, indem du im Internet recherchierst.