HTML Grundlagen und "Tags"

HTML steht für „Hypertext Markup Language“, mit ihr werden die meisten Webseiten strukturiert. Im Grunde genommen ist HTML nur Text, der mit jeden Standardtextprogramm verfasst werden kann. Die Sprache an sich und Ihre Syntax ist recht umfangreich, jedoch simpel aufgebaut und leicht zu erlernen. Ein HTML Dokument zu erstellen bedeutet vereinfacht, dass die Dateiendung in ".html" geändert wird, der Inhalt eines HTML Dokuments wird dann vom Browser interpretiert und uns nach bestimmten Regeln strukturiert angezeigt.

Man kann sich das so vorstellen, dass man mittels HTML-Befehlen angibt, dass ein bestimmter Textabschnitt in dicker Schrift dargestellt werden soll, der Browser erkennt den HTML Befehl und visualisiert die dicke Schrift im Browserfenster.

So können Sie das ganze ausprobieren:
Erstellen Sie eine neue Datei mit Ihrem Editor und nennen sie diese beim Speichern index.html. "Index" ist ein Schlüsselwort. Beim Aufruf einer URL (wie z.B. wwww.html-einfach.de), wird zuerst nach einer Datei namens index.html gesucht. Wenn die Datei einen anderen Namen hat, müssten Sie www.html-einfach.de/dateiname.html aufrufen.
In diese Datei können Sie die HTML-Codebeispiele auf folgenden Seiten einfügen, diese Datei dann speichern und mit dem Browser (Internet Explorer, Mozilla Firefox, Chrome, Opera, Safari, etc...) öffnen. Beim Kopieren des Codes sollten Sie die Zeilennummerierungen nicht mitkopieren oder nachträglich im Editor entfernen.

Grundgerüst und HTML-Tags

Ein HTML Dokument besteht aus einem Kopf und einem Körper, auch hier kommen englische Bezeichnungen ins Spiel. Head & Body. Die eigentlichen HTML-Befehle werden Tags genannt und stehen im Body. Sie unterscheiden sich in Ihrer Bezeichnung, ihrer Funktion und können unterschiedliche, manchmal einzigartige Attribute mitbekommen (dazu später mehr). (Ein HTML-Tag wir nicht wie der Tag aus der Zeitrechnung ausgesprochen, sondern kommt aus dem Englischen und wird "Täg" ausgesprochen).

Hier ein Beispiel wie eine große Überschrift deklariert wird:

 <h1>headline 1</h1>

Schematischer Aufbau eines HTML-Tags

Fast jeder Tag ist einzigartig, und der h-Tag für Überschriften zählt zu den am wenigsten komplizierten. Das Schema <Anfangstag> Inhalt </Endtag> sollte selbsterklärend sein. Der h-Tag hat noch ein paar Varianten; statt h1 kann auch h2, h3, h4, h5 oder h6 geschrieben werden, was jeweils eine Überschrift niedrigerer Ordnung entspricht.

Ein HTML-Dokument bietet jedoch weit mehr Funktionen und ist deshalb auch ein wenig komplizierter aufgebaut, strukturiert wird eine HTML-Datei mit einem Gerüst. Das allgemeine Grundgerüst sieht so aus:

1 <html>
2  <head>
3 	<title>Seitentitel</title>
4  </head>
5  <body>
6 	Hier steht der Inhalt
7  </body>
8 </html>

Hier sehen Sie das Ergebnis

Erklärung:
Zeile 2 bis 4 ist der Header, dort stehen Informationen zur HTML Datei. In diesem Beispiel ist nur in Zeile 3 der Title-Tag vorhanden, er definiert den Text in der Fensterleiste des Browsers steht.
Zeile 5 bis 7 ist der Body, dort befindet sich der eigentliche Inhalt einer HTML Datei (das was dann sichtbar wird). In Zeile 6 steht eine Zeile Text die unverändert ausgegeben wird.
Damit der Browser weis, dass es sich hierbei um HTML Code handelt, wird ein HTML-Tag um den gesamten Code gesetzt (Zeile 1 und 8). Alles was dazwischen ist wird nun als HTML Code interpretiert. Das ist auch schon das erste Beispiel für das Schachteln von Tags, der HTML-Tag ist der übergeordnete Tag, und die anderen HTML Befehle dazwischen sind diesem untergeordnet. Bei bestimmten Befehlen hat das deutliche Auswirkungen (dazu später mehr).

