HTML Beispiele

ACHTUNG: Dieses Tutorial basiert auf HTML 4.01 und hat nicht den Anspruch aktuelle Best Practices zu vermitteln.

HTML Beispielsammlung

Auf dieser Seite findet man sehr grundlegende HTML-Befehle, mit denen 
man eine erste eigene HTML-Seite zu bauen kann. 
Alles was man benötigt ist ein Texteditor mit dem man eine neue ".html"-Datei erstellt
und einen Browser um das Ergebnis zu testen.

HTML Grundgerüst

Es wird empfohlen ganz am Anfang einen "Doctype" anzugeben.
Der Doctype gibt die HTML-Version an.

Das "html"-Tag umschließt den gesamten Inhalt der Seite.
Jedes HTML-Tag das geöffnet wird, sollte auch wieder geschlossen werden.
Öffnen: <EinTag>
    ... sonstiger Inhalt ...
</EinTag> - und wieder schließen 		<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
    Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Mein Titel
    </head>
    <body bgcolor="white" style="padding:0px; margin:0px; height:100%">
        ... Inhalt meiner HTML-Seite ...
    </body>
</html>
Das ist fetter, kursiver und unterstrichener Text Das ist <b>fetter</b>, <i>kursiver</i> und <u>unterstrichener</u> Text

Das ist ein Absatz
mit einem Zeilenumbruch

Nach jedem Absatz

wird automatisch umgebrochen
<p>Das ist ein Absatz</br> mit einem Zeilenumbruch</p>


<p>Nach jedem Absatz</p><p>wird automatisch umgebrochen</p>

Überschrift ersten Grades

Überschrift zweiten Grades

Überschrift mit weniger Abstand zum nachfolgenden Text

Text unter der Überschrift 		<h1 style="margin-top:0">Überschrift ersten Grades</h1>


<h2>Überschrift zweiten Grades</h2>

<h3 style="margin-bottom:0">Überschrift mit weniger Abstand zum nachfolgenden Text</h3>
Text unter der Überschrift
Comic Sans MS
Arial
Arial Black
Courier
Courier New
Times New Roman
MS Sans Serif
Verdana
Tahoma
 <font face="Comic Sans MS">Comic Sans MS</font></br>
<font face="Arial">Arial</font></br>
<font face="Arial Black">Arial Black</font></br>
<font face="Courier">Courier</font></br>
<font face="Courier New">Courier New</font></br>
<font face="Times New Roman">Times New Roman</font></br>
<font face="MS Sans Serif">MS Sans Serif</font></br>
<font face="Verdana">Verdana</font></br>
<font face="Tahoma">Tahoma</font></br>
Umschreibungen für Sonderzeichen:
<
>
&
ä
ö
ü
ß
Ä
Ö
Ü
 (Leerzeichen)
€
£
❤ ❄ ✽ ✩ ✔ ✈ ✉ ✘ ✿ ➝ ➤
&lt;
&gt;
&amp;
&auml;
&ouml;
&uuml;
&szlig;
&Auml;
&Ouml;
&Uuml;
&nbsp;(Leerzeichen)
&euro;
&pound;
&#10084; &#10052; &#10045; &#10025; &#10004; &#9992; &#9993; &#10008; &#10047; &#10141; &#10148;
Text kann eingefärbt werden.
Farbe, Schriftart und Schriftgröße ändern

Red
Cyan
Blue
Dark Blue
Light Purple
Purple
Yellow
Lime
Fuchsia
White
Silver
Grey
Black
Orange
Brown
Maroon
Green
Olive

Hexadezimale Schreibweise für Farben:
Rot
Grün
Blau
<font color="red">Text kann eingefärbt werden.</font>
<font face="Arial" Size="2" color="green"> Farbe, Schriftart und Schriftgröße ändern </font>

