E-Book Startseite Karteikarten-Programm
0

Allgemeines

Nun ist es endlich soweit: Sie haben den Bereich XML-Kurs von dem Hauptkapitel "XML, XSL und DTD lernen" nun fast absolviert. Der letzte Teil dieses Kurses sind die Beispiele. Hier im XML-Kurs haben wir 2 XML Beispiele erstellt. Wir wollen diese Beispiele für Sie Schritt für Schritt erklären. Wir machen nur aus diesem Grund eine Schritt für Schritt Anleitung um Ihnen das Programmieren etwas näher zu bringen und dass Sie dafür ein Gefühl bekommen, wie man Webseitenteile im Gesamten programmiert. Bei dem 1. Beispiel handelt es sich um eine XML-Datenbank. Die "Datenbank" enthält Infos über die 10 größten Gebäude der Welt. Das 2. Beispiel arbeitet mit dem HTML-Namensraum und enthält Informationen über unsere E-Books. In dem 2. Beispiel benötigen wir die Bilder der E-Books. Wenn Sie die Bilder zum Testen benutzen möchten verwenden Sie bitte einfach den kompletten Link zu unserer Webseite.


Datenbank für die größten 10 Gebäude der Welt

Ein einfaches XML-Beispiel ist eine "Datenbank ". In unserem XML-Kurs haben wir dafür eine Datenbank mit den 10 größten Gebäuden der Welt erstellt. Dazu verwenden wir das Wurzelelement <gebaeude> </gebaeude>. Für jede Platzierung verwenden wir als Tag-Name "rang**". Innerhalb dieser rang**-Tags verwenden wir weitere Tags in denen sich dann letztendlich die Inhalt befinden. In unserem Beispiel wollen wir folgende Informationen speichern: Name des Gebäudes (name), Stadt in dem sich das Gebäudes befindet (stadt), Land in dem sich das Gebäude befindet (land), Höhe des Gebäudes (hoehe), nutzbare Etagen des Gebäudes (etagen) und Baujahr des Gebäudes (baujahr). Unsere komplette "Datenbank" sieht folgendermaßen aus:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
 
<gebaeude>
  <rang1>
    <name>Burj Khalifa</name>
    <stadt>Duabi</stadt>
    <land>Vereinigte Arabische Emirate</land>
    <hoehe>828</hoehe>
    <etagen>163</etagen>
    <baujahr>2010</baujahr>
  </rang1>
  <rang2>
    <name>Mecca Royal Clock Tower Hotel</name>
    <stadt>Mekka</stadt>
    <land>Saudi-Arabien</land>
    <hoehe>601</hoehe>
    <etagen>95</etagen>
    <baujahr>2012</baujahr>
  </rang2>
  <rang3>
    <name>Taipei 101</name>
    <stadt>Taipei</stadt>
    <land>Republik China</land>
    <hoehe>508</hoehe>
    <etagen>101</etagen>
    <baujahr>2004</baujahr>
  </rang3>
  <rang4>
    <name>Shanghai World Financial Center</name>
    <stadt>Shanghai</stadt>
    <land>China</land>
    <hoehe>492</hoehe>
    <etagen>101</etagen>
    <baujahr>2008</baujahr>
  </rang4>
  <rang5>
    <name>International Commerce Center</name>
    <stadt>Hongkong</stadt>
    <land>Hongkong</land>
    <hoehe>484</hoehe>
    <etagen>108</etagen>
    <baujahr>2010</baujahr>
  </rang5>
  <rang6>
    <name>Petronas Towers</name>
    <stadt>Kuala Lumpur</stadt>
    <land>Malaysia</land>
    <hoehe>452</hoehe>
    <etagen>88</etagen>
    <baujahr>1998</baujahr>
  </rang6>
  <rang7>
    <name>Greenland Square Zifeng Tower</name>
    <stadt>Nanjing</stadt>
    <land>China</land>
    <hoehe>450</hoehe>
    <etagen>89</etagen>
    <baujahr>2010</baujahr>
  </rang7>
  <rang8>
    <name>Willis Tower</name>
    <stadt>Chicago</stadt>
    <land>Vereinigte Staaten</land>
    <hoehe>442</hoehe>
    <etagen>108</etagen>
    <baujahr>1974</baujahr>
  </rang8>
  <rang9>
    <name>Kingkey 100</name>
    <stadt>Shenzhen</stadt>
    <land>China</land>
    <hoehe>441</hoehe>
    <etagen>100</etagen>
    <baujahr>2011</baujahr>
  </rang9>
  <rang10>
    <name>Guangzhou International Finance Center</name>
    <stadt>Guangzhou</stadt>
    <land>China</land>
    <hoehe>438</hoehe>
    <etagen>103</etagen>
    <baujahr>2010</baujahr>
  </rang10>
