SELFHTML Navigationshilfen | |
Häufig gestellte Fragen (FAQ) |
|
Lesen Sie sich diese Seite in Ruhe und ganz durch, wenn Sie bereits erste Erfahrungen beim Erstellen von Web-Seiten gewonnen haben und in jenes Stadium der Entwicklung eingetreten sind, in dem viele kleine und große Wünsche im Kopf entstehen. Solche Wünsche sind nämlich ganz normal. Einige dieser Wünsche und die entsprechenden Fragen sind "typisch" und werden immer wieder gestellt. Solche Fragen werden auf dieser Seite gesammelt. Die Sammlung erhebt keinerlei Anspruch auf Vollständigkeit. Es werden nicht alle erdenklichen Fragen gesammelt (dann wäre diese Seite wohl die umfangreichste der Welt), sondern nur wirklich häufig gestellte. Ob Ihre Fragen dabei sind, ist natürlich ein Glücksspiel.
Die Fragen werden mit kurzen Hinweisen, gegebenenfalls mit Beispielen und so weit wie möglich mit Verweisen auf Stellen innerhalb der vorliegenden Dokumentation beantwortet. Insofern eignet sich diese Seite zur Navigation, nämlich als "problemorientierte" Navigation.
Wenn Sie Fragen haben, die hier nicht aufgelistet sind, dann lesen Sie mal den Abschnitt über Support. Dort erfahren Sie, wo und wie Sie Ihre Fragen im Internet stellen können.
Die Fragen sind bewusst nicht nach Sprachen und Technologien sortiert, sondern nach "Problemzonen". Denn nicht wenige der Antworten verweisen auf mehrere Technologien. Einige Fragen beantworten sich auch einfach dadurch, dass man einfach nicht wusste, dass zur Lösung eine andere Technologie erforderlich ist als die, von der man sich zunächst die Lösung erwartete.
Einige der "Wünsche" sind aus Anfängersicht vielleicht verständlich, doch in der Web-Praxis durchaus unerwünscht, weil Sie die Besucher Ihrer Seiten dadurch aller Wahrscheinlichkeit nach nur verärgern. Da es kaum Ihr Ziel sein kann, Ihre Besucher zu verärgern (die kommen nämlich nie wieder), werden Sie an den entsprechenden Stellen darauf hingewiesen.
Dies ist ein kleines Extra-Feature, bekannt unter dem Namen Favicon, das mit der Produktversion 5.0 des Internet Explorers eingeführt und mittlerweile von vielen anderen Browserherstellern übernommen wurde. Angezeigt werden kann ein solches Favicon dann, wenn eine Seite mit einem Favicon verknüpft ist - im Internet Explorer jedoch nur dann, wenn ein Anwender die Seite in seine Favoriten mit aufnimmt. Es wird dann im Menü der Favoriten dem Eintrag vorangestellt, und beim Anzeigen der Seite(n) erscheint es in der Adresszeile des Browsers.
Das Favicon selbst ist eine kleine Grafik, die im Windows-Icon-Format (Dateien *.ico) vorliegen und eine Größe von entweder 32x32 oder von 16x16 Pixeln haben sollte. Um solche Grafiken zu erstellen, benötigen Sie ein Grafikprogramm, das Grafiken im ICO-Format abspeichern kann.
Die Verknüpfung zwischen einer Web-Seite und einer Favicon-Grafik kann auf zwei Weisen hergestellt werden: entweder Sie legen die Grafik im Wurzelverzeichnis einer Domain unter dem festen Dateinamen favicon.ico (kleingeschrieben) ab, sodass der URI im Schema lautet: http://www.example.org/favicon.ico. In diesem Fall wird das Favicon automatisch erkannt, sobald Anwender irgendeine Seite des Web-Angebots unterhalb dieser Domain zu ihren Favoriten hinzufügen. Die andere Möglichkeit besteht darin, im Kopf einer HTML-Datei folgendes zu notieren:
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">
Für Angaben im Attribut href
gelten die Regeln zum Referenzieren in HTML, der Mime-Typ lautet image/x-icon
oder (weniger verbreitet) image/vnd.microsoft.icon
. Liegt das Favicon im Wurzelverzeichnis, ist es wie oben angeführt via /favicon.ico
zu referenzieren. Der Name der Icon-Datei ist in diesem Fall egal, nur die Dateiendung muss für den Internet Explorer .ico lauten. Andere Browser akzeptieren auch davon abweichende Grafikformate.
Das ist eine der Fragen, die gar nicht gerne gesehen werden. Und die Antwort vorab: es gibt keine wirksame Möglichkeit zu verhindern, dass Besucher Ihrer Web-Seite den Quelltext ansehen können.
Der Wunsch ist deshalb verpönt, weil das Web auf offen dokumentierten Klartextsprachen wie HTML, CSS oder XML basiert. Es gibt also nichts, was zu verheimlichen sinnvoll wäre, denn jeder, den es interessiert, kann sich das entsprechende Wissen im Netz aus Dokumenten und Dokumentationen besorgen.
Ferner löst der Wunsch entnervte Reaktionen aus, weil er von Unkenntnis zeugt. Sie müssen nämlich bedenken, dass Ihre im Internet zur Verfügung gestellten Web-Seiten beim Aufrufen an den Rechner des Anwenders übertragen werden. Die Daten landen dort nicht nur im Anzeigefenster des Browsers, sondern der Browser speichert die Daten auch auf der Festplatte des Anwenders in seinem Cache-Speicher ab. Jeder Anwender kann mit etwas Kenntnis oder mit Hilfe spezieller "Cache-Explorer"-Programme die Daten durchforsten, die auf seiner Festplatte gelandet sind, und den darin gespeicherten Quelltext ansehen, kopieren usw.
Verständlich ist der Wunsch, dass Sie nicht von anderen Anwendern "beklaut" werden wollen, indem diese sich einfach Ihre mühsam erstellten Grafiken oder JavaScripts und dergleichen kopieren und von Ihrer Arbeit profitieren, ohne dass Sie etwas davon haben. Das Kopieren werden Sie wie gesagt kaum verhindern können. Aber Ihr geistiges Eigentum ist Ihr gutes Recht. Zwar sind Ihre Web-Seiten ohnehin durch das geltende Urheberrecht geschützt, doch um der Sache Nachdruck zu verleihen und bei potentiellen Dieben eine höhere Hemmschwelle zu erzeugen, können Sie Hinweise in den Quelltext einfügen. Notieren Sie beispielsweise einen HTML-Kommentar weit oben in der Datei, z.B. direkt nach dem einleitenden <html>
-Tag, und weisen Sie im Kommentartext darauf hin, was Sie nicht wünschen.
JavaScript-Quelltext können Sie z.B. in eine externe JavaScript-Datei auslagern. So kommen zumindest unerfahrene Anwender nicht ganz so leicht an den Quelltext.
Dies geht in die gleiche Richtung wie die Frage nach dem Schützen von Quelltext. Wenn der Anwender eine Grafik im Web-Browser sieht, braucht er sie gar nicht mehr mit dem Kontextmenü und "Speichern unter" auf seinen Rechner zu kopieren, weil sie längst dort gespeichert ist - nämlich im Browser-Cache. Die "Speichern-Unter"-Option im Kontextmenü ist für unbedarfte Anwender gedacht, die eine Grafik vielleicht noch mal in Ruhe offline betrachten möchten. Erfahrene Seitenbastler, die wirklich die Absicht haben, eine fremde Grafik für eigene Seiten zu verwenden, benötigen diese Option im Kontextmenü nicht. Machen Sie sich also nicht die Mühe. Auch in diesem Fall gilt: das Kopieren und Klauen können Sie nicht technisch verhindern, aber juristisch haben Sie ein Recht darauf, für Ihre selbst erstellten Grafiken den geistigen Urheberschutz in Anspruch zu nehmen. Ganz einfach ist es allerdings nicht, diesen juristischen Anspruch durchzusetzen. Denn es könnte ja Aussage gegen Aussage stehen, wenn der Gegner behauptet, es sei umgekehrt und Sie hätten von ihm geklaut. Deshalb gibt es die Möglichkeit, so genannte Wasserzeichen in Grafiken einzubauen. Dabei wird nach einem bestimmten Schlüssel ein Text in dem binären Bit-Salat einer Grafikdatei versteckt, z.B. ein Text, der Sie als Urheber der Grafik ausweist (das Verfahren wird als Steganografie bezeichnet). In der Grafik selbst sieht man nichts davon, doch im Zweifelsfall können Sie anhand des Wasserzeichens nachweisen, dass Sie der geistige Urheber der Grafik sind. Wasserzeichen können jedoch bei Grafikformaten, die mit Verlust komprimieren, wie etwa das im Web vielfach eingesetzte JPEG-Format, teilweise verloren gehen bzw. unleserlich werden. Um sich näher über die Technik der Wasserzeichen zu informieren, suchen Sie mal in einer der bekannten großen Suchmaschinen nach Wasserzeichen oder Steganografie.
Wenn Sie das alles nicht befriedigt und Sie doch lieber die rechte Maustaste sperren wollen, dann können Sie dieses Script verwenden. Um die Funktionsweise des Scripts zu verstehen, müssen Sie sich mit JavaScript befassen, speziell mit Ereignisüberwachung. Seien Sie sich aber im Klaren darüber, dass Sie den Anwender damit einschränken und sich eine solche Manupulation in modernen Browsern verhindern lässt. Denn das Kontextmenü der rechten Maustaste enthält schließlich noch andere wichtige Befehle, beispielsweise den zum Öffnen eines Verweises in einem neuen Fenster. Kein Anwender möchte in seinem Bewegungsspielraum eingeschränkt werden, Sie doch auch nicht, oder? Und schon gar nicht auf einer Web-Seite, die man freiwillig aufgerufen hat und die man jederzeit auf Nimmerwiedersehen verlassen kann.
Es gibt verschiedene Möglichkeiten, Web-Seiten nur bestimmten, autorisierten Anwendern zugänglich zu machen. Die Lösungen sind unterschiedlich gut und sicher.
Die im Web üblichste und gegen normale Anwender ausreichende Methode, Web-Seiten zu schützen, ist diejenige, die auf HTTP-Ebene funktioniert. Der Mechanismus dazu ist im NCSA-Servermodell festgelegt und wird als HTTP Authentication bezeichnet (wobei diese Technik unter dem Namen htaccess bekannter ist). Viele Web-Server unterstützen diesen Mechanismus, z.B. der verbreitete Apache-Server. Beim ersten Zugriff auf eine Datei, die in einem geschützten Verzeichnis liegt, öffnet der Browser ein Dialogfenster, in dem der Anwender User-ID und Passwort eingeben muss. Nur wenn beide Angaben korrekt sind, kann er auf die Daten in dem Verzeichnis und auf Unterverzeichnisse zugreifen. Wie das funktioniert, wird im Abschnitt Verzeichnisse und Dateien mit Passwort schützen beschrieben.
Ein weiterer, nicht selten gewählter Weg ist es, alle Anwender erst mal mit einem Formular zu beglücken, in dem sie ein Passwort eingeben müssen. Beim Absenden des Formulars wird dann ein CGI-Script aufgerufen, das Passwörter verwaltet und nachprüfen kann, ob das eingegebene Passwort registriert ist. Das ist zwar auch noch vergleichsweise sicher, aber nicht ganz so wirksam wie der htaccess-Schutz, weil jemand, der erst mal die "geheimen" Adressen kennt, diese jederzeit direkt aufrufen (und beispielsweise Links darauf setzen) kann. Das CGI-Script bekommt davon gar nichts mit. Es gibt Freeware-Scripts im Netz, meist in Perl geschrieben, die so einen Passwortschutz realisieren. Im Online-Angebot von SELFHTML aktuell finden Sie Links zu entsprechenden Quellen im Web:
Link-Verzeichnis: CGI/Perl
Link-Verzeichnis: PHP
Link-Verzeichnis: ASP
Suchen Sie in den Script-Sammlungen nach dem Stichwort Passwort bzw. bei englischsprachigen Sammlungen nach password.
Der dritte Weg zum Seitenschutz ist JavaScript. Auch dabei wird eine Seite mit einem Formular und Eingabemöglichkeit eines Passwortes vorgeschaltet. JavaScript überprüft die Eingabe und weist den Besucher dann entweder ab oder leitet ihn auf die geheimen Seiten. Eine beliebte Methode dabei ist es, einfach den Namen der "geheimen" Datei als Passwort zu verlangen und nach Eingabe des Passworts mit location.href zu der eingegebenen Datei zu springen. Das ist allerdings ein reiner Placebo-Effekt. Es gibt auch JavaScripts, die mit einem richtigen Verschlüsselungs-Algorithmus arbeiten, der nicht ohne weiteres durchschaubar ist. Dieses Script ist ein Beispiel dafür. Verwenden Sie die Beispieldatei zunächst dazu, um Passwörter Ihrer Wahl einzugeben. Das Script leitet Sie dann auf (noch nicht) existierende Dateinamen weiter, die nach seinem Algorithmus auf das eingegebene Passwort passen. Wenn Sie dann Seiten mit dem entsprechenden Dateinamen erstellen, findet das Script die entsprechende Seite, wenn das Passwort korrekt eingegeben wird. Auch in diesem Fall sind also Dateinamen und Passwort aneinander gekoppelt. Solche Verfahren erlauben keine benutzerspezifischen Passwörter. Das ist mit JavaScript auch gar nicht möglich, da JavaScript im Browser des Anwenders abläuft. Eine zentrale Benutzerverwaltung ist aber nur server-seitig möglich.
JavaScript-Lösungen sind also vergleichsweise primitiv und eher eine Notlösung für Anbieter, die ihre Homepages bei Billiganbietern haben, wo kein htaccess und nicht mal CGI zur Verfügung steht. Auch bei den JavaScript-Lösungen gilt: wer die geheimen Dateinamen erst mal kennt, kommt auch auf direktem Wege dorthin.
Eine ganz schlichte Lösung für Leute, die sich keine Probleme machen wollen, wo keine sind, gibt es aber auch: stellen Sie Seiten unverlinkt ins Netz und teilen Sie nur solchen Personen die Adresse mit, die diese Seiten sehen können sollen. Notieren Sie den Pfad nicht in einer robots.txt-Datei, da diese für jedermann sichtbar ist. Verbieten Sie Suchmaschinen besser mittels meta-Element die Aufnahme in den Index. Allerdings bietet auch diese Methode keinen echten Schutz, da sich Besucher, denen die Adresse bekannt ist nicht authentifizieren müssen.
Nein, weder mit JavaScript noch mit CGI/Perl oder vergleichbaren Technologien. Jeder moderne Web-Browser verhindert das. Denn wenn so etwas möglich wäre, könnte beispielsweise jedes häufig aufgerufene CGI-Script (Counter, Suchmaschine usw.) nebenbei eine E-Mail-Adressensammlung pflegen. Und E-Mail-Adressen als Massenware lassen sich an Spammer verkaufen, also an jenes Pack von Mensch, das Tag für Tag millionenfach sinnlosen Werbemüll durchs Netz an E-Mail-Adressen schickt und damit das Netz verstopft.
Was Sie ermitteln können, sind die IP-Adressen der Host-Rechner Ihrer Seitenbesucher. Ein aufgerufenes CGI-Script kann beispielsweise mit den CGI-Umgebungsvariablen REMOTE_ADDR
und REMOTE_HOST
entsprechende Daten ermitteln. Über einen Whois-Service lässt sich dann der Zugangsprovider der entsprechenden Person ermitteln und kontaktieren, z.B. bei begründbarem Verdacht auf einen kriminellen Anwender.
Dabei gibt es zwei verbreitete Möglichkeiten: mit Hilfe eines in HTML eingebundenen Java-Applets, oder in Form eines CGI-basierten Chats.
Bei Java-Applets, die einen Chat realisieren, muss man nochmals unterscheiden zwischen solchen, die ein eigenes, proprietäres Internet-Protokoll zur Datenübertragung verwenden, und solchen, die einfach einen java-basierten IRC-Client darstellen. Java-Anwendungen, die ein proprietäres Protokoll verwenden, bestehen aus zwei Teilen: aus dem Java-Applet, das in HTML eingebunden wird (Client), und aus einem Java-Programm, dass einen zugehörigen Server darstellt. Auf http://java.seite.net/chat/ finden Sie eine Beschreibung, wie man eine solche Client-Server-Anwendung in Java selber realisieren kann. Wenn Sie sich nicht in der Lage fühlen, so etwas selber zu programmieren, dann können Sie auch auf vorhandene Web-Services zurückgreifen. Der bekannteste Anbieter für java-basierten Chat mit eigenem System ist SpinChat. Dort können Sie sich auch den HTML-Quelltext zum Einbau eines eigenen Chats holen. Der Chat gehört dann zum Verbundsystem des Anbieters Spin.
Java-Applets, die einen echten IRC-Client darstellen, erlauben dagegen die Teilnahme am weltweiten IRC-Netz. Zigtausende von Chaträumen auf vielen verschiedenen IRC-Servern sind damit erreichbar. Suchen Sie in einer großen Suchmaschine nach java applet irc client, um solche Java-Applets für die eigene Homepage ausfindig zu machen.
CGI-basierte Chats nutzen die Kommunikation zwischen Browser und Server über das HTTP-Protokoll. Das HTTP-Protokoll hat allerdings Eigenschaften, die es nicht unbedingt für Chat-Anwendungen qualifizieren. Im Gegensatz zum IRC-Protokoll halten Client und Server nicht ständig Verbindung. Eine Kommunikation findet nur statt, wenn z.B der Browser vom Server Daten anfordert. Die meisten CGI-basierten Chats bauen daher in den HTML-Code, der an den Browser gesendet wird, die Meta-Angabe zum Automatischen Weiterleiten ein, um das verarbeitende CGI-Script nach ein paar Sekunden erneut aufzurufen, das dann wieder den aktuellen "Zustand" des Chat-Raums an den Browser sendet, inklusive der eingebauten Meta-Angabe für den nächsten Aufruf. Ein Echtzeit-Chat wie bei IRC ist damit aber nicht möglich. Ein Vorteil der CGI-basierten Chats ist dagegen jedoch, dass beim Anwender keine zusätzlichen Voraussetzungen wie aktiviertes Java erforderlich sind. Im Online-Angebot von SELFHTML aktuell finden Sie Links zu CGI-Script-Sammlungen im Web, wo Sie unter anderem auch CGI-basierte Chats finden:
Suchen Sie in den Script-Sammlungen nach dem Stichwort Chat.
Zum Betrieb eines CGI/Perl-basierten Chats benötigen Sie eine CGI-Schnittstelle und den Perl-Interpreter. Fragen Sie gegebenenfalls den Provider, wo Sie Ihre Web-Seiten hosten, danach!
Gästebücher und Foren sind typische Anwendungen, die mit Hilfe von CGI/Perl oder PHP realisiert werden.
Die reizvollste, aber auch schwierigste Variante ist, sich eine eigene Lösung von Grund auf zu programmieren. Dazu sind jedoch gute bis sehr gute Kenntnisse in Programmiersprachen wie Perl oder PHP erforderlich.
Die zweite Möglichkeit, eine etwas mildere Variante der ersten, ist die, ein vorhandenes Script einzusetzen und anzupassen. Es gibt viele frei verfügbare Scripts, die Sie sich downloaden und für Ihre Zwecke anpassen können. Auch dazu sind jedoch zumindest Grundkenntnisse in den verwendeten Programmiersprachen erforderlich. Im Online-Angebot von SELFHTML aktuell finden Sie Links zu CGI-Script-Sammlungen im Web, wo Sie unter anderem auch CGI-basierte Chats finden:
Suchen Sie in den Script-Sammlungen nach den Stichwörtern Gästebuch (bei englischsprachigen Sammlungen guestbook) bzw. Forum oder message board.
Zum Betrieb von CGI/Perl-basierten Gästebüchern oder Foren benötigen Sie eine CGI-Schnittstelle und den Perl-Interpreter, bei PHP ein auf dem Server installiertes PHP. Fragen Sie gegebenenfalls den Provider, wo Sie Ihre Web-Seiten hosten, danach!
Als dritte Möglichkeit kommen CGI-Services für eigene dynamische Web-Seiten in Frage. Dabei können Sie kostenlos oder gegen geringe Gebühr ein Forum oder Gästebuch von einem Fremdanbieter in Anspruch nehmen. Meistens besteht dabei die Möglichkeit, die Optik der Gästebücher oder Foren an das Layout der eigenen Web-Seiten zumindest grob anzupassen. Die Daten werden auf dem Server des Fremdanbieters gespeichert. Sie selber haben also keinen direkten Zugriff darauf. In der Regel bieten solche Anbieter jedoch einen Service-Bereich an, wo Sie mit Hilfe von Formularen Ihre Daten auf dem fremden Server verwalten können, um z.B. unliebsame Einträge zu löschen usw.
Diese Lösung bietet sich für Homepage-Anbieter an, denen keine CGI-Schnittstelle zur Verfügung steht.
Vorneweg: im Web wird vom Anwender alles, was er nicht selber unter Kontrolle hat, als negativ empfunden. Dort sollten Sie deshalb besser auf solche Dinge verzichten und stattdessen eine Guided Tour anbieten, bei der jede Seite, die zu der Tour gehört, am Ende einen Verweis zur nächsten Seite der Tour sowie einen Verweis zur Startseite enthält. Interessant sind automatisch ablaufende Präsentationen dagegen etwa auf Messen. Dabei können Sie auch Endlosschleifen erzeugen, indem einfach die letzte Seite der Präsentation wieder die erste aufruft.
Zum Erstellen einer solchen Präsentation benötigen Sie verschiedene HTML-Dateien, von denen jede einen Mechanismus enthält, mit dessen Hilfe eine bestimmte andere Seite nach Ablauf einer bestimmten Zeit, z.B. nach 5 Sekunden, automatisch aufgerufen wird. Zwei Möglichkeiten stehen dabei zur Verfügung: bei der einen verwenden Sie die Meta-Angabe zum Automatischen Weiterleiten. Diese Angabe wird von den verbreiteten Browser auch lokal, also ohne Server-Kommunikation, interpretiert. Die zweite Möglichkeit verwendet JavaScript. Mit der JavaScript-Methode setTimeout() in Verbindung mit dem Event-Handler onload im einleitenden <body>
-Tag können Sie nach Ablauf von z.B. 5000 Millisekunden (= 5 Sekunden) eine selbstgeschriebene Funktion aufrufen, die z.B. in einem JavaScript-Bereich im Dateikopf notiert sein kann. Es genügt, wenn diese Funktion eine einzige Anweisung enthält, nämlich den Aufruf einer anderen Adresse mit der Objekteigenschaft location.href.
Jede an der Präsentation beteiligte HTML-Datei muss die Meta-Angabe oder den entsprechenden JavaScript-Code enthalten. Auf diese Weise wird die Kette der automatischen Aufrufe erzeugt.
Dabei bestehen die gleichen Möglichkeiten wie im Zusammenhang mit der automatisch ablaufenden Präsentation beschrieben. Der einzige Unterschied ist, dass Sie die Angaben nur auf einer Seite notieren müssen und nicht auf mehreren. Bieten Sie aber auf der Weiterleitungsseite auf jeden Fall auch einen Verweis zu der Zieladresse an, damit auch solche Anwender dorthin finden, bei denen die Meta-Angabe oder das JavaScript zur Weiterleitung nicht funktioniert.
Für die automatische Weiterleitung gibt es daneben allerdings server-seitige Lösungen, die letztlich sauberer sind. Denn erstens erfordern sie keine Browser-Fähigkeiten wie das Interpretieren einer Meta-Angabe oder eines Java-Scripts; und zweitens muss erst gar nicht die Weiterleitungsseite angezeigt werden. Am Bildschirm des Anwenders erscheint ohne Umweg die Zieladresse.
So lassen sich Weiterleitungen innerhalb eines Web-Angebots und auf dem gleichen Server-Rechner beispielsweise durch symbolische Links erreichen. Anstelle der "alten Datei" wird ein gleichnamiger symbolischer Link platziert, der auf Betriebssystemebene zu einer anderen Datei führt. Dazu müssen Sie allerdings auf Betriebssystemebene am Server arbeiten können, beispielsweise mit Telnet/SSH.
Server-seitige Redirects auf andere Domain-Adressen können Sie mit Hilfe einer .htaccess-Datei realisieren. Legen Sie im Web-Seiten-Wurzelverzeichnis der alten Domain eine solche Datei ab, die eine Zeile wie diese enthält (Beispiel):
Redirect / http://www.example.org/
Handelt es sich um eine permanente Umleitung, lautet die Direktive wie folgt:
Redirect permanent / http://www.example.org/
In den oben angeführten Beispielen werden Anfragen für die aktuelle Domain umgeleitet auf http://www.example.org/
Wenn Sie sich an solche Dinge nicht herantrauen oder die Lösung mit .htaccess bei Ihnen nicht funktioniert, fragen Sie den Provider der alten Adresse. Er kann eine server-seitige Weiterleitung für Sie einrichten.
Dazu gibt es verschiedene Möglichkeiten, zum Beispiel Eingebettete Frames. Einbinden können Sie damit neben anderen HTML-Dateien z.B. auch reine Textdateien *.txt, Grafiken oder dynamische Quellen wie den Aufruf eines CGI-Scripts, das aktuelle Daten ausgibt.
Durch die Angabe frameborder="no"
im einleitenden <iframe>
-Tag können Sie erreichen, dass das Frame-Fenster nahtlos in die Seite eingebettet wird. Mit scrolling="no"
können Sie zusätzlich auch noch die Scrollbalken unterdrücken, sofern Sie diese nicht benötigen. Nachteil der eingebetteten Frames ist, dass Netscape 4.x diese noch nicht kennt.
Alternativ können Sie Datendateien als Objekt einbinden. Mit data="datei.htm"
oder data="datei.txt"
lassen sich auch Textdaten als Objekt einbinden. Im Attribut type
ist dann text/html
bzw. text/plain
anzugeben. Im Grunde genommen ist der Effekt ganz ähnlich wie eingebetteten Frames.
Eine weitere Möglichkeit ist die Datenanbindung (Microsoft). Damit lassen sich Daten kontrolliert einbinden, z.B. datensatzweise aus einer kommabegrenzten Datei. Dies funktioniert allerdings nur im Internet Explorer.
Mit Server Side Includes lassen sich externe Daten server-seitig einbinden. Das hat den Vorteil, dass es mit jedem Browser funktioniert, da die Daten schon eingefügt werden, bevor das Ganze überhaupt beim Browser ankommt. Es funktioniert jedoch nur in HTTP-Umgebung und nur dann, wenn der Web-Server die Technik der Server Side Includes unterstützt.
Mit PHP lassen sich externe Daten sehr einfach einbinden, da PHP ja innerhalb von HTML notiert wird. Ähnlich wie Server Side Includes funktioniert auch PHP mit jedem Browser, da die Daten bereits server-seitig eingefügt werden. Es funktioniert jedoch ebenfalls nur in HTTP-Umgebung und nur dann, wenn PHP installiert ist und vom Web-Server unterstützt wird. Mit einer PHP-Anweisung wie require ('datei.txt');
können Sie eine externe Textdatei einbinden.
Per JavaScript kann man eigentlich keine Dateien lesen. Über die Java-Schnittstelle von JavaScript ist dies über Umwege allerdings doch möglich. Auch so können natürlich keine Dateien vom Rechner des Anwenders gelesen werden, aber zumindest Dateien, die zum Web-Projekt gehören, und darum geht es ja in diesem Fall. Zu diesem Thema gibt es im Online-Angebot von SELFHTML aktuell einen Artikel Auf Dateien mit JavaScript zugreifen von Daniel Thoma.
Es ist nicht möglich, dass eine Seite eigenständig in den Vollbildmodus wechselt. Bei den gängigen Browsern kann allerdings der Anwender selbstständig in den Vollbild-Modus wechseln, indem er die Taste F11 drückt. Die beste Methode ist letztlich, den Anwender freundlich dazu zu bitten.
Lediglich der Internet Explorer ab Version 5.0 bietet eine Möglichkeit, ein neues Fenster im Vollbildmodus zu öffnen. Dazu öffnen Sie mit der JavaScript-Methode window.open() ein neues Fenster. Um den Popup-Blocker zu umgehen, sollte dies nicht automatisch geschehen, sondern z.B. bei einem Klick auf einen Button. Bei den Fenstereigenschaften geben Sie fullscreen=yes
an. Dann wird das Fenster im Vollbildmodus geöffnet.
Was unter dem Vollbildmodus zu verstehen ist, variiert je nach Internet-Explorer-Version. Vor dem Internet Explorer 6 für Windows XP mit dem Service Pack 2 nimmt die Webseite den gesamten Bildschirm ein, ohne dass irgendwelche Fenster-Bedienelemente wie das Menü und die Symbolleisten zu sehen sind. Der Browser bietet dann keine Möglichkeit mehr an, das Fenster zu schließen. Nur die Tastenkombination Alt + F4 funktioniert noch. Bieten Sie daher auf Seiten, die in einem Vollbild-Fenster angezeigt werden, eine Möglichkeit an, das Fenster zu schließen. Das geht beispielsweise so:
<a href="oeffnende_seite.htm" onclick="self.close(); return false;">Fenster schließen</a>
Seit dem besagten Service Pack wird das neue Fenster aus Sicherheitsgründen lediglich maximiert. Die Titel- und die Adressleiste und auch die Statusleiste bleiben sichtbar. Dies wird auch für den kommenden Internet Explorer 7 gelten und ist nicht umgehbar.
Beachten Sie, dass es die meisten Anwender als unangenehm empfinden, wenn eine Web-Seite sich unaufgefordert im Vollbildmodus öffnet.
Die Antwort sollte sich von selbst verstehen: für jede Fenstergröße! Wenn Sie ganz normalen Fließtext mit HTML erstellen und diesen gerne auch mit Stylesheets formatieren, schreiben Sie zunächst einmal für jede beliebige Fenstergröße. Denn der Browser bricht den Text entsprechend der Fenstergröße automatisch um. Die Probleme entstehen erst dann, wenn von vorneherein mit Tabellenlayouts oder Frames gearbeitet wird und dabei feste Breiten mit Pixelangaben erzwungen werden.
Bedenken Sie, dass Bildschirmauflösung und Größe des Browser-Fensters nicht unbedingt viel miteinander zu tun haben. Denn Anwender mit großen Bildschirmauflösungen wie 1600 × 1200 fahren kaum eine Anwendung im Vollbildmodus, auch den Browser nicht. Das heißt, das Browser-Fenster hat dort meistens eine sehr zufällige und überhaupt nicht berechenbare Größe. Bei Anwendern mit kleineren Bildschirmauflösungen wie 800 × 600 oder auch 1024 × 768 ist zwar eher damit zu rechnen, dass der Browser im Vollbildmodus gefahren wird. Doch haben viele Anwender Programme offen, die an Randbezirken der Bildschirmfläche fest positioniert sind, wie z.B. der beliebte Instant Messenger ICQ, oder es wird im Browser links z.B. ein Navigationsfenster mit Bookmarks angezeigt.
So gesehen hat es also überhaupt keinen Sinn, das Seiten-Layout von einer bestimmten Bildschirmauflösung abhängig zu machen. Die ganze Frage ist falsch gestellt. Bemühen Sie sich einfach um ein Layout, das sich besonders in der Breite den Gegebenheiten anpasst. Bei Tabellenlayouts ist dies beispielsweise mit Breitenangaben in Prozent statt in Pixeln möglich. Wenn Sie feste Breiten erzwingen wollen, dann möglichst nur für die erste, linke Tabellen- oder Frame-Spalte. Ein paar hundert Pixel Breite dürfen Sie schon erwarten, denn irgendwo ist natürlich auch eine Untergrenze der Praktikabilität. Wenn Sie also links eine gewisse Breite erzwingen und den Rest der gegebenen Breite überlassen, dann ist dagegen nichts einzuwenden. Für links angesiedelte Navigationsleisten sollten allerdings umgerechnet nicht viel mehr als 200 bis 250 Pixel erzwungene Breite spendiert werden, ansonsten könnte der eigentliche Inhalt bei wenig Anzeigebreite bereits zu sehr in eine enge Restspalte gequetscht werden. Bei drei- und mehrspaltigen Layouts sollte auf jeden Fall eine Spalte keine feste Breite haben, sondern flexibel bleiben.
Mit dieser Frage werden Sie Empörung ernten - selbst unter denen, die Werbe-Banner ansonsten selber nur als lästig empfinden. Der Grund ist einfach, dass Sie kein Recht dazu haben. Sie nehmen einen kostenlosen Dienst in Anspruch. Dafür können Sie nun mal nicht das Gleiche haben wie für Geld. Anbieter kostenloser Homepages finanzieren sich nun mal häufig über Werbung, also würden Sie einen solchen Anbieter seiner Ertragsquelle berauben, wenn Sie die Werbe-Banner unterdrücken würden. Es gibt auch gar keine Möglichkeit, solche Banner oder automatischen Popup-Fenster zu unterdrücken, weil sie server-seitig eingefügt werden, bevor die Web-Seite an den Browser übertragen wird. Werbefinanzierte Angebote sind somit nicht kostenlos - den Preis bezahlen Ihre Besucher.
Vermutlich haben Sie Ihre Web-Seiten und Grafiken unter einem Betriebssystem wie MS Windows erstellt, wo Groß- und Kleinschreibung von Dateinamen keine Rolle spielt. Auf typischen Server-Betriebssystemen wie Linux dagegen wird streng zwischen Groß- und Kleinschreibung unterschieden. Wenn Sie also beispielsweise <a href="datei.htm">
notiert haben und die Datei heißt in Wirklichkeit Datei.htm, dann funktioniert der Verweis unter Windows, aber unter Linux funktioniert er nicht. Ebenso ist es bei Grafik- und anderen Referenzen auf externe Dateien. Achten Sie deshalb schon beim Erstellen der Dateien darauf, die Dateien exakt so abzuspeichern, wie Sie es in den Referenzen darauf angeben. Am sichersten ist es, wenn Sie einfach alles klein schreiben - also sowohl alle vergebenen Dateinamen als auch die entsprechenden Referenzen in HTML, CSS oder JavaScript und auf Leerzeichen in Dateinamen verzichten. Leider gibt es noch einige ältere Windows-Programme, die sich nicht daran halten und beispielsweise immer den ersten Buchstaben des Dateinamens groß machen. Stellen Sie deshalb auf Datei-Ebene nochmals sicher, dass die Dateinamen mit den Referenzen übereinstimmen, und benennen Sie anders geschriebene Dateinamen gegebenenfalls noch mal um. Das Gleiche gilt auch für Verzeichnisnamen, falls Sie innerhalb Ihres Web-Projekts mit Unterverzeichnissen arbeiten.
Bei diesem Wunsch müssen Sie sich zunächst einmal die Gegenfrage gefallen lassen, was Ihnen so unbehaglich ist an der Vorstellung, dass Anwender Ihre vergebenen Dateinamen sehen? Das ist etwas völlig Normales und jeder Web-Anwender ist daran gewöhnt. Leider ist dies wieder ein typischer Fall, wo um einer Zwangsvorstellung willen eine von vielen Anwendern als nützlich empfundene Browser-Funktion unterdrückt werden soll. Verzichten Sie also lieber auf diese Zwangsvorstellung.
Die sachliche Antwort auf die Frage ist, Frames zu verwenden. Wenn Sie als Startseite gleich ein Frameset laden, bleibt während der Navigation innerhalb des Framesets in der Adresszeile des Browsers stets die Adresse der zuerst aufgerufenen Seite stehen. Sie müssen sich allerdings im Klaren darüber sein, dass diese "Lösung" ernstzunehmende Nachteile hat. Während Sie technische versierte Anwender nicht davon abhalten, die Adressen Ihrer Unterseiten in Erfahrung zu bringen, nehmen Sie den Durchschnitsbesuchern die Möglichkeit, Ihre Unterseiten zu verlinken, deren Adressen an Freunde zu senden usw. Dadurch schaden Sie letztlich nur der Bekanntheit und Beliebtheit Ihrer Webseite.
Das können Sie verhindern, indem Sie im Verweis notieren:
<a href="ziel.htm" onfocus="if (this.blur) this.blur()">Text</a>
Beachten Sie jedoch, dass Sie dem Anwender damit die Möglichkeit nehmen, mit der Tabulator-Taste auf diesen Verweis zu positionieren und diesen dann mit der Return-Taste auszuführen. Es gibt dagegen kaum einen Anwender, der den gepünktelten Rahmen als unschön oder als Minuspunkt fürs Layout empfindet. Opfern Sie nicht ohne Not die Navigationsmöglichkeiten des Anwenders der Zwangsvorstellung von einem "makellosen" Aussehen Ihrer Web-Seiten!
Das funktioniert mit Hilfe von Stylesheets und wird im Abschnitt Verweise optisch gestalten mit CSS beschrieben. Beachten Sie jedoch, dass Sie damit ein wichtiges Erkennungsmerkmal von Verweisen verloren geht.
Dazu notieren Sie im einleitenden Verweis-Tag zusätzlich zum href
-Attribut target="_blank"
. Beschrieben wird dies im Abschnitt Zielfenster für Verweise bestimmen. Die Größe des neuen Fensters können Sie dabei allerdings nicht beeinflussen. Falls Sie das wollen, z.B. weil das neue Fenster als kleines Popup-Fenster erscheinen soll, dann müssen Sie mit JavaScript arbeiten, und zwar mit der Methode window.open(). Dabei können Sie verschiedene Optionen zum Aussehen und zur Größe des Fensters bestimmen.
Anzeigebeispiel: So sieht's aus
Das Beispiel zeigt eine HTML-Datei mit einem Verweis, bei dessen Anklicken sich das Beispiel nochmals in einem ein Popup-Fenster öffnet.
Für Netscape 4.x lässt sich mit etwas Aufwand eine Lösung in JavaScript programmieren. Im Online-Angebot von SELFHTML aktuell stellt ein Artikel diese Möglichkeit vor: Positionierung von Layern (DHTML) von Andreas Zierhut. Bei Netscape ab Version 6.0 funktioniert der Hover-Effekt mit CSS auf Anhieb problemlos.
Bei den Hover-Effekten kommt es auf die richtige Reihenfolge an, in der die entsprechenden Pseudoklassen für Verweise notiert werden. Probieren Sie folgende Reihenfolge:
a:link { /* Deklarationen */ } a:visited { /* Deklarationen */ } a:focus { /* Deklarationen */ } a:hover { /* Deklarationen */ } a:active { /* Deklarationen */ }
Dies ist mit HTML alleine nur lösbar, wenn Sie für jede mögliche Frame-Kombination jeweils eine Datei mit passenden Frameset-Definitionen erstellen - deshalb suchen Anfänger oft an der falschen Stelle und stellen die entsprechende Frage dann gerne in Foren und Newsgroups, wo die Frage jedoch meistens genervte Reaktionen auslöst. Um mit einem Verweis den Inhalt von zwei anderen Frame-Fenstern zu ändern, ist ein JavaScript erforderlich. Ein solches Script wird im Abschnitt Zwei Frames gleichzeitig ändern vorgestellt.
Dazu müssen Sie einen Absende-Button innerhalb eines Formulares definieren. Im action-Attribut des Formulars notieren Sie die URL des Ziels. Das Konstrukt sieht dann beispielsweise so aus:
<form action="../index.htm"> <input type="submit" value="Buttontext"> </form>
Bedenken Sie aber, dass das Aussehen solcher Buttons ziemlich stark vom Browser und dem verwendeten Betriebssystem des Besuchers beeinflusst wird und nur in gewissen Grenzen mit CSS formatiert werden kann. Der Button wird deshalb vielleicht gar nicht mehr in ihre Seitengestaltung passen, wenn er anderswo angezeigt wird. Es ist ratsamer, sich stattdessen einen normalen Link mit CSS passend zu formatieren oder eine Grafik in Form des Buttons zu verwenden. Grafik und normaler Link lassen sich außerdem mit CSS auch kombinieren (die Grafik als Hintergrundbild verwenden).
Mit Hilfe eines JavaScripts lassen sich Auswahllisten so umfunktionieren, dass sie wie Verweislisten wirken. Die SELFHTML-Quickbar ist so eine Anwendung. Wie das genau funktioniert, wird im Kapitel über JavaScript im Anwendungsbeispiel Verweisliste als Auswahlliste beschrieben.
Dazu ist ein Stückchen JavaScript-Code im Verweis erforderlich. Der Verweis sieht so aus:
<a href="javascript:history.back()">Verweistext</a>
Dazu wird beim href
-Attribut das Pseudo-Protokoll javascript: notiert. Daran anschließend kann JavaScript-Code notiert werden. in diesem Fall wird mit Hilfe der Methode history.back() die Back-Funktion im Browser angesprochen.
Dazu notieren Sie einfach einen normalen Verweis. Anstelle des Verweistextes, also als Inhalt zwischen dem einleitenden <a href=>
und dem abschließenden </a>
, notieren Sie eine Grafikreferenz. Das Ganze ist auch noch mal im Abschnitt Grafiken als Verweise beschrieben.
Dazu benötigen Sie zunächst gleichartige Grafiken, die eine Schaltfläche darstellen. Im Abschnitt Buttons (Schaltflächen) finden Sie Beispiele solcher Grafiken. Die Grafiken können Sie mit einem geeigneten Grafikprogramm so bearbeiten, dass jeder Button eine individuelle Beschriftung erhält, also beispielsweise Home, Infos, Kontakt, Gästebuch usw. Die Grafiken speichern Sie am besten unter Dateinamen ab, welche die Serie erkennen lassen, z.B. btn_home.gif, btn_infos.gif, btn_kontakt.gif, btn_gbuch.gif. Die erzeugten Grafiken binden Sie dann in einer HTML-Datei so ein, dass ein Navigationsleisten-Effekt entsteht. Sehr häufig werden zu diesem Zweck Tabellenlayouts verwendet, die Umsetzung ist jedoch auch problemlos mittels einer per CSS formatierten HTML-Liste möglich (siehe Quelltext-Beispiel). Eine zusätzliche Möglichkeit, solche Navigationsleisten einzusetzen, bieten Frames. Ein Frame-Fenster kann dann die Navigationsleiste enthalten, während das andere die Informationen anzeigt.
<ul> <li><a href="index.htm"><img src="btn_home.gif" alt="Home"></a></li> <li><a href="infos.htm"><img src="btn_infos.gif" alt="Infos"></a></li> <li><a href="kontakt.htm"><img src="btn_kontakt.gif" alt="Kontakt"></a></li> <li><a href="gbook.htm"><img src="btn_gbook.gif" alt="Gästebuch"></a></li> </ul>
Das geht mit Stylesheets. Dazu definieren Sie verschiedene zentrale Klassen für Verweise. Das sieht beispielsweise so aus:
<style type="text/css"> a.type1:link { color:#FF0000; } a.type2:link { color:#FF00FF; } a.type1:visited { color:#990000; } a.type2:visited { color:#990099; } a.type1:active { color:#000000; } a.type2:active { color:#000000; } </style>
Dabei sind type1
und type2
die Klassennamen. Die Syntax mit den Doppelpunkten ist die für Pseudoelemente und Pseudoklassen. In HTML können Sie die verschiedenen Klassen dann mit dem class
-Attribut ansprechen:
<a class="type1" href="...">Verweis</a> <a class="type2" href="...">Verweis</a>
Haben Sie Bereiche der Seite in Elementen mit einem ID-Attribut zusammengefasst, lassen sich abweichende Formatierungen auch folgendermaßen erreichen:
<div id="bereich"> <p><a href="ziel.htm">Verweistext</a></p> </div>
#bereich a:link { /* Deklaration /* } #bereich a:visited { /* Deklaration /* }
Das geht mit JavaScript und der Methode window.status. Dort finden Sie auch ein Beispiel für Verweise, die beim Überfahren mit der Maus einen eigenen Text in der Statuszeile des Browsers erzeugen. Beachten Sie jedoch, dass nicht alle Anwender dieses Feature besonders toll finden. Viele Anwender möchten lieber die übliche Information in der Statuszeile sehen, nämlich den URI des mit dem Verweis verknüpften Ziels.
Wenn Sie einen Verweis auf eine ausführbare Datei wie notepad.exe oder winword.exe legen, wird der Browser diese Datei stets zum Download anbieten, aber ganz sicher nicht ausführen. Der Grund ist, dass Web-Browser und auch HTML für den Client-Server-Betrieb im Internet ausgelegt sind, nicht aber für das unbedenkliche lokale PC-Umfeld. Denn wenn die notepad.exe ausführbar wäre, dann wäre auch die format.com ausführbar, und wäre ein Verweis in der Lage, Ihre Festplatte neu zu formatieren.
Sie können jedoch sehr wohl Verweise auf beliebige Dateien setzen. Wenn Sie beispielsweise einen Verweis auf eine .doc-Datei setzen, wird beim Anwender MS Word geöffnet, sofern das Programm dort installiert ist und Dateien mit dieser Endung mit dem Programm verknüpft sind.
In HTML können Sie Überschriften ausrichten, Textabsätze ausrichten, Textbereiche ausrichten und Tabellenzellen ausrichten. Dazu verwenden Sie in allen Fällen das Attribut align
. Mit align="justify"
erzwingen Sie den Blocksatz. Beachten Sie aber, dass das align
-Attribut von HTML als deprecated gekennzeichnet ist und künftig aus dem HTML-Standard entfallen soll. Stattdessen gibt es die CSS-Eigenschaft text-align, der Sie ebenfalls den Wert justify
für Blocksatz zuweisen können.
Bei Blocksatzausrichtung kann es vor allem bei Netscape zu unschönen Ausdehnungen kurzer Zeilen kommen. Um das zu vermeiden, sollten Sie auf jeden Fall jeden z.B. mit <p>
eingeleiteten Textabsatz mit dem abschließenden </p>
beenden. Wenn die unerwünschte Ausdehnung der kurzen Zeile bei einem einfachen Zeilenumbruch (<br>
) erscheint, hilft vor dem <br>
ein einfaches Leerzeichen (jedoch kein
).
Da die heute verbreiteten Browser keine automatische Silbentrennung im Fließtext anwenden, kann es bei Blocksatz zu größeren Lücken zwischen Wörtern kommen. Vermeiden Sie Blocksatz deshalb vor allem in schmalen Bereichen. Je breiter der Block ist, desto sauberer sieht der Text aus.
Um nur die erste Zeile eines mehrzeiligen Absatzes einzurücken, können Sie die CSS-Eigenschaft text-indent verwenden. Wenn Sie dagegen den gesamten Absatz einrücken wollen, müssen Sie einen linken Rand dafür definieren. Auch das geht mit CSS - nämlich mit der Eigenschaft margin-left.
Bitte vermeiden Sie, für Einrückungen die HTML-Elemente blockquote
oder ul
zu verwenden, wie es früher gerne gemacht wurde und manchmal noch immer empfohlen wird. Das ist erstens schlechter Stil, zweitens besteht keine Garantie, dass solche Elemente von jedem Browser eingerückt dargestellt werden, und drittens können Sie dabei gar nicht festlegen, wie weit der Text eingerückt werden soll.
Im Konzept von HTML sind Tabulatoren nicht vorgesehen. Mittlerweile gibt es mit Hilfe von CSS folgende Möglichkeit - Beispiel:
<p>Text<span style="white-space:pre">	</span>Text</p>
Dabei wird mit Hilfe des allgemeinen Inline-Elements span
, der CSS-Eigenschaft white-space mit dem Wert pre
und der numerischen Notation 	
für das Tabulator-Zeichen mitten im Text ein Tabulator erzeugt.
Ab HTML 4.0 können Sie alle Zeichen des Unicode-Systems notieren. Auf diese Weise können Sie praktisch alle bekannten Zeichen der Welt notieren. Um einige wenige fremde Zeichen einzufügen, können Sie solche Zeichen mit ihrer Unicode-Nummer notieren. Wie das funktioniert, wird in der Zeichenreferenz (Abschnitt "Allgemeines") beschrieben. Dort finden Sie aber auch viele benannte Zeichen wie Π
oder €
, die Sie ebenfalls verwenden können.
Wenn Sie eine komplette HTML-Datei in einer Sprache erstellen, die fremde Schriftzeichen verwendet, dann sollten Sie eine passende Kodierung wählen. Stellen Sie diese Kodierung in dem Programm ein, mit dem Sie die Texte erstellen. In den Kopfdaten der HTML-Datei notieren Sie eine Angabe zur Zeichenkodierung. Der Browser versucht dann, die HTML-Datei gemäß der angegebenen Kodierung zu verarbeiten.
Damit die fremden Schriftzeichen angezeigt werden können, müssen allerdings beim Anwender Schriftarten installiert sein, die solche Zeichen anzeigen können.
Sie benötigen Sie jeweils zwei Varianten einer Grafik. Der Effekt entsteht dann dadurch, dass beim Überfahren einer Grafik mit der Maus diese Grafik dynamisch durch die "Schwestergrafik" ersetzt wird. Wird die Maus wieder entfernt, wird wieder die normale Grafik an der Stelle angezeigt. Definieren Sie zunächst für das gewünschte Element eine Hintergrundgrafik. Mit der Pseudoklasse :hover
definieren Sie nun die zweite Grafik als Hintergrundbild. Dieser Effekt kann auch mit JavaScript realisiert werden. In dem JavaScript-Anwendungsbeispiel Dynamische grafische Buttons wird genau beschrieben, wie Sie so etwas realisieren können.
Um Blockelemente zu zentrieren, setzen Sie den linken und rechten Außenabstand auf den Wert auto:
margin-left:auto; margin-right:auto;
Beachten Sie, dass der Internet Explorer 6 diese Angaben nur dann interpretiert, wenn die Seite im standardkonformen Modus dargestellt wird.
Soll ein Element sowohl horizontal als auch vertikal zentriert werden, bietet sich eine Lösung mit absoluter Positionierung an:
Anzeigebeispiel: So sieht's aus
#zentriert { position:absolute; top:50%; left:50%; width:30em; height:20em; margin-left:-15em; margin-top:-10em; }
Das Element mit der ID "zentriert" wird zunächst so positioniert, dass dessen linke obere Ecke sich genau in der Mitte befindet (top:50%; left:50%;
). Anschließend wird es mittels negativer Außenabstände um dessen halbe Breite nach links (margin-left:-15em;
) und um dessen halbe Höhe nach oben (margin-top:-10em;
) verschoben.
Alternativ können Sie eine Tabelle notieren, die sowohl 100% der verfügbaren Breite als auch 100% der verfügbaren Höhe einnimmt und eine einzige Tabellenzelle enthält, deren Inhalt Sie horizontal zentriert und vertikal mittig ausrichten. Das sieht dann so aus:
<body> <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> <tr><td align="center" valign="middle"> <h1>Willkommen in der Mitte!</h1> </td></tr></table> </body>
Diese Lösung hat nur einen Schönheitsfehler: bei Breiten- und Höhenangaben zu Tabellen ist das Attribut height
dem HTML-Standard zufolge nicht im Zusammenhang mit dem table
-Element erlaubt. Genau dies wird jedoch im gezeigten Beispiel angewendet und auch von fast allen Browsern problemlos interpretiert. Das Problem können Sie zwar umgehen, indem Sie statt height="100%"
mit CSS arbeiten und style="height:100%"
notieren. Doch das interpretiert zumindest Netscape 4.x nicht.
Dazu müssen Sie eine "Tabelle" aus drei mal drei Frame-Fenstern erstellen, wobei nur das Fenster, das in der zweiten Reihe dasjenige in der zweiten Spalte ist, einen Inhalt erhält. Das Frameset dazu sieht beispielsweise so aus:
<frameset cols="*,66%,*" rows="*,66%,*" frameborder="0" framespacing="0" border="0"> <frame><frame><frame> <frame><frame src="datei.htm" name="Inhalt"><frame> <frame><frame><frame> </frameset>
Beachten Sie jedoch, dass die Attribute zum Erzwingen von unsichtbaren Fensterrahmen, so wie sie in dem Beispiel notiert sind, nach HTML-Standard nicht erlaubt sind, doch erforderlich sind, um in den Browsern die gewünschte Wirkung zu erzielen.
Wenn die Inhalte der Tabellenzellen sehr unterschiedlich gewichtet sind, oder wenn Inhalte eine Spalte in der angegebenen Breite nicht ausfüllen, kann es je nach Browser zu unschönen Darstellungen durch unterschiedliche Interpretationen des Attributs width
bei Breiten- und Höhenangaben zu Tabellen kommen.
Mittlerweile gibt es eine CSS-Eigenschaft, mit der sich bestimmte Spaltenbreiten erzwingen lassen, nämlich die Eigenschaft table-layout. Diese wird zwar auch von den neueren Browsern interpretiert, aber die Browser der 4er-Generation ignorieren sie. Deshalb wird in der Praxis, um Mindestbreiten zu erzwingen, noch immer viel mit dem so genannten blinden Pixel gearbeitet. Das entspricht zwar nicht gerade der Philosophie von HTML, zeigt aber, dass in der Praxis Probleme existieren, die zumindest in den älteren Browser-Generationen nur über solche Tricksereien lösbar waren.
Netscape interpretiert bis zur 4er-Version Pixelangaben zur Breite und Höhe von Frame-Fenstern bei der Frameset-Definition nicht exakt. Erfahrungen von Anwendern berichten von bis zu 10-15 Pixeln Abweichung von der festgelegten Fensterbreite. Einer kursierenden Theorie zufolge verhält sich Netscape folgendermaßen:
Er arbeitet nicht mit absoluten Pixelwerten, sondern teilt den zur Verfügung stehenden Platz horizontal wie vertikal in 100 Teile mit je 1 Prozent auf. Netscape akzeptiert als Framegröße also praktisch nur Prozentwerte und rechnet Pixelangaben intern in Prozent um. Bei einer Bildschirmauflösung von z.B. 800 x 600 Pixeln (dabei muss man ca. 4 Pixel für den Rand abziehen, daher bleiben in der Breite also ca. 796 Pixel), ergibt sich dann beispielsweise:
Frameset 10% = 10 x 7,96 => Framebreite = 79 Pixel
Frameset 11% = 11 x 7,96 => Framebreite = 87 Pixel
Frameset 12% = 12 x 7,96 => Framebreite = 95 Pixel
Die tatsächliche Größe ist dann noch mal ca. 1 Pixel schmaler. Angaben dazwischen, also etwa 90 Pixel, führen dann also zu tatsächlichen Breite von 86 oder 94 Pixel.
Es ist keine Möglichkeit bekannt, dagegen etwas auszurichten. So bleibt nur die Möglichkeit, das Layout von HTML-Dateien, die innerhalb solcher Frame-Fenster angezeigt werden, so zu gestalten, dass ein gewisser Spielraum in Breite und Höhe der Anzeige das Layout nicht gleich durcheinanderbringt. Eigentlich sollte das ja sowieso als Grundsatz beim Web-Design gelten. Inhalte, zum Beispiel Grafiken, sollten auf jeden Fall 10-15 Pixel kleiner sein als die Angaben zur Breite bzw. Höhe des zugehörigen Frame-Fensters. Nur so ist sichergestellt, dass sie vollständig angezeigt werden.
Dazu werden zwar vielfach Seitenränder in HTML definiert, wobei allen Angaben der Wert 0
zugewiesen wird. Da dies jedoch kein standardkonformes HTML ist, ist es empfehlenswerter, Stylesheets für diese Zwecke einzusetzen. Am einfachsten ist es, wenn Sie einfach den Außenabstand und Innenabstand des body
-Elements global auf 0 Pixel setzen. Dazu notieren Sie einfach:
<body style="margin:0px; padding:0px;">
Dies wird von Netscape 4.x noch nicht richtig interpretiert, es handelt sich allerdings um eine zu vernachlässigende Abweichung. Sind Sie dennoch auf eine identische Darstellung angewiesen, können Sie den gesamten sichtbaren Inhalt der HTML-Datei absolut positionieren. Dies ist mit Hilfe eines allgemeinen Block-Elements und CSS-Eigenschaften zur Positionierung möglich. Der Dateikörper sieht dann beispielsweise so aus:
<body> <div style="position:absolute; top:0px; left:0px;"> Hier den gesamten sichtbaren Inhalt der Seite notieren </div> </body>
Führen Breiten- oder Höhenangaben im Internet Explorer im Vergleich zu anderen Browsern zu einer abweichenden Darstellung, liegt dies vermutlich an dessen Box-Modell-Fehler. Zeichnen Sie Ihre Seiten in diesem Fall mit einer Dokumenttyp-Deklaration für den standardkonformen Modus aus.
Bei Netscape 4.x ist CSS intern an JavaScript gekoppelt, so merkwürdig sich das auch anhören mag. Denn intern setzt Netscape 4.x CSS mit Hilfe einer speziellen JavaScript-Erweiterung namens JSSS (JavaScript StyleSheets) um. Das bedeutet, dass in diesem Browser keine Stylesheets angezeigt werden, wenn in den Browser-Einstellungen JavaScript deaktiviert wird. Wenn also gar keine Stylesheets im Netscape-4.x-Browser interpretiert werden, liegt es normalerweise daran, dass JavaScript ausgeschaltet ist. Leider können Sie als Web-Autor dagegen nichts weiter unternehmen, denn wenn ein Anwender nun mal kein JavaScript möchte, ist es sein gutes Recht, dies zu deaktivieren.
Die wahrscheinlichste Ursache dafür sind Syntaxfehler bei den CSS-Formatdefinitionen. Wer HTML gewohnt ist, bei dem schleichen sich leicht Flüchtigkeitsfehler ein. Ein beliebter Fehler ist beispielsweise, bei der Wertzuweisung an eine CSS-Eigenschaft anstelle des Doppelpunktes ein Gleichheitszeichen zu notieren.
Falsch ist also z.B.: h1 { color=red }
Richtig ist dagegen: h1 { color:red }
Auch vergessene Strichpunkte führen zu Fehlinterpretationen.
Falsch ist also z.B.: h1 { color:red background-color:yellow }
Richtig ist dagegen: h1 { color:red; background-color:yellow }
Da die Browser bei Syntaxfehlern in CSS keine Fehlermeldungen erzeugen, bleiben solche Fehler häufig unentdeckt und machen sich nur in Form von Fehlinterpretationen bemerkbar. Überprüfen Sie deshalb stets genau die Syntax Ihrer CSS-Formatdefinitionen.
Sie können Ihre CSS-Formatdefinitionen auch online auf korrekte Syntax überprüfen lassen. Dazu gibt es den / W3C CSS-Validierungsservice.
Speziell frühe Zwischenversionen von Netscape 4.x haben Probleme mit Leerzeichen zwischen CSS-Eigenschaft und Wertzuweisung. Notieren Sie deshalb - obwohl es erlaubt ist, besser nicht
h1 { color: red }
sondern
h1 { color:red }
Generell hat Netscape 4.x noch massive Probleme mit vielen CSS-Eigenschaften. Einige der Probleme lassen sich durch Trickserei in den Griff bekommen, aber viele auch nicht.
Mit Hilfe der JavaScript-Methode window.resizeTo() können Sie das Browser-Fenster auf eine gewünschte Größe ändern. Im Beispiel zur Methode window.resizeTo()
wird beschrieben, wie Sie das Browser-Fenster nach Einlesen der Seite automatisch auf die gewünschte Größe bekommen.
Beachten Sie aber, dass viele Anwender dies als Eingriff in ihre Freiheit empfinden. Ein Web-Projekt, das gleich auf der Startseite automatisch das Browser-Fenster des Anwenders verändert, erzeugt bei Besuchern, die das Projekt zum ersten mal besuchen, sofort einen negativen Eindruck und führt vermutlich in vielen Fällen dazu, dass die Anwender gleich wieder flüchten gehen. In vielen Browsern lässt sich diese Unsitte unterbinden.
Mit Hilfe der JavaScript-Methode window.open() können Sie ein Popup-Fenster erzeugen. Dabei können Sie auch verschiedene Optionen zur Ausstattung, Größe und Position des Fensters mit angeben. Es gibt verschiedene Möglichkeiten, ein solches Popup-Fenster aufzurufen. Eine Möglichkeit ist, das Popup-Fenster gleich beim Einlesen der Seite automatisch zu öffnen, was mittlerweile in vielen Browsern von einem Popup-Blocker auf Wunsch unterbunden wird.. Eine andere Möglichkeit ist, einen Verweis zum Öffnen des Popup-Fensters anzubieten.
Für selbst erzeugte Popup-Fenster können Sie bewirken, dass diese sich nicht vom Hauptfenster überlappen lassen. Es gibt zwar im normalen JavaScript keine Möglichkeit, einem Fenster die Eigenschaft "immer im Vordergrund" beim Öffnen mit auf den Weg zu geben (nur bei Microsoft JScript und signed JavaScript gibt es so etwas), doch mit einem kleinen Umweg lässt sich der gewünschte Effekt erreichen. Dazu wird in Dateien, die in dem Popup-Fenster angezeigt werden sollen, im Dateikopf ein JavaScript wie das folgende notiert:
<script type="text/javascript"> function immervorn() { self.focus(); window.setTimeout("immervorn()",100); } </script>
Im einleitenden <body>
-Tag wird außerdem notiert:
<body onload="immervorn()">
Die selbstgeschriebene Funktion immervorn()
setzt dabei mit der Methode focus() den Fokus auf das eigene Fenster - und zwar alle 100 Millisekunden, also jede zehntel Sekunde. Dazu ruft sich die Funktion mit setTimeout() nach der entsprechenden Zeit selbst wieder auf (Rekursion). Durch den Event-Handler onload wird sie nach dem Laden der Seite erstmals aufgerufen. Derartige Fenstermanipulationen lassen sich in vielen Browsern unterbinden.
Kurzreferenz: HTML | |
Wie fange ich an? | |
SELFHTML Navigationshilfen |
© 2007 Impressum