Eigentlich würde man beim Besuch einer Website nur Programmiercode-Zeilen auf dem Bildschirm sehen. Dank dem verwendeten Webbrowser auf dem PC, Laptop, Tablet oder Mobile, wandelt dieser den empfangenen Quellcode in eine normale Bildschirmdarstellung mit Text und Bildern um. Dieser Beitrag befasst sich mit dem Quellcode einer Website und aus welchen Programmteilen dieser zusammengesetzt ist.
Inhaltsverzeichnis
Einleitung
Den Quellcode einer Website kann man bei einem PC einsehen, indem man mit der rechten Maustaste in die Seite klickt. Es öffnet sich ein Kontext-Menü. Wenn man dann ‚Seitenquelltext anzeigen‘ auswählt, wird der Quellcode der angeklickten Seite angezeigt.
Unten stehend ist der Quellcodes der Startseite dieser Website zu sehen (zum Vergrössern auf das Bild klicken):
Der Quellcode einer Webseite ist aus verschiedenen Programmbestandteilen zusammengesetzt, welche von folgenden Programmiersprachen stammen: HTML, CSS, JavaScript und PHP. Mehr dazu weiter unten.
Glücklicherweise braucht man sich beim Erstellen einer Website mit einem CMS-System wie WordPress oder mit einem Baukastensystem nicht direkt um den Quellcode zu kümmern. Dieser wird von diesen Systemen gemäss der Programmierung der Website mit diesen Tools automatisch erstellt. Einzig bei speziellen Erweiterungen einer Website oder bei der Fehlersuche ist die Kenntnis dieser Programmiersprachen notwendig.
Bevor wir weiterfahren, ist es zunächst wichtig, das Client – Server Prinzip zu verstehen.
Gewisse Prozesse laufen auf den Clients (z.B. PC, Laptop und Mobile) ab, andere wieder auf dem Webserver des Internet-Hostings.
Webbrowser
Damit der beim Client ankommende Quellcode auf dem Endgerät in Text und Bilder umgewandelt werden kann, benötigt es einen Browser. Ein Webbrowser dient als Übersetzer des Programmcodes in eine grafische Darstellung auf dem Bildschirm.
Es gibt verschiedene Webbrowser wie:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
- Safari
- usw.
Programmiersprachen für Web-Applikationen
Der Programmiercode bei Websites setzt sich hauptsächlich aus den vier Programmiersprachen HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), JavaScript und PHP zusammen.
Vereinfacht kann man das Zusammenspiel der Programmcodes der entsprechenden Programmiersprachen wie folgt formulieren:
- HTML bestimmt clientseitig, welche Elemente sich auf einer Webseite befinden (Inhalt)
- CSS bestimmt clientseitig, wie diese Elemente aussehen sollen (Layout)
- JavaScript bestimmt clientseitig, wie sich diese Elemente verhalten (Logik)
PHP wird auf dem Server ausgeführt und generiert dort HTML-Code, der an den Client gesendet wird
HTML (Hypertext Markup Language)
„Die Hypertext Markup Language (HTML, englisch für Hypertext-Auszeichnungssprache) ist eine textbasierte Auszeichnungssprache zur Strukturierung elektronischer Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von Webbrowsern dargestellt. …
HTML dient als Auszeichnungssprache dazu, einen Text semantisch zu strukturieren, nicht aber zu formatieren. Die visuelle Darstellung ist nicht Teil der HTML-Spezifikationen und wird durch den Webbrowser und Gestaltungsvorlagen wie CSS bestimmt.“
Auszug aus: https://de.wikipedia.org/wiki/Hypertext_Markup_Language
Detaillierte Informationen über HTML mit Programmierbeispielen siehe: https://www.w3schools.com/html/.
Unten stehend ein einfaches Beispiel eines HTML-Codes zum Anzeigen eines Textes.
HTML-Code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Text.</p>
</body>
</html>
Angezeigter Text:
Dies ist eine Überschrift
Dies ist ein Text
CSS (Cascading Style Sheets)
„Cascading Style Sheets (englisch für ‚gestufte Gestaltungsbögen‘; kurz: CSS) ist eine Stylesheet-Sprache für elektronische Dokumente und zusammen mit HTML und JavaScript eine der Kernsprachen des World Wide Webs. …
CSS wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen.
Wenn diese Trennung konsequent vollzogen wird, werden nur noch die inhaltliche Gliederung eines Dokumentes und die Bedeutung seiner Teile in HTML oder XML beschrieben, während mit CSS gesondert davon, vorzugsweise in separaten CSS-Dateien, die Darstellung der Inhalte festgelegt wird (z. B. Layout, Farben und Typografie).“
Auszug aus: https://de.wikipedia.org/wiki/Cascading_Style_Sheets
Detaillierte Informationen über CSS mit Programmierbeispielen siehe: https://www.w3schools.com/css/default.asp.
Unten stehend ein einfaches Beispiel eines CSS-Codes (nach rechts eingerückt) eingebettet im HTML-Code:
CSS-Code (nach rechts eingerückt)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
h1 {
color: blue;
text-align: center;
}
p {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1>Dies ist eine Überschrift</h1>
<p>Dies ist ein Text.</p>
</body>
</html>
Angezeigter Text:
Dies ist eine Überschrift
Dies ist ein Text
JavaScript
„JavaScript (kurz JS) ist eine Skriptsprache, die ursprünglich 1995 von Netscape für dynamisches HTML in Webbrowsern entwickelt wurde, um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML zu erweitern. “
Auszug aus: https://de.wikipedia.org/wiki/JavaScript
Im Unterschied zu PHP (siehe unten) läuft JavaScript auf Websites clientseitig ab, also auf dem entsprechenden Browser des Endgeräts (siehe Bild oben).
Detaillierte Informationen über JavaScript mit Programmierbeispielen siehe: https://www.w3schools.com/js/default.asp.
Unten stehend ein einfaches Beispiel eines JavaScript-Codes.
JavaScrip-Code:
<p>Einfaches Beispiel von JavaScript:</p>
<button type=″button″ style=„color:#ffffff“
onclick=″document.getElementById(′demo′).innerHTML = Date()″>
Anklicken um Datum und Zeit anzuzeigen</button>
<p id=″demo″></p>
Anzeige und Ausführung des oben stehenden JavaScript-Code:
Einfaches Beispiel von JavaScript:
PHP
„PHP (rekursives Akronym für PHP: Hypertext Preprocessor) ist eine weit verbreitete und für den allgemeinen Gebrauch bestimmte Open Source-Skriptsprache, welche speziell für die Webprogrammierung geeignet ist und in HTML eingebettet werden kann.
PHP unterscheidet sich von clientseitigen Sprachen wie Javascript dadurch, dass der Code auf dem Server ausgeführt wird und dort HTML-Ausgaben generiert, die an den Client gesendet werden. Der Client erhält also nur das Ergebnis der Skriptausführung, ohne dass es möglich ist herauszufinden, wie der eigentliche Code aussieht.“
Auszug aus: https://www.php.net/manual/de/intro-whatis.php
Detaillierte Informationen über PHP mit Programmierbeispielen siehe: https://www.w3schools.com/php/default.asp.
Unten stehend ein einfaches Beispiel eines PHP-Codes, welcher bewirkt, dass ein Rechnungsbetrag eines WooCommerce-Webshops auf 5 Rappen auf- oder abgerundet wird.
PHP-Code:
<?php
add_filter( ′woocommerce_calculated_total′, ′round_price_product′, 10, 1);
function round_price_product( $price )
{
return round(($price + 0.000001) * 20) / 20;
}
?>
Beschreibung:
Dieser PHP-Code bewirkt, dass der Endbetrag einer Rechnung des Webshops dieser Website auf 5 Rappen auf- oder abgerundet wird.
Beispiel:
- Ein Betrag von CHF 5.12 wird auf CHF 5.10 abgerundet
- Ein Betrag von CHF 5.13 wird auf CHF 5.15 aufgerundet
Fazit
Webbrowser sind dazu da, den empfangenen Quellcode einer Webseite auf dem Bildschirm entsprechend dem vom Webdesigner erstellten Layout darzustellen. HTML- und CSS-Code sind für den Inhalt und dessen Darstellung zuständig, JavaScript- und PHP-Code lösen interne und externe Funktionen der Webseite aus. Z.B. bei einem Kontaktformular wird PHP-Code verwendet, um die Formulardaten übermitteln zu können.
Durch den Einsatz von Baukasten- oder CMS-Systemen (z.B. WordPress) muss man sich nicht um die Erzeugung der verschiedenen Programm-Codes bemühen. Bei WordPress übernehmen dies der WordPress-Core, das verwendete Theme und die eingesetzten Plugins.
In eigener Sache:
Mehr Informationen zur Entwicklung von Websites siehe: Produktübersicht Entwicklung Websites / Kosten.
