PriSoDi-Webdesign-Hilfe
Zum HTML-Forum
Web- und HTML-Lexikon
der besten Tipps und Tricks
aus Magazinen gesammelt und archiviert
Einsteiger-Tipps & Anfänger-Tricks
Zu klassisch einfachem HTML und Webdesign
Tipps & Tricks
-
Zu Allgemeinem einfachem HTML und Webdesign
E-Mailadresse in Webseiten vor Harvestern und Spider Programmen schützen
Möchten Sie auf Ihrer Webseite Ihre E-MailAdresse veröffentlichen,
kann es passieren, dass diese von einer speziellen Software, einem so genannten Harvester,
registriert und in einer Datenbank gesammelt wird. Schnell trudeln dann die ersten
unerwünschten Werbemails ein. Um dem zu entgehen, können Sie das @-Zeichen
in Ihrer E-Mail-Adresse kodieren. Verwenden Sie hierfür den Unicode @
oder @ . Machen Sie Spam-Verschickern das spammen schwer!
-
Abgezählte Besucher
Keiner ist jemals allein im Www unterwegs, wie Besuchzähler beweisen.
Möchten Sie vielleicht einen Zähler auf Ihrer Seite verankern,
der dem Besucher mitteilt, wie viele schon vor ihm da waren?
Nichts leichter als das. Es gibt im Internet einige Provider,
die Privatanwendern solche Zähler gratis zur Verfügung stellen.
Den bekanntesten finden Sie unter
www . digits . com
Derzeit ist er wegen zu vieler Anfragen geschlossen.
Empfehlenswert ist ein russischer Zähler, erreichbar unter
counter . dux . ru
Dieser Anbieter erfreut Sie mit Hunderten von Anzeigearten.
Sie müssen den Zähler noch nicht einmal beantragen,
weil die Angabe Ihrer eigenen URL genügt. Unter dieser URL
legen Sie den Zähler an. Falls Sie einen einfachen String
wie mike angeben, bekommen Sie unter Garantie Anschluß
an einen existierenden Zähler. counter.htm bettet diesen
Zähler in Ihre Seite ein.
-
Absatzanfang hervorheben
Wie geschickte Webseitengestalter Heftseiten bereichern,
machen Sie mit HTML-Befehlen nach.
Wenn Sie den ersten Zeichen eines Absatzes hervorheben wollen,
setzen Sie den FONT-Tag ein:
<FONT SIZE=7>D</FONT>ie Erde war wüst und leer.
Wenn Sie eine künstlerische Ader haben, entwerfen Sie doch einen
eindrucksvollen Buchstaben, und binden Sie ihn in Ihr Dokument ein.
Das Grafikprogramm soll Ihren Buchstaben im gif-Format mit transparentem
Hintergrund speichern, wie es Paint Shop Pro vermag. Damit Text passend
die Grafik umfließt, binden Sie sie mit dem entsprechenden Alignment ein:
<IMG SRC="d.gif" ALIGN=Left>ie Erde war wüst und leer.
-
Absätze einrücken
Eingerückte Absätze lockern den Lesefluß auch auf HTML-Seiten auf.
Einen Absatz rücken Sie mit einem Sonderzeichen ein: ,
dem "Non -Breaking Space", in HTML schlicht ein Leerzeichen.
HTML ignoriert mehrere Leerzeichen hintereinander, weil es sich immer nur
auf die Ausgabe eines einzigen Leerzeichens beschränkt.
Dies umgehen Sie mit , womit Sie zum Beispiel Ihren Absatz
um vier Leerzeichen einrücken:
Absatz eingerückt.
-
Accesskey
Weisen Sie Formular-elementen oder Links einen Hotkey für den schnellen Aufruf zu.
Tastenkombinationen (Hotkeys) rufen eine Funktion oft schneller auf als
die entsprechenden Mausklicks. Das Attribut accesskey weist Elementen
einer Webseite Hotkeys zu. Drückt der Surfer den Hotkey, erhält
das entsprechende Element der Webseite den Fokus. Was dann passiert hängt
vom einzelnen Element ab. Wenn Sie beispielsweise einem Link (<a>)
einen Hotkey zuweisen, folgt der Browser beim Drücken des Hotkeys
dem Link und ruft die Zielseite auf. Bei einem Radioknopf in einem Formular
ändert der Browser den Zustand des Radioknopfs (gedrückt/nicht gedrückt).
<input type"text" ID="vorname" accesskey="V">
Dies Beispiel zeigt einen Ausschnitt aus einem Formular mit einem Eingabefeld.
Das Eingabefeld hat einen Hotkey. Mit den Tastenkombinationen [Alt-V]
erhält das Eingabefeld den Fokus. Ohne die Maus zu benutzen,
gibt ein Surfer so direkt über die Tastatur Text in das passende Feld ein.
Groß-/Kleinschreibung spielt beim Hotkey keine Rolle, im Beispiel könnte
accesskey="v" stehen. Der Hotkey funktioniert immer in Verbindung
mit einer Sondertaste. Bei Windows ist das [Alt], beim Macintosh [Cmd].
Das macht die Auszeichnung der Hotkeys schwierig. In einer Webseite kann es
mehrere Elemente mit gleichem Hotkey geben. Der Browser springt dann bei
erneuter Eingabe des Hotkeys zum nächsten entsprechenden Element.
Zur besseren Übersicht sollten Sie aber darauf achten, ein Zeichen
nur einmal pro Webseite zu vergeben. Ist ein Hotkey bereits für
eine Funktion des Browsers vergeben ([Alt-D] öffnet beim Internet Explorer
das Datei-Menü), so überschreibt die Webseite die Standardbelegung
des Browsers. HTML 4.0 und Netscape 6 erlauben accesskey bei den Tags a, area,
button, input, label, legend, textarea. Der Internet Explorer unterstützt
dagegen das Attribut bei nahezu allen HTML-Tags.
ActionScript für Profis
Das englischsprachige Webangebot Action-Script . org hat sich voll
und ganz der proprietäten Flash-Programmier-sprache verschrieben.
Wirklich hilfreich sind hier die mehr als 130 ausführlichen Tutorials,
die teilweise schon die aktuelle Version Flash MX 2004 abdecken. Sinnvoll:
Zu den meisten Anleitungen stehen auch die passenden Dateien zum Download bereit.
-
Aktuelle Seite zu den Favoriten
Soll Ihr Besucher schnell eine bestimmte Seite, wie die Homepage von PriSoDi.de,
in seine Bookmark-Liste aufnehmen, fügen Sie folgenden Link ein:
<a href="javascript:window.external.addfavorite(`http://www.prisodi.de',
Webdesign-Lexikon von PriSoDi als Lesezeichen bookmarken
Innerhalb des JavaScripts geben Sie zunächst die URL und anschließend
den gewünschten Seitentitel an, unter dem die Page in den Bookmarks aufgeführt
sein soll. Leider unterstützt zur Zeit nur der Internet Explorer diesen Befehl.
-
Anführungszeichen im Formular
In einem Formular dürfen Sie Eingabefelder mit einem Text vorbelegen.
Dafür ist das Attribut value zuständig. Den Text schließen
Sie in die Anführungszeichen ein. Manchmal wäre es aber nützlich,
im Text selbst Anführungszeichen zu verwenden. Dabei hilft, dass HTML
doppelte und einfache Anführungszeichen (" und `) gleichwertig behandelt.
Um die doppelten Anführungszeichen in den Vorgabetext einzubauen,
fassen Sie den Text mit einfachen Anführungszeichen ein:
<input type="input" size=40 value='Bitte "Ihren Senf" dazugeben'>
Das Verfahren klappt natürlich auch andersherum:
value="Bitte `Meinung' eintippen"
-
Anführungszeichen unten
Im deutschsprachigen Schriftraum sind unten stehende Anführungszeichen
Standard. Möchten Sie diese auch auf Ihrer Homepage verwirklichen,
behelfen Sie sich eines kleinen Tricks.
Während heutzutage alle Textverarbeitungsprogramme mit unten stehenden
Anführungszeichen umgehen, unterstützt HTML diese leider nicht auf
direktem Wege. Behelfen Sie sich, indem Sie jedes Anführungszeichen
am Beginn eines Zitats im Quellcode mit dem sub-Attribut umgeben.
Es setzt die eingeschlossenen Zeichen tiefer:
<sub>"</sub>eigentlicher Text"
In Zukunft werden auch auf Ihrer Webseite die Gänsefüßchen
die richtige Position finden.
-
Animationen verkleinern
Animierte gif's bestehen aus mehreren Einzelbildern, die hintereinander
abgespielt werden. Sie lassen sich durch spezielle Pro- gramme automatisch
verkleinern.
Manche Animationsprogramme wie GIF Movie Gear bieten praktische Funktionen,
mit denen sie die Datenmenge reduzieren. Sie verkleinern beispielsweise
die Farbpalette, die für alle Einzelbilder einheitlich sein sollte,
oder beschneiden die Animation so, daß überflüssige Ränder
entfallen. GIF Movie Gear finden Sie unter
www . gamani . com/gmgdown . htm
Verwenden Sie möglichst animierte gif-Bilder statt Videoclips,
denn erstere beanspruchen meist nur einen Bruchteil des Speicherplatzes.
-
Animierter Bilderrahmen
Es gibt mehrere Methoden, mit denen Sie Seitenelemente hervorheben können.
Wie wäre es alternativ zu Flash mit einem animierten Bilderrahmen?
Bilderinhalte können Sie mit Animationen herausstellen.
Bei hochauflösenden Fotos wird es ohne Flash schwierig. Einfacher animieren
Sie Bilderrahmen: Sie legen eine Tabelle von drei mal drei Elementen an,
bei der die obere und untere Zeile aus miteinander verbundenen Zellen bestehen
(colspan="3"). Tabellenrahmen gelten als wenig ästhetisch
und bleiben daher of t ausgeblendet (border="0"). Setzen Sie
cellpadding und cellspacing auf ,,0". Anschließend legen Sie
eine GIF-Animation für den Bilder rahmen an. Gute Ergebnisse erzielen
Sie mit einer Bildbreite und -höhe von jeweils drei Pixeln, wobei der
Rahmen nicht zu wuchtig erscheint und die Dateigröße klein bleibt.
Diese Maße müssen mit denen der verbundenen Zellen übereinstimmen.
Bleiben Sie bei den drei Pixeln, muss die erste Zeile also drei Pixel hoch sein.
Die Höhe kann sich automatisch dem mittleren Zelleninhalt, Ihrem
hervorgehobenen Foto, anpassen. Die Animation kann aus zwei Einstellungen
bestehen: Der erste Frame ist gelb, der zweite rot eingefärbt.
Zum HTML-Code: Legen Sie die Animation in den Hintergrund der jeweiligen
Tabellenzelle, und bauen Sie damit den Rahmen um den eigentlichen Tabelleninhalt
auf. Die GIF-Animation wird automatisch gekachelt und passt sich der
Zellengröße an. Vorsicht! Legen Sie die Tabelle beispielsweise
mit Dreamweaver an, müssen Sie die geschützten Leerzeichen
( ) aus den verbundenen Zellen entfernen, da sonst die Zeilenhöhe
zu groß angezeigt wird. Damit das Foto nicht direkt an den Rahmen
stößt, sollten Sie einen horizontalen bzw. vertikalen Abstand
z.B. mit jeweils fünf Pixeln wählen. In dem Fall definieren Sie:
hspace="5" vspace="5". Einen animierten Rahmen legen Sie
um beliebige Seitenelemente.
-
Animierter Trennstrich
Trennstriche sind für die Übersichtlichkeit einer Website
oft hilfreich, sehen aber nicht besonders schön aus. Erzeugen Sie
farbige, animierte Trennstriche.
Über HTML-Befehle erzeugte Trennstriche sehen sehr schlicht aus.
In einer der letzten Ausgaben haben wir Ihnen gezeigt, wie Sie über
CSS farbige Trennlinien erreichen. Sogar animierte Striche sind möglich,
wenn auch über einen anderen Weg: animierte GIFs. Wenn Sie ein Pixel
große Grafiken erzeugen und diese über die Höhen- und
Breitenangaben im <img>-Tag durch den Browser als große Datei
anzeigen lassen, erzeugen Sie eine einheitlich gefärbte Fläche.
So können Sie zum Beispiel auch farbige Trennlinien generieren,
die ein bis fünf Pixel hoch sind und sich über die gewünschte
Breite erstrecken. Auch mit animierten GIFs funktioniert dieser Trick.
Erzeugen Sie vier verschiedene GIFs, die jeweils ein Pixel breit
und vier Pixel hoch sind. Sie können zum Beispiel jeweils einem
der vier Punkte eine bestimmte Farbe zuweisen. So erhält in der
ersten Grafik Punkt 1 blau, in der zweiten Punkt 2 grün, in der
dritten Punkt 3 rot und in der vierten Punkt 4 gelb. Die restlichen
Pixel bleiben jeweils weiß. Wenn Sie nun aus diesen vier Grafiken
ein animiertes GIF erzeugen, erscheint die Trennlinie abwechselnd in diesen
Farben und wandert pro Durchlauf von oben nach unten. Natürlich
können Sie diesen Effekt eigenen Wünschen anpassen.
-
Audio-Kompression: Welche Qualität genügt?
Verwenden Sie für Sound MIDI statt das wav-Format. MIDI-Dateien sind viel
kleiner und beanspruchen oft weniger als 30 Prozent der Datenmenge der
entsprechenden wav-Datei.
MIDI-Dateien klingen auf jedem PC etwas anders. Doch dieser Nachteil spielt
für Web-Seiten keine Rolle. Ebensowenig ist CD-Qualität mit 44.1 kHz
und Stereo notwendig. Durchaus akzeptabel ist eine Aufzeichnung mit 22.05 kHz
in Mono, das Datenaufkommen wird dabei bereits um fast zwei Drittel geringer.
Alternativ dazu genügen 11.025 kHz in Stereo. Mono ist für Stimmen
vorzuziehen, weil der Mensch ohnehin ein "Mono-phon" ist -
er kann nur einen Ton gleichzeitig hervorbringen. Für Musik und
Hintergrundgeräusche wirkt Stereo realistischer und "breiter".
Streaming ist für Audiodateien Pflicht: Durch dieses Verfahren müssen
Sie nicht warten, bis die Datei komplett geladen ist, sondern hören
den Sound sofort. Einen kostenlosen Player erhalten Sie bei RealNetworks unter
www . real . com
-
Auf dem Prüfstein
Möchten Sie erfahren, ob Ihre Homepage HTML 4.01 oder sogar XHTML-tauglich i
st? Sie können das professionell prüfen lassen: validator.w3 . org.
Geben Sie dort einfach Ihre URL ein und warten die Ergebnisse ab. Gleiches können
Sie für Ihre StyleSheets vornehmen lassen:
jigsaw.w3.org/css-validator/va lidator-uri.html.
Gute Webeditoren besitzen ebenfalls solche Testfunktionen (z.B. Dreamweaver).
-
AutoFillIn wirksam blockieren
Wenn Sie das automatische Ausfüllen von Formularfeldern nicht wünschen,
blockieren Sie es doch einfach selektiv.
Webseiten werden immer umfangreicher, funktioneller und bunter. Eine weitere und
an sich praktische Funktion füllt Formularfelder automatisch aus. Fast
alle Browser unterstützen diese Funktion und verwenden einmal gespeicherte
Anwenderdaten dafür, diese in Formularfelder einzutragen. Wenn Sie diese
Funktion aber auf Ihren Webseiten nicht zulassen möchten, so können
Sie sich wirksam gegen diese Bevormundung schützen. In der HTML-Syntax
gibt es das derzeit noch nicht standardisierte Attribut autocomplete mit den
beiden zulässigen Parametern on und off. Das Attribut kann zum einen
für einzelne Eingabefelder, zum anderen aber auch auf das komplette
Formular angewendet werden. Prüfen Sie vorab, ob Ihr Browser das Attribut
funktionell unterstützt. Im Quelltext setzen Sie dann das Attribut ein.
So zeigt ein Beispiel, wie Sie das ganze Formular schützen können:
<form action='mailto:uwe.martin@beispieladresse.de'autocomplete='off' .>
Vorname<input ID='vn' type='text' ><br>
Name<input ID='nn' type='text'><br>
eMail<input ID='em' type='text'><br>
</form>
Um ein Eingabefeld einzeln zu schützen, benutzen Sie das folgende Beispiel:
<form action='mailto:uwe.martin@beispieladresse.de'....
Vorname<input ID='vn' type='text' ><br>
Name<input ID='nn' type='text' ><br>
eMail<input autocomplete='off' ID='em' type='text'><br>
</form>
Automatische Weiterleitung
Wenn Ihre Homepage umzieht, sollte die alte Seite den Nutzer am besten
automatisch weiterleiten. Dazu fügen Sie in den Kopfbereich der Webseite ein:
<meta http-equiv="Refresh" content="1;
url= http://www . meineadresse . de
Ein gutes Beispiel für solche Weiterleitung kannst Du mal testen wenn Du auf der
PriSoDi-Hauptseite auf den Link -Allererste Version von PriSoDi-
-Hier Klicken- Drauf klickst! Dort wurde als Wert '5' eingestellt,
ein Weiterleiten auf die Startseite von PriSoDi wird vom Browser nach 5 Sekunden
automatisch ausgeführt.
Bei url geben Sie die neue Adresse an. Die Wartezeit vor der Weiterleitung steuern Sie in Sekunden über die Zahl content=". Die Platzierung der Anführungszeichen ist so zwingend. Falls die Weiterleitung nicht klappt, hilft der Link zur Zieladresse weiter.
-
Automatische Weiterleitung mit Meta-Tag
Sie haben Ihre Website auf einen anderen Server verlegt und möchten, dass Besucher
auf diesen weitergeleitet werden, auch wenn in Ihrem Browser JavaScript deaktiviert ist.
Mit einen Meta-Tag sorgen Sie dafür, dass Besucher auf Ihre neue Website
weitergeleitet werden, auch wenn JavaScript nicht funktioniert.
<meta http-equiv="refresh" content="5; URL="http://www.prisodi . de/
Der Zahlenwert im Attribut content gibt die Zeitverzögerung in Sekunden an.
Mit dem Wert Null legen Sie also eine sofortige Weiterleitung fest. Da dieser Meta-Tag
nicht von allen Browsern unterstützt wird, sollten Sie sicherheitshalber einen
Link setzen, über den der Besucher Ihre neue Seite erreichen kann.
-
AutoVervollständigen ausschalten
In Formularen unterstützt der Internet Explorer ab Version 5.0 das automatische
Vervollständigen. Mit einem Attribut schalten Sie die Funktion für einzelne
Felder aus.
Beim AutoVervollständigen speichert der Internet Explorer die Eingaben in
häufig benutzten Eingabefeldern für Namen, Adresse etc. Füllt der
Surfer ein anderes Formular mit identischen Eingabefeldern aus, so schlägt
der Browser nach Eingabe der ersten Buchstaben die gespeicherten Werte als
Auswahlliste vor. Das Attribut autocomplete für das <form>-Tag steuert
für ein Formular, ob das AutoVervollständigen aktiviert ist. Erlaubt sind
die Attributwerte off UND on (Funktion ausgeschaltet UND Funktion eingeschaltet.)
<form action="..." method="post"
autocomplete="off">
... Kontrollelemente ... </form>
Ist die Funktion ausgeschaltet, so macht der Explorer für sämtliche
Kontrollelemente keine Vorschläge und speichert die Benutzerdaten nicht.
Das Attribut autocomplete ist auch bei einzeiligen Texteingabefeldern und
Passworteingabefeldern erlaubt. So können Sie gezielt einzelne Eingabefelder
sperren oder freigeben.
-
Barrierefreie InformationstechnikVerordnung (BITV)
Bereits 1999 hatte das W3C die Web Accessibility Initiative (WAI) ergriffen,
behinderten Menschen den Zugriff auf das World Wide Web zu erleichtern.
In Deutschland trat nun in Folge dessen am 24.07.02 die BITV in Kraft.
Öffentliche Informationsangebote müssen bis zum 31.12.2005 barrierefreie
Information im Internet zur Verfügung stellen. Weitere Informationen zum WAI
und BITV: , www . w3c . de/Trans/WAI/webinhalt . html,
www . behindertenbeauftragter . de/gesetzgebung/behindertengleichstellungsgesetz/rechtsverordnung/rvo11bgg
und auch www . barrierefrei-fuer-alle . de
-
Bedingte Kommentare
Ab dem Internet Explorer 5 ist es möglich, so genannte Conditional Comments
zu benutzen. Diese bedingten Kommentare erlauben es, auf einfache Weise zwischen
verschiedenen Browserversionen zu unterscheiden und entsprechende Inhalte bereit
zu stellen.
Diese Technik ist zwar auf den Internet Explorer begrenzt, auf Grund seiner
großen Verbreitung ist dieses Feature für Entwickler jedoch interessant.
Mit Hilfe der bedingten Kommentare ist es möglich, den Code innerhalb der
Kommentar-Tags entweder nur einem bestimmten Browser zugänglich zu machen
oder auf der anderen Seite nur alle anderen Versionen anzusprechen und den
fraglichen Browser auszuschließen.
<!--[if IE 5]>
Sie benutzen Internet Explorer 5
<![endif]-->
oder
<!--[if ! IE 5]>
Sie benutzen
NICHT den Internet
Explorer 5
<![endif]-->
Angezeigt wird der Text im ersten Fall, wenn der Besucher den Internet Explorer 5
benutzt, im zweiten Fall wird der Text angezeigt, wenn der Besucher nicht den IE 5
benutzt. Auf die gleiche Weise lassen sich auch die Internet-Explorer-Versionen 5.5
und 6 identifizieren. Die Angabe für die Version 5.5 sollte vierstellig sein
(5.5000):
<!--[if IE 5.5000]>
Sie benutzen Internet Explorer 5.5
<![endif]-->
Die bedingten Kommentare stellen ihnen fünf Operatoren zur Verfügung.
Damit lassen sich dann auch komplexere Bedingungen formulieren:
<!--[if gte IE 5]>
Sie benutzen den Internet Explorer
5 oder höher
<![endif]-->
-
Bedingte Kommentare
Der Internet Explorer 5.x kann HTML-Tags abhängig von bestimmten Bedingungen
interpretieren oder übergehen.
Wenn Sie Webseiten auf bestimmte Browser abstimmen wollen, müssen Sie den Typ
des Browsers mit JavaScript ermitteln, verschiedene Webseiten laden oder im
Script Kommandos überspringen. Mit dem Internet Explorer ab Version 5.0
geht es anders. Der Browser verarbeitet bedingte Kommentare (bekannt aus dem
C- oder Pascal-Compiler). Dabei definieren Sie einen Teil des HTMLCodes als Kommentar.
Internet Explorer 5 erkennt an Hand eines Schlüsselworts am Anfang, dass es
diese HTMLTags verarbeiten soll:
<!--[if IE ]>
Dieser Text erscheint nur im
IE 5.
<![endif] //-->
Für jeden anderen Web-Browser sieht das wie ein Kommentar aus, den er überspringt. Nur der Internet Explorer 5.x tut so, als wären die Kommentarzeichen gar nicht vorhanden. Das funktioniert auch umgekehrt: Der Internet Explorer soll HTML-Tags übergehen, die andere Browser verarbeiten.
<![if ! IE ]>
<img src=untergang.jpg>
<![endif]>
In diesem Fall würden "andere" Browser ein Bild anzeigen, der Internet Explorer aber nichts. Das können Sie etwa dazu verwenden, um den Filtereffekt aus Tipp 24 auf der nächsten Seite nur im Internet Explorer anzuzeigen und in anderen Browsern direkt das Endbild. Dieses Verfahren funktioniert auch ohne JavaScript, das viele Surfer aus Sicherheitsgründen (oder wegen lästiger Pop-ups) ausgeschaltet haben. Zudem können Sie damit unter Umständen das Laden von unnötigen Bildern komplett umgehen und so den Seitenaufbau beschleunigen.
-
Bedingte Kommentare
Wollen Sie verhindern, dass Teile einer Webseite auf einem anderen Browser
als dem Internet Explorer in der Version 6 ausgewertet werden oder eventuell
falsch dargestellt werden? Sie müssen dann nicht unbedingt eine Browserweiche
per Skript schreiben, wie es meist üblich ist. Microsoft unterstützt
so genannte Conditional Comments, die die zwischen den Kommentarbegrenzern
liegenden Anweisungen in anderen Browsern außer Kraft setzen können.
Auf diese Art lassen sich auch Stylesheets laden, die für den IE 6 optimiert sind.
<!--[if gte IE 5]>
<style type="text/css"> H3 {color: red} </style>
<![endif]-->
...
<H3>Diese Zeile erscheint im IE ab Version 5 in rot, in Firefox dagegen
in schwarz</H3>
-
Bereichsabhängige Kompressionen
Mit Programmen wie dem Web-Charger es möglich, Bildbereiche wie den Himmel
und eine Person davor unterschiedlich stark zu verdichten. Damit bekommen Sie kleinere
Dateien in guter Qualität.
Farbähnliche Bereiche, etwa der Himmel, lassen sich meist sehr viel stärker
komprimieren als Personen. Der Web-Charger von Emblaze macht sich dies zunutze.
Die Bezugsquelle:
www . emblaze . com
Bei dieser Komprimierung nach Bereichen ist der Qualitätsverlust bei maxi-maler
Komprimierung des Himmels auch noch für die Person akzeptabel. Je nach Motiv
ergibt sich so ein Einsparpotential von rund 20 Prozent.
-
Beschriftete Formularrahmen
In Formularen umranden Sie eine Gruppe von Elementen mit einem beschrifteten Rahmen.
Formulare sind oft sehr unübersichtlich, besser wäre es,
zusammengehörige Elemente mit einem Rahmen zu markieren. Genau das leistet
das <fieldset>, das zum offiziellen HTMLStandard gehört.
Ein einfaches Beispiel:
<form>
<fieldset">
<legend>Ein Bereich</legend>
<input type="checkbox">Rotwein<br>
...
</fieldset>
</form>
Sämtliche Elemente, die in den Formularrahmen kommen sollen, gehören
zwischen <fieldset> und </fieldset>. Innerhalb des </fieldset>-Tags
geben Sie optional mit <legend>...</legend> eine Überschrift an.
Das Tag muss unmittelbar auf <fieldset> folgen. Der Text zwischen Anfang- und
Endtag dient als Überschrift, Sie können ihn mit HTML-Tags und CSS nach
Wunsch formatieren.
Achtung: Wenn Sie das Tabellenlayout mit blinden Tabellen gestalten, sollten Sie
Bereiche vorsichtig einsetzen. Die Tabelle muss immer komplett innerhalb des
Fieldset-Bereichs liegen. Sonst zeichnet der Internet Explorer den Rahmen um die
gesamte Tabelle und nicht um den markierten Bereich.
-
Bessere Position bei Google
Googles Erfolg basiert auf dem patentierten PageRank-Algorithmus.
Der Google-Algorithmus bestimmt die Position einer URL in der Ergebnisliste
nach der Bedeutung eines Dokuments. Wenn Sie die Regeln beachten, erhöhen
Sie die Chance, Ihre Webseite höher zu positionieren. Je bedeutsamer ein
Webdokument, desto mehr (site-externe) Dokumente verweisen auf diese Webseite.
Darum sollten Sie auf wichtigen Webseiten, die regelmäßig aktualisiert
werden, einen Hyperlink platzieren. Am besten suchen Sie sich thematisch verwandte
Seiten aus und schlagen dem Betreiber einen Linktausch vor. Vorsicht bei so
genannten Linkfarmen. Werden Sie bei einem Manipulationsversuch erwischt,
bestraft Google Ihre Seite mit einem geringen PageRank. Da diese Seiten zudem
sehr viele Links enthalten, verteilt sich der zunächst hohe PageRank
prozentual auf alle verlinkten Dokumente. Google berücksichtigt
außerdem die Position dieser Links. Den PageRank der aktuell geladenen
Seite lesen Sie in der Google-Symbolleiste ab, die Sie unter
www . toolbar . google . com/T4/intl/de/ laden können. Und so optimieren
Sie die Inhalte Ihre Webseite für Suchmaschinen: Heben Sie wichtige
Schlüsselbegriffe, die der User in die Suchmaske eines Suchdienstes
eingeben könnte, auf Ihrer Seite durch fette oder kursive Schrift hervor.
Auch Hyperlinks sollten diese Begriffe verwenden. Platzieren Sie diese Begriffe
möglichst oft in der oberen Dokumentenhälfte, ohne dies zu übertreiben.
Auch Altund Title-Attribute unterschiedlicher Seitenelemente sollten diese
Wörter enthalten. Setzen Sie diese Begriffe auch in den MetaTags und
im <title>-Tag ein. Verzichten Sie jedoch auf vorgeschaltete Doorway-Seiten,
die den User automatisch auf den eigentlichen Webauftritt führen:
<meta ID="description" content="Kurzbeschreibung" />
<meta ID="keywords" content="Wichtige Schlüsselbegriffe" />
-
Bewegte Bilder
Mit einem Shareware-Programm animieren Sie gif-Grafiken.
Wenn Sie eine Seite mit einem kleinen Briefkasten sehen, der ständig auf- und
zuklappt, handelt es sich um eine animierte gif-Grafik ("animated GIF").
Die gif-Spezifikation erlaubt eine beliebige Anzahl von Grafiken in einer Datei,
die Steuerbefehle anzeigen. Diese Befehle definieren, wann und wo die nächste
Grafik aufklappt. Das Internet wimmelt von bunten, bewegten Bildern, von denen Sie
viele frei verwenden können. Einen guten Ausgangspunkt dafür bietet
www . clipart . com
Diese Site enthält neben vielen Cliparts lange Listen mit weiteren Grafikservern.
Wollen Sie selbst eine gif-Grafik animieren, speichern Sie die Einzelbilder in diesem
Format und verbinden sie dann mit einem Shareware-Programm wie dem GIF Construction Set
von Alchemy Mindworks:
www . mindworkshop.com/alchemy/gifcon . html
-
Bild vorausladen
Das Herunterladen großer Bilder dauert oft sehr lange. Diese Ladezeit können Sie zwar nicht verkürzen, doch können Sie Ihren Besuchern die Wartezeit überbrücken.
Hierfür definieren Sie ein Bild mit einer geringeren Auflösung als vorläufigen Platzhalter. Es wird dann so lange angezeigt, bis das "große" Bild fertig heruntergeladen ist. Schreiben Sie hierfür folgenden Quelltext in Ihr HTML-Dokument:
<img src="ihrimage.gif" width="300"
height="450" lowsrc="platzhalter.gif">
-
Bildbearbeitungs-Toolbar
Sie können zu jeder dargestellten Grafik eine eigene kleine Toolbar einblenden.
Wenn Sie eine Bildergalerie auf Ihrer Webseite anbieten, so können Sie Ihren Besuchern einen besonderen Komfort bieten. Zeigt ein Anwender auf eine Ihrer Grafiken, so wird unter Verwendung des Internet Explorers als Browser eine kleine Toolbar eingeblendet. Auf dieser Toolbar finden Sie Befehle zum Speichern, Drucken, Versand als eMail oder den Ordnerdialog Eigene Bilder. Hierzu ist nur eine kleine Erweiterung des Quelltextes nötig.
<img src='../images/galerie05/image001.jpg' galleryimg='yes'>
Dieser kleine Service wird sich bei Ihren Besuchern positiv auswirken. Beachten Sie aber bitte, dass derzeit nur der IE-Browser diese Funktion unterstützt.
-
Bildbereiche unterschiedlich komprimieren
Für die Komprimierung eines Bilds sind je nach Bildteil oft verschiedene Methoden ideal. Einige Grafikprogramme können Bilder aufteilen und gesondert speichern.
Besonders für Imagemaps ist beispielsweise die Option von Painter 5.5 praktisch,
die Bilder in unterschiedliche Bereiche aufzuteilen und sogar in unterschiedlichen
Dateiformaten wie gif oder jpg zu speichern. Imagemaps sind Bilder, die mit Befehlen
verknüpft sind: Wenn Sie etwa darauf klicken, gelangen Sie auf eine bestimmte Seite.
Die Aufteilung der Imagemaps ist höchst praktisch, wenn ein Bild sowohl feine
Übergänge (ein Fall für jpg) als auch Schrift (klarer Fall für gif)
aufweist. Gerade auf Fotos sind scheinbar ein-farbige Flächen wie eine weiße
Wand nur auf den ersten Blick einfarbig. Sie unterstützen den Kompressions-
Algorithmus kräftig, indem Sie die einfarbig wirkenden Flächen selektieren
und einfarbig ausfüllen.
-
Bilder anordnen ohne Tabelle
Eine Bilderserie wird zumeist mit einer unsichtbaren Tabelle angeordnet. Es geht aber
auch ohne, wenn die Bilder gleich groß sind. Kleine Vorschaubilder auf Internet-
Seiten lassen sich auch ohne den Trick einer unsichtbaren Tabelle sauber anordnen.
Dazu müssen die Bilder aber gleich groß sein, was bei Dia- oder Foto-Serien
meist gegeben ist. Laden Sie die Bilder im HTML-Code nacheinander
über den <img>-Tag ein. Wollen Sie mehrere Reihen anzeigen, setzen Sie
ans Ende einer Zeile den <br>-Tag. Die Abstände zwischen den Bildern
legen Sie mit <hspace> und <vspace> fest. Sie entsprechen der horizontalen
bzw. vertikalen Distanz in Pixeln. Aber aufgepasst: Die Abstandsangabe wird bei
den Bildern an allen Seiten, also zum Beispiel bei <hspace> links und rechts
berücksichtigt. Versehen Sie etwa fünf Bilder mit dem <hspace>-Wert
von 3, dann ist das linke Bild 3 Pixel vom linken Fensterrand entfernt. Zwischen
den Bildern beträgt der Abstand dann aber jeweils zweimal 3, also 6 Pixel.
Um den gleichen Abstand zu erreichen, müssen Sie jedem zweiten Bild, also dem
ersten, dritten und fünften, den Wert 3 zuweisen. Das zweite und das vierte Bild
erhalten den <hspace>-Wert 0.
-
Bilder ausrichten
Sie möchten den Text, der ein Bild umfließt, kontrollieren und nach Ihren
Erfordernissen anpassen.
Grafiken werden in HTML mit dem IMG-Tag eingebunden. Um den Textfluss um eine Grafik herum zu beeinflussen, können Sie die Attribute HSPACE, VSPACE und ALIGN verwenden. Mit HSPACE und VSPACE bestimmen Sie den horizontalen bzw. vertikalen Abstand des Textes zur Grafik in Pixelangaben. Es entsteht eine Art unsichtbarer Rahmen. Mit ALIGN können Sie die Grafik in der Positionierung bestimmen. Die Eigenschaft right bewirkt beispielsweise, dass umfließender Text an der oberen Kante der Grafik und zwar links daneben beginnt, left erzielt den umgekehrten Effekt. Sie können mit ALIGN: unter anderem die folgenden Eigenschaften setzen:
LEFT: Textausrichtung am oberen Bildrand, Bild am linken Fensterrand,
RIGHT: Textausrichtung am oberen Bildrand, Bild am rechten Fensterrand,
TOP: Textausrichtung am oberen Bildrand, Bild am linken Fensterrand,
MIDDLE: Textausrichtung in der Mitte, Bild am linken Fensterrand,
BOTTOM: Textausrichtung am unteren Bildrand, Bild am linken Fensterrand,
TEXTTOP: Textausrichtung am größten Zeichen am oberen Bildrand, Bild
am linken Fensterrand,
Am besten experimentieren Sie ein wenig mit diesen Eigenschaften, um die Wirkungsweise
zu sehen. Damit nachfolgende Absätze oder Text nicht von diesem Effekt betroffen
sind, können Sie das BR-Tag mit dem Attribut CLEAR verwenden:
<BR CLEAR="all">
Diese Angabe bewirkt, dass der Textfluss um die Grafik herum unterbrochen wird und die
weiteren Inhalte nach üblichem Schema formatiert werden. Wenn Sie geschickt mit
dieser Möglichkeit hantieren, erübrigt sich in manchen Fällen das
Arbeiten mit Tabellen.
-
Bilder bauen sich auf
Auf manchen Internet-Seiten bauen sich die Bilder nach und nach bis zur vollen
Auflösung auf. Wie erreicht man das?
Bei sehr großen Bildern dauert es trotz schneller DSL-Verbindungen immer noch
eine gewisse Zeit, bis sie im Browser angezeigt werden. Hier kann es sehr hilfreich
sein, dem Besucher die Wartezeit zu verkürzen. In der Regel warten die Browser
erst die Übertragung der gesamten Bilddatei ab, bevor sie die Grafik in voller
Pracht anzeigen. In der Zwischenzeit bleibt der Bildschirm weiß. Stattdessen
kann man aber auch sofort eine grob gepixelte Version des Bildes anzeigen lassen,
das sich nach und nach immer feiner auflöst. So kann der Besucher entscheiden,
ob er bis zur vollständigen Anzeige des Bildes warten will, oder ob er vorher
die Übertragung abbricht, weil es doch nicht seinen Vorstellungen entspricht.
Um diesen Effekt zu erreichen, müssen Sie in Ihrem Bildbearbeitungsprogramm
die Grafik entsprechend speichern. Im GIF-Format lautet die entsprechende Option
Interlaced, im JPGFormat Progressive Codierung. Der Nachteil dieser Methode:
Die Dateien werden dadurch um 10 bis 30 Prozent größer. Das heißt,
bis zur endgültigen Anzeige vergeht etwas mehr Zeit.
-
Bilder in Tabellen
Mit Tabellen positionieren Sie Text und Grafik. Die Größe der Bilder
geben Sie stets exakt an: Sonst dauert es zu lange, bis der Text erscheint.
Mit dem Tag <IMG SRC=> geben Sie den (relativen) Pfad der eingebundenen
Bilder an, die Sie entweder im Verzeichnis der HTML-Seite oder in einem eigenen
Verzeichnis sammeln. Vergessen Sie nicht, mit <HEIGHT> (Höhe) und
<WIDTH> (Breite) die dargestellte Größe der Bilder - sie entspricht
nicht der Pixelzahl des Originalbilds - anzugeben. Diese Angaben benötigt
der Browser, um die Seite aufzuteilen, bevor das Bild geladen ist. Wenn Sie auch
nur bei einem einzigen Bild die Größenangabe versäumen, passiert
folgendes: Der Browser berechnet erst den gesamten Platz in der Tabelle,
den die Bilder einnehmen dürfen, bevor er die Tabelle anzeigt. Dies kann
mehrere Sekunden in Anspruch nehmen. Wenn Sie dagegen die Bilder durchgän-gig
mit exakten Größenangaben versehen haben, wird erst die Tabelle ohne
die Bilder geladen, die dann der Reihe nach erscheinen. Der wesentliche Vorteil:
Der Surfer sieht sofort den Text in der Tabelle, den er sonst erst zum Schluß
sehen würde.
-
Bilder zerlegen
Viele kleine Bilder bauen sich subjektiv schneller auf als ein großes.
Bei großen Bildern ist es ratsam, diese in mehrere kleine zu zerlegen:
Die Ladezeiten nehmen beim erneuten Laden drastisch ab, denn die kleineren Bilder
befinden sich noch im Cache des Browsers, während große Grafiken erst
nachgeladen werden. Beispielsweise besteht die abgebildete Landkarte mit den
Bundesstaaten der USA aus mehreren Einzelbildern, die Sie binnen Sekunden
angezeigt bekommen. Ein einziges großes Bild hätte beim ersten Laden
merklich mehr Ladezeit benötigt.
-
Bilderklau erschweren
Auch wenn es keinen Schutz vor dem Diebstahl von Web-Bildern gibt, haben findige
Tüftler einen Weg gefunden, um das Cut& Paste zu erschweren. Dazu wird
das Bild als Tabellenhintergrund ausgewiesen und von einer transparenten, ein Pixel
großen GIFGrafik überlagert, die mithilfe der Befehle <height> und
<width> auf die gleiche Größe gebracht wird. Klickt nun ein Besucher
mit der rechten Maustaste auf ein solcherart präpariertes Bild und wählt
den Befehl "Bild speichern unter", landet die Dummy-Grafik auf seiner
Festplatte.
-
Bildsymbolleiste für IE6 ausschalten
Der Internet Explorer 6 zeigt standardmäßig bei allen Bildern ab
130 x 130 Pixel eine Bildsymbolleiste an, wenn der Mauszeiger über dem Bild ruht.
Um diesen Effekt auszuschalten fügen Sie ein Meta-tag in Ihre Webseiten ein:
<meta http-equiv="imagetoolbar"
content="no">
Das schaltet die Leiste für alle Bilder der Webseite ab. Für ein einzelnes
Bild deaktivieren Sie die Symbolleiste mit dem Attribut galleryimg:
<img src="bild.jpg"
galleryimg="false">
Im Browser können Sie die Symbolleiste ebenfalls deaktivieren:
Extras/Internetoptionen und das Register Erweitert aufrufen. Löschen Sie
dann das Häkchen vor Bildsymbolleiste aktivieren.
-
Bildunterschrift sauber platzieren
Bilder im Fließtext haben ein Problem: Wohin mit der Beschriftung? Mit einer
blinden Tabelle lösen Sie die Aufgabe.
In HTML gibt es einige Attribute zum <img>-Tag, mit denen Sie eine
Bildunterschrift platzieren können. In der Praxis machen diese Attribute
jedoch erhebliche Probleme, da die Browser sie nur unvollständig
unterstützen. Viel effektiver ist der Einsatz einer blinden Tabelle
mit zwei Zellen - eine für das Bild und eine für die Beschriftung.
Für die Ausrichtung am Rand sorgt das Attribut align, das auch beim
<img>-Tag gültig ist. Damit der Untertitel nicht über das Bild
hinausragt, setzen Sie die Breite des Bildes in Pixel als Tabellenbreite ein.
Das einleitende Tabellentag sieht dann etwa so aus:
<table border=0 align=right width=320
cellspacing=0 cellpadding=1>
Mit diesem Ungetüm schalten Sie die Darstellung der Tabellenlinien ab, platzieren
die Tabelle am rechten Rand, und setzen rundum einen Abstand von 8 Bildpunkten
zum umgebenden Text. Die Breite des Bildes beträgt wie die der Tabelle im
Beispiel 320 Bildpunkte - den Wert müssen Sie natürlich anpassen.
cellspacing steuert die Dicke der Rahmenlinien innerhalb der Tabelle,
cellpadding den Abstand zwischen Zellinhalt und Rahmenlinien. Wollen Sie ein
luftigeres Layout, so erhöhen Sie den Wert von cellspacing.
-
Blindtext-Daten
Beim Entwurf einer neuen Website fehlt oft noch der Inhalt.
Um das Layout zu prüfen, benötigen Sie aber längere Textpassagen,
etwa um den Textfluss mit Bildern zu begutachten. www . newmediadesigner . de
bietet eine umfangreiche Sammlung mit Blindtexten an. Der zusätzliche
Blindtextgenerator erzeugt zwar keine neuen Texte, gibt aber eine einstellbare
Zahl von Zeichen mit mehreren auswählbaren Texten aus.
-
Blocksatz
Sie haben im Netz Seiten gesehen, in denen der Fließtext im Blocksatz formatiert
war, finden im HTML-Editor jedoch keinen entsprechenden Befehl.
HTML-Editoren, auch moderne, unterstützen Textformatierung nicht auf direktem Wege.
Behelfen Sie sich, indem Sie das zuständige Attribut align eigenhändig
bearbeiten. Homepage-Programme unterstützen menügesteuert nur die align-Schalter
right, left und center. Sie können aber im Quellcode den Wert justify mit einem
einfachen Texteditor wie Notepad setzen. Das sieht etwa so aus:
<p align="justify">
BEISPIELTEXTBEISPIELTEXTBEISPIELTEXT
BEISPIELTEXTBEISPIELTEXTBEISPIELTEXT
BEISPIELTEXTBEISPIELTEXTBEISPIELTEXT
</p>
Dieser Effekt lässt sich auch HTML-4-konform mit Cascading Style Sheets realisieren:
p.blocksatz {
text-align : justify;
}
Wenn Sie keine externe Stil-Datei verwenden, fügen Sie obige Definition in den Tag
<style type="text/css" ></style>
in den Kopfbereich der HTML-Seite ein. Den Absatz, der Blocksatz enthalten soll,
weisen Sie mit
<p class="blocksatz"></p>
aus.
-
Blocksatz
Ein Attribut im <p>-Tag sorgt für beidseitig sauber ausgerichteten Text.
In vielen Büchern und Zeitschriften ist Blocksatz Standard. Dabei bilden die
Ränder in einem Textabsatz links und rechts eine saubere Linie. In HTML
definieren Sie einen Absatz mit dem Tag-Paar <p> und </p>.
Standardmäßig erscheint so ein Absatz linksbündig: Auf der linken
Seite bilden die Buchstaben eine saubere Linie. Rechts hängt die exakte
Länge von der Länge des letzten Worts ab. Um einen Blocksatz zu erreichen,
fügen Sie ein Attribut ein:
<p align=justify>
Damit erreichen Sie einen sauberen rechten Rand.
Auch mit dem Attribut align=right lässt sich ein rechtsbündiger Satz
erzielen - manchmal ein interessanter Effekt, etwa bei Bildbeschriftungen.
Als moderne Alternative zum HTML-Attribut (das Teil der HTML-4.0-Spezifikation ist)
dürfen Sie auch Style Sheets verwenden. In diesem Fall benutzen Sie das div-Tag:
<div style="text-align:justify">
Lorem ipsum dolor sit amet in veritas
humus bla bla ...
</div>
-
Bookmark mit Icon
Der Internet Explorer (ab Version 5) weist allen gespeicherten Favoriten automatisch
das Standard-Icon zu. Wer hier ein wenig Abwechslung ins Spiel bringen will,
kann seine Webseite um ein eigenes Mini-Bildchen erweitern.
Mit einem eigenen Icon versehene Bookmarks sind weitaus auffälliger als deren
standardmäßige Pendants. Viele kommerzielle Seiten, wie die von Providern
oder Suchmaschinen nutzen diese Form der Corporate Identity. Aber auch private Seiten
werden durch dieses Detail attraktiver. Wer diesen Service den Besuchern seiner
Webseite anbieten möchte, muss zunächst das gewünschte Icon
(16x16 Pixel) bereitstellen. Hier greifen Sie entweder auf die zahlreichen kostenlos
zur Verfügung gestellten Bildersammlungen zurück oder gestalten die Grafik
mit einem Shareware-Tool wie Microangelo (www.im pactsoft . com) in Eigenregie.
Sichern Sie die Datei unter der Bezeichnung favicon.ico und legen Sie das Icon dann
im Root-Verzeichnis des Webservers ab. Weitere Anweisungen sind nicht nötig,
da der Internet Explorer automatisch nach dieser Datei sucht und sie anzeigt. Falls
Sie keinen direkten Zugriff auf den Server haben oder aber Ihre Seite von einem Provider
wie Geocities gehostet wird, müssen Sie den HEAD-Bereich derjenigen Seiten, bei
denen das Icon angezeigt werden soll, um folgende Zeile erweitern:
<LINK rel="SHORTCUT ICON"
http://www . meinserver . de E /favicon . ico">
Dabei spielt es keine Rolle, auf welchem Server das Icon abgelegt ist. Darüber
hinaus ist es in diesem Fall erlaubt, den vorgegebenen Dateinamen favicon.ico durch
eine beliebige Bezeichnung zu ersetzen. Sobald ein Besucher die angepasste Seite
seinen Favoriten hinzufügt, wird diese von Ihrem Icon visuell unterstützt
und er findet es in der Bookmarkliste.
-
Bookmark-Link
Sie möchten die Wahrscheinlichkeit erhöhen, dass ein Besucher Ihre Seiten
erneut anklickt? Bieten Sie ihm einen Link, mit dem er per Mausklick Ihre Site in
seine Bookmarks aufnehmen kann.
Kennen Sie die Situation? Man surft im Internet, trifft zufällig auf eine sehr
interessante Seite - und vergisst, die URL zu speichern. Viele Internet-Seiten bieten
einen Link, mit dessen Hilfe die URL per Mausklick in den Bookmarks des Besuchers landet.
Dabei können Sie festlegen, mit welchem Info-Text der Eintrag in der Favoriten-
Liste gespeichert wird:
<a href="javascript:window.external.AddFavorite('http://www . meineseite . de','Veronas Homepage macht das Leben lustiger')">Diese Seite zu den Favoritenhinzufügen</a>
-
Bookmarklets erweitern Browser
Ein Mausklick zeigt den Wert aller class-Attribute der aktuellen Webseite an.
Oder Sie schalten ruckzuck alle Stylesheets aus. Oder wie wäre es mit einer
tabellarischen Liste aller JavaScript-Variablen? Wer schon einmal einen tückischen
Fehler gesucht hat, kann den Wert solcher Tools sicher einschätzen.
Das Geheimnis dahinter sind Bookmarklets, kurze JavaScript-Programme, die sich
über einen normalen Link mit href="javascript: starten lassen. Viele
solche Bookmarklets gibt es kostenlos zum Download wie bei
www . squarefree.com/bookmarklets/webdevel . html. Die meisten hier vorgestellten
Bookmarklets funktionieren mit Mozilla/Firefox, manche auch mit IE und Opera.
-
Browser Offset ausschalten
Standardmäßig halten Browser leider einen uneinheitlich Abstand zwischen
Browserrahmen und Webseiteninhalt. Das ist natürlich nicht immer gewünscht.
Der Internet Explorer für Macintosh gibt 8 Pixel, für Windows sogar 15 Pixel
Abstand vor. Einheitlich werden durch topmargin=0 (für Oben) und leftmargin=0
(für die linke Seite) die Inhalte auf die Koordinaten x=0 und y=0 gesetzt,
von der linken oberen Ecke des Anzeigefensters des Browers gerechnet. Netscape 6
akzeptiert diese Angaben auch, dafür nicht sein älterer Bruder Netscape
Navigator 4.x. Unbedenklich können Sie zusätzlich folgende Angaben machen:
marginheight="0" und marginwidth="0". Allerdings handelt es sich
hierbei um spezielle Netscape-4-TAGs, die kein HTML-Standard sind. Der body-TAG sieht
dann so aus:
<body leftmargin="0" topmargin="0"
marginheight="0" marginwidth="0">
Viel eleganter können Sie mittels CSS die Abstände zum Browserrahmen
definieren. Bei externen Stylesheets reicht dazu natürlich eine einmalige Definition,
die selbstverständlich alle anderen Webseiten, die das CSS benutzen, übernehmen.
Das Stylesheet sieht dann so aus:
body {
margin-top: 0px;
margin-left: 0px;
}
Netscape 4.x bedarf dann allerdings immer noch, wie oben beschrieben, einer
Sonderbehandlung.
-
Browser-Fenster öffnen
Mit einem einfachen Hyperlink öffnen Sie eine HTML-Datei in einem neuen Browser-
Fenster.
Damit der Browser beim Klick auf einen Link die Webseite in einem neuen Fenster anzeigt,
ist kein JavaScript nötig. Die Mittel von HTML genügen. Fügen Sie in das
Link-Tag einfach das Attribut target="" ein:
<a href="http://www.prisodi.de"
target="egal">
Schau dir das an!
</a>
Wie der HTML-Code schon andeutet, ist es egal, wie Sie das Zielfenster nennen. Wollen
Sie mehrere Links anbieten, die eine Webseite in einem neuen Fenster anzeigen,
beachten Sie Folgendes: Verwenden Sie den gleichen Namen als Target, erscheinen
die Webseiten auch im selben Browser-Fenster. Nutzen sie unterschiedliche Namen,
öffnet sich jedes Mal ein neues Fenster.
-
Browserfenster mit einrechnen
Wenn Sie die Größe des Bildschirmbereichs festlegen, der für die
Gestaltung Ihrer Website genutzt werden soll, sollten Sie die Vorgaben einrechnen,
die durch das Browserfenster gegeben sind. Durch die zum Teil aufwändigen
Symbolleisten ist meist schon einiges an Platz besetzt. Statt beispielsweise von
einem nutzbaren Bereich von 800 x 600 Pixeln auszugehen, ist es realistisch,
780 x 390 anzusetzen, da die meisten Besucher die Browserleisten normalerweise
nicht ausblenden.
-
Browserinkompatibilität ohne Ende
Entscheidend ist es, Webseiten für verschiedene Browser zu optimieren. Es
entsteht Quellcode, der wenig mit den W3C-Spezifikationen für HTML 4.0 und nichts
mit XHTML zu tun hat. Zukünftig wird sich der Web-Entwickler auf XHTML
(Trennung von Inhalt und Struktur) mit der Gewissheit konzentrieren, eine Standard-
Technik zu beherrschen. XHTML zu programmieren erfordert Lernfähigkeit und Geduld.
Ein Interview mit den Autoren Jeffrey Zeldman und David Eisenberg mit
weiterführenden Links finden Sie unter:
www . barrierefreies-webdesign . de/knowhow/css-design/holzweg.php
-
Bunter Hintergrund
Farbliche Vielfalt hält immer häufiger auf HTML-Seiten Einzug.
Simples Grau auf einer HTML-Seite findet man inzwischen selten. Mit einem einfachen
Zusatz zum BODY-Tag ändern Sie die Hintergrundfarbe Ihrer Seite zum Beispiel in
flottes Rot:
<BODY BGCOLOR="red">
Netscape Navigator wie auch Internet Explorer gestatten es Ihnen, Farben mit Namen
anzugeben. Die komplette Liste aller Farben finden Sie unter:
www . developer.netscape.com/library/documentation/htmlguid/colortab . htm
Wollen Sie Ihre Seite mit Rauhfaser hinterlegen, binden Sie diese Information im
BODY-Tag ein:
<BODY BACKGROUND="rauhfasr.gif">
Die Grafik wird automatisch gekachelt, wenn sie zu klein für den Hintergrund ist.
Der Internet Explorer kann eine Grafik auch als "Wasserzeichen" darstellen,
wenn Sie im BODY-Tag das Attribut BGPROPERTIES=FIXED angeben. So sehen Web- wie
Buchseiten aus, linksseitig wirken sie gar wie gebunden oder mit bunten Streifen
versehen. Den Hintergrund liefert ebenfalls eine Grafik, die mit 1000 Pixeln und mehr
sehr breit ausfällt. Die Höhe hingegen bescheidet sich mit wenigen Pixeln,
die für den bunten Rand reichen.
Denken Sie bei der Wahl Ihres bunten Hintergrunds daran, daß sich noch viele
Surfer mit 16 Bildschirmfarben begnügen müssen. Daher sollten Sie Ihre Seiten
auch mit dem Standard-VGA-Treiber unter Windows testen. Lesen Sie auch damit Ihre Seiten,
bevor Sie sie ins Netz stellen.
-
Button als Link
Statt eines Wortes oder Bildes benutzen Sie einen Formular-Button als Link.
Ganz ohne JavaScript realisieren Sie mit einem HTML-Formular einen Button, der beim
Anklicken zu einer Webseite verzweigt. Die neue Seite kann auf dem eigene Web-Server
liegen oder auf einem fremden. Der Button funktioniert auch, wenn ein Besucher
JavaScript in seinem Browser deaktiviert hat. Fügen Sie ein Formular in Ihre
Webseite ein:
<form action="seite.htm">
<input type=submit
value="Hier klicken">
</form>
Im Attribut action="" tragen Sie den Namen der Webseite ein, zu der
gesprungen werden soll. Das Attribut value="" enthält die Beschriftung
für den Button. Im Text für die Beschriftung verwenden Sie für Umlaute
die HTMLCodierungen, also ä für ein ä etc. Die Schaltfläche
definieren Sie mit dem Tag <input>. Definieren Sie den Button mit type=submit.
Dann geht der Browser davon aus, dass er beim Anklicken eine Aktion ausführen
soll, was Sie mit dem Attribut action="" im einleitenden <form>-Tag
festlegen.
-
Cache blockieren
So erreichen Sie, dass die Besucher immer die aktuelle Version einer Website sehen
und sich deren Computer die Seite nicht aus dem Browser-Cache holt.
Das Erzwingen der Aktualisierung ist sinnvoll, wenn die entsprechende Internet-Seite
häufig aktualisiert wird. In diesem Fall können Sie das Verfallsdatum der
Seite auf 0 setzen. Dies geschieht im <head>-Bereich mit folgendem Meta-Tag:
<META HTTP-EQUIV="expires" CONTENT="0">
Nun können Sie sicher sein, dass Ihre Besucher immer die neueste Version dieser
Seite auf den Bildschirm bekommen.
-
Cachen verhindern
Webseiten mit Daten, die der Server dynamisch aufbaut, sollten nicht gespeichert
werden, da sich die Inhalte zu oft ändern.
Wenn Sie Webseiten mit Daten wie Tabellen aus einer Datenbank dynamisch erzeugen,
so sollten Sie das Caching auf der Benutzerseite deaktivieren. Der Anwender
würde andernfalls beim nächsten Browser-Aufruf zuerst die Cache-Seite
mit den alten Informationen sehen. Das Caching kann aber vom Seitenbetreiber beim
Benutzer nicht einfach abgeschaltet werden. Ein kleiner Trick hilft hier weiter.
Setzen Sie folgende Zeilen in Ihre HTML-Datei ein:
<meta http-equiv="Expires" content="Sun, 01 Jan 2006 12:00:00 GMT">
<meta http-equiv="Pragma" content="no-cache"> </head>
Der erste Meta-Tag gaukelt dem Browser eine bereits veraltete Seitenversion vor und
erreicht damit ein Neuladen dieser Seite mit aktuellen Daten. Das zweite Meta-Tag
gibt die Anweisung vor allem auch an Proxy-Server weiter und unterbindet auch dort
das Caching. Je nach Einstellung des Benutzer-Browsers kann das Verhalten aber etwas
abweichen, wenn beim IE z. B. die Option Immer nach neuen Seiten suchen in den
Einstellungen aktiviert ist.
-
Compiler: "Dekorierte" Funktionen
Machen Sie das Verfahren Function Name Mangling rückgängig.
Beim Übersetzen von C++-Quelldateien werden Funktionsnamen "dekoriert"
(decorated) - man spricht auch von Function Name Mangling. Darunter versteht man die
(Internet-)Veränderung des Namens, um diesen eindeutig zu machen. Dafür
werden beispielsweise die Parameter einer Funktion und deren Typen verwendet. Es kann
aber notwendig werden, die "dekorierte" Variante eines Funktionsnamens
zu kennen. Leider ist sie irgendwo im Objektcode versteckt. Doch mit Fachwissen
erhalten Sie die Namen, wofür sich zwei Lösungen anbieten:
- Zum einen existiert die imagehelp.dll. Sie bietet eine API-Funktion, mit der sich
aus einem dekorierten Namen der ursprüngliche ermitteln läßt.
- Zum anderen empfiehlt sich das Browser Toolkit, das eine ähnliche Funktion
bereitstellt. Informationen zum Browser Toolkit finden Sie in der Knowledge Base
unter dem Stichwort Q153393. Die imagehlp.dll ist ebenfalls in der Knowledge Base
dokumentiert.
Übrigens: Wenn Sie Windows 95 einsetzen, ist diese DLL von Haus aus nicht auf
Ihrem System installiert - nur bei NT ist sie grundsätzlich dabei. Es gibt aber
eine lizenzfreie Variante von imagehlp.dll, die Sie auch unter Windows 95 einsetzen
können.
-
Computer automatisch aus Standby aufwecken
Sie fahren den PC zu einer bestimmten Zeit hoch, um z. B. nachts bestimmte Aufgaben
zu erledigen.
Sie können Ihren PC selbstständig starten lassen, wenn er im Standby-Modus
oder Ruhezustand bleibt. Für einen Weckauftrag öffnen Sie die Systemsteuerung
und das Modul Geplante Tasks. Klicken Sie doppelt auf Geplante Tasks hinzufügen.
Im aufklappenden Fenster klicken Sie Weiter an, um die Programmliste zu erhalten.
Sie können auch auf Durchsuchen klicken und einen Befehl wie z.B.
%windir% [Enter] system32 [Enter] defrag [Enter] eingeben. Geben Sie an, wie oft
Sie Ihren Auftrag ausführen lassen wollen, z. B. täglich. Sie legen eine
Startzeit wie 2:00 Uhr morgens fest, und Sie geben Ihr Kennwort an. Aktivieren Sie
unbedingt zum Schluss die Option Erweiterte Eigenschaften für diesen Task auf
Fertig stellen. Im nächsten Fenster klicken Sie auf das Register Einstellungen.
Damit Ihr PC zum angegebenen Zeitpunkt anfährt, aktivieren Sie die Option
Computer zum Ausführen des Tasks aktivieren. Klicken Sie auf das Register Task.
Im Feld Ausführ en sehen Sie das auszuführende Programm, dem Sie Optionen
wie defrag.exe c: anfügen können. Ihren Auftrag listet die Systemsteuerung
unter Geplante Tasks. Per Klick der rechten Maustause und dem Befehl Ausführen
können Sie dort Ihren Auftrag testen.
-
Content Management Systeme
Die Site www . opensourcecms . com informatiert Sie umfassend über CM-Systeme.
Die einfach zu bedienende Website vermittelt einen ersten Eindruck über
zahlreiche Systeme, die auf PHP und MySQL basieren. Sie können die vorgestellten
CMS als Demo laden.
-
Corporate Colors: Farbpaletten definieren
Programme wie GoLive unterstützen den Webdesigner bei der Definition eines Farbkanons für eine Website.
Neben der Typografie bestimmt insbesondere die Wahl der Farben, wie eine Website den Besucher anmutet. Sind die Farben für eine Website einmal ausgewählt, vereinfacht GoLive ihre Verwendung durch ein spezielles Farbregister im Site-Fenster, in dem der Webgestalter die Vorzugsfarben in einer Liste sammeln kann. Die bei der Farbauswahl vorgegebenen Namen sollten durch solche ersetzt werden, die den Verwendungszweck der Farbe benennen. Diese Liste wird dann auch in dem Farb-Register angeboten, wenn das Symbol Website-Farben angeklickt wird.
-
Datenbanken: Pfiffiges Backup
Viele Webhosting-Pakete enthalten eine MySQL-Datenbank. Mit PHP setzen Sie diese ein, um z. B. ein Forum oder ein Content Management System wie PHP-Nuke oder Xoops zu betreiben. Die meisten Hoster begrenzen die Rechenzeit, in der Sie ein Script ausführen. Dies merken Sie spätestens, wenn Sie die Inhalte der Datenbank sichern. Sie können nicht MByte-Daten in einem Arbeitsgang auslesen, weil das Script vorher abbricht. Diese Hürde umgeht der MySQL-Commander (www . bitesser . de) trickreich: Er liest die Datenbank Tabelle für Tabelle aus und speichert diese einzeln als SQL-Textdatei. Beim Zurückspielen des Backups geht die Freeware den umgekehrten Weg und fügt die Tabellen wieder ein. Ist eine einzelne Tabelle bereits zu groß, teilt der MySQL-Commander sie in Blöcke von jeweils 100 Datensätzen.
-
Dehnbare Linie
Eine Bilddatei mit einem Pixel Größe verwenden Sie als dehnbare Linie.
Mit einer Grafik von 1 x 1 Pixel Größe lässt sich eine Menge anstellen: Wie wäre es beispielsweise mit einer Trennlinie an Stelle des <hr>-Tags, die sich in Breite und Höhe beliebig verformen lässt? Dazu erzeugen Sie zunächst mit einem Bildbearbeitungsprogramm wie Paint Shop Pro ein 1 x 1-Pixel-Bild. Als Farbe kommt Rot zum Einsatz. Dieses Pixelbild bauen Sie mit dem <img>-Tag in Ihre Webseiten ein. Je nach Erfordernis steuern Sie die Länge und Dicke der Linie:
<img width=600 height=2>
Es entsteht eine rote Linie von 600 Pixel Breite und 2 Pixel Höhe. So erzeugen Sie farbige Trennlinien und sparen sich die Übertragung verschiedener Grafiken.
-
Diagramme schnell erstellen
Mit dem Namo WebEditor 6 lassen sich Tabellendaten schnell als Diagramme darstellen. Dabei wandelt der Diagramm-Assistent die Daten automatisch in das entsprechende Bild um. Bestimmen Sie den gewünschten Diagrammtyp. Beispielsweise können Sie zwischen Säulen-, Kreis-, Flächen-, oder Punkt-Darstellung wählen.
-
Diashow abspielen
Eine Meta-Angabe blättert automatisch zur nächsten Webseite weiter und ist kompatibel zu allen Browsern.
Zunächst legen Sie für jedes einzelne Bild der Diashow eine eigene Webseite an. Benutzen Sie dabei im Dateinamen fortlaufende Nummern wie diaschau1.htm, diaschau2.htm etc. Das erleichtert die nachfolgende Aufgabe erheblich. Die Weiterleitung erfolgt über ein Meta-Tag im Kopfbereich jeder einzelnen Webseite. Im Beispiel sieht die Zeile in der ersten Webseite so aus:
<meta http-equiv="refresh" content="5; URL=diaschau2.htm">
Die 5 steht für die Anzahl der Sekunden bis zum Aufruf der nächsten Webseite. Den Wert dürfen Sie natürlich anpassen. diaschau2.htm ist die Webseite, die als nächste zu laden ist. So geben Sie jeweils die nächste Webseite in der Bildreihenfolge an. Bei der letzten Webseite springen Sie entweder zurück zur ersten Seite und erhalten so eine Endlosschleife. Oder Sie lassen das Meta-Tag einfach weg. Bedenken Sie bei der Auswahl der Verzögerungszeit Folgendes: Die Ladezeiten der Webseiten müssen kür zer sein als die Pause, die Sie angegeben haben. Sonst bekommt der Besucher vielleicht gar nicht die fertige Webseite zu sehen, sondern der Browser holt gleich die nächste Seite.
-
Die Agenten von Windows
Die knappe Dokumentation zu Microsofts Agent-Control bedarf einiger weiterer Erläuterungen.
Prinzipiell können Sie Microsoft Agent genau wie jedes andere OLE-Control verwenden. Das einzige Problem beim Agent besteht in der mageren Dokumentation. Nach dem Import des Controls in Ihr Projekt liegt zwar eine Vielzahl an Header- und CPP-Dateien vor, aber leider sind alle aufzutreibenden Beispiele in Visual Basic oder BasicScript verfaßt.
Das Programm agent.c ist eine Variante in C++. Zwar demonstriert es nicht alle Interfaces und deren Methoden, aber, ausgehend von diesem Rahmencode, sollten Sie in der Lage sein, das Agent-Control vollständig zu nutzen.
-
Die einzigartige Adresse
Vereinheitlichen Sie Ihre Webadresse zum Wohle der Besucher und des Suchmaschinen-Rankings.
Domain-Inhaber sind zumeist in der glücklichen Lage, sowohl die Adresse http://www . domain . tld als auch die kürzere Variante http:// domain . tld nutzen zu können. Selten jedoch stellt sich die Frage, welche von beiden es denn bevorzugt geben sollte. Und ist es überhaupt gut, beide nutzen zu können? Nun es ist gut, wenn die Webseite unter beiden Adressen erreichbar ist, aber es ist technisch nicht optimal, wenn beide Adressen gleichberechtigt nebeneinander existieren. Denn zum einen müssen beide Versionen verwaltet und im Speicher gehalten werden, zum anderen verwirren Sie unter Umständen auch Ihre Besucher, die zwar bereits die Seite domain.tld/seite.html besucht haben, den Link www. domain.tld/seite.html aber dennoch als unbesucht angezeigt bekommen. Dass die zwei Adressen zudem bei einigen Suchmaschinen ein besseres Ranking verhindern, weil sich die Bewertung auf zwei scheinbar unterschiedliche Seiten aufteilt, kommt erschwerend hinzu. Was also tun? Die Lösung liegt wie so oft in der Datei .htaccess, die Anweisungen an den Webserver weiterleiten kann. Der Apache kennt zum Beispiel das Modul Rewrite, mit dem Sie die eingehenden Anfragen ändern können. In .htaccess sieht das dann so aus:
RewriteEngine on
RewriteCond %{HTTP_HOST} ^www . domain . tld$ [NC]
RewriteRule ^(.*) http://domain . tld/$1 [L,R=301]
Dieser Eintrag textet alle Anfragen an www . domain . tld automatisch zur kurzen Adresse domain.tld um, die dann auch als einzige auf Ihrer Website benutzt werden sollte.
-
Die Qual der Bildbearbeitungswahl
Der Wirkungsgrad der Komprimierung hängt auch vom verwendeten Programm ab.
Die Software-Hersteller verwenden unterschiedliche Algorithmen für die Komprimierung von Bildern. Wenn Sie beispielsweise ein jpg-Bild in Photoshop 4.0 komprimieren, erhalten Sie mit der entsprechenden Einstellung eine etwa zehn bis 20 Prozent größere Datei als mit Paint Shop Pro 5.0. Allerdings ist die Qualität der Photoshop-Bilder meist höher. Das ideale Bildbearbeitungsprogramm zur Komprimierung unterscheidet sich somit von Motiv zu Motiv, Experimentieren lohnt sich.
-
DLLs im Überblick
DLLs im Überblick
Wenn Sie die Übersicht über die verwendeten DLLs verlieren, geschehen Dinge, die Sie nie für möglich gehalten hätten.
Wer viele DLLs benutzt, verliert schnell den Durchblick - vor allem über deren Versionen. Da installieren Sie schon mal eine falsche Variante der MFC-DLLs oder übersehen eine DLL vollständig.
Für dieses Problem gibt es - zumindest teilweise - Abhilfe. Im SDK finden Sie das Tool depends.exe. Dieses zeigt für ein gegebenes Image alle von diesem gelinkten DLLs an - und zwar sowohl deren Version als auch deren Position auf der Festplatte. Zumindest für alle DLLs, die Sie in Form von Import-Libraries laden, hilft depends Ihnen ein ganzes Stück weiter.
Was depends allerdings nicht anzeigen kann, sind DLLs, die der API-Aufruf LoadLibrary() erst zur Laufzeit laden kann. Doch auch hierfür gibt es ein handliches Werkzeug: "ListDLLs".
Dieses Programm kann alle DLLs auflisten, die ein momentan laufender Prozeß benutzt. Alles, was Sie tun müssen, ist, die in DLLs liegenden Funktionen Ihrer Anwendung zu aktivieren und ListDLLs zu starten. Danach haben Sie eine vollständige Liste aller Dateien, von der Ihre Anwendung abhängig ist. ListDLLs finden Sie unter:
www . ntinternals . com
-
Dokument einrücken
Beleben Sie am Bildschirm Gutenbergs bewährte Tradition.
Wollen Sie einen Hintergrund verwenden, der einem aufgeschlagenen Buch gleicht, so sollte sich Ihr Text nicht ganz links verstecken, wo die virtuelle Buchseite Schatten wirft. Hier hilft Ihnen eine versteckte Tabelle mit einer Reihe und zwei Spalten weiter. Damit der Browser die Tabelle nicht anzeigt, bestimmen Sie die Rahmenbreite mit dem Wert 0:
<TABLE BORDER=0>
<TR>
<TD WIDTH=100>
<TD>
Hier das Dokument:
</TABLE>
Genaue Beobachter mögen die End-Tags </TD> und </TR> vermissen. Sie sind optional. Bei einfachen Tabellen wie dieser lassen Sie sie wegen der besseren Lesbarkeit weg. Sollten Sie allerdings Tabellen verschachteln müssen, ist die Angabe der End-Tags unumgänglich.
Leider betrachten die meisten Browser das WIDTH-Attribut wie manche Autofahrer die Verkehrsregeln: als unverbindliche Empfehlung. Wenn Sie Ihr Dokument pixelgenau einrücken wollen, hilft Ihnen der Trick mit der unsichtbaren Grafik weiter. Bauen Sie eine gif-Grafik mit einer Größe von einem Pixel, das Sie als transparent definieren. Setzen Sie dann diese Grafik in die linke Tabellenspalte, und geben Sie die Breite in Pixeln an. Diese Breite wird vom Browser in jedem Fall als verbindlich betrachtet. buch.htm verdeutlicht das Verfahren.
<TABLE BORDER=0>
<TR>
<TD>
<IMG SRC="winzig.gif" WIDTH=100 HEIGHT=1>
<TD>
Hier Ihr Dokument:
</TABLE>
Diese gif-Datei ist schnell übertragen. Sie verwenden sie überall dort, wo Sie einen genau definierten freien Raum im Dokument benötigen.
-
Dokumente in Webseiten einbetten
Sie haben beim Surfen eine Webseite entdeckt, in die eine andere Seite wie ein Bild integriert war. Das möchten Sie für Ihre Homepage auch realisieren.
Das Inline-Frame Tag <iframe> ermöglicht dem Webseiten-Gestalter eine Reihe Effekte. Sie können komplette Webseiten in eine andere Seiten einbetten, ähnliche einem Frame. Nur stellt der Browser die Seite als Fenster dar. Alle moderneren Browser unterstützten diesen Tag. Für den Netscape Navigator 4.x verwenden Sie anstatt dessen den Tag <ilayer>. Beide Tags zeigen Inhalte, die zwischen ihren Anfangsund Ende-Tags stehen, nur an, wenn der Browser den Tag selbst nicht interpretiert. Mit der folgenden Schachtelung können Sie eine Lösung für alle Browser verwirklichen. Für ganz einfache Browser ist eine Mitteilung mit einem Link vorgesehen, so dass auch mit ihnen die Inline-Seite erreichbar ist:
<iframe src="seite2.html"
width="300" height="200"
align="left" hspace="30"
vspace="50">
<ilayer src="seite2.html"
width=300 height=200>Hier sollte
eigentlich die Datei
<a href="seite2.html">
Seite2.html </a>
angezeigt werden. Aber Ihr Browser
versteht weder IFrames oder
ILayer!</ilayer>
</iframe>
-
Druck sperren
Rüsten Sie auf Ihrer Webseite eine Druckfunktion nach oder sperren Sie wichtige Inhalte für den Druck.
Um eine eigene HTML-Seite drucken zu können, hilft ein kleiner Dreizeiler weiter. Per Klick auf den Button startet die Druckfunktion und zeigt den Windows-Dialog. Dort legen Sie weitere Parameter wie Seitenzahl und Frames fest und starten den Druck. Fügen Sie den folgenden Quelltext auf die zu druckende Seite ein:
<form>
<input type=button OnClick=window.print() value='Drucken...'>
</form>
Sie können den Input-Tag auch formatieren und das Formular gut platzieren. Ausschlaggebend ist der funktionelle Dreizeiler. Wenn Sie nun allerdings wichtige Informationen auf Ihren Webseiten haben oder einen Druck grundsätzlich verhindern möchten, so können Sie dies einfach lösen. Erzeugen Sie zuerst eine CSS-Formatdatei mit dem Namen NoPrint.css, und fügen Sie dort den Formattype #noprint {display:none;} ein. In der zu schützenden HTML-Datei müssen Sie nun einen Bezug auf diese Stylesheet-Datei setzen: <link rel='stylesheet' media='print' href='NoPrint.css'>. Damit wird die Anweisungsdatei eingebunden, der Dateityp auf StyleSheet gesetzt und als Aktionsmedium der Drucker ausgewählt. Somit bezieht sich die Anweisung {display:none} nur auf den Drucker und nicht auf den Bildschirm. Nun müssen Sie den Formattyp noch auf das Dokument anwenden. Den auf der Seite vorhandenen BODY-Tag erweitern Sie daher um die ID-Angabe: <body id='noprint'>
-
Drucken - ganz einfach
Nutzen Sie die Druckfunktionen von notepad oder write für eigene Programme.
Eine txt- oder rtf-Datei läßt sich auf zwei Arten drucken:
- Zum einen können Sie ein Programm schreiben, das etwa mit Hilfe des rtf-Controls die Datei liest und druckt.
- Einfacher ist folgender Weg: Auf jedem Windows-Rechner sollten sich sowohl notepad als auch write befinden. Diese Programme sind bereits mit allem ausgestattet, was man für den Ausdruck von Dateien braucht. Drucken Sie daher eine Datei aus, indem Sie den String write /p Dateiname an ShellExecute übergeben. Die Shell startet dann write oder notepad und überläßt es dem jeweiligen Programm, die Datei zu drucken.
-
E-Mail-Adressen-Versteck
E-Mail-Adressen, die im Klartext auf den Websiten stehen, laden dazu ein, per Bot gesammelt und künftig mit zahllosen SpamMails belästigt zu werden. Um dies zu verhindern, codieren Sie Adressen innerhalb der Seite so, dass kein Bot sie findet. Dennoch bieten Sie Ihrem Besucher einen aktiven Link, der per Mausklick das Standard-Mailprogramm öffnet und die richtige Adresse einfügt. Dies erreichen Sie, indem Sie die Adresse in die Teile Name, Klammeraffe und Domain gliedern. Die Teile fügt ein Skript bei Bedarf zusammen:
<script> var vorne="name"; var hinten="adresse.de"; var mitt mitte="@"; document.write("<A HREF=\"mailto:"+vorne+mitte+hinte n+"\">Mailen Sie mir</a>") </script>
-
E-Mail-Hyperlinks mit Pepp
E-Mail-Hyperlinks öffnen meist das Mailprogramm des Benutzers. So schreibt dieser
schneller, ohne die Adresse des Empfängers eintragen zu müssen.
Haben Sie auf einer Webseite eine E-MailAdresse hinterlegt, kann diese im Zusammenhang
zum Inhalt stehen. Sinnvoll wäre hier, wenn neben der Empfänger-Adresse auch
automatisch der gewünschte Betreff im Mailprogramm eingetragen wäre. Das gelingt
mit einer einfachen HTML-Erweiterung. Ein E-MailVerweis sieht folgendermaßen aus:
<a href &quo "mailto:prisodi@xxx.de"
Vor der Empfänger-Adresse steht immer mailto. Sollen zwei Empfänger die E-Mail
erhalten, setzen Sie die zweite Adresse hinter die erste und trennen sie per Semikolon
(;): <a href="mailto:prisodi@prisodi.de Für einen vordefinierter Text im Betreff
ergänzen Sie die EMail-Adresse mit ?subject und setzen dahinter den Text:
<a href="mailto:prisodi@xxx.de?subject=Artikel bei PriSoDi"></a>.
Nach dem Fragezeichen ? können Sie dem href-Attribut weitere Angaben zuweisen:
cc: sichtbare Empfänger-Kopie der E-Mail,
bcc: unsichtbare Empfänger-Kopie,
body: vordefinierte Botschaft.
Diese können Sie ohne die subject-Option einsetzen. Die Optionen trennen Sie durch
das kaufmännische Und (&) voneinander. Damit die Browser dies umsetzen,
müssen Sie dieses & entsprechend des Zeichensatzes ISO-8859-1 maskieren:
&. Achtung: Kodieren Sie Sonderzeichen und Zeichen in E-Mail-Verweisen
außerhalb des ASCII-Zeichensatzes. Abhängig vom Browser oder E-Mail-Programm
werden unter Umständen nicht alle Optionen umgesetzt. Ältere Browser
können die maskierten Zeichenketten häufig nicht korrekt interpretieren.
-
E-Mails mit MFC
Dateien können Sie unter Win32 auf zwei Arten per E-Mail versenden.
Sie brauchen für den Versand von E-Mails das Rad nicht neu zu erfinden.
- Sie können zum Beispiel das MAPI (Message API) verwenden, um beliebige Dateien über Windows Messaging zu versenden.
- Wenn Sie hingegen keine komplette Mailer-Software schreiben möchten, sondern Ihren Anwendern nur eine einfache Methode zum Versenden von Dateien zur Verfügung stellen wollen, gibt es einen besseren Weg, als sich durch die MAPI-Dokumentation zu kämpfen: Die CDocument-Klasse verfügt über die Methode OnFileSendMail().
Um diese zu verwenden, brauchen Sie nur einen Menüpunkt zu definieren und im zugehörigen Handler OnFileSendMail() aufzurufen. MFC kümmert sich dann darum, daß das aktuelle Dokument per Messaging an einen beliebigen Empfänger versandt wird.
-
Eigene 404-Fehlerseite
Mit einer individuellen Fehlerseite führen Sie Besucher auf die Homepage Ihrer Site.
Wenn das Ziel eines Links nicht (mehr) vorhanden ist, so erscheint statt dessen eine Webseite mit dem berüchtigten Error 404. Besonders direkte Links auf Unterseiten einer Site sind hier gefährdet. Die Fehlerseite gibt der Webserver automatisch aus. Sie dürfen das Design aber bei den meisten Providern anpassen. Besonders sinnvoll ist es, auf der Fehlerseite einen Link auf die eigene Homepage anzubringen. So finden sich gestrandete Surfer leichter zurecht und verlieren nicht die Übersicht. Die 404-Seite ist eine ganz normale HTML-Datei, die Sie nach Belieben gestalten. Speichern Sie die Webseite im Hauptverzeichnis auf dem Webserver unter einem beliebigen Namen, etwa fehler404.html. Damit der Webserver weiß, welche Datei er bei einem Fehler anzeigen soll, tragen Sie den Dateinamen in der Textdatei .htaccess ein. Diese Datei steuert verschiedene Reaktionen desWebservers, beachten Sie den Punkt am Dateianfang. Prüfen Sie zunächst, ob die Datei bereits auf dem Webserver vorhanden ist. Ansonsten erzeugen Sie mit dem Windows-Editor die Datei ht.txt. Später benennen Sie die Textdatei dann mit einem FTP-Programm auf dem Webserver um - der Umweg ist erforderlich, weil Windows nicht mit dem Punkt am Anfang umgehen kann. Tragen Sie folgende Zeile in die Textdatei ein:
ErrorDocument 404 http://www . Domain . de/fehler404.html
Natürlich müssen Sie den Namen der Domain anpassen. Sobald Sie die Datei per FTP in das Hauptverzeichnis desWebservers kopiert haben, landen Surfer bei Fehlern auf der individuellen Seite. Wie das Format der Textzeile nahe legt, lassen sich auch für andere Fehlercodes als 404 eigene Webseiten festlegen. Das Verfahren funktioniert mit allen bekannten Providern wie 1&1 oder Strato, die .htaccess unterstützen.
-
Eigene Aufzählungspunkte
Auf folgende Art und Weise verwenden Sie für Ihre Aufzählungspunkte statt der Standardsymbole Ihr eigenes Symbol.
Aufzählungspunkte werden üblicherweise mit Listen-Elementen dargestellt. Dabei können Sie geordnete oder ungeordnete Listen implementieren.
<OL>
<LI> geordnete Liste, Punkt
1</LI>
</OL>
oder
<UL>
<LI> ungeordnete Liste, Punkt
1</LI>
</UL>
Geordnete Listen verwenden als Default-Einstellung für die Aufzählungspunkte eine numerische Formatierung. Über das TYPE-Attribut können Sie aus weiteren Möglichkeiten wählen:
<OL TYPE="i"> römisch klein geschrieben
<OL TYPE="a"> alphanumerisch
klein geschrieben
<OL TYPE="A"> alphanumerisch groß
geschrieben
<OL TYPE="i"> römisch klein geschrieben
<OL TYPE="I"> römisch groß geschrieben
Ungeordnete Listen verwenden als Aufzählungspunkte einfache Symbole (in der Standardeinstellung: kleine Kugeln). Auch bei dieser Listenform können Sie weitere Formatierungen wählen:
<UL TYPE="disc"> kleine Kugel
(Voreinstellung)
<UL TYPE="square"> kleines
Quadrat
<UL TYPE="circle"> kleiner Kreis
Sie können die Attribute auch direkt in den Aufzählungspunkten (<LI> ... </LI>) unterbringen und auf diese Weise unterschiedliche Formatierungen in einer Liste bewirken. Falls Ihnen diese Vorgaben nicht gefallen, können Sie mit einer Style-Sheet-Zuweisung eigene Symbole bestimmen. Die folgenden Beispiele zeigen Ihnen, wie Sie einer Liste einen Style zuweisen.
<OL STYLE="list-style:url
(bullet.gif);">
<UL STYLE="list-style:url
(bullet.gif);">
<LI STYLE="list-style:url
(bullet.gif);">
Als Wert für url( pfad/dateiname) geben Sie den Pfad und den Namen zur gewünschten Datei an. Wenn Sie dem Style eine einleitende Listendefinition (<OL> oder <UL>) zuweisen, gilt die Grafik für alle Listenelemente. Wenn Sie einen Style einem Listenelement direkt zuweisen (<LI>), können Sie unterschiedliche Grafiken für die Aufzählungspunkte bestimmen. Leider funktioniert diese Angabe nicht mit Netscape 4. Sie können aber mit einem kleinen Trick eine ähnliche Formatierung erreichen. Die Lösung dazu bietet Ihnen eine Definitionliste (DL):
<DL>
<DT><DD><IMG SRC="bullet.gif"
WIDTH="5" HEIGHT="5" VSPACE="3"
BORDER="0"> Aufzählungspunkt 1
</DL>
Stellen Sie dem Punkt einfach eine Grafik voran, womit Sie Aufzählungspunkte simulieren können. Eine weitere Variante ist der Einsatz von Tabellen:
<TABLE>
<TR>
<TD VALIGN="top"><IMG SRC="bullet.
gif" WIDTH="5" HEIGHT="5"
VSPACE="7" BORDER="0"></TD>
<TD>Aufzählungspunkt 1 </TD>
</TR>
</TABLE>
Um eine Liste zu simulieren, wird bei diesem Beispiel eine Tabelle mit zwei Zellen pro Zeile eingerichtet. In der linken Zelle wird der Aufzählungspunkt als Grafik untergebracht und in der rechten Zelle der dazugehörige Text.
-
Ein Klick für zwei Frames
Wenn Sie Frames auf Ihrer Homepage benutzen, beispielsweise ein Inhaltsverzeichnis und ein Fenster, in dem der ausgewählte Inhalt angezeigt wird, stellt sich oft das Problem, dass nicht nur das Ausgabefenster einen neuen Inhalt anzeigen soll, sondern auch das Inhaltsverzeichnis selbst im anderen Fenster.
Das gelingt mit einem einfachen Trick: Statt im alten Frameset zu bleiben, benutzen Sie den Target-Parameter "_top". Damit verlassen Sie Ihr aktuelles Frameset und schaffen ein leeres Browserfenster. Die Seite, die Sie mit dem Link anspringen, enthält ein neues Frameset, in dem Sie die beiden gewünschten Seiten aufrufen. Der Link sieht folgendermaßen aus:
<A HREF="Frameset02.html"
TARGET="_top">Menüpunkt XYZ</A>
Diese Lösung bietet zudem den Vorteil, dass Sie auf Wunsch ein völlig neues Frame-Layout anlegen können.
-
Eine cpl-Datei starten
Wenn Sie mit Ihrer eigenen cpl-Datei systemweite Parameter konfigurieren wollen, sollten Sie Ihre Anwendung in der Systemsteuerung programmtechnisch öffnen können.
Das Starten einer cpl-Datei ist leider nicht klar dokumentiert. Mit dem Code in opencpl.c können Sie eine Anwendung jedoch aus der Systemsteuerung starten.
-
Eingabefelder beschriften
Gerade Checkboxen benötigen eine Beschriftung, um die Übersicht zu behalten.
Um auszudrücken, dass ein Text als Beschriftung zu einem bestimmten Eingabefeld gehört, sieht HTML 4 den Tag label vor. Das erleichtert die Lesbarkeit des Quelltextes. Ein Klick auf das Label fokussiert automatisch das Steuerelement.
<label for="chk1">Beschriftung</label>
<input id="chk1" type="checkbox" ID="chk1" value="1">
-
Eingabefelder mit Fokus
Mit zwei Event-Handlern färben Sie Eingabefelder in einem Formular ein, sobald sie den Fokus bekommen. Der Besucher weiß so immer, welches Eingabefeld gerade aktiv ist. Dazu ergänzen Sie das <input>-Tag so:
<input type="text"
style="background
Color='#FFFF99'"
onFocus="this.style.background
Color='#EEEEEE'"
onBlur="this.style.background
Color='#FFFF99'">
Sie müssen lediglich die Farben anpassen.
-
Erweitertes Visual Studio
Sie verwenden Non Standard Resources, um zum Beispiel ein avi-Video in ein Projekt einzubinden.
Visual Studio kommt von Haus aus nur mit "einfachen" Ressourcen wie Bitmaps und Dialogen klar. Schwieriger wird es, wenn Sie beispielsweise ein avi-Video in Ihr Projekt einbinden möchten. Hierfür bietet es keine fertigen Mechanismen.
Trotzdem ist die Verwendung einer avi-Datei relativ einfach. Definieren Sie zunächst einen Identifizierer für die avi-Datei, und tragen Sie dann eine Referenz auf diese Datei im .rc2-Skript innerhalb des RES-Verzeichnisses ein:
IDR_AVI_MEIN_AVI AVIA "Dateiname.avi"
Danach können Sie die avi-Datei in Ihrem Code einfach anhand des Identifizierers verwenden. Beim Animation Control geben Sie der Methode Load() beispielsweise einfach den von Ihnen definierten Parameter als Identifizierer mit.
-
Euro-Zeichen
Sie bieten auf Ihren Seiten Inhalte mit Preisangaben an und müssen diese als Euro darstellen.
Web-Anbieter müssen künftig mit dem Euro-Zeichen ebenso arbeiten wie andere Anbieter. Sie können das Kürzel EUR einsetzen oder das entsprechende grafische Symbol. Das Unicode-Konsortium hat das Euro-Symbol ins Unicode-System aufgenommen. Der Wert lautet U+20AC und entspricht dem hexadezimalen Wert 20AC (dezimal: 8364). Web-Browser, die dem HTML-4.0-Standard entsprechen, können Werte q aus dem Unicode-System mit folgender Syntax anzeigen: &#xHEXWERT; oder &#DEZIMALWERT; Für das Euro-Zeichen notieren Sie in Ihren HTML-Dokumenten die folgende Schreibweise:
€
oder
€
Mittlerweile können Sie für das Euro-Zeichen ein benanntes Zeichen verwenden: €
Zur Darstellung dieses Zeichens muss
der Anwender über eine Schriftart verfügen, die dieses Zeichen beinhaltet.
-
Farben online checken
Nahezu jeder moderne HTML-Editor bietet eine Funktion zur Farbwahl an. Puristen, die Webseiten nach wie vor mit einem reinen Text-Editor gestalten, greifen in solchen Fällen entweder zu einem kostenlosen Zusatz-Tool oder führen den Check online, etwa auf der Webseite www . colorschemer . com/online.html durch. Wichtig: Alle Farben werden sowohl im RGB- als auch Hexcode angezeigt.
-
Farben reduzieren
Je weniger Farben Sie verwenden, desto kleiner wird die Grafikdatei.
Abhängig von der Farbtiefe wird Ihre Bilddatei riesig - oder winzig klein: Das Beispiel mit 256 Farben (= 8 Bit Farbtie-fe) beansprucht 41 KByte, das 16-Far-ben- Bild (= 4 Bit Farbtiefe) nur noch 33 KByte - also etwas mehr als die Hälfte. Ein jpg-Bild würde bei maximaler Komprimierung mit 12,8 KByte auskommen.
-
Farbige Scrollbars im Internet Explorer
Wer viel im Web unterwegs ist, stößt immer häufiger auf grafisch anspruchsvolle Webseiten, bei denen sogar die seitlichen Scrollbars farbig dargestellt werden. Was nach viel Arbeit aussieht, lässt sich binnen weniger Minuten in die eigene Seite einbauen.
Ab Version 5.5 ist der Internet Explorer in der Lage, bunte Scrollbars darzustellen. Noch besser: Ein simples Style-Sheet reicht aus, um auch die Bildlaufleisten an die Optik des Seiteninhalts anzupassen. Folgende Befehle sind für das Aussehen zuständig:
scrollbar-3d-light-color /*
innere Begrenzungslinie */
scrollbar-arrow-color /*
Navigationspfeile */
scrollbar-base-color /* Erste
Grundfarbe der Bildlaufleisten */
scrollbar-dark-shadow-color /*
äußere Begrenzungslinie */
scrollbar-face-color /* Zweite
Grundfarbe der Bildlaufleiste */
scrollbar-highlight-color /*
Farbe des Untergrunds */
scrollbar-shadow-color /*
Schattenwurf */
Falls Sie sich nicht in Eigenregie mit den diversen Parametern und Farben auseinandersetzen möchten, nehmen Sie das kostenlose MSDN-Angebot an und arbeiten mit dem Online-Codegenerator
msdn.microsoft.com/workshop/sample s/author/dhtml/refs/scrollbarColor.htm. Hier wählen Sie die gewünschten Farben aus, klicken in der rechten Spalte auf die Schaltfläche Copy Code to Clipboard und fügen den Quelltext in Ihren HTML-Editor ein.
-
Farbige Trennlinien
Eine sinnvolle Eigenschaft der Trennlinien ist, dass Sie sie über Parameter formatieren können. Durch folgenden einfachen HTML-Code erzeugen sie eine rote Linie der Stärke 3, die sich über drei Viertel des Bildschirms erstreckt.
<HR WIDTH="75%" COLOR="#FF0000" SIZE="3">
-
Favicons
Mit Grafikdateien, die Sie als favicon.ico speichern und Ihrem Webspace hinzufügen,
erzielen Sie überraschende Wirkung.
Favicons sind seit Internet Explorer in der Version 5.0 bekannt und werden mittlerweile
von allen gängigen Browsern unterstützt: In den Favoriten erscheint ein Icon
links neben dem Eintrag. Browser stellen das Favicon in der Adressleiste der URL voran.
Beachten Sie, dass Sie an Ihrer HTML-Seite selbst nichts ändern müssen.
Legen Sie nur das Favicon in das Web-Verzeichnis, in dem sich Ihre Einstiegsseite
befindet (index.htm). Falls Sie Ihr Favicon allerdings in ein anderes, z.B.
geschütztes, Verzeichnis legen möchten, müssen Sie es im
<head>-Bereich Ihrer HTML-Seite referenzieren
(<link rel="shortcut icon" href="... /favicon.ico">).
Die Grafik sollte nicht groß sein, weil sie sonst verzerrt dargestellt
würde. Empfohlen wird eine Größe von 32 x 32 oder 16 x 16 Pixeln.
Außerdem muss das Favicon im Icon-Format (.ico) gespeichert sein.
Ein Grafikprogramm wie IrfanView (www . irfanview . com) unterstützt
dies Format. Es reicht aus, eine bereits bestehende bzw. zuvor mit einem anderen
Grafikprogramm erzeugte Grafik nachträglich mit IrfanView im ICO-Format
zu speichern. Informationen zu Favicons erhalten Sie auf der Internetseite
http://favicon . de
-
Favicons einrichten
Beim Surfen haben Sie eine Seite in die Favoriten aufgenommen, die im Menü ein individuelles Icon hat. Das möchten Sie auch für Ihre Homepage realisieren.
Mit den so genannten Favicons bietet der Internet Explorer seit der Version 5 dem Webmaster die Möglichkeit, eigene Icons für seine Webseiten zu entwerfen, die in der Favoritenliste statt des Standard- Icons angezeigt werden. Um Ihre Seite auf diese Weise aus den Favoriten hervorzuheben, gehen Sie folgendermaßen vor: Gestalten Sie zunächst mit einem Icon-Editor wie MicroAngelo oder IconEdit Ihr Logo in den Größen 16 x 16 und eventuell 32 x 32 Pixel, und speichern Sie die beiden Bilder als favicon.ico. Im Browser wird das kleinere Icon benutzt, bei einer Verknüpfung etwa im Start-Menü dagegen die Größe 32 x 32 bzw. wird auf diese Größe skaliert. Sie brauchen diese Datei nur noch ins Rootverzeichnis Ihrer Domain oder Subdomain zu legen. Alternativ können Sie einen anderen Dateinamen oder Speicherort wählen, müssen dann aber folgende Angabe in den Head-Bereich Ihrer Seite aufnehmen, wobei die href-Angabe die URL Ihres Icons ist:
<head>
<link rel="shortcut icon"
href="http://www . mydomain . com/ myicon.ico">
<title>Seitentitel</title>
</head>
Weitere Informationen finden Sie bei Microsoft unter: msdn.microsoft.com/ workshop/author/dhtml/howto/Short cutIcon.asp
-
Fehlersuche mit Komfort
Wie die Dokumentation in der Datei autoexp.dat ausweist, erweitern Sie den Debugger um eigene Datentypen.
Der VC++-Debugger expandiert einige Strukturen in den Datatip- und Watch-Fenstern automatisch. Wenn Sie den Cursor etwa über eine Variable vom Typ POINT halten, werden automatisch die Werte für x und y angezeigt. Es ist nicht notwendig, die Struktur von Hand zu expandieren.
Erfreulicherweise läßt sich dieses automatische Expandieren auch mit eigenen Datentypen durchführen. Wie das geht, dokumentiert die Datei autoexp.dat in Ihrem VC++-Verzeichnis im Detail.
-
Fixe Tabellen
Beschleunigen Sie den Aufbau umfangreicher Tabellen mit Bildern im Browser.
Die Darstellung einer umfangreichen Tabelle, in die ein paar Bilder eingebaut sind, überfordert den Browser: Solange nicht sämtliche Bilder und sonstige Elemente geladen sind, steht deren Größe nicht fest. Deshalb zeigt der Browser erst einmal gar nichts an oder verändert die Zellengröße nachträglich und "rutscht" damit Elemente auf dem Bildschirm hin und her. Sie können das abschwächen, wenn Sie bei Bildern Größenangaben ins Bild-Tag einbauen:
<img src="sonne.jpg"
width="300" height="225">
Viele Web-Editoren wie HomeSite oder Dreamweaver fügen diese Angaben automatisch ein. Eine Alternative bietet der Internet Explorer ab Version 5 an. Die CSS2-Angabe
<table style="table-layout:fixed">
bewirkt, dass der Browser die Angaben zur Spaltenbreite und Zeilenhöhe in der obersten Zeile für die ganze Tabelle übernimmt. So kann der Browser die Tabelle sofort aufbauen, ohne die Übertragung des Inhalts abzuwarten. Ältere Browser überlesen die CSS-Angabe.
-
Flash vs. barrierefreies Web
Flash-Features gestalten Flash-Objekte, die auch Blinde nutzen können. MSAA (Microsoft Active Accessibility), eine Schnittstelle von Microsoft, kann derzeit wenigstens rudimentär auf Flashobjekte zugreifen. Um flashbasierten Webseiten durchgehend als barrierefrei zu verwenden, scheinen Macromedia und Microsoft allerdings noch weit entfernt zu sein.
www.barrierefreies-webdesign.de/knowhow/msaa/einfuehrung.php
-
Flexible Seiten mit relativen Größen
Eine geschickte Kombination von relativen und absoluten Maßen erlaubt einen Seitenaufbau, der sich dem Browserfenster anpasst.
Sie suchen eine einfache Lösung für ein Seitendesign, in dem der Seitenkopf und eine Spalte für Navigationselemente fixiert sind, während sich der Bereich der Inhalte an die Fenstergröße anpasst? Ein Weg ist die Kombination von zwei zweispaltigen Tabellen. In der ersten Tabelle für den Kopfbereich wird die Breite mit Prozentangaben geregelt. Für die Spalte, die das Logo aufnimmt, wird 1% angegeben, was dazu führt, dass die Spalte trotzdem an die tatsächliche Bildgröße angepasst wird. In der zweiten Spalte wird für die Navigationsleiste auf der linken Seite ein fixer Wert angegeben, die zweite Spalte verwendet dann automatisch den Rest, der von 100% bleibt, egal wie groß oder klein der Besucher das Fenster aufzieht.
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr><td valign=bottom align=left
width="1%"><img src="bilder/logo.gif"
alt="logo" border="0"></td>
<td valign=top align=right>Home</td>
</tr></table>
<hr><table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr><td valign=top align=left
width="150">Aktuelles<br>Links
<br>Angebote</td>
<td valign=top align=left>
<em>Die Qualität einer Website</em>
hat ganz unterschiedliche
Dimensionen...</td>
</tr></table>
-
Formular-Maildienste
Für die Auswertung der Formulardaten auf Ihrer Homepage stehen Ihnen keine
CGI-Scripts zur Verfügung, Sie möchten aber das mailto vermeiden.
Wer keinen unbeschränkten Zugang zu einem Server hat und auf diesem die
Eingabedaten aus Formularen verarbeiten kann, lässt sie sich als E-Mail zusenden,
um sie auf dem lokalen Rechner auszuwerten. Das erledigen meist fertige CGIScripts,
wie sie inzwischen auch Provider wie AOL oder 1&1 zur Verfügung stellen.
Bietet Ihr Provider diesen Service nicht und erlaubt er auch keine eigenen CGIs,
können Sie auf einen Formular- Maildienst zurückgreifen. Empfehlenswert
und für private Seiten kostenlos ist Formmailer (www . formmailer . com). Nach
der Anmeldung setzen Sie Formmailer als URL im action-Attribut ein und fügen ein
verstecktes Feld in Ihr Formular ein, dessen genauen Quellcode Formmailer Ihnen
mitteilt:
<form action="http://send.formmailer.
com/" method="post">
....
<input type="Hidden" ID="formmailer"
value="12345">
....
</form>
-
Formulare gestalten mit Bereichen
Zusammengehörige Felder in einem Formular fassen Sie mit dem Tag <fieldset> zusammen. Moderne Browser zeichnen einen Rahmen um diese Elemente.
Größere Formulare werden schnell unübersichtlich. Gruppieren Sie zusammengehörige Felder wie beispielsweise Adressangaben mit Bereichen und Überschriften. Moderne Browser umgeben den Bereich mit einem Rahmen, die Platzierung der Überschrift übernimmt ebenfalls der Browser. Schematisch sieht das so aus:
<form>
<fieldset>
<legend align="left">Ihre
Adresse</legend>
Vorname: <input type="text" size="45"
ID="vorname">
... </fieldset> </form>
Die Definition eines Bereichs beginnt im Formularbereich mit <fieldset> (field = Bereich, set = justieren). Alle Kontrollelemente und sonstigen HTML-Tags wie Tabellen oder Bilder bis zum abschließenden </fieldset> gehören zu diesem Bereich. Innerhalb des <fieldset>-Tags geben Sie optional mit <legend>...</legend> eine Überschrift an. Das Tag muss unmittelbar auf <fieldset> folgen. Der Text zwischen Anfang- und Endtag dient als Überschrift, Sie können ihn mit HTMLTags nach Wunsch formatieren. Die aktuellen Browser unterbrechen für die Überschrift die Rahmenlinie. Über das Attribut align richten Sie die Bereichsüberschrift aus, es sind folgende Werte erlaubt: top (links oben), bottom (links unten), left (links), right (rechts). Allerdings unterstützen nicht alle Browser alle Werte. Wenn Sie blinde Tabellen und <fieldset>-Bereiche gleichzeitig einsetzen, sollten Sie Vorsicht walten lassen. Achten Sie beim Verschachteln darauf, dass eine Tabelle immer komplett zwischen <fieldset> und </fieldset> eingeschlossen ist. Es ist nicht möglich, nur Teile einer Tabelle als Bereich zu markieren. Der Internet Explorer zieht den Rahmen dann automatisch um die ganze Tabelle.
-
Formulare gezielt absenden
Formulare können an beliebige Zielfenster versandt werden und die Rückgabeseite darin darstellen.
Üblicherweise werden die Rückgabeseiten von Formularen im gleichen Fenster angezeigt, in dem sich das Formular beim Absenden befand. Mit dem optionalen Attribut TARGET im einleitenden Formularelement können Sie auch andere Zielfenster für die Rückgabeseite bestimmen. Nehmen wir an, Ihre Seiten sind in drei Frames unterteilt: einen linken Navigations-Frame und einen horizontal zweigeteilten Frame auf der rechten Seite. Ein Formular wird jetzt im oberen rechten Frame untergebracht, und die Antwort soll im unteren rechten Frame ausgegeben werden. Dies erreichen Sie mit der folgenden Anweisung im einleitenden
Formular-Tag:
<FORM ACTION=
"/cgi-bin/
test.cgi" TARGET=
"name_des_
zielframes">
Dieses Beispiel könnte das Interface für eine Suchmaschine darstellen, bei der die Ergebnisse getrennt vom Eingabeformular ausgegeben werden sollen. Für das TARGETAttribut können Sie alle erlaubten Werte (zum Beispiel _blank für ein neues Browser-Fenster) sowie gültige Frame-Namen verwenden. Falls Sie einen unbekannten Namen angegeben haben, öffnet sich standardmäßig ein neues Browser-Fenster für die Ausgabeseite.
-
Formularelemente deaktivieren
Deaktivieren Sie ganz einfach nicht benötigte Formularelemente, die dann grau erscheinen.
Oftmals erfordert es das Webseitendesign, dass vorhandene Formularfelder schlichtweg deaktiviert werden müssen, um Benutzereingaben an dieser Stelle z.B. in Abhängigkeit von Optionen zu verhindern. Anstatt diese Elemente aus dem Formular zu entfernen, können Sie ein wenig bekanntes Attribut im Tag benutzen. Vergeben Sie dafür im betroffenen HTML-Elementetag das Attribut disabled, wie das Beispiel zeigt:
<p><input type="radio" disabled ID="rb_option5" value="rboption5">Suchfunktion deaktivieren</p>
Sobald der Parser das Attribut disabled erkennt, stellt die Rendering-Engine das Formularelement ausgegraut dar und sperrt es für Benutzereingaben. Bei dynamisch erzeugten Formularen kann das PHP-Script die Abhängigkeiten prüfen und bei Bedarf die HTMLZeile mit dem Attribut entsprechend ausgeben.
-
Formularvorgaben ausblenden
Helfen Sie Ihren Besuchern beim Ausfüllen von Formularen mit vorgegebenen Texten. Ein kleines Skript sorgt dafür, dass diese Vorgabewerte beim Anklicken des Eingabefeldes verschwinden. Achten Sie bei der Eingabe auf die einfachen Anführungszeichen:
<input type="text"
value="Vorgabe"
onFocus="if(this.value=='Vorgabe'
) this.value=''"
onBlur="if(this.value=='')this.va
lue='Vorgabe'">
-
Freigeben oder fixieren
Wenn größere Texte in kleiner Schrift verwendet werden, sollte den Besuchern die Anpassung der Schriftgröße durch die Browsereinstellung offengehalten werden.
Um das Design der Seite zu fixieren, benutzen Designer häufig Stylesheets, die die Schriftgröße durch absolute Punkt-Werte festlegen. Die Folge ist, dass die im Internet Explorer angebotenen Ansicht-Optionen zur Vergrößerung des Schriftgrads nicht zum Zuge kommen, während Text-Zoom bei Mozilla funktioniert. Für die Lesebrillenfraktion, die mit Weitsichtigkeit kämpft, ist dieses ästhetische Diktat oft quälend. Sie sollten deshalb den Besuchern die Vergrößerung der Schriftanzeige auch auf dem IE wenigstens offenhalten. Dazu brauchen Sie bei der Festlegung der Schriftgröße nur mit relativen Größenangaben zu arbeiten, am besten mit der Maßeinheit em, die der Größe der aktuellen Schrift entspricht, aber skalierbar ist, wenn eine andere Ansicht gewählt wird. Die Abbildung zeigt die Auswirkung. Der Quellcode-Auszug zeigt die unterschiedlichen Größenangaben für beide Abschnitte:
<style type="text/css" media="screen">
<!--.fix { font-size: 10pt }
.variabel { font-size: 1em }
--></style>
...
<p class="fix">Schriftgröße
mit einen absoluten Punkt-Wert </p>
<p class="variabel">
Schriftgröße durch einen
relativen Wert angegeben.</p>
-
Generatoren-Vielfalt
Was tun, wenn Sie schnell eine dreidimensionale Überschrift brauchen, ein Stylesheet oder ein Frameset? Nicht immer ist gleich das richtige Tool zur Hand, nicht immer sind alle nötigen Parameter im Gedächtnis präsent. Die Site www . html-php-mysql . de bietet eine komfortable Lösung: Die Rubrik Generatoren sammelt kleine und größere Helfer, die eben diese Probleme im Handumdrehen lösen. Der Link 3D-Generator etwa bietet das Xara 3D Online-Tool. Sie geben den Schriftzug ein, wählen Font und Farbe und speichern dann die frisch gerenderte Grafik so schnell geht das!
-
Grafik-Icons online
Noch schneller und genauer können Sie Favicons direkt auf der Internetseite erzeugen.
Die Adresse, um Favicons zu generieren, lautet www . chami . com/html-kit/services/favicon. Dort klicken Sie zunächst auf die Schaltfläche Durchsuchen... und wählen ein beliebiges Bild aus. Danach betätigen Sie die Schaltfläche Generate Favicon.ico. Es erscheinen zwei neue Schaltflächen auf der Seite: Download FavIcon und Test in Browser. Links daneben, unter Preview: bekommen Sie bereits eine Vorschau Ihres Favicons zu sehen: das normale und ein animiertes. Mit der Schaltfläche Test in Browser können Sie sich ebenfalls eine Vorschau zeigen lassen. Um das Favicon auf Ihre Festplatte zu speichern, klicken Sie auf Download Favicon bzw. falls Sie sich auf der Testseite befinden auf den Link Download favicon files. Außer dem Favicon (favicon.ico) erhalten Sie noch ein kleines (16 x 16 Pixel) Sinnbild im PNG-Format, eine animierte GIF-Datei (animated_favicon1.gif) sowie eine ReadmeDatei. Diese Daten finden Sie im Ordner Extra. Falls Sie das animierte GIF auf Ihrer Homepage verwenden wollen, müssen Sie es mit dem Favicon zusammen hochladen und beide im Head-Bereich Ihrer HTML-Seite einbinden:
<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon1.gif" type="image/gif">
-
Grafik-SmartTags im Internet Explorer 6 deaktivieren
Sobald der Besucher mit dem IE6 den Mauszeiger über eine Grafik bewegt, taucht ein buntes Kontextmenü auf, das dem Surfer Befehle wie Drucken und Speichern bereitstellt. Kann man dies deaktivieren?
Auch wenn die mit dem Internet Explorer 6 im Web eingeführten Smart-Tags recht hilfreich sind, wirken sich die permanenten Einblendungen negativ auf das Erscheinungsbild grafisch anspruchsvoller Webseiten aus. Nur gut, dass man dieses Feature mit einer einzigen Codezeile aushebeln kann. Erweitern Sie einfach den <head>-Bereich Ihrer Seite um die Zeile
<>META HTTP-EQUIV="imagetoolbar"
CONTENT="no">
schon hat der Spuk ein Ende und Ihre in mühsamer Kleinarbeit programmierte Homepage wird nicht mehr durch Kontextmenüs verunstaltet. Möchten Sie hingegen nur bestimmte Grafiken vor SmartTags schützen, müssen Sie jeden einzelnen Bildverweis mit der Option GALLERYIMG="no" explizit auszeichnen. Bei einer Grafik namens bild.jpg sieht die entsprechende Zeile so aus:
<>img src="bild.jpg"
GALLERYIMG="no">
-
Grafiken auf Webseiten platzieren
Ihre erste Homepage entsteht. Sie soll Text und Bilder enthalten. So gehen Sie vor, um Bilder richtig in den Text zu integrieren.
Browser behandeln Bilder wie Zeichen. Ebenso wie eine Textverarbeitung bei einem besonders großen Zeichen den Zeilenabstand erhöht, schaffen auch Browser Raum für das Bild, statt den Text um das Bild fließen zu lassen. Abhilfe schafft das Attribut align. Es sorgt bei den Werten left und right dafür, dass Text um das Bild herumfließt. Dabei sollten Sie zwei weitere Attribute, vspace und hspace, einsetzen. Sie bewirken, dass ein ausreichender Abstand zwischen Bild und Text eingehalten wird:
<img src="bild.gif" width="300"
height="200"
align="right" vspace="10px"
hspace="10px">
-
Grafiken einbetten
Wenn sich Text gleichsam um die Grafik schmiegt, haben Sie Ihr Bild mit einem Alignment versehen.
Grafiken, kombiniert mit Text, sollten stets ein Alignment aufweisen. Anderenfalls steht die erste Textzeile neben der Grafik und der Resttext unter ihr. Verwenden Sie wahlweise eines der Attribute ALIGN=Left oder ALIGN= Right: So betten Sie Ihre Grafik links- oder rechtsbündig ein, damit Texte Bilder umfließen.
Die Grafik positionieren Sie am besten mit WIDTH- und HEIGHT-Attributen. Der Browser lädt bereits den korrekt formatierten Text, weil er "weiß", wo eine Grafik steht. Wenn Sie Ihre Grafik zudem mit dem ALT-Attribut ausstatten, definieren Sie damit einen Text, den Sie anstelle der Grafik zuvor anzeigen lassen. Mit folgendem Tag binden Katzenfreunde ihren Vierbeiner kunstgerecht in Fließtext ein:
<IMG SRC="katze.gif" WIDTH=200 HEIGHT=200 ALT="Meine kleine Katze">
-
Grafiken ohne Hintergrund
Eine durchscheinende Grafik läßt Sie den Hintergrund sehen.
Die meisten Grafiken im Internet sind nicht schlicht quadratisch, sondern lassen den Hintergrund durchscheinen. Dies ist eine Besonderheit des Formats gif. Eine gif-Datei kann neben der Grafik noch Steuerbefehle enthalten, und einer davon definiert eine bestimmte Farbe als nicht vorhanden. Der Browser ignoriert nun alle Pixel der Grafik in dieser Farbe bei der Ausgabe. Mit diesen "transparent GIFs" arbeiten auch viele Shareware-Programme. Eines der bekanntesten ist Paint Shop Pro, Sie finden es unter der Adresse
www . jasc.com/pspdl . html
-
Grafische AbsatzFormatierungen
Um ein Objekt mit Rahmen auf einer Webseite auszuschmücken, benötigen Sie nur einige wenige HTML-Befehle.
Wenn Sie Absätze, Textpassagen und Grafiken auf der Webseite besonders hervorheben möchten, bieten sich einfache Rahmen an. Größe, Form, Abstände und Farbe lassen sich dabei beliebig auf Ihr Design hin anpassen. Mit dem HTML-Tag <fieldset> erzeugen Sie normalerweise Gruppen von Feldern in Formularen, können das Tag aber auch zweckentfremden. In Verbindung mit dem HTML-Tag <legend> lassen sich nun interessante Rahmungen mit Überschriften erzeugen. Hierzu benötigen Sie nur den einfachen Quelltext für einen ersten Textrahmen:
<fieldset style="border:1px solid blue"> Von einer Legende umschlossener Text: Damit erscheint ein einfacher Rahmen um den Text mit Überschrift, Farben, Styles frei zu setzen.
<legend align="left" style="color:blue;">
<b>Legendentext</b>
</legend>
</fieldset>
Anstelle von Text und Absätzen können Sie Bildelemente einfügen und Rahmen. Dabei sollten Sie für die Seitenbegrenzungen aber die HTML-Tags vspace, hspace zur Formatierung ausprobieren.
-
Größe von Frames
In einem Frameset müssen Sie bei der Größenangabe für Frames genau aufpassen, sonst erhalten Sie nicht das gewünschte Ergebnis.
Mit einem Frameset teilen Sie das Browserfenster in mehrere unabhängige Bereiche auf. Die Definition sieht zum Beispiel so aus:
<frameset cols="30%,400,*,2*">
... Definition der Frames
</frameset>
Das Attribut cols teilt das Browserfenster senkrecht in ein einzelne Frames. Als Attributwert geben Sie die Breite der einzelnen Frames durch Komma getrennt an. Dabei gibt es verschiedene Varianten:
Ein Zahlenwert ohne Zusatz gibt die Breite/Höhe des Frames in Pixel an.
Ein Prozentwert (mit nachgestelltem %) weist dem Frame den entsprechenden Anteil an der gesamten Fensterbreite zu. Es spielt keine Rolle, wie viel Platz für andere Frames reserviert ist.
Anders als Prozentwerte beziehen sich relative Angaben mit dem Sternzeichen (*) auf den Platz, der abzüglich anderer Frames noch zur Verfügung steht. Ein Sternzeichen steht für den "restlichen Platz", der noch zur Verfügung steht. Geben Sie bei mehreren Frames einen Stern an, so teilen sich diese beiden Frames den Platz gleichmäßig auf (je die Hälfte). Die Aufteilung lässt sich mit einer vorangestellten Zahl noch beeinflussen: cols="1*, 3*, 1*" erzeugt beispielsweise drei Spalten. Zusammen gibt es fünf Einheiten zu verteilen (1+3+1 = 5). Der erste Frame erhält 1/5 (=20 Prozent), der zweite Frame 3/5 (=60 Prozent) und der Dritte wieder 1/5 (20 Prozent). Das Beispiel oben kombiniert alle drei Varianten und erzeugt damit vier Frames. Wenn Sie dieses Frameset in einem Browserfenster mit 1000 Pixel Breite darstellen ergeben sich folgende Frame-Ausmaße: Der erste Frame nimmt 30 Prozent des gesamten Fensters ein, also 300 Pixel. Der zweite Frame hat eine feste Breite von 400 Pixel. Das macht zusammen 700 Pixel, es bleiben also noch 300 Pixel übrig. Diese teilen sich die beiden restlichen Frames im Verhältnis 1:2 (*, 2*). Der dritte Frame ist 100 Pixel breit, der vierte Frame 200 Pixel. Wenn Sie das Browserfenster verkleinern verschwinden zunächst die Frames 3 und 4, denn der restliche freie Platz schrumpft auf 0. Verkleinern Sie das Browserfenster weiter wird der erste Frame immer kleiner (30 Prozent der Gesamtbreite). Der zweite Frame mit 400 Pixel bleibt dagegen erhalten. Erst wenn auch der erste Frame gar nicht mehr zu sehen ist und das Browserfens-ter immer schmäler wird verkleinert der Browser auch den zweiten Frame.
-
Gruppierte Auswahllisten
In einer Auswahlliste im Formular gruppieren Sie die Einträge mit Zwischenüberschriften.
Lange Auswahllisten in Formularen mit vielen Einträgen sind ziemlich unübersichtlich. Denn nicht immer ist eine alphabetische Sortierung der Einträge sinnvoll. Fassen Sie Listeneinträge zu Gruppen zusammen. Dazu markieren Sie eine Gruppe von <option>-Tags mit dem TagPaar <optgroup> und </optgroup>:
<form action="..." method="post">
Ihr Bundesland:<br>
etc.
</optgroup>
Das einleitende <optgroup> beginnt eine Gruppe, die bis </optgroup> reicht. Im einleitenden Tag legt das Attribut label den Namen für die Gruppe fest. Beachten Sie, dass <optgroup> nur innerhalb von <select> vorkommen darf. Mehrfach verschachtelte Gruppen sind nicht erlaubt. Laut HTML 4.0 soll die Darstellung im Browser wie ein typisches Menü mit Untermenüs aufgebaut sein. Klickt der Anwender einen Eintrag an, so öffnet sich ein Untermenü. Dieses Verhalten unterstützt kein aktueller Browser.
-
Gut aussehen im Text-Modus
Trotz neuer Browser-Generationen und schneller Internet-Zugänge surfen immer noch viele Menschen im Text-only-Modus. Wie kann man da gut aussehen?
Der wohl ultimative Test einer gut aufgebauten und programmierten Webseite ist der Text-only-Modus. In diesem Fall hat der Nutzer sämtliche Grafiken und Bilder abgeschaltet. Auch JavaScripts funktionieren dann meist nicht. In diesem Fall noch eine gut aussehende Website zu präsentieren, ist schwierig, aber möglich. Sie sollten dabei folgende Dinge berücksichtigen:
Wenn Sie Bilder auf Ihren Seiten verwenden, geben Sie im IMG-Tag immer die absoluten Größen an. Jeder Browser setzt dann einen entsprechend großen, schwarz umrandeten, leeren Kasten an die entsprechende Stelle. Außerdem sollten Sie ALT-Tags verwenden, um einen Alternativ-Text anzuzeigen. Dann erfährt der Nutzer zumindest, was auf diesem Bild zu sehen wäre. Ist sein Browser grundsätzlich grafikfähig, kann er bei Interesse das Bild sogar anzeigen lassen. Imagemaps sollten Sie dagegen weitgehend vermeiden oder durch alternative Links ergänzen. Hintergrundbilder werden ebenfalls nicht angezeigt. Um das einfache Grau zu vermeiden, können Sie eine Hintergrundfarbe verwenden. Sie sollte aus der 16-Farben-Palette stammen, da der Browser sie sonst möglicherweise dithert, also ein unansehnliches Streuraster einfügt. Problematisch ist nur, dass diese 16 Farben oft sehr kräftig sind und das Lesen des Textes stören. Hier sollten Sie mit entsprechenden Kontrasten arbeiten, ohne dass dem Leser dabei die Augen schmerzen. Kommen Sie zu keinem guten Ergebnis, empfiehlt sich die Hintergrundfarbe Weiß. Bei eingeschalteter Grafik-Anzeige stört die Hintergrundfarbe das Hintergrundbild nicht.
Überraschenderweise treten im Textonly-Modus auch bei Tabellen häufig Fehler auf, da diese nicht sauber programmiert sind. Während vor allem der Internet Explorer bei Tabellen viele Programmierfehler verzeiht, geben sich andere Browser weit weniger flexibel. Daher sollten Sie Tabellen zumindest im Netscape-Browser prüfen, der die Regeln etwas enger auslegt. Und selbst im IE können Tabellen furchtbar aussehen, wenn Bilder nicht angezeigt werden und sich dadurch die Aufteilung der Seite verschiebt.
-
Hello Engines!: Anmeldefilter setzen
Sie wollen Ihre Homepage bei Suchmaschinen anmelden, wissen aber nicht, wo und wie Sie anfangen sollen.
Webpromoter-Programme melden Ihre Homepage automatisch bei Hunderten von Suchmaschinen weltweit auf einen Rutsch an. Doch nicht immer ist es erstrebenswert, überall rund um den Globus registriert zu sein: Werbemails, unerwünschte Newsletter etc. können dann zur Plage werden. In Hello Engines! setzen Sie einfach Suchdienst-Filter, um ein wahlloses Anmelden zu vermeiden. Dazu wählen Sie der Reihe nach Suchdienste Auto und Filter aktivieren. Im sich öffnenden Fenster finden Sie alle notwendigen Schalter und die zugehörigen Beschreibungen.
-
Hilfreiche Hinweistexte
Alle HTML-Tags lassen sich mit Titel-Informationen versehen, die als Tooltipp angezeigt oder vorgelesen werden.
Grafiken werden häufig mit dem Title-Tag ergänzt. Damit werden zusätzliche Informationen beim Drüberfahren mit der Maus als Tooltip angezeigt. Doch auch Links, Tabellen oder Formulare lassen sich damit auszeichnen. Diese Hilfstexte erleichtern die Übersicht wesentlich. Außerdem werden diese Texte berücksichtigt, wenn sich Blinde oder Sehbehinderte eine Seite über die Sprachausgabe eines Browsers vorlesen lassen. Beispiele:
<body>
Weitere Informationen finden Sie
auf unseren <a
href="http://www.prisodi.de"
title="Link auf die Seiten des
Prisodi-Accounts">Internet-Seiten</a>.
<p>
<table width="90%" border="1">
<tr title="Tabelle mit Verlagsinformationen">
<td width="40%">WEKA-Verlag</td>
<td width="60%">Prisodi</td>
</tr>
</table>
<form ID="Formular1"
title="Formular zur Auswahl der
Informationen">
<select ID="roll" size="3">
<option>Bilder
<option>Downloads
<option>Freunde
</select>
</form>
</body>
-
Höhe einer Tabelle festlegen
Mit einer unsichtbaren Grafik erzwingen Sie die Höhe einer Tabelle in allen Browsern.
Während Tabellen mit Breitenangaben, Attribut width, zurechtkommen, wird height, um die Höhe festzulegen, nicht allgemein unterstützt. Wenn Sie für Layoutzwecke eine Tabelle mit einer bestimmten Höhe benötigen, verwenden Sie einen einfachen Trick: Erstellen Sie eine GIF-Datei mit einem transparenten Hintergrund. Sie braucht nur eine Größe von einem Pixel zu haben. Diese fügen Sie in die Tabelle ein und skalieren sie mit den Größen- Attributen auf die gewünschte Höhe. Soll das Layout mehrere Tabellenzeilen enthalten, sorgen Sie mit rowspan dafür, dass die Zelle mit der Grafik über alle Zeilen ausgedehnt wird:
<table><tr>
<td rowspan="2"><img
src="leer.gif" width="1"
height="100"></td>
<td>... Hier folgt der eigentliche</
td>
</tr>
<tr><td> Inhalt der Tabelle ...
</td></tr>
</table>
-
Homepage anders gesehen
Betrachten Sie Ihre eigene Homepage mit den Augen eines Farbenblinden. Geben Sie dazu einfach Ihre URL in das vorgesehene Feld ein und warten Sie ab: , www . vischeck . com/vischeck/vischeckURL . php Der Simulator zeigt Ihnen weitere Beispiele für denkbare Sehbehinderungen und schärft das Bewusstsein für die Notwendigkeit barrierefreier Homepages:
www . absv . de/sbs/sbs_intro . html
-
Homepage in PDF konvertieren
Adobe Acrobat bietet ab Version 4.0 an, einzelnen Webseiten oder komplette Internetpräsenzen zu laden und in ein PDF-Dokument umzuwandeln. Im Dropdownmenü Datei finden Sie die Option Web-Seite öffnen..., Sie werden nach der URL gefragt. Die gewünschte Homepage wird aus dem Internet geladen und konvertiert. Verweise bleiben aktiv.
-
Homepage mit Metasuche
Wollen Sie den Besuchern Ihrer Homepage eine Metasuche zur Verfügung stellen, sollten Sie bei www . avenue-it . com/metasearch/ vorbei schauen. Der vom Anbieter kostenlos zur Verfügung gestellte Service ist mit wenigen Handgriffen in eine bestehende Seite eingebaut und deckt derzeit 59 internationale Suchdienste ab. Im Bereich www . avenueit . com/metasearch/customize . html wählen Sie aus, welche Suchmaschinen Ihre Besucher vorfinden sollen.
-
Homesite: Kleines Spiel gefällig?
Mit dem Editor können Sie nicht nur HTML-Code programmieren, sondern auch spielen.
Falls Sie beim Spiel neue Kräfte sammeln möchten, können Sie dies auch innerhalb der gewohnten Arbeitsumgebun tun. Der Homesite-Hersteller hat in seinem Editor ein so genanntes Osterei untergebracht, das ein nettes Spiel beinhaltet: In Tagmatcher geht es darum, möglichst viele HTML-Tags mit dem Homesite-Symbol zu fangen. Achten Sie dabei auf Hindernisse, die Ihnen Ihr Vorhaben erschweren. Zum Aktivieren gehen Sie folgendermaßen vor:
Öffnen Sie das Dialogfeld Customize im Menüpunkt Options. Alternativ erreichen Sie die gleiche Aktion mit der Tastenkombination [Shift-F8].
Wählen Sie unter Toolbuttons die Einstellung All (voreingestellt).
Scrollen Sie im dazugehörigen Feld bis zum Ende. Es erscheint ein kleines Ei-Symbol mit dem Titel Easter Egg.
Fügen Sie diesen Button per Drag& Drop Ihrer Toolbar zu, und schließen Sie das Dialogfeld.
Sie können das Spiel jetzt per Klick auf das Eier-Symbol starten.
Diese Erklärung gilt für die englische Version des Editors. Für die deutsche Version müssen Sie die entsprechenden Punkte wählen. Das Spiel beenden Sie mit der [Esc]-Taste.
-
Hotlinking verhindern
Prinzipiell kann jeder auf Elemente Ihrer Seite im Web verlinken.
Um auf eine Ihrer Sites zu verlinken, reicht die Syntax: <img src="http://www . IhreWebseite.de/Pfad/zur/Grafik.jpg">. Dabei generiert das Verfahren Netzverkehr nicht nur auf der Hotlink-Seite, sondern auch auf der Ausgangsseite. Diese Seite stellt ja die verlinkten Bilder, Video- oder Audiodateien tatsächlich bereit. Damit nimmt Ihnen der Hotlinker Bandbreite. Sie verhindern das Hotlinking durch einen Eintrag in der .htaccess-Datei:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?meineSeite.de?(/).*$ [NC]
RewriteRule .*\.(gif|jpg|jpeg|bmp)$ http://www . meinSeite . de [R,NC]
Die Angabe meineSeite.de dient als Platzhalter für Ihre Domain. In Zeile vier können Sie einen Redirect wie zu Ihrer Einstiegsseite festlegen. Falls Sie darauf verzichten, schreiben Sie anstelle der URL einen Bindestrich und ersetzen in den eckigen Klammern das R durch ein F wie RewriteRule .*\.(gif|jpg|jpeg| bmp)$ [F,NC]. Zeile vier trennt per Pipe-Symbol alle Dateitypen, die Sie schützen möchten. Tipp: Füllen Sie einfach auf www . htmlbasix . com/ disablehotlinking . shtml das Formular aus, um sich den Code generieren zu lassen. Diesen kopieren Sie in Ihre .htaccess-Datei. So prüfen Sie, ob Ihr Anti-Hotlinking-Mechanismus funktioniert. Im Fehlerfall können Sie auf Varianten zurückgreifen. Die meisten Provider gestatten es, auf .htaccess-Dateien zuzugreifen. Sollten Sie im Rootverzeichnis nicht auf .htaccess zugreifen dürfen, können Sie Unterverzeichnisse schützen. Das Script verhindert die Anzeige Ihre Seite im Frame einer anderen. Den Code von Tipp_6.txt (Heft-DVD) fügen Sie in den Head-Bereich ein.
-
htaccess: Hot-Linking verhindern
Die vielseitige Datei htaccess kann auch die Inhalte Ihrer Website schützen.
Die Datei .htaccess bietet dem Webmaster Vieles: So lassen sich die eigenen Dateien vor dem Verlinken durch externe Websites schützen, wenn Bildmaterial auf Ihrer Website in fremde Websites eingebunden wird. Der Eintrag in der Datei .htaccess lautet:
RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?die_eigene_adresse.de /.*$ [NC] RewriteRule \.(gif|jpg)$ - [F]
Der Webserver prüft, ob gif- und jpg-Dateien aus der eigenen Domain angefordert werden. Sollte ein fremder Request erfolgen, wird ein Datei-nicht-gefunden-Fehler erzeugt. Sie können diesen Schutz verschärfen, indem Sie dem Unberechtigten einen Hinweis auf Ihre Site schicken. Modifizieren Sie die .htaccess-Datei:
RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?die_eigene_adresse.de /.*$ [NC] RewriteRule \.(gif|jpg)$ http://www.die_eigene_adresse.de/warnung.gif [R,L]
-
HTML 4.0 am Ende
XML (oder XHTML) ist dabei, HTML abzulösen. XHTML ist XML-gerechtes HTML, ein "Nachbau" von HTML 4.0. Sie müssen in Zukunft Ihre Webseiten nur etwas genauer und mit einer leicht veränderten Syntax schreiben (www . w3 . org/Consortium/Offices/Germa ny/Misc/XML-in-10-points.html). Bei reinen XML-Daten hat ein Browser keine Anhaltspunkte für die Darstellung. Es fehlen also Maßgaben für das Ausgabemedium, wie Computermonitor, Drucker, Lautsprecher oder Fernseher. Auch fehlen Formatierungsangaben für Farben, Schriften und Größen. Mit einer Stil-Sprache werden Formatierungen für das jeweilige Ausgabemedium erzeugt - für Homepages Cascading Style Sheets (CSS).
-
HTML Tidy
Mit dem Programm HTML Tidy können Sie den Quellcode Ihrer Homepage analysieren
und auf Wunsch korrigieren lassen.
Das Werkzeug HTML Tidy hat Dave Raggett, ein Mitarbeiter des W3C-Konsortiums, entwickelt.
Sie können die neueste Version samt Dokumentation unter http://tidy.sourceforge . net
kostenlos laden. Die deutschsprachige Seite finden Sie unter
www . kronostitan.privat.t-online . de/tidy.sourceforge.net/#binaries. Eine exakte
Beschreibung der Funktionsweise von HTML Tidy erhalten Sie auch unter
www . kronos-titan.privat.t-online . de/ Raggett/tidy/Overview.html. Windows-Anwendern
steht auf der Seite http://users.rcn . com/ creitzel/tidy.html#tidyui die GUI-Variante
des Programms zur Verfügung. Zum Download klicken Sie unter Tidy UI auf den Link
Download Tidy UI. Starten Sie nach Entpacken des Archivs tidyui.zip die ausführbare
Datei tidyui.exe. Die Benutzeroberfläche ist nahezu selbsterklärend.
HTML Tidy korrigiert Syntaxfehler und konvertiert den Quellcode Ihrer Webseite in ein
gut lesbares Format, welches den XHTML-Spezifikation genügt. Betätigen Sie
dazu beim GUI-Programm den Button Replace, beim Konsolenprogramm ist es der
Schalter -m. Legen Sie zuvor eine Sicherheitskopie der Datei an, die Sie in das
XHTML-Format umwandeln möchten. Das Ganze funktioniert auch bei HTML-Dateien,
die Sie mit WYSIWYG (What you see is what you get)-Editoren generiert haben.
Übrigens können Sie HTML Tidy z. B. auch direkt in FrontPage integrieren.
Eine Beschreibung dazu finden Sie unter http://schneegans . de/frontpage/vba/tidy.
Des Weiteren können Sie HTML Tidy einsetzen, um Ihre Seiten sehbehinderten Menschen
zugänglich zu machen.
-
HTML-Editor in Java
Kostenlos, leistungsfähig, komplett in Java geschrieben und somit plattformübergreifend - dass sind die Merkmale des Freeware- HTML-Editors Arachnophilia 5.2 Build 1959. Das Tool beherrscht die farbige Codeauszeichnung, unterstützt das Kontextmenü der rechten Maustaste und verfügt über einen integrierten FTP-Client zum Upload der Homepage. Zudem erlaubt es der Editor, dass Sie die Benutzeroberfläche an Ihre Wünsche anpassen.
-
Hyperlink mit Kommentar
Ergänzende Erläuterungen zu Hyperlinks helfen dem Besucher wie Alt-Tag bei Bildern.
Bei Bildern kennt sie jeder. Es gehört zum guten Programmierstil, sie auch zu nutzen: die Texte in Alt-Tags. Ursprünglich waren sie dazu gedacht, den Surfer bei abgeschalteter oder nicht vorhandener Bilddarstellung zumindest über den Inhalt des Bildes zu informieren. Doch auch Hyperlinks können Sie um eine entsprechende Zusatzinformation bereichern. Diese sieht der Besucher Ihrer Site, sobald er wie bei den Alt-Texten der Bilder einen Hyperlink mit dem Mauszeiger überfährt. Der nötige Code lautet:
<a href= "http://www.meine_addresse.de" title= "Geben Sie hier den Informationstext wie im Bild unten ein">Zu meiner Homepage</a>
Obgleich dieser Tipp denkbar einfach zu verwirklichen ist, nutzen bisher wenige Betreiber einer Site diesen kleinen, hilfreichen Fingerzeig.
-
Hyperlink-Ziel für eine Site
Zahlreiche Websites basieren auf Framesets, wobei in separatem Frame das Dokument mit der Navigationsleiste geladen wird.
Sie erleichtern sich aelbst die Programmierung, wenn Sie das Zielfenster nicht jedes Mal neu angeben müssen. In der üblichen Syntax referenzieren Sie den Link mit folgender Befehlszeile:
<a href="http://www . bacchuswelt . de" target="framename">
Nun müssen Sie für jeden einzelnen Hyperlink den Ziel-Frame (target="framename") nicht mehr separat schreiben. Es genügt, wenn Sie diesen target einmal festgelegt haben. Fügen Sie hierzu das base-Tag in den Kopf des Quelltextes ein: <base target="framename">. Geben Sie als target entweder den entsprechenden individuellen Frame-Namen an oder benutzen Sie ein so genanntes generisches Ziel wie _blank. Damit öffnet sich ein leeres Browserfenster oder mit _top das übergeordnete Hauptfenster, das sich über alle Frames öffnet. Das base-Tag interpretiert der Browser nun automatisch für alle Hyperlink-Tags. Soll das Zieldokument eines Hyperlink nun ausnahmsweise in einem anderen Frame geöffnet werden, legen Sie dieses wie gewohnt im Tag <a href> fest.
-
Hyperlinks auf bestimmte Stellen
So verbessern Sie den Bedienkomfort für Besucher Ihrer Homepage.
Sie präsentieren auf Ihrer Homepage ein sehr langes Dokument und möchten erreichen, dass Besucher über ein Inhaltsverzeichnis zu einzelnen Inhaltspunkten bequem über Hyperlinks springen können. Das erhöht die Übersicht und erleichtert dem Besucher die Navigation. Dazu benötigen Sie ein Inhaltsverzeichnis mit Sprungbefehlen und im Text Sprungmarken, die die Ziele darstellen. Benutzen Sie Rahmen, setzen Sie den target-Befehl auf self. Schreiben Sie in Ihren Quelltext zuerst einen Sprungbefehl, beispielsweise:
<a href="#Kapitelueberrschift" target="_self">nach oben</a>
Definieren Sie das Ziel, indem Sie eine Marke setzen, zu der gesprungen werden soll:
<a ID="#Kapitelueberschrift"></
a>
An der Raute # erkennt der Browser den textinternen Link.
-
ICQ-Status auf Homepage
Wer Mitglied in der weltweit größten Instant-Messaging-Community ICQ ist, möchte den Besuchern seiner Webseite mitteilen, ob er momentan online ist und wie seine Kennung lautet. Am einfachsten lassen sich diese Informationen einbauen, indem Sie vom Hersteller kostenlos zur Verfügung gestellte Elemente einsetzen. Auf der Webseite www . icq . com/panels/ finden Sie eine reichhaltige Auswahl an Bannern jeglicher Art; der zur Einbindung benötigte Quellcode wird direkt auf der Seite erzeugt. Sie müssen diesen also nur noch in Ihre Webseite kopieren. Wer es nicht ganz so auffällig will, besucht www . icq . com/features/web/indicator.html, entscheidet sich für eine von zehn Statusanzeigen und fügt den online kompilierten Code in seine Homepage ein.
-
IDE: Der richtige Header
Mit der Hilfsdatei sysincl.dat können Sie Ihre Dependency-Liste verkleinern.
VC++ kümmert sich selbständig darum, welche Dateien von welchen Headern abhängig sind. Dabei ist es aber oft nicht wünschenswert, wenn System-Includes oder auch eigene, zu Libraries gehörende Header-Dateien in die Liste der abhängigen Dateien aufgenommen werden. Aus diesem Grund existiert die Datei sysincl.dat, die Sie in Ihrem VC-Verzeichnis finden. Alle in dieser Datei aufgelisteten Dateien werden beim Erzeugen der Dependency-Liste nicht berücksichtigt. Hier können Sie also auch Ihre "unveränderlichen" Header-Dateien eintragen.
-
IDE: Die Qual der Wahl
Wenn Sie den richtigen Editor festlegen, sind Schlüsselworte farbig gekennzeichnet.
VC++ verwendet die zur Verfügung stehenden Editoren und auch das Syntax-Highlighting in Abhängigkeit von der Dateierweiterung. Das erschwert die Arbeit mit "modernen" C++-Headern, denn diese Dateien haben keine Dateierweiterung. Also gibt es auch kein Syntax-Highlighting.
Die Lösung ist die Datei langext.dat aus Ihrem VC++-Verzeichnis. Mit ihr können Sie eine Datei anhand ihres Namens als zu einer bestimmten Sprache zugehörig markieren. Wenn Sie hier Ihre C++-Header-Dateien eintragen, erkennt VC++, daß es sich um einen C++-Header handelt, und liefert Ihnen die richtigen Farben im Editor.
-
Im Text springen
Große HTML-Dokumente überblicken Sie besser mit internen Sprungzielen.
Größere HTML-Seiten sind oft mit einem eigenen Inhaltsverzeichnis versehen. Dieses besteht aus Hyperlinks, die auf die eigene Seite verweisen. Für derartige interne Links nehmen Sie am besten den Tag <A ID=>. Er definiert ein internes Sprungziel. Der dort angegebene Name ist frei wählbar. Der Hyperlink verweist auf diesen Tag mit der Pseudo-URL #name:
<A HREF="#Teil2">Zu Teil 2</A>
Teil 1: Wie zum HTML-Dokument?
...
<A ID="Teil2">
Teil 2: Wie werden Sie die Surfer wieder los?
Sie können solch einen Namen direkt an eine URL anfügen. Haben Sie das Inhaltsverzeichnis auf Ihrer Hauptseite, verzweigen Sie direkt auf Teil 2 Ihrer Abhandlung mit folgendem Link:
<A HREF="abhandlung.html#Teil2">Zu Teil 2</A>
-
Image Maps zweckentfremdet!
Dass eine seit den Anfängen des Webs bekannte HTMLFunktion durch das Weglassen von Informationen in neuem Glanz erstrahlen kann, zeigen Image Maps.
Image Maps dienen in erster Linie dazu, weiterführende Links in einem Bild unterzubringen und so der Webseite mit geringem Aufwand einen multimedialen Touch zu verleihen. Diese verweissensitiven Grafiken lassen sich auch dazu verwenden, um Bilder exakt zu beschreiben. Der Trick: Sie löschen die Angabe href und erweitern den jeweiligen area-Bereich um ein title-Tag, in dem der Beschreibungstext steht. Auf diese Weise lassen sich Gruppenfotos beschreiben, da der Infotext in einer Pop-up-Box angezeigt wird. Zunächst müssen Sie mit einem Shareware-Programm wie CoffeeCup Image Mapper++ 3.0 (www . coffeecup . com) oder Map Edit 2.64 (www.boutell . com/ mapedit/) die einzelnen Bereiche der Grafik definieren. Anschließend öffnen Sie die entsprechende HTML-Datei und werfen einen Blick auf den Code im Bereich <map>.
<map ID="4marx">
<area shape=rect coords=
"37,113,274,482" href="">
<area shape=rect coords=
"282,118,484,483" href="">
<area shape=rect coords=
"493,62,726,481" href="">
<area shape=rect coords=
"735,82,971,481" href="">
</map>
Die Textinformationen werden nun durch den Befehl title definiert, die Länge des Infotextes ist nicht begrenzt:
<map ID="4marx">
<area shape=rect coords=
"37,113,274,482" title="Das ist
Groucho Marx, der Ideengeber der
legendären Marx Brothers" >
<area shape=rect coords=
"282,118,484,483" title="Chico
Marx mimte in nahezu jedem Film
den Hinterwäldler">
<area shape=rect coords=
"493,62,726,481" title="Auch wenn
er nie zu Wort kam - Harpo Marx
war weder taub noch stumm">
<area shape=rect coords=
"735,82,971,481" title="Zeppo
Marx spielte immer nur die Rolle
des Schönlings">
</map>
-
Impressum-Generator im Web
Bei vielen Website-Betreibern herrscht Unsicherheit darüber, was in das Impressum gehört und was nicht. Ein Muster-Impressum liefert Ihnen der Impressum-Assistent unter www . digi-info . de/de/netlaw/webimpressum/ index.php Geben Sie hier beispielsweise an, ob Ihr Webauftritt journalistisch-redaktionelle Inhalte enthält und wie Ihre Berufsbezeichnung lautet. Anschließend generiert der Assistent ein Musterimpressum, das Sie einfach auf Ihre Seite übernehmen können und mit Ihren Angaben ersetzen. Auf Wunsch wird auch der Haftungsausschluss für externe Hyperlinks generiert.
-
Individuelle Fehlermeldungen
Erweitern Sie Ihre Homepage um individuelle Fehlermeldungen für ungültige Web-Adressen.
Wenn Sie eine falsche Adresse im Browser eintippen, erscheint eine Webseite mit der Fehlermeldung 404: Datei nicht gefunden (oder ähnlich). Diese Meldung erzeugt im Regelfall der Web-Server. Wenn Sie Webspace mit eigener Domain haben, können Sie diese Fehlerseite nach Belieben ändern. Dazu erzeugen Sie die Datei .htaccess mit einigen Befehlen. Die Textdatei muss nur eine Zeile enthalten: ErrorDocument 404 /fehler404.htm Anschließend gestalten Sie noch die Fehlerseite und kopieren Sie unter dem Namen fehler404. htm in das Hauptverzeichnis auf dem Web-Server.
-
Infos über verschiedene Browserversionen
Wer seine Homepage plattformübergreifend programmiert, muss über die Eigenarten der diversen Browsertypen und -versionen Bescheid wissen. Als auskunftsfreudigste Referenz gilt hier Webmonkey (hotwired.lycos. com/webmonkey/reference/browser_chart). Die Tabellen geben etwa Aufschluss darüber, welche Surfhilfen Standards wie DHTML, XML und Gif 89a unterstützen. Und das nicht nur für Windows. Auch Browser der Betriebssysteme Mac, Linux und BeOS, OS/2 werden abgedeckt.
-
Infos zu Domain-Namen
Ihre Website soll eine eigene Domain bekommen. Das müssen Sie beachten, um Abmahnungen und anderen Ärgernissen aus dem Weg zu gehen.
Wer einen Domain-Namen beantragt, prüft zunächst, ob der ins Auge gefasste Name noch frei ist. Dazu befragen Sie die Webseiten Ihres Providers oder die für .de-Domains zuständige Vergabestelle DENIC (www . denic . de). Welche rechtlichen Fallstricke es bei der Namenswahl gibt und wo Sie im Falle eines Falles juristische Hilfe finden, ist auf der Seite "Domain-Recht" (www.domain- recht . de) zusammengestellt.
-
Inline-Frames externe Inhalte
Framesets in Websites legen fest, an welcher Stelle welches Dokument geladen werden soll.
Inline-Frames übernehmen eine ähnliche Aufgabe, ohne allerdings eine Frameset-Datei zu benötigen. Denn Inline-Frames binden Sie direkt an der gewünschten Stelle des HTML-Dokuments ein. Der Inhalt des Inline-Frames ist ebenfalls in einem separaten, unabhängigen Dokument gespeichert. Großer Vorteil der Inline-Frames ist, dass mehrere Webseiten deren Inhalt gleichzeitig anzeigen können. Aktualisierungen sind sehr schnell durchgeführt, da Sie nur diese eine Datei ändern müssen. So ist ein Impressum schnell in jede Seite eingebunden, indem Sie dies per iframe-Tag einfügen:
<iframe ID="content_iframe" src="inhalt.htm" width="500" height="300" vspace="0" hspace="0" marginwidth="0" marginheight="0" frameborder="1"></iframe>
Dieser Code für einen Inline-Frame zeigt die Datei inhalt.htm an. Mit src geben Sie das Dokument an, das der Inline-Frame laden soll. Mit vspace bestimmen Sie den vertikalen, mit hspace den horizontalen Abstand zu darüber bzw. daneben stehenden Seitenelementen. Auch Abstände innerhalb des Inline-Frames können Sie definieren: marginwidth gibt den horizontalen Abstand zum Rahmen des Inline-Frames an; marginheight sorgt für den gewünschten Abstand zum oberen bzw. unteren Frame-Rand. Setzen Sie den frameborder auf 0, wenn kein Rahmen um den Inline-Frame erscheinen soll. Die meisten Webbrowser zeigen dann höchstens die Scrollbalken. Auch die Bildlaufleisten können unterdrückt werden. Geben Sie in diesem Fall die Option scrolling="no" an. Sollen dagegen Scrollbalken unabhängig von dem Umfang des Inhalts immer sichtbar sein, geben Sie scrolling="yes" an. scrolling="auto" ist die Standardeinstellung, die auch verwendet wird, wenn Sie keine weiteren Angaben machen.
-
Ist Ihre Site fit für Google?
Was hilft die schönste Homepage, wenn sie nicht angesehen wird? Die meisten Besucher finden Websites inzwischen über wenige Suchmaschinen, die das Terrain unter sich aufgeteilt haben, allen voran Google. Für Google sind insbesondere die <title>- und <meta>-Tags auf der Seite entscheidende Kriterien. Im Web werden inzwischen Sites angeboten, die Ihre Seite kostenlos auf ihre Auffindbarkeit testen und Ratschläge geben, wie sie verbessert werden kann. Über www . webmasterplan . com wird z.B. ein kostenloser Voreintrags-Check dazu angeboten. Sie brauchen nur den URL Ihrer Seite anzugeben.
-
Java-Wahl
Verwenden Sie als Voreinstellung JavaScript statt Java, um das zeitraubende Laden der Applets zu umgehen.
JavaScript (von Netscape) und Java, die Programmiersprache von Sun, werden oft verwechselt, sind aber zwei Paar Stiefel. Nachdem jeder aktuelle Browser von vornherein JavaScripts unterstützt, sollten Sie Anwendern das zeitraubende Laden der Applets ersparen. Bieten Sie daher entweder eine Auswahloption für Java und JavaScript, oder stellen Sie in der Voreinstellung JavaScript ein.
-
Jetzt bekommen Sie was auf die Ohren
Multimedia ist in aller Munde, doch Töne findet man immer noch auf sehr wenigen Internetseiten. Peppen Sie Ihre Page auf und bieten Ihren Besuchern etwas Besonderes.
Bevor Sie jedoch Ihren Lieblingssound integrieren, sollten Sie unbedingt die Dateigröße überprüfen. Denken Sie stets an die Ladezeit. Je kleiner desto besser. Es gibt zwei Arten, die unterschiedlichen Formate von Sounddateien in Ihre Webseite einzubinden: Haben Sie einen Hyperlink auf eine Sound-Datei gelegt, kann der Besucher Ihrer Seite selbst bestimmen, ob und wann er den Sound herunterladen und dann abspielen möchte:
<a href="sound/ihredatei.wav">Klicken Sie hier.</a>
Den Ton spielt der Browser entweder selbst ab, oder er greift auf ein Plugin oder ein externes Programm (z.B. WinAmp, Real Player) zurück. Eine Fehlermeldung erscheint, wenn Browser bzw. Plugin den Dateityp des Sounds nicht unterstützen. Sie können die Audio-Datei auch direkt in die Seite einbauen. Dann wird der Sound abgespielt, sobald die Webseite geladen ist. Voraussetzung hierfür ist ebenfalls ein entsprechendes Plugin beim Benutzer. Sie haben eine größere Kontrolle, wenn Sie den Sound auf diese Weise in Ihre Seite integrieren. So können Sie den Anfang, das Ende und die Lautstärke kontrollieren.
<bgsound src="sound/ihredatei.wav"loop="infinite" autoplay="true" volume="0">
-
Kein Seitenrand
Unterdrücken Sie den Seitenrand, den die Browser zwischen Webseite und Fenster- oder Frame-Rand einfügen.
Internet Explorer und Netscape Navigator zeigen eine Webseite innerhalb des Browser-Fensters nicht an derselben Stelle an. Während IE standardmäßig direkt am Rand beginnt, lässt Netscape links und oben einige Pixel Freiraum. Normalerweise fällt das kaum ins Gewicht, bei einem dunklen Seitenhintergrund oder etwa bei nahtlosen Frames stört der Effekt. Um den Seitenrand einzustellen gibt es zusätzliche Attribute für das <body>-Tag. Diese sind allerdings nicht im HTML-Standard festgelegt, sondern unterscheiden sich bei den beiden Browsern. Beim IE geht es so:
<body leftmargin=0 topmargin=0>
Weniger bekannt sind die entsprechenden Parameter von Netscape:
<body marginwidth=0 marginheight=0>
-
Keine Legende
Der <legend>-Befehl gehört zu den eher selten genutzten Tags. Dabei können Sie mit diesem, für Gruppenüberschriften konzipierten, Befehl recht ansehnliche Effekte erzielen. Zu beachten ist aber, dass das <legend>-Tag nur in Verbindung mit dem <fieldset>-Befehl funktioniert. Ein typisches Beispiel:
<form>
<fieldset width="100%">
<legend><b>Ode an die
Legende</b></legend>
<p>Lauftext</p>
</fieldset> </form>
-
Keine Rollbalken
Mit einem Attribut unterdrücken Sie im Internet Explorer die Anzeige von Rollbalken für eine Webseite.
Wenn der Platz im Browser-Fenster nicht ausreicht, um eine Webseite komplett darzustellen, blendet der Browser Rollbalken ein. Diese Steuerelemente können sowohl waagerecht als auch senkrecht erscheinen. Beim Internet Ex-TIPP TIPP plorer haben Sie die Option, die Anzeige der Rollbalken zu beeinflussen. Ein Beispiel:
<body scroll="yes">
Das Attribut scroll steuert die Darstellung der Rollbalken. Es gibt drei erlaubte Werte: no unterdrückt die Rollbalken komplett. Dabei wird in der Darstellung kein Platz für den Rollbalken reserviert. yeszeigt den senkrechten Rollbalken immer an. Ist der Rollbalken gar nicht erforderlich, erscheint er in deaktivierter Darstellung. Der waagerechte Rollbalken bleibt davon unbeeinflusst. Der Internet Explorer zeigt ihn nur an, wenn das Browser-Fenster zu schmal für die Webseite ist. yes ist der Standardwert des Internet Explorer. auto zeigt die Rollbalken nur dann, wenn es notwendig ist. Der Platz für den rechten Rollbalken ist bereits reserviert, so dass beim Einblenden keine Änderung am Layout der Webseite erforderlich ist. Beachten Sie: Das Attribut scroll gehört nicht zum HTML-Standard und wird auch von anderen Browsern nicht interpretiert.
-
Keine Scroll-Leiste mehr
Der Internet Explorer zeigt auf der rechten Seite des Browserfensters immer eine Scroll-Leiste, obwohl das Layout komplett in das Fenster passt. Schreiben Sie im <body>-TAG einfach scroll="no" (<body scroll="no">) und Ihre Homepage steht sauber im Browserfenster. Das ist auch bei Framesets sehr nützlich. Als Variation können Sie statt no auch auto verwenden, damit bei Inhalten, die wirklich gescrollt werden müssen, gewährleistet ist, dass sich die Scroll-Leisten automatisch wieder einblenden.
-
Keine Verschachtelung von Framesets
Wer Frames einsetzt, sollte deren Verschachtelung mit diesem Tipp verhindern.
Über die Anwendung von Frames lässt sich bekanntlich streiten. Insofern Sie auf Ihren Seiten welche verwenden, ist es sinnvoll, eine in der Regel unerwünschte Verschachtelung von Framesets von vornherein zu unterbinden. Diese stellt sich ein, wenn die ganze Frameset-Seite in einem der Frames nochmals angezeigt wird. Dazu modifizieren Sie den Head-Bereich der Einstiegsseite, also der HTML-Seite, welche das Frameset definiert. Dort verwenden Sie zwischen <script> und <script> diesen Eintrag:
<html>
<head>
<script language=''JavaScript''>
<!
if (parent != window) { parent.location = window.location;}
//>
</script>
</head>
<frameset>
...
</frameset>
</html>
So müssen Sie nicht jeden sensiblen Link einzeln betrachten und sich auch nicht vorsehen, wenn Sie später neue hinzufügen. Ansonsten müssten Sie für Hyperlinks, welche wiederum auf Ihre Homepage verweisen, das target-Attribut mit dem Wert _parent angeben (<a> ... target = `'_parent'' </a>). Gleichzeitig verhindern Sie auf diese Weise, dass Ihre Webseite in einem Frame eines anderen Framesets angezeigt werden kann.
-
Klingende Seiten
PC-Power lockt längst nicht mehr nur mit optischen Reizen. Klänge tönen von der nächsten Dimension.
Mit dem gleichen Trick wie zuvor lassen Sie nach dem Laden eines Dokuments noch eine Melodie erklingen:
<HTML>
<META HTTP-EQUIV="Refresh" CONTENT="1; URL=file:///c|/windows/media/ding.wav">
<BODY>
Ding!
</BODY></HTML>
Das Beispiel spielt nach Laden des Dokuments das bekannte "Ding"! Die Pfadangabe mag variieren, je nachdem, wo sich ding.wav auf Ihrem Rechner befindet. Das Ganze klappt auch nur, wenn Ihr Browser mit dem entsprechenden Plugin zum Abspielen von Sounds ausgestattet ist. Falls Sie Sounds im Internet anbieten, sollten Sie diese Dateien im au-Format ablegen, das die meisten Browser verstehen.
-
Kopierschutz mit Blind-Gif
Schützen Sie die Bilder auf Ihrer Homepage vor Langfingern, die ungefragt die Dateien herunterladen und weiterverwenden.
Es ist im Internet gängige Praxis: Bilder "ausleihen", ohne zu fragen. Das lässt sich zwar nicht verhindern, aber ein Trick macht es den Langfingern zumindest schwerer. Dazu brauchen Sie kein JavaScript, und es funktioniert mit praktisch jedem Browser. Die Idee: Für jedes Bild legen Sie eine Tabelle mit einer Zelle an. Das Bild fügen Sie als Hintergrundbild für diese Tabelle ein. In der Tabellenzelle zeigen Sie ein Gif-Bild mit 1x1 Pixel Größe an, das transparent ist. Über die Attribute width und height vergrößern Sie das Gif-Bild auf die Ausmaße des Hintergrundbildes.
<table border="0" cellspacing="0"
cellpadding="0" background="bild.jpg">
<tr>
<td><img src="pixel.gif" width="589"
height="426" ></td>
</tr>
</table>
Achten Sie darauf, zwischen <td>, <img> und </td> keine Leerzeichen einzufügen. In der fertigen Webseite sieht das so aus, als wäre einfach ein Bild vorhanden. Ruft ein Surfer das Kontextmenü des Bildes auf, kann er tatsächlich ein Bild speichern - und zwar das wertlose Pixel-Bild. Mit dem Internet Explorer lässt sich der Schutz nicht aushebeln. Aber gegen Mozilla, einen WebRipper, der sämtliche Dateien der Webseite auf die lokale Festplatte holt, hilft es auch nicht.
-
Kostenlose Klangwelten
Wer Flash-Filme entwickelt, will Klänge und Musik nicht missen. Leider sind gerade kostenlose Soundclips von hoher Qualität dünn gesät. Eine nahezu unerschöpfliche freie Fundgrube bietet Flashkit www . flashkit . com. In den Rubriken Sound FX und Sound Loops findet der Flash-Entwickler Klänge für jeden Einsatzzweck. Fast alle Klänge tönen in den Formaten Wave, Mp3 und Flashtrack, so dass Sie es sich selbst in den meisten Fällen sparen können, das Material zu konvertieren. Was braucht der Entwickler mehr?
-
Kostenlose Scripts
Nicht jeder Homepagedesigner hat Zeit oder Lust, sich in die Feinheiten von JavaScript einzuarbeiten. Im Grunde genommen ist dies auch nicht nötig, da es im Web eine ganze Reihe ausgezeichneter Anlaufstellen gibt, die Sie mit kostenlosem Code versorgen. Eine besonders große Auswahl vorgefertigter Java-Scripts finden Sie bei javascript.internet.com/.
-
Ladeinformationen bei Bildern
Nicht jeder Webreisende verfügt über einen schnellen Internetzugang. Viele müssen lange warten, bis ein Bild geladen ist und in der Webseite erscheint.
Damit Ihr Besucher erkennt, dass etwas geschieht und sich nicht sein Browser verabschiedet hat, können Sie auch bei Bildern entsprechende Textinformationen einblenden ähnlich wie Sie es schon von einigen Flash-Animationen her kennen. Diese Variante eignet sich besonders für hochauflösende und hochformatige Fotos, die als große Datei gespeichert sind. Während Sie mit dem Attribut alt lediglich einfache Textinformationen hinterlegen, können Sie diese mit der folgenden Variante grafisch ansprechend gestalten. Zudem ist diese Variante eine Alternative zu dem Attribut lowsrc, das nicht zum HTML-Standard gehört. Legen Sie eine GIFGrafik an, die so lange angezeigt werden soll, bis das eigentliche Bild geladen ist. Diese sollten die gleichen Maße haben, wobei die fertige Datei nicht größer als fünf KByte sein sollte. Fügen Sie hier den Text Bitte warten Sie ein. Öffnen Sie das HTML-Dokument, in dem die große Grafik bereits in einer Tabellenzelle eingebunden ist. Auch wenn Sie eigentlich keine Tabelle benötigen, muss das Bild zumindest in einer 1x1-Tabelle integriert sein. Anschließend setzen Sie das Bild mit der Ladeinformation in den entsprechenden Zellenhintergrund:
<td background="bildinfo.gif">
<img src="bild.jpg" width="502" height="375"/> </td>
Dauert es nun mal etwas länger, bis das Bild erscheint, sieht die Webseite trotzdem optisch ansprechend aus.
-
Längst vergessene Frame-Attribute
Auch wenn es heutzutage jede Menge anderer Webtechniken gibt, stellen Frames immer noch eines der wichtigsten Stilelemente dar. Aber kennen Sie noch die einzelnen Attribute?
In Zeiten von Flash, CSS und DHTML sind Frames ein wenig in den Hintergrund getreten. Dabei stellt das klassische Drei-Fenster-Layout nach wie vor die erste Wahl für Webseiten dar. Doch während die grundlegende Definition eines Framesets keine Probleme bereitet, ist die Verwendung der Attribute ein wenig diffiziler. Aus diesem Grund stellen wir Ihnen in der Übersicht rechts die wichtigsten Optionen nebst möglicher Parameter und deren Auswirkungen vor.
-
Laufschrift mit Bildern
Die Laufschriftfunktion des Internet Explorer bewegt nicht nur Text, sondern beliebige Elemente wie etwa Bilder.
Microsoft hat den Internet Explorer um ein spezielles Tag für Laufschrift erweitert. Andere Browser ignorieren die Angabe und zeigen nur den Text an. Eine Laufschrift leiten Sie mit dem Tag <marquee> (marquee = Festzelt!) ein und beenden sie mit </marquee>. Alle Elemente wie Text oder auch Bilder, die Sie zwischen die beiden Tags notieren werden von der Bewegung erfasst.
<marquee>
<img src="logo.gif">
</marquee>
Der Browser bewegt damit das Bild von links nach rechts über das Browserfenster. Auf einer Webseite dürfen Sie mehrere unabhängige Laufschriften verwenden. Die Geschwindigkeit der Laufschrift steuern Sie über die beiden Attribute scrollamount und scrolldelay im einleitenden Tag.
scrollamount steuert, wie weit die Laufschrift bei jedem Animationsschritt versetzt wird. Die Einheit ist Pixel, der Standardwert ist 6. Der IE akzeptiert ganze Zahlen ab 1 als Attributwert.
scrolldelay: Die Wartezeit zwischen zwei Animationsschritten beträgt standardmäßig 85 Millisekunden. Mit diesem Attributwert setzen Sie die Anzahl Millisekunden ( 1 Sekunde = 1000 Millisekunden) als ganze Zahl und steuern so die Geschwindigkeit der Animation.
<marquee scrolldelay="5"
scrollamount="1" truespeed="1">
<img src="logo.gif">
Blitzschnelles Logo
<marquee>
Beide Attribute bestimmen in Abhängigkeit voneinander die Geschwindigkeit der Animation. Je kleiner scrollamount ist, desto langsamer und feiner wird die Bewegung. Je kleiner scolldelay ist, desto schneller und rechenaufwändiger wird die Bewegung. Dabei gibt es eine Besonderheit: Standardmäßig benutzt der Internet Explorer das Zeitsignal der Systemuhr, das nur alle 60 Millisekunden auftritt. Deshalb "verschluckt" der IE alle Delay-Werte kleiner 60. Aus scrolldelay="30" macht der IE intern scrolldelay="60". Erst das zusätzliche Attribut truespeed="1" sorgt dafür, dass es der Browser mit der Zeitangabe genau nimmt. Besonders wenn Sie Bilder mit einem kleinen Wert bei scrollamount sauber bewegen wollen führt kein Weg an truespeed="1" vorbei.
-
Laufschriften mit Hyperlink einbauen
Mit Hilfe eines Newstickers stellen Sie animierte Botschaften auf Ihrer Homepage dar.
Mit Lauftexten übermitteln Sie Ihren Website-Besuchern Kurzinformationen, beispielsweise über Neuigkeiten auf Ihrer Homepage. Wenn Sie dazu den Marquee-Tag verwenden, gehen Netscape-Anwender zwar leer aus, dafür können Sie aber auf jedes JavaScript verzichten. Einen simplen Lauftext erzeugen Sie folgendermaßen:
<marquee>Text läuft von links nach rechts </marquee>
Die Laufrichtung wechseln Sie so:
<marquee direction=right> Text läuft von links nach rechts </marquee>
Mit folgenden Schaltern definieren Sie die Geschwindigkeit und Verzögerung des Tickers:
scrollamount=50
scrolldelay=5
Mit dem alternate-Attribut läuft der Text abwechselnd von links nach rechts und umgekehrt:
<marquee behaviour=alternate>Lauftext mit wechselnder Richtung</marquee>
Die Hintergrundefarbe bestimmen Sie folgendermaßen:
<marquee bgcolor=red>Lauftext auf rotem Hintergrund</marquee>
Formatieren Sie die Schrift in Größe und Farbe:
<font size=7 color=blue><marquee bgcolor=red>Lauftext in blauer Schrift auf rotem Hintergrund</marquee></font>
Die Höhe und die Breite des Banners bestimmen Sie in Pixeln oder in Prozent:
<font size=7 color=blue><marquee bgcolor=red width=250 height=25>Lauftext in blauer Schrift auf rotem Hintergrund</marquee></font>
Abschließend können Sie Ihrem Laufband noch Hyperlinks beifügen:
<font size=7 color=blue><marquee bgcolor=red width=250 height=25> <a href="hyperlink.html">Newsticker in blauer Schrift auf rotem Hintergrund mit Hyperlink</a></marquee></font>
-
LEO Link Everything Online
Unter http://dict.leo . org/?lang=de finden Sie LEO, das bekannte Deutsch-Englische-Wörterbuch. Dieser Online-Service der Technischen Universität München enthält fast 400.000 Einträge und bietet wertvolle Hilfe bei der Übersetzung. Seit Februar ist nun ein zweites Wörterbuch online: Deutsch-Französisch.
-
Linie zeichnen
Zeichnen Sie eine Linie an beliebiger Stelle in Ihrem HTML-Dokument, ohne das HR-Tag zu verwenden.
Für horizontale Linien nutzt man üblicherweise das HR-Tag. Zur Formatierung des Tags können Sie unter anderem die Attribute SIZE (für die Höhe), WIDTH (für die Breite) und COLOR (für die Linienfarbe) verwenden. Mit einer einfachen Tabelle ist das Darstellen einer horizontalen Linie ebenfalls möglich:
<TABLE WIDTH="800">
<TR>
<TD WIDTH="1"
BGCOLOR="#0000FF"></TD>
</TR>
</TABLE>
Diese Technik bietet sich zur Layoutsteuerung innerhalb verschachtelter Tabellen an. Für andere Aufgaben macht dies keinen Sinn, da Sie mit dem speziell dafür vorgesehenen HR-Tag einfacher zum Ziel gelangen. Richtig interessant wird diese Technik beim Erzeugen von vertikalen Linien. Für diesen Zweck gibt es keinen Tag. Das folgende Beispiel zeigt Ihnen, wie Sie in einer Tabelle eine vertikale Linie zeichnen können:
<TABLE WIDTH=
"1" HEIGHT=
"300">
<TR>
<TD>linke
Seite</TD>
<TD WIDTH="1" BGCOLOR="#
0000FF"></TD>
<TD>rechte Seite</TD>
</TR>
</TABLE>
Die linke und rechte Spalte werden in diesem Beispiel mit einer vertikalen Linie getrennt. Dies kann beispielsweise beim Darstellen von Inhalten im Zeitschriften-Layoutstil eine nette Idee sein.
-
Links neu laden
Ihre Homepage ist in einen Frame für das Menü und einen zweiten für den Inhalt geteilt. Alle Verweise des Menüs sollen mit einem Befehl im anderen Frame geladen werden.
Normalerweise laden Browser bei einem Klick auf einen Hyperlink die neue Seite ins aktuelle Fenster bzw. den aktuellen Frame. Mit dem Attribut target im Tag des Links bestimmen Sie ein anderes Ziel. Statt in Ihrem Menü zu jedem Link die Attribut-Angabe zu schreiben, geben Sie den Ziel- Frame global an. Fügen Sie im Head-Bereich der Seite für den Menü-Frame die Zeile
<base target="zielFrame">
ein. "zielFrame" ist der Name des Frames, wie Sie ihn im Frameset vergeben haben. Analog können Sie Ihren Besuchern gestatten, Links auf Ihren Seiten zu folgen, ohne Ihre Site zu verlassen. Die folgende Angabe lädt Verweise jeweils in ein neues Fenster:
<base target="_blank">
So bleibt das Fenster, von dem der Link aufgerufen wurde, im Hintergrund erhalten. Das lohnt sich beispielsweise, wenn Sie Linklisten anbieten und davon ausgehen, dass der Besucher immer wieder auf Ihre Seite zurückkehren möchte. Dann vereinfacht das offene Fenster die Navigation. Die Technik kann auch ägerlich wirken. Wenn es keinen Grund gibt, zur ursprünglichen Seite zurückzukehren. Der Besucher muss das alte Fenster schließen und vermutet, dass der Autor seinen Auftritt aufdringlich in den Vordergrung rücken will.
-
Logo als Lesezeichen
Sie erhöhen den Wiedererkennungswert Ihrer Site, wenn Ihr Logo neben dem Seitentitel in den Bookmarks gespeichert wird.
Als Erstes benötigen Sie ein kleines Bild. Dieses Icon speichern Sie mit 16 x 16 Pixel im Stammverzeichnis Ihres Servers. Als Dateiname wird häufig favicon.ico gewählt. Wie Sie die Datei nennen, ist egal, wichtig ist nur die Dateiendung .ico, die für das Windows-IconFormat steht. So können Sie auch mehrere dieser so genannten Favicons für Ihre Site anlegen und speichern. Favicon ist die Abkürzung für Favorites Icon. Unter http://favicon . com finden Sie Tools, mit denen Sie einfach und schnell Favicons anlegen. Aber auch mit Ihrem Standardgrafikprogramm können Sie diese Bildchen erzeugen. Speichern Sie die Grafik wie gewohnt als GIF, und ändern Sie anschließend die Dateiendung im Explorer. In dem <head> Ihrer Webseite hinterlegen Sie die Verknüpfung zu Ihrem Mini-Logo folgendermaßen:
<link rel="shortcut icon" href="http://prisodi.de/ images/favicon.ico">
Internet Explorer 5.0, Netscape 6 und Mozilla 0.9.6 unterstützen Favicons unter allen Betriebssystemen.
-
Logos als transparente GIFs
Gerade bei Logos ist das rechteckige Bildformat häufig im Weg, wenn Sie es in eine Webseite einfügen. Hier hilft das GIF-Format. In Bildbearbeitungsprogrammen stellen Sie das Logo frei, indem Sie die Hintergrundfarbe transparent setzen. Dieses Bild binden sie ohne Zusatzattribute über ein <img>-Tag in die Seite ein. Geglättete Kanten können bei transparenten GIFs zu unschönen Rändern führen, da nur eine Farbe entfernt wird.
-
Lokale Seiten global
Wenn Sie Ihren internationalen Besuchern lokalisierte Versionen Ihrer Website anbieten oder sie mit einer lokalisierten Anrede begrüßen wollen, helfen Ihnen die kostenlosen Services von GeoByte (www . geobytes . com/ FreeServices.htm). Basierend auf der IP des Besuchers wird sein Standort ermittelt. Mit ein paar Zeilen Code im Quelltext lässt sich dann auf spezielle Seiten verzweigen oder ein entsprechend angepasster Text anzeigen.
-
Mail-Betreff vorgeben
Sie haben auf verschiedenen Seiten Ihre Mail-Adresse angegeben. Wenn Sie wissen wollen, auf welche Seite sich eine Mail bezieht, können Sie die Betreffzeile vorgeben.
In der Betreffzeile lässt sich mit einem Blick erkennen, welches Thema eine Mail behandelt. Der Empfänger kann sie vom Mail-Server direkt in einen eigenen Unterordner kopieren. Falls Sie auf mehreren Webseiten Ihre Mail-Adresse angegeben haben, können Sie den Absendern jeweils eine entsprechende Betreffzeile vorgeben. Dies funktioniert über den Subject-Befehl in der mailto-Zeile:
<a href href="mailto:webmaster@meineseite.de?subject=MeineMeinung zur Rubrik Downloads"> Meine Meinung</a>
Sie können auch mehrere Vorgaben kombinieren, indem Sie diese mit dem &-Zeichen verbinden. Zum Beispiel können Sie neben der Betreffzeile mehrere CC-Adressen und den Textanfang vorgeben. Der Absender kann diese Vorgaben jedoch ändern:
<a href href="mailto:webmaster@meineseite.de?subject=MeineMeinungzur Rubrik Dow Meine">Downloads&cc=johann.meier@t-online . de Meine Meinung an den Webmaster</a>
-
mailto-Befehle verfeinern
Mit dem mailto-Befehl erleichtern Sie es Besuchern, Ihnen eine Email zu senden.
Sie möchten den 'Betreff' für eingehende Mails von vornherein festlegen oder
Textinhalte vordefinieren. Dazu gibts eine Möglichkeit.
Der einfache mailto-Befehl sieht so aus:
mailto:uwe@martin.de
Um die E-Mail als 'carbon copy' [CC] an weitere Adressen zu verschicken,
ergänzen Sie den oben bezeichneten Befehl:
mailto:uwe@martin.de? cc=beispiel@adresse.de
und für eine blind copy:
mailto:uwe@martin.de? bcc=beispiel@adresse.de
Legen Sie anschließend den Betreff fest:
mailto:uwe@martin.de? cc=beispiel@adresse.de&subject =Ihr Betreff
Selbst ganze Mailtexte können Sie integrieren:
mailto:uwe@martin.de? cc=beispiel@adresse.de&subject= Ihr Betreff&body=Hallo Webmaster...
-
mciSendString() mit Fehlermeldung
Nutzen Sie ein VC-Makro, um eine MCI-Funktion zu erkennen.
Wenn Sie in Ihrem MFC-Programm die MCI-Funktionen verwenden wollen, wie zum Beispiel mciSendString(), erhalten Sie beim Übersetzen immer die Fehlermeldung, daß mciSendString ein nicht deklarierter Identifizierer ist.
Dies resultiert daraus, daß diese Funktion nur dann definiert wird, wenn das Makro WIN32_LEAN_AND_MEAN nicht definiert wurde: Das ist bei MFC-Programmen per Default der Fall.
Um diese Funktion verwenden zu können, stellen Sie sicher, daß WIN32_LEAN_AND_MEAN in Ihren Präprozessor-Einstellungen nicht gesetzt wird, und das Übersetzen gelingt.
-
Mehr Struktur mit Themenpfaden
Bei tief verschachtelten Websites ist es für den Besucher von großer Bedeutung, dass er jederzeit weiß, wo er sich in dem Geäst der Seiten befindet.
Ein probates Mittel ist hier die Anzeige von übersichtlichen Themenpfaden im Kopf der Website. Ihr Einsatz setzt allerdings voraus, dass der Inhalt der Website sorgfältig von oben nach unten strukturiert wurde. Der Pfad sollte nicht nur anzeigen, wie die Abfolge von Hauptthema zu Unterthema und Unterunterthema fortschreitet, sondern auch die aktuell angewählte Ebene deutlich erkennen lassen. Der Themenpfad sollte auf jeder Seite an derselben Stelle stehen.
-
Mehrere IE-Versionen
Um Webseiten auf Fehler zu überprüfen, wären mehrere Versionen des Internet Explorers auf dem PC nützlich. So ohne weiteres geht das nicht, eine umfangreiche deutsche Anleitung finden Sie bei http://blog.grochtdreis.de/more.php?id=154_0_1_0_M.
Laut Anleitung lassen sich sämtliche Versionen des Explorers ab 3.0 parallel vorhalten. Einen Haken gibt es aber: Die bedingten Kommentare des IE, die die Versionsnummer auswerten, funktionieren nicht. Hier zählt immer die neueste installierte Version. Eine umfangreiche englische Anleitung mit Diskussionsforum finden Sie bei http://labs.insert-title.com/labs/article795.aspx.
-
Mehrspaltig formatieren
Ob Sie im WWW Buchsatz vorgaukeln, entscheiden wenige Befehle.
Sie wollen, daß Ihre Seite mehrspaltig wie in der Zeitung erscheint? Das ist nicht einfach. Netscape bietet ab Version 3 den MULTICOL-Tag an. Leider erkennt der Explorer ihn nicht an. Andere Browser wollen ihn auch nicht darstellen, da er nicht Bestandteil von HTML 3.2 ist. Weitaus mehr Browser können aber unsichtbare Tabellen wie mit einer Zeile und beliebig vielen Spalten darstellen:
<TABLE BORDER=0>
<TR><TD>
Text in der linken Spalte!
<TD>
Text in der nächsten Spalte!
<TD>
Text in der rechten Spalte!
</TABLE>
Da der Text dabei leider nicht automatisch umbricht, müssen Sie selbst entscheiden, was Sie in welche Spalte schreiben.
-
Mehrzeilige Buttons
Die Beschriftung eines Formularbuttons lässt sich auch mehrzeilig gestalten.
Das Tag <button> ver wendet den Text bis zum End-Tag als Beschriftung der Schaltfläche. Dabei wird der Button automatisch so breit, dass der gesamte Text in einer Zeile Platz findet. Einen Umbruch macht der Browser nicht einmal dann, wenn der Button über den Browserrand hinausragt. Im Beschriftungstext dür fen Sie aber die üblichen HTML-Tags für Textfor matier ung (und andere) verwenden. Die Kennzeichnung <br> er zeugt entsprechend einen Umbruch. Beim Internet Explorer gibt es wieder ein Detail zu beachten: Vor dem <br> darf kein Leerzeichen stehen, sonst fügt der IE einen größeren Zeilenabstand ein:
<form action=""> <button type="submit"> Bitte hier klicken! </button><br>
<button type="submit"> Hier <br>klicken! </button> <button type="submit"> Hier<br>klicken! </button> </form>
Beachten Sie bitte dazu im Beispiel den Unterschied zwischen dem zweiten und dritten Button.
-
Menü-Liste mit farbiger Schrift
Die Formulare sehen auf den meisten Webseiten gleich aus. Peppen Sie Ihre farblich auf. Mit dem folgenden Quelltext fügen Sie ein Listenfeld in Ihre Webseite ein, bei dem der Text rot dargestellt wird. Wenn Sie eine andere Farbe haben möchten, geben Sie statt "red" den gewünschten Farbnamen oder den entsprechenden Hexadezimal-Code ein.
<form ID="form">
<select ID="select"
style="color : red">
<option value="1">Link A
</option>
<option value="2">Link B</option>
<option value="3">Link C</option>
</select>
</form>
-
Meta-Tags einfügen
Sie haben eine informative Seite gebaut, die die Suchmaschinen aber nicht finden.
Wer seine Homepage bei Suchmaschinen anmeldet, sollte nicht vergessen, dass Web.de, Yahoo!, Lycos etc. zum korrekten Auffinden Ihrer Seiten Hilfestellung benötigen. Das bedeutet, Sie sollten mindestens eine Beschreibung Ihrer Seiten sowie Schlüsselwörter, nach denen die Suchmaschine fahnden soll, von vornherein im Quelltext Ihrer Website verankert haben. Darüber hinaus stehen weitere Attribute zur Verfügung, um Ihre Seite besser zu platzieren. Meta-Tags sind HEAD-Elemente, dementsprechend setzen Sie sie zwischen die beiden Tags <head> und </head>. Um eine Beschreibung Ihrer Homepage zu definieren, benutzen Sie folgenden Meta-Tag:
<META ID="description" CONTENT="Geben Sie hier eine Beschreibung Ihrer Homepage an">
Folgender Tag dient zur Eingabe Ihrer Schlüsselwörter:
<META ID="keywords" CONTENT="Hier zählen Sie Ihre Schlüsselwörter auf, trennen Sie sie aber durch Kommata">
Damit die Suchmaschine sich Ihrer Homepage mit sämtlichen Unterseiten annimmt, sollten diese Attribute nicht fehlen:
<META ID="robots" CONTENT="INDEX,FOLLOW">
Den Autor und das Copyright geben Sie an mit:
<META ID="author" CONTENT="Ihr Name">
<META ID="copyright" CONTENT="zum Beispiel: Ihr Name ">
Überbegriffe, Zielgruppe und Seitentyp legen Sie folgendermaßen fest:
<META ID="page-topic" CONTENT="beispielsweise: Dienstleistungen">
<META ID="audience" CONTENT="Alle">
<META ID="page-type" CONTENT="beispielsweise: Kommerziell">
Legen Sie noch den Europäischen Zeichensatz fest:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-
Metatags verstecken
Einige Metatags richten sich an die Suchmaschine, andere an den Browser. Warum also soll der Browser die laden, die er gar nicht braucht? Der Server sollte die inzwischen weit verbreiteten Server Side Includes (SSI) verstehen. Fügen Sie folgenden Code in Ihre Webseite ein:
<!--#if expr="$HTTP_USER_AGENT =
/^Mozilla/" -->
<!--#else -->
Hier stehen die Metatags, die nicht angezeigt werden sollen.
<!--#endif -->
Durch die Browserkennung Mozilla kann der Server zwischen Browser und Spider unterscheiden. Was der Browser nicht lädt, sieht auch Ihre Konkurrenz nicht. Und die schöne Position in den Suchmaschinen bleibt weiterhin Ihr Geheimnis.
-
Minimalismus
Unter www . the5k . org finden Sie Websites, die die Welt nicht braucht. Auf der englischsprachigen Site dürfen nur Webseiten eingereicht werden, die maximal 5 KBytes groß sind. Die Besten werden prämiert. Halten Sie in den Galerien Ausschau nach kompakten JavaScript-Anwendungen. Oft erweisen sich die rein nach ästhetischen Gesichtspunkten oder als Spielchen angelegten Minihomepages als wertvolle Helferlein-Sammlung.
-
Mit Schwarzweiß anfangen
Wer zuerst die Grafik ohne Farbattribute über die Leitung schickt, hilft Anwendern bei langsamen Übertragungsraten.
Ein anderer Anwendungsbereich für animierte gif-Grafiken erfreut insbesondere diejenigen, die Zeit und Telefongebühren noch mit langsamen Modems vergeuden. Fürsorgliche Designer stellen zwei Versionen einer größeren Grafik her. Die schnell zu ladende Schwarzweiß-Version kommt als erstes Image in die gif-Datei, gefolgt von der ausladenden Farbversion. Da animierte gif-Bilder immer auch während des Ladens angezeigt werden, bekommen Sie zunächst die Schwarzweiß-Version zu sehen, die sich dann mit Farbe füllt.
-
Mozilla mit eigenen Cursorn
Der Open-Source-Browser verfügt - wie seine beiden Konkurrenten - über einen Satz spezieller Cursor. Ein Webdesigner spricht sie mit dem Befehl style="cursor: -moz-Befehl" gezielt an. Bemerkenswert ist, dass bereits einige Mauszeiger, wie -moz-zoom-in, -mozzoom out und -moz-alias, vorhanden sind, die CSS3-Features voraussetzen. Die komplette Liste finden Sie auf www . worldtimezone . com/mozilla/testcase/css3cursors.html.
-
Seekport-Suchmaschine
Nun ist die neue deutschsprachige Suchmaschine seekport online. Laut Betreiber, der Seekport Internet Technologies GmbH, bietet diese Suchmaschine den größten deutschsprachigen Index, der von einem nationalen Team gepflegt und aktualisiert wird. Dadurch sei die Trefferqualität entsprechend hoch und seriös. Außerdem zeichne sich die Suche durch ihre Schnelligkeit aus. Kernstück der themenorientierten Suche sei die Vertical-Search-Technologie. Geben Sie einen Begriff ein, können Sie die Suche weiter eingrenzen, indem Sie den Themenbereich angeben, der durchsucht werden soll. Die Suchmaschine finden Sie unter www . seekport . de.
-
News-Seite automatisch
Häufig lädt der Browser Webseiten nicht aktuell vom Server, sondern zeigt sie aus dem Cache des Clients an.
Seiten aus dem Cache sind unter Umständen veraltet. Per MetaTag vermeiden Sie dies. Um eine Seite neu zu laden, definieren Sie in einem Meta-Tag die refresh-Anweisung im <head>-Bereich. Unter Content geben Sie die Zeit in Sekunden an, nach der der Reload erfolgen soll, was Sie am Ladebalken in der Statusleiste Ihres Browsers verfolgen können. Soll die Seite sofort neu geladen werden, geben Sie unter Content den Wert 0 an. Da die Seite im Beispiel alle zwei Sekunden geladen wird, sollten Sie auf ein ZielDokument verweisen, in dem es keine Refresh-Anweisung gibt. Hierfür fügen Sie die gewünschte URL als weiteren Content-Wert ein. Die Refresh-Anweisung ist für den Reload verantwortlich, der hier nach zwei Sekunden erfolgt.
<meta http-equiv="refresh" content="2; URL=http://www.prisodi.de/" />
Um sich nicht in einer Endlosschleife zu verfangen, geben Sie ein Ziel-Dokument an. Alternativ können Sie eine JavaScript-Anweisung verwenden, wobei Sie die Dauer in Millisekunden angeben:
setTimeout("location.href = this.href", 1200)
-
Ohne <basefont>
Auf den Einsatz des Tags <basefont> sollten Sie aus Kompatibilitätsgründen verzichten.
Das HTML-Tag <basefont> war bei HTML 3.2 fester Bestandteil - in HTML 4.0 ist es als missbilligt (deprecated) aufgeführt. Das bedeutet, dass es nicht mehr verwendet werden soll, weil es in der nächsten HTML-Version voraussichtlich ganz entfällt. Es gibt eine ganze Reihe solcher Tags, die aber weiter benutzt werden - sie unterstützen die aktuellen Browser. <basefont> setzt im Kopf einer HTML-Datei die Schriftgröße für die ganze Webseite:
<head>
<basefont size=2>
</head>
Der Attributwert bei size darf zwischen 1 und 7 liegen, 3 ist die Normalgröße. Das klappt gut, nur nicht bei Netscape 6: In vorauseilendem Gehorsam gegenüber dem W3C-Standard (World Wide Web Consortium) haben die Entwickler <basefont> gestrichen.
-
Online-Servertests
Wer schon mal selbst einen Server installiert hat, kennt die Schwierigkeiten: Um zu testen, ob alles funktioniert, muss ein Benutzer von außen auf das System zugreifen. Das ist einfacher, wenn der Server bei einem Webspace-Provider gehostet wird. Wenn aber der Server im lokalen Netz läuft, ist es schwierig, selbst einen Zugriff auf die externe IP zu simulieren. In diesem Fall helfen die ServerTests der Netmonitor.org (www . netmonitor . org/tools/). Die Site hilft nicht nur beim Webserver. Auch FTP- und Mail-Ports können Sie mit dem praktischen Tool auf Erreichbarkeit und Funktionsfähigkeit testen.
-
Pfiffiger Editor
PSPad (www . pspad . com/de/) ist ein Freeware-Editor auch für HTML. Er besitzt zwar nicht die komfortablen Hilfen wie ein dedizierter HTML-Editor, bietet aber eine Reihe nützlicher Funktionen: So ist das Programm in der Lage, nach sehr komplexen Ausdrücken zu suchen, was das Austauschen von Tags, die verschiedene Parameter enthalten, erleichtert. Zudem integriert PSPad den CSS-Editor Topstyle Lite und besitzt einen automatischen Konverter von HTML zu CSS. Damit ist der Editor prädestiniert, HTML-formatierte Seiten auf Stylesheets umzustellen.
-
Plugins unplugged
Wer mit Dateiformaten arbeitet, die besondere Plugins benötigen, bietet dem Surfer eine Plugin-freie Alternative an.
Viele schöne Optionen erfordern Zusatzprogramme. Beispielsweise ist das Dateiformat pdf hervorragend geeignet, um gelayoutete Dokumente einschließ-lich Grafik wiederzugeben. Das Flash-Format von Macromedia wiederum sorgt für besonders kleine Dateigrößen. Es ist ein für das Web konzipiertes Vek-torformat. Der Nachteil: Wer zum Beispiel nicht das entsprechende Plugin, hier: für Flash-Files, installiert hat, kann diese nicht ansehen. Wenn Sie trotzdem solche Extras anbieten, sollten Sie zumindest Anwender ohne diese Plugins auf die Notwendigkeit verweisen, diese Plugins zu installieren. Eine sehr gute Alternative: Lassen Sie dem Surfer auf der Eingangsseite die Wahl, ob er eine beschränkte, schnelle Variante der Site wählen will oder für eine gute Optik längere Ladezeiten und Zusatzprogramme in Kauf nimmt. Wenn schon Plugins nötig sind, führen Sie Surfer direkt per Link zur Download-Adresse für diese Plugins - Ihre Besucher werden sich über diesen Service freuen.
-
Positionieren mit unsicht- baren Bildern
Mit kleinen unsichtbaren gif- oder jpg-Bildern erreichen Sie ohne große Dateien genaue Zeilenabstände und Einzüge.
Erzeugen Sie in einer Bildbearbeitung transparente gif- oder jpg-Bilder mit 1 Pixel. Fügen Sie beispielsweise diese Bilder mit dem Attribut <HEIGHT=8> in den HTML-Code ein, um einen Zeilenabstand von 8 Punkt zu erreichen. Mit dieser Größenangabe vermeiden Sie unnötigen Datenballast: Das Bild (1 Pi-xel) wird nur einmal geladen. Vergessen Sie beim Plazieren des Platzhalters den Tag <BR> vor dem Text nicht, sonst rücken Sie die Zeile um ein Leerzeichen ein. Mit diesen Platzhaltern erhalten Sie auch Einzüge: Positionieren Sie bei-spielsweise in die einzurückende Zeile das Bild, und wählen Sie <WIDTH=12>.
-
Probleme mit ParseCommandLine
Manchmal tut die ParseCommandLine-Funktion nicht ganz das, was Sie von ihr erwarten.
Eine vielleicht unerwartete Fehlermeldung läßt sich leicht abstellen. Enthält beispielsweise ein übergebener Dateiname Leerzeichen in seinem Pfad, so erhalten Sie als Resultat nur den Pfad bis zum ersten Leerzeichen. Ihre MFC-Anwendung reagiert darauf mit der Meldung, die betreffende Datei nicht öffnen zu können, weil sie nicht vorhanden ist.
Der Grund dafür ist, daß das für open in der Registry abgelegte Kommando nicht korrekt eingetragen ist: Hier ist es wichtig, daß Sie die angegebenen Parameter mit Anführungszeichen einschließen. Ändern Sie den Eintrag
DasProgramm.exe %1
einfach in:
DasProgramm.exe "%1"
Mit diesem simplen Trick bereiten Leerzeichen im Pfad oder im Dateinamen keine Probleme mehr.
-
Rauschen vermeiden
Wer Videos komprimiert, sollte auf gutes Ausgangsmaterial achten.
Je besser das Ursprungsvideo ist, de-sto stärker können Sie es in akzeptabler Qualität komprimieren. Es sollte so wenig Video-Rauschen ("Schneegestöber") wie möglich enthalten. Verwenden Sie das beste zur Verfügung stehende Videoformat, etwa S-VHS statt VHS. Achten Sie besonders bei Innenaufnahmen auf gute Beleuchtung, denn bei schlechtem Licht ist starkes Rauschen unvermeidlich.
-
Regeln für die Keyword-Auswahl
Mit den richtigen Keywords werden Sie besser in Suchmaschinen gelistet.
Bauen Sie Keywords in den Head Ihrer Seite ein. Versetzen Sie sich in die Lage
Ihrer Zielgruppe und überlegen Sie, welche Schlüsselbegriffe diese in
die Suchmaschine eingeben würde. Schrecken Sie nicht zurück,
auch häufig benutzte Begriffe auf Ihrer Seite zu hinterlegen.
Wenn Sie glauben, dass viele Anbieter die gleichen Begriffe einsetzen werden,
können Sie auch Kombinationen verwenden. Benutzen Sie hier nicht mehr
als drei Wörter. Sie erhöhen damit die Chance, in den Suchmaschinen
besser gefunden zu werden. Ein Beispiel:
<meta ID="keywords" content="Wein
kaufen, Rebenkunde, Arbeiten im
Weinberg, Weingut besuchen, Urlaub,
Weinstraße">
-
Rekursive Verzeichnisse
Seit jeher kann die RTL-Funktion mkdir() Verzeichnisse nicht rekursiv erzeugen.
Das Anlegen eines kompletten Verzeichnisbaums ist mit der Funktion mkdir() nicht möglich. makedir.c zeigt den richtigen Code. Sie müssen ihn allerdings noch um eine Fehlerbehandlung erweitern. Sonst treten zum Beispiel beim Versuch, illegale Verzeichnisnamen anzulegen, Fehler auf.
-
Rollbalken entfernen
Der Internet Explorer zeigt auch einen Rollbalken, wenn die Webseite einwandfrei im Browser-Fenster Platz hat. Mit dem zusätzlichen Attribut scroll="auto" im einleitenden <body>-Tag schalten Sie den Rollbalken aus - er erscheint nur noch dann, wenn die Webseite keinen Platz hat.
-
Rollen oder herunterklappen?
Um den Besuchern eine größere Auswahl an Unterpunkten zu bieten, eignen sich Roll- und Dropdown-Menüs. Sie können diese Variationen mit einem Parameter umschalten.
Roll- und Drop-down-Menüs erfreuen sich für die Anzeige mehrerer Optionen großer Beliebtheit. Sie vereinfachen die Navigation innerhalb einer Website unter Umständen recht stark. Um Rollin Drop-down-Menüs umzuwandeln, genügt die Änderung der Größe (size) in der Auswahlzeile (select) auf den Wert 1. Größere Werte erzeugen ein Roll-Menü mit der entsprechenden Anzahl angezeigter Optionen. Sie erleichtern die Navigation innerhalb einer Website wesentlich, wenn Sie auf allen Seiten einheitlich aussehende Menüs verwenden, also entweder Drop-down- oder Roll-Menüs mit einer bestimmten Zahl angezeigter Optionen.
<form ID="form2" action="/cgibin/
auswert.pl" method=get>
Ein Roll-Menü sieht so aus:
<br>
<select ID="roll" size="3">
<option>Bilder
<option>Downloads
<option>Freunde
<option>Nachrichten
<option>Sonstiges
</select>
</form>
-
RSS im Web
Viele Newsseiten und Weblogs bieten ihre Infos inzwischen im praktischen RSS-Format an. Der Anwender hat einen Reader, der in bestimmten Abständen die neuesten Schlagzeilen importiert. Wenn der Anwender die komplette Nachricht lesen will, öffnet er mit einem Klick die zugehörige Webseite. Als Reader dienen spezielle Programme, z. B. der Feedreader, Opera oder eben Thunderbird und Firefox. Weitere Infos zu RSS, Readern und natürlich dazu, welche Seiten Feeds bieten, finden sich im deutschsprachigen RSS-Verzeichnis: www . rss-verzeichnis . de.
-
RSS-Newsfeed anzeigen
Eine zusätzliche Navigationsleiste erleichtert den Zugriff auf einen RSS-Newsfeed.
Einen RSS-Newsfeed signalisiert man mit einer beschrif teten Grafik RSS oder XML auf der Homepage. Die aktuellen Versionen von Mozilla, Opera und dem Mac-Safari machen anders auf das RSS-Angebot aufmerksam. Fügen Sie im Kopfbereich folgende Zeile ein:
<link rel="alternate" type="application/rss+xml" title="RSSNewsfeed" href="http://www . domain . de/feed.xml">
Passen Sie die URL des RSS-Feeds an. Den Eintrag title wählen Sie frei. Opera 7 zeigt unter der Symbolleiste eine zusätzliche Liste mit dem Button Newsfeed an. Dazu muss aber Ansicht/Symbolleisten/Navigationsleiste eingeschaltet sein.
-
Saubere Auswahlmenüs
HTML 4.0 erlaubt verschachtelte Auswahllisten: ein nützlicher Weg, um für Übersicht zu sorgen.
Auswahllisten innerhalb eines Formulars präsentieren dem Surfer eine vorgegebene Zahl von Optionen. Zusammen mit JavaScript lassen sich so praktische Auswahlmenüs programmieren. Ab einer gewissen Zahl an Listeneinträgen wird es aber unübersichtlich. Mit HTML 4.0 bauen Sie Zwischenüberschriften in die Auswahlliste ein. Leider klappt das nur mit dem Internet Explorer 6 und Netscape 6, andere Browser ignorieren die Angaben. Eine Auswahlliste definieren Sie so:
<form>
<select>
<option>München</option>
<option>Augsburg</option>
...
</select>
</form>
Für eine Zwischenüberschrift klammern Sie die betroffenen Option-Elemente einfach mit dem Tagpaar <optgroup>...</ optgroup> ein. Mit dem Attribut label geben Sie den Text an, der in der Liste als Zwischenüberschrift erscheinen soll:
<optgroup label="Bayern">
<option>München</option>
<option>Augsburg</option>
</optgroup>
Die Zwischenüberschriften kann der Anwender im Browser nicht markieren, sie werden übersprungen. Dieser Effekt ist vom HTML-Standard nicht vorgesehen. Laut World Wide Web Consortium soll <optgroup> ein verschachteltes Menü erzeugen: Die Liste ist ein Menü zum Aufklappen, das wiederum Untermenüs unter Label-Namen enthält.
-
Schädliche Leerzeichen
Vermeiden Sie überflüssige Leerzeichen in Tabellen, die Ihr Seitenlayout durcheinander bringen.
In HTML spielen Leerzeichen, Zeilenumbrüche etc. normalerweise keine Rolle für die Darstellung der Webseite im Browser. Der Browser übergeht diese Zeichen und fasst beispielsweise mehrere Leerzeichen zu einem zusammen. In Einzelfällen reagieren Browser aber anders als gedacht. In einer Tabelle wollen Sie mehrere Bilder in verschiedenen Zellen nahtlos aneinander fügen. Im Internet Explorer und im Netscape 6.2 ist das letzte Bild um einen Pixel nach unten versetzt, Netscape 4.x sowie Opera 5 zeigen einen hässlichen Spalt zwischen den Bildern. Ein Effekt am Rande: Machen Sie das Browser-Fenster sehr schmal, dann verschwindet der Spalt bei allen Browsern. Suchen Sie nach einem Leerzeichen in den einzelnen Tabellen-Tags: Zwischen dem einleitenden <td> und dem abschließenden </td> sollten absolut keine Leerzeichen außerhalb eines Tags vorkommen. Die Schreibweise
<td><img src="wolk000.jpg"> </td>
verursacht den Fehler, während
<td><img src="wolk000.jpg"></td>
eine korrekte Anzeige bewirkt. Noch tückischer wird es, wenn Sie ein Leerzeichen vor dem Bild einbauen. Dann kann es beim Internet Explorer unter Umständen passieren, dass das Bild nach dem Leerzeichen um ein paar Pixel nach unten verschoben ist. Letztlich bleibt nur der Merksatz: Keine überflüssigen Leerzeichen in Tabellenzellen.
-
Schaltflächen mit <button>-Tag
HTML 4.0 hat für die Gestaltung von Schaltflächen in Formularen neue Möglichkeiten geschaffen.
Die in einem HTML-Formular verwendeten Schaltflächen werden meist noch durch ein entsprechendes type-Attribut des input-Tags erzeugt, typischerweise etwa <input type="button"> oder ... type="submit">. Das <button>-Tag hat den Vorteil, dass zwischen dem Start-Tag und dem Ende-Tag Informationen eingefügt werden können, wie die Schaltfläche auf der Seite angeboten wird. Dabei können Texte und Abbildungen beliebig gemischt werden. Nur Imagemaps dürfen nicht eingefügt werden. Die Abbildung zeigt zwei Schaltflächen, die vor der Beschriftung noch ein entsprechendes Zeichen anzeigen. Das Listing bildet einen Auszug aus dem entsprechenden Quellcode:
<title>Buttons</title>
<style type="text/css"
media="screen"><!- -
#ok { font-weight: bold; textalign:
left; padding: 1ex; width:
17em; height: 2ex }
#no { font-weight: bold; textalign:
left; padding: 1ex; width:
17em; height: 2ex }
- -></style>
...
<form
action="http://...bestaetigung.htm
method="get" ID="papierauswahl">
<p>Bitte bestätigen Sie die
angezeigten Bedingungen:</p>
<button ID="quittieren"
value="Einverstanden">
<div id="ok"><img src="ok.gif"
align="absmiddle">
Ich bin einverstanden</div>
</button><br>
<button ID="ablehnen" value="Nicht
einverstanden">
<div id="no"><img src="no.gif"
align="absmiddle">
Ich bin nicht einverstanden</div>
</button>
...
Für jede Schaltfläche wird ein <div>-Tag verwendet, das mit Hilfe von zwei ID-Styles individuell formatiert wird.
-
Schluss mit der Zettelwirtschaft
Unter www . notestore . de können Sie Notizen, Adressen und anderes kostenlos speichern. Per Browser sind Ihre Daten weltweit verfügbar. Sie können bis zu 1000 Notizen hinterlegen.
-
Schmerzgrenze: 50 KByte
Die Übertragungszeit einer Internet-Seite sollte 20 Sekunden nicht überschreiten. Dies ist in Deutschland bei maximal 50 KByte für die Internet-Seite gewährleistet, wenn die Verbindung mitspielt.
Wie groß eine Seite - der Code einschließlich Grafik, Sound und Videoclips - werden darf, hängt von der Übertragungsgeschwindigkeit ab, die den Besuchern Ihrer Web-Seite zur Verfügung steht. Inzwischen besitzen mehr als 80 Prozent der deutschen Surfer Modems oder ISDN-Karten, die mindestens so schnell sind wie Modems nach V.34-Standard. Die in der Praxis erreichten Werte für Modems und die ISDN-Raten schwanken bereits unter Laborbedingungen stark - je nachdem, welche Art von Daten sie übertragen. Sie sollten daher von den Übertragungsraten eines 28.8-Modems als kleinstem gemeinsamen Nenner aus-gehen, das unter normalen Übertragungsbedingungen rund 50 KByte in knapp 20 Sekunden erreicht. Sehr viel größer sollte eine Internet-Seite nicht sein, die ideale Obergrenze wären also rund 20 KByte. Ein V.34-Modem benötigt im Schnitt für 50 KByte etwa 15 Sekunden, ein V.90-Modem zwölf Sekunden. Eine übliche ISDN-Leitung überträgt diese Datenmenge in ungefähr acht Sekunden. Einige HTML-Editoren, zum Beispiel Allaire HomeSite, bieten eine prakti-sche Option, die die ungefähre Download-Zeit des HTML-Dokuments vorab anzeigt.
-
Schnelle Veröffentlichung über TXT
Manchmal muss es schnell gehen, und eine Nachricht soll sofort online erscheinen. Welches ist der schnellste Weg?
Wenn eine Seite so schnell wie möglich aktualisiert werden soll, muss jeder Programmieraufwand vermieden werden. Auch die Dateigröße spielt dann eine Rolle. Mit dem TXT-Format geht es immer noch am Schnellsten, eine Datei zu übertragen, da es sich auf die reinen Text-Informationen ohne Formatierung oder Grafiken beschränkt. Browser können TXT-Dateien zwar nicht direkt anzeigen, aber über den Umweg eines Framesets funktioniert es. Einen Frame reservieren Sie dabei für die aktuelle TXT-Datei. Sie setzen in einem zweiten Frame einen Link, mit dem Sie diese Datei im entsprechenden Frame öffnen. Wenn Sie über einen Link eine TXT-Datei öffnen, wird sie im reinen Textmodus unformatiert dargestellt. Ebenso lassen sich auch JPG- oder GIF-Bilder direkt einfügen.
-
Schnelles Surfen im Internet
Aus mehreren HTML-Dokumenten fassen Sie mit einem Aufruf eine umfangreiche Link-Liste zusammen.
adressen.cpp faßt die Links mehrerer HTML-Dokumente übersichtlich in einem neuen zusammen. Somit ersparen Sie sich bei der nächsten Online-Sitzung das Suchen nach bestimmten Links in alten HTML-Dokumenten.
Sie rufen einfach die mit adressen.cpp gespeicherte Link-Seite auf und klicken dort den gesuchten Link an. Die Befehlszeile, um diese Seite anzulegen, lautet:
adressen LINKS.HTM
Adok1.htm dok2.htm ...
Die Datei links.htm listet dann die einzelnen Links der Dokumente dok1.htm, dok2.htm etc. übersichtlich auf. Falls Sie an eine bereits bestehende Link-Seite die Links neuer HTML-Dokumente anhängen wollen, rufen Sie den folgenden Befehl auf:
adressen linksNEU.htm A
linksALT.htm dok1.htm ...
Damit Sie die Link-Seite zügig speichern, liest das Programm die einzelnen HTML-Dokumente in Blöcken von maximal 1000 Zeichen ein. Findet das Programm in einem Block einen Link, so prüft es zuerst, ob es sich um eine vollständige Adresse handelt. Wenn ja, wird die Adresse in der Link-Seite gespeichert und die Suche im momentanen Block fortgesetzt.
Die Suchprozedur basiert auf der Brute-Force-Methode (rohe Gewalt), die hierfür gut geeignet ist. Komplexere Suchprozeduren würden bei den kurzen Such-Strings zu keiner nennenswerten Verbesserung führen.
Alexander Albrecht/et
-
Schöne Aufzählungszeichen
Die in HTML vorgegebenen Aufzählungszeichen sehen nicht schön aus. Wie definieren Sie ansprechende Bulletts selbst?
Die übliche Aufzählung mit dem <list>-Befehl erzeugt recht hässliche Zeichen vor den einzelnen Gliederungspunkten. Sie können einerseits darauf verzichten, indem Sie mit der <ul>-Variante keine Aufzählungszeichen erzeugen. Um den Überblick zu bewahren und trotzdem ästhetisch ansprechend zu sein, können Sie aber auch eigene Zeichen definieren. Dazu lässt sich jedes beliebige Zeichen oder jede beliebige Grafik verwenden. Sie sollte aber entsprechend klein sein, um den Aufzählungscharakter nicht zu stören. Gegen bunte Kugeln oder rote Häkchen ist nichts einzuwenden. An Stelle des <list>-Befehls verwenden Sie <dl> und für die eigentliche Aufzählung <dd>. Dann lassen sich jeweils Grafik-Links integrieren:
<dl>
<dd><img
src="/bilder/rotekugel.gif">
Erstens</dd>
<dd><img
src="/bilder/grünekugel.gif">
Zweitens</dd>
<dd><img
src="/bilder/blauekugel.gif">
Drittens</dd>
</dl>
-
Schöne Schriften
Mit schöner Typografie kann man durchaus seine Homepage aufwerten. Die Standard-Windows-Zeichensätze sind meist langweilig, weil sie irgendwann jeder kennt. Unter www . fontomas . de/ finden Sie wöchentlich aktualisierte Free-Fonts zum Download für PC und Macintosh.
-
Schrift oder Schriftfamilie?
Wer vom Entwurf seiner Seite überzeugt ist, will, dass der Besucher die Seite auch genau so wie vorgesehen sieht. Die Wahl der Schrift hat großen Einfluss auf das Aussehen der Seite. Eine exakte Festlegung etwa mit <font face="Verdana"> bietet aber keine Gewähr, weil ein Besucher diese Schrift vielleicht nicht installiert hat. Der Browser verwendet dann eine Standardschrift, häufig Times New Roman. Möglicherweise hat der Besucher aber eine ähnliche Schrift wie Verdana. Deshalb ist es besser, anstelle einer einzigen Schrift eine Familie ähnlicher Schriften anzugeben: <font face="Verdana, Helvetica, Arial, sans-serif"> Der Browser testet dann von links nach rechts, ob er eines der Familienmitglieder kennt und benutzt den ersten Treffer.
-
Schriften einbetten
Wer sicher gehen will, dass der Besucher die eigene Seite auch tatsächlich mit den Schriften sieht, die Sie dafür ausgewählt haben, kann auf ein kostenloses Werkzeug - WEFT - zurückgreifen, das Microsoft auf der Seite www . microsoft . com/typography/web zur Verfügung stellt. Damit lassen sich OpenType-Schriften in eine Website einbinden. Ein Assistent untersucht die Seiten und bereitet die ausgewählten Schriften dafür vor. Die Schriften müssen auf dem lokalen Gerät vorhanden und für die Einbettung freigegeben sein.
-
Schriftgröße beeinflusst Reihenfolge
Das Design einer Internet-Seite lenkt den ersten Blick eines Besuchers an eine bestimmte Stelle. Dabei erzielen oft die einfachsten Effekte die größte Wirkung, zum Beispiel die Schriftgröße.
Dem Betrachter einer Seite fallen zuerst die größten Buchstaben auf. Diese Orientierungshilfe spielt daher eine wichtigere Rolle als Grafiken oder Bilder, die oft erst auf den zweiten Blick gesehen werden. Die wichtigsten Informationen sollten daher auch in der größten verwendeten Schrift stehen. So kann der Webdesigner die Aufmerksamkeit von der traditionellen Richtung - von links oben nach rechts unten - zuerst auf andere Stellen lenken. Selbst innerhalb eines Textes lassen sich durch unterschiedliche Schriftgrößen interessante Effekte und Betonungen erzielen. Ein Beispiel:
<font size=1>Dies
ist</font> <font
size=2>e</font>
<font size=3>i
</font><font
size=4>n</font>
<font size=5>
wichtiger </font>
<font size=4>
A</font> <font
size=3>r</font>
<font size=2>t
</font><font
size=1>ikel des </font> <font
size=3>PriSoDi-Accounts</font>
-
Scroll-Leisten in Tabellen
Scroll-Leisten in Tabellen zu erzeugen gilt selbst bei vielen Experten als unmöglich. Es funktioniert aber doch.
Soll innerhalb einer Tabelle eine Scroll-Leiste angezeigt werden, verwenden Sie das Form-Element. Der Besucher Ihrer Seite kann das Formular aber nicht bearbeiten oder abschicken, sondern es sich nur anzeigen lassen. Dies erlaubt das Attribut readonly. Durch eine unsichtbare Tabelle (border="1") können Sie so auch sehr elegant größeren und umfangreichen Text extrem übersichtlich auf kleinem Raum gliedern. Ein vollständiges Beispiel zeigt folgendes Listing:
<table width="50%" border="1">
<tr>
<td width="40%">Rechts sehen Sie
eine Scroll-Leiste innerhalb einer
Tabelle</td>
<td width="60%">
<form ID="Formular1">
<textarea cols="25" rows="4"
ID="Fenster" readonly>
Diesen etwas längeren Text können
Sie vollständig lesen, indem Sie
den Scrollbalken rechts betätigen.
</textarea> </form> </td>
</tr> </table>
-
Scrollbalken auf der linken Seite
Dass der Scrollbalken stets am rechten Seitenrand zu finden ist, gilt nicht immer. In Ländern, in denen z.B. von rechts nach links geschrieben wird, steht der Rollbalken links.
Den Scrollbalken nach links zu verschieben, ist einfach. Der Internet Explorer ab Version 5 beherrscht diese Funktion standardmäßig. Sie schreiben lediglich den Parameter dir="rtl" in das <body>-Tag - schon ist der Balken auf der linken Seite. Allerdings stellt er dadurch auch alle anderen Elemente etwa Textblöcke spiegelverkehrt dar. Um das ursprüngliche Seitendesign beizubehalten, fassen Sie den kompletten Inhalt zusätzlich zu einem übergeordneten Blockelement zusammen:
<body dir="rtl">
<div dir="ltr">
Seitenelemente
</div>
</body>
-
Seite für Seite
Ersparen Sie dem Anwender das Blättern, indem Sie ihm neue Seiten automatisch aufschlagen.
Mit Hilfe eines speziellen Tag am Dokumentanfang laden Sie nach einer vorgegebenen Zeit die nächste Seite:
<HTML>
<META HTTP-EQUIV="Refresh" CONTENT="5; URL=folgeseite.html"> <BODY> In fünf Sekunden mehr!
</BODY></HTML>
Die Ziffer 5 läßt es nach fünf Sekunden mit der angegebenen URL weitergehen.
-
Seiten aufteilen
Überladen Sie Ihre Seiten nicht mit platzraubenden Multimedia-Elementen. Das gilt besonders für die Startseite.
Erfahrungsgemäß akzeptieren Surfer längere Ladezeiten auf nachgeordneten Seiten eher als auf der Startseite, die deshalb sofort erscheinen sollte. Faustregel: Die Startseite sollte maximal 25 KByte umfassen. Unterteilen Sie daher Ihr Angebot thematisch, und geben Sie jedem Thema nochmals eine eigene Anlaufseite, auf die Sie von der Startseite verzweigen. Beispielsweise könnte die Startseite eines Kunstmalers auf eine Anlaufseite mit mehreren Kategorien wie Stilleben oder Landschaften verweisen, diese wiederum auf die einzelnen Bilder. Wenn Sie mehrere größere Bilder, Sounddateien oder gar Videoclips präsentieren, bieten sich Thumbnails auf einer Anlaufseite an, über die Sie diese Dateien aufrufen.
-
Seitenübergänge mit Pfiff
Eine einzige Zeile Code sorgt dafür, dass einfache Seitenübergänge zu einem wahren Blickfang für alle Benutzer des Internet Explorer werden.
Jeder Videokenner weiß um die Vorzüge von Überblendeffekten, die thematisch unterschiedliche Szenen nahtlos verknüpfen. Die Entwickler des Internet Explorer waren von den Qualitäten dieser Überblendungen scheinbar ebenfalls so begeistert, dass sie sie bereits in die Browserversion 4.0 implementierten. Das ist kaum bekannt. Um diese Effekte einzubinden, erweitern Sie den Head-Bereich um folgende Zeile:
<META http-equiv="Page-Enter" content="revealTrans(Transition=23,Duration=1.000)">
Die Parameter Transition und Duration legen fest, welche der 23 Effekte verwendet werden soll und wie schnell (in Sekunden) die beiden Seiten ineinander übergehen. Zur Auswahl stehen beispielsweise: 0 = Box in (quadratische Überblendung in die Seitenmitte); 3 = Circle out (Kreisförmige Überblendung aus der Seitenmitte); 8 = Vertical blinds (Blockweiser, vertikaler Seitenaufbau - Jalousieneffekt); 11 = Checkerboard across (Schachbrettmuster von links nach rechts); 12 = Random dissolv (Partikelähnliche Auflösung); 21 = Random bars horizontal (Vertikales Streifenmuster); 23 = Random (zufälliger Effekt). Ebenso setzen Sie die Übergänge beim Verlassen einer Seite ein. Dazu erweitern Sie den Code um die Anweisung Page-Exit oder Site-Exit.
-
Seitenübergänge mit Pfiff
Den Wechsel zwischen zwei Webseiten inszeniert der Internet Explorer mit beeindruckenden Effekten.
Wenn Sie auf einen Link klicken, zeigt der Browser normalerweise einfach die neue Webseite an. Der Internet Explorer ab Version 5 kann aber auch anders. Wie bei einem Präsentationsprogramm blendet er zwischen den Webseiten um, etwa mit einem Vorhangeffekt. Weil dies nicht dem offiziellen HTML-Standard entspricht, ist das Kommando als Meta-Information verpackt. Sie fügen im Kopfbereich der HTML-Datei eine Zeile ein:
<head>
<meta http-equiv="page-enter"
content="RevealTrans(Duration=4,Transi
tion=12)">
</head>
Der Parameter Duration gibt die Dauer des Effekts in Sekunden an. Bei Transition stellen Sie ein, welchen Effekt Sie haben wollen. Es sind 24 Effekte erlaubt (Transition=0 bis Transition= 23). Probieren Sie einfach aus, bis Sie den gewünschten Effekt entdeckt haben. Effekt 23 ist übrigens eine Zufallfunktion, die einen beliebigen der 23 anderen Effekte aufruft. Wenn Sie den Effekt nicht beim Betreten, sondern beim Verlassen einer Webseite anwenden wollen, tragen Sie http-equiv="page-exit" ein. Andere Browser ignorieren die Meta-Angabe einfach, eine Fehlermeldung müssen Sie nirgends befürchten.
-
Separate Bildbeschreibung
Um Ladezeit zu sparen, schalten einige User die Bilddarstellung in ihrem Browser ab.
Nicht alle Browser zeigen Bilder an. Das alt-Attribut bietet ansatzweise eine Methode, um dennoch Bildinformationen zu vermitteln. Um Ihre Seiten barrierefrei zu programmieren, bietet sich auch das longdesc-Attribut an. Die in der alt-Anweisung definierten Informationen sind an Stelle eines Bildes sichtbar. Auch wenn der Browser eine Grafik oder ein Foto darstellen kann, wird der altText eingeblendet, sobald der User den Cursor über dieses Objekt bewegt. Der Platz dafür ist oft begrenzt. Um die Botschaft eines nicht dargestellten Bildes zu erläutern, verwenden Sie am besten das longdesc-Attribut, das den User auf eine weitere Webseite führt. Geben Sie hierzu die URL der Folgeseite an:
<img src="SIMG9680.jpg" width="308" height="504" longdesc="bildinfos.htm"/>
Allerdings unterstützen dieses Attribut zurzeit nur Netscape 6 und Firefox und das indirekt: Der User muss mit der rechten Maustaste auf das Bild klicken, im Kontextmenü Eigenschaften auswählen und auf die verlinkte URL klicken. In Firefox ist es noch umständlicher, denn dort fehlt die Verlinkung. Der Anwender muss die Adresse kopieren und in die Adresszeile des Browsers einfügen. Das longdesc-Attribut können Sie auch bei der Frame-Definition einsetzen. Erkennt ein Browser einen Frame, kann ihn aber nicht darstellen, sind die Informationen in einer Folgeseite beschrieben:
<frameset rows="*" cols="236,*" framespacing="0" frameborder="no" border="0">
<frame src="leer.htm" ID="menu" scrolling="no" noresize="noresize" id="menu" />
<frame src="menue.htm" ID="Inhalt" id="Inhalt" longsdesc="frameinfos.htm"/>
</frameset>
-
Server-Know-how: Vielseitiges .htaccess
Eine einfache Textdatei bringt Ihre Website in Schwung.
Web-Server, die unter Linux und Apache laufen, lassen sich durch eine kleine Datei dazu bringen, verschiedenste Aufgaben auszuführen. Die Datei .htaccess enthält dazu Anweisungen, die der Web-Server befolgt. Im Verzeichnis, das der Browser aufruft, liest der Server zunächst diese Datei, die Zugriffe sperren kann. Aber .htaccess kann noch mehr.
- Fehlerbehandlung
Tritt ein Fehler auf, etwa weil eine Datei nicht gefunden wird, liefert der Server einen Fehlercode. Ein Beispiel dafür ist 404, wenn eine Seite nicht gefunden wird. Diese Fehlercodes lassen sich durch .htaccess abfangen:
ErrorDocument 404 /fehlermeldung/dateinichtgefunden.html
Tritt nun ein 404-Fehler auf, wird automatisch die Seite dateinichtgefunden.html aus dem Verzeichnis fehlermeldung ausgegeben.
- Zugangsbeschränkung
Per .htaccess können Sie IP-Adressen oder Domains den Zugang zu Ihrer Site verwehren:
order allow,deny
deny from 192.168.0.99
deny from .google.com
allow from all
- Standardseite
Über .htaccess können Sie kontrollieren, welche Seite angezeigt wird, wenn der Besucher keine Seite explizit angibt:
DirectoryIndex portal.html index.html index.htm index.php
Hier wird sofern vorhanden die Seite portal.html angezeigt. Falls diese nicht existiert, folgt die nächste Seite in der Liste: index.html
- Weiterleitung
Auf ähnliche Weise lässt sich auch problemlos zu einer anderen Website umleiten und das sogar, wenn eine bestimmte Seite aufgerufen wird:
Redirect /verzeichnis/seite.html http://www . anderewebsite.de/neu/neue seite.html
-
Server-Verzeichnisse verstecken
Enthält ein Verzeichnis auf dem Web-Server keine HTML-Datei mit einem Standardnamen wie index.htm, so liefert der Server einem Surfer einfach eine Liste aller Dateien in diesem Verzeichnis. Das betrifft HTML-Dateien ebenso wie Bilder oder sonstige Dateien. Das kann peinlich werden, wenn dieses Verzeichnis Daten enthält, die (noch) nicht für die Öffentlichkeit bestimmt sind. Erzeugen Sie eine Webseite, die einen Link auf die Startseite enthält. Speichern Sie die HTML-Datei als index.htm oder index.html in allen Verzeichnissen. Dann zeigt der Browser eines Surfers nur diese Webseite und nicht einen Index aller Dateien.
-
Silbentrennung dynamisch
Der Browser bricht den Text in Webseiten automatisch um und hinterlässt Lücken im Blocksatz. Das Zeichen ­ markiert in einem Wort die Stelle, an der der Browser Silben trennen darf. Am Ende einer Zeile fügen Internet Explorer ab Version 5, Opera 7 und auch Konqueror an dieser markierten Stelle ein Trennzeichen ein. Die Browserfamilie Mozilla/Firefox/Netscape ignoriert das Zeichen, Netscape 4.x fügt immer einen Trennstrich ein, auch mitten in der Zeile.
-
Silbentrennung mit ­
Über ein Sonderzeichen erreichen Sie im Internet Explorer automatische Silbentrennung wie im Textverarbeitungsprogramm.
Bei jedem Textverarbeitungsprogramm gehört die automatische Silbentrennung zum Standardrepertoire. Auch HTML 4.0 trifft hierfür Vorkehrungen. Der Standard unterscheidet zwischen dem einfachen Trennstrich und dem weichen Trennstrich. Den einfachen Trennstrich, den Sie über die Tastatur als Minuszeichen (-, ASCII-Code 45) eingeben behandelt der Browser wie ein normales Zeichen. An einem solchen Trennstrich setzt der Browser folglich keinen Zeilenumbruch. Das weiche Trennzeichen ist das Sonderzeichen ­ oder numerisch ­. Laut HTML-Standard sollen Browser an entsprechend markierten Stellen einen Zeilenumbruch durchführen. Bei einem Zeilenumbruch setzt der Browser an das Ende der Zeile einen Trennstrich. Erfolgt keine Silbentrennung an der markierten Stelle, so zeigt der Browser keinen Trennstrich.
<body>
Es war einmal mitten im Winter,
und die Schnee­flocken
fie­len wie Fe­dern vom
Him­mel herab.
</body>
Setzen Sie das Sonderzeichen ­ an genau der Stelle in den Text ein, an der eine Silbentrennung erfolgen soll. Normalerweise sehen Sie das Zeichen im Browser nicht. Aber wenn das Wort an den Rand rückt erfolgt eine Silbentrennung mit einem Trennstrich am Zeilenende. Die Silbentrennung beherrscht aber nicht die komplexe deutsche Trennung von ck. Das Wort backen trennt der Internet Explorer als bac-ken und nicht korrekt als bak-ken. Solche Trennstellen dürfen Sie deshalb nicht mit einem weichen Trennzeichen markieren. Von den aktuellen Browsern unterstützt nur der Internet Explorer den weichen Trennstrich. Bei Opera und Netscape 6.x passiert gar nichts, die weichen Trennstriche bleiben unsichtbar. Aus der Reihe tanzt wieder einmal Netscape 4.x. Dieser Browser zeigt auch die weichen Trennstriche als Minuszeichen an. Das Ergebnis ist hässlicher und teilweise schwer lesbarer Text. Da Netscape 4.x immer seltener Verwendung findet, ist der Einsatz von weichen Trennstrichen vor allem bei Blocksatz trotzdem eine Überlegung wert.
-
Site Ranking auf besten Plätzen: Google will Patent
Wie auf den Webseiten des US-amerikanischen Marken- und Patentamtes (USPTO) www . uspto . gov zu lesen ist, will Google sein neues Ranking-System für Meta-Newsseiten schützen lassen. Neu sei, dass bei der geplanten Nachrichtensuche unter http://news. google.de die Ergebnisse nicht nur nach ihrer Aktualität (Datum) und Relevanz aufgelistet werden, sondern nach dem neuen System auch bezüglich ihrer Qualität. Dadurch kommt es zu einer Bewertung der Nachrichtenquelle hinsichtlich ihrer Glaubwürdigkeit und weiterer Faktoren. Auch in anderen Ländern wurde dieses System zum Patent angemeldet.
-
Sonderzeichen maskieren
Beim Versuch, eine mathematische Arbeit ins Netz zu stellen, fällt auf, dass der Browser keine Sonderzeichen darstellt.
Auch wenn die HTML-Formatierungsoptionen nicht an die Features einer Textverarbeitung herankommen, reicht der Befehlssatz dennoch aus, um aufwändige Dokumente wie mathematische Abhandlungen oder fremdsprachige Texte auf die Homepage zu bringen. Hierbei sollten Sie allerdings daran denken, dass die verwendeten Sonderzeichen maskiert werden müssen. Nur dann ist sichergestellt, dass Ihre Seite in den Browsern aller Besucher korrekt dargestellt wird. In der Tabelle rechts auf dieser Seite stellen wir Ihnen die am häufigsten verwendeten Sonderzeichen und deren HTML-konformen "Übersetzungen" vor.
-
Spam-Bots ausgetrickst
Roboter sind Programme, die Websites automatisch nach Informationen durchforsten.
Das können zum einen die nützlichen Roboter der Suchmaschinen sein, zum anderen treiben sich aber auch unerwünschte Besucher auf den Websites herum. Dazu zählen etwa Roboter, die E-Mail-Adressen sammeln, um an diese dann unverlangte Werbebotschaften zu verschicken. Mit einem einfachen Trick kann man die meisten dieser Spione außer Gefecht setzen. Geben Sie alle Kontaktadressen statt in der Form
<A HREF Mailen">HREF="mailto:heinz@mustermann.de">MailenSie uns</A>
wie folgt an
<A HREF="mailto:heinz@mustermann.de">Mailen Sie uns</A>
Der Roboter erkennt Mail-Adressen gewöhnlich am @-Symbol und wird diese Version deshalb einfach ignorieren. Der Browser hingegen zeigt die Seite richtig an.
-
Spaß mit Formularen
Statt in Web-Formularen auf graue HTML-Buttons oder mit Texturen aufgepeppte Schaltflächen zu bauen, setzen Sie besser Grafiken ein.
Um einer Webseite den letzten Schliff zu geben, verzichten viele Designer auf Standard-Formularschaltflächen und setzen eigene, farbenfrohe Lösungen ein, die sich harmonisch ins einheitliche Seitendesign einfügen. Die Einbindung ist einfach, da die optischen Details mit einer einzigen Zeile festgelegt werden. Fügen Sie den folgenden HTML-Code in den Body-Bereich der Seite ein. Die Parameter action, method und name passen Sie an die von Ihnen verwendeten Auslesemethoden an. Wer eine bereits bestehende Formular-Auswahlliste anpassen will, erweitert den Quellcode nur um die vorletzte Zeile und stellt die entsprechende Grafik bereit.
<form action="beliebig.html" method="
get" ID="Auswahl">
<select ID="menu" size="3"
multiple>
<option value="1"> Menüpunkt
1 </option>
<option value="2"> Menüpunkt
2 </option>
<option value="3"> Menüpunkt
3 </option>
<option value="4"> Menüpunkt
4 </option>
</select>
<input type="image" alt="Auswahlbutton"
src="button1.gif">
</form>
-
Speicherschonende Hintergrundbilder
Webbrowser kacheln das Browserfenster automatisch mit Hindergrundbildern aus, wenn in dem <body>-Tag das Attribut background verwendet wird, um den URL des Bildes anzugeben. Damit können Sie ziemlich schreckliche Effekte erzielen, wenn größere Bilder den Hintergrund unruhig und den darauf liegenden Text schwer lesbar machen. Dagegen lassen sich mit sehr kleinen Bildern durchaus ansprechende Lösungen erzeugen, falls beachtet wird, dass die Kachelränder nicht zu hart hervorstechen. Abhilfe bieten hier Weichzeichnerfunktionen, wie sie etwa ImageReady von Adobe zur Verfügung stellt. Interessante Effekte können Sie auch mit Bitmaps erreichen, die nur ein Bit breit oder lang sind und in der anderen Richtung einen Farbverlauf enthalten, der mindestens das ganze Browserfenster abdeckt. Wird das Attribut background verwendet, sollte zusätzlich auch ein passender Wert für bgcolor angegeben werden.
<body background="struktur.gif" bgcolor="#f0e68c">
Schaltet ein Besucher die Anzeige von Bildern ab, wird ihm wenigstens diese Farbe angezeigt. Soll nur der linke Rand ausgekachelt werden, kann mit dem style-Attribut gearbeitet werden.
<body style="backgroundimage:
url(struktur.gif); backgroundrepeat:
repeat-y">
erzeugt eine Bahn von Kacheln am linken Rand des Fensters.
-
Statisches Zielfenster
Beim Klick auf einen Link öffnet sich ein Zusatzfenster, weitere Links schicken ihre Ausgabe in genau dieses Fenster.
Mit dem Attribut target in einem Verweis-Tag geben Sie das Zielfenster an, in dem die referenzierte Webseite erscheinen soll. Normalerweise kommt die Technik bei Frames zum Einsatz - aber sie kann mehr. Als Attributwert geben Sie target="_ blank" an, damit die Webseite in einem neuen Browser-Fenster erscheint. Haben Sie mehrere derartige Links auf einer Seite, öffnet der Browser jedes Mal ein neues Fenster, das Surfer von Hand wieder schließen müssen. Besser wäre es, wenn der erste Link ein neues Fenster öffnet und alle weiteren Links dieses Fenster "mitbenutzen". Denken Sie an eine Bildergalerie mit Thumbnails, deren Vergrößerung im Zusatzfenster erscheint. Die Lösung: Geben Sie einen beliebigen Text als Target an, bei allen Links denselben. Beim ersten Klick auf einen Link stellt der Browser fest, dass noch kein Fenster dieses Namens existiert, und öffnet eines. Beim zweiten Link gibt es das Fenster bereits, und der Browser ersetzt nur den Inhalt.
-
Suchmaschine: Zugriff verhindern
Mit einem Meta-Tag steuern Sie, ob und wie Suchmaschinen Ihre Webseiten indexieren.
Internet-Suchmaschinen sind auf möglichst aktuelle Datenbestände über Webseiten angewiesen. Deshalb durchforsten spezielle Programme, so genannte Robots (oder Spiders, Crawlers) ständig das World Wide Web. Mit einigen Meta-Tags steuern Sie, ob und wie diese Robots Ihre Webseiten durchsuchen und für die Suchmaschine indexieren. Bedenken Sie aber, dass Sie mit diesen Steuerkommandos der Suchmaschine nur einen Vorschlag machen. Nichts kann eine Suchmaschine daran hindern, Ihre Webseiten trotzdem zu indexieren. Denn die HTML-Datei kann der Robot wie jeder Browser abrufen. Ein Beispiel dafür ist: <head>
<meta ID="robots"
content="index, nofollow">
</head>
Die erste Meta-Angabe erlaubt den Robots, die Webseite zu indexieren (index). Gleichzeitig sollen die Suchmaschinen die Hyperlinks auf dieser Webseite ignorieren (nofollow = nicht folgen). Wenn es sich beispielsweise um die Homepage einer Site handelt, wird der Robot die Unterseiten nicht indexieren. Die Tabelle unten listet die Steuerbefehle der Suchmaschinen auf. Beachten Sie bitte: Nicht alle Robots unterstützen alle Kommandos.
-
Suchmaschinen- Ausschluss
So erreichen Sie, dass untergeordnete Seiten Ihrer Homepage von Suchmaschinen nicht indiziert werden.
Sie haben Ihre Homepage bei Suchmaschinen angemeldet. Doch Sie möchten erreichen, dass einige untergeordnete Seiten von Suchmaschinen nicht gefunden werden. Das erreichen Sie, indem Sie im Head-Bereich der Seite folgendes Meta-Tag notieren:
<meta ID="robots"
content="noindex">
-
Suchmaschinen-Service für Webmaster
Die neue Suchmaschine Seekport stellt mit www . seekport . de/seekbot/ ein Werkzeug zur Verfügung, mit dem Sie Ihre Website auf Suchmaschinentauglichkeit überprüfen. Sie sehen dabei unter anderem, ob Metadaten und hinderliche Seitenelemente vorhanden sind. Eine gewichtete Bewertung erlaubt Ihnen, die Mängel gezielt zu beheben.
-
Suchmaschinen: Sonder-Seiten
Um die eigene Website möglichst leicht auffindbar zu machen, ist es unerlässlich, sich bei Suchmaschinen anzumelden.
Als Site-Betreiber ist man bemüht, dem Besucher auf der Startseite einen Überblick über die Vielfalt des eigenen Angebots zu geben. Beide Ziele lassen sich nur schwer vereinbaren. Denn der Inhalt der Homepage ist oft zu bunt gemischt, um von den Suchmaschinen-Robotern ausreichend gut katalogisiert zu werden. Um diesem Problem Herr zu werden, legt der kluge Webmaster einige so genannte Doorway-Seiten an und meldet diese statt bei der Hauptseite bei den Suchmaschinen an. Ein Beispiel: Die Website steht unter dem Thema Web-Technik und behandelt die Aspekte HTML, JavaScript und Grafikdesign. Um nun bei jedem dieser wichtigen und populären Suchbegriffe weit oben in den Suchmaschinen gelistet zu werden, erstellen Sie für jedes Thema eine eigene Informationsseite und melden diese Seiten einzeln bei den Suchmaschinen an. Von dort aus führt ein Link die Besucher dann auf die eigentliche Homepage. Wie sollte nun eine solche Doorway-Seite aufgebaut sein? Im folgenden Beispiel betrachten wir dazu die Site-Kategorie JavaScript Geben Sie der Seite einen Titel, der das Thema bzw. die Schlüsselbegriffe enthält:
<TITLE>Tipps und Tricks zu JavaScript,
lauffähige Codeschnipsel
und raffinierte Website-Funktionen</
TITLE>
Fügen Sie in den Seitenkopf die Schlüsselbegriffe ein, nach denen voraussichtlich gesucht wird:
<META ID="KEYWORDS"
content="JavaScript, Code, Scripting,
Webfunktionen, Rollover.">
Zudem geben Sie eine passende Beschreibung in Form eines ganzen Satzes:
<META ID="DESCRIPTION"
content="Tipps und Tricks zu JavaScript
für den ambitionierten
Webmaster.">
Im Body der HTML-Seite wiederholen Sie nun den Seitentitel oder einen ähnlichen Text als Überschrift:
<H1> Tipps und Tricks zu JavaScript,
lauffähige Codeschnipsel
und raffinierte Website-Funktionen
</H1>
Da die Seite schnell geladen werden soll, verzichten Sie auf überflüssige Banner und Bilder. Falls Sie ein Bild benutzen wollen, achten Sie darauf, dass Sie im Alt-Parameter wiederum die Schlüsselbegriffe verwenden:
<IMG SRC="einbild.gif"
HEIGHT="80" WIDTH="120"
ALT="JavaScript-Tipps für Webdesigner">
Benutzen Sie zudem Kommentare, um den HTML-Code zu strukturieren, und verwenden Sie innerhalb dieser Kommentare erneut die Schlüsselbegriffe:
<!--Begin JavaScript-Tipps-->
<!--End JavaScript-Tipps-->
Füllen Sie die Seite nun noch mit sinnvollem Inhalt, der wiederum möglichst oft die Schlüsselwörter enthält. Vergessen Sie auch nicht den Link zu Ihrer Hauptseite, denn um diese zu bewerben, haben Sie die Doorway-Seite schließlich angelegt. Erstellen Sie nun auch für die anderen Themenbereiche entsprechende speziell angepasste Seiten. Übermitteln sie diese nun jeweils getrennt den Suchmaschinen, und die Popularität Ihrer Website wird schon bald spürbar steigen.
-
SVG-Grafiken mit variablen Texten
SVG - Scalable Vector Graphics - ist ein Datenformat für Grafiken, das als reine XML-Anwendung entwickelt wurde. Hersteller von Grafikprogrammen wie Adobe und Corel unterstützen dieses Format in wachsendem Umfang. Wer beispielsweise die Navigationsinstrumente seiner Seite in ein aufwändig gestaltetes grafisches Band einfügen möchte, kann in Adobes Illustrator segmentierte Grafiken erstellen und im SVG-Format an GoLive übergeben. Wenn für diese Segmente variable Texte vorgesehen sind, lassen sich die gewünschten Werte direkt über den GoLive-Inspektor für das ausgewählte Segment eingeben.
-
SVG: das vergessene Grafikformat
SVG (Scalable Vector Graphics) ist seit 2001 eine auf XML basierende Auszeichnungssprache. Es handelt sich um einen Standard des World Wide Web Consortiums für eine neue und effektive Internetprogrammierung. Bisher konnten Sie zweidimensionale und skalierbare Vektorgrafiken und -animationen nur mit Flash gestalten. Leider wird das SVGFormat immer noch nicht von allen Browsern unterstützt.
http://svg.tutorial.aptico . de
-
Testumgebung ohne Suchmaschineneintrag
Wenn Sie verhindern möchten, dass Crawler Seiten automatisch indizieren, sollten Sie wie folgt vorgehen: Sind diese noch nicht für die Öffentlichkeit gedacht, sollten die URLs nicht von Suchmaschinen indiziert werden können. Geben Sie in den <head> des Dokuments <meta ID="robots" content="noindex, nofollow"> ein und schreiben Sie die Datei robots.txt. Den Aufbau dieser Textdatei beschreibt die Site: www . robotstxt . org/wc/ norobots.html
-
Textänderungen markieren
Markieren Sie Änderungen in Webseiten, um später die Originalfassung rekonstruieren zu können.
HTML sieht Tags vor, mit denen Sie gelöschte oder neu eingefügte Stellen im Text markieren. Mit diesen Text geben Sie das Datum der Änderung und einen Verweis auf zusätzliche Details an. Die aktuellen Browser sind sich bei der Darstellung ausnahmsweise einig: Gelöschter Text erscheint durchgestrichen, eingefügter unterstrichen. Das Tag <ins> ist fürs Einfügen zuständig, <del> fürs Löschen. Ein gelöschtes Wort markieren Sie so:
<del cite="http://www . domain . de/aende rung/kommentar.htm"
datetime="2003-07-11T13:15:30Z"
title="Gelöscht am 11.7.2003">
Sebastian </del>
Über das Attribut cite geben Sie den URI eines Dokuments oder eine Nachricht an. Der Attributwert soll Informationen liefern, die den Grund für die Änderung erklären. Momentan wertet nur Netscape/Mozilla dieses Attribut aus, allerdings höchst eigenwillig: Der Surfer muss die markierte Stelle mit der rechten Maustaste anklicken und im Kontextmenü Eigenschaften wählen. Dann zeigt der Browser ein Dialogfeld an, in dem der Attributwert von cite aufgeführt ist. Das Datum (und die Uhrzeit) geben Sie mit dem Attribut datetime an. Dabei kommt das in HTML übliche Format für Datums- und Zeitangaben zum Einsatz. Damit auch die Benutzer aktueller Browser Details zur Markierung erfahren, nutzt das Beispiel das Universalattribut title. Die Browser stellen den Attributwert als ToolTip-Fenster dar, wenn der Mauszeiger über dem markierten Objekt verweilt. So können die Surfer die Änderungshinweise leicht nachvollziehen. Es lohnt also, sowohl cite als auch title zu nutzen.
-
Tiefe Ausblicke auf CSS 3
Es dauert zwar noch ein wenig, bis CSS 3 freigegeben wird, dennoch können sich Interessierte bereits jetzt über die wichtigsten Neuerungen und Erweiterungen informieren (www . w3 . org/Style/CSS/current-work). Besonders Features wie das mehrspaltige Layout, alternative Auszeichnungen von Hyperlinks und flexiblere Selectors erhöhen die Gestaltungsoptionen eines Webdesigners.
-
title- und alt-Attribut
Hier sehen Sie, wie obige Attribute W3C-konform einzusetzen sind.
Einige Browser, wie z.B. Internet Explorer und Netscape, stellen den Wert für das alt-Attribut als Tool-Tip dar, wenn der Benutzer den Cursor über das entsprechende Bild hält. Dies entspricht jedoch nicht der vorgesehenen Verwendung des alt-Attributs. Dessen Wert, d.h. der zugewiesene Text (alt = ,,alternativer Text"), soll als Alternative zu einem Bild dargestellt werden, nämlich dann, wenn der Betrachter das Bild nicht sieht. Benutzen Sie dagegen das Attribut title, insofern Sie zusätzliche Informationen zu einem Bild oder auch zu anderen HTML-Elementen wie Hyperlinks anbieten möchten. Der Inhalt des title-Attributs wird immer als Tool-Tip dargestellt, auch in Kombination mit dem alt-Attribut. Sie verhindern auf diese Weise, dass der Wert des letzteren in den o.g. Browsern als Tool-Tip erscheint.
<img src = ,,Urlaub.jpg" alt = ,,hier kommt ein Bild" title = ,,Bilder von meinem letzten Urlaub" border="0">
-
Tool-Tipp überall
Mit den Attributen title und alt statten Sie die Elemente Ihrer Webseiten mit Tool-Tipps aus, die beim überfahren mit der Maus erscheinen.
In HTML 4.0 gibt es ein neues Universalattribut, das Sie in jedem HTML-Tag verwenden dürfen (auch wenn es nicht überall Sinn macht). Mit dem Attribut title="" realisieren Sie die unter Windows oft anzutreffenden Tool-Tipps: Sobald der Mauszeiger kurze Zeit ruhig über einem Element steht, erscheint in einem kleinen gelben Fenster ein kurzer Erklärungstext. Praktisch sieht das folgendermaßen aus:
<a href="http://www.prisodi.de"title="Hier geht's zum Weblexikon">Weblexikon</a>
Das funktioniert auch bei Bildern oder mit einer Tabelle. Die Länge des Textes ist nicht beschränkt. So könnten Sie etwa bei Bildern eine umfangreiche Beschreibung unterbringen. Der Nachteil: Das Verfahren funktioniert zwar mit Internet Explorer, Opera 5.x und Netscape 6, aber nicht mit älteren Netscape-4.x-Browsern. Zumindest bei Bildern kann man das ausgleichen: Hier gibt es das alt-Attribut, das Sie immer einsetzen sollten. Der Text, den Sie mit alt angeben, erscheint im Browser während des Ladevorgangs eines Bildes oder wenn das Bild nicht geladen werden konnte. Um kompatibel zu sein, setzen Sie beide Attribute ein. Allerdings ist es bei alt angebracht, kurze Texte zu verwenden: Normalerweise sind Zeilenumbrüche in HTML ohne Bedeutung. Allerdings sollten Sie den Text innerhalb der Anführungszeichen bei title="" in eine Zeile schreiben. Sonst übernimmt der Internet Explorer den Zeilenumbruch in den Tool-Tipp. Leider reagiert Netscape 6 sehr empfindlich und fügt statt dessen ein paar unleserliche Sonderzeichen in den Tool-Tipp ein. Und Opera ignoriert den Umbruch.
-
Tooltips für Verweise
Mozilla und Firefox unterdrücken die veraltete Methode zur Anzeige von Tooltips in Webseiten.
Jeder Windows-Anwender kennt sie: die kleinen gelben Fenster, die erscheinen, wenn man den Mauszeiger zum Beispiel über einer Symbolleiste einige Sekunden verweilen lässt. Diesen Effekt können Sie auch auf Webseiten für fast jedes Objekt einsetzen. Das Universalattribut title ist nach dem HTML-Standard genau dafür vorgesehen. Die folgenden Zeilen
<a href="http:..." title="Zur Startseite"> Link </a>
bewirken, dass der Text Zur Startseite als Tooltip erscheint. Das gelingt auch bei <img>Tags, Überschriften und vielen anderen Tags. Das klappt mit so ziemlich allen relevanten Browsern, nur ältere Netscape-Versionen spielen nicht mit. Es gibt noch einen anderen Weg, um solche Tooltips zum Beispiel für Bilder zu erzeugen. Das Attribut alt ist eigentlich für eine Bildbeschreibung gedacht, die der Browser alternativ anzeigt. Das ist bei Übertragungsfehlern sinnvoll, oder wenn etwa Sehbehinderte eine Webseite mit einem Seitenleser abtasten. Netscape 4 und Internet Explorer zeigen den Text zusätzlich als Tooltip an. Dies widerspricht aber dem HTML-Standard, weshalb Mozilla und Firefox keinen Tooltip anzeigen Sie sollten deshalb diese Variante nicht einsetzen. Opera 7.5 geht mit Tooltips recht eigenwillig um. Zum einen ignoriert der Browser wie Mozilla das alt-Attribut. Zum anderen erscheinen Tooltips hier nicht als kleines gelbes Fenster, sondern in der Statuszeile. Und Sie sollten genau darauf achten, wo Sie das title-Attribut einsetzen. Denn Opera vererbt den Tooltip nicht an untergeordnete Elemente. Ein Beispiel:
<li title="Eine lange Erklärung ..."> Tooltip mit <em>title</em> </li>
-
Topaktuelle Virennews
Um die eigene Homepage mit Mehrwert auszustatten, implementieren viele Webmaster fremde Zusatzinhalte, wie etwa Stadtpläne oder Newsticker. Ein interessantes und zugleich informatives Add-On bietet Trendmicro, Hersteller von Anti-Virus-Software, an. Nach der Anmeldung auf der Seite de.trend micro-europe.com/consumer/security_info/ add_virus_info.php können Sie eine Viren Infobox in Ihre Webseite einbauen. Diese informiert alle Besucher über die fünf derzeit aktuellsten Viren und stellt auch Links zu Hintergrundinfos zur Verfügung. Wichtiges Kriterium: Der Service ist kostenlos.
-
Transparente Platzsparer
Mit transparenten Bereichen in Bildern reduzieren Sie die Datenmenge.
Wenn Sie freigestellte Bilder verwenden, etwa eine Person ohne Hinter- grund, sollten Sie mit transparenten gif-Bildern arbeiten. Dies ist beispielsweise für Bilder mit weißen Flächen sinnvoll, wenn Sie ohnehin vor einem weißen Bildhintergrund arbeiten. Der Unterschied macht sich bemerk-bar: Während das Ausgangsbild, das die gesamte Fläche einnimmt, auf eine Größe von 41 KByte kommt, genügen dem Bild ohne Hintergrund 25 KByte.
-
Tray-Icon mit Menü
Mit wenigen Zeilen Quellcode statten Sie Ihr Tray-Icon mit einem Menü aus.
Tray-Icons sind Sinnbilder in der Notification Area der Task-Leiste. Sie erfreuen sich großer Beliebtheit, doch leider sind die zugehörigen Objektmenüs nicht ganz leicht zu implementieren. Folgen Sie der Dokumentation, schlagen jedenfalls alle Versuche fehl. Sie ist nicht nur unvollständig und falsch, die zu verwendende API-Funktion selbst arbeitet obendrein auch noch fehlerhaft.
tray.c zeigt den kompletten und funktionierenden Code für die Anzeige eines Objektmenüs für ein Tray-Icon.
-
Tunneleffekt und Seitenaktualisierung
Per Meta-Tag refresh lassen Sie entweder dieselbe Seite neu laden oder leiten den Besucher auf eine weitere Webseite.
Die erste Variante ist besonders wichtig, wenn Sie häufig die Inhalte einer Webseite aktualisieren. Dies ist beispielsweise der Fall, wenn Sie Aktienkurse veröffentlichen oder Bilder zeigen, die eine Webcam liefert. Wird dieselbe Seite neu geladen, verhindern Sie, dass der Webbrowser Ihres Besuchers unter Umständen eine veraltete Version aus dem Cache lädt. Fügen Sie folgendes Tag in den <head> Ihres Dokuments ein:
<meta http-equiv="refresh" content="10">
Mit der Anweisung content="10" bestimmen Sie, dass nach zehn Sekunden die Seite im Browser neu geladen wird. Geben Sie hier den Wert ,,0" an, wenn die Seite sofort aktualisiert werden soll. Mit der zweiten Variante entwickeln Sie einen so genannten Tunneleffekt. Durch eine vorgeschaltete Seite können Sie so beispielsweise Ihren Besucher begrüßen. Nach einer festgelegten Dauer wird dann die nächste Seite, wie etwa die eigentliche Homepage, geladen.
<meta http-equiv="refresh" content="20;URL= http://www . prisodi.de">
Das Beispiel lädt nach 20 Sekunden (content="20") die Homepage von PriSoDi. Ist diese Zielseite auf dem gleichen Server gespeichert, können Sie auch absolute oder relative Pfadangaben benutzen. Das richtige Timing ist wichtig! Eine sofortige Umleitung ist sinnvoll, wenn Sie mit Ihrer Website umgezogen und nun unter einer neuen Domain im Web zu finden sind. Enthält Ihre Begrüßungsseite jedoch große Bilder oder Animationen, die ohnehin etwas länger brauchen, bis Sie fertig geladen sind, sollten Sie den Zeitrahmen großzügiger planen. Damit ungeduldige Besucher nicht warten müssen, sollten sie per Hyperlink zur weiteren Seite springen können. Diesen sollten Sie ohnehin setzen, da in einigen Browsern die automatische Weiterleitung überhaupt nicht funktioniert. Auch sollten Sie beachten, dass einige Suchmaschinen Webseiten mit dem Meta-Tag refresh nicht indizieren.
-
Tutorial für SVG-Vektorgrafik
Die Beschreibungssprache SVG für Vektorgrafiken führt ein Schattendasein, obwohl sie wie (X)HTML vom W3C stammt. Eine gute deutschsprachige Dokumentation nach dem SELFhtml-Schema gibt es unter www . selfsvg . info. Spätestens mit dem neuen Windows Longhorn wird SVG interessant, denn die Oberfläche soll Vektorgrafiken unterstützen.
-
Überflüssige Font-TAGs
Homepages, die mit WYSIWYG-Webeditoren geschrieben werden, hängt oft Datenmüll an. Wenn z.B. nicht mit Stylesheets, sondern per HTML Webtexte formatiert werden, passiert es, dass geschachtelte Font-TAGs den Sourcecode unnötig aufblähen. Gute Webeditoren haben einen Validator, der prüft, ob der Code sauber ist. Bei Dreamweaver gibt es z.B. in dem Dropdownmenü unter Command die Auswahl Clean Up HTML.... Das folgende Dialogfenster bietet eine ganze Reihe Aufräumaktionen zur Auswahl an.
-
Umbruch steuern
Führen Sie Trennstellen für lange Wörter ein, die in schmalen Browserfenstern lesbar sein sollen.
Bei langen Wörtern franst Text am rechten Rand aus, wenn ein Wort entweder ganz oder gar nicht in die nächste Zeile wandert. Eine Silbentrennung wie bei Word gibt es nicht. Blocksatz zerrupft diese Zeilen. HTML 4.0 trennt jedoch mit dem Zeichencode ­ am Ende einer Zeile zeigt der Browser so an dieser Stelle ein Trennzeichen (-) und bricht um. Das funktioniert mit dem IE ab Version 4.0 sowie Opera ab 7. So trennen Sie ein langes Wort:
Donau­dampf­schiff­fahrts&s hy;gesell­schafts­kapitän
Der Nachteil: Firefox kann sich mit den Trennstellen nicht anfreunden, es erfolgt kein Umbruch.
-
Umlaute definieren
Betriebssysteme definieren Umlaute auf ihre eigene Art. HTML bietet dafür eine allgemeingültige Konvention.
Tippen Sie Umlaute niemals direkt ein, wenn Sie für Ihre HTML-Seiten einen ASCII-Editor verwenden. Die Zeichensätze der Betriebssysteme unterscheiden sich in den Umlauten und Sonderzeichen voneinander. Wenn Sie unter DOS ein ü eintippen, sehen Sie in einem Windows-Browser nur ein Kästchen. Der HTML-Standard sieht für Umlaute und Sonderzeichen spezielle Zeichenfolgen vor, die mit einem &-Zeichen beginnen und mit einem Semikolon enden (siehe Tabelle unten). Achten Sie auf die korrekte Schreibweise, vor allem auf Groß- und Kleinbuchstaben. Eine komplette Liste aller HTML-Sonderzeichen finden Sie im WWW:
www . sandia . gov/sci_compute/symbols . html
-
Umleitung per Frameset
Wie lässt sich erreichen, dass nach der Umleitung auf einen neuen Server die URL des alten in der Adresszeile erscheint?
Bei einem Server-Umzug ändert sich die Adresse zum Beispiel, wenn Sie von einem kostengünstigen Angebot mit wenig Webspace zu einem kommerziellen Provider wechseln. Sie können zwar eine automatische Weiterleitung einrichten, doch dann erscheint in der Adresszeile die neue, unter Umständen recht lange URL. Sie können mit einem kleinen Trick die bisherige URL in der Adresszeile anzeigen lassen. Dazu erzeugen Sie ein Frameset aus zwei Spalten oder Reihen, bei dem Sie dem ersten Frame die Breite bzw. Höhe von einem Pixel geben. Dem zweiten überlassen Sie den Rest des Bildschirms ("*"). Weisen Sie beiden Frames Nullwerte für Framespacing und Frameborder zu, und verhindern Sie im ersten Frame Resize und Scrolling. Dieser erste Frame verweist auf eine leere HTML-Datei, der andere auf die aktuelle Internet-Seite. Wegen des Framesets bleibt die Ursprungsadresse in der Adresszeile stehen. Dieser Effekt wird auch genutzt, wenn Seiten eines Angebots auf verschiedenen Servern ausgelagert sind, die Adressen außerhalb des Hauptservers aber nicht gebookmarkt werden sollen.
-
Universelle Tool-Tipps
Die in erster Linie bei der Auszeichnung von Grafiken zum Einsatz kommenden Tool-Tipps lassen sich auch bei weiteren Seiten-Elementen einsetzen.
Erfahrene Web-Designer nutzen bei allen eingebundenen Grafikelementen das ALT-Tag konsequent aus, um dem Besucher bei eventuellen Übertragungsproblemen zumindest eine Beschreibung des Bilds anzuzeigen. Die wenigsten wissen aber, dass sich diese Hinweistexte nicht nur mit Hilfe des ALT-Tags realisieren lassen, sondern auch bei Komponenten wie Separatoren, Überschriften, Textblöcken und sogar Tabellen verwendet werden können. Möglich wird dies durch das fast nur bei der Auszeichnung von Hyperlinks eingesetzte TITLE-Tag. Wollen Sie beispielsweise die Überschrift von PriSoDi um den entsprechenden Tool-Tipp "Das ist die Überschrift PriSoDi" erweitern, sieht der Quellcode folgendermaßen aus:
<font size="7" title="Das ist die Überschrift PriSoDi"> PriSoDi </font>
-
Unsauberen Code feintunen
HTML-Editoren erzeugen häufig aufgeblähten HTML-Code. Es lohnt sich fast immer, nachträglich Hand anzulegen.
Zu den Musterbeispielen für eigenwillige HTML-Befehle bzw. eine nicht durchgehend saubere Interpretation der W3C-Richtlinien zählen beispielsweise Adobe PageMill und Microsoft Front-Page 97. Durchforsten Sie hier unbedingt den Code, und passen Sie eigenwillige Tags an. Vorsicht: In beiden Fällen schreiben die HTML-Editoren einige Befehle ungefragt um, FrontPage etwa Imagemaps. Nehmen Sie deshalb die Korrekturen in einem anderen Editor vor, damit Front-Page nicht erneut die Korrekturen wi-derruft. Der Code, den FrontPage 98 schreibt, hängt von den Voreinstellungen ab: Teilweise erzeugten wir mit FrontPage sogar kleinere Testdateien als mit HomeSite 4.0, der den anerkannt saubersten Code aller uns bekannten HTML-Editoren liefert. Generell können Sie die <META>-Tags über den benutzten Editor, Einrückungen, Leerzeichen und - notfalls - auch Kommentare gefahrlos streichen. Einige HTML-Editoren wie Home-Site und HoTMetaL Pro bieten eine sehr gute integrierte Überprüfung der HTML-Tags an. Daneben finden Sie im Internet kostenlose HTML-Prüfprogramme. Beachten Sie: Nicht jede der angemahnten Kodierungen führt dazu, daß Ihre Seite fehlerbehaftet in den Browsern erscheint. Denn Browser sind ziemlich fehlertolerant und nehmen kleine Sünden nicht unbedingt krumm: Wenn Sie etwa einen Abschluß-Tag vergessen, kümmert das den Browser wenig. Dennoch sollten Sie sich an die Konventionen des W3C-Konsortiums halten, die Sie unter
www . w3c . org
finden. Damit steigt nämlich die Wahrscheinlichkeit, daß auch künftige Browser-Generationen Ihre Seiten einwandfrei interpretieren werden. Wer seine Dokumente überprüfen will, ob Sie den W3C-Richtlinien entsprechen, sollte die Seite
www . w3 . org/TR/REC-html40
besuchen. Hier finden Sie zudem viele praktische Beispiele und ausgezeichnete Erklärungen. Das Prüf-Tool Doctor HTML, mit dem Sie Web-Sites nach genauen Vorgaben analysieren, bekommen Sie unter
http://imagiware.com/RxHTML
Lohnenswert ist auch der WebTechs Validation Service:
www . webtechs . com/html-val-svc
Mit der Nacharbeit erreichen Sie nicht nur eine Verschlankung des Codes, sondern sorgen auch dafür, daß die damit erzeugten Seiten in allen gängigen Browsern erscheinen.
-
Unsichtbare Frames
Sie möchten Frames zur Gliederung Ihrer Seite einsetzen, aber der hässliche graue Rahmen stört Sie.
Unter Homepage-Bastlern meist verpönt und verspottet, verbessern Frames die Darstellung und die Navigation. Während Sie in einem Rahmen Ihre Navigationsleiste platzieren, die dadurch ständig im Blickfeld ist und nur einmal geladen werden muss, werden nach Klick auf letztere die zugehörigen Inhalte im Haupt-Frame dargestellt. Das spart Ladezeit und Bastelarbeit. Sie können nun Scrollbalken und Leisten so verstecken, dass der Besucher auf den ersten Blick keine Rahmenstruktur erkennt. Laden Sie dazu Ihre Homepage mit einem HTML- oder Text-Editor. Nun können Sie den Quellcode bearbeiten. Mit den Attributen frameborder= "NO", border="0" und framespacing=" 0" verhindern Sie die Darstellung der unschönen Rahmen, mit scrolling=" NO" werden auch die Rollbalken unsichtbar, und letztlich sorgen Sie mit noresize für eine stets identische Rahmenfenstergröße. Der Quellcode könnte so aussehen:
<frameset cols="200,85%" rows="*" frameborder="NO">
<frame src="linkerframe.html" ID="links" scrolling="NO" frameborder="NO" noresize>
<frameset rows="120,520*" frameborder="NO" border="0" framespacing="0" cols="*">
<frame src="obererframe.htm" ID="oben" scrolling="NO" frameborder="NO" >
<frame src="zielframe.html" ID="ziel" scrolling="AUTO" frameborder="NO" bordercolor="#FFFFFF">
</frameset>
</frameset>
In Zukunft vereint Ihre Homepage die bequemen Navigationseigenschaften der Frametechnik und das zeitgemäße Chic des Webdesigns. Beachten Sie, dass sich auch auf kleineren Displays sämtliche Fensterinhalte immer vollständig darstellen: Das gilt insbesondere für den Zielframe, der im Quelltext mit dem Attribut scrolling="AUTO" versehen sein sollte. Er zeigt bei Bedarf einen Rollbalken an.
-
Unsichtbare Tabellenränder
Sie erhöhen die Aufmerksamkeit für Ihre Seiten mit einem ansprechenden Layout.
Eine Tabelle mit Rändern gestalten Sie per border-Attribut im <table>-Tag mit einem Wert größer Null wie <table border = ,,1">. Dabei zeigen die meisten, auch neuere Browser standardmäßig Tabellenzellen ohne Inhalt ohne Rand an. Es hilft schon, ein non breaking space ( ) in die leeren Tabellenzellen einzufügen. Damit zeigen Sie nicht nur alle Tabellenzellen entsprechend der border-Vorgabe mit Rand an, sondern verhindern zugleich, dass möglicherweise auch die Hintergrundfarbe für eine Zelle entfällt. So lassen ältere BrowserVersionen wie die von Netscape die Hintergrundfarbe von leeren Tabellenzellen einfach weg.
-
Validator auf deutsch
Fehler in Webseiten gefährden bei modernen Browsern zunehmend die saubere Darstellung - ein Online-Validator schafft Abhilfe.
Moderne Browser halten sich immer mehr an die W3C-Standards und reagieren auf Code-Fehler mit Darstellungsproblemen. Ein Validator überprüft den Code der Webseite auf Abweichungen vom Standard. Am bekanntesten dürfte das W3C-Angebot sein:
http://validator . w3 . org
Die englischen Ergebnisse sind aber nicht jedermanns Sache. Einen vergleichbaren Service auf deutsch gibt es bei Validome:
www . validome . org
Sie geben wahlweise eine URL mit der fraglichen Webseite an oder laden eine HTML-Datei von Ihrer Festplatte hoch. Die Ergebnisse dieser Untersuchung sehen Sie dann. Validome beherrscht HTML, XHTML, WML und XML.
-
Verbindungsgeschwindigkeit
Die Site www . speedmeter . de misst Ihre Internet-Verbindung. Wählen Sie in der linken Navigation Speedtest, und lassen Sie die Option Download aus Deutschland aktiviert. Es empfiehlt sich, die anderen Optionen gegebenenfalls zu deaktivieren. Nach Klick auf Test starten sehen Sie unter der Spalte Ergebnis die aktuelle Übertragungsgeschwindigkeit. Auf die gleiche Weise können Sie auch Ihre Upload-Geschwindigkeit testen (Option Upload). Wundern Sie sich nicht, wenn die Ergebnisse geringfügig variieren: Die Verbindungsgeschwindigkeit ist ebenso wie die Upload-Geschwindigkeit gewöhnlich von unterschiedlichen Parametern abhängig.
-
Verdeckte Formulareingabe
Möchten Sie einen Bereich Ihrer Homepage durch ein Passwort schützen, sollten Sie nicht vergessen, die Eingabe zu verdecken.
Bei der Eingabe von Benutzernamen und Passwort zeigt der Browser nur die erste Benutzereingabe im Klartext an; im Passwort-Feld sieht der Besucher hingegen nur ***. Dafür zuständig sind die beiden <input>-Parameter text und password.
<input ID="Benutzername" size="20"
type="text">
<input ID="Passwort" size="10"
type="password">
-
Vertikale Trennlinien
Anstatt Seitenelemente durch CSS-Formatierungen oder JavaScript zu gliedern, können Sie auch ungewöhnliche vertikale Trennlinien einsetzen.
Webdesigner, die bestimmte Seitenelemente durch vertikale Linien hervorheben möchten, suchen vergeblich nach einem Tag wie <vr>. Um dennoch Elemente, etwa Textabschnitte, mit senkrechten Linien abzuteilen und hervorzuheben, müssen Sie zu einem Trick greifen: Verwenden Sie farbige Tabellenzellen, den Befehl spacer und das Attribut justify. Sehr hilfreich: Die Länge der vertikalen Linien passt sich automatisch an die Höhe des Textblocks an. Der Code des auf dem Bildschirmfoto zu sehenden Textblocks sieht so aus:
<table width="68%" cellpadding=0
align="center" cellspacing="4"><tr>
<td width=3 bgcolor="red">
<spacer type="block" width=1> </td>
<td> <p align="justify">Lauftext</p>
</td>
<td width=3 bgcolor="red">
<spacer type="block" width=1></td>
</tr> </table>
-
Verzögerter Zugang
Die im Kopf einer Webseite verwendeten Meta-Tags erlauben ein Attribut http-equiv, mit dem der Webserver veranlasst werden kann, bestimmte Kopfzeilen zu erzeugen, die den Austausch über das http-Protokoll steuern. Dies kann genutzt werden, wenn dem Webbesucher zunächst als Visitenkarte kurzfristig ein Intro angeboten werden soll und erst dahinter die eigentliche Homepage.
<<meta http-equiv="refresh" content="15;URL=folgeseite.html">
Der erste Wert gibt die Wartezeit in Sekunden an, die bis zum automatischen Laden der mit URL angegeben Seite verstreichen soll.
-
Video-Einstellungen ausprobieren
Die richtige Komprimierungseinstellung für Videos ist selten die voreingestellte: Hier hilft nur Ausprobieren.
In jedem Videoschnittprogramm wählen Sie beim Speichern unter ver-schiedenen Software-Komprimierungsarten, mit denen Sie deutlich unter-schiedliche Ergebnisse erhalten. Generell lohnen sich mehrere Versuche mit unterschiedlichen Komprimierungsarten und -einstellungen. Im Zweifel ent-scheiden Sie sich für die bewährte Methode Cinepak, die die meisten Profis verwenden. Die Komprimierung selbst dauert zwar oft länger als mit anderen Verfahren, die Ergebnisse können sich aber trotz starker Verdichtung sehen lassen.
-
Vorgefertigte E-Mails per Mausklick
Viele Websits setzen vordefinierte E-Mails ein, um den Besuchern ein Feedback
zu der Homepage zu erleichtern. Das alles lässt sich mit wenigen Variablen realisieren.
Sobald der Surfer auf einen Email-Link klickt, startet der favorisierte E-Mail-Client
automatisch mit einer neuen Nachricht. In dieser sollen wichtige Kontaktparameter
bereits eingetragen sein: die E-Mailadresse des Webseitenbetreibers und ein Betreff.
Der Besucher hat nur noch den eigentlichen Feedback-Text einzugeben.
Der erste Schritt besteht darin, dass Sie einen E-Mail-Link definieren
und diesen um die Betreffzeile der Nachricht erweitern. Das geschieht
mit der Variablen ?subject. Um dem Homepagebetreiber einer Webseite eine Mail
mit dem Betreff "Meine Meinung zu Ihrem Web-Angebot" zukommen zu lassen,
erweitern Sie den Quelltext um diese Zeilen:
Lob und Poebeleien
Doch damit nicht genug. Auch der Inhalt der Mail lässt sich gezielt festlegen.
Soll die E-Mail gleich eine Anrede enthalten, greifen Sie auf die
Variable ?body zurück. Wichtiger Tipp: Die verschiedenen Variablen lassen sich
jederzeit mithilfe des logischen Operators & verknüpfen. In diesem Beispiel sieht der
HTML-Quell-Code genau so aus:
Lob und Poebeleien
%0A erzwingt dabei einen Zeilenumbruch. Als 3. sinnvolle Erweiterung bietet es sich an,
Kopien der Mails an einen oder mehrere Accounts zu versenden. Kopien einer Nachricht
verschicken Sie per cc (Carbon Copy) oder bcc (Blind Carbon Copy). Erweitern Sie also
den Quelltext um die Variablen ?cc und ?bcc. Die einzelnen Adressen trennen Sie,
wie bei vielen Mail-Clients üblich, per Komma:
Lob und Poebelei
-
Vorschau auf größere Bilder
Wenn Sie Bilder mit der Option interlacedspeichern, erhält der Surfer sofort einen groben Eindruck des Bilds. Es wird dann in mehreren Durchgängen immer feiner aufgebaut.
gif-Bilder können Sie in den meisten Bildbearbeitungsprogrammen mit der Option interlaced speichern. Dies empfiehlt sich insbesondere bei größeren Bildern, weil der Surfer sofort einen ersten groben Eindruck des endgültigen Bilds erhält, das in mehreren Durchgängen zum Bild in voller Auflösung wird. Nachteil dabei: Die Bilddateien werden gegenüber dem Verfahren non interlaced um ungefähr zehn Prozent größer. Bei kleinen Bilder bis 10 KByte verwenden Sie daher non interlaced.
-
Vorsicht mit Negativschrift
Vermeiden Sie Negativschrift: Helle (weiße) Schrift auf dunklem (schwarzen) Hintergrund benötigt optisch mehr Raum.
Wegen der unterschiedlichen Wirkung von Negativschrift sollten Sie sie als Grundschrift möglichst vermeiden. Wollen Sie dennoch nicht darauf ver-zichten, wenden Sie einen Trick an: Um zu eng laufende Schrift etwas zu spatio-nieren (den Abstand zwischen den Buchstaben vergrößern), verwenden Sie transparente 1-Pixel-Bilder.
-
Wandernder Tabelleninhalt
Wer komplexe Tabellenlayouts im HTML-Editor bearbeitet, verliert schon mal den Überblick. Schnell ist zum Beispiel eine Zeile Text getippt, die nicht innerhalb von td-Tags steht. Dieser Text erscheint nicht etwa an einer falschen Stelle in der Tabelle, sondern über der Tabelle. Das passiert auch mit allen anderen Elementen, etwa Bildern. Tritt ein solches Phänomen bei Ihnen auf, sollten Sie bei der Fehlersuche entsprechend systematisch vorgehen.
-
WASP Kampf für einen Standard im Web
Nur wenn standardisierte Web-Technologien eingesetzt werden und somit den festgelegten Kriterien genügen, kann eine Site möglichst vielen Nutzern zugänglich sein. Das 1998 gegründete Web Standards Project unterstützt W3C-Standards und sorgt für deren Verbreitung. Unter www . webstandards . org erhalten Sie weitere Informationen, auch zum Acid2-Test, den die heutigen Browser bestehen sollten.
-
Webhosting: Geht nicht gibt's!
Webhosting-Pakete übertreffen sich mit Funktionen|Features: Speicher im GigaByte-Bereich, Datenbanken und Script-Ausführung gaukeln vor, dass Sie fast alles auf und mit Ihrer Website machen können. Das ist oft ein Trugschluss, weil Einschränkungen verborgen sind. So limitieren fast alle Webhoster Rechenzeit und Arbeitsspeicher, die einem Script zur Verfügung stehen. Das ist sinnvoll, denn wenn hundert Kunden sich einen Server teilen, können nicht einige wenige den Prozessor blockieren. In der Regel macht sich die Beschränkung nicht bemerkbar. Zum Problem kann sie werden, wenn Sie eine Anwendung wie etwa ein Content Management System installieren wollen. Denn dieses benötigt in Ausnahmefällen ein Vielfaches des dem Script zur Verfügung stehenden Speichers. Schon das Backup einer Datenbank scheitert oft an den Speichergrenzen. Glücklicherweise gibt es Tools, die das Backup splitten. Bei rechenintensiven Anwendungen hilft oft nur ein kulanter Provider oder der Wechsel auf einen eigenen Server.
-
Webhosting: Ihr erster Server
Bei einem günstigen Webhoster teilen sich viele Benutzer einen Server. Da die Daten jedes Kunden vor den anderen Mietern geschützt werden müssen, bleiben Rechte und Funktionen begrenzt, was viele Webtüftler hinderlich finden. Mehr Freiheit verspricht der eigene Web-Server: Sie installieren beliebige Software, bringen fast unbegrenzt Benutzer und Domains unter, und Sie haben eine eigene feste IP-Adresse. Neben dem Geld für die monatliche Miete fehlt häufig die Erfahrung. Hier hilft ein virtueller Server weiter. Die eigene Website läuft so gut wie beim Webhoster. Das günstigste Angebot dürfte zurzeit wohl Xantron (www . xantron . de) bieten. Für monatlich 2,99 Euro erhalten Sie 1000 MByte Speicherplatz und 5000 MByte freien Datentransfer. Und eine .de-Domain ist auch dabei.
-
Webseite drucken
Die Druckfunktion des Browsers können Sie einfach in einem Hyperlink übernehmen bzw. aufrufen. Geben Sie <a href="JavaScript:win dow.print()">Seite drucken</a> in den Quelltext ein. Klicken Sie im Browser auf diesen Link, wird das bekannte Dialogfenster Drucken geöffnet, in dem Sie wie gewohnt die Drucker-Eigenschaften einstellen.
-
Webseiten-Aktualisierungen
Über META-Tags im Seitenquelltext stellen Sie eine automatische Aktualisierung sicher.
Wenn Sie Ihren Besuchern stets die aktuellste Seitenversion anbieten möchten, so müssen Sie sicherstellen, dass der Benutzer Ihre Seiten nicht aus seinem Browser-Cache beziehen wird. Um dieses Verhalten zu erzwingen, müssen Sie zwei META-Tags in Ihren Seitenquelltext einfügen. Mit Pragma geben Sie an, ob die Seite zwischengespeichert oder im Cache eingelagert wird. Setzen Sie hier einen Wert content='no-cache', so verbieten Sie eine Zwischenspeicherung. Der zweite Parameter Expires gibt an, ab wann die Seite als veraltet gewertet werden soll. Setzen Sie hier ein Datum weit aus der Vergangenheit, so stellen Sie sicher, dass die Webseite grundsätzlich nachgeladen werden muss. Das folgende Beispiel verwendet die beiden META-Tags so, wie Sie diese direkt im HEAD-Bereich einsetzen können:
<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="Fri, 05 Mar 1999 06:00:00 GMT">
-
Welcher Browser kann was?
Unter http://webmonkey.wired . com/web monkey/reference/browser_chart finden Sie eine tabellarische Übersicht der Features, die Browser interpretieren können. Ältere Browser können nicht alle Elemente, wie beispielsweise Inline-Frames, Java oder XML, darstellen.
-
Wer verlinkt auf eine Webseite?
Sie haben das Gefühl, dass irgendwelche Webseiten auf Ihre Homepage verlinken und so Ihre Ressourcen missbrauchen. Sie können herausfinden, welche Seiten das sind.
Es kommt häufig vor, dass Webmaster auf andere Seiten verlinken, ohne den Betreiber der Zielseite darüber zu informieren oder einen entsprechenden Copyright-Hinweis zu geben. Wollen Sie in Eigenregie untersuchen, welche Seiten auf Ihr Angebot verweisen, sollten Sie z.B. die Meta-Suchmaschine Dogpile (www . dogpile . com) aufsuchen und als Suchbegriff den String
link:http://www.meine-Seite.de/
eingeben. Die gleichen Ergebnisse erzielen Sie mit Google (www . google . de). Hier müssen Sie auf der Startseite dem Link Erweiterte Suche folgen und die zu prüfende URL in das unterste Eingabefeld (Seitenspezifische Suche/ Links) tippen.
-
Werkzeuge
So programmieren Sie je ein Webdesign-Werkzeug für DOS, Windows, Linux und Unix, um verschiedene Zeichensätze zu konvertieren.
Möchten Sie manchmal HTML-Seiten im ASCII-Format weiterverarbeiten, ohne auf teure Werkzeuge für die Web-Seitengestaltung zurückgreifen zu müssen? h2a.c konvertiert HTML-Dokumente ins ASCII-Format, wobei sämtliche HTML-Tags ausgefiltert werden. Zunehmend tauchen aber auch deutschsprachige Web-Seiten im Internet auf, und hier genügt dies nicht mehr.
Bei deutschsprachigen Texten kommen Umlaute und ß vor, und dann wäre eine umfangreiche Nachbearbeitung in einem ASCII-Editor nötig. Auch dies erledigt h2a.c automatisch. Das Programm erkennt Umlaut- und Sonderzeichendarstellung in sogenannten Entities wie ä = ä oder im ISO-8879-Code wie ä = ä. Diese Zeichen wandelt das Programm entweder in den erweiterten IBM-Zeichensatz (MS-DOS/ Deutsch), in ANSI-Format (Windows) oder in 7-Bit-ASCII um (ältere Unix-Versionen).
Die gewünschte Einstellung legen Sie vor der Kompilierung des Quellcodes mit der ersten Präprozessordirektive #define BIT7 fest. Die Voreinstellung ist der kleinste gemeinsame Nenner, der 7-Bit-ASCII-Code. Sie stellt Umlaute wie ä als ae oder ß als ss dar.
Liegt im HTML-Dokument ein Fehler vor (meist ein fehlendes Semikolon am Entity-Ende), so unterbricht h2a.c den Konvertierungsvorgang und gibt eine entsprechende Fehlermeldung aus. Sie sollten dann nachsehen, wo die bereits angelegte Textdatei abbricht und dann an entsprechender Stelle das HTML-Dokument berichtigen. Danach starten Sie h2a.c erneut. Während des Konvertierungsvorgangs wird der eingelesene Quelltext ohne Sonderzeichen auf dem Bildschirm ausgegeben. Sie rufen das Programm mit folgender Syntax auf:
h2a [Quelldatei] [Zieldatei]
Die Quelldatei erwartet die Erweiterung htm, die Sie nicht mehr mit angeben dürfen, eine Zieldateiangabe ist optional. Geben Sie keine Zieldatei an, so erhält diese den gleichen Namen wie die Quelldatei mit der Erweiterung .txt.
Ohne Argumente aufgerufen, gibt h2a.c einen kurzen Hilfetext mit der richtigen Aufrufsyntax aus.
Vom IBM-Code ins HTML-Format
a2hibm.c konvertiert Texte aus dem erweiterten IBM-Code für den deutschen Zeichensatz ins HTML-Format. Dies mag einem kundigen Web-Autor oder HTML-Programmierer zunächst seltsam vorkommen, denn kein Programm kann die vielfältigen Formatierungen, die HTML bietet, aus einem ASCII-Text ohne Tags gewinnen. Zwar erzeugt a2hibm.c kein ausgefeiltes HTML-Dokument, doch zunächst einen gültigen HTML-Dokumentenkopf und zuletzt ein Ende. Weiterhin macht es sich das <PRE>... </PRE>-Tag zunutze, das ASCII-Text in seiner vorformatierten Form übernimmt. Das heißt, mehrere Leerzeichen werden nicht (HTML-üblich) zu einem einzigen zusammengezogen, und Zeilenumbrüche werden direkt übernommem. Damit behält das Dokument im Web-Browser sein ehemaliges Aussehen.
Auch werden aber Umlaute (ü-ö-Ä-ä u.s.w.) und die sogenannten Sonderzeichen, die bei einer fremdsprachigen Umgebungseinstellung falsch dargestellt würden, von a2hibm.c durch Entities ersetzt und erscheinen damit überall in der gewohnten Form. Eine umfangreiche und arbeitsintensive Umarbeitung alter MS-DOS-Textdokumente entfällt damit, wenn Sie bereit sind, auf spezielle Schriftformatierungen zu verzichten. Allerdings können Sie dann nachträglich in einem Editor entsprechende Tags ebenso hinzufügen wie Links, die Sie einbauen möchten.
Eine weitere Besonderheit von a2hibm.c ist noch erwähnenswert. In vielen alten MS-DOS-Textdokumenten sind Grafikzeichen aus dem erweiterten IBM-Code (128 bis 255) enthalten, mit denen Sie Kästen mit einfachem oder doppeltem Rahmen oder Blockdiagramme realisieren. Diese ersetzt a2hibm.c ebenfalls durch Zeichen aus dem 7-Bit-ASCII-Zeichensatz (0 bis 127).
Damit stellt auch Ihr HTML-Dokument diese einfachen Grafiken direkt dar. Sie müssen also nichts von Hand nachbearbeiten. Mit diesem Werkzeug können Sie viele alte MS-DOS- und Linux-Dokumente in kürzester Zeit zu einem umfangreichen Hypertextinformations-system zusammenfassen.
a2hibm rufen Sie mit folgender Syntax auf:
a2hibm [Quelldatei.EXT]
A[Zieldatei]
Die Quell-datei geben Sie mit Erweiterung ein, da Sie nicht davon ausgehen können, daß alle Textdateien die Erweiterung .txt besitzen. Die Erweiterung der Zieldatei setzt das Programm automatisch auf .htm.
Vom ANSI-Code ins HTML-Format
a2h.c arbeitet genau wie a2hibm.c, nur daß es ANSI-Zeichensatz (Windows) ins HTML-Format umwandelt.
Alle Programme, h2a.c, a2hibm.c und a2h.c, überprüfen auf erfolgreiches Schreiben in die Zieldatei. Dafür verwenden sie eine spezielle Test-Variable t, die den Rückgabewert der fgetc- und fgets-Funktionen auswertet. Nach dem Schließen der Dateien und vor dem Beenden des Programms zeigt eine Fehlerstatistik, wie viele Schreiboperationen vielleicht nicht richtig waren.
Die drei Programme orientieren sich streng am ANSI-89-Standard der Programmiersprache C. So können Sie sie mit dem GNU-C/C++-Compiler auch in Linux- oder andere Unix-Systeme übersetzen.
Wilfried Franz/et
-
Whitespace-Problem
Die Browser reagieren auf Leerzeichen und Umbrüche (whitespace) sehr empfindlich.
Laut HTML-Standard übergehen Browser Leerzeichen und Zeilenumbrüche im Quellcode. Manchmal sehen die Browser das anders, wobei Lücken und Abstände bei Tabellen und Bildern entstehen. Die Zeilen
<img src="bild1.gif"> <img src="bild2.gif">
und
<img src="bild1.gif"><img src="bild2.gif">
sollten identische Ergebnisse liefern. Im Browser erzeugt jedoch der Zeilenumbruch oder einen Absatz. Das Problem tritt auch in Verbindung mit Div-Bereichen auf. Lassen Sie die Formatierung weg, so passt wieder alles.
-
Wikipedia direkt aufrufen
Das Open-Source-Lexikon Wikipedia können Sie mit einem Eingabefeld für Suchbegriffe direkt in Ihre Webseite integrieren. Dazu fügen Sie folgenden Code ein:
<form ID="searchform" target="_blank" action="http://de . wikipedia . org/ wiki/Spezial:Search"> <input ID="search" type="text" size="35"> <input type='submit' value="Suche in Wikipedia" > </form>
Damit öffnet sich ein zusätzliches Browserfenster, das den entsprechenden Artikel anzeigt sofern es einen gibt. Einen Haken gibt es aber: Wörter mit Umlauten kommen bei Wikipedia nicht korrekt an.
-
WikiWiki-Autoren
Der Charme einer besonders einfachen Web-Technologie kann dem offenen Autorensystem WikiWikiWeb, kurz Wiki - von "wiki wiki" für "schnell" auf Hawaiianisch - nur schwer abgesprochen werden. Ward Cunningham gilt als der Erfinder. Unter jeder Wiki-Seite befindet sich ein Texteingabe-Feld, mit dem jeder Besucher zu dem Inhalt des Wikis beitragen kann. Die Übersetzung in HTML geschieht automatisch. Auf diese Weise füllen zahlreiche Autoren eine Datenbank. Ein imponierendes Beispiel ist die Wiki-Enzyklopädie, die Sie unter de.wikipedia.org finden. Mehr zur Technologie unter wiki.org.
-
Wo ist der Browser?
Pfad und Laufwerk des Default-Browsers spüren Sie mit einem Code-Fragment auf.
Aufgrund des Browser-Kriegs zwischen Microsoft und Netscape ist es nicht immer ganz einfach, herauszufinden, welcher Browser momentan der Default-Browser ist und wo er sich auf dem Rechner befindet. Das Code-Fragment in fbrowser.c nimmt Ihnen diese Suche ab.
-
WYSIWYG-Editor einbauen
Gästebücher mit Editor im Browser sind nützlich. Der Internet Explorer bietet dies per ActiveX-Control. Es gibt aber auch Lösungen für Mozilla und Opera. Werfen Sie einen Blick auf die folgenden Sites:
www . kevinroth . com/rte/demo.htm
www . fckeditor . net/tinymce.moxiecode.com/
-
Zeilenumbruch verhindern
Sie möchten selbst bestimmen, wie die Zeilen Ihres Textes umlaufen.
Browser bauen Webseiten je nach Fensterbreite unterschiedlich auf. Dabei besorgen sie den Zeilenumbruch in Fließtexten selbstständig. Wenn Sie das nicht wünschen, umschließen Sie den Text mit dem Tag <nobr>. Dann erzeugt der Browser Zeilenwechsel nur da, wo Sie es explizit angeben. Ist der Text länger als die Fensterbreite, wird er nicht umbrochen, sondern der Browser zeigt eine Scrollleiste.
-
Zeilenumbrüche beachten
Normalerweise spielen Zeilenumbrüche im HTML-Code für die Darstellung einer Webseite keine Rolle. Der Internet Explorer sieht das auch in der aktuellen Version bisweilen anders und fügt hässliche Zwischenräume ein. Der folgende HTML-Ausschnitt beschreibt ein Bild, gefolgt von einem div-Bereich:
<img src="bild.jpg"> <div class="beispiel"> Text </div>
Beide Elemente stehen untereinander, aber der IE fügt einen kleinen Zwischenraum ein. Verantwortlich ist der Zeilenumbruch hinter dem img-Tag. Der Zwischenraum verschwindet so:
<img src="bild.jpg"><div class="beispiel"> Text </div>
Dieses Problem tritt gelegentlich auch bei Tabellen und einzelnen Zellen auf.
-
Zeitraubende Verläufe
Verläufe sind klassische Ressourcenkiller und möglichst zu vermeiden.
Beispielsweise nimmt eine Testseite im Format 800 x 600 Pixel unkompri-miert
1,37 MByte in Anspruch. Ein einfarbiger Hintergrund belegt bei maxi-maler
jpg-Kompression in Photoshop 4.01 nur 7 KByte. Ein Verlauf dagegen kostet mehr
als den doppelten Speicherplatz. Vermeiden Sie daher Verläufe, wo immer es geht.
Eine Notlösung: Beschränken Sie sich für Verläufe auf wenige Farben.
Der lineare Verlauf in der Mitte beansprucht nur 8 KByte - deutlich weniger als der
radiale Verlauf (rechts) mit 14,4 KByte.
