vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbacknächstes Kapitel

Tag Anhang D

Lösungen

D.1 Tag 1: Von der Idee zum eigenen Web

Antworten zum Quiz

  1. In der Fremde wird man anfangs immer erst nach dem Äußeren beurteilt. Es lohnt sich daher, in das eigene Äußere zu investieren, man muss nur aufpassen, dass man sich nicht übernimmt oder über das Ziel hinausschießt. Als Webautor präsentieren Sie sich mit Ihrer Website. Investieren Sie also entsprechend Ihrer Mittel Zeit und Geld, aber hüten Sie sich davor, Ihre Webseiten mit dynamischen Inhalten und Spielereien zu überfrachten.
  2. Die Umsetzung der HTML-Tags in geeignete Textformatierungen ist weitgehend den Browsern überlassen. Auch werden nicht alle HTML-Elemente von allen Browsern gleichermaßen gut und buchstabengetreu unterstützt. Es ist also durchaus möglich, dass ein und dieselbe Webseite in einem Browser umwerfend und in dem nächsten dilettantisch aussieht. Testen Sie das Aussehen Ihrer Webseiten daher möglichst in mehreren Browsern, zumindest aber in den Standardbrowsern Internet Explorer, Netscape Navigator und Netscape 6.

Antworten zu den Übungen

  1. Siehe Kapitel 1.4.1 und 1.4.2.
  2. Siehe Kapitel 1.4.3.
  3. Siehe Kapitel 1.5.

D.2 Tag 2: Am Anfang war... HTML

