Grundvoraussetzungen zur Homepage-Erstellung

Hier geht es zunächst darum sicherzustellen, dass auch wirklich die technischen Möglichkeiten gegeben sind, eine eigene Homepage ins Netz zu stellen. Folgendes braucht ihr dazu auf jeden Fall:

Webspace (also Speicherplatz der im Internet verfügbar ist und auf den ihr eure Dateien schreiben könnt),
einen HTML-Editor zum erstellen eurer Websites und
ein FTP-Programm, um eure HTML-Dateien auf den Webspace hochzuladen.

Ausführliche Anleitungen dazu hat Birgit schon zusammengeschrieben, darum gibt es hier nur nochmal eine kurze Zusammenfassung und ein paar Vorschläge im Detail.

Webspace

Am günstigsten und wahrscheinlich am häufigsten von unseren Teilnehmern verwendet wir hierfür das kostenlose Angebot bei arcor.de - die Anleitung, wie ihr dort einen Benutzer einrichtet, Webspace reserviert und für euch freischaltet solltet ihr bereits vor einigen Tagen bekommen haben.

Als Benutzernamen würde ich euch empfehlen einfach den selben zu nehmen, den ihr auch bei eurer Registrierung bei Wikiversity angegeben habt - so gibt es keine Verwirrungen und man kann euch leichter wieder erkennen.

Sobald ihr das erledigt habt, tragt am besten gleich die Internetadresse eurer Homepage in unsere Übersichtsliste bei Wikiversity ein.

HTML-Editor

Als nächstes braucht ihr ein Programm, um eure Website zu schreiben: Hier gibt es sehr unterschiedliche kostenfreie und kommerzielle Angebote, unter denen die bekanntesten wohl "FrontPage" und "Dreamweaver" sind. Vollkommen ausreichend ist allerdings der rein textbasierte "Editor", der bei jedem Windows unter "Zubehör" zu finden ist. Die Homepage in Textform zu schreiben ist auf jeden Fall die direkteste und genaueste Möglichkeit und bietet bereits alle Möglichkeiten.

Für den Anfang reicht eine ganz einfache Seite, die nur den Namen eurer Projekte und eine kurze Beschreibung anzeigt - ausgebaut werden kann diese dann später. Und so könnte der Text zum Beispiel aussehen, den ihr eingeben müsst, um das als HTML-Seite anzeigen zu lassen:

<html>
<head>
<title>Name des Projekts</title>
</head>
<body>
<h1>Name des Projekts</h1>
<p>Unser Projekt befasst sich mit der Sache der Leute im Land...</p>
</body>
</html>

Ersetzt in eurem Dokument einfach den Text zwischen <title> und </title>, <h1> und </h1>, sowie <p> und </p>! Wenn ihr das Dokument auf eurem Rechner abspeichert, müsst ihr als Dateityp: "Alle Dateitypen" einstellen und nennt das Dokument am besten: index.html Mit diesem Namen wird es später auf eurer Homepage als Startseite angezeigt.

Die <Klammern> werden schließlich alle verschwinden, sobald man die Datei über den Browser ansieht - aber sie sind dafür zuständig, WIE der Text richtig angezeigt wird: <title> lässt den Text in der Titelleiste eures Browsers erscheinen, <h1> ist eine Überschrift ersten Grades, wird also deutlich größer und mit etwas Abstand zum restlichen Text angezeigt und <p> ist ein Absatz, in dem schließlich der ganz normale Text steht.

Text-Editor oder FrontPage?

Ich werde im wesentlichen nur darauf eingehen, wie Quelltext mit dem Editor geschrieben wird und Programme wie FrontPage und Dreamweaver, mit denen Websites ja sehr viel "einfacher" gebastelt werden können, eher stiefmütterlich behandeln. Zum einen liegt das daran, dass diese Programme sich bereits größtenteils von selbst erklären und auch ausführliche Dokumentationen dazu verfügbar sind. Zum anderen aber auch, weil ich jedem empfehlen möchte, sich zumindest mit den absoluten Grundlagen des Quelltextes vertraut zu machen - denn das ist und bleibt der Kern einer Website, ob man sie nun selbst als Text schreibt oder mit so einem Programm erstellen "lässt".

Solche Programme, die übrigens auch als WYSIWYG-Editoren ("What You See Is What You Get") bezeichnet werden, schreiben schließlich auch nur einen Quelltext, der das umsetzt, was der Benutzer in fertiger Bildform eingibt. Das Problem dabei ist, dass es sich dabei gewissermaßen um eine Rückübersetzung in HTML-Code handelt, die erstens nicht eindeutig, zweitens oft nicht sehr effizient und drittens nicht genau ist. Das heisst: Der Benutzer gibt in das Programm nur ein, was er sehen will, und das Programm entwirft den Code, der sehr häufig unstrukturiert, für Menschen schwer durchschaubar ist und verschwenderisch mit Ressourcen umgeht. Es ist übrigens relativ schwierig, eine mit FrontPage erstellte Homepage mit einem Texteditor umzuschreiben, während FrontPage handgeschriebene HTML-Dokumente perfekt auswerten kann.

