Übungsmaterial

HTML

<html>
<head>
<title>Meine erste Web-Seite</title>
</head>
<body bgcolor="yellow" >

<h1>Meine erste Web-Seite</h1>

<p>
Dies ist der <em>erste</em> Satz in meiner Web-Seite.
Dies ist der <b>zweite</b> Satz in meiner Web-Seite.
</p>

<p>
Jetzt kommt ein
<a href="http://www.yahoo.de/"
   target="yahoo"
   >Link</a>.
</p>
<p align="center" >

<img src="http://eur.a1.yimg.com/eur.yimg.com/a/de/compaq/compaq9530.gif" >
<br>
<a href="http://www.compaq.com/"
   ><img src="compaq9530.gif" border="0"></a>
</p>

<ul type="square">
<li>der erste Text</li>
<li>der zweite Text</li>
<li value="7">der zweite Text</li>
<li>der zweite Text</li>
<li>der zweite Text</li>
<li>der zweite Text</li>
</ul>

</body>
</html>

<html>
<head>
<title>Meine erstes Formular</title>
</head>
<body bgcolor="lime" >
<h1>Meine erstes Formular</h1>

<form yyy="mailto:webmaster@gerritotte.de"
      yyymethod="post"
      action="http://trumpf-2.rz.uni-mannheim.de/cgi-bin/ex2.cgi"
      >
<p>
Vorname:
<input type="text" name="vorname"
       size="30" value="Bitte Vorname eingeben."
       >
</p>
<p>
Nachname:
<input type="text" name="nachname"
       size="30" value="Bitte Nachname eingeben."
       >
</p>
<input type="hidden" name="korb-nummer"
       value="warenkorb-nummer" >
<p>
Hobby:
<input type="checkbox" name="c1" value="r">Reiten
<input type="checkbox" name="c2" value="s">Schwimmen
</p>
<p>
Essen:
<select name="s1" size="1" multiple >
<option value="s">Schnitzel</option>
<option value="b">Bratwurst</option>
<option value="f">Fisch</option>
<option value="g">Gemüse</option>
</select>
</p>

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

</body>
</html>

<html>
<head>
<title>Mein erstes Formular</title>
</head>
<body bgcolor="lime" >
<h1>Mein erstes Formular</h1>

<form action="mailto:kredel@rz.uni-mannheim.de"
      method="post"
      xxx="http://trumpf-2.rz.uni-mannheim.de/cgi-bin/ex2.cgi"
      >
<table border="0" cellspacing="5" cellpadding="10">
<tr>
<td><b>Vorname:</b></td>
<td><input type="text" name="vorname"
       size="30" value="Bitte Vorname eingeben."
       ></td>
</tr>
<tr>
<td><b>Nachname:</b></td>
<td><input type="text" name="nachname"
       size="30" value="Bitte Nachname eingeben."
       ></td>
</tr>
<tr>
<td><b>Passwort:</b></td>
<td><input type="password" name="geheim"
       size="30"
       ></td>
</tr>
<input type="hidden" name="korb-nummer"
       value="warenkorb-nummer" >
<tr>
<td><b>Hobby:</b></td>
<td>
<input type="checkbox" name="c1" value="r">Reiten
<input type="checkbox" name="c2" value="s">Schwimmen
</td>
</tr>
<tr>
<td><b>Essen:</b></td>
<td>
<select name="s1" size="1" multiple >
<option value="s">Schnitzel</option>
<option value="b">Bratwurst</option>
<option value="f">Fisch</option>
<option value="g">Gemüse</option>
</select>
</td>
</tr>

<tr>
<td><input type="reset" value="oops" ></td>
<td><input type="submit" value="Ab die Post !" ></td>
</tr>
</table>
</form>

XHTML





CSS



seite1css.html:


<html>
<head>
<title>Meine erste Web-Seite mit CSS</title>
<style type="text/css" >
body { font-family: monospace;
       font-size: 24pt;
       background: yellow;  }
