Webdesign-Einführung

Ich würde mir ja auch so gern meine eigene Homepage machen, aber ich habe doch keine Ahnung. Kannst Du mir das mal erklären?

Nachdem ich das nur schon ein paarmal gehört und dann auch versucht habe, zu vermitteln, was ich über Webdesign weiß, schreibe ich es jetzt einfach mal auf, vielleicht kann ja jemand etwas damit anfangen.
Gleich am Anfang soll aber gesagt sein, daß diese kleine Einführung ins Webdesign (oder Webauthoring oder Homepagebasteln) ganz allein meine eigene Einstellung, meine ganz persönliche Meinung und nur mein eigenes Wissen wiedergibt. Wer mit dem Stil, in dem meine Webseiten gehalten sind, etwas anfangen kann, der kann sich hier vielleicht ein paar Anregungen holen. Alle anderen müssen es ja nicht lesen ;-)

Vorkenntnisse: Ich setze voraus, daß Du Dich ins Internet einwählen kannst und weißt, was ein Browser ist. Und Du solltest wissen, was eine Datei und was ein Verzeichnis ist. Das reicht für den Anfang.
Ich stelle hier auch meine Arbeitsumgebung vor. Im ersten Teil der Einführung sind ein paar Windows-Programme erwähnt, im zweiten Teil die entsprechenden Linux-Programme.

In eigener Sache: die Büchertips auf dieser Seite führen zum Internet-Buchhändler Amazon. Wenn ihr über einen dieser Links zu Amazon kommt und dort auch das entsprechende Buch kauft (und wirklich nur dann), bekomme ich eine Provision von Amazon. Das ist zwar schön, ich kann aber auch ohne die Provision leben, ihr dürft die Bücher also auch gerne in der Buchhandlung kaufen ;-)

Let the fun begin ...

Eine kleine Einführung ins Webdesign

Das Konzept

Jede Website braucht ein Konzept. Das ist nicht so kompliziert, wie es sich anhört. Es heißt eigentlich nur, daß man so in etwa wissen muß, was man auf der Website darstellen will und wie man das strukturieren kann. Das ist bei sehr kleinen Sites nicht wichtig. Aber sobald die Website wächst, lohnt es sich, wenn eine gewisse Ordnung auf dem Server herrscht und man leicht die Seite findet, die man gerade ändern will.

Ideen sammeln

Also, was muß man sich überlegen:

  1. Was will ich auf der Website darstellen? Soll sie privat oder geschäftlich sein? Habe ich viele Bilder oder nur Text? Wie groß werden meine Dateien? Will ich 'aktive' Inhalte haben, zum Beispiel einen Shop oder auch nur ein Gästebuch oder ein Forum?
  2. Was will ich möglicherweise in Zukunft darstellen? Muß die Website leicht erweiterbar sein?
  3. Wie sieht die Struktur meiner Website aus?

Am besten nehmen wir uns an dieser Stelle ein Blatt Papier, sammeln die Ideen und bringen sie in eine Form.

Ein Beispiel: Die Website des DGC Albatros Landshut, http://www.albatros-landshut.de

Um wieder auf die oben aufgezählten Fragen zurückzukommen: Diese Website soll den Drachen - und Gleitschirmclub Albatros Landshut darstellen: den Verein, aktuelle Aktivitäten, die Fluggebiete. Sie soll in geringer Menge aktive Inhalte haben (Forum, Gästebuch) und relativ leicht wartbar und erweiterbar sein. Bilder sind relativ viele drauf, weil man beim Fliegen eben viele schöne Bilder macht und auch zur Vorstellung der Fluggebiete Bilder notwendig sind.

Struktur

Damit sind die wichtigsten Fragen beantwortet und wir können anfangen, eine Struktur zu erstellen. Die sieht bei der Albatros-Site in etwa so aus:

Startseite mit Inhaltsverzeichnis und aktuellen Hinweisen

zum Thema Verein: Veranstaltungsübersicht, Mitglieder, Internes ...

zum Thema Fluggebiete: pro Fluggebiet eine Seite mit Beschreibung und Bildern

zum Thema Kontakt: eine Seite mit allen Kontaktmöglichkeiten (Telefon, Adresse, Email-Formular), Gästebuch und Forum

... den Rest seht ihr selber, schaut euch die Website an und versucht, die Struktur zu verstehen

