HTML Kurzanleitung (Alte Homepage)

Machen Sie ihre eigene Homepage! Mit dem Crashkurs lernen Sie Webseiten zu erstellen und mit der CGI-Sammlung erwecken Sie Ihre Homepage zum Leben. Mehr im Archiv

Diese Seite wird angezeigt wenn man einem alten Link gefolgt ist. Mehr

HTML CRASHKURS | CGI CRASHKURS | CGI SAMMLUNG | TIPS & LINKS | FAQs

HTML Crashkurs

Webseiten werden in der Sprache HTML erstellt. Natürlich können Sie sich beim Erstellen ihrer Homepage von speziellen Werkzeugen unterstützen lassen, es gibt diverse HTML-Editoren im Internet (Tucows Shareware). Wenn Sie sich jedoch selbst mit den Grundkentnissen in HTML vertraut machen möchten, empfehle ich den Crashkurs zu Ende zu lesen.

1. Schritt: Beginnen wir mit einem einfachen Beispiel, dem Grundgerüst einer HTML-Seite (Beispiel anschauen):

<HTML> <HEAD><TITLE> My Homepage </TITLE></HEAD> <BODY> Hello World! Hier ist meine Homepage... </BODY> </HTML>

Grundsätzlich werden HTML Befehle (man nennt sie Tags) von spitzen Klammern eingeschlossen, zum Beispiel <HTML>. Falls ein Textstück beeinflusst werden soll, folgt zum Abschluss noch ein Tag mit Schrägstrich (auch Slash genannt), also beispielsweise </HTML>. Die Grundstruktur einer HTML-Seite ist immer die gleiche, die gesamte Seite wird wie im Beispiel oben von <HTML>...</HTML> eingeschlossen.

2. Schritt: Wir fügen dem Beispiel etwas dickere Schrift (Fettschrift) hinzu:

<HTML> <HEAD><TITLE> My Homepage </TITLE></HEAD> <BODY> Hello World! Hier ist meine <B>Homepage</B>... </BODY> </HTML> so sieht es dann im Webbrowser aus:

Hello World! Hier ist meine Homepage...

Wie Sie sehen wurde der gewünschte Text durch den Befehl für Fettschrift (bold) eingeschlossen.
Alle Beispiele können Sie übrigens mit einem einfachen Texteditor erstellen. Probleme oder Fragen? Siehe FAQ.

3. Schritt: Wir fügen dem Beispiel eine neue Textzeile hinzu:

<HTML> <HEAD><TITLE> My Homepage </TITLE></HEAD> <BODY> Hello World! Hier ist meine <B>Homepage</B>...<BR> mit vielen Infos über mich! </BODY> </HTML> so sieht es dann im Webbrowser aus:

Hello World! Hier ist meine Homepage...
mit vielen Infos über mich!

Den Befehl für eine neue Zeile (<BR>) müssen Sie nur einfügen wenn Sie unbedingt eine neue Zeile brauchen. Normalerweise können Sie Text einfach eingeben, Text der breiter als der Bildschirm ist wird automatisch auf mehrere Zeilen umgebrochen.
Okay, weil das so einfach war, fügen wir als letztes dem Beispiel noch eine Grafik hinzu:

<HTML> <HEAD><TITLE> My Homepage </TITLE></HEAD> <BODY> Hello World! Hier ist meine <B>Homepage</B>...<BR> mit vielen Infos über mich! <IMG SRC="cool.gif"> </BODY> </HTML> so sieht es dann im Webbrowser aus:

Hello World! Hier ist meine Homepage...
mit vielen Infos über mich! [COOL]

Damit Sie die kleine Cool-Grafik auch auf ihrem Rechner zuhause haben, klicken Sie diese jetzt mit der rechten Maustaste an und speichern sie dann ab (SAVE AS), am Besten ins selbe Verzeichnis wie die HTML-Seite. Ja, so einfach lassen sich Grafiken klauen!

Die wichtigsten HTML-Befehle:
Einfache HTML Seiten kommen mit wenigen Befehlen aus. Hier die wichtigsten, die muß man kennen (Beispiel anschauen):

Textausrichtung:

<BR> Nächste Zeile (Break), Leerzeilen erhält man durch mehrere <BR>

<B> ... </B> Fettschrift (Bold), das umrahmte Textstück erscheint in Fettschrift

<I> ... </I> Kursivschrift (Italic) für das umrahmte Textstück

<U> ... </U> Unterstrichen (Underlined)

<TT> ... </TT> Schreibmaschinenschrift (Typewriter)

<PRE> ... </PRE> Formatiertes Textstück (Preformated) in Schreibmaschinenschrift. Das Textstück wird genau so ausgegeben, wie es im Texteditor aussieht.

<BLINK> ... </BLINK> Blinkender Text

<CENTER> ... </CENTER> Zentriert Text und Bilder

<HR> horizontale Trennlinie (Horizontal Ruler)

<H1> ... </H1> Überschrift

<H2> ... </H2> kleinere Überschrift, insgesamt mögliche Werte H1 - H6

<UL> ... </UL> Erzeugt eine Liste, jeder Eintrag beginnt mit einem grossen Punkt

<LI> Markiert innerhalb der Liste den Beginn eines neuen Listeneintrags

Grafik:

<IMG SRC="dateiname"> Fügt die gewünschte Grafikdatei (Image) in die Seite ein

<IMG SRC="dateiname" ALT="Bild"> Legt zusätzlich einen Ersatztext fest für abgeschaltete Grafik, Textbrowser oder wenn man mit Maus über die Grafik fährt. Verwenden Sie die Grafikformate GIF oder JPG, sie werden von allen Browser (z.B. Netscape oder Internet Explorer) angezeigt.

Links zu weiteren Seiten:

<A HREF="bsp.html">Text</A> Text mit Link, wird blau (farbig) gezeichnet

<A HREF="bsp.html"><IMG SRC="bsp.gif"></A> Grafik mit Link, wird blau (farbig) umrandet

<A HREF="bsp.html"><IMG SRC="bsp.gif" BORDER=0></A> Grafik mit Link, jedoch ohne Rahmen

