Übungsmaterial

HTML und XHTML

Datei webseite.html:

<!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 for Linux/x86 (vers 1st May 2003), see www.w3.org" />
<title>Hallo aus der BA</title>
</head>
<body bgcolor="lime">
<h1>Hallo aus der BA !</h1>
<p>Wir begr&uuml;ssen Sie ganz herzlich zur ersten
<strong>Webseite</strong>des neuen <em>super schlauen</em>Kurses in
der BA.</p>
<ul type="circle">
<li value="100">heute ist Freitag</li>
<li>morgen ist Samstag</li>
<li>&uuml;bermorgen ist Sonntag</li></ul>
<p>Hier kommt ein Link auf unsere geliebte
<a href="http://www.ba-mannheim.de/" target="ba">BA</a>.</p>
<p align="right">Hier kommt eine Link auf
<a href="http://cruncher.ba-mannheim.de/~s8811183/webseite.html">diese
Seite</a>auf dem cruncher.</p>
</body>
</html>

Datei index.html:

<!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 for Linux/x86 (vers 1st May 2003), see www.w3.org" />
<title>Hier ist die Einstiegsseite von s8811183</title>
</head>
<body bgcolor="white">
<h2>Hier ist die Einstiegsseite von s8811183</h2>
<ul>
<li>
<a href="webseite.html">erste Seite mit Basis-HTML</a>
</li>
<li>
<a href="formular.html">zweite Seite mit Formular</a>
</li>
<li>
<a href="mitstil.html">dritte Seite mit internem CSS</a>
</li>
<li>
<a href="mitextstil.html">vierte Seite mit externem CSS</a>
</li>
<li>
<a href="mitscript.html">fünfte Seite mit JavaScript</a>
</li>
<li>
<a href="mittime.html">sechste Seite mit JavaScript setTimeout</a>
</li>
<li>
<a href="cdsammlung.xml">siebte Seite mit XML + CSS</a>
</li>
</ul>
<p>
<img src="http://www.ba-mannheim.de/images/world3.gif" 
     alt="BA-Logo extern" />
<img src="world3.gif" alt="BA-Logo intern" />
</p>
</body>
</html>

Datei formular.html:

<!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 for Linux/x86 (vers 1st May 2003), see www.w3.org" />
<title>Formular aus der BA</title>
</head>
<body bgcolor="aqua">
<h1>Formular aus der BA !</h1>
<form action="http://trumpf-10.rz.uni-mannheim.de/~kredel/echo.phtml"
      method="post">
<p>Wer bist du denn ? <input type="text" name="wer" /> Passwort:
<input type="password" name="geheim" /></p>
Getr&auml;nk: <input type="radio" name="stoff" value="a" />Bier
<input type="radio" name="stoff" value="b" />Wein
<input type="radio" name="stoff" value="c" />Wasser Essen: 
<!-- dies ist ein Kommentar -->
<input type="checkbox" name="essen1" value="1" />D&ouml;ner
<input type="checkbox" name="essen2" value="2" />Spagetti
<input type="checkbox" name="essen3" value="3" />Pizza
<input type="checkbox" name="essen4" value="4" />Hamburger 
<p><input type="submit" value="Los gehts !" /></p></form>
</body>
</html>

CSS

Datei mitstil.html:

<!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 for Linux/x86 (vers 1st May 2003), see www.w3.org" />
<title>Hallo aus der BA</title>
<style type="text/css">
/*  body { background-color: #0000ff; } */
/*  body { background-color: rgb(0%,100%,0%); } */
 body { font-family: monospace;
        font-size: x-large;
        background-color: yellow; 
      } 
 em   { color: red;
      }
 li em { color: navy;
         font-weight: bold;
      } 
 p em { background-color: green;
      } 

 strong { color: white;
        background-color: blue; 
      }
</style>
</head>
<body>
<h1>Hallo aus der BA !</h1>
<p>Wir begr&uuml;ssen Sie ganz herzlich zur ersten
<strong>Webseite</strong> des neuen <em>super schlauen</em> Kurses in
der BA.</p>
<ul type="circle">
<li value="100">heute ist <em>Freitag</em></li>
<li>morgen ist Samstag</li>
<li>&uuml;bermorgen ist Sonntag</li></ul>
<p>Hier kommt ein Link auf unsere geliebte
<a href="http://www.ba-mannheim.de/" target="ba">BA</a>.</p>
<p align="right">Hier kommt eine Link auf
<a href="http://cruncher.ba-mannheim.de/~s8811183/webseite.html">diese
Seite</a> auf dem cruncher.</p>
</body>
</html>

Datei mitextstil.html:

<!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 for Linux/x86 (vers 1st May 2003), see www.w3.org" />
<title>Hallo aus der BA</title>
<!--link rel="stylesheet" href="bastil.css" type="text/css" /-->
<style type="text/css">
  @import url("bastil.css");
  body { background-color: red; 
         margin: 25px;
       }
  li   { border: 2px solid;
         padding: 10px;
       }
</style>
</head>
<body>
<h1>Hallo aus der BA !</h1>
<p>Wir begr&uuml;ssen Sie ganz herzlich zur ersten
<strong>Webseite</strong> des neuen <em>super schlauen</em> Kurses in
der BA.</p>
<ul type="circle">
<li value="100">heute ist <em>Freitag</em></li>
<li>morgen ist Samstag</li>
<li>&uuml;bermorgen ist Sonntag</li></ul>
<p>Hier kommt ein Link auf unsere geliebte
<a href="http://www.ba-mannheim.de/" target="ba">BA</a>.</p>
<p align="right">Hier kommt eine Link auf
<a href="http://cruncher.ba-mannheim.de/~s8811183/webseite.html">diese
Seite</a> auf dem cruncher.</p>
</body>
</html>

