Die eigene Homepage zu gestalten ist nicht schwer – sie regelmäßig zu unterhalten hingegen sehr. Dieser Artikel verschafft Ihnen das nötige Wissen für die Gestaltung und den Unterhalt Ihres Internetauftritts.

Bei den Preisen ist es schon fast eine Sünde, keine zu haben: Um Ihre eigenen Webseiten online zu stellen, zahlen Sie bei einigen Providern lediglich 10 Cent pro Monat. Komplettpakete für drei Jahre inklusive Registrierung einer Domäne bekommen Sie bereits ab 10 Euro. Doch der Preis alleine macht noch keine Homepage. Obschon einige Provider in ihrem Angebot auch bunte Vorlagen zum Zusammenklicken bereitstellen, kommen Sie ohne minimale HTML-Kenntnisse nicht weit.

Typischerweise gestaltet der halbwegs professionelle Webmaster seine Seiten nicht per Mausklick, sondern in einem HTML-Editor. Änderungen an Form und Inhalt der Homepage nimmt er auf seinem eigenen Rechner vor. Dann testet er die neuen Seiten auf Fehler und lädt diese anschließend auf den Server des Hosters.

Konzept oder kopflos

Natürlich freut man sich über den ersten Internetauftritt und ist versucht, gleich eine Seite zu gestalten und hochzuladen. Der einfachste Weg dazu führt über Open- oder KOffice. Einfach die Textverarbeitung des Office-Pakets starten, ein paar Zeilen schreiben, Bilder einfügen und über Speichern unter die Inhalte als HTML-Dokument speichern. Diese Seite laden Sie dann mit Konqueror über FTP oder SSH auf Ihren Server.

Doch irgendwann kommt der Moment, wo Ihr Internetauftritt nur noch aus einer Menge einzelner Webseiten besteht, die keine richtig schöne Website bilden. Bevor Sie Ihre erste Seite Online stellen, sollten Sie sich deshalb Gedanken über die zukünftigen Inhalte machen und ein Konzept erarbeiten. Dazu stellen Sie sich folgende Fragen:

• Welche HTML-Kenntnisse besitze ich, will ich dazulernen?
• Wieviele Seiten soll meine Homepage umfassen (ca.)?
• Welche Inhalte möchte ich haben (Texte, Bilder, Animationen, Downloads, Formulare, Gästebuch)?
• Welche Themenbereiche möchte ich anbieten (Linux-Tipps, Persönliches, Bildergalerie, Online-Shop)?

Je nach Inhalt und Themenbereich reicht für Ihre Zwecke ein statischer Webauftritt. Möchten Sie hingegen zum Beispiel ein Gästebuch führen, einen Online-Shop anlegen oder mit PHP-Tricks glänzen (siehe separaten Artikel auf Seite 47), benötigen Sie eine dynamische Site. Ihre Entscheidung wirkt sich auch auf die Kosten der Homepage aus: das Preisbeispiel von 10 Euro für drei Jahre stimmt für einen statischen Auftritt. Die Preisskala für dynamische Sites beginnt bei 5 Euro pro Monat.

Der Editor macht’s aus

Sind Ihre HTML-Kenntnisse beschränkt und Sie möchten höchstens ein paar Seiten hochladen, benutzen Sie am besten einen WYSIWYG-Editor, wie Nvu, Mozilla Composer oder OpenOffice Writer. Gut eignet sich auch eine aktuelle Version von KWord. Das KOffice-Programm speichert beim HTML-Export auch CSS-Stilvorlagen (Abbildung 1).

Abbildung 1: Kword exportiert beim Speichern von HTML-Seiten auch die CSS-Informationen. Die sollten Sie für größtmögliche Browserunterstützung auf ‘iso 8859-1’ ändern. Benutzen Sie auf Ihrer Seite auch Sonderzeichen anderer Sprachen, wählen Sie das voreingestellte UTF-8.

Möchten Sie ein komplexere Homepage mit über 10 Seiten, einer Menüstruktur, einem einheitlichen Layout und PHP-Code erstellen, kommen Sie nicht um den Gebrauch eines echten HTML-Editors herum. Hier bieten sich Bluefish und Quanta Plus an. Programme wie Netobjects Fusion, die Ihnen das Layout und die Seitenanordnung automatisch erstellen, existieren unter Linux zurzeit keine. Eine Übersicht über die bekanntesten HTML-Editoren unter Linux finden Sie im Artikel “Am Web mitstricken” auf Seite 32.

