Dokumentation | 
Grundsätzliches zum Erstellen von Webseiten
Arachnophilia © Copyright 2011, P. Lutus.
Arachnophilia ist CareWare (Englische Webseite)

Übersetzt ins Deutsche von Wolfram Strempfer

Diese Seite soll dem absoluten HTML-Anfänger folgende Dinge näher bringen: Ich habe einige Jahre Erfahrung darin, Anfängern das Thema Webseiten-Design beizubringen. Dabei habe ich festgestellt, dass es häufig sehr grundsätzliche Fragen gibt. Ich verspreche, dass ich das hier so einfach und schmerzlos wie möglich mache.

?   Was ist eine Webseite?
!   Eine Webseite ist eine Menschen-Lesbare Nur-Text-Datei, die hauptsächlich Worte enthält und dazu noch einige spezielle Anweisungen, die beschreiben, wie diese Worte dargestellt werden sollen. Diese Anweisungen werden "Tags" (Deutsch: "Schildchen" oder "Etiketten") genannt. Eine Webseite kann außerdem noch Verweise zu anderen Webseiten, Grafiken, Tönen und so weiter enthalten. Diese Verweise werden "Links" (Deutsch: "Bindeglied" oder "Verbindung") genannt.
?   Wie funktioniert eine Webseite?
!   Eine Webseite enthält in ihren Tags die Text-Formatierung und andere Informationen. Der Text und die Tags der Webseite werden von einem Programm übersetzt, das "Web Browser" (Deutsch: "Netz - Blätterer") genannt wird.

Hier können Sie vergleichen, wie eine Webseite in einem Web-Editor wie Arachnophilia als Text aussieht und wie sie in einem Browser erscheint:

Web-Editor (Nur-Text)

<html>
   <head>
      <title>
         Das ist meine Seite!
      </title>
   </head>
   <body>
      <h2>
         Willkommen auf meiner Webseite!
      </h2>
      Mit HTML-Tags kann ich meinen Text 
      <i>
         schräg machen,
      </i>
      oder 
      <b>
         fett,
      </b>
      oder 
      <u>
         unterstrichen.
      </u>
   </body>
</html>

                            
 

     
Browser: Das ist meine Seite!

Willkommen auf meiner Webseite!

Mit HTML-Tags kann ich meinen Text schräg machen, oder fett, oder unterstrichen.
Beachten Sie die <Tags> oben:

  • Das Tag "<b>" bedeutet "Ab jetzt geben wir Text fett aus."
  • Das Tag "</b>" bedeutet "Okay, und jetzt hören wir mit dem fett von vorhin wieder auf."

Ein <Tag> am Anfang und ein </Tag> zum Schluss legen also fest, was zwischen ihnen geschieht. Wie in diesem Beispiel gezeigt, treten fast alle Tags paarweise auf (aber leider nicht alle).

Eine sehr wichtige Tag-Art wird "Link" genannt. Die Links sind der eigentliche Unterschied zwischen HTML-Seiten und einem X-beliebigen Textdokument mit formatiertem Text. Unter anderem erlauben Links dem Besucher, sich auf der Seite zu bewegen:
  • An eine andere Stelle auf der momentanen Seite (wie es die Links oben auf dieser Seite tun),
  • Zu einer anderen Seite innerhalb Ihrer Webseiten,
  • Zu einem anderen Ort im Internet.

Hier sehen Sie, wie ein Link als Nur-Text aussieht und wie er aussieht, wenn man ihn mit einem Browser anschaut:

Web-Editor (Nur-Text)

<a href="http://www.arachnoid.com/arachnophilia">
	Zur Arachnophilia Homepage
</a> 
                            
 

     
Browser
Zur Arachnophilia Homepage

Die Browser-Ansicht auf der rechten Seite zeigt die Bildschirmansicht des Links, und wenn Sie darauf klicken (und ins Internet eingewählt sind), werden Sie auf der Arachnophilia Homepage landen.

Beachten Sie, dass ein Link aus zwei Teilen besteht:
  • Aus der eigentlichen Internet-Adresse: "http://www.arachnoid.com/arachnophilia".
  • Und einem für Menschen lesbaren Teil, der diese Adresse beschreibt: "Zur Arachnophilia Homepage".
Damit Links wie vorgesehen funktionieren, und damit sie die Erwartungen von Besuchern erfüllen, sollten Ihre Links immer beide Teile beinhalten.

?   Wie kann ich eine einfache Webseite erstellen?
!   Das ist wirklich ganz einfach! Folgen Sie diesen Schritten:

  • Erstellen Sie ein neues HTML-Dokument,
  • Schreiben Sie etwas Text in die Seite hinein,
  • Speichern Sie Ihre neue Seite,
  • Schauen Sie sich die Vorschau der Seite an.

