Diese Dokumentation ist stark vereinfacht und beschränkt sich auf die wesentlichen Grundlagen.
Grundlage
Die Basis jeder Webseite ist nach wie vor HTML. Eine HTML-Datei ist ein reines Textdokument. Üblicherweise wird für eine HTML-Seite die Dateiendung .htm oder .html verwendet.
GROSS oder klein?
Ob sie bei HTML GROSSE oder kleine Buchstaben verwenden ist egal. Der besseren Lesbarkeit wegen ist die kleine Schreibweise zu bevorzugen.
Das Grundgerüst
Das minimale Grundgerüst einer HTML-Seite besteht aus Header, Title und Body.
Da HTML-Dateien reine Textdokumente sind, kann man den Text auch auf einer einzigen Zeile notieren. Sie werden dann aber sehr schnell den Überblick verlieren. Der Browser ignoriert jedes Leerzeichen ab dem 2. sowie sämtliche Zeilenumbrüche. Beides können Sie also beliebig verwenden um den Code übersichtlich zu strukturieren. Es hat keinen Einfluss auf die Darstellung.
Die meisten HTML-Tags bestehen immer aus einem eröffnenden Teil und einem abschliessenden Teil. So wird das gesamte Dokument mit <html> … </html> umschlossen. Das restliche Dokument wird im Wesentlichen in den Kopfteil (Header), <head> … </head> (unsichtbar auf der Webseite) und den sichtbaren Dokumentteil (Body) … unterteilt. Unerlässlicher Bestandteil im Header ist das Title-Tag.
Dokumenttyp-Deklaration
Mit <!doctype html> wird der Browser in den Standardmodus versetzt und nicht in den Quirks Modus. Verwenden Sie nur noch diese kurze Schreibweise. Alle Anderen, die z.B. noch eine URL enthalten sind veraltet.
Kopfteil (Header)
Innerhalb des <head … </head> werden die Kopfdaten der HTML-Datei notiert. Die wichtigste Angabe ist hier das Title-Tag. Weiter werden hier CSS und JavaScript geladen, sowie Meta-Daten definiert.
Title
Der Inhalt des Title-Tag (<title> … </title>) wird im Browserfenster im Titelbalken oder in den Tabs angezeigt. Auch verwenden Suchmaschinen diesen Inhalt für die Anzeige der Suchergebnisse.
Meta-Angaben
Meta-Angaben enthalten u. A. Informationen für Suchmaschinen sowie zur Verarbeitung/Darstellung der Inhalte (siehe Beispiel oben). Mit charset=UTF-8 wird z. B. sichergestellt, dass Umlaute korrekt angezeigt werden.
Angaben für Suchmaschinen
- description: Kurze, prägnante Beschreibung über den Inhalt der Webseite, max. 250 Zeichen
- keywords: Relevante Stichworte (werden mittlerweile nur noch bedingt beachtet, Suchmaschinen suchen sich ihre Stichworte mittlerweile meist selber)
- robots: Angaben ob das Suchprogramm die Seite indizieren und in ihre Datenbank aufnehmen darf. Mit index darf die Seite indiziert werden, mit folow darf es auch den Hyperlinks auf der Seite folgen. Die Angeben in dieser Form sind eigentlich unnötig, da das Suchprogram das sowieso macht. Mit noindex verbieten Sie die Indizierung, mit nofolow darf den Hyperlinks nicht gefolgt werden.
Seite von Originaladresse laden
Häufig aufgerufene Webseiten werden auf so genannten Proxy-Servern zwischengespeichert. Auch der Browser speichert Daten in seinem Cache zwischen. Das reduziert den Datentransfer zwischen Server und Client, hat aber den Nachteil, dass unter Umständen veraltete Inhalte angezeigt werden, wenn Sie Ihre Webseite regelmässig aktualisieren.
Die Zahl in content definiert nach wievielen Sekunden die Seite zwingend vom Original-Server geladen werden muss. Mit 0 verbieten Sie dem Browser grundsätzlich auf Proxies und Cache zurück zu greifen. Mit 86400 muss der Browser die Daten vom Original-Server erst laden, wenn die Daten in Proxies und Chache älter als 24 Stunden sind. Sie können auch ein Datum im internationalen Format angeben: Sat, 21 Oct 2017 12:00:00 GMT. Achten Sie auf die exakte Schreibweise.
Erlaubte Wochentage sind Mon, Tue, Wed, Thu, Fri, Sat und Sun.
Erlaubte Monate sind Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov und Dec.
Automatische Weiterleitung
Eine weitere Einsatzmöglichkeit von Meta-Angaben ist die automatische Weiterleitung nach einer fest definierten Dauer. Dieser Einsatz ist zwar weit verbreitet, aber umstritten. Je nach Einstellungen des Browsers kann die Weiterleitung ignoriert werden. Soll der Besucher vor der Weiterleitung noch einen Hinweis lesen, darf die Zeit nicht zu kurz eingestellt werden. Sollten Sie darauf angewiesen sein, dass die Weiterleitung zu 100% funktioniert, sollten Sie auch einen manuellen Link einfügen, selbst wenn der
Wert auf 0 eingestellt wird. Im besten Fall leitet die Seite schneller weiter als der Link angezeigt werden kann, im schlechtesten Fall wenn die Weiterleitung nicht automatisch funktioniert, kann der Besucher manuell weiter klicken.
Der Inhalt von content unterteilt sich in 2 Werte, getrennt durch ein Semikolon. Zuerst die Dauer der Wartezeit in Sekunden, danach die URL die aufgerufen werden soll. Im obigen Beispiel wird die angegebene URL umgehend geladen.
Favicon
Das Favicon ist eine kleine Grafik im Windows-Icon-Format (*.ico) in der Grösse 16×16, 32×32 oder 48×48 Pixel. Um eine solche Grafik zu erstellen, benötigen Sie ein Grafikprogramm der Sie verwenden ein Online-Tool auf unserer Linkliste. Je nach Browser erscheinen die Favicons in der Adresszeile, dem Fenstertitel oder den Favoriten. Favicon steigern den Wiedererkennungswert erheblich.
CSS
Mit HTML alleine gestalten Sie Webseiten wie Anno 1995, Überschriften, Text, Listen, Bilder, alles schön langweilig übereinander. Mit Cascading Style Sheets erweitern Sie die Darstellungsmöglichkeiten von HTML erheblich. Wie Sie HTML um CSS ergänzen, lesen Sie auf der CSS-Seite. Der CSS-Code gehört auch in den Header. Um das Ganze aber übersichtlicher zu gestalten, sollte man CSS in separate Dateien auslagern.
Körper (Body)
Innerhalb des <body> … </body> kommt nun alles rein was auf der Webseite sichtbar sein soll.