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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
---
language: html
contributors:
- ["Christophe THOMAS", "https://github.com/WinChris"]
translators:
- ["Dennis Keller", "https://github.com/denniskeller"]
filename: learnhtml-de.html
lang: de-de
---
HTML steht für HyperText Markup Language (Hypertext-Auszeichnungssprache).
Sie ist eine Sprache, um Seiten für das World Wide Web zu schreiben.
Es ist eine Auszeichnugssprache, die es uns ermöglicht Webseiten mithilfe des Codes zu schreiben, der kennzeichnet wie Text und Daten angezeigt werden sollen. Eigentlich sind HTML Dateien nur einfache Textdateien.
Was sind das für Auszeichnungen? Es ist eine Methode, um die Daten der Website zu organisieren mithilfe von Start- und Endtags.
Diese Auszeichnung dient dazu dem Text Bedeutung zu geben, welchen sie umschließt.
Wie viele andere Computersprachen auch, besitzt HTML viele Versionen. Wir werden hier über HTML5 reden.
**NOTE :** Du kannst die unterschiedlichen Tags und Elemente, während des Tutorials auf Seiten, wie [codepen](http://codepen.io/pen/) testen, um deren Effekte zu sehen und wie diese funktionieren. Auch kannst du dich damit besser mit der Sprache vertraut machen.
Dieser Artikel ist bedacht darauf, nur HTML Syntax und nützliche Tipps zu geben.
```html
<!-- Kommentare werden wie in dieser Zeile geschrieben -->
<!-- #################### Die Tags #################### -->
<!-- Hier ist eine Beispiel HTML Datei, die wir analysieren werden -->
<!doctype html>
<html>
<head>
<title>Meine Website</title>
</head>
<body>
<h1>Hallo Welt!</h1>
<a href = "http://codepen.io/anon/pen/xwjLbZ">Komm schau was das hier anzeigt</a>
<p>Das ist ein Paragraf.</p>
<p>Das ist ein weiterer Paragraf.</p>
<ul>
<li>Das ist eine Item mit einer nicht-nummerierten Liste (Aufzählungsliste)</li>
<li>Das ist ein weiteres Item</li>
<li>Und das ist das letzte Item in der Liste</li>
</ul>
</body>
</html>
<!-- Jede HTML Datei startet damit dem Browser zu sagen, dass die Seite aus HTML besteht. -->
<!doctype html>
<!-- Danach startet sie mit einem Öffnungtag <html>. -->
<html>
<!-- Dieser wird am Ende der Datei mit </html> geschlossen. -->
</html>
<!-- Nichts sollte nach diesem finalen Tag erscheinen. -->
<!-- Dazwischen (Zwischen dem Öffnungs- und Schließungstag <html></html>) finden wir: -->
<!-- Ein Kopf wird definiert mit <head> (er muss mit </head> geschlossen werden). -->
<!-- Der Header beinhaltet Beschreibungen und zusätzliche Informationen, welche nicht dargestellt werden. Das sind Metadaten. -->
<head>
<title>Meine Seite</title><!-- Der <title> kennzeichnet dem Browser den Titel im Browserfenster und im Tabnamen anzuzeigen. -->
</head>
<!-- Nach dem <head> Bereich findet sich der <body> Tag -->
<!-- Bis zu diesem Punkt wird nichts im Browerfenster angezeigt. -->
<!-- Wir müssen den Body mit dem Inhalt füllen, der angezeigt werden soll. -->
<body>
<h1>Hallo, Welt!</h1> <!-- Der h1 Tag erstellt einen Titel. -->
<!-- Es gibt auch Untertitel für <h1> von den wichtigsten <h2> zu den Unwichtigsten (h6). -->
<a href = "http://codepen.io/anon/pen/xwjLbZ">Komm, schaue was das zeigt</a> <!-- Eine URL wird zum Hyperlink, wenn es das Attribut href="" hat -->
<p>Das ist ein Absatz.</p> <!-- Der Tag <p> lässt uns Text auf die HTML Seite hinzufügen. -->
<p>Das ist ein anderer Absatz.</p>
<ul> <!-- Der <ul> Tag erstellt eine Aufzählungsliste. -->
<!-- Für eine nummerierte Liste sollten wir stattdessen <ol> verwenden. Das erste Element bekommt 1., das zweite 2. usw. -->
<li>Das ist ein Element in einer nicht Aufzählungsliste</li>
<li>Das ist ein anderes Item</li>
<li>Und das ist das letzte Element in der List</li>
</ul>
</body>
<!-- Und das war es. Eine HTML Datei kann so simpel sein. -->
<!-- Aber es ist möglich viele weitere zusätzliche HTML tags hinzuzufügen. -->
<!-- Um ein Bild hinzuzufügen. -->
<img src="http://i.imgur.com/XWG0O.gif"/> <!-- Die Quelle des Bildes wird gezeigt durch das Attribut src="" -->
<!-- Die Quelle kann eine URL sein oder ein Pfad zu deinem Computer. -->
<!-- Es ist ebenso möglich eine Tabelle zu erstellen. -->
<table> <!-- Wir öffnen ein <table> Element. -->
<tr> <!-- <tr> erlaubt es uns, Reihen zu erstellen. -->
<th>Erster Tabellenkopf</th> <!-- <th> erlaubt es uns, der Tabelle einen Titel zu geben. -->
<th>Zweiter Tabllenkopf</th>
</tr>
<tr>
<td>Erste Zeile, erste Spalte</td> <!-- <td> erlaubt es, eine Tabellenzelle zu erstellen. -->
<td>Erste Zeile, zweite Spalte</td>
</tr>
<tr>
<td>Zweite Zeile, erste Spalte</td>
<td>Zweite Zeile, zweite Spalte</td>
</tr>
</table>
```
## Verwendung
HTML Dateien enden mit `.html` oder mit `.htm`. Der Mime Typ ist meist `text/html`.
## Um mehr zu lernen
* [wikipedia (EN)](https://en.wikipedia.org/wiki/HTML)
* [HTML tutorial (EN)](https://developer.mozilla.org/en-US/docs/Web/HTML)
* [W3School (EN)](http://www.w3schools.com/html/html_intro.asp)
|
