Ü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, XSLT

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

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

Heinz Kredel
Last modified: Fri May 24 17:37:46 CEST 2002