Marking up a letter

Wir alle lernen früher oder später einen Brief zu schreiben; es ist auch ein nützliches Beispiel, um unsere Textformatierungsfähigkeiten zu testen! Sie erhalten einen Brief, mit dem Sie grundlegende und fortgeschrittene HTML-Formatierungsmöglichkeiten, einschließlich Hyperlinks, testen können und wir werden Ihre Vertrautheit mit einigen HTML <head> Inhalten testen.

Vorwissen: Bevor Sie diese Überprüfung durchführen, sollten Sie bereits Lernen Sie HTML kennen, Was gehört in den Kopf? Metadaten in HTML, Einfache Textformatierung mit HTML, Erstellen von Links, und Fortgeschrittene Textformatierung durchgearbeitet haben.
Ziel: Grundlegende und fortgeschrittene HTML-Textformatierung und Hyperlink-Fähigkeiten testen und wissen, was in den HTML <head> gehört.

Startpunkt

Um diese Aufgaben zu starten, rufen Sie den Rohtext auf, den Sie strukturieren sollen, sowie die CSS, die Sie in Ihre HTML einbinden müssen. Erstellen Sie die .html-Datei mit Ihrem Texteditor (oder nutzen Sie alternativ eine Seite wie JSBin oder Thimble, um die Aufgaben zu bearbeiten.)

Projekt: Kurzbeschreibung

In diesem Projekt ist Ihre Aufgabe, einen Brief zu gestalten, der in einem Universitäts-Intranet gehostet werden soll. Der Brief ist eine Antwort von einer Forschungskollegin an einen zukünftigen Doktoranden, der seine Arbeit an der Universität antritt.

Block-/Struktursemantik:

  • Bringen Sie das gesamte Dokument in eine sinnvolle Struktur, einschließlich Dokumententyp, <html>-, <head>- und <body>-Elementen.
  • The letter in general should be marked up with a structure of paragraphs and headings, with the exception of the below points. There is one top level heading (the "Re:" line) and three second level headings.
  • Die "semester start dates", "study subjects" und "exotic dances" sollen mit einem angemessenen Listentyp ausgezeichnet werden.
  • Die zwei Adressen können einfach in Paragraphen eingefügt werden. Das <address>-Element ist hierfür nicht geeignet — überlegen Sie, warum. Zusätzlich soll jede Zeile der Adresse in einer neuen Zeile sein, nicht aber in einem neuen Paragraphen.

Semantik innerhalb des Textes:

  • Die Namen von Sender und Empfänger (und "Tel" und "Email") sollen mit besonderer Wichtigkeit hervorgehoben werden.
  • Die vier Daten sollen mit geeigneten Elementen als maschinenlesbares Datum ausgezeichnet werden.
  • Die erste Adresse und das erste Datum des Briefes sollen ein Klassenattributwert von "sender-column" erhalten; das CSS, das Sie später ergänzen, wird später für die Rechtsbündigkeit sorgen, die sie in einem klassischen Brieflayout haben.
  • Die fünf Akronyme/Abkürzungen im Hauptteil des Textes sollen so ausgezeichnet werden, dass die ausgeschriebene Version des jeweiligen Akronyms bzw. der Abkürzung hinterlegt ist.
  • Die sechs Sub- und Superskripte sollen angemessen ausgezeichnet werden — in den chemischen Formeln sowie die Zahlen 103 und 104 (sie sollen am Ende die Zahlen 10 hoch 3 und 10 hoch 4 darstellen).
  • Das Grad-Symbol und Multiplikationssymbol sollen jeweils an den entsprechenden Stellen ausgezeichnet werden, indem Sie angemessene Entitäts-Referenzen benutzen.
  • Versuchen Sie, zumindest zwei geeignete Wörter innerhalb des Textes mit besonderer Wichtigkeit hervorzuheben.
  • An zwei Stellen soll ein Hyperlink ergänzt werden; fügen Sie gültige Links mit Titeln hinzu. Als Linkadresse verwenden Sie einfach http://example.com.
  • Das Universitätsmotto sowie das Zitat sollen mit geeigneten Elementen ausgezeichnet werden.

Der Kopf (head) des Dokumentes:

  • Der Zeichensatz des Dokumentes sollte in einem entsprechenden Meta-Tag auf utf8 festgelegt werden.
  • Der Autor des Briefes sollte in einem entsprechenden Meta-Tag festgehalten werden.
  • Die bereitgestellte CSS-Datei sollte in einem entsprechenden Tag eingebunden werden.

Hinweise und Tipps

  • Nutzen Sie den W3C HTML validator, um Ihre HTML zu prüfen; Sie erhalten Bonuspunkte, wenn die Validierung erfolgreich ist.
  • Sie benötigen keine CSS-Fähigkeiten, um diese Aufgaben zu bewältigen; Sie müssen lediglich die bereitgestellte CSS-Datei in ein HTML-Element einfügen.

Beispiel

Der nachfolgende Screenshot zeigt ein Beispiel dafür, wie der Brief nach der Auszeichnung aussehen könnte.

Example

Einschätzung

Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im Disskussionsthread zu dieser Übung nachfragen oder im #mdn IRC Channel auf Mozilla IRC. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!

In diesem Modul