Dynamisches HTML - Praktische Anwendungsbeispiele

Dynamisches HTML- Praktische Anwendungsbeispiele -

Hausarbeit zum Proseminar”Hyper- und Multimedia“

Sommersemester 2003

Seminarleitung: Dr. Christoph DraxlerVerfasserin: Michaela Geierhos

Centrum fur Informations- und SprachverarbeitungLMU Munchen

5. Mai 2003

Inhaltsverzeichnis

Vorwort ii

1 Einleitung 11.1 Was ist dynamisches HMTL? . . . . . . . . . . . . . . . . . . 11.2 Welche Vorteile bietet dynamisches HTML? . . . . . . . . . . 2

2 Das DHTML-Grundgerust 3

3 Cascading Stylesheets im Einsatz 43.1 Was sind Cascading Stylesheets? . . . . . . . . . . . . . . . . . 43.2 Der Aufbau des CSS-Codes . . . . . . . . . . . . . . . . . . . 43.3 Einbindung von CSS in HTML . . . . . . . . . . . . . . . . . 5

3.3.1 Interne CSS-Definition . . . . . . . . . . . . . . . . . . 53.3.2 Externe CSS-Definition . . . . . . . . . . . . . . . . . . 53.3.3 Inline CSS-Definition . . . . . . . . . . . . . . . . . . . 6

3.4 Was leisten Cascading Stylesheets? . . . . . . . . . . . . . . . 73.4.1 Textformatierung mit CSS . . . . . . . . . . . . . . . . 73.4.2 Ausrichtung von Text mit CSS . . . . . . . . . . . . . 93.4.3 Zeichenformatierung mit CSS . . . . . . . . . . . . . . 93.4.4 Konfiguration von Hyperlinks mit CSS . . . . . . . . . 123.4.5 Aufzahlungspunkte fur Listen . . . . . . . . . . . . . . 133.4.6 Tabellen in CSS konfigurieren . . . . . . . . . . . . . . 153.4.7 Einsatz von Rahmen mit CSS . . . . . . . . . . . . . . 173.4.8 Absatze verschieden formatieren mit CSS . . . . . . . . 183.4.9 Buchstaben- und Zeilenabstand verandern mit CSS . . 19

3.5 Positionierung mit CSS . . . . . . . . . . . . . . . . . . . . . . 20

4 Das Document Object Model (DOM) 214.1 Was ist das DOM? . . . . . . . . . . . . . . . . . . . . . . . . 214.2 Wie funktioniert das DOM zusammen mit JavaSript? . . . . . 21

i

Vorwort

”Ich wunschte, Du konntest inMoskau jetzt lesen, was ich in

Paris gerade schreibe.Die Entfernung zwischen denPolen ist so groß, die zwischenden Herzen so klein, es muß

doch einen Mittelweg geben.“

Der Dichter Wladimir Majakovski, 1916, in einem Brief an seineFreundin Lilia Brik 1 [Pus00]

1[Pus00: VI]

ii

VORWORT iii

Genau diesen heiss ersehnten Mittelweg eroffnete das Internet, das WorldWide Web, Ende des 20. Jahrhunderts. Auf einmal war es den Menschenmoglich, sich an den Computer - die Schreibmaschine des modernen Men-schen - zu setzen, und Briefe zu lesen, die ein Anderer erst Sekunden zuvorabgeschickt hatte. Auch konnte man sich nun schriftlich im Chat mit ande-ren Leuten zeitgleich unterhalten. Der Wunsch von Wladimir Majakovski,der rege und rasche Gedankenaustausch unter den Menschen - egal, wo die-jenigen sich gerade befanden, sei es in Moskau, Paris, Berlin, Peking, NewYork oder an anderen Orten, wurde einige Jahrzehnte spater doch noch indie Tat umgesetzt. Eigentlich schade, dass er es nicht mehr miterleben durfte.

Doch von welchen technischen Neuerungen, die dies schließlich ermoglich-ten, spreche ich eigentlich?

Einerseits von der Erfindung des Computers - die Hardware, die diesen Da-tentransfer uberhaupt erst ermoglichte. Andererseits aber auch von program-miertechnischer Seite des Ganzen - denn ohne die Entwicklung von HTML,der Hypertextmarkuplanguage, ware wohl eine browser- und betriebssystem-unabhangige, sowie einwandfreie Datenubertragung nicht zu gewahrleisten.Der fast zeitgleiche Gedankenaustausch wurde durch die Verbreitung von Ja-va bzw. JavaScript, das heute standardmaßig bei jedem Browser mitgeliefertwird, in die Tat umgesetzt. Was nun eigentlich HTML mit JavaScript zu tunhat, und wie dynamisches HTML, das sogenannte DHTML, nun eigentlichin dieses Puzzel hineinpasst, versuche ich im Laufe dieser Hausarbeit aufzu-klaren.

