Rheinwerk Computing <openbook>
Rheinwerk Computing - Programming the Net


PHP 4 von Thomas Theis
Webserver-Programmierung für Einsteiger
Zum Katalog
gp Kapitel B HTML für PHP
  gp B.1 Die erste Seite
  gp B.2 Formulare
  gp B.3 Tabellen
  gp B.4 Hyperlinks

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.


Rheinwerk Computing

B.1 Die erste Seite  downtop

Betrachten wir ein erstes Beispiel:

Abbildung B.1   Die erste Internet-Seite
Abbildung

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.


Rheinwerk Computing

B.1.1 Screenshots  downtop

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.


Rheinwerk Computing

B.2 Formulare  downtop

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
Abbildung

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
Abbildung


Rheinwerk Computing

B.3 Tabellen  downtop

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
Abbildung

Ü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
Abbildung


Rheinwerk Computing

B.4 Hyperlinks  toptop

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
Abbildung

  
Zum Katalog: PHP 5.6 und MySQL 5.7
PHP 5.6 und MySQL 5.7
Zum Katalog: Einstieg in PHP 5.6 und MySQL 5.6
Einstieg in PHP 5.6 und MySQL 5.6
Zum Katalog: Responsive Webdesign
Responsive Webdesign
Zum Katalog: Moderne Websites entwickeln
Moderne Websites entwickeln
Zum Katalog: MySQL 5.6
MySQL 5.6




Copyright © Rheinwerk Verlag GmbH 2001 - 2002
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken und speichern. Ansonsten unterliegt das <openbook> denselben Bestimmungen wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
Die Veröffentlichung der Inhalte oder Teilen davon bedarf der ausdrücklichen schriftlichen Genehmigung der Rheinwerk Verlag GmbH. Falls Sie Interesse daran haben sollten, die Inhalte auf Ihrer Website oder einer CD anzubieten, melden Sie sich bitte bei: >> Zum Feedback-Formular


[Rheinwerk Computing]

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, fon: 0228.42150.0, fax 0228.42150.77, service@rheinwerk-verlag.de