Habt ihr es gemerkt? Es ging bisher noch (fast) gar nicht um Webdesign, sondern nur darum, eine Struktur in die vorhandenen Ideen zu bringen. Das ist der Ausgangspunkt. Diese Struktur wird nie perfekt sein, und beim Design dreht man öfter mal ein paar Runden, verfeinert und schiebt Unterpunkte woandershin. Man kann es auch niemals jedem recht machen, aber das Ziel sollte sein, eine für viele Leute verständliche und logische Struktur in seine Ideen zu bringen.

Der Domainname

Nicht unbedingt notwendig, aber ganz nett, ist ein eigener Domainname. Dabei sollte man aber aufpassen, daß man nicht in die rechtlichen Fallstricke gerät, die die deutsche Justiz ausgelegt hat. In den letzten Jahren sind hier einige Urteile gefallen, die mit gesundem Menschenverstand kaum nachvollziehbar sind. Mit dem eigenen Namen ist man noch relativ sicher, alles andere ist potenziell gefährlich. Das ist jetzt wahrscheinlich übertrieben, aber dazu muß sich jeder seine eigene Meinung bilden.

Links zum Thema:
Denic
Spiegel online Artikel zum Thema Domainrechte

Der Webhoster

Wie kommen nun die Ideen ins Internet? Und vor allem, wo kommen sie denn da hin?

Das Internet ist nichts anderes als ein Zusammenschluß von vielen, vielen Rechnern. Im Prinzip könntet ihr auch euren eigenen Computer ständig im Internet lassen und die Website darauf zur Verfügung stellen. Das macht aber keiner, es ist zu teuer, zu kompliziert und wenn Euer Computer kaputtgeht, kann keiner mehr drauf zugreifen. Also überläßt man das jemand anderem, einem Webhoster. Das sind Firmen, die große, schnelle (na ja, sollten sie wenigstens sein ;-) Computer haben, die ständig ans Internet angeschlossen sind. Auf einem dieser Computer bekommst Du, wenn Du Dich bei einem Webhoster anmeldest, eine gewisse Menge an Speicherplatz zugeteilt, auf den Du Deine Daten übertragen kannst.

Webhoster gibt's wie Sand am Meer, und jeder bietet verschiedene Pakete in allen Preisklassen an. Für die Entscheidung, welches der vielen Pakete man braucht, ist es schon notwendig, daß man das im vorherigen Kapitel besprochene Konzept für die Website hat. Damit wird man dann schon leichter entscheiden können, ob die Strato-Visitenkarte ausreicht oder ob es der Virtual Server von Domainfactory sein muß.

Welchen Webhoster soll ich nehmen?

Diese Frage zu beantworten, ist nicht leicht. Die beiden größten sind Strato und Puretec. Bei Strato gab es eine Zeitlang mal Probleme mit Domainausfällen, inzwischen haben sie das anscheinend wieder im Griff. Die Albatros-Website ist bei Strato gehostet; alles in allem funktioniert es relativ problemlos. Das gilt genauso für Puretec, mit denen ich inzwischen auch ein bißchen Erfahrung sammeln durfte. Der Service ist so, wie man es bei Firmen dieser Größe (und in den Preisklassen) erwarten kann: wenn man Glück hat und die Mail an den Support auch dreimal schreibt, wenn's sein muß, erwischt man schon irgendwann mal jemand halbwegs Kompetenten. Allzuviel macht man also normalerweise nicht falsch, wenn man sich für einen von den beiden entscheidet.

Etwas anders sieht die Sache aus, wenn man so richtig ins Webdesign einsteigen will oder Sonderwünsche hat. Da bin ich selber das beste Beispiel: ich wollte Webspace mit JSP (Java Server Pages) haben. Da gibt es nicht allzuviel Auswahl. Weder Strato noch Puretec bieten so etwas an. Was macht man also? Man sucht, über die entsprechende Newsgroup und auf den entsprechenden Webseiten. So bin ich bei Mirsky gelandet. Eine um viele Größenordnungen kleinere Firma als Strato oder Puretec, aber dafür gibt es dann auch JSP, PHP & Co. zu einem vernünftigen Preis.

Links zum Thema:
http://www.webhostlist.de
http://www.strato.de
http://www.puretec.de
http://www.domainfactory.de
http://www.mirsky.de

Die Website erstellen

Alles bisherige war Vorgeplänkel, jetzt geht's erst richtig los. Wir bauen uns eine Website.

Die Website auf dem PC

