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 <strong> und </strong> 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.
Wasserdichte Angebote schreiben in nur 10 Minuten?
Hol dir die ultimative Angebotsvorlage für Webdesigner, Web-Programmierer und Online-Marketer.
Tool-Empfehlungen für Webdesigner:innen?
Hol dir die Webdesigner-Tool-Kiste und spar die die ewige Suche nach „dem“ richtigen Tool.
Hosting, Backup, Security, Recht… alles enthalten in der Tool-Kiste.
Ist deine Website datenschutzkonform?
Sei ehrlich: stehst du mit einem Bein im Knast und riskierst du Abmahnungen? Das muss nicht sein.
Mach den DSGVO-Selbsttest!
Bist du 100% sicher, dass deine Website datenschutzkonform ist? In nur 2 Minuten hast du Gewissheit.
Kennst du schon das Business-Membership für alle WordPress-Professionals?
Workshops, Live-Q&A’s, Austausch mit anderen Webdesigner:innen, Co-Working und natürlich professioneller Support für dich. Das sind die Website Heroes.
Elementor Pro um bis zu 20% günstiger!
Ein spezielles Angebot für dich – hole dir Elementor Pro unschlagbar günstig mit dem folgenden Rabatt-Gutschein:
Hol dir Divi bis zu 20% günstiger!
Ein spezielles Angebot für dich – hole dir Divi unschlagbar günstig mit dem folgenden Rabatt-Gutschein:
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:
| HTML | HyperText Markup Language | Quelltext der Website (das Grundgerüst) |
| CSS | Cascading Style Sheets | Aussehen der Website |
| JPG | Bildformat für Fotos | |
| PNG | Transparentes Bildformat für Logos | |
| GIF | Animiertes Bildformat | |
| SVG | Vektorformat, für Logos | |
| JS | JavaScript | Animationen und Effekte auf der Website |
| HTTP(S) | HyperText Transfer Protocol | Richtlinen zur Kommunikation zwischen Browser und Server |
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!
Fragen zu HTML/JS/PHP
Was ist HTML?
HTML steht für „HyperText Markup Language“ und ist die Auszeichnungssprache, mit der Websites geschrieben werden. HTML ist keine Programmier-Sprache, sondern eine Abwandlung von XML.
Der Aufbau von Websites mit HTML erfolgt mittels Tags, welche in spitzen Klammern eingeschlossen werden, zB. so:
<strong>Fetter Text</strong>
So sieht HTML-Code aus:
Wofür wird HTML verwendet?
HTML wird verwendet um Websites (wie diese hier) zu erstellen. Dabei wird eine semantische Struktur aufgebaut, welche anschließend vom Web-Browser dargestellt (=gerendered) wird.
Wie ist HTML aufgebaut?
HTML besteht aus Tags, welche durch spitze Klammern ausgewiesen werden. Zum Beispiel <strong> (für fetten Text) oder <a> für einen Link.
Tags können für sich alleine stehen, z.B. <br /> für einen Zeilenumbruch.
Tags können aber auch Text oder andere Tags umschließen und müssen immer geschlossen werden. z.B. <strong>Fetter Text</strong>
Tags können auch Attribute haben, z.B. <a href="https://mbaierl.com/" target="_blank">....</a>.
Wie kann ich HTML lernen?
Am besten lernst du HTML, indem du es verwendest und deine eigene Websit erstellst!
Hier findest du eine gute Anleitung, um HTML zu lernen.
Wo finde ich mehr Informationen zu HTML?
Wichtige Links, rund um das Thema HTML:
Blog-Beiträge rund um das Thema HTML:
Was ist JavaScript?
JavaScript ist eine Programmiersprache, die sowohl am Client als auch am Server (mittels Node.js) eingesetzt werden kann. Oft wird JavaScript auch als „JS“ abgekürzt.
Üblicherweise wird JavaScript im Browser eingesetzt um „kleinere“ Funktionen umzusetzen. Zum Beispiel ein Mega-Menü, aufklappbare Elemente oder Formularüberprüfungen. Mit JavaScript lassen sich aber auch große Applikationen umsetzen, die im Browser oder auch am Desktop laufen.
JavaScript wird auch verwendet um Desktop-Applikationen zu entwickeln (z.B. mit Electron).
So sieht JavaScript-Code aus:
Wofür wird JavaScript benutzt?
JavaScript wird oft benutzt um kleinere Funktionen auf Webseiten umzusetzen. Zum Beispiel:
- Menüs und Mega-Menüs
- Aufklappbare Elemente
- Slider
- Formularüberprüfungen
JavaScript wird aber auch verwendet um aufwendige Web- oder Desktop-Applikationen zu entwickeln. So ist zum Beispiel die Slack-Applikation mit JavaScript entwickelt.
Ist JavaScript gefährlich?
JavaScript ist nicht weniger oder mehr gefährlich, als jede andere Programmiersprache, auch wenn sie oftmals als unsicher angesehen wird.
Das kommt daher, dass viele Sicherheitslücken in Websites (nicht in JavaScript selbst!) mittels JavaScript ausgenutzt werden. Daher wurde vor einigen Jahren JavaScript im Browser gerne deaktiviert. Was sich aber heutzutage als sehr, sehr unpraktikabel herausstellt.
Insbesondere, weil viel an der Sicherheit der Browser und von JavaScript verbessert wurde:
- JavaScript wird im Browser in einer Sandbox, einem Sandkasten, ausgeführt und kann von Haus aus nicht auf andere Websites oder Dateien am Computer zugreifen.
- JavaScript läuft immer öfter unter strengen Same-Origin-Regeln. Das Script darf also nur auf Dokumente der eigenen Domain, z.B. www.mbaierl.com zugreifen, nicht aber auf andere Domains, z.B. www.google.com
- Popups und andere lästige Scripts werden immer besser direkt von den Browsern blockiert.
Kann JavaScript nur im Browser verwendet werden?
Nein, JavaScript kann sowohl am Server selbst oder auch in Desktop-Applikationen verwendet werden.
Die Verwendung direkt im Web-Browser bleibt jedoch die Hauptanwendung von JavaScript.
Wie wird JavaScript verwendet?
Was ist '$' in JavaScript?
Das Dollar-Symbol ($) ist wie auch der Unterstrich (_) eine ganz normale Bezeichnung für Variablen, Funktionen oder Objekte in JavaScript.
Üblicherweise wird $ von der jQuery-Bibliothek verwenden und _ von underscore.js.
Wie kann ich JavaScript lernen?
Rund um JavaScript gibt es unzählige Online-Kurse.
Aber auch die offizielle Dokumentation von Mozilla ist sehr hilfreich und eine gute Anlaufstelle, um dir einen Überblick über JavaScript zu verschaffen. Dort findest du sowohl Erste Schritte mit JavaScript als auch einen detaillierten JavaScript-Guide.
Wo finde ich mehr Informationen zu JavaScript?
- Die offizielle JavaScript-Dokumentation.
- Anleitung von W3Schools (Englisch)
- The Modern JavaScript Tutorial (Englisch)
Blog-Beiträge:
Was ist PHP?
PHP ist eine weit verbreitete Open-Source-Programmiersprache, die speziell für Web-Entwicklung geeignet ist. Die Befehle von PHP werden dabei direkt in den HTML-Code eingebettet.
Anstelle von Befehlen um HTML-Code zu generieren (wie es z.B. in C oder Perl der Fall wäre) besteht PHP meist aus HTML-Dateien, die PHP Code enthalten.
PHP-Code wird im Unterschied zu JavaScript am Server ausgeführt. Der fertige HTML-Code wird dann vom Server an den Webbrowser gesendet. Der Client sieht also nur die Resultate des Scripts, aber die den Quellcode.
Übrigens, PHP steht für „PHP: Hypertext Preprocessor“ und ist ein rekursives Akronym.
Wofür wird PHP verwendet?
Für fast alles :-)
PHP ist hauptsächlich auf Scripting am Server ausgerichtet und deckt diese drei Gebiete ab:
- Server-Seitiges Scripting – dabei wird der Quellcode am Webserver ausgeführt und zum Webbrowser geschickt.
- Command Line Scripting – hier läuft PHP-Code als Shell-Script ohne Server oder Browser. Übliche Anwendungen sind Scripte, die von Cron regelmäßig ausgeführt werden.
- Desktop Applikationen – auch wenn PHP nicht optimal dafür geeignet ist, so gibt es doch grafische Anwendungen für den Desktop, die in PHP geschrieben sind.
PHP läuft auf allen großen Betriebssystemen (Linux & -Varianten, Windows, macOS …) und wird von allen namhaften Webservern unterstützt (Apache, IIS, nginx, lighthttpd).
PHP kann aber nicht nur HTML-Code ausgeben, sondern auch PDF oder Bilder generieren. Ebenso kannst du mit PHP auf alle gängigen Datenbanken (meist MySQL) zugreifen und auf Services im Internet zugreifen (HTTP, LDAP, IMAP, SMTP usw.).
Welche populären Applikationen mit PHP gibt es?
Es gibt mittlerweile unzählige Applikationen, die mit PHP geschrieben sind. Die bekanntesten sind:
Bekannte Web-Frameworks sind z.B.
- Laravel
- Zend Framework – jetzt Laminas Project
- Symphony
Hier findest du Details zu „WordPress vs. Laravel“.
Wie kann ich PHP lernen?
PHP ist für Programmier-Neulinge sehr einfach zu lernen, PHP bietet aber auch erweiterte Funktionen für professionelle Programmierer.
Eine leicht verständliche Einführung in PHP findest du unter php-einfach.de.
Wo finde ich mehr Informationen zu PHP?
Das offizielle PHP-Handbuch ist eine sehr gute Anlaufstelle.
Weitere gute Quellen:
- php.net – die offizielle Homepage von PHP (Englisch)
- PHP Tutorial auf W3Schools (Englisch)
- PHP auf der Wikipedia (Deutsch)
- PHP Tutorial (Deutsch)