In jedem Fall kann aber anhand des Codes einiges an "Fine-Tuning" vorgenommen werden, kleine Veränderungen an der Seite, die FrontPage einfach nicht zulässt, sind nur mit grundlegenden Kenntnissen der HTML-Syntax umsetzbar. Trotzdem ist es natürlich nicht jedermanns Sache, sich in den Code einzulesen - und es ist für unsere Projekte auch nicht unbedingt notwendig.

Fazit: WYSIWYG-Editoren sind zwar deutlich benutzerfreundlicher und man kommt schneller zu anschaulichen Ergebnissen, aber der Quelltext wird vom Programm unsauberer geschrieben, als wenn man ihn direkt per Hand eintippen würde. Die Folge sind: Größere Dateien, evtl. falsche Darstellung in manchen Browsern und so manches ist überhaupt nicht möglich. Wenn man sich schließlich etwas in die HTML-Syntax eingearbeitet hat, kann man seine Websites auch mindestens genauso schnell als bloßen Text schreiben.

Es bleibt aber letztlich jedem IPK-Teilnehmer selbst überlassen, wie er an die Sache rangehen will. Ausreichend sind Homepages mit FrontPage allemal für unsere Projektseiten - nur ein Fachinformatiker oder Webdesigner würde das wohl niemals verwenden. Ich würde jedem gerne mal empfehlen auszuprobieren, nur mit dem Texteditor zu arbeiten, weil man dadurch mit Sicherheit zu einem besseren Verständnis der HTML-Technik gelangen kann. Wer daran aber kein oder kaum weiteres Interesse hat, würde wohl lieber den einfacheren Weg wählen.

Liste textbasierter Editoren

Windows Editor/Notepad: Der einfachste aber trotzdem ein ausreichender Editor, der vor allem bei jeder Windows Version enthalten ist. Gegenüber eigens für HTML-Entwicklung geschriebener Editoren hat er aber den Nachteil, dass Code-Elemente nicht farbig hervorgehoben werden und die Zeilenumbrüche evtl. Einrückungen nicht berücksichtigen (Zeilenumbrüche müssen ohnehin zu Beginn unter "Format" eingestellt werden.) Microsoft Word allerdings ist auf das Erstellen von Fließtexten o.Ä. ausgerichtet und mit seinen Formatierungen für Quelltext unbrauchbar.

Microsoft Frontpage: Obwohl Frontpage eigentlich ein WYSIWYG-Editor ist, kann man damit auch direkt den Quelltext bearbeiten: Gegenüber dem Editor mit dem Vorteil, dass einzelne Code-Elemente hervogehoben werden und der Text strukturierter erscheint (die Lesbarkeit verbessert sich hier um einiges) und dabei bleibt der Code sauberer, als wenn er mit der graphischen Oberfläche von Frontpage bearbeitet wird. Um den Quelltext bearbeiten muss einfach die Ansicht auf "Quelltext" (bzw. "Source-Code") umgestellt werden. Außerdem kann man über die verschiedenen Ansichten auch gleich sehen, wie sich eine Veränderung im Text schließlich im Browser in etwa auswirken wird.

OpenOffice.org: Umsonst herunterzuladen (OpenOffice.org-Homepage) und ähnlich praktisch wie die Microsoft Office Programme. Auch hier hätte man eine graphische Oberfläche zur Verfügung, mit den gleichen Nachteilen wie bei Frontpage. Erstellt man aber eine Neue HTML-Datei, kann man wiederum in die HTML-Quelltext Ansicht wechseln und dort arbeiten. Auf diese Weise ist das grundlegendste Gerüst einer HTML-Seite übrigens auch gleich vorgegeben.

Editoren unter Linux: Falls jemand nicht Microsoft Windows, sondern eine Linux Distribution verwenden sollte, sind dort eine Menge guter HTML-Quelltexteditoren zu finden. Beispielsweise Kate, Vim oder QuantaPlus.

Liste graphischer Editoren

Microsoft FrontPage: Oft schon bei Windows mitinstalliert, ansonsten aber nur käuflich zu haben.

OpenOffice: Die kostenlose Alternative zum Herunterladen.

Nvu: Ebenfalls kostenlos im Internet verfügbar, weniger aufwändig als Dreamweaver, aber mit Sicherheit ausreichend!

DreamWeaver: Professionell, komfortabel und teuer!

FTP-Programm

Auch hier steht eine Menge unterschiedlicher Angebote zum Download bereit. Am ehesten würde ich davon allerdings für alle Windows Benutzer FileZilla empfehlen.

Sobald ihr es auf euren Rechner geladen habt, könnt ihr die Datei doppelklicken und das Programm installieren - die einzelnen Schritte erklären sich eigentlich von selbst und in der Regel könnt ihr die Voreinstellungen einfach so lassen. Danach startet ihr das Programm und gebt die Adresse eures Servers ein (also wahrscheinlich: home.arcor.de ) NICHT die ganze Adresse eurer Homepage! Dafür gebt ihr euren Benutzernamen, mit dem ihr euch bei arcor registriert habt, und euer Passwort ein. In das letzte Feld, "Port:" müsst ihr einfach "21" schreiben und könnt dann "Verbinden".

Ladet eure Datei index.html auf den Webspace und ihr habt eine ganz einfach Homepage im Internet.