HTML5 & CSS3 im Schnellgang

Einleitung

Warum HTML 5 + CSS 3?

Zuerst einmal bedarf es der Definition - was ist HTML, ausgeschrieben = HyperTextMarkupLanguage. Seit es CSS = CascadeStyleSheet gibt, wird HTML nur noch eingesetzt, um eine Seite zu strukturieren. CSS dagegen übernimmt das Design der Seite.

Seit HTML5 unterscheiden wir die HTML-TAGs in normale und in semantische TAGs. Semantische TAGs haben den unbestreitbaren Vorteil, dass sie weitgehend dem Verständnis des Nutzers entgegenkommen (Usability). Vereinfacht gesagt, ist eine Webseite nichts anderes als eine formatierte Textdatei mit besonderen Mitteln. Eigentlich wollte ich dieses Tutorial für Nutzer schreiben, die bereits weitgehend Erfahrung im Programmieren mit HTML haben. Ich habe mich aber entschlossen, auch Anfängern den Einstieg zu erleichtern. Persönlich programmiere ich ca. 80 - 90% meiner Seiten mit dem ganz ordinären Notepad, der Beigabe von Windows. Das sollten auch Anfänger tun, weil sie dann eher in die Materie kommen. Die TAGs lernen, ihre Bedeutung und dann mit Notepad loslegen. Natürlich können sie auch andere Editoren nehmen (bitte keine WYSIWYG) und mit ihnen experimentieren. Im Anschluss dieses Tutorials werde ich einige gute Programme nennen, die es frei - also als Freeware - im Internet gibt.

HTML - Basis

HTML 4.01 und HTML 5

HTML - Basis

HTML 4.01 und HTML 5

Diese beiden Grundgerüste bilden bereits eine funktionierende Webseite. Nun müssen sie nur noch mit dem entsprechenden Inhalt gefüllt werden. Ich möchte an Neuem zeigen die TAGs audio und video, sowie runde Ecken und eine Seitenaufteilung mit header, article und footer. Außerdem können sie anhand dieser Seite sehen, wie man einen Farbverlauf mit CSS3 hinkriegt. Wenn sie mit der rechten Maustaste auf die Mitte der Seite klicken, erscheint ein PopUp-Menü, in dem sie einfach auf "Seitenquelltext anzeigen" klicken. Anschließend gehen sie mit der Maus in den Head-Bereich und klicken dort auf "css/format.css" Dort sind alle dieses Tutorial betreffenden Formatierungen enthalten. Die Seite können sie nun kopieren und auf ihrer Festplatte speichern. Zusammen mit der HTML-Seite können sie nun gefahrlos ein wenig mit den Farben und Formaten experimentieren.