Übungsmaterial

HTML und XHTML

Datei index.html.html:

<html>
<head>
<title>Einstiegsseite der Bio-Informatik kurs20</title>
</head>
<body bgcolor="lime">
<p>Hier eine <em>Übersicht</em> über die 
<strong>besten</strong> Seiten:
</p>
<ul>
<li>Zur <a href="erste.html">ersten</a> Seite</li>
<li>Zum Mittagessen-<a href="formular.html">Formular</a></li>
<li>Zum Tabellen-<a href="tabelle.html">Formular</a></li>
<li>Zur <a href="zweite.html">zweiten</a> Seite mit CSS</li>
<li>Zur <a href="dritte.html">dritten</a> Seite mit externem CSS</li>
<li>Zur <a href="vierte.phtml">vierten</a> Seite mit PHP</li>
<li>Zur <a href="fuenfte.phtml">fünften</a> Seite mit Formular und PHP</li>
<li>Zur <a href="bestellungen.xml">sechsten</a> Seite mit XML</li>
</ul>
</body>
</html>

Datei erste.html:

<html>
<head>
<title>Bio-Informatik Web-Seite</title>
</head>
<body bgcolor="yellow">
<h1>Bio-Informatik Web-Seite</h1>
<p align="center">
Hier kommt der erste Paragraph.
Hier ist der zweite Satz im ersten Paragraphen.
</p>
<p>
Wir befinden uns hier in den Räumen von
<a href="http://www.absolventum.de/">Absolventum</a>
und besuchen eine Weiterbildung der
<a href="http://www.akademie-fuer-weiterbildung.de"
   >Akademie für Weiterbildung an den 
   Universitäten Heidelberg und Mannheim e.V.</a>.
</p>
<p>
<a href="http://www.absolventum.de/"
   ><img src="absolventumlogo.gif" alt="Absolventum" /></a>
   &nbsp;
<a href="http://www.absolventum.de/"
   ><img alt="Absolventum"
    src="http://www.absolventum.de/gfx/absolventumlogo.gif" 
    /></a>
   </p>
<p>
<a href="index.html" >Home</a>
</p>
</body>
</html>

Datei formular.html:

<html>
<head>
<title>Eine Seite mit Formular</title>
</head>
<body bgcolor="blue">
<h2>Ein Formular fürs Mittagessen:</h2>

<form
 action="http://trumpf-10.rz.uni-mannheim.de/~kredel/echo.phtml" 
 >
<p>
Wer bist du ? 
<input type="text" name="dername" size="20" />
</p>
<p>
Hauptgericht: 
<input type="radio" name="haupt" value="fish" /> Bratfisch
<input type="radio" name="haupt" value="germ" /> Germknödel
<input type="radio" name="haupt" value="pasta" 
       checked="checked" /> Pasta
</p>
<p>
Zusätze:
<input type="checkbox" name="water" /> Mineralwasser,
<input type="checkbox" name="soup" /> Minestrone,
<input type="checkbox" name="desert" /> 2 Kugeln Eis,
<input type="checkbox" name="coffe" /> Espresso,
</p>
<p>
<input type="reset" value="Ooops" />
<input type="submit" value="Hunger" />
</p>
</form>
</body>
</html>

Datei tabelle.html:

<html>
<head>
<title>Eine Seite mit Tabelle</title>
</head>
<body bgcolor="aqua">
<h2>Ein Formular fürs Mittagessen mit Tabelle:</h2>

<form
 action="http://trumpf-10.rz.uni-mannheim.de/~kredel/echo.phtml" 
 >
<table border="0" cellpadding="10" summary="nur layout" >
<tr>
<td>Wer bist du ?</td> 
<td><input type="text" name="dername" size="20" /></td>
</tr>
<tr>
<td>Hauptgericht: </td>
<td>
<input type="radio" name="haupt" value="fish" /> Bratfisch
<input type="radio" name="haupt" value="germ" /> Germknödel
<input type="radio" name="haupt" value="pasta" 
       checked="checked" /> Pasta
</td>
</tr>
<tr>
<td>Zusätze:</td>
<td>
<input type="checkbox" name="water" /> Mineralwasser,
<input type="checkbox" name="soup" /> Minestrone,
<input type="checkbox" name="desert" /> 2 Kugeln Eis,
<input type="checkbox" name="coffe" /> Espresso,
</td>
</tr>
<tr>
<td></td>
<td>
<input type="reset" value="Ooops" />
<input type="submit" value="Hunger" />
</td>
</tr>
</table>
</form>
</body>
</html>

CSS

Datei zweite.html:

<html>
<head>
<title>Bio-Informatik Web-Seite mit CSS</title>
<style type="text/css" >
body { background-color: red; 
       font-family: Verdana, Helvetica, sans-serif;
       font-size: x-large;
       margin-left: 4em;
       margin-right: 4em;
       margin-top: 2em;
     }