Antworten zum Quiz

  1. Ein leeres Tag ist ein Tag, dass nur aus einem Start-Tag besteht und keinen Text einschließt (beispielsweise <hr /> oder <img src="bild.gif" alt="Foto meines Hundes"/>. Ein nicht-leeres Tag ohne Inhalt ist ein Tag, das üblicherweise einen Text einschließt, beispielsweise <p>Dies ist der Inhalt</p>, in diesem besonderen Fall aber leer ist.
  2. Zeilenumbrüche werden auf verschiedene Weisen erzeugt
  1. Diese Frage ist nicht zu beantworten, da die Formatierung von Struktur-Elementen wie <h4> vom jeweiligen Webbrowser abhängt.
  2. Bilder werden üblicherweise mit dem <img>-Tag eingefügt. 
    <img src="kiefer.gif" alt="Kiefer, chinesische Tuschezeichnung"
         width="200" height="300">
  1. ImageMaps sind Bilder, in denen mehrere Teilbereiche mit Hyperlinks verbunden sind. Sie werden meist clientseitig durch eine Tabelle (<map>) von <area>-Definitionen erzeugt.
  2. Inline-Stile werden mit Hilfe des style-Attributs in das Start-Tag des zu formatierenden HTML-Tags eingefügt.
  3. Folgende Stileigenschaften waren gesucht
  1. Um zwei Textabsätze und ein dazwischen gelegenes Bild zusammen einzurücken, fasst man die Textabsätze und das Bild in ein <div>-Tag ein und rückt den gesamten <div>-Block ein. 
    <div style="margin-left: 5em">
      <p>Erster Absatz</p>
      <img src="kiefer.gif" alt="Bild einer Kiefer" />
      <p>Zweiter Absatz</p>
    </div>

Antworten zu den Übungen

  1. Der HTML-Code für die angegebene Webseite könnte beispielsweise folgendermaßen aussehen.

Listing 4.1: webseite.html

<!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>
  1. Zuerst versieht man die anzuspringenden Textstellen mit Ankern: 
    <h2><a name="html">1. HTML</a></h2>
    ...
    <h2><a name="xhtml">2. XHTML</a></h2>
    ...

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.

  1. Zu dieser Übung gibt es keine Lösung. Lassen Sie Ihrer Phantasie freien Lauf.

D.3 Tag 3: Tabellen, Frames und Formulare

Antworten zum Quiz

  1. Tabellenzeile definiert man mit dem <tr>-Tag, Tabellenzelle mit <td> (oder <th> für Überschriftzellen).
  2. Zwei bestehende Zellen kann man nicht verschmelzen. Man kann aber mit Hilfe der Attribute rowspan und colspan eine Zelle definieren, die im Raster der Tabelle zwei (oder mehr) benachbarte Zellen einnimmt. 
    <td rowspan="2">&nbsp;</td>
    <th colspan="2">Bananenproduktion in Mio t</th>
  3. Ja, Tabellen kann man verschachteln. Für Webseiten, die Tabellen zur Gestaltung des Seitenlayouts einsetzen, ist das gar nicht ungewöhnlich.
  4. Der derzeit immer noch beste Weg zur Zentrierung einer Tabelle ist die Einfassung in einen zentrierten <div>-Block: 
    <div align="center">
      <table border="0" width="550">
      ...
      </table>
    </div>
  1. Den Inhalt einer Tabellenzelle zentriert man mit Hilfe des Attributs align. (Für Tabellenzellen ist das Attribut nicht deprecated). 
    <td width="10%" align="center"> ... </td>
  2. Um eine Webseite in Frames aufzuteilen, ersetzt man den <body>-Abschnitt der Webseite durch eine <frameset>-Deklaration, in der man die einzelnen Frames festlegt und die Webseiten angibt, die anfangs in den Frames angezeigt werden sollen.
  3. Um die Rahmen um einen Frame auszublenden, setzt man in der <frame>-Definition das Attribut frameborder auf 0.
  1. Setzt man in einer Frame-Deklaration das Boolesche Attribut noresize, können die Rahmenelemente um den betreffenden Frame nicht im Browser verschoben werden. 
    <frame noresize="noresize" ... >
  2. Mit Hilfe des Attributs target kann man angeben, in welchem Frame die mit einem Hyperlink verbundene Webseite angezeigt werden soll. Voraussetzung ist, dass der Frame einen Namen hat (<frame name="hauptframe" ...>), den man als Wert für das target-Attribut angeben kann. Das target-Attribut kann man in der Deklaration der einzelnen Hyperlinks 
    <a href="seite.html" target="frame1">Klick mich</a>

Antworten zu den Übungen

  1. Der HTML-Code für die Tabelle könnte beispielsweise wie folgt aussehen:

Listing 4.2: Auszug aus tabelle.html

<table border="1" width="100%">
  <tr>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr>
    <td width="200">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
  1. Es gibt sicherlich viele Möglichkeiten, den gewünschten Seitenaufbau umzusetzen. Man könnte den Randstreifen beispielsweise als Hintergrundbild erzeugen und die anderen Elemente der Webseite mit Hilfe einer Tabelle oder durch absolute Positionierung (siehe Kapitel 5) darüber legen. Wir wollen Ihnen hier aber eine andere Technik demonstrieren, die in vielen Fällen sehr nützlich ist: das Zusammenfügen von Bildern mit Hilfe einer Tabelle.

Listing 4.3: tabelle.html

<!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">&nbsp;</td>
  </tr>
</table>

</body>
</html>

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.

  1. Viele aktuelle Browser haben Probleme mit den <colgroup>-Definitionen. Der erste Schritt ist daher, die Formatierungen aus den <colgroup>-Definitionen in die Tabellenzellen zu übertragen.

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">&nbsp;</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>
  1. Zuerst erhält jede Gedichtüberschrift in der Datei hauptseite.html ihren eigenen, benannten Anker: 
    <h2><a name="panther">DER PANTHER</a></h2>
    ...
    <h2><a name="herbsttag">DER HERBSTTAG</a></h2>
    ...
    <h2><a name="saal">Im SAAL</a></h2>
    ...

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>
  1. Ein mögliches Formular für die Umfrage könnte wie folgt aussehen:

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>&nbsp;</td>
      <td><input type="submit" value="Abschicken" />
          <input type="reset" value="Zurücksetzen" /></td>
    </tr>
  </table>
</form>

</body>
</html>
 Abbildung D.2:   Das Umfrageformular

D.4 Tag 4: Formatieren mit Stylesheets

Antworten zum Quiz

  1. Eine Möglichkeit ist, den Stylesheet-Typ im <style>-Tag anzugeben. 
    <style type="text/css">
  1. Für Webseiten ist die Stylesheet-Typangabe zwar nicht wirklich erforderlich, weil wir stets mit CSS-Stylesheets arbeiten und die Browser standardmäßig auf CSS-Stile eingerichtet sind. Es gehört jedoch zum guten Ton, die verwendete Stylesheet-Sprache anzugeben, und man sollte sich nicht unbedingt darauf verlassen, dass die Browser standardmäßig von CSS-Stylesheets ausgehen. Schließlich ist es möglich, dass die Webseite noch von anderen Anzeigegeräte verarbeitet wird (Braille-Geräte, etc.) und diese könnten auch anderen Stylesheet-Spezifikationen unterstützen.
  2. Die Eigenschaft padding erzeugt einen Freiraum zwischen dem Inhalt eines Elements und seinem (sichtbaren oder nicht-sichtbaren) Rahmen. Ist eine Hintergrundfarbe für das Element definiert, füllt diese auch den padding-Raum aus. Die Stileigenschaft margin erzeugt einen Freiraum (Rand) um ein HTML-Element, der außerhalb des (sichtbaren oder nicht-sichtbaren) Rahmens liegt. Der Rand gehört nicht zum Hintergrund des Elements.
  3. Die bevorzugte Stileigenschaft zum Unterstreichen von Text ist text-decoration mit dem Wert underline, beispielsweise 
    Ein <span style="text-decoration: underline">unterstrichenes</span> Wort.
  1. Den Inhalt von Tabellenzellen rückt man von den Zellenrändern am einfachsten über das table-Attribut cellpadding ein. Man kann aber auch die Stileigenschaft padding verwenden.
  2. Vererbung bedeutet, dass bestimmte Stileigenschaften von HTML-Elementen auf eingebetette (untergeordnete) HTML-Elemente vererbt werden. So erbt ein <span>- Element beispielsweise Schriftart, Text- und Hintergrundfarbe des umliegenden Blockelements (<p>, <li>, etc.)
  3. Die höchste Priorität hatte li.meineinzug, da ein class-Stil immer spezifischer ist als jede Kombination aus HTML-Selektoren.

Antworten zu den Übungen

  1. Als Beispiel-Design habe ich folgendes Stylesheets definiert, die in der Datei meindesign.css abgespeichert sind:

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}
  1. Zur Demonstration habe ich folgende Hauptseite aufgesetzt:

Listing 4.8: ueb2.html

<!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.

D.5 Tag 5: Positionieren mit Stylesheets

Antworten zum Quiz

  1. Zur absoluten Positionierung eines Elements setzen Sie die Stileigenschaft position auf absolute und positionieren das Element über die Eigenschaften left und top (oder auch bottom und right). 
    <img style="position: absolute; top: 20px; left: 10px" src=... />
  2. Relativ positionierte Elemente werden - nachdem der Browser die Seite auf traditionelle Weise aufgebaut hat - verschoben und hinterlassen an ihrer ursprünglichen Position einen Leerraum
  3. Auf keinen Fall. Ob man besser mit Rändern, Tabellen oder absoluter Positionierung arbeitet, muss man von Fall zu Fall entscheiden.
  4. Statt des deprecated align-Attribute für <img>-Bilder sollten Sie die Stileigenschaften vertical-align und float verwenden. (Hinweis: Aus Rücksicht auf ältere Browser empfiehlt es sich aber, trotzdem zusätzlich auch das align-Attribut zu setzen.)

Antworten zu den Übungen

  1. Für diese Übung müssen Sie die Bilder der Sonne und der Erde durch absolute Positionierung überlagern: position: absolute; left: 350px; top: 120px. Um sicherzustellen, dass die Erde über der Sonne liegt, können Sie die Erde entweder nach der Sonne positionieren (wie in nachfolgendem Listing) oder die z-index- Eigenschaft der Erde auf einen höheren Wert setzen als den z-index der Sonne.

Listing 4.9: sonne.html

<!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
  1. Ein passender HTML-Code könnte wie folgt aussehen.

Listing 4.10: img.html

<!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>

D.6 Tag 6: Fortgeschrittenes und dynamisches HTML

Antworten zum Quiz

  1. Abspielbare Sounddateien kann man entweder über das <emdbed>-Tag 
    <embed src="MeinSong.wav" autostart="false" hidden="false"
                                                loop="false">
  1. Quickinfos sollten aus zwei Gründen keine wichtigen Informationen enthalten:
  1. Die vollständigen URLs lauten:
  1. Ein Webcrawler oder Suchroboter ist ein Programm, das sich von Link zu Link durch die Webseiten des Internets hangelt und die gefundenen Webseiten gemäß ihren Schlüsselwörtern katalogisiert und in die Datenbank seiner Suchmaschine einträgt.
  2. Zur Unterstützung von Suchrobotern sollte man zumindest die beiden folgenden META-Tags aufsetzen: 
    <meta name="keywords" content="Gedichte">
    <meta name="description" content="Gedichtsammlung mit eigenen Werken und Gedichten ausgewählter Dichter">

Antworten zu den Übungen

  1. Besorgen Sie sich zuerst eine kleine Auswahl an Sounddateien. Am einfachsten ist es, erst einmal die eigene Festplatte nach Dateien mit der Extension .wav, rm oder .ram zu durchsuchen.

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.

  1. Eine wie in der Aufgabe beschriebene Eingangsseite könnte beispielsweise wie folgt aussehen.

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>&nbsp;</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

D.7 Tag 7: Ein gelungener Webauftritt

Zu diesem Tag gab es keine Fragen oder Übungen.

D.8 Tag 8: Wozu JavaScript?

Antworten zum Quiz

  1. Von serverseitiger Programmierung spricht man, wenn ein Programm auf dem Webserver ausgeführt wird und das Ergebnis über das Netz an den Browser auf dem Client-Rechner geschickt wird. Von clientseitiger Programmierung spricht man, wenn der Programmcode direkt auf dem Client-Rechner ausgeführt wird.
  2. Ein Interpreter ist ein Programm, das einen als Quelltext vorliegenden Programmcode einliest und schrittweise in Maschinencode umwandelt und ausführen lässt. Interpreter sind immer plattformspezifisch, das heißt, es gibt jeweils eigene Interpreter für Microsoft/Intel, MacIntosh oder UNIX/Linux. Für JavaScript sind die Interpreter üblicherweise in die Browser integriert.
  3. Der üblicher Weg zur Einbettung von Skriptcode in Webseite führt über das <script>- Tag, das je nach Aufgabe des Skriptcodes in den Header- oder den Body-Abschnitt der Webseite eingefügt wird. 
    <script type="text/javascript">
       . . . hier steht der Skript-Code ...
    </script>
  4. Um eine Skriptdatei zu laden, richtet man ein leeres <script>-Tag ein und gibt den URL der Skriptdatei als Wert des src-Attributs an. 
    <script type="text/javascript" src="farben.js"></script>
  5. JavaScript-Dateien werden mit der Extension .js abgespeichert.
  6. Das JavaScript-Objekt document repräsentiert die Webseite des aktuellen Browserfensters.
  7. Das JavaScript-Objekt window repräsentiert das aktuelle Browserfensters?

