DHTML - Dynamic HTML


Kurs 1  DHTML  (Erweiterung zur Webseitenprogrammierung)
EINLEITUNG, ERSTE SCHRITTE


DHTML und was man damit realisieren kann. Um 1998 waren die ersten Internet-Programme fähig Bewegungen und laufende 
Veränderungen mit Text und Grafiken zu reproduzieren. DHTML heisst Dynamik HTML gebaut auf der Seitenbeschreibungs-
sprache HTML, mit der Erweiterung CSS Cascading Style Sheets zur genaueren Beschreibung der Eigenschaften (Attribute) 
von Texten und sonstigen DIV-Objekten.

Mit der SCRIPT-Programmierung JAVASCRIPT können die Befehle definiert werden, um einen Text oder sonstige Elemente
von A nach B zu bewegen hin bis zu komplexen anspruchsvollen Ereignissen/ Abfolgen auf dem Bildschirm.
 
Der Einsatz von DHTML wurde aber vorerst etwas getrübt, da die zwei grossen Marktleader Microsoft und Netscape sich bei 
der Programmierung immer wieder sich leicht unterschieden. Wirklich gute Anwendungsbeispiele waren und sind aber immer 
noch eher selten im Web anzutreffen. Einerseits haltet nach wie vor, der sehr grosse Arbeitsaufwand für eine solche Webseite, 
viele Webprogrammer davon ab, anderseits ist seit einigen Jahren mit FLASH ein Standart entstanden für komplexe Internet-
seitengestaltung. Für viele Webseiten ist ausserdem eine zu multimediale Aufmachung gar nicht erwünscht, in der Regel ist 
es eine Showeinlage die man dann mit SKIP INTRO umgeht.

2002 einigte man sich für einheitliche Programmierungsrichtlinien DOM, eine unabhängige Kontrollinstanz W3C wacht nun 
vermehrt um Einhaltung von Neu- /und Weiterentwicklungen. Wenn man die älteren Browser (4er Reihe) ausser Acht lässt, 
ist somit eine einfachere Programmierung nun möglich. 


Erste Schritte in DHTML

1. Grund-Voraussetzung HTML

HTML stellt das DIV oder SPAN Grundgerüst (auch TAG engl.) zur Verfügung. Der gewünschte Text, Grafik, Input Button oder 
Leerinhalt wird mit <div> und </div> umschlossen und übernimmt die definierten Werte eines solchen, auch "DIV-Container" 
genannten Konstrukt.



2. Freie Positionierung, erste Befehle mit CSS


1. Befehl   position: absolute;                 Damit wird ein DIV-Container freigegeben zur freien Positionierung

                               relativ;                    Berechnet sich an das vorangehende Objekt, oder Container

                               static;                      Bleibt an Ort und Stelle (! funktioniert noch nicht)
   
 
2. Befehl  top: 100px;  left: 100px            Positionswert berechnet von oben (Webseite)/ vom linken Rand    

3. Befehl  font-size: 12pt;                         Grössenwert für den Zeichensatz (Fonts)    

4. Befehl  color: #ffff00;                            Farbe zum Zeichensatz (#ff0000 = rot / #dedede = hellgrau)

2. Befehl   visibility: hidden, visible         Objekt verstecken, sichtbar machen     

3. Befehl  z-index: 4; Wert (-5 bis 5)          Anordnung/ Reihenfolge übereinanderliegender Elementen (Schichten) 




3. Beispiel


<div style="position: absolute; top: 1332px; left: 44px; font-size: 44pt; color: #dedede; z-index: 1;">Text im Hintergrund</div>

<div style="position: absolute; top: 1355px; left: 94px; font-size: 22pt; color: #ff0000; z-index: 5;">Text im Vordergrund</div>

eingebettet im übrigen Quelltext (Webseitecode) gibt:

Text im Hintergrund


Text im Vordergrund