<font color="red">Red</font>
<font color="cyan">Cyan</font>
<font color="blue">Blue</font>
<font color="dark blue">Dark Blue</font>
<font color="light purple">Light Purple</font>
<font color="purple">Purple</font>
<font color="yellow">Yellow</font>
<font color="lime">Lime</font>
<font color="fuchsia">Fuchsia</font>
<font color="white" style="background-color:black">White</font>
<font color="silver">Silver</font>
<font color="grey">Grey</font>
<font color="black">Black</font>
<font color="orange">Orange</font>
<font color="brown">Brown</font>
<font color="maroon">Maroon</font>
<font color="green">Green</font>
<font color="olive">Olive</font>

<b style="color:#2277AA">Hexadezimale Schreibweise für Farben: </b>
<font color="#FF0000">Rot</font>
<font color="#00FF00">Grün</font>
<font color="#0000FF">Blau</font>
Blöcke:
Dieser Text steht in einem Div-Block.
Div-Blöcke können beliebiges HTML enthalten.
Div-Blöcke können positioniert, formatiert
und in einander geschachtelt werden.
Span-Blöcke sind wie Div-Blöcke, nur ohne Zeilenumbruch am Ende 		<div><b>Blöcke:</b></div>
<div style="background-color:yellow; border: 1px solid black; width:300px; height:100px">
    Dieser Text steht in einem Div-Block. </br>
    Div-Blöcke können beliebiges HTML enthalten. </br>
    Div-Blöcke können positioniert, formatiert </br>
    und in einander geschachtelt werden. </br>
</div>
<span style="background-color:lime; border: 3px dotted red">
    Span-Blöcke sind wie Div-Blöcke, nur ohne Zeilenumbruch
</span> am Ende
Positionierung von Text:
Links
Mitte
Rechts
 <b>Positionierung von Text:</b>
<div align="left" style="background-color:#EEEEEE">Links</div>
<div align="center" style="background-color:#DDDDDD">Mitte</div>
<div align="right" style="background-color:#CCCCCC">Rechts</div>
Scrollender Text: Das ist ein scrollender Text
von
unten
nach
oben
<b>Scrollender Text:</b>
<marquee bgcolor="yellow" direction="left" scrollamount="2" loop="true" width="100px">
    Das ist ein scrollender Text
</marquee>

<marquee bgcolor="lime" direction="up" scrollamount="2" loop="true" width="100px" height="100px">
    von </br>
    unten </br>
    nach </br>
    oben </br>
</marquee>
Linie:
Linie ohne Schatten:
farbige Linie
Linie:
<hr/>
Linie ohne Schatten:
<hr size="1" noshade="noshade"/>
farbige Linie
<hr style="color: red; background: yellow; height: 15px; width: 350px;"/>
Aufzählungen:
  1. Punkt 1
  2. Punkt 2
  3. Punkt 3
    • Unterpunkt 1
    • Unterpunkt 2
 <b>Aufzählungen:</b>
<ol>
    <li>Punkt 1</li>
    <li>Punkt 2</li>
    <li>Punkt 3
        <ul>
            <li>Unterpunkt 1</li>
            <li>Unterpunkt 2</li>
        </ul>
    </li>
</ol>
Ein Link auf eine andere Seite (Google)
Ein Link auf eine Seite im gleichen Verzeichnis
Ein Link auf ein Bild 		<a href="http://www.google.de">
    Ein Link auf eine andere Seite (Google)
</a></br>
<a href="HTML Beispiele.html">
    Ein Link auf eine Seite im gleichen Verzeichnis
</a></br>
<a href="images/Testbild.png">Ein Link auf ein Bild</a> 
In einem "PRE"-Tag kann man
vorformatierte Texte darstellen, 
ohne "</br>"-Zeilenumbrüche
hinter jede Zeile einzufügen.

	Auch Tabs für Einrückungen 
 	können hier verwendet werden.
	
<pre style="font-family:Times New Roman; margin:0">
In einem <b>"PRE"</b>-Tag kann man
vorformatierte Texte darstellen, 
ohne <b>"&lt;/br>"</b>-Zeilenumbrüche
hinter jede Zeile einzufügen.

	Auch Tabs für Einrückungen 
 	können hier verwendet werden.
</pre>
Bild in Originalgröße: Alternativtext falls Bild nicht angezeigt werden kann


Bild in kleiner:

Bilder sollten immer in einem "images"-Verzeichnis liegen

