Da es immer wieder zu Problemen mit dem Einrichten des public_html - Ordners kommt, gibt es hier noch einmal eine kleine Zusammenfassung.

1. Wenn der Ordner "public_html" noch nicht in euerm Home vorhanden ist, muss dieser erstellt werden.
2. Dieser Ordner sowie euer HOME brauch folgende Rechte:
    - 701 bzw. "rwx-----x"
     (je nachdem mit welchem Programm ihr diese Rechte setzt)
3. Ab hier ist es dem Web-Sever und einem Script möglich eure persönliche Seite auszulesen.
   
   
4. Als nächster wichtiger Schritt für eine Seite sind die Rechte, die die "index.html" haben muss:
    - 604 bzw. "rw----r--"
5. Dies ist schon alles was in dem "public_html" - Ordner drin sein muß.
   
   
6. Daraus folgt folgende Grundstruktur:
   ~/public_html/
                          index.html
                          Ggf. weitere Dateien, die ihr benötigt.
   
   
7. Sollte es nun noch nicht funktionieren ist zu überprüfen, ob das Home-Laufwerk ebenfalls das x bei Other hat, also die Rechte 701.
8. WAS ABER NICHT REIN MUSS IST EINE ".htaccess" !!

Wie ihr in der Übersicht angezeigt werdet, steht weiter unten.

Viel Spaß mit der Seite.

HTML steht für "Hypertext Markup Language". Das beideutet es ist eine Beschreibungssprache für Texte, die Verweise (Links) auf andere Texte enthalten.

Von dieser "Sprache" gibt es verschiedene Versionen. Wie immer, wenn etwas in verschiedenen Versionen vorliegt, unterstützen die Programme, die diese Sprache interpretieren sollen (die Browser) nicht immer alle Teile der Sprache.

Als XML als Beschreibungssprache für alle möglichen Formen von Daten immer wichtiger wurden, wurde begonnen eine an HTML angelehnte Definition einer neuen Hypertext Beschreibungssprache zu entwickeln, deren erste Version im Jahre 2000 veröffentlicht wurde. Diese neue Sprache wurde als "eXtensible HyperText Markup Language" bezeichnet und trägt damit das Kürzel XHTML.

Die Zielsetzung dieser Sprachen ist reinen Text so schreiben zu können, dass bestimmte Textelemente mit einer Bedeutung versehen werden können. Es können damit Beispielsweise Überschriften, Absätze, Listenelemente oder Verweise auf andere Dokumente oder andere Teile des gleichen Dokuments als solche gekennzeichnet werden, so dass ein Programm (der Web-Browser) diese entsprechen interpretieren kann. Das Resultat dieser Anforderung ist z. B. dass eine Folge von Leerzeichen in HTML von Browsern immer als nur ein Leerzeichen dargestellt wird. Dadurch ist die Formatierung dess HTML-Quelltextes möglich ohne dass dies die Formatierung der Ausgabe beeinflusst.

Zuallererst ist weder HTML noch XHTML eine Programmiersprache. Mit (X)HTML kann man die Bedeutung von Text-Inhalten definieren, so dass ein Browser sie entsprechen darstellen kann. Es werden aber keine Algorithmen zur Lösung von Problemen geschrieben.

Außerdem sind weder HTML noch XHTML dazu gedacht exakte Layouts zu definieren. Auch wenn es sowohl in HTML als auch in XHTML Mechanismen gibt (sowohl eingebaute, als auch das "externe" CSS) um die Darstellung im Browser mit hohem Detailgrad zu steuern, ist dies nicht das Ziel von HTML. Das drückt sich unter anderem so aus, dass alle verfügbaren Browser leichte Unterschiede in der Darstellung bestimmter Formatierungen aufweisen, so dass ein wirklich pixelgenaues "festnageln" eines Elements an einer bestimmten Stelle teilweise nur mit aufwändigen Tricks machbar ist. Im Allgemeinen sollte man Versuchen der Versuchung von pixelgenauen Seitendesigns zu widerstehen und "fließende" Seiten zu erzeugen, die sich der aktuellen Fenster-Breite und Höhe anpassen.

