HTML5 Einsteiger-Tutorial

Hinweis: Dieses Tutorial habe ich irgendwann im Jahr 2012 geschrieben.
Es ist mittlerweile sicherlich an einigen Stellen veraltet. Bitte beachtet das.

Einleitung

Dieses HTML5-Tutorial richtet sich an absolute Neulinge im Bereich der Websiteerstellung und der dazugehörigen Auszeichnungssprache HTML. In diesem Tutorial geht es einzig und alleine um die absoluten Grundlagen von HTML! Bevor wir anfangen solltest du dir jedoch sicher sein, dass dir das Lernen und Schreiben von HTML-Code Spaß macht. Ohne Eigenmotivation wird es schwierig sich diese Kenntnisse anzueigenen. Zum Schreiben von HTML-Code empfehle ich dir einen Editor der Syntaxhighlighting unterstützt. Ein kostenloser Editor der diese Funktion bietet ist zum Beispiel Notepad++. Diesen Editor möchte ich dir ans Herz legen falls du vorhast HTML-Code zu schreiben.

Was ist überhaupt HTML5

HTML ist die Abkürzung für Hypertext Markup Language; auf deutsch: Auszeichnungssprache. Wenn du eine Website im Internet ansurfst dann ist diese von Grund auf immer in HTML ausgezeichnet. Ohne HTML gäbe es nämlich keine Webseiten. Und um eine Website im Browser dazustellen wird diese Auszeichnungssprache benötigt. HTML selber ist eine clientseitige Websprache. Das heißt, dass der Quellcode auf dem Client-Rechner vom Browser übersetzt wird. Das genaue Gegenteil davon wäre die serverseitige Programmiersprache PHP (PHP: Hypertext Preprocessor) die vom Server übersetzt (geparst) wird. Von HTML gibt es verschiedene Versionen. Das fängt an bei HTML 1.0, geht über (X)HTML bis hin zum neuen HTML5. In diesem Tutorial geht es allerdings einzig und alleine um HTML5. Mit dem neuen HTML5-Standard und den neuen HTML5-Tags macht das Schreiben von HTML-Code noch mehr Spaß da es einige Verbesserungen im Gegensatz zu den alten Versionen gibt. Bei HTML5 ist ein großer Vorteil zum Beispiel der sehr kurze Doctype, die neuen semantischen Tags wie Header, Article, Footer und vieles mehr. Wollen wir anfangen? Los geht's.

Die HTML-Datei und das Grundgerüst

Wir beginnen direkt mit dem Grundgerüst einer HTML5-Datei. Um valides, also fehlerfreies, HTML5 zu schreiben muss ein Grundgerüst her. Dieses besteht im großen und ganzen aus insgesamt 4 Teilen. Das wäre einmal der Doctype-Tag, der HTML-Tag, der Head-Tag und der Body-Tag. Ein HTML-Tag hat immer eine ganz bestimmte Aufgabe. Ein HTML-Tag kann zum Beispiel für die Formatierung von Text, zum Anzeigen eines Bildes oder für Aufzählungen verwendet werden. Genauer gesagt ist ein HTML-Tag für die Struktur der Website verantwortlich. Für was die vorhin genannten Tags zuständig sind siehst du in der folgenden Auflistung:

Doctype

Der Doctype ist die erste Zeile Code die man in einer HTML-Datei wiederfindet. Der Doctype sagt dem Webbrowser in welcher HTML-Version das Dokument geschrieben wurde. Während man beim alten HTML4 und XHTML noch eine lange Zeile von Text schreiben musste, die man sich kaum merken konnte, muss man beim neuen HTML5-Doctype nur noch eine klitze kleine Zeile Code schreiben (Siehe Codebox).

HTML

Der HTML-Tag ist das, was man in der zweiten Zeile eines HTML-Dokumentes wiederfinden sollte. Der HTML-Tag beginnt unter dem Doctype und umschließt den kompletten weiteren HTML-Code. Zwischen die HTML-Tags wird dann der komplette weitere Code der Website geschrieben.

Head

Der Head-Tag ist ein ebenso wichtiges Element wie der Doctype und der HTML-Tag. In den Head-Tag kommen wichtige Informationen zur Seite. Darunter der verwendete Zeichensatz, der Titel-Text der im Webbroser auf den Tabs angezeigt wird und diverse Meta-Tags mit denen man Suchmaschinen wie Google weitere Anweisungen geben kann (dazu später mehr).

Body

