Übungsmaterial

HTML

Datei tag1.html:

<html>
<head>
<title>Meine erste HTML-Seite in der BA</title>
</head>
<body bgcolor="lime" >
<h1>Meine erste HTML-Seite in der BA</h1>

<p align="center" >
Dies ist der wahnsinning interessante Text in meinem ersten Paragraphen.
Dies ist der wahnsinning interessante Text in meinem ersten Paragraphen.
Dies ist der <em>wahnsinning</em> interessante Text in meinem ersten Paragraphe\
n.
Dies ist der wahnsinning <strong>interessante</strong> Text in meinem ersten Pa\
ragraphen.
Dies ist der wahnsinning interessante Text in meinem ersten Paragraphen.
Dies ist der wahnsinning interessante <code>Text</code> in meinem ersten Paragr\
aphen.
Dies ist der <i>wahnsinning</i> interessante Text in meinem ersten Paragraphen.\

Dies ist der wahnsinning <b>interessante</b> Text in meinem <tt>ersten</tt> Par\
agraphen.
</p>

<p>
In diesem Satz ist ein Link auf die 
<a href="http://www.ba-mannheim.de/" target="ba" >BA</a>.
</p>
<p align="center">
<a href="http://www.ba-mannheim.de/" target="ba"
   ><img src="http://www.ba-mannheim.de/images/world3.gif" 
     width="30%" border="0" 
     ></a>
</p>

<h2>Weitere Beispiele</h2>
<ol>
<li value="1001" >Ein Punkt in der geordnten Liste.</li>
<li>Ein zweiter Punkt in der geordnten Liste.</li>
<li>Ein dritter Punkt in der geordnten Liste.</li>
</ol>

<!-- dies ist ein Kommentar -->
<ul type="circle"    yyy="disk"  xxx="square" >
<li>Ein Punkt in einer ungeordnten Liste.</li>
<li>Ein zweiter Punkt in der ungeordnten Liste.</li>
<li>Ein dritter Punkt in der ungeordnten Liste.</li>
</ul>


</body>
</html>

Datei form1.html:

<html>
<head>
<title>Meine zweite HTML-Seite in der BA</title>
</head>
<body bgcolor="aqua" >
<h1>Meine zweite HTML-Seite in der BA</h1>

<p>Hier ist der Link auf meine <a href="tag1.html" target="1te" >erste Seite</a\
>.
</p>

<form action="http://trumpf-2.rz.uni-mannheim.de/~kredel/ba.phtml" >

<p>
Vorname: <input type="text" name="vorname" size="40"  >
</p>
<p>
Nachname: <input type="text" name="nachname" size="40"  >
</p>
<p>
<textarea rows="2" cols="50" name="comm" >F%/1€Œiso8859-15ür Ihre Kommentare</textarea>
</p>

<p>
Ihr lieblings Editor: 
<input type="radio" value="ns" name="edit" checked >Netscape
<input type="radio" valie="ie" name="edit" >MS Explorer
</p>
<p>
Ihr lieblings Bier: 
<input type="checkbox" value="eichbaum" name="bier" >Eichbaum
<input type="checkbox" value="becks" name="bier" >Becks
<input type="checkbox" value="flensb" name="bier" checked>Flensburger
</p>
<p>
Ihr lieblings Tier: 
<select name="tier" >
<option value="cat" >Katze</option>
<option value="dog" selected >Hund</option>
<option value="bird" >Vogel</option>
</select>
</p>

<p>
<input type="reset" value="Oops" >
<input type="submit" value="Ab die Post!" >
</p>

</form>

</body>
</html>

Datei tabelle1.html:

<html>
<head>
<title>Meine dritte HTML-Seite in der BA</title>
</head>
<body bgcolor="yellow" >
<h1>Meine dritte HTML-Seite in der BA</h1>

<p>Hier ist der Link auf meine <a href="tag1.html" target="1te" >erste Seite</a\
>
<a href="from1.html" target="2te" >zweite Seite</a>.
</p>

<form action="http://trumpf-2.rz.uni-mannheim.de/~kredel/ba.phtml" >

