Gut zu wissen: Der Aufbau von Web­sei­ten

mit Keine Kommentare

Zwei Fragen an Sie: Wie sind Web­sei­ten grund­sätzlich tech­nisch auf­ge­baut? Welche Programmier­sprache muss ein inte­res­sierter Ein­stei­ger da­für ler­nen? Erfah­ren Sie in diesem Beitrag die Grund­lagen, wie Web­sites wirk­lich funk­tio­nie­ren. Keine Angst, es ist nicht kom­pliziert, um es zu ver­ste­hen!

Informationen gemäss Stand vom 19.11.2022

Aufbau von Webseiten

Inhaltsver­zeich­nis: Auf­bau der Web­sei­ten

Der schwierige Anfang

Es war 1995. Ich installierte meinen ersten Browser und griff mit meinem Modem auf das Internet zu. Damals war der Begriff Internet nicht allgemein bekannt. Das Laden der Webseiten war langsam und das Design, na ja.

1996. Ich besorgte mir zwei Fachbücher und erstelle meine erste Webseite. Die Erfolge stellten sich schnell ein, denn es war einfach. Schliesslich bestand eine Webseite lediglich aus einem Text, eventuell der einen oder anderen Grafik und Links.

Aber ich wollte mehr. Wieder besorgte ich mir Fachliteratur und befasste mich mit JavaScript. Das funktionierte in ei­nem Browser gut, in einem anderen überhaupt nicht. Das konnte es auch nicht sein.

Anschliessend kaufte ich mir eine Pro­grammie­rsprache, die auf meinem Web­server lief. Das funk­tionierte ganz gut. Dann ging der Liefe­rant Konkurs. Weiter­arbeiten mit einer Software ohne Weiter­ent­wick­lung und Sup­port ging natür­lich nicht. Also zurück auf Feld 1.

Dann telefonierte ich mit einigen der wenigen Unternehmen, die sich bereits mit der Programmierung von Websites beschäftigen. Da wurde ich endlich fündig: ich verwendete PHP.

Laien denken oftmals, man lernt eine Pr­ogrammier­sprache, und kann damit alles im Inter­net aufbauen. Doch das WWW ist auf­grund seiner Histo­rie ein Sammel­surium ver­schie­denst­er Techni­ken. Sehen wir uns die wichtigs­ten Kom­po­nen­ten ein­mal näher an.

Der Browser

Nun, Sie wissen es ja bereits: Um diese Seite zu sehen und zu lesen, brauchen Sie einen Browser. Der Browser ist mittler­weile sicher das wich­tigste Pro­gramm für jeden Benutzer. Ohne geht nichts mehr. Grund­sätzlich muss der Brow­ser Internet­seiten, konkret, HTML-Sei­ten auf­rufen und dar­stel­len. Es gibt sehr viele Browser auf dem Markt. Die be­kann­tes­ten sind Google Chrome, Mozilla Firefox, Safari und Opera.

Die HTML-Seite

Eine Internetseite besteht aus HTML-Code. HTML ist keine Pro­grammier­sprache, sondern eine Text­be­schrei­bungs­sprache. Wer Internet­seiten er­stellen will, muss diese Sprache nicht lernen. Mit einem CMS (Con­tent-Mana­gement-Sys­tem) erstellen Sie die Seite ähn­lich wie mit einem Text­verar­beitungs­sys­tem. Das CMS kümmert sich da­rum, im Hin­ter­grund den HTML-Code zu er­stellen. Prak­tisch! Das am weitest verbreiteste CMS ist WordPress. Da der HTML-Code einer Webseite im Browser sicht­bar gemacht werden kann, ist es sehr leicht, diese Sprache besser und schnel­ler zu ler­nen.

Beispiel von HTML-Code
Beispiel von HTML-Code

Die Cascading Style Sheets