</gebaeude>
Anzeigebeispiel
Anzeigebeispiel



HTML in XML: Informationen über unsere E-Books

Das 2. Beispiel in diesem Kurs ist ein Beispiel, wie man aus einem XML-Dokument ein HTML-Dokument macht. Dies klingt nun ein wenig übertrieben, da der Aufbau und die Freiheit vom XML-Dokument verschwinden. Aber eigentlich machen wir nichts anderes als die Einbindung des Namensraums in das XML-Dokument. Der Browser erkennt, den Namensraum und verarbeitet die Daten als HTML. Eigenlich hat dieses Beispiel hier nichts verloren, da es eher ein HTML-Beispiel als ein XML-Beispiel ist. Als erstes müssen wir in der XML-Datei die Deklaration angeben. Gleich darunter kommt das erste Element: html Dieses Element enthält nun im Attribut xmlns den Wert für den XHTML-Namensraum von der W3C-Seite. Der Namensraum wird nun an alle untergeordneten Elemente vererbt. Nun wollen wir auch gleich mit den Head-Bereich beginnen. Dort wird lediglich ein Titel (Information über unsere E-Books) festgelegt und ein Style-Bereich erstellt. Dort werden zwei Klassifizierungen (links und rechts) erstellt. Diese benötigen wir später für den Aufbau von unserer Seite. Der Code dazu sieht so aus:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Informationen &uuml;ber unsere E-Books</title>
    <style type="text/css">
    .links {
        float: left;
    }
    .rechts {
        margin-left: 100px;
    }
    </style>
  </head>

Weiter geht es mit dem Body-Bereich. Im Body-Bereich befinden sich eine Überschrift in der 1. Ebene und ein Zeilenumbruch.

<h1>Informationen &uuml;ber unsere E-Books</h1>
<br />

Nun kommen wir zum Aufbau bzw. zur Vorstellung der einzelnen E-Books. Dazu benötigen wir 2 DIV-Elemente. Das 1. DIV-Element bekommt noch das Attribut class mit dem Wert links zugewiesen. Innerhalb des 1. DIV-Elements wird nun das Bild für das E-Book eingefügt. Dazu wird die Quelle (src), die Höhe (height) und die Breite (width) angegeben. Im 2. DIV-Element benötigen wir ebenfalls das Attribut class, hier jedoch mit dem Wert rechts. In diesem DIV-Element haben wir nun eine Überschrift in der 3. Ebene und einen Absatz (p). Unterhalb der 2 DIV-Elemente haben wir nun zwei Zeilenumbrüche.

<div class="links">
  <img src="/Bilder/E-Book_Allg.gif" height="100" width="76">
</div>
<div class="rechts">
  <h3>Allgemein</h3>
  <p>Beeinhaltet nur das Kapitel Allgemein!</p>
</div>

Der Code von vorher für die Vorstellung des ersten E-Books, können wir nun für die restlichen 12 E-Books kopieren. Es muss dann lediglich die Bild-Quelle, die Überschrift und der Absatztext geändert werden. Bei dem 13. E-Book werden die Zeilenumbrüche am Schluss selbstverständig weggelassen.

<div class="links">
  <img src="/Bilder/E-Book_Soft.gif" height="100px" width="76px">
</div>
<div class="rechts">
  <h3>Software</h3>
  <p>Beeinhaltet nur das Kapitel Software!</p>
</div>
<div class="links">
  <img src="/Bilder/E-Book_Prov.gif" height="100px" width="76px">
</div>
<div class="rechts">
  <h3>Provider</h3>
  <p>Beeinhaltet nur das Kapitel Provider!</p>
</div>
<div class="links">
  <img src="/Bilder/E-Book_HTML.gif" height="100px" width="76px">
</div>
<div class="rechts">
  <h3>HTML</h3>
  <p>Beeinhaltet nur das Kapitel HTML!</p>
</div>
<div class="links">
  <img src="/Bilder/E-Book_CSS.gif" height="100px" width="76px">
</div>
<div class="rechts">
  <h3>CSS</h3>
  <p>Beeinhaltet nur das Kapitel CSS!</p>
</div>
<div class="links">
  <img src="/Bilder/E-Book_Java.gif" height="100px" width="76px">
</div>
<div class="rechts">
  <h3>JavaScript</h3>
  <p>Beeinhaltet nur das Kapitel JavaScript!</p>
</div>
<div class="links">
  <img src="/Bilder/E-Book_PHP.gif" height="100px" width="76px">
</div>
<div class="rechts">
  <h3>PHP</h3>
  <p>Beeinhaltet nur das Kapitel PHP!</p>
</div>
<div class="links">
  <img src="/Bilder/E-Book_XML.gif" height="100px" width="76px">