Sprung auf bestimmte Position einer Seite:

<A HREF="bsp.html#POS">Sprung</A> Text mit Link auf bestimmte Position, wird blau (farbig) gezeichnet

<A NAME="POS">Ziel</A> Definiert ein bestimmtes Sprungziel in einer Seite.
Falls der Sprung innerhalb einer Seite erfolgt, kann der HTML-Dateiname weggelassen werden

Sonderzeichen und deutsche Umlaute:

< > < >

  Leerzeichen (mit der Breite des Buchstaben "n"), mehrere aneinanderreihbar

äöüß Umlaute im ISO 8859-1 Code (z.B. bei Windows95/NT oder Unix)

ä ö ü ß ä ö ü ß (alte Schreibweise, nur zur Vollständigkeit aufgezählt)

Ä Ö Ü Ä Ö Ü (alte Schreibweise)

 Kommentar, der Text zwischen den "--" wird vom Webbrowser nicht angezeigt

Die wichtigsten Begriffe
Bei weiteren Schritten mit HTML (Hyper Text Markup Language) sollten Sie sich mit Folgendem vertraut machen:

Mit Hilfe von Tabellen können Text und Grafik beliebig angeordnet werden, ein wichtiges Werkzeug für Web-Programmierer. Die sogenannten Frames werden benutzt um den Bildschirm in mehrere Fenster aufzuteilen, in dieser Anleitung wurden Frames beispielsweise für die Menüzeile am oberen Rand benutzt. Mit Style Sheets oder Layers können HTML-Seiten, Text oder Grafiken sogar übereinander gelegt werden.
Weiterführende Informationen finden Sie unter Links.

Das war auch schon unser kleiner HTML-Crashkurs! Nun können Sie mit ihrer eigenen Homepage loslegen, zur Übung sollten Sie gleich einmal eine kleine Seite basteln und mit den oben gezeigten Möglichkeiten herumspielen.

CGI Crashkurs

Dieser Abschnitt wendet sich eindeutig an Fortgeschrittene, Sie sollten bereits gute HTML-Kenntnisse sowie etwas Programmiererfahrung besitzen (z.B. in der Programmiersprache Perl oder C).

So erstellt man CGI-Scripts
Mit CGIs (Common Gateway Interface) lassen sich kleine Programme vom Webserver ausführen und HTML-Dokumente entwickeln eine ungeahnte Dynamik![Abbildung CGI]
Beim Aufruf wird im Webbrowser statt einer HTML-Seite die Script-Adresse angegeben. Häufig wird auch durch ein Formular (z.B. in einem Gästebuch) ein CGI-Script aufgerufen. Wie Sie in der Abbildung rechts sehen wird vom CGI-Script wiederrum als Ausgabe eine HTML-Seite erzeugt, es können sogar Grafiken oder andere beliebige Daten zurückgegeben werden.

Vorbereitungen: Erkundigen Sie sich bei Ihrem Provider/Rechenzentrum/Schule ob CGI-Scripte überhaupt möglich sind und wie der persönliche CGI-Pfad und das CGI-Verzeichnis lauten. Falls noch nicht geschehen, legen Sie dann in Ihrem Webverzeichnis ein eigenes Verzeichnis für Scripte an (meistens cgi-bin).
Zur Vereinfachung beziehen wir uns hier auf das Betriebssystem Unix (Unix-Kurzanleitung). Es können jedoch alle Beispiele leicht auf andere Systeme übertragen werden (z.B. Windows NT). Als für Webseiten ideal erwiesen hat sich die Programmiersprache Perl, wie wir in den Beispielen noch sehen werden. Perl ist sehr C-ähnlich, aber im Gegensatz dazu wird es interpretiert, d.h. Programme müssen vorher nicht noch umständlich kompiliert werden.

Das folgende CGI-Script gibt das Datum aus: (Beispiel anschauen)

#!/usr/bin/perl

$date_command = "/bin/date"; #Muss mit "which date" übereinstimmen

$date = `$date_command +"%d.%m.%Y"`; chop ($date); #Datum einlesen

print "Content-type: text/html\n\n"; #CGI-Header ausgeben

print "Heute ist der $date "; #Datum ausgeben

print "...have a nice day!\n";

Das Script liest mit Hilfe des Unix-Befehls date das aktuelle Datum ein. Danach wird ein Header übergeben, so daß der Webbrowser weis welche Art Daten folgen. Die abschliessende Leerzeile "\n" ist wichtig, sie trennt den Header vom eigentlichen Inhalt. Schliesslich wird das HTML-Dokument ausgegeben. In unserem Fall ist dies auf das unterste Minimum reduziert (nicht einmal <HTML> haben wir ausgegeben)... zum Testen reicht es. Kopieren Sie sich das Beispiel in Ihr CGI-Verzeichnis auf dem Webserver und probieren Sie es gleich einmal aus.
Wichtig: Achten Sie bei CGI-Scripten darauf, daß die Ausführ- und Leserechte für alle Benutzer gesetzt sind (chmod a+rx dateiname)... und daß bei Perl-Scripten in der ersten Zeile der richtige Pfad steht (which perl). Wenn CGI-Scripte nicht richtig funktionieren, gehen Sie am Besten die Problem-Checkliste durch!

Dieses Script gibt einen einfachen Web-Counter aus: (Beispiel anschauen)

#!/usr/bin/perl

$count_file = "/home/moak/public_html/data/counter.log";

open (FILE,$count_file); #Datei zum Lesen öffnen

$counter = <FILE>; #Wert lesen

$counter++; #Wert um eins erhöhen

close (FILE); #Datei schliessen

print "Content-type: text/html\n\n"; #CGI-Header ausgeben

print "Hey, du bist Besucher <B>$counter</B>!\n"; #Neuen Wert ausgeben

open (FILE,">$count_file"); #Datei zum Schreiben öffnen

print FILE $counter; #Wert in Datei schreiben

close (FILE); #Datei schliessen

