Kurs:Internet- und Projektkompetenz/Projekthomepage

Ein wichtiger Teil von IPK besteht in der Präsentation der einzelnen Projekte auf einer eigenen Projekthomepage: Forschungshypothese, Projektdurchführung (Projekttagebuch) und abschließende Ergebnisse sollen so nicht nur virtuell abrufbar sein, sondern stellen gleichzeitig auch die Grundlage für eine abschließende Präsentation der gesammelten Erkenntnisse dar.

Auf dieser Seite soll deshalb Grundlagenwissen vermittelt werden, um auch Teilnehmer ohne jedwede Vorkenntnisse in die Lage zu versetzen, über die Wikiversity hinaus ihre jeweiligen Ergebnisse ansprechend zu präsentieren. Die folgenden Erklärungen richten sich deshalb vor allem an Anfänger.

Sollten beim Erstellen der Projekthomepage Fragen auftauchen, die hier nicht oder nur unzureichend beantwortet werden, bitte einfach auf der Diskussionsseite (oder direkt beim Tutor) melden! Gleiches gilt selbstverständlich auch für evtl. Fehler oder Unklarheiten im Text (einfach direkt editieren).

Projekthomepage erstellen - gestalten - veröffentlichen

Die Projekthomepage soll Aushängeschild eines jeden Teilnehmers sein, auf der die erarbeiteten Projektergebnisse einer breiten Öffentlichkeit vorgestellt werden. Neben einer Präsentation im Internet kann sie auch die Basis für im Rahmen von IPK veranstalteten Präsenzpräsentationen der erarbeiteten Projekte sein. Im folgenden werden vor allem drei Schritte detailliert betrachtet: Zunächst soll Speicherplatz für die Webseite (Webhosting) ausgewählt und registriert und anschließend eine erste einfache Homepage gestaltet werden. Zu guter Letzt sollen dann die fertigen Seiten im Web veröffentlicht werden.

Anmeldung bei einem Hoster

Bevor man mit der eigentlichen Arbeit beginnen kann, benötigt man zunächst Speicherplatz im Internet, auf dem man später eine erstellte Webseite ablegen und übers Internet aufrufen kann. Ein erster Schritt ist deshalb die Anmeldung bei einem sogenannten Hoster, der den Speicherplatz (den Webspace) bereitstellt. Das Angebot ist hierbei unüberschaubar - von teuren Hosting-Komplettpaketen bis hin zu mehr oder weniger vorteilhaften kostenlosen Angeboten lässt sich im Internet so gut wie alles finden (z.B. auch über zahlreiche Verzeichnislisten wie das entsprechende Google-Verzeichnis). Für die zu erstellende IPK-Homepage reichen diese kostenlose Angebote in jedem Fall aus.

> Die Wahl des richtigen Anbieters

Die bisherigen Generationen an IPK-Teilnehmern haben bisher häufig auf das Angebot von Arcor.de zurückgegriffen - eine recht einfache, aber zuverlässige Lösung. Wer schon etwas mehr Erfahrung hat oder einfach mehr Möglichkeiten für spätere Erweiterungen haben will, kann sich z.B. auch bei den Angeboten von pytal.de oder uttx registrieren - hier werden noch weitere Features wie zusätzliche Skritpsprachen-Unterstütztung angeboten, und auch diese Angebote sind kostenlos.

> Registrierung / Anmeldung beim Hoster

Wählt man das Angebot von Arcor, muss man sich auf der Arcor-Webseite auf der linken Leiste für den "PIA" registrieren - eine Erfindung von Arcor, die den zentralen Zugang zu allen angebotenen Diensten erleichtern soll. Zur Anmeldung wählt man "PIA Basic registrieren", was etwas verwirrend mit "Arcor Freemail + Fotoalbum" überschrieben ist. Nachdem man alle notwendigen Daten eingegeben hat, bekommt man die entsprechenden Daten zugeschickt. Bei Pytal läuft die Prozedur wie folgt ab: Hier bekommt man über den Link "kostenlos registrieren" zunächst einen Aktivierungscode zugeschickt, den man dann auf der Pytal-Seite eingeben muss, bevor man zum Anmeldeformular gelangt. Normalerweise erhält man nach erfolgreicher Anmeldung eine kleine Bestätigungsmail - der Grundstein für eine eigene Homepage ist also gesetzt!

