SITEMAP

Home

ZURÜCK  Updates  Themen  Startseite  SITEMAP

Anzahl der Beiträge

Bilder CSS Datum DHTML Layer Diverses  Downloads Email Farben Fehlersuche Formulare Frames HTML JavaScript Mathematik Mauszeiger MENÜS Pulldown Spielkram Statuszeile Tabellen Tipps Umleitung Verweise Windows Zeit = bearbeitet innerhalb der letzten 10 Wochen = bearbeitet innerhalb des letzten Halbjahres

Bilder - Images

NACH OBEN

Einführung Bildformate für das Internet Image einfügen, das Image-Tag, Attribute Imagegröße zerren, Größen-Attibute Images für das Web aufbereiten Pixel Zauber, tolle Effekte durch falsche Bildgrößenangaben Hintergrundbilder Hintergrundbild einfügen mit CSS, Design und Blendschutz Hintergrundbild einfügen mit CSS, großflächige Grafik Hintergrundbild einfügen mit CSS, positionieren mit CSS Hintergrundbild einfügen, Grafiken kacheln Hintergrundbild in Tabellen einfügen, Besonderheiten NS 4.x Hintergrundbild tauschen mit CSS-Angaben Hintergrundbild einfügen und zentrieren mit Layern Grafiken datums- / zeitabhängig tauschen oder anzeigen Images Vorladen Demo Images Vorladen mit HTML oder CSS Images Vorladen mit JavaScript Image1 anzeigen und nach Laden von Image2 tauschen Image auf Klick tauschen mit JavaScript swap() Bildvorschau 01 - bei MouseOver, Textlink, Dateiaufruf beim Anklicken Bildvorschau 02 - Großansicht tauschen bei MouseOver Bildvorschau 03 - Großansicht tauschen bei MouseOver + MouseOut Bildvorschau 04 - Großansicht tauschen bei OnClick Bildvorschau 05 - Großansicht + Vorschaugrafik tauschen bei OnClick Bild des Monats anzeigen - 1 von 12 Monatsbild aus Array ermitteln, Array-Elemente zuordnen Tagesbild der Woche anzeigen - 1 von 7 Bild datumsabhängig anzeigen - Stichtag vorher / nachher Bild uhrzeitabhängig (Std) anzeigen (Tag / Nacht) - eines aus zwei Auswahlen Bild zeitabhängig anzeigen / tauschen (Sekunden) - Beispiel: Ampel Bild zeitabhängig anzeigen / tauschen (Sekunden) - Beispiel: Ampel + Zeitanzeige Diashows Slideshows Bildauswahl einfache Bildergalerie Auswahl durch Pulldownmenü Bildwechsel 01-A automatisch, mit Zeitvorgabe, für 1 Grafik der Seite Bildwechsel 01-B automatisch, mit Zeitvorgabe, für 2 Bilder Bildwechsel 03-Link automatisch, mit Zeitvorgabe, jede Grafik ist ein Verweis Bildwechsel 02-a autostart, feste Zeitvorgabe, Start- Stop-Buttons Bildwechsel 02-b autostart, feste Zeitvorgabe, keine Buttons Bildwechsel 02-c feste Zeitvorgabe, Start- Stop-Buttons Diashow 01 - manuell, Fotoalbum mit Formularbuttons Diashow 02 - manuell oder automatisch, mit Formularbuttons Diashow 03 - für 2 Bilder, manuell automatisch, mit Formularbuttons Fotoshow-01 mit Text Monitorhintergrund, manuell / Zufall (ohne vorladen) Fotoshow-0a mit Text Monitorhintergrund, manuell / Zufall (mit vorladen) Fotoshow 02 automatisch mit 2 Texten, optionale Zufallsanzeige Zufallsgrafiken Zufallsfotos Zufallsgrafik / Zufallsfoto anzeigen Startgrafik durch Zufallsgrafik / Zufallsfoto austauschen Zufallsbanner / -bild mit Link, Chancenvorgabe in % Zufallsbanner / -bild mit Link Ein Zufallsbanner / -bild anzeigen, Grafik als Link, externe JS-Datei Zwei Zufallsbanner / -bilder anzeigen, Grafiken als Link Zufallsbild mit Farbvorgabe für Beschreibungstext Zufallsbild aus zwei Auswahlen Tag / Nacht Zufallsbild + farbiger Text (simpel) PopUp-Window in Bildgröße PupUp-Window bei MouseOver PupUp-Window 1 - für ein Image passend öffen mit Titeltext PupUp-Window 2 - für ein Image passend öffen ohne Titeltext PupUp-Window 3 - kleiner als Bildgröße (mit Scrollbars) PupUp-Window 4 - für ein Image passend öffen, Nachricht bei Click Fotopräsentation 1, Beispiel mit Frames Fotopräsentation 2, Beispiel mit Windows Fotopräsentation 3, Frames - 2 Navigationen Fotopräsentation Vorschaubild Hintergrund-Grafik 01 - Monitor, Dia, Film Vorschaubild Hintergrund-Grafik02 - Monitor, Dia, Film Bildhintergrund 1, Vorschau auf Filmhintergrund Bildhintergrund 1, Vorschau auf Monitorhintergrund bedingter Schutz vor Download / Speichern 01 bedingter Schutz vor Download / Speichern 02 Bildansicht umschalten während des Anklickens Bildrandfarbe mit CSS Navigation Seiten fortlaufende Nummern in Dateinamen

CSS

NACH OBEN