Das Script liest den aktuellen Zählerstand aus einer Datei, gibt den nächsthöheren Wert als HTML-Text aus und schreibt den neuen Wert zurück in die Zählerdatei. Das Ganze ist eine primitive Urform eines Zählers und dient uns als Beispiel für Datei-Operationen mit CGIs, dabei gilt es zu beachten:
Die zu lesende Datei und ihr Verzeichnis muss für alle lesebar sein, in den höhergelegenen Verzeichnissen muss Zugriffsrecht (lookup) für alle gesetzt sein. Bei einer Datei zum Schreiben muss zusätzlich die Datei und ihr Verzeichnis für alle schreibbar sein. Wie bereits im ersten CGI-Beispiel erwähnt, Zugriffsrechte entsprechend setzten!.

Server Side Includes
Die sogenannten ServerSideIncludes (SSI) verbinden HTML-Dokumente und CGI-Scripte noch enger miteinander, da Scriptaufrufe (z.B. Datenbankabfragen) direkt in der HTML-Datei stehen und Ergebnisse vom Webserver automatisch in die Ausgabeseite eingefügt werden. Mit der Anweisung  wird ein Scriptaufruf in ein HTML-Dokument eingebettet.

Die folgende HTML-Seite zeigt wie es geht: (Beispiel anschauen)

<HTML> <HEAD><TITLE> My Homepage </TITLE></HEAD> <BODY> <H1>Willkommen auf meiner neuen Homepage!!</H1>  </BODY> </HTML>

Beachten Sie daß sich keine Leerzeichen zwischen dem Kommentar und der eigentlichen SSI-Anweisung befinden dürfen. Um ServerSideIncludes zu verwenden muss ausserdem die HTML-Datei meist die Endung ".shtml" besitzen, erkundigen Sie sich bei Ihrem Provider/Rechenzentrum. Übrigens genau genommen handelt es sich bei ServerSideIncludes nicht nur um eine Variante der CGI-Scripte, sondern es ist eine Erweiterung des Webservers, dieser kann noch einige andere Dinge (wie z.B. das Datum, Umgebungsvariablen oder andere Daten) automatisch ins HTML-Dokumente einfügen.

CGI Sammlung

Die folgende Sammlung enthält die wichtigsten CGI-Scripte, mit ihrer Hilfe erweitern Sie ihre Homepage schnell und einfach. Wer noch nicht mit CGIs vertraut ist, sollte vorher den CGI Crashkurs lesen. Folgende Scripte stehen zu Auswahl:

* Info: CGI-Test, wertet Formulare und Variablen aus

* Mail: Verschickt Email, auch an beliebige Empfänger

* Guestbook: Verwaltet ein Gästebuch, mit vielen Optionen

* Addlist: Anmeldung für Partys oder Unternehmungen

* Search: Suche für Webseiten, berücksichtigt Frames

* Random: Gibt zufällige Grafik (oder andere Datei) zurück

* Counter: Ein Webcounter, mit eingebautem Klauschutz

* Surftistic: Erstellt Statistiken aus den Webcounter-Daten

* Htmlconvert: Konvertiert für andere Webserver

Alle Scripte sind für private Zwecke frei verwendbar.
Falls Probleme auftauchen sollten, lesen Sie bitte die CGI-Problem-Checkliste durch!

INFO CGI-Test, wertet Formulardaten aus und zeigt Umgebungsvariablen an
Beschreibung: In diesem CGI-Script finden Sie die Standard-Routine um Werte von Webseiten auszuwerten. Sie wird auch in einigen anderen Routinen meiner CGI-Sammlung verwendet und Sie können sie gerne auch in ihren eigenen Scripten verwenden.

Dateien: info.pl ..... das CGI-Testscript
info.html ... eine einfache HTML-Seite zum Austesten des Scripts

Allgemeines: Die Scripte sind in Perl und speziell für das Betriebssystem Unix geschrieben. Sie müßen die Scripte zunächst noch an ihren Webserver angleichen (CGI-Problem-Checkliste).

MAIL Zum Verschicken einer Email, auch an beliebige Empfänger
Beschreibung: Es werden alle Daten eines Webformulars per EMail verschickt und eine Feedback-Seite ausgegeben.
Entweder sind Mail-Empfänger und Subject festeingestellt oder können im Formular eingegeben werden (Feldnamen "to" und "subject"). Falls die EMailadresse im Formular eingegeben werden darf, wird sie auf Gültigkeit überprüft (schützt vor Hackversuchen). Weiterhin kann eingestellt werden ob Emails nur innerhalb einer bestimmten Domain verschickt werden dürfen (schützt vor Missbrauch).
Das Feld mit Namen "from" hat eine besondere Bedeutung, es steht für die Emailadresse des Absenders.

Tip: Es gibt zusätzliche Möglichkeiten das Aussehen einer Mail zu steuern: Felder deren Namen mit "x-" beginnt werden nur verschickt, wenn sie tatsächlich ausgefüllt wurden. Bei Feldern dessen Name mit "h-" (hidden) beginnt wird nur der Inhalt verschickt (am Besten ausprobieren).
Eine Leerzeile erhält man mit: <INPUT TYPE=HIDDEN NAME="h-" VALUE=" ">

Dateien: mail.pl .......... das CGI-Mailscript
mail.html ........ eine einfache HTML-Seite zum Austesten des Scripts
mailok.html ...... Template für Feedback (Mail wurde verschickt)
mailerror.html ... Template für Fehler (Mail wurde nicht verschickt)

Allgemeines: Die Scripte sind in Perl und speziell für das Betriebssystem Unix geschrieben. Sie müßen die Scripte zunächst noch an ihren Webserver angleichen (CGI-Problem-Checkliste).

GUESTBOOK Verwaltet ein Gästebuch, mit HTML-Preview und anderen Optionen
Beschreibung: Die Besucher ihrer Homepage können sich in ein Gästebuch eintragen. Dabei kann festgelegt werden ob HTML-Code im Eintrag erlaubt ist und wer bei einem neuen Eintrag per Mail verständigt wird. Das genaue Aussehen des Gästebuchs kann man komfortabel in HTML-Seiten einstellen, es müssen dazu keine Scripte editiert werden.