Eine (X)HTML-Datei besteht aus ineinander verschachtelten Tags. Ein Tag besteht aus einer öffnenden spitzen Klammer "<", einem Namen, einer Reihe von Attributen (ggf. mit Werten) und einer schließenden spitzen Klammer ">". Tags schließen (meistens) einen bestimmten Textbereich ein. Um anzuzeigen, wo dieser Bereich aufhört, wird an dieser Stelle ein sogenanntes "schließendes Tag" verwendet. Dieses setzt sich aus der öffnenden spitzen Klammer "<", einem Schrägstrich "/" dem Tagnamen und der schließenden spitzen Klammer ">" zusammen.

Um einen Absatz als solchen zu deklarieren verwendet man den "Paragraph"-Tag <P> auf diese Weise:

<p> Dies ist der Text im Absatz </p>

Ein Bild im Text wird mit dem <img>-Tag eingefügt. Dieses Tag wird nicht verwendet um einem Text-Bereich eine Bedeutung zuzuweisen, und hat daher auch keinen "Inhalt" der eingeschlossen wird. Man nennt es ein "leeres Tag". Solche leeren Tags werden meist über bestimmte Attribute beeinflusst. Hier ein Beispiel für ein Bild das auf dem Server in der Datei "bild.png" abgelegt ist:

<img src="bild.png">

Hierfür hat das <img>-Tag das Attribut "src" das den Dateinamen des Bildes zugewiesen bekommt.

Der Grundsätzliche Aufbau einer (X)HTML-Datei ist nun wie folgt:

<!DOCTYPE [...]>
<html [...]>
<head>
<title>Titel der in der Titelzeile des Browsers angezeigt wird</title>
</head>
<body&gt
; Inhalt der Seite
</body>
</html>

Die mit [...] markierten Bereiche müssen ensprechend der Sprachversion (XHTML/HTML-Version) mit unterschiedlichen Inhalten gefüllt werden. Welche da die "richtigen" sind, lässt sich z. B. auf SELFHTML nachlesen.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
  <head>
    <meta name="author" content="Bugs Bunny" />
    <title>Meine Homepage</title>
  </head>
  <body>
    <p>It works.</p>
  </body>
</html>

Es gibt zwischen HTML 4.x und XHTML 1.x eine große Menge an Gemeinsamkeiten, aber auch einige "gemeine" Unterschiede. Man sollte sich daher beim Entwickeln einer Webseite früh darüber klar werden, ob diese Seite in XHTML oder HTML (und welcher Version dieser Sprache) geschrieben werden soll.

Einige der auffälligsten Unterschiede sind:

• Groß/Kleinschreibung
  Wärend die sogenannten Tags und deren Attribute in HTML sowohl groß als auch klein geschrieben werden dürfen, ist die Schreibweise der Tags und Attribute in XHTML nicht freigestellt. Tag und Attributnamen müssen immer klein geschrieben werden.
• Tags die nicht geschlossen werden (leere Tags)
  In HTML existieren einige Tags, die keine Bereich einschließen können. Beispiele hierfür sind das <img>-Tag und das <br>-Tag.
  In XML muss ein Tag immer auch mit einem schließenden Tag notiert werden. Für Tags, die keine Bereiche einschließen, muss hier also eine Lösung gefunden werden. Solche Tags können in XHTML auf 2 Arten notiert werden.
  Die erste Möglichkeit ist, einfach ein schließendes Tag anzuhängen: <img src="bild.png"></img> Die zweite (bevorzugte) Möglichkeit ist, den Tag mit einem "/" vor der schließenden Klammer zu notieren: <img src="bild.png" />