Der erste Schritt ist einfach: wir erstellen uns einen neuen Ordner, der (sinnvollerweise) den Namen der Website trägt. Bei mir auf dem Computer sieht das so aus:
c:\docs\www-projects\dgc-albatros

In diesem Verzeichnis kann man dann gleich mal eine Datei anlegen, die index.html heißt. Das ist der Default-Name, auf den der Webserver (normalerweise) zugreift, wenn jemand nur http://www.albatros-landshut.de im Browser eintippt. In diesem Fall wird also eigentlich die Datei http://www.albatros-landshut.de/index.html vom Server geholt und am Browser angezeigt.
Wenn wir schon wissen, daß wir Unterverzeichnisse haben werden, können wir die auch gleich anlegen, für unseren DGC Albatros also zum Beispiel:
c:\docs\www-projects\dgc-albatros\fluggebiete und c:\docs\www-projects\dgc-albatros\verein undsoweiter...

Was sich auch immer gut macht, ist ein Verzeichnis 'images', in dem man alle Icons, Hintergrundbilder, Christbäume etc. ablegen kann, die man zwar braucht, die aber sonst nirgends reinpassen. Man *kann* diese Bildchen natürlich auch im Hauptverzeichnis ablegen, aber ich verspreche euch, daß dieses Hauptverzeichnis dann sehr schnell zu einem undurchdringbaren Dickicht wird.

Jetzt mach das einfach mal. Du hast Dir im vorherigen Kapitel Deine Struktur überlegt, versuch jetzt, die auf Dein Website-Verzeichnis auf Deinem Computer zu übertragen.

Die Sprache des Web - HTML

Niemand, der das Webdesign halbwegs ernst nimmt, kommt darum herum, HTML zu lernen. Es ist natürlich möglich, eine Website mit einem sogenannten WYSIWYG (what you see is what you get)-Tool wie z. B. Frontpage oder Dreamweaver (oder sogar in Word mit HTML-Export), zu schreiben. Solang alles funktioniert, geht das ja auch wunderbar. Aber diese Tools haben genau zwei Haken:
1. Die meisten erzeugen grauenhaft schlechten HTML-Code.
2. Wenn irgendwas nicht funktioniert und Du kannst kein HTML, hast Du keine Chance, das zu reparieren.

Also, meine Meinung: lieber ein bißchen Zeit und Gehirnschmalz darin investieren, wenigstens ein bißchen HTML zu lernen (das macht ja auch Spaß) als sich später mit unverständlichem Code und Chaos auf dem Server herumschlagen.

Womit wir jetzt schon bei einem weiteren wichtigen Thema wären: Tools

HTML-Editoren

Man kann HTML auch im Notepad schreiben. Das geht, macht aber keinen Spaß. Einfacher ist es, mit einem Tool zu arbeiten, das zumindest Syntax-Highlighting (also das verschiedenfarbige Anzeigen von verschiedenen 'Tags' im HTML-Text) kann. Dafür gibt es wunderbare Freeware-Tools, man kann aber natürlich auch Geld dafür ausgeben.

Ich arbeite mit dem Freeware-Editor Arachnophilia. Klein und schnell, kann der alles, was ich brauche. Ein weiterer sehr beliebter Editor ist Phase 5 von Uli Meybohm. Auch der Programmierereditor Xemacs kann HTML und hat den Vorteil, daß er auf Linux läuft. Es gibt noch viele andere, da muß man einfach ausprobieren, was einem selber am besten liegt.
Ein sehr guter Editor, der aber auch Geld kostet, ist Homesite von Allaire.

Links zum Thema:
http://www.arachnoid.com/arachnophilia - Arachnophilia
http://www.homesite.de - Homesite
http://www.meybohm.de - Phase 5 von Ulli Meybohm

Browser

Noch ein ungeliebtes Thema. Verschiedene Browser.

