Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

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:

  • Sie sollten das gesamte Dokument in eine sinnvolle Struktur bringen, 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.

Inline semantics:

  • Die Namen von Sender und Empfänger (und "Tel" und "Email") sollen mit besonderer Wichtigkeit hervorgehoben werden.
  • Die vier Daten sollen in geeigneten Elementen als maschinenlesbares Datum ausgezeichnet werden.
  • The first address and first date in the letter should be given a class attribute value of "sender-column"; the CSS you'll add later will then cause these to be right aligned, as should be the case in a classic letter layout.
  • The five acronyms/abbreviations in the main text of the letter should be marked up to provide expansions of each acronym/abbreviation.
  • The six sub/superscripts should be marked up appropriately — in the chemical formulae,  and the numbers 103 and 104 (they should be 10 to the power or 3 and 4, respectively).
  • The degree symbols and multiply symbols should be marked up using appropriate entity references.
  • Try to mark up at least two appropriate words in the text with strong importance/emphasis.
  • There are two places where a hyperlink should be added; add appropriate links with titles. For the location that the links point to, just use http://example.com.
  • The university motto quote and citation should be marked up with appropriate elements.

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

Schlagwörter des Dokuments und Mitwirkende

Schlagwörter: 
Mitwirkende an dieser Seite: DiscW0rld, LeniTastic, mdnwebdocs-bot, msifrt
Zuletzt aktualisiert von: DiscW0rld,