archive-de.com » DE » E » EKIWI.DE

Total: 422

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • SELFHTML: JavaScript / Sprachelemente / Event-Handler
    ggf onclick onclick beim Anklicken Für den Fall dass der Anwender ein Element anklickt Nach JavaScript Netscape erlaubt in folgenden HTML Tags a area input textarea Nach HTML 4 0 erlaubt in folgenden HTML Tags a abbr acronym address area b big blockquote body button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset form h1 h2 h3 h4 h5 h6 hr i img input ins kbd label legend li link map menu noframes noscript object ol optgroup option p pre q s samp select small span strike strong sub sup table tbody td textarea tfoot th thead tr tt u ul var Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Test action input type text size 30 name Ausgabe readonly readonly br input type button value Letzter Update onclick this form Ausgabe value document lastModified form body html Erläuterung Im Beispiel wird ein Formular mit einem Eingabefeld das jedoch auf readonly also nur Lesen gesetzt wird und einem Button definiert Der Button hat die Aufschrift Letzter Update Beim Anklicken des Buttons wird der Event Handler onclick aktiv der im HTML Tag des Buttons definiert ist Im Beispiel wird daraufhin in das Eingabefeld der Zeitpunkt der letzten Änderung am Dokument geschrieben Beachten Sie Konqueror 3 1 interpretiert zwar diesen Event Handler kann aber das Anzeigebeispiel nicht darstellen da lastModified nicht interpretiert werden kann ondblclick bei doppeltem Anklicken Für den Fall dass der Anwender ein Element doppelt anklickt Nach JavaScript Netscape erlaubt in folgenden HTML Tags a area input textarea Nach HTML 4 0 erlaubt in folgenden HTML Tags a abbr acronym address area b big blockquote body button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset form h1 h2 h3 h4 h5 h6 hr i img input ins kbd label legend li link map menu noframes noscript object ol optgroup option p pre q s samp select small span strike strong sub sup table tbody td textarea tfoot th thead tr tt u ul var Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Rechnen action Wert input type text size 10 name Wert input type button value Doppelklick hoch 2 ondblclick document Rechnen Wert value document Rechnen Wert value document Rechnen Wert value form body html Erläuterung Im Beispiel wird ein Formular mit einem Eingabefeld und einem Button definiert Im Button ist der Event Handler ondblclick notiert Der Button reagiert daher nur auf Doppelklick Wenn der Anwender doppelt auf den Button klickt wird von dem Wert den er in dem Eingabefeld eingegeben hat das Quadrat errechnet und das Ergebnis wird wiederum in das Eingabefeld geschrieben Beachten Sie Bei Netscape Browsern 4 x unter Macintosh ist dieser Event Handler nicht verfügbar Safari 1 0 erkennt diesen Event Handler nicht an Buttons onerror im Fehlerfall Eignet sich zum Abfangen von Fehlermeldungen und zum Ersetzen solcher Meldungen durch eigene Beachten Sie jedoch dass dadurch nicht die Fehler selbst beseitigt werden onerror ist vor allem zum Handling von Fehlern beim Laden von Grafiken gedacht Nach JavaScript erlaubt in folgendem HTML Tag img Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body img src gibtsnicht gif onerror alert an dieser Stelle sollte eine Grafik stehen n doch leider kann sie nicht angezeigt werden body html Erläuterung Im Beispiel wird in einer Grafikreferenz der Event Handler onerror notiert Er wird dann aktiv wenn die Grafikdatei nicht existiert oder nicht angezeigt werden kann Im Beispiel wird dann ein entsprechendes Meldungsfenster ausgegeben onfocus beim Aktivieren Tritt ein wenn der Anwender ein Element aktiviert Nach JavaScript Netscape erlaubt in folgenden HTML Tags body frame input layer select textarea Nach HTML 4 0 erlaubt in folgenden HTML Tags a area button input label select textarea Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Test action input type text size 30 onfocus this value Hier Ihren Namen eingeben br input type text size 30 onfocus this value Hier Ihren Wohnort eingeben br input type text size 30 onfocus this value Hier Ihr Alter eingeben br form body html Erläuterung In dem Beispiel wird ein Formular definiert das drei Eingabefelder enthält Da die Felder unbeschriftet sind hat der Anwender keine Ahnung was in die einzelnen Felder eingeben kann Bewegt er den Cursor aus Neugier doch in eines der Eingabefelder wird der Event Handler onfocus des jeweiligen Feldes aktiv Dabei wird in das jeweilige Feld eine Aufforderung geschrieben was in dem Feld einzugeben ist onkeydown bei gedrückter Taste Tritt ein wenn der Anwender während er ein Element aktiviert hat eine Taste drückt Nach JavaScript Netscape erlaubt in folgenden HTML Tags input textarea Nach HTML 4 0 erlaubt in folgenden HTML Tags a abbr acronym address area b big blockquote body button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset form h1 h2 h3 h4 h5 h6 hr i img input ins kbd label legend li link map menu noframes noscript object ol optgroup option p pre q s samp select small span strike strong sub sup table tbody td textarea tfoot th thead tr tt u ul var Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function Aktualisieren document Test Kontrolle value document Test Eingabe value length 1 return true script head body form name Test action Kurzbeschreibung Ihrer Homepage max 50 Zeichen br input type text name Eingabe size 40 onkeydown Aktualisieren this value input type text value 0 readonly readonly size 3 name Kontrolle br input type reset form body html Erläuterung Im Beispiel wird ein Formular definiert in dem der Anwender eine Kurzbeschreibung seiner Homepage in einem Eingabefeld abliefern kann Der Text soll maximal 50 Zeichen lang sein Damit der Anwender nicht mitzählen muss gibt es ein kleines Eingabefeld nebendran in dem nach jedem Tastendruck ausgegeben wird wie viele Zeichen bereits eingegeben wurden Dazu ist in dem Eingabefeld mit Namen Eingabe der Event Handler onkeydown notiert Er bewirkt dass solange der Anwender in dem Formularfeld etwas eingibt bei jedem Tastendruck die Funktion Aktualisieren aufgerufen wird die im Dateikopf in einem Script Bereich definiert ist Diese Funktion errechnet aus document Test Eingabe value length 1 wie viele Zeichen bereits eingegeben wurden und schreibt eine entsprechende Ausgabe in das dafür vorgesehene Eingabe Feld onkeypress bei gedrückt gehaltener Taste Tritt ein wenn der Anwender eine Taste drückt und diese gedrückt hält Nach JavaScript Netscape erlaubt in folgenden HTML Tags input textarea Nach HTML 4 0 erlaubt in folgenden HTML Tags a abbr acronym address area b big blockquote body button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset form h1 h2 h3 h4 h5 h6 hr i img input ins kbd label legend li link map menu noframes noscript object ol optgroup option p pre q s samp select small span strike strong sub sup table tbody td textarea tfoot th thead tr tt u ul var Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Test action input type text size 30 name Eingabe onkeypress alert this value form body html Erläuterung Im Beispiel ist ein Formular mit einem Eingabefeld definiert Wenn der Anwender in dem Eingabefeld etwas eingibt wird bei jedem Tastendruck in einem Meldungsfenster der aktuelle Wert des Formularfeldes ausgegeben Dazu ist in dem Eingabefeld der Event Handler onkeypress notiert Er tritt in Aktion wenn eine Taste gedrückt und gedrückt gehalten wird In Netscape 4 x und Opera 5 wird dieser Event Handler stets nach dem Event Handler onkeydown ausgeführt Gibt der Event Handler onkeydown den Wert false zurück so wird unter Netscape die Ausführung des Event Handlers onkeypress unterdrückt Im Internet Explorer unterdrückt der Event Handler onkeypress den Event Handler onkeydown onkeyup bei losgelassener Taste Tritt ein wenn der Anwender eine Taste gedrückt hat und diese wieder loslässt Nach JavaScript Netscape erlaubt in folgenden HTML Tags input textarea Nach HTML 4 0 erlaubt in folgenden HTML Tags a abbr acronym address area b big blockquote body button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset form h1 h2 h3 h4 h5 h6 hr i img input ins kbd label legend li link map menu noframes noscript object ol optgroup option p pre q s samp select small span strike strong sub sup table tbody td textarea tfoot th thead tr tt u ul var Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body form name Test action input type text size 30 name Eingabe onkeyup this form Ausgabe value this value br input type text readonly readonly size 30 name Ausgabe br input type reset form body html Erläuterung Im Beispiel wird ein Formular definiert das zwei Eingabefelder mit den Namen Eingabe und Ausgabe enthält Wenn der Anwender in dem oberen Feld also dem das für die Eingabe gedacht ist etwas eingibt wird der Wert automatisch Zeichen für Zeichen in das untere also das Ausgabefeld übernommen Dazu ist im Eingabefeld der Event Handler onkeyup notiert Dieser Event Handler tritt in Aktion wenn der Anwender in dem Feld eine Taste gedrückt und wieder losgelassen hat was ja bei jedem eingegebenen Zeichen der Fall ist Mit this form Ausgabe value this value wird dem Ausgabefeld der aktuelle Wert des Eingabefeldes zugewiesen onload beim Laden einer Datei Tritt ein wenn eine HTML Datei geladen wird Nach JavaScript Netscape und HTML 4 0 erlaubt in folgenden HTML Tags frameset body Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function NaviFenster Navigation window open navigat htm Navigation height 200 width 300 Navigation focus script head body onload NaviFenster h1 Seite mit Fernbedienung h1 body html Beispiel Datei navigat htm html head title Test title head body a href javascript void opener location href index htm SELFHTML a br a href javascript void opener location href index htm JavaScript a br a href javascript void opener location href index htm Sprachelemente a br body html Erläuterung Im Beispiel wird beim Einlesen der HTML Datei ein zweites Fenster geöffnet das zum Beispiel als Fernbedienung des Hauptfensters dienen könnte Dazu ist im einleitenden body Tag der Event Handler onload notiert Er ruft die Funktion NaviFenster auf die in einem JavaScript Bereich im Dateikopf definiert ist Innerhalb dieser Funktion steht der Befehl zum Öffnen des Zweitfensters Das Fenster erhält auch gleich den Fokus wird zum aktiven Fenster sodass es im Vordergrund des Hauptfensters zu sehen ist Ins Zweitfenster wird die Datei navigat htm geladen Diese enthält Verweise mit dem Event Handler javascript Beim Ausführen des Verweises wird im Elternfenster des Zweitfensters markiert durch den reservierten Fensternamen opener mit document location href eine Seite geladen Die Anweisung opener location href index htm gibt den URI der zu ladenen Datei zurück Mit Hilfe des Operators void wird dieser unterdrückt Dadurch werden Anzeigefehler vermieden onmousedown bei gedrückter Maustaste Tritt ein wenn der Anwender die Maustaste gedrückt hält Nach JavaScript Netscape erlaubt in folgenden HTML Tags input type button a Nach HTML 4 0 erlaubt in folgenden HTML Tags a abbr acronym address area b big blockquote body button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset form h1 h2 h3 h4 h5 h6 hr i img input ins kbd label legend li link map menu noframes noscript object ol optgroup option p pre q s samp select small span strike strong sub sup table tbody td textarea tfoot th thead tr tt u ul var Beispiel Anzeigebeispiel So sieht s aus auf Verweis klicken Maus gedrückt halten und auf Statuszeile achten html head title Test title head body p Klicken Sie auf den Button und lassen Sie die Maustaste einige Zeit heruntergedrückt um den Event Handler in Aktion zu sehen p input type button value Klick mich onmousedown this value Maustaste wurde gedrückt onmouseup this value Maustaste wurde losgelassen body html Erläuterung Das Beispiel enthält einen Klick Button Sobald der Anwender die Maustaste drückt während sich der Mauszeiger über dem Button befindet tritt der Event Handler onmousedown in Aktion der im input Tag notiert ist Im Beispiel wird dabei der Text des Buttons geändert Beim Loslassen der Maustaste tritt der Event Handler onmouseup in Aktion der den Text des Buttons ebenfalls abändert onmousemove bei weiterbewegter Maus Tritt ein wenn der Anwender die Maus bewegt unabhängig davon ob die Maustaste gedrückt ist oder nicht Nach JavaScript Netscape bislang nicht in HTML Tags möglich sondern nur im Zusammenhang mit dem event Objekt Nach HTML 4 0 erlaubt in folgenden HTML Tags a abbr acronym address area b big blockquote body button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset form h1 h2 h3 h4 h5 h6 hr i img input ins kbd label legend li link map menu noframes noscript object ol optgroup option p pre q s samp select small span strike strong sub sup table tbody td textarea tfoot th thead tr tt u ul var Beispiel Anzeigebeispiel So sieht s aus Maus über den Text bewegen und auf Statuszeile achten html head title Test title script type text javascript function Mauskontrolle Element var Pos Element offsetLeft Element offsetTop window status Pos return true script head body p onmousemove Mauskontrolle this Hier ein kleiner Text p body html Erläuterung Das Beispiel zeigt wie Event Handler auch in HTML Tags funktionieren bei denen das früher nicht möglich war In dem Beispiel wird ein Textabsatz definiert Innerhalb des Textabsatzes ist der Event Handler onmousemove notiert Der Event Handler tritt in Aktion solange der Anwender die Maus im Anzeigebereich des Textabsatzes bewegt Dann wird so oft wie möglich die Funktion Mauskontrolle aufgerufen die in einem Script Bereich im Dateikopf notiert ist Dieser Funktion wird als Parameter mittels this das betroffene Element übergeben Die Funktion bewirkt dass in der Statuszeile des Browsers jeweils die Koordinaten der linken oberen Ecke des Elementes angezeigt werden Beachten Sie Opera 5 kennt den Event Handler onmousemove zwar interpretiert das obige Beispiel aber nicht weil Opera die Eigenschaft window status erst ab Version 6 unterstützt onmouseout beim Verlassen des Elements mit der Maus Tritt ein wenn der Anwender mit der Maus über ein Element fährt und dieses dabei verlässt Nach JavaScript Netscape erlaubt in folgenden HTML Tags a area Nach HTML 4 0 erlaubt in folgenden HTML Tags a abbr acronym address area b big blockquote body button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset form h1 h2 h3 h4 h5 h6 hr i img input ins kbd label legend li link map menu noframes noscript object ol optgroup option p pre q s samp select small span strike strong sub sup table tbody td textarea tfoot th thead tr tt u ul var Beispiel Anzeigebeispiel So sieht s aus Maus über den Link und wieder weg bewegen html head title Test title head body a href http aktuell de selfhtml org weblog onmouseout alert Die News sollten Sie ruhig mal besuchen b News b a body html Erläuterung Im Beispiel ist ein Verweis definiert Wenn der Anwender mit der Maus über den Verweis fährt ihn dann aber nicht anklickt sondern die Maus doch wieder von dem Verweis entfernt tritt der Event Handler onmouseout in Aktion Im Beispiel wird dann ein Meldungsfenster ausgegeben dass den Anwender darauf hinweist dass er die News Seite ruhig mal aufrufen soll onmouseover beim Überfahren des Elements mit der Maus Nach JavaScript Netscape erlaubt in folgenden HTML Tags a area Nach HTML 4 0 erlaubt in folgenden HTML Tags a abbr acronym address area b big blockquote body button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset form h1 h2 h3 h4 h5 h6 hr i img input ins kbd label legend li link map menu noframes noscript object ol optgroup option p pre q s samp select small span strike strong sub sup table tbody td textarea tfoot th thead tr tt u ul var Beispiel Anzeigebeispiel So sieht s aus html head title Test title head body h1 id Test onmouseover this innerHTML Sehen Sie onmouseout this innerHTML Ich bin dynamisch Ich bin dynamisch h1 body html Erläuterung Das Beispiel zeigt wie Event Handler auch in HTML Tags funktionieren bei denen das bislang nicht möglich war Das Beispiel funktioniert mit dem Internet Explorer ab Version 4 x und im Netscape Navigator ab Version 6 welche die Event Handler nach HTML 4 0 weitgehend interpretieren In dem Beispiel wird eine Überschrift erster Ordnung definiert Innerhalb der Überschrift sind die Event Handler onmouseover und onmouseout notiert Der Event Handler onmouseover tritt in Aktion wenn der Anwender die Maus in den Anzeigebereich der Überschrift bewegt und onmouseout wird aktiv wenn er die Maus wieder aus dem Anzeigebereich herausbewegt Mit Hilfe von this nehmen Sie Bezug auf das aktuelle Objekt und können mittels der Eigenschaft innerHTML mit jedem Aktivwerden eines der beiden Event Handler den Text der Überschrift dynamisch austauschen Bei onmouseover wird ein anderer Text angezeigt bei onmouseout wieder der ursprüngliche Text Beachten Sie Auch Opera ab Version 5 interpretiert den Event Handler nach HTML 4 0 Er kennt jedoch nicht die Eigenschaft innerHTML onmouseup bei losgelassener Maustaste Tritt ein wenn der Anwender die Maustaste gedrückt hat und sie nun wieder loslässt Nach JavaScript Netscape erlaubt in folgenden HTML Tags input type button a Nach HTML 4 0 erlaubt in folgenden HTML Tags a abbr acronym address area b big blockquote body button caption center cite code col colgroup dd del dfn dir div dl dt em fieldset form h1 h2 h3 h4 h5 h6 hr i img input ins kbd label legend li link map menu noframes noscript object ol optgroup option p pre q s samp select small span strike strong sub sup table tbody td textarea tfoot th thead tr tt u ul var Beispiel Anzeigebeispiel So sieht s aus html

    Original URL path: http://html.ekiwi.de/javascript/sprache/eventhandler.htm (2016-04-25)
    Open archived version from archive


  • SELFHTML: JavaScript / Sprachelemente / Funktionen
    Diese Klammern dürfen niemals fehlen Die Anweisungen innerhalb der Funktion können sehr unterschiedlicher Natur sein Da können Sie z B Objekte manipulieren übergebene Parameter verarbeiten und ändern Berechnungen anstellen usw Sie können innerhalb von Funktionen auch andere Funktionen aufrufen Welche Anweisungen innerhalb einer Funktion stehen hängt davon ab was die Funktion leisten soll Im obigen Beispiel wird ermittelt ob die übergebene Zahl eine Primzahl ist Wenn es keine ist wird für jede Zahl durch die sie teilbar ist eine entsprechende Meldung ausgegeben Wenn es eine Primzahl ist wird am Ende ausgegeben dass es sich um eine Primzahl handelt Funktion aufrufen Sie können eine selbst definierte Funktion aufrufen um den darin enthaltenen JavaScript Code auszuführen Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function PrimzahlCheck Zahl Zahl parseInt Zahl 10 if isNaN Zahl alert Sie müssen eine Zahl eingeben return var Grenzzahl Zahl 2 var Check 1 for var i 2 i Grenzzahl i if Zahl i 0 alert Zahl ist keine Primzahl weil teilbar durch i Check 0 if Check 1 alert Zahl ist eine Primzahl script head body form name PrimzahlFormular action p Geben Sie eine Zahl ein Es wird geprüft ob es sich um eine Primzahl handelt p input type text name Eingabezahl input type button value auf Primzahl checken onclick PrimzahlCheck document PrimzahlFormular Eingabezahl value form body html Erläuterung Das obige Beispiel zeigt eine komplette HTML Datei Darin ist ein JavaScript Bereich definiert in dem wiederum die Funktion PrimzahlCheck definiert ist Im Dateikörper der HTML Datei steht ein Formular mit einem Eingabefeld und einem Button Im Eingabefeld kann der Anwender eine Zahl eingeben Wenn er auf den Button klickt wird die JavaScript Funktion aufgerufen und ermittelt ob es sich bei der Eingabe um eine Primzahl handelt Dazu enthält der Button den Event Handler onclick beim Anklicken Dahinter wird die JavaScript Funktion mit der eingegebenen Zahl aufgerufen Die Funktion rufen Sie mit ihrem Funktionsnamen auf Dahinter folgt die öffnende Klammer Wenn die Funktion keine Parameter erwartet notieren Sie hinter der öffnenden gleich eine schließende Klammer Wenn die Funktion Parameter erwartet müssen Sie für jeden Parameter einen erlaubten Wert übergeben Im Beispiel erwartet die Funktion einen Parameter Wenn Sie mehrere Parameter übergeben trennen Sie diese durch Kommata Funktion mit Rückgabewert und solche Funktion aufrufen Eine Funktion kann einen ermittelten Wert an die aufrufende Instanz zurückgeben Beispiel Anzeigebeispiel So sieht s aus html head title Test title script type text javascript function BruttoBetrag Netto Prozente var Ergebnis Netto 1 Prozente 100 return Ergebnis function SchreibeBrutto Betrag Prozentsatz var Wert BruttoBetrag Betrag Prozentsatz document BruttoForm Ergebnisfeld value Wert script head body form name BruttoForm action pre Nettobetrag input type text name NettoEingabe Prozentsatz input type text name ProzentEingabe pre p Kommabetrag mit Punkt eingeben p input type button value Brutto ermitteln onclick SchreibeBrutto document BruttoForm NettoEingabe value document BruttoForm ProzentEingabe value pre Ergebnis input type text name Ergebnisfeld pre form body html Erläuterung Das obige Beispiel zeigt eine HTML Datei in deren Dateikopf ein

    Original URL path: http://html.ekiwi.de/javascript/sprache/funktionen.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: HTML/XHTML / Frames / Eingebettete Frames
    iframe und dem erforderlichen abschließenden iframe können Sie Text und andere Elemente notieren die von Web Browsern angezeigt werden die den eingebetteten Frame nicht interpretieren Beachten Sie Wenn Sie das iframe Element in einer HTML Datei notieren müssen Sie in dieser Datei die HTML Variante Transitional wählen Andere Möglichkeiten um Inhalte aus anderen Dateien innerhalb einer HTML Datei anzuzeigen sind Datendateien als Objekt ebenfalls HTML Standard Layer mit Inhalt aus anderer Datei Netscape spezifisch sowie Server Side Includes HTML Standard konform jedoch nur in HTTP Umgebung ausführbar Eigenschaften eingebetteter Frames Sie können verschiedene weitere Eigenschaften definieren um ein eingebettetes Frame Fenster zur Umgebung auszurichten Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN http www w3 org TR html4 loose dtd html head title Eigenschaften eingebetteter Frames title head body h1 Bild zum Scrollen h1 iframe src bild jpg name Bildframe width 300 height 200 align left scrolling yes marginheight 0 marginwidth 0 frameborder 0 p Ihr Browser kann leider keine eingebetteten Frames anzeigen img src bild jpg width 464 height 580 border 0 alt Bild p iframe p Dieses Bild wurde auf dem Karwendelstein bei Mittenwald aufgenommen in ca 2400 Meter H ouml he Es demonstriert was einem in einem Freistaat so alles passieren kann p body html Erläuterung Das Beispiel zeigt wie Sie ein eingebettetes Frame Fenster dazu verwenden können um eine größere Grafik anzuzeigen und diese mit eigenen Scrollbars auszustatten Mit align left richten Sie den eingebetteten Frame links aus Nachfolgende Inhalte fließen dann rechts um den Frame Mit align right richten Sie den eingebetteten Frame rechts aus und nachfolgende Inhalte fließen links um den Frame Mit scrolling yes können Sie Scrollbars Bildlaufleisten in dem eingebetteten Frame erzwingen mit scrolling no unterdrücken scrolling auto können Sie ebenfalls angeben doch dies

    Original URL path: http://html.ekiwi.de/html/frames/eingebettete.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: Dynamisches HTML / DHTML-Modelle / Datenanbindung (nur Microsoft)
    Eingabe SuchEng value else Suchausdruck Suchausdruck Englisch document Eingabe SuchEng value Suchbegriffe if document Eingabe SuchFra value if Suchbegriffe 0 Suchausdruck Suchausdruck Franzoesisch document Eingabe SuchFra value else Suchausdruck Suchausdruck Franzoesisch document Eingabe SuchFra value Suchbegriffe if document Eingabe SuchIta value if Suchbegriffe 0 Suchausdruck Suchausdruck Italienisch document Eingabe SuchIta value else Suchausdruck Suchausdruck Italienisch document Eingabe SuchIta value Suchbegriffe if document Eingabe SuchSpa value if Suchbegriffe 0 Suchausdruck Suchausdruck Spanisch document Eingabe SuchSpa value else Suchausdruck Suchausdruck Spanisch document Eingabe SuchSpa value Suchbegriffe document all Begriffe object Filter Suchausdruck document all Begriffe Reset document all Anzeigetabelle dataSrc Begriffe if document all Begriffe recordset recordCount Datensaetze document all Anzeigetabelle dataPageSize Begriffe recordset recordCount document all Treffer innerText Begriffe recordset recordCount Suchtreffer document all Anzeigetabelle style display block else document all Treffer innerText 0 Suchtreffer script head body object id Begriffe classid clsid 333C7BC4 460F 11D0 BC04 0080C7055A83 param name DataURL value woerterbuch txt param name UseHeader value true param name Filter value param name FieldDelim value object p Die durchsuchbare Datenbank enthält 1000 Einträge Suchen Sie nach Begriffen in einer oder mehreren Sprachen Bei der Suche in mehreren Sprachen werden die Eingaben logisch durch UND verknüpft Sie dürfen auch das Wildcard Zeichen b b für Teilausdrücke verwenden Suchen Sie z B mal im Feld Deutsch nach b Arbeits b oder im Feld Italienisch nach b ore b oder im Feld Englisch nach b computer b p form name Eingabe action Suche nach br input name SuchDeu type text width 40 Deutsch br input name SuchEng type text width 40 Englisch br input name SuchFra type text width 40 Franzoesisch br input name SuchIta type text width 40 Italienisch br input name SuchSpa type text width 40 Spanisch br input type button style width 150px height 25px value Suche starten onclick Suchen form table border 1 cellpadding 1 cellspacing 0 tr td table width 100 tr td valign top colspan 5 span id Treffer style color 0000CC font weight bold span td tr tr td bgcolor EEEEEE valign top width 20 b Deutsch b td td bgcolor EEEEEE valign top width 20 b Englisch b td td bgcolor EEEEEE valign top width 20 b Französisch b td td bgcolor EEEEEE valign top width 20 b Italienisch b td td bgcolor EEEEEE valign top width 20 b Spanisch b td tr table table id Anzeigetabelle style display none width 100 tr td bgcolor FFFFE0 valign top width 20 span datafld Deutsch span td td bgcolor FFFFE0 valign top width 20 span datafld Englisch span td td bgcolor FFFFE0 valign top width 20 span datafld Franzoesisch span td td bgcolor FFFFE0 valign top width 20 span datafld Italienisch span td td bgcolor FFFFE0 valign top width 20 span datafld Spanisch span td tr table td tr table body html Erläuterung Das Beispiel zeigt die vollständige HTML Datei zur Realisierung einer durchsuchbaren Datenbank Innerhalb der HTML Datei wird wie im Beispiel Datei dynamisch in Tabelle einbinden wieder das object Tag notiert um die Verbindung zu der externen Datendatei herzustellen Es wird jedoch ein neuer Parameter angegeben param name Filter value Mit dem Parameter Filter können Sie die Datensätze die aus der Datendatei geholt werden begrenzen Dazu können Sie im value Attribut Einschränkungskriterien angeben Bei der Objektdefinition im obigen Beispiel wird value notiert Das bedeutet es gibt keine Einschränkungen Alle Datensätze werden gefunden In dem längeren Script das im Kopf der HTML Datei steht wird der Wert für Filter dynamisch verändert Dadurch wird die Anzeige auf bestimmte Datensätze eingeschränkt nämlich solche die den Filterkriterien entsprechen Die Kriterien für den Filter soll der Anwender durch seine Suchanfrage selbst bestimmen können Im obigen Beispiel wird dazu unterhalb des object Tags ein Formular definiert form name Eingabe action Das Formular hat fünf Eingabefelder eines für jede der fünf Sprachen des mehrsprachigen Wörterbuchs Mit einem anklickbaren Button kann der Anwender die Suche abschicken Beim Anklicken des Buttons wird die Funktion Suchen aufgerufen die in dem JScript Bereich im Dateikopf definiert ist onclick Suchen Innerhalb der Funktion Suchen wird zunächst eine Variable Datensaetze mit einem Wert vorbelegt 1000 Das empfiehlt sich bei größeren Datenbeständen Denn per Voreinstellung liefert der Internet Explorer wenn er keine Datensätze findet die dem Suchkriterium entsprechen alle Datensätze zurück Angenommen Sie haben 5000 Datensätze Dann würde eine Tabelle mit 5000 Zeilen angezeigt Da dies im Aufbau ziemlich lange dauert ist eine Begrenzung sinnvoll Die Variable Suchausdruck soll die Anwenderkriterien zum Durchsuchen des Datenbestandes aufnehmen Dabei ist es erforderlich die Angaben aus den Formularfeldern in eine Zeichenkette zu konvertieren die den Regeln für den Parameter Filter entsprechen Folgende wichtige Regeln gelten für Werte die bei Filter erlaubt sind diese Regeln gelten sowohl bei Wertzuweisungen innerhalb des object Tags als auch bei dynamischen Wertzuweisungen innerhalb von Scripts Mit Feldname Wert werden nur Datensätze gefunden bei denen das Feld Feldname exakt den Wert Wert enthält und nicht mehr und nicht weniger Bei Name Meyer werden also nur Meyer s gefunden keine Meyerbohm s Mit Feldname Wert werden Datensätze gefunden bei denen der Wert Wert im Feld Feldname vorkommt er kann auch exakt damit übereinstimmen Bei Name Meyer werden also Meyer s und Meyerbohm s gefunden Mit Feldname Wert werden Datensätze gefunden bei denen der Wert von Feldname größer ist als Wert Bei Name Y werden also nur Namen gefunden die mit Z anfangen Mit Feldname Wert werden Datensätze gefunden bei denen der Wert von Feldname größer oder gleich ist im Vergleich zu Wert Bei Name Y werden also nur Namen gefunden die mit Y oder Z anfangen Mit Feldname Wert werden Datensätze gefunden bei denen der Wert von Feldname kleiner ist als Wert Bei Name D werden also nur Namen gefunden die mit A B oder C anfangen Mit Feldname Wert werden Datensätze gefunden bei denen der Wert von Feldname kleiner oder gleich ist im Vergleich zu Wert Bei Name D werden also Namen gefunden die mit A B C oder D anfangen An jeder Stelle ist ein Platzhalterzeichen erlaubt Dies ist ein Sternzeichen Es steht für kein eines oder beliebig viele Zeichen Sie können auch zwei oder mehrere solcher einfachen Ausdrücke mit den Zeichen für UND oder für inklusives ODER logisch verknüpfen Wenn Sie mehrere Ausdrücke verknüpfen und dabei sowohl UND also auch ODER verwenden müssen Sie Klammern verwenden um eine eindeutige Bewertung des gesamten Kriteriums sicherzustellen Ein komplexer Ausdruck dieser Art ist etwa Name M PLZ 8 Im obigen Script wird mit diversen if Abfragen aus den Eingabefeldern des Formulars ein gültiger Zuweisungswert für Filter konstruiert Dabei wird nur die einfachste Bedingung mit dem Istgleichzeiten eingesetzt Da der Anwender auch selbst das Sternzeichen als Platzhalterzeichen in einem Eingabefeld eingeben kann genügt diese einfache Suche für viele Fälle Wenn Sie dem Anwender komplexere Suchabfragen ermöglichen wollen müssen Sie diesen Teil des Scripts entsprechend aufwendiger gestalten Im unteren Teil der Funktion Suchen steht dann der Befehl document all Begriffe object Filter Suchausdruck Damit wird dem Parameter Filter des object Tags der Suchausdruck zugewiesen der zuvor ermittelt und in der Variablen Suchausdruck gespeichert wurde Der nächste Befehl ist ebenfalls von entscheidender Bedeutung document all Begriffe Reset Damit veranlassen Sie den Browser die Anzahl der anzuzeigenden Datensätze neu zu ermitteln Da mittlerweile ein Filter bestimmt wurde findet der Browser nun nur noch Datensätze die den Bedingungen des Filters entsprechen Auf die übrigen Anweisungen des Scripts und die Elemente in der HTML Datei wird hier nicht näher eingegangen Es handelt sich dabei um einfaches dynamisches HTML nach den Regeln des Internet Explorers 4 x HTML Elemente für die Anzeige von externen Daten Im Beispiel Datei dynamisch in Tabelle einbinden werden die externen Daten jeweils in einem span Element angezeigt Es gibt eine Reihe weiterer HTML Elemente in denen Sie Daten aus Datenfeldern externer Datenquellen anzeigen können In anderen als diesen Elementen ist die Anzeige externer Daten nicht möglich Folgende HTML Elemente sind erlaubt Verweise mit a a Angenommen Sie haben eine externe Textdatei verweis txt mit folgenden Zeilen URL Verweistext http de yahoo com Yahoo Suchdienst Diese Datei können Sie mit dem object Element in HTML wie folgt einbinden object id Verweis classid clsid 333C7BC4 460F 11D0 BC04 0080C7055A83 param name DataURL value verweis txt param name UseHeader value true param name FieldDelim value object Danach können Sie folgenden Verweis konstruieren a datasrc Verweis datafld URL span datafld Verweistext datasrc Verweis span a Indem Sie a datafld notieren wird der Inhalt den das Datenfeld liefert als Wert für das Attribut href bewertet im Beispiel liefert das Feld URL diese Angaben Innerhalb des Verweises wird dann mit Hilfe des span Elements das andere Feld geholt nämlich der Verweistext Solche Verweise machen beispielsweise Sinn wenn Sie den gleichen Verweis an vielen verschiedenen Stellen auf Ihren Web Seiten nutzen Verweisziel und Verweistext sind dann zentral gespeichert und brauchen bei Änderungen nur in der kleinen Textdatei einmal geändert werden Alle entsprechenden HTML Verweise sind damit automatisch aktualisiert Buttons mit button button Angenommen Sie haben eine externe Textdatei daten txt mit folgendem Aufbau und Beispieleinträgen Zeile Text 1 Das ist ein Test 2 mit einem Button 3 spannend was Diese Datei können Sie mit dem object Element in HTML wie folgt einbinden object id Daten classid clsid 333C7BC4 460F 11D0 BC04 0080C7055A83 param name DataURL value daten txt param name UseHeader value true param name FieldDelim value object Danach können Sie beispielsweise folgende Tabelle konstruieren table id Anzeige datasrc Daten datapagesize 1 tr td form action button datafld Text onclick document all Anzeige nextPage button form td tr table Damit springt der Anwender bei jedem Klick auf den Button einen Datensatz weiter und die Button Beschriftung nimmt den aktuellen Wert des Datenfeldes Text an Bereiche mit div div Mit diesem HTML Tag können Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben genau so wie es im Beispiel Datei dynamisch in Tabelle einbinden mit dem span Element gemacht wird Der Unterschied zwischen div div und span span ist dass das div Element einen eigenen Anzeigeblock erzeugt das span Element dagegen nicht Grafiken mit img Angenommen Sie wollen eine kleine Dia Show programmieren Dazu können Sie eine Textdatei daten txt anlegen die etwa folgenden Aufbau hat Nummer Bild 1 meinhaus gif 2 meinboot gif 3 meinauto gif 4 undich gif Diese Datei können Sie mit dem object Element in HTML wie folgt einbinden object id Daten classid clsid 333C7BC4 460F 11D0 BC04 0080C7055A83 param name DataURL value daten txt param name UseHeader value true param name FieldDelim value object Danach können Sie beispielsweise folgende Tabelle konstruieren table id Anzeige datasrc Daten datapagesize 1 tr td Bild span datafld Nummer span br input type button value lt onclick document all Anzeige previousPage input type button value gt onclick document all Anzeige nextPage td td img datafld Bild td tr table Damit kann der Anwender mit den Blätterbuttons die Bilder durchblättern Frames mit frame Angenommen Sie haben eine externe Textdatei besteseite txt mit folgenden Zeilen BesteSeite http de selfhtml org Nun können Sie folgende HTML Datei mit einem Frameset konstruieren html head object id UrlDerWoche classid clsid 333C7BC4 460F 11D0 BC04 0080C7055A83 param name DataURL value besteseite txt param name UseHeader value true object head frameset rows 100 frame src meine htm frame datasrc UrlDerWoche datafld BesteSeite frameset html Auf diese Weise können Sie in einem Frame Fenster eine Seite anzeigen deren Zieladresse Sie in der separaten Textdatei pflegen Wichtig ist dass Sie das object Element genau an der Stelle platzieren wie im Beispiel Eingebettete Frames mit iframe Siehe das Beispiel bei Frames Der Unterschied ist dass Sie das object Element in einer normalen HTML Datei platzieren Mit einem Befehl wie iframe datasrc UrlDerWoche datafld BesteSeite iframe können Sie dann in der gleichen HTML Datei in einer eingebetteten Fensterbox den Inhalt der Seite anzeigen die in der Textdatei angegeben ist Labels mit label label Das label Element das neu ist in HTML 4 0 erlaubt die Beschriftung eines Formularfeldes Im Rahmen der Datenanbindung können Sie dieses HTML Tag benutzen wenn Sie die externen Daten in Formularfeldern ausgeben Sie können dann dem label Element das Sie etwa einem Eingabefeld zuordnen dynamisch den Feldnamen zuweisen der in der externen Datendatei für dieses Feld definiert ist Wenn sich der Feldname in der Datendatei dann ändert wird er bei der Anzeige in der HTML Datei automatisch aktualisiert Beispiel label for Vorname datafld prename label Dadurch wird dem Inhalt des label Elements eines Formularfeldes der Feldname prename zugewiesen der in der Datenbank definiert ist Lauftexte mit marquee marquee Mit diesem HTML Element das mittlerweile allerdings als Musterbeispiel proprietärer HTML Erweiterungen verschrieen ist können Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben genau so wie es im Beispiel Datei dynamisch in Tabelle einbinden mit dem span Element gemacht wird Der Unterschied zwischen marquee marquee und span span ist dass das marquee Element einen Lauftext erzeugt das span Element dagegen nicht Bereiche mit span span Mit diesem HTML Tag können Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben genau so wie es im Beispiel Datei dynamisch in Tabelle einbinden Formularfelder mit input Mit diesem HTML Element können Sie beispielsweise innerhalb einer Tabelle externe Daten in editierbaren Formularfeldern ausgeben Das ist besonders dann interessant wenn geänderte Daten auch tatsächlich in die Datenquelle zurückgeschrieben werden können Bei einfachen Textdateien ist das derzeit nicht möglich wohl aber beim Datenmodell Remote Data Service RDS und beim Datenmodell JDBC DataSource Applet Die Einbindung in HTML erfolgt ähnlich wie im Beispiel Datei dynamisch in Tabelle einbinden mit dem Unterschied dass Sie die Regeln zum Einbinden des gewünschten Datenmodells beachten müssen Notieren Sie im einleitenden table Tag der Tabelle in der Sie die Datensätze anzeigen möglichst die Angabe datapagesize 1 Innerhalb der Tabellenzelle in der Sie externe Daten auf diese Weise anzeigen wollen können Sie dann notieren angenommene Beispiele input type text datafld Vorname oder input type radio name Kunde value Bereits Kunde datafld BereitsKunde oder input type checkbox name Zahlweise value Mastercard datafld Zahlungsweise Datenfelder die in Eingabefeldern vom Typ input type text angezeigt werden können normale Texte sein wie etwa ein Name Radio Buttons und Checkboxen stellen dagegen andere Anforderungen Ein Radio Button wird bei der Anzeige dann aktiviert wenn der aktuelle Feldinhalt in der Datenbank mit dem Wert des Attributs value übereinstimmt Eine Checkbox wird dann markiert wenn der betreffende Feldinhalt in der Datenbank 1 true oder einen beliebigen Inhalt mit mehr als einem Zeichen enthält Wenn der Inhalt 0 false oder leer ist wird die Checkbox nicht markiert Formularfelder mit select Dabei gelten die gleichen Bedingungen wie bei Formularfeldern vom Typ input Wenn der Wert eines aktuellen Eintrags in der Datenbank mit einem der Werte übereinstimmt die in der value Angabe bei einem option Element innerhalb der Auswahlliste definiert sind ist diese Auswahl selektiert Interessant ist diese Ausgabemöglichkeit von externen Daten wie bei anderen Formularfeldern nur wenn auch ein Zurückschreiben geänderter Daten möglich ist Bei Auswahllisten etwa kann ein neuer ausgewählter Wert als neuer Feldinhalt gespeichert werden Der Internet Explorer unterstützt dabei nur die einfache Auswahl Mehrfachauswahl nicht Andere Objekte mit object object Mit dem object Element können Sie genau so arbeiten wie mit dem img Element Der Unterschied ist dass Sie beim img Element auf Grafiken beschränkt sind während Sie mit dem object Element beliebige Multimedia Dateien oder ActiveX Controls einbinden können So können Sie analog zu dem Beispiel beim img Element anstelle einer Dia Show eine Musik Show programmieren die zum Beispiel aus MIDI Dateien besteht In der externen Textdatei notieren Sie die gewünschten MIDI Dateien und bei der Einbindung in HTML können Sie dann anstelle der Datenanbindung mit img so etwas notieren wie object datafld Musik width 0 height 0 object wobei Musik in der Textdatei mit den Daten als Feldüberschrift notiert sein muss Java Applets mit applet applet Sie können das Feature der Datenanbindung nutzen um einen Parameter eines Java Applets aus einer externen Datenquelle zu versorgen Beispiel applet code verzerr class param name bild datasrc aktuell datafld b gates bild applet Datenmodell Tabular Data Control TDC Dies ist das Datenmodell wenn die externe Datenquelle eine einfache Textdatei ist die in jeder Zeile einen Datensatz enthält und bei der die einzelnen Datenfelder der Datensätze durch ein Begrenzerzeichen zum Beispiel ein Komma markiert sind Geeignet ist dieses Datenmodell für kleinere Datenbestände mit bis zu ein paar tausend Datensätzen Ein vollständiges Beispiel dafür finden Sie weiter oben im Abschnitt Beispiel Datei dynamisch in Tabelle einbinden Um eine solche Datenquelle an eine HTML Datei anzubinden müssen Sie folgendes Objekt in der HTML Datei notieren Schema zur Einbindung in HTML object id Objektname classid clsid 333C7BC4 460F 11D0 BC04 0080C7055A83 param name value usw weitere Parameter object Erläuterung Um solche Daten einzubinden verwenden Sie das im Internet Explorer 4 x eingebaute ActiveX Control mit der ID 333C7BC4 460F 11D0 BC04 0080C7055A83 Innerhalb des object Tags notieren Sie verschiedene Parameter die für die Datenpräsentation wichtig sind Folgende Parameter sind erlaubt Notation Bedeutung param name AppendData value Mit diesem Parameter können Sie angeben ob in der Ausgabetabelle beim Blättern für jedes neue Datensatz Set entsprechend der Größe von datapagesize die vorhandenen Tabellenzellen überschrieben werden sollen oder ob neue Tabellenzellen angehängt werden sollen Mit value true erzwingen Sie das Anhängen von Daten Per Voreinstellung werden die vorhandenen Tabellenzellen überschrieben param name CaseSensitive value Mit diesem Parameter können Sie angeben ob bei Vergleichen von Anwendereingaben mit Daten aus der Datenquelle Groß Kleinschreibung unterschieden werden soll Nur interessant bei der Weiterverarbeitung von Daten mit Scripts Per Voreinstellung wird Groß Kleinschreibung unterschieden Mit value false können Sie die Fallunterscheidung ausschalten param name CharSet value Mit diesem Parameter können Sie die Kodierung angeben die für die Daten in der Datendatei maßgeblich ist Per Voreinstellung ist das die Kodierung ISO 8859 1 Verwenden Sie diesen Parameter nur wenn die Daten anders kodiert sind z B ISO 8859 5 für Kyrillisch verewnden Im value Attribut können Sie den Namen der Kodierung angeben Nähere Informationen im Abschnitt über Zeichenkodierungen param name DataURL value Dieser Parameter ist unbedingt erforderlich Im value Attribut geben Sie die Datei an in der sich die Daten befinden param name EscapeChar value Diesen Parameter sollten Sie angeben wenn in Ihrer Datendatei ein Zeichen als Maskierungszeichen verwendet wird

    Original URL path: http://html.ekiwi.de/dhtml/modelle/datenanbindung.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: Webserver/CGI / Webserver / Server Side Includes in HTML
    y Jahr 2stellig z B 97 Y Jahr 4stellig z B 1997 Z Zeitzone z B MEZ config errmsg SSI nicht anzeigbar config sizefmt bytes config timefmt d m Y H M echo var Variablenname Bei Variablenname sind CGI Umgebungsvariablen erlaubt oder die folgenden speziellen Variablennamen DOCUMENT NAME Name der HTML Datei DOCUMENT URI Pfad der HTML Datei LAST MODIFIED Zeitstempel der HTML Datei QUERY STRING UNESCAPED Unkodierter GET Übergabestring DATE LOCAL Datum Uhrzeit nach Server DATE GMT Datum Uhrzeit nach Greenwich Zeit Außerdem können Sie selbst definierte Variablen einsetzen echo var SERVER NAME echo var DATE LOCAL exec cmd Pfad Programmdatei cgi CGI Pfad CGI Programm Script Benutzen Sie cmd um ein beliebiges Programm auf dem Server Rechner zu starten Benutzen Sie cgi um ein CGI Programm CGI Script auf dem Server Rechner auszuführen Es sollte sich um Programme handeln die Daten auf die Standardausgabe schreiben Diese Datenausgaben werden dann direkt in die HTML Datei geschrieben exec cmd prog search exe htm exec cgi cgi bin counter pl fsize file Pfad Datei virtual Pfad Datei Gibt die Größe der angegebenen Datei aus Verwenden Sie file für Pfadangaben auf dem Server Rechner relativ zur Datei mit SSI Anweisungen und virtual für relative Pfadangaben bezogen auf das Wurzelverzeichnis für Dokumente des Webservers fsize virtual download selfhtml zip flastmod file Pfad Datei virtual Pfad Datei Gibt den Zeitstempel der angegebenen Datei aus Verwenden Sie file für Pfadangaben auf dem Server Rechner relativ zur Datei mit SSI Anweisungen und virtual für relative Pfadangaben bezogen auf das Wurzelverzeichnis für Dokumente des Webservers flastmod file index htm include file Pfad Datei virtual Pfad Datei Gibt den Inhalt der angegebenen Datei aus Verwenden Sie file für absolute Pfadangaben auf dem Server Rechner und virtual für relative Pfadangaben bezogen auf das Wurzelverzeichnis für Dokumente des Webservers In Falle von file können Sie nur Dateien angeben die im selben Verzeichnis oder in Unterverzeichnissen liegen Bei virtual gibt es diese Begrenzung nicht da die Angabe auf eine beliebige zugängliche Adresse auf dem Server hinweisen kann include virtual news news htm Beachten Sie Findet der Webserver eine SSI Anweisung die er ausführen kann so wird anstelle dieser Anweisung der angeforderte Code in das HTML Dokument eingebunden Wenn Sie nun mit include file datei htm ein vollständiges HTML Dokument einbinden kann es Ihnen passieren dass die resultierende Webseite plötzlich z B über mehrere Kopf Bereiche verfügt und nicht mehr valides HTML ist Verschiedene Browser können dadurch Anzeigeprobleme bekommen Sie können das vermeiden indem Sie in Ihrem shtml Dokument lediglich den Code notieren der letztlich im head oder im body Element eingefügt werden soll Solche Dateien mit HTML Schnipseln bekommen üblicherweise die Dateinamenserweiterung inc für include also beispielsweise dateiname inc Solche inc Dateien sollten reine Textdateien sein und dürfen beliebigen HTML Code enthalten je nachdem an welcher Stelle einer HTML Datei Sie den Codeschnipsel einbinden möchten Wenn Sie beispielsweise die Include Anweisung include virtual includes navigation inc im body Element also zwischen body und body notieren kann navigation inc denjenigen HTML Code

    Original URL path: http://html.ekiwi.de/servercgi/server/ssi.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: HTML/XHTML / Tabellen / Tabellen als Mittel für Web-Seiten-Layouts
    Attribute die als deprecated gekennzeichnet sind weshalb als HTML Variante Transitional gewählt werden muss Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN http www w3 org TR html4 loose dtd html head title Beispiel eines typischen Tabellen Layouts title head body bgcolor FFFFFF link FFFF00 vlink FFCC00 alink FFFFFF text 000000 table border 0 cellpadding 0 cellspacing 0 width 100 bgcolor A050A0 colgroup col width 200 col colgroup tr td colspan 2 table border 0 cellpadding 10 cellspacing 0 tr td h1 style color FFFFFF Willkommen h1 td tr table td tr tr td valign top width 200 table border 0 cellpadding 10 cellspacing 0 tr td h3 style color FFFFFF Navigation h3 p a href table tr th td htm Tabelle a br a href bgcolor htm Hintergrund a br a href colspan htm Zellen verbinden a br a href width height htm Breite und Höhe a p h3 style color FFFFFF News h3 p style color FFFFFF Die Neuigkeiten stehen stets an dieser Stelle Viel Neues gibt es nicht Nur so viel diese Seite ist neu p td tr table td td valign top bgcolor FFFFFF table border 0 cellpadding 10 cellspacing 0 tr td h2 Worum geht es hier eigentlich h2 p Ach um Web Design halt das Übliche p p viel Inhalt p p viel Inhalt p p viel Inhalt p p viel Inhalt p p viel Inhalt p p viel Inhalt p p viel Inhalt p p viel Inhalt p p viel Inhalt p p viel Inhalt p td tr table td tr table body html Erläuterung Das Beispiel bestimmt im einleitenden body Tag zunächst dateiweite Farben für Hintergrund Text und Verweise Innerhalb des Dateikörpers wird die übergeordnete Tabelle definiert Sie erhält die Attribute border 0 damit kein Rahmen und keine Gitternetzlinien angezeigt werden sowie cellpadding 0 und cellspacing 0 damit sich die einzelnen Zellen der Tabelle nahtlos aneinanderfügen Das ist wichtig damit zwischen den Farbflächen keine sichtbaren Lücken entstehen Weil es sich um eine die ganze Seite überspannende Tabelle handelt werden für Browser die das verstehen die gewünschten Spalten mit col Tags vordefiniert Die Tabelle soll zwei Spalten haben wobei die erste eine Breite von 200 Pixeln haben soll Das soll die Spalte für Navigationsverweise werden Die zweite Spalte soll den Rest des verfügbaren Platzes in Anspruch nehmen Die gesamte Tabelle soll sich über die volle verfügbare Breite erstrecken angegeben durch width 100 im einleitenden table Tag der übergeordneten Tabelle Die gesamte übergeordnete Tabelle bekommt ferner mit Hilfe von bgcolor A050A0 einen matt violetten Hintergrund zugewiesen Damit erhalten erst mal alle ihre Inhalte diese Hintergrundfarbe Um andersfarbige Flächen innerhalb der Tabelle zu erzeugen sind bei den einzelnen Zellen weitere Angaben zur Hintergrundfarbe erforderlich die dann diese globale Hintergrundfarbe überschreiben Die erste Zelle der ersten Zeile der übergeordneten Tabelle ist zugleich die einzige Zelle in dieser Zeile da durch das Attribut colspan 2 erreicht wird dass sich die Zelle über zwei Spalten erstreckt Der Inhalt dieser Zelle

    Original URL path: http://html.ekiwi.de/html/tabellen/layouts.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: HTML/XHTML / Tabellen / Gestaltung einer Tabelle
    Notationen wie td style height 100px Solche Angaben werden allerdings nur von neueren Browsern interpretiert Einige Browser interpretieren darüber hinaus weitere Angaben wie tr height Solche Angaben sind allesamt nicht HTML Standard konform und sollten nicht mehr verwendet werden Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN http www w3 org TR html4 loose dtd html head title Breiten und H ouml henangaben bei Tabellen title head body h1 Breit und hoch mit HTML h1 table border 1 width 60 tr td width 50 height 100 Berlin td td Hamburg td td M uuml nchen td tr tr td Milj ouml h td td Kiez td td Bierdampf td tr tr td Buletten td td Frikadellen td td Fleischpflanzerl td tr table h1 Breit und hoch mit CSS h1 table border 1 style width 60 tr td style width 50 height 100px Berlin td td Hamburg td td M uuml nchen td tr tr td Milj ouml h td td Kiez td td Bierdampf td tr tr td Buletten td td Frikadellen td td Fleischpflanzerl td tr table body html Erläuterung Im Beispiel wird zweimal die gleiche Tabelle notiert im ersten Fall kommen die HTML Attribute width und height an erlaubten Stellen zum Einsatz nach der HTML Variante Transitional Die zweite Tabelle benutzt entsprechende CSS Eigenschaften zur Angabe von Breite und Höhe und genügt damit auch den Anforderungen an die HTML Variante Strict Interpretiert wird die zweite Tabelle allerdings erst vom Internet Explorer ab Version 4 x und von Netscape ab Version 6 Beachten Sie Die Angaben zu Breite und Höhe sind nur wirksam wenn der Tabellen bzw Zelleninhalt kleiner ist sodass leerer Raum entsteht Wenn der Tabelleninhalt größer ist werden die Angaben zu Breite und Höhe außer Kraft gesetzt Die Tabelle bzw Zelle und mit ihr Spalte und Zeile werden dann so dimensioniert dass der gesamte Inhalt angezeigt wird Einige Browser z B Netscape bis einschließlich Version 4 x setzen Angaben zu Breite und Höhe allerdings leider je nach Tabelleninhalt stärker außer Kraft als es nötig wäre Da die Angabe zu width in einer Tabellenzelle spaltenweit gilt brauchen Sie sie nur einmal pro Spalte zu notieren Am sinnvollsten ist es die Angabe in der ersten Zeile der Tabelle zu notieren Ebenso ist es mit der Angabe zu height in einer Tabellenzelle Da diese Angabe für die ganze zugehörige Tabellenzeile gilt ist es am sinnvollsten sie in der ersten Zelle der Zeile zu notieren Im obigen Beispiel wird durch td width 50 height 100 in der ersten Zelle also sowohl die Breite der ersten Spalte als auch die Höhe der ersten Zeile definiert Verwenden Sie Pixelangaben und Prozentangaben immer so dass keine Konflikte entstehen Im obigen Beispiel werden etwa alle Breiten prozentual bestimmt und nur die Höhe wird mit Pixeln festgelegt So kann der Browser im Beispiel für die gesamte Tabelle eine Breite von 60 Prozent zum Elternelement ermitteln und für die erste Spalte wiederum 50 davon Die Angabe von 100 Pixeln Zeilenhöhe kommt damit nicht in Konflikt Eine übersichtlichere Lösung die Breite von Tabellenspalten zu definieren steht mit der Möglichkeit zur Verfügung Spalten vorzudefinieren Die hier beschriebene Möglichkeit hat dagegen den Vorteil auch von älteren Browsern interpretiert zu werden Zeilenumbruch in Zellen verhindern Sie können festlegen dass beim Inhalt einer Zelle kein automatischer Zeilenumbruch erfolgen darf Die Spalte der Tabelle wird bei der Anzeige entsprechend breit dimensioniert Das entsprechende Attribut ist jedoch als deprecated eingestuft und soll künftig aus dem HTML Standard entfallen Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN http www w3 org TR html4 loose dtd html head title Zeilenumbruch in Tabellenzellen verhindern title head body h1 Lange N auml chte h1 table border 1 tr td nowrap Die langen HTML N auml chte von Berlin sind die l auml ngsten N auml chte uuml berhaupt Die langen CSS N auml chte von Berlin sind ebenfalls die l auml ngsten N auml chte und sogar noch l auml nger als die HTML N auml chte td tr table body html Erläuterung Mit dem Attribut nowrap ohne weitere Wertzuweisung in einem einleitenden th oder td Tag verhindern Sie dass der Text innerhalb der Zelle automatisch umbrochen wird Die Zelle und damit ihre gesamte zugehörige Spalte wird so breit wie erforderlich Die entsprechende Eigenschaft in CSS lautet white space Diese wird jedoch erst ab Internet Explorer 5 5 und Netscape 6 interpretiert Beachten Sie Wenn Sie XHTML Standard konform arbeiten müssen Sie das nowrap Attribut in der Form nowrap nowrap notieren Weitere Informationen dazu im Kapitel XHTML und HTML Ausrichtung von Zellen Zelleninhalte von Tabellen können aufgrund unterschiedlicher Inhalte oder durch Angaben zu Breite und Höhe mehr Raum in Anspruch nehmen als es ihr Inhalt erfordert Für diesen Fall können Sie Zelleninhalte sowohl horizontal linksbündig zentriert rechtsbündig als auch vertikal obenbündig mittig untenbündig am Zellenrand ausrichten Die entsprechenden Angaben sind sowohl auf einzelne Zellen also th und td Elemente anwendbar als auch auf Tabellenbereiche wie Tabellenzeilen tr Tabellenkopf thead Tabellenkörper tbody und Tabellenfuß tfoot In diesem Fall gelten die Angaben für alle Zellen des jeweiligen Bereichs Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 Transitional EN http www w3 org TR html4 loose dtd html head title Ausrichtung von Zelleninhalten title head body h1 Richtungsweisend h1 table border 1 tr th align left valign top width 200 height 75 links oben th th align center valign top width 200 zentriert oben th th align right valign top width 200 rechts oben th tr tr td align left valign middle height 75 links mittig td td align center valign middle zentriert mittig td td align right valign middle rechts mittig td tr tr td align left valign bottom height 75 links unten td td align center valign bottom zentriert unten td td align right valign bottom rechts unten td tr tr align center valign middle td height 75 alles td td zentriert td td mittig td tr

    Original URL path: http://html.ekiwi.de/html/tabellen/gestaltung.htm (2016-04-25)
    Open archived version from archive

  • SELFHTML: HTML/XHTML / Verweise (Links) / Verweise definieren und gestalten
    jedoch ein Verweis aus diesem Element wird ist das Attribut href erforderlich href hyper reference Hyper text Referenz Als Wert an das href Attribut weisen Sie das gewünschte Verweisziel zu Als Inhalt des a Elements also zwischen a und a notieren Sie den Text der dem Anwender als Verweis angeboten wird bei den meisten Web Browsern andersfarbig meist unterstrichen Im obigen Beispiel führen die ersten vier Verweise zu anderen Web Angeboten Die letzten beiden Verweise führen zu lokalen Zielen Um die Syntax möglicher Verweisziele zu verstehen müssen Sie sich mit dem Referenzieren in HTML vertraut machen Beachten Sie Als Inhalt des a Elements also bei Verweisen der Verweistext ist nicht nur reiner Text erlaubt Sie können im Verweistext auch andere Inline Elemente notieren Unter anderem können Sie anstelle von Text auch eine Grafik referenzieren und auf diese Weise Grafiken als Verweise fungieren lassen was in der Praxis des Web Designs recht häufig vorkommt Verweise optisch gestalten mit CSS Wenn Sie nichts anderes angeben erhalten Verweise bei der Darstellung die im Browser voreingestellten Farben z B blau für Verweise zu noch nicht besuchten Seiten und violett für Verweise zu bereits besuchten Seiten Um dateiweit eigene Verweisfarben zu bestimmen können Sie die Attribute verwenden die im Abschnitt Farben für Text und Verweise beschrieben werden Darüber hinaus gibt es aber die Möglichkeit Verweise mit Hilfe von CSS individueller zu gestalten Unter anderem ist es auch möglich die meist voreingestellte Unterstreichung des Verweistextes zu unterdrücken Beispiel Anzeigebeispiel So sieht s aus DOCTYPE HTML PUBLIC W3C DTD HTML 4 01 EN http www w3 org TR html4 strict dtd html head title Verweise gestalten mit CSS title style type text css a link text decoration none font weight bold color e00000 a visited text decoration none font weight bold color 800000 a hover text decoration none font weight bold background color ff0 a active text decoration none font weight bold background color cff a focus text decoration none font weight bold background color 080 style head body h1 Eine kleine Verweissammlung h1 p a href http www tagesschau de ARD Tagesschau a Nachrichten br a href http www heise de newsticker Heise Newsticker a Computer Nachrichten br a href http de news yahoo com Yahoo Nachrichtenticker a Nachrichten br a href http www oneworld net section current OneWorld News a Nachrichten en p p a href style color green Wohin der wohl f uuml hren mag a br a href style color green Und der hier a p body html Erläuterung Das Beispiel arbeitet konsequent mit Stylesheets Dazu ist im Dateikopf der HTML Datei ein eigener zentraler Bereich zum Definieren von CSS Formaten notiert style style Näheres dazu im CSS Kapitel im Abschnitt Zentrale Formate definieren Der vielfache Wunsch von Web Designern die Unterstreichung des Verweistextes zu unterdrücken wird durch die CSS Angabe text decoration none erzielt text decoration underline würde übrigens die Voreinstellung also unterstrichenen Verweistext bewirken Weitere im Beispiel verwendete Formatdefinitionen sind font weight bold fette Schrift sowie Angaben zur Farbe color und

    Original URL path: http://html.ekiwi.de/html/verweise/definieren.htm (2016-04-25)
    Open archived version from archive



  •