HTML Code

Wie erstelle ich eine Website?

Für das Blog freue ich mich immer über Wunschthemen. In letzter Zeit, wohl auch durch die Ausgangssperren, erreichten mich mehrere Anfragen von Lesern, die eine Website erstellen wollen und unsicher waren, wie das geht. Sinngemäß lautete die Frage etwa so:

“Meine Tochter [Sohn, Frau, Schwager, Freund, Kollege, ich] möchte eine Website erstellen. Ich kenne ein wenig WordPress [Joomla, Drupal, Typo3] weil XY das auch verwendet. Wo fängt man da am Besten an? Was ist langfristig sinnvoll?“

In diesem Blog Post versuche ich eine Antwort zu geben.

Was ist eine Website?

Die Definition was eine Website überhaupt ist, ist heutzutage gar nicht mehr so einfach, denn Plattformen wie facebook.com, google.com und amazon.com waren ursprünglich ja auch “nur” Websites.

Wikipedia bietet die folgende Definition:

Eine Website […] ist die – unter einer individuellen Webadresse erreichbare – Präsenz eines Anbieters von Telemedien im weltweiten Netz (World Wide Web). Sie ist mit Webtechniken, beispielsweise HTML, erstellt und kann mit einem Nutzeragenten, beispielsweise einem Browser, wiedergegeben werden. …
Anders ausgedrückt: Eine Webpräsenz ist ein virtueller Platz im World Wide Web, an dem sich meist mehrere Webseiten, Dateien und andere Ressourcen befinden, die üblicherweise durch eine einheitliche Navigation (durch Hypertext-Verfahren) miteinander verknüpft sind.

https://de.wikipedia.org/wiki/Website

Was ist HTML?

Mit der Webtechnik HTML lässt sich eine Website erstellen, daher auch hier zunächst die Definition aus Wikipedia

Die Hypertext Markup Language (HTML, englisch für Hypertext-Auszeichnungssprache) ist eine textbasierte Auszeichnungssprache zur Strukturierung elektronischer Dokumente wie Texte mit Hyperlinks, Bildern und anderen Inhalten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von Webbrowsern dargestellt. 

https://de.wikipedia.org/wiki/Hypertext_Markup_Language

Hypertext ist die Vision des Schaffens von Zusammenhängen. Und Smartphones ‒ das wird oft verkannt ‒ sind bei Menschen nicht nur deswegen so beliebt, weil sie stets verfügbare unterhaltsame Daddelkästchen zum Zeitvertreib sind, sondern weil sie Zusammenhänge und Orientierung schaffen. Und Menschen lieben es, wenn Zusammenhänge hergestellt werden. Damit ist noch nichts über deren intellektuelle Schöpfungshöhe gesagt. Auch Klatsch und Tratsch stellen Zusammenhänge her ‒ also wie Welt von WhatsApp. Doch wer erst einmal papierlos auf Reisen war, mit Tickets als vorzeigbaren QR-Codes, mit Navigation und Erlebnistracking, lokalen Informationen zu Sehenswürdigkeiten, Öffnungszeiten und Preisen, Pflanzenbestimmung über Kamerafunktion, Echtzeitverständigung in fremden Sprachen — der weiß, was hier gemeint ist.

Stefan Münz – Zusammenhänge schaffen ‒ SELFHTML wird 25

HTML ist keine Programmiersprache, sondern eine textbasierte Auszeichnungssprache. Wie der Name schon vermuten lässt, werden mittels HTML einem Text Zusatzinformationen mitgegeben, die dem Text dann ein besonderes Aussehen (z.B. kursiv), eine Farbe oder eine besondere Funktion (anklickbarer Link) geben. Eine Textauszeichnungssprache funktioniert so ähnlich wie im Textverarbeitungsprogramm Microsoft Word. Wenn du ein Wort fett gedruckt haben willst, so markierst du es mit einer Maus und klickst anschliessend auf das entsprechende “Fett” Icon, meistens ein schwarz hinterlegtes B, denn fett heisst auf Englisch bold. Das Wort steht nun “fett gedruckt” auf dem Bildschirm. In deiner Textverarbeitung wird diese Information in einer Datei (dateiname.doc) abgespeichert und wenn du diese Datei in deinem Textverarbeitungsprogramm Microsoft Word wieder öffnest, so kann du das fette Wort wieder sehen.

