HTML Tutorial

Ich möchte hier nicht HTML von Grund auf erklären, dafür gibt es schon genügend andere Seiten, die dies tun. Jedoch liste ich hier nachfolgend die wichtigsten Kentnisse und HTML Befehle auf um einen Text anständig zu formatieren.

Das wichtigste für die Sprache HTML ist:
<b>Eine begonnene Formatierung muss mit dem dazugehörigen Endtag wieder geschlossen werden.</b>
Wie Sie oben sehen, setzt sich ein HTML - Tag aus eckigen Klammern, < dem Formatierungsbefehl> und </Formatierungsbefehl> zusammen, wobei das Endtag dasselbe ist wie das Starttag, nur mit einem / davor.

Man kann diese Tags auch inneinander verschachteln wobei es auf die richtige Reihenfolge der abschliessenden Tags ankommt
<b><i><u>von innen nach aussen!</u></i></b>

Wenn einem Attribut ein Wert zugewiesen wird, steht dieser immer in "doppelten Anführungsstrichen".

Falls Ihnen untenstehende Erklärungen nicht weiterhelfen, finden Sie auf Selfhtml.org sicher eine Lösung.

Auflistung der meist verwendeten HTML - Tags


Ansicht im WebHTML Code
Kursiv<i>Kursiv</i>
Unterstrichen<u>Unterstrichen</u>
Fettgedruckt<b>Fettgedruckt</b>

Ich bin ein Absatz.

Und der folgende Text
<p>Ich bin ein Absatz.</p>Und der folgende Text
Ein reiner Zeilenumbruch
Ist mit einem einzelnen Tag abrufbar
Ein reiner Zeilenumbruch<br />Ist mit einem einzelnen Tag abrufbar
Ein doppelter Zeilenumbruch

Schaltet eine Leerzeile
Ein doppelter Zeilenumbruch<br /><br />Schaltet eine Leerzeile

Überschrift 1

<h1>Überschrift 1</h1> (Nur 1x pro Seite)

Überschrift 2

<h2>Überschrift 2</h2>

Überschrift 3

<h3>Überschrift 3</h3>
Schriftfarbe Rot<font color="#FF0000">Schriftfarbe Rot</font>
Ziemlich kleiner Text<font size="1">Ziemlich kleiner Text</font>
Text grösser als normal<font size="4">Text grösser als normal</font>
  • Auflistung
  • <li>Auflistung</li>

    Absatz zentriert

    <p align="center">Absatz zentriert</p>

    Absatz rechtsbündig

    <p align="right">Absatz rechtsbündig</p>

    Absatz linksbündig muss nicht definiert werden ist Standard

    <p align="left">Absatz linksbündig</p>

    Absatz im Blocksatz sieht folgendermassen aus. Absatz im Blocksatz sieht folgendermassen aus. Absatz im Blocksatz sieht folgendermassen aus.

    <p align="justify">Absatz im Blocksatz</p>

    Noch ein Wort zu den Schriftfarben: Die Farbangabe erfolgt über den sechsstelligen Hexcode. Für eine andere Farbe als Rot tauschen Sie diesen durch Ihre gewünschte Farbe.
    Auf folgenden Seiten finden Sie eine ausführliche Farbpalette mit zugehörigem Hexcode:
    hexfarben.de - Hex-Code Farbauswahl / Farb-tabelle.de / Hex-Code Farbauswahl von W3School


    Ein essentieller Bestandteil jeder Webseite sind Links.

    Hier unterscheiden wir zwischen internen und externen Links.
    Mit internen Links navigiert man auf derselben Webseite, Externe hingegen führen den Besucher zu einer anderen Webseite.

    Beispiel interner Link
    <a href="html-tutorial.php" title="Hier gelangen Sie zum HTML - Tutorial">HTML Tutorial</a>
    HTML Tutorial

    Beispiel externer Link
    <a href="http://de.selfhtml.org/" title="Link zu Selfhtml.org" target="blank">Selfhtml.org</a>
    Selfhtml.org

    Das Start HTML - Tag für einen Link ist <a die schliessende eckige Klammer > kommt aber erst, nachdem alle Parameter des Links gesetzt sind.
    Dies wäre <a href="die Adresse" title="Ich erscheine bei Maus over", um einen externen Link nicht im selben Fenster zu öffnen, setzt man noch das target="blank" Attribut. Abschliessend folgt die schliessende eckige Klammer>.
    Als Nächstes kommt der Text, welcher auf der Seite sicht- und anklickbar ist (Selfhtml.org). Abschliessend setzt man noch das Endtag des Links </a>.
    So sieht das dann aus: Selfhtml.org

    Bild einfügen

    Zu Demonstrationszwecken habe ich ein kleines Bild namens demo.jpg erstellt.
    Es ist im Ordner img/content/demo.jpg abgelegt. Mit folgender Zeile HTML rufen wir das Bild auf:
    <img src="img/content/demo.jpg" alt="Demo Bild" title="Demo Bild" />

    Demo Bild

    Hier bekommen die Attribute alt und title einen Alternativtext. Falls das Bild nicht geladen werden kann, erscheint dann eine Anzeige mit dem alt Alternativtext. Sobald man mit der Maus über das Bild fährt, erscheint der Text welcher in title zugewiesen wurde.
    Von zentraler Bedeutung ist ausserdem, dass der Pfad bei src (source/Quelle) korrekt ist.
    Der Pfad bildet die Ordnerhierarchie vom Stammordner aus bis zu dem Ordner, in dem das Bild abgespeichert wurde.

    Bild als Link

    Man kann das soeben Gelernte auch ineinander verschachteln.
    <a href="html-tutorial.php" title="Bild als Link"><img src="img/content/demo.jpg" alt="Bild als Link" /></a>
    Bild als Link