* Zuerst erstellen Sie ein neues HTML-Dokument. Starten Sie Arachnophilia und w?hlen Datei ... Neu ... HTML File. Like this:

Sie werden dann nach einem Titel für Ihre Seite gefragt. Der Titel ist sehr wichtig -- er erscheint in der Titelleiste des Browsers und ist für die Besucher Ihrer Seite nicht zu übersehen. Sie können ihn aber später jederzeit ändern.

Dann sehen Sie ungefähr dieses hier:

Web Editor

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...>
  2 
  3 <!-- Created on Mar 3, 2002 11:56:06 PM -->
  4 
  5 <html>
  6    <head>
  7       <title>
  8          Meine Seite!
  9       </title>
 10       <meta name="GENERATOR" content="Arachnophilia 5.3"/>
 11       <meta name="FORMATTER" content="Arachnophilia 5.3"/>
 12    </head>
 13 
 14    <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
 15 
 16       |
 17 
 18    </body>
 19 </html>
 20 

                        

Der rote senkrechte Strich (" | ") wird "Cursor" oder "Eingabemarke" genannt. Die beiden Begriffe bedeuten dasselbe und sind austauschbar. Wenn Sie schon wissen, wie man eine Textverarbeitung bedient, werden Sie wohl wissen, was mit dem Wort gemeint ist. Falls nicht: Dort, wo der Cursor in Textverarbeitungsprogrammen steht, passiert alles. Wenn Sie Worte an einer bestimmten Stelle haben wollen, setzen Sie zuerst den Cursor dorthin, und dann schreiben Sie los.

* Nun schreiben Sie etwas:

Web Editor

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...>
  2 
  3 <!-- Created on Jun 8, 2007 09:56:06 PM -->
  4 
  5 <html>
  6    <head>
  7       <title>
  8          Meine Seite!
  9       </title>
 10       <meta name="GENERATOR" content="Arachnophilia 5.3"/>
 11       <meta name="FORMATTER" content="Arachnophilia 5.3"/>
 12    </head>
 13 
 14    <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">
 15 
 16       Das ist meine eigene Webseite!|
 17 
 18    </body>
 19 </html>
 20 

                        

Okay, vielleicht nicht gerade Shakespeare, aber es ist ja nur eine Übung für den Ernstfall und nicht der Ernstfall selbst... :-)

* Nächster Schritt — Speichern Sie Ihre Seite.

An dieser Stelle eine kleine Abschweifung: Nichts ist frustrierender, als Dokumente zu verlieren, an denen man schon stundenlang gearbeitet hat. Speichern Sie immer ihre Dokumente ab und vor seien Sie sich vor allem im Klaren, wo Ihre Dokumente hingespeichert wurden. Drücken Sie nicht einfach nur auf "Speichern", ohne einen Gedanken daran zu verschwenden, wohin das Dokument nun gespeichert wird. Nehmen Sie die Dinge selbst in die Hand — wählen (oder erstellen) Sie ein Verzeichnis für Ihre Webseite und legen Sie alle Teile dort hinein.

Ich betone das, weil ich im Lauf der Jahre einige e-Mails von eigentlich intelligenten Menschen bekommen habe, die den Raum verlassen, ihre Katze streicheln, zurückkommen und dann keine Ahnung haben, was mit ihrem Roman passiert ist.
Klicken Sie auf Datei ... Speichern unter. Nun wird ein Datei-Fenster erscheinen. Wählen Sie ein passendes Verzeichnis und einen vernünftigen Dateinamen.

* Jetzt schauen wir uns Ihre Seite mit einem Web-Browser an.

Auf aktuellen Personal Computern ist zumindestens ein Browser bereits installiert. In diesem Schritt (und angenommen, Sie haben dies hier nicht schon getan), werden Sie Arachnophilia helfen, eine Browser auf Ihrem Rechner zu finden. Keine Angst: Diese Einstellung müssen Sie nur einmal machen.

Um den Vorgang zu starten, klicken Sie entweder diesen Werkzeugleisten-Button: oder drücken Sie Strg-P. Nun kommt zuerst eine Mitteilung und dann werden Sie so einen Dialog sehen:

Wählen Sie zuerst einen passenden Suchpfad im oberen Fenster, entweder indem Sie ihn eingeben oder indem Sie den "Browse"-Button benutzen. Auf Windows-Systemen befinden sich die meisten Browser in einem Verzeichnis mit dem Namen "Programme". Auf neueren Linux-Systemen wählen Sie "/usr/bin". Wenn Sie nun einen passenden Suchpfad gewählt haben, drücken Sie "Search". Nun wird die Browser-Such-Funktion nach allen Browsern suchen, die links aufgeführt sind (diese Liste können Sie erweitern, wenn Sie wollen).