Zum Schluss haben wir dann noch unseren Body-Tag. Dieser umschließt den kompletten eigentlichen Inhalt (Content) der Website. Kurz gesagt bedeutet das, dass in diesen Tag alles hineinkommt was man später im Browser auf der Seite sehen soll.

<!DOCTYPE html>
<html>
<head>
	<!-- Informationen zur Seite -->
</head>
<body>
	<!-- Eigentlicher Inhalt -->
</body>
</html>

In der Codebox siehst du jetzt das Grundgerüst eines HTML5-Dokuments. Die  die du im Quellcode siehst sind HTML-Kommentare. Die sind dazu da damit man sich persönliche Notizen über seinen Quellcode machen kann. Alles was zwischen diesen Tags steht wird vom Browser später nicht angezeigt. Du solltest jedoch darauf achten, dass du in die Kommentare keine vertraulichen Informationen schreibst denn wenn man sich den Seitenquelltext anzeigen lässt werden diese nämlich wieder sichtbar.

Der Head-Bereich

Machen wir weiter mit dem Head-Bereich. Wie bereits vorhin schon erwähnt kommen zwischen die Head-Tags wichtige Informationen zur Seite. Die wichtigsten Informationen die dort reinkommen sind wohl der Title-Tag, der Link-Tag zum Favicon, der Link-Tag zum Stylesheet und diverse Meta-Tags mit verschiedenen Attributen (darunter auch die Angabe des zu verwendeten Zeichensatzes). Im folgenden wieder eine kleine Auflistung mit genauerer Beschreibung zu den vorhin genannten Tags:

Title

Zwischen die Title-Tags kommt der Name des aktuellen Dokuments. Der Text der zwischen diesen Tags steht wird in deinem Webbroser ganz oben in der Statusleiste bzw. auf den Tab-Leisten angezeigt. Aber auch für Suchmaschinen wie Google ist dieser Tag sehr wichtig denn der Text der zwischen den Title-Tags steht wird auch in den Suchergebnissen angezeigt. Ein gut gewählter Title-Text kann den Besucher dazu animieren auf deine Seite zu klicken.

Link

Mit dem Link-Tags hat man die Möglichkeit dem Browser zu sagen, wo die aktuelle Style-Datei der Website liegt. Ebenso bindet man mit dem Link-Tag aber auch das Favicon der Seite ein das oben in der Tab-Leiste deines Browsers angezeigt wird. Als Favicon bezeichnet man dieses kleine Symbol, das man immer oben meist links neben den Tabs finden kann. Dies könnte zum Beispiel das Logo deiner Website sein.

Der Body-Bereich

Nun sind wir auch schon auf der zweiten Hälfte unseres HTML5-Grundgerüsts angekommen. Zwischen die Body-Tags kommt nun der komplete Inhalt der Website. Alles was auf der Website später angezeigt werden soll, muss in den Body-Tag. Wir kümmern uns in diesem Abschnitt jetzt um die neuen HTML5-Tags Section, Header, Article und Footer und wie man sie richtig anwendet. Die vier genannten Tags haben alle einen bestimmten Zweck. Welchen Zweck sie genau haben erfährst du in der erweiterten Beschreibung:

Section

Mit dem Section-Element kann man, wie mit einem Div-Element, einen bestimmten Abschnitt auszeichnen.

Header

Die Header-Tags sind für den Kopfbereich der Seite zuständig (darunter auch die Navigation). Alles was für den Kopfbereich der Seite ist kommt zwischen diese Tags. Das wäre zum Beispiel einmal die Seitennavigation und ggf. noch ein Logo der Website.

Article

Nach dem Header-Tag kommt der Article-Tag. Zwischen ihn kommt der Content der Seite. Dies wäre bei einem Blog zum Beispiel der Artikel. Anders gesagt kommt dort der ganze Inhalt der Website, außer der Kopf- und Fußbereich der Seite, rein.

Footer

Der Footer-Tag kommt ganz zum Schluss: Zwischen ihn kommt der komplette Fußbereich der Website. Dies wäre zum Beispiel der Link zum Impressum, der Link zum Kontaktformular und / oder der Copyrighthinweis.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="description" content="Dies ist meine allererste HTML5-Seite!" />
	<link rel="icon" href="favicon.ico" />
	<title>Meine erste HTML5-Seite</title>
</head>
<body>
	<section>
		<header>
			<!-- Kopfbereich (Logo, Menü, Navigation) -->
		</header>
		<article>
			<!-- Hauptbereich (Inhalt, Text, Artikel) -->
		</article>
		<footer>
			<!-- Fußbereich (Copyrights, Datenschutz) -->
		</footer>
	</section>
