Übungsmaterial

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>
<title>Erste Web-Seite der Übung</title>

</head>


<body bgcolor="#FFFF00">


<h1>Erste Web-Seite der Übung</h1>


<p>Die Aktie Gelb empfehlen wir Ihnen zum Kauf.
Die Aktie Gelb empfehlen wir Ihnen zum Kauf.
Die Aktie Gelb empfehlen wir Ihnen zum Kauf.
Die Aktie Gelb empfehlen wir Ihnen zum Kauf.
Die Aktie Gelb empfehlen wir Ihnen zum Kauf.
Die Aktie Gelb empfehlen wir Ihnen zum Kauf.
</p>

<p><a href="http://www.postag.de/" target="_blank"
     >Weitere Informationen</a> finden Sie im Web</p>

<p align="center">
<a href="http://www.postag.de/" target="_blank"
   ><img src="illu_aktiegelb.jpg" border="0" 
         alt="Aktie Gelb Bild" ></a>
</p>

<form action="http://trumpf-2.rz.uni-mannheim.de/cgi-bin/ex2.cgi">

<table summary="Eingabeformular">

<tr>
<td>Email: </td>
<td><input type="text" name="email" ></td>
</tr>

<tr>
<td>Vorname: </td>
<td><input type="text" name="vname" ></td>
</tr>

<tr>
<td>Nachname: </td>
<td><input type="text" name="nname" ></td>
</tr>

</table>

<input type="submit" value="Los gehts!">

<p>Falls Sie Probleme mit dem Formular 
haben wenden Sie sich bitte 
an den 
<a href="mailto:webmaster@uni-mannheim.de"
   >Web-Master</a>
</p>

</form>


</body>
</html>

XHTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org" />
<title>Erste Web-Seite der &Uuml;bung</title>
</head>
<body bgcolor="#FFFF00">
<h1>Erste Web-Seite der &Uuml;bung</h1>

<p>Die Aktie Gelb empfehlen wir Ihnen zum Kauf. Die Aktie Gelb
empfehlen wir Ihnen zum Kauf. Die Aktie Gelb empfehlen wir Ihnen
zum Kauf. Die Aktie Gelb empfehlen wir Ihnen zum Kauf. Die Aktie
Gelb empfehlen wir Ihnen zum Kauf. Die Aktie Gelb empfehlen wir
Ihnen zum Kauf.</p>

<p><a href="http://www.postag.de/" target="_blank">Weitere
Informationen</a> finden Sie im Web</p>

<p align="center"><a href="http://www.postag.de/"
target="_blank"><img src="illu_aktiegelb.jpg" border="0"
alt="Aktie Gelb Bild" /></a></p>

<form action="http://trumpf-2.rz.uni-mannheim.de/cgi-bin/ex2.cgi">
<table summary="Eingabeformular">
<tr>
<td>Email:</td>
<td><input type="text" name="email" /></td>
</tr>

<tr>
<td>Vorname:</td>
<td><input type="text" name="vname" /></td>
</tr>

<tr>
<td>Nachname:</td>
<td><input type="text" name="nname" /></td>
</tr>
</table>

<input type="submit" value="Los gehts!" /> 

<p>Falls Sie Probleme mit dem Formular haben wenden Sie sich bitte
an den <a
href="mailto:webmaster@uni-mannheim.de">Web-Master</a></p>
</form>
</body>
</html>

CSS

<html>
<head>
<title>CSS Beispiele</title>

<link rel="STYLESHEET" type="text/css" href="cssueb.css">

<style type="text/css">

body { background: teal; }

</style>

</head>

<body>

<h1>Dies ist die erste Überschrift</h1>

<p class="zentriert">
Hier steht der Text des ersten Prargraphen.
Hier steht der Text des ersten Prargraphen.
Hier steht der Text des ersten Prargraphen.
<em>Hier steht der Text eines hervorgehobenen Satzes.</em>
Hier steht der Text des ersten Prargraphen.
Hier steht der Text des ersten Prargraphen.
<em>Hier steht der Text eines <em>hervorgehobenen</em> Satzes.</em>
Hier steht der Text des ersten Prargraphen.
Hier steht der Text des ersten Prargraphen.
</p>

<h2>Dies ist die zweite Überschrift</h2>

<p>
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
<a href="uebung.html">Hier steht der Text eines Links.</a>
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
Hier steht der Text des zweiten Prargraphen.
</p>

