Anzeige
Tutorialbeschreibung

PHP - Teil 29 - PEAR: HTML-Dokumente generieren

PHP - Teil 29 - PEAR: HTML-Dokumente generieren

Viele Webseiten basieren mittlerweile auf dem XHTML-Standard. Es sollen an dieser Stelle nicht die Vorzüge von XHTML gegenüber normalem HTML erörtert werden. Vielmehr geht es hier um das Pear-Paket HTML_Page2, das normalen HTML-Code in XHTML-kompatiblen umwandelt. Als Ergebnis erhaltet ihr vollwertigen XHTML-Code. Hierin sind die XML-Deklaration und die DTD vorhanden. Zusätzlich werden alle Tags kleingeschrieben und deren Attribute in Anführungszeichen gesetzt. Zudem werden leere Tags geschlossen. Somit wird aus <br> beispielsweise <br />. Der durch HTML_Page erzeugte XHTML-Code ist vollwertig und hielt bei Testzwecken auch dem XHTML-Validator des W3C stand.

... übrigens findest du die komplette Serie hier: PHP-Workshop-DVD - Basics & Tricks - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Ihr bekommt HTML_Page2 von der Seite http://pear.php.net in der Rubrik HTML.

Bilder



 
Installiert dieses Paket wie üblich:
install pear/HTML_Page2-0.6.0beta


Zum Testen des Pakets legt man am besten eine neue PHP-Datei an. Das folgende Skript erzeugt eine gültige XHTML-Datei.
<?php
 require_once 'HTML/Page2.php';
 $page = new HTML_Page2();
 $page->setTitle('Meine erste HTML-Seite');
 $page->addBodyContent('<h1>Hallo, Welt!</h1>');
 $page->display();
?>


Ruft man diese Seite im Browser auf, ergibt sich folgendes Bild:

Bilder



 
Über require_once() wird die HTML_Page2-Klasse eingebunden. Durch new HTML_Page2() wird ein neues Objekt dieser Klasse erzeugt. Da wir uns zunächst auf den einfachsten Fall einer XHTML-Datei konzentrieren wollen, werden die im Dateikörper anzuzeigenden Elemente jeweils über addBodyContent() definiert. Es spielt hierbei übrigens keine Rolle, wie viele HTML-Elemente innerhalb einer addBodyContent()-Anweisung notiert werden.

Um den XHTML-Code zu erzeugen, wird abschließend display() verwendet. Der generierte XHTML-Quelltext stellt sich folgendermaßen dar:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta name="Generator" content="PEAR HTML_Page" />
<title>Meine erste HTML-Seite</title> 
</head>
<body>
<h1>Hallo, Welt!</h1>
</body> 
</html>


Wie bereits erwähnt, handelt es sich hierbei um die einfachste Form einer XHTML-Datei.

Wenn ihr HTML_Page2 einsetzt, solltet ihr mit den Prinzipien von XHTML vertraut sein. In diesem Tutorials kann hierzu keine Einführung geboten werden. Achtet aber vor allem darauf, dass die als deprecated eingestuften Elemente wie font usw. innerhalb von XHTML-Dokumenten nicht verwendet werden dürfen.


Seitentitel und Metatags definieren

Vollständige XHTML-Dokumente müssen ein title-Element besitzen. Aus diesem Grund wird, wie das bereits gezeigt wurde, bei HTML_Page2 automatisch ein Seitentitel mit eingefügt. Da dieser mit einem Standardwert belegt ist, muss er im Regelfall geändert werden.

Als weiteres wichtiges Kriterium einer Webseite sind Meta-Angaben zu sehen. (Auch wenn diese nach XHTML-Syntax nicht zum Grundgerüst gehören müssen). Die folgende Syntax fügt in ein Dokument sowohl einen Seitentitel wie auch diverse Meta-Angaben ein. Zusätzlich wird demonstriert, wie sich die Dokumenttyp-Angabe für das Dokument ändern lässt.

Durch den Dokumenttyp wird festgelegt, welche Elemente innerhalb einer Datei vorkommen dürfen. Nur durch die Angabe eines Dokumenttyps ist eine XHTML-Datei gültig (valid). Für XHTML-Dokumente können die Werte xhtml1-strict.tdt, xhtml1.transitional.dtd usw. angegeben werden. Weiterführende Informationen hierzu erhaltet ihr wieder auf den Seiten des W3C unter http://w3.org.