Im Falle von Arcor läuft das Ganze noch ein bisschen anders: Zunächst kriegt man nur eine Email zugeschickt, in der man per Link die angegebene Emailadresse bestätigen muss. Ist das getan, kann man sich auf der Arcor-Seite einloggen und wählt aus dem Menü links unten "Homepage-Center"-> "Ihre Homepage" -> Homepage anlegen. Der eigene Account ist dann sofort um eine wichtige Funktion reicher: ab jetzt kann man seine Homepage bei Arcor hochladen! Die Daten dafür lauten: FTP-Server: home.arcor.de Benutzer: [wie Loginname] Passwort: [wie online Passwort]

Erstellen der Homepage

Im Rahmen von IPK soll nun eine projektbegleitende Homepage erstellt werden, auf der die Forschungsvorhaben der einzelnen Gruppen dokumentiert werden. Auf der Projekthomepage soll deshalb sowohl die Ausgangshypothese als Basis des jeweiligen Projekts vorgestellt werden, anschließend soll auch der weitere Projektverlauf (Rechercheschwerpunkte, Tagebücher) aufgezeigt und schlussendlich eine präsentationsfähige Zusammenstellung der Projektergebnisse online gestellt werden. Um zusätzlich Möglichkeiten zur Kontaktaufnahme / Vergrößerung des spezifischen Wissensnetzes zu schaffen, soll außerdem die eigene IPK-Gruppe kurz vorgestellt werden - alles in allem eine sicherlich nicht zu unterschätzende Arbeit, auch wenn es im Prinzip nach mehr Aufwand klingt, als tatsächlich von Nöten ist... Eine Übersicht über die Projekthomepages der letzten IPK-Generationen findet ihr in dieser Liste.

Im folgenden soll nun kurz detailliert auf die Anforderungen an die Projekthomepage eingegangen werden, bevor grundlegendes Wissen über HTML - die sogenannte Hypertext Markup Language, die man normalerweise zur Erstellung von Webseiten verwendet - Schritt für Schritt vermittelt wird.

> Anforderungen an die IPK-Projekthomepage

Wie schon erwähnt, soll die Homepage sowohl Andockstelle für die Gruppe zu externen Fachkräften sein, als auch umfassend über das bearbeitete Projekt informieren. Zentrale Seiten sollten deshalb sein:

1. Die Forschungshypothese - Darlegung, Erläuterung, evtl. Kritik (mögliche Probleme?)
2. Das Projekttagebuch / Reisetagebuch - wobei letzteres Priorität haben kann. Mehr dazu weiter unten. (Link einfügen!)
3. Optional ergänzend: Die Projektdurchführung - sachliche Darlegung der einzelnen Projektschritte (Recherche, Exkursion, Auswertung ...)
4. Die Forschungsergebnisse - Präsentation der ausgewerteten Informationen / Überprüfung der Forschungshypothese
5. Die Forschungsgruppe - Kurze Informationen über Zusammensetzung ihrer Projektgruppe, evtl. inkl. Hintergrundinformationen über IPK

Die hier gezeigte Organisation ist allerdings nicht bindend, sinnvolle Umstrukturierung der Daten ist sogar ausdrücklich erwünscht. So sind beispielsweise die Punkte 3 (Durchführung), 5 (Gruppenmitglieder / Kontakt) zusätzlich zu Materiallinks in der Vorlage aus dem WS 05/06 unter Projektdesign zusammengefasst. Die Teilnehmer sind deshalb aufgefordert, die für ihre Situation am besten geeignete Präsentationsweise zu planen und auf der Webseite zu präsentieren.

> Projektseiten-Vorlage

Die Teilnehmer können zur Erstellung ihrer Projektseiten auf eigens hierfür erstellte Vorlagendateien zurückgreifen.

(...)

Grundsätzlich soll eine abgewandelte Variante dieser Seitenvorlagen auch in dieser Generation den Teilnehmern wieder zur Verfügung gestellt werden. Zum Bearbeiten und Anpassen dieser Dateien sind gleichwohl wie zur Erstellung eigener Seiten ohne diese Vorlagen sind allerdings zumindest grundlegende HTML-Kenntnisse von Nöten, auf die hier nun eingegangen werden soll.

> Bearbeiten und Erstellen von HTML-Dateien