Es reicht nicht , eure Website mit dem Internet Explorer zu testen. HTML ist zwar standardisiert, aber die verschiedenen Browser haben jeweils ihre eigene Interpretationsweise - und sie haben alle Fehler. Nur, diese Ausrede nutzt nichts. Ich zum Beispiel verwende immer noch den sehr fehlerhaften Netscape Communicator 4.7 (IE ist mir zu unsicher, NC 6 zu langsam und an Opera konnte ich mich noch nicht gewöhnen), und ich erwarte auch, daß ich jede Website mit diesem Browser zumindest lesen kann. Sie muß nicht schön sein, aber benutzbar. Und mit dieser Einstellung bin ich nicht die einzige. Euer Kunde ist König. Es ist also eure Aufgabe, dafür zu sorgen, daß die Website benutzbar ist. Jetzt kann man natürlich nicht mit jedem Browser testen, es gibt zu viele. Meine Meinung dazu: Netscape 4.x und IE 5.x/6.x sind Pflicht; Netscape 6 wird es bald auch sein. Wer Spaß dran hat, kann auch noch mit Opera und Lynx (ein Textbrowser) testen. Lynx wird aber zur Pflicht, wenn man eine Website macht, die z. B. für Behinderte/Blinde wichtig ist. Blinde sind darauf angewiesen, sich vorlesen zu lassen, was auf der Website steht.

Links zum Thema:
http://www.softseek.com - hier findet man alles, was es an Free- und Shareware gibt, unter anderem alle erwähnten Browser

HTML ganz kurz

Ich will hier keinen HTML-Kurs schreiben, das haben andere Leute schon besser gemacht, als ich es je könnte. Stefan Münz's Selfhtml ist die Bibel für Webautoren, ist auch online erhältlich und bietet eine tolle Einführung in HTML und Webdesign.
Es gibt aber auch jede Menge andere Bücher zu HTML, auch hier gilt wieder: Umschauen und selbst entscheiden.

Links zum Thema:
http://selfhtml.teamone.de - Selfhtml online

Das Buch zum Thema:

Das HTML 4.0 Handbuch (Selfhtml) von Stefan Münz

Bild

Was ich an dieser Stelle erklären will, das ist der Aufbau einer HTML-Seite. Seht Euch diese Seite mal an: htmlbeispiel.html
Sieht ganz einfach aus, oder? Ist es auch. Hier ist der Sourcecode dazu:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

        <head>
                <title>
                        Ein HTML-Beispiel
                </title>
                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                <meta name="author" content="Martina Frankl">
                <meta name="description" content="Ein HTML-Beispiel">
                <meta name="keywords" content="HTML, Beispiel">
                <meta name="revisit-after" content="30 days">
                <meta name="robots" content="noindex, follow">
        </head>

        <body>
                <h1>
                        Eine große Überschrift
                </h1>
                <h2>
                        Eine etwas kleinere Überschrift
                </h2>
                <p>
                Ganz normaler Text. Jetzt kommt ein Zeilenumbruch.
                <br>
                Schreiben wir noch eine Zeile, dann langt's.
                </p>
        </body>
</html>

Wenn man davon ausgeht, daß Computer einfach dumm sind, wird HTML sehr leicht verständlich.
Der Browser macht nichts anderes, als die HTML-Datei Zeile für Zeile durchzugehen und zu interpretieren. Alles, was in eckigen Klammern steht, ist ein sogenanntes HTML-Tag, ein Teil der Sprache, die dem Browser sagt, wie er das darauf folgende zu interpretieren hat.
Der Browser liest also als erstes die Zeile

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

In dieser Zeile steht, daß sich das nachfolgende Dokument an den HTML 4.0 Transitional Standard des W3C (das WWW-Konsortium, w3.org ) hält. Damit ist schon mal prinzipiell der verwendete Dialekt von HTML für dieses Dokument festgelegt. Diese Zeile fehlt in vielen Dokumenten, dann denkt sich der Browser halt was aus. Funktioniert in den meisten Fällen auch, aber sauberer ist es mit dieser Angabe.

<html>

Diese Zeile sagt dem Browser, daß es jetzt losgeht mit dem HTML-Inhalt. Ab hier wird also HTML gesprochen. So ziemlich am Schluß des Dokumentes folgt dann noch das Ende-Tag für das eben aufgemachte HTML-Tag, und das sieht fast genauso aus, nur mit einem Slash davor, also so: </html> Das sagt dem Browser, daß jetzt wieder Schluß ist mit HTML, bis zum nächsten Mal. Genauso hat (fast) jedes HTML-Tag einen Anfang und ein Ende, wie wir gleich sehen werden.

<head>

Dieses Tag sagt 'hier beginnt der Header'. Im Header eines HTML-Dokuments steht noch kein Inhalt, der angezeigt wird. Der Header enthält hauptsächlich Meta-Informationen, zum Beispiel die Angabe des Autors oder die Stichworte für die Suchmaschinen.

<title>