b { color: blue;
    font-weight: normal; }
em { font-style: normal;
     color: red; }
em b { background: white;
       color: maroon;
       font-weight: bold;
     }
h1 { align: center;
     color: navy; }
h2 { align: center;
     background: aqua; }
p.wichtig { align: center; }

a:link { color: green;
         text-decoration: none; }
a:visited { color: silver; }

a.ueb img.ueb { color: red;
            border:none; }

</style>
</head>
<body >

<h1>Meine erste Web-Seite mit CSS</h1>

<p>
Dies ist der <em>erste</em> Satz in meiner Web-Seite.
Dies ist der <b>zweite</b> Satz in meiner Web-Seite.
Dies ist eine <em>Satz mit <b>zwei</b>
Hervorhebungen.</em>
</p>

<p>
Jetzt kommt ein
<a href="http://www.yahoo.de/"
   target="yahoo"
   >Link</a>.
</p>
<p class="wichtig" >
<img src="http://eur.a1.yimg.com/eur.yimg.com/a/de/compaq/compaq9530.gif" >
<br>
<a class="ueb" href="http://www.compaq.com/"
   ><img class="ueb" src="compaq9530.gif" ></a>
</p>

<h2>Eine h2-Überschrift</h2>

<ul type="square">
<li>der erste Text</li>
<li>der zweite Text</li>
<li value="7">der zweite Text</li>
<li>der zweite Text</li>
<li>der zweite Text</li>
<li>der zweite Text</li>
</ul>


</body>
</html>




seite2css.html:


<html>
<head>
<title>Meine erste Web-Seite mit CSS</title>
<link rel="stylesheet"
      type="text/css"
      href="seite2.css" >
<style type="text/css" >
body { background: white; }
</style>
</head>
<body >

<h1>Meine erste Web-Seite mit CSS</h1>

<p>
Dies ist der <em>erste</em> Satz in meiner Web-Seite.
Dies ist der <b>zweite</b> Satz in meiner Web-Seite.
Dies ist eine <em>Satz mit <b>zwei</b>
Hervorhebungen.</em>
</p>

<p>
Jetzt kommt ein
<a href="http://www.yahoo.de/"
   target="yahoo"
   >Link</a>.
</p>
<p class="wichtig" >
<img src="http://eur.a1.yimg.com/eur.yimg.com/a/de/compaq/compaq9530.gif" >
<br>
<a class="ueb" href="http://www.compaq.com/"
   ><img class="ueb" src="compaq9530.gif" ></a>
</p>

<h2>Eine h2-Überschrift</h2>

<ul type="square">
<li>der erste Text</li>
<li>der zweite Text</li>
<li value="7">der zweite Text</li>
<li>der zweite Text</li>
<li>der zweite Text</li>
<li>der zweite Text</li>
</ul>


</body>
</html>




seite2.css:


body { font-family: monospace;
       font-size: 24pt;
       background: yellow !important;  }
b { color: blue;
    font-weight: normal; }
em { font-style: normal;
     color: red; }
em b { background: white;
       color: maroon;
       font-weight: bold;
     }
h1 { align: center;
     color: navy; }
h2 { align: center;
     background: aqua; }
p.wichtig { align: center; }

a:link { color: green;
         text-decoration: none; }
a:visited { color: silver; }

a:link.ueb img.ueb { color: red;
            border:none; }





JavaScript, DOM



mitjs.html:


<html>
<head>
<title>Seite mit JavaScript</title>
<style txpe="text/css">
body { background: blue;
       color: yellow; }
p.zentriert { align: center; }
</style>
</head>
<body>
<h1>Seite mit JavaScript</h1>
<p class="zentriert">
<a href="http://www.uni-mannheim.de/"
   onmouseover="document.picture.src='boris2.jpg';"
   onmouseout="document.picture.src='boris1.jpeg'; "
   ><img name="picture"
         src="boris1.jpeg"></a>