</body>
</html>

Wie du im Codebeispiel sehen kannst, wird somit die Stuktur des Quellcodes wesentlich besser. Man kann sofort erkennen wo ein bestimmter Bereich anfängt und wo er aufhört. Eines haben die 4 neuen Elemente jedoch gemeinsam: Es sind alles sogenannte Blockelemente. Das heißt, dass der Textfluss in einem neuen Absatz beginnt. Du siehst im Code einmal das Element Header und danach das Element Article. Da dies Blockelemente sind wird der Article-Bereich in einer neuen Zeile bzw. in einem neuen Absatz begonnen. Das Gegenteil von Blockelementen sind Inlineelemente. Bei diesen wird kein neuer Absatz oder eine neue Zeile angefangen. Ein Inlineelement ist zum Beispiel der B-Tag, der den Text fett darstellt (zu den Elementen zur Textformatierung später mehr). Innerhalb von Inline-Elementen dürfen keine Blockelemente stehen.

Du hast jetzt sicherlich schon einiges über das HTML5-Grundgerüst und den Aufbau gelernt. Auf der nächsten Seite machen wir dann weiter mit diversen Textformatierungstags und überschriften in HTML5.

Überschriften

Wir machen weiter mit den Überschriften. Es gibt insgesamt 6 H-Tags die jeweils eine andere Größe und eine andere semantische Bedeutung haben. Angfangen beim größten H1 bis hin zum kleinsten H6. Aus Sicht der Suchmaschinenoptimierung sollte eine HTML5-Seite genau eine H1-Überschrift, kann jedoch mehrere der restlichen Tags (H2 bis H6), enthalten. Da das mit den Überschriften ziemlich schnell erklärt ist, wird dieser Abschnitt auch nur sehr kurz sein. Wenn du Überschriften verwendest solltest du darauf achten, dass du die Tags der Reihe nach setzt.

Falsch wäre zum Beispiel zuerst eine H3-Überschrift und dann eine H1-Überschrift zu verwenden. Was du jedoch darfst ist, mehrere der gleichen Überschriften nacheinander zu verwenden. Zum Beispiel eine Hauptüberschrift (H1) und danach für alle weiteren Unterüberschriften H2. Im folgenden ein Codebeispiel mit Verwendung der H-Tags.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="description" content="Dies ist meine allererste HTML5-Seite!" />
	<link rel="icon" href="favicon.ico" />
	<title>Meine erste HTML5-Seite</title>
</head>
<body>
	<section>
		<!-- Hauptüberschrift H1 -->
		<h1>Meine erste HTML5-Seite</h1>

		<!-- Unterüberschrift H2 -->
		<h2>Eine Unterüberschrift</h2>

		<!-- Weitere Unterüberschrift H3 -->
		<h3>Eine weitere Unterüberschrift</h3>

		<!-- [......] -->

		<!-- Kleine Unterüberschrift H6 -->
		<h6>Eine ganz kleine Unterüberschrift</h6>
	</section>
</body>
</html>

Absätze und Zeilenumbrüche

Wenn du einen Text auf deiner Website schreibst dann möchtest du gelegentlich auch Absätze verwenden. Hier kommen die P-Tags ins Spiel. Ein P-Tag umschließt immer einen Textblock. Wenn du nun einen Absatz erzeugen willst schließt du den Textblock mit dem P-Tag und setzt danach wieder zwei neue P-Tags zwischen die der nächste Textblock kommt. P-Tags sind ebenfalls Blockelemente. Das heißt, dass der Textfluss nach einer neuen Zeile weitergeht. (Mehr dazu im Codebeispiel).

Aber was ist, wenn du nur einen einfachen Zeilenumbruch und nicht direkt einen Absatz machen willst? Dazu gibt es den BR-Tag. Der BR-Tag besteht jedoch nicht aus einem Start- und einem End-Tag sondern nur aus einem einzelnen Tag. Diesen kannst du überall dort einfügen wo du einen Zeilenumbruch erwünschst. Falls ich es vergessen habe zu erwähnen: Wenn du in deinem HTML-Code (also im Editor) einen Absatz oder einen Zeilenumbruch machst, dann bedeutet das nicht, dass dies auch im Browser geschieht. Diese Art von Absätzen und Zeilenumbrüchen werden vom Browser ignoriert. Wenn du einen Absatz oder einen Zeilenumbruch auf deiner Website erwünschst dann musst du immer die entsprechenden Tags verwenden.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="description" content="Dies ist meine allererste HTML5-Seite!" />
	<link rel="icon" href="favicon.ico" />
	<title>Meine erste HTML5-Seite</title>