Um diese Hausarbeit nun auch etwas dynamischer zu machen, ist ihr eineCD-Rom beigelegt, auf der sich der gesamte, in dieser Arbeit verwendeteHTML-Source-Code befindet, so dass man auch eine Vorstellung davon be-kommt, wie ein beliebiger Browser den Code umsetzt, d. h. ihn graphischdarstellt. Außerdem kann man sich den im Vortrag vom 8. Mai 2003 vor-gestellten Mix aus verschiedenen DHTML-Seiten auch nochmal in Ruhe aufdieser CD-Rom ansehen.

Also viel Spaß beim Lesen und selber Ausprobieren,wunscht Ihnen,

Michaela Geierhos

Kapitel 1

Einleitung

1.1 Was ist dynamisches HMTL?

Dynamic HTML ist im Grunde keine eigenstandige Markup-Sprache, wieHTML oder XML, es vereinigt eigentlich nur, HTML - die Hypertext MarkupLanguage, CSS - die Cascanding Stylesheets, JavaScript und das Dokument-Objektmodell in einer Programmiersprache fur das Internet. Mit DHTMLwurde Mediendesignern die Moglichkeit aufgetan, Bewegung in ihre Web-Seiten zu bringen. Dafur bedanken konnten sie sich bei Netscape und Micro-soft, die erstmals bei der Version 4.0 ihrer jeweiligen Internetbrowser Wertdarauf legten, all die genannten Technologien zu kombinieren und fur denBenutzer salonfahig zu machen. Deshalb spricht man auch haufig als Marke-tingbegriff von DHTML, der von diesen beiden großen Softwareentwicklungs-konzernen gepragt wurde.1 [Tea99] Zwei Firmen - eine Idee - aber zwei ver-schiedene Umsetzungen - so konnte man die beiden Konzepte von Netscapeund Microsoft bezeichnen, die zwar die Web-Seiten dynamischer werden lie-ßen, doch die einheitliche Konvention, aus was DHTML nun genau bestunde,fehlte. So bestand beispielsweise Dynamisches HTML fur Netscape-Browseraus HTML, CSS bzw. JavaScript Style Sheets (JSS), Layern und JavaScript.Dagegen wollte Microsoft aber Akzente auf die Bildbearbeitung setzen undbaute visuelle Filter ein, um optische Effekte fur Grafiken zu gestatten, wiesie mit Adobe Photo Shop erzeugt werden konnen. HTML und JavaScriptsind auch hier im Internet Explorer moglich, und die Cascading Stylesheetswurden hierfur noch dynamischer, so dass man nicht nur die Position vonElementen auf dem Bildschirm andern kann, sondern auch das jeweilige gra-fische Erscheinungsbild. Die gemeinsamen Elemente lassen sich auf jeden Fallin allen Browsern der heutigen Generation darstellen, sei es nun im Opera

1frei nach [Tea99: 11]

1

KAPITEL 1. EINLEITUNG 2

7.0, Mozilla 7.0, Netscape 7.0 oder Internet Explorer 6.1. Genau auf diesengemeinsamen Nenner mochte ich mich in meinen Ausfuhrungen beschrankenund keine bestimmten Browserspezifikationen angeben, da man vom Anwen-der nicht erwarten kann, sich einen bestimmten Browser zu besorgen, umDHTML zu nutzen.

1.2 Welche Vorteile bietet dynamisches HTML?

Man muss nicht online sein, um die Vorzuge von DHTML genießen zu konnen,denn hat man die gewunschte Seite erst einmal geoffnet, kann man jeder-zeit offline gehen ohne Einbußen bei der grafischen Darstellung zu erleiden.Das heisst nun explizit, dass man den Inhalt einer DHTML-Seite auch oh-ne Netzwerkverbindung auf dem Client-Rechner verandern kann. Das be-ste Beispiel hierfur zeigt Macromedia

”auf seinen Demonstrationsseiten in

der DHTML-Zone“.2 [Pus00] Hier kann man einer Anziehpuppe per Drag &Drop die Kleider an- und ausziehen.

”Der User verschiebt das Kleidungsstuck

