Worum es geht

Diese Website richtet sich an alle, welche die grundlegenden Werkzeuge für die Erstellung von Webseiten kennenlernen und nutzen wollen. Fertige Content Management Systeme, soziale Netzwerke und andere Plattformen binden an die Formate und Regeln der jeweiligen Plattform. Wer davon unabhängig, individuell und plattformübergreifend gestalten und programmieren will, muss sich mit den Webtechnologien vertraut machen. Dazu möchte diese Website eine Hilfestellung bieten.

Dabei gilt eine Beschränkung auf eine überblicksmässige Präsentation der wichtigsten freien textbasierten Grafik-, Seitenbeschreibungs- und Skriptsprachen. Es geht also darum was man "von Hand", nur mit Text-Editor und somit auch ohne Hilfe von teurer Software alles bewerkstelligen kann. Links zu vertiefenden Websites und Büchervorschläge werden gegeben.

Natürlich kann im Rahmen dieser Website nicht in die Tiefe gegangen werden, ein Web-Designer oder -Programmierer soll sich hier aber anschaulich (mit Präsentationen von Beispielen) über technische Möglichkeiten mit Text-Codes fürs Homepage-Erstellen orientieren können.

Ein besonderes Augenmerk gilt den wichtigsten Aspekten des grundlegenden Aufbaus einer Webseite. Also wie wird eine Webseite codiert damit sie auf möglichst vielen Geräten mit gewünschtem Layout korrekt dargestellt werden kann, mitsamt Text, Grafiken, Videos, Animationen und was man auch immer darstellen möchte. Und wie auch eine Interaktion der Benutzer mit Datenverarbeitung programmiert werden kann (mit den wichtigsten Codefragmenten, da ich hier natürlich keinen Programmierkurs geben kann).

Es werden nur technische, aber keine konzeptuellen-, Design- oder sonstige Aspekte des Webdesigns behandelt.

Web-Developer-Bild

Die meines Erachtens wichtigsten 5 Techniken:

HTML
HTML - Das Grundgerüst einer Webseite. HTML dient als Auszeichnungssprache dazu, Webseitenelemente (Text, Bilder, Videos,...) semantisch zu strukturieren, und Metainformationen zum Dokument zu speichern (wie Sprache, Autor, Zeichensatz,...).
CSS
CSS - Hier geht es um die Text-und Layoutgestaltung, also die Formatierung resp. visuelle Darstellung der Webseitenelemente. Es wird z.B. festgelegt welche Farbe, Grösse und Position ein Textfeld hat.
JavaScript
Javascript - Die wichtigste clientseitige Skriptsprache welche auf die Browser-Daten des Benutzers zugreifen, und diese verändern kann. Webseitenelemente können so dynamisch verändert, z.B. nach Benutzereingaben bewegt werden.
SVG
SVG - Es ist wie HTML eine textbasierte Auszeichnungssprache welche Grafiken und Texte vektorbasiert definiert. Damit lassen sich insbesondere Logos, Icons, Diagramme,... genau formatieren, verändern und animieren
PHP
PHP - Die wichtigste serverseitige Skriptsprache. Damit lassen sich Daten auf dem Webserver abfragen, speichern und verändern. Das ermöglicht auch den Aufbau von komplexen Web-Applikationen wie Online-Shops oder Online-Spiele.

Eine möglichst "perfekte" Website baut auf dem richtigen Zusammenspiel dieser Werkzeuge. HTML, CSS und JavaScript sind essentiell für dynamische Webseiten. Auf SVG könnte man verzichten, aber dann würde man die weitreichenden grafischen Möglichkeiten reduzieren. Und statt PHP könnte man auch andere serverseitige Skriptsprachen verwenden. Aber ich beschränke mich hier auf PHP, da es eine freie und die am meisten verfügbare Skriptsprache auf den Webservern ist.