Web-Grafik

Site-Kritik

SEO-Service

Webtools

Software

Linktausch

Tipps-Tricks

Newsletter

Kontakt

Home

HTML und CSS Tipps und Tricks

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"!


Bild schützen
Zwei einfache Wege Ihre Bilder vorm Herunterladen mit einem transparenten GIF zu schützen. Nicht 100%ig aber immerhin originell.

 

CHMOD
Wenn Sie ein CGI-Script installieren, müssen Sie per CHMOD-Befehl die Zugriffsrechte auf die verschiedenen Datein vergeben.

 

CSS
Cascading-Style-Sheets sind praktische Erweiterungen zum HTML und können eine Menge Zeit und Platz sparen. Eine ganz kurze Einführung.

 

CSS - extern
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.

 

CSS-Layer
Um verschiedene Elemente auf einer Seite anzuordnen verwendet man Tabellen, oder fortschrittlicher - CSS-Layer. Ist gar nicht so schwierig.

 

CSS-Layer zentriert
Einen Layer kann man nicht so ohne weiteres für jede Auflösung oder Fenstergröße zentrieren. So geht´s.

 

CSS Referenzen
Hier finden Sie alle CSS Anweisungen in Kürze auf einem Platz.

 

Cursorform
Beim Überfahren eines Bereichs ändert sich die Form des Cursors.

 

DOCTYPE
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.

 

Download bereitstellen
Sie wollen Ihren Besuchern etwas zum Herunterladen bereitstellen ?

 

Ein-/ausblenden
Verschiedene Effekte beim Öffnen und Schließen einer Seite.

 

Einbindung per iFrames
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.

 

Einbindung per PHP
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.

 

Einbindung per SSI
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.

 

Email Formular
Ein ganz einfaches Formular zum versenden eines Emails.

 

Email Text
Bieten Sie Ihren Besuchern die Möglichkeit Ihnen ein vorgefertigtes Email zu senden.

 

Farben-Namen
Die gängisten 120 Farben mit ihren html-Namen.

 

Favicons
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

 

Fehlerseiten
Geben Sie Ihren Fehlern eine persönliche Note, mit Ihren eigenen Fehlermeldungsseiten.

 

Formular
Verändern Sie die Farben und Aussehen von Textfeldern und Schaltfächen in Formularen.

 

Formular gruppiert
Formulargruppen zusammengefaßt in netten Rahmen.

 

Frameset nachladen
Eine einfaches Skript um ein Frameset nachzuladen, wenn eine Einzelseite aufgerufen wird.

 

Hintergrund
Mit CSS gibt´s jede Menge Möglickeiten Hintergrundbilder zu positionieren, weit über die Möglichkeiten von HTML.

 

Hintergrund, animierter
Eigentlich eher eine Spielerei, aber wenn S´ schon da sind ....

 

HTML-Befehle
Eine Sammlung von HTML-Befehlen.

 

Image Toolbar entfernen
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 ...

 

Kopierschutz
Einfacher, wenn auch unzureichender, Kopierschutz - rechte Maustaste sperren.

 

Links - MouseOver
Textlinks ohne Unterstreichung und wenn die Maus drüber geht wechseln sie die Farbe. Ein paar Zeilen CSS und schon geht´s.

 

Links verschiedenfärbig
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.

 

Link mit Button
Statten Sie einen Link mit einem Button aus, ganz ohne Grafik.

 

Listen-Bullets
Verwenden Sie Ihre eigenen Bullets bei Listen.

 

onMouseOver
Bei Maus über eine Tabellenzelle wechselt die Hintergrundfarbe derselbigen.

 

Paßwort
Beim Eingeben eines Paßwortes erscheinen Sternchen.

 

Rahmen 1
Wie man mit ein paar kleinen Grafiken tolle Rahmen zusammen bastelt.

 

Rahmen 2
Bei Grafiken ist es üblich sie mit ein Schatten zu versehen, das schaut dann plastischer aus. Mit Rahmen geht das auch ganz leicht.

 

Rahmen 3
Einmal etwas anderes - ein Rahmen mit färbig blinkendem Rand.

 

Robots.txt
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.

 

Schaltflächen
Attraktive Schaltflächen ganz ohne Graphik, deshalb auch entsprechend "leicht"

 

Scroll Bar
Verändern Sie die Farben der Scroll-Bars in Fenstern und Textfeldern.

 

Sonderzeichen
Einige Sonderzeichen wie z.B. x² oder © und noch viele andere.

 

Statistik - Browser
Momentaufnahme der verwendeten Browser, 10.4.2002, entnommen der Statistik einer internationalen Site.

 

Text Hintergrund
Hinterlegen Sie Text mit einer Farbe.

 

ToolTips
Wenn Sie mit der Maus über Texte, oder Textlinks gehen erscheint einsogenanntes ToolTip, wie der Alt-Text bei Grafiken.

Webmaster Ressource