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 [Bildschirmfoto]
Quelltext mit Format](img/quelltext_mit_format.webp)
➤ 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 …
- … kann man leichter editieren.
- … ist deutlich leichter zu pflegen.
- … lässt sich schnell auf Fehler überprüfen.
- … strengt beim Lesen nicht so an.
- … In JavaScript, PHP und SQL wird, wenn ein Fehler auftritt,
die betreffende Zeilennummer mit ausgegeben.
➤ 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: <
>
(< > - HTML-Tag Klammern) kann HTML-Code auf der Webseite angezeigt werden.
Schreiben Sie:
<pre> <!DOCTYPE html> <html> <head> <title></title> </head> <body> ... </body> </html> </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.