</div>
<div class="rechts">
  <h3>XML, XSL und DTD</h3>
  <p>Beeinhaltet nur das Kapitel XML, XSL und DTD!</p>
</div>
<div class="links">
  <img src="/Bilder/E-Book_Weiteres.gif" height="100px" width="76px">
</div>
<div class="rechts">
  <h3>Weiterführendes</h3>
  <p>Beeinhaltet nur das Kapitel Weiterführendes!</p>
</div>
<div class="links">
  <img src="/Bilder/E-Book_Proj.gif" height="100px" width="76px">
</div>
<div class="rechts">
  <h3>Projekte</h3>
  <p>Beeinhaltet nur unsere Projekte!</p>
</div>
<div class="links">
  <img src="/Bilder/E-Book_Progra.gif" height="100px" width="76px">
</div>
<div class="rechts">
  <h3>Programmiersprachen</h3>
  <p>Beeinhaltet alle Programmiersprachen-Kapitel!</p>
</div>
<div class="links">
  <img src="/Bilder/E-Book_Haupt.gif" height="100px" width="76px">
</div>
<div class="rechts">
  <h3>"Das große Buch in einer Datei"</h3>
  <p>Beeinhaltet alle Themen-Kapitel!</p>
</div>

Der ganze Code sieht nun im fertigen so aus:

<?xml version="1.0" encoding="ISO-8859-1" standalone="yes"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Informationen &uuml;ber unsere E-Books</title>
    <style type="text/css">
    .links {
        float: left;
    }
    .rechts {
        margin-left: 100px;
    }
    </style>
  </head>
  <body>
    <h1>Informationen &uuml;ber unsere E-Books</h1>
    <br />
    <div class="links">
      <img src="/Bilder/E-Book_Allg.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>Allgemein</h3>
      <p>Beeinhaltet nur das Kapitel Allgemein!</p>
    </div>
    <br /><br />
    <div class="links">
      <img src="/Bilder/E-Book_Soft.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>Software</h3>
      <p>Beeinhaltet nur das Kapitel Software!</p>
    </div>
    <br /><br />
    <div class="links">
      <img src="/Bilder/E-Book_Prov.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>Provider</h3>
      <p>Beeinhaltet nur das Kapitel Provider!</p>
    </div>
    <br /><br />
    <div class="links">
      <img src="/Bilder/E-Book_HTML.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>HTML</h3>
      <p>Beeinhaltet nur das Kapitel HTML!</p>
    </div>
    <br /><br />
    <div class="links">
      <img src="/Bilder/E-Book_CSS.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>CSS</h3>
      <p>Beeinhaltet nur das Kapitel CSS!</p>
    </div>
    <br /><br />
    <div class="links">
      <img src="/Bilder/E-Book_Java.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>JavaScript</h3>
      <p>Beeinhaltet nur das Kapitel JavaScript!</p>
    </div>
    <br /><br />
    <div class="links">
      <img src="/Bilder/E-Book_PHP.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>PHP</h3>
      <p>Beeinhaltet nur das Kapitel PHP!</p>
    </div>
    <br /><br />
    <div class="links">
      <img src="/Bilder/E-Book_Perl.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>PHP</h3>
      <p>Beeinhaltet nur das Kapitel Perl!</p>
    </div>
    <br /><br />
    <div class="links">
      <img src="/Bilder/E-Book_XML.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>XML, XSL und DTD</h3>
      <p>Beeinhaltet nur das Kapitel XML, XSL und DTD!</p>
    </div>
    <br /><br />
    <div class="links">
      <img src="/Bilder/E-Book_Weiteres.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>Weiterführendes</h3>
      <p>Beeinhaltet nur das Kapitel Weiterführendes!</p>
    </div>
    <br /><br />
    <div class="links">
      <img src="/Bilder/E-Book_Proj.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>Projekte</h3>
      <p>Beeinhaltet nur unsere Projekte!</p>
    </div>
    <br /><br />
    <div class="links">
      <img src="/Bilder/E-Book_Progra.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>Programmiersprachen</h3>
      <p>Beeinhaltet alle Programmiersprachen-Kapitel!</p>
    </div>
    <br /><br />
    <div class="links">
      <img src="/Bilder/E-Book_Haupt.gif" height="100" width="76" />
    </div>
    <div class="rechts">
      <h3>"Das große Buch in einer Datei"</h3>
      <p>Beeinhaltet alle Themen-Kapitel!</p>
    </div>
  </body>
</html>
Anzeigebeispiel
Anzeigebeispiel



Design:
 


Logo
Benjamin Jung
Krummstr. 9/3
73054 Eislingen

E-Mail: info@homepage-webhilfe.de
Webseite: www.homepage-webhilfe.de