<p class="zentriert" >
<a class="ueb" href="."><img src="illu_aktiegelb.jpg"></a>
</p>

</body>
</html>

body { font-family:  monospace;
       font-size: 20pt;
       background: blue !important ;
       color: yellow; 
     }

h1 { color: yellow; 
     font-size: xx-large;
     align: center;
   }

h2 { color: yellow; 
     font-size: x-large;
     align: center;
   }

em { font-weight: bold; }

em em { font-weight: bold; background: white; color: black }

p.zentriert { align: center; } 

a:link    { color: white; text-decoration: none; }
a:visited { color: fuchsia; text-decoration: none; }

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

JavaScript, DOM

<html>
<head>
<title>Java Script Übungen</title>

<style>
body { font-family:  monospace;
       font-size: 20pt; }
</style>

<script type="text/javascript" language="JavaScript">
<!--
function letzteAenderung() {
         document.write("<p> Letzte Änderung ");
         document.write(document.lastModified);
         document.write(" </p>");
}

function pruefeName( formobj ) {
      if ( formobj.myname.value.length == 0 ) {
         alert("Name zu kurz"); return false;
      }
     return true;
}

function oeffneName( formobj ) {
     window.open( formobj.myname.value, "datei");      }
     return true;
}

function show_props(obj, obj_name) { 
       var result = ""; 
       for (var i in obj) 
           result += obj_name + "." + i + " = " + obj[i] + "\n";
       alert(result); 
   } 

// -->
</script>


</head>
<body>

<form>
<input type="button" value="lime" name="farbwahl" 
       onClick="document.bgColor='lime';" > 
<input type="button" value="blue" name="farbwahl" 
       onClick="document.bgColor='blue';" > 
<input type="button" value="silver" name="farbwahl" 
       onClick="document.bgColor='silver';" > 
</form>

<p name="p1">Dies ist ein Text zum JavaScript Kurs</p>

<form action="http://trumpf-2.rz.uni-mannheim.de/cgi-bin/ex2.cgi"
      onSubmit="return pruefeName(this);" >
Name: <input type="text" name="myname" size="30"><br>


<input type="submit" value="Ab die Post" > 
</form>



<form onSubmit="return oeffneName(this);" >
Name: <input type="text" name="myname" size="30"><br>


<input type="submit" value="Öffne Datei" > 
</form>


<form onSubmit="show_props(this.myname.value,this.myname.value);" >
Name: <input type="text" name="myname" size="30"><br>


<input type="submit" value="Show Properties" > 
</form>




<script type="text/javascript" language="JavaScript">
letzteAenderung();
</script>

</body>
</html>

CGI und Perl

#!/usr/bin/perl

print "Beispiel \n";


sub unter {
    local($e) = @_;
 
    $e =~ tr/0-9/a-k/;

    return "Ergebnis: " . $e . " eof";
}

print "etwas " . &unter(3343309) . "\n\n";


exit;

print `ls -l`;

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

print "22" + "33";

print "\n";

print 22 . 33;

print "\n";

@x = (1,2,3,4,5,6,7,8,9);

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

print 'Länge von @x = ', @x*1, "\n";

print $x[2], "\n";


%y = (1,2,3,4,5,6,7,8,9,0);

print %y, "\n";

print $y{1}, "\n";

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=dbmopen($counter_db,"w");
              if ( dbmexists($db,$filename) ) {
                  $cnt=dbmfetch($db,$filename);
                  if ($counter_start=="1") { $cnt++; } 
                  else { $cnt=$counter_start; }
                  dbmreplace($db,$filename,$cnt);
              }
              else {
                  $cnt=$counter_start;
                  dbminsert($db,$filename,$cnt);
              }
              dbmclose($db);
              return "$cnt";
           }
           else {
              echo "Attempt to create file: " . $counter_db;
              $cnt=$counter_start;
              $db=dbmopen($counter_db,"n");
              dbminsert($db,$filename,$cnt);
              dbmclose($db);
              return "$cnt";
           }
   }

   function list_zaehler() {
           global $filename, $counter_start;
           $counter_dir="/tmp/";
           $counter_db=$counter_dir . "zaehler.dbm";
           if (file_exists("$counter_db")) {
              $db=dbmopen($counter_db,"r");
              $key = dbmfirstkey($db);
              while ($key != "") {
                $value = dbmfetch($db,$key);
                print "<p> key = $key, value = $value </p>\n";
                $key = dbmnextkey($db,$key);
             }

           }
   }

