Crashkurs HTML
Was ist HTML?
HTML ist eine Bildbeschreibungssprache. Das bedeutet, dass mit Befehlen ein Bild beschrieben wird. Das kann man sich leicht an einem Beispiel vorstellen:"Mach einen weißen Balken, mach darunter einen grauen Balken und schreibe 'Hallo Welt' hinein."
So wird mit dieser Beschreibung eine Seite entstehen, deren obere Hälfte weiß und die Untere grau ist.
Und damit gehts auch schon in die Praxis. Hierbei müssen wir uns an ein paar Formalitäten halten.
Wie benutze ich HTML
Das oben genannte Beispiel sähe wie folgt aus:<!DOCTYPE html> <html> <head> <title>Testseite</title> </head> <body > <div style="height: 100px; background: white"></div> <div style="height: 200px; background: grey">Hallo Welt</div> </body> </html>
Sieht aus:
Die Grundlagen lassen sich an diesen kurzen Beispiel fast vollständig zeigen und erklären.
Befehlsklammern
Die meisten Befehle bilden eine Art Klammer. So beginnt ein Bereich z.B. mit <html> und schließt mit </html>. Das lässt sich so auf die meisten Elemente übertragen.Ausnahmen: Ein paar Elemente benötigen keine abschließende Klammer und können allein stehen. Die häufigsten Beispiele sind wohl <br /> und <img />, welche einen Zeilenumbruch und ein Bild definieren.
Hinweis: Ein alleinstehender Befehl sollte nicht einfach mit ">" sondern mit " />" enden. So können Browser erkennen, dass dieser Befehl alleine steht, sie auf keine weitere Klammer mehr warten müssen und so effizienter arbeiten können.
<html> leitet den eigentlichen HTML-Code ein.
Innerhalb der spitzen Klammern des Start-Befehls können noch Eigenschaften (auch Attribute) definiert werden. In unserem Beispiel ist das die "style"-Eigenschaft.
Kopf und Körper / Head und Body
In HTML gibt es zwei grundlegende Bereiche mit unterschiedlichen Aufgaben.Im Kopf stehen bestimmte steuernde Mechanismen. Als Beispiel ist hier der title-Tag angegeben, welcher den Titel der Seite beschreibt und sowohl für Suchmaschinen sehr wichtig ist, wie auch in der Titelleiste des Browsers angezeigt wird.
Im Körper steht das eigentliche Aussehen der Seite.
Einrückungen: Im obigen Beispiel sind einige Befehle eingerückt. Das soll verdeutlichen, welcher Befehl innerhalb einer anderen Befehlsklammer steht und so die Übersicht im Code wahren. Das ist unverzichtbar, wenn man sich später noch zurecht finden will.
Doctype
Der Doctype gibt an, welche HTML-Version verwendet wird. Da dies kein HTML-Tag ist, wird er auch nicht mit " />" abgeschlossen. Diese Zeile ist wichtig für den Browser.Das oben gezeigte Beispiel ist die Angabe, dass es sich um ein HTML5-konformes Dokument handeln soll.
Layout-Möglichkeiten
Nun gibt es mehrere Möglichkeiten, ein Weblayout zu erstellen.Framesets: Framesets unterteilen eine Seite in mehrere Unterseiten. Da ein Frameset-Layout auf der strikten Unterteilung des Bildes basiert und mehrere Teilseiten gleichzeitig zeigt, ist das nicht barrierelos. Blindengerechte Browser haben hier so ihre Schwierigkeiten. Diese Methode ist daher inzwischen völlig veraltet.
Tabellen: Tabellenbasierte Layouts können im Gegensatz zu Framesets alle Inhalte der Seite in einem Code darstellen. Sie funktionieren ansonsten aber ähnlich wie Framesets. Nicht barrierelos, veraltet.
Textboxen: Das ist das Mittel der Wahl. Textboxen beinhalten einfach den Inhalt und werden über ihre Eigenschaften gestaltet. Da diese Gestaltungsmöglichkeiten von speziellen barriereloser Browsern teilweise einfach ignoriert werden können, kann eine Homepage auf Textboxen-Basis effektiv für jeden Menschen dargestellt werden. Dabei gehen die optischen Vorteile für den nicht benachteiligten Menschen nicht verloren. Außerdem ist der Code dafür (wie oben zu sehen) sehr einfach.
Trennung von Inhalt und Design
Das soll die letzte wichtige Regel in diesem Kapitel sein. Im besten Falle sind Inhalt und Design in zwei unterschiedlichen Dateien angegeben und diese völlig voneinander getrennt.Warum? Der Code wird übersichtlicher. Die Designangaben werden nicht bei jedem Seitenwechsel mitübertragen => schnellerer Internetauftritt.
Wie? Mit CSS. Das ist eine weitere Sprache, die es zu erlernen gilt. Keine Sorge: ist noch einfacher als HTML. Das will ich im folgenden Beispiel verdeutlichen, in dem ich, im oben genannten Beispiel, Inhalt von Design trenne.
Datei 1: index.php:
<!DOCTYPE html> <html> <head> <title>Testseite</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body > <div class="oben"></div> <div class="unten">Hallo Welt</div> </body> </html>
Datei 2: style.css:
.oben { height: 100px; background: white } .unten { height: 200px; background: grey } * {font-family:Verdana;font-size:12px;} body,div,img,table,tr,td,a,ul,li,span,h1,h2,iframe{margin:0;padding:0;border-collapse:collapse;border:0px;}
Das macht sich spätestens bei einem längeren Code deutlich bemerkbar, zumal man einmal definierte CSS-Klassen im HTML-Code immer wieder verwenden kann.
Im oberen Bereich wird im Kopf die CSS-Datei mit angegeben, damit ein Browser auch weiß, wo er zu suchen hat.
.oben {} bedeutet: Die Klasse mit dem Namen oben hat folgende Eigenschaften. Diesen Klassennamen verwendet man einfach als Attribut in der Textbox.
In CSS können HTML-tags auch allgemein definiert werden. Mehr dazu im Crashkurs CSS.
Dateinamen
Eine Kleinigkeit sollte hier noch erwähnt werden. Wird eine Homepage mit https://www.edv-hacker.de aufgerufen, wird vom Server automatisch das an der Stelle befindliche index-Dokument aufgerufen. Im Normalfall heißt das erste Dokument index.html, index.htm oder index.php.Ich empfehle bei PHP-fähigen Servern immer index.php zu verwenden, da an diese später ohne weiteres noch PHP-Code hinzugefügt werden kann. Aus diesem Grund sollten generell alle HTML-Dokumente auf .php enden, es sei denn es sprechen andere Gründe dagegen.
Mal abgesehen von der index.php, deren Name feststeht, sollten bei der Benennung immer repräsentative Namen gewählt werden. Dies ist zum Einen eine gute Methode zur Suchmaschinenoptimierung, zum Anderen findet man sich selbst besser zurecht.
Befehlsreferenz
An der Stelle fehlt nur noch das "Handout" über alle möglichen HTML-Befehle. Dazu empfehle ich SelfHTML.That's it!