![[Valid RSS]](images/valid-rss.png "Validate my RSS feed")
HTML Crashkurs
Inhaltsverzeichnis
Die Syntax
Die Syntax ist das wichtigste einer jeden Sprache. Es lässt sich mit der Konjunktion und Deklaration unserer Sprache vergleichen. Bei HTML sieht das so aus:
< >
Eine geöffnete spitze Klammer leitet einen Befehl ein und eine geschlossene spitze Klammer beendet den Befehl. Browser (z.B. Edge, Firefox oder Chrome) sind die Programme, die diese Sprache lesen und umsetzen. Alles, was in diesen Klammern steht, wird als HTML Code erkannt und verarbeitet. Sonstige Sachen werden ignoriert und einfach so dargestellt. In HTML deklarierte Befehle werden meistens –nicht immer– mit einem entsprechendem Gegenbefehl wieder beendet. Dieser besteht aus einem Schrägstrich, gleich nach einer geöffneten Klammer:
</ >
Dies sagt dem Browser, dass bis hierhin der davor definierte Befehl ausgeführt werden soll. Beispielsweise ist das sehr wichtig beim setzten von Links; würde man den Befehl nicht wieder beenden, ist die komplette Seite mit einem einzigen Link belegt.
Zu den Befehlen in den Klammern sagt man auch Tags (Sprich: "Tägs", engl. für Etikett, Marke, Kennzeichen). Zum Programmieren selber empfehle ich euch für den Anfang einen einfachen Texteditor, wie z.B. Notepad. Eure erstellte Werke müsst Ihr dann einfach als ".htm" oder ".html" Dokumente abspeichern und NICHT als ".txt" Datei! Das programmieren mit einem Texteditor ist sogar WYSIWYG-mäßig: Änderung(en) speichern und Seite im Browser aktualisieren (F5). Ausserdem solltet ihr euch einen guten Programmierstil angewöhnen, d.h. programmiert eingerückt! Was damit gemeint ist werdet ihr weiter unten schon sehen.
Erste Schritte
Als erstes kommt eine Standardanweisung, die wir einfach übernehmen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Dies besagt in etwa, dass es sich um ein HTML 4.01 Dokument handelt, welches auf dem W3C Standard ("valides HTML") basiert. Kommen wir aber jetzt zum eigentlichen Programmieren:
Als erstes sagen wir dem Browser, um was es sich hier handelt. Es gibt ja noch andere Sprachen, z.B. XHTML, PHP, XML oder Perl. Da wir aber in HTML programmieren wollen, schreiben wir also das:
<html>
Damit sagen wir dem Browser, dass es sich hier um ein HTML Dokument handelt. Als nächstes kommt der Kopf der Seite:
<head>Hier beginnen wir mit einigen Einstellungen, z.B. wie die Seite heißt. Dazu später mehr; wir beenden den Kopf der Seite mit dem Gegenbefehl:
</head>Damit ist nun definiert, das der Kopf von <head> bis </head> geht. Aber es steht noch nichts drin. Jetzt zum Körper:
<body>Hier beginnt die eigentliche Seite. Im Körper der Seite kommt alles das rein, was am Ende auf dem Bildschirm erscheint! Auch der Körperbefehl muss am Ende deaktiviert werden:
</body>Es steht auch im Körper, also zwischen <body> und </body> nichts drin, was im Endeffekt eine leere, weisse Seite erzeugt. Aber eines fehlt noch:
</html>
Der Abschlussbefehl. Hier endet das HTML Dokument. Die Grundstruktur eines jeden HTML Dokuments sieht also immer so aus:
<html>
<head>
</head>
<body>
</body>
</html>Da wir aber valide programmieren, sieht der Minmalaufbau etwas anders aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>Mit diesen zehn Zeilen Code könnt Ihr bereits eine gültige HTML Seite erstellen. Diese Basis müsst Ihr für jede weitere Seite nutzen!
Euch ist sicherlich diese neue Zeile aufgefallen:
<title></title>Sie ist abermals Bestandteil des validem HTMLs und gibt den Titel an, mehr dazu in Kapitel 3. Mit diesem Tag und den ersten bilden sich also die Grundmauern des validem HTMLs. Würde eines fehlen, wäre das Dokument nicht mehr valide!
Der Kopf
Im Kopf stehen, wie oben schon erwähnt, wichtige Einstellungen zur und über die Seite. Das wichtigste ist der Titel der Seite; dieser erscheint oben in der Titelzeile und als Beschreibung in den Favoriten! Der Befehl sieht so aus:
<title>Danach kommt jetzt der Titel eurer Wahl. Dieser sollte wohl überlegt sein, und nicht etwa "Meine Homepage" oder "Seite 1" heißen! Beendet wird damit:
</title>Als nächstes kommt die Angabe, von wem die Seite programmiert wurde:
<meta name="author" content="[deinname]">Im Gegensatz zu den anderen Tags, braucht man hier keinen abschließenden Befehl, wie z.B. </title>! Dieser Tag ist eine Metaangabe und diese Metatags setzten sich etwas anders zusammen. Als erstes kommt die Bestimmung, was für ein Metatag es ist. In dem Fall ist es ein author-Tag (name="author"), dies wird über den name-Parameter festgelegt. Dann kommt der "Inhalt" des Metatags, also welchen Wert er hat: content="[deinname]". Dies wird über den content-Parameter festgelegt. [deinname] ist natürlich durch deinen Nick bzw. Name zu ersetzen.
Jetzt kommt ein Metatag, der wichtig für Suchmaschinen ist:
<meta name="keywords" content="[schlüsselwörter]">Dies kann ein sehr langer Tag werden. Auch hier wieder die Struktur name und content. Dies ist also der keywords-Tag. Hier solltest Du möglichst viele Schlüsselwörter und Stichpunkte, die zum Thema deiner Seite passen, reinschreiben. Die Wörter werden dabei mit Kommata getrennt und kommen an die Stelle, wo [schlüsselwörter] steht!
Der nächste Metatag ist ebenfalls wichtig für Suchmaschinen:
<meta name="description" content="[beschreibung]">Was Du hier reinschreibst, erscheint bei Suchmaschinen in deren Ergebnissen als Kommentar unter deinem Titel! [beschreibung] ist also durch einem kurzen, prägnanten Satz zu ersetzten, der eine deutliche Kurzbeschreibung deiner Seite vermittelt.
Dieser Metatag ist abermals wichtig für Suchmaschinen:
<meta name="robots" content="all">Suchmaschinen suchen mit sogenannten Crawlern, bei Google wäre dies der Googlebot. Dieser Tag sagt dem Crawler, was er durchsuchen darf und was nicht. Um ein Maximum an Treffern zu erhalten, solltet ihr den Tag so übernehmen, d.h. der Crawler darf alles (jedes Verzeichnis, jede Seite) durchsuchen.
Suchmaschinen Tag, der Vierte:
<meta name="revisit-after" content="7 days">Dieser Metatag sagt einem Crawler, wann er wieder deine Seite durchsuchen soll. Die Angabe "7 days" sagt, das der Suchbot nach einer Woche wieder vorbei schauen und die Datenbestände der Suchmaschine aktualisieren soll. Hast Du z.B. eine Seite, die Du nur alle paar Wochen aktualisierst, solltest Du hier z.B. "28 days" eintragen; also alle 4 Wochen.
Nun kommt zur Abwechslung ein allgemeiner Tag, der sich auf nichts bezieht, d.h. Ihr könnt bestimmen, was der Tag beschreibt:
<link rel="stylesheet" type="text/css" href="[pfad zur CSS datei und dateiname].css">Dieser Tag bescheibt, wo das Stylesheet (die CSS Datei) liegt. Allgemeine Tags wie diese fangen mit link an und als erstes sollte man die Relation, also auf was sich der Link bezieht, definieren. Das geht mit dem rel-Parameter, hier beschreibt er also "stylesheet" und damit somit ein Designlink. Dann kommt der Typ, um was für eine Art das "rel"s handelt, also welche Art des Stylesheets. Das geht mit dem type-Parameter und der sagt hier, dass es sich um eine CSS Datei handelt: "text/css". Dann noch der Ort der nun definierten CSS Datei per href-Parameter. Dieser Parameter wird dir übrigens noch SEHR OFT über den Weg laufen! Also, nach href die URL. Die kann komplett mit http:// anfangen oder ein relativer Link sein. Wenn deine CSS Datei also z.B. "style.css" heißt und sie im selben Verzeichnis liegt, wie die Seite (welche die "style.css" verlinkt), so schreibst Du das:
<link rel="stylesheet" type="text/css" href="style.css">Liegt die CSS Datei z.B. im Ordner "styles" von der betroffenden Seite aus gesehen, so schreib statt href="style.css" einfach href="styles/style.css". Zur CSS Datei selber kommen wir später noch.
Zum Schluss noch ein Tag, der sagt, dass wir mit dem westeuropäischen Zeichensatz schreiben. Denn ein "ä", "ö" oder "ü" haben die anderen Länder ja nicht! Wir schreiben deswegen das:
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">Wie man sieht, ebenfalls ein Metatag. Somit haben auch ausländische Browser keine Probleme.
Am Ende solltest Du nun also das hier im Kopf stehen haben:
<title>[deintitel]</title>
<meta name="author" content="[deinname]">
<meta name="keywords" content="[schlüsselwörter]">
<meta name="description" content="[beschreibung]">
<meta name="robots" content="all">
<meta name="revisit-after" content="7 days">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="[pfad zur CSS datei und dateiname].css">Insgesamt sollte der Aufbau dann so aussehen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>[deintitel]</title>
<meta name="author" content="[deinname]">
<meta name="keywords" content="[schlüsselwörter]">
<meta name="description" content="[beschreibung]">
<meta name="robots" content="all">
<meta name="revisit-after" content="7 days">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="[pfad zur CSS datei und dateiname].css">
</head>
<body>
</body>
</html>Es gibt noch mehr Angaben, die man machen kann; mehr dazu später.
Der Körper
Jetzt wird's langsam ernst: Denn nun kommt der visuelle Teil – der Teil, den man dann sieht, wenn man die Seite aufruft. Wie die Seite dann aussehen soll, ist euch überlassen. Darum gibt's keine Vorgaben wie im Kopf von mir, sondern nur die Befehle. Fangen wir mit dem Wichtigsten an:
...to be continued – siehe SELFHTML für mehr.