Zum Entwickeln von Webseiten braucht man nicht viel.
Man braucht:
Einen Texteditor.
Ein paar verschiedene Browser
Einen Ort, an dem die Dateien (HTML, CSS, JS) abgelegt werden.
Bei Bedarf noch irgendwelchen Kleinkram.
Entwicklungsumgebung
Entwicklungsumgebung einrichten
Editor
Man kann sich die Wahl des Editors leicht oder schwer machen.
Regeln fürs "Leichtmachen":
Wer schon einen "Lieblingseditor" hat, nimmt den.
Wer lieber mit einer IDE arbeitet, sollte dabei erst mal bleiben.
Unter Windows sollte man "notepad++" installieren.
Unter Mac sollte man "CotEditor" installieren.
Unter Linux kann man den "Hauseditor" der Benutzeroberfläche benutzen oder "kate" installieren. (Das geht übrigens auch unter Windows.)
Mein Tipp: "Bluefish".
Bluefish war lange Zeit der einzige - und damit beste - Editor zum Bearbeiten von HTML und CSS Dateien. Da er aus einer Zeit kommt, in der Webseiten noch per Hand geschrieben wurden, hat er viele Features, die Anfängern das Leben leichter machen.
Ich würde Anfängern nicht empfehlen, mit einem der mächtigen Editoren VSCode, Sublime-Text oder CudaText anzufangen.
Die Dinger haben einfach zu viele Knöpfe und anstatt Webseiten zu schreiben, ist man damit beschäftigt, den Editor zu erforschen.
Browser
Man braucht beim Entwickeln einenn Browser, um sich das Ergebnis anzusehen. Na klar. Am besten mehrere, damit man sich seine Ergebnisse in unterschiedlichen Browsern ansehen kann. Die "rendering engine" spielt dabei ein wichtige Rolle.
Hintergrund: "rendering engine"
Die "rendering engine" ist eine Programmblock innerhalb eines Browsers, der für die Darstellung einer Seite verantwortlich ist.
Stand 2024 gibt es drei "rendering engines": blink, gecko und WebKit.
blink wird im chromium Projekt entwickelt. Viele Browser arbeiten damit. U.A. sind das Google Chrome, Microsoft Edge, Opera, Vivaldi ...
gecko ist älter als blink und wurde vom Mozilla entwickelt. gecko wird in Firefox verwendet.
WebKit hat eine bewegte Vergangenheit. Ursprünglich war es ein KDE Projekt und wurde dann von Apple übernommen. Heute werkelt die Maschine in Safari und im GNOME Browser epiphany.
Die Browser, die bei jedem Betriebssystem mitgeliefert werden, sind:.
Windows: Edge mit blink.
Mac: Safari mit WebKit
Linux: Firefox mit gecko
Was man installieren sollte
Eine volle Abdeckung aller relevanten "rendering engines" gibt es nur unter Apple und mit Einschränkungen unter Linux.
Was man machen sollte:
Windows
⇒ Firefox installieren
Mac
⇒ Firefox installieren
⇒ Chromium installieren oder alternativ
⇒ Google Chrome installieren
Linux
⇒ Chromium installieren
⇒ epiphany installieren
Die "Entwicklerwerkzeuge" im Browser
Jeder Browser hat ein verstecktes Fenster, in dem man sich technische Details zur aktuellen Webseite ansehen kann. Das ist nicht jedermanns Sache, weil in diesem Werkzeug eine geradezu unglaubliche Menge an Informationen steckt, die man nur als Vollblutprofi wirklich würdigen kann.
Aber auch Neulinge sollten sich damit vertraut machen, wenn auch am Anfang nur oberflächlich.
Geöffnet wird das Fenster mit den Entwicklerwerkzeugen in allen Browsern außer Safari mit der Funktionstaste F12. (Bei Safari bitte über Menü->Entwickler->Webinformationen gehen.)
Das Aussehen und die Funktionsweise der Entwicklertools ist zum Glück mittlerweile in allen Browsers (auch Safari) sehr ähnlich bis identisch.
Das Allerwichtigste im Schnelldurchgang
Geöffnet werden die Entwicklertools in Firefox mit F12.
Entwicklertools mit Positions-Menü
Entwicklertools in Firefox.
Auf der rechten Seite ist ein Menü aufgeklappt, in dem man die Position des Fensters bestimmen kann.
Die beiden roten Pfeile zeigen auf die Reiter, die man auch braucht, wenn man erst anfängt, Webseiten zu entwickeln und vom Rest der Entwicklertools noch keine Ahnung hat.
Klappt man den Reiter "Konsole" auf, so sieht man Meldungen des Browsers zu der aktuellen Seite.
Die "Konsole" in den Entwicklertools.
Beispiele Meldungen in der Konsole
In der Konsole tauchen Fehlermeldungen und Warnungen des Browsers auf. Es werden dort auch Meldungen angezeigt, die aus JavaScript Programmen kommen.
Hier kann man auch die Meldungen sehen, die man selber in JavaScript Programmen per console.log(...) abgesetzt hat.
Der Reiter "Netzwerk" zeigt Informationen zum Hin und Her zwischen Browser und Webserver.
Der Reiter "Netzwerk" in den Entwicklertools.
Netzwerkanalyse
Unter diesem Reiter wird der Datenverkehr zwischen Browser und Webserver dargestellt. Das ist eher was für Profis.
Es gibt hier aber auch noch einen ganz unauffälligen Schalter mit Namen "Cache deaktivieren". Der heißt in anderen Browsern unter Umständen leicht anders, befindet sich aber überall an dieser Stelle.
Dieser Knopf ist beim entwickeln so extrem wichtig, dass man ihn gar nicht überbewerten kann.
"Cache deaktivieren" bewirkt, dass das Caching im Browser ausgeschaltet wird und der Browser immer alle externen Daten - JS, CSS, Bilder etc. - bei jedem Laden der Seite neu lädt.
Der Cache ist normalerweise aktiviert, aus gutem Grund. Es spart Datenmenge und damit Ladezeiten.
Aber wenn eine Webseite gerade entwickelt wird, dann will man im Browser beime Neu-Laden das sehen, was man gerade geändert hat und nicht das, was der Browser im Cache hat. Das hat sich nämlich nicht geändert.
Hat man den Cache ausgeschaltet, so kann man sich schier die Haare raufen, die gerade gemachten Änderungen in einer .css Datei werden vom Browser einfach nicht berücksichtigt.
Sonstige Werkzeuge
Man braucht von Fall zu Fall alle möglichen kleinen Tools. Z.B. um Screenshots zu machen, Änderungen an Bildern vorzunehmen, Dateien von A nach B zu kopieren etc.
Alle Betriebssysteme liefern dazu irgendetwas. Zu Anfang sollte man sich damit behelfen.
Dateiablage
Die Ordnung bei der Ablage der Dateien kann bei größeren Projekte ganz schön diffizil werden und man sollte sich von Anfang an Gedanken darum machen und das Thema im Auge behalten.
Zu Anfang reicht es allerdings, wenn man sich in seinem Home-Verzeichnis einen Unterordner anlegt, um die Dateien an einer Stelle zu sammeln. Unterhalb dieses Ordners ist eine weitere Struktur später notwendig, am Anfang aber lediglich "nice to have".
Später müssen dann Überlegungen herangezogen werden, die stark mit der konkreten Website verbunden sind: Sind Artikel eher unabhängig oder verzahnt? Werden Ressourcen eher gemeinsam genutzt oder für einzelne Seiten separat verwendet? Welche Teile der Website verändern sich schnell, welche sind eher stabil?
Aber das ist später.
Wer schon bei der Planung feste Strukturen einbaut, muss später mehr umbauen.
Informationsbeschaffung
Allgemeine Infos
Links für allgemeine Informationen zu Webtechnologien
Wie zu den meisten Themen ist das Web voll von guten (dummerweise manchmal auch schlechten) Seiten zu Webentwicklung.
Die folgenden drei Links verweisen auf Seiten, mit denen man als Anfänger etwas anfangen kann, die man aber auch später zum Nachschlagen und Vertiefen von Wissen benutzen kann.
MDM
Das Mozilla Developer Network wird von Mozilla, dem Hersteller von Firefox, betrieben. Dort ist vermutlich die größte Menge an geballtem Wissen zu Web Entwicklung enthalten, die man an einem Ort finden kann. MDM ist in erster Linie ein Nachschlagewerk, bietet aber auch Tutorials.
w3schools
Wie der Name schon sagt, ist w3schools eine OnLine Schule. Hier steht das Lernen im Zentrum. Es wird alles behandelt, was irgendwie mit Webentwicklung zu tun hat. w3schools kann aber durchaus auch zum Nachschlagen dienen.
selfhtml
selfhtml ist eine Seite auf deutsch. Sie bietet Kurse und Referenzen zu HTML, CSS und JavaScript. Ähnlich wie w3schools steht auch hier das Lernen im Mittelpunkt. Man kann selfhtml aber auch sehr gut als erste Anlaufstelle zum Nachschlagen benutzen, vor allem, weil die Seiten den Link zum jeweiligen Thema auf MDM enthalten.
Links zum Einsteigen
Links für den Anfangen und zum Einsteigen
Die nächsten Links sind "deep links" in die Webauftritte der erwähnten Organisationen und verweisen auf die jeweiligen "Einsteigerseiten".
HTML basics
Eine der angeboten Einsteigerseiten bei MDM. MDM bietet verschiedenen Einstiegswege an. Dies ist ein Verweis auf den Einstieg über HTML.
Nützliche Links
Was man bei der Arbeit gut gebrauchen kann
HTML Validierung
Auf dieser Seite des W3C kann man eine HTML Datei hochladen und überprüfen lassen. Sagt der Validator Ok, dann ist die Seite technisch korrekt. Punkt.
Meine Empfehlung ist, diesen Service häufig - auch zwischendurch - zu nutzen. Das gibt Sicherheit.
Stand heute (2024) gibt es zwei Gruppen in der Welt, die sich um die Standardisierung von WWW Dingen rangeln:
Das W3C (World Wide Web Consortium) und
die WHATWG (Web Hypertext Application Technology Working Group).
Beide Gruppen bringen eine Unmenge Standards heraus. Beide Gruppen sind sich spinnefeind, haben aber seit 2018 für sich eine Aufgabenverteilung geschaffen. Die sieht formal so aus, dass die WHATWG für DOM und HTML zuständig ist und das W3C für CSS und das ganze Drumherum.
Das Stöbern auf den Seiten dieser Organisationen ist für Anfänger u.U. frustrierend, weil ihr Inhalt sich eher an Produzenten von Browsern richtet, als an Autoren von Webseiten. Trotzdem sollte man sie kennen, weil ihr Inhalt im Zweifelsfall den Charakter eines "Obersten Gerichtshofs" hat.
Hier die Links zu den aktuellen Standards für HTML und CSS.
Wenn man irgendetwas neu anfängt, liegen jede Menge Tretminen herum.
Das gilt für jedes Gebiet: Kochen, Autofahren, Vorträge halten, Bergsteigen, Web Seiten bauen.
Man kann nicht jede einzelne Tretmine vermeiden, aber die Minen treten manchmal in regelrechten Minenfeldern auf. Und die kann man durchaus vermeiden.
Hier die Tips dazu:
Zuerst HTML
Tipp 1: Mit dem Inhalt und der Struktur anfangen
Kümmere dich zuerst um den Inhalt. Danach packe den Inhalt in ein ansprechendes Layout.
In der Praxis heißt das, dass man damit beginnt, in einem HTML Dokument aufzuschreiben, was man zu sagen hat. Dieses Dokument strukturiert man durch kluge Verwendung von HTML Elementen.
Damit wird schon beim Schreiben des Inhalts eine logische Struktur aufgebaut und in HTML festgehalten.
Es ist wichtig, zu verstehen, dass diese Struktur definitiv und überhaupt rein gar nichts mit Layout zu tun. Struktur hat etwas damit zu tun, wie die einzelnen Teile des Inhalts gewichtet sind, wie sie geordnet sind und wie sie inhaltlich zueinander in Beziehung stehen.
"Struktur" und "Layout" sind zwei verschiedene Dinge.
In einem zweiten Schritt - erst danach - wird mit CSS das Layout des Dokuments aufgebaut. Das CSS Layout stützt sich auf die im HTML vorgegebene Struktur.
Später, wenn man mit dem 08/15 Vorgehen am Ende ist, kann man anfangen, Klassen zu definieren, die rückwirkend im HTML verankert werden, um ein feineres Design zu erlauben. Das ist fast immer irgendwann nötig, weil die wenigen semantischen Tags von HTML5 für ein anspruchsvolles Layout nicht ausreichen.
Wie auch immer der zweite und weitere Schritte aussehen mögen: Sie sollten nach dem Ersten kommen.
Semantic tags
Tipp 2: Semantic tags für die Struktur benutzen
Es gab zwar in HTML schon lange semantische Elemente, aber erst mit HTML5 wurde das Konzept erwachsen und brauchbar.
Jetzt erst macht es Sinn, eine systematische Unterscheidung zwischen semantischen und technischen Elementen zu treffen und die beiden Arten auch systematisch unterschiedlich einzusetzen.
Und es macht absolut Sinn, sich mit der Bedeutung dieser Tags wirklich auseinanderzusetzen und sie dann auch zu benutzen.
Also: Von Anfang an <article>, <main> und <header> ... benutzen und nicht <div class="main"> oder <p class="header">.
Genauso hilfreich sind ältere semantische Tags wie <kbd>, <samp>, <code> und <strong> ...
Wenn man das Konzept von Anfang an durchdacht und konsequent einsetzt, hat man später jede Menge Freiheiten, das Layout zu verfeinern.
Macht man es nicht und verschlampt es zu Anfang, hat man später jede Menge Stress, Aufräumarbeiten zu betreiben.
Webseiten, die für einen Standardmonitor optimiert sind, sind auf Smartphones schlecht bis gar nicht lesbar.
Mache das Layout daher am Anfang so, dass man es auf dem kleinsten möglichen Gerät lesen kann. Das sind in der Regel Mobilfunkgeräte, daher der Slogan: "mobile first".
Danach baue bei Bedarf Dinge ein, die die Seite auf größeren Bildschirmen attraktiver machen. Dabei kann es sich um andere Bilder handeln, oder einen Seitenrand, oder breitete Menüs oder was auch immer.
Ist die Webseite auf Smartphones lesbar, ist sie es auch auf 32" Monitoren. Umgekehrt gilt das überhaupt nicht!
Pures HTML ist von Hause aus absolut responsive, d.h. es wird vom Browser automatisch an die Fähigkeiten des aktuellen Ausgabegerätes angepasst. Fängt man mit purem HTML an, sind die Seiten von Anfang an reponsive.
CSS Erweiterungen, die danach auf ein schöneres Layout bei großen Bildschirmen abzielen, sind bei diesem Vorgehen ein nice to have aber kein must have.
Leute, die diesen Tipp befolgen, brauchen bei dem Schlagwort "Responsive Web Design" nicht nervös zu werden.
Aktuelle Technologie
Tipp 4: Veraltete Technologie ignorieren
Das Web ist voll mit Artikeln und Beispielen, die sich mit alter Technologie beschäftigen. Insbesondere werden viele Worte, Artikel und Beispiele ver(sch)wendet, um Besonderheiten des Internet Explorer einzufangen.
Wir leben in 2022 und nicht 2002. Die Zeiten, in denen Webseiten für einzelne Browser - oder gar für bestimmte Versionen bestimmter Browser - zurechtgebastelt werden mussten, sind vorbei. Vergangenheit. Trotzdem ist das Web noch immer voll mit Artikeln, die sich damit beschäftigen: Im Web wird ja nicht aufgeräumt.
Gerade Leute, die dabei sind, sich in Webentwicklung einzuarbeiten, kann das verwirren und sie sollten diese Art von Alteisen gar nicht erst anpacken. Es gibt Wichtigeres.
Unterschiede zwischen den aktuellen Browsern gibt es zwar noch, aber die sind vergleichsweise gering.
Für diejenigen, die sich näher mit "Browserkompatibilität" auseinander setzen wollen:
Normalize vs. Reset. Ein Beitrag über Möglichkeiten, die Unterschiede bei den Browsern zu verringern.
normalize.css. Eine CSS Datei, die man vor seinen eigenen CSS Dateien einbinden kann, um das Erscheinungsbild in verschiedenen Browsern zu vereinheitlichen.
Baukästen, Frameworks, Bibliotheken: Für und Wider
Warum per Hand bauen, wenn alles schon da ist?
Es gibt gute Gründe, Baukästen einzusetzen.
Allerdings gibt es auch Gründe, die gegen den Einsatz von Baukästen - und in abgeschwächter Form auch Bibliotheken - sprechen. Diese Gründe sind oft nur die Kehrseite des jeweiligen "guten Grundes". Oder der Preis (in Zeit oder Geld), den man für den Einsatz von Baukästen zahlen muss.
Hier ein paar gute Gründe für Baukästen und gleich darunter Gedanken, die dagegen sprechen könnten:
Ein Baukasten ist einfach einfacher. Man muss dieses ganze technische HTML und CSS Zeugs nicht lernen.
Ja, das stimmt. Na ja, zumindest in Grenzen. Aber man ist gebunden. Ein Wechsel des Baukastens (des Anbieters) ist ohne kompletten Neubau i.d.R. nicht möglich.
Beim Baukasten braucht man sich um Vieles keine Gedanken zu machen.
Ja, das stimmt. Aber man muss auch mit dem leben, was angeboten wird. Gedanken machen ist Zeitverschwendung, weil man eh nichts ändern kann.
Beim Baukasten sieht der Auftritt im Web sofort professionell aus und trifft die Erwartungen der Besucher.
Ja, das stimmt. Er trifft die "Seh"-Erwartung der Besucher, d.h er sieht aus wie viele andere Auftritte und wird vom Besucher durchgewunken.
Es ist mit Aufwand verbunden, wenn man sich die Grundlagen von HTML und CSS aneignen will. Es ist aber auch mit Aufwand verbunden, sich in die Funktionen eines Baukastens oder einer Bibliothek einzuarbeiten. Je mehr so ein Baukasten kann, um so mehr Zeit muss man investieren, um die vorhandenen Funktionen auch zu nutzen.
Steckt man den Lernaufwand in einen Baukasten, beherrscht man das Werkzeug.
Steckt man den Lernaufwand in HTML, CSS, JavaScript, etc., beherrscht man die Technologie.
Den eigentlichen Inhalt, den "Content" eines Auftritts kann man immer irgendwie von handgeschriebenem HTML/CSS in ein Baukastensystem überführen. Andersherum ist das nur schwer oder gar nicht möglich ist. Die Entscheidung für einen bestimmten Baukasten ist daher schon eine langfristige Entscheidung, die man später nur schwer wieder umändern kann.
Aber wenn Leute an der Technologie überhaupt nicht interessiert sind, sondern nur am "Content" - und wie er rüberkommt -, dann sind sie mit einem Baukasten sicher besser bedient.
Letztendlich ist es - wie so oft - eine individuelle Entscheidung.
