Meist stecken hinter Websites Content-Management-Systeme (CMS) wie WordPress, welche über die Scriptsprache PHP und Themes die HTML-Seiten erzeugen. Die Inhalte stammen aus einer Datenbank, die bei jedem Seitenaufruf abgefragt wird. Statische Websites, die nur aus wenigen Seiten bestehen, können Sie aber auch manuell erstellen. Solche Seiten werden sehr schnell ausgeliefert und ersparen die Sicherheitsupdates für das CMS. Änderungen erfordern allerdings stets den Eingriff in den HTML-Code. Hierfür sind Grundkenntnisse in HTML und CSS unerlässlich. Diese sind aber auch nützlich, wenn Sie bei einem CMS das Design ändern oder den Quellcode für die Suchmaschinenoptimierung untersuchen wollen.

Hinweis:
Alle in diesem Artikel erwähnten Beispiele können Sie als ZIP-Archiv herunterladen .

1. Dazu dienen HTML und CSS

HTML (Hypertext Markup Language) ist eine Auszeichnungssprache, die Textdokumente strukturiert. Dazu dienen Paare von Tags („Etikett“, „Anhängeschild“), die in spitzen Klammern stehen wie „ … “. Der Anfangs-Tag bezeichnet den Beginn eines Blocks. Dem End-Tag ist ein „/“ vorangestellt.

Artikel auf Webseiten tragen in der Regel eine Überschrift, die zwischen „

“ und „

“ steht. Längere Beiträge lassen sich mit Hierarchien von Überschriften weiter unterteilen, beispielsweise „

…

“ und „

…

“. Nach den Überschriften folgen jeweils Absätze, die zwischen den Tags „

“ und „“ untergebracht sind. Eine Übersicht mit allen HTML/CSS-Elementen finden Sie auf https://wiki.selfhtml.org .

Struktur und Formatierung: HTML bildet nur die Struktur von Seiten mit Überschriften und Absätzen ab. Eine H1-Überschrift sieht also nicht unbedingt anders aus als der übrige Text. Der Browser stellt die Elemente trotzdem unterschiedlich dar, weil er intern festgelegte Formatierungsregeln verwendet. Meist werden Sie Formatierungen wie Schriftgröße, Schriftart und Zeilenabstand aber selbst bestimmen wollen. Dafür setzen Sie Cascading Style Sheets (CSS) ein. Die CSS-Definitionen können Sie im Prinzip auch in der HTML-Datei unterbringen, besser ist es jedoch, eine externe Datei zu verwenden, die dann für die komplette Website gilt (-> Punkt 4) und zentral geändert werden kann.

Schreibweisen: HTML und CSS unterscheiden nicht zwischen Groß- und Kleinschreibung. Gewöhnlich werden jedoch ausschließlich Kleinbuchstaben verwendet. Mehrere Leerzeichen, Tabs und Zeilenumbrüche spielen in HTML keine Rolle – der Browser ignoriert sie. Datei- und Ordnernamen sollten nur aus den Buchstaben a bis z bestehen, Ziffern sind ebenfalls möglich. Verwenden Sie statt Leerzeichen Bindestriche („-“) und keine Sonderzeichen oder Umlaute wie „ä“ oder „ö“.

2. Entwicklungsumgebung einrichten

HTML- und CSS-Code steht in einfachen Textdateien mit den typischen Dateiendungen „.html“ und „.css“. Zum Schreiben reicht im Prinzip jeder Texteditor wie Gedit, besser ist der HTML-Editor Bluefish, den Sie über die Paketverwaltung nachinstallieren. Das Tool erleichtert per Syntaxvervollständigung die Eingabe von HTML-Tags. Damit die Rechtschreibprüfung funktioniert, installieren Sie zusätzlich das Paket „aspell-de“. Bluefish kann die korrekte Syntax von HTML-Dokumenten prüfen, benötigt dafür aber das zusätzliche Tool tidy, das bei den meisten Linux-Distributionen veraltet ist und noch kein HTML5 unterstützt. Eine aktuellere Version finden Sie unter http://binaries.html-tidy.org .

Lese-Tipp: Linux-Top-20 – So finden Sie Ihr Lieblings-Linux

Das Ergebnis Ihrer Arbeit betrachten Sie in einem Browser. Wenn Sie Bilder bearbeiten müssen, ist ein Programm wie Gimp empfehlenswert. Ein Webserver ist auf dem Entwicklungs-PC nicht unbedingt erforderlich, aber sinnvoll. Sie entdecken dann schneller Fehler, die etwa durch falsch benannte Dateien oder Links verursacht werden. Den Webserver installieren Sie in Ubuntu oder Linux Mint mit folgenden Terminalbefehlen:

sudo apt-get update
sudo apt-get install apache2
sudo a2enmod userdir
sudo service apache restart

Erstellen Sie dann in Ihrem Home-Verzeichnis einen neuen Ordner:

mkdir ~/public_html

