Markierung eines Briefes

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. In dieser Aufgabe haben Sie einen Brief, den Sie markieren sollen, um Ihre HTML-Textformatierungsfähigkeiten sowie Hyperlinks und die korrekte Verwendung des HTML-<head>-Elements zu testen.

Voraussetzungen: Bevor Sie sich an dieser Bewertung versuchen, sollten Sie bereits folgende Themen bearbeitet haben: Erste Schritte mit HTML, Was ist im Head? Metadaten in HTML, HTML-Text-Grundlagen, Erstellen von Hyperlinks, und Erweiterte Textformatierung.
Ziel: Testen Sie grundlegende und erweiterte HTML-Textformatierung, die Verwendung von Hyperlinks und die Verwendung von HTML <head>.

Ausgangspunkt

Um zu beginnen, laden Sie den rohen Text herunter, den Sie markieren müssen und das CSS zur Gestaltung des HTML. Erstellen Sie eine neue .html-Datei mit Ihrem Texteditor oder verwenden Sie einen Online-Editor wie CodePen, JSFiddle oder Glitch.

Hinweis: Wenn Sie nicht weiterkommen, können Sie sich in einem unserer Kommunikationskanäle an uns wenden.

Projektbeschreibung

Für dieses Projekt ist es Ihre Aufgabe, einen Brief zu markieren, der auf einem Universitäts-Intranet gehostet werden muss. Der Brief ist die Antwort eines Wissenschaftlers auf eine Bewerbung eines zukünftigen Doktoranden an die Universität.

Block-/Strukturelle Semantik

  • Verwenden Sie eine geeignete Dokumentstruktur einschließlich Doctype und <html>, <head> und <body> Elemente.
  • Der Brief sollte im Allgemeinen als Gliederung von Überschriften und Absätzen markiert sein, mit der folgenden Ausnahme: Es gibt eine Hauptüberschrift („Betreff:“-Zeile) und drei zweite Ebene Überschriften.
  • Verwenden Sie einen geeigneten Listentyp, um die Semesterstarttermine, Studienfächer und exotische Tänze zu markieren.
  • Setzen Sie die beiden Adressen in <address>-Elemente. Jede Zeile der Adresse sollte in einer neuen Zeile stehen, jedoch nicht in einem neuen Absatz.

Inline-Semantik

  • Die Namen des Absenders und des Empfängers (und Tel und Email) sollten mit starker Wichtigkeit markiert werden.
  • Die vier Daten im Dokument sollten geeignete Elemente enthalten, die maschinenlesbare Daten bereitstellen.
  • Die erste Adresse und das erste Datum im Brief sollten ein class-Attribut mit dem Wert sender-column haben. Das später hinzugefügte CSS wird diese rechts ausrichten, wie es in einem klassischen Brieflayout sein sollte.
  • Markieren Sie die folgenden fünf Akronyme/Abkürzungen im Haupttext des Briefes — „PhD“, „HTML“, „CSS“, „BC“ und „Esq.“ — um Erweiterungen für jedes hinzuzufügen.
  • Die sechs Hoch-/Tiefstellungen sollten angemessen markiert werden — in den chemischen Formeln und den Zahlen 103 und 104 (sie sollten 10 hoch 3 und 4 sein).
  • Versuchen Sie, mindestens zwei geeignete Worte im Text mit starker Wichtigkeit/Betonung zu markieren.
  • Es gibt zwei Stellen, an denen der Brief einen Hyperlink haben sollte. Fügen Sie geeignete Links mit Titeln hinzu. Für den Ort, zu dem die Links führen, können Sie http://example.com als URL verwenden.
  • Markieren Sie das Universitätsmotto-Zitat und die Quelle mit geeigneten Elementen.

Der Head des Dokuments

  • Der Zeichensatz des Dokuments sollte mit dem entsprechenden Meta-Tag auf utf-8 gesetzt werden.
  • Der Autor des Briefes sollte in einem geeigneten Meta-Tag angegeben werden.
  • Das bereitgestellte CSS sollte in einem geeigneten Tag enthalten sein.

Hinweise und Tipps

  • Verwenden Sie den W3C HTML Validator, um Ihr HTML zu validieren. Belohnen Sie sich mit Bonuspunkten, wenn es validiert wird.
  • Sie müssen kein CSS kennen, um diese Aufgabe zu erledigen. Sie müssen das bereitgestellte CSS nur in ein HTML-Element einfügen.

Beispiel

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

Beispiel