Kapitel B HTML für PHP
In diesem Abschnitt werden die Grundlagen von HTML, die zum Bearbeiten der PHP-Programme notwendig sind, dargestellt. Dies sind: Dokumentaufbau, Formulare und Tabellen.
HTML
Mit Hilfe von HTML (Hypertext Markup Language) werden Dokumente im Internet dargestellt. Innerhalb der Dokumente sind Zeichen, Worte und ganze Bereiche durch HTML-Befehle markiert. Ein Web-Browser formatiert den Text gemäß den Markierungen und stellt ihn auf dem Bildschirm dar.
Einzelne Bereiche des Dokumentes können als Hypertext markiert werden. Dadurch wird es möglich, diese Bereiche mit anderen Bereichen oder anderen Dokumenten zu verknüpfen. Diese Verknüpfungen werden Hyperlinks oder einfach Links genannt.
PHP
Zum Erlernen der Programmiersprache PHP, zum Ausprobieren der Beispiele und zum Lösen der Übungsaufgaben muß man nur wenige Grundlagen von HTML beherrschen, die in diesem Abschnitt vermittelt werden. Man benötigt zum Testen einen Text-Editor und einen Web-Browser.
Zum Erzeugen von ansprechenden Web-Sites, also mehreren miteinander verknüpften Seiten mit Bildern, formatierten Tabellen und Frames sind allerdings genauere Kenntnisse notwendig. Deren Vermittlung nimmt sich ein eigener Abschnitt an.
B.1 Die erste Seite  
Betrachten wir ein erstes Beispiel:
Abbildung B.1 Die erste Internet-Seite
|
|
Nachfolgend der HTML-Programmcode:
Listing B.1 Datei ub01.htm
<html>
<head>
<title> Meine erste Internet-Seite </title>
</head>
<body>
Das ist der Text meiner ersten Internet-Seite
</body>
</html>
Markierung, Container
Innerhalb einer HTML-Seite befinden sich Text und Markierungen, die in spitzen Klammern eingebunden sind (< und >). Viele dieser Markierungen sind sogenannte »Container«, d. h., es gibt jeweils eine Anfangsmarkierung und eine Endmarkierung. Bei der Endmarkierung wird ein zusätzlicher Slash (Schrägstrich /) eingefügt.
HEAD, BODY
Innerhalb des Containers <html> befindet sich das gesamte Dokument. Es besteht aus den Containern <head> und <body>. Im Container <head> können sich Angaben über das Dokument befinden wie z. B. der Titel innerhalb des Containers <title>. Im Container <body> steht der eigentliche Inhalt des Dokumentes.
HTML-Markierungen können groß oder klein geschrieben werden, die Auswirkungen sind die gleichen. Sie können zur Abgrenzung des Dokument-Rumpfes also auch <BODY> und </BODY> schreiben. Sowohl im vorliegenden Buch als auch innerhalb von beliebigen Internet-Seiten finden sich beide Schreibweisen.
Übung UB01
Geben Sie das angegebene Beispiel mit Hilfe eines Texteditors ein. Achten Sie dabei besonders auf das korrekte Setzen der spitzen Klammern und Schrägstriche. Ein geeigneter Editor kann z. B. der Notepad unter MS Windows oder KEdit unter Linux mit der KDE-Oberfläche sein. Speichern Sie es unter dem Dateinamen ub01.htm in einem Verzeichnis Ihrer Wahl ab. Starten Sie einen Web-Browser, laden Sie die Datei und überprüfen Sie die korrekte Darstellung von Titelzeile und Dokumentinhalt.
B.1.1 Screenshots 
Die Screenshots im vorliegenden Buch wurden bei den Programm-Tests unter dem MS Personal Web Server 4.0 (PWS, Hostname thomas) aufgenommen. Daher beginnt die Adresse jeweils mit http://thomas. Die Funktionsweise aller Dateien, sowohl der HTML-Dateien als auch der PHP-Dateien, wurde über den Webserver kontrolliert, obwohl dies bei reinen HTML-Dateien nicht notwendig wäre. Daher lautet die Adresse im Screenshot für das erste Beispiel-Programm http://thomas/ub/ub01.htm.
B.2 Formulare
Zum Webserver
Eine besondere Stärke von PHP ist die einfache Auswertung von Formular-Inhalten. Durch eine solche Auswertung wird die Informations-Übermittlung vom Betrachter der Web-Site zum Webserver ermöglicht. Dem Betrachter wird zunächst ein Formular vorgelegt, in dem er eigene Einträge vornehmen kann bzw. unter vorgefertigten Einträgen auswählen kann. Er füllt das Formular aus, sendet es ab und bekommt eine Antwort vom Webserver.
Eingabe
Ein Beispiel für eine HTML-Datei mit einem Eingabeformular:
Abbildung B.2 Eingabe-Formular
|
|
Der HTML-Programmcode:
Listing B.2 Datei ub02.htm
<html>
<body>
Bitte tragen Sie Ihren Namen ein und senden Sie das Formular ab.<p>
<form>
<input size="30"> Vorname <p>
<input size="30"> Nachname <p>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
In diesem Formular kann der Betrachter zwei Eintragungen vornehmen und das Formular absenden. Der Webserver wird allerdings noch nicht antworten, da es dort kein passendes Server-Programm gibt. Zumindest kann man aber schon den Aufbau eines Formulares erkennen. Falls der Betrachter den Anfangszustand des Formulares wiederherstellen möchte, z. B. weil er Fehleingaben gemacht hat, kann er die Schaltfläche »Zurücksetzen« betätigen.
FORM
Innerhalb des <body>-Containers befindet sich ein <form>-Container mit den Formularelementen. Dabei handelt es sich um zwei Eingabefelder für Text mit der Größe 30 (<input size="30">), eine Schaltfläche zum Absenden (<input type="submit">) und eine Schaltfläche zum Zurücksetzen (<input type="reset">) des Formulares.
INPUT
Bei der Markierung <input> werden erstmalig Attribute und Werte verwendet. Eine Markierung kann mehrere Attribute (d. h. Eigenschaften) haben, hier sind dies type bzw. size. Diese Eigenschaften haben Werte, hier sind dies der Wert 30 für die Größe (size) des Eingabe-Feldes und die Werte "submit" bzw. "reset" für den Typ (type) des Eingabefeldes. Ein Wert wird dem zugehörigen Attribut immer per Gleichheitszeichen zugewiesen.
P, BR
Die Markierung <p> dient zur Erzeugung eines Absatzumbruches, hat also hier nur optische Bedeutung. Statt <p> hätte man auch die Markierung <br> verwenden können, denn damit wird ein Zeilenumbruch erzeugt. Beim Zeilenumbruch entsteht kein Abstand zur Vorgängerzeile, wie dies bei <p> der Fall ist.
Übung UB02
Geben Sie das angegebene Beispiel mit Hilfe eines Texteditors ein, und speichern Sie es unter dem Dateinamen ub02.htm ab. Betrachten Sie das Dokument anschließend mit Hilfe eines beliebigen Web-Browsers.
Übung UB03
Erweitern Sie das Beispiel dahingehend, daß eine ganze Adresse eingegeben werden kann (Datei ub03.htm). Es soll zusätzlich vier weitere, gleich große Eingabefelder für die Angaben Straße, Hausnummer, Postleitzahl und Ort innerhalb des Formulares geben. Die Seite soll folgendes Aussehen haben:
Abbildung B.3 Erweitertes Eingabe-Formular
|
|
B.3 Tabellen
TABLE, TR, TD
Tabellen dienen zur übersichtlichen Darstellung größerer Datenmengen und zur mehrspaltigen Ausgabe in Dokumenten. Sie eignen sich besonders zur Ausgabe von Datenbank-Inhalten. Eine Tabelle besteht aus mehreren Containern. Die gesamte Tabelle steht im Container <table>, eine Zeile einer Tabelle im Container <tr> und eine Zelle innerhalb einer Zeile im Container <td>. Ein Beispiel:
Listing B.3 Datei ub04.htm
<html>
<body>
<table border>
<tr>
<td>Berlin</td>
<td>Paris</td>
<td>Brüssel</td>
</tr>
<tr>
<td>Deutschland</td>
<td>Frankreich</td>
<td>Belgien</td>
</tr>
</table>
</body>
</html>
Diese Tabelle besitzt einen Rahmen (Attribut border innerhalb des Containers <table>), zwei Zeilen (Container <tr>), drei Zellen pro Zeile (Container <td>) und hat folgendes Aussehen:
Abbildung B.4 Tabelle mit zwei Zeilen und drei Spalten
|
|
Übung UB04
Geben Sie das angegebene Beispiel mit Hilfe eines Texteditors ein, und speichern Sie es unter dem Dateinamen ub04.htm ab. Betrachten Sie das Dokument anschließend mit Hilfe eines beliebigen Web-Browsers.
Übung UB05
Verändern Sie das Beispiel. Fügen Sie noch eine weitere Stadt/Land – Kombination hinzu, und drehen Sie die Tabelle (Datei ub05.htm). Die Tabelle soll wie folgt aussehen:
Abbildung B.5 Tabelle mit vier Zeilen und zwei Spalten
|
|
B.4 Hyperlinks
Hyperlinks dienen der Verbindung zwischen HTML-Dokumenten. Der Betrachter muß nur einen Hyperlink mit der Maus anklicken und schon gelangt er zu einer anderen Seite.
A HREF =
Ein Hyperlink befindet sich innerhalb des Containers <a> und </a>.Der Wert des Attributes href gibt das Ziel des Hyperlinks an, auch Verweisziel genannt.
Nehmen wir zunächst einmal vereinfachend an, dass sich alle beteiligten Dateien innerhalb des gleichen Verzeichnisses befinden. Durch Betätigen des Hyperlinks im folgenden Beispiel gelangt der Betrachter zur ersten Beispiel-Seite dieses Abschnittes.
Listing B.4 Datei ub06.htm
<html>
<body>
Zur <a href="ub01.htm">ersten</a> Datei<p>
Klicken Sie mit der Maus auf das unterstrichene Wort<p>
</body>
</html>
Anmerkung: Bilder können auch als Hyperlinks dienen (siehe Abschnitt zu HTML). PHP-Programme können auch Ziele von Hyperlinks sein (siehe Abschnitte zur PHP-Programmierung).
Übung UB06
Erweitern Sie das o. a. Beispiel. Fügen Sie vier weitere Hyperlinks hinzu, die zu den restlichen Dateien dieses Abschnittes führen (ub02.htm bis ub05.htm). Die Seite soll wie folgt aussehen:
Abbildung B.6 Seite mit fünf Hyperlinks
|
|
|
