Website nur mit HTML & CSS – geht das?
Viele Menschen denken, dass sie mit HTML und CSS lediglich an ein paar Stellen das Design einer Website anpassen können. Aber diese beiden Sprachen sind viel leistungsfähiger. Sie können allein mit HTML und CSS ansehnliche und voll funktionsfähige Websites erstellen, und sie bieten sogar eine Menge Vorteile.
Wer eine Website erstellen will, muss dazu nicht sofort ein Content-Management-System (CMS) wie WordPress, Joomla oder Drupal installieren, mit Skripten oder Datenbanken hantieren oder teure Software kaufen.
Statische Websites haben eine Reihe an Vorteilen gegenüber den dynamischen Websites, die durch ein CMS generiert werden:
Niedrige Anforderungen an den Server
Statische Websites stellen deutlich niedrigere Anforderungen an die Webserver. PHP oder Datenbanken sind nicht notwendig. Das spart Strom und Rechenkraft des Servers, Geld und hat dadurch einen deutlich grüneren CO₂-Fußabdruck als dynamische Websites, die ein CMS benötigen.
Hohe Sicherheit
Dadurch, dass statische Websites weder Javascript noch PHP, MySQL & Co. benötigen, bieten sie deutlich weniger Angriffsfläche und sind somit erheblich sicherer und wartungsarmer als die dynamischen Varianten, die mit einem CMS betrieben werden.
Niedrige Anforderungen an das Know-how
Dadurch, dass Sie "nur" HTML und CSS lernen müssen, stellen die statischen Websites, gegenüber dynamischen Exemplaren, auch deutlich weniger Anforderungen an Sie, da Sie sich nicht noch zusätzlich mit diversen Skriptsprachen, Frameworks und Datenbanken auseinandersetzen müssen.
Was benötigen Sie für eine Website mit HTML?
Für den Anfang ist leichtes Gepäck völlig ausreichend: ein wenig Platz auf der Festplatte, ein Text- oder Code-Editor , der Browser und eine solide Portion Neugier.
Bei den Code-Editoren haben Sie viel Auswahl. Viele schwören auf den kostenlosen Editor von Microsoft: Visual Studio Code . Dieser Editor ist allerdings mächtig und lässt viele Konfigurationsmöglichkeiten offen. Das kann am Anfang der Reise etwas einschüchternd wirken, daher ist Notepad++ eine gute Alternative, da viele Standardeinstellungen aktiviert sind, was Ihnen den Einstieg erleichtert.
Die Wahl des Browsers bleibt Ihnen überlassen. Ob Firefox, Chrome, Safari oder Opera. Alle gängigen Browser beherrschen HTML und CSS.
Erst, wenn Sie das Projekt abgeschlossen haben und es im Web verfügbar machen möchten, wird ein Webhosting-Paket benötigt, wie ein STRATO Hosting-Paket , und ein FTP-Programm , um die Dateien auf den Webspace des Servers hochzuladen.
Was ist CSS und wie kommt es zum Einsatz?
CSS (Cascading Style Sheets) ist eine Beschreibungssprache und dient als Ergänzung zu HTML. Bei einer gelungenen Umsetzung herrscht zwischen HTML und CSS eine strikte Arbeitsteilung.
HTML kümmert sich darum, dem Inhalt eine Bedeutung und dem Dokument eine logische Struktur zuzuweisen. Das CSS ist für die Formatierung und Darstellung der einzelnen HTML-Elemente und des gesamten Webdokuments im Browser zuständig.
Um CSS einzubinden, stehen Ihnen drei Wege zur Verfügung: inline, eingebettet und als externe Datei. Die ersten beiden Möglichkeiten sollten Sie sparsam anwenden, da es schnell unübersichtlich wird. Es ist vorteilhaft, alle CSS-Angaben zentral auszulagern. Bei der Inline-Einbindung werden die CSS-Angaben innerhalb des jeweiligen HTML-Elements eingetragen, und dies als Attribut im öffnenden Tag:
<p style="color: navy;">Dieser Text wird in einem dunklen Blau angezeigt.</p>
Das eingebettete CSS wird innerhalb von <head></head> untergebracht, und zwar nach dem folgenden Muster:
<style type="text/css"> .inhalt {color: maroon;}</style>
Die Variante, die am meisten angewendet wird, ist die Einbindung einer externen CSS-Datei, in der alle notwendigen CSS-Angaben zentral gelagert werden. Auch den Verweis zu der externen CSS-Datei bindet man innerhalb von <head></head> ein:
<link rel="stylesheet" type="text/css" href="style.css">
Websites erstellen mit HTML & CSS – als gratis E-Book
Dieser Artikel hat gerade mal an der Oberfläche gekratzt. Das Thema angemessen abzuhandeln, würde den Umfang eines Artikels bei Weitem sprengen. Daher haben wir für Sie ein umfangreiches und kostenloses E-Book zur Verfügung gestellt. Auf 48 DIN-A4-Seiten wird das Thema HTML und CSS umfangreich und praxisbezogen behandelt. Sie lernen nicht nur die notwendigen theoretischen Grundlagen zu HTML und CSS, sondern auch, wie Sie das Gelernte in einem konkreten Projekt umsetzen. Auszug aus dem Inhalt:
- Was ist HTML und was nicht?
- Anforderungen an den Server
- Was ist CSS und wofür ist es gut?
- Die Kaskade und die Selektoren
- Block- und Inline-Elemente
- Das Schriftbild mit CSS anpassen
- Das Gelernte HTML und CSS in einem Projekt umsetzen
- Vieles mehr
Hier geht es zum E-Book