• Frames
  Gibt es in XHTML einfach nicht. Aufgrund der großen Menge an Sicherheitsproblemem mit Frames-Seiten (gerade wenn es um Authentifizierung geht, aber auch das Ausspionieren von Daten) sollte man, gerade wenn Serverseitige Programmiersprachen (wie z. B. PHP) vorliegen, aber sowieso auf die Verwendung von Frames verzichten.
• Attribute
  Attribute müssen in XHTML Werte haben. In HTML existieren eine Reihe von Attributen die keinen Wert haben. Das ist in XHTML nicht mehr erlaubt. ein Beispiel hierfür ist das "noshade" Attribut, des <hr>-Tags. Dieses muss in XHTML so notiert werden: noshade="noshade"
  
  

Die wichtigsten Elemente für den Bereich des <head> des Dokuments ist der Titel und die sogenannten Meta-Angaben.

Der Titel wird so notiert, wie in dem Beispiel in Kapitel 3 aufgeführt. Dieser Titel sollte im Allgemeinen aus reinem Text bestehen.

Die Meta-Angaben definieren bestimmte Eigenschaften des Dokuments. Dazu gehören:

• Verfasser
• Suchmaschinen-Schlagwörter
• Suchmaschinen-Verbote
• Text-Kodierung der Datei
• Weiterleitungen
• CSS-Definitionen
• Java-Skript Definitionen
• ...

Ein Beispiel für einen Seitenkopf findet ihr hier (in XHTML-Syntax): <head> <title>Jan's Homepage</title> <link rel="shortcut icon" href="http://www.fh-wedel.de/favicon.ico" type="image/x-icon" /> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Jan Schnackenberg" /> <meta name="description" content="DB-&Uuml;bungen, Office-Software, Access" /> <meta name="keywords" lang="de" content="Oracle, Access, Textverarbeitung" /> <meta name="keywords" lang="en" content="oracle, access, wordprocessing" /> </head> Was an diesem Beispiel auch erkennbar ist: In (X)HTML kann überall da, wo ein Leerzeichen stehen darf, auch ein Zeilenumbruch stehen. Man kann also, zwecks größerer Übersicht, intensiven Gebrauch von Zeilenumbrüchen machen.

Der Body einer (X)HTML-Datei enthält die Inhalte, die im Browserfenster dargestellt werden sollen. Hier wird also der Text hingeschrieben.

Text wird dabei normalerweise als Fließtext geschrieben, der mit Hilfe von Tags formatiert wird. Dabei besteht eine Vielzahl von Möglichkeiten den Text mit Grafiken, Tabellen, und anderen Elementen zu ergänzen.

Ein klitzekleines Beispiel für einen solchen Body: <body> <div id="Header">Jan's Homepage &gt; Startseite</div> <div id="Content"> <table> <tbody> <tr> <td>Raum</td> <td>E20</td> </tr> <tr> <td>Telefon</td> <td>0 41 03 / 80 48 - 20</td> </tr> <tr> <td>E-Mail</td> <td>snb@fh-wedel.de</td> </tr> </tbody> </table> </div> <div id="Menu"> <div class="navlevel0sel"><a href="/~snb/index.php" title="Kontakt-Infos">Kontakt</a></div> <div class="navlevel0"><a href="/~snb/DBA/index.php" title="DB-Anwendungen">DB-Anwendungen</a></div> <div class="navlevel0"><a href="/~snb/datenbanken/index.php" title="Datenbanken">Datenbanken</a></div> <div class="navlevel0"><a href="/~snb/officesoftware/index.php" title="Office Software">Office Software</a></div> <div class="navlevel0"><a href="/~ps2/" title="PS2-Übungen">PS2 (ext.)</a></div> <div class="navlevel0"><a href="/~snb/links.php" title="Links">Links</a></div> </div> </body> Ihr seht eine Seite, die mit sogenannten <div>-Tags entworfen wurde. Diese Tags definieren Bereiche einer Seite, die über CSS (Cascading Style Sheets) auf formatiert werden können.

