Programmierung einer Website | HTML & CSS

SEITENÜBERSICHT

HTML - WESEN, INHALT UND EINORDNUNG

Bei HTML handelt es sich weniger um eine Programmiersprache, sondern eher um eine Seitenbeschreibungssprache (Auszeichnungssprache). Der Unterschied besteht darin, dass HTML lediglich Inhalte strukturiert darstellt und keine Programmroutinen, Berechnungen oder dergleichen stattfinden.

(X)HTML in seiner originären Bedeutung lautet in der Übersetzung (EXtended) Hypertext Markup Language und ist die Grundlage zur Darstellung einer Seite im Browser. In ihr können alle gängigen Programmiersprachen und Auszeichnungssprachen (PHP, Javascript, FLASH, usw.) bei Bedarf an der jeweiligen Stelle eingefügt werden.

HTML - URSPRUNG, GESCHICHTE UND ENTWICKLUNG

Ursprünglich wurde das Internet für Wissenschaftler entwickelt um global einen verbesserten Austausch von Daten zu ermöglichen, insbesondere in der Kern- und Atomforschung. Die zunächst genutzte Bedienoberfläche erwies sich als zu unkomfortabel und so wurden gegen Ende der 80er Jahre zwei Dienste entwickelt - Gopher und das heute bekannte World Wide Web. Letzteres hat sich durchgesetzt und ist nun Standard. Vorteil gegenüber der alten Bedienung waren der Übergang von einer befehlszeilenorientierten Nutzung (viele PC-Anwender kennen dies auch noch aus MSDOS-Zeiten) zu einer optischen Benutzeroberfläche. Forscher und Experten mussten nun nicht mehr die komplizierte Anwendung von Befehlen erlernen, sondern konnten sich Ihren Kernkompetenzen zuwenden. Übrigens ist der WWW-Dienst ein Produkt des europäischen Kernforschungszentrum CERN in Genf.

Einer der wesentlichen Gründe für die massenfähige Nutzung und den sprunghaften Anstieg des WWW in den Jahren 1993/1994 war das Erscheinen des ersten vollgrafischen Webbrowsers NSCA Mosaic, wodurch eine bessere Navigation und Ladezeit die Anwendung erleichterten. Seitdem ist das Internet stetig am wachsen. Der Name des Programmierer lautet Marc Andreessen, welcher später auch das Unternehmen Netscape (mit dem damals sehr beliebten Webbrowser Netscape Navigator) gründete.

Aktuell wird die Weiterentwicklung von HTML durch das W3-Consortium (W3C) vorangetrieben. CERN hat diese Kompetenzen übergeben. Das W3C definiert Standards & Normen und beschäftigt sich ebenfalls mit anderen bzw. verwandten Sprachen wie VRML, XML, CSS und JAVA. Einen Überblick zu den verschiedenen Versionen finden Sie hier im Wiki.

HTML - ALLGEMEINES GERÜST

Jedes originäre HTML-Dokument verfügt über einen grundlegenden Aufbau - der Dokumentendeklaration, dem HEAD-Bereich und dem BODY-Bereich. Die Dokumentendeklaration legt die durch das W3C entwickelten Standards fest. Der HEAD-Bereich (Header) beinhaltet wichtige, das Dokument betreffende Inhalte. Diese werden außer dem Titel nicht dargestellt und definieren weitere Protokollstandards (Sprache, Anweisungen für Suchmaschinen, Kurzbeschreibung, Zeichensätze etc.). Im BODY-Bereich werden dann alle anzuzeigenden Inhalte dargestellt, also was Sie beim Aufruf einer Website zu sehen bekommen. Das Grundgerüst sieht folgendermaßen aus:

CSS - WAS IST DAS?

Im Laufe der HTML-Weiterentwicklung stiegen auch die Ansprüche an die Optik und das Design einer Website. Somit lagerte man für neuere Versionen veraltete Befehle aus und ersetzte diese durch CSS - Cascading Style Sheets. CSS beinhaltet layout- und textauszeichnungsbezogene Techniken. Diese erfahren eine fortlaufende Erweiterung und CSS bietet somit immer wieder neue Möglichkeiten der Gestaltung. Texte und Grafiken können in Farbe, Form, Größe etc. verändert und integriert werden, aber auch Effekte sind realisierbar.

CSS - WIE RICHTIG EINBINDEN?

Es gibt zwei Möglichkeiten einem HTML-Befehl ein CSS zuzuweisen.

Entweder über das style-Attribut

oder über die Definition einer Klasse

Bei ersterer Version können Sie die CSS-Anweisung im HTML-Tag direkt integrieren. Nachteil ist, dass bei häufiger Verwendung von CSS der Quellcode an Übersichtlichkeit verliert. Der Vorteil ist, dass Sie bei Änderungen weniger scrollen oder zwischen den Dateien hin und her wechseln müssen. Wir raten Ihnen aber grundsätzlich zweitere Variante zu bevorzugen, weil es sich in der praktischen Tätigkeit als eleganter und angenehmer erweisen wird.

Wählen Sie Variante 2 gibt es wieder zwei Möglichkeiten die style-Angaben zu platzieren. Entweder nehmen Sie die Definition im HEAD-Bereich vor oder Sie verweisen im HEAD-Bereich auf eine externe, neue CSS-Datei.

Eine Definition im Header sieht wie folgt aus:

oder Sie fügen einfach in den HEAD folgende Anweisung ein:

In der neuen, leeren Datei fügen Sie einfach Folgendes ein:

Vorteil der letzteren Variante ist, dass Sie den CSS-Code komplett auslagern. Diese Auslagerung bietet eine bessere Trennung der Anweisungen (HTML + CSS), hält den Quellcode schlank und spätere Änderungen erfordern nur minimalen zeitlichen Aufwand.

1. Tipps & Tricks HTML & CSS
2. Allgemein  |  CSS
3. Informationen & Tools
4. Tools  |  Foren  |  Informationsanbieter
5. Praktische Hilfe für Einsteiger
6. Erste Schritte: Die wichtigsten HTML-Tags
   Erste Schritte: Die wichtigsten HTML-Attribute
   Erste Schritte: Die wichtigsten CSS-Styles
   Erste Schritte: Ihr erstes HTML-Dokument
   Erste Schritte: Ihr erstes HTML-Dokument unter Berücksichtigung von CSS
   
   next step: Eine professionellere Seite mit CSS
   
7. Vertiefende Informationen zu HTML & CSS
8. Grundlagen: HTML & XHTML
   
9. spezielle Tutorials zu HTML & CSS
10. (in Bearbeitung)