HTML-Tags und -Attribute

Eine Übersicht

Inhaltsverzeichnis
  1. HTML-Grundgerüst
  2. BODY-Tags
  3. Überschriften-Tags
  4. Trennlinien-Trags
  5. Zeilenumbruch- und Absatz-Tags
  6. Text-Tags
  7. Listen-Tags
  8. Sonderzeichen-Tags
  9. Grafik-Tags

1. Grundgerüst
Grundgerüst Erläuterungen
<html>
    <head>
      <title></title>
    </head>
    <body>

    </body>
</html> 		HTML-Seite beginnt
    Kopfteil beginnt
      Titel der Seite festlegen
    Kopfteil endet
    Ausgabeteil (Körper) beginnt

    Ausgabeteil (Körper) endet
HTML-Seite endet

Zurück

2. Body-Tags
Beispiel-Tag Erläuterung
<body background = "..."></body> Angabe eines Hintergrundbildes
<body bgcolor = "..."></body> Angabe einer Hintergrundfarbe
<body text = "..."></body> Angabe einer Schriftfarbe
<body link = "..."></body> Angabe einer Link-Farbe
<body vlink = "..."></body> Angabe der Farbe eines besuchten Links
<body alink ="..."></body> Angabe der Farbe des aktiven Links

Zurück

3. Überschriften-Tags
Tag Beispiel Ergebnis
<h1></h1> <h1>Überschrift</h1>

Überschrift
<h2></h2> <h2>Überschrift</h2>

Überschrift
<h3></h3> <h3>Überschrift</h3>

Überschrift
<h4></h4> <h4>Überschrift</h4>

Überschrift
<h5></h5> <h5>Überschrift</h5>
Überschrift
<h6></h6> <h6>Überschrift</h6>
Überschrift
<h1 align="left"></h1> <h1 align="left">Überschrift</h1>

Überschrift
<h1 align="right"></h1> <h1 align="right">Überschrift</h1>

Überschrift
<h1 align="center"></h1> <h1 align="center">Überschrift</h1>

Überschrift
<h1 align="justify"></h1> <h1 align="justify">Überschrift</h1>

Überschrift

Zurück

4. Trennlinien-Tags
Beispiel-Tag Ergebnis
<hr>
<hr size="3">
<hr size="3" noshade>
<hr color=#1800FF size="1">
<hr color=#FF00FF size="6">
<hr color=#FF00FF size="6" width="50%">
<hr color=#FF00FF size="6" width="35%">

Zurück

5. Zeilenumbruch- und Absatz-Tags
Tag Beispiel Ergebnis
<br> Das ist ein Beispiel<br> für einen Zeilenumbruch. Das ist ein Beispiel
für einen Zeilenumbruch.
<p></p> Das ist ein Beispiel<p> für einen Absatz</p>. Das ist ein Beispiel

für einen Absatz

.
<p align="left"></p> Das ist ein Beispiel<p align="left"> für einen linksbündigen Absatz</p>. Das ist ein Beispiel

für einen linksbündigen Absatz

.
<p align="right"></p> Das ist ein Beispiel<p align="right"> für einen rechtsbündigen Absatz</p>. Das ist ein Beispiel

für einen rechtsbündigen Absatz

.
<p align="center"></p> Das ist ein Beispiel<p align="center"> für einen zentrierten Absatz</p>. Das ist ein Beispiel

für einen zentrierten Absatz

.
<p align="justify"></p> <p align="justify">Das ist ein Beispiel für einen Absatz im Blocksatz</p>.

Das ist ein Beispiel für einen Absatz im Blocksatz

.

Zurück