Diese Seite besteht aus 3 Bereichen:

1. Einer Überschrift im <div> mit der ID "Header"
2. Dem Inhalt im <div> mit der ID "Content"
3. Dem Menü im <div> mit der ID "Menu"

Wer wissen will, wie das ganze fertig aussieht, schaut sich einfach diese Seite an.

Besonderheiten, auf die ich hier hinweisen will:

• Das &gt; in der Überschrift definiert das Zeichen > als sogenanntes "Entity". Dieses Zeichen ist ein Zeichen, dass für die (X)HTML-Syntax eine besondere Bedeutung hat. Solche Zeichen müssen als Entities notiert werden, damit sie nicht mit den echten Syntax-Zeichen verwechselt werden. Auch Sonderzeichen und Umlaute sollten auf diese Weise kodiert werden. Wer wissen will, wie sowas aussehen kann, kann sich ja mal den Quelltext dieser Seite (speziell die Bereiche wo ich (X)HTML-Code als Beispiel bringe) anschauen.
• Wie hier erkennbar ist, rücke ich auch XHTML-Code ein. Genau wie beim Programmieren in einer beliebigen Programmiersprache fördert dies die Übersichtlichkeit enorm. Das führt dazu, dass man beim späteren Ändern der Dateien wesentlich schneller die relevanten Stellen findet.
• Jedes Tag, dass geöffnet wird, wird auch wieder geschlossen. Das ist wichtig. Sonst passieren die merkwürdigsten Fehler in der Anzeige in den Browsern. Teilweise dummerweise nicht in allen, so dass die Fehler dann immer nur in den Browsern auftreten, mit denen man nicht getestet hat.

An dieser Stelle verweise ich (ich mache es mir mal einfach) wieder mal auf die SELFHTML Seite, die so gut wie alles, was man über den Aufbau von (X)HTML-Seiten wissen muss, erklärt. Dort findet man auch eine Kurzreferenz über die man die oben verwendeten Tags nachschlagen kann um herauszufinden, was dort gemacht wird.

Wenn ihr eine Webseite entwickelt, prüft sie regelmäßig mit einem HTML-Validator. Dadurch könnt ihr sicherstellen, dass ihr keine Fehler in den Code einbaut, die womöglich nur auf anderen Rechner zum Vorschein kommen und da dann für euch nicht nachvollziehbare Effekte hervorrufen. Ein solcher Validator ist der vom W3C. Für den Firefox-Browser ist eine Erweiterung verfügbar, die immer in der Statusleiste anzeigt, ob die aktuell geöffnete Seite aus gültigem HTML-Code besteht, oder nicht.

PHP ist nur endlich eine Programmiersprache. Wärend die Aussage "ich programmiere mit HTML" vollkommen falsch ist, da HTML nur eine Beschreibungssprache ist, kann jemandem der sagt "ich programmiere mit PHP" kein Fehler vorgeworfen werden.

PHP wurde mit dem Ziel entwickelt, eine in HTML einbettbare Programmiersprache zu erhalten. Die Syntax wurde C, Java und Perl abgeleitet, wobei mit der aktuellsten Inkarnation, PHP 5.x, viele Sprachelemente auf Objektorientierung optimiert wurden.

Der PHP-Code, der direkt in den HTML-Dateien notiert wird, wird auf dem Web-Server ausgeführt, bevor die Seite an den Client (den Web-Browser) gesendet wird. Dadurch können Webseiten dynamisch erstellt werden. Dateien, die vom PHP-Parser ausgeführt werden sollen, werden üblicherweise mit der Endung ".php" versehen. Das typische "Hallo Welt!" Beispiel in PHP könnte z.B. so aussehen: <html> <head> <title>Hallo Welt</title> </head> <body> <?PHP echo "Hallo Welt" ?> </body> </html> PHP-Code wird immer in einem speziellen Tag geschrieben. Dieses Tag beginnt mit "<?PHP", danach kommt der PHP-Code und am Ende steht ein "?>". Wird die obige Datei vom PHP-Parser gelesen, führt er den Code im PHP-Tag aus und ersetzt das gesamte Tag durch das, was in diesem Code ausgeführt wird. In diesem Fall kommt dann dieser Code beim Browser an: <html> <head> <title>Hallo Welt</title> </head> <body> Hallo Welt </body> </html> Dieser Code kann natürlich fast beliebig komplex werden. PHP besitzt viele Fähigkeiten, die ihr hier an der PTL/FH an anderen Programmiersprachen lernt.

