Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » HTML lernen – Website erstellen & strukturieren » Sauberer HTML-Code

Sauberer HTML-Code unterstützt das Lernen von HTML

Warum überhaupt der Hinweis auf sauberen Code? Dafür gibt es einige Gründe:

  1. WYSIWYG-Editoren machen es nicht :-)
  2. Eine eventuelle Fehlersuche geht später schneller
  3. Nachträgliche Änderungen und Hinzufügen von Informationen ist problemlos
  4. Sie selber sehen Ihre Fehler schneller
  5. Der Kursleiter sieht gemachte Tippfehler schneller

Diesen sauberen HTML-Code machen Sie eigentlich nur für sich selber. Den Webbrowsern ist egal, ob sie den Inhalt in einer einzigen Zeile bekommen oder wenigstens mit Umbrüchen oder mit Einrückungen. Sie zeigen alle 3 Varianten gleich an!

Für einen sauberen Code arbeiten Sie mit Umbrüchen, Leerzeilen und Einrückungen. So sollte z. B. jeder Text-Abschnitt (<p>-TAG) davor und danach eine leere Zeile haben, damit Sie sehen, wo die Abschnitte sind. Sehen Sie folgendes Beispiel:

<p>Hier fängt unser erster Abschnitt mit seinem Inhalt an. 
Dabei können Sie wie hier gezeigt sofort nach dem 
p-Tag anfangen zu schreiben oder...</p>

<p>
wie in diesem zweiten Absatz in der nächsten Zeile nach dem 
p-Tag und am Ende auch wieder eine Zeile freilassen.
</p>

Mit Einrückungen arbeiten Sie bei HTML-TAGs, die mehrere Befehle benötigen, wie z. B. bei Aufzählungen oder Tabellen, die im folgenden Kapitel kommen. So ist auf einen Blick im Quellcode sichtbar, wo Aufzählungen anfangen und aufhören und was zusammengehört. Also auch wenn Sie die folgenden HTML-TAGs (noch) nicht kennen – anhand des Aufbaus und der Einrückungen sehen Sie schnell, was zusammengehört.

<ul>
  <li>erster Aufzählungspunkt</li>
  <li>zweiter Aufzählungspunkt</li>
  <li>dritter Aufzählungspunkt, der mehr Platz benötigt</li>
  <li>nach Ende keine Einrückung mehr</li>
</ul>

Und das Ganze als Negativbeispiel für unübersichtliche Gestaltung des HTML-Codes bei denselben Aufzählungen:

<ul><li>erster Aufzählungspunkt</li><li>zweiter 
Aufzählungspunkt</li><li>dritter Aufzählungspunkt, der 
mehr Platz benötigt</li><li>nach Ende keine 
Einrückung mehr</li></ul>

Am folgenden Beispiel sehen Sie sehr schön, dass alleine durch die Darstellung ein Verständnis möglich ist (obwohl wir bisher keine Tabellen hatten). Sie sehen auf einen Blick, wo die Tabellen anfangen und aufhören.

So sollte z. B. ein Tabellenaufbau dann aussehen. Achten Sie auf die Einrückungen, die die einzelnen Zellen verdeutlichen.

<table>
    <tr>
        <td>
            INHALT
        </td>
        <td>
            INHALT
        </td>
    </tr>
</table>

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details