HTML-Kurzreferenz

Diese kompakte Übersicht über die Seitenbeschreibungssprache HTML und die Formatierungssprache CSS entstand in den Jahren 2004 und 2005 als Arbeitsmittel für die Lehrveranstaltung „Internet und Webseiten-Gestaltung“ an der Hochschule in Görlitz. Obwohl hier aufgrund seiner hohen Fehlertolleranz nach wie vor HTML 4 zum Einsatz kommt, steht die Trennung von inhaltlichen, strukturierenden und gestaltenden Sprachelementen im Sinne des CSS-2-Standards im Vordergrund. Physische Formatierungen im HTML-Quelltext werden – so weit sinnvoll und in einem Grundkurs praktikabel – vermieden.

Letzte Änderung: 2011-10-24, Thiemo Mättig

Inhalt

Die kursiv dargestellten Teile können angepasst oder den Anforderungen entsprechend mit weiteren Elementen gefüllt werden. Zeilenumbrüche, Leerräume und Einrückungen dienen ausschließlich der besseren Lesbarkeit der Quelltexte und haben keine darstellende Wirkung. Eine vollständige Referenz ist im Standardwerk SELFHTML (de.selfhtml.org) zu finden.

Grundgerüst einer HTML-Datei

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Dokumententitel</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
  </head>
  <body>
    Inhalt der Datei
  </body>
</html>
Zwischen <title> und </title> einen aussagekräftigen Dokumententitel notieren. Den gesamten sichtbaren Inhalt zwischen <body> und </body> notieren. Zum Beispiel als persoenliches.html speichern. Bei allen Dateinamen (auch beim Dateinamen des Stylesheets) auf korrekte Groß/Kleinschreibung achten und Leer- und Sonderzeichen wenn möglich vermeiden.

Elemente zur Textstrukturierung

Überschriften
<h1>Überschrift 1. Ordnung</h1>
<h2>Überschrift 2. Ordnung</h2>
<h3>Überschrift 3. Ordnung</h3>
Textabsätze
<p>Absatz</p>

<p>nächster Absatz</p>
Zeilenumbrüche erzwingen
Text alte Zeile<br>
Text neue Zeile
Textauszeichnungen
<em>betont (emphatisch)</em>
<strong>stark betont</strong>
<code>Quelltext (Schreibmaschinenschrift)</code>
<sup>hochgestellt</sup>
<sub>tiefgestellt</sub>
Es existieren weitere Elementen zur Textauszeichnung, denen Sie vieleicht begegnen, z. B. <b>, <i> oder <font>. Dabei handelt es sich um physische Textauszeichnungen, die wir nach Möglichkeit nicht verwenden wollen. Die grafische Gestaltung erreichen wir statt dessen mit Stylesheets (CSS).
Aufzählungslisten
<ul>
  <li>Listeneintrag</li>
  <li>nächster Listeneintrag</li>
</ul>
Nummerierte Listen
<ol>
  <li>Listeneintrag</li>
  <li>nächster Listeneintrag</li>
</ol>
Merksatz: <ul> steht für unsortierte Listen, <ol> englisch für ordered, also sortierte Listen.
Definitionslisten (Glossarlisten)
<dl>
  <dt>zu definierender Ausdruck</dt>
  <dd>Definition des Ausdrucks</dd>
</dl>
Merksatz: <dl> steht für Definitions-Liste, <dt> für Definitions-Typ und <dd> für Definitionslisten-Definition.
Zitat-Block
<blockquote>Text</blockquote>
Trennlinie
Text davor
<hr>
Text danach
Seien Sie mit Trennlinien sparsam. Verwenden Sie statt dessen lieber die Stylesheet-Eigenschaften border-….
Allgemeines Block-Element
<div id="individualformat">
  verschiedene HTML-Elemente
