HTML - Das Wichtigste in Kürze

Wie mache ich was?

• Text
• Listen
• Bilder
• Verweise
• Tabellen
• Cascading Style Sheets

Siehe zu Text in HTML auch Absatztypen und Textgestaltung in Selfhtml

I.1 Überschriften

Die Tags <H1>...</H1> bis <H6>...</H6> bewirken verschieden große Überschriften (am größten ist H1)

Entsprechendes Kapitel im HTML-Kurs: Überschriften

I.2 Normaler Text

Das Paragraphen-Tag <P>...</P> wird für "normalen" Text verwendet. Zwischen zwei Paragraphen wird von den meisten Browsern automatisch eine Leerzeile eingefügt.
Einen Absatz ohne Leerzeile (Zeilenumbruch) erhält man mit <BR> (break).
Paragraphen lassen sich rechts- oder linksbündig, zentriert oder mit Blocksatz formatieren:
<P ALIGN="right">: rechtsbündig
<P ALIGN="left">: linksbündig
<P ALIGN="center">: zentriert
<P ALIGN="justify">: Blocksatz

Entsprechendes Kapitel im HTML-Kurs: Text - Grundlagen

I.3 Weitere logische Textauszeichnungen

• <EM>...</EM>: hervorgehobener Text (je nach Browser kursiv oder fett)
• <STRONG>...</STRONG>: stark hervorgehobener Text
• <CODE>...</CODE>: Schreibmaschinenartige Schrift wie der Quelltext im Editor
• <CITE>...</CITE>: Zitat (erscheint z.B. kursiv, je nach Browser)
• <BLOCKQUOTE>...</BLOCKQUOTE>: Blockzitat; meistens auf beiden Seiten eingerückt
• <VAR>...</VAR>: für Variablen
• <ADDRESS>...</ADDRESS>: Addressinformation (z.B. kleiner und kursiv)

Entsprechendes Kapitel im HTML-Kurs: Textgestaltung

I.4 Trennlinien

Eine Trennlinie über die Breite des Browserfensters erhält man mit <HR> (horizontal rule)
Hier sind folgende Parameter möglich:

• <HR ALIGN="left/right/center">: Anordnung linksbündig/rechtsbündig/zentriert
  
• <HR COLOR="red/green/blue.../#XXXXXX">: Farbe, entweder direkt (auf englisch) angeben oder RGB-Wert einsetzen
  
• <HR SIZE="x">: Höhe bzw. Dicke der Linie (normalerweise in Pixeln)
  
• <HR WIDTH="x">: Breite der Linie in Prozent des Browserfensters oder in Pixeln
  
• <HR NOSHADE>: Schatten der Linie weglassen

Entsprechendes Kapitel im HTML-Kurs: Trennlinien

Siehe zu Listen auch Absatztypen und Textgestaltung in Selfhtml

II.1 Numerierte Listen

Numerierte Listen werden mit <OL> (für "ordered list") begonnen und mit </OL> beendet, die einzelnen aufgezählten Elemente beginnen jeweils mit <LI> und sollten mit </LI> beendet werden. Die Numerierung ("normale" arabische Zahlen) wird vom Browser ergänzt.

Folgende Modifizierungen sind möglich:

1. <OL TYPE="a">: Numerierung in Kleinbuchstaben
   
2. <OL TYPE="A">: Numerierung in Großbuchstaben
   
3. <OL TYPE="i">: Numerierung in kleinen römischen Zahlen
   
4. <OL TYPE="I">: Numerierung in großen römischen Zahlen
   
5. <OL START="x">: Numerierung beginnend mit "x"

Auch bei den Listenelementen <LI> gibt es Modifizierungen:

• <LI TYPE="a/A/i/I">: Numerierung des einzelnen Elements in Kleinbuchstaben usw.
  
• <LI VALUE="x">: Festlegung der Zahl/des Buchstabens, den das Element haben soll und von dem aus weiternumeriert werden soll
  

Entsprechendes Kapitel im HTML-Kurs: Nummerierte Listen