Um eine Projekthomepage zu erstellen, die dann über den Browser im Internet aufgerufen werden kann, müssen sogenannte HTML-Seiten angelegt werden. Im Grunde handelt es sich dabei um Textdateien, bei denen bestimmte Elemente besonders gekennzeichnet sind und so die endgültige Anzeige im Browser (also Internet Explorer, Firefox, Opera etc.) bestimmen. Eine Seite der Homepage entspricht dabei im Normalfall auch einer HTML-Datei, diese tragen zumeist die Endung .html oder .htm (beide können gleichermaßen - sofern einheitlich - verwendet werden). In der Seite projekttagebuch.html können später also beispielsweise alle Inhalte abgerufen werden, die in eben dieser Datei im HTML-Quelltext festgehalten sind.

Um eine HTML-Seite zu erstellen, braucht man zunächst einmal eigentlich nur einen Editor, mit dem man den sogenannten Quelltext einsehen kann. Unter Windows kann man beispielsweise auf den vorinstallierten Text-Editor zurückgreifen, komfortablere Alternativen bieten aber (neben einer Fülle weiterer Funktionen) oftmals noch eine Vorschau der Seite, wie sie später im Browser angezeigt wird. Andere Editoren - wie beispielsweise MS Frontpage - beschränken sich primär auf diese Browservorschau und erlauben es sogar, diese Vorschau direkt zu editieren. Solche WYSIWYG-Editoren (What You See Is What You Get) wandeln dann die angezeigte Seite automatisch in entsprechenden HTML-Quelltext um.

Im Rahmen des IPK-Kurses ist es letztendlich freigestellt, ob man die eigene Projekthomepage lieber unter der Verwendung von Vorlagen erstellt oder nicht - auch die Wahl des Editors ist natürlich jedem selbst überlassen. Gerade zum Bearbeiten einer Vorlagendatei sind aber oftmals grundlegende Kenntnisse HTML nützlich.

> Grundstruktur von HTML-Dateien

Grundsätzlich wird das Aussehen von Webseiten - wo welche Textblöcke stehen, wann etwas farbig erscheint, wo z.B. eine Tabelle erscheint - durch das Zusammenspiel von unterschiedlichen HTML-Elementen bestimmt. Im Grunde bestehen HTML-Dokumente aus einem einer Ansammlung von Textzeichen, in der diese relevanten Elemente - auch Tags genannt - besonders wichtig sind. Alle HTML-Elemente werden dabei von zwei spitzen Klammern eingerahmt: <HTML-Element> Gleichzeitig existiert zu so gut wie jedem Tag ein entsprechendes Pendant, das den Gültigkeitsbereich des Tags einschränkt.

<h1>Überschrift</h1>

In diesem Falle signalisiert <h1> den Beginn einer Überschrift (h = heading), das Pendant </h1> beschränkt die "Wirkung" dieses Tags. Alles zwischen diesen beiden Tags (in diesem Fall der Schriftzug "Überschrift") wird entsprechend den Vorgaben, die mit dem Tag (<h1>) verknüpft sind, formatiert - in diesem Fall wird eine große Überschrift dargestellt. Bis auf wenige Ausnahmen hat jeder HTML-Tag ein solches Pendant, und letztendlich setzt sich jede HTML-Datei lediglich aus einer Ansammlung dieser Elemente zusammen, die mit unterschiedlicher Wirkungsweise die Darstellungsform des ansonsten in der HTML-Datei enthaltenen Fließtext beeinflussen.

Im folgenden ist die Grundstruktur einer HTML-Datei aufgezeigt, die zwingend in jeder Webseite enthalten sein muss (wenn auch in z.T. abgewandelter Form):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Beschreibung der Seite</title>
</head>
<body>

</body>
</html>