Einführung Seite 01)  Einstieg CSS-Formatierung Seite 02)  Erklärung CSS-Deklaration Seite 03)  Erklärung CSS-Anweisungen einbinden Seite 04)  Erklärung Externe CSS-Datei Seite 05)  Erklärung CSS Inline-Anweisungen Seite 06)  Kaskadierung Seite 07)  Texte formatieren mit CSS Seite 08)  Kurzreferenz - Eigenschaften + Werte Seite 09)  Margin + Padding / Ausrichtung + Abstände Seite 10)  Maßeinheiten für Schriftgrade Seite 11)  vertikale Textausrichtung an Elementen Seite 12)  eigene CSS-Klassen Seite 13)  Schriftgrößen beinahe barrierefrei Seite 14)  Kurzschreibweisen bei CSS-Notierungen Fehlerverhalten - Fehler in der Deklaration Fehlerverhalten - relative Schriftgrößen Fehlerverhalten - Fehlersuche Margin + Padding Fehlerverhalten - CSS Zellenrand Cellspacing CSS-Kurzreferenz der gängigen Anweisungen (Druckversion) Elemente gestalten und formatieren Formatierung von horizontalen Linien Ornament / grafisches Symbol als Trenner zwischen Textblöcken Textlinks ohne Unterstrich, Linkfarbe festlegen Angepasste, farbige Bildlaufleisten / Scrollbar (nicht für NS 4.x) Hintergrundbild einfügen mit CSS, Design und Blendschutz Hintergrundbild einfügen mit CSS, großflächige Grafik Hintergrundbild einfügen mit CSS, positionieren mit CSS Hintergrundbild einfügen, Grafiken kacheln Seitenhintergrund mit CSS-Anweisungen austauschen Seite formatieren mit CSS für Bildschirm + Drucker 01 Basisbeispiel mit 2 separaten HTML-Dateien 02 Beispiel mit CSS-Anweisungen @media screen + @media print 02 Beispiel mit CSS-Anweisungen @media screen + @media print (Faxvorlage) 02 Beispiel mit CSS-Anweisungen @media screen + @media print (Formularfelder) Formular-Elemente gestalten und formatieren Formularfelder mit CSS formatieren - Input Formularelemente mit CSS formatieren - Tnput Textarea Formularelemente mit CSS formatieren - Beispielformular Selectauswahl Pulldownmenü formatieren Formularbuttons als Grafik Formularbuttons mit CSS formatieren 01 Formularbuttons mit CSS formatieren 02 Aufzählungen / Listelemente mit eigenen Grafiken Bildpositionierung Ausrichtung + Abstände Bildrandfarbe für Grafiken mit CSS 1) Tabellenrand (außen) gestalten mit CSS-Angaben 2) Tabellen und Zellenrand gestalten mit CSS-Angaben 3) Tabellzellenrand gestalten mit CSS-Angaben 4) HTML-Elemente mit Rand gestalten mit CSS-Angaben Beispiele - CSS Examples Bilderrahmen, Border mit CSS, Rahmentyp + Farbe Textblock + Grafik anordnen (Eyecatcher) Textboxen - Textspalten mit CSS, Beispiel 01 Textboxen - Textspalten mit CSS, Beispiel 02 Eigene Mauszeiger / Systemmauszeiger zuweisen Textlink mit Hintergrundbutton / Hintergrundgrafik CSS eingebunden Textgröße in Punkt oder Pixel bestimmen? Einen Schlagschatten mit CSS-Angaben generieren 01 Positionieren von Seitenelementen mit CSS-Angaben 02 Texte positionieren über einer Grafik mit CSS-Angaben verschiedene Hintergrundfarben mit Unterklassen bestimmen MouseOver-Effekt mit CSS-Randangaben Menüleiste mit CSS - Zuordnung der CSS-Formatierung mit ID CSS-Anweisungen Browserabhängig eine externe Datei auswählen Browserprüfung auf CSS-Fähigkeit Beispiele - CSS-Vorlagen Download Beispiel CSS-Vorlage 01 Download Vorlagen externer CSS-Dateien mit Vorschau Download Beispiel CSS-Vorlage 02 media screen / print Download Beispiel CSS-Vorlage 03 media screen / print Download Beispiel CSS-Vorlage 04 media screen / print Beispiele - CSS-Homepage-Vorlagen Download Beispiel CSS-Homepage-Vorlage 08 Download Beispiel CSS-Homepage-Vorlage 09 Download Beispiel CSS-Homepage-Vorlage 10 Download Beispiel CSS-Homepage-Vorlage 11

Datum

NACH OBEN