II.2 Aufzählungslisten

Der einzige Unterschied zu den numerierten Listen besteht darin, dass Aufzählungslisten ("unordered lists") mit dem Tag <UL> begonnen und mit </UL> beendet werden. Die einzelnen Listeneinträge werden wie gehabt mit <LI> gekennzeichnet.

Bei Aufzählungslisten sind folgende Parameter möglich:

• <UL TYPE="disc">: ausgefüllter Punkt als Aufzählungszeichen
  
• <UL TYPE="square">: ausgefülltes oder leeres Quadrat als Aufzählungszeichen
  
• <UL TYPE="circle">: Kringel (leerer Punkt) als Aufzählungszeichen
  

Diese Modifizierung funktioniert auch bei einzelnen Listenelementen:
<LI TYPE="disc/square/circle"> bewirkt bestimmte Aufzählungszeichen bei einem Listeneintrag (IE) oder bei allen folgenden Listeneinträgen (Netscape).

Entsprechendes Kapitel im HTML-Kurs: Aufzählungslisten

II.3 Definitionslisten

Definitionslisten dienen z.B. zur Erstellung eines Glossars. Sie werden mit <DL> begonnen und mit </DL> beendet. Die einzelnen Listeneinträgen bestehen aus zwei Teilen:
<DT> leitet den zu erklärenden Begriff ("definition term") ein, <DD> die Erklärung ("definition definition") dazu.

Normalerweise stehen Begriff und Erklärung in zwei Zeilen, wobei die Erklärung eingerückt ist. Dies lässt sich mit dem Tag <DL COMPACT> ändern, so dass Begriff und Erklärung in einer Zeile stehen (funktioniert nur für kurze Begriffe).

Entsprechendes Kapitel im HTML-Kurs: Definitionslisten

II.4 Verschachtelte Listen

Listen können verschachtelt werden. Hierfür setzt man in einen Listeneintrag eine weitere Liste ein (mit <OL>, <UL> oder <DL>). Der Browser wechselt hier bei Aufzählungslisten das Aufzählungszeichen.

Entsprechendes Kapitel im HTML-Kurs: Verschachtelte Listen

Siehe zu Bildern auch Graphik in HTML in Selfhtml

III.1 Bilder einfügen

Bilder werden mit dem Tag <IMG SRC="bilddatei"> eingefügt. Mögliche Formate sind GIF, JPEG und PNG.
Verwendungsmöglichkeiten für Bilder sind z.B. die Verwendung als Trennlinie, als Aufzählungszeichen oder als Links. Soll ein Bild ohne umgebenden Text stehen, so muss man es in ein Paragraphentag <P>...</P> stellen.

Entsprechende Kapitel im HTML-Kurs: Grafikformate, Wie kommt das Bild auf die Seite? und Verwendung von Bildern

III.2 Mögliche Parameter

• <IMG SRC="bilddatei" ALT="Bildbeschreibung">: Der hier eingetragene Text erscheint anstelle des Bildes, falls der Benutzer das Anzeigen von Bildern abgeschaltet hat oder einen reinen Textbrowser benutzt. Bei manchen Browsern erscheint der Text auch, wenn man mit dem Cursor längere Zeit auf dem Bild bleibt.
• <IMG SRC="bilddatei" HEIGHT="x">: Festlegung der Höhe des Bildes in Pixeln oder Prozent des Browserfensters.
  
• <IMG SRC="bilddatei" WIDTH="x">: Festlegung der Breite des Bildes
  
• <IMG SRC="bilddatei" BORDER="x">: Bewirkt einen Rahmen mit Breite x. BORDER="0" ist nötig, wenn man bei einem Bild als Verweis den Rahmen wegbekommen will.
  
• <IMG SRC="bilddatei" ALIGN="left/center/right">: Bild links/in der Mitte/rechts
  
• <IMG SRC="bilddatei" ALIGN="top/bottom/middle">: umgebender Text an der Oberkante/Unterkante/Mitte des Bildes

Entsprechendes Kapitel im HTML-Kurs: Parameter des Image-tags