Unter „public_html“ legen Sie alle Dateien ab, die zur Ihrem Webprojekt gehören. Unterordner wie „images“ für Bilder und „css“ für CSS-Dateien verbessern dabei den Überblick.

3. Eine erste Webseite erstellen

Klicken Sie in Bluefish auf „Datei -> Neu aus Template -> HTML 5“. Über „Datei -> Speichern“ legen Sie die Datei unter dem Namen „index.html“ im Ordner „public_html“ ab. Wenn der Webserver eine Datei dieses Namens findet, liefert er sie automatisch als Startseite aus. Entsprechend der HTML5-Vorlage sehen Sie im Editor-Fenster die minimal nötigen Elemente einer Webseite. Am Anfang steht die Doctype-Deklaration „“. Der Browser wird damit darüber informiert, dass die Datei HTML5-Code enthält.

Danach folgt das HTML-Grundgerüst zwischen „“ und „“. Das Tag-Paar „ … “ enthält Zusatzinformationen zur Seite. Mit „“ wird der Zeichensatz auf UTF-8 festgelegt. Zwischen „

“ geben Sie einen Text ein, den der Browser in der Titelleiste beziehungsweise im Tab anzeigt – bei einer Startseite etwa „Max Mustermanns Blog“. Der im Browserfenster sichtbare Inhalt steht zwischen den Tags „…“. Bauen Sie eine H1-Überschrift ein – etwa mit der Zeile

Eine H1-Überschrift…

Tippen Sie darunter einen beliebigen Beispieltext ein, umgeben Sie ihn mit den Tags „

…“ und speichern Sie Änderungen.

Per Klick auf die Schaltfläche „Vorschau im Browser“ in der Symbolleiste sehen Sie sich die Webseite im Browser an. Dabei wird die Datei direkt von der Festplatte geladen.

Wenn Sie einen Webserver installiert haben, klicken Sie „public_html“ in der Seitenleiste mit der rechten Maustaste an und wählen im Menü „Dokumentverzeichnis setzen“. Es öffnet sich ein Dialog, in dem Sie hinter „Webadresse“ die Zeile „http://localhost/~User“ eintippen, wobei Sie „User“ durch Ihren Linux-Benutzernamen ersetzen. Der Klick auf „Vorschau im Browser“ öffnet die Seite. Lassen Sie das Browserfenster mit der Vorschau geöffnet. Nach Änderungen in der „index.html“ aktualisieren Sie die Anzeige über die Taste F5.

Bluefish-Tipps: Sie können unter „Bearbeiten -> Einstellungen -> Externe Befehle“ auch einen anderen Vorschaubrowser definieren, so etwa Google Chrome. Dazu ändern Sie hinter „Chromium“ den Befehl wie folgt:

google-chrome ‘%p’&

Setzen Sie ein Häkchen in der Spalte „Standardbrowser“ und entfernen Sie jenes beim bisherigen Browser.

Unter „Einstellungen -> Dateien -> Sichern und Wiederherstellen“ sollten Sie die Option „Sicherungskopien beim Schließen löschen“ aktivieren. Sonst bleiben Dateien mit der Endung „~“ zurück, die Sie beim Transfer auf einen Webserver umständlich auslassen oder löschen müssen.

Lese-Tipp: Wir stellen Ihnen den HTML-Editor Bluefish in der Praxis vor

4. Webseiten mit CCS3 gestalten

Die Formatierung Ihrer Webseite zeigt der Browser bisher nur mit seinen Standardvorgaben an. Um das zu ändern, erstellen Sie in Bluefish über „Datei -> Neu“ die Datei „site.css“ im Ordner „~/public_html/css“. Damit die CSS-Datei berücksichtigt wird, bauen Sie eine Verknüpfung in die Datei „index.html“ im „“-Bereich ein:

In die CSS-Datei setzen Sie folgende Zeilen ein.

html,body,h1,p {font-size: 100%;}
body {
font-family: Helvetica,sans-serif;
font-size: 14px;
color:#FFFFFF;
background:#0C99D5;
}

Ein Regelsatz beginnt mit dem HTML-Element, auf das sich die Formatierung bezieht. Danach folgen in geschweiften Klammern die Formatangaben, abgeschlossen jeweils mit einem Semikolon („;“). Die erste Zeile legt die Schriftgröße für alle angegebenen Elemente auf „100%“ fest. Das entspricht 16 Pixeln. Hinter „body“ ist die Schriftfamilie „Helvetica“ definiert und eine Größe von 14 Pixel für alle Elemente innerhalb dieses Tags.

Ist diese Schriftart nicht auf dem PC vorhanden, verwendet der Browser die Ersatzschrift „sans-serif“, bei Firefox unter Linux ist das meist „Nimbus Sans“, unter Windows „Arial“. Die Schrift erscheint durch „color“ in weißer Farbe, was nur vor einem über „background“ abgehobenen andersfarbigen Hintergrund sinnvoll ist. Basisinfos zu den Farbdefinitionen bietet der Kasten „Farben in HTML definieren“. Ergänzen Sie folgende Zeilen in der CSS-Datei:

