Tag Sechs

HTML Layout Elemente

Mit dem DIV Element haben wir bereits das meist verwendete Container HTML Tag kennengelernt, in welchem üblicherweise Inhalte verschachtelt sind. Nun lernen wir weitere HTML Tags kennen, welche uns helfen, das Layout einer Website besser zu beschreiben. Dies führt nebst einer erhöhten Übersicht beim entwicklen einer Website vor allem auch zu einer erhöhten Accessibility.

<header>

Das <header>-Element stellt einen Container für einleitende Inhalte dar. In der Regel findet man das <header>-Element im Kopfbereich einer Website, wo sich Logo und Website Titel befindet. Ein Header Element kann jedoch auch einen Teilbereich einer Website einleiten. Zudem können auf einer Seite mehrere Header existieren.

<main>

Der <main>-Tag gibt den Hauptinhalt eines Dokuments an. Der Inhalt innerhalb des <main>-Elements sollte für das Dokument einzigartig sein. Er sollte keine Inhalte enthalten, die sich in verschiedenen Dokumenten wiederholen, wie z. B. Seitenleisten, Navigationslinks, Copyright-Informationen, Site-Logos und Suchformulare.

Wichtig: Es darf nicht mehr als ein <main>-Element in einem Dokument geben.

<footer>

Der <footer>-Tag definiert eine Fußzeile für eine Website oder eines Abschnitts. Es kann mehrere <footer>-Elemente auf einer Seite geben.

<nav>

Das Nav Tag umschliesse eine Reihe von Links und weist sie als Navigation einer Website aus.

Farbdefinitionen

Bis jetzt haben wir immer mit Farbnamen wie "black", "blue" oder auch "LightGoldenrodYellow" gearbeitet. Insgesamt gibt es jedoch nur 140 sogenannte HTML Color Names, mit jenen praktisch nie ein existierendes Design oder Corporate Identity abgebildet werden kann. Für spezifischere Farb-Definitionen steht uns eine Mehrzahl an folgenden Farbdefinitionen zur Verfügung.

RGB Farben

Digitale Bildschirme stellen Farben üblicherweise im RGB Farbraum dar. Ein RGB-Farbraum ist ein additiver Farbraum, der Farbwahrnehmungen durch das additive Mischen dreier Grundfarben (Rot, Grün und Blau) nachbildet.

Jede Grundfarbe wird dabei anhand einer Intensität zwischen 0 und 255 definiert und die entsprechende Mischung der Grundfarben ermöglicht uns die Darstellung von 16.7 Mio Farben.

Im CSS definieren wir RGB Farben via das CSS Value rgb(red, green, blue).

            .link {
	color: rgb(95, 143, 240);
}
        

Darüber hinaus können wir die Transparenz eines Values mit der Funktion rgba(red, green, blue, alpha) steuern.

            /* RGB Farben inklusive Alpha Channel (Transparenz) */
.link {
	color: rgba(95, 143, 240, 0.5);
}
        

Hexadezimale Farben (HEX)

Mit HEX Codes können RGB Werte anhand des hexadezimalen Zahlensystem angegeben werden.

Eine hexadezimale Farbe wird definiert als: #RRGGBB. RR (Rot), GG (Grün) und BB (Blau) sind dabei hexadezimale Ganzzahlen zwischen 00 und FF, die die Intensität der Farbe angeben.

            .link {
	color: #5f8ff0;
}
        

HSL Farben

In der modernen Webentwicklung kommt neben RGB immer mehr das HSL Verfahren zum Einsatz. HSL steht für Farbton, Sättigung und Helligkeit («hue, saturation, lightness») und basiert auf dem RGB-Farbkreis. Jede Farbe hat einen Winkel und einen Prozentwert für die Sättigungs- und Helligkeitswerte. HSL bietet sich vor allem dann an, wenn für ein Farbton mehrere Sättigungs- oder Helligkeitsstufen verwendet werden.

HSL-Farbwerte werden wie folgt angegeben: hsl(Farbton, Sättigung, Helligkeit).

            .link {
	color: hsl(220, 83%, 66%);
}

/* HSL inklusive Alpha Channel */
.link {
	color: hsla(220, 83%, 66%, 0.5);
}
        

Ein spannender Artikel mit weiterführenden Informationen lässt sich auf smashingmagazine.com finden.

Coding Challenge #3

Die dritte Challenge wartet auf dich! Lade nachfolgendes Figma File herunter und versuche, das darin enthaltene Design 1:1 nachzubauen.

Das Endprodukt findest du hier verlinkt.

Quellenangabe