III.3 Hintergrundbilder

Hintergrundbilder sind sehr beliebt zur Verschönerung von HTML-Seiten. Ein kleines Bild reicht dabei für die gesamte Fläche aus, weil der Browser den gesamten Hintergrund damit "kachelt", d.h. er vervielfältigt das Bild und setzt es in alle Richtungen aneinander, bis der gesamte Hintergrund bedeckt ist.
Hintergrundbilder werden nicht mit dem image-tag programmiert, sondern mit einem Attribut im Body-tag: <BODY BACKGROUND="Bilddatei">

Entsprechendes Kapitel im HTML-Kurs: Hintergrundbilder

Zu Verweisen siehe auch Verweise - Hyperlinks in Selfhtml

Ein Verweis besteht aus zwei Teilen: dem "Link", auf den man mit der Maus klicken kann, und dem "Anker", zu dem der Verweis führt.

IV.1 Verweise innerhalb eines Dokuments

1) Verweis: <A HREF="Name des Ankers">Text, auf den geklickt werden kann </A>
2) Anker: <A NAME="#Name des Ankers">Text, auf den verwiesen wird </A>

Wichtig: Die Bezeichnung für den Anker muss eindeutig sein, und es dürfen keine Sonderzeichen außer _ verwendet werden!

Das entsprechende Kapitel im HTML-Kurs: Verweise innerhalb eines Dokumentes

IV.2 Verweise zu anderen HTML-Dokumenten

1) Verweis: <A HREF="Dateiname">Text zum Draufklicken </A>
2) Anker: Eine andere HTML-Datei (datei.html).

Wenn die Datei, auf die verwiesen wird, nicht im selben Ordner steht wie die Datei, auf der sich der Beweis befindet, so muss der genaue Ort der Zieldatei angegeben werden (relativer oder absoluter Verweis).

Das entsprechende Kapitel im HTML-Kurs: Verweise zu anderen Dokumenten der eigenen Site, Verweise zu anderen Internetseiten

IV.3 Verweistypen

1. Flache Verweise: Wenn von einer Datei auf eine andere verwiesen wird, die sich im selben Ordner befindet, so genügt es, den Namen der Zieldatei einzufügen:
   <A HREF="Zieldatei.html"> Verweistext </A>
2. Absolute Verweise: Befinden sich Verweis- und Zieldatei in verschiedenen Ordnern unter einem gemeinsamen Ordner "Home", kann man den Pfad von "Home" aus angeben. Hierbei steht am Anfang /, was bedeutet "Gehe zum obersten Ordner":
   <A HREF="/Unterordner1/Unterordner2/Zieldatei.html"> Verweistext </A>
3. Relative Verweise: Eine Alternative zu absoluten Verweisen:
   <A HREF="../Unterordner2/Zieldatei.html"> Verweistext </A>
   ../ steht für "einen Ordner höher".
4. Externe Verweise: Diese verweisen auf Dateien, die sich auf anderen Festplatten befinden, z.B. auf andere Sites:
   <A HREF="http://www.Website.de/Zieldatei.html"> Verweistext </A>
   Will man gleich zu einem Anker in einer anderen Datei springen, so kann dieser an die Adresse angefügt werden:
   <A HREF="http://www.Website.de/Zieldatei.html#Name des Ankers">

Zu Tabellen siehe auch das Kapitel "Tabellen" in Selfhtml

V.1 Anatomie von Tabellen

Tabellen werden mit folgenden Tags definiert:

<TABLE> zum Einleiten der Tabelle
<TR> Tabellenzeile ("table row")
<TD> Erster Eintrag ("table data") </TD>
<TD> Zweiter Eintrag </TD>
usw.
</TR> Ende der ersten Zeile
usw.
</TABLE> Ende der Tabelle

Statt <TD> kann man auch <TH> ("table head") verwenden, der Text erscheint dann fett und im Tabellenkästchen zentriert statt linksbündig.