</div>
Dieses Block-Element wird im Allgemeinen in Verbindung mit Stylesheet-Angaben verwendet, um z. B. die Strukturelemente einer Seite (Titel, Menü, Inhalt) zu gruppieren und gesondert gestalten zu können. Mit <span class="klasse"> steht auch ein allgemeines Inline-Element zur Verfügung.

Tabellen

Tabellenaufbau
<table>
  <tr>
    <th>Kopfzelle</th>
    <th>Kopfzelle</th>
  </tr>
  <tr>
    <td>Datenzelle</td>
    <td>Datenzelle</td>
  </tr>
</table>
Das Beispiel definiert eine Tabelle mit zwei Zeilen (<tr>) und zwei Spalten, wobei die erste Zeile Tabellenköpfe (<th>) und die zweite Tabellendaten (<td>) enthält. Kopf- und Datenzellen lassen sich beliebig mischen. Die Anzahl der Spalten je Zeile sollte übereinstimmen. Mittels colspan=… und rowspan=… lassen sich mehrere Zellen zu einer zusamenfassen (de.selfhtml.org/html/tabellen/zellen_verbinden.htm).
Zellen horizontal ausrichten
<th align="right">Kopfzelle</th>
<td align="right">Datenzelle</td>
Mögliche Werte zur Ausrichtung sind "left" (linksbündig), "center" (zentriert) oder "right" (rechtsbündig).
Tabellen mit CSS gestalten
td
{
  border-top: 1px solid gray;
}
Allen Datenzellen wird eine schmale graue Rahmenlinie zugewiesen.

Verweise (Links)

Verweise definieren
<a href="http://www.hs-zigr.de/">Verweistext</a>
Das Verweisziel kann sein: Eine andere Datei des eigenen Projektes (z. B. "dateiname.html"), eine Datei in einem anderen Verzeichnis (z. B. "ordner/dateiname.html"), eine Datei im übergeordneten Verzeichnis (z. B. "../dateiname.html") oder eine vollständige Internet-Adresse (z. B. "http://www.hs-zigr.de/wirtschaft"). Achtung: Keine umgekehrten Schrägstriche (\) verwenden und das http:// nicht vergessen.
Zielfenster für Verweise
<a href="http://www.hs-zigr.de/" target="_blank">Verweistext</a>
Das Zielfenster kann sein: "_blank", um den Verweis in einem neuen Fenster zu öffnen, der Name eines definierten Framefensters oder "_top" für das übergeordnete Framefenster (siehe Frames).
E-Mail-Verweise
<a href="mailto:name@domain.xy">Verweistext</a>
<a href="mailto:name@domain.xy?subject=Betreff">Verweistext</a>
<a href="mailto:name@domain.xy?subject=Betreff&body=Text">Verweistext</a>
Auf Wunsch können Betreffzeile (subject=…) und Text (body=…) vorbelegt werden. Beachten Sie, dass derart öffentlich zugängliche E-Mail-Adressen vor Mißbrauch (Werbemüll) ungeschützt sind!

Grafiken

Grafiken einbinden
<img src="dateiname.jpg">
Für die Quelle (src=…) gelten die selben Regeln wie für Verweisziele. Erlaubte Dateitypen sind .jpg oder .jpeg, .png sowie .gif. Groß/Kleinschreibung ist zu beachten.
Breite und Höhe der Grafik
<img src="dateiname.jpg" width="80" height="20">
Breite (width=…) und Höhe (height=…) sind optionale Angaben, die dem Webbrowser helfen, Raum für die Grafik zu reservieren, bevor diese fertig geladen ist.
Alternativtext für Grafiken
<img src="dateiname.jpg" alt="Alternativtext">
Alternativer Text, der anstelle der Grafik zu sehen sein soll, falls diese nicht angezeigt werden kann.
Beschreibung für Grafiken
<img src="dateiname.jpg" title="Beschreibung">
Zusätzlicher Text, der in Form eines kleinen gelben Tooltip-Fensters angezeigt werden soll, wenn der Mauscursor auf die Grafik bewegt wird.
Grafiken beschriften (und zentrieren)
<div class="illustration">
  <img src="dateiname.jpg"><br>
  Beschriftung
