HTML & CSS Einführung für Designer:innen

Alles, was wir im FrontEnd sehen ist HTML, welches mit CSS, Javascript sowie Inhalten aus einem CMS angereichert werden kann.

Das World Wide Web diente zuallererst dem globalen Austausch von wissenschaftlichen Arbeiten, daher baut HTML auf der Struktur von wissenschaftliche Arbeiten auf.

Um zu verstehen, wie HTML funktioniert, beginnt man am besten bei einem einfachen Text. Haupttitel, Untertitel, Absätze, Referenzlinks und gelegentlich ein Bild. Die Auszeichnung, was ein Haupttitel oder Untertitel ist, referenziert 1:1 mit HTML. Denn Auszeichnungen heisst auf Englisch Markup.

Schreibt man an einem Text. Reihen sich Buchstaben an Buchstaben. Titel verdrängen den Inhalt auf der ganzen Linie und machen einen Absatz. Überarbeitet man den Text zu Oberst, rutscht der gesamte Inhalt automatisch nach unten. Er fliesst.

Was banal tönt, ist ein fundamentaler Unterschied zu klassischen Layoutprogrammen, welche Elemente absolut platzieren.

Head

Alle Elemente im Head sind nicht direkt sichtbar. Sie dienen der Webseiten-Logik, dem Browser sowie den Suchmaschinen. Zudem werden dort File-Verknüpfungen zu CSS, Javascript und Fonts etc. abgespeichert.

Body

Alles, was im Body steht, ist sichtbar. Es ist der visuelle Inhalt. Die ästhetische Arbeit fliesst fast ausschliesslich in den Body.

Syntax

Ein Browser liest das HTML-File von oben links nach unten rechts. Kann er etwas nicht lesen, blockiert dies den Ladeprozess. Schreibfehler im Code (ein Syntax-Error) verunmöglichen das Laden einer Webseite.

Dazwischen ist der sichtbare Inhalt. Im Opening-Tag können weitere Attribute zu diesem Element definiert werden.

HTML-Elemente sind klar definiert

Sie definieren, was für eine Titel-Hierarchie ein Titel hat oder ob es ein Link, ein Bild oder eine Tabelle ist. Jedes Element hat eine klare Aufgabe.

Diese Strukturierung wird genutzt, um CSS anzuknüpfen oder mit Javascript zu interagieren. Zudem hilft es Suchmaschinen, die Inhalte der Webseite in der richtigen Hierarchie zu lesen.

Hyper steht für die Möglichkeit der Verlinkung. Links sind die Essenz, woraus das Internet gemacht ist.

Sie zu kennen hilft, sich im Dschungel zurechtzufinden:

H1-H6

Die Titel-Hierarchie in 6 Stufen von Heading 1 bis Heading 6. H1 ist der grösste Titel.

P

P wie Paragraph oder Absatz. So wird der Body-Text in Absätze unterteilt. Oft wird er mit dem Styling des Lauftexts gleichgesetzt. Im Grunde ist dies nicht korrekt, da er nur die Absätze innerhalb des Textes definiert. Standardmässig ist das Body-Text-Styling, das Lauftext-Styling.

Div

Ein Division (div) ist eine Einheit. Dieses Element unterstützt das Layout, in dem es gruppiert. Es wird ständig eingesetzt, um andere Elemente zu verschachteln. Es gibt semantische Ersatz-Elemente, die präziser sind. Erfahre warum

a

Der a-Tag definiert einen Hyperlink. Er benötigt dazu das href Attribute, um dessen URL mitzugeben.

‍

Design relevante Attribute

Gewisse Attribute sind nur für spezifische HTML-Elemente gedacht, andere sind generell. Hier die häufigsten Attribute, die wir für die Gestaltung benötigen.

class

Klassen ermöglichen ein freies Gruppieren von Elementen. Unabhängig zum HTML-Tag selbst. Ideal für das CSS Styling.

href

Die Hyperlink-Reference. Also die Link-URL für dieses HTML-Element.

src

Die Source (Quelle) und referenziert eine File-URL eines Bildes. Dies ermöglicht zudem, dass ein Bild ein Link haben kann, indem der <img> HTML Element zwei Attribute (href und src) hat.

