HTML & CSS für Einsteiger (Teil 01): Ein erster Blick auf HTML, CSS & Co.

Die Hypertext Markup Language ist die Haus- und Hofsprache des WWW. Die erste Version dieser Sprache wurde im Jahr 1992 veröffentlicht. Seither hat HTML zahlreiche Modifikationen er- und durchlebt und ist mittlerweile bei Version 5 angelangt. (Wobei Version 5 tatsächlich immer noch nicht offiziell als Standard verabschiedet wurde, in aktuellen Browsern aber durchaus schon recht gut unterstützt wird).

HTML ist eine sogenannte Auszeichnungssprache, mit der sich Inhalte strukturieren lassen. Für die Formatierung der Inhalte sind Stylesheets verantwortlich. Mehr zu denen dann im Anschluss.

Verantwortlich für die Weiterentwicklung von HTML ist das World Wide Web Consortium (kurz W3C).

 

Auf die Webseite des W3C solltet ihr regelmäßig ein Auge werfen, um euch so über die aktuellen Entwicklungen im Web-Bereich auf dem Laufenden zu halten.

Wenn man sich mit HTML beschäftigt, ist eine Frage ganz entscheidend: Welche Version soll ich verwenden? Ihr könnt euch natürlich denken, dass eine Sprache wie HTML fortlaufend aktualisiert wird. Neue Elemente kommen hinzu, alte werden entfernt.

Hier die wichtigsten Sprachversionen bzw. Meilensteine von HTML:

• HTML (November 1992): Das war die erste Version. Der Fokus lag hier ausschließlich auf Textdokumenten.
• HTML 2.0 (November 1995): Es gibt nun auch Elemente für Bilder und Formulare.
• HTML 4.0 (Dezember 1997): Stylesheets, Frames und Skripte werden eingeführt.
• XHTML 1.0 (Januar 2000): Dabei handelt es sich um eine Neuformulierung von HTML 4.0 mittels XML.
• HTML5 (April 2009): Das ist immer noch ein Arbeitsentwurf, also noch kein verabschiedeter Standard.

Der Fokus wird in den folgenden Tutorials auf HTML5 liegen. Denn mit HTML5 soll endlich wieder ein Ruck durch die HTML-Welt gehen. Und in der Tat hat die neue Spezifikation zahlreiche interessante Neuerungen zu bieten. Dazu gehören beispielsweise deutlich komfortablere Formulare, Fortschrittsanzeigen, Zeichenelemente und eine verbesserte Dokumentstruktur. Zudem lassen sich mit dem neuen Standard Videos Plug-In-frei in Webseiten einbetten und es gibt eine Drag-&-Drop-Schnittstelle.
  Der erste Vorschlag zu HTML5 wurde bereits im Jahr 2004 von der Web Hypertext Application Technology Working Group (WHATWG) unter dem Namen Web Applications 1.0 veröffentlicht.




Bis heute wurde HTML5 zwar nicht als offizieller Standard veröffentlicht, dennoch haben die Browserhersteller bereits jetzt zahlreiche HTML5-Funktionen in ihre Produkte aufgenommen. Das verwundert nicht, schließlich handelt es sich bei der WHATWG u.a. um eine Allianz der Browserhersteller Apple, Mozilla und Opera. Die Gründung der WHATWG geschah als direkte Reaktion auf die schleppende Entwicklung von Webstandards seitens des World Wide Web Consortiums (W3C).
  An dieser Stelle kann man sich fragen, was die Browserhersteller dazu bewog, einen eigenen HTML-Standard zu entwickeln. Denn schließlich lag bislang die Entwicklung von HTML fest in den Händen des W3C. Aus Sicht der Browserhersteller begannen die Probleme damit, dass das W3C HTML 4.01 ohne besondere inhaltliche Korrekturen in XHTML 1 umgewandelt hat. Ursprünglich wollte das W3C XHTML 1 als einen ersten Schritt in Richtung XML-basiertes Web etablieren. Am Ende der Entwicklung sollte dann XHTML 2 stehen. Eben diese Konzentration des W3C auf XML ist es gewesen, die die Browserhersteller störte. Aus deren Augen ist der XML-Ansatz nämlich praxisfern und spiegelt nicht die tatsächlichen Wünsche der Anwender wieder. (Was das W3C freilich anders sieht).

Seit dem Jahr 2007 entwickeln das W3C und die WHATWG gemeinsam eine HTML5-Spezifikation bzw. arbeiten an ihr. Die aktuellen Entwicklungen zum Thema HTML5 gibt es unter http://www.w3.org/TR/html5/.




Der Fokus wird in den kommenden Tutorials auf eben jenem HTML5 liegen.

 

CSS für die Formatierung

Ihr habt sicherlich schon einmal mit Dokumentvorlagen in Word oder anderen Textverarbeitungsprogrammen gearbeitet. Wenn ihr also beispielsweise eine Zeile markiert, könnt ihr eine Formatvorlage auswählen.




Je nachdem, welche Formatierung in der Dokumentvorlage für diese Formatvorlage gewählt wurde, wird dann die Überschrift angezeigt. Beim Wechsel der Dokumentvorlage ändert sich auch das Aussehen der Überschrift.

Was hat nun Word mit HTML zu tun? Auch für HTML-Dokumente gibt es Formatvorlagen. Definieren lassen sich diese Vorlagen mittels CSS (Cascading Stylesheets). Dank CSS kann man also beispielsweise festlegen, dass Hauptüberschriften (h1) 22 Pixel groß und in grüner Arial-Schrift angezeigt werden sollen.

Stylesheets ermöglichen die strikte Trennung von Struktur und Layout. Für die Strukturierung der Dokumente wird auf HTML gesetzt. Wie die Elemente letztendlich aussehen, bestimmt man hingegen mit CSS.

 

Was ihr braucht

In den folgenden Tutorials werdet ihr schrittweise HTML und CSS kennenlernen. Damit ihr selbst Webseiten auf Basis von HTML und CSS umsetzen könnt, braucht ihr übrigens keine aufwendige Software. Im einfachsten Fall verwendet ihr – wenn ihr unter Windows arbeitet – den Standardeditor.



  Der ist zwar nicht sonderlich komfortabel, genügt aber für den Anfang. Wer es etwas komfortabler mag, sollte sich aber eher nach einem "echten" HTML-Editor umsehen. Einer der Klassiker ist hier natürlich Dreamweaver.

Dieser Editor ist allerdings nicht kostenlos.



  Für Privatanwender kostenlos ist hingegen phase5 (http://www.phase5.info/). Wenn ihr den Editor also für private Zwecke einsetzen wollt, bekommt ihr hiermit ein gutes und kostenloses Tool an die Hand.




Neben einem Editor solltet ihr zudem die wichtigsten Browser zum Testen der Webseite installiert haben. Tatsächlich interpretieren die Browser nämlich HTML und CSS hin und wieder durchaus eigenwillig. Vor diesem Hintergrund ist ein ausführliches Testen der Seiten in verschiedenen Browsern Pflicht. Installiert haben solltet ihr wenigstens den Internet Explorer, Google Chrome und Mozilla Firefox. Idealerweise testet ihr die Seite aber auch im Opera-Browser und am Tablet/Smartphone.