Datum 01 - Basiswissen Datumsobjekt Date() Datum 02 - Übersicht Datumsobjekt Date() Berechnung periodisch wiederkehrender Ereignisse Berechnung periodisch wiederkehrender Ereignisse - Beispiel Mondphasen Datumsanzeigen Datum als Text, 6 Versionen in einem Script Mini-Kalenderblatt 01 - 60 x 70 Pixel, Datumsanzeige, Tag + Monat Mini-Kalenderblatt 01-A - 60 x 70 Pixel, Datumsanzeige Jahr, Monat, Tag Mini-Kalenderblatt 01-B - 60 x 70 Pixel, eigene feste Termine Mini-Kalenderblatt 02 als Datumsanzeige für ihre Seite Mini-Kalenderblatt 03 als Datumsanzeige + Begrüßungstext (uhrzeitabhängig) Errechnen des Wochentags Errechnen der aktuellen Jahreszahl -für Fließtext Datum-Zeit, Wechsel bei MouseOver, im (unsichtbaren) Formularfeld datumsabhängige Anzeige Text (Tipp) des Tages anzeigen, 1 - 31 Text des Tages anzeigen, 1 von 365 Namenstagsliste 3 datumsabhängige Texte: vor - während nach (Start- Enddatum) 7 datumsabhängige Texte: vor - während nach (Start- Enddatum) Terminliste 01 - Ferienbeginn in X Tagen, ausblenden alter Termine Terminliste 02 - Terminliste noch xxx Tage, ausblenden + markieren Terminliste 03 - (Kalenderjahr) Tageszähler, optional ausblenden Terminliste 04 - (Kalenderjahr) Tageszähler, optional ausblenden Terminliste 05 - (jahresübergreifend) Tageszähler, optional ausblenden Terminliste 06 - (jahresübergreifend) Tageszähler, mit 4 Anzeige-Optionen Terminliste 07 - (jahresübergreifend) schlicht monatlich gruppiert Bild des Monats - 1 von 12 Tagesbild der Woche anzeigen - 1 von 7 Eine von zwei Grafiken anzeigen, abhängig vom Datum / Stichtag datumsabhängige Umleitungen / Weichen Tagesdatei des Monats aufrufen, 1 von 31 Aufruf der Wochentagsdatei, Mo. bis So. 1 von 7 Monatsdatei des Jahres aufrufen, 1 von 12 an einem bestimmten Datum andere Datei aufrufen 3 Umleitungen vor - während nach einer Zeitspanne (Start- Enddatum) Link des Tages (1 von 7), abhängig vom Wochentag Tageslink des Monats (1 von 31) Tageslink des Monats (1 von 31) mit opt. Banner Link des Monats (1 von 12) mit opt. Banner Berechnungen Zwei Datumseingaben logisch prüfen (Anreise Abreise) Errechnen des Wochentags aus einem Datum Berechnung des westlichen + chin. Sternzeichens Altersberechnung in Jahren Monaten Wochen Tagen Stunden Minuten Sekunden Ermitteln von Freitag dem 13. Datumseingabe logisch prüfen 01, gültige Eingabe? Datumseingabe logisch prüfen 02, gültige Eingabe? letztes Update Anzeige der letzten Bearbeitung, last Update Datum + Tage Anzeige der letzten Bearbeitung: Datum TT.MM.JJ Anzeige der letzten Bearbeitung: Datum Uhrzeit TT.MM.JJ  SS:MM Uhr Anzeige der letzten Bearbeitung: Text + Datum Uhrzeit TT.MM.JJ  SS:MM Uhr Counter dynamischer UpDownCounter 01, 6 Text-Ausgabeformen 3 Textmodule dynamischer UpDownCounter 02, 6 Text-Ausgabeformen 1 Textmodul dynamischer UpDownCounter 03, Tageszahlen seit Start + Tageszahl bis Ziel dynamischer UpDownCounter Tage bis / seit Zieldatum, Bezug auf aktuelles Jahr dynam. graf. Event-Counter 01 (up down) +/- 999 Tage mit Grafikhintergrund dynamischer grafischer Counter 01 zur Fußball EM 2008 dynamischer grafischer Counter 02 zur Fußball EM 2008 UpCounter Errechnen der Anzahl von Tagen seit einem Startdatum DownCounter Errechnen der Anzahl von Tagen bis zu einem Zieldatum dynamischer DownCounter, Anzahl von Tagen bis Tag + Monat innerhalb 365 Tage dynamischer grafischer Up- Downcounter 03-01 Anzeige: TTT:SS:MM:SS dynamischer grafischer Up- Downcounter 03-02 Anzeige: TTT:SS:MM:SS dynamischer grafischer Up- Downcounter 03-03 Anzeige: TTT:SS:MM:SS dynamischer grafischer Up- Downcounter 03-04 Anzeige: TTT:SS:MM:SS - UHR TGIF Weekendcounter - Reststunden, Minuten und Text Kalender Monatskalender 01 nach deutschem Standard Monatskalender 02-A für aktuellen Monat Monatskalender 02-B für mehrere Monate ± 12 vom aktuellen Monat Monatskalender 03 nach deutschem Standard

DHTML

NACH OBEN

Drag and Drop - Objekte mit der Maus verschieben Drag and Drop - Objekte mit der Maus verschieben - Beispiel Lesezeichen Schneefall für ihre HTML-Seite Fang mich - Objekt springt vom Mauszeiger weg Linkinfo-Box 01 bei Mouseover auf einem Layer Linkinfobox 02 bei Mouseover auf einem Layer Linkinfo-Box 02 - Beispiel 00: simple Version, nur Text Linkinfo-Box 02 - Beispiel 01: mit eingebundener Grafik und Link Linkinfo-Box 02 - Beispiel 02: Info-Box an einer Image-Map (verweissensitive Grafik) Valentinskarte - Herzen schwen über die Webseite Billardkugel - Objekt prallt an der Fensterbegrenzung ab Anzeigetafel Text - Flippletters, beispiel Flughafenanzeige Luftblasen - Objekte an der Maus steigen nach oben Dynamischer Textscroller im Rahmen (HTML-Code erlaubt) Diese Beispiele werden noch überarbeitet (Anpassung an neue Browser) Dynamischer Textticker Dynamische Textfarbe Lauftext Dynamischer Text-Zoom aus dem Hintergrund Hintergrundbild plus Text / Inhalt auf separaten Layern Objekte über die HTML-Seite scrollen Layer verbleibt an fester Position oben: Titelzeile Tabellenüberschrift Floating Image: Beispiel Ostern fading Text / Link Headliner Text mit HTML Tags

Diverses

NACH OBEN

Planung einer Webseite 01 - Ziel der Webseite feststellen und erste Überlegungen Planung einer Webseite 01 - Entwurf, Seitenaufteilung und Menüführung Planung einer Webseite 01 - vorausschauende Vorgehensweise bei der Erstellung Impressum einer Webseite HTML-Editor als Freeware: Phase5 und Firstpage2000 HTML-Referenz: SELFHTML Downloadadresse Web-Spionage das durchsichtige Internet Web-Developer Linkliste, meine Internet Surftipps ERROR 404 - eigene Fehlerseite Eigenes Favicon in der Adressleiste des Browsers Druckoption anbieten mit Formular-Button oder Link, Seite drucken Drucken automatisch beim Laden der Seite oder mit Link Druckversion 01 beispiel mit 2 HTML-Dateien (simpel) Sitemap als Crowlerhife in der Framesetdatei Sitemap 01, Sitemap als Liste CSS-formatierte Grafiken + 3 Anwendungsbeispiele Sitemap 02, Sitemap aus Listelementen verschachtelte Listen + 3 Beispiele Sitemap 03, Sitemap mit Erläuterungen DIV-Bereiche + 2 Anwendungsbeispiele Sitemap 04, Sitemap mit Grafiken als Quick-Navigation Inhalte zentrieren mit Hilfe einer Tabelle Quellcode anzeigen per Link oder automatisch Systeminformationen mit JavaScript auslesen und anzeigen Bildschirmauflösung auslesen und anzeigen Bildschirmauflösung anzeigen und Alternativ-Links Weiterleiten mittels META-Tag refresh Preloader-Info anzeigen während des Ladevorgangs Morse-Code, Text in Morsezeichen umwandeln, Darstellung als Grafik Seiten in der Bildschirmmitte zentrieren Statistik 01 horizontale Grafik mit JavaScript Statistik 02 horizontale Grafik + Scala mit JavaScript Statistik 03 vertikale Balkengrafik mit Legende Statistik 04 vertikale Balkengrafik mit Legende Ordnerinhalte anzeigen - Ordner ermitteln Text ein- / ausblenden mit CSS Dateien erst am festgelegten Datum öffnen - Osterkalender (Textlinks) Dateien erst am festgelegten Datum öffnen - Osterkalender (ImageMap) Advents-, Oster- Rätselkalender Rätselkalender 01 - Dateien ab bestimmten Datum öffnen (Link) Rätselkalender 02 - Dateien ab bestimmten Datum öffnen (Imagemap) Adventskalender 01 (11 Versionen) - Hintergrundfoto simple Anpassung (2002) Adventskalender 01 Info: eigenes Hintergrundbild Adventskalender 01 Info: andere Kästchengrafik Adventskalender 01 Download Versionen 1 - 9 Adventskalender 01 Info: individuelle Dateinamen Adventskalender 02 (2 Versionen) zum Download - simple Anpassung Adventskalender 03 (2 Versionen) zum Download - simple Anpassung Adventskalender 04 (5 Versionen) - Weihnachtsbaum mit 24 Klickbereichen Adventskalender 05-V01 - stilisierter Tannenbaum Adventskalender 05-V02 - stilisierter Tannenbaum Adventskalender 06 (2 Versionen) - 24 Klickbereiche in einer Tabelle Adventskalender 07 (3 Versionen) - 24 Grafiken als Klickbereiche Adventskalender 08 (4 Versionen) - Winterlandschaft, Fenster als Klickbereiche Adventskalender 09 (1 Version) - Bankenvirtel, Raben als Klickbereiche Adventskalender 10 (3 Versionen) - Winterdorf 1, Fenster als Klickbereiche Adventskalender 11 (7 Versionen) - Winterdorf 2, Fenster als Klickbereiche Info: Tagesdateien anpassen Info: Tagesdateien Versionen + Download Info: PopUp-Box Tageszahl-Box formatieren Info: PopUp-Box erweiterte Anpassungen Info: Schneeflocken-Script anpassen Info: Hintergrundmusik einbinden Info: Beepworld + Pfadangaben Info: Verlinkung ihres Kalenders Ihre Kalender im Web - Links

