Loading...
HTML & CSS Einführung für Designer*innen
Work in Progress

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

Die Web-Grundprinzipien erfordern die Gestaltung neu zu denken. Dabei gilt es die Grundregeln von HTML & CSS, als modulares Baukasten-System kennenzulernen.

Alles ist im Fluss.

HTML fliesst. Merk dir das.

Text als Fluss

DIE Grundstruktur

HTML ist das Textformat einer Webseite. Vom Inhalt wird alles abgeleitet. Die HTML-Elemente strukturieren diesen Inhalt.

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

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

Um zu verstehen, wie HTML tickt, beginnt man am besten bei einem einfachen Text. Haupttitel, Untertitel, Absätze, Referenzlinks und ab und an ein Bild.

Diese Auszeichnungen, was ein Hauptitel oder Untertitel ist, referenziert 1:1 mit HTML: Auszeichnungen = MarkUp.

Schreibt man an einem Text. Reihen sich Buchstaben an Buchstaben. Titel verdrängen den Inhalt auf der ganzen Linie und machen einen Absatz. Aber der Text wie ein Fluss.

Überarbeitet man den Text man zu Beginn, rutscht der gesamte Inhalt automatisch nach unten. Er fliesst.

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

Es ist sinnvoll, sich diesem Textfluss bewusst zu werden.

Screenshot von HTML Zeilen.
© Adobe CC Learn to Code Series
Screenshot von HTML Zeilen.

HTML Dokument

Hyper Text Markup Language

Es gibt zwei grundsätzliche Teile eines HTML-Dokumentes. Den Head sowie den Body. Beide haben ihre klare Funktion.

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.

HTML Grundbausatz. Body und Head.
©Webdesign Essentials
HTML Grundbausatz. Body und Head.
2

Links

W3 Schools Head Element

W3 Schools Body Tag

Das HTML-Element

Grundbaustein

HTML strukturiert Texte mit HTML-Elementen. Ein HTML-Element besteht aus zwei Tags. Einem Opening-Tag und einem Closing-Tag.

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-Hierarche 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 auch die Essenz, woraus das Internet gemacht ist.

Die ersten paar Zeilen HTML Code. Html, Head, Body mit eine H1 und P Tag. Verschachtelt strukturiert.
© Webdesign Essentials
Die ersten paar Zeilen HTML Code. Html, Head, Body mit eine H1 und P Tag. Verschachtelt strukturiert.
2

asd

Häufige HTML-Elemente

Wie Voci Büffeln

Es gibt gewisse HTML Elemente, denen wir immer wieder begegnen. Die aller häufigsten hier.

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 ganz korrekt.

Div

Ein Division (div) ist eine Einheit. Dieses Element unterstützt das Layout in dem es gruppiert. Es wird sehr oft 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.

HTML Attribute

Zusätze für ein HTML-Element

HTML Attribute kommen immer in den Opening-Tag des HTML-Elementes. Sie unterstützen die HTML-Elemente mit wertvollen spezifischen Angaben zum Element.

Typische Attribute

Gewisse Attribute sind nur für spezifische HTML-Elemente gedacht, andere sind generell.

class

Klassen ermöglichen ein freies Gruppieren von Elementen. Unabhängig zum HTML-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.

id

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

3

Links

Liste der Attribute

Verbinden wir nun die Struktur des HTML mit der Gestaltung.

Lernen wir CSS kennen.

CSS

Cascading Style Sheet

CSS ist für das visuelle Styling einer Webseite zuständig. Dabei werden die HTML-Elemente im CSS gestylt.

Der Selektor verbindet das CSS mit dem HTML und dient dazu, die Gestaltungsdeklarationen zuzuweisen.

Es können alle Arten von Gestaltungsdeklarationen einem Selektor zugewiesen werden. Die Gestaltungsdeklarationen sind klar definiert.

All diese einzelnen "Rule-Sets" werden in einem «Style-Sheet» zusammengefasst und beim Laden einer HTML-Seite eingespeist.

Anatomie einer CSS Regel. Die Class ist der Selector und in den {} befindet sich die Deklaration von Property (Fähigkeit) und Value (Wert).
© Webdesign Essentials
Anatomie einer CSS Regel. Die Class ist der Selector und in den {} befindet sich die Deklaration von Property (Fähigkeit) und Value (Wert).

Selektoren

HTML trifft auf CSS

HTML und CSS werden durch verschiedene Selektoren verbunden. Es gibt verschiedene Selektoren, die zu unterschiedlichen Momenten oder Kombinationen die Gestaltung beeinflussen.

HTML-Element

Das HTML-Element selbst ist ein dominanter 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) vorne dran spezifiziert.

ID (HTML Attribute)