auf die Puppe, und schwups, wird es automatisch an die richtige Positiongeruckt.“3 [Pus00] Zu finden ist dieses Projekt von Macromedia im Internetunter http://www.dhtmlzone.com/tutorials/ . Ein anderer Punkt ist der zeit-gesteuerte Aufbau der Seite, der genau vorgibt, welches Element zuerst aufder Web-Page zu erscheinen hat und die

”pixelgenaue Platzierung von Ele-

menten“4 [Pus00] erst ermoglicht, wobei sich beispielsweise auch Elementeuberlagern konnen. Außerdem kann man Inhalte einer Seite zunachst un-sichtbar machen, die man zeitverzogert oder durch Mausbewegung anzeigenlassen kann. Das Format der jeweiligen Internetseite kann man ebenfalls sei-tenubergreifend definieren, d.h. man hat z. B. ein externes CSS-Dokumentund mochte es auf mehrere Seiten anwenden, die sich selbst wieder aufru-fen. Somit spart man sich bei der Festlegung von Stilen eine Menge Arbeit.Und der fortgeschrittene DHTML-Designer kann auch letztendlich ganz neueHTML-Tags definieren, um sich mehr Moglichkeiten in der Gestaltung einerSeite zu schaffen.

2[Pus00: 60]3[Pus00: 60]4[Pus00: 61]

Kapitel 2

Das DHTML-Grundgerust

<html>

<head><title>Michi’s DHTML-Seite</title></head>

<body></body>

</html>

Jede DHTML-Seite kommt nicht darum herum im Grunde eigentlich eineHTML-Seite zu sein. Denn egal ob man nun Cascading Stylesheets oderJavaScript-Funktionen miteinbettet, es bleibt der Rahmen des HTML-Doku-ments, das nicht nur im Source-Code verraten wird - auch in der Extensiondes Dateinamens *.html, *.htm, *.shtml oder *.shtm.

3

Kapitel 3

Cascading Stylesheets imEinsatz

3.1 Was sind Cascading Stylesheets?

”Cascading Style Sheets (CSS) bieten im wesentlichen dieselben Vorteile im

Web wie Formatvorlagen in der Testverarbeitung. Ein Cascading Style Sheetwird an einer zentralen Position eingerichtet, um das Erscheinungsbild derHTML-Tags auf einer einzelnen Webseite oder auf der gesamten Website zubestimmen. Die CSS-Methode wird zwar zusammen mit HTML verwendet, istaber kein Bestandteil von HTML. CSS ist ein ganzlich unabhangiger Code,der dazu dient, die Moglichkeiten von HTML zu erweitern. Mit CSS wirdalso die Funktionsweise der HTML-Tags noch genauer gesteuert.“1 [Tea99]

3.2 Der Aufbau des CSS-Codes

Allgemeine Syntax:

<CSS-Selektor>{<Eigenschaft>: <Wert>;

}

Konkretes Beispiel:

body

{font-family: "Veranda";

1[Tea99: 23]

4

KAPITEL 3. CASCADING STYLESHEETS IM EINSATZ 5

font-size: 24pt;

}

In meinem Beispiel heisst des CSS-Selektor body und konfiguriert dasgleichnamige HTML-Tag, die geschweiften Klammern legen den Bereich furdie Einstellungen des Selektors fest und FONT-FAMILY bzw. FONT-SIZEgibt eine Stileigenschaft wieder, der einmal der Wert ”VERANDA”bzw. derWert 24pt zugeordnet wird. Jede einzelne Anweisung muss mit einem Strich-punkt abgeschlossen werden.

3.3 Einbindung von CSS in HTML

3.3.1 Interne CSS-Definition

So wie ich mein Beispiel hier gewahlt habe, konnte ich nun dieses CSS aufzwei verschiedene Arten in meinen HTML-Grundgerust einbinden. Zum einenist eine interne CSS-Definition mit dem <STYLE>-Tag moglich, die folgen-dermaßen aussehen wurde:

<html><head><title>Michi’s DHTML-Seite</title><style type="text/css">body

{font-family: "Veranda";

font-size: 24pt;

}</style></head><body>Mein erstes HTML-Dokument mit interner CSS-Definition!

</body></html>

3.3.2 Externe CSS-Definition

Wenn es eine interne Definition gibt, so muss es auch eine externe mit @im-port bzw. mit dem <LINK>-Tag geben, wobei nun


body

{font-family:"Veranda";

font-size: 24pt;

}

in einer Datei mit Namen import.css abgespeichert werden wurde und imHTML-Dokument wie folgt aufgerufen werden wurde:2

<html><head><title>Michi’s DHTML-Seite</title><style type="text/css">@import url(import.css);

</style></head><body>Mein erstes HTML-Dokument mit externer CSS-Definition!

