Woraus besteht eine Website?

Die Bestandteile einer Website

Stell dir eine Website vor wie ein Haus. Dieses besteht, unter anderem, aus den Grundmauern, der Haustechnik, dem Verputz und Anstrich, sowie Küchengeräten und Dekogegenständen (wie zum Beispiel Bildern and den Wänden).

Mit deiner Website verhält es sich ähnlich. Diese setzt sich auch aus mehreren Elementen zusammen:

• dem Quellcode der Seite – das ist das Grundgerüst und vergleichbar mit den Grundmauern des Hauses, um bei meinem Beispiel zu bleiben.
• Anweisungen, wie die Seite darzustellen ist, die sogenannten Stylesheets; dies entspricht dem Verputz und Anstrich.
• Bildern und Videos in verschiedensten Formaten – die Dekogegenstände.
• aktiven Elementen wie Menüs, die in JavaScript programmiert sind – dies entspricht im Falle eines Hauses zB. den Küchengeräten, wie einem Toaster oder dem Herd.
• den Anweisungen, die am Server ausgeführt werden – im Haus am ehesten mit dem Heizungsraum zu vergleichen – die Heizung läuft ebenso unauffällig im Hintergrund und üblicherweise hast du nichts damit zu tun.

Die Grundmauern: der HTML-Quelltext der Seite 

HTML steht für HyperText Markup Language und ist eine Auszeichnungssprache. Damit kannst du bestimmen, ob Text fett oder kursiv dargestellt wird und noch vieles mehr.

So sieht HTML aus:

Auf den ersten Blick vielleicht etwas unübersichtlich.

Aber keine Sorge, es ist nicht so kompliziert, wie’s aussieht. Alles, was in spitzen Klammern steht, ist ein HTML Tag. So wird z.B. der Text zwischen und durch die beiden HTML Tags fett dargestellt. 

Meine Website sieht ohne Design, nur in HTML, folgendermaßen aus:

Nicht gerade sexy, oder?

Aber die Struktur ist erkennbar. Und wie auch bei einem Rohbau noch der Verputz und Anstrich fehlen, so fehlt auch auf der Website das Design. 

Verputz und Anstrich: CSS

Mit den Cascading StyleSheets (CSS) wird das Aussehen deiner Website bestimmt. Die Style Sheets legen fest, welche Farbe ein Element haben soll und welche Abstände zueinander eingehalten werden sollen. 

Dass deine Website auf einem Mobilgerät genauso funktioniert, wie auf einem Laptop, wird ebenfalls in den CSS Dateien geregelt.

So sieht CSS aus:

CSS sieht anders aus als HTML. Hier werden {geschwungene Klammern}  eingesetzt um Blöcke zu bilden, in welchen dann die Attribute (wie z.B. fett, kursiv, Schriftgröße…) festgelegt werden.

So wird deine Website – Seite für Seite und Abschnitt für Abschnitt – so gestaltet, wie du willst.

In modernen Themes* hast du üblicherweise mit HTML und CSS nichts zu tun – du kannst alles bequem per Drag’n’Drop einstellen.

Die Dekogegenstände: Bilder und Videos

So wie erst die Einrichtungsgegenstände einem Haus eine Seele verleihen und ihm Leben einhauchen, so benötigt auch eine moderne Website Bilder. Diese können in den verschiedensten Formaten abgespeichert sein:

• JPG wird vermutlich am häufigsten eingesetzt und du kennst dieses Format vermutlich von deiner Handykamera. Es eignet sich perfekt für Fotos.
• PNG Bilder können auch transparent dargestellt werden und eignen sich daher sehr gut für Logos.
• GIF Bilder sind animiert – du kennst diese bewegten Bilder vermutlich von diversen Chat-Programmen.
• SVG ist ein Vektorformat, mit welchem sich Hintergründe und auch Logos gestalten lassen.

Videos werden meist direkt, von einem darauf spezialisierten Anbieter wie Youtube, eingebunden.
In diesem Artikel lernst du mehr über Bilder und WordPress.

Die Küchengeräte: Aktive Elemente mit JavaScript

Eine Website ohne JavaScript ist wie eine Küche, in der es keinen Strom gibt. Es sind zwar alle Schalter und Geräte vorhanden, aber diese sind ohne Strom nutzlos.

Erst der Strom haucht der Küche Leben ein.

Auf deiner Website ist für diese Tätigkeiten JavasScript, kurz JS, zuständig.

Damit werden auf einer Website Menüs, Popups, Overlays oder Animationen umgesetzt.

So sieht JavaScript Code aus:

Die Heiztechnik: Der PHP Code von WordPress

Strom und Licht sind die sichtbaren Geister im Haus; im Heizraum werkelt aber, meist unbemerkt, die Heizung vor sich hin…

Auf deiner Website werden mit JavaScript zwar die Animationen und Effekte im Browser programmiert, aber es gibt noch eine weitere Programmiersprache, die am Server ausgeführt wird. Also ebenso wie die Heizung unauffällig im Hintergrund, arbeitet.

Im Falle von WordPress ist die Sprache PHP, was für “PHP: Hypertext Preprocessor” steht. Diese Sprache sieht JavasScript sehr ähnlich, unterscheidet sich aber im Detail.

PHP wird verwendet um am Server auf die Datenbank zuzugreifen und die HTML-Datei zu erstellen (“zu rendern”). Loggst du dich in WordPress ein, dann überprüft PHP, ob dein Kennwort gültig ist. Speicherst du einen neuen Beitrag, werden die Änderungen von PHP in die Datenbank geschrieben.

Das Schloss an der Eingangstüre: das HTTP Protokoll

Dir ist sicher schon das http:// oder https:// am Anfang von URLs aufgefallen, oder?

Dabei handelt es sich um das “HyperText Transfer Protocol” und damit um die Sprache, die dein Browser mit dem Server spricht. Heutzutage wird meist die verschlüsselte Variante HTTPS eingesetzt (falls bis dato auf deiner Website nicht, solltest du das schleunigst ändern!).

Wie im Haus ein individuelles Schloss in der Türe verbaut ist und so sicherstellt, dass Schlüssel und Schloss zusammenpassen, so stellt auch das Protokoll sicher, dass dein Server und der Browser des Besuchers in der richtigen Sprache miteinander kommunizieren.

Zusammenfassung als Tabelle

Das sind die Haupt-Elemente, aus denen eine moderne Website besteht:

Falls dir noch ein Element, Protokoll oder Format rund um deine Website einfällt, über das du mehr wissen möchtest, freue ich mich auf deinen Kommentar!

Lass uns einfach Websites bauen,

Michael

PS: das Video von Fanta 4 ist finde ich sehr kultig und sehenswert!