</head>
<body>
	<section>
		<!-- Absätze und Zeilenumbrüche -->
		<h1>Meine erste HTML5-Seite</h1>
		<p>Willkommen auf meiner allerersten HTML5-Seite!</p>
		<p>Und das ist ein einfacher Absatz<br />mit einem Zeilenumbruch!</p>
	</section>
</body>
</html>

Du kannst übrigens auch mehrere BR-Tags hintereinander schreiben um den gleichen Effekt wie den mit den P-Tags zu bekommen. Allerdings ist diese Art der Absatzerzeugung falsch. Wenn du einen Absatz erzeugen willst verwende immer die P-Tags.

Textformatierung: Fett, Kursiv und Unterstrichen

Um deine Texte auf deiner Website zu formatieren gibt es 3 HTML-Tags. Einmal der B-Tag mit dem man Text fett darstellen kann, dann der I-Tag mit dem man Text kursiv darstellen kann und zum Schluss noch der U-Tag mit dem man Text unterstreichen kann. Alle diese drei Tags sind Inlineelemente. Du darfst sie also fast überall verwenden. Da das ganze hier auch nicht allzu schwer zu verstehen ist gibt es jetzt noch ein kleines Codebeispiel mit Verwendung der Tags zur Textformatierung und dann ist dieser Abschnitt auch wieder zu Ende.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="description" content="Dies ist meine allererste HTML5-Seite!" />
	<link rel="icon" href="favicon.ico" />
	<title>Meine erste HTML5-Seite</title>
</head>
<body>
	<section>
		<!-- Textformatierung mit B, I und U -->
		<p>
		Ich bin ein Text der <b>fett dargestellt wird</b>!<br />
		Ich bin ein Text der <i>kursiv dargestellt wird</i>!<br />
		Ich bin ein Text der <u>unterstrichen dargestellt wird</u>!
		</p>
	</section>
</body>
</html>

Hyperlinks

Hyperlinks, also Links zu anderen Webseiten oder anderen HTML-Dateien, macht man mit dem A-Tag. Zwischen den Starttag muss mindestens ein Attribut gesetzt werden. Dabei handelt es sich um das HREF-Attribut. Dieses enthält entweder eine absolute URL zu einer anderen Website oder eine relative URL zur eigenen Website. Zwischen die A-Tags kommt nun der Linktext. Das ganze ist an sich nicht sonderlich schwer. Hier mal ein Beispielcode mit einem Link zur Google-Startseite und einmal zu einer zweiten HTML-Seite in deiner Website.

<!-- Hyperlinks [Absolut] -->
<a href="http://google.com">Zu Google.com</a>

<!-- Hyperlinks [Relativ] -->
<a href="index.html">Zur Startseite</a>

Da das Beispiel an sich ja relativ einfach ist zeige ich dir noch zwei weitere Attribute die du im A-Tag benutzen kannst. Das wäre einmal das Title- und einmal das Target-Attribut. In das Title-Attribut kannst du eine erweiterte Beschreibung für den Link setzen. Diese wird angezeigt wenn man mit dem Mauszeiger über den Link fährt. Und mit dem Target-Attribut kannst du angeben, ob sich der Link in einem neuen Tab öffnen soll.

<!-- Hyperlinks [Absolut] -->
<a href="http://google.com" title="Zur Google-Suchmaschine" target="_blank">Zu Google.com</a>

<!-- Hyperlinks [Relativ] -->
<a href="index.html" title="Zurück zur Startseite">Zur Startseite</a>

Grafiken und Bilder

Jetzt wird es auch schon etwas bunter. Mit dem IMG-Tag kannst du nämlich auch Bilder auf deiner Website einbinden. Ein IMG-Tag brauch mindestens ein Attribut. Dies wäre das SRC-Attribut welches für Source steht. Im SRC-Attribut kannst du also den Pfad zu deinem Bild angeben. Dies kann wiederrum ein absoluter oder ein relativer Pfad sein. Im folgenden ein Beispielcode zum einbinden eines Bildes welches sich genau in dem selben Ordner befindet wo auch die HTML-Datei liegt.

<!-- Grafiken -->
<b>Ein Bild</b><br />
<img src="mein-bild.jpg" />

