<img src="kiefer.gif" alt="Kiefer, chinesische Tuschezeichnung"
width="200" height="300">
<body style="background-image: url('kiefer.gif');
background-repeat: no-repeat;
<div style="margin-left: 5em">
<p>Erster Absatz</p>
<img src="kiefer.gif" alt="Bild einer Kiefer" />
<p>Zweiter Absatz</p>
</div>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML und XHTML</title>
</head>
<body>
<h1>Webseiten mit HTML und XHTML</h1>
<h3>Inhaltsverzeichnis</h3>
<ol>
<li>HTML</li>
<li>XHTML</li>
</ol>
<hr />
<h2>1. HTML</h2>
<p><em>HTML</em> (Hypertext Markup Language) ist eine Auszeichnungssprache zur Erstellung von elektronischen Dokumenten. Zur Auszeichnung und Strukturierung des Textes definiert der HTML-Standard eine Reihe von sogenannten Tags.</p>
<h2>2. XHTML</h2>
<p><em>XHTML</em> ist der aktuelle Versuch des W3C-Konsortiums eine Brücke zwischen HTML und XML zu schlagen. XHTML-Dokumente sind einerseits den HTML-Dokumenten sehr ähnlich und können von allen gängigen Browsern korrekt angezeigt werden, andererseits sind XHTML-Dokumenten XML-konform.</p>
<p>Unter <em>http://www.w3.org</em> finden Sie weitere Informationen zu HTML und XHTML.</p>
</body>
</html>
<h2><a name="html">1. HTML</a></h2>
...
<h2><a name="xhtml">2. XHTML</a></h2>
...
<ol>
<li><a href="#html">HTML</a></li>
<li><a href="#xhtml">XHTML</a></li>
</ol>
Um die Links zu den Textpassagen ausprobieren zu können, müssen Sie das Browserfenster ganz schmal machen oder die Textblöcke zu den Überschriften ausbauen. Wenn die anzusteuernden Textpassagen nämlich ehedem im Browserfenster zu sehen sind, spart sich der Browser den Sprung.
<td rowspan="2"> </td>
<th colspan="2">Bananenproduktion in Mio t</th>
<div align="center">
<table border="0" width="550">
...
</table>
</div>
Eine gute Alternative ist, die Tabelle mit Hilfe der Stileigenschaft margin-left ein Stück einzurücken.
<div style="margin-left: 100px">
<table border="0" width="550">
...
</table>
</div>
<td width="10%" align="center"> ... </td>
Damit ein Rahmenelement verschwindet, muss allerdings für alle angrenzenden Frames das Attribut frameborder auf 0 gesetzt sein. Will man erreichen, dass die rahmenlosen Frames aneinandergrenzen, muss man im <frameset>-Tag das Attribut border auf 0 setzen.
<frame noresize="noresize" ... >
<a href="seite.html" target="frame1">Klick mich</a>
<head>
...
<base target="frame2">
</head>
Listing 4.2: Auszug aus tabelle.html
<table border="1" width="100%">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="200"> </td>
<td> </td>
</tr>
</table>
Der erste Schritt besteht darin, die Seite als ein großes Bild in einem geeigneten Grafikprogramm aufzubauen. Aus diesem Bild werden dann die einzelnen Teilbilder so ausgeschnitten, wie sie auf die Zellen der Tabelle zu verteilen sind.
Abbildung D.1: Die Bilder für die Tabellenzellen
Die Bilder werden dann als alleiniger Inhalt in die betreffenden Tabellenzellen eingefügt:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Seiten-Design</title>
</head>
<body style="margin: 0" marginwidth="0" marginheight="0" leftmargin="0" topmargin="0">
<table width="917" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan=2 width="917" height="94"><img
src="oben.jpg" width="917" height="94" /></td>
</tr>
<tr>
<td width="278" height="540"><img
src="inhalt.jpg" width="278" height="540"></td>
<td width="900"> </td>
</tr>
</table>
</body>
</html>
Wichtig ist dabei, dass der Browser keinen Rand zwischen seinen Fensterrahmen und den Anfang der Tabelle einfügt und dass die Bilder nahtlos aneinander gesetzt werden.
Im Grunde sollte es ausreichen, die Stileigenschaft margin des <body>-Tags auf 0 zu setzen, um sicherzustellen, dass die Webseite direkt am Rahmen des Browserfensters beginnt. Aus Rücksicht auf den Netscape 4- und ältere IE-Browser setzen wir aber noch die Attribute marginwidth, marginheight, leftmargin und topmargin.
Damit die Bilder nahtlos verbunden werden, muss man die <body>-Attribute border, cellpadding und cellspacing auf 0 setzen. Breite und Höhe der Tabellenzellen müssen den Größen der Bilder angepasst werden (oder kleiner eingestellt werden). Für angrenzende Zellen müssen wir ebenfalls die Breite (und gegebenenfalls die Höhe) angeben, damit der Browser die Zellen mit den Bildern nicht auf Kosten der angrenzenden Zellen ausdehnt. Schließlich muss man aufpassen, dass in den Zellen (zwischen den <td>-Tags) kein weiterer Inhalt steht, insbesondere auch keine Leerzeichen oder Zeilenumbrüche! (In obigem Code haben wir den Zeilenumbruch daher innerhalb des <img>-Tags gesetzt.) 1
Als DOCTYPE haben wir in diesem Falle Transitional ohne URL-Angabe gewählt. Nur so war es uns möglich, die Bilder auch im neuen Netscape-6-Browser nahtlos aneinander zu fügen.
Da der Navigator 4 die Stileigenschaft padding nicht für Tabellenzellen unterstützt (und wir das <table>-Attribut cellpadding nicht verwenden wollen), bedienen wir uns zum Abrücken der Ländernamen vom rechten Zellenrand eines Blinden GIFs (spacer.gif). Dabei handelt es sich um ein 1-Pixel großes Bild in der Hintergrundfarbe, das mit Hilfe des Attributs width auf die gewünschte Breite gestreckt wird (siehe auch Kapitel 5.4).
Schließlich fassen wir die Tabelle in <div>-Tags ein und rücken statt der Tabelle den ganzen <div>-Block ein, weil der Navigator 4 die Stileigenschaft margin nicht für Tabellen unterstützt.
Listing 4.4: Auszug aus bananenproduktion.html
<div style="margin-left: 30px">
<table border="1" width="550" rules="groups" >
<colgroup width="120" ></colgroup>
<colgroup span="2" ></colgroup>
<thead>
<tr>
<td rowspan="2"> </td>
<th colspan="2">Bananenproduktion in Mio t</th>
</tr>
<tr>
<th>1990</th>
<th>1999</th>
</tr>
</thead>
<tbody>
<tr>
<th width="130" align="right">Indien<img
¬src="spacer.gif" width="30" height="1" alt="" /></th>
<td width="210" align="center">6,734 </td>
<td width="210" align="center">10,200</td>
</tr>
<tr>
<th width="130" align="right">Brasilien<img
¬src="spacer.gif" width="30" height="1" alt="" /></th>
<td width="210" align="center">5,506</td>
<td width="210" align="center">5,592</td>
</tr>
<tr>
<th width="130" align="right">Ecuador<img
¬src="spacer.gif" width="30" height="1" alt="" /></th>
<td width="210" align="center">3,055</td>
<td width="210" align="center">4,600</td>
</tr>
</tbody>
</table>
</div>
<h2><a name="panther">DER PANTHER</a></h2>
...
<h2><a name="herbsttag">DER HERBSTTAG</a></h2>
...
<h2><a name="saal">Im SAAL</a></h2>
...
Dann richten wir in der Datei inhaltsverzeichnis.html die Hyperlinks auf die Gedichte ein (und vergessen auch nicht, den rechten Frame »hauptframe« als Zielframe für die Hyperlinks einzurichten.
Listing 4.5: inhaltsverzeichnis.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Inhaltsverzeichnis</title>
</head>
<body>
<dl>
<dt>Rilke</dt>
<dd><a href="hauptseite.html#panther"
target="hauptframe">Der Panther</a></dd>
<dd><a href="hauptseite.html#herbsttag"
target="hauptframe">Herbsttag</a></dd>
<dd><a href="hauptseite.html#saal"
target="hauptframe">Im Saal</a></dd>
</dl>
</body>
</html>
Hinweis: Man könnte auch den Header-Abschnitt um ein <base>-Tag erweitern und dort den Zielframe für die Hyperlinks der Seite angeben.
Listing 4.6: umfrageformular.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Umfrage</title>
</head>
<body>
<h3>Was halten Sie von der Einführung des Internet-freien Sonntags?</h3>
<form action="/cgi-bin/umfrage.pl" method="get">
<table border="0" cellspacing="0" cellpadding="10">
<colgroup span=2">
<col width="130">
<col width="150">
</colgroup>
<tr>
<td align="right"><input type="radio" name="R1" value="1" /></td>
<td align="left" valign="top" width="230">
Ich bin absolut dafür</td>
</tr>
<tr>
<td align="right"><input type="radio" name="R1" value="2" /></td>
<td align="left" valign="top" width="230">
Ich bin strikt dagegen</td>
</tr>
<tr>
<td align="right"><input type="radio" name="R1" value="3" /></td>
<td align="left" valign="top" width="230">
Weiss nicht</td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Abschicken" />
<input type="reset" value="Zurücksetzen" /></td>
</tr>
</table>
</form>
</body>
</html>
<meta http-equiv="content-style-type" content="text/css">
Diese Vorgehensweise hat zudem den Vorteil, dass sie auch für Inline-Stile gültig ist.
Ein <span style="text-decoration: underline">unterstrichenes</span> Wort.
Eine Alternative, die mehr Gestaltungsmöglichkeiten bietet, ist die Einblendung des unteren Rahmens:
<p>Ein <span style="border-width: 0 0 2px 0; border-style: solid; border-color: red">unterstrichenes</span> Wort.</p>
Listing 4.7: meindesign.css - Als externes Stylesheet definiertes Standard-Design
body { margin-left: 10em; margin-right: 10em; text-align: justify;
background-color: maroon; color: white;
font-family: Times, sans-serif}
h1, h2, h3 { font-family: Western, fantasy }
ul { list-style-image: url(listsymbol.gif)}
li { padding-left: 2em}
a:link { color: lime}
a:visited { color: fuchsia}
a:active { color: white}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Design</title>
</head>
<body>
<h1>Demo-Seite</h1>
<p>Dies ist ein Absatz mit einigen Hyperlinks. Folgen Sie doch einmal den Hyperlinks, um zu sehen, wie besuchte und noch nicht besuchte Links dargestellt werden. Die Darstellung aktivierter Links sehen Sie, wenn Sie einen Hyperlink klicken und die Maustaste gedrückt halten.<p>
<ul>
<li><a href="blank1.html">Erster Hyperlink</a></li>
<li><a href="blank2.html">Zweiter Hyperlink</a></li>
<li><a href="blank3.html">Dritter Hyperlink</a></li>
</ul>
</body>
</html>
Ohne Zuweisung des Stylesheets sieht diese Seite wie in Abbildung 2.3 aus.
Abbildung D.3: Die Webseite ohne zugewiesenes Stylesheet
Weist man dieser Webseite per <link>-Eintrag im Header das Stylesheet meindesign.css zu,
<link rel=StyleSheet type="text/css" href="meindesign.css">
sieht die Webseite danach wie in Abbildung 2.4 aus. Das gleiche Stylesheet weist man den anderen Seiten des Webs zu (im Beispiel die Seiten blank1.html, blank2.html und blank3.html, auf die die Hyperlinks verweisen).
Abbildung D.4: Die »designte« Webeite.
<img style="position: absolute; top: 20px; left: 10px" src=... />
Mehr Probleme als die Positionierung dürfte vielleicht der Hintergrund des Erde-Bilds machen. In der Datei erde.gif ist der Hintergrund nicht transparent. Folglich sieht man vor der Sonne den schwarzen Hintergrund des Erde-GIFs. Um den Hintergrund transparent zu machen, müssen Sie die Bilddatei in ein geeignetes Grafikprogramm laden (beispielsweise Paint Shop Pro), den Index der Hintergrundfarbe ermitteln (in Paint Shop Pro wird dieser in der Colors-Werkzeugleiste angezeigt, wenn Sie das Dropper-Werkzeug (Pipette) über den Hintergrund bewegen), und dann das Bild mit dem Index der Hintergrundfarbe als transparente Farbe abspeichern.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Erde und Sonne</title>
<style type="text/css">
<!--
body { background-color: black; color: white;
margin-top: 10px}
div.sonne { position: absolute; left: 350px; top: 120px}
div.erde { position: absolute; left: 335px; top: 200px }
-->
</style>
</head>
<body>
<h1>Erde und Sonne</h1>
<div class="sonne"><img src="sonne_t.gif" width="150" height="150" /></div>
<div class="erde"><img src="erde_t.gif" width="60" height="60" /></div>
</body>
</html>
Abbildung D.5: Überlagerte Bilder mit transparentem Hintergrund
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bilder ausrichten</title>
</head>
<body>
<h1>Das veraltete align-Attribut für Bilder</h1>
<div style="margin-left: 4.5cm">
<p>Absatz mit Bild <img src="frau.gif" alt="frau"
style="vertical-align: baseline" /> im Text (align="bottom")</p>
<p>Absatz mit Bild <img src="frau.gif" alt="frau"
style="vertical-align: middle" /> im Text (align="middle")</p>
<p>Absatz mit Bild <img src="frau.gif" alt="frau"
style="vertical-align: top" /> im Text (align="top")</p>
</div>
<table border="0">
<tr>
<th>align="left"</th>
<th>align="right"</th>
</tr>
<tr>
<td><p>Absatz mit left-align Bild <img src="frau.gif" alt="frau" style="float: left" /> im Text</p><p>Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. </p>
</td>
<td><p>Absatz mit right-align Bild <img src="frau.gif" alt="frau" style="float: right" /> im Text</p><p style="clear: right">Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. Nachfolgender Text. </p>
</td>
</tr>
</table>
</body>
</html>
<embed src="MeinSong.wav" autostart="false" hidden="false"
loop="false">
<a href="MeinSong.wav">Mein Song</a>
<meta name="keywords" content="Gedichte">
<meta name="description" content="Gedichtsammlung mit eigenen Werken und Gedichten ausgewählter Dichter">
<a href="MeinSong.wav">Mein Song</a>
<a href="Crossroads.ram">Crossraods</a>
...
Wenn Sie die fertige Webseite in Ihren Browser geladen haben, klicken Sie auf die Links, um die Sounddateien abzuspielen.
Kann eine Sounddatei nicht abgespielt werden, fehlt Ihnen vermutlich das zugehörige Abspielprogramm. Für die meisten gängigen Soundformate gibt es kostenlose Abspielprogramme im Internet. Einige Browser führen Sie zudem automatisch zu einer passenden Downloadseite, wenn Sie versuchen, eine Datei abzuspielen, für die kein Abspielprogramm (oder -Plugin) installiert ist.
Listing 4.11: eingangsseite.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hallo</title>
<!-- Suchmaschinen unterstützen -->
<meta name="language" content="de">
<meta lang="de" name="keywords" content="Florfliegen, Goldaugen,
Blattlausfliegen,
Chrysopidae,
Biologie, Anatomie">
<meta name="description" content="Ausführungen zur Anatomie und
Biologie der Florfliege (Familie Chrysopidae)">
<meta name="revisit-after" content="30 days">
<meta name="robots" content="all">
<link rel="start" type="text/html" href="frame_seite.html"
title="Ausgewählte Gedichte">
<style type="text/css">
<!--
body { background-color: maroon; color: white;
margin-top: 50px}
h1 { font-family: 'Book Antiqua', Arial, sans-serif ;
font-size: 24pt;
text-align: center}
div { float: right }
em { visibility: hidden; color: maroon }
-->
</style>
</head>
<body>
<h1>Willkommen<br />
auf<br />
meiner<br />
Florfliegen-Website</font></h1>
<p> </p>
<a href="blank.html"><div><img src="schalter.gif" width="140" height="50" /></div></a>
<p><em>Hier finden Sie ausführliche Informationen über die Biologie und Anatomie der Florfliegen (Familie Chrysopidae, auch Goldaugen oder Blattlausfliegen genannt)</em><p>
</body>
</html>
Die Einrichtung unsichtbarer HTML-Elemente wurde bereits in Kapitel 5.5 beschrieben. Wir bedienen uns hier zweier Techniken: der Stileigenschaft visibility und der Angleichung von Vordergrund- und Hintergrundfarbe.
Abbildung D.6: Eingangsseite mit unsichtbarem Text zur Suchroboterunterstützung
Zu diesem Tag gab es keine Fragen oder Übungen.
<script type="text/javascript">
. . . hier steht der Skript-Code ...
</script>
<script type="text/javascript" src="farben.js"></script>
var drei!; // Sonderzeichen ! in Variablenname
var 3fach; // Zahl am Anfang
var guter-Wert; // Sonderzeichen - in Variablenname
var Gärung; // Umlaute werden meist akzeptiert, man sollte
// sie aber vermeiden
var new; // Schlüsselwort
wert1 / wert2; // 3.25
wert1 % wert2; // 1
wert1 / wert3; // 8.6666
wert1 + wert4 * wert3; // 47.5
(wert1 + wert4) * wert3; // 1984.5
var loop = 1;
var ergebnis = 0;
while(loop <= 10)
{
ergebnis = loop*loop*loop;
if (ergebnis > 700)
continue;
document.writeln(ergebnis);
++loop;
}
Aber auch die hier vorgestellte Methode ist kein Schutz gegen echte Hacker. Mit einem Seitenladeprogramm (wie wget unter Linux), können diese den Quellcode und damit das Passwort leicht einsehen.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Passwort</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
var eingabe;
eingabe = prompt("Geben Sie das Passwort ein: ","");
if (eingabe == "geheim")
{
location.href = "meineSeite.html";
}
else
{
location.href = "sorry.html";
}
</script>
</head>
<body>
<h1>Passwortabfrage</h1>
</body>
</html>
var fahrenheit = -30;
var celsius = 0;
while (fahrenheit <= 90)
{
celsius = (fahrenheit - 32) * 5 / 9;
document.write("<p>" + fahrenheit + " Fahrenheit entsprechen "
+ celsius + " Grad Celsius</p>");
fahrenheit += 10;
}
Ein kleines Problem dabei ist, dass wir mit Hilfe der Funktion Math.random() und einer kleinen Umrechnung zwar Werte zwischen 1 und 16 erzeugen können, für die Farbangabe aber Hexadezimalwerte zwischen 1 und F benötigen. Wir lösen dieses Problem, indem wir ein Array mit Strings von »1« bis »F« anlegen und mit Hilfe von Math.random() Werte zwischen 0 und 15 erzeugen, die wir als Indizes in das Array verwenden.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Funktionen</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
function farbe_setzen()
{
var farbwerte = new Array("0","1","2","3","4","5","6","7","8","9",
"A","B","C","D","E","F");
var loop, index;
var farbe = "#";
for (loop = 0; loop < 6; ++loop)
{
index = parseInt(Math.random() * 16);
farbe += farbwerte[index];
}
document.bgColor = farbe;
}
</script>
</head>
<body>
<p onmouseover="farbe_setzen()">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text ... </p>
<p onmouseover="farbe_setzen()">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text ... </p>
<p onmouseover="farbe_setzen()">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text ... </p>
</body>
</html>
Die verschiedenen Bilder für den Rollover-Effekt werden vorab beim Laden der Webseite geladen. Dadurch läuft der Rollover-Effekt später, wenn der Webbesucher seine Maus über die Schaltflächen bewegt, schneller ab. Gespeichert werden die Bilder in zwei Array-Objekten: einem Array-Objekt für die Schaltflächen ohne Effekt (schalterAus) und ein Array-Objekt für die Schaltflächen mit Effekt (schalterAn).
Wenn der Webbesucher die Maus über eine der Schaltflächen bewegt (onmouseover- Ereignis), wird der Index der Schaltfläche an die Funktion rollover_an() übergeben und die Funktion weist dem img-Objekt das zugehörige Bild mit Effekt zu. Beachten Sie, dass wir den Index sowohl zum Adressieren des <img>-HTML-Elements als auch zum Auswählen des neu anzuzeigenden Bildes verwenden. Dies geht, weil es auf der Webseite außer den Schaltflächen keine weiteren Bilder gibt, so dass die Indizes für die Schaltflächen (document.images[]) und die Bilder (schalterAn, schalterAus) übereinstimmen. Ansonsten müsste man den Index für die Adressierung der Schaltflächen berechnen (beispielsweise document.images[3 + index], wenn die Webseite vor den Schaltflächen noch drei andere Bilder enthält) oder eine switch- Anweisung implementieren.
Wenn der Webbesucher die Maus von einer der Schaltflächen herunterbewegt (onmouseout-Ereignis), wird der Index der Schaltfläche an die Funktion rollover_aus() übergeben und die Funktion weist dem img-Objekt das zugehörige Bild ohne Effekt zu.
Listing 4.14: webseite.html - Webseite mit Rollover-Schaltflächen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Rollover-Effekt</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
var schalterAus = new Array();
schalterAus[0] = new Image();
schalterAus[0].src = "button1a.gif";
schalterAus[1] = new Image();
schalterAus[1].src = "button2a.gif";
schalterAus[2] = new Image();
schalterAus[2].src = "button3a.gif";
var schalterAn = new Array();
schalterAn[0] = new Image();
schalterAn[0].src = "button1b.gif";
schalterAn[1] = new Image();
schalterAn[1].src = "button2b.gif";
schalterAn[2] = new Image();
schalterAn[2].src = "button3b.gif";
function rollover_an(index)
{
document.images[index].src = schalterAn[index].src;
}
function rollover_aus(index)
{
document.images[index].src = schalterAus[index].src;
}
</script>
</head>
<body style="background-image: url('blaustreifen.jpg');
background-repeat: repeat-y;
margin-top: 30px">
<table border="0" cellpadding="0" cellspacing="20px">
<tr>
<td width="60"> </td>
<td><a href="#" onmouseover="rollover_an(0)" onmouseout="rollover_aus(0)"><img src="button1a.gif" border="0" width="120" height="24" /></a></td>
</tr>
<tr>
<td width="60"> </td>
<td><a href="#" onmouseover="rollover_an(1)" onmouseout="rollover_aus(1)"><img src="button2a.gif" border="0" width="120" height="24" /></a></td>
</tr>
<tr>
<td width="60"> </td>
<td><a href="#" onmouseover="rollover_an(2)" onmouseout="rollover_aus(2)"><img src="button3a.gif" border="0" width="120" height="24" /></a></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Optionsfelder</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
function farbe(f)
{
document.bgColor = f;
}
</script>
</head>
<body>
<h1>Wählen Sie die Hintergrundfarbe</h1>
<form>
<table border="0" cellspacing="5">
<tr>
<td><input type="radio" name="hintergrund" value="weiss"
onclick="farbe('white')" />Weiss</td>
<td><input type="radio" name="hintergrund" value="rot"
onclick="farbe('red')" />Rot</td>
<td><input type="radio" name="hintergrund" value="blau"
onclick="farbe('blue')" />Blau</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>DM/Euro</title>
<head>
<title>DM/Euro</title>
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
function dm2euro()
{
var dm_wert = document.forms[0].elements[0].value;
var euro_wert = null;
euro_wert = dm_wert / 1.95583;
document.forms[0].elements[1].value = euro_wert;
}
</script>
</head>
<body>
<h1>Umrechnung von DM in Euro</h1>
<form>
<table border="0" cellspacing="0" cellpadding="10">
<colgroup span=2">
<col width="230">
<col width="450">
</colgroup>
<tr>
<td align="right" valign="top" width="230">
Betrag in DM : </td>
<td><input name="dm" size="30" maxlength="50"></td>
</tr>
<tr>
<td align="right" valign="top" width="230">
Betrag in Euro : </td>
<td><input name="euro" size="30" maxlength="50"
readonly="readonly"></td>
</tr>
<tr>
<td> </td>
<td><input type="button" value="Umrechnen"
onclick="dm2euro()"></td>
</tr>
</table>
</form>
</body>
</html>
parent.frames[3]. location.href = "neueSeite.html";
Erzeugen Sie zuerst aus dem Bild der Comic-Figur jeweils eigene Bilder für Kopf und Rumpf.
Speichern Sie die Bilder als GIF-Dateien und geben Sie den Index der Hintergrundfarbe als Index der transparenten Farbe an (wie dies geht, hängt von dem verwendeten Grafikprogramm ab).
Vergrößern Sie die Bilder. Die Kopfbilder sollten 158 mal 148 Pixel groß sein, die Rumpfbilder 200 mal 235 Pixel. Um das eigentliche Bild sollte dabei noch genügend freier weißer Hintergrund sein, denn wir müssen das eigentliche Bild noch innerhalb des Bildrechtecks positionieren. (Sind Ihre Bilder zu groß, müssen Sie sie zuerst herabskalieren.)
Schneiden Sie aus dem Kopfbild den Kopf heraus und verschieben Sie den Kopf so innerhalb des Bildes, dass der Halsansatz an der Position 85, 125 zu liegen kommt. Schneiden Sie aus dem Rumpfbild den Rumpf heraus und verschieben Sie den Rumpf so innerhalb des Bildes, dass der Halsansatz an der Position 90, 100 zu liegen kommt. So wird sichergestellt, dass die Köpfe stets ordentlich am Rumpf ansetzen. (Die oben genannten Werte gelten allerdings nur, wenn Sie die Angaben für die absolute Positionierung im HTML-Code der Webseite hauptseite.html nicht verändern.
var str = "meinCookie=" + escape("Inhalt des Cookies")
+ "; expires=Fri, 12 Jul 2004 12:34:55 GMT";
document.cookie = str;
Listing 4.17: Auszug aus formulare.html
<form>
<table border="0" width="450" cellspacing="5" cellpadding="5">
<tr>
<td width="150" align="right">Ihr Name</td>
<td width="300" colspan="4"><input type="text" name="T1"
size="20"></td>
</tr>
<tr>
<td width="150" align="right">Ihr Vorname</td>
<td width="300" colspan="4"><input type="text" name="T2"
size="40"></td>
</tr>
<tr>
<td width="150"> </td>
<td width="30"><input type="radio" value="pro"
checked="checked" name="R1"></td>
<td width="120">Pro</td>
<td width="30"><input type="radio" value="kontra"
name="R1"></td>
<td width="120">Kontra</td>
</tr>
<tr>
<td width="150" align="right">Ihre Meinung</td>
<td width="300" colspan="4"><input type="text" name="T3"
size="40"></td>
</tr>
</table>
</form>
Listing 4.18: Auszug aus formulare.html
function CookieFormularSpeichern(name)
{
var feld0 = document.forms[0].elements[0].value;
var feld1 = document.forms[0].elements[1].value;
var feld2 = document.forms[0].elements[2].checked;
var feld3 = document.forms[0].elements[3].checked;
var feld4 = document.forms[0].elements[4].value;
document.cookie = name + "=" + escape(feld0) + "|"
+ escape(feld1) + "|" + escape(feld2) + "|"
+ escape(feld3) + "|" + escape(feld4);
}
Listing 4.19: Auszug aus formulare.html
function WerteAuslesen(beginn)
{
var naechster = document.cookie.indexOf(";", beginn);
if (naechster == -1)
naechster = document.cookie.length;
var i = 0;
while (beginn < naechster)
{
ende = document.cookie.indexOf("|", beginn);
if (ende == -1)
ende = naechster;
if(i == 2 || i == 3)
{
var gesetzt = unescape(document.cookie.substring(beginn,
ende));
switch(gesetzt)
{
case "true": document.forms[0].elements[i].checked = true;
break;
case "false": document.forms[0].elements[i].checked = false;
break;
}
}
else
document.forms[0].elements[i].value =
unescape(document.cookie.substring(beginn, ende));
beginn = ende + 1;
i += 1;
}
return 1;
}
Neu hinzugekommen ist der mittlere Teil. Hier wird anhand des Index i überprüft, ob gerade der Wert für eines der Optionsfelder bearbeitet wird. Wenn ja, müssen wir statt der Steuerelement-Eigenschaft value die Eigenschaft checked setzen. Dabei ist zu beachten, dass uns die Methoden substring() und unescape() einen String zurückliefern. In einer switch-Verzweigung prüfen wir, ob der String "true" oder "false" lautet, und setzen entsprechend das Steuerelement auf true oder false.
<!--#flastmod file="datei.txt" -->
Das Durchsuchen von HTML-Dokumente nach Server Side Includes setzt die Performance des Webservers herab. Je mehr Dateien der Webserver dabei untersuchen muss, um so stärker wird seine Leistung herabgesetzt. Nun brauchen moderne Webserver zum Durchsuchen der Webseiten und zur Verarbeitung der Server Side Includes nicht allzu lange, doch sollte man den Webserver nicht unnötig Webseiten analysieren lassen (wie es meist der Fall ist, wenn man als Extension für die zu analysierenden Seiten .html wählt).
Zudem entsteht ein nicht zu unterschätzendes Sicherheitsloch, wenn der Webserver HTML-Seiten analysiert, die Formulareingaben von Websurfern enthalten (siehe Frage/Antwort-Teil)
Listing 4.20: lastmodified.shtml mit formatierter Datumsausgabe
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Server Side Includes</title>
</head>
<body>
<h1>Das Wetter</h1>
<p>Morgens diesig, in den Niederungen dichter Nebel. Tagsüber Temperaturen zwischen 4 und 6 Grad Celsisus. Gegen Abend Gewitter. Fazit: Wer heute Sonne haben will, muss sie im Herzen tragen.
<!--#config timefmt="%A, der %d.%m.%y (%H:%M:%S)" -->
<p>Letzte Änderung: <!--#flastmod file="lastmodified.shtml" --></p>
</body>
</html>
import java.awt.event.*;
Sie müssen eine eigene Lauscherklasse von MouseAdapter ableiten und in dieser die Methode mouseClicked() überschreiben:
class MeinMausLauscher extends MouseAdapter
{
public void mouseClicked(MouseEvent e)
{
m_farbe = new Color((int) (255*Math.random()),
(int) (255*Math.random()),
(int) (255*Math.random()) );
repaint();
}
}
Sie müssen Ihre Lauscherklasse als Ereignisbehandlungsmethode für das Mausklick- Ereignis des Applets registrieren:
public void init()
{
...
addMouseListener(new MeinMausLauscher());
}
200
100
300
#!/usr/bin/perl -w
use CGI qw(:standard);
use strict;
my $pro;
my $kontra;
my $gesamt;
my $proProzent;
my $kontraProzent;
# ******** Umfragestatistik einlesen ********
my $statistik = "umfrage.dat"; # Datei muss in gleichem Verzeichnis
# stehen wie das CGI-Programm
open(STAT, "$statistik")
or
die "\nDatei $statistik konnte nicht zum Lesen geoeffnet werden\n";
$pro = <STAT>; # erste Zeile lesen
chomp($pro); # Zeilenumbruch entfernen
$kontra = <STAT>; # zweite Zeile lesen
chomp($kontra); # Zeilenumbruch entfernen
$gesamt = <STAT>; # dritte Zeile lesen
chomp($gesamt); # Zeilenumbruch entfernen
close(STAT);
# ******** Eingaben aus Formular verarbeiten ********
my $option = param('R1');
if ($option eq "pro") # pro-Option gesetzt
{
++$pro;
}
else # kontra-Option gesetzt
{
++$kontra;
}
++$gesamt;
# Prozentwerte berechnen
$proProzent = $pro * 100 / $gesamt;
$kontraProzent = $kontra * 100 / $gesamt;
# ******** Neuen Stand speichern ********
open(STAT, "> $statistik")
or
die "\nDatei $statistik konnte nicht zum Schreiben geoeffnet werden\n";
print STAT $pro, "\n";
print STAT $kontra, "\n";
print STAT $gesamt, "\n";
close(STAT);
# ******** Umfragestatistik zurücksenden ********
my $antwort = <<HERE_UMFRAGE;
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Umfrage zu internetfreiem Sonntag</title>
</head>
<body>
<h1>Aktueller Stand der Umfrage</h1>
<p>Sind Sie für den internetfreien Sonntag?</p>
<table border="0" width="250" cellspacing="5" cellpadding="5">
<tr>
<td width="50" align="right">Dafür :</td>
<td width="200">$proProzent %</td>
</tr>
<tr>
<td width="50" align="right">Dagegen :</td>
<td width="200" align="left">$kontraProzent %</td>
</tr>
</table>
</body>
</html>
HERE_UMFRAGE
print header, $antwort;
Wenn Sie unter UNIX/Linux arbeiten, müssen Sie die Zugriffsrechte der Dateien korrekt setzen. Das Perl-Skript muss vom Webserver ausführbar sein (beispielsweise chmod 755 umfrage.pl), die Datei umfrage.dat muss von dem Perl-Skript gelesen und geschrieben werden können (beispielsweise chmod 666 umfrage.dat).
<%
Option Explicit
Dim intStunde, strHallo
intStunde = Hour(Now)
If intStunde >= 6 And intStunde <=10 Then
strHallo = "Guten Morgen!"
ElseIf intStunde >=11 And intStunde <=13 Then
strHallo = "Mahlzeit!"
ElseIf intStunde >=14 And intStunde <=17 Then
strHallo = "Guten Tag!"
ElseIf intStunde >=18 And intStunde <=21 Then
strHallo = "Guten Abend!"
Else
strHallo = "Gute Nacht!"
End If
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Begrüßung</title>
</head>
<body bgcolor="white">
<h2><% =strHallo %></h2>
</body>
</html>
<%
Option Explicit
Dim bVollstaendig, i
bVollstaendig = False
If Request.Form("submit")="Abschicken" Then
bVollstaendig = True
If Request.Form("Geschlecht") = "" Then
bVollstaendig = False
End If
If Request.Form("Vorname") = "" Then
bVollstaendig = False
End If
If Request.Form("Nachname") = "" Then
bVollstaendig = False
End If
If Request.Form("Windows")="" And Request.Form("Linux")="" Then
bVollstaendig = False
End If
End If
If bVollstaendig = True Then
Response.Redirect "danke.asp"
End If
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Formulare</title>
</head>
<body bgcolor="white">
<h3>Formularversand</h3>
<p>
<%
If Not bVollstaendig Then
Response.Write "Bitte füllen Sie alle Felder aus!"
Response.Write "</p><p>"
End If
%>
<form method="post">
<input type="text" name="Vorname" size="20"
value="<% =Request.Form("Vorname") %>" />Vorname<br />
<input type="text" name="Nachname" size="20"
value="<% =Request.Form("Nachname") %>" />Nachname<br />
<input type="radio" name="Geschlecht" value="m"
<% If Request.Form("Geschlecht") = "m" Then %> checked<% End If %>
>männlich
<input type="radio" name="Geschlecht" value="f"
<% If Request.Form("Geschlecht") = "f" Then %> checked<% End If %>
>weiblich<br />
Ich nutze
<input type="checkbox" name="Windows" value="ja"
<% If Request.Form("Windows") = "ja" Then %> checked<% End If %>
>Windows
<input type="checkbox" name="Linux" value="ja"
<% If Request.Form("Linux") = "ja" Then %> checked<% End If %>
>Linux<br />
<select name="Tag" size="1">
<%
For i=1 To 21
%>
<option value="<% =i %>"
<% If Request.Form("Tag") = i&"" Then %> selected<% End If %>
><% =i %></option>
<%
Next
%>
</select>Dieser Tag gefällt mir am Besten<br />
<input type="submit" name="submit" value="Abschicken" />
</form>
</p>
</body>
</html>
Beachten Sie, wie wir bei der Vorausfüllung des Pulldown-Menüs die Variable i in einen String umwandeln mussten!
<%
Option Explicit
Dim strFarbe
strFarbe = ""
If Request.Form("submit") = "Abschicken" Then
Response.Cookies("Farbe") = Request.Form("Farbe")
Response.Cookies("Farbe").Expires = Date + 60
strFarbe = Request.Form("Farbe")
Else
strFarbe = Request.Cookies("Farbe")
End If
strFarbe = Replace(strFarbe, "<", "")
strFarbe = Replace(strFarbe, ">", "")
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cookies</title>
</head>
<%
If strFarbe <> "" Then
%>
<body bgcolor="<% =strFarbe %>">
<%
Else
%>
<body bgcolor="white">
<%
End If
%>
<h2>Personalisierung</h2>
<p>
<%
If strFarbe = "" Then
%>
<form method="post">
<input type="text" name="Farbe" size="20" /> Lieblingsfarbe<br />
<input type="submit" name="submit" value="Abschicken">
</form>
<%
Else
%>
<h2>Willkommen auf Ihrer personalisierten Seite!</h2>
<%
End If
%>
</p>
</body>
</html>
<?php
$datum = getdate();
$stunde = $datum["hours"];
if ($stunde >= 6 && $stunde <=10) {
$hallo = "Guten Morgen!";
} elseif ($stunde >= 11 && $stunde <= 13) {
$hallo = "Mahlzeit!";
} elseif ($stunde >= 14 && $stunde <= 17) {
$hallo = "Guten Tag!";
} elseif ($stunde >= 18 && $stunde <= 21) {
$hallo = "Guten Abend!";
} else {
$hallo = "Gute Nacht!";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Begrüßung</title>
</head>
<body bgcolor="white">
<h2><?=$hallo ?></h2>
</body>
</html>
<?php
$vollstaendig = false;
if ($HTTP_POST_VARS["submit"] == "Abschicken") {
$vollstaendig = true;
if (!isset($HTTP_POST_VARS["Geschlecht"])) {
$vollstaendig = false;
}
if (!isset($HTTP_POST_VARS["Vorname"])) {
$vollstaendig = false;
}
if (!isset($HTTP_POST_VARS["Nachname"])) {
$vollstaendig = false;
}
if (!isset($HTTP_POST_VARS["Windows"]) &&
!isset($HTTP_POST_VARS["Linux"])) {
$vollstaendig = false;
}
if ($vollstaendig) {
header("Location: danke.php");
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Formulare</title>
</head>
<body bgcolor="white">
<h3>Formularversand</h3>
<p>
<?php
if (!$vollstaendig) :
?>
Bitte füllen Sie alle Felder aus!</p>
<p>
<?php
endif;
?>
<form method="post">
<input type="text" name="Vorname" size="20"
value="<?php print $HTTP_POST_VARS["Vorname"]; ?>" />Vorname<br />
<input type="text" name="Nachname" size="20"
value="<?php print $HTTP_POST_VARS["Nachname"]; ?>" />Nachname<br />
<input type="radio" name="Geschlecht" value="m"
<?php
if ($HTTP_POST_VARS["Geschlecht"] == "m") {
print " checked";
}
?>
>männlich
<input type="radio" name="Geschlecht" value="f"
<?php
if ($HTTP_POST_VARS["Geschlecht"] == "f") {
print " checked";
}
?>
>weiblich<br />
Ich nutze
<input type="checkbox" name="Windows" value="ja"
<?php
if ($HTTP_POST_VARS["Windows"] == "ja") {
print " checked";
}
?>
>Windows
<input type="checkbox" name="Linux" value="ja"
<?php
if ($HTTP_POST_VARS["Linux"] == "ja") {
print " checked";
}
?>
>Linux<br />
<select name="Tag" size="1">
<?php
for ($i=1; $i<=21; $i++) :
?>
<option value="<?=$i ?>"
<?php
if ($HTTP_POST_VARS["Tag"] == $i) {
print " selected";
}
?>
><?=$i ?></option>
<?php
endfor;
?>
</select>Dieser Tag gefällt mir am Besten<br />
<input type="submit" name="submit" value="Abschicken" />
</form>
</p>
</body>
</html>
<?php
$farbe = "";
if (isset($HTTP_POST_VARS["submit"])) {
setcookie("Farbe", $HTTP_POST_VARS["Farbe"], time()+60*60*24*60);
$farbe = $HTTP_POST_VARS["Farbe"];
} else {
$farbe = $HTTP_COOKIE_VARS["Farbe"];
}
$farbe = str_replace("<", "", $farbe);
$farbe = str_replace(">", "", $farbe);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Cookies</title>
</head>
<?php
if ($farbe != "") :
?>
<body bgcolor="<?=$farbe ?>">
<?php
else :
?>
<body bgcolor="white">
<?php
endif;
?>
<h2>Personalisierung</h2>
<p>
<?php
if ($farbe = "") :
?>
<form method="post">
<input type="text" name="Farbe" size="20" /> Lieblingsfarbe<br />
<input type="submit" name="submit" value="Abschicken">
</form>
<?php
else :
?>
<h2>Willkommen auf Ihrer personalisierten Seite!</h2>
<?php
endif;
?>
</p>
</body>
</html>
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html>
<head>
<title>XHTML-Beispiel</title>
<link rel="StyleSheet" type="text/css" href="sonne.css" />
</head>
<body>
<h1>Erde und Sonne</h1>
<div class="sonne"><img src="sonne_t.gif" width="150" height="150" alt="sonne" /></div>
<div class="erde"><img src="erde_t.gif" width="60" height="60" alt="erde" /></div>
</body>
</html>
body { background-color: black; color: white;
margin-top: 10px}
div.sonne { position: absolute; left: 350px; top: 120px}
div.erde { position: absolute; left: 335px; top: 200px }
Damit Designs, wie das aus Übung 2.2, fehlerfrei betrachtet werden können, ist unbedingt auf pixelgenaues Arbeiten zu achten.