Wenn nicht alles komplett falsch läuft, werden ein oder mehrere Browser-Pfade in der Liste rechts erscheinen. Um die Ergebnisse in Ihre persönliche Browser-Liste einzutragen, drücken Sie "OK". Um nun Ihre Seite im Browser anzusehen, klicken Sie auf den Vorschau-Button ( ) oder drücken Sie Strg-P.

?   Wie kriege ich meine Seite von meinem Computer ins Internet?
!   Leider ist dieser Schritt für angehende Webseiten-Designer der komplizierteste.

Wenn Sie eine(n) Bekannte(n) mit mehr Web-Erfahrung haben, sollten Sie sie(ihn) an dieser Stelle vielleicht bitten, Ihnen zu helfen.

Die normale Art, Ihre Seite von Ihrem Computer ins Internet zu bekommen, ist, ein Datei-Übertragungsprotokoll namens (Überraschung!) File Transfer Protocol (FTP) zu benutzen. Arachnophilia verfügt über einen eingebauten FTP-Assistenten, um Ihnen dabei zu helfen.

Bevor Sie den FTP-Assistenten benutzen, brauchen Sie einige Informationen, Informationen, die Sie eigentlich von Ihrem Internet-Provider erhalten haben müssten:

  • Den Namen des FTP-Servers.
  • Ihren Benutzernamen zum Einloggen.
  • Ihr Passwort zum Einloggen.
  • Ihren Verzeichnis-Pfad.

Zu allererst sollten Sie diese Informationen suchen und bereithalten.

Nun stellen Sie sicher, dass Ihre neue Seite noch im Editor-Fenster von Arachnophilia angezeigt wird. Dann wählen Sie im Menü HTML ... FTP-Assistent starten oder drücken Sie Alt-F. Sie werden dann ungefähr so etwas sehen:

Nun folgen diese Schritte:

  • Als "Site Name" geben Sie etwas ein, das Sie sich gut merken können. Es ist kein spezieller Name, nur eine bequeme Bezeichnung.
  • Als "Server name" geben Sie den FTP-Server-Namen ein, den Ihnen Ihr Internet-Provider genannt hat.
  • Als "User Name" geben Sie den Benutzernamen zum Einloggen ein.
  • In das Feld "Password" tragen Sie das Passwort ein, das Sie erhalten haben. Sie haben die Möglichkeit, das Passwort auf Ihrem Computer abzuspeichern, damit Sie es nicht jedesmal eingeben müssen, wenn Sie Dateien hochladen wollen. Diese Möglichkeit beinhaltet aber ein kleines Risiko — jemand der sich mit Computern auskennt, könnte im Prinzip Ihr Passwort in die Finger bekommen, wenn er an Ihren Rechner herankommt. Entscheiden Sie selbst.
  • Als "Remote directory" geben Sie die gleichnamige Information von Ihrem Provider ein, falls Sie sie erhalten haben.
    Beachten Sie dabei folgendes: Die meisten FTP-Verzeichnisangaben müssen mit einem Prefix wie "/" oder "~/" anfangen. Wenn Sie diesen Prefix weglassen, kann es sein, dass der FTP-Transfer nicht so funktioniert, wie Sie das wollen. Wenn Sie sich nicht sicher sind, was dort eingetragen werden sollte, geben Sie auf jeden Fall einen Prefix mit an, zum Beispiel "/meineSeite". Manche Server brauchen auch "~/", ein Beispiel dafür wäre "~/html". Wenn Sie nicht wissen, welchen Prefix Sie brauchen oder sich nicht sicher sind, welchen Verzeichnispfad Sie eingeben sollen, fragen Sie bitte Ihren Provider.
  • Als "Local directory" und wenn Sie Ihre Webseite noch in Arachnophilia geöffnet haben, drücken Sie nur den Knopf rechts — "Use Current". So einfach teilen Sie dem FTP-Assistenten mit, wo sich Ihre Seite auf Ihrem Rechner befindet.

Wenn Sie diese Informationen eingetragen haben, können Sie die Verbindung testen:

  • Stellen Sie sicher, dass Sie ins Internet eingewählt sind.
  • Drücken Sie auf den "Rehearse"-Knopf.
  • Der FTP-Assistent kontaktiert nun Ihren Internet-Speicherplatz, durchsucht das lokale Verzeichnis und teilt Ihnen dann mit, was hinaufgeladen würde, wenn Sie "Execute" gedrückt hätten.
Mit ein kleinwenig Glück gibt es bei "Rehearse" (Deutsch: Probe) keinerlei Probleme. Wenn doch Probleme auftauchen, bewegen Sie den "Level"-Regler nach rechts (um mehr Informationen anzuzeigen) und klicken Sie nochmal auf den "Rehearse"-Button, um festzustellen, wo das Problem liegt. Sie könnten einen Tippfehler in die Felder "Server Name", "User Name" oder "Passwort" eingebaut haben — denken Sie daran, dass bei diesen Feldern die Groß- und Kleinschreibung stimmen muss.