Wenn dein Bild nun allerdings in einem Unterverzeichnis liegt dann musst du dieses angeben. Wenn dein Bild also im Verzeichnis Images liegen würde dann müsste der SRC-Link folgendermaßen aussehen: src="images/mein-bild.jpg". Falls das Bild aber nicht in einem Unterverzeichnis sondern in einem Oberverzeichnis, also ein Verzeichnis zurück liegt, dann müsste der SRC-Link so aussehen: src="../mein-bild.jpg". Genau so verhält es sich übrigens auch bei relativen Hyperlinks.

Weitere Attribute: Natürlich möchtest du auch die Größe des Bildes bestimmen welches angezeigt werden soll. Dazu gibt es zwei Attribute: Einmal height und width; also Höhe und Breite. Diese sollte man später wenn CSS zum Einsatz kommt jedoch nicht mehr verwenden. Ansonsten ist auch noch das Title-Attribut, wie vorhin bei den Hyperlinks, erlaubt. Was dieses Attribut macht solltest du bereits schon wissen. Dazu folgt wieder ein Codebeispiel.

<!-- Grafiken -->
<b>Ein Bild</b><br />
<img src="mein-bild.jpg" height="100" width="200" title="Mein erstes Bild" />

Und nun lernst du noch ein weiteres Attribut kennen. Nämlich das ALT-Attribut. Dieses Attribut muss in jedem IMG-Tag vorhanden sein und einen alternativen Text beinhalten. Dieser Text wird dann angezeigt, wenn das Bild auf dem entsprechenden Server nicht mehr gefunden wurde, wenn es beschädigt ist oder wenn ein Nutzer der Grafiken deaktiviert hat die Seite besucht. Allerdings gibt es hier noch eine Kleinigkeit zu beachten: schreibe in das ALT-Attribut nur etwas rein, wenn die Grafik keine Layout-Grafik ist. Layout-Grafiken sind Grafiken die nichts mit dem Inhalt zu tun haben sondern einfach nur zum Aufhübschen der Seite gedacht sind. Bei Layout-Grafiken lässt du das ALT-Attribut einfach leer, es muss aber vorhanden sein.

<!-- Grafiken -->
<b>Ein Bild</b><br />
<img src="mein-bild.jpg" height="100" width="200" title="Mein erstes Bild" alt="Ich bin ein Bild" />

Ungeordnete und geordnete Listen

Kommen wir zu den Listenelementen. Es gibt zwei Arten von Listen in HTML: Einmal eine ungeordnete Liste und einmal eine geordnete Liste. Bei der ungeordneten Liste werden die einzelnen Listenpunkte nicht numeriert sondern bekommen einfach einen Punkt davor. Wir beginnen mit der ungeordneten Liste die sich mit den UL-Tags erzeugen lässt. UL steht hier für Unordered List; auf deutsch: Ungeordnete Liste. Wir erzeugen eine ungeordnete Liste in dem wir dir UL-Tags setzen. Jetzt haben wir schon eine ungeordnete Liste. Allerdings fehlen uns die einzelnen Listenpunkte! Um einzelne Listenpunkte zu erzeugen gibt es die LI-Tags. Diese umschließen jeweils einen Listenpunkt. Im folgenden Codebeispiel einmal ein Beispiel mit einer ungeordneten Liste.

<!-- Ungeordnete Liste -->
<h1>Eine ungeordnete Liste</h1>
<ul>
	<li>Ich bin der erste Listenpunkt.</li>
	<li>Ich bin der zweite Listenpunkt.</li>
	<li>Ich bin der dritte Listenpunkt.</li>
</ul>

Wenn du diesen Beispielcode jetzt in deinem Browser testest dann siehst du eine Liste die jeweils vor den Listenpunkten eine Art Punkt stehen hat. Aus diesem Grund nennt man sie auch ungeordnete Liste da sie einfach keine Nummerierungen enthält. Wir gehen also nun hin und erstellen diesmal eine geordnete Liste. Dazu musst du einfach aus den UL-Tags OL-Tags machen. Und schon hast du eine geordnete Liste. Zur Sicherheit nochmal ein Codebeispiel für die geordnete Liste. Diese verhält sich genauso wie die geordnete Liste, nur hast du jetzt anstatt den Punkten Zahlen davor.

<!-- Geordnete Liste -->
<h1>Eine geordnete Liste</h1>
<ol>
	<li>Ich bin der erste Listenpunkt.</li>
	<li>Ich bin der zweite Listenpunkt.</li>
	<li>Ich bin der dritte Listenpunkt.</li>
</ol>