Mit der Sprache HTML kannst du solche Formatierungen vornehmen ohne eine besondere Software wie Microsoft Word zu benutzen. Du schreibst einfach vor dem zu formatierenden Text einen öffnenden ”HTML-Tag” und nach dem zu formatierenden Text einen schließenden “HTML-Tag”. Es gibt ein paar hundert HTML Tags. Für fett gedruckten Text wären das beispielsweise der Tag b und der Tag strong.

<b>fett gedruckter Text</b> oder <strong>fett gedruckt Text</strong>

Aber so detailliert wollte ich das eigentlich gar nicht erklären, weil das am Anfang doch alles nur verwirrt.

SELFHTML – schon mal gehört?

Das Projekt SELFHTML feierte gerade seinen 25. Geburtstag. SELFHTML wurde von Stefan Münz gegründet und hat bis heute das Ziel, eine deutschsprachige Dokumentation zu HTML und verwandten Technologien zur Verfügung zu stellen. Die Dokumentation soll Anfänger gemäß dem aktuellen Stand der Technik an die Erstellung von Webseiten heranführen, aber auch Fortgeschrittenen und Profis als verlässliches Nachschlagewerk dienen.

HTML war für mich viel mehr als nur eine Markup-Sprache. Es war die Zusammenführung von zwei damals noch sehr neuartigen Mächten: Internet und Hypertext. Mit Hypertext hatte ich mich schon seit Beginn der 90er Jahre beschäftigt und war fasziniert von den Visionen dahinter. Über den Aufbau des Internets hatte ich zwar ebenfalls seit Anfang der 90er Jahre rudimentäre Kenntnisse, aber ich wäre von selber nicht darauf gekommen, beides, also Hypertext und Internet, zusammenzudenken. Diese Ehre gebührt bekanntlich dem Erfinder des Web, Sir Tim Berners-Lee.
Wenn man heute über die eigentlichen oder ursprünglichen Konzepte von Hypertext oder Internet reden möchte, so fühlt man sich ein wenig, als wolle man über Hegel oder Kant refererieren. So weit weg, so abstrakt und historisch erscheint das alles längst.

Stefan Münz – Zusammenhänge schaffen ‒ SELFHTML wird 25

In einem Interview im Spiegel sagt Stefan Münz unter anderem:

Die ursprüngliche Idee des Internets war, dass jeder sein eigener Publisher ist. Diese Grundidee ist ein bisschen verloren gegangen. Obwohl es viel einfacher geworden ist, mit einem Blog oder einem Wiki ohne viel technisches Verständnis eine Webseite zu betreiben. Trotzdem wird das Angebot kaum genutzt, weil die Infrastruktur von Plattformen wie Facebook, Twitter und Instagram unerreichbar ist. 

Eine Grundidee des Internets ist verloren gegangen – Spiegel, 08.06.2020

Doch auch wenn die Idee, dass jeder sein eigener Publisher ist, verloren gegangen zu sein scheint, so besteht doch weiterhin jede Website auch heute noch aus HTML Code.

Mit HTML Tags ausgezeichnetem Text, der vom Browser interpretiert und als Webseite dargestellt wird.

Über die Jahre entstand mit der Version HTML5 gewissermassen eine Klammer um alle relevanten Webtechnologien wie CSS (Cascading Stylesheets), die Programmiersprache JavaScript, SVG Grafiken und viele weitere Elemente zusammenzufassen. All diese Erweiterungen machen HTML dynamischer und aktueller als je zuvor.

Auf der SELFHTML Website kannst du auch heute noch wirklich alles Relevante lernen, um eine Website zu erstellen (SELFHTML – wie fange ich an?).

Natürlich wäre es schön, von Anfang an ein Webhosting bei uns zu haben, einen Namen (Domain) zu registrieren und gleich online und öffentlich loszulegen. Vielleicht ist es aber gar nicht verkehrt, sich mal ein paar Stunden in das SELFHTML Wiki zu vertiefen und auf dem heimischen PC einfach mal mit HTML etwas zu bauen. Es ist einfach, kostet nichts und man hat schnelle Erfolgserlebnisse.

