Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 3.000 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 1.900 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 2.200 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.
  • Registriere dich bei uns und du erhältst die Selection-DVD mit über 24 Stunden Video-Trainings zu Photoshop, InDesign uvm. als Download gratis (sofern Newsletter aktiviert). 

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir:

PHP-Workshop-DVD - Basics & Tricks

  • 12 Stunden Video-Training, 480 PDF-Seiten Tutorials
  • Basics, Formulare, Datenbanken, XML und Co.
  • 4 Stunden Bonusmaterial zum Webdesign (mit Photoshop
Jetzt informieren

Kommentare

  • Alternative Portrait von drichter

    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

    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

Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


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.
vBulletin 0.046 • ZF-App 1.609 • Total 1.655