<table border="0" cellspacing="10" cellpadding="10">
<tr>
<td>Vorname:</td> 
<td><input type="text" name="vorname" size="40"  ></td>
</tr>
<tr>
<td>Nachname:</td> 
<td><input type="text" name="nachname" size="40"  ></td>
</tr>
<tr>
<td>Ihr lieblings Editor: </td>
<td><input type="radio" value="ns" name="edit" checked >Netscape
<input type="radio" valie="ie" name="edit" >MS Explorer
</td>
</tr>
<tr>
<td>Ihr lieblings Bier:</td> 
<td>
<input type="checkbox" value="eichbaum" name="bier" >Eichbaum
<input type="checkbox" value="becks" name="bier" >Becks
<input type="checkbox" value="flensb" name="bier" checked>Flensburger
</td>
</tr>
<tr>
<td>Ihr lieblings Tier:</td> 
<td>
<select name="tier" >
<option value="cat" >Katze</option>
<option value="dog" selected >Hund</option>
<option value="bird" >Vogel</option>
</select>
</td>
</tr>
</table>

<p>
<input type="reset" value="Oops" >
<input type="submit" value="Ab die Post!" >
</p>

</form>

</body>
</html>

Datei frame.html:

<html>
<head>
<title>Seite mit Frames</title>
</head>
<frameset rows="30,*" >

<frame src="verz.html" name="verzeich" frameborder="0" scroll="no" >

<frameset cols="40,*" >
  <frame src="verz.html" name="verzeich" >
  <frame src="tag1.html" name="inhalt" >
</frameset>

</frameset>
</html>

Datei verz.html:

<html>
<head>
</head>
<body bgcolor="white">
<p>
Seiten von heute: 
<a href="tag1.html" target="inhalt" >eins</a>, 
<a href="from1.html" target="inhalt" >zwei</a>, 
<a href="tabelle1.html" target="inhalt" >drei</a> 
</p>
</body>
</html>

XHTML

Datei tag1.html:

<html>
<head>
<title>Meine erste HTML-Seite in der BA</title>
</head>
<body bgcolor="lime" >
<h1>Meine erste HTML-Seite in der BA</h1>

<p align="center" >
Dies ist der wahnsinning interessante Text in meinem ersten Paragraphen.
Dies ist der wahnsinning interessante Text in meinem ersten Paragraphen.
Dies ist der <em>wahnsinning</em> interessante Text in meinem ersten Paragraphen.
Dies ist der wahnsinning <strong>interessante</strong> Text in meinem ersten Paragraphen.
Dies ist der wahnsinning interessante Text in meinem ersten Paragraphen.
Dies ist der wahnsinning interessante <code>Text</code> in meinem ersten Paragraphen.
Dies ist der <i>wahnsinning</i> interessante Text in meinem ersten Paragraphen.
Dies ist der wahnsinning <b>interessante</b> Text in meinem <tt>ersten</tt> Paragraphen.
</p>

<p>
In diesem Satz ist ein Link auf die 
<a href="http://www.ba-mannheim.de/" target="ba" >BA</a>.
</p>
<p align="center">
<a href="http://www.ba-mannheim.de/" target="ba"
   ><img src="http://www.ba-mannheim.de/images/world3.gif" 
     width="30%" border="0" alt="Weltkugel"
     /></a>
</p>

<h2>Weitere Beispiele</h2>
<ol>
<li value="1001" >Ein Punkt in der geordnten Liste.</li>
<li>Ein zweiter Punkt in der geordnten Liste.</li>
<li>Ein dritter Punkt in der geordnten Liste.</li>
</ol>

<!-- dies ist ein Kommentar -->
<ul type="circle"  >
<li>Ein Punkt in einer ungeordnten Liste.</li>
<li>Ein zweiter Punkt in der ungeordnten Liste.</li>
<li>Ein dritter Punkt in der ungeordnten Liste.</li>
</ul>

</body>
</html>

Datei form1.html:

<html>
<head>
<title>Meine zweite HTML-Seite in der BA</title>
</head>
<body bgcolor="aqua" >
<h1>Meine zweite HTML-Seite in der BA</h1>

<p>Hier ist der Link auf meine <a href="tag1.html" target="te" >erste Seite</a>.
</p>

<form action="http://trumpf-2.rz.uni-mannheim.de/~kredel/ba.phtml" >

<p>
Vorname: <input type="text" name="vorname" size="40"  />
</p>
<p>
Nachname: <input type="text" name="nachname" size="40"  />
</p>
<p>
<textarea rows="2" cols="50" name="comm" >Für Ihre Kommentare</textarea>
</p>

<p>
Ihr lieblings Editor: 
<input type="radio" value="ns" name="edit" checked />Netscape
<input type="radio" value="ie" name="edit" />MS Explorer
</p>
<p>
Ihr lieblings Bier: 
<input type="checkbox" value="eichbaum" name="bier" />Eichbaum
<input type="checkbox" value="becks" name="bier" />Becks
<input type="checkbox" value="flensb" name="bier" checked />Flensburger
</p>
<p>
Ihr lieblings Tier: 
<select name="tier" >
<option value="cat" >Katze</option>
<option value="dog" selected >Hund</option>
<option value="bird" >Vogel</option>
</select>
</p>