</div>
.illustration
{
  text-align: center;
}
Das Inline-Element <img> und die Beschriftung werden in einem allgemeinen Blockelement (<div>) zusammengefasst und einer Klasse zugeordnet (in diesem Fall illustration). Dieser neu geschaffene Block wird anschließend zentriert ausgerichtet.
Grafiken ausrichten (Text um Grafik fließen lassen)
<img src="dateiname.jpg" class="foto">
.foto
{
  clear: both;
  float: right;
  margin: 2ex;
  border: 1px solid black;
  padding: 4px;
  background-color: white;
}
Die Eigenschaft float richtet das Element (in diesem Fall alle Grafiken der Klasse foto) rechts (oder links) aus und lässt alle nachfolgenden Elemente um dieses herum fließen. Zusätzlich erhält die Grafik einen 2 Buchstaben breiten Außenabstand (Abstand vom umfließenden Text bis zur Rahmenlinie), eine dünne Rahmenlinie sowie einen 4 Bildpunkte (Pixel) breiten, weiß gefüllten Innenabstand (Abstand von der Rahmenlinie bis zur Grafik). Mit clear wird eine evtl. vorher schon gesetzte float-Eigenschaft gezielt aufgebrochen (sonst kann es passieren, dass mehrere Grafiken nebeneinander stehen).

Formulare

Grundgerüst eines E-Mail-Formulars
<form action="mailto:name@domain.xy" method="post" enctype="text/plain">
  Ihre E-Mail-Adresse: <input type="text" name="E-Mail">
  Ihre Nachricht:      <textarea name="Nachricht"></textarea>
                       <input type="submit" value="E-Mail senden">
</form>
Die Namen (name=…) dürfen keine Leerzeichen oder Umlaute enthalten. Beachten Sie, dass genau wie bei E-Mail-Verweisen derart öffentlich zugängliche E-Mail-Adressen vor Mißbrauch (Werbemüll) ungeschützt sind!
Einzeilige Eingabefelder
<input type="text" name="Name" size="50">
Für Länge (size=…) die Anzeigebreite des Feldes in Zeichen notieren (optional).
Mehrzeilige Eingabefelder
<textarea name="Name" cols="10" rows="50"></textarea>
Für Spalten (cols=…) die Anzeigebreite des Feldes in Zeichen notieren, für Zeilen (rows=…) die Anzeigehöhe (beides optional).
Eingabefelder mit Textvorbelegung
<input type="text" name="Name" value="Textvorbelegung">
<textarea name="Name">Textvorbelegung</textarea>
Auswahlliste
<select name="Name" size="5">
  <option>Eintrag</option>
  <option>anderer Eintrag</option>
</select>
Für Höhe (size=…) die Anzeigehöhe des Feldes in Zeilen notieren (optional).
Optionsschaltflächen (Radiobuttons)
<input type="radio" name="Name" value="Absendewert">Text
<input type="radio" name="Name" value="anderer Absendewert">anderer Text
Die Namen der zu einer Gruppe gehörenden Felder müssen identisch sein. Der Absendewert (value=…) erscheint später in der gesendeten E-Mail. Die sichtbare Beschriftung des Feldes ist zusätzlich hinter dem Feld zu notieren.
Kontrollkästchen (Checkboxen)
<input type="checkbox" name="Name" value="Absendewert">Text
Der Absendewert (value=…) erscheint später in der gesendeten E-Mail. Die sichtbare Beschriftung des Feldes ist zusätzlich hinter dem Feld zu notieren.
Schaltfläche zum Absenden
<input type="submit" value="Beschriftung">

Frames

Framesets und Frames
<frameset cols="200,*">
  <frame src="dateiname.html" name="Name">
  <frame src="anderer-dateiname.html" name="anderer Name">