Downloads

NACH OBEN

Download Homepagevorlagen mit Frames + Beispiele Download Vorlage F01 + Demo, 3 verschachtelte Frames Download Vorlage F02 + Demo, 2 von 4 Frames zentrieren Download Vorlage F03 + Demo, 2 Frameinhalte ändern, Pull-Down-Menü Download Vorlage F04 + Demo, 3 Frames, CSS-Menü, Gipfelstürmer Download Vorlage F05 + Demo, 3 Frames, mehrere Menüs, Ponyhof Download Vorlage F08 + Demo, 3 Frames, mehrere Menüs, Schützenverein Download Vorlage F09 + Demo, 3 od. 4 Frames, farbcodiert, variable Breite Download Vorlage F11 + Pseudo-Aufklappen (basierend auf Menü Bsp11) Download Homepagevorlagen ohne Frames + Beispiele Download Webseitenvorlage H01 - Visitenkarte zentrierte Darstellung Download Webseitenvorlage H02 - 5 Seiten Download Webseitenvorlage H03 - Haupt- + Untermenü Download Webseitenvorlage H04 - CSS-Positionierung vor Titel-Grafik Download Webseitenvorlage H05 - textbasierte Seiten Blättern-Navigation neu Download Webseitenvorlage H06 - Obsthof, 4 Tabellen neu Download Webseitenvorlage H07 - Online-Bewerbung / Visitenkarte Download Webseitenvorlage H09 - für 970 Pixel Breite, Haupt- + Untermenü Download Webseitenvorlage H11 - Ferienwohnung Beispiel Download Webseitenvorlage H15 - 80% Breite, 20 Farbvarianten neu Beispiele - CSS-Homepage-Vorlagen Download Beispiel CSS-Homepage-Vorlage 08 Download Beispiel CSS-Homepage-Vorlage 09 Download Beispiel CSS-Homepage-Vorlage 10 Download Beispiel CSS-Homepage-Vorlage 11

Emails

NACH OBEN

Einschräkungen bei der Verwendung von Email-Links Email-Link mit Betreff- und Inhalt-Vorgabe Emails adressieren AN: CC: BCC: Mehrfachempfänger Höflichkeit und Benimm-Regeln Gültige Email Adressen nach RFC 822 Emails - n/c in der Betrefzeile SPAM Email-Spider - Grundwissen SPAM-Schutz - (Text)darstellung von Eailadresse Email-Adressen vor Spidern verstecken, Textlink Email-Adressen vor Spidern verstecken Script für Mehrfachverwendung Email-Adressen vor Spidern verstecken, Imagelink Email-Adressen vor Spidern verstecken, MouseOver + Mehrfachverwendung Email-Adressen verschlüsseln UNI-Code

Farben

NACH OBEN

Erklärungsversuch :-) RGB-Farbsystem (PDF-download) Erklärungsversuch :-) hexadezimale Farbwerte in HTML-Dokumenten Farbnamen in HTML-Dokumenten Vergleichstabelle hexadezimale Werte und Farbnamen Websichere Farben verwenden Web-Design: Tipps für die Farbwahl, Abstufungen von Farbwerten Seiten-Hintergrundfarbe Seiten-Hintergrundfarbe ändern mit Klick auf einen Verweis Seiten-Hintergrundfarbe ändern bei MouseOver Seiten-Hintergrundfarbe ändern-A - Auswahl im Pulldownmenü Seiten-Hintergrundfarbe ändern-B - Auswahl im Pulldownmenü Seiten-Hintergrundfarbe mit Radio-Boxen ändern Seiten-Hintergrundfarbe manuell auswählen (Farbwähler) Hintergrundfarbe Tabellenzellen-Farbwechsel bei MouseOver Textbox-Hintergrundfarbe ändern mit Mouse-Event

Fehlersuche