Während die Bedeutung der ersten zwei Zeilen hier im Moment kurz keine Rolle spielen soll, ist die restliche Grundstruktur klar nachvollziehbar: Die gesamte HTML-Datei wird dabei eingerahmt durch die Elemente <html>...</html>, die so den Anfang und das Ende einer HTML-Datei markieren. Es folgt der Seitenkopf - notiert zwischen <head>...</head>, in den alle wichtigen Information über die Webseite eingetragen werden - wie z.B. Autor, Such-Schlagwörter oder eben den Titel der Webseite, der zwischen <title>...</title> notiert wird und bei Betrachtung der Webseite ganz oben in der Titelleiste des Browsers erscheint. Der eigentlich interessante Teil liegt zwischen <body>...</body>: Alles, was zwischen diesen beiden Tags steht, erscheint schlussendlich im Browserfenster, d.h. sämtliche Inhalte der fertigen Webseite müssen vom body-Tag eingerahmt werden. Bei der Interpretation dieses Inhalts spielt die sogenannte Doctype-Deklaration eine wichtige Rolle, die in jedem HTML-Dokument vor dem einleitenden <html>-Tag stehen sollte und Informationen darüber liefert, gemäß welchem HTML-Version der Browser die folgenden HTML-Befehle interpretieren soll. Die im Beispiel angegebene Doctype-Deklaration erlaubt auch Notation von HTML-Elementen, die nach strikter Auslegung nicht möglich wären - für eine erste Projekthomepage ist eine derartige Deklaration durchaus angemessen und kann einfach übernommen werden. Auf SelfHTML findet man hierzu weiterführende Infos zu HTML-Kopfdaten und Doctype-Deklarationen.

> Grundlegende HTML-Elemente

Der Tag <p> leitet einen Textblock ein:

<p>Hier steht ein Text-Absatz</p>

(Fontformatierung über CSS etc.)

Aufzählungen werden über die Tags <ol> (ordered list) bzw. <ul> (unordered list) eingeleitet, die einzelnen Listenpunkte werden durch <li> markiert:

<ol>
<li>Aufzählungspunkt 1</li>
<li>Aufzählungspunkt 2</li>
<li>Aufzählungspunkt 3</li>
</ol>

(to be continued)

> Links in HTML

Eines der sicherlich wichtigsten Elemente bei der Erstellung einer Webseite ist die Verbindung einzelner Dateien oder logischer Abschnitte durch Hyperlinks. In HTML werden diese über das Element

<a href="(Zieladresse)">(Linktext)</a>

realisiert, wobei a für engl. anchor = Anker steht und href für hyper(text) reference. Wichtig ist die Unterscheidung zwischen Projekt-internen Verweisen auf der einen und Links zu externen Dateien / Webseiten auf der anderen Seite. Bei projekt-externen Links muss dabei die komplette Adresse angegeben werden, zu dem der Link führen soll - ein Link zur IPK-Wiki-Seite könnte in HTML also ungefähr so aussehen:

<a href="http://de.wikiversity.org/wiki/Kurs:Internet-_und_Projektkompetenz">IPK-Kurs-Wiki</a>

, wobei der zwischen den <a> und </a> angegebene Text ("IPK-Kurs-Wiki") im Browserfenster dann als hervorgehobener Link angezeigt wird. Bei projekt-internen Links ändert sich die Notation des Verweises ein bisschen; hier gibt man nicht die komplette Adresse der Zieldatei an, sondern benutzt eine relative Pfadangabe:

<a href="links.html">Links</a>

verweist z.B. auf eine Datei namens links.html, die im gleichen Verzeichnis liegt wie die Datei, in der dieser Verweis zu finden ist.

Hat man beispielsweise eine zentrale Startseite und möchte von dort einen Link auf eine Datei tagebuch.html im Unterordner projekt/ setzen, ergibt sich daraus eine entsprechend modifizierte relative Pfadangabe: <a href="projekt/tagebuch.html">(Linktext)</a> Das gleiche Prinzip funktioniert auch in die umgekehrter Richtung, also beim Verweis auf Dateien in übergeordneten Ordnern: <a href="../tagebuch.html">(Linktext)</a> ist ein Link zu einer Datei tagebuch.html, die eine Ebene über der Datei liegt, in der dieser Link zu finden ist. ../ steht hierbei für eine Verzeichnisebene, sodass sich bei weiter verzweigten Projekten diese Notation beliebig fortführen lässt. Weitere Hinweise zu relativen Pfaden finden sich z.B. auch in SELFHTML.

Bei der Organisation kleinerer Projekte bietet es sich z.B. an, alle HTML-Dateien im gleichen Ordner zu speichern - und zwar bei möglichst identischer Ordnerstruktur auf der lokalen Festplatte und auf dem Webspace. Wichtig ist es auch, beim Erstellen von Links die von manchen Programmen automatisch erstellten absoluten Verweise auf eine lokale Datei (z.B. C:\Webseite\index.html) zu vermeiden - auf dem eigenen Computer aufgerufen mögen diese Verweise wie gewünscht funktionieren, auf dem Webspace aufgerufen gehen solche Links dann allerdings ins Leere.