Tip: Damit die neuen Einträge nicht gleich sichtbar werden, kann man die neuen Einträge in einer anderen Datei speichern lassen... nach einer Überprüfung kopiert man diese Datei einfach übers Orginal-Gästebuch.
Tip2: Normalerweise wird nach (vollständiger) Eingabe zuerst ein Preview des Eintrags angezeigt, damit man gerade bei Verwendung von HTML-Codes überprüfen kann, ob der Eintrag stimmt. Wenn man überhaupt kein Preview anbieten will, ist es möglich den "modify"-Button durch einen "ok"-Button auszutauschen.

Dateien: guestbook.pl ........ das CGI-Gästebuchscript
gbuch.html .......... das eigentliche Gästebuch
gbuchein.html ....... Seite um sich ins Gästebuch einzutragen
gbucheingabe.html ... Template wie Eingabe-Seite aussieht
gbuchpreview.html ... Template wie Preview-Seite aussieht
gbucheintrag.html ... Template wie der Eintrag auszusehen hat
gbuchmail.txt ....... Template der Mailbenachrichtigung

Allgemeines: Die Scripte sind in Perl und speziell für das Betriebssystem Unix geschrieben. Sie müßen die Scripte zunächst noch an ihren Webserver angleichen (CGI-Problem-Checkliste).

ADDLIST Für Anmeldelisten von Partys oder anderen Unternehmungen
Beschreibung: Wer beispielsweise eine Party plant kann seine Freunde per Web anmelden lassen. Das genaue Aussehen der Anmeldeliste kann man komfortabel in HTML-Seiten einstellen, es müssen dazu keine Scripte editiert werden. Es werden alle Daten eines Webformulars übernommen, sind nicht alle Felder ausgefüllt gibt es eine Warung. Eine Ausnahme bilden die Felder deren Namen mit "x-" oder "xx-" beginnt, sie müssen nicht ausgefüllt sein (bei den "xx-" Feldern wird statt fehlenden Werten "??" eingetragen).

Tip: Indem Sie den HTML-Feldnamen ein "x-" oder "xx-" vorstellen können Sie bestimmen, welche Felder ihre Gäste ausfüllen müssen und welche freiwillig sind.

Dateien: addlist.pl .......... das CGI-Anmeldescript
party.html .......... eine Beispiel-Anmeldeseite
partylist.html ...... die Seite mit bisherigen Anmeldungen
partyeintrag.html ... Template wie der Eintrag auszusehen hat
partyerror.html ..... Template wie Fehlermeldung aussieht

Allgemeines: Die Scripte sind in Perl und speziell für das Betriebssystem Unix geschrieben. Sie müßen die Scripte zunächst noch an ihren Webserver angleichen (CGI-Problem-Checkliste).

SEARCH Bietet eine Suche für Webseiten an, berücksichtigt Frames (V1.1)
Beschreibung: Damit man auf ihrer Homepage schnell alle Informationen findet, hier diese kleine Suche. Es kann im Script zwischen Stichwort- oder Volltextsuche gewählt werden: Die Stichwortsuche berücksichtig jeweils nur die ersten 10 Zeilen, sie ist recht schnell und arbeitet bei Verwendung von Stichworten im HTML-Code genauso effektiv wie eine Volltextsuche.
In einem optionalen Logfile können für Statistikzwecke alle Suchworte mitgeloggt werden.

Stichworte sollten in den üblichen Searchengine-Meta-Tags im HTML-Code stehen
<META NAME="DESCRIPTION" CONTENT="Beschreibung der Seite">
<META NAME="KEYWORDS" CONTENT="Stichworte Stichworte Stichworte">

Wer HTML-Seiten mit Frames verwendet, kann Treffer dem Hauptframe zuordnen, benutzen Sie dann in den Unterframes den Meta-Tag: <META NAME="FRAMESTART" CONTENT="index.html">

Tip: Wenn unerwünschte Webseiten in der Suche auftauchen, kann man die Treffer einer anderen Seite zuordnen, siehe bei oben erklärtem FRAMESTART-Meta-Tag.

Dateien: search.pl ..... das CGI-Suchscript
search.html ... eine einfache HTML-Seite zum Austesten des Scripts

Allgemeines: Die Scripte sind in Perl und speziell für das Betriebssystem Unix geschrieben. Sie müßen die Scripte zunächst noch an ihren Webserver angleichen. Weiterführende Informationen, sowie eine CGI-Problem-Checkliste finden Sie am Ende dieser CGI-Sammlung.

RANDOM Gibt eine zufällige Grafik (oder andere Datei) zurück
Beschreibung: Bei jedem Aufruf wird eine zufällige Grafik zurückgegeben. So kann z.B. eine Webseite mit wechselnder Hintergrundgrafik ausgestattet werden.

Tip: Statt einer Grafik können Sie auch eine zufällige Musik (oder jeden anderen beliebigen Dateityp) zurückgeben.

Dateien: random.pl ....... das CGI-Zufallscript
random.html ..... eine einfache HTML-Seite zum Austesten des Scripts
gfx1.gif ........ eine Beispielgrafik
gfx2.gif ........ eine Beispielgrafik
gfx3.gif ........ eine Beispielgrafik

Allgemeines: Die Scripte sind in Perl und speziell für das Betriebssystem Unix geschrieben. Sie müßen die Scripte zunächst noch an ihren Webserver angleichen (CGI-Problem-Checkliste).

COUNTER Ein Webcounter, mit eingebautem Klauschutz für Webseiten
Beschreibung: Zählt Zugriffe auf Web-Seiten. Zwei Möglichkeiten stehen zur Auswahl: Das Script kann in der HTML-Seite als Grafik (IMG) aufgerufen werden und registriert dann auch evtl geklaute Seiten, Script dazu nur mit absolutem (langem) Pfad aufrufen! Den Seitennamen ans Script anhängen: http://web.server.de/cgi-bin/counter?index.html
Zweite Möglichkeit, das Script kann als SSI (Server Side Include) aufgerufen werden. Es zählt dann Seiten selbst wenn Grafik im Browser ausgeschaltet ist, jedoch gibt es dann leider keinen Klauschutz. Den Seitennamen brauchen Sie hier nicht mehr übergeben.

