HTML und CSS bilden das Grundgerüst jeder Website. Sie werden auch für die Programmierung von Webdesign verwendet. HTML (Hypertext Markup Language) wird verwendet, um die Inhalte einer Website zu organisieren und zu strukturieren. CSS (Cascading Style Sheets) hingegen bestimmt das Design, also letztlich das Aussehen einer Website. HTML basiert auf einer Reihe von Tags und Elementen. Mit CSS wählt der Entwickler/die Entwicklerin das Design, die Farbe, bestimmte Schriften und das Layout aus. Es optimiert also die Ästhetik einer Webseite. Für die Webentwicklung sind beide Sprachen gleich wichtig. Aktuelle Versionen sind HTML5 und CSS3.
HTML-Grundlagen: Erklärung einiger grundlegender HTML-Elemente und -Tags zur Gestaltung von Webseiten
Die Grundstruktur einer Website wird durch die Hypertext Markup Language festgelegt. Dabei geht es insbesondere um die Einbindung von Überschriften, Absätzen, Bildern und Listen. Es gibt Tags für die Strukturierung und Ausrichtung einer Website und solche, die das Schriftbild auszeichnen. Hinzu kommen Verweise, zum Beispiel auf einen nachfolgenden Link, der eingebunden werden soll.
Hat man die wichtigsten Tags einmal gelernt, gestaltet sich HTML Programmieren vergleichsweise einfach und intuitiv. Webdesign CSS ist da schon etwas anspruchsvoller. Zu den wichtigsten Tags zählen h1 für die Hauptüberschrift und entsprechend h2 bis h6 für die rangniederen Überschriften. Der Tag p bildet einen Absatz, während <br/> einen Zeilenumbruch erzwingt. Das Element hr erzeugt hingegen eine Trennlinie. Table steht für eine Tabelle und li bildet einen Aufzählungspunkt innerhalb einer Liste, welche wiederum mit den Tags <ol></ol> oder </ul > gekennzeichnet wird.
Die wichtigsten Tags auf einen Blick
- <h1></h1> bis <h6></h6> stehen für Unterschriften absteigender Priorität
- <p></p> steht für einen Paragrafen bzw. Absatz
- Einen Link fügt man folgendermaßen ein: <a href=“https://www.medienreich.de/“>Linktext</a>
- <img> steht für ein Bild und wird zusätzlich durch das Attribut src=““ gekennzeichnet
- <ol></ol> meint eine geordnete Liste, also eine Liste mit Nummerierung, <ul></ul> dagegen eine ungeordnete Liste.
- <i></i> kennzeichnet kursiven Text und <b></b> fetten Text
- <strong></strong> ermöglicht das Hervorheben bestimmter Textbereiche
- <br> bedeutet einen Zeilenumbruch, <hr> erzeugt dagegen eine Trennlinie
- <div></div> und <span></span> bezeichnen sogenannte Block-Elemente bzw. einen unsichtbaren Rahmen
- wichtig zur Auszeichnung der verschiedenen Textbereiche sind ferner <head> für die Kopfzeile, <title> für den Titel und <body> für den Hauptinhalt eines Textes.
Anwendung in den Bereichen Webdesign, Webentwicklung, Newsletterdesign und in mobile Anwendungen
HTML-Newsletter und HTML-Templates gehören zu den zahlreichen Anwendungen. Beide Auszeichnungssprachen können für nahezu alle Webanwendungen verwendet werden. So gibt es ausgewählte Templates für Newsletter oder E-Mail-Kampagnen. Die Anwendungen decken den gesamten Prozess bis zur fertigen Website oder mobilen App ab. Dabei ist es hilfreich, strategisch in bestimmten Schritten vorzugehen und sich nach der Erstellung einer Seite beispielsweise zunächst auf die Auswahl von Farben und Schriften zu konzentrieren, bevor man sich an die Erstellung eines passenden Navigationsmenüs und die Gestaltung der Links macht. Es ist hilfreich, den HTML-Quelltext auszulagern, um während des Arbeitsprozesses einen besseren Überblick zu behalten.
Grundlagen der Cascading Style Sheets
CSS basiert im Wesentlichen auf sogenannten Regelsätzen. Jede CSS-Regel beginnt mit einem Selektor, der festlegt, welche HTML-Elemente formatiert werden sollen. Beispielsweise steht p für Absatz. Je nach Element muss der Selektor angepasst werden. Bestandteile eines CSS-Regelsatzes sind der Selektor, die Deklaration, die Eigenschaft und der Eigenschaftswert. Die Deklaration legt fest, welche Eigenschaft auf welche Weise verändert werden soll. Die Eigenschaft gibt an, welches Element genau geändert werden soll. Schließlich wird die Eigenschaft eines Elements geändert, indem ihm ein konkreter Eigenschaftswert zugewiesen wird. Auf diese Weise können nicht nur Farben, sondern auch das Layout und andere visuelle Aspekte einer Website gestaltet werden.
Die wichtigsten CSS-Layouttechniken im Überblick
Die wichtigsten Layouttechniken, um die Struktur und das Layout einer Webseite zu gestalten und zu organisieren, heißen Box-Modell, Flexbok und Grid.
- Das Box-Modell beschreibt, wie Blockelemente vom Browser dargestellt werden. Jedes Element hat eine Größe in Form einer Contentbox, die von den drei Boxen Padding, Border und Margin umgeben ist. Die Summe aller drei Boxen bestimmt den Platzbedarf eines Elements. Mithilfe von CSS kann das Box-Modell manipuliert werden. Dies bringt unter anderem Vorteile für responsives Design.
- Mit Flexbox lassen sich auf einfache Weise variable und responsive Layouts erstellen. Dabei wird mit zwei Achsen gearbeitet, auf die Inhalte verteilt werden können.
- Grid wiederum erzeugt Gestaltungsraster aus gedachten Linien für das Layout von Webseiten. Daraus ergeben sich Zeilen und Spalten. Die Platzierung der Elemente im Grid hat jedoch keinen Einfluss auf die Reihenfolge bei der Sprachausgabe.
Was sind HTML-Formulare und wie werden sie erstellt?
Formulare zur Eingabe von Daten werden durch die Auswahl des Tags „form“ erstellt. Es gibt sie in vielen Farben und Formen. Dann wird mit dem Attribut „action“ festgelegt, wohin die Formulardaten am Ende gesendet werden sollen. In der Regel wird dies eine Skriptdatei sein, die die Daten weiterverarbeitet.
HTML-Tabellen: Aufbau einer HTML-Tabelle
HTML-Tabellen werden aus mehreren Elementen zusammengesetzt. Am einfachsten ist eine Tabelle mit Zeilen, in denen sich Tabellenzellen befinden.
Eine Tabelle kann eine oder mehrere Zeilen haben, was meistens der Fall sein wird. Es gibt jedoch verschiedene Arten von Tabellen, z. B. Tabellen zur Speicherung persistenter Daten, Übersichtstabellen und temporäre Tabellen. Sie ermöglichen die Anordnung von Elementen in Spalten und Zeilen.
HTML-Semantik: Die Bedeutung der semantischen Elemente in HTML und ihre Auswirkungen auf die Zugänglichkeit und die Suchmaschinenoptimierung einer Website
Da jedes HTML-Element eine bestimmte Bedeutung hat, die den Inhalt einer Website kennzeichnet, hat es auch eine semantische Dimension. Eine professionelle Website ist semantisch korrekt aufgebaut. Das bedeutet zum Beispiel, dass ein Text, der als Überschrift (h1 bis h6) gekennzeichnet ist, wichtiger ist als der normale Fließtext. Bei der Semantik geht es nicht um das Aussehen, sondern um die Bedeutung einzelner Inhalte. Design und Semantik sollten auf einer gut gestalteten Website vollständig voneinander getrennt sein. Auch wenn die semantische Ebene für den Nutzer einer Website nicht sichtbar ist, ist sie dennoch wichtig, da Suchmaschinen den Quellcode lesen und aus den verwendeten HTML-Elementen auf die Bedeutung der Inhalte schließen.
Innovative und praktische HTML5-Neuerungen für noch mehr Gestaltungsmöglichkeiten
Mit HTML5 sind einige interessante Neuerungen in Bezug auf Funktionen und Elemente auf den Markt gekommen. Zu nennen sind insbesondere die Video- und Audio-Tags, Canvas für Zeichnungen sowie die Geolocation-API. Diese Neuerungen machen Webseiten noch ansprechender und interaktiver. Multimedialen Inhalten wird noch mehr Platz eingeräumt, aber auch bei den interaktiven Elementen hat sich viel getan. Mit der Geolocation-API ist es sogar möglich, den geografischen Standort eines Endgerätes zu ermitteln.
Hypertext Markup Language und Cascading Style Sheets
Beide Auszeichnungssprachen bedingen einander. Zwar funktioniert eine Webseite in ihrer Grundstruktur auch ohne CSS, aber das unverwechselbare Layout kommt erst durch CSS richtig zur Geltung. Wenn man sich die Hypertext Markup Language wie einen Bilderrahmen vorstellt, dann sind die Cascade Stylesheets das Gemälde darin mit all seinen Farben, Schattierungen und Objekten.
Best Practices in HTML Programming: Nützliche Tipps und Empfehlungen für sauberen und effizienten HTML-Code und die Einhaltung bewährter Web-Standards
Zunächst ist es wichtig, die Dokumentdeklaration zu beachten. Sie definiert das Dokument im Allgemeinen. Wenn Sie diese vergessen, kann es später zu Problemen bei der Darstellung im Browser kommen.
Zweitens ist es von Vorteil, wenn Sie Ihre Website so aufbauen, dass spätere Änderungen nur minimalen Aufwand erfordern. So müssen Sie nicht jede Seite einzeln mit dem PHP-Befehl INCLUDE bearbeiten.
Drittens hilft Ihnen die Möglichkeit, Tags einzurücken, um die Übersichtlichkeit zu erhöhen. FRAME-Konstruktionen sollten jedoch vermieden werden, da sie altmodisch und nachteilig wirken.
Viertens sollten bei Grafiken und Objekten immer Höhe und Breite angegeben werden. So weiß der Browser beim Aufbau der Website, wie groß das betreffende Element ist.
Achten Sie schließlich darauf, dass die (empfohlene) maximale Breite einer Website 965 Pixel beträgt, da sie dann auch mit älteren Auflösungen kompatibel ist. Andernfalls müssen Besucher horizontal scrollen.
Responsive Webdesign und HTML
Responsive Webdesign ist wichtig für die optimale Darstellung gleicher Inhalte auf verschiedenen Endgeräten mit unterschiedlichen Bildschirmgrößen. Inhalte und Navigationsleisten passen sich automatisch an den verfügbaren Platz an. Ziel ist eine hohe Benutzerfreundlichkeit auf Desktop-Computern, Tablets und Smartphones gleichermaßen. Der Schlüssel dazu sind flexible Grids, die im Gegensatz zu ihren statischen Verwandten mit relativen Werten arbeiten. Dadurch passen sich die Inhalte automatisch prozentual an, wenn sich der Anzeigebereich ändert.
Ausgewählte HTML-Frameworks und -Vorlagen
Beliebte Frameworks und Templates für die Erstellung ansprechender und gut strukturierter Webseiten sind React, Svelte und Angular. Jedes von ihnen hat bestimmte Vorteile, aber auch Einschränkungen. Welches von ihnen das Beste ist, lässt sich nicht pauschal sagen, sondern hängt von den jeweiligen Rahmenbedingungen ab. Generell erleichtern Frameworks die Arbeit von Webentwicklern, indem sie unter anderem wiederverwendbare Codebausteine, standardisierte Frontend-Technologien und vorgefertigte Schnittstellenblöcke bereitstellen.
HTML und SEO – gegenseitige Beeinflussung
Bestimmte HTML-Elemente beeinflussen die Suchmaschinenoptimierung einer Website. Dies gilt insbesondere für die Tags Title und Meta Description. Gerade Überschriften sind für Suchmaschinen von großer Bedeutung. Eine Überschrift muss aussagekräftig sein und das Thema in wenigen Worten beschreiben. Bilder, die ebenfalls wichtig sind, werden durch das Alt-Attribut gekennzeichnet.
HTML-Validierung als nützliches Werkzeug, um den HTML-Code auf Fehler zu überprüfen
Bei der HTML-Validierung wird überprüft, inwieweit der Quellcode einer Website bestimmten Standards entspricht oder Fehler enthält. Valide Elemente halten sich also an alle Konventionen und Spezifikationen dieser Sprache. Zu diesem Zweck stellt das World Wide Web Consortium (W3C) ein eigenes Tool zur Verfügung, mit dem der Quellcode auf die Einhaltung der neuesten Konventionen überprüft werden kann. Der Validator lädt dazu den Quellcode herunter und geht ihn Zeile für Zeile durch. Es ist aber nicht das Ende der Welt, wenn nicht der gesamte Code valide ist, denn für das Setzen des Quellcodes werden oft spezielle Programme verwendet. Diese verwenden in vielen Fällen einen visuellen Editor, um die Seite aufzubauen. Der Quellcode wird dann nur im Hintergrund erzeugt und ist zweitrangig.
Fortgeschrittene HTML-Techniken
Zu den fortgeschrittenen Techniken gehört die Verwendung von Metatags, aber auch der Umgang mit lokalen Speicheroptionen. Hinzu kommt das Einbetten externer Inhalte.
- Metatags geben Suchmaschinen Informationen über Ihre Website und befinden sich im Kopf eines HTML-Dokuments. Für die Besucher:innen der Website bleiben sie unsichtbar. Die Tags enthalten unter anderem Informationen zu Autor, Inhalt, Herausgeber oder Copyright.
- Auch das Wissen um lokale Speichermöglichkeiten kann von Vorteil sein. So kann eine Webseite offline gespeichert werden, um sie zu einem späteren Zeitpunkt lesen zu können. Gängige Browser unterstützen diese Funktion.
- Externe Inhalte können ebenfalls eingebettet werden. Das können klassische Links sein, aber auch Buttons für Social Media. Gleiches gilt für Newsfeeds und Widgets. Besonders wichtig ist die Einbindung von Videos, z. B. von YouTube, und Google Maps auf Webseiten.