Zum Verständnis ein Beispiel:

1 <html>
2  <head>
3 	<title>Seitentitel</title>
4  </head>
5  <body>
6 	<h1>Das ist eine Überschrift</h1>
7 	Jetzt folgt normaler Text
8 	<strong>Dieser Text wird dick/fett dargestellt</strong>
9  </body>
10 </html>

Hier sehen Sie das Ergebnis

Erklärung:
Als Beispiel wurde in Zeile 6 eine Überschrift, in Zeile 7 normaler Text und in Zeile 8 Text in einem strong-Tag angegeben. Diese Tags srukturieren die Ausgabe des Textes; So weis der Browser z.B., dass er den Text in Zeile 6 Dick und groß darstellen muss, da es sich um eine Überschrift handelt. Der gesamte Text ist der sichtbare Inhalt der Seite und gehört deshalb wieder in den Body des HTML-Dokuments.

Manueller Zeilenumbruch mit HTML

Vielleicht ist Ihnen im oberen Beispiel eine Merkwürdigkeit aufgefallen... Der Text der Zeilen 7 und 8 steht auf der Vorschauseite nebeneinander in derselben Linie. Der Grund ist, dass in HTML ein Zeilenumbruch manuell angegeben werden muss. Der Text beginnt eine neue Zeile wenn rechts kein Platz mehr ist (wenn er sich in einem Element mit fester größe befindet, dazu später mehr) oder wenn man den HTML-Befehl <br> einfügt. br steht für das Englische Wort break und bricht die Zeile um. Wird der Befehl zweimal geschrieben gibt es zwei Zeilenumbrüche oder eben eine Leerzeile.

 1 <html>
 2  <head>
 3 	<title>Seitentitel</title>
 4  </head>
 5  <body>
 6 	Der Text der hier steht 
 7 	ist auf mehrere Zeilen verteilt. 
 8 	Dennoch wird er in einer Zeile ausgegeben, 
 9 	es sei denn man fügt ein <br>-Tag ein. <br>
10 	Wird dieser zweimal benutzt folgt eine Leerzeile.<br><br>
11 	So einfach, wenn auch ein wenig umständlich ist das.
12  </body>
13 </html>

Hier sehen Sie das Ergebnis

Für diejenigen, die mit der Informationsflut unterfordert sind: Der erste br-Tag aus Zeile 9 wurde auf der Vorschauseite verschlüsselt angegeben, sodass dort <br> steht und kein Zeilenumbruch stattfindet. Verschlüsselt wird der br-Tag wie folgt geschrieben: <br> &lt wird vom Browser in eine spitze Klammer mit Öffnung nach rechts und > in eine spitze Klammer mit Öffnung nach Links umgewandelt.

In HTML-Code Kommentare setzen

1 <html>
2  <head>
3 	<title>Seitentitel</title>
4  </head>
5  <body>
6 	Bei komplizierterem HTML-Code können Kommentare gesetzt werden. 
7 	Der Vorteil von Kommentaren besteht darin, dass diese für den Besucher nicht sichtbar sind 
8 	und nur im eigentlichen Quellcode zu sehen sind. So kann der Autor sich selbst Dinge merken, 
9 	wenn er Monate / Jahre später erneut am HTML-Code der Homepage arbeitet.<br><br>
10 	<!-- Das ist ein Kommentar -->
11 	Über dieser Zeile steht ein Kommentar.
12  </body>
13 </html>

Hier sehen Sie das Ergebnis

Das wars auch schon mit den elementaren Grundlagen von HTML. Es gibt dazu noch sehr viel zu erzählen und zu wissen, aber detailliertes Wissen ist im besten Fall ein Produkt von Neugier und Experimentierlust.
Einige wichtige und elementare HTML Befehle werden in den folgenden Tutorials besprochen, aber zu allererst folgt ein weiterer Crash-Kurs.
HTML bestimmt die Struktur einer Webseite (Überschriften, Tabellen, Links, etc...) und verbirgt sich zu großen Teilen unsichtbar im Hintergrund. Für die optischen Aspekte des Webdesigns sind die Cascading Style Sheets zuständig; kurz CSS.

zurück