Spickzettel HTML

HTML (HyperText Markup Language) ist keine Programmiersprache.
Es ist eine Auszeichnungssprache, die den Inhalt der Webseite nach seiner Bedeutung strukturiert.

Hinweis: Aktiviere im Druckdialog die Option „Hintergrundgrafiken“, damit Flächen farbig erscheinen. Deaktiviere „Kopf- und Fußzeilen“, um den verfügbaren Platz nicht einzuschränken. Wähle für Ränder die Einstellung „Standard“.

Grundgerüst als Kopiervorlage

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width, 
                      initial-scale=1">
    <title>Seitentitel</title>
  </head>
  <body>
    <!-- Sichtbarer Inhalt -->
  </body>
</html>

<!doctype html>: Aktiviert den standardkonformen HTML-Modus.
lang="de": Sprachangabe, wichtig für Vorlesen und Übersetzung
<head>: unsichtbarer Kopf
<title>: Seitenname
<body>: Sichtbarer Dokumentinhalt

Auszeichnung des Inhalts

<body>
  <h1>Überschrift</h1>
  <p>Dies ist ein Absatz.</p>
  <h2>Wunschliste</h2>
  <ol>
    <li>Erfolg</li>
    <li>Glücklichsein</li>
    <li>Gesundheit</li>
  </ol>
</body>

HTML zeichnet den Inhalt nach seiner Bedeutung aus. Elemente werden durch Tags in spitzen Klammern < … > ausgezeichnet:

h1 heading1 Überschrift,
nur 1x verwenden! h2, h3 heading2, 3 Überschriften 2./3. Ordnung
(h1-h6, Reihenfolge einhalten) p paragraph Absatz ol ordered list geordnete Liste ul unordered list Liste mit Aufzählungszeichen li list item Listeneintrag, Kind von ol, ul

Hypertext und Multimedia

<p id="intro">
  <a href="preise.html">
    Unsere Preise
  </a>
</p>
<img src="dsc_001.jpg"
     alt="Bildbeschreibung"
     width="900"
     height="600">

a anchor Link zu einem Dokument href hyper reference URL des Dokuments (Webseite, Bild, Video, etc) img image Referenz auf ein Bild, src source URL des Bildes alt alternative text Alternativtext (Pflicht!) width Breitenangabe

Elementname, Attributname und Attributwert

<element attribut="wert" boolean>
  Inhalt
</element>

Globale Attribute: id bezeichnet ein eindeutiges Element, class eine wiederverwendbare Gruppe, hidden blendet Inhalte aus und data-* speichert anwendungsspezifische Daten.

HTML-Dateien bestehen aus Elementen. Viele Elemente haben Start-Tag, Inhalt und End-Tag.

Der Inhalt wird mit HTML-Elementen ausgezeichnet. Diese werden durch Tags in spitzen Klammern markiert.

Im Start-Tag können Attribute stehen. Sie ergänzen Angaben wie Ziel, Quelle oder Beschreibung.

HTML beschreibt die Bedeutung des Inhalts; das Aussehen übernimmt CSS.

Spickzettel CSS

CSS (Cascading Style Sheets) ist eine Formatierungssprache für HTML- und SVG-Dokumente. HTML zeichnet die Struktur aus – CSS bestimmt das Aussehen.

Selektoren und ihre Syntax

Selektor {
  Eigenschaft: Wert;
}

Selektor: Elemente, für die Stilinformationen gelten sollen
Eigenschaft: Bezeichnet den gestalteten Aspekt.
Wert: Dies ist der eigentliche Stil, der auf das/die Element(e) angewendet werden soll

*{…}: alle Elemente
img: Elementname
.classname: Name einer Klasse (mehrfach einsetzbar)
#idname: Name einer id (einmalig einsetzbar)
p img: alle img innerhalb von p
p > img: alle Bilder, die direktes Kind von p sind
[attr=wert]: Attributselektor

Einbindung

<element style="Eigenschaft: Wert;"> 
<style> 
  Selektor { 
    Eigenschaft1: Wert;
    Eigenschaft2: Wert;
  }
</style>
<link rel="stylesheet" href="style.css">

style-Attribut: Inline-Style, gilt nur für dieses HTML-Element
style-Element: Gilt für das gesamte HTML-Dokument.
Externe Stylesheet-Datei: Kann für viele Webseiten verwendet werden.

Häufige Eigenschaften

Eigenschaft	Aufgabe	Typische Werte
`width`	Breite	`20rem`, `50%`, `auto`
`height`	Höhe	`10rem`, `100vh`, `auto`
`padding`	Innenabstand	`1rem`, `.5rem 1rem`
`margin`	Außenabstand	`1rem`, `auto`
`border`	Rahmen	`thin solid currentColor`
`color`	Textfarbe	`black`, `#287a9c`
`background-color`	Hintergrundfarbe	`white`, `gold`
`font-family`	Schriftfamilie	`system-ui, sans-serif`
`font-size`	Schriftgröße	`1rem`, `clamp(...)`
`font-weight`	Schriftstärke	`normal`, `bold`
`line-height`	Zeilenhöhe	`1.5`
`text-align`	Inline-Ausrichtung	`start`, `center`
`text-decoration`	Textverzierung	`underline`, `none`