Eine weitere Entscheidung, die Sie bereits vor der Gestaltung der ersten Seite fällen sollten, ist der Einsatz von so genannten Cascading Style Sheets (CSS). CSS-Stilvorlagen nehmen Ihnen das aufwändige Formatieren jeder einzelnen Seite ab. Anstatt auf jeder HTML-Seite von neuem die Schriftgröße, -farbe und den Hintergrund zu bestimmen, legen Sie ein Stylesheet an, das dann für alle Seiten gilt. Der Aufwand für eine minimale Stilvorlage macht sich bereits bei wenigen Seiten bezahlt. Ihr HTML-Auftritt wirkt dadurch auch wesentlich professioneller. Einen ausführlichen Artikel zum Einsatz und zur Funktionsweise von Stylesheets finden Sie auf Seite 42.

Programmierer werden

Die meisten HTML-Seiten werden nicht mit ein paar Mausklicks erstellt, sondern im Editor programmiert. Der dazu benutzte HTML-Code ist leicht zu erlernen – und Sie können sich im Internet auf jeder Seite, die Ihnen gefällt, HTML-Code ausleihen. Wählen Sie dazu im Browser einfach die Option zum Anzeigen des Quelltextes. Bei den meisten Browsern funktioniert dies über die Tastenkombination [Strg+U]. Dann kopieren Sie den Code in den Editor und experimentieren damit.

Quanta Plus gehört zu den besten HTML-Editoren. Das Programm bringt zahlreiche Sonderfunktionen wie Vorschau, Link-Checker, CSS- und Frameset-Editor mit. Der Artikel bezieht sich deshalb im folgenden auf diesen HTML-Editor. Sie können aber theoretisch auch in vi arbeiten. Unter Suse Linux finden Sie Quanta Plus im RPM-Paket kdewebdev3, den Quellcode hostet [1].

Abbildung 2: Der Assistent des HTML-Editors Quanta Plus hilft Ihnen beim Erstellen eines neuen HTML-Dokuments.

Nach dem Start des Programms über [Alt+F2] und der Eingabe von quanta sehen Sie erst mal eine leere Seite. Klicken Sie hier auf das erste Icon auf dem Reiter Standard, um den Schnellstart-Assistenten zu starten (Abbildung 2). Geben Sie hier einen Titel für das HTML-Dokument ein und klicken Sie auf OK. Quanta erstellt nun ein leeres HTML-Dokument, das grundlegenden Code enthält, der für eine HTML-Seite nötig ist (Abbildung 3).

Abbildung 3: Einfache HTML-Dokumente bestehen aus drei Teilen: Dokumentendefinition, Kopf- und Hauptteil. Der Kopfteil (head) enthält neben dem Titel des Dokumentes auch wichtige Metainformationen.

Ein einfaches HTML-Dokument besteht aus drei Teilen. Die Dokumentendefinition – beginnend mit <!DOCTYPE – teilt dem Browser mit, welchen Dokumententypen er vor sich hat. Die meisten Seiten setzen noch traditionelles HTML ein. Einige bauen bereits auf dem XHTML-Standard auf – einer Kombination von HTML und XML.

Während das HTML-Format sämtliche Browser verstehen und zum Beispiel Microsofts Internet Explorer selbst HTML-Seiten mit eindeutigen Programmierfehlern noch passabel anzeigt, verlangt XHTML mehr Genauigkeit. Im Gegenzug zeigen alle aktuellen Browser XHTML-Dokumente korrekt an, sofern diese den Standards entsprechen. Bei XHTML muss der Programmierer zudem jedes Tag schließen und in Kleinbuchstaben schreiben. Ein paar Beispiele für die unterschiedlichen Schreibweisen zeigt Tabelle 1. Das erweiterte HTML bietet Programmieren aber auch mehr Möglichkeiten.

Der Kopfteil beginnt mit dem Tag <head>. Hier legen Sie mit dem Tag <head> den Titel der Seite fest. Diesen zeigt der Browser in der Fensterleiste an und benutzt ihn beim Speichern von Lesezeichen. Unter den Metainformationen ist vor allem die Zeile mit dem Eintrag charset= für die so gennanten Codepages wichtig. Sie teilt dem Browser mit, wie dieser Sonderzeichen darzustellen hat.

Strenggenommen darf HTML-Code keine Umlaute enthalten, da sogar die neuesten Standards lediglich 7-Bit-ASCII-Code unterstützen. Die typischen deutschen Umlaute müssen Sie deshalb als ä, ö, und so weiter schreiben. In der Praxis hat sich aber der Einsatz von Codepages durchgesetzt. Diese Teilen dem Browser mit, wie er Sonderzeichen darzustellen hat.