Eine ID wird benutzt, um ein einziges Element eines HTML Files zu definieren. Der Name ist frei definierbar. Es soll nur 1x pro Seite vorkommen. Im CSS mit einer Raute (#Id-name) vorne dran 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.

Darstellung eines HTML Textes sowie dem visuellen Pendant. Dabei wird unten erklärt, wie die unterschiedliche Vererbung funktioniert.
© Webdesign Essentials
Darstellung eines HTML Textes sowie dem visuellen Pendant. Dabei wird unten erklärt, wie die unterschiedliche Vererbung funktioniert.
4

Es gibt viele Selektoren

W3 School: Selektoren

Liste von HTML-Elementen

Liste von Pseudoklassen

Repetitive Designfreiheit

Die Kraft von CSS

Webseiten sind modular aufgebaut und repetieren ihre Layoutgefässe oft. Es dient der Konsistenz des Designs.

Somit wird ein CSS Rule-Set an diversen Orten wieder verwendet. Damit dies sauber funktioniert nutzt man die verschiedenen Selektoren, um die Zuweisung modular zu halten.

So werden viele z.B. Div-Elemente im HTML gesetzt, aber total unterschiedlich gestaltet, weil sie eine andere Klasse als Attribut haben.

Aber die Gestaltungsdeklarationen werden überall mitgegeben, wo diese Klasse gesetzt wurde.

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

© Webdesign Essentials
4

Selektoren Pakete

Baukasten System

Diese Selektoren können kombiniert werden und so ein extrem modulares und skalierbares Design System aufgebaut werden.

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.

Anatomie einer CSS Regel. Die Class ist der Selector und in den {} befindet sich die Deklaration von Property (Fähigkeit) und Value (Wert).
© Webdesign Essentials
Anatomie einer CSS Regel. Die Class ist der Selector und in den {} befindet sich die Deklaration von Property (Fähigkeit) und Value (Wert).
4

Die elementarste Gestaltungsregel für HTML und CSS: Cascading

Einem Wasserfall (Kaskade) gleich, werden Gestaltungsdeklarationen gemäss der Verschachtelung des HTML sowie des CSS vererbt. Daher heisst es auch CSS.

Verschachteln

Einzüge im Code

Einzelne HTML-Elemente werden zu Komponenten von Modulen verschachtelt. Diese Verschachtelung wird auch mit Parent- und Child-Element bezeichnet und steht in einer hierarchischen Abhängigkeit.

Das heisst auch, HTML-Elemente können unendlich oft ineinander verschachtelt werden.

Um die Verschachtelung sowie Abhängigkeiten von Elementen während des Programmierens rascher zu erfassen, werden diese Verschachtelungen im Text jeweils eingerückt.

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.

Verschachtelter HTML-Code neben der visuellen Darstellung des gleichen um die Verschachtelung verständlich zu erklären.
© Webdesign Essentials
Verschachtelter HTML-Code neben der visuellen Darstellung des gleichen um die Verschachtelung verständlich zu erklären.
5

Rückblende

Anatomie einer Webseite von den Atomen zu dem Organen.

HTML: Semantic Elements: Definiere deine Divs

Kaskade & Vererbung: Einführung

Vererbung

Vielseitig anwendbar

Das Verschachteln im HTML baut ein Parent-Child Prinzip auf. Eltern haben Kinder und Kindeskinder. Soweit klar.

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.

asd
© Webdesign Essentials
asd
6

Modularität der Elemente

Design Relevant

Die Kombination dieser Abhängigkeiten lässt uns ein schönes Design-System zusammenstellen, welches sich auf alle Gegebenheiten anpassen kann.

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

Die ersten paar Zeilen HTML Code. Html, Head, Body mit eine H1 und P Tag. Verschachtelt strukturiert.
Die ersten Zeilen HTML-Code.
Die ersten paar Zeilen HTML Code. Html, Head, Body mit eine H1 und P Tag. Verschachtelt strukturiert.
7

asd

Richtig eingesetzt, vereinfacht es die Design-Spezifikation.

Auch wenn, Gestalter*innen den Code nicht schreiben. Die Modularität bleibt und sie zu verstehen hilft das Design System besser aufzubauen.

Design Tokens

MOdularität als Waffe

Design Token sind die kleinsten visuellen Einheiten, die ein modulares Design System aufbauen.

Hier, als Abschluss zur HTML & CSS Einführung für Designer*innen erwähne ich sie, weil durch die Vererbungslogik und die Verschachtelung uns ein Mittel zur Vereinfachung der Spezifikation vorliegt.

Es reicht, wenn ich 1x schreibe: Grundsätzlich sind alle Schriften der Webseite in der Schriftfamilie «Work-Sans», schwarz und linksbündig gehalten.

Dieser Grundsatz kann z.B. ins CSS des Body-Elementes geschrieben werden und vererbt sich auf alle Dinge der Seite.

Zuerst definiere ich die Norm und danach nur noch die Abweichung davon.

10
Ab ins nächste Kapitel

Variable Gestaltung

Es ist essenziell, dass wir Gestalter*innen die variable Logik des Zusammenspiels von HTML und CSS verstehen und nutzen.

Wie wir nun ein Layout aufbauen können ist im nächsten Kapitel beschrieben.

Design Fundamentals

Eine Reise durch eine sich stetig veränderbare Welt. Unzählige Hürden gilt es zu meistern. Die stetigen Veränderungen betreffen nicht nur die technischen Voraussetzungen, sondern der allgemeine Umgang mit Inhalt und Inhaltskuration. Die Veränderung als Ausgangslage für die Gestaltung ist eine komplexe Angelegenheit. Tauchen wir ein.

Scroll Snap
On
Off