</frameset>
Anzeigefenster in Spalten (cols=…) oder Reihen (rows=…) aufteilen. Die Breiten bzw. Höhen der Teile in Bildpunkten oder Prozent angeben, durch Komma getrennt, z. B. "250,*" oder "20%,80%". Prozentangaben müssen zusammen 100% ergeben. Bei Bildpunktangaben muss eine der Framegrößen mit dem Platzhalter * (Rest) angegeben sein. Frames dürfen beliebig verschachtelt sein.

Gestaltung mit Stylesheets (CSS)

Stylesheet-Grundgerüst (Beispiel)
body
{
  color: blue;
  background-color: yellow;
}
h1
{
  color: red;
  font-family: cursive;
}
a
{
  color: rgb(0, 50%, 50%);
}
Zeilenumbrüche und Leerräume dienen allein der besseren Lesbarkeit und haben sonst keine Wirkung. Als gesonderte Datei, z. B. stylesheet.css speichern. Darauf achten, dass der Dateiname der Stylesheet-Datei mit dem Verweis in der HTML-Datei übereinstimmt (Groß/Kleinschreibung beachten).
Selektion von Elementen
body
{
  background-color: red;
}
Ein Selektor ohne Sonderzeichen bezieht sich auf alle HTML-Elemente mit dem selben Namen (in diesem Fall <body>) sowie alle darin enthaltenen Elemente (kaskadierend). 
.klasse
{
  background-color: red;
}
Ein Selektor mit Punkt bezieht sich auf alle HTML-Elemente, denen mit z. B. <p class="klasse"> dieser Klassenname zugewiesen wurde. Der Name ist frei wählbar (Umlaute, Leer- und Sonderzeichen sind jedoch nicht erlaubt). Eine Klasse kann in der HTML-Datei beliebig oft verwendet werden. 
#individualformat
{
  background-color: red;
}
Ein Selektor mit Doppelkreuz bezieht sich auf das HTML-Element, dem mit z. B. <p id="individualformat"> genau dieses Individualformat zugewiesen wurde. Der Name ist frei wählbar (keine Sonderzeichen). Ein Individualformat darf in der HTML-Datei nur ein einziges Mal auftauchen. 
h2 em
{
  color: green;
}
.klasse a
{
  background-color: red;
}
Die Aneinanderreihung mehrerer Selektoren bezieht sich auf HTML-Elemente, auf die alle Regeln zutreffen. Hier: Nur Hervorhebungen, die sich in Überschriften 2. Ordnung befinden (z. B. <h2>Grün, <em>die</em> Modefarbe<h2>) und nur Links, die sich innerhalb von Elementen der Klasse klasse befinden (z. B. <div class="klasse"><a href="seite2.html">Seite 2</a></div>).
Vorder- und Hintergrund-Farben
color: blue;
background-color: rgb(0, 50%, 50%);
Vorder- (color: …) und Hintergrundfarben (background-color: …) werden durch Farbnamen oder durch Mischung von Rot-, Grün- und Blauanteilen bestimmt. Mögliche Farbnamen sind z. B. black, white, red, green, yellow, blue, purple, silver, gray usw. Eine vollständige Listen finden Sie in SELFHTML (de.selfhtml.org/diverses/farbpaletten.htm).
Rot/Grün/Blau-Mischungen sind prozentual (z. B. rgb(100%, 100%, 100%)), dezimal (z. B. rgb(255, 255, 255)) oder hexadezimal möglich (z. B. #FFFFFF). Beim Experimentieren hilft der Farbauswähler (de.selfhtml.org/helferlein/farben.htm).
Hintergrundbilder
background-image: url(dateiname.jpg);
Kleine Bilder wiederholen sich und bedecken dann als sogenannte "Kachel" den gesamten Hintergrund des Elementes, dem das Bild zugewiesen wurde. 
background-image: url(dateiname.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
background-color: rgb(8%, 20%, 46%);
Das Hintergrundbild kann u. a. auch ohne Wiederholung (no-repeat) und z. B. an der unteren rechten Ecke des Elementes festgenagelt (fixed) dargestellt werden. Die Farbe dient dann der Füllung der freibleibenden Bereiche. Details siehe SELFHTML (de.selfhtml.org/css/eigenschaften/hintergrund.htm).
Schriftarten
font-family: cursive;
Mögliche generische Schriftfamilien sind oder jeder Schriftarten-Name. Empfehlenswert sind beispielsweise Verdana oder Georgia.
Schriftgrößen
font-size: 12pt;
Schriftgrößen können u. a. in Punkten (z. B. 12pt, das entspricht den von Word gewohnten Größenangaben), in Bildpunkten (Pixel, z. B. 30px) oder in Prozent der Standardschriftgröße angegeben werden (z. B. 200%). Empfehlenswert sind auch die relativen Werte smaller und larger.
Schriftgewicht (fett)
font-weight: bold;
Schriftstil (kursiv)
font-style: italic;
Mit dem Wert none kann kursive Schrift wieder gerade gestellt werden. Das ist vor allem bei der Gestaltung von Hervorhebungen mit <em> nützlich.
Textdekoration (unterstrichen)
text-decoration: none;
Mögliche Dekorationen sind none (nicht unterstrichen, nützlich für Links), underline (unterstrichen, Verwechslungsgefahr mit Links), overline (überstrichen) und line-through (durchgestrichen).
Horizontale Ausrichtung
text-align: center;
Mögliche Ausrichtungen sind left (linksbündig), center (zentriert), right (rechtsbündig) oder justify (Blocksatz). Entgegen ihrem Namen darf diese Eigenschaft auf jedes beliebige Element angewandt werden, nicht nur auf Text.
Rahmenlinien
border-width: 1px;
border-style: solid;
border-color: red;
Der Rahmentyp kann u. a. solid (durchgezogen), dashed (gestrichelt) oder dotted (gepunktet) sein. Mit der Kurzform border: 1px solid red; lassen sich alle drei Eigenschaften zu einer zusammenfassen. Jede der Eigenschaften kann auch als border-top-…, border-right-…, border-bottom-… oder border-left-… für nur je eine der vier Seiten festgelegt werden.
Außenrand (Abstand zu anderen Elementen)
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
Die vier Angaben lassen sich zur Kurzform margin: 10px; zusammenfassen.
Innenabstand (Polsterung)
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
Die Kurzform padding: 10px; legt alle vier Innenabstände gleichzeitig fest. Der Unterschied zwischen margin-… und padding-… wird insbesondere im Zusammenhang mit border-… deutlich.
Größe eines Elementes
width: 250px;
height: 50px;
Anzeigeart eines Elementes
display: block;
Die Anzeigeart block positioniert das Element in einer eigenen Zeile. Mehrere aufeinanderfolgende Block-Elemente werden untereinander dargestellt. Die Anzeigeart inline positioniert das Element im laufenden Textfluß. Mehrere aufeinanderfolgende Inline-Elemente werden nebeneinander dargestellt. Relevant ist diese Eigenschaft vor allem in Zusammenhang mit Elementen wie z. B. <div id="individualformat">.
Textumfluß um ein Element
float: right;
Positioniert das Elemente links (left) oder rechts (right) und lässt alle nachfolgenden Elemente um dieses herumfließen. Diese Eigenschaft wird normalerweise nur auf Elemente wie z. B. <div id="individualformat"> angewandt.
Spezialeffekte für Links
a:link
{
  color: red;
}
a:visited
{
  color: brown;
}
a:hover
{
  background-color: yellow;
}
Noch nicht besuchte Links (:link) und besuchte Links (:visited) werden unterschiedlich angezeigt, um dem Besucher die Orientierung zu erleichtern. Das :hover-Format gilt für Links, die mit der Maus überfahren werden.