Dies waren jetzt zwei einfache Beispiele zum Erzeugen von Listen. Es gibt auch die Möglichkeit innerhalb einer Liste noch eine weitere Liste zu erzeugen. Dazu startet man innerhalb eines LI-Tags einen weiteren UL- oder OL-Tag. Dies kann nützlich sein wenn man zu einem Listenpunkt noch einen Unterpunkt haben möchte. Ich persönlich mag diese Verschachtelung von Listen mit Unterpunkten jedoch nicht. Im Codebeispiel nun mal ein Beispiel zum Erzeugen einer weiteren Liste innerhalb einer Liste.

<!-- Ungeordnete Liste mit Unterpunkten -->
<h1>Eine ungeordnete Liste mit Listenpunkten</h1>
<ul>
	<li>
		Ich bin der erste Listenpunkt.
		<ul>
			<li>Ich bin ein Unterpunkt des ersten Listenpunkts.</li>
			<li>Ich bin ein weiterer Unterpunkt des ersten Listenpunkts.</li>
		</ul>
	</li>
	<li>Ich bin der zweite Listenpunkt.</li>
	<li>Ich bin der dritte Listenpunkt.</li>
</ul>

Klären wir nun noch, welche anderen Elemente überhaupt innerhalb von UL/OL verewendet werden dürfen. Innerhalb der UL/OL-Tags dürfen nur LI-Elemente vorkommen. Alles andere ist nicht valide (was ein Validator ist klären wir am Ende dieses Tutorials). Innerhalb der LI-Tags darfst du jedoch Elemente wie B, I oder U verwenden um deinen Text anders zu gestalten. Aber auch der P-Tag ist innerhalb von LI erlaubt.

Tabellen

Tabellen in HTML sind ebenfalls nicht allzu schwer zu erstellen. Der für Tabellen zuständige Tag ist der Table-Tag. Mit ihm kann man ganz einfach eine Tabelle erzeugen. Da wir aber auch hier, wie bei den Listen, weitere Tags brauchen um einzelne Zeilen und Spalten zu erstellen reicht der Table-Tag an sich nicht aus. Die zwei wichtigsten weiteren Tags sind die TR- und TD-Tags. Diese beiden Tags sind nur innerhalb der Table-Tags erlaubt. Mit dem TR-Tag erzeugt man eine neue Zeile. In diese Zeile (genauergesagt zwischen die TR-Tags) kommen dann die TD kommen dann die einzelnen Spalten. Da das ganze am Anfang sicherlich ein bisschen kompliziert klingt zeige ich dir erstmal ein kleines Beispiel.

<!-- Einfache Tabelle [Z = Zeile, S = Spalte} -->
<h1>Eine einfache HTML-Tabelle</h1>
<table>
	<tr><td>Z1 / S1</td><td>Z1 / S2</td><td></td>Z1 / S3</tr>
	<tr><td>Z2 / S1</td><td>Z2 / S2</td><td></td>Z2 / S3</tr>
	<tr><td>Z3 / S1</td><td>Z3 / S2</td><td></td>Z3 / S3</tr>
	<tr><td>Z4 / S1</td><td>Z4 / S2</td><td></td>Z4 / S3</tr>
</table>

Schaust du dir diesen Beispielcode jetzt in deinem Browser an dann bekommst du eine einfache Tabelle mit 4 Zeilen und 3 Spalten angezeigt. Wie viele Zeilen und Spalten deine Tabelle hat kannst du selbst entscheiden. Wichtig ist, dass du weißt wie man sie erstellt. Zum Erstellen einer kompletten Zeile ist erstmal der TR-Tag zuständig. Jeder TR-Tag steht dabei für eine Zeile. Und zwischen die TR-Tags kommen dann die einzelnen Spalten, also die TD-Tags. Wenn du ein bisschen damit rumexperimentierst dann solltest du den Dreh schon ganz schnell raushaben.

Das solltest du auf keinen Fall machen

In den Anfängen des World Wide Webs waren Tabellenlayouts, also Webseiten-Designs die in Tabellen untergebracht waren, sehr beliebt. Heute sollte man jedoch keine Tabellenlayouts mehr verwenden. Zum einen weil es einfach doof ist (okay, das ist jetzt kein richtiger Grund) und zum anderen weil der Browser die Tabelle erst anzeigt, wenn sie vollständig geladen wurde. Das heißt, dass bei einem Tabellenlayout erstmal die komplette Seite fertig geladen werden muss bevor überhaupt irgendwas angezeigt wird.

Formulare und Formularfelder