<p>
<input type="reset" value="Oops" />
<input type="submit" value="Ab die Post!" />
</p>

</form>

</body>
</html>

CSS

Datei mitstil.html:

<html>
<head>
<title>Erste Datei mit CSS</title>
<style type="text/css" >
          body { font-family: monospace;
                 background-color: lime; 
               }
          em { color: red; 
               background-color: white;
             }
          x { color: yellow; 
            }
          p em { font-style: normal;
                 color: yellow; 
                 background-color: black;
               }
</style>
</head>
<body>
<h1>Erste Datei mit CSS</h1>
<p>
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des <em>ersten</em> Paragraphen.
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des ersten Paragraphen.
</p>

<pre>
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des <em>ersten</em> Paragraphen.
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des ersten Paragraphen.
</pre>

<x>Ein erfundenes Tag</x>

</body>
</html>

Datei mitextstil.html:

<html>
<head>
<title>Erste Datei mit CSS</title>
<style type="text/css">
  body { background-color: aqua !important; }
</style>
<link rel="stylesheet" type="text/css" href="stil.css" />

</head>
<body>
<h1>Erste Datei mit CSS</h1>
<p>
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des <em>ersten</em> Paragraphen.
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des 
<span style="background-color: green;" >ersten Paragraphen.</span>
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des ersten Paragraphen.
</p>

<pre>
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des <em>ersten</em> Paragraphen.
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des ersten Paragraphen.
Hier steht der Text des ersten Paragraphen.
</pre>

<x>Ein erfundenes Tag</x>

</body>
</html>

Datei stil.css:

          body { font-family: monospace;
                 line-height: 200%;
                 background-color: yellow; 
               }
          em { color: red; 
               background-color: white;
             }
          x { color: yellow; 
            }
          p em { font-style: normal;
                 color: yellow; 
                 background-color: black;
               }

JavaScript, DOM

Datei mitjs.html:

<html>
<head>
<title>Eine Seite mit JavaScripten</title>
</head>
<body bgcolor="lime" >
<h2>Eine Seite mit JavaScripten</h2>
<script type="text/javascript" language="JavaScript" >
document.write(  "<p>Farbe des Hintergrunds " +
                          document.bgColor +
                          " </p>" );
document.write(  "<p>Letzte Änderung: " +
                          document.lastModified +
                          " </p>" );
//document. bgColor = prompt( "Bitte eine Farbe wählen "  );
for (var i = 0; i < 2; i++) {
   document.write("<p>Du sollst deine Strafarbeit " + i
      + " nicht mit JavaScript schreiben lassen.</p>"); 
}
function pruefung(obj) {
   if (obj.value == "xxx") { return true;}
     else { alert('Bitte richtigen Wert eingeben'); return false; }
}
</script>

<p align="center">
<a href=""
     onMouseOver="document.images['bild'].src='obj-baum-mod-s.jpg';"
     onMouseOut="document.images['bild'].src='obj-baum-s.jpg';"
    ><img name="bild" src="obj-baum-s.jpg" ></a> 
</p>
<form name="formular" action=""
  onSubmit="return pruefung(this.eingabe);" >
<input type="button" value="Farbwahl" 
  onClick="document.bgColor=prompt('Bitte eine Farbe wählen','white');" >
<input type="text" 
  onChange="alert('Eingabe ist = ' + eval(this.value) );" >
<br>
<input type="text" name="eingabe" >
<input type="submit" value="abschicken" >
</form>
</body>
</html>

XML

Datei studenten.dtd:

<?xml version="1.0" encoding="iso-8859-1" ?>