Für tausende von Webdesignern war SELFHTML der Beginn einer interessanten, beruflichen Karriere.

Wenn du den Umgang mit HTML und CSS grundsätzlich verstanden hast, wirst du schnell neugierig auf weitere Möglichkeiten. Im Browser bietet JavaScript schnelle Erfolgserlebnisse, genau die Skriptsprache PHP auf dem Server. Für das erste Formular auf der ersten Website, die du erstellst, wirst du vermutlich PHP benutzen. Auch zu JavaScript und PHP bietet SELFHTML Hilfe an.

Content Management Systeme

Wenn du dann wirklich eine Website manuell mit HTML, CSS und JavaScript erstellt hast, wirst du feststellen, wie unglaublich schnell diese Website im Browser geladen wird und wie wenig Platz sie benötigt. Wenn diese Website dann mehrere Seiten und ein Navigationsmenü umfasst, kann es aber schnell unübersichtlich werden im HTML Code etwas zu verändern oder zu ergänzen.

An dieser Stelle kommt vielleicht ein Open Source Web Content Management System (CMS) wie WordPresss, Joomla oder Drupal ins Spiel. Das Novatrend Blog nutzt beispielweise WordPress und enthält hunderte von Artikeln. Wenn ich das alles in reinem HTML schreiben würde, hätte ich viel zu tun. Diese CMS bestehen aus tausenden PHP Dateien, die es ermöglichen, Texte im Browser zu erstellen und zu pflegen. Die Zugriffsrechte werden dabei Benutzerrollen zugeordnet. Man muss sich an der Website anmelden, bevor man etwas verändern kann. Das Aussehen und die Farben der Seiten werden von einem Template bestimmt. In einer Datenbank werden Benutzerkonten, Zugriffsrechte und die eigentlichen Texte verwaltet.

Wer ein CMS nutzt, konzentriert sich meist auf die Inhalte der Website. Wer ein CMS einrichtet, anpasst, aktualisiert oder Erweiterungen dafür schreibt hat oft mehr Spass an der Programmierung, dem Design, den Workflows und vielleicht sogar an der Wartung und Optimierung des Systems. Beide Richtungen sind wichtig, aber oft tendiert man doch zur einen oder anderen Seite.

Wenn die Seite eines CMS aufgerufen wird, dann erzeugt es auf der Basis eines Templates den HTML Code und schickt ihn an den aufrufenden Browser. Das CMS muss dazu in einer Datenbank nachsehen, Zugriffsrechte überprüfen, PHP Dateien interpretieren und allerlei Berechnungen ausführen. Diese Vorgehensweise ist architekturbedingt IMMER langsamer und aufwendiger als eine reine HTML Seite, die einfach durch den Webserver an den Browser ausgeliefert wird. Dieser Nachteil wird aber gern in Kauf genommen, denn es ist ungleich einfacher für den Betreiber ein CMS zu nutzen, als jede Seite manuell zu erstellen. Und für das Geschwindigkeitsproblem gibt es mittlerweile auch einige durchaus befriedigende Lösungsansätze.
Trotzdem ist reines HTML immer schneller 😎.

Wer also ein Blog starten möchte und etwas zu sagen hat, der kann das mit einem CMS sofort tun. Das Wissen um HTML und dessen Funktionsweise erleichtert allerdings die Arbeit mit WYSIWYG Editoren, Inhalten und Content Management Systemen wie WordPress ungemein.

Weltweit hat WordPress heute einen Anteil von mehr als 65 % bei Websites, die mit Content Management Systemen erstellt werden. Auch wenn sich im World Wide Web Dinge schnell ändern, so kann man doch davon ausgehen, dass WordPress ein zukunftssicheres System ist. Das heisst übrigens nicht, dass die anderen System nicht zukunftssicher sind. Sie wenden sich, wie beispielsweise Drupal, an andere Zielgruppen (siehe auch Drupal 9 – und jetzt?). Auch Joomla hat eine treue Fangemeinde und die neue Version Joomla 4 wird mit Spannung erwartet. Die Hauptseite von Novatrend (novatrend.ch) ist übrigens mit dem CMS Contao erstellt.