Spalten lassen sich zusammenfassen mit <TD COLSPAN="x">, wobei x die Zahl der zusammengefassten Spalten ist.
Zeilen lassen sich zusammenfassen mit <TD ROWSPAN="x">, x ist die Zahl der zusammengefassten Zeilen.
Achtung: Fasst man z.B. 2 Zeilen zusammen, so fällt in der zweiten ein Tabellenelement (<TD>...</TD>) weg (ansonsten macht der Browser Mist aus der Tabelle).

Mit <TABLE BORDER> erhält die Tabelle einen Rahmen, der sich folgendermaßen modifizieren lässt:

• <TABLE BORDER FRAME="void">: Nur das Gitternetz zwischen den Tabelleneinträgen wird angezeigt, der Rahmen außen fehlt
• <TABLE BORDER RULES="none">: Nur der äußere Rahmen wird gezeigt, aber nicht die Gitternetzlinien
• <TABLE BORDER RULES="cols">: nur senkrechte Linien
• <TABLE BORDER RULES="rows">: nur waagrechte Linien
• <TABLE BORDER="x">: Gibt die Rahmenbreite in Pixeln an (Standard sind 2 Pixel, schattiert)
• <TABLE BORDER CELLSPACING="x">: gibt die Breite der Gitternetzlinien in Pixeln vor
• <TABLE BORDER CELLPADDING="x">: gibt den Abstand zwischen Inhalt der Tabellenelemente und den Gitternetzlinien vor

Entsprechende Kapitel im HTML-Kurs: Das Grundgerüst von Tabellen, Das Gitternetz

V.2 Tabellengröße

Die Breite einer Tabelle kann auf zwei Arten festgelegt werden:
1) Relativ zum Browserfenster (Angabe in Prozent)
2) Absolut (Angabe in Pixeln)
Das Table-Tag sieht dann für beide Angaben so aus: <TABLE WIDTH="Breite">.

Wichtig: Eine Tabelle ist mindestens so groß wie ihr Inhalt, das gilt besonders, wenn Bilder in die Tabelle eingefügt werden. Legt man eine absolute Breite fest, so sollte diese maximal 600 Pixel betragen, damit auch Leute mit einer Bildschirmauflösung von 640x480 Pixeln sie auf einen Blick sehen können.

Abgesehen von der Breite der gesamten Tabelle kann man auch die Spaltenbreite und die Zeilenhöhe festlegen.
Spaltenbreite: <TD WIDTH="x">
Zeilenhöhe: <TD HEIGHT="y">

Entsprechendes Kapitel im HTML-Kurs: Größe von Tabellen

V.3 Tabellen: Farben und Bilder

Farben können festgelegt werden für die ganze Tabelle (<TABLE BGCOLOR="Farbe">), für eine Tabellenzeile (<TR BGCOLOR="Farbe">), für einzelne Zellen (<TD BGCOLOR="Farbe">) und natürlich für den Hintergrund des gesamten Dokuments (<BODY BGCOLOR="Farbe">).
Als Vorrangregel gilt: Farbe der Zelle > Farbe der Zeile > Farbe der Tabelle > Hintergrundfarbe

Achtung: Um zu vermeiden, dass bei unterschiedlichen Farben für Zeilen und Gesamttabelle die Gitternetzlinien die Tabellenhintergrundfarbe haben, kann man das Table-Tag folgendermaßen parametrisieren:
<TABLE BGCOLOR="Farbe" CELLSPACING="0" BORDER="0">

Hintergrundbilder kann man (wie im Body) auch in Tabellen einsetzen, allerdings nur für die gesamte Tabelle oder für einzelne Zellen und nicht für Tabellenzeilen.
Gemacht wird das so:
<TABLE / TD BACKGROUND="Bilddatei">
Es gelten folgende Vorrangregeln: Hintergrund einer Zelle > Hintergrund der Tabelle > Hintergrund des Gesamtdokuments;
außerdem: Hintergrundbild > Hintergrundfarbe

