HTML und CSS Grundlagen

Jede HTML Datei folgt demselben Grundaufbau, bevor überhaupt sichtbarer Inhalt kommt.

<!DOCTYPE html>Sagt dem Browser, dass eine aktuelle HTML Version verwendet wird

<html>Umschließt die komplette Seite

<head>Enthält unsichtbare Informationen wie Titel und eingebundene Dateien

<body>Enthält den sichtbaren Inhalt der Seite

HTML beschreibt die Struktur einer Seite mit sogenannten Tags, meist paarweise als Start und Ende.

<h1> bis <h6>Überschriften, h1 die wichtigste, h6 die unwichtigste

<p>Ein Absatz Text

<a href="...">Ein Link zu einer anderen Seite

<img src="...">Bindet ein Bild ein, hat kein eigenes Ende Tag

<div>Ein allgemeiner Container ohne eigene Bedeutung, nur zum Gruppieren

<ul> und <li>Eine Liste und ihre einzelnen Punkte

Zusätzliche Informationen innerhalb eines Start Tags, die das Element genauer beschreiben.

class="..."Vergibt einen Namen, über den CSS oder JavaScript das Element gezielt ansprechen kann

id="..."Wie class, aber einmalig, darf pro Seite nur einmal vorkommen

src="..."Gibt bei Bildern oder Skripten den Pfad zur Datei an

alt="..."Alternativtext für ein Bild, wichtig für Barrierefreiheit

CSS bestimmt, wie HTML aussieht, nicht was es bedeutet.

<link rel="stylesheet" href="style.css">Bindet eine externe CSS Datei im head ein, der übliche Weg

style="..."CSS direkt am Element, nur für schnelle Tests geeignet

<style>...</style>CSS direkt im head der Seite, ohne externe Datei

Selektoren legen fest, welche Elemente eine CSS Regel betrifft.

h1 { }Betrifft alle h1 Elemente der Seite

.karte { }Betrifft alle Elemente mit class="karte"

#kopfbereich { }Betrifft das eine Element mit id="kopfbereich"

a:hover { }Betrifft einen Link nur, während die Maus darüber schwebt

Innerhalb der geschweiften Klammern stehen die eigentlichen Gestaltungsregeln.

colorTextfarbe

backgroundHintergrundfarbe oder Hintergrundbild

font-sizeSchriftgröße

marginAbstand außerhalb eines Elements

paddingAbstand innerhalb eines Elements, zwischen Rand und Inhalt

display: flexOrdnet Kindelemente nebeneinander an, Grundlage moderner Layouts

Jedes HTML Element wird von CSS als rechteckige Box behandelt, von innen nach außen aus vier Schichten.

ContentDer eigentliche Inhalt, zum Beispiel der Text

PaddingInnenabstand zwischen Inhalt und Rand

BorderDer Rand selbst

MarginAußenabstand zu anderen Elementen