Quelltext mit Format

Auf manchen Webseiten sieht der Quelltext aus als habe eine Bombe eingeschlagen! Einen guten Webmaster erkennt man unter anderen auch am Schreibstil des Quelltextes. (Siehe auch: Kommentare im Quelltext einfügen).

[Bildschirmfoto] Quelltext mit Format

➤ Helfen Sie dem Browser! Durch sauberen und korrekten HTML-Code kann er Seiten schneller darstellen. Strukturierte Informationen sind der Schlüssel für schnelle Ladezeiten, für Plattformunabhängigkeit, Barrierefreiheit und gutes Design.

Es gibt gute Gründe einen Quelltext zu formatieren:

Einen geordneten Quelltext …

➤ Moderne Editoren (z. B.: Visual-Studio Code) formatieren den HTML, JavaScript oder PHP-Code automatisch, darum braucht man sich nicht mehr kümmern.

HTML

Die folgenden Beispiele sind einfache Tabellen. Die Markierungen zeigen an, wie schwer oder leicht man die gewünschte Stelle im Quelltext finden kann.

✘ Beispiel 1: (ohne Format)

<table><tr><td></td><td></td><td></td><td></td><td>Testtext</td><td></td></tr></table>

✘ Beispiel 2: (in Großbuchstaben)
Verwenden Sie für HTML-Elemente nur Kleinbuchstaben.

<TABLE>
<TR><TD></TD><TD></TD><TD></TD>
<TD></TD><TD>Testtext</TD><TD></TD></TR>
</TABLE>

✔ Beispiel 3: (mit Format)
Einrückungen werden oft mit der Leertaste oder dem Tabulator gemacht.

<table>
 <tr>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td>
   Testtext
  </td>
  <td></td>
 </tr>
</table>

<table>
	<tr>
	<td></td>
	<td></td>
	<td></td>
	<td></td>
	<td>
		Testtext
	</td>
	<td></td>
	</tr>
</table>

CSS

<style>body{font-family:Verdana,Sans-Serif;font-size:1rem;background-color:#000FFF;margin:10px;}</style>

<style>
body {
   font-family: Verdana, Sans-Serif;
   font-size: 1rem;
   background-color: #000FFF;
   margin: 10px;
}
</style>

<style>
body {
	font-family: Verdana, Sans-Serif;
	font-size: 1rem;
	background-color: #000FFF;
	margin: 10px;
}
</style>

JavaScript

<script>
for (var zaehler = 0; zaehler <= 10; zaehler++) {
  if (zaehler == 10) {
    alert("Hallo Welt!");
  }
}
</script>

PHP

Beim programmieren ist es hilfreich, die Anweisungen übersichtlich in mehreren Zeilen aufzuteilen. Ich empfehle einen Zeilenumbruch bei max. 75 - 85 Zeichen durchzuführen, um die Lesbarkeit zu erhöhen. Kontroll-Ausdrücke sollten ein Leerzeichen zwischen den Schlüsselwörtern und der öffnenden Klammer haben, um diese von Funktionsaufrufen unterscheiden zu können. 

<?php for($zaehler=0;$zaehler<=10;$zaehler++){if($zaehler==10){echo"HalloWelt!";}}?>

Sie sollten unbedingt geschweifte Klammern verwenden, auch wenn sie technisch nur optional sind. Damit verbessern Sie die Lesbarkeit und vermeiden logische Fehler, wenn neue Zeilen hinzugefügt werden.

<?php
for ($zaehler = 0; $zaehler <= 10; $zaehler++) {
  if ($zaehler == 10) {
    echo "Hallo Welt!";
  }
}
?>

Hier gibt es allerdings unterschiedliche Schreibweisen, je nachdem welcher Programmierer das schreibt.

<?php
for ($zaehler = 0; $zaehler <= 10; $zaehler++)
{
      if ($zaehler == 10) 
       {
             echo "Hallo Welt!";
       }
}
?>

Verwenden Sie keine Abkürzungen bei Variablen, die niemand kennt ($i, $a, $b, $c, etc.), Variablen dürfen Sie auch nicht durchnummerieren ($var1, $var2, $var3, etc.) Auf keinen Fall Abkürzungen verwenden, die zweideutig sein können. Verwenden Sie dagegen "sprechende" Variablen ($zaehler, $counter, $hits, $files, $connect).

Siehe dazu: Vermeidung von PHP-Fehlermeldungen

SQL

$sql = "SELECT 
          `vorname`,
          `name`,
          `strasse`,
          `hausnummer`,
          `plz`,
          `ort`,
          `telefon`
     FROM 
          `kunden` 
     WHERE 
          `ort` = '" . $ort . "' 
     ORDER BY 
          `name` 
     LIMIT 
          0,20";

Verwenden Sie Editoren die das einrücken von Programmcode automatisch vornehmen.

Kommentare im Quelltext einfügen

Zu einer klaren Programmierstruktur gehören auch begleitende Kommentare, die den Sinn von Programmierschritten auch noch längere Zeit nach der Erstellung nachvollziehbar machen. Die Fehlersuche oder Programmergänzungen lassen sich so einfacher bewerkstelligen.

Ein HTML- PHP - oder JavaScript-Quelltext, der zum Beispiel an entscheidenden Stellen Kommentare aufweist, ist deutlich leichter zu pflegen.
Die (PHP) Kommentare werden nicht auf der Webseite angezeigt, sie stören auch nicht den Programmablauf von PHP, JavaScript oder den CSS (Cascading Style Sheets).

Kommentar in HTML

<!-- Das ist ein Kommentar -->

<!-- Das ist ein mehr-
 zeiliger Kommentar -->

Kommentar in JavaScript

// Das ist ein Kommentar

Kommentar in CSS

/* Das ist ein Kommentar */

/* Das ist ein mehr-
 zeiliger Kommentar */

Kommentar in PHP

// Das ist ein Kommentar

/* Das ist ein mehr-
 zeiliger Kommentar */

# Das ist ein Kommentar

Kommentare im Perl/shell-Stil (#) sollten Sie vermeiden.

HTML-Code anzeigen

Manchmal möchte man dem Besucher HTML-Code zum kopieren anbieten.
Mit den benannten Zeichen: &lt; &gt; (< > - HTML-Tag Klammern) kann HTML-Code auf der Webseite angezeigt werden.
Schreiben Sie:

<pre>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;&lt;/title&gt;
 &lt;/head&gt;
&lt;body&gt;
...
&lt;/body&gt;
&lt;/html&gt;
</pre>

So wird es dann auf der Seite aungezeigt:

<!DOCTYPE html>
<html>
 <head>
 <title></title>
 </head>
<body>
...
</body>
</html>

Um die HTML-Tag Klammern zu ersetzen können Sie die "Suchen / Ersetzen"-Funktion in ihrem Editor verwenden oder diesen kleinen Generator benutzen.

 


Tipp

Visual Studio Code - Tipps Tutorial
Mit den Tipps können Sie direkt einsteigen und lernen, wie Sie mit Visual Studio Code produktiv sein können.
Visual Studio Code - Tipps