Auch Bilder als Zelleninhalt sind möglich. Dies bietet sich vor allem an, um mehrere Bilder nebeneinander oder untereinander anzuordnen.
Verwendet wird das Image-Tag:
<TD> <IMG SRC="Bilddatei"> </TD>

Entsprechende Kapitel im HTML-Kurs: Verwendung von Farbe, Verwendung von Hintergrundbildern

V.4 Tabellenlayout

Tabellen können wie Text und Bilder linksbündig, rechtsbündig oder zentriert angeordnet werden. Hierfür wird der bekannte Align-Parameter verwendet:
<TABLE ALIGN="left/right/center">.

Auch innerhalb der einzelnen Zellen können Text oder Bilder unterschiedlich plaziert werden:
<TD ALIGN="left/right/center"> bewirkt linksbündige / rechtsbündige / zentrierte Anordnung des Textes bzw. Bildes in der Zelle.
<TD VALIGN="middle/top/bottom"> bewirkt die Anordnung des Textes bzw. Bildes in der Mitte / oben / unten in der Zelle.
Voreinstellung des Browsers ist linksbündig in der Mitte.

Zur Arbeitserleichterung können die beiden Attribute in <TR> verwendet werden und gelten dann für eine Tabellenzeile.

Entsprechendes Kapitel im HTML-Kurs: Ausrichtung von Tabellen und ihren Inhalten

VI. Cascading Style Sheets

Zu CSS siehe auch Cascading Style Sheets in Selfhtml

VI.1 Einbinden von CSS

Es gibt drei Möglichkeiten, CSS in HTML-Dateien einzubinden:

1. Einbinden einer externen CSS-Datei (Dateiendung .css):
   In den Head wird mit Hilfe des LINK-Tags auf die CSS-Datei verwiesen:
   <LINK REL="Stylesheet" TYPE="text/css" HREF="datei.css">
2. Einbindung im Dokumentenkopf mithilfe des STYLE-tags:
   <STYLE TYP=E="text/css">
<!-- ... Stylesheet-Angaben ...
//-->
</STYLE>
3. Schnellformatierung im Text mit dem Attribut STYLE=:
   <tag STYLE="Style1:Wert1; Style2:Wert2;"
... mit den Angaben formatierter Text...
</tag>

Es gelten folgende Vorrangregeln:
1) Schnellformatierung > Style im Dokumentenkopf (Head) > Style aus externer Datei
2) Style-Formatierungen "besiegen" alle anderen Formatierungen durch Attribute im jeweiligen Tag (wichtig: gilt für alle tags außer dem FONT-tag!)

Entsprechendes Kapitel im HTML-Kurs: Einbindung von CSS in ein HTML-Dokument

VI.2 Style-Sheet-Angaben

Eine Liste mit möglichen Angaben gibt es bei HTMLStuff!, ein paar haben wir auch zusammengestellt: Style-Sheet-Anweisungen

A. Angaben in externer Datei und im Dokumentenkopf

Die Style-Sheet-Angaben in einer externen Datei und im Dokumentenkopf werden auf exakt dieselbe Weise angegeben, und zwar nach folgendem Schema:

Tag-Bezeichnung {
    Style1:Wert1;
    Style2:Wert2;
    Style3:Wert3;
}

Beispiel:
H1 {
    font-family:Arial, Helvetica;
    color:#FFCC99;
    font-weight:bold;
}

Wichtig sind hier außer der geschweiften Klammer der Doppelpunkt vor dem Wert und insbesondere das Semikolon am Ende jeder Zeile.

CSS-Dateien können in normalen Texteditoren (z.B. Notepad) erstellt werden. Sie werden einfach im CSS-Format gespeichert (dateiname.css).

B. Schnellformatierung im Text

Hier werden die Style-Sheet-Angaben direkt im Tag gemacht, die geschweiften Klammern fallen weg, dafür werden die Angaben zwischen "..." gesetzt.
Beispiel:
<H1 STYLE="font-family:Arial, Helvetica; color:#FFCC99; font-weight:bold;"> ... </H1>

Entsprechendes Kapitel im HTML-Kurs: Style Sheets