HTML bietet sehr wenige Möglichkeiten zur Gestaltung. Deshalb wurde CSS (Cascading Style Sheets) entwickelt. Damit war es end­lich mög­lich, indivi­duelle Zeilen­abstände, Bild­schirm­hinter­gründe, Spalten, schöne Navi­ga­tions­ele­mente und vieles andere mehr zu erstellen. Zudem können damit Desig­ner das Aus­sehen einer komplet­ten Web­site in einer Datei defi­nie­ren!

Da der CSS-Code einer Webseite im Browser sicht­bar gemacht werden kann, ist es auch hier leicht, diese Sprache besser und schnel­ler zu ler­nen.

Beispiel von CSS-Code
Beispiel von CSS-Code

Der JavaScript-Code

JavaScript ist eine Script­pro­grammier­sprache, welche direkt in eine Web­seite inte­griert wird. Eine gela­dene Web­seite kann da­mit ohne Inter­net­verbindung (sofern sie keinen Zugriff auf einen Ser­ver benö­tigt) bestimmte Ak­tionen aus­füh­ren. Sie wird unter anderem ver­wen­det für Anima­tionen, Prüfung von Formular­feldern und Ta­bellen sor­tieren.

Da der JavaScript-Code einer Webseite im Browser sicht­bar gemacht werden kann, ist es sehr leicht, diese Sprache besser und schnel­ler zu ler­nen. Nachteil: jeder kann den Code klauen und für sich ver­wenden.

Beispiel JavaScript-Code
Beispiel JavaScript-Code

Die Programmiersprache PHP

PHP ist eine sehr populäre Pro­grammier­sprache im Web. Sie läuft auf einem Web­server und ist kosten­frei zu­gäng­lich. Im Quell-Code der Webseite ist der PHP-Code nicht sichbar, sondern nur das Ergebnis der Pro­gram­mie­rung. Sie wird genauso ver­wen­det für ein­fache Berech­nun­gen wie auch für grosse Applika­tionen und Daten­bank­zu­griffe. An­de­re bek­annte Pro­grammier­sprache sind zum Bei­spiel Perl, Phyton und Java.

Beispiel von PHP-Code
Beispiel von PHP-Code

Datenbanken

Die riesige Anzahl von Daten muss noch ge­speichert werden, dafür benö­tigen wir Daten­banken wie bei­spiels­weise MySQL oder Ora­cle. Eine Daten­bank wie zum Beispiel MySQL verwendet eine eigene Syntax für Ihre Kom­man­dos:

Beispiel von MySQL-Code
Beispiel von MySQL-Code

Der Server

Server wie zum Beispiel Nginx oder Apache müssen konfig­uriert werden und haben ihre eigene Syntax. Bei kleineren Websites küm­mert sich der Hosting­provider um diese Ar­bei­ten.

Fazit:

“Wie Sie erfahren haben, braucht es für grössere Projekte ein ganzes Team, um alles bes­tens abzustim­men. Kaum je­mand dürfte in der Lage sein, auf allen diesen Gebieten ein Meister zu sein.”

Bitte klicken für ver­wandte Bei­trä­ge:

Autor: Walter B. Walser, kundennutzen.ch

Verfolgen Walter B. Walser:

Online-Mar­ke­ting-Mana­ger

Walser arbeitet seit 1995 mit dem In­ter­net. Er ist Gründer des pra­xis­na­hen On­li­ne-Mar­ke­ting- und Online-Tools-Ma­ga­zins kundennutzen.ch, Autor und Online-Marketing-Manager. Er half frü­her als Agenturleiter Un­ter­neh­mern 100% mehr aus Ihrer Web­site heraus­zu­holen. Er hat KMU in Bezug auf deren Web­auf­tritt be­raten und sich auf die Web­si­te-Pfle­ge, Web­si­te-Opti­mie­rung und das On­li­ne-Mar­ke­ting mit On­li­ne-Tools spe­zia­li­siert. Spezielle Interessen: Umweltschutz und Geopolitik.