Wenn die Probe erfolgreich war, drücken Sie auf "Execute". In den meisten Fällen wird dadurch Ihre Webseite hochgeladen. Falls Probleme auftauchen, versuchen Sie sie mit der oben schon beschriebenen Prozedur zu lösen.

Jetzt können Sie mit Ihrem Browser die Online-Version Ihrer Seite anschauen.

Einige zusätzliche Anmerkungen zum FTP-Assistenten:
  • Der FTP-Assistent benutzt eine lokale Log-Datei, um festzustellen, welche Dateien hochgeladen wurden.

  • Wenn Sie eine Seite verändern und abspeichern, verändert sich das Datum der letzten Modifikation. Wenn Sie dann etwas hochladen, wird das Programm das Datum der Datei mit dem Datum im Logfile vergleichen. Ist die Datei neuer als ihr Log-Datei-Eintrag, wird sie hochgeladen und der Eintrag in der Logdatei wird aktualisiert.

  • Wenn Sie verhindern wollen, dass jedesmal all Ihre Dateien hochgeladen, klicken Sie einfach auf "SyncLog". Damit setzen Sie alle Datums-Einträge in der Logdatei auf die der Dateien, aber Sie laden dabei nichts hoch.

  • Oder andersherum, wenn Sie alles hochladen wollen, ohne auf das Datum Rücksicht zu nehmen, wählen Sie "upload all" (Deutsch: alles hochladen) und dann führen Sie diese Aktion aus, indem Sie auf "Execute" drücken.

  • Wenn Sie nur eine oder nur ein paar Dateien hochladen wollen, aber nicht wissen, was in der Logdatei steht, probieren Sie es so:

    • Klicken Sie "SyncLog" - so werden die Datums-Einträge angepasst, ohne etwas hochzuladen.
    • Laden, bearbeiten und speichern Sie nur die Datei(en), die sie hochladen wollen. So verändern Sie das "modifiziert am"-Datum.
    • Klicken Sie "Execute". Nur die ver?nderten Dateien werden hochgeladen.

    Wenn Sie noch mehr über den FTP-Service lernen wollen , klicken Sie hier.

Hier noch ein paar allgemeine Vorschläge für Webseiten:

  • Zu Ihren Seiten:

    • Behalten Sie immer eine lokale Kopie Ihrer Seite. Kommen Sie nie auf die Idee, dass Sie Ihre lokale Kopie löschen können, weil Sie Ihre Seite ja schon hochgeladen haben. Internet-Provider verlieren regelmäßig Rechner und Benutzer-Daten.
    • Wenn Sie Probleme mit dem Hochladen Ihrer Seite haben, gehen Sie die Schritte oben nochmal durch.
      • Haben Sie alle Angaben genauso eingegeben, wie Ihr Provider Ihnen mitgeteilt hat?
      • Haben Sie sich ins Internet eingewählt?
      • Hatten Sie Ihre Seite mit Arachnophilia geöffnet, damit der "Use Current"-Button auch funktionieren konnte?
    • Wenn das mit dem Hochladen immer noch nicht klappt, fragen Sie einen Bekannten oder kontaktieren Sie Ihren Provider.

  • Zu Allgemeinem Webseiten-Design:

    • Es gibt Unmengen Bücher darüber — schauen Sie mal in einer Bücherei oder im Buchhandel vorbei
    • Im Internet gibt es viele viele Dokumente, die das Schreiben von Webseiten erklären.
    • Wenn Sie eine Seite sehen, die etwas tut, was Sie gerne auch auf Ihrer Seite hätten, schauen Sie sich einfach den Quell-Text der Seite an:
      • Im Microsoft Internet Explorer, klicken Sie auf "Ansicht ... Quelltext"
      • In Firefox, wählen Sie "Ansicht ... Seitenquelltext anzeigen"
      • Wenn Sie Safari verwenden, klicken Sie auf "Darstellung ... Quelltext anzeigen"
      • (eigentlich hat jeder Browser eine solche Funktion)
      • Schauen Sie sich die Tags der Seite an — so können Sie am allermeisten lernen.
    • Wenn Sie nichts über Suchmaschinen wissen, wäre es gut, wenn Sie etwas über diese mächtigen Internet-Werkzeuge herausfinden würden. Surfen Sie beispielsweise zu www.google.de. Geben Sie "HTML Einführung" als Suchbegriff ein - Sie werden schnell sehen, wie nützlich Suchmaschinen sein können.
 

Dokumentation |