Hier folgt die Angabe des Dokumenttitels (das ist das, was der Browser nachher in der Titelleiste anzeigt), wieder abgeschlossen mit </title> Mit

</head>

wird das Ende des Headers angegeben.
Nun folgt der eigentliche Inhalt, also der 'Textkörper' des Dokuments. Das entsprechende Tag dazu heißt

<body>

Alles, was ab hier (bis zum Ende des 'body'-Tags) steht, wird in der entsprechenden Form im Browserfenster angezeigt.

<h1>

Mit h1 bis h6 werden Überschriften gekennzeichnet. Der Browser stellt diese Überschriften dann automatisch in verschiedener Größe dar (man kann aber mit Style Sheets genau einstellen, welche Schriftart in welcher Größe verwendet wird).

<p>

bedeutet 'Paragraph', also 'hier beginnt ein neuer Absatz'. Dieses Tag muß man nicht unbedingt abschließen, sauberer ist es allerdings, wenn man das macht.
Auch ein Tag, das nicht abgeschlossen wird, ist

<br>

Das bedeutet für den Browser 'hier fängt eine neue Zeile an'.

Soviel zum prinzipiellen Aufbau eines HTML-Dokuments, die genauen Bedeutungen und eine komplette Liste für die einzelnen Tags will ich hier nicht aufzählen, dafür ist z. B. Selfhtml besser geeignet.

Aufruf zum Sourcecode-Klau

Jetzt sollte ich aber verraten, wie ich HTML gelernt habe. Es gibt in jedem Browser die Möglichkeit, den Source-Code der Seite anzusehen. Im Netscape geht das mit Anzeigen--Seitenquelltext im Menü, beim IE mit der rechten Maustaste und 'Quelltext anzeigen'. Und genau so habe ich auch meine ersten Webseiten erstellt, vor ein paar Jahren: ich habe im Internet eine Seite gefunden, die mir gefällt, den Sourcecode geklaut und verändert. Ihr könnt euch für alle Seiten im Netz den Sourcecode ansehen. Macht das ruhig, wenn euch eine Seite gut gefällt und ihr wissen wollt 'wie haben die denn das gemacht', dabei lernt man sehr viel.

Aber Vorsicht: auch Internet-Inhalte sind geistiges Eigentum, dürfen also nicht in jedem Fall einfach so auf die eigene Seite kopiert werden.

Mehr will ich gar nicht zu HTML erzählen, Genaueres könnt ihr bei den Links nachlesen. Es ist nicht möglich, HTML komplett zu lernen und dann erst die eigene Website zu schreiben. Fangt einfach an und schaut dann genau das nach, was ihr braucht. Dann liest man sowieso noch ein bißchen weiter ... und so sammelt sich das Wissen über die Jahre hinweg an.

Cascading Stylesheets, Javascript, Java

Eine sehr wichtige und praktische Sache sind Cascading Stylesheets (CSS) und Javascript. CSS kann sehr viel Arbeit sparen, damit können z. B. global die verwendeten Schriftarten definiert werden. Javascript wird auf vielen Webseiten mehr oder weniger sinnvoll eingesetzt, deshalb sollte man es zumindest ein bißchen lesen und verstehen können. Aber: schreibt nie eine Website so, daß sie nur funktioniert, wenn Javascript (oder Java) im Browser eingeschaltet ist (ja, beides kann man abschalten, schaut euch eure Browser-Einstellungen mal genauer an). Das ist eine der Webdesigner-Todsünden. Oder anders gesagt: erstes Gebot für Webdesigner: Deine Site muß mit jedem Browser in jeder Einstellung benutzbar sein. Nicht schön, nicht perfekt, aber benutzbar.

Du wirst nicht jeden Browser in jeder Einstellung testen können. Aber: wenn Du Glück hast, merkt es irgendjemand, wenn etwas nicht so funktioniert wie es sollte und sagt Dir das, mehr oder weniger höflich. Freu Dich, wenn Dir so etwas passiert. Und: reparier das, was der Benutzer angemeckert hat, wenn es Dir irgendwie möglich ist.

Die Website in HTML umsetzen

Das ist der Teil Deiner Arbeit, der am längsten dauern wird. Jetzt geht es darum, die vorher überlegte Struktur ins reale Leben umzusetzen. Bleiben wir bei der Albatros-Website: die Verzeichnisse haben wir erstellt, und die erste Datei index.html gibt es auch schon. Jetzt müssen wir in diese Datei (und in alle anderen) auch noch was reinschreiben, sie mit Inhalten füllen. Bei der Albatros-Site stoßen wir da auch gleich auf ein nettes Phänomen: Frames.