h1 {
font-size: 28px;
font-size: 1.75rem;
}
p {
font-size: 1em;
margin: 0.35em 0px;
}

„h1“ erbt die Schriftdefinition von „body“ und erscheint deshalb auch in Weiß. Ohne CSS wäre „h1“ bei den meisten Browsern 32 Pixel groß, wird aber jetzt auf „1.75rem“ reduziert. „rem“ gibt es als Größenangabe erst ab CSS3. Es legt die Schriftgröße hier auf das 1,75-fache der Basisgröße von 16 Pixeln fest. Das ergibt 28 Pixel. Die Basisgröße bezieht sich bei „rem“ auf die Angabe bei „html“.

Die Zeile „font-size: 28px;“ ist nur für ältere Browser gedacht, die noch kein CSS3 beherrschen. Hier wird die nachfolgende Definition einfach ignoriert. Grundsätzlich gilt bei CSS: Die letzte Definition zählt, fehlerhafte oder unbekannte Schlüsselwörter oder Werte werden verworfen. Moderne Browser berücksichtigen daher die „rem“-Angabe und verwerfen den „px“-Wert.

Der letzte Block bezieht sich auf die Formatierung von Absätzen („p“). Die Schriftgröße beträgt „1em“. Die Bezugsgröße ist bei „em“ das in der HTML-Hierarchie direkt übergeordnete Element, in unserem Beispiel „“. Die Angaben hinter „margin:“ reduzieren den Zeilenabstand um „0.35em“, der Abstand zum linken und rechten Rand fällt weg („0px“).

Probieren Sie es aus: Ändern Sie den Wert von „font-size:“ in der ersten Zeile auf „140%“. Die H1-Überschrift vergrößert sich proportional auf etwa 39 Pixel (16 px * 1,4= 22,4 px * 1,75 rem = 39,2 px). Die Größe der

-Absätze bleibt gleich. Ändern Sie „font-size:“ im „body“-Block auf „16px“, die proportionale Schriftgröße der Absätze beträgt dann 16 Pixel (16 px * 1em). Statt „em“ und „rem“ können Sie immer auch „px“ als absoluten Wert verwenden. Relative Angaben sind jedoch besser für unterschiedliche Bildschirmgrößen von PCs Tablets und Smartphones geeignet.

5. Elemente auf der Webseite positionieren

Viele Webseiten werden in mehreren Spalten dargestellt, beispielsweise mit einer Spalte für den Hauptinhalt und einer weiteren für die Seitenleiste, die ein Menü oder Links auf andere Artikel anbietet. Der Browser arbeitet die HTML-Tags der Reihe nach ab und stellt zunächst einmal alles untereinander dar. Um das zu ändern, bringen Sie die Inhalte zwischen den Tags „

“ unter. In der Praxis kommen meist drei Div-Blöcke zum Einsatz. Der erste umschließt den gesamten Inhalt der Seite. Darin ist dann ein Div-Block für den Hauptinhalt und ein weiterer für die Seitenleiste untergebracht. Das kann dann so aussehen:

Die Bezeichnungen hinter „id=“ ermöglichen es, die Formatierung eines bestimmten Elements im CSS direkt anzusprechen:

#main {
float:left;
width:35em;
background-color: lightblue;
}
#sidebar {
float:left;
width:15em;
background-color: lightgreen;
}

Die entscheidende Direktive ist „float:left;“. Das weist den Browser an, den jeweiligen Div-Block am linken Rand des vorherigen Elements auszurichten. Die Breite der Blöcke legen Sie mit dem Wert hinter „width:“ fest. Sie werden bemerken, dass der Sidebar-Block unter dem Main-Block landet, wenn Sie das Browserfenster verkleinern. Das Problem lässt sich beheben, indem Sie bei „body“ die Zeile „width:900px;“ verwenden.

In der Beispieldatei zu diesem Artikel finden Sie eine einfache Demo zur Positionierung mit Div-Elementen in der Datei „columns.html“. Ein etwas komplexeres Beispiel in der Datei „sidebar.html“ zeigt, wie Sie ein Menü für die Navigation erstellen und Bildgrößen dynamisch ändern. Diese Seite ist responsiv gestaltet, ändert also die Position und Größe von Elementen abhängig vom Bildschirmformat. Dadurch erhalten auch Smartphones oder Tablets eine optimale Darstellung.

6. Neues in HTML5 und CSS3

Die Erweiterungen des Sprachstandards bei der Entwicklung von HTML4 in Richtung HTML5 hatten viele Ziele. Wir wollen hier nur zwei davon herausgreifen.

Besucher Ihrer Website erkennen sofort, wo ein Artikel beginnt und endet, und unterscheiden zwischen Navigations-Links, Kommentaren und Werbeblöcken. Für Suchmaschinen stellen gemischte Inhalte jedoch eine Herausforderung dar. Deshalb gibt es in HTML5 neue Tags wie „