Tip: Der Klauschutz funktioniert wie folgt: Klaut jemand eine HTML-Seite, dann ruft er sie danach von seinem Rechner auf. Durch die Grafik mit dem absoluten Pfadnamen wird das Counter-Script aufgerufen, das sich dann wiederum den "Dieb" merkt. Es empfiehlt sich also den Aufruf des Counter- Scripts etwas zu tarnen (z.B. an lange Zeile anhängen) damit es nicht gleich bemerkt und entfernt wird.... ein Aufruf reicht schon aus um Diebe (oder Fans) zu erwischen. :)

Dateien: counter ......... das CGI-Counterscript
counter.html .... eine einfache HTML-Seite zum Austesten des Scripts
counter.shtml ... eine weitere Testseite um Script als SSI aufzurufen

Allgemeines: Die Scripte sind in Perl und speziell für das Betriebssystem Unix geschrieben. Sie müßen die Scripte zunächst noch an ihren Webserver angleichen (CGI-Problem-Checkliste).

SURFTISTIC Erstellt eine übersichtliche Statistik aus den Webcounter-Daten (V1.3)
Beschreibung: Wertet die gesammelten Counterdaten aus (siehe letztes Script) und speichert sie im Textformat ab. Das Packet besteht aus zwei Scripts: Mit dem Ersten (surftistic) erhalten Sie eine monatliche Statistik und eine Gesamtstatistik. Ausserdem werden die bestbesuchten Webseiten der letzten beiden Monate grafisch dargestellt, gedacht um den Erfolg neuer Seiten zu messen oder die Navigation zu verbessern. Es werden übrigens nur erlaubte Seiten berücksichtigt, kein Countermisbrauch möglich.
Mit dem zweiten Script (surfhosts) können Sie eine Übersicht der Besucher erstellen lassen. Es werden alle Domains aufgelistet, von denen aus ihre Homepage besucht wurde. Subdomains werden nicht berücksichtigt, es sei denn sie sollen bei bestimmten Domains tiefer aufgeschlüsselt werden.

Tip: Speichern Sie diese Scripts (einschliesslich Konfigurationsdateien) ins Verzeichnis der Counterdaten, Sie haben sie dann bei der Auswertung aller Statistiken schnell zur Hand.
Tip2: Ihre Webseiten müßen Sie zuerst in der entsprechenden Datei (allow) freigeben, alte Statistikdaten können Sie miteinschummeln (base).
Tip3: Möchten Sie die Statistik eines bestimmten Monats neu berechnen, dann löschen Sie den Text "finished" hinter der entsprechenden Monatsstatistik (surftistic.txt) und starten das Script neu.

Dateien: surftistic.pl ............. das CGI-Statistikscript
surftistic.allow.txt ...... erlaubte Webseiten (Konfiguratuion)
surftistic.base.txt ....... Startwerte für Statistik (Konfiguration)
surftistic.txt ............ die erzeugte Statistik
surftistic_warnings.txt ... Statistikwarnungen (geklaute Seiten)

surfhosts.pl .............. das CGI-Besucher-Statistikscript
surftistic_hosts.txt ...... die erzeugte Host-Statistik

Allgemeines: Die Scripte sind in Perl und speziell für das Betriebssystem Unix geschrieben. Sie müßen die Scripte zunächst noch an ihren Webserver angleichen (CGI-Problem-Checkliste).

HTMLCONVERT Konvertiert HTML-Seiten und CGIs für andere Webserver (V1.1)
Beschreibung: Diese Scripte sind für alle Hompagebastler gedacht, die ihre HTML-Seiten und Scripte zuhause bearbeiten und ab und zu die neusten Versionen auf den Webserver kopieren.
Die HTML-Konvertierung macht alle notwendigen Änderungen an CGI-Pfadnamen, berücksichtigt werden: Grafiken, Links, Formulare, Frames, Meta-Refresh und ServerSideIncludes.
Die CGI-Konvertierung macht alle notwendigen Änderungen in CGI-Variablen, berücksichtigt werden Pfade und URLs, genaueres entnehmen Sie dem Script.

Tip: Speichern Sie diese Scripte in ein eigenes Verzeichnis, es sind Werkzeuge die nur für Sie (und beteiligte Webbastler) ausführbar sein sollten.
Tip2: Bei Änderungen an der Homepage kopieren Sie die gewünschten Seiten/Scripte ins new-Verzeichnis und rufen die Konvertierung auf, danach können Sie die Dateien direkt mit FTP auf den Webserver kopieren.

Dateien: htmlconvert.pl ... Konvertiert HTML-Seiten
cgiconvert ....... Konvertiert CGI-Scripte

Allgemeines: Die Scripte sind in Perl und speziell für das Betriebssystem Unix geschrieben. Sie müßen die Scripte zunächst noch an ihren Webserver angleichen (CGI-Problem-Checkliste).

Tips & Links

* Learning by doing. Am besten lernt man durch praktische Erfahrungen, einfach herumspielen und ausprobieren.

* HTML-Befehle sind nicht case-sensitive: Gross/Kleinschreibung spielt also keine Rolle. Zur besseren Übersicht sollten sie jedoch Grossschreibung bei den Befehlen bevorzugen.

HTML-Dateien haben die Endung ".html" (notfalls auch ".htm"), ausserdem sollte eine Datei nicht grösser als 50 KB sein, für Grafiken empfiehlt es sich ein eigenes Unterverzeichnis anzulegen.

* Solange Sie an einer Web-Seite arbeiten, können Sie bei Ihrem Browser (z.B. Netscape) "Preferences/Advanced - Auto Load Images" abschalten. Die Seiten werden beim Reload wesentlich schneller aufgebaut, da die Grafiken aus dem Cache geholt werden! Grafiken nachladen kann man indem man ins Frame (Fenster) klickt und auf "Images" in der Buttonleiste drückt.
Falls Grafiken oder Frames nicht richtig nachgeladen werden, beim Reload gleichzeitig auf Shift (Umschalttaste) drücken! Testen Sie Ihre Seiten mit verschiedenen Fensterbreiten und verschiedenen Webbrowser aus (Netscape und Internet Explorer, UNIX-Freaks auch Lynx).