Unschöne Darstellung durch Pseudo-Leerzeichen Tabellen Cellspacing, <tr>-Hintergrundfarbe NS4.x Image Randfarbe bei Verweisen, Konflikt CSS / Body-Attribute Tabellenhöhe 100%, Dokumenttyp-Angabe im Head Im Body-Tag: Ränder- und Margin-Angaben Fehlerverhalten von CSS - Fehlersuche CSS Schriftgrößen abhängig von Windows-Einstellungen Tabellenprobleme 01 , Abstände, Ränder Positionierung Tabellenprobleme 02 , keine Anzeige, verzögerte Anzeige Tabellenprobleme 03 , Platzeinbußen durch transprentes Image Tabellenprobleme 04 , absolute Breite falsch berechnet Seitenlayout, Berechnen des verfügbaren Anzeige-Bereichs Seitenlayout, warum sehe ich Scrollbars ?

Formulare

NACH OBEN

Grundsätzliches zum Formulareinsatz in HTML-Dokumenten Erklärung Funktionseinschränkungen beim Formulareinsatz Erklärung Formulare Grundgerüst und <form>-Tag Attribite Formulare Elemente eines Formulars Werteübergabe in Formularen über Name Werteübergabe in Formularen über ID Basis-Formular - Erklärung 01 Aufbau Basis-Formular - Erklärung 02 Aufbau + Prüfung der Emailadresse Basis-Schutz vor Email-Spidern integrieren - JavaScript schreibt <form>-Tag CAPTCHA-Schutz in Formularen - Basiswissen Code-Schnipsel Eingabemarke / Cursor automatisch in das erste Eingabefeld setzen Eingabemarke / Cursor automatisch in ein bestimmtes Eingabefeld setzen Alle Checkboxen auswählen Empfänger Emailadresse Spiderschutz Formularvorlage, Empfängerauswahl im Pulldownmenü + inaktiver Sende-Button Markieren des Textfeld-Inhalts Vorlagen Formularvorlage 01-A mit Prüfung der Eingaben - Basisschutz SPAM + CAPTCHA Formularvorlage 01-B mit Prüfung der Eingaben - Basisschutz SPAM + CAPTCHA Formularvorlage 02, Anforderung Info per Email - Basisschutz SPAM Formularvorlage 03, Anforderung Info per Nachname - Basisschutz SPAM Formularvorlage 04, Antrag einer Mitgliedschaft Formularvorlage 05, Anmeldung zum Turnier Formularvorlage 06, Kombination Spiderschutz + Bestätigung Formularvorlage 07, Fehler melden - Basisschutz SPAM + CAPTCHA Formular-Module CAPTCHA 01 - mathematisches Captcha CAPTCHA 02-A - grafisches Semi-Captcha Caps Look on? Überwachung der Feststelltaste Modul M2 Länderwahl Modul M3 Geburtstag Modul M6 aktuelles Datum Zwei Datumseingaben logisch prüfen (Anreise Abreise) Code: Formularbutton öffnet Email-Client Code: Formularbutton öffnet HTML-Datei Code: Formularbutton öffnet Quelltextansicht Code: Formularbutton öffnet Window Eingabefilter gültige Emailadressen Password Verification Login 01 Login 02 CSS-Formatierungen für Formularelemente Formularfelder mit CSS formatieren - Input Formularelemente mit CSS formatieren - Tnput Textarea Formularelemente mit CSS formatieren - Beispielformular Selectauswahl Pulldownmenü formatieren Submitbutton als Grafik oder CSS formatiert Formularbuttons mit CSS formatieren 01 Formularbuttons mit CSS formatieren 02 Eingabefilter Datumseingabe logisch prüfen 01, gültige Eingabe? Datumseingabe logisch prüfen 02, gültige Eingabe? Eingabe der Emailadresse logisch prüfen, gültige Eingabe? Eingabe logisch prüfen, Buchstaben Eingabe logisch prüfen, Ziffern Eingabe logisch prüfen, Buchstaben + Ziffern Eingabe logisch prüfen, mathematischer Wert Eingabefilter gültige Eingaben selbst festlegen

Frames

NACH OBEN

Einführung + Erklärungen Erklärung Frameset und Frames 01 Spalten Zeilen Breite Erklärung Frameset und Frames 02 Framenamen + Inhalte Erklärung Frameset und Frames 03 Rand Margin Abstand Erklärung Frameset und Frames 04 Scrollbars Resize Erklärung Frameset und Frames 05 verschachtelte Frames - Beispiel + Download Download Homepagevorlagen mit Frames + Beispiele Download Vorlage 1 + Demo, 3 verschachtelte Frames Download Vorlage 2 + Demo, 2 von 4 Frames zentrieren Download Vorlage 3 + Demo, 2 Frameinhalte ändern, Pull-Down-Menü Download Vorlage 4 + Demo, 3 Frames, CSS-Menü, Gipfelstürmer Download Vorlage 5 + Demo, 3 Frames, mehrere Menüs, Ponyhof Download Vorlage 9 + Demo, 3/4 Frames, farbcodirte Seiten, variable Breite Prüfungen Anzahl der Frames überprüfen und entsprechend reagieren Nur im bestimmten (eigenen) Frameset anzeigen, Framename überprüfen Frame escape, automatische Umleitung Datei nur im Frameset aufrufen mit alert-Meldung Frame-Escape manuell, Anzeige im Frameset verhindern, Escapeoption mit Button Frame-Escape manuell, Anzeige nur im eigenen Frameset Escapeoption mit Button Beispiele 1 Sinnvolle Nutzung des Noframes-Bereichs Ladereihenfolge für Dateien im Frameset erzwingen 2 Frames in der Bildschirmmitte zentrieren den anderen Frame drucken Frameinhalte ändern Targetangaben im Link 2 Frameinhalte gleichzeitig ändern, Funktion nutzt Framenamen 2 Frameinhalte gleichzeitig ändern, Funktion nutzt Framenummer 3 Frameinhalte gleichzeitig ändern, Script benutzt Framenamen 2 Frameinhalte gleichzeitig ändern, Auswahl mit Pulldownmenü Beim Laden einer Datei im Frame A den Frameinhalt B automatisch ändern Eigene Datei (Hinweis) und gelinkte Seite im Frameset anzeigen 2 Frames gleichzeitig ändern mit Pulldownmenü Dateianzeige im höchsten Frame (top-frame) - Pull-Down-Menü Dateianzeige im Frame eigener Wahl - Pull-Down-Menü Kombi: Hintergrundfarbe der Menüdatei + Datei im anderen Frame - Pull-Down-Menü

HTML

NACH OBEN

