HTML & CSS
HTML wurde 1991 von Tim Berners-Lee entwickelt, um Webseiten im Internet zu strukturieren. CSS wurde 1996 eingeführt, um Layout und Design von Webseiten unabhängig vom Inhalt zu gestalten. Seitdem bilden HTML und CSS die Grundlage des modernen Webs und haben sich kontinuierlich weiterentwickelt, um neue Features und Designmöglichkeiten zu bieten.
Mit HTML & CSS lassen sich Inhalte semantisch strukturieren, multimediale Elemente einbinden, Formulare erstellen und interaktive Webseiten gestalten. Dieses Kapitel zeigt praktisch alle wichtigen Features und Techniken, die Entwickler heute verwenden können.
Text & Semantik
Stark, Kursiv, Unterstrichen,
Durchgestrichen
,
Markiert
Abkürzungen: HTML, CSS
Definition: Viewport - Der sichtbare Bereich einer Webseite.
Blockquote Beispiel: "Dies ist ein hervorgehobenes Zitat."
— HTML Spezifikation (W3C)
Inline-Zitat mit <q>: Kurze, inline gesetzte
Zitate
.
Inline Code: console.log("Hello World")
Tastatur: Ctrl + C, Variablen: x = 10
Typografie & Ausrichtung
Kleiner Text (Schriftgröße)
Großer Text in anderer Schriftart
Text in anderer Farbe
Links bündig ausgerichteter Text
Zentriert ausgerichteter Text
Rechts bündig ausgerichteter Text
Zitate
q – Zitate im Fließtext
Mit Quellenangabe per cite-Attribut:
stieg
[…] die Einwohnerzahl Deutschlands im Vergleich zum Vorjahr um 92 000 Personen (+ 0,1 %)
auf
mehr als 81,8 Millionen.
Sprachabhängige Anführungszeichen
Martin Luther King said: I have a dream!
Martin Luther King sagte: Ich habe einen Traum!
Anführungszeichen mit CSS quotes festlegen
Dies ist ein Zitat.
Dies ist ein
Zitat
innerhalb eines Zitats.
blockquote
Klarheit ist, wenn man so will, nur die anschaulichere Variante der Wahrheit.— Brigitte Beispiel
Blockzitat mit Zierelementen (SVG in Pseudoelementen)
Die Krähen behaupten, eine einzige Krähe könne den Himmel zerstören; das ist zweifellos,
beweist aber nichts gegen den Himmel, denn Himmel bedeutet eben: Unmöglichkeit von Krähen.
— Franz Kafka
Hängende Interpunktion
Fülltext
Zitat
Autor
Fülltext
Tooltips mit title
Einfacher Tooltip mit title
Demo: Überschrift mit Tooltip
Text Abk. Text.
Begriff
Mehr dazu im
SELFHTML‑Wiki
Elemente für Tooltips
Abkürzungen mit abbr
Text Abk. Text.
IPCC
Definitionen mit dfn
Definition
… Definition … Sprung
- WWW
- Beschreibung
Barrierefreiheit: ARIA‑Tooltip (Markup‑Beispiel)
Listen & Tabellen
Ungeordnete Listen
- Hauptpunkt A
- Unterpunkt A1
- Unterpunkt A2
- Hauptpunkt B
Geordnete Listen
- Schritt 1
- Schritt 2
- Unterpunkt a
- Unterpunkt b
- Schritt 3
Definitionsliste
- HTML
- HyperText Markup Language – Grundlage des Webs.
- CSS
- Cascading Style Sheets – für Layout und Design.
- JS
- JavaScript – für Interaktivität und dynamische Inhalte.
Einfache Tabelle
| Name | Alter | Position |
|---|---|---|
| Anna | 25 | Entwicklerin |
| Max | 30 | Designer |
| Lisa | 28 | Projektmanagerin |
| Ende der Tabelle | ||
Gestreifte Tabelle
| # | Produkt | Preis |
|---|---|---|
| 1 | Buch | 15€ |
| 2 | Tasse | 7€ |
| 3 | T-Shirt | 20€ |
Tabelle mit verbundenen Zellen
| Kategorie | Produkt | Menge | Preis |
|---|---|---|---|
| Getränke | Kaffee | 2 | 6€ |
| Tee | 1 | 3€ | |
| Snacks | Gemischte Kekse (Pauschalpreis) | ||
Bilder & Medien
Anordnung von Grafiken
Dieser Absatz umfließt zwei Bilder, die links und rechts angeordnet sind. So lassen sich Texte und Bilder abwechslungsreich kombinieren und layouten.
Formulare & Eingaben
CSS-Demos
Flexbox
Grid
Animation & Transformation
Pseudo-Elemente
Text mit Sternen
Farben & Hintergründe
Interaktive Details
Mehr Infos anzeigen
Hier verbirgt sich zusätzlicher Inhalt, der nur bei Klick sichtbar wird.
Hyperlinks & Downloads
- Externe Seite: MDN Web Docs
- Interner Link (zu dieser Seite): Zum Formularbereich springen
- E-Mail mit Zusatzangaben: E-Mail schreiben
- Bild als Link:
- Datei zum Download: README herunterladen oder Lizenz herunterladen