6. Textgestaltung
Tag Beispiel Ergebnis
<b></b> <b>Bold steht für fett.</b> Bold steht für fett.
<i></i> <i>Italic steht für kursiv.</i> Italic steht für kursiv.
<u></u> <u>Underlined steht für unterstrichen.</u> Underlined steht für unterstrichen.
<tt></tt> <tt>Teletyper steht für diktengleich.</tt> Teletyper steht für diktengleich.
<s></s> <s>Strikeout steht für durchgestrichen.</s> Strikeout steht für durchgestrichen.
<big></big> <big>Big steht für Vergrößern.</big> Big steht für Vergrößern.
<small></small> <small>Small steht für Verkleinern.</small> Small steht für Verkleinern.
<sub></sub> Sub steht für <sub>tiefergestellt</sub>. Sub steht für tiefergestellt.
<sup></sup> Sup steht für <sup>höhergestellt</sup>. Sup steht für höhergestellt.

Zurück

7. Listengestaltung

Tag Beispiel Ergebnis
<ol>
    <li></li>
</ol>		 <ol>
    <li>Zeile</li>
    <li>Zeile</li>
    <li>Zeile</li>
    <li>usw.</li>
</ol>
  1. Zeile
  2. Zeile
  3. Zeile
  4. usw.
<ol type="I">
    <li></li>
</ol>		 <ol type="I">
    <li>Zeile</li>
    <li>Zeile</li>
    <li>Zeile</li>
    <li>usw.</li>
</ol>
  1. Zeile
  2. Zeile
  3. Zeile
  4. usw.
<ol type="i">
    <li></li>
</ol>		 <ol type="i">
    <li>Zeile</li>
    <li>Zeile</li>
    <li>Zeile</li>
    <li>usw.</li>
</ol>
  1. Zeile
  2. Zeile
  3. Zeile
  4. usw.
<ol type="A">
    <li></li>
</ol>		 <ol type="A">
    <li>Zeile</li>
    <li>Zeile</li>
    <li>Zeile</li>
    <li>usw.</li>
</ol>
  1. Zeile
  2. Zeile
  3. Zeile
  4. usw.
<ol type="a">
    <li></li>
</ol>		 <ol type="a">
    <li>Zeile</li>
    <li>Zeile</li>
    <li>Zeile</li>
    <li>usw.</li>
</ol>
  1. Zeile
  2. Zeile
  3. Zeile
  4. usw.
<ol start="5" type="1">
    <li></li>
</ol>		 <ol start="5" type="1">
    <li>Zeile</li>
    <li>Zeile</li>
    <li>Zeile</li>
    <li>usw.</li>
</ol>
  1. Zeile
  2. Zeile
  3. Zeile
  4. usw.
<ul></ul> <ul>
    <li>Zeile</li>
    <li>Zeile</li>
    <li>Zeile</li>
    <li>usw.</li>
</ul>
    Zeile
    Zeile
    Zeile
    usw.
<ul type="disc"></ul> <ul type="disc">
    <li>Zeile</li>
    <li>Zeile</li>
    <li>Zeile</li>
    <li>usw.</li>
</ul>
  • Zeile
  • Zeile
  • Zeile
  • usw.
<ul type="square"></ul> <ul type="square">
    <li>Zeile</li>
    <li>Zeile</li>
    <li>Zeile</li>
    <li>usw.</li>
</ul>
  • Zeile
  • Zeile
  • Zeile
  • usw.
<ul type="circle"></ul> <ul type="circle">
    <li>Zeile</li>
    <li>Zeile</li>
    <li>Zeile</li>
    <li>usw.</li>
</ul>
  • Zeile
  • Zeile
  • Zeile
  • usw.

Zurück

8. Sonderzeichen
Tag Erläuterung
& para ; steht für Paragraph
" & quot ; steht für Anführungszeichen
< & l t ; steht für Kleiner-als
> & gt ; steht für Größer-als
§ & sect ; steht ebenfalls für Paragraph
& & amp ; steht für UND
© & copy ; steht für copy
Ä & Auml ; steht für Ä
Ö & Ouml ; steht für Ö
Ü & Uuml ; steht für Ü

Zurück

9. Grafik-Tags
Beispiel-Tag Ergebnis
<img src="cb.gif">
<img src="cb.gif" alt="xmasbaby"> xmasbaby
<img src="cb.gif" align="right">
<img src="cb.gif" align="center">
<img src="cb.gif" width=40 height=40>

Zurück