Grundsätzlich setzen sich alle Webseiten aus HTML, CSS und JavaScript zusammen.

In HTML (HyperText Markup Language) ist die Struktur der Seite notiert, es wird angegeben, was welches Element ist und unsichtbare Funktionen zugewiesen.

  Mit CSS (Cascading Style Sheet) wird das Aussehen aller Elemente – und wie sie sich zueinander verhalten – festgelegt. Sowohl Farben, Grösse und gewisse Animationen werden hier festgelegt.

  JavaScript (kurz JS) sich Dinge verändern können. Mit JS-Funktionen können Eingriffe in die HTML-Struktur und die CSS-Attribute vorgenommen werden.

  Eine Webseite ist grundsäzlich nichts anderes, als ein Ordner mit verschiedenen Textdokumenten, die einem gewissen Standard folgen, um von Programmen, die wir ‹Browser› nennen, gelesen werden zu können. Im HTML-Dokument werden die anderen Elemente angesteuert, auch Bilder, Videos, externe Links können eingebettet werden.

  Um eine Webseite von Grund auf selber zu entwickeln, ist der Code-Editor Visual Studio Code gut geeignet. Dieser kann nach eigenem Gutdünken mit Extensions aufgerüstet werden, beispielsweise mit einer Live-Preview, durch die der aktuelle Stand der Webseite in Echtzeit angeschaut werden kann. Auch der GitHub Copilot, eine für Coding trainierte KI-Assistenz ist auf VSCode installierbar (also kein ständiges hin- und herkopieren zu ChatGPT und riesen Ressourcen-Verbrauch durch ständige externe Online-Anfragen).

Als Nachschlagewerk, aber auch für das Erarbeiten der Grundlagen sind die MDN-Dokumentation und die W3Schools tolle Ressourcen. Meist ist einen einfache Google-Suche schon genug, um ein Forum (bestes Beispiel Stack Overflow) zu finden, wo genau die Frage schon behandelt wird. Natürlich ist wie oben erwähnt der KI-Agent Copilot für Code-Arbeiten bestens geeignet. Zumindest ein eigenes Grundverständnis mitzubringen ist definitiv hilfreich. Und ausserdem ist überschaubarer und verständlicher Code einfach praktischer.

Damit die Webseite im Internet zugänglich ist, muss dieser oben erwähnte Ordner ‹gehosted› werden. Dafür gibt es viele Möglichkeiten. Einer der Standards ist GitHub. Hier können alle möglichen Code-Sammlungen bewirtschaftet werden. Es gibt eine integrierte Funktion, die aus den hochgeladenen Dateien eine Webseite zusammenstellt, welche sogar mit einer eigenen Domain verknüpft werden kann. Portale, um so eine Domain zu erlangen wären beispielweise Infomaniak und Hostpoint.

Dynamisch nennt man solche Webseiten, deren Gerüst steht, deren Inhalt aber über ein externes Tool (Backend) befüllt werden kann. Dafür wird beispielsweise ein CMS (content management system) aufgesetzt. Dafür gibt es zahllose Anbieter. Bei externen Services ist es aber angebracht, genau hinzuschauen. Grosse, multinationale Anbieter sind oft datenschutztechnisch fragwürdig, während lokale Lösungen (siehe oben) eher vorzuziehen sind.

Cargo ist ein Tool, das mit einem Baukastenprinzip zulässt, Seiten mit gestalterischem Anspruch zusammenzustellen. Hier braucht es an sich keine Programmierfertigkeiten. Als zusätzliches Argument kann man Schriften von ABC Dinamo verwenden. Für Schüler:innen und Studis ist das Tool gratis (nach einmaliger Anmeldung der Schule).

Portfolioseiten:
Roger Schnyder (HTML, CSS, JS, GitHub & Infomaniak), Lea Neuenschwander (aufgesetzt über ein CMS), Selen Meric (Cargo)

andere Umsetzungen:
Definitionsmasse (Projektsammlung), Referenzrahmen (Hypertextumsetzung), Endless Horse (dynamische ASCII-Art)

Und hier geht's zum Glossar.