Außerdem ist bei der Angabe von Verweisen auf die korrekte Schreibweise zu achten, v.a. die Unterscheidung zwischen groß und klein geschriebenen Pfadangaben ist wichtig - ein Link auf <a href="webseite/links.html">...</a> führt nämlich zu einer anderen Datei als <a href="webseite/Links.html">...</a>.

Für die Erstellung einer kleinen Homepage können noch zwei andere Arten von Verweisen wichtig sein: Zunächst wäre da die Möglichkeit, mittels Anker-Verweisen innerhalb eines einzelnen längeren Dokuments Verweise auf bestimmte Abschnitte oder Textstellen zu setzten, um z.B. von einem vorangestellten Inhaltsverzeichnis direkt den Sprung zu den jeweiligen Unterkapiteln zu ermöglichen. Wenn man also auf die "Auslagerung" der entsprechenden Kapitel auf andere HTML-Seiten verzichten möchte, sondern Links zu Passagen innerhalb des selben Dokuments anbringen möchte, kann man hierzu sogenannte "Anker" definieren und darauf verlinken.

Den Zielpunkt eines solchen Links - beispielsweise eine Zwischenüberschrift <h2>...</h2> definiert man durch das Hinzufügen des Attributs id=ankername. Die Angabe dieses Ankernamens im eigentlichen Link-Element ermöglicht dann diesen einfachen Verweis wie folgt:

<a href="#ankername">Spring zur Überschrift!</a>
(...)
<h2 id="ankername">Überschrift</h2>

Selbstverständlich kann das Attribut id=ankername auch bei anderen HTML-Elementen als <h2>...</h2> eingefügt werden - manchmal können sich dadurch allerdings Probleme ergeben, die mit einem Rückgriff auf eine eigentlich veraltete Schreibweise umgangen werden können. Wer dabei ganz sicher gehen will kann einfach beide Schreibweisen an den Zielpunkt des Links hintereinander eintragen, was dann wie folgt aussieht:

<h2><a name="ankername" id="ankername">Text der Überschrift</a></h2>

Ein weiteres wichtiges Anwendungsfeld des Elements <a> ist Setzen von Verweisen auf E-Mail-Adressen, um z.B. Besuchern einer Webseite eine Möglichkeit zu bieten, schnell und unkompliziert mit den Autoren der Webseite in Verbindung zu treten. Hierzu wird das Attribut mailto: gefolgt von der jeweiligen E-Mail-Adresse notiert, auf die verwiesen werden soll. Ein Link auf die Adresse kontakt@projektseite.de sieht dann im Quelltext entsprechend so aus:

<a href="mailto:kontakt@projektseite.de">(Linktext)</a>

Bei einem Benutzer, der auf den betreffenden Link klickt, öffnet sich - so es die verwendete Software unterstützt - das verwendete Email-Programm mit eingefügter Kontakt-Adresse. Allerdings sollte man nicht immer davon ausgehen, dass dies bei jedem Anwender fehlerfrei funktioniert - es empfiehlt sich deshalb, die angegebene Adresse zusätzlich noch im entsprechenden Linktext zu wiederholen, sodass sie auch ohne weiteres Zutun des Benutzers erkennbar ist.

> Farben in HTML

Farben kann man in HTML an zwei stellen einsetzen. Einmal um einen Text in einer anderen Farbe auszugeben, zb. eine Überschrifft (<h1></h1> etc.), einen Paragraphen (<p></p>) oder auch einen Link (<a></a>). Man kann dazu die Standart Farben aus HTML verwenden,

<h1 color=blue>Diese Überschrift wird dann Blau</h1>
<p color=green>Dieser Paragraph wird dann Grün</p>
<a href="Der Link" color=red>Der Link wird dann Rot</a>

oder man gibt die Farbe als Hexadezimalcode ein.

<h1 color=#0000ff>Diese Überschrift wird dann Blau</h1>
<p color=#00ff00>Dieser Paragraph wird dann Grün</p>
<a href="Der Link" color=#ff0000>Die Link wird dann Rot</a>

Als zweites kann man auch die Hintergrundfarbe ändern, das macht man mit background-color, man kann die Hintergrundfarbe einer ganzen Seite ändern,

<body background-color=blue>

</body>

oder einzelne bereiche,

<p background-color=yellow>Der Hintergrund dieses Paragraphen wird Gelb</p>