</p>
<script type="text/javascript" language="JavaScript">
function abc(x) {
     document.formular.anzeige.value="Eingegeben: " + x;
     document.bgColor=x;
}
function checkit(x) {
    if (x.value.length > 5) {
       alert("Eingabe zu lang: "+x);
    }
}
</script>
<form name="formular" >
<p class="zentriert">
<input type="button" value="Test"
       onclick="abc(prompt('Bitte was eingeben'));"
       >
<input name="anzeige" type="text" size="20" >
<input type="button" value="Check"
       onclick="checkit(document.formular.anzeige);"
       >
</p>
</form>
</body>
</html>





CGI und Perl




tuwas1.pl:


#!/usr/bin/perl
print "Hallo aus Perl ! \n";

print 33 + 77;
print "\n";
print 33 . 77;
print "\n";

print "33" + "a77x99";
print "\n";
print "33" / "a77x99";
print "\n";
print "33" . "77x99";
print "\n";

print "\n\n";

#print "Wie ist dein Name ? ";
#$n = <STDIN>;
#chop($n);
#print "Hallo $n!\n";





tuwas2.pl:


#!/usr/bin/perl
print "Hallo aus Perl ! \n";

$n = "Heinz Kredel";

@x = (1, 2, 3, 4, 5);
@y = @x;

$y[1] = 0;

print "x = @x";
print "\n";

print "y = @y";
print "\n";


print q/'Hallo $n!\n'/;
print "\n";

print qq/'Hallo $n!\n'/;
print "\n";

print qx+find . -name httpd.conf -print+;
print "\n";




tuwas3.pl:


#!/usr/bin/perl
print "Hallo aus Perl ! \n";

$n = "Web-Technologien";
print "n = $n";
print "\n";

if ( $n =~ m/Web/ ) { $a = "ok"; }

print "a = $a";
print "\n";

if ( $n =~ s/Web/WWW/ ) { $b = "ok"; }

print "n = $n";
print "\n";
print "b = $b";
print "\n";

if ( $n =~ tr/A-Z/a-z/ ) { $b = "ok"; }

print "n = $n";
print "\n";
print "b = $b";
print "\n";




tuwas.pl:


#!/usr/bin/perl
print "Hallo aus Perl ! \n";

#open( WEBTECH, "ls -l |");
open( WEBTECH, "<tuwas.pl");

#$n = <WEBTECH>;
$n = <WEBTECH>;

print "n = $n";
print "\n";

close( WEBTECH );





PHP



versuch.phtml:


<?php
$filename=$SCRIPT_FILENAME;
function modified($lang) {
        global $filename;
        $lm=date("d m y h:i:s",filectime($filename));
        if ($lang=="de") {
           return "Ge&auml;ndert am $lm";
        } else {
           return "Last modified: $lm";
        }
}

$filename=$SCRIPT_FILENAME;
$counter_start="1";
function counter() {
        global $filename, $counter_start;
        $counter_dir="/tmp/";
        $counter_db=$counter_dir . "heinz.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>Versuche mit PHP</title>
</head>
<body bgcolor=
<?php 
   if ( $w == 1 ) {
      print '"white"';
   } else {
      print '"yellow"';
   }
?>
>
<h1>Versuche mit PHP</h1>

<?php 

  /* $counter_start="9999"; */
  print "<h3>Datei: $SCRIPT_FILENAME.</h3>"; 
  print "<h3>" . counter(). " Zugriffe,";
  print " " . modified("de") . "</h3>"; 

?>

<?php 
    function tuwas($a) {
        return $a * $a;
    }

   for ($i = 1; $i < 5; $i++) {
       print "<h3>i = " . tuwas($i) . " </h3>\n";
   }
?>

<h2>
<?php 
   print "Hallo aus PHP <br></br>\n";
   print "HTTP_USER_AGENT: $HTTP_USER_AGENT <br />\n";
   print "myvar: $myvar <br />\n";
   print "movar: $movar <br />\n";
?>
</h2>

<?php
   if ( substr($HTTP_USER_AGENT,0,2) == "Mo" ) :
?>
<p>Hallo für Netscape</p>
<?php
  endif;
?>
<?php
   if ( substr($HTTP_USER_AGENT,0,2) == "Mi" ) :
?>
<p>Hallo für Microsoft</p>
<?php
  endif;
?>

</body>
</html>





MySQL



<?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','$c\
nt')");
   }
   return $cnt;
}

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