* Nehmen Sie sich nicht zuviel vor! Erstellen Sie lieber ein-zwei gute Seiten und halten Sie diese auf dem Laufenden.

* Wie geht's weiter? Am Besten ab und zu bei anderen vorbeischauen und einen Blick in deren Sourcecode werfen. Fragen Sie auch andere Homepagebastler oder lesen Sie ein Buch ihrer Wahl (siehe weiter unten).

* HTML Kompendium, HTML Einführung: zwei umfangreiche HTML-Anleitungen

* Mat's Script Archive, CPAN-Archive: weitere CGI-Sammlungen und Perl-Programme

* Vodoo's JavaScript Page: eine JavaScript Anleitung mit vielen Beispielen

* Unix Kurzanleitung: Eine Einführung in das Betriebssystem Unix

* Home.Pages: hier kann man seine Homepage eintragen und eine kurze Adresse (URL) bekommen

* Kostenlose Homepages (Geocities), WebCounter, Webhits: Speicherplatz und Webcounter ganz umsonst

* Golden HTML Rules: für Homepagebastler wichtiger als Freund/Freundin oder Hund ! :)

* Newsgroup de.comm.infosystems.www.authoring: Zum Fragen stellen und Infos austauschen

* Newsgroup de.comp.lang.javascript, de.comp.lang.perl: Infos für Script-Programmierer

Bücherempfehlungen für Web-Bastler und Programmierer:
"CGI Programmierung", Shishir Gundavaram,O'Reilly 1996, ISBN 3-930673-43-6
"JavaScript: Einführung, Programmierung, Referenz", Stefan Koch, dpunkt-Verlag 1997, ISBN 3-920993-64-0
"Die Sprache des Web: HTML4", Robert Tolksdorf, dpunkt-Verlag 1997, ISBN 3-920993-77-2

FAQs (Frequently Asked Questions)