Alle Farbänderungen kann man auch in einer externen CSS-Datei vornehmen.

> Bilder in HTML

Bilder bindet man in HTML mit dem <img /> tag ein, dabei ist es wichtig die Herkunft bzw. den Ort an dem sich das Bild befindet anzugeben, dies tut man durch (src).

<img src="http://upload.wikimedia.org/wikipedia/commons/f/f0/Wikipedia-logo-de.png" />

wenn das Bild sich in beisßielsweise in dem Unterordner "Image" befindet, wird das Bild wie folgt eingebunden.

<img src="Image/Test.png" />

dabei kommt es auch auf die Groß/Klein schreibung an.

> Tabellen in HTML

Tabellen beginne immer mit <table> und enden mit </table> . Innerhalb der Tabelle werden durch die Tags <tr> und </tr> Zeilen geöffnet bzw. geschlossen. Durch die Tags <th> und </th> bzw. <td> und </td> werden Zellen erstellt, th steht für eine Kopfzellen (im normalfall Fett und zentriert), td steht für eine normale Zelle (keine besonderen eigenschaften).

in dem Beispiel ist ein Rand (border) um die Zellen besser zu sehen.

<table border="1">
  <tr>
    <th>Berlin</th>
    <th>Hamburg</th>
    <th>München</th>
  </tr>
  <tr>
    <td>Miljöh</td>
    <td>Kiez</td>
    <td>Bierdampf</td>
  </tr>
  <tr>
    <td>Buletten</td>
    <td>Frikadellen</td>
    <td>Fleischpflanzerl</td>
  </tr>
</table>

> Organisation der Projekthomepage (Projektstruktur)

- Hinweise auf Navigationslisten - was boch?

Hochladen der Homepage

Nach erfolgreicher Registrierung in Schritt 1 hat man also seinen eigenen kleinen Speicherplatz im Internet - damit aber die eigene Projekthomepage für über das Internet erreichbar ist, muss sie ebenda veröffentlicht werden. Die übliche Prozedur zur Veröffentlichung der Webseite, die als .html-Dokument auf dem lokalen Computer gespeichert bisher auch nur dort abrufbar war, ist das Hochladen (Upload) der Dateien auf den Webspace mittels eines sogenannten FTP-Programms.

> Wichtig: FTP-Zugangsdaten

Bevor man sich an die Auswahl eines solchen Programms macht, sollte man sich noch kurz die entsprechenden Zugangsdaten heraussuchen, die zur Anmeldung beim Hoster (Arcor, ...) und somit zum erfolgreichen Hochladen nötig sind. Dies sind nicht (bzw. nicht ausschließlich) die Zugangsdaten, die man bei der Registrierung angegeben / ausgewählt hat. Zwingend erforderlich sind ein Username, ein Passwort und die Adresse eines Servers, auf den man die erstellte Homepage hochläd.

(Arcor herausfinden)

Im Falle einer Registrierung bei UTTX hat man die nötigen Zugangsdaten sogar schon direkt nach der Anmeldung per Mail zugeschickt bekommen: In diesem Fall ist der gewählte Name ("beispielname") auch der Username für den FTP-Zugang, auch das Passwort ist gleich. Achtung: Seit kurzem haben sich die FTP-Serveradressen geändert, sodass man z.T. in alten Bestätigungsmails noch die alte Adresse findet (beispielname.uttx.net). Korrekt ist nunmehr das Kürzel ftp.beispielname.uttx.net.

Ein wenig aufwändiger, dafür aber auch ungleich sicherer läuft alles bei Pytal ab: Hier muss man sich zunächst auf der Webseite einloggen und einen eigenen FTP-Zugang aktivieren. Nach dem Einloggen folgt man dem Link "Webhosting", woraufhin man alle unter dem eigenen Benutzername angelegten Homepage-Adressen angezeigt bekommt. Hinter dem Adressnamen finden sich weitere Informationen zum Konto, unter dem Kürzel FTP sollte ein rotes Kreuz anzeigen, dass der FTP-Zugang noch deaktiviert ist. Ein kleiner Klick und die Eingabe eines frei wählbaren Passworts schaffen hier Abhilfe :)

> Konfiguration der FTP-Software

