Ziel ist es, innerhalb einer Woche eine Website im Internet zu veröffentlichen. Die Website soll einfach
strukturiert sein und ohne Javascript oder Frameworks und mit möglichst wenig CSS auskommen. Es geht nur um
die Basics, nichts anderes. Trotzdem soll die Webseite halbwegs ansprechend aussehen und die grundlegenden
Möglichkeiten von HTML5 aufzeigen. Die Webseite ist nicht für Handys optimiert, soll aber auch auf
Smartphones funktionieren.
Um dieses Projekt einfach zu gestalten, gibt es kein ausgefeiltes Tutorial. Der Quelltext kann mit Strg+U
angesehen und in den eigenen Editor kopiert werden.
Was benötigen wir:
Es gibt zahlreiche Webeditoren und -hoster. Phoenix habe ich verwendet, weil sich der Editor im Browser
bedienen lässt. Eine Installation entfällt dadurch. Alternativ lässt sich der Bracket-Editor auch auf der
Festplatte als Programm installieren.
Bei der Wahl des Webhosters war für mich eine einfache Oberfläche zum Hochladen der Dateien ausschlaggebend.
Die vielen HTML-Infoseiten im Internet bieten ausgezeichnete Möglichkeiten für ein tiefergehendes Studium.
Wer z.B. komplexe Bildergalerien verwenden will, findet zahlreiche Beispiele.
Für dieses einfache Projekt habe ich zwei Webauftritte besonders angesehen, einige Beispiele wurden in
Anlehnung der dort veröffentlichten Tutorials abgeleitet. Zum einen Mozilla MDN Webdocs, welches direkt mit
dem Phoenix-Editor verlinkt ist und eine ausgezeichnete Referenz für HTML-Elemente darstellt, zum anderen
selfhtml, eine deutschsprachige Webdokumentation, die viele Beispiele bietet. Beide Webseiten haben
Tutorials, die eine direkte Eingabe des Quelltexts und Anzeige des Ergebnisses ermöglichen. Eine dritte sehr
übersichtliche Webseite mit Online-HTML-Editor ist
Tutorial Republic, die ich ebenfalls sehr empfehlen kann.
Diese Webseite ist rein privater Natur, richtet sich an Freunde und Bekannte und verfolgt keinerlei kommerzielle Zwecke. Ein Impressum entfällt daher. Namensnennung - Weitergabe unter gleichen Bedingungen gemäß CC BY-SA 4.0
Wenn euch die Webseite gefällt, könnt ihr sie gerne teilen.
P.S. Moderne HTML-Editoren können den Code automatisch ausrichten (bei Phoenix ist dies die Funktion
"Code verschönern"), allerdings wird dadurch bei "leeren Elementen", die keinen slash im Endtag haben
sollten, ein Querstrich eingefügt. Der HTML-Validator quittiert dies mit einer Warnmeldung. Ich beacht
die Meldung einfach nicht oder korrigiere dies mit Suchen/Ersetzen.
Wer eine Alternative zu Brackets/Phoenix sucht, wird im Internet schnell fündig. Zum Ausprobieren und
ohne Anspruch auf Vollständigkeit: Stackblitz, Replit, Sublime Text, Visual Studio Code, Android
Studio...
Quellen für den Einstieg in HTML/Webhoster:
selfhtml
Tutorial Republic
Mozilla Webdocs