Durch die folgende Syntax wird als Dokumenttyp XHTML 1.0 Strict definiert. Zusätzlich wird die Dokumentsprache der XHTML-Datei angegeben.
<?php
require_once 'HTML/Page2.php';
$p = new HTML_Page2(array ( 
'doctype' => 'XHTML 1.0 Strict',
'language' => 'en',
));
$p->setTitle("psd-tutorials");
$p->setMetaData("author", "psd-tutorials.de");
$p->setMetaData("keywords", "Tutorials, Photoshop, Joomla");
$p->setMetaData("robots", "INDEX,FOLLOW");
$p->addBodyContent("<h1>Seiteninhalt</h1>");
$p->display();
?>


Dem Objekt HTML_Page2 wird ein Array mit dem Dokumenttyp und der Sprachversion übergeben. Über doctype wird der Dokumenttyp und über language die Sprachversion angegeben. Der Seitentitel wird über setTitle() angegeben. Um Meta-Angaben zu definieren, wird die setMetData()-Angabe verwendet. Als erster Parameter wird die Meta-Angabe und als zweiter deren Wert erwartet. Während jede XHTML-Datei exakt nur einen Dateititel besitzen darf, kann die Anzahl der eingesetzten Meta-Angaben frei gewählt werden.

Die Ausgabe sieht folgendermaßen aus:
<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 

<meta name="Generator" content="PEAR HTML_Page" /> 
<meta name="author" content="psd-tutorials.de" /> 
<meta name="keywords" content="Tutorials, Photoshop, Joomla" />
<meta name="robots" content="INDEX,FOLLOW" /> 
<title>psd-tutorials</title> 
</head>
<body> 
<h1>Seiteninhalt</h1>
</body>
</html>


Als Werte für die Meta-Angaben sollten selbstverständlich nur solche verwendetet werden, die auch tatsächlich sinnvoll sind. HTML_Page2 akzeptiert aber auch solche, die nicht offiziell zugelassen sind.


Style Sheets und Skripte einbinden

XHTML soll u.a. dazu dienen, Inhalt und Design voneinander zu trennen. Daher sind in XHTML solche Elemente wie font usw. nicht mehr gestattet. (Wobei deren Einsatz auch in anderen HTML-Standards nicht sinnvoll ist, seit es CSS gibt). Diese sollen ausnahmslos durch Stylesheets ersetzt werden. Wie sich Stylesheets integrieren, wird anhand des folgenden Beispiels gezeigt:
<?php
 require_once 'HTML/Page2.php';
 $p = new HTML_Page2();
 $p->setTitle("medienwerke");
 $p->addStyleSheet('css/styles.css');
 $p->addStyleSheet('css/print.css', 'text/css', 'print');
 $p->addBodyContent("<h1>Seiteninhalt</h1>");
 $p->display();
?>


Nach den nun schon bekannten Elementen werden über addStyleSheet() zwei CSS-Dateien eingebunden. Dabei handelt es sich bei der ersten Datei um die normale CSS-Datei, während über die zweite Anweisung ein druckoptimiertes Stylesheet eingebunden wird. Auch hier wieder ein Blick auf die generierte Syntax.
<?xml version="1.0" encoding="utf-8"?> 
 <!DOCTYPE html

 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
 <head> 

 <meta name="Generator" content="PEAR HTML_Page" /> 
 <title>medienwerke</title>
 <link rel="stylesheet" href="css/styles.css" type="text/css" /> 
 <link rel="stylesheet" href="css/print.css" type="text/css" media="print" /> 
 </head> 
 <body>
 <h1>Seiteninhalt</h1>
 </body> 
 </html>