Antworten zu den Übungen

  1. Siehe Kapitel 8.4.

D.9 Tag 9: JavaScript-Grundkurs

Antworten zum Quiz

  1. Folgende Variablennamen waren nicht korrekt: 
    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
  2. Für wert1 = 13, wert2 = 4, wert3 = 1.5, wert4 = »23« ergeben sich folgende Werte: 
    wert1 / wert2;               // 3.25
    wert1 % wert2;               // 1
    wert1 / wert3;               // 8.6666
    wert1 + wert4 * wert3;       // 47.5
    (wert1 + wert4) * wert3;     // 1984.5
  3. Die Schleife wird endlos ausgeführt. Dies liegt daran, dass die continue-Anweisung vor dem Erhöhen der Schleifenvariable loop erfolgt. Wenn die continue-Anweisung das erste Mal ausgeführt wird (loop hat den Wert 9 erreicht), wird die aktuelle Schleifeniteration abgebrochen. Es beginnt eine neue Iteration, die fatalerweise mit dem gleichen loop-Wert arbeitet. Die Schleife führt erneut die continue-Anweisung aus, die Schleifenvariable wird wieder nicht verändert, es beginnt wieder eine neue Iteration, die wie die vorangehenden Iterationen aussieht. 
    var loop = 1;
    var ergebnis = 0;

    while(loop <= 10)
      {
      ergebnis = loop*loop*loop;
      if (ergebnis > 700)
        continue;
      document.writeln(ergebnis);
      ++loop;
      }
  4. Zum Abspeichern und Bearbeiten einer Sammlung gleicher Daten verwendet man am besten ein Array-Objekt.
  5. Zum Abspeichern und Bearbeiten zusammengehörender, aber unterschiedlicher Daten definiert man am besten eine Klasse.

Antworten zu den Übungen

  1. Wir implementieren die Passwortabfrage als Skriptcode im Header-Bereich und verzweigen je nachdem, ob das eingegebene Passwort korrekt ist oder nicht zur geheimen Webseite oder zu einer Seite mit einer Fehlermeldung. Auf diese Weise verhindern wir, dass der Besucher der Webseite sich in seinem Browser den Quelltext der Webseite mit der Passwortabfrage anzeigen lassen kann. Denn da wir das richtige Passwort nicht codiert haben und auch nicht aus einer serverseitigen Datenbank einlesen, sondern es uncodiert im Quelltext des Skriptcodes steht, könnte er die Passwortabfrage sonst leicht knacken.

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.

Listing 4.12: passwort.html

<!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>
  1. Die korrespondierende while-Schleife sieht wie folgt aus: 
    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;
      }
  2. Wie Sie bereits aus Kapitel 2.8 wissen, werden Farben im HTML-Code als RGB- Farben codiert, das heißt als eine Folge von 6 Hexadezimalwerten im Bereich zwischen 1 und F, die jeweils paarweise die Farbintensität für die drei Grundfarben Rot, Grün und Blau festlegen. Um zufällige Farben aus dem gesamten möglichen Wertebereich zu erhalten, kann man so vorgehen, dass man 6 zufällige Hexadezimalwerte zieht und zu einem Farbwert zusammensetzt.

Listing 4.13: farben.html

<!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>

D.10 Tag 10: Mit JavaScript auf HTML-Elemente zugreifen

Antworten zum Quiz

  1. Häufig verwendete JavaScript-Ereignisse sind: onblur, onload, onchange, onclick, onmousemove, onmouseover, onmouseout, onselect, onsubmit, onreset.
  2. Im Internet Explorer kann man auf das globale event-Objekt über window.event zugreifen. Das auslösende Objekt ist in der Eigenschaft srcElement gespeichert, die Koordinaten des Mausklicks in den Eigenschaften offsetX und offsetY. Im Netscape Navigator übergibt man das Objekt als Argument an die Ereignisbehandlungsfunktionen. Das auslösende Objekt ist in der Eigenschaft target gespeichert, die Koordinaten des Mausklicks in den Eigenschaften pageX und pageY. (Achtung: offsetX, offsetY und pageX, pageY beziehen sich nicht auf das gleiche Koordinatensystem. offsetX, offsetY beziehen sich auf das auslösende Objekt, pageX, pageY beziehen sich auf die Webseite.)
  3. Mit document.images[2] greifen Sie auf das dritte <img>-Element einer Webseite zu?
  4. Mit der DOM-Methode getElementById() kann man direkt auf HTML-Elemente mit einer id-Kennung zugreifen. Die DOM-Methode getElementById() wird vom Internet Explorer 5 und dem Netscape 6-Browser unterstützt.
  5. Im Internet Explorer und dem Netscape 6-Browser kann man über die Eigenschaft style auf die Stileigenschaften eines Objekts zugreifen.
  6. Wenn Sie im JavaScript-Code bestimmen wollen, in welchem Browser die Webseite gerade angezeigt wird, testen Sie mit Hilfe von if-Anweisungen:

Antworten zu den Übungen

  1. Das folgende Skript zeigt eine Möglichkeit zur Realisierung grafischer Rollover- Schaltflächen.

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">&nbsp;</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">&nbsp;</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">&nbsp;</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>

D.11 Tag 11: JavaScript und Formulare

Antworten zum Quiz

  1. Das zweite Formular einer Webseite wird durch document.forms[1] repräsentiert. Denken Sie immer daran, dass die Indizierung von JavaScript-Arrays mit 0 beginnt.
  2. Die Eigenschaft value hat für unterschiedliche Steuerelemente unterschiedliche Bedeutung
  1. Sollen die Daten, die der Webbesucher in ein Formular eingegeben hat, zur serverseitigen Bearbeitung an einen Webserver geschickt werden, muss man das Formular mit einem Submit-Schalter bestücken und im action-Attribut des <form>- Tags den Ziel-URL für die Daten angeben (optional kann man über method noch die Art der Datenübertragung festlegen (Standardeinstellung ist GET)).
  2. Will man Formulareingaben vor der Übersendung an den Webserver noch clientseitig bearbeiten (beispielsweise um die Vollständigkeit der Daten zu überprüfen), muss man eine passende JavaScript-Funktion aufsetzen, die - je nachdem, ob die Daten tatsächlich verschickt oder doch verworfen werden sollen - true oder false zurückliefert und den Rückgabewert dieser Funktion dem onsubmit-Ereignis des Formulars zuweisen.

Antworten zu den Übungen

  1. Eine mögliche Lösung könnte wie folgt aussehen.

Listing 4.15: optionen.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>
  1. Eine mögliche Lösung für die Webseite zur Umrechnung von DM in Euro könnte wie folgt aussehen.

Listing 4.16: euro.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>&nbsp;</td>
      <td><input type="button" value="Umrechnen" 
                 onclick="dm2euro()"></td>
    </tr>
  </table>
</form>




</body>
</html>

D.12 Tag 12: JavaScript und Frames

Antworten zum Quiz

  1. Das parent-Objekt repräsentiert in Frames die übergeordnete Frameseite.
  2. Wir gehen einmal davon aus, dass Frame D der vierte Frame der Frameseite ist. Dann kann man in Frame A mit Hilfe der Anweisung 
    parent.frames[3]. location.href = "neueSeite.html";

Antworten zu den Übungen

  1. Wenn Sie passende Bilder von Comic-Figuren gefunden haben (einscannen oder Bild/ClipArt-Sammlungen entnehmen), müssen Sie die Bilder für die Verwendung in der Webseite präparieren.

D.13 Tag 13: Cookies

Antworten zum Quiz

  1. Das JavaScript-Objekt document.cookies repräsentiert alle Cookies, die für eine Webseite gesetzt wurden.
  2. Um einen Cookie für eine Webseite zu setzen, erzeugt man zuerst einen String für den Cookie. Ein solcher Cookie-String muss zumindest aus einem name=WERT-Paar (und gegebenenfalls einem expires=DATUM-Paar) bestehen. Diesen String weist man dann dem document.cookie-Objekt zu. 
    var str = "meinCookie=" + escape("Inhalt des Cookies") 
              + "; expires=Fri, 12 Jul 2004 12:34:55 GMT"; 
    document.cookie = str;
  3. Um den Inhalt eines Cookies abzufragen, geht man den Inhalt des document.cookie- Objekts durch, bis man auf den Namen des Cookies trifft. Dann extrahiert man den Wert des Cookies, decodiert die Sonderzeichen und liefert das Ergebnis zurück.
  4. Wenn man einen Cookie für mehrere Webseiten setzen möchte, muss man als path- Attribut des Cookies ein Verzeichnis angeben, das den betreffenden Webseiten übergeordnet ist.

Antworten zu den Übungen

  1. Zuerst erweitert man das Formular um eine Gruppe von zwei Optionsfelder (gleiche name-Werte).

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">&nbsp;</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;
  }

D.14 Tag 14: Erste serverseitige Techniken

Antworten zum Quiz

  1. Perl, C++, CGI, ASP, PHP.
  2. Um das Datum der letzten Änderung einer bestimmten Datei in eine Webseite einzufügen, verwendet man den SSI-Befehl #flastmod. 
    <!--#flastmod file="datei.txt" -->
  3. Aus zwei Gründen sollte man einen (öffentlichen) Webserver nicht so konfigurieren, dass er alle Webseiten mit der Extension .html nach Server Side Includes durchsucht:

Antworten zu den Übungen

  1. Eine mögliche Lösung für die Webseite mit der geforderten Datumsausgabe könnte wie folgt aussehen.

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>
 Abbildung D.7:   Formatierte Datumsausgabe

D.15 Tag 15: Java-Applets

