HTML Grundlagen / HTML für Dummies

1 - Was ist HTML?

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. Im Grunde recht einfach und definitiv auch für Dummies geeignet :)

2 - Codes live testen, so geht's:

  1. Erstelle eine neue Datei im Editor.
     
  2. Nenne diese beim Speichern index.html
     
  3. In diese Datei kannst du nun die untenstehenden HTML-Codebeispiele einfügen, diese Datei dann speichern und mit dem Browser (Internet Explorer, Mozilla Firefox, Chrome, Opera, Safari, etc...) öffnen.
     

Zur Info: "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üsstest du www.html-einfach.de/dateiname.html aufrufen.

Bist du mit Testen fertig, kannst du deine Webseite online stellen und der Welt zeigen!

3 - Aufbau eines HTML-Tags

html_tag_inhalt

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).

Große Überschrift HTML Code:

<h1>Überschrift</h1>

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.

4 - HTML Grundgerüst

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.

HTML Grundgerüst Code:

<html>
 <head>
  <title>Seitentitel</title>
 </head>
 <body>
  Hier steht der Inhalt
 </body>
</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:

<html>
 <head>
  <title>Seitentitel</title>
 </head>
 <body>
  <h1>Das ist eine Überschrift</h1>
  Jetzt folgt normaler Text
  <strong>Dieser Text wird dick/fett dargestellt</strong>
 </body>
</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.

One thought on “HTML Grundlagen / HTML für Dummies

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.