</body></html>

oder:

<html><head><title>Michi’s DHTML-Seite</title><link rel=Stylesheet href="import.css"type="text/css"></head><body>Mein erstes HTML-Dokument mit externer CSS-Definition!

</body></html>

3.3.3 Inline CSS-Definition

Will man nun einzelnen Tags verschiedene Stile zuordnen, bietet sich auchdie Inline-Definition an:

2vgl.[Jok02: 96ff]


<html><head><title>Michi’s DHTML-Seite</title><link rel=Stylesheet href="import.css"type = "text/css"></head><body>Mein erstes HTML-Dokument mit <p style: "font-family: "Arial";">externer und inline</p>CSS-Definition!

</body></html>

3.4 Was leisten Cascading Stylesheets?

• Textformatierung mit CSS

• Ausrichtung von Text mit CSS

• Zeichenformatierung mit CSS

• Konfiguration von Hyperlinks mit CSS

• Aufzahlungspunkte fur Listen

• Tabellen in CSS konfigurieren

• Einsatz von Rahmen mit CSS

• Absatze verschieden formatieren mit CSS

• Buchstaben- und Zeilenabstand verandern mit CSS

3.4.1 Textformatierung mit CSS

<html><head><title>Die Schriftfamilien</title></head><body><basefont size=4><h1 align="center">Die Schriftfamilien</h1>Dieses HTML-Dokument zeigt die verschiedenen Schriftfamilien

an.


<p style="font-family: "Serif";">Zunächst zeigen

wir die Schriftfamilie "Serif".</p><p style="font-family: "Sans-Serif";">Die zweite Schriftfamilie

heißt "Sans-Serif".</p><p style="font-family: "Cursive";">"Cursive"

heißt die nächste Schriftfamilie.</p><p style="font-family: "Fantasy";">"Fantasy"

ist die vorletzte Schriftfamile.</p><p style="font-family: "Monospace";">Mit "Monospace"

haben wir den Abschluss geschafft.</p></body></html>

Betrachtet man nun diesen HTML-Source-Code3[Jok02], so liegt hier eineCSS-Inline-Definition vor, bei der die verschiedenen Werte fur die Eigen-schaft ”font-family”genannt werden. Bei den Cascading Style Sheets kannman genau diese funf Schriftarten definieren, namlich ”Serif”, ”Sans-Serif”,”Cursive”, ”Fantasy”und ”Monospace”. Zusatzlich kann man hier noch dieEigenschaft ”font-family”angeben, um die Schriftgroße naher zu bestimmen,die dann die Werte

• xx-small,

• x-small,

• small,

• medium,

• large,

• larger,

• x-large und

• xx-large

annehmen kann.4 [Jok02] Der Internet Explorer unterscheidet diese Eintei-lung am deutlichsten. Die anderen Browser machen zwar auch Unterschiede,doch kennen sie nicht alle Schriftarten und Schriftgroßen.

3aus [Jok02: 100f]4vgl. [Jok02: 100]


3.4.2 Ausrichtung von Text mit CSS

<html><head><title>Text-Ausrichtung mit Stylesheets</title></head><body style="font-family: "Verdana";"><h1 style="text-align: "center";">Zentrierte Uberschrift</h1><p>Dieser Text wird links ausgerichtet. Es ist überflüssig,

ihn mit "text-align" auszurichten.</p><p style="text-align: "right";">Rechts ausgerichteter

Text kann zum Beispiel für Datumsangaben verwendet

werden. Der hier natürlich nicht!</p></body></html>

Wie schon dieses Beispiel5 [Jok02] andeutet, kann man der Eigenschaft ”text-align”die gleichen Werte, wie in einem HTML-Dokument zuordnen - undzwar

• left,

• center,

• right und

• justify.

3.4.3 Zeichenformatierung mit CSS

<html><head><title>Fett und kursiv - natürlich mit CSS</title></head><body style="font-family: "Verdana"; "><h1 align="center"> textless font style="font-weight:

"lighter";">Schriftgewicht</font>und <font style="font-style:

"italic";">kursiver</font>Text.</h1><center ><table border=3 cellpadding=10>

5vgl. [Jok02: 102]


<tr><th colspan=3>font-style

<tr><th>Wert

<th>Formatierung

<th>Ansichtsbeispiel

<tr><td><tt>normal</tt><td>Standard

<td style="font-style: normal;">normale Ansicht

<tr><td><tt>italic</tt><td>kursiv

<td style="font-style: italic;">kursive Ansicht

<tr><td><tt>oblique</tt><td>kursiv