Eine der (am Anfang) häufigsten Anwendungen von PHP ist das dynamische Zusammenbauen von Webseiten. Damit ist gemeint, dass man den Kopf, den Fuß und das Menü in sogenannten Vorlagen einmal notiert, und in allen Dateien einer Webpräsenz nur einbindet. Dadurch können Änderungen am Layout oder am Inhalt des Menüs gemacht werden, ohne alle Dateien anfassen zu müssen.

Hier findet ihr ein paar Dateien, die ihr einfach in euren public_html Ordner speichern und dann anpassen könnt.

• header.inc.php
  Beinhaltet den Kopf für die Webseiten. Hier sind einige Bereiche die ihr zwingend an eure Daten anpassen müsst. Ersetzt alle [TODO: ...] Bereiche mit den dort angegebenen Werten.
• footer.inc.php
  Beinhaltet den Fuß für die Webseiten. Hier wird unter anderem das Menü eingebunden. Den Aufruf könntet ihr natürlich auch in den Header schieben.
• menu.inc.php
  Beinhaltet euer Menü. Das müsst ihr, genau wie die Header-Datei, auf eure Seite anpassen.
• index.php
  Die Hauptseite. In jedem Ordner gibt es eine Datei, die angezeigt wird, wenn kein Dateiname angegeben wird. Diese heißt normalerweise index.html oder index.php.
• style.css
  Die Datei, die darür sorgt, dass die Webseiten nicht nur schwarz/weiß, sondern etwas abwechslungsreicher angezeigt werden. Auf das Format dieser Stylesheet-Befehle (CSS) sind wir hier nicht eingegangen. Ihr könnt diese Datei natürlich nach belieben anpassen oder einfach weglassen.

Um neue Dateien anzulegen, könnt ihr einfach die Datei "index.php" unter einem anderen Namen abspeichern und den Inhalt anpassen.

Einerseits müsst ihr die Berechtigungen richtig setzen. Sowohl euer Home-Verzeichnis, als auch das public_html-Verzeichnis darin müssen mit den Rechten "701" bzw. "rwx-----x" (je nachdem mit welchem Programm ihr die Rechte setzt) versehen sein. Also keine Rechte für die Gruppe und nur Ausführungsrechte für alle anderen. Die Dateien in eurem public_html-Ordner müssen die Berechtigungen "604" bzw. "rw----r--" haben. Also für euch Lese- und Schreibrechte und ansonsten nur Lese-Rechte für "alle anderen".

Damit in der Liste auf stud.fh-wedel.de der Name eurer Homepage (mittlere Spalte) auftaucht, müsst ihr einen entsprechenden Titel im Kopf der index.html Eintragen.

Damit in der selben Liste euer Name (linke Spalte) auftaucht, müsst ihr den Meta-Tag "author" mit eurem Namen ergänzen. Wollt ihr, dass in dieser Liste beim Klick auf euren Namen gleich das E-Mail Programm des Besuchers aufgeht, dann muss der "content" so gefüllt werden, wie in der "header.inc.php" vorgeschlagen.

• Das (deutschsprachige) (X)HTML Kompendium:
    SELFHTML
• Die PHP-Webseiten (englisch):
    php.net
• Eine deutsche Webseite die sich mit PHP beschäftigt:
    PHP Center
• Der HTML-Validator des W3C:
    HTML-Validator