?>

<html>
<head>
<title>PHP Beispiele</title>

</head>

<body bgcolor="white">
<h1>PHP Beispiele</h1>

<?php 
  print "<h2>Hallo aus PHP3 !</h2>\n";

 // $counter_start="4711";
 
 print "<h3>" . counter(). " Zugriffe </h3>\n";


list_zaehler();
  
 ?>



<?php 

  for($i=0; $i < 10; $i++) {
     print "<p>i = $i </p>\n";
  }

   function tuwas($a) { return $a . $a; }

  print "<p>tuwas(22) = " . tuwas(22) . " </p>\n";

?>



<?php 
  $foo = "0";
  print "<p>foo = $foo </p>\n";

  $foo++;
  print "<p>foo = $foo </p>\n";

  $foo .= "xxx";
  print "<p>foo = $foo </p>\n";
?>


<?php
  print "<p>HTTP_USER_AGENT: $HTTP_USER_AGENT</p>\n";
 ?>

<?php if (substr($HTTP_USER_AGENT,0,2) == "Mo"): ?>

   <h3>Text falls HTTP_USER_AGENT = Mozilla ist.</h3>

<?php endif; ?>

<?php if (substr($HTTP_USER_AGENT,0,2) == "Mi"): ?>

   <h3>Text falls HTTP_USER_AGENT = Explorer ist.</h3>

<?php endif; ?>



</body>
</html>

MySQL

<?php 
 $dbconfig["sqlserver"]="localhost";  // sql server hostname 
 $dbconfig["sqlport"]="";  // sql server port 
 $dbconfig["sqlusername"]="kurs";  // username 
 $dbconfig["sqlpassword"]="";  // password 
 $dbconfig["defaultdb"]="test_kurs";  // database 
 $dbconfig["sqltype"]="";  // mysql or pgsql.  defaults to mysql  
?> 

<?php 
 include("dbconfig.inc"); 
 
 function PrintError ($string) { 
    echo "<b>Error</b>: <i>$string</i><br>\n"; 
 }  
 
 function dbQuery ($statement) { 
    global $dbconfig; 
    mysql_pconnect($dbconfig["sqlserver"], 
                   $dbconfig["sqlusername"], 
                   $dbconfig["sqlpassword"]); 
    mysql_select_db($dbconfig["defaultdb"]); 
    $result=@mysql_query($statement); 
    if (mysql_error()) { 
       PrintError(mysql_error()); 
    } 
    else { return $result; } 
    return $result;  
 } 
?> 

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

<html> 
<head> 
<title>php dbm</title> 
</head> 
<body> 
<p>PHP mit dbm:</p> 
<p> 
<?php  
 
  echo "<h3>Datei: $SCRIPT_FILENAME.</h3>";  
  echo "<h3>" . counter(). " Zugriffe </h3>";  
?> 
 
</body>

XML, XSLT

zum Beispiel: kurs.xml, kurs.dtd, kurs.xsl

<?xml version="1.0" encoding="iso-8859-1" ?> 
<!DOCTYPE personal SYSTEM "kurs.dtd" > 
 
<personal> 
 
<mitarbeiter pnr="P123456"> 
<name>Karl D&uuml;ll</name> 
<abteilung>Jux und Dollerei</abteilung> 
</mitarbeiter> 
 
<mitarbeiter pnr="P123457"> 
<name>Karl Maier</name> 
<abteilung>Jux und Dollerei</abteilung> 
<abteilung> Dollerei</abteilung> 
</mitarbeiter> 
 
</personal> 

<?xml version="1.0" encoding="iso-8859-1" ?> 
 
<!ELEMENT personal (mitarbeiter+) > 
 
<!ELEMENT mitarbeiter (name,abteilung+) > 
<!ATTLIST mitarbeiter pnr ID #REQUIRED > 
 