Im folgenden müssen nun die Zugangsdaten zum FTP-Server im gewählten Programm eingegeben werden, um den Verbindunsaufbau zu ermöglichen. Im Falle von WS_FTP gibt es den sogenannten Connection Wizard, der als großer Button in der Hauptleiste nicht zu verfehlen ist. Hier gibt man nacheinander zunächst einen beliebigen, möglichst prägnanten Namen für die Verbindung, anschließend den "Connection Type" (auf "FTP" belassen), die Serveradresse und zu guter Letzt den Usernamen und das zugehörige Passwort eingeben. Einmal erstellte Verbindungen können auch im nachhinein über File>Sitemanager>Edit geändert werden.

Im Falle von SmartFTP fehlt leider ein komfortabler "Connection Wizard" nichtsdestotrotz ist auch hier der Aufbau der FTP-Verbindung nicht komplizierter. Über File>New Remote Browser gelangt man zu einem Dialogfenster, in das man die eigenen FTP-Daten eingeben muss. "Protocol: Normal FTP" bleibt unverändert, bei "Host" trägt man die Serveradresse ein - auch die Port-Nummer sollte unverändert auf 21 belassen werden. Wichtig sind dann die Einträge "Logintype - Username & Password" (so belassen) und die entsprechenden Felder "Username" und "Password", in die man die eigenen Informationen eingibt - und fertig!

> Hochladen der Dateien

Nach Eingabe und Bestätigung aller Daten (Klick auf OK) stellen beide Programme automatisch die Verbindung zum Server her. Im Falle von WS_FTP öffnen sich nun - ähnlich wie im Windows Explorer - zwei Fenster: auf der einen Seite sieht man die lokalen Dateien, auf der anderen Seite den (ziemlich leeren) Webspace im Internet. Die auf der linken Seite markierten lokalen Dateien überträgt man nun per Klick auf den "Upload" Pfeil auf den Webspace, wobei zu beachten ist, die Ordnerstruktur (also z.B. in etwaigen Unterordnern auf der Festplatte gespeicherte Bilder) nicht zu verändern. Außerdem ist - z.B. im Falle der Webspaceregistrierung bei UTTX - noch darauf zu achten, zunächst auf dem Webspace (per Doppelklick) in den Ordner "pub" zu wechseln (auch manchmal "public_html") - denn nur Dateien, die innerhalb dieses Ordners liegen, können später auch über den Webbrowser abgerufen werden.

Benutzt man SmartFTP für den Upload der Dateien, muss man zunächst noch über File>New Local Browser das Fenster öffnen, das entsprechend die lokalen Dateien anzeigt. Auch hier navigiert man nun zu den entsprechenden Dateien / Ordnern, die man auf den Webspace hochladen will und klickt dann auf den Upload-Pfeil.

Hat man alles in den richtigen Ordner geladen, sollte nun beim Aufrufen der eigenen Seite im Webbrowser die Projektseite angezeigt werden. Zuerst wird dabei immer die Seite index.html (manchmal auch index.php o.ä.) angezeigt, dort sollte also entsprechend das enthalten sein, was der Besucher als erstes sehen soll. Zu möglichen Problemen beim Hochladen siehe den nächsten Punkt.

> Probleme beim Hochladen

Beim Hochladen kann es natürlich - wie eigentlich überall auch - zu einer Vielzahl an Problemen kommen. Kann z.B. gar keine Verbindung aufgebaut werden, sollte noch einmal die Korrektheit aller Anmeldedaten sowie das Funktionieren der Internetverbindung überprüft werden. Manchmal kann es allerdings auch sein, dass z.B. hochgeladene Text-Dateien (HTML-Dateien) einwandfrei funktionieren, während Bilder auf der fertigen Webseite teilweise oder komplett verzerrt/zerstückelt erscheinen. In diesem Fall kann ein erneuter Upload der Bilder helfen, bei dem man vorher den sogenannten "Upload-Modus" manuell festlegt. Beim Hochladen wird nämlich zwischen ASCII-Upload (Texte, HTML-Dateien) und Binär-Upload (Binary, z.B. für Bilddateien) unterschieden. Sowohl WS_FTP als auch SmartFTP beherrschen darüberhinaus den sogenannten automatischen Modus, der normalerweise eben automatisch die richtigen Einstellungen wählt und solche Probleme vermeidet. In WS_FTP kann man den Upload-Modus bei bestehender Verbindung im rechten Fenster über den Reiter "Transfer Mode" entsprechend umstellen, bei SmartFTP sind drei etwas kleinere Buttons ebenfalls im "Remote Browser" rechts oben anklickbar.

