HTML (Hypertext Markup Language) ist eine textbasierte Programmiersprache zur Strukturierung elektronischer Dokumente, die Anfang der 90er Jahre entwickelt wurde. Zusammen mit der Möglichkeit der Einbindung von Bildern und anderen medialen Inhalten sind HTML-Dokumente die Basis des Internets.
In HTML werden ausschließlich Inhalte erfasst, die Formatierungen erfolgen mittels CSS (Cascading Style Sheets). Die Kombination von CSS und HTML ergibt eine nahezu unbegrenzte Vielfalt an Darstellungsmöglichkeiten.
Die Basics von HTML und CSS sind leicht zu erlernen und erste Inhalte schnell umgesetzt. Beschäftigt man sich dann mit den vielfältigen Darstellungsmöglichkeiten, kann sich dies zu einer interessanten aber auch zeitintensiven Beschäftigung ausarten.
Hatte sich die Webprogrammierung ursprünglich ausschließlich an den Darstellungsmöglichkeiten von PC-Monitoren und an der allgemein geringen Übertragungsgeschwindigkeit orientiert, so gilt es mittlerweile andere Herausforderungen.
Wenn sich der heutige Anwender mit seinem Smartphone oder Tablet mittels Hochgeschwindigkeitsverbindung in das Internet begibt, erwartet er mit jedem Gerät eine adäquate Darstellung.
Die Herausforderung lautet daher heute „Responsives Webdesign”, womit die Berücksichtigung unterschiedlicher Anzeigegeräte bei der Webprogrammierung gemeint ist.
Man erkennt, dass Programmierung mit HTML und CSS einer ständigen, spannenden Veränderung und Anpassung unterliegt.
Bild: pngegg
einfacher Start …
Zur Erstellung einer Webseite benötigt man lediglich einen Office-Computer, einen Texteditor sowie einen Web-Browser.
Mit dem Texteditor wird eine Datei erstellt und mit entsprechender Endung, wie zum Beispiel "Muster.html" oder "Muster.htm" abgespeichert.
Die Dateiendung sorgen dafür, dass die Inhalte im Browser aufgerufen und angezeigt werden können.
CSS (Cascading Style Sheets) ist eine Beschreibungssprache und dient als Ergänzung zu HTML.
CSS ist für Formatierung und Darstellung einzelner HTML-Elemente und/oder des gesamten Webdokuments zuständig. So wird für eine Trennung von Dokumentinhalten (HTML) und -design (CSS) gesorgt.
Früher waren die Fähigkeiten von CSS auf die Anpassung von wenigen Eigenschaften wie Schriftgröße, Farben oder Positionierung von Elementen beschränkt.
Mittlerweile kann das komplette Layout in CSS, einschließlich einfacher grafischer Elemente abgebildet werden.
CSS-Angaben werden direkt im HTML-Dokument angelegt. Damit sind sind Änderungen sofort ablesbar.
Bei komplexeren Webstrukturen mit mehreren Seiten kann auch eine eigenständige, dokumentübergreifend nutzbare Datei angelegt werden. Damit wirken sich Änderungen auf alle Seiten aus.
Art:
Code:
internes CSS:
<style>
body { margin:1em; padding:0; background-color:#eee; }
main { padding:1em 1.5em; background-color:#fff; }
</style>
externes CSS:
<link rel="stylesheet" href="style.css">
strukturierte Inhalte …
Innerhalb des HTML-Dokumentes sollten Strukturen verwendet werden,die bereits im Kontext der Programmierprache vorgesehen sind.
Die derart gekennzeichneten Dokumentbereiche lassen sich beispielsweise über CSS-Anweisung mit einheitlichem Layout versehen.
Eine saubere Struktur erleichtert aber auch das automatische Vorlesen von Webinhalten. Bei den Textstrukturen gelten folgende Regeln:
main: der Hauptinhalt der Seite
article: ein in sich geschlossener Artikel, der Überschrift(en) und evtl. einige sections enthält.
section: Abschnitte wie ein Kapitel, ein ...
Alle Strukturen werden innerhalb des Body-Bereiches verwendet.
