1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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>
|