Weitere Schritte

Wer dieser Anleitung bis hierhin Schritt für Schritt gefolgt ist, verfügt nunmehr über eine einfache, aber hoffentlich informationsreiche und interessante Webseite. Natürlich konnte im Rahmen dieser kleine Einführung - vor allem was die gestalterischen Elemente beim Erstellen von HTML-Dateien angeht - nur ein winziger Bruchteil der Informationen vermittelt werden, die das Handwerk Webdesign so vielseitig machen. Einen erstklassigen Überblick über alle HTML-Befehle, weiterführende Techniken und sogar über eine knappe Geschichte des Internets findet sich auf der Seite SELFHTML, dem für das deutschsprachige Web wahrscheinlich besten Webdesign-Kompendium. Hier kann man sich ausführlich über die Bedeutung und Wirkungsweise unterschiedlicher HTML-Befehle sowie über eine Vielzahl weiterer Techniken informieren. An dieser Stelle sei darauf hingewiesen, dass vor allem die Trennung von gestalterischen Informationen und Inhalt über sogenannte CSS-Dateien für die Erstellung größerer Projekte von immenser Wichtigkeit ist, mit der sich jeder angehende Webdesigner einmal beschäftigt haben sollte. Außerdem kann man natürlich auch auf eine große Zahl vielseitiger sogenannter Skripts zurückgreifen, die mit zahlreichen Interaktivitäten (wie Gästerbüchern, Chats, ...) die eigene Webpräsenz bereichern können. Arcor hat dazu ein paar vorgefertigte Skripts im Angebot, wer sich aber darüberhinaus mit den Feinheiten von Perl, PHP & Co beschäftigen will (oder einfach nur irgendwo heruntergeladene Skripts installieren will) muss auf die Webspace Angebote von UTTX, Pytal o.ä. zurückgreifen.

In diesem Sinne noch viel Spaß und Kreativität bei der Beschäftigung mit eurer Homepage!

Wichtige Links

Allgemeine Infos

SELFHTML - HTML-Dateien selbst erstellen: Sehr empfehlenswerte und wahrscheinlich beste deutschsprachige Seite zum Thema HTML.

W3C - World Wide Web Consortium - Ausführliche Informationen über verabschiedete Web Standards, allerdings weniger für Anfänger geeignet.

IPK-Ressourcen

Liste bisheriger IPK-Projekthomepages - Projekthomepages der vergangenen Teilnehmergenerationen

IPK-Material Kursmaterialsammlung, HTML-relevante Texte nur intern

Webspace

Arcor - Für Anfänger bietet der Provider auch einfache Hostingangebote - Upload über FTP

Pytal - Komfortabler Webspace für die etwas anspruchsvollere Homepage. Leicht zu verwalten, werbefrei.

funpic.de - Solide Alternative zu Pytal mit PHP & HTML, große Community, allerdings mit Layerwerbung

spacequadrat.de - Kostenlos und werbefrei, jedoch limitierte Anmeldungen und Paidhosting im Vordergrund

HTML-Editoren

Alle hier aufgeführte Programme sind Freeware.

Phase V - Komfortabler und vielseitiger HTML-Editor

NVU - WYSIWYG-Editor auf Basis des Mozilla Composers, ähnlich wie MS Frontpage

Trellian Webpage - Solider Freeware Editor

PSPad - einfacher Webeditor

FTP-Programme

WS_FTP 2007 - Hervorragendes FTP Programm, allerdings nur kostenlose Testversion

SmartFTP - Kostenlose Alternative zu WS_FTP

WS_FTP LE Kostenlose abgespeckte LE-Version von WS_FTP, allerdings schon ziemlich angestaubt...

Kurzanleitung für Eilige

Folgende Schritte muss man beachten, wenn man eine IPK-Projekthomepage erstellen will:

1. Webspace bei einem entsprechenden Anbieter (Arcor, Pytal, o.ä.) registrieren.
2. Webseite mit einem beliebigen Text-/HTML-Editor erstellen - dazu gehört eine Startseite (index.html), eine Beschreibung der Forschungshypothese, eine Vorstellung der Projektgruppe, ein Projekttagebuch (auch in Form eines Weblog) und eine Präsentation der Forschungsergebnisse / Überprüfung der Forschungshypothese.
3. Homepage auf den Webspace mit Hilfe eines FTP-Programms hochladen.