HTML-Kurs, Raffia.ch

Eine eigene Homepage basteln

Ein Einstieg in HTML-, CSS- und PHP-Code.

Hier findest du ZOjO-XS, ein kleines CMS (Content Management System). Mit Zojo, das in PHP geschrieben wurde, kannst du eine eigene Homepage erstellen und sie auch online pflegen.

Der Zojo Download enthält eine kurze Doku und einige Hilfeseiten, die auch als Beispiele dienen. Das CMS besteht aus PHP-Code für die Seiten- und Menüerzeugung, einem Online-Texteditor, Markdown-zu-HTML Konverter, Filemanager, Fotogalerie und Layout-Templates, die das Aussehen der Site festlegen. Das Layout und die Gestaltung der Homepage sind mittels HTML-Templates einfach zu ändern.

ZOjO ist kostenfrei!

ZOjO README, vor dem Download lesen

Download ZOjO-XS-1.0 (ZIP 970kB)

Die Homepage erstellen, ändern und testen

Dazu den XAMPP Apache-Webserver herunterladen und lokal installieren.

XAMPP Logo Um die PHP-Skripte und die Darstellung der Website zu testen und zu ändern, muss vorerst ein Webserver lokal installiert werden. Dies geht unkompliziert (auch ohne Admin-Rechte) auf einem lokalen Laufwerk (z.B. D:\) mit dem XAMPP-Apache-Paket.

Nach der Installation des Apache-Servers: Den Ordner "htdocs\" umbenennen und einen leeren htdocs-Ordner neu erstellen. Alle Dateien und Skripte der Site in diesen Ordner kopieren.

XAMPP-Start Server starten mit dem Programm xampp_start.exe.

Gib nun im Client (dem Browser) in die URL-Zeile http://localhost ein, um die Anfrage an den Apache zu starten. Dieser sucht sich nun den Einstieg in deine Website in Form einer index.php-Datei im Ordner htdocs (falls nicht vorhanden: index.html oder index.htm) und liefert diese an den Client aus. Falls PHP-Codezeilen darin enthalten sind, werden diese zuerst abgearbeitet und die resultierende Seite dann an den Client gesendet.

Um Quelltext zu schreiben eignet sich ein Text-Editor wie z.B. der Notepad++ sehr gut. Mit diesem oder einem ähnlichen Editor kannst du alle Arten von Code editieren (HTML, CSS, PHP, C etc.).
Grundsätzlich könntest du auch HTML-Quellen aus einem entsprechenden Web-Design-Tool (wie Dreamweaver, FrontPage, KompoZer etc.) mittels "copy-paste" über den Editor in deine HTML-Seiten importieren.

Wissen (und Halbwissen) zu den Themen "HTML-Einführung, HTML-Tags, HTML-Tutorial, CSS, PHP" findet sich tonnenweise im Internet.

Einige wichtige HTML-Tags

H1 ... H6 - Header/Titel
p - Paragraph/Absatz
br - Break/Zeilenumbruch
a - Link
img - Bild einfügen
pre - pre-formatted/original formatierte Darstellung
hr - horizontal ruler/Trennstrich horizontal

Bild einfügen

Bild einfügen, dieser HTML-Tag tut's:

<img width="100%" alt="Liege" src="content/media/liegestuhl.jpg">

Liege

Erweiterungen

  1. Erstelle eine Seite mit deinen Lieblingslinks.
  2. Ergänze deine Website um weitere Seiten zu einem beliebigen Thema deiner Wahl.
  3. Erstelle eine dritte Spalte rechts, z.B. als News-Container.
  4. Analysiere die CSS-Formatierungen und die PHP-Funktionen um sie zu verändern oder zu erweitern.
  5. Erstelle eine HTML-Seite mit Passwortschutz (Tipp: PHP, Cookies, evtl. eine Session starten...).
  6. Erstelle einen Click- oder Zugriffszähler mit PHP. Zählerstand in Datei auf dem Server abspeichern.
  7. Informiere dich über Sicherheitsfragen rund um PHP Skripte (XSS, URL-Parameter, Session-Uebernahme etc.).
    Google (mit Suche)