<!ELEMENT name (#PCDATA) > 
<!ELEMENT abteilung (#PCDATA) > 
 
<!ENTITY uuml "ü" > 

<?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="personal"> 
      <html> 
      <head> 
      <title>Mitarbeiterkartei</title> 
      </head> 
      <body bgcolor="white"> 
      <!--xsl:apply-templates select="mitarbeiter" /--> 
      <xsl:apply-templates select="mitarbeiter[@pnr='P123457']" /> 
      </body>  
      </html> 
   </xsl:template> 
    
    
   <xsl:template match="mitarbeiter"> 
      <h2> 
          <xsl:number value="position()" count="mitarbeiter" /> 
          <xsl:text> von </xsl:text> 
          <xsl:number count="mitarbeiter" /> 
          <xsl:text>. </xsl:text> 
          Mitarbeiter: <xsl:value-of select="@pnr" /> </h2>  
      <p> 
      <xsl:apply-templates select="name" /> <br /> 
      <xsl:apply-templates select="abteilung[1]" /> 
      </p> 
   </xsl:template> 
    
   <xsl:template match="name"> 
      <strong> <xsl:apply-templates /> </strong> 
   </xsl:template> 

   <xsl:template match="abteilung"> 
      <strong>Abteilung: </strong> <em><xsl:apply-templates /> </em> 
   </xsl:template> 
    
</xsl:stylesheet> 

<html>
<head>
<title>Mitarbeiterkartei</title>
</head>
<body bgcolor="white">
<h2>1 von 2.  
          Mitarbeiter: P123457</h2>
<p>
<strong>Karl Maier</strong>
<br>
<strong>Abteilung: </strong><em>Jux und Dollerei</em>
</p>
</body>
</html>

zum Beispiel: Bestellung.xsl

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

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

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

 <xsl:template match="Bestellung">
    <html>
    <head>
    <title>Bestellung</title>
    </head>
    <body bgcolor="white">
    <h2>Bestellung</h2>
    <p>
    Bestellnummer: <xsl:apply-templates select="lfdNr" /> <br />
    Bemerkungen: <xsl:apply-templates select="bemerkung" /> 
    </p>
    <p>
    Bestelldatum: <xsl:apply-templates select="bestellDatum" /> <br />
    Lieferdatum: <xsl:apply-templates select="lieferDatum" /> 
    </p>

    <p>
    <strong>Rechnungsadresse: </strong> <br />
      <xsl:apply-templates select="rechnungsAdresse" />
    </p>

    <p>
    <strong>Lieferadresse: </strong> <br />
      <xsl:apply-templates select="lieferAdresse" />
    </p>

    <p>
    <strong>Waren: </strong>
    </p>
    <xsl:apply-templates select="waren" />

    </body>
    </html>
 </xsl:template>

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

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

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

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

 <xsl:template match="ort">
  <b><xsl:apply-templates /></b><br />
 </xsl:template>


 <xsl:template match="waren">
  <table border="1" cell-spacing="20" >
  <tr>
  <th>Artikelnummer</th> 
  <th>Anzahl</th>
  </tr>
  <xsl:apply-templates select="artikel" />
  </table>
 </xsl:template>

 <xsl:template match="waren/artikel">
  <tr>
  <td><xsl:apply-templates select="aNr" /> </td>
  <td><xsl:apply-templates select="anzahl" /> </td>
  </tr>
 </xsl:template>

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

 <xsl:template match="artikel/anzahl">
  <em><xsl:apply-templates/></em>
 </xsl:template>

</xsl:stylesheet>

<html>
    <head>
        <title>Bestellung</title>
    </head>
    <body bgcolor="white">
        <h2>Bestellung</h2>
        <p>
    Bestellnummer: 4711<br>
    Bemerkungen: eilig</p>
        <p>
    Bestelldatum: 12.1.01<br>
    Lieferdatum: 2001-01-30</p>
        <p>
            <strong>Rechnungsadresse: </strong>
            <br>
Karl
Dall<br>
L 15, 16<br>
<b>68131</b>
<b>Mannheim</b>
            <br>
</p>
        <p>
            <strong>Lieferadresse: </strong>
            <br>
Karl
Knallinger<br>
A 5, 6<br>
<b>68131</b>
<b>Mannheim</b>
            <br>
</p>
        <p>
            <strong>Waren: </strong>
        </p>
        <table cell-spacing="20" border="1">
            <tr>
                <th>Artikelnummer</th><th>Anzahl</th>
            </tr>
            <tr>
                <td>4712</td><td><em>2</em></td>
            </tr>
            <tr>
                <td>4713</td><td><em>3</em></td>
            </tr>
        </table>
    </body>
</html>

Java

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

Heinz Kredel
Last modified: Tue Jan 15 15:24:45 CET 2002