Benutzen Sie auf Ihrer Homepage Buchstaben aus dem deutschen ABC, ist iso-8859-1 die richtige Wahl. Möchten Sie auch Sonderzeichen oder zum Beispiel Buchstaben aus dem griechischen Alphabet verwenden, sollten Sie charset=utf-8 eintragen. Fehlt diese Metainformation zeigen viele Browser anstelle der Sonderzeichen nur leere Vierecke an. Weitere Metainformationen, die Sie in Ihr Dokument einfügen können, listet Tabelle 2 auf.

Stilvorlagen einsetzen

Auch die Einbindung einer Stilvorlage geschieht im Kopfteil. Um zum Beispiel das Stylesheet meine-stilvorlage.css zu importieren, genügen die drei Zeilen im Kasten “CSS-Stilvorlage einbinden”. In dieser Datei legen Sie dann das Aussehen der einzelnen Tags fest. Mit CSS können Sie auch eigene Tags definierern. Um zum Beispiel Befehle in gut lesbarer roter Courier-Schrift anzuzeigen, definieren Sie in Ihrem Stylesheet folgendes Tag:

code {
font: 12pt/24pt courier;
letter-spacing: 1px;
color: #FF0000;
}

Nun können Sie <code> und </code> gebrauchen, um Befehle zu kennzeichnen.

<style type="text/css" media="all">
@import "meine-stilvorlage.css";
</style>

Der eigentliche Inhalt des Dokuments beginnt mit dem Tag <body>. Hier schreiben Sie Ihren Text hinein, fügen Überschriften, Auflistungen Bilder und Tabellen ein. Ein einfacher Body weist folgenden Aufbau auf:

<body>
<h1>Titel</h1>
<h2>Untertitel1</h2>
<h3>Untertitel2</h3>
<p>Erster Absatz.</p>
<p>Zweiter Absatz.</p>
</body>

Arbeiten mit Frames

Zahlreiche Seiten im Internet benutzen eine 0815-Darstellungsform. Oben quer ein Banner oder ein Bild, links das Menü und rechts unten der Hauptteil. Diese Seiten arbeiten mit Rahmen, so genannten Frames (nicht zu verwechseln mit Tabellen). Die Frame-Tags ersetzen dann den Body. Den Inhalt des Frames binden Sie über das Tag src="datei.html" ein. Anstelle von datei.html können Sie auch eine vollständige URL benutzen, um zum Beispiel eine externe Seite einzubinden. Oder Sie geben ein Bild an. Ein dreigeteiltes Minimaldokument sehen Sie im Kasten “Minimales Dokument mit Frames”. Die Anzeige im Browser sehen Sie auf Abbildung 4.

Abbildung 4: Ein einfaches HTML-Dokument mit Frames. Der obere Rahmen bindet ein transparentes PNG-Bild ein. Links ist eine einfache HTML-Seite verknüpft, im unteren Rahmen die Homepage des LinuxUser.

Frames eignen sich gut, um eine feste Menüstruktur anzulegen. Im Frame linksschmal geschieht dies über die HTML-Datei menu.html. Da der Frame den Body-Teil ersetzt, steht in dieser Datei nur der <body>-Teil. Die Head-Informationen liest der Browser aus dem Hauptdokument aus. Möchten Sie am Menü etwas ändern, editieren Sie einfach die Datei menu.html.

Damit der Browser die Verknüfung Menü1 im Frame rechtsgross öffnet, benutzen Sie das Tag target="rechtsgross", zum Beispiel <a href="linuxtipps.html" target="rechtsgross">LinuxTipps</a>.

So einfach die Arbeit mit Frames sein mag, sie bereitet den verschiedenen Browsern immer wieder Probleme. Wenn möglich sollten Sie deshalb Stylesheets oder PHP einsetzen. Grundwissen zu CSS vermittelt Ihnen der Artikel auf Seite 42. Wie Sie PHP-Seiten erstellen, zeigt Ihnen der Artikel auf Seite 47. Gute Einführungen finden Sie auch unter [2].

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Beispielseite mit Frames</title>
  <meta name="GENERATOR" content="Quanta Plus">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<frameset rows="15%,85%">
        <frame name="obenquer" src="tux.png" marginwidth="5" marginheight="5" noresize>
        <frameset cols="20%,80%">
                <frame name="linksschmal" src="menu.html" marginwidth="5" marginheight="5">
                <frame name="rechtsgross" src="http://www.linuxuser.de" marginwidth="5" marginheight="5">
        </frameset>
</frameset>
</html>

Farben und Bilder

Reine Textseiten – dazu noch Schwarz auf Weiß – wirken nicht besonders anziehend. Sie sollten deshalb für Ihre Seite eine Hintergrundfarbe und über ein Stylesheet auch die Schriftfarben festlegen. Um eine ganze Seite einzufärben, ergänzen Sie einfach das einleitende Body-Tag um einen Eintrag bgcolor="", zum Beispiel <body bgcolor="fuchsia">.

