Webtechnologien (2/3)

Überblick HTML & CSS

Immer wenn man eine Webseite aufruft wird die entsprechende HTML-Datei, welche die Struktur der Seite und deren Verknüpfungen zu Ressourcen beschreibt, geladen. Wer neugierig ist, wie das HTML-Gerüst bzw. der Quellcode dieser Webseite aussieht, der kann diesen einfach mit einem „Rechtsklick“ und dann mit einem Klick auf „Seitenquelltext anzeigen“ ansehen.

 

Was ist HTML?
HTML (HyperText Markup Language) ist eine Auszeichnungssprache, die die Struktur und Semantik der Inhalte eines Web-Dokuments (also einer HTML-Datei) beschreibt. Eine Webseite wird jedoch erst durch das Zusammenspiel von HTML, CSS, Javascript und anderen Webtechnologien funktional!
Den Aufbau einer HTML-Datei bzw. Webseite kann man sich in etwa wie eine Titelseite einer Zeitung vorstellen:

  • Der Kopfbereich <head> mit wichtigen Informationen u.a. mit dem Titel und Metadaten
  • Der Inhaltsbereich <body> der in Bereiche mit unterschiedlichen Spalten und Artikel die Text, Bilder etc. enthalten, unterteilt ist
  • Die Fußzeile (optional) die meist Informationen über den Herausgeber oder Kontaktdaten enthält.

 

Was ist CSS?
CSS (Cascading Style Sheets) ist eine Stylesheet-Sprache, die vor allem HTML-Dokumente formatiert und gestaltet. Mit CSS kann man gezielt Elemente der HTML-Struktur ansprechen und mit bestimmten Eigenschaften gestalten.
Mit dem Wissen, dass eine HTML-Datei nur die Struktur für den Inhalt liefert, kann man also festhalten, dass CSS einer Webseite erst ihr Aussehen verleiht.

Falls Sie mit Firefox surfen, können Sie sich ansehen wie diese Webseite ohne CSS aussehen würde: Wählen Sie oben im Menü den Punkt „Ansicht“, dann auf „Webseiten-Stil“ und setzen Sie den Haken bei „Kein Stil“. Was Sie dann sehen, ist die reine HTML-Struktur. Um dies rückgängig zu machen, setzen Sie den Haken wieder bei „Standard-Stil“.

 

Weiterführende Links:
SelfHTML
Mozilla HTML-Referenz

 

Nächstes Modul „Javascript“