HTML Grundgerüst - 6 Tags für eine Seite erste Schritte mit HTML, PDF-Datei zum Download Sonderzeichen in HTML-Dokumenten einfügen - Notation von Sonderzeichen Liste HTML-Code / ASCII für Sonderzeichen Lj ® ¼ Liste HTML-Code für benannte Sonderzeichen Ο Θ ∑ (Liste als PDF zum Download) Kompatiblität der HTML-Tags für Browser Euro-Zeichen in HTML-Dokumenten € farbige Bullets mit Sonderzeichen META-Tags in HTML-Dokumenten Bilderrahmen durch 5 verschachtelte Tabellen (+Bsp. CSS) simples Balkendiagram-Script Version 01-A (Seitenstatistik V1) erweitertes Balkendiagram-Script Version 01-B (Seitenstatistik V2) Download Homepagevorlagen ohne Frames + Beispiele Download Homepagebeispiel 01 herunterladen Download Homepagebeispiel 02 herunterladen Download Homepagebeispiel 03 herunterladen Download Homepagebeispiel 04 herunterladen Download Online-Bewerbung Homepagebeispiel 07 herunterladen Download Online-Bewerbung Homepagebeispiel 09 Beispiel für 960Pixel

JavaScript

NACH OBEN

Einführung und Erklärungen 01 JavaScript: Einführung JavaScript 02 JavaScript: JavaScript-Bereich deklarieren 03 JavaScript: JavaScript-Anweisungen notieren 04 JavaScript: JavaScript-Kommentare 05 JavaScript: JavaScript-Funktionen 06 JavaScript: JavaScript-Funktionsaufruf Scripte einbinden: Grundlagen und Erklärungen Scripte einbinden: JavaScript im BODY-Bereich eines HTML-Dokuments Scripte einbinden: Ein JavaScript im HEAD-Bereich (Funktion) Scripte einbinden: JavaScript in eine externe Datei auslagern Eventhandler / MouseOver Rollover-Buttons Übersicht Einsatzbereiche Erklärung Eventhandler in Aktion MouseOver-Script für 1 Image MouseOver-Script für 2 Images gleichzeitig Mouseover / Rollover-Menü zur leichten Anpassung MouseOver mit mehreren Links für das gleiche Objekt/Image (Deutschlandkarte) onMouseDown Eventhandler Erklärungsversuche MouseOver Rollover-Buttons Erklärung & Anleitung: Bildwechsel bei MouseOver (14-seitige Erklärung) Erklärung - Anleitung: MouseOver-Technik 2, Bildwechsel bei MouseOver MouseOver schnell und simpel - Verstanden in nur 5 Min, wetten? Frames Frameinhalt ändern mit onLoad() 2 Frameinhalte gleichzeitig ändern, Script benutzt Framenamen 2 Frameinhalte gleichzeitig ändern, Script benutzt Framenummer Frameinhalt ändern mit JavaScript, Script benutzt Framenamen 2 Frameinhalte gleichzeitig ändern mit History-Funktion Arrays Arrays - Grundlagenwissen und Erklärungen - Seite 01 Arrays - Grundlagenwissen und Erklärungen - Seite 02 Arrays - Grundlagenwissen und Vorteile beim Einsatz Array-Elemente zuordnen, Monatsbild aus Array ermitteln Array-Elemente zuordnen, Text in Morsecode , Darstellung im Window JS-Beispiele Zuletzt geklickte Auswahl, Button aktiv anzeigen Textgestaltung, Farbverlauf in Regenbogenfarben JavaScript schreibt das Ergebnis in eine Tabelle gleichzeitiger Aufruf mehrerer Funktionen URI der Seite automatisch anzeigen Bildschirmauflösung-Warner mittels Alert-Box Bildschirmauflösung Umleitung Fensterhöhe ermitteln + höhenangepasste Inhalte einfügen Bookmark Lesezeichen einfügen Script IP-Adresse anzeigen Zufallszahlen 1 Zufallszahl ermitteln zwischen 0 und oberen Limit, z.B. zwischen 0 und 31 1 Zufallszahl ermitteln zwischen X und Y, z.B. -45 und 83 mehrere Zufallszahlen ermitteln zwischen X und Y, z.B. -45 und 83 mehrere Zufallszahlen ermitteln (sortiert keine Doppelnennungen)

Mathematik

NACH OBEN

Operationen Zahlenwerte runden - Math.round() Math.floor() Eine Zahl in Faktoren zerlegen Prüfung des Ergebnisses einer Division - endlich / unendlich Tausender Trennung z.B. 45.216.456.127 Mengenlehre, Schnittmenge ermitteln Berechnungen Bundesjugendspiele Berechnung der Punktzahlen Proportionale Gleichung a/b = c/d , jede Position für X möglich Spareinlagen Berechnung, Zinsertrag, Endbetrag, Einlagen Kraftstoffverbrauch Liter auf 100, Meilen pro Gallone (auch als Umrechner) Quadratwurzel 2er Potenz Kreisumfang / Radius berechnen (Erfassung mit 'GetElementById') Gesamtpreis Berechnung 01, schnelles update ohne Buttons Gesamtpreis Berechnung 02, Vorgabe der Einzelpreise + Formatierung Gesamtpreis Berechnung 03, zusätzlich Stückzahlberechnung + Formatierung Trigonometrische Tabelle Umrechner Zahlensysteme Umrechner, alle zur Basis bis 16 3 dezimale Farbwerte in hexadezimalen RGB-Wert umrechnen Umrechnung Fahrenheit - Celsius und umgekehrt Umrechnung Lichtjahre / Meilen Zufallszahl 1 Zufallszahl ermitteln zwischen 0 und oberen Limit, z.B. zwischen 0 und 31 1 Zufallszahl ermitteln zwischen X und Y, z.B. -45 und 83 mehrere Zufallszahlen ermitteln zwischen X und Y, z.B. -45 und 83 mehrere Zufallszahlen ermitteln (sortiert keine Doppelnennungen)

Mauszeiger

NACH OBEN