Antworten zum Quiz

  1. Mit Java kann man nicht nur Applets für Webseiten erstellen. Java ist eine Sprache für professionelle Programmierer, mit der man jede Art von Programm erstellen kann.
  2. Applets werden in Form von Bytecode über das Netz übertragen. Dieser Bytecode wird beim Laden in einen Java-fähigen Browser von diesem interpretiert. So können Applets auf beliebigen Plattformen ausgeführt werden - einzige Voraussetzung ist, dass auf dem jeweiligen Rechner ein Java-fähiger Browser installiert ist.
  3. Wenn Sie ein Applet mit Hilfe des <applet>-Tags in eine Webseite einbetten, müssen Sie den Namen des Applets (code-Attribut) sowie die Breite und Höhe des Anzeigebereichs für das Applet (width- und height-Attribut) angeben. Optional können Sie das Verzeichnis des Applets angeben (codebase-Attribut) und/oder Parameter an das Applet übergeben.
  4. Die Hauptklasse eines Applets muss von der Basisklasse Applet abgeleitet werden.
  5. In den Anzeigebereich eines Applets kann man nicht schreiben, sondern nur zeichnen. Textausgaben werden daher unter Verwendung der Graphics-Methode drawString(text, x, y) in das Applet »gezeichnet«.
  6. Falls Sie den Aufruf in Mausklick.java übersehen haben: die Hintergrundfarbe eines Applets wird durch Aufruf der Methode setBackground() gesetzt.

Antworten zu den Übungen

  1. Um das Fleckenapplet so zu überarbeiten, dass beim Klicken in das Applet die Farbe der Flecken neu festgelegt wird, sind drei Änderungen nötig:

D.16 Tag 16: Animationen

Antworten zum Quiz

  1. Eine für alle Plattformen verfügbare Grafik-Software, mit der man auch GIF- Animationen erstellen kann, ist die ImageMagick-Programmsammlung, die man von www.simplesystems.org/ImageMagick herunterladen kann!
  2. Um eine JavaScript-Funktion in regelmäßigen Zeitabständen immer wieder ausführen zu lassen, braucht man nur am Ende der Funktion die JavaScript-Methode setTimeout(), mit dem Funktionsnamen als erstem und der Zeitdauer als zweitem Argument aufzurufen.
  3. Threads werden in Java mit Hilfe der Klasse Thread erzeugt - entweder durch Erzeugung eines Thread-Unterobjekts oder durch Ableitung der Hauptklasse von Thread. Java-Applets kann man auch dadurch threadfähig machen, dass man die Applet-Klasse die Schnittstelle Runnable implementieren lässt, die Methode run() definiert, und dann ein Thread-Objekt erzeugt und startet.
  4. Bild-für-Bild-Animationen, Motion Tweening, Shape Tweening, Motion Tweening entlang eines Laufpfades.
  5. Flash-Animationen werden durch eine Verschachtelung eines <object>- und eines <embed>-Tags in Webseiten eingebettet. Das <object>-Tag erzeugt die Animation im Internet Explorer, das <embed>-Tags in den Netscape-Browsern.

D.17 Tag 17: CGI und Perl

Antworten zum Quiz

  1. Skalare Variable haben vor dem eigentlichem Namen immer ein $, Array-Variablen ein @.
  2. In Perl-Strings in doppelten Anführungszeichen werden Variablennamen durch die Werte der Variablen ersetzt, in Strings in einfachen Anführungszeichen nicht.
  3. Zahlenwerte vergleicht man mit ==, !=, < etc. - die Antwort lautet also $var1 < $var2
  4. Strings vergleicht man mit eq, ne, lt etc. - die Antwort lautet also $str1 lt $str2
  5. Lösungen zu allgemeinen Programmieraufgaben sucht man am Besten im CPAN.
  6. Die Perl-CGI-Methode header gibt den HTTP-Header zum nachfolgenden HTML- Code einer dynamisch erzeugten Webseite aus.
  7. Will man zusammen mit den Formulareingaben weitere Daten an ein CGI-Programm schicken, richtet man im Formular verborgene Felder (<input type="hidden" />) ein.
  8. Will ein CGI-Programm statt einer dynamisch generierten Webseite den URL einer bestehenden Webseite als Antwort an den Browser zurückliefern, schickt er einen Location-Header.

Antworten zu den Übungen

  1. Eine mögliche Lösung könnte wie folgt aussehen. Die Anzahl der Pro-Meldungen, der Kontra-Meldungen und die Gesamtzahl der Meldungen werden jede für sich in einer Zeile einer Datei namens umfrage.dat im CGI-Verzeichnis des Servers abgespeichert.

Listing 4.21: umfrage.dat

200
100
300

Listing 4.22: umfrage.pl

#!/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).

D.18 Tag 18: Microsoft präsentiert... ASP

