Tipps und Tricks
mit HTML,CSS & Co.
|
|
So im Laufe der Zeit kommt einem einiges unter an Tipps
und Tricks. Wenn man sie nicht notiert vergißt man
sie schnell wieder und dann sucht man eben. Mir geht´s
ständig so, deswegen habe ich angefangen mir alles
was mir interessant erschien zu sammeln und ein wenig
zu dokumentieren, - hier ist das Ergebnis.
Daraus ergibt sich auch, daß Sie hier keine vollkommenen
Anweisungen finden, daß keine Garantie für
die Richtigkeit abgegeben werden kann. Alle Tipps habe
ich selbst ausprobiert und das empfehle ich Ihnen auch:
"Schau´n Sie sich das an"!
|
|
|
|
Zwei einfache Wege Ihre Bilder vorm Herunterladen
mit einem transparenten GIF zu schützen. Nicht 100%ig
aber immerhin originell.
|
|
|
|
|
|
Wenn Sie ein CGI-Script installieren,
müssen Sie per CHMOD-Befehl die Zugriffsrechte auf
die verschiedenen Datein vergeben.
|
|
|
|
|
|
Cascading-Style-Sheets sind praktische
Erweiterungen zum HTML und können eine Menge Zeit
und Platz sparen. Eine ganz kurze Einführung.
|
|
|
|
|
|
Wenn Sie z.B. die Textformatierung auf
ein externes Style Sheet auslagern, können Sie sich
alle Font-Tags ersparen. Änderungen machen Sie dann
an einer Stelle und nicht auf jeder von vielleicht hunderten
Seiten extra.
|
|
|
|
|
|
Um verschiedene Elemente auf einer Seite
anzuordnen verwendet man Tabellen, oder fortschrittlicher
- CSS-Layer. Ist gar nicht so schwierig.
|
|
|
|
|
|
Einen Layer kann man nicht so ohne weiteres
für jede Auflösung oder Fenstergröße
zentrieren. So geht´s.
|
|
|
|
|
|
Hier finden Sie alle CSS Anweisungen in
Kürze auf einem Platz.
|
|
|
|
|
|
Beim Überfahren eines Bereichs ändert
sich die Form des Cursors.
|
|
|
|
|
In die oberste Zeile Ihres HTML-Dokuments
gehört der Doctype-Tag, als Information für
den Browser. Wird auch gebraucht wenn Sie Ihre Seite bei
http://www.w3.org
prüfen lassen wollen. |
|
|
|
|
|
Sie wollen Ihren Besuchern etwas zum Herunterladen
bereitstellen ?
|
|
|
|
|
Verschiedene Effekte beim Öffnen
und Schließen einer Seite.  |
|
|
|
|
|
Wenn Sie in eine Seite eine andere (oder
einen Teil) einbinden wollen, ist ein iFrame vielleicht
das richtige Mittel. Funktioniert (nur) mit modernen Browsern.
|
|
|
Einbindung per Javascript
|
|
Sie können Teile einer Seite mit
Javascript auf eine externe Seite auslagern und auf mehreren
Seiten einsetzen. Funktioniert nur mit JavaScript fähigen
Browsern.
|
|
|
|
|
|
Sie können natürlich Teile einer
Seite auch mit PHP auf eine externe Seite auslagern und
auf mehreren Seiten einsetzen. Hat den Vorteil, wenn Sie
auf Ihrem Server PHP haben, hat keiner Ihrer Besucher
Probleme, welchen Browser er auch verwendet.
|
|
|
|
|
|
Wenn´s Ihr Server kann ist SSI eine
praktische Sache - z.B. binden Sie ein Menue in x Seiten
ein. Änderungen finden nur an einer Stelle statt.
|
|
|
|
|
|
Ein
ganz einfaches Formular zum versenden eines Emails.
|
|
|
|
|
|
Bieten Sie Ihren Besuchern die Möglichkeit
Ihnen ein vorgefertigtes Email zu senden.
|
|
|
|
|
|
Die gängisten 120 Farben mit ihren
html-Namen.
|
|
|
|
|
|
Fav(orite)icons sind die kleinen bunten
Bildchen links neben dem http:// in der Adresszeile Ihres
Browsers und in den Listen Ihrer Favoriten. Geht mit IE
und Mozilla
|
|
|
|
|
|
Geben Sie Ihren Fehlern eine persönliche
Note, mit Ihren eigenen Fehlermeldungsseiten.
|
|
|
|
|
|
Verändern Sie die Farben und Aussehen
von Textfeldern und Schaltfächen in Formularen.
|
|
|
|
|
|
Formulargruppen zusammengefaßt in
netten Rahmen.
|
|
|
|
|
|
Eine einfaches Skript um ein Frameset
nachzuladen, wenn eine Einzelseite aufgerufen wird.
|
|
|
|
|
|
Mit CSS gibt´s jede Menge Möglickeiten
Hintergrundbilder zu positionieren, weit über die
Möglichkeiten von HTML.
|
|
|
|
|
|
Eigentlich eher eine Spielerei, aber wenn
S´ schon da sind ....
|
|
|
|
|
|
Eine Sammlung von HTML-Befehlen.
|
|
|
|
|
Beim MS-Internet Explorer ab Version 6
erscheint bei Bildern ab einer gewissen Grösse ein
sogenanntes Image Toolbar, welches eher lästig ist.
Sie können es aber ganz leicht entfernen. |
|
|
kein Abstand oben / links
|
|
Wenn Sie ein Element ohne den standardmäßigen
Abstand oben oder/und links placieren wollen ...
|
|
|
|
|
|
Einfacher, wenn auch unzureichender, Kopierschutz
- rechte Maustaste sperren.
|
|
|
|
|
Textlinks ohne Unterstreichung und wenn
die Maus drüber geht wechseln sie die Farbe. Ein
paar Zeilen CSS und schon geht´s. |
|
|
|
|
Wenn Sie verschiedenfärbige Links
auf Ihren Seiten haben wollen, die sich bei MouseOver
verfärben, oder sonst absonderlich benehmen, kein
Problem mit a bissl CSS. |
|
|
|
|
|
Statten Sie einen Link mit einem Button
aus, ganz ohne Grafik.
|
|
|
|
|
|
Verwenden Sie Ihre eigenen Bullets bei
Listen.
|
|
|
|
|
|
Bei Maus über eine Tabellenzelle
wechselt die Hintergrundfarbe derselbigen.
|
|
|
|
|
|
Beim Eingeben eines Paßwortes erscheinen
Sternchen.
|
|
|
|
|
|
Wie man mit ein paar kleinen Grafiken
tolle Rahmen zusammen bastelt.
|
|
|
|
|
|
Bei Grafiken ist es üblich sie mit
ein Schatten zu versehen, das schaut dann plastischer
aus. Mit Rahmen geht das auch ganz leicht.
|
|
|
|
|
|
Einmal etwas anderes - ein Rahmen mit
färbig blinkendem Rand.
|
|
|
|
|
|
Wer was auf sich hält, hat einen
robots.txt, der zwar kaum je von jemanden gelesen wird,
außer von Robotern natürlich. Für Roboter
gibt´s auch MetaTags, manche halten sich sogar daran.
|
|
|
|
|
|
Attraktive Schaltflächen ganz ohne
Graphik, deshalb auch entsprechend "leicht"
|
|
|
|
|
Verändern Sie die Farben der Scroll-Bars
in Fenstern und Textfeldern. |
|
|
|
|
|
Einige Sonderzeichen wie z.B. x²
oder © und noch viele
andere.
|
|
|
|
|
|
Momentaufnahme der verwendeten Browser,
10.4.2002, entnommen der Statistik einer internationalen
Site.
|
|
|
|
|
|
Hinterlegen Sie Text mit einer Farbe.
|
|
|
|
|
|
Wenn Sie mit der Maus über Texte,
oder Textlinks gehen erscheint einsogenanntes ToolTip,
wie der Alt-Text bei Grafiken.
|
|
|
|
|
|