id

Pro Seite sollte jede ID nur einmal vorkommen, damit dieses Element gezielt angesprochen werden kann. Ideal für spezifische Javascript Interaktionen oder Ankerlinks.

‍

HTML-Element

Das HTML-Element selbst ist der dominanteste Selektor, da es der «Parent» der Selektoren ist. HTML-Elemente sind klar definiert.

Class (HTML-Attribute)

Klassen bringen mehr Logik & Verständnis in die Struktur. Meistens werden Klassen für die Gestaltung genommen. Klassen können frei benannt werden. Im CSS durch einen Punkt (.class) vornedran spezifiziert.

ID (HTML-Attribute)

Eine ID wird benutzt, um ein einziges Element eines HTML-Files zu definieren. Der Name ist frei definierbar. Im CSS mit einer Raute (#id-name) vornedran spezifiziert.

States (Pseudo-Class)

Alle States (Zustände) eines Elementes können separat im CSS gestaltet werden. Hover, Pressed, Focus, Visited, etc. Sie werden als Pseudoklassen bezeichnet. Pseudo, weil sie immer in Kombination mit einem Selektor stehen. Pseudoklassen sind klar definiert.

Der Selektor verbindet das CSS mit dem HTML und weist so die Gestaltungsdeklarationen (Properity + Value) eines CSS Rule-Sets einem HTML-Element zu.

Es können beliebig viele Gestaltungsdeklarationen (1, 2, N) einem Selektor zugewiesen werden. Die Gestaltungsdeklarationen sind klar definiert.

All diese «Rule-Sets» werden in einem «Stylesheet» zusammengefasst und beim Laden einer HTML-Seite eingespeist.

Ein CSS Rule-Set wird somit an diversen Orten wiederverwendet. Damit dies sauber funktioniert, nutzt man die verschiedenen Selektoren, um die Zuweisung modular zu halten.

Beispielsweise werden viele Div-Elemente im HTML gesetzt, aber komplett unterschiedlich gestaltet, weil sie eine andere Klasse als Attribut haben. Man würde die Gestaltung enorm einschränken, wenn man statt der class direkt ein div mit Gestaltungsdeklarationen bestückt.

Die Gestaltungsdeklarationen werden überall mitgegeben, wo diese Klasse gesetzt wurde. Egal, ob dieses Rule-Set für ein h1 oder ein div angedacht war. Dies ist ein Unterschied zu den Absatzformaten, die wir aus InDesign kennen.

Die limitierte Anzahl HTML-Elemente gepaart mit der unendlichen Anzahl an Klassen und IDs, ermöglichen maximale Designfreiheit mit einer optimalen Repetition.

So kann im CSS unterschiedliche Styles zu unterschiedlichen Kombinationen von Selektor-Pakete definiert werden.

Einem Baukasten System gleich, können nun die HTML-Elemente mit Klassen, Pseudo-Klassen (States) oder IDs kombiniert werden.

Diese Selektoren werden im HTML unter dem class Attribute kombiniert (class = "teaser-box hero specialbox"). Aber auch im CSS selbst können Bedingungen geschaffen werden, unter welchen Umständen, welches Rule-Set zum Einsatz kommt.

Die Möglichkeiten, wie CSS Selektoren kombiniert werden können, sind sehr breit. Wer mit CSS arbeitet, der tut sich gut, gewisse Kombinationen zu kennen. Beispielsweise kann man auch :not Selektoren nutzen, um gewisse Kombinationen auszuschliessen.

Im Bild werden vier Möglichkeiten gezeigt. Es sind alles Beispiele, die auch anders kombiniert werden können.

Nested Selector

Mit einem Leerschlag, werden Selektoren verschachtelt miteinander kombiniert. Beispielsweise: Wähle alle ::hover (State) innerhalb .titel-500 (Class) innerhalb einer h2 (HTML-Element) aus.

Packet Selector

Mit einem Komma trennt man verschiedenen Selektoren voneinander ab, die aber alle das gleiche Rule-Set erhalten sollen.

Child Selector

Mit einem Bracket > (rechte eckige Klammer) wird ein Rule-Set nur für Child-Elemente eines definierten Parents definiert.

Sibling Selector

Mit einem Plus-Zeichen + werden Elemente angesprochen, die auf gleicher Stufe stehen. Siblings = Geschwister.

‍

Damit die Verschachtelung und die dadurch entstandene Abhängigkeit von Elementen während des Programmierens besser zu erfassen, werden diese Verschachtelungen im Code jeweils eingerückt. HTML-Elemente können unendlich oft ineinander verschachtelt werden.

Dabei gibt es HTML-Elemente, welche sich vorzugsweise um das Layout kümmern. Der Div-Tag oder semantische HTML-Tags beispielsweise.

Diese Verschachtelung definiert die gestalterische Vererbungslogik.

Das Vererbungsprinzip

Der Clou an diesem Parent-Child Prinzip ist die Vererbungslogik. Gestaltungsdeklarationen, die einem Parent mitgegeben wurden, gelten auch für dessen Kinder und Kindes-Kinder. Ausser, dieser Wert wird überschrieben.

Das Parent-Child Prinzip und die Vererbungslogik gilt auch für die Attribute eines HTML-Elementes.

Wenn nun die Parent- und Child-Logik einer HTML-Struktur kombiniert wird mit der Hierarchie der Selektoren (Tags, Klassen, etc.), kann man  viele Abhängigkeiten definieren, welche richtig eingesetzt, den Code schlank und das Design sauber machen.

Es reicht, wenn ich an einem Ort definiere «Grundsätzlich sind alle Schriften der Webseite in der Schriftfamilie «Work-Sans», schwarz und linksbündig gehalten.»

Eine solche Definition kann im CSS des Body-Elementes oder HTML-Element (root) geschrieben werden. So vererbt sich dieses Rule-Set auf alle Elemente der ganzen Webseite. So muss nie mehr beispielsweise Work-Sans als Schriftfamilie, Schwarz als Schriftfarbe oder die Linksbündigkeit eines Textes deklariert werden. Nur, wenn ein Element von dieser Regel abweicht.

Zuerst definiere ich die Norm und danach die Abweichung. Das hält das CSS Schlank.

Semantisch & Non-Semantische Elemente

Zum anderen muss man schauen, dass die jeweiligen HTML-Tags sowie CSS-Klassen richtig eingesetzt und gestylt werden.

Dazu hilft es, mit den Layout-HTML-Tags zu arbeiten. Am häufigsten trifft man den «div» an. Div steht für Division, also Einheit. Er ist aber wie der «span» ein Non-Semantisches Layout Element. Das heisst soviel, dass mit ihm keine Inhaltsdefinition gemacht wird.

Mit HTML-5 kamen aber semantische HTML Layout-Elemente. Semantische Layout-Elemente ermöglichen eine bessere Indexierung sowie Accessibility, weil Screenreader und Spiders/Crawlers die Inhaltsbereiche verstehen.

‍

Beispiele von semantischen HTML-Elementen

nav - Definiert Navigationslinks

header - Definiert einen Header innerhalb des Dokumentes oder Section. (Nicht zu verwechseln mit dem head)

main - Definiert den Hauptinhalt

section - Definiert eine Section (Innerhalb des Dokumentes)

article - Definiert einen eigenständigen Artikel innerhalb des Dokumentes (z. B. Blog-Teaser)

footer - Definiert den Footer-Bereich innerhalb des Dokumentes oder Section.

Dies so zu definieren ist sinnvoller, als immer ein Inhalt unwissendes Div-Element zu verwenden.

‍

Variablen sind Container für einen Wert. Variablen sind lesbarer (semantischer) und somit intuitiver in der Designerklärung. Sie sind Mittelmänner für Design-Spezifikationen.

‍

Zwei Beispiele

Farben

Die Variable «primary-dark» beinhaltet den schwer lesbaren HEX-Wert #2E7A93. Im Code wird an einer Stelle die Variabel definiert und an unzähligen Orten nur den Variablen-Namen gesetzt. Ändert den Wert der Variablen «primary-dark», ändert er global.

Grössen & Abstände

Statt 50px Abstand kann man auch die Variabel «Spacing-Medium» nehmen. So kann man eine Anzahl verschiedener Abstände als Variablen definieren. Dies erlaubt ein rasches Anpassen des Codes.