Wir machen weiter mit HTML5-Formularen. Die Verwendung von Formularen in HTML geben eigentlich nur dann einen Sinn, wenn es ein PHP-Skript gibt, das die Daten des Formulars entgegennehmen kann. Da wir hier aber nicht auf PHP eingehen können wird hier nur erklärt, wie man Formulare mit Formularfelder aufbaut. Rein theoretisch könntest du dir Formulare auch später angucken wenn es an der Zeit ist PHP zu lernen. Ich werde jedoch trotzdem kurz auf Formulare eingehen und beschreiben, wie man sie erstellt.

Um ein reines HTML-Formular zu erstellen benötigst du die Form-Tags. Innerhalb des sich öffnenden Form-Tag kommen zwei Attribute hinein die für die Übermittlung der Formulardaten wichtig sind. Dies wäre einmal das Action-Attribut und dann noch das Method-Attribut. Das Action-Attribut enthält den Pfad zu der Datei an die die Formulardaten geschickt werden sollen. Das Method-Attribut hingegen gibt nur an mit welcher Request-Methode die Daten an das PHP-Script übermittelt werden sollen. Dabei gibt es nur zwei Werte: GET und POST. Was dabei genau geschieht werde ich hier nicht erklären da ich, wie schon gesagt, nicht auf PHP eingehen werde. Im folgenden erstmal ein Codebeispiel.

<!-- HTML-Formular Grundgerüst -->
<h1>HTML-Formular</h1>
<form action="index.php" method="POST">

</form>

Im Beispielcode siehst du das Grundgerüst für HTML-Formulare. Zwischen die Form-Tags kommen nun die einzelnen Eingabefelder. Diese Eingabefelder, genauergesagt die Input-Tags, brauchen allerdings auch wieder mindestens zwei Attribute. Ich werde jedoch nur das erste Attribut erklären da das zweite Attribut nur für PHP wichtig ist. Das erste Attribut innerhalb eines Input-Tags wäre das Type-Attribut. Dieses gibt an um was es sich bei der Eingabe handelt. Handelt es sich um einen ganz normalen Text, ein Passwort oder einen Absenden-Button. Die wichtigsten drei Werte für dieses Attribut sind text (Reiner Text), password (Auch Text, allerdings wird er durch Sternchen ersetzt) und submit (Wird zu einem Absenden-Button). Beachte bitte, dass der Input-Tag keinen abschliesenden Tag hat. Er wird einfach mit einem /, wie beim BR-Tag, beendet. Wieder ein kleines Beispiel.

<!-- HTML-Formular mit Eingabefeldern und Absenden-Button -->
<h1>HTML-Formular [Beispiel: Login-Bereich]</h1>
<form action="login.php" method="POST">
	<input type="text" /><br />
	<input type="password" /><br />
	<input type="submit" value="Einloggen" />
</form>

Wenn du dir dieses Formular jetzt in deinem Browser anguckst hast du zwar Eingabefelder und einen Submitbutton aber du weißt nun nicht, was du wo eingeben sollst. Alles kein Problem: Du darfst innerhalb der Form-Tags ganz normalen Text, Tabellen und weitere Tags verwenden. Damit der Benutzer auch weiß für was welches Eingabefeld ist erweitern wir unseren Code noch ein bisschen.

<!-- HTML-Formular mit Eingabefeldern und Absenden-Button -->
<h1>HTML-Formular [Beispiel: Login-Bereich]</h1>
<form action="login.php" method="POST">
	<b>Benutzername:</b>
	<input type="text" /><br />

	<b>Passwort:</b>
	<input type="password" /><br />
	<input type="submit" value="Einloggen" />
</form>

Nun weiß der Benutzer auch was er wo eingeben soll. Dir ist wahrscheinlich das Value-Attribut im Button aufgefallen. Zwischen dieses Attribut kannst du den Text schreiben der auf dem Absenden-Button angezeigt werden soll. Du kannst das Value-Attribut aber auch in den anderen Input-Tags verwenden. Gehe hin und probiere es einfach mal aus. Du wirst sehen, dass deine Eingabefelder dann beim Laden der Seite schon einen festgelegten Wert haben den man aber natürlich noch ändern kann.

Container mit Div-Elementen