Datei bastil.css:

/*  body { background-color: #0000ff; } */
/*  body { background-color: rgb(0%,100%,0%); } */
 body { font-family: monospace;
        font-size: x-large;
        background-color: yellow !important; 
      } 
 em   { color: red;
      }
 li em { color: navy;
         font-weight: bold;
      } 
 p em { background-color: green;
      } 

 strong { color: white;
        background-color: blue; 
      }

JavaScript, DOM

Datei mitscript.html:

<html>
<head>
<title>Eine Seite mit JavaScript</title>
</head>
<body bgcolor="lime" >
<h2>Eine Seite mit JavaScript</h2>

<script type="text/javascript" >
   document.write("<p>Hallo Welt !</p>");
   document.write("<p>body hat die Farbe " 
                   + document.bgColor + "</p>");
// document.bgColor = prompt( "Bitte wählen Sie Ihre Lieblingsfarbe:"); 

document.write("<table border='1' cellpadding='5' >");
for (var i = 1; i < 4; i++ ) {
   document.write("<tr>");
   for (var j = 1; j < 4; j ++ ) {
      document.write("<td>" + (i*j) + "</td>" );
   }
   document.write("</tr>");
}
document.write("</table>");
</script>
<p>
<a href="http://www.ba-mannheim.de/"
   onMouseOver="document.images['dieba'].src = 'world3.gif' ;"
   onMouseOut ="document.images['dieba'].src = 'http://www.ba-mannheim.de/balogo.gif' ;"
   ><img src="http://www.ba-mannheim.de/balogo.gif" 
     width="80" height="80"
     name="dieba" />
</a>
</p>
</body>

Datei mittime.html:

<html>
<head>
<title>Eine Seite mit JavaScript und time</title>
<script type="text/javascript" >
  function timer() {
     setTimeout( "alert('hi'); timer();", 1000 );
  }
  function timer2() {
     setTimeout( "document.forms['dasform'].submit(); ", 1000 );
  }
</script>
</head>
<body bgcolor="lime" onload="timer2();">
<h2>Eine Seite mit JavaScript</h2>

<script type="text/javascript" >
document.write("<p>leer</p>");
</script>
<p>
<a href="http://www.ba-mannheim.de/"
   onMouseOver="document.images['dieba'].src = 'world3.gif' ;"
   onMouseOut ="document.images['dieba'].src = 'http://www.ba-mannheim.de/balogo.gif' ;"
   ><img src="http://www.ba-mannheim.de/balogo.gif" 
     width="80" height="80"
     name="dieba" />
</a>
</p>
<form name="dasform" action="" >
<p>
<input type="text" value="schnell" size="20" />
<input type="submit" value="ab" />
</p>
</form>
</body>

XML

Datei cdsammlung.xml:

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

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

<cds>

<cd type="music" woist="schrank001" >
<interpret>Nena</interpret>
<titel>Album 99</titel>
<lied>99 Luftballons</lied>
<lied>usw</lied>
</cd>

<cd type="music" woist="schrank001" >
<interpret>Madonna</interpret>
<titel>Music</titel>
<lied>American Life</lied>
<lied>etc</lied>
</cd>

<cd type="data" woist="schrank002" >
<titel>SuSE Linux 8.2</titel>
</cd>

<cd type="data" woist="schrank002" >
<titel>Windows XP</titel>
</cd>

</cds>

Datei cds.css:

cd {
  white-space: pre;
}

interpret { 
  font-size: x-large;
  font-weight: bold;
  color: red;
}

titel {
  font-weight: bold;
  color: green;
}

lied { 
  color: blue; 
  font-style: italic;
}

Datei cds.dtd:

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

<!ELEMENT cds (cd)+ >

<!ELEMENT cd (interpret?, titel, lied*) >
<!ATTLIST cd type  (music|data) #REQUIRED
             woist NMTOKEN      #IMPLIED >

<!ELEMENT interpret (#PCDATA) >

<!ELEMENT titel     (#PCDATA) >

<!ELEMENT lied      (#PCDATA) >

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 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>Meine CD Sammlung</title>
<style type="text/css">
h2 { color: red; }
</style>
</head>
<body bgcolor="lime" >
<xsl:apply-templates />
<h2>Anhang</h2>
<xsl:apply-templates select="*/lied" />
</body>
</html>
</xsl:template>

<xsl:template match="cd[@type='music']" >
<hr /><xsl:apply-templates />
</xsl:template>

<xsl:template match="cd[@type='music']/titel" >
<h2><xsl:apply-templates /></h2>
</xsl:template>

<xsl:template match="cd[@type='data']/titel" >
</xsl:template>

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

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

</xsl:stylesheet >

Datei cdsammlung.html:

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Meine CD Sammlung</title>
<style type="text/css">
h2 { color: red; }
</style>
</head>
<body bgcolor="lime">

<hr>

<h1>Nena</h1>

<h2>Album 99</h2>

<p>99 Luftballons</p>

<p>usw</p>


<hr>

<h1>Madonna</h1>

<h2>Music</h2>

<p>American Life</p>

<p>etc</p>

<h2>Anhang</h2>
<p>99 Luftballons</p>
<p>usw</p>
<p>American Life</p>
<p>etc</p>
</body>
</html>

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

Heinz Kredel
Last modified: Tue Jun 10 09:24:33 CEST 2003