---
title: Marking up a letter
slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
tags:
  - Anfänger
  - Brief
  - HTML
  - Links
  - Text
  - head
translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
original_slug: Learn/HTML/Einführung_in_HTML/Marking_up_a_letter
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">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 <code>&lt;head&gt;</code> Inhalten testen.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Vorwissen:</th>
   <td>Bevor Sie diese Überprüfung durchführen, sollten Sie bereits <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a>, <a href="/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Was gehört in den Kopf? Metadaten in HTML</a>, <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a>, <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Erstellen von Links</a>, und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Fortgeschrittene Textformatierung</a> durchgearbeitet haben.</td>
  </tr>
  <tr>
   <th scope="row">Ziel:</th>
   <td>Grundlegende und fortgeschrittene HTML-Textformatierung und Hyperlink-Fähigkeiten testen und wissen, was in den HTML &lt;head&gt; gehört.</td>
  </tr>
 </tbody>
</table>

<h2 id="Startpunkt">Startpunkt</h2>

<p>Um diese Aufgaben zu starten, rufen Sie den <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">Rohtext auf, den Sie strukturieren sollen</a>, sowie die <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS</a>, die Sie in Ihre HTML einbinden müssen. Erstellen Sie die <code>.html</code>-Datei mit Ihrem Texteditor (oder nutzen Sie alternativ eine Seite wie <a class="external external-icon" href="http://jsbin.com/">JSBin</a> oder <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>, um die Aufgaben zu bearbeiten.)</p>

<h2 id="Projekt_Kurzbeschreibung">Projekt: Kurzbeschreibung</h2>

<p>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.</p>

<p>Block-/Struktursemantik:</p>

<ul>
 <li>Bringen Sie das gesamte Dokument in eine sinnvolle Struktur, einschließlich Dokumententyp, {{htmlelement("html")}}-, {{htmlelement("head")}}- und {{htmlelement("body")}}-Elementen.</li>
 <li>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.</li>
 <li>Die "semester start dates", "study subjects" und "exotic dances" sollen mit einem angemessenen Listentyp ausgezeichnet werden.</li>
 <li>Die zwei Adressen können einfach in Paragraphen eingefügt werden. Das {{htmlelement("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.</li>
</ul>

<p>Semantik innerhalb des Textes:</p>

<ul>
 <li>Die Namen von Sender und Empfänger (und "Tel" und "Email") sollen mit besonderer Wichtigkeit hervorgehoben werden.</li>
 <li>Die vier Daten sollen mit geeigneten Elementen als maschinenlesbares Datum ausgezeichnet werden.</li>
 <li>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.</li>
 <li>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.</li>
 <li>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).</li>
 <li>Das Grad-Symbol und Multiplikationssymbol sollen jeweils an den entsprechenden Stellen ausgezeichnet werden, indem Sie <a href="https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references">angemessene Entitäts-Referenzen</a> benutzen.</li>
 <li>Versuchen Sie, zumindest zwei geeignete Wörter innerhalb des Textes mit besonderer Wichtigkeit hervorzuheben.</li>
 <li>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.</li>
 <li>Das Universitätsmotto sowie das Zitat sollen mit geeigneten Elementen ausgezeichnet werden.</li>
</ul>

<p>Der Kopf (head) des Dokumentes:</p>

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

<h2 id="Hinweise_und_Tipps">Hinweise und Tipps</h2>

<ul>
 <li>Nutzen Sie den <a href="https://validator.w3.org/">W3C HTML validator</a>, um Ihre HTML zu prüfen; Sie erhalten Bonuspunkte, wenn die Validierung erfolgreich ist.</li>
 <li>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.</li>
</ul>

<h2 id="Beispiel">Beispiel</h2>

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

<p><img alt="Example" src="https://mdn.mozillademos.org/files/15811/Letter%20screengrab%202.png" style="border: 1px solid black; display: block; height: 1858px; margin: 0px auto; width: 931px;"></p>

<h2 id="Einschätzung">Einschätzung</h2>

<p>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 <a class="external external-icon" href="https://discourse.mozilla.org/t/structuring-a-page-of-content-assignment/24678" rel="noopener">Disskussionsthread zu dieser Übung</a> nachfragen oder im <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC Channel auf <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!</p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p>

<h2 id="In_diesem_Modul">In diesem Modul</h2>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
</ul>