Offenes Web

HTML, Open Source Content Management Systeme und die dazu notwendigen Serverumgebungen werden als offenes Web bezeichnet, da sie dezentral, kostenlos und von jedem mit etwas Übung benutzbar sind. Jeder kann im offenen Web sein eigener Publisher sein. Es gibt kaum Grenzen, da jede neue Idee prinzipiell auf der Basis der bestehenden Protokolle umsetzbar ist. Und wenn nicht – dann erarbeitet man eben ein neues offenes Protokoll 😉.

Plattformen

Dennoch, sehr viele Leute wollen gar nicht ihr eigener Publisher sein, sondern nutzen kommerzielle Social Media Plattformen wie Instagram oder Facebook oder Website Builder wie Wix.

Diese Plattformen erzeugen technisch ebenfalls HTML Seiten, die dann im Browser dargestellt werden. Im Gegensatz zum offenen Web hast du aber bei Facebook keine Einflussmöglichkeit auf dieses HTML und bei Wix nur indirekt über deren Benutzeroberfläche. Kommerzielle Plattformen haben ein Geschäftsmodell und wollen dich auf der Plattform halten. Ob ein Link zu einer anderen Website, ausserhalb von Facebook oder Instagram erlaubt ist, entscheidet Facebook und nicht du! Bei Open Source CMS kannst du Funktionen, die noch nicht existieren, selbst entwickeln oder dich an der Entwicklung beteiligen. Bei einem System wie Wix ist das schwierig bis unmöglich.

Solche proprietären und eher geschlossenen Systeme sind nicht per se besser oder schlechter als das offene Web. Sie haben Vor- und Nachteile und es ist wichtig sich darüber Gedanken zu machen, bevor man sie nutzt. Es kommt auf deine Wünsche, Ideen und deinen Bedarf an.

Fazit

Wenn du technisch etwas zukunftssicheres lernen willst, solltest du damit beginnen, eine Website mit HTML, CSS und JavaScript manuell zu erstellen. SELFTHTML ist nach wie vor ein guter Startpunkt dafür. Du wirst ständig auf (überwindbare) Hürden stoßen und interessante neue Dinge lernen. So nach und nach wirst du auch lernen, die richtigen Fragen zu stellen und plötzlich auch viel besser Hilfe in Suchmaschinen finden (Die Ergebnisse der Suchmaschine bestehen übrigens auch aus HTML). Du wirst nach und nach die Funktionsweise von Betriebssystemen auf Desktops und Smartphones besser verstehen, denn deine Websites sollen ja darauf laufen. Du wirst schneller digitale Geschäftsmodelle durchschauen, denn du weisst, auf welcher Basis sie aufbauen.

„Richtige Antworten auf Fragen gibt es sofort und umsonst, aber systematisches Verständnis gibt es erst nach gewisser Zeit und nur gegen Hirnschmalz“

Stefan Münz – Zusammenhänge schaffen ‒ SELFHTML wird 25

Es ist ein bisschen wie in einem Computerspiel, nur viel, viel besser. Hinter jeder Tür liegt ein neues Gebiet 😀 und es gibt unendlich viele Türen. In einem Computerspiel ist irgendwann mal Schluss. Im offenen Web mit HTML, CSS und JavaScript geht es dagegen immer einen Schritt weiter.

Links


tl;dr: Es ist auch heute eine gute Idee mittels HTML eine Website zu erstellen!


Beitrag veröffentlicht

in

, , , ,

von

Schlagwörter:

Kommentare

Eine Antwort zu „Wie erstelle ich eine Website?“

  1. […] Wie im letzten Blog Post beschrieben, werden Websites mit HTML, CSS und JavaScript erstellt. Diese Technik ist etwa 25 Jahre alt und eignet sich auch heute noch hervorragend um den Umgang mit Hypertext zu erlernen (siehe auch – Wie erstelle ich eine Website). […]

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert