Wiki: Mathe und Info

Unterrichtsmaterialien für Mathematik und Informatik

Benutzer-Werkzeuge

Webseiten-Werkzeuge


info:sek-ii:e1:html:l1-uebungen

HTML-Übungen

Brief formatieren

Früher oder später müssen wir alle einmal einen Brief schreiben. Mit dieser Aufgabe wirst du deine grundlegenden Fähigkeiten, HTML-Text zu formatieren, Internetseiten zu verlinken und Meta-Informationen in ein HTML-Dokument einzubetten festigen.

Vorbereitung

Hier findest du eine zip-Datei, in der eine vorbereitete HTML-Datei sowie eine CSS-Datei liegen. Diese kannst du aus Ausgangspunkt für die Bearbeitung der Aufgabe nutzen.

Aufgabe 1 - Text strukturieren
Zunächst muss der Text so formatiert werden, dass du damit arbeiten kannst. Gehe dafür wie folgt vor:
  1. Erstelle die HTML-Grundstruktur.
  2. Formatiere den Text mit Absätzen und Überschriften.
  3. Die Semesterzeiten, die Forschungsgruppen und die Tanz-Kurse sollen mit den passenden Listen-Typen formatiert werden.
  4. Die beiden Adressen sollen als Absätze formatiert werden, in der jede Zeile zwar eine eigenständige Zeile bildet, sich aber im gleichen Absatz befindet.
Aufgabe 2 - Text formatieren

Nachdem der Text strukturiert ist, kann er formatiert werden:

  1. Die Namen des Senders und des Empfängers sollen als wichtig (<strong>) markiert werden.
  2. Die verschiedenen Daten sollen auch vom Computer lesbar sein.
  3. Die Absende-Adresse und das Sende-Datum sollen als class-Attribut den Wert "sender-column" bekommen, das CSS-Stylesheet wird dafür sorgen, dass diese am rechten Rand orientiert sind.
  4. Die Abkürzungen sollen als solche markiert werden und sollen auch deren lange Form anzeigen.
  5. Die hoch- bzw. tiefgestellten Zahlen in den chemischen bzw. mathematischen Formeln sollen entsprechend formatiert werden.
  6. Das Grad-Zeichen und das Multiplikationssymbol sollen als die entsprechenden HTML-Entitäten eingefügt werden.
  7. Markiere mindestens zwei wichtige Worte in dem Text als wichtig und als hervorgehoben.
  8. Füge an den beiden entsprechenden Stellen Hyperlinks ein. Als Ziel sollen die Links auf http://www.example.com zeigen.
  9. Das Zitat des Universitätsmottos soll mit dem passenden Element hervorgehoben werden.
Aufgabe 3 - Meta-Daten

Zuletzt muss das Dokument noch mit Meta-Daten bestückt werden:

  1. Die Zeichenkodierung soll als „utf-8“ angegeben werden.
  2. Der Autor soll entsprechend angegeben werden.
  3. Das CSS-Style-Sheet soll referenziert werden.
  4. Gib dem Dokument einen passenden Titel.
HTML-Validator

Du kannst mit dem HTML-Validator überprüfen, ob dein Dokument fehlerfrei ist.

info/sek-ii/e1/html/l1-uebungen.txt · Zuletzt geändert: 2020-10-16 10:23 von christian.weber