Antworten zum Quiz

  1. Nein, ASP ist keine Programmiersprache, sondern eher eine Technologie. Auf ASP- Seiten können Sie mehrere Programmiersprachen verwenden, am weitesten verbreitet sind VBScript und JScript.
  2. Mit Option Explicit erzwingen Sie, dass alle verwendeten Variablen zuvor mit Dim geklariert werden müssen. Zum einen müssen Sie dann sauberer und konzentrierter programmieren, aber Tippfehler bei Variablennamen werden Ihnen in der Regel direkt vom ASP-Interpreter gemeldet.
  3. Im Gegensatz zu JavaScript - beides. Während bei JavaScript Vergleiche noch mit == angestellt werden mussten, erfüllt das Gleichheitszeichen bei VBScript eine Doppelfunktion.
  4. Bei Select Case können Sie einen Ausdruck (z.B. eine Variablen) auf mehrere verschiedene Werte überprüfen. Bei If-Then können Sie einen Ausdruck auf einen Wert überprüfen; bei der Verwendung von Else/ElseIf können Sie jedoch andere Ausdrücke überprüfen, sind also nicht auf einen Ausdruck festgelegt.
  5. Entweder mit For (die Zählvariable läuft von 0 bis UBound(Arrayname)), oder - noch bequemer - mit For-Each.
  6. Dann wird das Formular auf dieselbe Seite verschickt. Ist das Formular selbst eine ASP-Seite, oder wollen Sie das Formular ggf. erneut anzeigen (etwa wenn es nicht vollständig ausgefüllt worden ist), ist das sehr praktisch.
  7. Greifen Sie mit Request("name-Attribut") die Werte als Kollektion ab, und durchschreiten Sie diese Kollektion mit For-Each.
  8. Der zweite Parameter gibt an, in welchem Modus die Datei geöffnet werden soll. Im Modus 8 wird die Datei im Anhängen-Modus geöffnet, das heißt neue Daten werden ans Ende der bestehenden Datei geschrieben, der bisherige Dateiinhalt geht also nicht verloren. Im Modus 2 wird der bestehende Dateiinhalt gelöscht bzw. durch die neuen Inhalte überschrieben. Um genau zu sein, gibt es sogar noch einen dritten Modus, 1, der zum Lesen aus einer Datei dient.
  9. Beim Lesen von Cookies müssen Sie auf Request.Cookies zugreifen, und können das überall auf der ASP-Seite machen. Zum Schreiben von Cookies müssen Sie Response.Cookies verwenden, und müssen dies darüber hinaus auch noch vor dem ersten HTML-Code machen.

Antworten zu den Übungen

  1. Die aktuelle Stunde wird mit Hour(Now) ausgelesen, der Rest sind einfache Fallunterscheidungen:

Listing 4.23: uebung1.asp

<%
  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&uuml;&szlig;ung</title>
</head>
<body bgcolor="white">
<h2><% =strHallo %></h2>
</body>
</html>
  1. Der Trick besteht in der Regel darin, das value-Attribut der entsprechenden Formularelemente mit den Daten aus Request.Form zu füllen. Ausnahmen sind Checkboxen, Radiobuttons und Auswahllisten, bei denen ein selected oder checked eingefügt werden muss. Im folgenden Listing werden die Formulardaten auf Vollständigkeit überprüft, und im Ernstfall eine Warnmeldung ausgegeben sowie das Formular wieder angezeigt, mit den bereits eingegebenen Werten vorausgefüllt:

Listing 4.24: uebung2.asp

<%
  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&uuml;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&auml;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&auml;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!

  1. Der Wert des Cookies wird überprüft. Sofern dieser leer ist (oder nur aus spitzen öffnenden und schließenden Klammern besteht), wird das Formular ausgegeben, ansonsten die Hintergrundfarbe. Am Anfang des Skripts muss noch der Fall abgefangen werden, dass das Formular gerade verschickt worden ist, und der Cookie entsprechend gesetzt werden. Da der Cookie erst mit der Seite an den Client geschickt wird, kann in diesem Fall noch nicht direkt darauf zugegriffen werden; die Lieblingsfarbe muss also in einer Variablen zwischengespeichert werden

Listing 4.25: uebung3.asp

<%
  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>

D.19 Tag 19: PHP, der Shooting-Star

