Zum Inhalt

Inhaltsverzeichnis • Teil 1 - Anfänger • Layout • Quellcode
⇦ Layout / Direkte Formate ⇨
30.07.2014 11:48:01

Quellcode

Code

Ganz am Anfang hatten wir gelernt, dass HTML eine Sprache (L - Language) ist. Wenn man bei Computern von Sprachen „spricht“, meint man damit eine formale Beschreibung, die in sogenannten Quellcode geschrieben wird.

Wir haben den Computer (Webbrowser) also eine Reihe von Anweisungen, in einer Datei verpackt, zum Ausführen gegeben. Zwar haben wir kein Programm im ursprünglichen Sinn geschrieben, aber wir sind auf dem besten Weg dorthin. Also sollten wir auch ein paar Regeln befolgen, die unseren Quellcode für Andere besser lesbar macht.

Wahrscheinlich haben sie sich am Anfang unseres Beispiels gefragt warum HTML Whitespaces überliest. Dies ist eine Eigenschaft, die es mit vielen Computersprachen (wie auch CSS und JavaScript) teilt: Der Quellcode kann so formatiert werden.

Formatierung

Es gibt einige einfache Regeln um Quellcode - also unseren HTML-Text - besser lesbar zu machen:

Jedes Anfangstag, das einen logischen Abschnitt (Block) anfängt, kommt in eine neue Zeile.

<p>
  1. Absatz
</p>

<p>
  2. Absatz
</p>

<p>
  3. Absatz
</p>

Rücken Sie untergeordnete Tags mit Leerzeichen ein:

<body>
  <div>
     <p>
       Absatz 1
     </p>

     <p>
       Absatz 2
     </p>
  </div>
</body>

Trennen Sie große logische Bereiche mit einer oder mehreren Leerzeilen:

<body>
  <h1>Erste Überschrift</h1>
  <p>
    Ein Absatz
  </p>

  <h1>Zweite Überschrift</h1>
  <p>
    ein gänzlich anderer Absatz
  </p>
</body>

Verwenden Sie Kommentare:

<!-- Das wollte ich noch sagen -->

Übung:

Bereinigen und prüfen sie ihren Code. Fügen sie Kommentare ein.

(Beispiel 07_visitenkarte_quellcode.html)

Anhang: Tastaturkommandos

Mittels Programm

Sie können auch ein Programm wie HTML Tidy verwenden, um sowohl ihren Code zu prüfen, als auch eine Bereinigung durchzuführen. Für Firefox existiert eine entsprechende Erweiterung mit Namen Total Validator (addon).

Sonst verwenden sie am besten den Web-Service.

Zusammenfassung

⇦ Layout / Direkte Formate ⇨
Nach oben