diff options
Diffstat (limited to 'files/de/learn/html/introduction_to_html')
10 files changed, 3020 insertions, 0 deletions
diff --git a/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..1075d63f66 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,466 @@ +--- +title: Fortgeschrittene Textformatierung +slug: Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung +tags: + - Abkürzungen + - Beginner + - Beschreibungslisten + - Guide + - HTML + - Lernen + - Textformatierung + - Zitate +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Es gibt viele weitere Elemente in HTML zum formatieren von Text, die wir nicht in unserem Artikel <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a> abgedeckt haben. Die HTML-Elemente welche in diesem Artikel vorgestellt werden, werden nicht so oft benötigt. Es ist aber hilfreich diese zu kennen. Sie werden hier lernen wie man Zitate, Beschreibende Listen, Code und ähnliche Texte, sowie tiefer oder höher gestellte Zeichen ausgibt und noch mehr.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>Grundlegende HTML Kenntnisse, wie sie in den vorhergehenden Artikeln <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a> und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a> abgedeckt werden.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Kennenlernen von weniger bekannten HTML-Elementen, um Text anspruchsvoll zu formatieren.</td> + </tr> + </tbody> +</table> + +<h2 id="<dl>_-_Beschreibungslisten"><dl> - Beschreibungslisten</h2> + +<p>In Einführung in Textformatierung mit HTML haben wir Ihnen gezeigt, wie man einfache geordnete und ungeordnete Listen erstellt. Es gibt aber noch einen dritten Typ Listen, der nicht so oft Verwendung findet. Es handelt sich um <strong>Beschreibungslisten</strong> (engl.: "<strong>d</strong>escription <strong>l</strong>ists"). Mit dem <code>dl</code>-Element lässt sich eine Liste von Begriffen (<strong>l</strong>ist <strong>t</strong>erm) <code>lt</code> erstellen, welchen eine Beschreibung (engl. "<strong>d</strong>escription") <code>dd</code> hinzugefügt wird. Diese Art von Liste ist z.B. in Wörterbüchern zu finden, wo es zu einem bestimmten Begriff eine längere Beschreibung gibt. Lassen Sie uns in einem Beispiel anschauen, wie so eine beschreibende Liste genau aufgebaut ist. Hier haben wir eine noch unformatierte Liste, welche wir in eine Beschreibungsliste umwandeln wollen:</p> + +<pre>Innerer Monolog +Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht. +Monolog +Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung. +Beiseitesprechen +Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.</pre> + +<p>Beschreibungslisten werden vom {{htmlelement("dl")}};-Element eingeschlossen. Jeder Begriff ist in ein {{htmlelement("dt")}}-Element eingebettet, während die dazugehörige Beschreibung danach in einem {{htmlelement("dd")}}-Element hinzugefügt wird. Das sieht dann wie folgt aus:</p> + +<pre class="brush: html"><dl> + <dt>Innerer Monolog</dt> + <dd>Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.</dd> + <dt>Monolog</dt> + <dd>Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.</dd> + <dt>Beiseitesprechen</dt> + <dd>Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.</dd> +</dl></pre> + +<p>Browser stellen die Beschreibungen zu den Begriffen in den Beschreibungslisten normalerweise eingerückt dar. Hier auf MDN werden die Begriffe zusätzlich noch fett hervorgehoben.</p> + +<dl> + <dt>Innerer Monolog</dt> + <dd>Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.</dd> + <dt>Monolog</dt> + <dd>Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.</dd> + <dt>Beiseitesprechen</dt> + <dd>Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.</dd> +</dl> + +<p>Es ist möglich mehrere Beschreibungen zu einem einzigen Begriff anzugeben:</p> + +<dl> + <dt>Beiseitesprechen</dt> + <dd>Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters.</dd> + <dd>Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.</dd> +</dl> + +<h3 id="Aktives_Lernen_Eine_Beschreibungsliste_erstellen">Aktives Lernen: Eine Beschreibungsliste erstellen</h3> + +<p>Jetzt sind Sie dran: erstellen Sie eine Beschreibungsliste. Fügen Sie zu dem Text im <em>Input</em>-Feld unten die entsprechenden HTML-Elemente ein, so wie Sie es gerade gelernt haben. Im <em>Output</em>-Feld können Sie sehen, wie das Ergebnis im Browser angezeigt wird.</p> + +<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Bacon +Das was die Welt im Inneren zusammen hält. +Eier +Das was den Kuchen im Inneren zusammen hält. +Kaffee +Das Getränk welches die Welt am laufen hält. +Eine bräunliche Farbe, desto dunkler umso stärker. +</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<dl>\n <dt>Bacon</dt>\n <dd>Das was die Welt im Inneren zusammen hält.</dd>\n <dt>Eier</dt>\n <dd>Das was den Kuchen im Inneren zusammen hält.</dd>\n <dt>Kaffee</dt>\n <dd>Das Getränk welches die Welt am laufen hält. +</dd>\n <dd>Eine bräunliche Farbe, desto dunkler umso stärker.</dd>\n</dl>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_1', 700, 500) }}</p> + +<h2 id="Zitate">Zitate</h2> + +<p>Mit HTML lassen sich auch Zitate als solche Kennzeichnen. Sie können entweder Blockzitate verwenden oder aber im Fließtext direkt Zitate einbinden.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Zitat kann ins Englische sowohl als "quote" als auch als "citation" übersetzt werden. Beide englischen Wörter werden in HTML parallel genutzt, als "quote" für <code>blockquote</code> und <code>q</code> und die Abkürzung für "citation" <code>cite</code>.</p> +</div> + +<h3 id="<blockquote>_-_Blockzitate"><blockquote> - Blockzitate</h3> + +<p>Um ein Blockzitat (engl.: "blockquote") zu erstellen benutzen Sie das {{htmlelement("blockquote")}}-Element. Damit können Sie auf Blockebene ein Zitat erstellen, welches z.B. einen ganzen Absatz, eine Liste oder ähnliches enthält. Sie können mit einer URL auf die Quelle des Zitates verlinken, nutzen Sie dafür das {{htmlattrxref("cite","blockquote")}}-Attribut. Als Beispiel zeigen wir ein Blockzitat von der MDN-Seite über das <code><blockquote></code>-Element:</p> + +<pre class="brush: html"><p>Das <strong>HTML <code><blockquote></code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.</p></pre> + +<p>Um dies in ein Blockzitat zu verwandeln, machen wir einfach folgendes:</p> + +<pre class="brush: html"><blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> + <p>Das <strong>HTML <code><blockquote></code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.</p> +</blockquote></pre> + +<p>Browsers werden ein Blockzitat standardmäßig einrücken, um es als Zitat zu kennezichnen. Hier auf MDN macht es das auch, aber der Stil wurde noch etwas mehr verändert:</p> + +<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> +<p>Das <strong>HTML <code><blockquote></code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.</p> +</blockquote> + +<h3 id="<q>_-_Inline_Zitate"><q> - Inline Zitate</h3> + +<p>Inline Zitate (Zitat = engl.: "<strong>q</strong>uote") funktionieren ganz ähnlich. Wir benutzen das {{htmlelement("q")}}-Element, um diese zu kennzeichnen. Unser Beispiel unten enthält ein Zitat von der <code><q></code>-Seite:</p> + +<pre class="brush: html"><p>Das Zitat-Element — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/q"> indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.</q></p></pre> + +<p>Browser werden ein Zitat als normalen Text, welcher in Anführungszeichen eingepackt ist, anzeigen:</p> + +<p>Das Zitat-Element — <code><q></code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.</q></p> + +<h3 id="<cite>_-_Quellenangabe"><cite> - Quellenangabe</h3> + +<p>Der Inhalt des {{htmlattrxref("cite","blockquote")}}-Attributs scheint hilfreich zu sein, leider ist es aber so das Browser, Bildschirmlesegeräte und dergleichen nicht viel damit machen können. Es gibt keinen Weg den Inhalt des <code>cite</code>-Attributs anzuzeigen, ohne eine eigene Lösung mittels JavaScript oder CSS zu schreiben. Wenn Sie die Quelle für den Leser zugägnlich machen wollen, dann benutzen Sie besser das {{htmlelement("cite")}}-Element. Eigentlich sollte darin der Name der zitierten Quelle stehen - also der Name des Buches oder der Person - aber es gibt keinen Grund warum man nicht einen Link hier einfügen kann. Das sieht dann so aus:</p> + +<pre class="brush: html"><p>Auf der <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote"> +<cite>MDN blockquote-Seite</cite></a> steht: +</p> + +<blockquote cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote"> + <p>Das <strong>HTML <code>&lt;blockquote&gt;</code>-Element</strong> (oder <em>HTML Block + Quotation Element</em>) indiziert, dass es sich bei dem eingeschlossenen Text um ein erweitertes Blockzitat handelt.</p> +</blockquote> + +<p>Das <code>&lt;q&gt;</code>-Element — ist <q cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/q">indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt. +Das <code>&lt;q&gt;</code>-Element -- <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/q"> +<cite>MDN q Seite</cite></a>.</p></pre> + +<p>Die <code>cite</code>-Elemente werden standardmäßig in kursiver Schrift angezeigt. Sie können diesen Code auch auf GitHub als <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a> Beispiel anschauen.</p> + +<h3 id="Aktives_lernen_Wer_hat_das_gesagt">Aktives lernen: Wer hat das gesagt?</h3> + +<p>Es ist Zeit für eine weitere Übung! Bitte lösen Sie die folgenden Aufgaben:</p> + +<ol> + <li>Ändern Sie den mittleren Absatz in ein Blockzitat, weches ein <code>cite</code>-Attribut besitzt.</li> + <li>Ändern Sie einen Teil des dritten Absatzes in ein Inline Zitat, welches ebenfalls ein <code>cite</code>-Attribut besitzt.</li> + <li>Fügen Sie jedem Link ein <code><cite></code>-Element hinzu.</li> +</ol> + +<p>Suchen Sie selbst online nach den richtigen Quellen für diese Zitate.</p> + +<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><p>Hallo und willkommen zu meiner Motivations-Webseite. Wie Konfuzius einmal sagte:</p> + +<p>It does not matter how slowly you go as long as you do not stop. Auf deutsch: Es ist egal wie langsam du gehst, so lange du nicht anhältst.</p> + +<p>Ich mag auch das Konzept des positiven Denkens und versuche negative Selbstkritik zu vermeiden (wie im Artikel "The Need To Eliminate Negative Self Talk" in Affirmations for Positive Thinking erklärt wird).</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<p>Hallo und willkommen zu meiner Motivations-Webseite. Wie <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Konfuzius</cite></a> einmal gesagt hat:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>It does not matter how slowly you go as long as you do not stop. Auf deutsch: Es ist egal wie langsam du gehst, so lange du nicht anhältst.</p>\n</blockquote>\n\n<p>Ich mag auch das Konzept des positiven Denkens und versuche negative Selbstkritik zu vermeiden (wie im Artikel <q cite="http://www.affirmationsforpositivethinking.com/index.htm">The Need To Eliminate Negative Self Talk</q> in <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a> erklärt wird).</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> + +<h2 id="<abbr>_-_Abkürzungen"><abbr> - Abkürzungen</h2> + +<p>Ein weiteres Element, welches man öfters auf Webseiten findet ist {{htmlelement("abbr")}}. Es wird genutzt, um Abkürzungen zu kennzeichnen und die volle Schreibweise der Abkürzung zur Verfügung zu stellen. Die volle Schreibweise wird in dem Element als {{htmlattrxref("title")}}-Attribut angegeben. Hier ein paar Beispiele:</p> + +<pre><p>Wir benutzen <abbr title="Hypertext Markup Language">HTML</abbr>, um ein Webdokument zu strukturieren.</p> + +<p>Ich denke <abbr title="Doktor">Dr.</abbr> Green war in der Küche mit der Kettensäge.</p></pre> + +<p>Dies wird wie folgt im Browser ausgegeben (der volle Text der Abkürzungen wird angezeigt, wenn der Mauszeiger darüber gefahren wird):</p> + +<p>Wir nutzen <abbr title="Hypertext Markup Language">HTML</abbr>, um ein Webdokument zu strukturieren.</p> + +<p>Ich denke <abbr title="Doktor">Dr.</abbr> Green war in der Küche mit der Kettensäge.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Es gibt ein weiteres Element, {{htmlelement("acronym")}}, welches das selbe tut wie <code><abbr></code>, nur das es Acronyme kennzeichnen sollte. Es wird aber kaum genutzt und von Browsern wird es nicht so gut unterstüzt. Es ist also besser nur noch <code><abbr></code> zu nutzen.</p> +</div> + +<h3 id="Aktives_lernen_Eine_Abkürzung_kennzeichnen">Aktives lernen: Eine Abkürzung kennzeichnen</h3> + +<p>In dieser kleinen Lernübung, möchten wir, das Sie eine Abkürzung als solche Kennzeichnen. Sie können das Beispiel unten benutzen oder es durch ein eigenes ersetzen.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><p>Die NASA bringt uns den Sternen näher.</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 5em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> bringt uns den Sternen näher.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p> + +<h2 id="Kontaktdaten_markieren">Kontaktdaten markieren</h2> + +<p>HTML hat ein Element, um Kontaktdaten zu markieren — {{htmlelement("address")}}. Beispiel:</p> + +<pre class="brush: html"><address> + <p>Chris Mills, Manchester, The Grim North, UK</p> +</address></pre> + +<p>Eine Sache die man sich merken sollte ist, dass das <address>-Element dafür gedacht ist, die Kontaktdaten der Person zu markieren, welche den HTML-Code geschrieben hat, nicht irgendeine Adresse. Das obige Beispiel wäre nur ok, wenn Chris tatsächlich das Dokument geschrieben hat, in dem die Adresse zu finden ist. Das folgende wäre aber auch in Ordnung:</p> + +<pre class="brush: html"><address> + <p>Webseite erstellt von <a href="../authors/chris-mills/">Chris Mills</a>.</p> +</address></pre> + +<h2 id="Hochstellen_und_tiefstellen_von_Text">Hochstellen und tiefstellen von Text</h2> + +<p>Manchmal brauchen sie hochgestellten oder tiefgestellten Text. Für hochgestellten Text (engl.: superscript) gibt es das HTML-Element {{htmlelement("sup")}}. Für tiefergestellten Text (engl.: subscript) gibt es das Element {{htmlelement("sub")}}. Beispiel:</p> + +<pre class="brush: html"><p>My birthday is on the 25<sup>th</sup> of May 2001.</p> +<p>Die chemische Formel von Koffein ist C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> +<p>Wenn x<sup>2</sup> gleich 9 ist, dann muss x gleich 3 oder -3 sein.</p></pre> + +<p>Der Code wird wie folgt gerendert:</p> + +<p>My birthday is on the 25<sup>th</sup> of May 2001.</p> + +<p>Die chemische Formel von Koffein ist C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> + +<p>Wenn x<sup>2</sup> gleich 9 ist, dann muss x gleich 3 oder -3 sein.</p> + +<h2 id="Computercode_darstellen">Computercode darstellen</h2> + +<p>Es gibt ein paar Elemente mit denen man Computercode darstellen kann:</p> + +<ul> + <li>{{htmlelement("code")}}: Um normalen Computercode darzustellen.</li> + <li>{{htmlelement("pre")}}: Um Leerzeichen mit darzustellen, welche im Code genutzt werden, um Codeblöcke voneinander abzugrenzen. Normalerweise würde der Browser mehr als 1 Leerzeichen ignorieren und zu einem einzigen zusammen fassen, wenn der Text in <code><pre></pre></code> Tags eingepackt ist, dann bleiben die Leerzeichen erhalten.</li> + <li>{{htmlelement("var")}}: Um Variabelnamen zu markieren.</li> + <li>{{htmlelement("kbd")}}: Um Tastatureingaben darzustellen.</li> + <li>{{htmlelement("samp")}}: Um das Ergebnis eines Computerprogramms zu markieren.</li> +</ul> + +<p>Schauen wir uns ein paar Beispiele an. Hiermit können Sie ein wenig herum experimentieren (sie können auch diese Kopie davon herunterladen <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p> + +<pre class="brush: html"><pre><code>var para = document.querySelector('p'); + +para.onclick = function() { + alert('Au, hör auf mich zu drücken!!'); +}</code></pre> + +<p>Sie sollten nicht zu repräsentative Elemente benutzen, wie <code>&lt;font&gt;</code> und <code>&lt;center&gt;</code>.</p> + +<p>In dem obigen JavaScript Beispiel, repräsentiert <var>para</var> ein p-Element.</p> + + +<p>Markieren Sie den ganzen Text mit <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p> + +<pre>$ <kbd>ping mozilla.org</kbd> +<samp>PING mozilla.org (63.245.215.20): 56 data bytes +64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre></pre> + +<p>Der obige Code sollte im Browser folgendermaßen aussehen:</p> + +<p>{{ EmbedLiveSample('Computercode_darstellen','100%',300) }}</p> + +<h2 id="Zeit_und_Datum_markieren">Zeit und Datum markieren</h2> + +<p>HTML stellt auch das {{htmlelement("time")}} zur Verfügung, um Zeit und Datum so darzustellen, das auch Computer diese lesen können. Beispiel:</p> + +<pre class="brush: html"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 Januar 2016</<span class="pl-ent">time</span>></pre> + +<p>Wieso ist das nützlich? Deswegen, weil Menschen auf viele verschiedene Weisen ein Datum wiedergeben. Das obige Datum könnte auch wie folgt geschrieben sein:</p> + +<ul> + <li>20 Januar 2016</li> + <li>20th Januar 2016</li> + <li>Jan 20 2016</li> + <li>20/06/16</li> + <li>06/20/16</li> + <li>The 20th of next month</li> + <li><span lang="fr">20e Janvier 2016</span></li> + <li><span lang="ja">2016年1月20日</span></li> + <li>Und so weiter</li> +</ul> + +<p>Ein Computer kann nicht so einfach erkennen, das immer das selber Datum gemeint ist. Wenn man also automatisch alle Datumsangaben von einer Webseite erfassen möchte, um diese zum Beispiel in einem Kalender zu nutzen, dann braucht man eine einheiltiche Schreibweise für den Computer. Mit dem {{htmlelement("time")}}-Element können Sie an eine beliebige Datumsschreibweise, eine einfache, für den Computer lesbare Form anhängen.</p> + +<p>Das grundlegende Beispiel oben zeigt ein einfaches, vom Computer lesbares Datum. Aber es gibt mehr verschiedene Optionen, zum Beispiel:</p> + +<pre class="brush: html"><!-- Jahr-Monat-Tag --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 Januar 2016</<span class="pl-ent">time</span>> +<!-- Nur Jahr und Monat --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>>January 2016</<span class="pl-ent">time</span>> +<!-- Nur Monat und Tag --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>>20 January</<span class="pl-ent">time</span>> +<!-- Nur die Zeit, Stunden:Minuten --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>>19:30</<span class="pl-ent">time</span>> +<!-- Man kann auch Sekunden und Millisekunden angeben! --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>>19:30:01.856</<span class="pl-ent">time</span>> +<!-- Datum und Uhrzeit --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>>7.30pm, 20 January 2016</<span class="pl-ent">time</span>> +<!-- Datum und Uhrzeit mit Zeitzone --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>>7.30pm, 20 Januar 2016 ist 8.30pm in Frankreich</<span class="pl-ent">time</span>> +<!-- Eine bestimmte Wochennummer angeben--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>>Die vierte Woche im Jahr 2016</<span class="pl-ent">time</span>></pre> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Dies ist alles, was Sie über Textstrukturierung in HTML wissen müssen. Es gibt ntürlich noch mehr HTML-Elemente für die Darstellung und Strukturierung von Texten, aber die gebräuchlisten haben wir nun in diesem Kurs abgedeckt. Falls Sie dennoch daran interessiert sind wirklich alle Elemente zur Textgestlaltung kennen zu lernen, dann schauen Sie in unserer <a href="/de/docs/Web/HTML/Element">HTML-Element Referenz</a> nach, denn dort sind alle HTML-Elemente aufgelistet.<br> + Im nächsten Artikel geht es darum, Struktur in unser ganzes HTML-Dokument zu bringen, wie man verschiedene Bereiche einer Webseite bestimmt und diese ausrichtet. Lesen Sie weiter!</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..d27bf253a4 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,317 @@ +--- +title: Erstellen von Hyperlinks +slug: Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks +tags: + - Beginner + - Guide + - HTML + - Learn + - Links + - Title + - absolute + - hyperlinks + - relativ + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Hyperlinks, kurz Links, sind ein wichtiger Teil des Internets, denn sie machen erst ein Netzwerk daraus. In diesem Artikel zeigen wir Ihnen wie man einen Link erstellt und stellen benutzerfreundliche Anwendungsbeispiele vor.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>Grundlegende Kenntnisse in HTML und Textformatierung, wie Sie in den Artikeln <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lerne HTML kennen</a> und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformattierung mit HTML</a> abgedeckt werden.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Lernen wie man sinnvoll Hyperlinks einsetzt.</td> + </tr> + </tbody> +</table> + +<h2 id="Was_ist_ein_Hyperlink">Was ist ein Hyperlink?</h2> + +<p>Hyperlinks sind eine der Erfindungen, welche das <em>Internet</em> zu einem einzigen zusammenhängenden Netzwerk machen. Sie sind von Beginn an ein Teil des Netzes (engl. "<em>web</em>") und definieren dieses, indem sie uns erlauben von einem Dokument auf ein anderes Dokument (oder eine andere Quelle) zu verweisen. Auch auf bestimmte Inhalte einer Webseite kann direkt verlinkt werden, genauso wie auch auf Apps per Hyperlink verwiesen werden kann. Fast alles im Internet kann zu einem Link konvertiert werden und mit diesem kann die entsprechende Web-Adresse ({{glossary("URL")}}) im Internet von einem Browser gefunden werden.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Eine URL kann auf HTML-Dateien, Textdateien, Bilder, Dokumente, Video- oder Audiodateien verweisen und auf alles andere, was im Internet präsentiert werden kann. Wenn der Browser nicht weiß, wie er mit einer Datei umgehen soll, fragt er nach, ob die Datei geöffnet werden soll, wodurch das öffnen der Datei an ein anderes Programm auf dem Computer abgegeben wird, oder ob sie herunter geladen werden soll, damit man später diese Datei lokal nutzen kann.</p> +</div> + +<p>Die Webseite von BBC enthält zum Beispiel eine große Anzahl an Links, welche auf verschiedene Nachrichtenartikel verweisen, aber auch zu verschiedenen Bereichen der Website (Navigation), Login/Registrations-Seiten (für Benutzeraccounts) und mehr.</p> + +<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Aufbau_eines_Links">Aufbau eines Links</h2> + +<p>Ein Link wird ganz einfach erstellt indem man Text, oder auch andere Inhalte, in ein {{htmlelement("a")}}-Element verschachtelt. Diesem Element muss auch noch das {{htmlattrxref("href", "a")}}-Attribut beigefügt werden, welches als Wert die Ziel-Webadresse enthält auf die man verweisen möchte.</p> + +<pre class="brush: html"><p>Ich erstelle einen Link zu der +<a href="https://www.mozilla.org/en-US/"> Mozilla Webseite</a>. +</p></pre> + +<p>Dies gibt das folgende Resultat:</p> + +<p>Ich erstelle einen Link zu der <a class="ignore-external" href="https://www.mozilla.org/en-US/">Mozilla Webseite</a>.</p> + +<h3 id="Das_title-Attribut">Das <code>title</code>-Attribut</h3> + +<p>Ein weiteres Attribut welches Sie ihren Links womöglich hinzufügen möchten ist <code>title</code>. Darin können Sie Zusatzinformationen zu dem Link angeben. Als Beispiel:</p> + +<pre class="brush: html"><p>Ich erstelle einen Link zu der +<a href="https://www.mozilla.org/en-US/" + title="Der beste Ort um mehr über Mozilla zu lernen und wie jeder dazu beitragen kann">Mozilla Webseite</a>. +</p></pre> + +<p>Das gibt das folgende Resultat (der Text aus dem <code>>title<</code>-Attribut wird als Tooltip angezeigt, wenn man mit dem Mauszeiger darüberfährt):</p> + +<p>Ich erstelle einen Link zu der <a class="ignore-external" href="https://www.mozilla.org/en-US/" title="Der beste Ort um mehr über Mozilla zu lernen und wie jeder dazu beitragen kann">Mozilla Webseite</a>.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Der Text aus dem <code>>title<</code>-Attribut wird nur durch den Mauszeiger angezeigt, was bedeutet, das Leute die nur die Tastatur benutzen oder Tablet/Smartphone Benutzer, diese Information nicht angezeigt bekommen. Wenn es sich also um eine wichtige Information handelt, wäre es wohl besser diese im normalen Text unterzubringen.</p> +</div> + +<h3 id="Aktives_Lernen_Erstellen_Sie_Ihren_einen_Hyperlink">Aktives Lernen: Erstellen Sie Ihren einen Hyperlink</h3> + +<p>Es ist Zeit das gelernte in die Praxis umzusetzen: Erstellen Sie bitte ein neues HTML-Dokument lokal in Ihrem Code-Editor. (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">das Dokument könnte so aussehen</a>)</p> + +<ul> + <li>Erstellen Sie innerhalb des <code>body</code>-Elements ein paar Absätze oder andere Inhalte, so wie Sie es in den vorherigen Artikeln gelernt haben.</li> + <li>Machen Sie aus einigen der Inhalte nun Hyperlinks.</li> + <li>Ergänzen Sie <code>title</code>-Attribute.</li> +</ul> + +<h3 id="Blockelemente_als_Links">Blockelemente als Links</h3> + +<p>Wie oben schon erwähnt, können Sie fast alle Inhalte in Links umwandeln, auch <a href="/de/Learn/HTML/Einf%C3%BChrung_in_HTML/Lerne_HTML_kennen#Blockelemente_und_Inlineelemente">Blockelemente</a> könne als Verweise fungieren. So könne Sie zum Beispiel ein Bild in einen Link umwandeln indem Sie es in <code><a></a></code> Tags einbetten.</p> + +<pre class="brush: html"><a href="https://www.mozilla.org/de/"> + <img src="mozilla-image.png" alt="Mozilla Logo welches zur Mozilla Webseite verlinkt"></a> +</pre> + +<p class="note"><strong>Hinweis</strong>: Sie werden mehr über das Einbinden von Bildern auf Webseiten in einem späteren Artikel erfahren.</p> + +<h2 id="Kurzer_Exkurs_zu_URLs_und_Linkpfaden">Kurzer Exkurs zu URLs und Linkpfaden</h2> + +<p>Um Linkziele vollständig zu verstehen, müssen Sie zuerst lernen wie URLs und Dateipfade funktionieren.</p> + +<p>Eine URL (engl.: Uniform Resource Locator) ist einfach ein String aus Text der definiert wo etwas im Internet zu finden ist. Zum Beispiel ist Mozillas deutsche Webseite unter <code>https://www.mozilla.org/de/</code> zu finden.</p> + +<p>URLs benutzen Dateipfade um Dateien zu finden. Diese Pfade geben an, wo in einem Dateisystem eine bestimmte Datei abgelegt ist. Lassen Sie uns ein einfaches Beispiel einer Dateistruktur anschauen (schauen Sie die Struktur von <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">Erstellen von Hyperlinks</a> an).</p> + +<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>Das <strong>Stammverzeichnis</strong>, englisch <strong>root (=> Wurzel)</strong>, dieses Verzeichnisses wurde <code>creating-hyperlinks</code> benannt. Wenn Sie lokal an einer Webseite arbeiten, dann haben Sie ein Verzeichnis (einen Ordner), in dem die ganzen Dateien für diese Webseite abgelegt sind. In diesem Stammverzeichnis hier haben wir eine <code>index.html</code> und eine <code>contacts.html</code>-Datei. Auf einer echten Webseite wäre <code>index.html</code> die Startseite, also die Einstiegsseite zu unserer Internetpräsenz.</p> + +<p>Es gibt auch zwei Verzeichnisse in unserem Stammverzeichnis, namens <code>pdfs</code> und <code>projects</code>. Diese enthalten jeweils eine einzelne Datei, einmal eine PDF-Datei (<code>project-brief.pdf</code>) und eine <code>index.html</code>-Datei. Sie sehen, man kann mehrere <code>index.html</code>-Dateien in einem Webprojekt haben, so lange diese in unterschiedlichen Verzeichnissen sind. Die zweite <code>index.html</code>-Datei könnte hier als Einstiegsseite zu projektbezogenen Informationen dienen.</p> + +<ul> + <li> + <p><strong>Verlinkung im selben Verzeichnis</strong>: Wenn Sie von der <code>index.html</code>-Datei einen Link zu der <code>contacts.html</code>-Datei setzen möchten, welche beide im selben Verzeichnis sind, dann müssen Sie nur den Dateinamen angeben. Die URL die Sie zur Verlinkung benutzen ist also <code>contacts.html</code>:</p> + + <pre class="brush: html"><p>Möchten Sie Kontakt mit uns augfnehmen? +Finden Sie unsere Kontaktinformationen auf unserer <a href="contacts.html">Kontakt-Seite</a>.</p></pre> + </li> + <li> + <p><strong>Verlinkung in ein Unterverzeichnis</strong>: Wenn Sie von der <code>index.html</code>-Datei im Stammverzeichnis mit einem Link auf die <code>index.html</code>-Datei verweisen möchten, welche in dem Unterverzeichnis <code>projects</code> liegt, dann schreiben Sie das in der URL folgendermaßen: <code>projects/index.html</code> Die Adresse besteht aus dem Namen des Unterverzeichnis, einem Slash und der Zieldatei in dem Verzeichnis:</p> + + <pre class="brush: html"><p>Besuchen Sie meine <a href="projects/index.html">Projekt Homepage</a>.</p></pre> + </li> + <li> + <p><strong>Verlinkung in ein höheres Verzeichnis</strong>: Wenn Sie einen Hyperlink von der <code>projects/index.html</code>-Datei zu der <code>pdfs/projects-brief.pdf</code>-Datei setzen möchten, dann müssen Sie ein Verzeichnislevel hoch gehen, um von dort in das Verzeichnis <code>pdfs</code> zu gelangen. Sie gehen in der Verzeichnisstruktur hoch, indem Sie zwei Punkte angeben - <code>..</code>. Die vollständige URL würde als wie folgt aussehen: <code>../pdfs/projects-brief.pdf</code></p> + + <pre class="brush: html"><p>Ein Link zu meiner <a href="../pdfs/project-brief.pdf">Projektbeschreibung</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Hinweis</strong>: Sie können mehrere Schritte kombinieren und so komplexe URL-Pfade angeben, zum Beispiel <code>../../../komplexer/pfad/zu/meiner/datei.html</code>.</p> +</div> + +<h3 id="Innerhalb_eines_Dokuments_verlinken">Innerhalb eines Dokuments verlinken</h3> + +<p>Es ist möglich innerhalb eines HTML Dokumentes zu einem bestimmten Abschnitt einen Link zu setzen und nicht nur zu dem Dokument selbst. Um dies zu bewerkselligen, müssen Sie erst dem HTML-Element, welches Sie als Linkziel benutzen wollen, ein {{htmlattrxref("id")}}-Attribut geben. +Oft macht es Sinn zu einer bestimmten Überschrift im Dokument zu verlinken. In der Praxis würde das wie folgt aussehen: +</p> + +<pre class="brush: html"><h2 id="postanschrift">Postanschrift</h2></pre> + +<p>Um zu dieser bestimmten <code>id</code> zu verlinken, können Sie diese am Ende der URL angeben. Sie müssen nur ein Hash- bzw. Rautesymbol davorsetzen, zum Beispiel so:</p> + +<pre class="brush: html"><p>Möchten Sie uns einen Brief schicken? Schreiben Sie an unsere <a href="contacts.html#postanschrift">Postanschrift</a>.</p></pre> + +<p>Sie können diese Art der Referenz auch benutzen, um <em>innerhalb des selben Dokumentes zu verlinken</em>:</p> + +<pre class="brush: html"><p>Unsere <a href="#postanschrift">Postanschrift</a> kann am Ende der Webseite gefunden werden. </p></pre> + +<h3 id="Absolute_und_relative_URLs">Absolute und relative URLs</h3> + +<p>Zwei Begriffe denen Sie im Internet begegnen werden sind <strong>absolute URL</strong> und <strong>relative URL:</strong></p> + +<p><strong>Absolute URL</strong>: Leitet zu einer absoluten, festen Adresse im Internet, inklusive {{glossary("protocol")}} und {{glossary("domain name")}}. Wenn zum Beispiel die HTML-Datei <code>index.html</code> in ein Verzeichnis namens <code>projects</code> hochgeladen wird, welches wiederum im Stammverzeichnis eines Webservers liegt und der Domain Name der Webseite <code>http://www.example.com</code> ist, dann lautet die absolute Adresse der Webseite <code>http://www.example.com/projects/index.html</code>.</p> + +<p>Die absolute URL wird immer zu genau der selben Adresse im Internet zeigen, egal wo sie sich befindet.</p> + +<p><strong>Relative URL</strong>: Zeigt zu einem Verzeichnis <em>realtiv</em> zu der Datei, in welcher der Link steht, so wie wir es weiter oben im Artikel gemacht haben. Wenn wir zum Beispiel von der Datei <code>http://www.example.com/projects/index.html</code> zu einer PDF-Datei im selben Verzeichnis verlinken möchten, dann brauchen wir nur den Dateinamen angeben (z.B.: <code>project-brief.pdf</code>). Wenn diese PDF-Datei in dem Unterverzeichnis <code>pdfs</code> liegt, welches wiederum in dem Verzeichnis <code>projects</code> zu finden ist, dann würde die relative Adresse wie folgt aussehen: <code>pdfs/project-brief.pdf</code>. Die äquivalente absolute Adresse für die PDF-Datei wäre <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> + +<p>Eine relative URL zeigt auf unterschiedliche Orte, je nachdem wo sich die Datei befindet, in welcher der Link untergebracht ist. Wenn wir zum Beispiel unsere <code>index.html</code>-Datei aus dem <code>projects</code> Verzeichnis in das Stammverzeichnis der Webseite verschieben würden, dann würde die relative URL <code>pdfs/project-brief.pdf</code> darin auf <code>http://www.example.com/pdfs/project-brief.pdf</code> verweisen und nicht mehr auf <code>http://www.example.com/projects/pdfs/project-brief.pdf</code> +</p> + +<h2 id="Nutzen_von_Links">Nutzen von Links</h2> + +<p>Wie man Links am besten benutzt und ein angenehmes Nutzererlebnis schafft, werden wir uns nun anschauen.</p> + + +<h3 id="Klare_Benennung_von_Links">Klare Benennung von Links</h3> + +<p>Es ist einfach ein paar Links auf eine Webseite zu setzen. Aber das ist nicht genug. Wir müssen dafür sorgen, das alle Benutzer der Webseite diese Links auch benutzen können, egal mit welchem Gerät sie auf die Seite zugreifen. Zum Nachdenken:</p> + +<ul> + <li>Benutzer von Bilschirmlesegeräten springen von Link zu Link auf der Webseite und diese werden ohne Zusammenhang vorgelesen.</li> + <li>Suchmaschinen benutzen Linktext um die Zieldateien zu indexieren, es ist also gut, wenn der Linktext Schlagwörter enthält die mit dem Inhalt des verlinkten Dokumentes zu tun haben.</li> + <li>Leser der Webseite scannen die Webseite zuerst durch, anstatt sie direkt Wort für Wort zu lesen. Dabei werden die Augen von hervorgehobenem Text, wie zum Beispiel Links angezogen. Beschreibender Linktext ist sinnvoll, zum schnellen Verständnis worum es auf der Webseite geht.</li> +</ul> + +<p>Schauen wir uns ein Beispiel an:</p> + +<p><em><strong>Guter</strong> Linktext:</em> <a href="https://firefox.com">Firefox herunterladen</a></p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Firefox herunterladen +</a></p></pre> + +<p><em><strong>Schlechter</strong> Linktext:</em> <a href="https://firefox.com/">Klicke hier</a> um Firefox herunterzuladen</p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Klicke hier +</a> +um Firefox herunterzuladen</p> +</pre> + +<p>Weitere Tipps:</p> + +<ul> + <li>Wiederholen Sie nicht die URL als Teil des Linktextes, URLs sehen nicht schön aus und Bildschirmlesegeräte geben diese Buchstabe für Buchstabe aus.</li> + <li>Schreiben Sie nicht "Link" oder "Link zu" in ihrem Linktext. Bildschirmlesegeräte sagen das es sich um einen Link handelt und der Link ist normalerweise als solcher gut zu erkennen. Denn Links sind normalerweise auf eine Weise gestaltet, die sie von der Umgebung absetzt, in einer anderen Farbe und unterstrichen. Diese Konvention sollte auch beibehalten werden, Links sollten immer als solche auf den ersten Blick zu erkennen sein.</li> + <li>Halten Sie den Linktext so kurz wie möglich - lange Linktexte sind besonders für Benutzer von Bildschirmlesegeräten nervend, denn der Linktext wird immer komplett vorgelesen.</li> + <li>Vermeiden Sie es den selben Linktext für mehrere Links zu benutzen, die auf unterschiedliche Dokumente verweisen. Benutzer von Bildschirmlesegeräten wird die Navigation erschwert, wenn ihnen mehrmals der Linktext "Klicken Sie hier" vorgelesen wird.</li> +</ul> + +<h3 id="Benutzen_Sie_relative_Links">Benutzen Sie relative Links</h3> + +<p>Von einem vorangehenden Absatz bekommen Sie vielleich die Idee, dass es gut ist, nur absolute Links zu verwenden, da diese nicht zu toten Links werden können, wenn die Webseite verschoben wird, im Gegensatz zu relativen Links. Es ist aber besser relative Links zu benutzen, wenn Sie innerhalb der <em>selben Webseite</em> verlinken. Um eine <em>andere Webseite</em> zu verlinken müssen Sie natürlich absolute Links benutzen.</p> + +<ul> + <li>Zum einen ist es einfacher den Code später zu lesen und verstehen, denn relative URLs sind meistens viel kürzer als absolute URLs.</li> + <li>Zum anderen ist es effizienter relative URLs zu benutzen und die Webseite wird insgesamt schneller. Wenn Sie eine absolute URL benutzen, dann wird der Browser eine Anfrage an den Domain Name Server ({{glossary("DNS")}} senden, um herauszufinden, wo die Webseite zu finden ist, was Zeit und Ressourcen in anspruch nimmt (lesen Sie <a href="/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Wie das Internet funktioniert</a> um mehr darüber zu erfahren). +Bei einer relativen URL schaut der Browser direkt auf dem selben Server nach der Datei, was um einiges schneller geht, als den Umweg über DNS zu gehen.</li> +</ul> + +<h3 id="Klare_Verlinkung_zu_Dateien_die_keine_HTML-Dateien_sind">Klare Verlinkung zu Dateien die keine HTML-Dateien sind</h3> + +<p>Wenn Sie zu etwas anderem als einer anderen Webseite verlinken, zum Beispiel einer herunterladbaren Datei (ein PDF oder ein Word-Dokument) oder einem Stream (Video oder Audio) oder ähnlichem, welches unerwartete Effekte hat, wie PopUp-Fenster oder Flash-Animationen, dann sollten Sie das im Linktext deutlich kennzeichnen. Es kann nämlich sehr nervend sein, wenn folgendes passiert:</p> + +<ul> + <li>Wenn Sie eine langsame Internetverbindung haben, einen Link anklicken und auf einmal eine mehrere Megabyte große Datei heruntergeladen wird.</li> + <li>Wenn Sie keinen Flashplayer installiert haben, auf einen Link klicken und auf einmal auf einer Webseite sind, auf der Flash genutzt wird.</li> +</ul> + +<p>Lassen Sie uns ein paar Beispiele anschauen, was für ein Linktext hier genutzt werden kann:</p> + +<pre class="brush: html"><p><a href="http://www.example.com/large-report.pdf"> + Laden Sie den Verkaufsbericht herunter (PDF, 10MB) +</a></p> + +<p><a href="http://www.example.com/video-stream/"> + Schauen Sie sich das Video an (Stream öffnet in einem separaten Fenster, HD Qualität) +</a></p> + +<p><a href="http://www.example.com/car-game"> + Spielen Sie das Autospiel (benötigt Flash) +</a></p></pre> + +<h3 id="Benutzen_Sie_das_download-Attribut_um_auf_herunterladbare_Dateien_zu_verlinken">Benutzen Sie das download-Attribut um auf herunterladbare Dateien zu verlinken</h3> + +<p>Wenn Sie auf eine Datei verlinken, die heruntergeladen werden sollte, anstatt im Browser geöffnet zu werden, können Sie das <code>download</code>-Attribut benutzen, um den Namen der gespeicherten Datei vorzugeben. Hier ist ein Beispiel mit einem Download-Link zu der Windows-Version von Firefox 39:</p> + +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" + download="firefox-39-installer.exe"> + Firefox 39 für Windows herunterladen +</a></pre> + +<h2 id="Aktives_Lernen_Erstellen_Sie_ein_Navigationsmenu">Aktives Lernen: Erstellen Sie ein Navigationsmenu</h2> + +<p>In dieser Übung sollen Sie einige Einzelseiten so verlinken, das Sie am Ende eine Webseite mit mehreren Seiten haben, die über ein Navigationsmenü erreicht werden können. Diese Art der Navigation finden Sie auf vielen Webseiten. Die selbe Webseitenstruktur wird auf allen Seiten genutzt, um ein einheitliches Bild einer Webpräsenz zu geben. Wenn Sie auf die Links in der Navigation klicken, scheint sich nur der Inhalt der Webseiten zu verändern, nicht die ganze Seite.</p> + +<p>Sie müssen sich lokale Kopien der folgenden vier Seiten machen. Speichern Sie alle in dem selben Verzeichnis (auf GitHub finden Sie unter <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> die Liste der benötigten Dateien im Verzeichnis):</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>Aufgaben:</p> + +<ol> + <li>Fügen Sie eine ungeordnete Liste an dem angezeigten Platz in einer der Dateien ein. Diese Liste soll alle Namen der zu verlinkenden Seiten beinhalten. Ein Navigationsmenü ist tatsächlich nur eine Liste von Links, semantisch ist dies also der richtige Weg eine Navigation zu erstellen.</li> + <li>Verändern Sie jeden Seitennamen in einen Link.</li> + <li>Kopieren Sie das fertige Navigationsmenü und fügen es auf alle Seiten ein. </li> + <li>Auf jeder einzelnen Seite löschen Sie den Link zu der Seite selbst. Es ist sinnlos auf einer Seite einen Link zu sich selbst zu beinhalten. Dazu dient der visuelle Unterschied als Indikator, auf welcher Seite man sich gerade befindet.</li> +</ol> + +<p>Wenn Sie fertig sind, dann sollte die Webseite wie folgt aussehen:</p> + +<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Hinweis</strong>: Falls Sie stecken bleiben und nicht weiter wissen, dann können Sie sich unsere korrekte Lösung anschauen: <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a></p> +</div> + +<h2 id="E-mail_Links">E-mail Links</h2> + +<p>Es ist möglich Links oder Buttons zu erstellen, die wenn man Sie anklickt, eine neue ausgehende E-Mail Nachricht öffnen, anstatt zu einer Webseite oder einer anderen Datei zu verlinken. Das wirt bewerkstelligt indem man das {{HTMLElement("a")}}-Element zusammen mit dem <code>mailto:</code> URL Schema benutzt.</p> + +<p>In seiner einfachsten und am meisten genutzten Form, gibt ein <code>mailto:</code> Link einfach nur die E-Mail Adresse des Empfängers an. Beispiel:</p> + +<pre class="brush: html"><a href="mailto:niemand@mozilla.org">Senden Sie eine E-Mail an Niemand</a> +</pre> + +<p>Damit erstellen Sie einen Link der folgendermaßen aussieht: +<a href="mailto:niemand@mozilla.org">Senden Sie eine E-Mail an Niemand</a>.</p> + +<p>Tatsächlich ist auch die angabe einer E-Mail Adresse optional. Wenn Sie diese weglassen, also nur <code>mailto:</code> schreiben, dann wird eine neue ausgehende E-Mail erstellt, ohne einen vorgegebenen Empfänger. Dies kann genutzt werden, um <em>Teilen</em>-Links zu erstellen, bei denen Benutzer eine E-Mail an Freunde schicken können.</p> + +<h3 id="Details_angeben">Details angeben</h3> + +<p>Ausser der E-Mail Adresse können Sie auch andere Informationen angeben. Alle Standard E-Mail Kopffelder können über <code>mailto</code> vorausgefüllt werden, dazu gehören <em>subject</em> (Betreff), <em>cc</em> und <em>body</em> (Um eine vorgegeben Nachricht anzuzeigen). </p> + +<p>Hier ist ein Beispiel das cc, bcc, subject und body beinhaltet:</p> + +<pre class="brush: html"><a href="mailto:niemand@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=Der%20Betreff%20von%20der%20Email &amp;body=Die%20Nachricht%20in%20der%20Email"> + Senden Sie eine E-Mail mit cc, bcc, subject and body +</a></pre> + +<div class="note"> +<p><strong>Hinweis:</strong> Die Werte der Felder müssen URL gerecht geschrieben sein, dass heißt mit speziellen Charakteren anstatt Leerzeichen, Umlauten und Sonderzeichen. Bemerken Sie auch die Verwendung des Fragezeichens (<code>?</code>), um die eigentliche URL von den Feldwerten abzugrenzen und das Und-Zeichen (&), um die Feldwerte voneinander zu trennen. Dies ist Standard URL-Query Notation. Sie werden mehr darüber in einem fortgeschrittenen Modul lernen.</p> +</div> + +<p>Hier sind noch ein paar Beispiele für <code>mailto</code> URLs:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:niemand@mozilla.org">mailto:niemand@mozilla.org</a></li> + <li><a href="mailto:niemand@mozilla.org,nobody@mozilla.org">mailto:niemand@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:niemand@mozilla.org?cc=nobody@mozilla.org">mailto:niemand@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:niemand@mozilla.org?cc=nobody@mozilla.org&subject=Dies%20ist%20der%20Betreff">mailto:niemand@mozilla.org?cc=nobody@mozilla.org&subject=Dies%20ist%20der%20Betreff</a></li> +</ul> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Jetzt haben Sie schon sehr viel über Hyperlinks gelernt! Wir werden uns später im Kurs noch einmal mit ihnen beschäftigen, wenn es darum geht, Links zu gestalten. Als nächstes schauen wir uns noch ein paar HTML-Elemente an, mit denen Text formatiert und semantisch dargestellt werden kann. Um Fortgeschrittene Textformatierung geht es im nächsten Artikel.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/de/learn/html/introduction_to_html/debugging_html/index.html b/files/de/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..3e3223016e --- /dev/null +++ b/files/de/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,197 @@ +--- +title: Fehlersuche in HTML +slug: Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML +tags: + - Anfänger + - Beginner + - Debugging + - Guide + - HTML + - Validation + - validator +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">HTML-Code zu schreiben ist die eine Sache. Fehler die sich beim Entwickeln einschleichen zu finden und zu beheben die andere. In diesem Artikel stellen wir einige Werkzeuge vor, mit welchen man Fehler in HTML finden und beheben kann.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td> + <p>Grundkenntnisse in HTML, wie sie in den Artikeln <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/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a> und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Erstellen von Links</a> abgedeckt werden.</p> + </td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td> + <p>Die Grundlagen zur Fehlersuche in HTML, mit Hilfe von entsprechenden Werkzeugen, kennen lernen.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Keine_Angst_vor_der_Fehlersuche">Keine Angst vor der Fehlersuche</h2> + +<p>Wenn Computercode geschrieben wird, dann ist meistens alles in Ordnung, bis zu dem Moment in dem ein Fehler auftritt - es wurde etwas falsch gemacht, deswegen funktioniert der Code nicht - entweder überhaupt nicht, oder nicht so wie es vorgesehen war. Als Beispiel zeigen wir einen Fehlerbericht, der beim compilieren eines einfachen Programmes in der Programmiersprache <a href="https://www.rust-lang.org/">Rust</a>, ausgegeben wurde.</p> + +<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;"> "Error" ist Englisch und bedeutet Fehler. In diesem Beispiel gibt die Fehlerwarnung aus "unterminated double quote string", was bedeutet, dass ein doppeltes Anführungszeichen fehlt. Wenn man sich <code>println!(Hello, world!");</code> anschaut, dann kann man sehen, das dort doppelte Anführungszeichen fehlen. Dieser Fehler ist dank der Fehlermeldung einfach zu finden und zu beheben. Fehlermeldungen können aber um einiges komplizierter sein, als in diesem Beispiel. Vor allem bei größeren Programmen, mit mehr Code, sind Fehler unvermeidlich und für jemanden, der eine Programmiersprache nicht kennt, wird es fast unmöglich, diese zu finden.</p> + +<h2 id="Begriffserklärungen_Fehlerbehebung">Begriffserklärungen Fehlerbehebung</h2> + +<p>Im Computerbereich wurden viele <strong>Begriffe aus dem Englischen übernommen</strong>, so auch in diesem Bereich. So wird Fehlerbehebung auch im deutschen Sprachgebrauch <strong>Debugging</strong> genannt. Der Fehler im Code wird im Englischen als <strong>Bug</strong> bezeichnet, was soviel wie <em>Ungeziefer</em> bedeutet. Das <em>Debugging</em> ist dann das <em>Entfernen des Ungeziefers</em> Als <strong>Debugger</strong> wird ein Programm bezeichnet, welches zur Fehlersuche und -behebung genutzt wird.</p> + +<p>Die Fehlerbehebung, das debuggen also, muss niemandem Angst machen, auch wenn es viel Arbeit ist. Der Schlüssel zum Schreiben und Debuggen von Programmiercode ist Vertrautheit mit der entsprechenden Programmiersprache und den Wekrzeugen zur Fehlerbehebung.</p> + +<h2 id="HTML_und_Debugging">HTML und Debugging</h2> + +<p>Die Syntax von HTML ist um einiges einfacher als in einer "echten" Programmiersprache, wie Rust, {{glossary("Javascript")}} oder {{glossary("Python")}}. Auch wird HTML nicht erst compiliert, sondern direkt vom Browser interpretiert. Browser sind beim rendern von HTML sehr <strong>permissiv</strong>. Fehler bewirken normalerweise nicht, wie bei anderen Programmiersprachen üblich, das ein Dokument gar nicht dargestellt wird, sondern der Browser rendert das HTML-Dokument trotzdem, was sowohl gut, als auch schlecht sein kann.</p> + +<h3 id="Permissiver_Code">Permissiver Code</h3> + +<p>Was bedeutet permissiv? Wenn man in Programmiersprachen etwas falsch macht, dann gibt es normalereise zwei Sorten von Fehlern, denen man begegnet:</p> + +<ul> + <li><strong>Syntaxfehler</strong>: Dies sind Schreibfehler im Code, welche bewirken, dass das Programm nicht läuft, wie das obige Beispiel in Rust. Syntaxfehler sind leicht zu finden und zu beheben, wenn man mit der entsprechenden Programmierprache vertraut ist und man weiß, wie man Fehlermeldungen interpretiert.</li> + <li><strong>Logische Fehler</strong>: Diese Fehler treten auf, wenn die Syntax korrekt ist, der Code aber nicht das tut, was er tun soll. Das Programm läuft, aber nicht so wie erwartet. Logische Fehler sind schwieriger zu beheben, weil es keine Fehlermeldung gibt, die einen zu der Fehlerquelle führt.</li> +</ul> + +<p>HTML ignoriert Syntaxfehler, Browser rendern permissiv, die Seite wird angezeigt, obwohl Syntaxfehler im Code sind. Browser haben Regeln eingebaut, welche falsch geschriebenen HTML-Code trotzdem interpretieren, allerdings meist nicht so, wie es vorgesehen war. Die Fehler müssen trotzdem behoben werden.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Warum wird HTML permissiv gerendert? Weil bei der Entwicklung des World Wide Web befunden wurde, dass es wichtiger ist, dass Leute ihre Inhalte publizieren können. Wichtiger als ein paar Syntaxfehler im Code, die eine Veröffentlichung verhindern würden. Das Internet wäre vermutlich nicht so populär, wenn die Regeln der Sprache strenger gewesen wären.</p> +</div> + +<h3 id="Aktives_Lernen_Permissiven_Code_untersuchen">Aktives Lernen: Permissiven Code untersuchen</h3> + +<p>Es ist Zeit sich anzuschauen, wie permissiv HTML Code gerendert wird.</p> + +<ol> + <li>Laden Sie bitte die folgende Datei herunter und speichern sie diese lokal: <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> In diesem Demo-Code sind absichtlich einige Fehler verbaut. Der HTML-Code ist schlecht geschrieben.</li> + <li>Öffnen Sie diese Datei in einem Browser. Sie sollten folgendes sehen: <img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li>Das sieht gleich etwas merkwürdig aus. Schauen sie sich nun den Quellcode der Datei an: + <pre class="brush: html"><h1>HTML debugging examples</h1> + +<p>What causes errors in HTML? + +<ul> + <li>Unclosed elements: If an element is <strong>not closed properly, + then its effect can spread to areas you didn't intend + + <li>Badly nested elements: Nesting elements properly is also very important + for code behaving correctly. <strong>strong <em>strong emphasised?</strong> + what is this?</em> + + <li>Unclosed attributes: Another common source of HTML problems. Let's + look at an example: <a href="https://www.mozilla.org/>link to Mozilla + homepage</a> +</ul></pre> + </li> + <li>Lassen Sie uns die Probleme erläutern: + <ul> + <li>Die {{htmlelement("p","Absatz")}} und {{htmlelement("li","Listenpunkt")}} Elemente haben keine schließenden Tags. Auf dem Bild oben sehen wir, das dies kaum Auswikrungen hat, da es für den Browser einfach ist, trotzdem zu erkennen, wo das Ende dieser Elemente sein sollte.</li> + <li>Das erste {{htmlelement("strong")}} Element hat kein schließendes Tag. Der Browser kann nicht erraten, wo das Element enden soll, deswegen ist der ganze Rest von dem Text stark hervorgehoben.</li> + <li>Diese Sektion des Textes wurden die Elemente schlecht verschachtelt. <code><strong>strong <em>strong emphasised?</strong> what is this?</em></code>. Wegen dem vorhergehenden Problem, kann man nicht sagen, wie dies vom Browser interpretiert wird.</li> + <li>Bei dem {{htmlattrxref("href","a")}}-Attributwert wurde ein schließendes, doppeltes Anführungszeichen vergessen. Dies scheint das größte Problem zu verursachen, der Link ist gar nicht erst gerendert worden.</li> + </ul> + </li> + <li>Lassen Sie uns den Code anschauen den der Browser zum rendern benutzt hat, im Gegensatz zu dem geschriebenen Quellcode. Dafür benutzen wir die Web Developer Tools, die in jedem modernen Browser enthalten sind (nicht aber in der mobilen Version der Browser). Wenn Sie nicht wissen, was Web Developer Tools sind, dann nehmen Sie sich einige Minuten Zeit, um diesen Artikel zu lesen: <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Entdecken Sie die Web Developer Tools</a></li> + <li>In dem DOM-Inspektor können Sie sehen, wie der gerenderte Code aussieht: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li>Mit Hilfe des DOM-Inspektors können wir den Code den der Browser versucht hat zu beheben sehen und wie dieser versucht die HTML Fehler zu beheben. (Wir habe hier Firefox benutzt, um den Code anzuschauen; andere moderne Browser <em>sollten</em> zu dem selben Resultat kommen.): + <ul> + <li>Den Absätzen und den Listenpunkten wurden schließende Tags hinzugefügt.</li> + <li>Es ist nicht klar, wo das erste <code><strong></code>-Element enden soll, deswegen hat der Browser jeden separaten Block mit einem eigenen <code><strong></code>-Tag versehen, bis zum Ende des Dokumentes!</li> + <li>Die falsch verschachtelten Elemente wurden vom Browser wie folgt gelöst: + <pre class="brush: html"><strong>strong + <em>strong emphasised?</em> +</strong> +<em> what is this?</em></pre> + </li> + <li>Der Link mit den fehlenden, doppelten Anführungszeichen wurde komplett gelöscht. Das letzte Listenelement sieht so aus: + <pre class="brush: html"><li> + <strong>Unclosed attributes: Another common source of HTML problems. + Let's look at an example: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="HTML_Validation">HTML Validation</h3> + +<p>Es ist auf jeden Fall besser, die korrekte Syntax für HTML zu verwenden, um ungewollte Ergebnisse zu vermeiden. Aber wie? Bei einem kleinen Dokument, wie dem obigen, ist es einfach, dieses Zeile für Zeile durchzugehen, um die Fehler zu finden. Aber was bei einem sehr großen HTML-Dokument tun?</p> + +<p>Die beste Strategie ist es, das HTML-Dokument von dem <a href="https://validator.w3.org/">Markup Validation Service</a> überprüfen zu lassen. Dieses Tool wird von der W3C bereitgestellt, also von der Organisation, welche auch die Spezifikationen von HTML, CSS und anderen Internettechnologien erstellt. Dieser Webseite gibt man ein HTML-Dokument an, diese untersucht das Dokument auf Fehler und gibt einen detailierten Fehlerbericht zurück.</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>Man kann entweder eine Webseite, ein hochgeladenes HTML-Dokument oder direkt eingegebenen HTML-Code validieren lassen</p> + +<h3 id="Aktives_lernen_Validieren_eines_HTML-Dokumentes">Aktives lernen: Validieren eines HTML-Dokumentes</h3> + +<p>Lassen Sie uns das Gelernte einmal in die Praxis umsetzen, mit unserem <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">Beispieldokument hier</a>.</p> + +<ol> + <li>Öffnen Sie als Erstes den <a href="https://validator.w3.org/">Markup Validation Service</a> in einem anderen Browser-Tab.</li> + <li>Gehen Sie zu dem <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> Tab. Dort kann man direkt HTML-Code überprüfen.</li> + <li>Kopieren Sie den Code aus dem Beispieldokument komplett in das große Textfeld auf der Webseite des Markup Validation Service.</li> + <li>Klicken Sie auf <em>Check</em>.</li> +</ol> + +<p>Dies sollte Ihnen eine Liste der Fehler und weitere Informationen geben.</p> + +<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="Die_Fehlermeldungen_richtig_interpretieren">Die Fehlermeldungen richtig interpretieren</h4> + +<p>Meistens sind die Fehlermeldungen hilfreich, manchmal aber auch schwierig zu verstehen. Es braucht etwas Übung, um den Grund aller Fehlermeldungen zu erkennen. Lassen Sie uns durch die ausgegebenen Fehlermeldungen gehen und überlegen, was diese bedeuten. Sie sehen, dass jede Fehlermeldung mit einer Zeilen(line) und einer Spalten(column)- nummer versehen sind damit der Ort des Fehlers auffindbar ist.</p> + +<ul> + <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): Diese Fehlermeldung zeigt an, dass ein Element offen ist, welches eigentlich geschlossen werden sollte. Die line/column Informationen zeigen auf die erste Zeile, welche nach dem nicht vorhandenen geschlossenen Tag sein sollte. Dies hilft uns zu sehen, was falsch ist.</li> + <li>"Unclosed element <code>strong</code>": Diese Fehlermeldung ist einfach zu verstehen. Ein {{htmlelement("strong")}} Element wurde nicht geschlossen und die Zeilen und Spaltennummern deuten direkt auf den Fehler.</li> + <li>"End tag <code>strong</code> violates nesting rules": An der angegebenen Possition wurden Elemente falsch verschachtelt.</li> + <li>"End of file reached when inside an attribute value. Ignoring tag": Diese Fehlermeldung ist etwas kryptisch. Es zeigt auf, das ein Attribut irgendwo nicht richtig geformt wurde, vermutlich eher am Ende des Dokumentes, denn das Ende des Dokumentes ist innerhalb des Attribut-Wertes. Da der Browser den Link gar nicht darstellt, könnte hier der Fehler liegen.</li> + <li>"End of file seen and there were open elements": Diese Fehlermeldung sagt uns einfach nur, das es offene Elemente im Dokument gibt, welche geschlossen werden müssen. Die Zeilennummern deuten auf die letzten paar Zeilen im Dokument und diese Meldung kommt mit einer Zeile Code, die ein Beispiel dafür im Dokument aufzeigt. + <pre>Beispiel: <a href="https://www.mozilla.org/>Link zur Mozilla Homepage</a> ↩ </ul>↩ </body>↩</html></pre> + + <div class="note"> + <p><strong>Hinweis</strong>: Ein Attributwert, bei welchem geschlossene Anführungszeichen fehlen ist ein offenes Element, da der Rest des Dokumentes als der Wert des Attributes gelesen wird.</p> + </div> + </li> + <li>"Unclosed element <code>ul</code>": Diese Meldung ist nicht hilfreich, da das {{htmlelement("ul")}}-Element <em>richtig</em> geschlossen wurde. Der Fehler kommt von dem nicht geschlossenen {{htmlelement("a")}}-Element, da dort die schließenden Anführungszeichen, bei einem der Attributwerte fehlen.</li> +</ul> + +<p><span>Wenn Sie nicht gleich alle Fehlermeldungen verstehen ist das nicht schlimm. Am besten versucht man, einen Fehler nach dem anderen zu beheben, meistens verschwinden dann auch andere Fehlermeldungen damit. Mehrere Fehlermeldungen können das Resulstat von einem einzigen Fehler im Code sein. </span></p> + +<p><span>Wenn alle Fehler beseitigt sind, dann erfolgt das folgende Banner: </span></p> + +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Dies war eine Einführung in die Fehlerbehebung bei HTML-Dokumenten. Dies sollte Ihnen einige nützliche Fähigkeiten vermittelt haben, um Ihre Webseiten zukünftig ordentlich zu halten. Finden Sie selber die Fehler im Code, indem Sie sich das gerenderte HTML-Dokument im Browser anschauen oder nutzen Sie den HTML-Validator.</p> + +<p>Dies ist auch das Ende der Artikelreihe des Moduls "Einführung in HTML". Als nächstes kommen zwei Aufgaben, welche Sie alleine bearbeiten sollten, um das Gelernte in die Praxis umzusetzen! Bei der ersten Aufgabe geht es darum, einen Brief mit HTML ordentlich zu formatieren: <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Aufgabe: Formatieren eines Briefes</a></p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</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> + +<p> </p> diff --git a/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..7b9ce1bae8 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,292 @@ +--- +title: Struktur in die Webseite bringen +slug: Learn/HTML/Einführung_in_HTML/Document_and_website_structure +tags: + - Beginner + - Guide + - HTML + - Layout + - Planung + - Sitemap + - Struktur +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">{{glossary("HTML")}} ist auch dafür da, größere Strukturen, wie einen Kopfbereich, ein Navigationsmenü oder den Bereich für den Hauptinhalt auf einer Webseite festzulegen. In diesem Artikel schauen wir uns an, wie man den Aufbau einer Webseite plant und mit Hilfe von HTML repräsentiert.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>HTML-Grundlagen, wie sie in <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a> abgedeckt werden. HTML Textformatierung, wie in <a href="/de/Learn/HTML/Einf%C3%BChrung_in_HTML/Einfache_Textformatierung_in_HTML">Einfache Textformatierung in HTML</a> abgedeckt wird. Wie Links funktionieren, wie im Artikel <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Links erstellen</a> beschrieben wird.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Lernen, wie man eine grundlegende Struktur in einer Webseite mit HTML-Tags festlegt und wie man die Struktur einer einfachen Webseite entwirft.</td> + </tr> + </tbody> +</table> + +<h2 id="Bereiche_einer_Webseite">Bereiche einer Webseite</h2> + +<p>Webseiten können sehr unterschiedlich aussehen, doch die meisten haben ähnliche Komponenten, aus welchen sie aufgebaut sind. Diese Komponenten sieht man auf den meisten Webseiten, bei denen es sich nicht um Video-, Spielewebseiten oder Kunstprojekte handelt. Diese Komponenten bringen eine gute Struktur in jede Webseite:</p> + +<dl> + <dt>header - Kopfbereich</dt> + <dd>Normalerweise ist dies ein breiter Streifen ganz oben auf der Website, in dem eine Überschrift zusammen mit einem Logo untergebracht sind. So sieht man jederzeit auf welcher Website man sich befindet, der header bleibt auf allen Unterseiten gleich.</dd> + <dt>Navigation</dt> + <dd>In der Navigation werden die Links zu den Unterseiten der Website bereitgestellt, meist in Form von Buttons, einfachen Links oder auch Tabs. Dieser Bereich bleibt genauso wie der header auf allen Seiten der Website gleich. Manchmal wird die Navigation direkt mit in den header eingebaut. Ob ein separates Navigationsmenü sinnvoller ist, ist Ansichtssache.</dd> + <dt>Hauptinhalt</dt> + <dd>Der größte Bereich im Zentrum der Webseite, welcher den meisten Inhalt einer Webseite enthält, zum Beispiel Videos, eine Geschichte, eine Karte oder ein Zeitungsartikel. Dieser Part der Website wird sich von Seite zu Seite unterscheiden!</dd> + <dt>Sidebar</dt> + <dd>Zusätzliche Informationen, Links, Zitate, Werbung, usw. Dies wird nicht im Hauptfenster dargestellt, aber meist rechts oder links davon. Der Inhalt bezieht sich oft auf den Hauptinhalt. Bei einem Zeitungsartikel könnte die Sidebar zum Beispiel Zusatzinformationen, Informationen zum Autor oder Links zu ähnlichen Artikeln enthalten. Manchmal wird in der Sidebar auch ein zweites Navigationsmenü untergebracht oder anderer Inhalt, der auf allen Seiten gleich ist.</dd> + <dt>footer - Fußbereich</dt> + <dd>Ein Streifen am Ende der Webseite, welcher oft in kleiner Schrift Informationen zum Impressum, Copyright und Kontaktinformationen bereit stellt. Es sind wichtige Informationen für Interessierte, aber für die meisten Webseitenbenutzer nicht relevant. Manchmal wird hier auch eine Sitemap zur Verfügung gestellt.</dd> +</dl> + +<p>Eine „typische Webseite“ könnte wie folgt strukturiert werden:</p> + +<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Inhalte_strukturieren_mit_HTML">Inhalte strukturieren mit HTML</h2> + +<p>Das Beispiel oben ist vielleicht nicht besonders schön, aber sehr gut dafür geeignet, den typischen Aufbau einer Webseite zu erläutern. Es gibt Webseiten mit weiteren Spalten, manche sind um einiges komplexer, aber man kann den grundlegenden Aufbau gut erkennen. Mit dem richtigen CSS darauf angewendet, kann man alle Elemente dazu bringen, sich wie die verschiedenen Bereiche zu verhalten und so auszusehen. Aber wie schon vorher angesprochen, ist es <strong>wichtig den semantischen Zusammenhang zwischen den HTML-Tags zu wahren und das richtige Element für den ihm zugeschriebene Job zu nutzen</strong>.</p> + +<p>Dies liegt daran, dass Darstellungen nicht die ganze Geschichte, die dahinter steckt, erzählen. Wir verwenden Farbe und Schriftgröße um Benutzer auf die nützlichsten Teile des Inhalts aufmerksam zu machen, wie das Navigationsmenü und verwandte Links. Aber was ist mit sehbehinderten Menschen, die zum Beispiel keine Konzepte wie „pink“ und „große Schriftart“ sehr nützlich finden?</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Etwa 8% der Menschen weltweit sind farbenblind. Blinde oder fast blinde Menschen machen 4-5% der Menschheit aus. 2012 waren das etwa <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 Millionen Menschen</a>, während die Gesamtpopulation bei 7 Billionen Menschen liegt.</p> +</div> + +<p>Im HTML-Code kann man Sektionen einteilen, je nach dem was Sie beinhalten und welche <em>Funktion</em> sie ausfüllen. Wenn die Elemente so genutzt werden, wie oben beschrieben, dann hilft es Assistenzsoftware, wie Screenreadern, diese Elemente richtig zu klassifizieren. Wie wir bereits früher in diesem Kurs besprochen haben, hätte es <a href="/de/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">einige negative Konsequenzen, wenn nicht das richtige Element und die richtige Semantik für den dafür vorgesehenen Job genutzt werden</a>.</p> + +<p>Um sematisches Markup zu schreiben, stellt HTML einige Tags zur verfügung, die man benutzen kann, zum Beispiel:</p> + +<ul> + <li><strong>Header/Kopfbereich: </strong>{{htmlelement("header")}}.</li> + <li><strong>Navigations Menü: </strong>{{htmlelement("nav")}}.</li> + <li><strong>Hauptinhalt: </strong>{{htmlelement("main")}}, mit einigen verschiedenen Untersektionen, repräsentiert mit {{HTMLElement("article")}}, {{htmlelement("section")}} und {{htmlelement("div")}} Elementen.</li> + <li><strong>Sidebar: </strong>{{htmlelement("aside")}}; wird oft innerhalb {{htmlelement("main")}} platziert.</li> + <li><strong>Footer/Fußbereich: </strong>{{htmlelement("footer")}}.</li> +</ul> + +<h3 id="Aktives_Lernen_Den_Code_aus_dem_Beispiel_verstehen">Aktives Lernen: Den Code aus dem Beispiel verstehen</h3> + +<p>Das Beispiel oben basiert auf dem folgenden Code (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">Man kann dieses Beispiel auch auf GitHub finden</a>). Schauen Sie sich das Beispiel oben an und dann den Code dazu unten. Versuchen Sie zu sehen, welche Zeilen des Codes zu welchen Sektionen der Webseite gehören.</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + + <title>Titel der Webseite</title> + <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> + <link rel="stylesheet" href="style.css"> + + <!-- die nächsten drei Zeilen bewirken, dass die HTML5 Semantik Elemente auch in alten Internet Explorer Versionen funktionieren--> + <!--[if lt IE 9]> + <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> + <![endif]--> + </head> + + <body> + <!-- Dies ist der Kopfbereich bzw. Header, welcher auf allen Seiten angezeigt wird --> + + <header> + <h1>Header</h1> + </header> + + <nav> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">Our team</a></li> + <li><a href="#">Projects</a></li> + <li><a href="#">Contact</a></li> + </ul> + + <!-- Ein Suchformular, mit dessen Hilfe man auch durch die Webseite navigieren kann --> + + <form> + <input type="search" name="q" placeholder="Search query"> + <input type="submit" value="Go!"> + </form> + </nav> + + <!-- Hier kommt der Hauptinhalt unserer Webseite --> + <main> + + <!-- Es enthält einen Artikel --> + <article> + <h2>Article heading</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> + + <h3>subsection</h3> + + <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> + + <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> + + <h3>Another subsection</h3> + + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> + + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- Der Inhalt für die Sidebar kann auch innerhalb des main-Elements stehen--> + <aside> + <h2>Related</h2> + + <ul> + <li><a href="#">Oh I do like to be beside the seaside</a></li> + <li><a href="#">Oh I do like to be beside the sea</a></li> + <li><a href="#">Although in the North of England</a></li> + <li><a href="#">It never stops raining</a></li> + <li><a href="#">Oh well...</a></li> + </ul> + </aside> + + </main> + + <!-- Hier ist unser Footer bzw. die Fußzeile, welche auch wieder auf allen Unterseiten angezeigt wird. --> + + <footer> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </footer> + + </body> +</html></pre> + +<p>Nehmen Sie sich etwas Zeit sich den Code näher anzuschauen und versuchen Sie ihn zu verstehen - die Kommentare sollten Ihnen dabei behilflich sein. Wir haben nicht zu viele Aufgaben in diesem Artikel, denn der Schlüssel zum Verständnis des Layouts ist das Schreiben von einer soliden HTML-Struktur, um diese dann mit CSS zu beeinflussen. Damit warten wir aber, denn dies ist Teil des CSS Kurses, der sich an diesen HTML Kurs direkt anschließt.</p> + +<h2 id="Die_HTML-Layout-Elemente">Die HTML-Layout-Elemente</h2> + +<p>Es ist gut alle HTML-Elemente fürs Layout im Detail zu kennen. Das lernen Sie mit der Zeit. Viele Details können Sie in unserer <a href="/de/docs/Web/HTML/Element">HTML Elemente Referenz</a> finden.</p> + +<ul> + <li>{{HTMLElement('main')}} ist für den Hauptbereich der Webseite und stellt gewöhnlich Inhalte dar, die <em>nur auf dieser einen Seite</em> zu sehen sind. <code><main></code> sollte nur <em>einmal</em> pro Webseite genutzt werden und sollte direkt im {{HTMLElement('body')}} stehen und nicht innerhalb anderer Elemente.</li> + <li>{{HTMLElement('article')}} umschließt einen Block von zusammenhängendem Inhalt, der auch ohne den Rest der Webseite stehen könnte (z.B. ein einzelner Blogpost).</li> + <li>{{HTMLElement('section')}} ist ähnlich wie <code><article></code>, aber eher für das Gruppieren von Bereichen mit bestimmter Funktionalität (z.B. eine Minikarte oder einige Artikel-Überschriften und Zusammenfassungen). Es ist gute Praxis, jede section mit einer Überschrift zu starten. Man kann <code><article></code>s in mehrere <code><section></code>s aufteilen und umgekehrt, es geht beides.</li> + <li>{{HTMLElement('aside')}} enthält Inhalte, die nicht direkt mit dem Hauptinhalt zusammenhängen, aber als Zusatzinformationen dienen können (Biografie des Autors, Links zu weiterführenden Informationen)</li> + <li>{{HTMLElement('header')}} stellt eine Gruppe von einführenden Inhaltselementen dar. Wenn es innerhalb des {{HTMLElement('body')}}-Tags steht, definiert es einen globalen Kopfbereich für die Webseite, aber wenn es innerhalb von einem {{HTMLElement('article')}} oder {{HTMLElement('section')}} Element steht, dann stellt es einen Kopfbereich nur für diese Sektion dar. (Achtung! Verwechslungsgefahr mit <a href="/de/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">Titel und Überschriften</a></li> + <li>{{HTMLElement('nav')}} enthält das Hauptnavigationsmenü für die Seite. Zweitrangige Links würden nicht hier hin gehören.</li> + <li>{{HTMLElement('footer')}} stellt eine Gruppe von Inhalten am Ende der Webseite dar.</li> +</ul> + +<h3 id="Nicht-semantische_Container">Nicht-semantische Container</h3> + +<p>Manchmal findet sich kein passendes semantisches Element, um eine Gruppe Elemente oder Inhalte damit einzuhüllen. Manchmal möchte man mit einem Container um bestimmte Elemente herum nur ein Ziel erstellen, das über {{glossary("CSS")}} oder {{glossary("JavaScript")}} angesprochen werden kann. Für solche Fälle gibt es das {{HTMLElement("div")}} und das {{HTMLElement("span")}} Element. Diese sollten möglichst immer ein passendes {{htmlattrxref('class')}} Attribut haben, über welches sie identifiziert und angesprochen werden können.</p> + +<p>{{HTMLElement("span")}} ist ein Inline Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Inline-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel:</p> + +<pre class="brush: html"><p>Der König lief um 1 Uhr betrunken zurück zu seinem Zimmer. Das Bier half ihm nicht dabei, als er durch die Tür schwankte <span class="editor-hinweis">[Editor's Hinweis: An diesem Punkt im Stück sollten die Lichter heruntergedimmt werden]</span>.</p></pre> + +<p>In diesem Fall soll der Hinweis für den Editor nur Extra-Informationen für den Direktor des Schauspiels bereit stellen, der Hinweis hat keine semantische Bedeutung. Visuell kann dies per CSS mit einem Unterschied in der Textdarstellung angezeigt werden.</p> + +<p>{{HTMLElement("div")}} ist ein Blocklevel-Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Blocklevel-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel ein Einkaufswagen-Widget, welches man jederzeit auf einer E-Commerce-Webseite anzeigen kann:</p> + +<pre class="brush: html"><div class="einkaufswagen"> + <h2>Einkaufswagen</h2> + <ul> + <li> + <p><a href=""><strong>Silber Ohrringe</strong></a>: $99.95.</p> + <img src="../products/3333-0985/thumb.png" alt="Silber Ohrringe"> + </li> + <li> + ... + </li> + </ul> + <p>Kosten gesamt: $237.89</p> +</div></pre> + +<p>Dies ist nicht wirklich Inhalt für <code><aside></code>, da es nicht notwendigerweise mit dem Inhalt der Hauptseite im Zusammenhang steht (man soll es ja überall sehen können). Auch <code><section></code> scheint ungeeignet, da es nicht Teil des Hauptinhaltes ist. Deswegen kann man hier <code><div></code> benutzen. Es wurde eine Überschrift hinzugefügt, so das auch Benutzer mit Screenreadern den Einkaufswagen finden.</p> + +<div class="warning"> +<p><strong>Warnung</strong>: Divs sind leicht zu benutzen, man sollte aber darauf achten, das man nicht zu viele davon einsetzt, da sie keinerleit semantischen Wert haben. Man sollte sie wirklich nur benutzen, wenn es keine anderen semantischen Elemente gibt. Wenn man zuviele divs benutzt, dann wird es schwierig den Code zu updaten und später damit wieder zu arbeiten.</p> +</div> + +<h3 id="Zeilenumbruch_und_Horizontale_Linien">Zeilenumbruch und Horizontale Linien</h3> + +<p>Zwei Elemente, die man immer mal wieder benutzen wird, sind {{htmlelement("br")}} und {{htmlelement("hr")}}:</p> + +<p><code><br></code> stellt einen Zeilenumbruch innerhalb eines Absatzes(</p> + +<p>) dar. Es ist die einzige Möglichkeit eine bestimmte Struktur in den Text zu bekommen, wie man es bei einer Adresse oder einem Gedicht benötigt. Zum Beispiel:</p> + +<pre class="brush: html"><p>There once was a girl called Nell<br> +Who loved to write HTML<br> +But her structure was bad, her semantics were sad<br> +and her markup didn't read very well.</p></pre> + +<p>Ohne die <code><br></code> Elemente, würde der Absatz in einer einzigen lange Zeile angezeigt werden, denn <a href="/de/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML"> HTML ignoriert Whitespace</a>. Mit den<br> + Elementen im Code wird der Absatz wie folgt dargestellt:</p> + +<p>There once was a girl called Nell<br> + Who loved to write HTML<br> + But her structure was bad, her semantics were sad<br> + and her markup didn't read very well.</p> + +<p><code><hr></code> Elemente erzeugen eine horizontale Linie. Damit kann man einen thematischen Umbruch darstellen. Visuell ist es einfach nur eine Linie. Beispiel:</p> + +<pre><p>Die Katze lief aus dem Haus, um die Sonne zu genießen.</p> +<hr> +<p>Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.</p></pre> + +<p>Würde wie folgt aussehen:</p> + +<p>Die Katze lief aus dem Haus, um die Sonne zu genießen.</p> + +<hr> +<p>Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.</p> + +<h2 id="Planung_einer_einfachen_Webseite">Planung einer einfachen Webseite</h2> + +<p>Wenn Sie einmal den Inhalt einer ganz einachen Webseite geplant haben, dann ist der nächste Schritt das ausarbeiten, welcher Inhalt auf einer ganzen Internetpräsenz, bestehend aus mehreren Unterseiten, dargestellt werden soll. Dazu gehört zu planen, wie die einzelnen Seiten untereinander verlinkt werden sollen, wie das Gesamtlayout aussehen soll, so das die Seite das beste Erlebnis für den Nutzer bietet. Dies wird die {{glossary("Information architecture")}} genannt. Bei einer sehr großen und komplexen Webseite, muss eine Menge Zeit für den Planungsprozess eingeplant werden. Für eine einfachere Webseite mit wenigen Webseiten ist es aber recht einfach und kann auch Spaß machen!</p> + +<ol> + <li>Denken Sie daran, welche Elemente auf allen Seiten gleich sein sollen, z.B. das Navigationsmenü und der Footerbereich. Wenn die Webseite für ein Buisness ist, dann ist es zum Beispiel sinnvoll, die Kontaktinformationen auf jeder Unterseite im Footer zu haben. Notieren Sie, was auf jeder Unterseite gleich sein soll. <img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>Als nächstes zeichnen Sie eine grobe Skizze, wie die Struktur der Webseite aussehen soll, auf ein Blatt Papier. Machen Sie das für jede Unterseite der Webpräsenz. Schreiben Sie dazu, für was jede der Sektionen ist. <img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>Jetzt überlegen Sie welche Inhalte auf der Website zu finden sein sollen, welche nicht auf allen Unterseiten gleich sind. Schreiben Sie ruhig eine große Liste. <img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>Als nächstes, versuchen Sie ihre Inhalte in Gruppen aufzuteilen, um eine Ide zu bekommen, was zusammen auf einer Unterseite stehen könnte. <img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>Als letztes Skizzieren Sie eine grobe Sitemap - zeichnen Sie einen Kreis für jede Unterseite und ziehen Sie linien, um die Verlinkungen zwischen den Seiten deutlich zu machen. Wahrscheinlich ist die Startseite in der Mitte und von ihr gehen fast alle Links zu den Unterseiten. Die meisten Unterseiten einer kleinen Website, sollten über das Navigationsmenü zugänglich sein. Notieren Sie zusätzlich wie die Seiten präsentiert werden sollen. <img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> +</ol> + +<h3 id="Aktives_Lernen_Erstellen_Sie_eine_eigene_Sitemap">Aktives Lernen: Erstellen Sie eine eigene Sitemap</h3> + +<p>Probieren Sie die Schritte von oben selber aus, erstellen Sie eine Sitemap für eine eigene Webseite. Worüber würden Sie gerne eine Webseite machen?</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Speichern Sie Ihre Arbeit, eventuell möchten Sie diese später benutzen.</p> +</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Jetzt sollten Sie ein besseres Verständnis dafür haben, wie Webseiten strukturiert werden können und wie man eine Webpräsenz mit mehreren Unterseiten im Vorraus plant. Im letzten Artikel dieses Moduls geht es darum, Fehler im HTML Code zu finden und zu beheben.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "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> diff --git a/files/de/learn/html/introduction_to_html/getting_started/index.html b/files/de/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..0f5354d5d2 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,571 @@ +--- +title: Lerne HTML kennen +slug: Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen +tags: + - Anfänger + - Attribut + - Beginner + - Charakter-Referenz + - Element + - Guide + - HTML + - Kommentar + - Leerraum + - Modul + - whitespace +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">In diesem Artikel werden wir Ihnen die Grundlagen von HTML beibringen. Wir werden definieren was Elemente, Attribute und einige andere Begriffe, die sie im Zusammenhang mit dieser Sprache kennen lernen werden, sind. Wir zeigen auch wie ein HTML Element strukturiert ist, wie eine typische HTML Webseite aufgebaut ist und erklären weitere wichtige Grundlagen dieser Sprache. Währenddessen können Sie oft mit HTML-Code experimentieren.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorbereitungen:</th> + <td>grundlegende Computerkenntnisse, <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/Installing_basic_software">notwendige Software installiert</a> und wissen wie man <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/Dealing_with_files">Dateien nutzt</a>.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td> + <p>Grundwissen über die HTML Sprache erwerben, etwas Praxis beim Schreiben von HTML Elementen erwerben.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Was_ist_HTML">Was ist HTML?</h2> + +<p>HTML ist nicht wirklich eine Programmiersprache, sondern eine Auszeichnungssprache; sie ist dazu gedacht, Ihre Webseite zu strukturieren. Die Sprache besteht aus einer Reihe von Elementen, Tags genannt, welche Sie um verschiedene Teile Ihres Inhalts herum platzieren können, um diesem eine spezielle Aufgabe zuzuweisen. Zum Beispiel können Sie damit einen Text oder ein Bild in einen Link verwandeln. Als Beispiel nehmen wir folgenden Inhalt:</p> + +<pre class="notranslate">Meine Katze ist sehr frech.</pre> + +<p>Wenn wir möchten das der Satz in einem eigenen Absatz steht, können wir mit {{htmlelement("p")}} spezifizieren, das es sich um einen Absatz handelt: </p> + +<pre class="brush: html notranslate"><p>Meine Katze ist sehr frech.</p></pre> + +<h3 id="Aufbau_eines_HTML-Elements">Aufbau eines HTML-Elements</h3> + +<p>Schauen wir uns den Aufbau unseres Paragraphen-Elements ein wenig genauer an.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15443/katze-element.jpg" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>Die Hauptteile unseres Elements sind:</p> + +<ol> + <li><strong>Das öffnende Tag:</strong> Diese besteht aus dem Namen des Elements (in diesem Fall ein <code>p</code> für paragraph (engl.:Absatz)), welcher zwischen zwei spitzen Klammern eingesetzt ist. Dies zeigt an, wo das Element beginnt — in diesem Fall am Anfang unseres Absatzes.</li> + <li><strong>Der Inhalt:</strong> Dies ist der Inhalt des Elements, in diesem Fall einfach nur Text.</li> + <li><strong>Das schließende Tag:</strong> Dieses sieht genauso aus wie das öffnende Tag bis auf den zusätzlichen Schrägstrich (slash) vor dem Namen des Elements. Dieser Tag kommt an das Ende des Elementes — in diesem Fall am Ende des Absatzes.</li> + <li><strong>Das Element:</strong> Das öffnende Tag, der Inhalt und das schließende Tag gemeinsam ergeben zusammen das Element.</li> +</ol> + +<h3 id="Aktives_Lernen_Erstellen_Sie_Ihr_erstes_HTML-Element">Aktives Lernen: Erstellen Sie Ihr erstes HTML-Element</h3> + +<p>Editieren Sie den Text unten im <em>Input</em>-Feld. Heben Sie den Text mit dem <code><em></code>-Element hervor. (schreiben sie ein <code><em></code>-Tag vor den Text, um das <em>Element zu öffnen</em> und fügen sie ein <code></em></code>-Tag am Ende des Textes an, um das <em>Element zu schließen</em>) Dies sollte den Text <em>kursiv</em> darstellen. Sie sollten die Änderungen live in dem <em>Output</em>-Feld sehen können.</p> + +<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Input</h2> +<textarea id="code" class="input">Dies ist mein Text.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 2em; + padding: 10px; + border: 1px solid #0095dd; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<em>Dies ist mein Text.</em>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p> + +<h3 id="Elemente_verschachteln">Elemente verschachteln</h3> + +<p>Sie können auch Elemente innerhalb von anderen Elementen erstellen, dies wird <strong>Verschachteln</strong> genannt. Wenn wir hervorheben wollen, das unsere Katze <strong>sehr</strong> schlecht gelaunt ist, können wir das Wort "sehr" in ein <code><strong></code>-Element einbinden, was bedeutet, das dieses Wort fett hervorgehoben werden soll:</p> + +<pre class="brush: html notranslate"><p>Meine Katze ist <strong>sehr</strong> frech.</p></pre> + +<p>Sie müssen allerdings aufpassen, das Sie die Elemente richtig verschachteln: in dem obigen Beispiel haben wir zuerst das <code><p></code>-Element geöffnet, dann das <code><strong></code>-Element geöffnet. Deswegen müssen wir zuerst wieder das <code><strong></code>-Element schließen, bevor wir das <code><p></code>-Element schließen können. Das folgende Beispiel wäre deswegen falsch:</p> + +<pre class="example-bad brush: html notranslate"><p>Meine Katze ist <strong>sehr frech.</p></strong></pre> + +<p>Die Elemente müssen in der korrekten Reihenfolge geöffnet und geschlossen werden, so dass eines eindeutig innerhalb von dem anderen Element liegt. Wenn die Elemente überlappen, dann muss der Browser versuchen zu entscheiden, welches Element innerhalb sein soll und es können unerwartete Resultate herauskommen. Also passen Sie darauf auf.</p> + +<h3 id="Blockelemente_und_Inlineelemente">Blockelemente und Inlineelemente</h3> + +<p>Es gibt zwei wichtige Kategorien von Elementen in HTML - Blockelemente und Inlineelemente.</p> + +<ul> + <li>Blockelemente bilden eine sichtbare Box auf der Webseite - sie erscheinen in einer neuen Zeile, egal was für ein Inhalt vor diesem Element steht und aller Inhalt nach diesem Element wird ebenfalls auf eine neue Zeile geschoben. Blockelemente machen die Struktur der Webseite aus, sie repräsentieren Absätze, Listen, Navigationsmenüs oder die Fußzeile. Ein Blockelement kann nicht innerhalb von einem Inlineelement stehen, es kann aber innerhalb anderer Blockelemente sein.</li> + <li>Inlineelemente sind die Elemente welche immer innerhalb eines Blockelements stehen und nehmen nur den Platz direkt innerhalb einer Zeile (engl.: line) ein. Inlineelemente starten keine neue Zeile, normallerweise erscheinen Sie innerhalb eines Textabsatzes. Zum Beispiel sind die Elemente {{htmlelement("strong")}} und {{htmlelement("em")}} Inlineelemente.</li> +</ul> + +<p>Schauen Sie sich folgendes Beispiel an:</p> + +<div class="hidden"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html notranslate"><h2>Input</h2> +<textarea id="code" class="input"><em>Erster</em><em>Zweiter</em><em>Dritter</em><p>Vierter</p><p>Fünfter</p><p>Sechster</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input { + width: 90%; + height: 4em; + padding: 10px; + border: 1px solid #0095dd; +} + +.output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 400) }}</p> + +<p>{{htmlelement("em")}} ist ein Inlineelement. Sie können oben sehen, das die ersten drei Elemente in einer Zeile sind, ohne Zwischenräume zwischen den Elementen. {{htmlelement("p")}} ist ein Blockelement, welches jeweils eine neue Zeile für sich alleine einnimmt, mit Platz darüber und darunter.</p> + +<div class="note"> +<p><strong>Notiz</strong>: In HTML5 wurden die Elementkategorien neu definiert: die neuen Definitionen finden sie in <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>, (auf Englisch). Diese Definitionen sind akkurater als die beiden, welche wir hier vorgstellt haben, sie sind aber auch viel komplizierter. In diesem Modul bleiben wir bei unseren Block- und Inlineelementkategorien.</p> +</div> + +<div class="note"> +<p><strong>Notiz</strong>: Sie können auf MDN hilfreiche Referenzseiten finden - für alle <a href="/de/docs/Web/HTML/Block-level_elements">Blockelemente</a> und <a href="/de/docs/Web/HTML/Inline_elements">Inlineelemente</a>.</p> +</div> + +<h3 id="Leere_Elemente">Leere Elemente</h3> + +<p>Nicht alle Elemente folgen dem obigen Muster, mit einem öffnenden Tag, dem Inhalt und einem schließenden Tag. Manche Elemente brauchen nur einen einzigen Tag, welcher meist genutzt wird, um etwas in eine Seite einzubetten, an der Stelle wo das Tag steht. Zum Beispiel zeigen wir das {{htmlelement("img")}}-Element, welches genutzt wird um eine Bilddatei einzubinden:</p> + +<pre class="brush: html notranslate"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>Der Code würde folgende Webseite im Browser anzeigen:</p> + +<p>{{ EmbedLiveSample('Leere_Elemente', 700, 300) }}</p> + +<h2 id="Attribute">Attribute</h2> + +<p>Elemente können auch Attribute enthalten, dass sieht dann so aus:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15463/katze-attribut.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Diese Attribute enthalten Zusatzinformationen über das Element, welche nicht als eigentlicher Inhalt anzeigt werden. In diesem Fall erlaubt dieses Attribut, ihm einen Identifizierungsnamen zu geben, welchen man später dazu verwenden kann, dieses Element mit Informationen wie z. B. Schriftart und -farbe zu versehen.</p> + +<p>In unserem Beispiel ist der <em>Name</em> des Attributes <code>class</code> und <code>editor-note</code> ist der diesem Attribut zugeordnete <em>Wert</em>.</p> + +<p>Ein Attribut sollte immer haben:</p> + +<ol> + <li>Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).</li> + <li>Den Attributnamen, gefolgt von Gleichheitszeichen</li> + <li>Anführungs- und Schlusszeichen um den Wert. (bsp. <code>"</code><code>editor-note"</code>)</li> +</ol> + +<h3 id="Aktives_Lernen_Hinzufügen_von_Attributen_zu_einem_Element">Aktives Lernen: Hinzufügen von Attributen zu einem Element</h3> + +<p>Ein weiteres Beispiel für ein Element ist {{htmlelement("a")}} — dies steht für Anker (engl.:anchor) und macht aus dem Text den es umschließt einen Hyperlink. Dieses Element kann einige Attribute annehmen, hier sind einige von ihnen:</p> + +<ul> + <li><code>href</code>: Dieses Attribut bestimmt die Webadresse, zu welcher der Link einen leiten soll, wenn man auf diesen klickt. Zum Beispiel könnte das so aussehen: <code>href="https://www.mozilla.org/"</code>.</li> + <li><code>title</code>: Das <code>title</code> Attribut bestimmt Extrainformationen über den Link, zum Beispiel zu welcher Seite der Link führt. Dies erscheint als Tooltip, wenn man mit der Maus darüber fährt. Beispiel: <code>title="The Mozilla homepage"</code>.</li> + <li><code>target</code>: Das <code>target</code> Attribut bestimmt wie der Link vom Browser geöffnet werden soll. Zum Beispiel bestimmt <code>target="_blank"</code> das die angegebene Webseite in einem neuen Tab geöffnet werden soll. Wenn die Webseite in dem aktuellen Tab geöffnet werden soll, kann man dieses Attribut einfach weglassen, da Browser dies standardmäßig tun.</li> +</ul> + +<p>Editieren Sie unten im <em>Input</em>-Feld die Zeile so, das es ein Link zu Ihrer Lieblingswebseite wird. Als erstes fügen Sie das <code><a></code>-Element hinzu. Danach fügen sie das <code>href</code>-Attribut und das <code>title</code>-Attribut hinzu. Als letztes sagen Sie dem Browser mit dem <code>target</code>-Attribut, das der Link in einem neuen Tab geöffnet werden soll. Sie werden Ihre Veränderungen live im <em>Output</em>-Feld verfolgen können. Wenn Sie fertig sind, sollten Sie einen Link sehen, welcher den Inhalt des <code>title</code>-Attributes anzeigt, wenn man mit dem Mauszeiger darüberfährt und wenn mn daraufklickt sollte der Link zu der entsprechenen Webadresse führen, welche sie im <code>href</code>-Attribut angegeben haben. Denken Sie daran, dass Sie ein Leerzeichen zwischen dem Element und dem ersten Attribut haben müssen und jeweils zwischen den Attributen.</p> + +<p>Wenn Sie einen Fehler machen können Sie das <em>Input</em>-Feld jederzeit mit dem <em>Reset</em>-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p> + +<div class="hidden"> +<h6 id="Playable_code3">Playable code3</h6> + +<pre class="brush: html notranslate"><h2>Input</h2> +<textarea id="code" class="input">&lt;p&gt;Ein Link zu meiner Lieblingswebseite.&lt;/p&gt;</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 3em; + padding: 10px; + border: 1px solid #0095dd; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<p>Ein Link zu meiner <a href="<code>https://www.mozilla.org/</code>" title="The Mozilla homepage" target="_blank">Lieblingswebseite</a>.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 300) }}</p> + +<h3 id="Boolsche_Attribute">Boolsche Attribute</h3> + +<p>Sie werden manchmal Attribute sehen, welche ohne Wert geschrieben sind und das ist so erlaubt. Es handelt sich um Boolsche Attribute und diese können nur einen Wert annehmen, welcher meist derselbe ist, wie der Name des Attributs. Als Beispiel zeigen wir das {{htmlattrxref("disabled", "input")}}-Attribut, welches Sie einem <code><input></code>-Element hinzufügen können, um dieses unbenutzbar (engl.: disabled) zu machen, d.h. das <code><input></code>-Feld wird ausgegraut und man kann keine Daten eingeben.</p> + +<pre class="notranslate"><input type="text" disabled="disabled"></pre> + +<p>Als Kurzform kann man auch den folgenden Code schreiben: (Wir haben auch ein benutzbares Feld dazu getan, damit Sie sehen was hier geschieht.)</p> + +<pre class="brush: html notranslate"><input type="text" disabled> + +<input type="text"> +</pre> + +<p>Beide werden Ihnen das folgende Resultat ausgeben:</p> + +<p>{{ EmbedLiveSample('Boolsche_Attribute', 700, 100) }}</p> + +<h3 id="Anfuehrungszeichen_um_Attributwerte_weglassen">Anfuehrungszeichen um Attributwerte weglassen</h3> + +<p>Wenn Sie sich etwas im Internet umschauen, werden Sie immer wieder auf merkwürdige Benutzung von HTML-Code stoßen. Dazu gehören auch Attributwerte ohne Anführungszeichen. Dies funktioniert an manchen Stellen, woanders kann es den ganzen Code kaputt machen. Wir schauen uns noch einmal unser Beispiel mit dem Link an. Wir könnten das auch wie folgt schreiben, wenn wir nur das <code>href</code>-Attribut benutzen:</p> + +<pre class="brush: html notranslate"><a href=https://www.mozilla.org/>Lieblingswebseite</a></pre> + +<p>Wenn wir aber das <code>title</code>-Attribut hinzufügen, dann funktioniert es so nicht mehr:</p> + +<pre class="example-bad brush: html notranslate"><a href=https://www.mozilla.org/ title=Die Mozilla Webseite>Lieblingswebseite</a></pre> + +<p>An diesem Punkt wird der Browser diesen Code falsch lesen und in dem <code>title</code>-Attribut drei separate Attribute sehen: ein <code>title</code>-Attribut mit dem Wert <code>"Die"</code> und zwei Boolsche Attribute, <code>Mozilla</code> und <code>Webseite</code>. Dies ist nicht was wir gewollt haben und der Fehler führt zu unerwünschtem Verhalten, siehe unten. Versuchen Sie mit dem Mauszeiger über dem Link zu fahren, um zu sehen was der Titeltext ist.</p> + +<p>{{ EmbedLiveSample('Anfuehrungszeichen_um_Attributwerte_weglassen', 700, 100) }}</p> + +<p>Unser Rat ist es, immer die Anführungszeichen um Attrbiutwerte zu setzen, damit Sie solche Probleme vermeiden können und besser lesbaren Code schreiben.</p> + +<h3 id="Einfache_oder_doppelte_Anführungszeichen">Einfache oder doppelte Anführungszeichen?</h3> + +<p>In diesem Artikel sind alle Attributwerte in doppelte Anführungszeichen eingepackt. Sie werden woanders aber eventuell sehen, das Leute anstattdessen einfache Anführungszeichen benutzen. Es ist egal welche Sorte Anführungszeichen genutzt wird, Sie können das machen wie Sie möchten. Beide der folgenden Zeilen sind äquivalent:</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com">Ein Link als Beispiel.</a> + +<a href='http://www.example.com'>Ein Link als Beispiel.</a></pre> + +<p>Sie sollten die Anführungszeichen aber nicht miteinander mischen. Die folgende Zeile ist falsch!</p> + +<pre class="brush: example-bad html notranslate"><a href="http://www.example.com'>Ein Link als Beispiel.</a></pre> + +<p>Wenn Sie eine Sorte Anführungszeichen benutzen, können Sie die andere Sorte innerhalb dieser benutzen:</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com" title="Ist's nicht lustig?">Ein Link als Beispiel.</a></pre> + +<p>Wenn Sie die selbe Sorte Anführungszeichen innerhalb benutzen wollen, dann müssen Sie<a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_including_special_characters_in_HTML"> HTML entities</a> nutzen.</p> + +<h3 id="Aufbau_eines_HTML-Dokumentes">Aufbau eines HTML-Dokumentes</h3> + +<p>Jetzt wissen Sie wie die einzelnen Elemente in einer HTML-Datei aufgebaut sind, aber ein Element für sich alleine tut nicht viel. Wir schauen uns jetzt an, wie die einzelnen Elemente kombiniert werden, um ein funktionierendes HTML-Dokument aufzubauen. Schauen Sie sich diesen Code an:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Meine Testseite</title> + </head> + <body> + <p>Dies ist meine Webseite.</p> + </body> +</html></pre> + +<p>Hier haben wir:</p> + +<ul> + <li><code><!DOCTYPE html></code> — den Dokumenttyp. Früher, als HTML noch jung war (1991/92), war dies dazu gedacht, um dem Browser mitzuteilen, welchen Regeln er zu folgen hatte. Das konnte z. B. sein, dass der Browser automatisch die Fehler überprüft und andere nützliche Dinge. Wie auch immer, heutzutage achtet niemand mehr wirklich darauf, es muss jedoch vorhanden sein, damit alles richtig funktioniert.</li> + <li><code><html></html></code> — das <code><html></code> Element. Dieses Element umhüllt den ganzen Inhalt. Manchmal wird es auch als root-Element bezeichnet</li> + <li><code><head></head></code> — das <code><head></code> Element. In dieses Element ist alles eingeschlossen, was <em>nicht</em> auf der Seite angezeigt wird. Dies enthält Informationen wie Schlüsselwörter, eine Seitenbeschreibung, welche in Suchmaschinen erscheint, CSS um unseren Inhalt zu designen, usw.</li> + <li><code><body></body></code> — das <code><body></code> Element. Dies beinhaltet <em>alles</em>, was die Betrachter sehen, wenn sie die Webseite besuchen, egal ob Text, Bilder, Videos, Audiodateien, usw.</li> + <li><code><meta charset="utf-8"></code> — Dieses Element setzt die Zeichenkodierung deines Dokuments auf <code>utf-8</code>, was die Buchstaben von fast allen menschlichen Sprachen beinhaltet. Umlaute wie Ä und Ü werden sonst nicht richtig angezeigt.</li> + <li><code><title></title></code> — Dies setzt den Titel der Seite, welcher im Tab angezeigt wird. Dieser wird auch gebraucht, wenn jemand ein Lesezeichen erstellt.</li> +</ul> + +<h3 id="Aktives_Lernen_Fügen_Sie_mehr_Inhalte_in_das_HTML_Dokument_ein">Aktives Lernen: Fügen Sie mehr Inhalte in das HTML Dokument ein</h3> + +<p>Wenn Sie lokal, auf Ihrem Computer, das Beispiel ausprobieren möchten, dann tun Sie folgendes:</p> + +<ol> + <li>Kopieren Sie das obige HTML-Dokument.</li> + <li>Erstellen Sie eine neue leere Datei in Ihrem Texteditor.</li> + <li>Fügen Sie den Code in die leere Datei ein.</li> + <li>Speichern Sie die Datei unter dem Namen index.html.</li> +</ol> + +<div class="note"> +<p><strong>Notiz</strong>: Sie können dieses HTML-Grundgerüst auch im <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repository</a> finden.</p> +</div> + +<p>Sie können die Datei nun in einem Webbrowser öffnen, um zu sehen wie die Webseite aussieht. Dann können Sie den HTML-Code editieren und die Datei speichern. Wenn Sie dann die Datei im Browser neu laden, sehen Sie die Veränderungen. Am Anfang sieht die Webseite im Browser so aus:</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">Diese Übung können Sie also lokal auf Ihrem Computer durchführen, wie oben beschrieben, oder Sie können die Übung mit unserem editierbaren Beispiel unten machen (das editierbare Fenster repräsentiert nur den Inhalt des {{htmlelement("body")}}-Elements). In der Übung sollen Sie die folgenden Dinge auf Ihrer Webseite implementieren:</p> + +<ul> + <li>Fügen Sie direkt unter dem öffnenden Tag des {{htmlelement("body")}}-Elements eine Überschrift ein. Dieser sollte ein <code><h1></code>-Tag vorangestellt sein und ein <code></h1></code>-Tag hintenan stehen.</li> + <li>Schreiben Sie in den Absatz (<code><p></code>) etwas Text über etwas, das Sie interessiert.</li> + <li>Lassen Sie wichtige Wörter in fetter Schrift erscheinen, indem Sie das <code><strong></code>-Element benutzen.</li> + <li>Fügen Sie einen Link (<code><a></code>) innerhalb des Absatzes hinzu.</li> + <li>Fügen Sie ein Bild (<code><img></code>) hinzu, direkt unter dem Absatz. Sie bekommen einen Bonuspunkt, wenn Sie es schaffen zu einem anderen Bild zu verlinken (entweder lokal auf ihrem Computer oder irgendwo im Internet.)</li> +</ul> + +<p>Wenn Sie einen Fehler machen können Sie das <em>Input</em>-Feld jederzeit mit dem <em>Reset</em>-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p> + +<div class="hidden"> +<h6 id="Playable_code4">Playable code4</h6> + +<pre class="brush: html notranslate"><h2>Input</h2> +<textarea id="code" class="input"> +&lt;p&gt;Dies ist meine Webseite.&lt;/p&gt;</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; +} + +img { + max-width: 100%; +} + +.output { + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<p>Ich spiele gerne <strong>Schlagzeug</strong>. Einer meiner Lieblingsschlagzeugspieler ist Neal Peart, welcher\ + in der Band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a> spielt.\ + Mein Lieblingsalbum von Rush ist zur Zeit <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ +<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code4', 700, 600) }}</p> + +<h3 id="Leerraum_in_HTML">Leerraum in HTML</h3> + +<p>In dem obigen Beispiel werden Sie bemerkt haben, dass eine Menge Leerraum (engl.: Whitespace) dabei ist. Dies ist nicht notwendig. Die beiden folgenden Codestücke sind äquivalent:</p> + +<pre class="brush: html notranslate"><p>Hunde sind komisch.</p> + +<p>Hunde sind + komisch.</p></pre> + +<p>Egal wieviel Leerraum sie benutzen (Leerraum sind Leerzeichen, aber auch Zeilenumbrüche), der HTML Parser wird den Leerraum immer zu einem einzigen Leerzeichen zusammenlegen, wenn die Webseite im Browser geladen wird. Wieso sollte man also so viel Leerraum benutzen? Die Antwort ist Lesbarkeit - es ist viel einfacher zu verstehen, was in einem Stück Code vor sich geht, wenn dieser schön formattiert ist und nicht alles ein zusammenhängender Klumpen ist. In unserem HTML-Code haben wir jedes Element das in einem anderen Element steht mit zwei Leerzeichen weiter eingerückt. Sie können selbst entscheiden, wie genau Sie Ihren Code formattieren (z. B. wieviele Leerzeichen Sie zum Einrücken benutzen), aber Sie sollten den Code selber gut lesen können.</p> + +<h2 id="Zeichenreferenzen_für_Sonderzeichen">Zeichenreferenzen für Sonderzeichen</h2> + +<p>In HTML sind die Zeichen <code><</code>, <code>></code>,<code>"</code>,<code>'</code> und <code>&</code> spezielle Zeichen, da sie Teil der HTML Syntax sind. Wie kann man diese also im ausgegebenen Text benutzen, ohne dass diese als Teil des Markups interpretiert werden?</p> + +<p>Wir müssen hier Zeichenreferenzen benutzen — spezielle Codes, welche einzelne Zeichen repräsentieren und welche in diesen Fällen genutzt werden können. Jede Zeichenreferenz wird mit einem Und-Zeichen (&) gestartet und mit einem Semikolon (;) beendet.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Ausgegebener Character</th> + <th scope="col">Zeichenreferenz</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>In dem untenstehenden Beispiel können Sie einen Absatz sehen, in dem über Webtechnologien geschreiben wird:</p> + +<pre class="brush: html notranslate"><p>In HTML definieren Sie einen Absatz mit dem <p>-Element.</p> + +<p>In HTML definieren Sie einen Absatz mit dem &lt;p&gt;-Element.</p></pre> + +<p>In dem Live-Output sieht man, dass der erste Absatz falsch dargestellt wird, weil der Browser den Tag nicht wie gewünscht anzeigt, sondern als Beginn eines neuen Absatzes interpretiert. Der zweite Absatz wird durch die Zeichenreferenzen korrekt dargestellt.</p> + +<p>{{ EmbedLiveSample('Charakter-Referenz_Spezielle_Charaktere_in_HTML', 700, 200) }}</p> + +<div class="note"> +<p><strong>Notiz</strong>: Eine Tabelle mit allen möglichen HTML Charakter-Referenzen kann auf Wikipedia gefunden werden: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> +</div> + +<h2 id="HTML_Kommentare">HTML Kommentare</h2> + +<p>In HTML, wie auch in den meisten anderen Programmiersprachen, kann man Kommentare schreiben. Kommentare schreibt man in den Code, diese werden aber vom Browser ignoriert und somit unsichtbar für Benutzer der Webseite. Mit Kommentaren kann man als Entwickler des Codes, diesen für sich selbst und andere leichter verständlich machen. Besonders am Anfang ist es sinnvoll sich mit Kommentaren Anmerkungen zu dem geschriebenen Code zu machen, um später nachvollziehen zu können, was ein bestimmtes Stück Code bewirkt. Sie möchen Ihren Code ja auch noch verstehen nachdem Sie mehrere Monate nichts daran gemacht haben, oder dass ein Mitarbeiter ihren Code verstehen kann.</p> + +<p>Um einen Abschnitt in Ihrem HTML-Dokument zu einem Kommentar zu machen, schließen Sie diesen in die speziellen Marker <code><!--</code> und <code>--></code> ein, zum Beispiel:</p> + +<pre class="brush: html notranslate"><p>Ich bin nicht in einem Kommentar</p> + +<!-- <p>Ich bin in einem Kommentar und werde auf der Webseite nicht angezeigt!</p> --></pre> + +<p>Wie Sie unten erkennen können, wird der erste Absatz dargestellt, der zweite aber nicht.</p> + +<p>{{ EmbedLiveSample('HTML_Kommentare', 700, 100) }}</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Sie haben das Ende des Artikels erreicht und wir hoffen es hat Ihnen etwas Spaß gemacht bei uns die Grundlagen von HTML zu erlernen! An diesem Punkt sollten Sie verstehen, wie diese Sprache aussieht, wie sie funktioniert und in der Lage sein einige Elemente und Attribute zu benutzen. In weiterfürhenden Artikeln aus diesem Modul werden wir einige der Dinge, die Sie hier gelernt haben wieder aufgreifen und uns im Detail anschauen, aber auch neue Möglichkeiten dieser Sprache entdecken. Bleiben Sie dabei!</p> + +<div class="note"> +<p><strong>Notiz</strong>: Nun, da Sie dabei sind mehr über HTML zu lernen, möchten Sie vielleicht auch schon einmal in die Grundlagen von Cascading Style Sheets, kurz <a href="/de/docs/Learn/CSS">CSS </a>hineinstöbern. CSS ist die Sprache mit der wir unseren Webseiten einen bestimmten Stil geben. Zum Beispiel lassen sich mit CSS die Farben auf der Webseite ändern. HTML und CSS arbeiten Hand in Hand, wie Sie bald entdecken werden.</p> +</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..dad40a05a9 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,643 @@ +--- +title: Einfache Textformatierung in HTML +slug: Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML +tags: + - Beginner + - Einführung in HTML + - HTML + - Lernen + - Listen + - Semantik + - Text + - Text formatieren + - Überschriften +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Einer der Hauptaufgaben von HTML ist es, Text zu strukturieren und diesem eine bestimmte Bedeutung zu verleihen, damit der Browser den Text im richtigen Kontext darstellen kann. In diesem Artikel wird erklärt, wie man mit {{glossary("HTML")}} Texte formattieren kann. Dazu gehört das hervorheben einzelner Textpassagen, als auch die Darstellung des Textblocks, zum Beispiel als Absatz, Liste oder als Überschrift.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>Grundlagen von HTML, wie sie im Artikel <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lerne HTML kennen</a> abgedeckt werden.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Erlernen von grundlegender Textformattierung - Benutzung von Absätzen, Überschriften, Listen, Hervorhebung von Textstellen und Zitate.</td> + </tr> + </tbody> +</table> + +<h2 id="Überschriften_und_Absätze">Überschriften und Absätze</h2> + +<p>Meistens besteht Text aus Überschriften und Absätzen, egal ob Sie nun eine Geschichte, einen Zeitungsartikel, ein Magazin oder auf einer Webseite lesen.</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p> + +<p>Gut strukturierter Inhalt macht es sehr viel einfacher und angenehmer diesen zu lesen.</p> + +<p>In HTML wird ein Absatz durch ein {{htmlelement("p")}}-Element dargestellt, so zum Beispiel:</p> + +<pre class="brush: html"><p>Ich bin ein Absatz, ja das bin ich.</p></pre> + +<p>Jede Überschrift wird von Überschriften-Tags als solche gekennzeichnet:</p> + +<pre class="brush: html"><h1>Ich bin der Titel einer Geschichte.</h1></pre> + +<p>Es gibt sechs verschiedene Überschriften-Elemente — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} and {{htmlelement("h6")}}. Jedes dieser Elemente repräsentiert eine andere Gewichtung des Inhalts im Dokument. <code><h1></code> repräsentiert die Hauptüberschrift, <code><h2></code> repräsentiert Unterüberschriften, <code><h3></code> repräsentiert Unter-Überschriften und so weiter.</p> + +<h3 id="Struktur_schaffen">Struktur schaffen</h3> + +<p>Als Beispiel würden in einer Geschichte <code><h1></code> zum ausweisen des Titels genutzt, <code><h2></code> für die Kapitelüberschriften und <code><h3></code> um ein Kapitel in mehrere Sektionen zu unterteilen.</p> + +<pre class="brush: html"><h1>Die erdrückende Langeweile</h1> + +<p>Von Chris Mills</p> + +<h2>Kapitel 1: Die dunkle Nacht</h2> + +<p>Es war eine dunkle Nacht. Irgendwo hörte man eine Eule rufen. Der Regen strömte herab auf... </p> + +<h2>Kapitel 2: Die ewige Stille</h2> + +<p>Unser Protagonist kann gerade so aus dem Schatten heraus flüstern...</p> + +<h3>Der Geist spricht</h3> + +<p>Nachdem mehrere Stunden der Stille vorbei gegangen waren, setzte sich plötzlich der Geist aufrecht hin und rief "Bitte habt erbarmen mit meiner Seele!"</p></pre> + +<p>Sie können selber entscheiden, wie Sie Struktur in Ihre Texte bringen wollen, so lange die Hierarchie Sinn ergibt. Hier geben wir Ihnen ein paar Ratschläge, um sinnvolle Strukturen zu erschaffen:</p> + +<ul> + <li>Sie sollten möglichst nur eine einzige <code><h1></code>-Überschrift pro Seite haben — dies ist die Hauptüberschrift des Dokuments und alle anderen Überschriften gehören darunter.</li> + <li>Gehen Sie sicher, das Sie die Überschriften in der richtigen Reihenfolge nutzen. Nutzen Sie nicht <code><h3>'</code> , um Kapitelüberschriften zu kennzeichnen und darunter dann <code><h2>'</code>, um Unterüberschriften im Kapitel anzuzeigen, denn das macht keinen Sinn und führt zu merkwürdigen Resultaten.</li> + <li>Von den sechs Überschiftenordnungen die es gibt, sollten Sie möglichst nicht mehr als drei pro Seite benutzen, es sei denn es ist wirklich nötig. Dokumente mit zu viel Hierarchien bringen mehr Aufwand mit sich und sie sind schwieriger zu navigieren. Es wäre sinnvoller den entsprechenden Inhalt auf mehrere Seiten zu verteilen.</li> +</ul> + +<h3 id="Wieso_brauchen_wir_Struktur">Wieso brauchen wir Struktur?</h3> + +<p>Um diese Frage zu beantworten, schauen wir uns folgendes Dokument an: <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> Dieses Dokument (ein leckeres Hummus-Rezept) wird uns den ganzen Artikel lang begleiten, also speichern Sie am besten jetzt gleich eine Kopie davon auf Ihrem Computer, um daran mitzuarbeiten. Der <code>body</code> des Dokuments enthält im Moment eine Reihe von Inhalten, welche nicht wirklich strukturiert sind. Einzig ein paar Zeilenumbrüche wurden in dem HTML-Dokument genutzt, um Inhalte voneinander zu trennen (es wurde Enter/Return gedrückt, um zur nächsten Zeile zu springen).</p> + +<p>Wenn Sie dieses Dokument im Browser öffnen, werden Sie feststellen, das der Text in einem großen Block angezeigt wird! Die Zeilenumbrüche werden also komplett ignorert.</p> + +<p><img alt="Eine Webseite, auf welcher ein unformatiertes Hummus-Rezept zu lesen ist. Es gibt keine Elemente die dem Dokument Struktur geben." src="https://mdn.mozillademos.org/files/15527/hummus-rezept-unformatiert.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 755px;"></p> + +<p>Der Browser findet keine Elemente, die dem Dokument eine Struktur geben, er kann nicht von selbst erkennen was Überschriften, Zeilenumbrüche und Absätze sind. Nachteile einer strukturlosen Webseite:</p> + +<ul> + <li>Neue Benutzer einer Webseite scannen diese als erstes nach relevanten Inhalten durch, lesen oft nur die Überschriften und hervorgehobene Textstellen. Wenn Sie nichts brauchbares innerhalb einiger Sekunden finden, dann werden sie die Webseite wieder verlassen.</li> + <li>Suchmaschinen indexieren Ihre Webseite auch anhand der Überschriften. Ohne Überschriften würde eine Webseite sehr schlecht in den Suchergebnissen abschneiden. Stichwort: {{glossary("SEO")}} (Suchmaschinenoptimierung).</li> + <li>Menschen mit Sehbehinderung können eine Webseite nicht lesen. Anstatt dessen wandeln Bildschirmlesegeräte, so genannte Screenreader, die Webseite in gesprochenen Text um. Diese Screenreader benötigen oft die Überschriften eines Dokuments, um die Navigation durch die Webseite zu ermöglichen. Ansonsten würde immer das ganze Dokument komplett vorgelesen, anstatt den Teilen die wirklich von Interesse sind.</li> + <li>Um den Inhalt mit {{glossary("CSS")}} zu stylen oder mit {{glossary("JavaScript")}} interessante Dinge tun zu lassen, braucht es den Inhalt umschließende Elemente, welche als Ziel genutzt werden können.</li> +</ul> + +<p>Daher müssen wir unserem Text eine sinnvolle Auszeichnung geben.</p> + +<h3 id="Aktives_Lernen_Unserem_Inhalt_Struktur_geben">Aktives Lernen: Unserem Inhalt Struktur geben</h3> + +<p>Lassen Sie uns gleich mit einem interaktiven Beispiel beginnen. Ändern Sie den rohen Text im <em>Input</em>-Feld mittels HTML-Auszeichnungen so, das im <em>Output</em>-Feld eine Überschrift mit zwei Absätzen darunter erscheint.</p> + +<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Meine Kurzgeschichte + +Ich bin eine Polizeifrau und mein Name ist Trish. + +Meine Beine sind aus Pappkarton und ich bin verheiratet mit einem Fisch. +</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<h1>Meine Kurzgeschichte</h1>\n<p>Ich bin eine Polizeifrau und mein Name ist Trish.</p>\n<p>Meine Beine sind aus Pappkarton und ich bin verheiratet mit einem Fisch.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h3 id="Warum_brauchen_wir_Semantik">Warum brauchen wir Semantik?</h3> + +<p>Wir verlassen uns die ganze Zeit auf Semantik - wir beruhen uns auf Ereignisse, die wir erlebt haben, um die Funktion von Dingen um uns herum zu beurteilen. Wenn wir etwas sehen, dann wissen wir was für eine Funktion dieses haben wird. Zum Beispiel erwarten wir, dass eine rote Ampel "Stop" bedeutet, während ein grünes Ampellicht uns erlaubt weiterzufahren. Dinge können schnell aus dem Ruder laufen, wenn Semantik falsch genutzt wird. (Zum Beispiel wäre es in einem Land, in welchem das rote Ampellicht "Fahren" bedeutet, vielleicht nicht so sicher).</p> + +<p>Genauso müssen wir bei unseren Elementen aufpassen, diesen die richtige Bedeutung, Funktion und das entsprechende Aussehen zukommen zu lassen. In diesem Kontext ist das {{htmlelement("h1")}}-Element auch ein sematisches Element, welches dem Text innerhalb der Tags die Rolle bzw. Bedeutung einer "Top-Level-Hauptüberschrift für die Webseite" gibt.</p> + +<pre class="brush: html"><h1>Dies ist eine Hauptüberschrift.</h1></pre> + +<p>Automatisch gibt der Browser diesem Element eine große Schriftgröße, damit es aussieht, wie eine Überschrift (auch wenn Sie es mittels CSS so stylen können, wie sie möchten). Wichtiger noch, der semantische Wert des Elements wird auf verschiedene Weise genutzt. Zum Beispiel greifen Suchmaschinen und Bildschirmlesegeräte darauf zurück (wie oben erklärt).</p> + +<p>Sie können jedes Element so <em>aussehen</em> lassen, wie eine Überschrift. Zum Beispiel wie folgt:</p> + +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Ist dies eine Top-Level-Überschrift?</span></pre> + +<p>Dies ist ein {{htmlelement("span")}}-Element. Es hat keinerlei semantischen Wert. Sie benutzen dieses Element, um Inhalt zu verpacken und als Ziel für CSS oder JavaScript zu nutzen, ohne ihm eine besondere Bedeutung zukommen zu lassen. (Sie werden später mehr darüber heraus finden.) Wir haben CSS benutzt, um dem Text das Aussehen einer Überschrift zu geben. Da es aber keinen sematischen Wert hat, bekommt dieser Text nicht die selbe Bedeutung wie ein echtes Überschriften-Element. Es ist also besser, das richtige HTML-Element für den richtigen Job zu benutzen, auch wenn es anders gehen mag.</p> + +<h2 id="Listen">Listen</h2> + +<p>Lassen Sie uns nun Listen anschauen. Listen gibt es überall - von Ihrem Einkaufszettel, über die Liste an Direktionen, welche Sie unbewusst befolgen, um jeden Tag Ihr Haus wiederzufinden, bis hin zu den Listen an Instruktionen, die sie in diesen Tutorials befolgen! Auch im Internet treffen Sie ständig auf Listen. Wir haben hier drei verschiedene Typen, welche Sie auf Ihren Webseiten benutzen können.</p> + +<h3 id="Ungeordnete_Listen">Ungeordnete Listen</h3> + +<p>Ungeordnete Listen werden benutzt, um eine Auflistung von Punkten zu erzeugen, bei der die Reihenfolge keine Rolle spielt - als Beispiel nehmen wir eine Einkaufsliste:</p> + +<pre>Milch +Eier +Brot +Hummus</pre> + +<p>Eine ungeordnete Liste startet mit dem {{htmlelement("ul")}}-Element, welches die einzelnen Listenelemente einhüllt:</p> + +<pre class="brush: html"><ul> +Milch +Eier +Brot +Hummus +</ul></pre> + +<p>Die einzelnen Listenpunkte selbst, werden jeweils von einem {{htmlelement("li")}}-Element umschlossen:</p> + +<pre class="brush: html"><ul> + <li>Milch</li> + <li>Eier</li> + <li>Brot</li> + <li>Hummus</li> +</ul></pre> + +<h4 id="Aktives_Lernen_Eine_ungeordnete_Liste_auszeichnen">Aktives Lernen: Eine ungeordnete Liste auszeichnen</h4> + +<p>Versuchen Sie das Beispiel unten so zu ändern, dass Sie eine eigene ungeordnete Liste bekommen.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Milch +Eier +Brot +Hummus</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 6em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ul>\n<li>Milch</li>\n<li>Eier</li>\n<li>Brot</li>\n<li>Hummus</li>\n</ul>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> + +<h3 id="Geordnete_Listen">Geordnete Listen</h3> + +<p>Geordnete Listen sind Listen bei denen die Anordnung der Listenelemente wichtig ist - zum Beispiel bei einer Wegbeschreibung:</p> + +<pre>Fahre bis zum Ende der Straße +Biege rechts ab +Fahre geradeaus über die nächsten beiden Verkehrskreisel +Biege nach dem dritten Kreisel links ab +Nach 300 Metern ist die Schule auf der rechten Seite +</pre> + +<p>Die Auszeichnungsstruktur is dieselbe wie für die ungeordnete Liste, außer das Sie die Listenpunke in ein {{htmlelement("ol")}}-Element einhüllen müssen, anstatt einem <code><ul></code>-Element:</p> + +<pre class="brush: html"><ol> + <li>Fahre bis zum Ende der Straße</li> + <li>Biege rechts ab</li> + <li>Fahre geradeaus über die nächsten beiden Verkehrskreisel</li> + <li>Biege nach dem dritten Kreisel links ab</li> + <li>Nach 300 Metern ist die Schule auf der rechten Seite</li> +</ol></pre> + +<h3 id="Aktives_Lernen_Eine_geordnete_Liste_auszeichnen">Aktives Lernen: Eine geordnete Liste auszeichnen</h3> + +<p>Bearbeiten Sie unten das Beispiel in der Codebox, so das Sie eine geordnete Liste bekommen:</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Fahre bis zum Ende der Straße +Biege rechts ab +Fahre geradeaus über die nächsten beiden Verkehrskreisel +Biege nach dem dritten Kreisel links ab +Nach 300 Metern ist die Schule auf der rechten Seite</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ol>\n<li>Fahre bis zum Ende der Straße</li>\n<li>Biege rechts ab</li>\n<li>Fahre geradeaus über die nächsten beiden Verkehrskreisel</li>\n<li>Biege nach dem dritten Kreisel links ab</li>\n<li>Nach 300 Metern ist die Schule auf der rechten Seite</li>\n</ol>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> + +<h3 id="Aktives_Lernen_Das_Hummus-Rezept_auszeichnen">Aktives Lernen: Das Hummus-Rezept auszeichnen</h3> + +<p>An diesem Punkt sollten Sie alle Informationen haben, die Sie brauchen, um unser Hummus-Rezept auf einer Seite mit HTML zu strukturieren. Sie können entweder die <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">hummus-rezept.html</a> Datei herunterladen und lokal auf Ihrem Computer bearbeiten oder die editierbare Codebox unten benutzen. Nur wenn Sie die Aufgabe lokal bearbeiten, können Sie diese auch speichern, um Sie sich später noch einmal anzuschauen. Was Sie im Browser bearbeiten ist beim nächsten Besuch verloren. Also überlegen Sie es, wie Sie es machen möchten.</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Schnelles Hummus Rezept + + Mit diesem Rezept können Sie schnell und ganz ohne eine Sauerei in der Küche, ein leckeres Hummus zubereiten. Es basiert auf verschiedenen Rezepten, die ich ausprobiert habe über die Jahre. + + Hummus ist eine leckere, dicke Paste, welche vor allem in Gerichten aus Griechenland und dem Mittleren Osten Verwendung findet. Es schmeckt sehr gut zu Salaten, gegrilltem Fleisch und Pita-Brot. + + + Zutaten + + 1 Dose (400g) Kichererbsen + 175g Tahini + 6 getrocknete Tomaten + eine halbe Schote rote Paprika + eine Messerspitze Cayenne Pfeffer + 1 Knoblauchzehe + ein Spritzer Olivenöl + + + Zubereitung + + Schälen Sie den Knoblauch und hacken ihn in grobe Stücke. + Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke. + Tun Sie alle Zutaten zusammen in eine Küchenmaschine. + Pürieren Sie die Zutaten zu einer Paste. + Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange. + Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger. + + Für einen etwas anderen Geschmack, probieren Sie kleine Mengen von Zitrone und Koriander, Chilischoten, Limonen und Chipotle-Paprika, Harissa und Minze oder Spinat und Feta-Käse mit hinein zu tun. Experimentieren Sie, um herauszufinden, was Ihnen am besten schmeckt. + + + Aufbewahrung + + Bewahren Sie das Hummus in einem geschlossenen Gefäß im Kühlschrank auf. Es sollte sich bis zu einer Woche halten, nachdem Sie es frisch gemacht haben. Wenn es anfängt komisch auszusehen, dann sollten Sie es wegwerfen. + + Hummus lässt sich einfrieren. Sie sollten es dann innerhalb einiger Monate wieder auftauen und verbrauchen.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = ' <h1>Schnelles Hummus Rezept</h1>\n\n<p>Mit diesem Rezept können Sie schnell und ganz ohne eine Sauerei in der Küche, ein leckeres Hummus zubereiten. Es basiert auf verschiedenen Rezepten, die ich ausprobiert habe über die Jahre.</p>\n\n<p>Hummus ist eine leckere, dicke Paste, welche vor allem in Gerichten aus Griechenland und dem Mittleren Osten Verwendung findet. Es schmeckt sehr gut zu Salaten, gegrilltem Fleisch und Pita-Brot.</p>\n\n<h2>Zutaten</h2>\n\n<ul>\n<li>1 Dose (400g) Kichererbsen</li>\n<li>175g Tahini</li>\n<li>6 getrocknete Tomaten</li>\n<li>eine halbe Schote rote Paprika</li>\n<li>eine Messerspitze Cayenne Pfeffer</li>\n<li>1 Knoblauchzehe</li>\n<li>ein Spritzer Olivenöl</li>\n</ul>\n\n<h2>Zubereitung</h2>\n\n<ol>\n<li>Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.</li>\n<li>Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.</li>\n<li>Tun Sie alle Zutaten zusammen in eine Küchenmaschine.</li>\n<li>Pürieren Sie die Zutaten zu einer Paste.</li>\n<li>Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.</li>\n<li>Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.</li>\n</ol>\n\n<p>Für einen etwas anderen Geschmack, probieren Sie kleine Mengen von Zitrone und Koriander, Chilischoten, Limonen und Chipotle-Paprika, Harissa und Minze oder Spinat und Feta-Käse mit hinein zu tun. Experimentieren Sie, um herauszufinden, was Ihnen am besten schmeckt.</p>\n\n<h2>Aufbewahrung</h2>\n\n<p>Bewahren Sie das Hummus in einem geschlossenen Gefäß im Kühlschrank auf. Es sollte sich bis zu einer Woche halten, nachdem Sie es frisch gemacht haben. Wenn es anfängt komisch auszusehen, dann sollten Sie es wegwerfen.</p>\n\n<p>Hummus lässt sich einfrieren. Sie sollten es dann innerhalb einiger Monate wieder auftauen und verbrauchen.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); + +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> + +<p>Wenn Sie es nicht selber schaffen, dann können Sie mit einem Klick auf <em>Lösung anzeigen</em> sehen, wie es gemacht wird oder unser ausgzeichnetes Beispiel, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a>, auf GitHub anschauen.</p> + +<h3 id="Listen_ineinander_schachteln">Listen ineinander schachteln</h3> + +<p>Listen können ineinander verschachtelt werden. Vielleicht möchten Sie Unterpunke unter einem Listenpunkt haben. Lassen Sie uns das anhand der zweiten Liste in unserem Rezept anschauen:</p> + +<pre class="brush: html"><ol> + <li>Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.</li> + <li>Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.</li> + <li>Tun Sie alle Zutaten zusammen in eine Küchenmaschine.</li> + <li>Pürieren Sie die Zutaten zu einer Paste.</li> + <li>Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.</li> + <li>Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.</li> +</ol> +</pre> + +<p>Da die letzten beiden Listenpunkte sich auf den Punkt davor beziehen, könnte man diese zusammen unter dem vierten Listenpunkt einordnen, in einer ungeordneten Liste. Das würde so aussehen:</p> + +<pre class="brush: html"><ol> + <li>Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.</li> + <li>Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.</li> + <li>Tun Sie alle Zutaten zusammen in eine Küchenmaschine.</li> + <li>Pürieren Sie die Zutaten zu einer Paste.</li> + <ul> + <li>Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.</li> + <li>Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.</li> + </ul> +</ol> +</pre> + +<p>Gehen Sie zurück zur obigen Aufgabe und fügen Sie eine Liste einer der vorhandenen beiden Listen hinzu. Wenn Sie damit fertig sind, sollte das Rezept so ähnlich aussehen:</p> + +<p><img alt="Eine Webseite, auf welcher ein formatiertes Hummus-Rezept zu lesen ist. Es gibt mehrere Elemente die dem Dokument Struktur geben." src="https://mdn.mozillademos.org/files/15529/hummus-rezept-formatiert.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 755px;"></p> + +<h2 id="Betonung_und_Wichtigkeit">Betonung und Wichtigkeit</h2> + +<p>Während wir sprechen, betonen wir oft bestimmte Wörter, um Ihre Bedeutung im Satz zu ändern. Solche Wörter möchten wir in einem Text hervorheben. HTML stellt verschiedene sematnische Elemente zur Verfügung, um dies zu bewerkstelligen. In dieser Sektion schaune wir uns einige der geläufigsten Formen davon an.</p> + +<h3 id="Betonung">Betonung</h3> + +<p>Wenn wir eine bestimmte Betonung in der gesprochenen Sprache erreichen wollen, dann heben wir bestimmte Wörter hervor, um ihre Bedeutung leicht zu verändern. Ähnlich heben wir solche Wörter in geschriebener Sprache hervor, indem wir ein Wort <em>kursiv</em> schreiben. Zum Beispiel haben die folgenden beiden Sätze eine unterschiedliche Bedeutung.</p> + +<p>Ich bin froh, dass du nicht zu spät bist.</p> + +<p>Ich bin <em>froh</em>, dass du nicht <em>zu spät</em> bist.</p> + +<p>Der erste Satz klingt danach, das jemand wirklich erleichtert ist, das die Person nicht zu spät ist, der zweite Satz klingt hingegen eher sarkastisch, mit einem Klang von Vorwurf, da die Person sich etwas verspätet hatte.</p> + +<p>In HTML benutzen wir das {{htmlelement("em")}}-Element (von engl.:emphasis = Betonung), um solche Wörter hervorzuheben. Es macht ein Dokument etwas interessanter zu lesen. Auch Bildschrimlesegeräte können so eine besondere Betonung erkennen und nutzen. Browser zeigen den Text im Element normalerweise kursiv an, doch Sie sollten das Tag nicht einizig dazu benutzen, Text kursiv anzuzeigen. Um das zu erreichen können Sie entweder das {{htmlelement("span")}}-Element und CSS nutzen oder auch das {{htmlelement("i")}}-Element (siehe weiter unten).</p> + +<pre class="brush: html"><p>Ich bin <em>froh</em> dass du nicht <em>zu spät</em>bist.</p></pre> + +<h3 id="Wichtige_Wörter">Wichtige Wörter</h3> + +<p>Um wichtige Wörter hervorzuheben, betonen wir diese in der gesprochenen Sprache sehr stark und schreiben diese in <strong>Fettschrift</strong> in geschriebener Sprache. Zum Beispiel:</p> + +<p>Diese Flüssigkeit ist <strong>sehr giftig</strong>.</p> + +<p>Ich zähle auf dich. <strong>Sei nicht</strong> zu spät!</p> + +<p>In HTML benutzen wir das {{htmlelement("strong")}}-Element (engl.: <em>strong</em> = stark/fett) um solche Wörter hervorzuheben. Es macht das Dokument lesbarer und auch hier können Screenreader erkennen, dass Wörter besonders betont ausgelesen werden sollten. Browser zeigen den Inhalt dieses Elements in Fettschrift an, aber Sie sollten diesen Tag nicht alleine dafür verwenden, Schrift fett erscheinen zu lassen. Um das zu erreichen können Sie entweder das {{htmlelement("span")}}-Element und CSS nutzen oder auch das {{htmlelement("b")}}-Element (siehe weiter unten).</p> + +<pre class="brush: html"><p>Diese Flüssigkeit ist <strong>sehr giftig</strong>.</p> + +<p>Ich zähle auf dich. <strong>Sei nicht</strong> zu spät!</p></pre> + +<p>Sie können <code><strong></code>-Elemente und <code><em></code>-Elemente ineinander verschachteln:</p> + +<pre class="brush: html"><p>Diese Flüssigkeit ist <strong>sehr giftig</strong> — +wenn Sie diese trinken, <strong>dann werden Sie <em>sterben</em></strong>.</p></pre> + +<h3 id="Aktives_Lernen_Lassen_Sie_uns_wichtig_sein!">Aktives Lernen: Lassen Sie uns wichtig sein!</h3> + +<p>In diesem Aktives-Lernen-Beispiel, haben wir editierbaren Code. Probieren Sie nun <code><strong></code>-Elemente und <code><em></code>-Elemente einzufügen, um bestimmte Textstellen besonders hervorzuheben. Üben Sie ein wenig, diese HTML-Elemente hinzuzufügen und auch zu verschachteln.</p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><h1>Wichtige Nachricht</h1> + +<p>Am Sonntag den 9. Januar 2010 wurde eine Gang Goths gesehen, wie sie mehrere Gartenzwerge aus einem Einkaufszentrum, im Stadtzentrum von Milwaukee, geklaut haben. Sie haben alle grüne Anzüge und komische Hüte getragen. Sie scheinen sich dabei großartig amüsiert zu haben. Wenn irgendjemand Informationen zu diesem Vorfall haben, bittet die Polizei darum, kontaktiert zu werden.</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<h1>Wichtige Nachricht</h1>\n<p>Am <strong>Sonntag den 9. Januar 2010</strong>, wurde eine Gang <em>Goths</em> gesehen, wie sie <strong><em>mehrere</em> Gartenzwerge</strong> aus einem Einkaufszentrum, im Stadtzentrum von <strong>Milwaukee</strong> geklaut haben. Sie haben alle <em>grüne Anzüge</em> und <em>komische Hüte</em>, getragen. Sie scheinen sich dabei großartig amüsiert zu haben. Wenn irgendjemand <strong>Informationen</strong> zu diesem Vorfall haben, bittet die Polizei darum, <strong>sofort</strong> kontaktiert zu werden.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> + +<h3 id="Kursiv_fett_unterstrichen...">Kursiv, fett, unterstrichen...</h3> + +<p>Die beiden Elemente, die wir oben besprochen haben, haben eine eindeutige semantische Bedeutung. Die Situation ist etwas anders mit den {{htmlelement("b")}}, {{htmlelement("i")}} und {{htmlelement("u")}}-Elementen. Sie wurden erschaffen, um Leuten die Möglichkeit zu geben Text in fett (engl.:<em><strong>b</strong>old</em>), kursiv (engl.:<em><strong>i</strong>talic</em>) oder unterstrichen (engl.:<em><strong>u</strong>nderlined</em>) anzuzeigen, in einer Zeit in welcher CSS noch nicht von allen Browsern unterstützt wurde. Solche Elemente, welche nur das Aussehen, aber nicht die Bedeutung, verändern, nennt man auch <strong>präsentationsbezogenes Element</strong>. Sie sollten nach Möglichkeit nicht mehr benutzt werden, denn wie wir gesehen haben, ist eine gute Semantik sehr wichtig für Suchmaschinen und Barrierefreiheit.</p> + +<p>In HTML5 wurden <code><b></code>, <code><i></code> und <code><u></code> neu definiert, mit einer etwas verwirrenden semantischen Bedeutung.</p> + +<p>Hier ist die beste Faustregel dafür: es ist wahrscheinlich in Ordnung <code><b></code>, <code><i></code> oder <code><u></code> zu benutzen, um die Bedeutung der traditionellen Nutzung von fettem, kursivem oder unterstrichenem Text zu geben, wenn es kein passenderes Element gibt. Denken Sie aber immer auch an die Barrierefreiheit Ihrer Webseite. Leute, welche Screenreader benutzen, können mit kursivem Text, ohne Bedeutung, nichts anfangen. Auch funktioniert es möglicherweise nicht mit einem anderen, als dem Lateinischen Buchstabensystem.</p> + +<ul> + <li>{{HTMLElement('i')}} wird benutzt, um die traditionelle Rolle von kursivem Text anzuzeigen: Fremdwörter, Taxonomische Begriffe, Fachwörter, Gedanken...</li> + <li>{{HTMLElement('b')}} wird benutzt, um die traditionelle Rolle von fettem Text anzuzeigen: Stichwörter, Produktnamen, wichtige Sätze...</li> + <li>{{HTMLElement('u')}} wird benutzt, um die traditionelle Rolle von unterstrichenem Text anzuzeigen: richtige Namen, Rechtschreibfehler...</li> +</ul> + +<div class="note"> +<p><strong>Hinweis:</strong>Eine Warnung zu unterstrichenem Text: <strong>Unterstrichener Text wird stark mit Hyperlinks assoziiert.</strong> Deswegen ist es auf Webseiten besser, nur Links zu unterstreichen. Benutzen Sie das <code><u></code>-Element, wo es passt, aber passen Sie möglicherweise mit CSS an, damit der Text anders aussieht, als die Links auf Ihrer Webseite. Unten können Sie sehen, wie das gemacht werden kann.</p> +</div> + +<pre class="brush: html"><!-- Wissenschaftliche Namen --> +<p> + Der winzige Rubinkehlkolibri (<i>Archilochus colubris</i>) ist ein auffallend farbenprächtiger Vogel, der in den östlichen Teilen der USA und Kanadas anzutreffen ist. +</p> + +<!-- Fremdwörter --> +<p> + Das Menü bestand aus einer Fülle an extosichen Wörtern, zum Beispiel <i lang="uk-latn">vatrushka</i>, + <i lang="id">nasi goreng</i> und <i lang="fr">soupe à l'oignon</i>. +</p> + +<!-- Ein bekannter Schreibfehler --> +<p> + Eines Tages werde ich lernen, wie man <u>bessser</u> buchstabiert. +</p> + +<!-- Stichpunkte in einer Anleitung hervorheben --> +<ol> + <li> + <b>Schneiden</b> Sie zwei Scheiben Brot ab. + </li> + <li> + <b>Legen</b> Sie eine Tomate und ein Salatblatt zwischen die Brotscheiben. + </li> +</ol></pre> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Sie haben es geschafft! Dieser Artikel sollte Ihnen beigebracht haben wie Sie Text mit HTML-Elementen strukturieren können. Es wurden die wichtigsten Eltemente dafür vorgeführt. Es gibt weitere Möglichkeiten, Texten eine bestimmte semanitsche Bedeutungen zukommen zu lassen. Wir werden uns diese im Artikel "Fortgeschrittene Textformatierung" anschauen. Im nächsten Artikel geht es erst einmal darum, wie man <a href="/en-de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hyperlinks erstellt</a>, das wichtigste Element im Internet.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/de/learn/html/introduction_to_html/index.html b/files/de/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..73f46a2614 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/index.html @@ -0,0 +1,65 @@ +--- +title: Einführung in HTML +slug: Learn/HTML/Einführung_in_HTML +tags: + - Einführung in HTML + - HTML + - Kopf + - LandingPage + - Lernen + - Links + - Struktur + - Textformatierung + - head +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{glossary("HTML")}} ist eine relativ einfache Sprache, die aus <a href="/de/docs/Glossary/Element">Elementen</a> aufgebaut ist. Diese Elemente können auf verschiedene Textstücke angewandt werden, um ihnen verschiedene Bedeutungen zuzuschreiben (Ist es ein Absatz, eine Liste oder Teil einer Tabelle?), um ein Dokument sinnvoll zu strukturieren (Gibt es eine Kopfzeile? Ist der Inhalt in drei Spalten gegliedert? Gibt es ein Navigationsmenü?) und um Inhalte, wie Videos und Bilder einzubetten. Dieses Modul wird sich mit den ersten Beiden dieser Punkte beschäftigen und die fundamentalen Konzepte und Syntax einführen, die Sie zum Verständnis von HTML kennen müssen.</p> + +<h2 id="Voraussetzungen">Voraussetzungen</h2> + +<p>Sie benötigen für dieses Modul keine HTML Kenntnisse, allerdings sollten Sie grundsätzlich mit Computern umgehen können und das Internet passiv nutzen (d.h. im Internet surfen und Inhalte konsumieren). Sie sollten sich bereits eine einfache Arbeitsumgebung eingerichtet haben, wie in <a href="/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Notwendige Software installieren</a> beschrieben; und wissen wie Sie Ihre Dateien erstellen und ordnen, wie in <a href="/de/docs/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a> erklärt. Beide Artikel sind Teil unserer Artikelserie <a href="/de/docs/Learn/Getting_started_with_the_web">Lerne das Internet kennen</a>, welche das Grundwissen abdeckt, welches in diesem Modul vorrausgesetzt wird.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf dem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/">Thimble </a>ausprobieren.</p> +</div> + +<h2 id="Lerneinheiten">Lerneinheiten</h2> + +<p>Dieses Modul enthält die folgenden Lerneinheiten, die Ihnen HTML in Theorie und Praxis näher bringen. Es werden viele Möglichkeiten geboten, in denen Sie Ihre neu erworbenen Fähigkeiten ausprobieren können.</p> + +<dl> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a></dt> + <dd>Hier lernen Sie die absoluten Grundlagen von HTML. Für den Anfang werden wir Begriffe, wie "Elemente", "Attribute" und andere wichtige Begriffe definieren und deren Einordung in die Sprache vornehmen. Wir zeigen Ihnen, wie eine HTML-Webseite typischerweise aufgebaut ist, wie eine HTML-Elemente strukturiert sind und erklären weitere grundlegende Sprachfunktionen. Sie können zwischendurch immer wieder mit HTML-Code spielen, damit sie ein Gefühl für die Zusammenhänge bekommen.</dd> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Was gehört in den Kopf der HTML-Datei?</a></dt> + <dd>Der Kopf (<a href="/en-US/docs/Glossary/Head">Head</a>) eines HTML Dokuments ist der Teil, der <strong>nicht</strong> im Browser angezeigt wird, wenn dieses geladen wird. Im Kopf sind Zusatzinformationen zur Webseite enthalten, zum Beispiel das {{htmlelement("title")}}-Element, das den Titel der Webseite enthält, Links zu {{glossary("CSS")}}-Dateien (mit welchen die Webseite gestaltet wird) und Metadaten (z. B. wer der Autor der Webseite ist und Schlagwörter, welche Suchmaschinen helfen Ihre Webseite einzuordnen).</dd> + <dt><a href="/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML/Einfache_Textformatierung_in_HTML">Einfache Textformatierung in HTML</a></dt> + <dd>Eine der Hauptaufgaben von HTML ist es, jedem Textteil Informationen zu seiner Bedeutung im Kontext zukommen zu lassen (auch <a href="/en-US/docs/Glossary/Semantics">Semantics</a> genannt), damit der Browser weiß, wie der Textteil darzustellen ist. In diesem Artikel lernen Sie, wie man mit HTML einen Textblock in Überschriften und Absätze strukturiert, Hervorhebungen und Gewicht zu Wörtern hinzufügt, Listen erstellt und vieles mehr.</dd> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks"> Erstellen von Hyperlinks</a></dt> + <dd>Hyperlinks sind sehr wichtig, denn erst Sie machen das Internet zu einem Netzwerk. Dieser Artikel behandelt die Syntax eines Links und bespricht allgemeine Richtlinien zu Links.</dd> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Fortgeschrittene Textformatierung</a></dt> + <dd>Es gibt, neben den im Artikel <a href="/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML/Einfache_Textformatierung_in_HTML">Einfache Textformatierung in HTML</a> erläuterten, viele weitere HTML-Elemente, mit denen man Texte formatieren kann. Diese HTML-Elemente sind nicht ganz so bekannt, aber es ist dennoch hilfreich, sie zu kennen. Hier lernen Sie, wie man Zitate einbindet, Description Lists (dt. etwa: beschreibende Listen) erstellt, Computer-Code und ähnlichen Text darstellt, Hoch- und Tiefstellung erreicht, Kontaktinformationen anordnet und einiges mehr.</dd> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struktur in die Webseite bringen</a></dt> + <dd>Sie können mit HTML sowohl individuelle Teile der Webseite (wie "einen Absatz" oder "ein Bild"), aber auch ganze Abschnitte der Seite formatieren (wie "die Kopfzeile", "das Naviagtionsmenü" oder "die Hauptinhaltsspalte"). In diesem Artikel geht es um das planen einer grundlegenden Webseitenstruktur und die anschließende Umsetzung dieser Struktur in HTML.</dd> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Fehlersuche in HTML</a></dt> + <dd>HTML schreiben zu können ist gut, aber was können Sie tun, wenn etwas nicht funktioniert und Sie den Fehler im Code nicht finden? Dieser Artikel stellt ein paar Werkzeuge vor, die Ihnen bei der Fehlersuche helfen können.</dd> +</dl> + +<h2 id="Aufgaben">Aufgaben</h2> + +<p>Die folgenden Übungsaufgaben überprüfen Ihr Verständnis der in den obigen Lerneinheiten behandelten HTML-Grundlagen.</p> + +<dl> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Formatieren Sie einen Brief</a></dt> + <dd>Wir lernen früher oder später alle, einen formalen Brief zu schreiben. Darüber hinaus ist es auch ein schönes Beispiel um den Wissenstand im Bereich der Textformatierung unter Beweis zu stellen. In dieser Aufgabe sollen Sie einen vorgegebenen Brief mit HTML formatieren.</dd> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Strukturieren Sie eine Webseite</a></dt> + <dd>In dieser Übungsaufgabe wird Ihre Fähigkeit getestet, mit HTML eine einfache Webseite zu strukturieren. Diese enthält eine Kopfzeile, eine Fußzeile, ein Navigationsmenü, eine Hauptspalte und eine Randspalte.</dd> +</dl> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Webgrundlagen Basiskurs 1 (Englisch)</a></dt> + <dd>Ein exzellenter Kurs der Mozilla Foundation, der viele Inhalte des <em>Einführung in HTML</em> Moduls, anwendet und festigt. Die Lernenden machen sich in diesem sechsteiligen Modul mit dem Lesen, Schreiben und Teilnehmen im Internet vertraut. Entdecken Sie die Fundamente des Internets durch Erschaffen und Zusammenarbeit.</dd> +</dl> diff --git a/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..e2d3e9d636 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -0,0 +1,102 @@ +--- +title: Marking up a letter +slug: Learn/HTML/Einführung_in_HTML/Marking_up_a_letter +tags: + - Anfänger + - Brief + - HTML + - Links + - Text + - head +translation_of: Learn/HTML/Introduction_to_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><head></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 <head> 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> diff --git a/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..fc439ad60b --- /dev/null +++ b/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -0,0 +1,99 @@ +--- +title: Structuring a page of content +slug: Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorbereitungen:</th> + <td>Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a>.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td> + <p>Das Testen des eigenen Wissens über Strukturen von Internetseiten und darüber, wie Layout Designs in Markup dargestellt werden.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Startpunkt">Startpunkt</h2> + +<p>Um diese Selbsteinschätzung zu starten, sollten Sie die <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">ZIP-Datei mit allen Startinhalten</a> herunterladen. Die ZIP-Datei enthält:</p> + +<ul> + <li>Den HTML-Code, der mit Markup strukturiert werden soll</li> + <li>CSS, um Ihr Markup zu gestalten</li> + <li>Bilder, die auf der Seite verwendet werden.</li> +</ul> + +<p>Erstellen Sie das Beispiel lokal auf Ihrem Computer 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 den Test zu absolvieren.</p> + +<h2 id="Projekt_Kurzbeschreibung">Projekt: Kurzbeschreibung</h2> + +<p>Ihre Aufgabe in diesem Projekt ist es, den Inhalt einer Bird Watching-Homepage als Grundlage zu verwenden und ihm Struktur zu geben, sodass ein Page Layout darauf angewendet werden kann. Dazu werden benötigt:</p> + +<ul> + <li>A header spanning the full width of the site containing the main title for the page, the site logo, and the navigation menu. The title and logo appear side by side once styling is applied, and the navigation appears below those two items.</li> + <li>A main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails.</li> + <li>Ein Footer, der Copyright-Informationen und Credits enthält.</li> +</ul> + +<p>Sie müssen einen passenden Wrapper hinzufügen für:</p> + +<ul> + <li>Den Header</li> + <li>Das Navigationsmenü</li> + <li>Den Main Content</li> + <li>Den Begrüßungstext</li> + <li>Die Bilder-Sidebar</li> + <li>Den Footer</li> +</ul> + +<p>Sie sollten außerdem:</p> + +<ul> + <li>das vorgegebene CSS auf die Seite anwenden, indem Sie ein anderes {{htmlelement("link")}}-Element direkt unter dem bereits existierenden Element am Anfang ergänzen.</li> +</ul> + +<h2 id="Hinweise_und_Tipps">Hinweise und Tipps</h2> + +<ul> + <li>Use the <a href="https://validator.w3.org/nu/">W3C Nu HTML Checker</a> to catch unintended mistakes in your HTML, CSS, and SVG — mistakes you might have otherwise missed — so that you can fix them.</li> + <li>You don't need to know any CSS to do this assessment; you just need to put the provided CSS inside an HTML element.</li> + <li>The provided CSS is designed so that when the correct structural elements are added to the markup, they will appear green in the rendered page.</li> + <li>If you are getting stuck and can't envisage what elements to put where, it often helps to draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block.</li> +</ul> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Der nachfolgende Screenshot zeigt beispielhaft, wie die Homepage nach der Auszeichnung mittels HTML aussehen könnte.</p> + +<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></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 href="https://discourse.mozilla.org/t/structuring-a-page-of-content-assignment/24678">Disskussionsthread zu dieser Übung</a> nachfragen oder im <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC Channel auf <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!</p> + +<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module">In this module</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> diff --git a/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..f775774535 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,268 @@ +--- +title: Was gehört in den Kopf der HTML-Datei? +slug: Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML +tags: + - Anfänger + - Beginner + - HTML + - Kopf + - Meta + - Metadaten + - Sprache + - Umlaute + - favicon + - head + - lang +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Der Kopf (engl.: head) eines HTML Dokumentes, ist der obere Teil innerhalb des <head>-Elements, welcher nicht direkt im Webbrowser gezeigt wird, wenn die Seite gerendert wird. Er enthält Zusatzinformationen zur Webseite, wie den {{htmlelement("title")}}, Links zu CSS-Dateien und einem Favicon, andere Metadaten, wie den Autor der Webseite und eine kurze Beschreibung für Suchmaschinen. In diesem Artikel geht es um all diese Themen und noch mehr, um Ihnen beizubringen wie Sie den Kopf der HTML-Datei am sinnvollsten nutzen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>HTML-Grundlagen, wie sie in <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lerne HTML kennen</a> abgedeckt werden.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Lernen für was der Kopf des HTML-Dokuments da ist, die wichtigsten Dinge die dort hinein gehören und wie sie das HTML-Dokument beeinflussen</td> + </tr> + </tbody> +</table> + +<h2 id="Was_ist_der_HTML-Kopf">Was ist der HTML-Kopf?</h2> + +<p>Lassen Sie uns nochmal einen Blick auf das einfache HTML Dokument werfen,<a href="/de/Learn/HTML/Introduction_to_HTML/Lerne_HTML_kennen"> mit welchem wir uns im vorherigen Artikel beschäftigt haben</a>:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Meine Testseite</title> + </head> + <body> + <p>Dies ist meine Webseite.</p> + </body> +</html></pre> + +<p>Der HTML-Kopf ist der Inhalt im {{htmlelement("head")}}-Element. Anders als der Inhalt des {{htmlelement("body")}}-Elements, welcher im Browserfenster angezeigt wird, bleibt der Kopf im Browser verborgen. Die Aufgabe des Kopfes ist es, {{glossary("Metadata", "metadata")}} über das Dokument zu beinhalten. In unserem Beispiel ist der Kopf nicht sehr groß:</p> + +<pre class="brush: html"><head> + <meta charset="utf-8"> + <title>Meine Testseite</title> +</head></pre> + +<p>Auf großen Webseiten wird der Kopf aber recht voll. Schauen Sie sich mal den Bereich im <code><head></code>-Element bei Ihren Lieblingswebseiten an, indem Sie die Developer Tools nutzen oder einfach <code>view-source:</code> vor der Webadresse in die Adresszeile schreiben (z.B. <code>view-source:http://mozilla.org</code>). Unser Ziel hier ist es nicht alle Möglichkeiten zu zeigen, was man in den Kopf schreiben kann, aber wir werden Ihnen die wichtigsten und nützlichsten Dinge vorstellen. Fangen wir an!</p> + +<h2 id="Einen_Titel_hinzufügen">Einen Titel hinzufügen</h2> + +<p>Wir haben das {{htmlelement("title")}}-Element schon in Aktion gesehen - es kann genutzt werden, um der Webseite einen Titel hinzuzufügen. Dies kann mit dem {{htmlelement("h1")}}-Element verwechselt werden, welches benutzt wird, um innerhalb des <code><body></code>-Elements dem Inhalt der Webseite eine Hauptüberschrift zu geben. Manchmal wird diese Hauptüberschrift auch Titel genannt. Die beiden Elemente sind aber sehr unterschiedlich!</p> + +<ul> + <li>Das {{htmlelement("h1")}}-Element erscheint auf der Webseite selbst, wenn diese im Browser geladen wird. Dieses Element sollte nur einmal pro Seite erscheinen, um als Hauptüberschrift für den aktuellen Inhalt zu fungieren.</li> + <li>Das {{htmlelement("title")}}-Element gehört zu den Metadaten und repräsentiert den Titel der gesamten Webseite, nicht nur den Inhalt einer Seite darauf.</li> +</ul> + +<h3 id="Aktives_Lernen_Beispiel_anschauen">Aktives Lernen: Beispiel anschauen</h3> + +<ol> + <li>Als erstes möchten wir das Sie zu unserem GitHub Repositorium gehen und eine Kopie von <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a> herunterladen. Um das zu tun, können Sie entweder + + <ol> + <li>Den Code direkt von der Seite kopieren und diesen in eine neue Textdatei in Ihrem Code-Editor einfügen. Vergessen Sie nicht die Datei zu speichern.</li> + <li>Drücken Sie auf den "Raw" Button auf der Seite, welcher den Code in einem neuen Browserfenster anzeigen lässt. Wählen Sie nun in Ihrem Browsermenu <em>Datei > Speichere Seite unter...</em> und speichern die Datei auf Ihrem Computer.</li> + </ol> + </li> + <li>Öffnen Sie diese Datei in Ihrem Browser. Sie sollten folgendes sehen: + <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Es sollte hier klar werden, wo das <code><h1></code>-Element erscheint und wo das <code><html></code>-Element zu sehen ist!</p> + </li> + <li>Sie sollten auch versuchen, den Code in Ihrem Code-Editor zu öffnen. Ändern Sie den Inhalt der Elemente, speichern Sie die Datei und aktualisieren Sie die Seite im Browser. Probieren Sie ein bisschen herum.</li> +</ol> + +<p>Der Inhalt des <code><title></code>-Elements wird auch auf andere Weise genutzt. Wenn Sie zum Beispiel die Seite zu Ihren Lesezeichen hinzufügen (<em>Lesezeichen > Lesezeichen hinzufügen</em> oder die Schaltfläche mit dem Stern in der Adresszeile in Firefox), werden Sie sehen, dass der Inhalt des <code><title></code>-Elements als Name für das Lesezeichen vorgeschlagen wird.</p> + +<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p>Der Inhalt des <code><title></code>-Elements wird auch von Suchmaschinen genutzt, wie Sie weiter unten sehen werden.</p> + +<h2 id="Metadaten_das_<meta>-Element">Metadaten: das <meta>-Element</h2> + +<p>Metadaten sind Daten, welche Daten beschreiben. HTML hat einen "offiziellen" Weg, Meatadaten zu einem Dokument hinzuzufügen, das {{htmlelement("meta")}}-Element. Natürlich könnten auch die anderen Dinge, die wir hier besprechen, als Metadaten bezeichnet werden. Es gibt eine Menge verschiedener <code><meta></code>-Elemente, welche in das <code><head></code>-Element plaziert werden können. Wir werden hier nicht alle erklären, da dies sehr verwirrend werden würde. Statt dessen erklären wir einige Dinge die sie häufig sehen werden, um Ihnen eine Idee zu geben, um was es hier geht.</p> + +<h3 id="Zeichensatz_einer_Webseite_festlegen">Zeichensatz einer Webseite festlegen</h3> + +<p>In dem obigen Beispiel war diese Zeile enthalten:</p> + +<pre class="brush: html"><meta charset="utf-8"></pre> + +<p>Mit diesem Element wird der genutzte Zeichensatz auf der Webseite bestimmt - es wird das Set an Zeichen festgelegt, welches vom Browser benutzt werden soll. <code>utf-8</code> ist ein universeller Zeichensatz in dem fast jeder Charakter enthalten ist, der in menschlicher Schrift benutzt wird. Das bedeutet, das ihre Webseite fast alle Sprachen anzeigen kann. Es ist also eine gute Idee, dies auf jeder Ihrer Webseiten zu setzen! Wenn Sie diesen nicht benutzen, werden Umlaute (Ä, ö) und ß nicht richtig angezeigt. Zum Beispiel kann Ihre Webseite damit gleichzeitig Englisch und Japanisch anzeigen:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Wenn Sie Ihren Zeichensatz zum Beispiel auf <code>ISO-8859-1</code> setzen, der Zeichensatz für das lateinische Alphabet, wird die Webseite nicht so schön aussehen:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<h3 id="Atkives_lernen_Experimentieren_mit_Zeichensätzen">Atkives lernen: Experimentieren mit Zeichensätzen</h3> + +<p>Um dies auszuprobieren, nutzen Sie wieder die einfache HTML-Vorlage, welche Sie in der vorherigen Sektion über das <code><title></code>-Element benutzt haben (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>). Verändern Sie den Wert von <code>meta-charset</code> in <code>ISO-8859-1</code> und fügen Sie japanische Buchstaben ihrer Seite hinzu. Das ist der Absatz, den wir benutzt haben:</p> + +<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> + +<p>Ändern Sie den Text im Absatz in einen deutschen Text, der Umlaute enthält. Dann löschen Sie das <code><meta charset></code>-Element, um zu sehen, was passiert. Fügen Sie das ursprüngliche <code>meta</code>-Tag danach wieder ein und sehen Sie sich den Unterschied im Webbrowser an.</p> + +<h3 id="Autor_und_Beschreibung_hinzufügen"> Autor und Beschreibung hinzufügen</h3> + +<p>Viele <code><meta></code> -Elemente beinhalten <code>name</code> und <code>content</code> Attribute:</p> + +<ul> + <li><code>name</code> spezifiziert den Typ des meta-Elements; welche Art von Information es enthält.</li> + <li><code>content</code> spezifiziert den eigentlichen Inhalt des meta-Elements.</li> +</ul> + +<p>Zwei dieser meta-Elemente, bei denen es sinnvoll ist, sie auf Ihrer Webseite zu nutzen, stellen wir hier vor. Sie definieren den Autor (engl.: author) und eine kurze Beschreibung (engl.: description) der Webseite. Schauen wir uns ein Beispiel an:</p> + +<pre class="brush: html"><meta name="author" content="Chris Mills"> +<meta name="description" content="The MDN Learning Area aims to provide +complete beginners to the Web with all they need to know to get +started with developing web sites and applications."></pre> + +<p>Einen Autor anzugeben ist sinnvoll, um zu zeigen, wer die Webseite geschrieben hat. Vielleicht möchte jemand Kontakt mit dem Autor aufnehmen, da er Fragen zum Inhalt oder zum Code der Webseite hat. Es gibt Seiten, welche automatisch den Autor der Webseite auslesen, um eine Kontaktmöglichkeit zu diesem zu erstellen.</p> + +<p>Eine Beschreibung welche zum Inhalt der Seite passende Stichwörter enthält, ist ein sinnvoller Weg, die Webseite in Suchmaschinen zu relevanten Suchbegriffen weiter oben erscheinen zu lassen. (solche Methoden werden unter dem Begriff <a href="/de/docs/Glossary/SEO">Suchmaschinenoptimierung</a> (engl.: "Search Engine Optimation", kurz {{glossary("SEO")}} zusammengefasst)</p> + +<h3 id="Aktives_Lernen_Beschreibung_für_Suchmaschinen">Aktives Lernen: Beschreibung für Suchmaschinen</h3> + +<p>Die Beschreibung wird von Suchmaschinen auch auf der Ergebnisseite genutzt. Schauen wir uns das mal genauer an - in einer Übung.</p> + +<ol> + <li>Gehen Sie zu der<a href="https://developer.mozilla.org/"> Startseite von dem Mozilla Developer Network</a>.</li> + <li>Schauen Sie sich den Quellcode der Webseite an (Rechts/<kbd>Ctrl</kbd> + klick auf die Seite, wählen Sie <em>Quellcode anzeigen</em> von dem Kontextmenü oder schreiben Sie <code>view-source:</code> vor die Webadresse in der Adresszeile).</li> + <li>Finden Sie das description <code><meta></code>-Tag. Es sollte so aussehen: + <pre class="brush: html"><meta name="description" content="The Mozilla Developer Network (MDN) provides +information about Open Web technologies including HTML, CSS, and APIs for both +Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."></pre> + </li> + <li>Suchen Sie nun nach "Mozilla Developer Network" in einer beliebigen Suchmaschine (Wir haben Yahoo benutzt.) Sie werden bemerken das die Inhalte vom description <code><meta></code>-Tag und vom <code><title></code> hier erscheinen - es ist also sehr sinnvoll, diese beiden zu ntuzen! <img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></li> +</ol> + +<div class="note"> +<p><strong>Hinweis</strong>: Wenn Sie mit Google suchen, werden Sie einige Unterseiten von MDN sehen, direkt unter dem Link zur Hauptseite von MDN. Dies sind sogenannte Sitelinks und Sie können mit den <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> bearbeitet werden.</p> +</div> + +<div class="note"> +<p>Hinweis: Viele <code><meta></code>-Elemente sind nicht mehr so wichtig, wie sie einmal waren. Ein Beispiel ist das keyword <code><meta></code>-Element (<code><meta name="keywords" content="fill, in, your, keywords, here"></code>). Dieses sollte Schlagwörter für Suchmaschinen bereithalten , damit diese anhand der Schlagwörter Suchergebnisse zusammen stellen können. Mittlerweile wird dieses <code><meta></code>-Tag von vielen Suchmaschinen ignoriert, weil Sprammer die Stichwortliste mit hunderten von Stichwörtern gefüllt haben, womit die Suchergebnisse manipuliert werden konnten.</p> +</div> + +<h3 id="Andere_Typen_von_Metadaten">Andere Typen von Metadaten</h3> + +<p>Während Sie sich im Internet umschauen, werden Sie andere Typen von Metadaten entdecken. Einige Funktionen auf Webseiten sind proprietäre Kreationen (zum Beispiel Seiten von Sozialen Netzwerken), welche geschrieben wurden, um bestimmte Informationen zur Verfügung zu stellen.</p> + +<p>Zum Beispiel gibt es <a href="http://ogp.me/">Open Graph Data</a>, welches ein Metadatenprotokoll ist, welches von Facebook erfunden wurde, um reichhaltigere Metadaten zur Verfügung zu stellen. Im MDN Quellcode können Sie folgendes finden:</p> + +<pre class="brush: html"><meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> +<meta property="og:description" content="The Mozilla Developer Network (MDN) provides +information about Open Web technologies including HTML, CSS, and APIs for both Web sites +and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> +<meta property="og:title" content="Mozilla Developer Network"></pre> + +<p>Dieser Code bewirkt, das ein Link zu MDN von Facebook aus, ein Bild und eine Beschreibung beinhaltet. Das sieht dann so aus:</p> + +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Twitter nutzt ganz ähnliche Metadaten, welche einen ähnlichen Effekt haben. Ein spezifischer Titel, eine Kurzbeschreibung und ein Bild können bei Angabe eines Links angezeigt werden. Als Beispiel:</p> + +<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="Spezielle_Icons_der_Webseite_hinzufügen">Spezielle Icons der Webseite hinzufügen</h2> + +<p>Um das Design Ihrer Webseite weiter zu verschönern, können Sie in den Metadaten eine Referenz zu einem speziellen Icon-Set hinzufügen. Diese werden dann in einem bestimmten Kontext angezeigt.</p> + +<p>Das Favicon, welches es schon seit vielen Jahren gibt, ist das erste Icon seiner Art. Es ist 16 x 16 Pixel groß und wird an verschiedenen Stellen genutzt. Sie können Favicons vor dem Titel einer Webseite in den meisten Browser-Tabs sehen. Auch wenn Sie eine Seite Ihren Lesezeichen hinzufügen, wird dort das Favicon verwendet.</p> + +<p>Ein Favicon fügen Sie Ihrer Webseite wie folgt hinzu:</p> + +<ol> + <li>Speichern Sie das Favicon mit der Endung <code>.ico</code> in dem selben Ordner, in dem auch Ihre <code>index.html</code> Datei ist. Die meisten Browser würden auch <code>.gif</code> und <code>.png</code> Format akzeptieren, mit dem ICO Format gehen Sie aber sicher, das auch ältere Browser das Favicon anzeigen.</li> + <li>Fügen Sie die folgende Zeile in den <code><head></code>-Bereich Ihrer HTML-Datei ein, um eine Referenz zu dem Favicon zu erzeugen: + <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p>Hier ist ein Beispiel, indem ein Favicon in einer Lesezeichen-Liste angezeigt wird:</p> + +<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>Es gibt heutzutage viele andere Icon-Typen die man der Webseite hinzufügen kann. Zum Beispiel werden Sie folgendes im Quellcode der MDN Startseite finden:</p> + +<pre class="brush: html"><!-- third-generation iPad with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> +<!-- iPhone with high-resolution Retina display: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> +<!-- first- and second-generation iPad: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> +<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> +<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> +<!-- basic favicon --> +<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"></pre> + +<p>Die Kommentare erklären für was die verschiedenen Icons da sind. Zum Beispiel gibt es ein hochauflösendes Icon, welches angezeigt wird, wenn die Webseite auf dem Startbildschirm eines IPad's gespeichert wird.</p> + +<p>Machen Sie sich nicht zu viele Sorgen, all diese Icons müssen Sie nicht direkt in Ihrer Webseite haben. Sie sind eher ein Feature für fortgeschrittene Webentwickler und werden nicht zur Absolvierung dieses Kurses benötigt. Sie sollen hier nur erfahren für was diese Code-Zeilen stehen, wenn Sie diese im Quellcode anderer Webseiten sehen.</p> + +<h2 id="CSS_und_JavaScript_der_HTML-Datei_hinzufügen">CSS und JavaScript der HTML-Datei hinzufügen</h2> + +<p>Fast alle modernen Webseiten benutzen {{glossary("CSS")}}, um diese gut aussehen zu lassen und {{glossary("JavaScript")}} um interaktive Elemente hinzuzufügen, wie Video-Spieler, Karten, Spiele und vieles mehr. Diese werden der HTML-Datei normalerweise wie folgt hinzugefügt:</p> + +<ul> + <li>Für das Einbinden von CSS-Dateien wird das {{htmlelement("link")}}-Element benutzt. Dieses wird im Kopf der HTML-Datei eingebunden. Das Element nimmt zwei Attribute, einmal <code>rel="stylesheet"</code>, welches Angibt das es sich um ein Stylesheet handelt. Das andere Attribut ist <code>href</code>, welches als Wert den Pfad zu der CSS-Datei beinhaltet: + + <pre class="brush: html"><link rel="stylesheet" href="meine-css-datei.css"></pre> + </li> + <li>Für das Einbinden von JavaScript-Dateien wird das {{htmlelement("script")}}-Element genutzt und es wird meistens am Ende der HTML-Datei, vor dem schließenden <code></body></code>-Tag verwendet. Dadurch wird der HTML-Inhalt zuerst fertig geladen und erst am Ende der JavaScript-Code ausgeführt und auf die fertig gerenderte Webseite angewendet: + <pre class="brush: html"><script src="meine-js-datei.js"></script></pre> + + <p><strong>Hinweis</strong>: Das <code><script></code>-Element sieht aus wie ein leeres Element, aber das ist es nicht, weswegen ein schließendes Tag notwendig ist. Anstatt auf eine externe JavaScript-Datei zu verweisen, könnte man den Code auch direkt in das <code><script></code>-Element hineinschreiben.</p> + </li> +</ul> + +<h3 id="Aktives_Lernen_Binden_Sie_CSS_und_JavaScript_in_eine_Seite_ein">Aktives Lernen: Binden Sie CSS und JavaScript in eine Seite ein</h3> + +<ol> + <li>Holen Sie sich jeweils eine Kopie von unseren <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> und <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a>-Dateien und speichern diese lokal auf ihrem Computer in demselben Ordner ab. Gehen Sie sicher das die Dateien mit den richtigen Namen und Dateiendungen gespeichert sind.</li> + <li>Öffnen Sie die HTML-Datei sowohl in Ihrem Browser, als auch in einem Texteditor.</li> + <li>Fügen Sie nun ein {{htmlelement("link")}}-Element hinzu, welches auf die CSS-Datei verweist und ein {{htmlelement("script")}}-Element, welches die JavaScript-Datei einbindet, wie Sie es in diesem Artikel gelernt haben.</li> +</ol> + +<p>Wenn Sie nun das HTML-Dokument speichern und im Browser neu laden, dann sollten Sie folgende Änderungen an der Webseite sehen:</p> + +<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>Der JavaScript-Code hat der Seite eine leere Liste hinzugefügt. Wenn Sie nun irgendwo auf die Liste klicken, dann öffnet sich eine Dialog-Box, in welcher Sie Text eingeben können, der nach drücken auf "OK" als neuer Listenpunkt erscheint. Wenn Sie auf einen existierenden Listeneintrag klicken können Sie, über die Dialog-Box, diesen Eintrag ändern.</li> + <li>Die eingebundene CSS-Datei hat dafür gesorgt, dass der Hintergrund grün ist und der Text größer ist. Es wurde auch der Inhalt gestylet, welcher durch den JavaScript-Code der Webseite hinzugefügt wurde, nämlich der rote Hintergrund und ein schwarzer Rahmen um die Liste herum.</li> +</ul> + +<div class="note"> +<p><strong>Hinweis:</strong> Falls Sie an dieser Übung hängen bleiben und die externen Dateien nicht korrekt eingebunden bekommen, dann schauen Sie sich unsere <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> Beispiel Webseite an.</p> +</div> + +<h2 id="Die_genutzte_Sprache_der_Webseite_angeben">Die genutzte Sprache der Webseite angeben</h2> + +<p>Am Ende soll hier noch angemerkt werden, das Sie die genutzte Sprache auf der Webseite angeben können und sollten. Dies kann einfach gemacht werden indem Sie das <a href="/de/docs/Web/HTML/Global_attributes/lang"><code>lang</code>-Attribut</a> dem öffnenden HTML-Tag hinzufügen (wie auf <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> gemacht und es unten gezeigt wird).</p> + +<pre class="brush: html"><html lang="de"></pre> + +<p>Dies ist in vielerlei Hinsicht eine hilfreiche Angabe. Ihr HTML-Dokument wird effizienter von Suchmaschinen aufgenommen, wenn die Sprache angegeben ist. Auch für Screenreader ist die Angabe der Sprache am Beginn des Dokumentes wichtig.</p> + +<p>Sie können auch für Bereiche Ihrer Webseite eine andere Sprache angeben. Zum Beispiel könnten Sie einen Bereich, in welchem japanischer Text steht, wie folgt angeben:</p> + +<pre class="brush: html"><p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p></pre> + +<p>Die Ländercodes werden im <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> Standard definiert. Sie können hier mehr darüber lesen: <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a> (in Englisch)</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Dies ist das Ende unseres Exkurses über den Kopf der HTML-Datei. Es gäbe noch einiges mehr, was man dort tun könnte, aber es wäre für einen Anfänger nicht hilfreich. Die meistgenutzten Sachen haben wir hier erklärt. Weiter geht es mit Einfache Textformatierung in HTML.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> |