Kommen wir zurück zu unseren "normalen" HTML-Tags. Das Div-Element bietet die Grundlage für das Layout einer Website. Mit einem Div-Element kann man bestimmte Bereiche einer Website formatieren (Container). Da das ganze aber ohne CSS keinen Sinn ergeben würde, werde ich im Beispielcode diesmal ein bisschen CSS verwenden damit klar wird, warum die Div-Elemente nützlich sind. Ein gutes Beispiel für Div-Elemente sind die Header-, Article- und Footer-Tags. Diese sind im Prinzip her auch nur Div-Elemente. Jedoch sind sie für einen ganz bestimmten Zweck (Kopfbereich, Hauptbereich und Fußbereich). Mit den Div-Tags allerdings kann man beliebige Bereiche erstellen die sich dann mit CSS formatieren lassen. So können wir zum Beispiel hingehen und ein Div-Element erstellen in dem die Schriftfarbe sich in Rot ändert. Dazu folgender Beispielcode.

<!-- Div-Container mit roter Schrift -->
<div style="color: red;">
	<p>Ich bin ein Text und alles, was zwischen den Div-Tags steht wird in rot ausgegeben.</p>
</div>
<p>Ich bin ein Text außerhalb des Div-Tags und werde in normaler Farbe ausgegeben.</p>

Nachdem du dieses Beispiel getestet hast, hast du wahrscheinlich gesehen, dass der erste Satz in roter Schrift angezeigt wurde. Warum? Weil dieser Text innerhalb eines Div-Elements steht welches mit CSS formatiert wurde. Der zweite Satz hingegen wurde, wie immer, ganz normal in schwarzer Schrift ausgegeben da dieser Satz nicht mehr zwischen den Div-Tags steht. Du kannst Div-Elemente übrigens auch verschachteln. Das heißt, dass du innerhalb eines Div-Tags erneut einen Div-Tag aufmachen kannst und diesen nun anderst formatieren kannst. Dazu wieder ein kleiner Beispielcode.

<!-- Verschachtelter Div-Container mit roter und blauer Schrift -->
<div style="color: red;">
	<p>Ich bin ein Text und alles, was zwischen den Div-Tags steht wird in rot ausgegeben.</p>
	<div style="color: blue;">
		<p>Ich bin ein Text der in blau dargestellt wird.</p>
	</div>
</div>

Den richtigen Sinn von Div-Elementen wirst du wahrscheinlich erst dann verstehen, wenn du schon ein bisschen CSS-Erfahrung hast. Dann kannst du auch noch mehr machen als nur die Schriftfarbe zu ändern. Da dies sowieso nur ein Grundlagen-Tutorial ist werde ich das Kapitel Div-Elemente nun abschließen. Merke dir aber, dass man mit Div-Elementen einzelne Blöcke erstellen kann die mit CSS formatiert werden können.

Was ist ein HTML-Validator

Ein Validator ist ein Tool das den Quellcode einer Website auf Standardkonformität prüft. Standardkonform bedeutet, dass der Quellcode fehlerfrei ist. Der bekannteste Validator ist wohl der W3C-Validator. Dort kannst du entweder eine Seitenadresse eingeben oder den Quellcode direkt posten um zu prüfen ob das Dokument valide ist. Aber warum ist es überhaupt so wichtig das der Quellcode valide ist? Viele Browser zeigen eine Website immer noch korrekt an obwohl sie einige Fehler enthält. Damit du dir aber hundertprozentig sicher sein kannst das deine Website in allen Browsern gleich dargestellt wird ist es wichtig, dass dein HTML-Code valide ist. Falls das nicht der Fall sein sollte dann kann es passieren, dass deine Website in jedem Browser anders aussieht. Des Weiteren wird eine Website, die nicht standardkonform ist, vom Browser im sogenannten Quirks-Modus (Kompatiblitätsmodus)ausgeführt. Das ganze kannst du verhindern in dem du valides, also fehlerfreies und standardkonformes, HTML schreibst.

Abschließende Informationen

Du bist nun am Ende dieses Tutorials angelangt und damit gratuliere ich dir ganz herzlich! Ich möchte noch erwähnen, dass in diesem Tutorial ein paar andere Tags und Informationen ausgelassen wurden. Das liegt einfach daran, damit das Tutorial nicht zu komplex wird und dass dieses Tutorial nur die absoluten Grundlagen und die Verwendung der Tags beschreiben soll. Für Fortgeschrittene ist dieses Tutorial also nicht mehr zu empfehlen da sehr viele relevante Informationen fehlen. Dieses Tutorial sollte nur den Einstieg in HTML mit den wichtigsten Tags erklären.

Vielen Dank das du dir die Zeit genommen hast dieses Tutorial durchzuarbeiten! Ich hoffe, dass du nun schon etwas gelernt hast und das dir die wichtigsten Tags und wie man sie verwendet bekannt sind.