Frames

Mit Frames kann man das Browserfenster in verschiedene Bereiche aufteilen und in diesen Bereichen verschiedene Dateien anzeigen.

An Frames scheiden sich die Geister. Wer dciwam (de.comm.infosystems.www.authoring.misc, die deutschsprachige HTML-Newsgroup) liest (und ernst nimmt), der traut sich fast nicht mehr zu sagen, daß er Frames benutzt. Frames haben viele Nachteile.

Links zum Thema:
http://www.subotnik.net/html/frames.html - 'warum Frames out sind' von Michael Nahrath

Frames haben aber auch Vorteile. Die zwei wichtigsten Vorteile, die für mich immer die ausschlaggebenden Gründe waren, Frames zu benutzen:
Frames sind die einzige Möglichkeit, die Website-Navigation immer (und ich meine wirklich immer, auch wenn gerade in diesem Moment eine andere Seite neu geladen wird) im Blickfeld zu behalten. Und Frames sind eine exzellente Möglichkeit, die Arbeit an der Website auf sehr einfache Art und Weise aufzuteilen. Beispielsweise die Albatros-Website: bei einer Datei habe ich zu Gerald nur gesagt: die Datei für den Mitgliedsantrag wird antrag.html heißen. Erstell die Datei, wie Du willst, von mir aus mit Word und HTML-Export.
Mit dieser Methode kann jemand, der lieber mit einem eigenen Tool arbeitet, eine Seite erstellen, die dann aber trotzdem in die Website eingebunden wird.

Das ist meine Meinung und ich habe keine schlechten Erfahrungen damit gemacht. Ein paar Grundregeln muß man allerdings schon beherzigen, um die Gefahren von Frames zu umgehen. Z. B. ist auf jeder der Albatros-Seiten ein Link, der auf die Startseite zurückführt. Und zwar auf die Startseite albatros-landshut.de. Das ist für den Fall, daß jemand mit einer Suchmaschine nur auf einer Unterseite landet. Ich hoffe halt, daß er dann den Link anklickt und somit wieder da ist, wo ich ihn haben will.

Mein Tip: wenn Du kannst, vermeide Frames. Wenn Du alle Nachteile kennst und Dich trotzdem für Frames entscheidest, dann mach das ruhig. Es ist Deine Website und Dein Risiko.

Nach diesem kleinen Ausflug in die Welt der Frames - wie geht es nun weiter? Eigentlich ganz einfach - Du schreibst für jeden Unterpunkt, den Du Dir in der Struktur überlegt hast, eine (oder mehrere) HTML-Datei(en). Wenn Du Bilder anzeigen willst, mußt Du diese Bilder in das entsprechende Verzeichnis kopieren. Anschauen und testen kannst Du das alles auf Deinem eigenen Rechner, so lang, bis die Website fertig ist.

Mach das einfach mal mit den ersten zwei, drei Dateien, dann stellt sich sehr schnell ein Erfolgserlebnis ein und Du hast das Prinzip verstanden.

Der letzte Schliff

Jetzt hast Du eine wunderschöne Website auf Deinem PC, klar strukturiert, mit tollen Bildern, alles perfekt.

Schön. Im Prinzip war's das. Aber für die, die noch ein bißchen weitermachen wollen, gibt es hier noch ein paar Tips.

Meta-Tags

Schau Dir Deine Meta-Tags in den Headern nochmal an. Sind überall die richtigen Keywords eingetragen? Das ist wichtig für die Suchmaschinen.

Der W3C-Validator

Das WWW-Konsortium hat auf seiner Website einen HTML- und CSS-Validator zur Verfügung gestellt. Es ist nicht einfach, eine Website nur mit validem HTML zu schreiben, das wirst Du sehr schnell feststellen. Aber anschauen kann man sich's ja mal. Der Validator bietet zwei Modi: Du kannst entweder eine Datei von Deinem eigenen Rechner hochladen zum Validieren oder Du kannst eine URL einer Internet-Seite angeben.

Links zum Thema:
http://validator.w3.org

Vom Rechner ins Netz - FTP