Eigene Webseiten basteln?: Kein Problem, für den Anfang benötigen Sie lediglich zwei Dinge: erstens einen einfachen Texteditor (z.B. bei Win95 im Startmenü Programme/Zubehör/Editor) und zweitens einen Webbrowser (z.B. Netscape oder Internet Explorer). Basteln Sie eine kleine Seite, so wie im HTML Crashkurs angegeben... speichern Sie diese Seite in ein beliebiges Verzeichnis (z.B. bei Win95 in C:\Eigene Dateien). Zum Anschauen die selbst gemachte HTML-Seite im Webbrowser angeben (File - Open). Nach Änderungen an der HTML-Seite im Webbrowser auf Reload drücken.
Ihre so erstellte Homepage kopieren Sie in den Speicherplatz, den ihr Provider/Universität/Schule zur Verfügung gestellt hat. Fragen Sie bitte dort nach und Sie erfahren so auch unter welcher Adresse ihre Homepage zu erreichen ist. Zum Kopieren der Homepage benutzen Sie z.B. ein sogenanntes FTP-Programm.
Was sind CGI-Scripte?: Kleine Programme die vom Webserver ausgeführt werden. CGIs sind eine verbreitete Möglichkeit Web-Seiten vielseitig zu machen und ihnen einen interaktiven Touch zu geben. Das Erstellen eigener CGIs ist eher etwas für Fortgeschrittene, lesen Sie auch den CGI-Crashkurs.
Kann ich feststellen wieviele meine Homepage besuchen?: Ja, entweder stellt Ihnen der Provider das WWW-Logfile zur Verfügung... oder auch mit Hilfe von sogenannten Access-Countern, das sind kleine CGI-Scripte (siehe letzte Frage) welche Zugriffe auf die Homepage zählen. Sie können sich die Besucheranzahl direkt auf der Seite anzeigen lassen, oder unsichtbar zählen und dann auf einer extra Seite anzeigen lassen.
Beide Alternativen liefern keine ganz genauen Daten, jedoch kann man sehr gut erkennen wie beliebt Webseiten eigentlich sind. Erkundigen Sie sich ob bei Ihrem Provider/Rechenzentrum ein Logfile/Access-Counter bereits zur Verfügung steht oder verwenden Sie einen beliebigen Webcounter (siehe Links). Als Fortgeschrittener können Sie sich auch mit Hilfe der CGI-Sammlung dieser Anleitung schnell selbst einen Counter programmieren.
Kann ich mehr Abstand zwischen Wörtern und Grafiken erreichen?: Eine Eigenart von HTML-Dokumenten ist, daß aus mehreren Leerzeichen immer ein Leerzeichen gemacht wird. Möchten Sie mehr Freiraum zwischen Wörter oder Grafiken, dann muss man tricksen:
Die einfachste Lösung ist das Tag für Leerzeichen   Eine andere das Textstück mit <PRE> ... </PRE> zu umschließen, dieser Abschnitt wird dann genau so ausgegeben wie er im Texteditor erscheint, also auch mit allen Leerzeichen. Leider ist das Ergebniss von <PRE> nicht wirklich besonders ansprechend, denn der Text wird nur in Schreibmaschienenschrift ausgegeben ähnlich zu <TT> (siehe auch: Die wichtigsten HTML-Befehlen).
Fortgeschrittene können mit Hilfe von Tabellen und durchsichtigen Füllgrafiken Abstand zwischen Text und Grafiken bringen, oder auch den Bildschirm beliebig anordnen.
Kann ich festlegen wer bestimmte (geheime) Webseiten besuchen darf?: Kein Problem, Sie können jedem User ein eigenes Passwort zuweisen. Jedoch brauchen Sie dazu ein paar Computerkenntnisse: Kopieren Sie die entsprechenden Webseiten in ein extra Unterverzeichnis und legen Sie darin die beiden Dateien .htaccess und .htpasswd (für alle lesbar) an. Die Datei .htaccess hat das folgende Format:
AuthUserFile /home/www/public_html/.htpasswd AuthGroupFile /dev/null AuthName Top-Secret AuthType Basic require valid-user
Gleichen Sie den Pfadnamen in der ersten Zeile entsprechend an. Die Passwörter liegen in der Datei .htpasswd verschlüsselt vor, benutzen Sie das folgende C-Programm dazu: htpasswd.c (z.B. unter UNIX mit gcc kompilieren). Falls Sie alles richtig gemacht haben, wird ab sofort jeder User im Webbrowser nach Name und Passwort gefragt!
Wie wird Musik auf meiner Homepage abgespielt?: Gerade bei Begrüßungsseiten recht beliebt: Sie können auf Web-Seiten automatisch Musik im Hintergrund abspielen lassen (Soundkarte notwendig). Zur Zeit können dazu nur Midi-Dateien (Endung .mid) verwendet werden, sie sind recht klein, da in ihnen nur die reinen Noten und Instrumentendaten gespeichert sind. Mit den folgenden Zeilen wird Musik von Netscape und Internet Explorer abgespielt:
<EMBED SRC="bsp.mid" WIDTH=2 HEIGHT=1 AUTOSTART=TRUE HIDDEN=TRUE ALT=""> <NOEMBED><BGSOUND SRC="bsp.mid" ALT=""></NOEMBED>
Falls die Musik jetzt noch immer nicht im Webbrowser zu hören ist, muß man in seinem Webverzeichnis die Datei .htacess (für alle lesbar) anlegen, bzw folgende Zeile hinzufügen:
AddType audio/midi mid midi
Bitte beachten Sie, daß viele Surfer ständige Hintergrundmusik als nervend empfinden. Möglichst wenig benutzen, nur kleine Midi-Dateien verwenden (z.B. mit Midi-Editor verkleinern) und keinem verraten woher die Idee mit der Hintergrundmusik war! *grins*
Wie erreicht man, daß Links nicht unterstrichen werden?: Normalerweise kann man im Webbrowser einstellen ob Links (A HREF-Tag) unterstrichen werden oder nicht, doch gerade bei Navigationsmenus sehen unterstichene Links oft störend aus. Mit den folgenden Zeilen kann man das verhindern (neuer Webbrowser ist Voraussetzung, Befehle vor dem BODY-Tag einfügen):
<STYLE TYPE="text/css"></STYLE>
Wie wird automatisch eine weitere Seite nachgeladen?: Kleine Diashows oder von einer Startseite automatisch zur nächsten Seite zu springen sind praktische Spielereien. Dazu z.B. die folgende Zeile in den HTML-Header setzen (dort wo auch Title festgelegt wird):
<META HTTP-EQUIV=REFRESH CONTENT="15;URL=pirateworld.html">
Die angegebene Seite (pirateworld.html) wird nach 15 Sekunden geladen.
Wie wird meine Homepage in Searchengines aufgenommen?: Wahrscheinlich sind Sie längst aufgenommen, probieren Sie es einmal aus: Geben Sie z.B. bei AltaVista ihren (Spitz-)Namen ein.... überrascht? Sogenannte Searchrobots durchsuchen automatisch Webseiten und merken sich den Inhalt. Sie können sich auch manuell in einen Searchengine eintragen, beispielsweise bei Altavista auf Add-URL klicken. Es reicht dort eine Startseite anzugeben, der Searchrobot durchsucht dann auch ihre Unterseiten.
Fügen Sie in ihre Seiten folgende Tags im HTML-Header ein (dort wo auch Title festgelegt wird):
<META NAME="DESCRIPTION" CONTENT="Die Gyroshund Homepage.... mit Online-Bestellung!"> <META NAME="KEYWORDS" CONTENT="Tomaten Tsatziki lecker essen">
Die erste Zeile ist eine kurze Beschreibung, mit der Ihre Seite im Searchengine auftaucht. In der zweiten Zeile können Sie Suchworte definieren (durch Leerzeichen getrennt), zusammen mit der Beschreibung und den 10 häufigsten Wörtern im Text kann darüber Ihre Seite gefunden werden.
Woher bekomme ich ein Gästebuch?: Das ist eindeutig eine Sache für Fortgeschrittene, vielleicht lassen Sie sich von jemandem helfen, der sich damit auskennt. Am einfachsten ist es sich den Inhalt eines Formulars per Email zuschicken zu lassen und dann die Änderungen am Gästebuch manuell vorzunehmen, dazu ein Beispiel:
<FORM METHOD=POST ACTION="mailto:user@mymail.de" ENCTYPE="text/plain" TITLE="Eintrag ins Gaestebuch"> Name & Email:<BR><INPUT NAME="Name" SIZE=30> <INPUT NAME="Email" SIZE=30><BR> <TEXTAREA NAME="Text" ROWS=6 COLS=75 WRAP=HARD></TEXTAREA><BR> <INPUT TYPE=SUBMIT VALUE="Abschicken"><BR> </FORM>
Doch wenn Sie etwas mit Programmierung (z.B. in Perl oder C) vertraut sind, dann können Sie sich (fast) genauso schnell mit Hilfe der CGI-Sammlung dieser Anleitung ein vollautomatisches Gästebuch erstellen.
Was soll ich tun, wenn meine CGI-Scripte nicht funktionieren?: Falls statt der erwünschten Ausgabe der Sourcecode des Scripts angezeigt wird, dann sind CGIs für Sie nicht freigegeben oder Sie haben es nicht über den Webserver abgerufen (von der lokalen Festplatte funktioniert es nicht). Bei Ihrem Provider/Rechenzentrum CGIs beantragen (falls möglich)... fragen Sie dort auch gleich nach dem passenden CGI-Verzeichnis und CGI-Pfad.
Wenn jedoch ein Server-Error gemeldet wird, sollten Sie folgende Problem-Checkliste durchgehen:
* Sind die Zugriffsrechte des CGI-Scripts richtig gesetzt? Lese- und Ausführrechte entsprechend setzten (z.B. chmod a+rx dateiname), unter AFS (Andrew File System) auch die AFS Rechte (siehe Unix-Kurzanleitung).
* Stimmen bei Perl-Scripts der Pfad in der ersten Zeile? Vergleichen mit dem Unix-Befehl which perl.
* Haben Sie das Script im Webbrowser mit der richtigen Adresse aufgerufen? Nicht immer ähnelt die CGI-Adresse der Homepage-URL, erkundigen Sie sich bei Ihrem Provider/Rechenzentrum.
* Sind auch keine störenden Zeichen im Script? Wenn Sie auf Windows erstellte Scripte nach Unix übertragen, bei FTP immer den ASCII-Mode angeben, ansonsten bleiben Steuerzeichen am Zeilenende (Newline) übrig. Wenn Sie eine Datei am Unix-Prompt anschauen (less dateiname) und ^M an den Zeilenenden sehen... entfernen Sie diese oder übertragen Sie die Datei noch einmal korrekt. Übrigens: HTML-Dateien stören diese extra Zeichen nicht.
* Ist beim Script selbst ein Fehler aufgetreten? Das Script (mit genau den selben Parametern) von Hand aufrufen, also beispielsweise den Dateinamen am Prompt eingeben. Wenn statt der gewünschten Ausgabe ein Warning oder Error angezeigt wird, eventuelle Programm oder Syntaxfehler beseitigen. In der Praxis ist dies die häufigste Fehlerquelle.
Wenn man übrigens bei Perl-Scripts in der ersten Zeile vorrübergehend " -w" anhängt, bekommt man alle möglichen Fehlerquellen angezeigt.
* Wenn Sie in Ihren Scripten auf Dateien zugreifen, achten Sie darauf daß die Zugriffsrechte richtig gesetzt sind: Eine Datei die von CGI-Scripten gelesen wird, als auch ihr Verzeichnis müßen für alle lesbar sein (also nicht nur für Sie). Wenn Sie mit CGI-Scripten in Dateien schreiben, muß die Datei und ihr Verzeichnis zusätzlich für alle schreibbar sein. Natürlich müssen grundsätzlich alle Verzeichnisse mit denen CGI-Scripte arbeiten zugreifbar sein (lookup), das heisst in den höhergelegenen Verzeichnissen muß Zugriffsrecht für alle gesetzt sein. Zum Testen können Sie sich beispielsweise als ein anderer User einloggen und testen ob die Dateien wie gewünscht lese/schreibbar sind. In der Praxis sind fehlende Zugriffsrechte die zweit häufigste Fehlerquelle.
* In seltenen Fällen (nicht bei Anfängern) kann auch ein installierter CGI-Wrapper Schuld sein, dieser begrenzt Speicherverbrauch und Prozessorzeit. Bei Überschreitung bricht er das schuldige CGI-Script einfach mit einem Server-Error ab. Ändern Sie das Script so, daß es speicherschonender arbeitet (beispielsweise Dateien zeilenweise einlesen oder Arrays mit undef wieder freigeben).
Welche Möglichkeiten für dynamische Webseiten gibt es außer CGI?: Da gibt es z.B. Dynamic HTML, es wird benutzt um HTML und einiges anderes zu steuern und zu koordinieren.
Sehr verbreitet ist JavaScript, eine vielseitige Scriptsprache (die mit echtem Java nix zu tun hat). Geeignet für Eingabe-Überprüfungen und allerlei praktischen Spielereien die direkt in HTML-Seiten eingebaut und dann vom Webbrowser ausgeführt werden. Gerade JavaScript ist eine ideale Ergänzung zu CGIs, vielleicht machen Sie sich damit einmal vertraut (weiterführende Informationen unter Links).
Java ist eine neue Programmiersprache und bietet nicht nur Möglichkeiten für interaktive Web-Seiten, sondern man kann damit auch völlig eigenständige Programme entwickeln. Die Entwicklung von Java-Applikationen ist recht aufwendig. ActiveX ist Microsofts Antwort auf Java und versucht damit einen ähnlichen Weg zu verfolgen.
Plugins sind kleine Programme, die den Browser aufrüsten um mit bisher unbekannten Formaten etwas anfangen zu können. Es gibt sie in großer Variation z.B. um damit Audio- oder Videodaten besser darstellen zu können. Animated GIFs sind wahrscheinlich die einfachsten dynamischen Elemente. Es sind ganz normale Grafiken im GIF-Format, in denen einzelne Animationsschritte abgespeichert sind. Sie werden von jedem Browser (der nicht uralt ist) abgespielt.
All die eben aufgezeigten Möglichkeiten sind Erweiterungen des Webservers, zumindest werden Sie von ihm ausgeführt. Im Gegensatz dazu werden CGIs und ActiveServerPages (man erkennt Sie an der Endung ASP) vom Webserver direkt ausgeführt. ActiveServerPages sind eine Microsoft Eigenheit, genauer gesagt sind sie eine Variante der erwähnten Server Side Includes.
Wie komme ich an weitere CGI-Scripte?: Wenn Sie in der CGI-Sammlung dieser Anleitung nicht alles finden sollten, dann versuchen Sie es einmal bei den CGI-Sammlungen die unter Links aufgeführt sind... oder schreiben sie uns eine Email.
Kann ich mir diese Anleitung auch ausdrucken?: Klar, einfach im Menü auf "Print" drücken (evtl. vorher mit der Maus in dieses Fenster klicken), die entsprechenden CGI-Scripte laden Sie sich per Mausklick herunter. Ausserdem können Sie sich diese Anleitung als Offline-Version für zuhause herunterladen (siehe unten), einschließlich aller Grafiken, Scripten und einer reinen Textversion.

And never forget:

Wissenschaftler haben es endlich gelöst: Spät nachts, der Kühlschrank ist leer,
die Freundin (oder Freund) weggelaufen, die Lieblings TV-Serie verpasst... verdammt,
nur noch eine Chipstüte, was kann uns da noch retten? HOMEPAGE basteln !!!

Okay, das war's!
Jetzt können Sie sich auf Ihre Homepage stürzen, mit allen nötigen Informationen sind Sie ausgestattet. Diese Anleitung gibt es übrigens als Offline-Version oder unter http://html.home.pages.de

Viel Spass beim Basteln! Moak thx to Tim Berners-Lee, CERN and Larry Wall

Author: Mark "Moak" Seuffert, Februar 1998 [PirateWorld]