Für die Angabe der Farbe benutzen Sie entweder den Namen oder einen Code. Welcher Code zu welcher Farbe gehört, verrät Ihnen der Farbauswahldialog von Quanta Plus (Abbildung 5). Wechseln Sie dazu auf den Reiter Stil und klicken Sie auf das Icon mit der Farbpalette. Wählen Sie nun eine Farbe aus, zeigt ihnen Quanta unter HTML den richtigen Code an.

Abbildung 5: Der Farbauswahldialog von Quanta verrät Ihnen, welcher Code zu welcher Farbe gehört. Über die Pipette können Sie auch Farbcodes von Bildern ablesen.

Bilder binden Sie über <img src="../bilder/bild.png"> ein. Es lohnt sich, alle Bilder im gleichen Verzeichnis zu speichern (zum Beispiel bilder). Sie sparen sich damit Duplikate. Verwenden Sie zum Beispiel auf jeder Seite ein Logo und möchten dies ändern, müssen Sie lediglich im Verzeichnis bilder das alte Logo durch das neue austauschen.

Ansprechende grafische Menüs lassen sich durch Imagemaps darstellen. Dabei wird ein Bild in mehrere Stücke zerteilt, sodass jeder Teil des Bildes einen Menüeintrag aufnimmt. Auch der Einsatz von speziellen Zierschriften ist nur über Bilder möglich. Unter Linux bietet sich für diese zwei Aufgaben Gimp an. Es kennt zahlreiche Plug-ins, die den Webmaster bei seiner kreativen Tätigkeit unterstützen. Lesen Sie dazu auch den Artikel auf Seite 38.

Testen, Hochladen und Synchronisieren

Sind Ihre ersten HTML-Seiten fertig, sollten Sie zuerst alle Seiten auf leere Verknüpfungen testen. Auch dazu bringt Quanta Plus ein Tool mit. Sie finden es unter Plugins | Link Checker. Dann gilt es die Seiten per FTP auf den Server hochzuladen. Manche Provider bieten auch einen SSH-Zugang an. Um Inhalte via auf www.meineseite.de hochzuladen geben Sie in Konqueror folgende URL ein:

ftp://www.meineseite.de

Bei einem SSH-Zugang lautet die URL folgendermassen:

fish://www.meineseite.de

Die hochgeladenen Seiten sollten Sie nicht mehr anrühren, da dies sonst schnell zu einem Versions-Chaos führen kann. Führen Sie stattdessen Änderungen ausschließlich auf Ihrem Rechner durch. Dann Synchronisieren Sie die Inhalte mit rsync (für SSH) und sitecopy (für FTP). Rsync bringen die meisten Linux-Distributionen mit. Das Programm Sitecopy müssen Sie eventuell von der Projekt-Homepage [3] herunterladen. Die Syntax von Rsync ist relativ einfach:

rsync Optionen LokalerOrdner Be?
nutzer@Homepage:"Verzeichnis/"

Für SSH wählen Sie als Option -e ssh. Weitere Optionen listet man rsync und Tabelle 3 auf. Haben Sie sich Ihren eigenen Rsync-Befehl zusammengestellt, schreiben Sie diesen zum Beispiel in die Datei homepagesync im Verzeichnis bin in Ihrem Home-Verzeichnis. Mit dem Befehl chmod +x ~/bin/homepagesync machen Sie die Datei ausführbar. Von nun an stellen Sie die neuen Inhalte mit folgendem Befehl online:

homepagesync

Sitecopy lässt sich einfacher benutzen, Sie müssen das Programm aber zuerst einrichten. Legen Sie dazu in Ihrem Home-Verzeichnis den Ordner .sitecopy und die Konfigurationsdatei .sitecopyrc an:

mkdir -m 700 .sitecopy
touch .sitecopyrc
chmod 600 .sitecopyrc

Im Verzeichnis .sitecopy führt das Programm in einer XML-Datei über die Abgleiche Buch. Über die Konfigurationsdatei teilen Sie dem Programm mit, was es woher wohin kopieren soll. Ein Beispiel sehen Sie im Kasten “Sitecopy-Konfigurationsdatei”. Nach dem Erstellen der Konfigurationsdatei initialisieren Sie die XML-Datei von Sitecopy mit dem Befehl

sitecopy --init meineseite

Meldet das Programm keine Fehler, laden Sie anschließend die Inhalte mit

sitecopy --update meineseite

hoch. Detaillierte Informationen zur Benutzung des Programms liefert man sitecopy.

site meineseite
   server www.meineseite.de
   protocol ftp
   username ftp50145
   password geheim
   local /home/marcel/webseite/
   remote verzeichnis/