<!ELEMENT studenten (student*) >
<!ELEMENT student   (familie, vorname+, fach+, eigenschaften?) >
<!ATTLIST  student  mr ID #REQUIRED >
<!ELEMENT familie   (#PCDATA) >
<!ELEMENT vorname   (#PCDATA) >
<!ELEMENT fach      (#PCDATA) >
<!ELEMENT eigenschaften (#PCDATA) >
<!ATTLIST  fach      type (spass|ernst) #REQUIRED >

Datei studenten.xml:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE studenten SYSTEM "studenten.dtd" >
<studenten >

 <student mr="n4711" >
 <familie>Dall</familie>
 <vorname>Karl</vorname><vorname>Friedrich</vorname>
 <fach type="ernst">Comedy</fach>
 <eigenschaften>Gute Nerven</eigenschaften>
 </student>

 <student mr="n4712" >
 <familie>Mittermaier</familie>
 <vorname>Michael</vorname>
 <fach type="spass">Comedy</fach>
 </student>

</studenten>

Datei valid.bat:

echo off
set VALIDPATH=v:\web\xercesImpl.jar;v:\web\xercesSamples.jar;v:\web\xmlParserAPIs.jar
set CLASSPATH=%VALIDPATH%;%CLASSPATH%
rem echo "CLASSPATH:" %CLASSPATH%
java sax.Counter -v %1

XSLT

Datei lieder.xml:

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE cds SYSTEM "cds.xml" >

<cds>
<cd type="music" lager="lager001" >
<interpret>Village People</interpret>
<albumname>keine Ahnung die erste</albumname>
<liederanzahl>11</liederanzahl>
<releasedate>2000-01-01</releasedate>
</cd>
<cd lager="lager002" >
<interpret>Village People</interpret>
<albumname>immer noch keine Ahnung</albumname>
<releasedate>November 2002</releasedate>
</cd>
<cd lager="lager003" >
<albumname>keine Ahnung die zweite</albumname>
<interpret>Madonna</interpret>
</cd>

</cds>

Datei cds.xml:

<?xml version="1.0" encoding="iso-8859-1" ?>

<!ELEMENT cds (cd*) >
<!ELEMENT cd  ( ((interpret,albumname)
                |(albumname,interpret)),
               liederanzahl?,releasedate?)  >

<!ATTLIST cd type (data|music) "music" 
             lager ID #REQUIRED         >

<!ELEMENT interpret    (#PCDATA) >
<!ELEMENT albumname    (#PCDATA) >
<!ELEMENT liederanzahl (#PCDATA) >
<!ELEMENT releasedate  (#PCDATA) >

Datei transform.bat:

@echo off
set VALIDPATH=w:\kredel\xalan.jar;w:\kredel\xml-apis.jar;w:\kredel\xercesImpl.jar
set CLASSPATH=%VALIDPATH%
java org.apache.xalan.xslt.Process -in %1 -xsl %2 -out %3

Datei cd2html.xsl:

<?xml version="1.0" encoding="iso-8859-1" ?>

<xsl:stylesheet
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    version="1.0" >

<xsl:template match="cds" >
  <html>
  <head>
  <title>CD-Sammlung</title>
  </head>
  <body bgcolor="yellow" >
     <h1>CD-Sammlung</h1>
     <xsl:apply-templates select="cd" />
     <h1>Index der Alben</h1>
     <xsl:apply-templates select="*/albumname" />
  </body>
  </html>
</xsl:template>

<xsl:template match="cd" >
  <h2>
  <a>
    <xsl:attribute name="name"
      ><xsl:value-of select="@lager"
         /></xsl:attribute>
  </a>
  <xsl:apply-templates select="interpret" /> 
  </h2>
  <xsl:apply-templates select="albumname" />
  <xsl:apply-templates select="releasedate" />
  <p>
  Type: <xsl:value-of select="@type" /> <br />
  Lagerplatz: <xsl:value-of select="@lager" />
  </p>
</xsl:template>

<xsl:template match="albumname" >
  <p style="background-color: lime;" >
  <b>Albumname: </b>
  <a>
  <xsl:attribute name="href"
   >#<xsl:value-of select="../@lager" 
      /></xsl:attribute>
  <xsl:value-of select="." />
  </a>
  </p>  
</xsl:template>

<xsl:template match="releasedate" >
  <p>
  <i>Releasedate: </i>
  <xsl:value-of select="." />
  </p>
</xsl:template>

</xsl:stylesheet>

Datei album.html:

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CD-Sammlung</title>
</head>
<body bgcolor="yellow">
<h1>CD-Sammlung</h1>
<h2>
<a name="lager001"></a>Village People</h2>
<p style="background-color: lime;">
<b>Albumname: </b><a href="#lager001">keine Ahnung die erste</a>
</p>
<p>
<i>Releasedate: </i>2000-01-01</p>
<p>
  Type: music<br>
  Lagerplatz: lager001</p>
<h2>
<a name="lager002"></a>Village People</h2>
<p style="background-color: lime;">
<b>Albumname: </b><a href="#lager002">immer noch keine Ahnung</a>
</p>
<p>
<i>Releasedate: </i>November 2002</p>
<p>
  Type: music<br>
  Lagerplatz: lager002</p>
<h2>
<a name="lager003"></a>Madonna</h2>
<p style="background-color: lime;">
<b>Albumname: </b><a href="#lager003">keine Ahnung die zweite</a>
</p>
<p>
  Type: music<br>
  Lagerplatz: lager003</p>
<h1>Index der Alben</h1>
<p style="background-color: lime;">
<b>Albumname: </b><a href="#lager001">keine Ahnung die erste</a>
</p>
<p style="background-color: lime;">
<b>Albumname: </b><a href="#lager002">immer noch keine Ahnung</a>
</p>
<p style="background-color: lime;">
<b>Albumname: </b><a href="#lager003">keine Ahnung die zweite</a>
</p>
</body>
</html>

PHP

Datei versuch.php:

<html>
<head>
<title>Hallo aus PHP</title>
</head>
<body bgcolor="lime" >
<p>
Hallo !
</p>
<form action="auswertung.php" method="post">
<p>
Wie ist dein Name ?
<input type="text" name="dername" />
</p>
<p>
Wie ist dein Passwort ?
<input type="password" name="daspasswort" />
</p>
<p><input type="submit" value="los!" /></p>
</form>

<?php /*php-no-info(); */
 $a = 23 * 44;
 print "\$a = $a <br />";

 print "weiter1 = " . ( 77 . 99 ) . "<br />";
 print "weiter2 = " . ( 77 + 99 ) . "<br />";
 print "weiter3 = " . ( "77" + "99" ) . "<br />";

 for ( $i = 0; $i < 1; $i++ ) {
     print "<p>Das Quadrat von $i ist " . $i*$i ."</p>";
     print "<p>Ich soll meine Strafarbeit nicht mit PHP schreiben. </p>";
 }

?>

</body>
</html>

Datei auswertung.php:

<?php
$filename=$SCRIPT_FILENAME;
$counter_start="1";
function counter() {
        global $filename, $counter_start;
        $counter_dir="/tmp/";
        $counter_db=$counter_dir . "zaehler.dbm";
        if (file_exists("$counter_db")) {
           $db=dba_open($counter_db,"w","gdbm");
           if ( dba_exists($filename,$db) ) {
              $cnt = dba_fetch($filename,$db);
              if ($counter_start=="1") { $cnt++; }
              else { $cnt=$counter_start; }
              dba_replace($filename,$cnt,$db);
           }
           else {
               $cnt=$counter_start;
               dba_insert($filename,$cnt,$db);
           }
           dba_close($db);
           return "$cnt";
        }
        else {
           echo "Attempt to create file: " . $counter_db;
           $cnt=$counter_start;
           $db=dba_open($counter_db,"n","gdbm");
           dba_insert($filename,$cnt,$db);
           dba_close($db);
           return "$cnt";
        }
}
?>

<html>
<head>
<title>Auswertung mit PHP</title>
</head>
<body bgcolor="lime" >
<h1>Auswertung mit PHP</h1>
<p>
<?php
  print "Hallo $dername !";
?>
</p>
<?php if ( $daspasswort == "geheim" ): ?>
<p>Diese Information ist geheim.</p>
<?php endif; ?>

<p>
Diese Seite wurde
<?php print counter(); ?>
 mal aufgerufen.
</p>
</body>
</html>

MySQL

Datei mysql.php:

<?php
$filename=$SCRIPT_FILENAME;
$counter_start="1";
function counter() {
   global $filename;
   $cnt = 1;
   $result = dbquery("SELECT count FROM zaehler WHERE file='$filename'");
   $num = mysql_num_rows($result);
   if ($num > 0) {
      $cnt = mysql_result($result, 0, 'count');
      if ($counter_start > 1) { $cnt = $counter_start; }
      $cnt++;
      $result=dbquery("UPDATE zaehler SET count='$cnt' WHERE file='$filename'");
   }
   else {
      $result=dbquery("INSERT INTO zaehler (file,count) VALUES ('$filename','$cnt')");
   }
   return $cnt;
}

function dbquery($sql) {
     mysql_connect('localhost','user','passwort');
     mysql_select_db('test_kurs');
     $result=@mysql_query($sql);
     if (mysql_error()) {
        print "<b>MySQL ERROR:</b> " . mysql_error() . "<br>\n";
        $result = "";
     }
     mysql_close();
     return $result;
}
?>
<html>
<head>
<title>Eine Seite mit MySQL Counter</title>
</head>
<body bgcolor="aqua">
<h1>Hallo von der Seite mit MySQL Counter</h1>
<?php
  print "<h3>MySQL Counter: </h3>\n";
  print "<h3>" . counter() . " Zugriffe</h3>\n";
?>
</body>
</html>

© Universität Mannheim, Rechenzentrum, 1998-2002.

Heinz Kredel
Last modified: Fri Nov 29 17:31:47 CET 2002