Inline-CSS-Angaben sind ebenso möglich. Dabei werden die gewünschten CSS-Eigenschaften addStyleDeclaration() zugewiesen.
<?php
 require_once 'HTML/Page2.php';
 $p = new HTML_Page2();
 $p->setTitle("medienwerke");
 $p->addStyleDeclaration('
 h1 {
 font-style: italic;
 }
 ');
 $p->addBodyContent("<h1>Seiteninhalt</h1>");
 $p->display();
 ?>


Das Ergebnis sieht im Browser folgendermaßen aus:

Bilder



 
Ebenso einfach lassen sich auch JavaScript-Dateien einbinden.
<?php
 require_once 'HTML/Page2.php';
 $p = new HTML_Page2();
 $p->setTitle("medienwerke");
 $p->addScript('js/skripte.js');
 $p->addBodyContent("<h1>Seiteninhalt</h1>");
 $p->display();
?>


Über addScript() wird die Skript-Datei angegeben. Der erzeugte XHTML-Code stellt sich folgendermaßen dar:
<?xml version="1.0" encoding="utf-8"?> 
 <!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
 <head>
 <meta name="Generator" content="PEAR HTML_Page" />
 <title>medienwerke</title> 
 <script type="text/javascript" src="js/skripte.js"></script> 
 </head> 
 <body>
 <h1>Seiteninhalt</h1>
 </body>
 </html>


Standardmäßig geht addScript() von JavaScript-Dateien aus, die eingebunden werden sollen. Daher wird automatisch type="text/javascript" angegeben. Selbstverständlich könnt ihr über addScript() aber auch andere Skripttypen einbinden. Dazu muss dieser Typ aber explizit angegeben werden. Angenommen also, ihr wollt ein JScript einbinden. In diesem Fall sähe die Syntax von addScript() folgendermaßen aus:
$p->addScript('js/skripte.js',$type = 'text/jscript');


Und hier der generierte Quellcode:
<script type="text/jscript" src="js/skripte.js"></script>


Inline-Skripte lassen sich ebenfalls definieren. Verwendet wird dafür addScriptDeclaration().
$p->addScriptDeclaration('
 function ausgabe() {
 alert("Hallo, Welt!");
 }
');


Damit eine solche Funktion nun beispielsweise beim Laden der Seite aufgerufen werden kann, könnte man dem body-Element den Event-Handler onload zuweisen. Der Zugriff auf das body-Element gelingt über setBodyAttributes().
$p->setBodyAttributes('onload="ausgabe()"');


Die Ergebnissyntax sieht folgendermaßen aus:
<?xml version="1.0" encoding="utf-8"?>
 <!DOCTYPE html
 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 <head> 
 <meta name="Generator" content="PEAR HTML_Page" />
 <title>medienwerke</title> 
 <script type="text/javascript"> 
 // <!--
 function ausgabe() { 
 alert("Hallo, Welt!"); 
 } 
 // -->
 </script> 
 </head> 
 <body onload="ausgabe()">
 <h1>Seiteninhalt</h1> 
 </body> 
 </html>


 
Und hier ein Blick darauf, wie die Seite aussieht, wenn sie im Browser aufgerufen wird:

Bilder



Es sei nochmals darauf hingewiesen, dass der Einsatz von HTML_Page2 nur dann sinnvoll ist, wenn man mit der XHTML-Syntax vertraut ist. Denn nur dann, wenn tatsächlich auch Elemente so im Ausgangsdokument verwendet werden, wie das in XHTML vorgeschrieben ist, wird das Zieldokument dann auch XHTML entsprechen. Und genau das ist ja das Ziel von HTML_Page2.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von franzg
  • 15.05.2017 - 00:48

Vielen Dank! Das ist sehr interessant!

Portrait von dmtw2107
  • 16.11.2013 - 09:49

verständlich und toll erklärt danke für das tutorial

Portrait von kay_weisheit
  • 20.12.2011 - 16:46

Ich hoffe Du schreibst noch viele Teile, Daniel :)

Vielen Dank !

Portrait von drichter
  • 28.10.2011 - 10:01

Das Tutorial ist gut gemacht. Aber mir persönlich fällt wirklich kein Verwendungszweck für dieses PEAR-Paket ein. Meistens arbeite ich doch mit irgend einer Template-Engine zusammen, wo man den Container der Seite einmal anlegt und dann ist gut. Die wechselnden Inhalte werden dann über Subtemplates eingebunden. Wofür brauche ich dann ein Paket, das für mich jedes mal neu das XHTML zusammenbaut? Mich überzeugt dieses Konzept nicht. Dennoch war es interessant zu lesen.

Portrait von Alukard_der_III
  • 24.10.2011 - 22:37

Sehr cooles Tut.
Super erklärt und verdammt nützlich.
Werde es sicher bald mal umsetzen.
Danke

x
×
×