p.bemerkung { font-style: italic;
     background-color: maroon;
     color: white;
     }
h1 em { background-color: yellow;
     text-decoration: blink;
     }
p em { background-color: lime;
     }
a:visited { background-color: white;
     }
a:link { background-color: blue;
     }
a:hover { background-color: yellow;
     }
</style>
</head>
<body>
<h1>Bio-Informatik Web-Seite mit <em>CSS</em></h1>
<p class="bemerkung">
Hier kommt der erste Paragraph.
Hier ist der zweite Satz im ersten Paragraphen.
</p>
<p>
Wir befinden uns hier in den Räumen von
<a href="http://www.absolventum.de/">Absolventum</a>
und besuchen eine <em>Weiterbildung</em> der
<a href="http://www.akademie-fuer-weiterbildung.de"
   >Akademie für Weiterbildung an den 
   Universitäten Heidelberg und Mannheim e.V.</a>.
</p>
<p>
<a href="http://www.absolventum.de/"
   ><img src="absolventumlogo.gif" alt="Absolventum" /></a>
   &nbsp;
<a href="http://www.absolventum.de/"
   ><img alt="Absolventum"
    src="http://www.absolventum.de/gfx/absolventumlogo.gif" 
    /></a>
   </p>
<p>
<a href="index.html" >Home</a>
</p>
</body>
</html>

Datei dritte.html:

<html>
<head>
<title>Bio-Informatik Web-Seite mit externem CSS</title>
<link rel="stylesheet" type="text/css" href="dritte.css" />
<style type="text/css" >
body { background-color: lime !important; 
     }
</style>
</head>
<body>
<h1>Bio-Informatik Web-Seite mit externem <em>CSS</em></h1>
<p class="bemerkung">
Hier kommt der erste Paragraph.
Hier ist der zweite Satz im ersten Paragraphen.
</p>
<p>
Wir befinden uns hier in den Räumen von
<a href="http://www.absolventum.de/">Absolventum</a>
und besuchen eine <em>Weiterbildung</em> der
<a href="http://www.akademie-fuer-weiterbildung.de"
   >Akademie für Weiterbildung an den 
   Universitäten Heidelberg und Mannheim e.V.</a>.
</p>
<p>
<a href="http://www.absolventum.de/"
   ><img src="absolventumlogo.gif" alt="Absolventum" /></a>
   &nbsp;
<a href="http://www.absolventum.de/"
   ><img alt="Absolventum"
    src="http://www.absolventum.de/gfx/absolventumlogo.gif" 
    /></a>
   </p>
<p>
<a href="index.html" >Home</a>
</p>
</body>
</html>

Datei dritte.css:

body { background-color: purple !important; 
       font-family: Verdana, Helvetica, sans-serif;
       font-size: x-large; /* ein kommentar */ 
       margin-left: 4em;
       margin-right: 4em;
       margin-top: 2em;
     }
p.bemerkung { font-style: italic;
     background-color: maroon;
     color: white;
     }
h1, h2, h3, h4 { 
     text-align: center;
     }
h1 em { background-color: yellow;
     text-decoration: blink;
     }
p em { background-color: lime;
     }
a:visited { background-color: white;
     }
a:link { background-color: blue;
     }
a:hover { background-color: yellow;
     }

PHP

Datei vierte.phtml:

<html>
<head>
<title>vierte Seite mit PHP von kurs20</title>
</head>
<body bgcolor="aqua">
<h2>vierte Seite mit PHP</h2>
<?php 
  $user = "Karl Dall";
  $user += 1; $user -= 1;
  print "<p>Hallo " . $user . " wie gehts?</p>\n";
  print "<p>7 . 8 = " . 7 . 8 . "</p>\n";
  print "<p>7 + 8 = " . ( 7 + 8 ) . "</p>\n";
  if ( $user == 1 ) {
     print "<p>if liefert wahr $user</p>\n";
  } else {
     print "<p>if liefert falsch $user</p>\n";
   }
  for ( $i = 0; $i < 10; $i++ ) {
     print "<p>Der Wert von $i+1/$i ist " . quadrat($i) . " </p>\n";
  }
  
  function quadrat($n) {
    return $n+1/$n;
  }
?>

<p><a href="index.html">Home</a></p>
</body>
</html>

Datei fuenfte.phtml:

<html>
<head>
<title>fünfte Seite mit PHP von kurs20</title>
</head>
<body bgcolor="lime">
<h2>fünfte Seite mit PHP und Formular</h2>
<?php 
  $dername = $_REQUEST['dername'];
  if ( $dername == "" ) {
     $dername = "Hier bitte Ihren Namen angeben.";
  }
  $haupt = $_REQUEST['haupt'];
  $water = $_REQUEST['water'];
  $soup = $_REQUEST['soup'];
  $desert = $_REQUEST['desert'];
  $coffe = $_REQUEST['coffe'];
  print "<p>" . $dername . " hat folgende Wahl getroffen:<br />\n";
    $was = "<name>" . $dername . "</name>\n";
  print "Hauptgericht: " . $haupt . "<br />";
     $was .= "<haupt>" . $haupt . "</haupt>\n";
  print "Zusätze: ";
     $was .= "<zusaetze>";
  if ( $water == "on" ) { 
     print "Wasser "; 
     $was .= "water,";
  }
  if ( $soup == "on" ) {
     print "Suppe "; 
     $was .= "suppe,";
  }
  if ( $desert == "on" ) {
     print "Nachtisch "; 
     $was .= "desert,";
  }
  if ( $coffe == "on" ) {
      print "Espresso "; 
     $was .= "espresso,";
  }
  $was .= "</zusaetze>\n";
  print "</p>\n";
  $was .= "\n";
  $bestellungen = fopen( "essens-bestellungen.txt", "a" );
    flock( $bestellungen, LOCK_EX );  /* nur eine darf fputs */
  fputs( $bestellungen, $was );
    flock( $bestellungen, LOCK_UN );  /* unlock */
  fclose( $bestellungen );
?>

<form
 action="http://trumpf-10.rz.uni-mannheim.de/~kurs20/fuenfte.phtml" 
 >
<p>
Wer bist du ? 
<input type="text" name="dername" size="40" 
 value="<?php print $dername; ?>"
 />
</p>
<p>
Hauptgericht: 
<input type="radio" name="haupt" value="fish" /> Bratfisch
<input type="radio" name="haupt" value="germ" /> Germknödel
<input type="radio" name="haupt" value="pasta" 
       checked="checked" /> Pasta
</p>
<p>
Zusätze:
<input type="checkbox" name="water" /> Mineralwasser,
<input type="checkbox" name="soup" /> Minestrone,
<input type="checkbox" name="desert" /> 2 Kugeln Eis,
<input type="checkbox" name="coffe" /> Espresso,
</p>
<p>
<input type="reset" value="Ooops" />
<input type="submit" value="Hunger" />
</p>
</form>

<p><a href="index.html">Home</a></p>
</body>
</html>

XML

Datei bestellungen.xml:

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

<!DOCTYPE bestellungen SYSTEM "bestellungen.dtd" >

<?xml-stylesheet type="text/css" href="bestellungen.css" ?>

<bestellungen>

<name status="hiwi" >Karl Dall</name>
<haupt>pasta</haupt>
<zusaetze>suppe,desert,</zusaetze>

<name status="hiwi" >Karl Dall</name>
<haupt>germ</haupt>
<zusaetze>water,suppe,</zusaetze>

<name status="hiwi" >Heinz Kredel</name>
<haupt>fish</haupt>
<zusaetze>water,suppe,espresso,</zusaetze>

<name status="hiwi" >Thomas</name>
<haupt>germ</haupt>
<zusaetze>water,suppe,desert,espresso,</zusaetze>

<name status="hiwi" >Thomas</name>
<haupt>pasta</haupt>
<zusaetze></zusaetze>

<name status="hiwi" >Heinz Kredel</name>
<haupt>pasta</haupt>
<zusaetze></zusaetze>

<name status="undef" >Hier bitte Ihren Namen angeben.</name>
<haupt>pasta</haupt>
<zusaetze></zusaetze>

<name status="undef" >Hier bitte Ihren Namen angeben.</name>
<haupt>fish</haupt>
<zusaetze>water,suppe,desert,espresso,</zusaetze>

<name status="mitarbeiter" >Tu</name>
<haupt>pasta</haupt>
<zusaetze>water,suppe,desert,espresso,</zusaetze>

<name status="hiwi" >Heinz Kredel</name>
<haupt>pasta</haupt>
<zusaetze></zusaetze>

<name status="hiwi" >Heinz Kredel</name>
<haupt>pasta</haupt>
<zusaetze>suppe,</zusaetze>

</bestellungen>

Datei bestellungen.dtd:

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

<!ELEMENT bestellungen (name,haupt,zusaetze)* >

<!ELEMENT name (#PCDATA) >
<!ELEMENT haupt (#PCDATA) >
<!ELEMENT zusaetze (#PCDATA) >

<!ATTLIST name status (mitarbeiter|hiwi|undef) #REQUIRED >

Datei bestellungen.css:

bestellungen {
   font-size: x-large;
   background-color: lime;
}

name { 
   font-style: bold;
   background-color: blue;
   margin: 2em;
}

haupt {
   font-style: italic;
   padding: 1em;
}

zusaetze {
   color: maroon;
}

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

Heinz Kredel
Last modified: Wed Oct 15 14:15:36 CEST 2003