Dieses Bild steht
mitten im Text
und wird vom Text
umflossen. 		<div style="background-image:url(images/Hintergrund.png)">
    Bild in Originalgröße:
    <img src="images/Testbild.png"
        alt="Alternativtext falls Bild nicht angezeigt werden kann"
        title="Tooltip, wenn der Cursor über dem Bild ist"/>

    Bild in kleiner:
    <img src="images/Testbild.png" width="30px" height="30px"/>

    Bilder sollten immer in einem "images"-Verzeichnis liegen
</div>
Diese Bild steht
mitten <img src="images/Testbild.png" align="left"/>im Text
und wird vom Text
umflossen.

Außen- und Innenabstände (maring und padding):

Text der an den Rand geklatscht ist
Textblock mit 10 Pixeln Außenabstand (margin:10px)
Textblock mit einem
Innenabstand so groß,
wie die aktuelle Schriftgröße (padding:1em)
 <h4 style="margin-top:0">Außen- und Innenabstände (maring und padding): </h4>

<div style="background-color:yellow; width:350px; height:180px">
    Text der an den Rand geklatscht ist
    <div style="margin:10px; background-color:green">
        Textblock mit 10 Pixeln Außenabstand (margin:10px)
    </div>
    <div style="padding:1em; background-color:lime">
        Textblock mit einem<br/>
        Innenabstand so groß, <br/>
        wie die aktuelle Schriftgröße (padding:1em)<br/>
    </div>
</div>
Tabelle:
Überschrift A Überschrift B linksbündig
vertikal zentriert Inhalt2
mit
viel
Innenabstand
Über 2 Spalten mit fester Höhe
<table width="100%" cellspacing="0" cellpadding="0" border="1" bordercolor="blue"
  style="border-collapse: collapse; background-color:silver">
    <tr>
        <th>
            Überschrift A
        </th>
        <th style="text-align:left">
            Überschrift B linksbündig
        </th>
    </tr>
    <tr>
        <td style="vertical-align: middle">
            vertikal zentriert
        </td>
        <td style="padding:10px">
            Inhalt2 mit viel Innenabstand
        </td>
    </tr>
    <tr>
        <td colspan="2" height="50px" style="vertical-align:top">
            Über 2 Spalten mit fester Höhe
        </td>
    </tr>
</table>
absolute Positionierung:
x=70px
y=20px
z=2
x=20px
y=50px
z=1
zentriert
rechts unten
(0/0) Hintergrund
<div style="position:absolute; background-color:yellow; width:400px; height:220px">
    <div style="position:absolute; background-color:red;
       margin-left:70px; margin-top:20px; width:80px; height:80px; z-index:2">
        x=70px<br/>
        y=20px<br/>
        z=2
    </div>

    <div style="position:absolute; background-color:aqua;
      margin-left:20px; margin-top:50px; width:140px; height:70px; z-index:1">
        x=20px<br/>
        y=50px<br/>
        z=1
    </div>

    <div style="position:absolute; background-color:silver;
      width:200px; height:100px; left:50%; top:50%; margin-left:-100px; margin-top:-50px">
        <div align="right">zentriert</div>
    </div>

    <div style="position:absolute; background-color:green;
      right:0px; bottom:0px; width:50px; height:50px">
        rechts unten
    </div>
    (0/0) Hintergrund
</div>
Scroll-Bereich:
Hier
steht
ein
viel
zu
langer
Inhalt
für
diesen
kleinen
Bereich.

<div style="width:100px; height:100px; overflow:auto">
    Hier <br/>steht <br/>ein <br/>viel <br/>zu <br/>langer <br/>
    Inhalt <br/>für <br/>diesen <br/>kleinen <br/>Bereich.
</div>
Kommentare in HTML beginnen mit
<!-- und enden mit
--> 		Kommentare in HTML beginnen mit </br>
&lt;!-- und enden mit </br>
-->
<!-- Alles was in einem Kommentar steht wird im Browser nicht angezeigt--> 
Viel Spaß beim Kombinieren der HTML-Elemente und Eigenschaften.

↑ nach oben
impressum und datenschutz