FTP heißt File Transfer Protocol und bedeutet genau das: ein Protokoll (also eine Sprache, in der sich die Computer verständigen) zum Übertragen von Dateien von einem Rechner (in diesem Fall Dein eigener) auf einen anderen (in diesem Fall den Server Deines Webhosters). Es gibt verschiedene FTP-Programme, ich verwende das Freeware-Programm WS_FTP LE. Zur Einwahl bei Deinem Webhoster brauchst Du den Servernamen, die Userkennung und das Paßwort.

Diese Daten gibst Du in den entsprechenden Feldern im FTP-Programm an, loggst Dich damit auf Deinem Server ein und überträgst dann Deine Daten aus Deinem Verzeichnis (oder Verzeichnissen) auf den Server.

Bei FTP gibt es zwei Modi zum Übertragen von Dateien: ASCII und Binary. ASCII ist für Textdateien gedacht, dazu gehören auch HTML-Dateien. Binary verwendet man z. B. für Bilder. Wenn also eine Datei auf dem Server mal etwas seltsam aussieht, übertrag sie einfach nochmal mit dem anderen Modus und schau, ob es dann funktioniert.

Nun hast Du die erste Version Deiner Website im Internet, online. Gratulation!

Schlußwort

Alles gar nicht so einfach? So viele unbekannte Wörter? So vieles, was man falsch machen kann? Das stimmt natürlich. Aber es ist weniger schlimm, als es sich anhört. Wenn Du bis hierher gelesen hast, hast Du jetzt (hoffentlich - wenn nicht, liegt's an mir) ein gewisses Grundverständnis, wie dieses große unbekannte Internet so ungefähr funktioniert. Du hast auch viele konkrete Tips bekommen und kannst jetzt so einiges ausprobieren und mal sehen, ob Dir diese Sache liegt. Wenn nicht: auch nicht schlimm. Wenn Du unbedingt eine Website brauchst, für Deine Firma zum Beispiel, dann kannst Du Dir immer noch einen professionellen Webdesigner suchen, oder Du findest irgendwo im Freundeskreis jemanden, der das gerne macht. Bei mir ist das ja auch nicht anders - die Seiten, die ich mache, sind alle nur für Bekannte. Denn das soll auch nicht verschwiegen sein: wenn man diesen Job vernünftig macht, geht sehr viel Zeit dabei drauf. Diese Zeit realistisch abzurechnen, ist in den meisten Fällen nicht möglich. Da kommt man schnell auf ein paar tausend Mark.

Wenn Du Dich aber dafür entscheidest, Dich an einen Profi zu wenden: schau Dir die Leute genau an, und vor allem die Arbeit, die sie machen. Schau Dir die Referenzprojekte an und riskier ruhig mal einen Blick in den Sourcecode. Unter den sogenannten Profis gibt es sehr viele, die keine Ahnung haben und auch nur ihre Frontpage-Vorlagen benutzen. Also sei vorsichtig.

Ich hab da ein Problem ...

Du wirst ganz sicher öfter mal ein Problem haben, für das Dir erstmal keine Lösung einfällt. Das ist die schlechte Nachricht. Die gute Nachricht ist, daß in 99% der Fälle jemand vor Dir genau dieses Problem, an dem Du hängst, schon mal hatte. Du hast also eine recht gute Chance, daß bereits irgendwo eine Lösung vorhanden ist. Diese Lösung muß man nur finden. Dazu gibt es mehrere Möglichkeiten:

Selfhtml. Darin wirst Du für die Standard-HTML-Fragen fast immer eine Antwort finden.

Google oder eine andere Suchmaschine. Schon ein bißchen schwieriger, aber mit den richtigen Stichwörtern findest Du hier möglicherweise, was Du brauchst.

Das Usenet-Archiv von Google. Hier sind alle Usenet-Diskussionen der letzten Jahre gespeichert.

Das Usenet. Du kannst auch selber in einer Newsgroup eine Frage stellen, zum Beispiel in dciwam. 'dciwam' ist die Abkürzung für de.comm.infosystems.www.authoring.misc, das ist die deutschsprachige Newsgroup für HTML und Webauthoring, hier sitzen die HTML-Experten.
Aber sei vorsichtig. Nutz wirklich vorher alle anderen Möglichkeiten aus. Die Regulars in den verschiedenen Newsgroups sind zwar kompetent, aber sie haben keine Lust, Fragen zu beantworten, die vorher schon hundertmal gestellt wurden und sie haben auch keine Scheu davor, Dir das in einer sehr deutlichen Art und Weise zu sagen. Also: erst denken, dann suchen, dann posten ;-)