Textfahne folgt dem Mauszeiger (Text editierbar) Ein Augenpaar folgt dem Mauszeiger, Pupillen richten sich dynamisch aus Objekte am Gummiband, Schwerkraft und Luftwiederstand simuliert Objekt drop, auf Mausklick fällt ein Objekt nach unten und prallt zurück Kometkreis im Orbit um den Mauszeiger Ein Feuerwerk erscheint beim Mausklick Eine Reihe von Images verschiebt sich bis zur Deckungsgleichheit Schneefall, ausschnittweiser Blick auf ein Image Sterne steigen am Mauszeiger auf

Menüs

NACH OBEN

Erklärung: Menüsystem einer Webseite CSS-formatierte Textlinks (vertikales Menü) CSS-formatierte Textlinks (horizontales Menü) Zuweisung der Formatierung mittels class (vertikales Menü) Zuordnung CSS-Formatierung über ID (vertikales Menü) Zuordnung CSS-Formatierung über ID (horizontales Menü) Menüleiste mit Pfeilen, farblich hinterlegte Grafik (vertikales Menü) Mittels CSS eingebundene Hintergrundgrafik (vertikales Menü) Hintergrund-Farbwechsel mit CSS (waagerechte Leiste) Hintergrund-Farbwechsel mit CSS (waagerechte Leiste) mit Hintergrundgrafik 6 Farben für jeden Link (JavaScript + CSS) Grafik innerhalb von Tabellenzellen vertikales Menü, Buttons als Hintergrundimage in Tabellenzellen pseudo-aufklappen / Untermenü einblenden Navigieren in Seiten mit fortlaufender Nummer in Dateinamen vertikales Menü, Foldertree erzeugt mit einer Tabelle JavaScript Imagechange bei MouseOver (vertikales Menü) aufklappbares Menü - vertikal aufklappbares Menü - horizontal Register A-Z mit CSS formatiert (+ 2 Beispielseiten) Register A-Z mit grafischen Buttons (+ 2 Beispielseiten) Register A-Z mit Image-Map horizontales Menü, Registerkartenmenü 01 2 Frames gleichzeitig ändern, Auswahl mit Pulldownmenü

Pulldown

NACH OBEN

Erklärung eines Pulldown-Menüs Bildauswahl mit Pulldownmenü Pulldown-Menü, Anzeige im gleichen Fenster oder Frame Pulldown-Menü mit "GO"-Button, gleiches Fenster 2 Frames gleichzeitig ändern, Auswahl mit Pulldownmenü Pulldown-Menü, Anzeige im höchsten Frame (top-frame) Pulldown-Menü, Anzeige im Frame eigener Wahl Hintergrundfarbe ändern-A, Auswahl im Pull-Down-Menü Hintergrundfarbe ändern-B, Auswahl im Pull-Down-Menü Window öffnen mit Pull-Down-Menü Kombi: Hintergrundfarbe der Menüdatei + Datei im anderen Frame - Pull-Down-Menü

Spielkram

NACH OBEN

Quiz - Begriffe raten 01, mit 3 Hinweisen beim Fehlversuch Knobelspiel - Schnick, Schnack, Schnuck Übung mit der Tastatur Quiz Zahlenraten - Zahlenraum bis 100 (Weihnachts-) Legekartenspiel (ähnlich Memory) 16 Kärtchen Legekartenspiel (ähnlich Memory) 24 Karten Kärtchen Dynamische Uhrzeitanzeige mit einen Balkenuhr Zeitgesteuerte Ampelanzeige - Grafiken zeitabhängig tauschen Zeitgesteuerte Ampelanzeige - mit Restzeitanzeige in Sekunden Pulsierender Farbrand dynamische Änderung Hintergrundfarbe

Statuszeile

NACH OBEN

Infotext bei MouseOver / MouseOut Infotext bezogen auf die Verweis-URI Standard Infotext, ständige Anzeige Datum und dynamische Zeit plus Info Vor- Nachmittag 'Fliegende' Buchstaben bilden Statustext 'Fliegendes' Datum und Zeit bilden Statustext Anzeige des Ladestatus, Seite wird geladen / fertig ganz normale Laufschrift statische und dynamische Textanzeige in Kombination Anzeige / Dekodierung des Textes durch Aufdecken zwei Statuszeilentexte im Wechsel

Tabellen

NACH OBEN

Tabellen - Einführung + Grundgerüst Übersicht Tabellen-Attribute, Browsersicher 1) Tabellenrand (außen) formatieren mit CSS (style) 2) Tabellen und Zellenrand formatieren mit CSS (style) 3) Tabellenzellen-Randfarbe mit CSS (style) 4) Tabellenrand farbig ohne Bordercolor - HTML-Formatierung Tabellenzeilenhöhe , Bestimmung durch transprentes Image Tabellenzellenbreite , Bestimmung durch transprentes Image Tabellenprobleme 01, vergessene Angaben Tabellenprobleme 02, langsamer Aufbau Tabellenprobleme 03, Platzeinbußen durch transprentes Image Tabellenprobleme 04, absolute Breite falsch berechnet Tabellenprobleme 05, <tr>-Hintergrundfarbe cellspacing Hintergrundbild einbinden, Besonderheiten NS 4.x Tabelle schreiben mittels JavaScript Einheitlich hohe Textspalten / Zeilenhöhe mit HTML Tabellen als Designhilfe zur Seitengestaltung Inhalte zentrieren mit Tabellen Seiten zentrieren mit Tabellen Tabellenzellen-Farbwechsel bei MouseOver

Tipps

NACH OBEN

Image als Aufzählungszeichen mit HTML Einrücken von Elementen mit HTML und CSS Zugriff auf ein Unterverzeichnis verhindern Email Spiderschutz, email-adresse verstecken Entwickeln von Farbabstufungen in gleichmäßigen Schritten Redesign erleichtern: Hintergrundfarben durch CSS-Unterklassen Schriftgröße in Punkt oder Pixel angeben? History und alte Version einer Web-Präsenz ansehen Rollover Buttons müssen nicht langweilig sein Proportionale Bildgröße automatisch farblich hinterlegte transparente Images Tabellen als Designhilfe Bestimmung der Anzeige-Breite Tipp zum Test des Layouts / Bildschirmauflösung unsichtbare Schaltfläche Gesamte Webseite als Link als Browserstartseite festlegen / Bookmark

Umleitung

NACH OBEN