XML, XSLT






XML



valid (alte Xerces Version):


#!/bin/sh
# echo "CLASSPATH:" $CLASSPATH 
VALIDPATH="/home/kredel/java/lib/xerces.jar:/home/kredel/java/lib/xercesSamples.jar"
export CLASSPATH="$VALIDPATH:$CLASSPATH"
# echo "CLASSPATH:" $CLASSPATH
/opt/jdk1.2.2/bin/java sax.SAXCount -v $* 




valid (neue Xerces Version):


#!/bin/sh
# echo "CLASSPATH:" $CLASSPATH 
VALIDPATH="/home/kredel/java/lib/xmlParserAPIs.jar:/home/kredel/java/lib/xercesImpl.jar:/home/kredel/java/lib/xercesSamples.jar"
export CLASSPATH="$VALIDPATH:$CLASSPATH"
# echo "CLASSPATH:" $CLASSPATH
/usr/lib/jdk1.3/bin/java sax.Counter -v $* 
#/usr/lib/jdk1.1.8/bin/java sax.Counter -v $* 




valid.bat (alte Xerces Version):


set VALIDPATH=C:\Programme\xerces\xerces.jar;C:\Programme\xerces\xercesSamples.jar 
set CLASSPATH=%VALIDPATH%;%CLASSPATH% 
echo "CLASSPATH:" %CLASSPATH% 
stderr.exe C:\Programme\JavaSoft\JRE\1.2\bin\java sax.SAXCount -v %1 




Das Programm stderr.exe müssen Sie sich 
noch im Internet suchen.




valid.bat (neue Xerces Version):


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





lieder.dtd:


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

<!ELEMENT lieder (lied*) >

<!ELEMENT lied (artist,titel,jahr?)  >
<!ATTLIST lied datei ID #IMPLIED >