<td style="font-style: oblique;">kursive Ansicht

<tr><th colspan=3>font-weight

<tr><th>Wert

<th>Formatierung

<th>Ansichtsbeispiel

<tr><td><tt>normal</tt><td>Standard

<td style="font-weight: normal;">normale Ansicht

<tr><td><tt>bold</tt><td>fett

<td style="font-weight: bold;">fette Ansicht

<tr><td><tt>bolder</tt><td>fetter

<td style="font-weight: bolder;">fettere Ansicht

<tr><td><tt>lighter</tt><td>dünn

<td style="font-weight: lighter;">dünne Ansicht

<tr><td><tt>100</tt><td>extra-dünn

<td style="font-weight: "100";">extra-dünne Ansicht

<tr><td><tt>200</tt><td>ziemlich dünn

<td style="font-weight: "200";">ziemlich dünne Ansicht

<tr><td><tt>300</tt><td>dünner

<td style="font-weight: "300";">dünnere Ansicht

<tr><td><tt>400</tt><td>dünn

<td style="font-weight: "400";">dünne Ansicht


<tr><td><tt>500</tt><td>normal

<td style="font-weight: "500";">normale Ansicht

<tr><td><tt>600</tt><td>leicht fett

<td style="font-weight: "600";">leicht fette Ansicht

<tr><td><tt>700</tt><td>fett

<td style="font-weight: "700";">fette Ansicht

<tr><td><tt>800</tt><td>fetter

<td style="font-weight: "800";">fettere Ansicht

<tr><td><tt>900</tt><td>extra-fett

<td style="font-weight: "900";">extra-fette Ansicht

</table></center></body></html>6 [Jok02]

Die Zeichenformatierung erfolgt im allgemeinen mit den Eigenschaften ”font-weight”, dem die Werte

• normal (Standard),

• bold (fett),

• bolder (fetter) und

• lighter (dunn)

zugeordnet werden konnen, um ein bestimmtes Schriftgewicht festzulegen.Fur die Formatierung stehen wiederum der Eigenschaft ”font-style”die Werte

• normal (Standard),