zum Frameset Script, automatische Umleitung zum Frameset Wochentagsdatei aufrufen, Mo. - So., Umleitung 1 von 7 Tagesdatei aufrufen, Umleitung 1 von 31 Monatsdatei aufrufen Jan. - Dez., Umleitung 1 von 12 an einem bestimmten Datum andere Datei aufrufen 3 Umleitungen vor / während / nach einer Zeitspanne (Start- Enddatum) Uhrzeitweiche 01 - abhängig von der Uhrzeit umleiten auf 1 von 2 Dateien Uhrzeitweiche 02 - abhängig von der Uhrzeit umleiten auf 1 von 3 Dateien zu den JavaScript Seiten umleiten Umleitung 3 Browser, Browsersniffer 3 Umleitung 4 Browser, Browsersniffer 4 Umleitung 4 Browser, Browsersniffer 4a Timeout für die Seite mit Zeitanzeige und Weiterleitung Link mit Umleitung über Zwischenmeldung manuelle Umleitung für Bildschirmauflösung Weiter wenn inaktiv (Mausklick-Überwachung)

Verweise

NACH OBEN

Verweise Grundlagen, Syntax eines Links auf eine HTML-Datei Verweise Grundlagen, lokaler Link auf eine HTML-Datei Verweise Grundlagen, absoluter Link auf eine HTML-Datei mit http://www Verweise Grundlagen, interner Link auf einen Anker innerhalb des Dokuments Verweise Pfadangaben, Berücksichtigung des Verzeichnisbaumes Verweise Target Zielangaben, Window / Browserfenster für die Anzeige Verweis für ein PopUp-Window - optimale Verlinkung Aus einem Window heraus, Datei im Browserfenster öffnen Verweis ohne Unterstrich, Link gestalten mit CSS Verweis auf ZIP-Dateien Image als Verweis einbinden, Besonderheiten Randfarbe Punktierter Rahmen bei aktivem Link, IE und NS6 Anzahl aller Verweise / Links einer Seite zählen verweissensitive Grafiken, Image-Maps, Hot Spots als Link verweissensitive Grafiken, Image-Map öffnet PopUp-Window Vor / Zurück in der History blättern Zurück-Button anzeigen nur wenn sinnvoll Vor / Zurück in der History blättern für Frames Mit Pfeiltasten in der History blättern Gestaltung einer Linkliste Verweis mit Zwischenmeldung Verweis mit PopUp-Hinweisfenster Link des Tages (1 von 7), abhängig vom Wochentag Tageslink des Monats (1 von 31) Tageslink des Monats (1 von 31) mit opt. Banner Link des Monats (1 von 12) mit opt. Banner

Windows

NACH OBEN

Erklärung Script, Window definieren 01 (Dateiname und Größe) Erklärung Script, Window definieren 02 Dateiname erst beim Aufruf festlegen Window Attribute, Übersicht (auch als PDF) und Beispiel Window größe festlegen - Übergabe der Parameter Verweise auf PopUp-Windows für alle Situationen (Alternative bei PopUp-Blocker) simples PopUp-Window Script einmalige Nutzung erweitertes PopUp-Window Script Übergabe des Dateinamens erweitertes PopUp-Window Script Übergabe der Größenangaben Anwenderfreundliches Standardscript, 5 Übergabeparameter Window-Script de Luxe, Übergabe: Dateiname, Breite, Höhe, zentriert ja / nein PupUp-Window für ein Image passend öffen 1 mit Titeltext PupUp-Window für ein Image passend öffen 2 ohne Titeltext PupUp-Window für ein Image passend öffen 3, Nachricht bei Rechtskick PupUp-Window kleiner als Bildgröße (mit Scrollbars) PupUp-Window zentrieren PopUp-Window automatisch öffnen PopUp-Window automatisch öffnen, zentriert PopUp-Window automatisch schließen 1 PopUp-Window automatisch schließen 2 (Zeitanzeige) Window im Vollbildmodus öffnen - Fullsceenwindow Mit window.close ein Fenster schließen, Link Image Button Mit top.window.close() einen Frameset schließen, Link Image Button Windows Positionieren, 3 Beispiele: fixe Position, zentrieren, bewegen Window öffnen mit Pulldownmenü ist das Window bereits geöffnet? aus einem PopUp-Window die öffnende Seite ändern Window / Browserfenster maximieren

Zeit

NACH OBEN

Timeout für die Seite mit Zeitanzeige und Weiterleitung Delay / Verzögerungs-Script mit Zeitübergabe in Sekunden od. fester Wartezeit Infotext Datum und Zeit in der Titelzeile Uhren digitale Uhr 01 - dynamische Zeitanzeige grafische Ziffern digitale Uhr 01a (MiniClock) - dynamische Zeitanzeige grafische Ziffern digitale Uhr 02 - Eingabefeld für Zeitversatz, dynamisch grafische Ziffern digitale Uhr 03 - Uhrzeit für eine Zeitzone, dynamisch grafische Ziffern analoge Uhr am Mauszeiger vertikale digitale Uhr in der Bildschirmecke analoge Weltzeituhr mit Pulldownmenü für die Zeitzone Dynamische Uhrzeitanzeige Balkenuhr (Spielkram) Datum und dynamische Uhrzeitanzeige 1 Dynamische Uhrzeitanzeige 2 Dynamische Uhrzeitanzeige 3 Dynamische Uhrzeitanzeige 4 Datum und statische Uhrzeitanzeige 1 Countdown für Sylvester / Geburtstag - Image Clock Countdown bis Neujahr Statuszeile Countdown bis Neujahr, Anzeige im 'unsichtbaren' Formularfeld Zeitdarstellung im Iso-Standard zeitabhängig Mini-Kalenderblatt 03 - Datumsanzeige + Begrüßungstext (uhrzeitabhängig) Begrüßungstext ja nach Tageszeit (4 Optionen) abhängig von der Uhrzeit umleiten auf 1 von 2 Dateien Zufallsbild aus zwei Auswahlen, zeitabhängig (Tag/Nacht) Bild zeitabhängig (Sekundenwert) - Beispiel Ampel Bild zeitabhängig (Sekundenwert) - Beispiel Ampel mit Restzeitanzeige Zufallstext aus 2 Auswahlen, Zeitabhängig (Tag/Nacht) Weiterleitung bei Inaktivität (mousedown)

NACH OBEN