<!ELEMENT artist (#PCDATA) >
<!ATTLIST artist art CDATA #REQUIRED >

<!ELEMENT titel (#PCDATA|em)* >
<!ELEMENT jahr (#PCDATA) >

<!ELEMENT em (#PCDATA) >

<!ENTITY mj "Michael Jackson" >





lieder.xml:


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

<lieder>

<lied datei="mj-unb.mp3, mj-unb.mp3" >
<artist art="Pop" >&mj;</artist>
<titel>Unbreakable</titel>
<jahr>2002</jahr>
</lied>

<lied datei="km-cg.mp3" >
<artist art="Pop" >Kylie Minogue</artist>
<titel>Cant get <em>dlkjldkjlk</em></titel>
<jahr>2001</jahr>
</lied>

</lieder>






transform:


#!/bin/sh
# echo "CLASSPATH:" $CLASSPATH 
VALIDPATH="/home/kredel/java/lib/xalan.jar:/home/kredel/java/lib/xalansamples.jar:/home/kredel/java/lib/xerces.jar"
export CLASSPATH="$VALIDPATH:$CLASSPATH"
# echo "CLASSPATH:" $CLASSPATH
if [ $# -eq 2 ]
then
/usr/lib/jdk1.3/bin/java org.apache.xalan.xslt.Process -DIAG -in $1 -xsl $2
elif [ $# -eq 3 ]
then
/usr/lib/jdk1.3/bin/java org.apache.xalan.xslt.Process -DIAG -in $1 -xsl $2 -out $3 
else
/usr/lib/jdk1.3/bin/java org.apache.xalan.xslt.Process $*
fi




transform.bat:


set VALIDPATH=u:\xerces\xalan.jar;u:\xerces\xalansamples.jar;u:\xerces\xerces.jar
set CLASSPATH=%VALIDPATH%;%CLASSPATH%
echo "CLASSPATH:" %CLASSPATH%
java org.apache.xalan.xslt.Process -in %1 -xsl %2 -out %3





lied2text.xsl:


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

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  xmlns:html="http://www.w3.org/TR/REC-html40/"
  version="1.0" >

<xsl:output encoding="ISO-8859-1" method="text" />

  <xsl:template match="book">
    <xsl:apply-templates/>
  </xsl:template>

</xsl:stylesheet>





lied2html.xsl:


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

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  xmlns:html="http://www.w3.org/TR/REC-html40/"
  version="1.0" >

<xsl:output encoding="ISO-8859-1" method="html" />

<xsl:template match="lieder">
  <html>  
  <head>  
  <title>Liederverzeichnis</title>
  </head>  
  <body>  
  <h1>Liederverzeichnis</h1>  
  <ul>
   <xsl:apply-templates select="lied[ position()=2 ]" />
   <xsl:apply-templates select="lied[ @datei = 'mj-unb.mp3' ]" />
  </ul>
  </body>  
  </html>  
</xsl:template>

<xsl:template match="lied">
  <li>
  <xsl:number value="position()" count="lied" /><xsl:text>. </xsl:text> 
  <b>
   <xsl:apply-templates select="titel" />:
  </b>
  <em>
   <xsl:apply-templates select="artist" />
  </em>
  ( <xsl:apply-templates select="jahr" />, 
    <xsl:value-of select="@datei" /> 
  )
  </li>
</xsl:template>

<xsl:template match="artist">
   <xsl:apply-templates />
   [ <xsl:value-of select="@art" /> ]   
</xsl:template>

<xsl:template match="lied2">
   <xsl:apply-templates />
   [ <xsl:value-of select="@art" /> ]   
</xsl:template>

</xsl:stylesheet>





lieder.html:


<html:html xmlns:html="http://www.w3.org/TR/REC-html40/">
<html:head>
<html:title>Liederverzeichnis</html:title>
</html:head>
<html:body>
<html:h1>Liederverzeichnis</html:h1>
<html:ol>
<html:li>
<html:b>Unbreakable:
  </html:b>
<html:em>Michael Jackson
   [ 
    Pop 
   ]   
</html:em>
  ( 2002, 
    mj-unb.mp3 
  )
  </html:li>
<html:li>
<html:b>Cant get dlkjldkjlk:
  </html:b>
<html:em>Kylie Minogue
   [ 
    Pop 
   ]   
</html:em>
  ( 2001, 
    km-cg.mp3 
  )
  </html:li>
<html:li>
<html:b>Cant get 1dlkjldkjlk:
  </html:b>
<html:em>Kylie Minogue
   [ 
    Pop 
   ]   
</html:em>
  ( 2001, 
    km-cg1.mp3 
  )
  </html:li>
<html:li>
<html:b>Cant get 2dlkjldkjlk:
  </html:b>
<html:em>Kylie Minogue
   [ 
    Pop 
   ]   
</html:em>
  ( 2001, 
    km-cg2.mp3 
  )
  </html:li>
<html:li>
<html:b>Cant get 3dlkjldkjlk:
  </html:b>
<html:em>Kylie Minogue
   [ 
    Pop 
   ]   
</html:em>
  ( 2001, 
    km-cg3.mp3 
  )
  </html:li>
</html:ol>
</html:body>
</html:html>

  



  















Java















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




Heinz Kredel





Last modified: Sat Apr  9 11:47:15 CEST 2005