• italic (kursiv und

• oblique (kursiv)

zur Verfugung.

6[Jok02: 104f]


3.4.4 Konfiguration von Hyperlinks mit CSS

CSS Dokument7 [Jok02]: 3 4 4.css

body

{font-family: "Verdana";

font-size: 10pt;

}A:LINK

{color: blue;

text-decoration: none;

}A:VISITED

{color: red;

font-style: oblique;

}A:ACTIVE

{color: green;

text-decoration: overline;

}A:HOVER

{color: purple; text-decoration: underline;

}

HTML-Dokument: 3 4 4 1.htm

<html><head><title>Pseudo-Klassen für Hyperlinks</title><link rel=Stylesheet href="A.css"type="text/css"></head><body>Für ein Beispiel, das sich um Hyperlinks dreht, braucht

man selbstverständlich auch einen <a href="A2.htm">solchen</a>.

Dieser demonstriert :ACTIVE.<br>

7[Jok02: 111f]


Dies ist ein <a href="A1.htm">Link</a>zur selben Datei.

</body></html>

HTML-Dokument: 3 4 4 2.htm

<html><head><title>Für ’nen Hyperlink</title></head><body>Das ist lediglich eine Datei, auf die ein Hyperlink aus

<i>A1.css</i>verweist. Sie ist ohne CSS!

</body></html>

Genau wie in HTML kann man auch bei den Cascading Style Sheets dieFarben festlegen, so gibt es hier verschiedene Pseudo-Formate, wie bereits imobigen Beispiel-Source-Code deutlich werden sollte.

• :ACTIVE steht fur einen bereits angeklickten Hyperlink.

• :HOVER bezeichnet Hyperlinks, auf denen der Mauszeiger verweilt.

• :LINK gibt die Farbe des Hyperlinks an, der noch nicht angeklicktwurde.

• :VISITED steht - wie der Name schon sagt - fur bereits besuchte Hy-perlinks.8 [Jok02]

3.4.5 Aufzahlungspunkte fur Listen

<html><head><title>Selektoren für geschachtelte Listen</title><style type="text/css">H1 I

{text-decoration: underline;

}OL UL

8nach [Jok02: 110]


{list-style-type: upper-roman

}OL UL UL

{list-style-position: inside;

}OL UL UL LI

{font-family: "Verdana";

}</style></head><body><h1 align="center">Geschachtelte <i>Listen</i></h1><ol type="1"><li>EINS

<ul><li>Erste geschachtelte Liste

<li>Zweiter Bullet

<ul><li>Zweite<br>geschachtelte Liste

<li>Zweiter<br>Bullet

</ul></ul><li>ZWEI

</ol></body></html>

Das eben dargestellte Beispiel demonstriert eine stark geschachtelte Liste,in diese wurden die Eigenschaften ”text-decoration”, ”list-style-type”, ”list-style-position”und ”font-family”verwendet. Interessant fur uns sind im Au-genblick nur die Eigenschaften ”list-style-type”und ”list-style-position”. Bei-de legen den Nummerierungstyp und die Position des Aufzahlungszeichensdar.”list-style-type”kann in der Regel folgende Werte annehmen:

• None (keine Aufzahlungszeichen),


• Circle (Kreise),

• Disc (gefullte Kreise),

• Square (Rechtecke),

• Decimal (arabische Zahlen),

• lower-alpha (alphabetische Kleinbuchstaben),

• lower-roman (kleine romische Zahlen),

• upper-alpha (alphabetische Großbuchstaben) und

• upper-roman (große romische Zahlen).

Dagegen gibt es nur zwei Werte zur Auswahl fur ”list-style-position”, namlich

• Inside (im Text) und

• Outside (außerhalb des Textes).9 [Jok02]

3.4.6 Tabellen in CSS konfigurieren

<html><head><title>Tabellen konfigurieren</title><style type="text/css">table

{border-top-width: 10px;

border-bottom-width: thick;

border-top-color: red;

border-bottom-color: green;

}th

{background-color: black;

color: white;

}</style></head>

9vgl. [Jok02: 119f]


<body><h1 align="center">Tabellen mit CSS konfigurieren.</h1>Nachfolgend eine mit CSS formatierte Tabelle.

<p><table border=1><tr><th>Spalte 1

<th>Spalte 2

<th>Spalte 3

<tr><td>Zelle 1

<td>Zelle 2

<td>Zelle 3

</table></p></body></html>

Fur Tabellendarstellungen gibt es bei den Cascading Style Sheets eine Viel-zahl von Stileigenschaften, unter anderem sind da

• Border-left-color (Farbe der linken Rahmenseite),

• Border-right-color (Farbe der rechten Rahmenseite),

• Border-bottom-color (Farbe der unteren Rahmenseite),

• Border-top-color (Farbe der oberen Rahmenseite) und

• Border-color (Farbe des gesamten Rahmens),

denen die Farbwerte aus HTML zugeordnet werden. Wie dick bzw. dunn dieRahmenbalken nun werden sollen, wird durch

• Border-left-width (linke Rahmenseite),

• Border-right-width (rechte Rahmenseite),

• Border-bottom-width (untere Rahmenseite),

• Border-top-width (obere Rahmenseite) und

• Border-width (fur den gesamten Rahmen)

bestimmt. Diese Stileigenschaften konnen genau drei Werte annehmen,

• thin (dunn),


• medium (normale Dicke) und

• thick (dick).10 [Jok02]

3.4.7 Einsatz von Rahmen mit CSS

<html><head><title>Die verschiedenen Rahmen-Arten</title></head><body><h1 style="border-style: dashed;">Rahmen gestrichelt</h1><br><h1 style="border-style: dotted;">Rahmen gepunktet</h1><br><h1 style="border-style: double;">Rahmen doppelt</h1><br><h1 style="border-style: groove;">Rahmen 3D-Effekt</h1><br><h1 style="border-style: inset;">Rahmen 3D-Effekt</h1><br><h1 style="border-style: none;">kein Rahmen</h1><br><h1 style="border-style: outset;">Rahmen 3D-Effekt</h1><br><h1 style="border-style: ridge;">Rahmen 3D-Effekt</h1><br><h1 style="border-style: solid;">Rahmen normal</h1></body></html>11 [Jok02]

Wie an diesem Beispiel-Code ersichtlich ist, gibt es bei Rahmen im Grundgenommen nur eine echte Stileigenschaft, die als ”border-style”bezeichnetwird, diese kann jedoch verschiedene Werte annehmen, unter anderem auch

• dashed (gestrichelte Linie),

• dotted (gepunktete Linie),

• double (doppelte Linie),

• groove (3D-Effekt),

• inset (3D-Effekt),

• none (kein Rahmen),

• outset (3D-Effekt),

10vgl. [Jok02: 125]11[Jok02: 119f]


• ridge (3D-Effekt) und

• solid (einfache Linie).

3.4.8 Absatze verschieden formatieren mit CSS

<html><head><title>Absätze verschieden darstellen</title><style type="text/css">P.Eins

{display: block;

}P.Zwei

{display: inline;

}P.Drei

{display: none;

}P.Vier

{display: list-item;

}</style></head><body>Anfangstext ohne <P>-Tag.

<p class="Eins">Hier wird der Absatz zum Anfangstext eingehalten.</p>Normaler Text.

<p class="Zwei">Kein Absatz zum normalen Text eingehalten.</p><p class="Drei">Absatz wird nicht angezeigt!</p><p class="Vier">Absatz mit Aufzahlungszeichen!</p></body></html>

Bei Absatzen kommt die Stileigenschaft ”display”ins Spiel, die wiederumfolgende Werte annehmen kann:


• block (Der Absatz wird eingehalten),

• inline (Der Absatz wird nicht eingehalten),

• list-item (Ein Absatz mit Aufzahlungszeichen) und

• none (Der Absatz wird vernachlassigt).12 [Jok02]

3.4.9 Buchstaben- und Zeilenabstand verandern mitCSS

<html><head><title>Buchstaben- und Zeilenabstand</title><style type="text/css">body

{line-height: 30pt;

}A:HOVER

{letter-spacing: 0.5em;

}</style></head><body>Der Zeilenabstand wurde per Cascading Stylesheet verändert.<br>Wenn Sie mit der Maus über diesen <a href="do not exist.htm">Link</a>fahren, wird der Buchstabenabstand des Links geändert.

<br>Alles wurde per CSS erreicht.

</body></html>13[Jok02]

Will man nun die Zeilenabstande und Buchstabenabstande mit den Casca-ding Style Sheets verandern, so bedient man sich der Eigenschaften ”line-height”und ”letter-spacing”. Im oberen Beispiel bekommt ”line-height”denWert 30pt zugeordnet, was einer Schrift in der Punktgroße 30 entsprichtund ”letter-spacing”erhalt den Wert 0.5em. Dieses ”em”ist eine Einheit, de-ren Grundeinheit die Breite des Buchstaben ”m”ist, d.h. 0.5em ist die halbe

12vgl. [Jok02: 135]13[Jok02:137]


Breite des Buchstaben m. Somit wird das Wort soweit gedehnt, dass zwischenden einzelnen Buchstaben genau dieser Abstand entsteht.

3.5 Positionierung mit CSS

Die Cascading Style Sheets ermoglichen es dem Benutzer Objekte pixelgenauzu platzieren, hierfur muss man mit den CSS mindestens einen der drei Po-sitionierungstypen festlegen ...

• static - platziert den Inhalt inline, d.h. die Position des Elements kannman nicht beeinflussen

• relative - platziert das Element inline, lasst sich aber in Relation zuanderen Elementen verschieben

• absolute - platziert das Element unabhangig von anderen Elementenan einer bestimmten Position auf dem Bildschirm

Beispiel-Source-Code:14 [Tea99]

<html><head><title>Static</title><style type="text/css">.stat {position: static; font: bold 45pt helvetica;}.rel {position: relative; top: 0px; left: 45px; font: bold

15pt times; color: red;}.abs {position: absolute; top: 25px; left: 175px; width:

150px; font: bold 35pt helvetica; color:pink;}</style></head><body bgcolor="#ffffff"><p class="stat">’Oh my ears and whiskers, how late it’s

getting!’</p><p class="abs">’Oh my ears and whiskers, how late it’s

getting!’</p><p class="rel">’Oh my ears and whiskers, how late it’s

getting!’</p></body></html>

14[Tea99: 145f]

Kapitel 4

Das Document Object Model(DOM)

4.1 Was ist das DOM?

”Das Dokument-Objektmodell (DOM) ist vergleichbar mit einer Straßenkar-

te. Damit konnen Sie jedes Element in Ihrem HTML-Dokument dokumentie-ren und mit einem Skript, z.B. JavaScript, ansteuern, um die Eigenschaftendieses Elements zu verandern. Ein DOM kann jedes beliebige Element aufdem Bildschirm identifizieren (...) Jedes Element auf dem Bildschirm laßtsich entweder durch einen Namen oder ein ID-Attribut identifizieren. (...)Ein DOM entspricht einer Karte ihrer Webseite: Sie beschreiben einen Wegund beginnen mit dem HTML-Dokument selbst. Dann geben Sie die Element-art auf der Webseite an und abschließend die spezifische Kennzeichnung einesElements. Ein Dom fur ein Bild namens button1 wurde zum Beispiel lauten:

document.images.button1

(...) Sie konnen diese Pfadangabe dazu verwenden, dem Element mit Hilfe ei-ner JavScript-Funktion eine Nachricht zu ubermitteln (zum Beispiel, welchesBild angezeigt werden soll).“1 [Tea99]

4.2 Wie funktioniert das DOM zusammen mit

JavaSript?

Leider ist die Implementierung des DOM durch Microsoft unterschiedlich zuder durch Netscape. Deshalb beschranke ich mich darauf, ihre Gemeinsam-

1[Tea99: 185f]

21

KAPITEL 4. DAS DOCUMENT OBJECT MODEL (DOM) 22

keiten hier darzustellen. Der folgende Beispiel-Code stellt den JavaScript-Event-Handler ”onMouseOver”dar:

<html><head><title>The DOM</title></head><body bgcolor="#ffffff"><p><a href="next.html"onMouseOver="document.images.button1.src=

"button on.gif""><img src="../images/button off.gif"name="button1"border="0"></a></p></body></html>

Wie dieses Beispiel veranschaulichen soll, ist es moglich auf ganz einfacheArt und Weise Veranderung in eine HTML-Seite zu bringen. Wenn man hierauf das Bild names button1 klickt, wechselt die Grafik von button off.gif zubutton on.gif.

JavaScript-Event-Handler, die auf diese Weise in ein DOM eingebunden wer-den konnen, sind unter anderem2 [Wil01]

• onabort — onblur

• onclick — ondbclick

• ondragdrop — onerror — onfocus

• onkeydown — onkeypress

• onload — onunload

• onmousedown — onmousemove — onmouseout

• onmouseover — onmouseup

• onmove — onresize

2[vgl.Wil01: 29ff]

KAPITEL 4. DAS DOCUMENT OBJECT MODEL (DOM) 23

Nun soll dies aber nicht bedeuten, dass man JavaScript nur innerhalb desDokument-Objekt-Modells nutzen kann - nein, es kann auch jederzeit so ge-nutzt werden, in dem Funktionen definiert werden, die in folgenden Rahmeneingebettet werden:

<html><head><title>JavaScript</title><script language="JavaScript">

function meineFunktion(Anzahl, Text) {for(i=0; i<Anzahl; i++) {alert(Text);

}}var Meldung = "Hallo";

meineFunktion(3, Meldung);

</script>

</head><body bgcolor="#ffffff"></body></html>3 [Del01]

Diese Funktion sorgt beispielsweise dafur, dass drei Mal die Meldung”Hallo”ausgegeben wird, doch mochte ich nicht tiefer in JavaScript einstei-gen, da dies zu weit fuhren wurde. Denn JavaScript ist so umfangreich undvielseitig, so dass man erneut eine komplette Arbeit daruber schreiben konn-te.

Um nun verstehen zu konnen, welche Moglichkeiten sich durch DynamicHTML mit Cascading Style Sheets, dem DOM und JavaScript auftun, musstedieser Einblick genugen und regt hoffentlich auch die Neugierde des ein oderanderen an, sich weiter mit diesen Themen zu beschaftigen...

3[Del01: 55]

Literaturverzeichnis

[Del01] Elmar Dellwig. JavaScript. Markt und Technik Verlag, Munchen,2001.

[Fla00] David Flanagan. JavaScript. Kurz & gut. O’Reillys Taschenbiblio-thek, Koln, 2000.

[Gam03] Christoph Bergmann & Hannes Gamperl. Milch und Zucker.DHTML Seite. 19. April 2003. http://dhtml.seite.net.

[Hau01] Christian Wenz & Tobias Hauser. HTML. Markt und TechnikVerlag, Munchen, 2001.

[Jok02] Daniel Jokat. Jetzt lerne ich Cascading Stylesheets. Der einfacheEinstieg in Programmierung und Design mit DHTML. Markt undTechnik Verlag, Munchen, 2002.

[Mag03] Gruppi. Das Webdesign Magazin. DHTML Scriptsammlung. 19.April 2003. http://www.gruppi.de/dhtml/index.shtml.

[Pus00] Frank Puscher. Die Tricks der Internet-Kunstler. dpunkt.verlag,Heidelberg, 2000.

[Sel03] Selfhtml.teamone.de. Dynamisches HTML. 18. April 2003.http://selfhtml.teamone.de/dhtml/.

[Tea99] Jason Cranford Teague. DHTML in 500 Bildschritten. RowohltTaschenbuch Verlag, Hamburg, 1999.

[Wil01] Heather Williamson. Dynamic HTML browserubergreifend. GalileoComputing, Bonn, 2001.

24

Documents

Dynamisches HTML - Praktische Anwendungsbeispiele