Antworten zum Quiz

  1. Zend ist die Engine, die hinter PHP 4 steckt. Ihr Name bildet sich aus den Entwicklern der neuen PHP-Version. Rasmus ist der ursprüngliche Entwickler von PHP und hilft immer noch bei der Weiterentwicklung.
  2. Das Gleichheitszeichen ist in PHP nur ein Zuweisungsoperator. Als Vergleichsoperator fungiert ==.
  3. Bei switch können Sie einen Ausdruck (z.B. eine Variablen) auf mehrere verschiedene Werte überprüfen. Bei if können Sie einen Ausdruck auf einen Wert überprüfen; bei der Verwendung von else/elseif können Sie jedoch andere Ausdrücke überprüfen, und sind also nicht auf einen Ausdruck festgelegt.
  4. Entweder mit for (die Zählvariable läuft von 0 bis count($Array)), oder - noch bequemer - mit foreach.
  5. Die Spezialvariable $PHP_SELF enthält die URL des aktuellen PHP-Skripts. Viele Leute setzen das action-Attribut des Formulars auf diese Variable, was aber völlig unnötig ist.
  6. Im HTML-Code muss das name-Attribut der Auswahlliste auf [] enden. Um auf alle Elemente zuzugreifen, verwenden Sie eine for-Schleife über HTTP_POST_VARS["name- Attribut"]. Verwenden Sie dabei numerische Indizes, also etwa HTTP_POST_VARS["name-Attribut"][0].
  7. Der zweite Parameter gibt an, in welchem Modus die Datei geöffnet werden soll. Im Modus "a" wird die Datei im Anhängen-Modus geöffnet, das heißt, neue Daten werden ans Ende der bestehenden Datei geschrieben, und der bisherige Dateiinhalt geht nicht verloren. Im Modus »w« wird der bestehende Dateiinhalt gelöscht bzw. durch die neuen Inhalte überschrieben. Um genau zu sein, gibt es sogar noch einen dritten Modus, "r", der zum Lesen aus einer Datei dient. Und für jeden dieser drei Modi gibt es noch eine Spezialvariante, das soll aber nicht mehr Thema des heutigen Tages sein.
  8. Nur der erste Parameter, der den Namen des Cookies angibt.

Antworten zu den Übungen

  1. Die aktuelle Stunde wird mit im von getdate zurückgegebenen Array über den Schlüssel "hours" ausgelesen, der Rest sind einfache Fallunterscheidungen:

Listing 4.26: uebung1.php

<?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&uuml;&szlig;ung</title>
</head>
<body bgcolor="white">
<h2><?=$hallo ?></h2>
</body>
</html>
  1. Der Trick besteht in der Regel darin, das value-Attribut der entsprechenden Formularelemente mit den Daten aus $HTTP_POST_VARS zu füllen. Ausnahmen sind Checkboxen, Radiobuttons und Auswahllisten, bei denen ein selected oder checked eingefügt werden muss. Im folgenden Listing werden die Formulardaten auf Vollständigkeit überprüft. . Im Ernstfall wird eine Warnmeldung ausgegeben und das mit den bereits eingegebenen Werten wieder angezeigt:

Listing 4.27: uebung2.php

<?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&uuml;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&auml;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&auml;llt mir am Besten<br />
<input type="submit" name="submit" value="Abschicken" />
</form>
</p>
</body>
</html>
  1. Der Wert des Cookies wird überprüft. Sofern dieser leer ist (oder nur aus spitzen öffnenden und schließenden Klammern besteht), wird das Formular ausgegeben, ansonsten die Hintergrundfarbe. Am Anfang des Skripts muss noch der Fall abgefangen werden, dass das Formular gerade verschickt worden ist, und der Cookie entsprechend gesetzt werden. Da der Cookie erst mit der Seite an den Client geschickt wird, kann in diesem Fall noch nicht direkt darauf zugegriffen werden; die Lieblingsfarbe muss also in einer Variablen zwischengespeichert werden

Listing 4.28: uebung3.php

<?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>

D.20 Tag 20: Datenbankanbindung

Antworten zum Quiz

  1. Beispielsweise CREATE TABLE, SELECT, INSERT, UPDATE, DELETE, DROP TABLE
  2. Ein Autowert ist ein numerischer Datentyp, der sich bei jedem neuen Datenbankeintrag um 1 erhöht.
  3. Die meisten Datenbanken bieten eine grafische Benutzeroberfläche (GUI) an. Alternativ können Sie auch CREATE TABLE und SQL verwenden.
  4. Wenn Sie ODBC verwenden, können Sie über den DSN-Eintrag die Datenbank ansprechen. Unter ASP können Sie bei Verwendung von Access auch direkt den Namen der Access-Datei angeben.

Antworten zu den Übungen

  1. Die naheliegendste Möglichkeit besteht darin, die Tabelle um ein Datumsfeld zu erweitern. Dieses Datumsfeld wird beim Schreiben in die Datenbank mit dem aktuellen Tagesdatum gefüllt. Das SQL-Statement zum Lesen aus der Datenbank lautet dann SELECT * FROM gaestebuch ORDER BY datum DESC. Alternativ dazu können Sie aber auch die Tabelle um einen Primärschlüssel erweitern, der gleichzeitig ein Autowert ist. Es ist nun klar, dass der zuletzt in die Datenbank geschriebene Wert die größte ID hat. Mit SELECT * FROM gaestebuch ORDER BY id DESC erhalten Sie die Daten in der korrekten Reihenfolge.

D.21 Tag 21: XML und XHTML

Antworten zum Quiz

  1. Ja.
  2. XML-Dokumente beginnen mit
  1. Man beendet das Tag mit der Zeichenfolge » />«.

Antworten zu den Übungen

  1. Die XHTML-Version der Webseite sollte ungefähr wie folgt aussehen: 
    <?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>

vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisFeedbackKapitelanfangnächstes Kapitel

1

© Markt+Technik Verlag, ein Imprint der Pearson Education Deutschland GmbH