Website mit HTML und CSS erstellen: So gelingt der Einstieg
- Websites bauen nur mit HTML & CSS – einfach, sicher & nachhaltig
- Vorteile statischer Websites und ohne CMS starten
- Praktische Tipps und ein kostenloses E-Book
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 HTML?
HTML (HyperText Markup Language) vereint zwei wichtige Konzepte: Hypertext beschreibt die nicht-lineare Organisation von Texten, wobei Knoten (Texte/Informationen) über Links verbunden werden. Damit sind Sie in der Lage, Texte und Informationen durch Links miteinander zu verbinden, sodass man von einer Seite direkt zu einer anderen springen kann, ohne eine bestimmte Reihenfolge der Knoten bzw. Links befolgen zu müssen.
Markup bezieht sich auf die Textauszeichnung, die Inhalte semantisch kennzeichnet, z. B. als Überschrift, Absatz, Bild oder Liste.
HTML ist weder eine Programmiersprache, mit der Sie Spiele programmieren können, noch eine Seitenbeschreibungssprache wie PDF oder PostScript, die auf festen Seitenlayouts basieren. Stattdessen definiert HTML die Bedeutung von Inhalten und gibt Dokumenten eine logische Struktur, unabhängig von deren Aussehen oder Position auf einer Fläche. Hier ein paar Beispiele für den Einsatz von HTML:
Beispiel 1
<p>Ich bin ein Satz innerhalb eines Absatzes und das ist ein <strong>besonders wichtiger</strong> Abschnitt des Satzes.<p>Ich bin ein Satz innerhalb eines Absatzes, und das ist ein besonders wichtiger Abschnitt des Satzes.
Beispiel 2
Wenn Sie diesen Code in eine HTML-Datei einfügen und abspeichern und diese Datei im Browser aufrufen, dann würden Sie so etwas sehen:
<ul>
<li>Butter</li>
<li>Milch</li>
<li>Fleisch</li>
</ul>
<ol>
<li>Gold</li>
<li>Silber</li>
<li>Bronze</li>
</ol>Dann würde im Browser Folgendes erscheinen:
- Butter
- Milch
- Fleisch
- Gold
- Silber
- Bronze
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
STRATO Hosting: Ideales Zuhause für deine statische Website
Das klassische Hosting von STRATO bietet eine perfekte Umgebung für Ihre statische Website. Bereits die kleineren Pakete bieten ausreichend Platz für Ihre Ideen. Sollten Sie sich später entscheiden, Ihre statische Website in ein CMS zu übertragen, dann ist dies beim Webhosting-Unternehmen STRATO ebenfalls möglich. Dadurch, dass neben PHP auch Python und Ruby unterstützt werden, sind Sie in der Lage, viele verschiedene Content-Management-Systeme zu betreiben. Abgerundet wird das Hosting-Angebot durch performante Server, die in Deutschland betrieben werden, und die zusätzlich noch hohe Ansprüche an die Nachhaltigkeit erfüllen.
Der Autor: Vladimir Simović
Vladimir Simović setzt seit 2000 mit HTML & CSS und seit 2004 mit WordPress Website-Projekte um. Seit jeher teilt er sein Wissen mit der Community und hat als einer der ersten Blogger im deutschsprachigen Raum zu den WordPress Anfängen Tipps und Tricks veröffentlicht. Seit 2022 ist er als Redakteur für STRATO tätig und verfasst Informationsartikel insbesondere zu WordPress und Hosting-Themen. Im Laufe der Jahre hat er Fachbücher sowie über 60 Fachartikel publiziert und weit über hundert WordPress Projekte betreut.