Gerade für Anfänger sind die vielen kleinen Probleme ein Grund den Spaß an der eigenen Homepage zu verlieren. Ob Frames erstellen, einen OnMouseOver-Effekt einfügen, oder nur die Meta Tags für die Homepage erstellen, für viele Probleme findest du hier konkrete Hilfe, Anleitungen oder weiterführende Links.

Surftipp: World of Clipart Hier gibt es Cliparts, Backgrounds, animierte Gifs, Linien, Buttons, Icons, Bannerrohlinge, Buttonrohlinge und Knöpfe.

 

1. Ein Platz für die HP

Am Anfang steht die Überlegung : Was will ich überhaupt ? Eine kleine Homepage für Freunde und Bekannte, vielleicht soll es auch etwas mehr sein mit tollen Grafiken und Effekten oder vielleicht sogar mit einer Downloadarea in größerem Umfang. Über dies solltest du dir vorher im Klaren sein. Später den Provider und damit auch die Startadresse wechseln macht unter Umständen sehr viel Arbeit.

Eine einfache Homepage kommt mit 10 MB Webspace bestens aus. Willst du aber Programme oder Grafiken zum Download zur Verfügung stellen sollten es schon 20-50 MB sein.
Einfach ist es wenn dein Internet-Provider dir Speicherplatz für die Homepage zur Verfügung stellt. Erhältst du keinen Webspace oder zu wenig dann kannst du dir hier einen kostenlosen Webspaceanbieter wählen.

Tipp: Weniger ist manchmal mehr. Wähle den Anbieter nicht allein nach Speicherplatz auf seinem Server aus. Er sollte über eine schnelle Anbindung zum Internet verfügen, FTP-Upload unterstützen und evt. dir die Möglichkeit geben CGI-Scripte auszuführen.
Eine kryptisch lange und schlecht zu merkende URL kannst du mit einer kostenlosen Alias Url umgehen oder du meldest bei STRATO oder bei Pure Tec eine richtige, eigene Domain an.
 

2. Homepageerstellung

So, jetzt kommt der schwerste Teil. Als erstes solltest du dir einen HMTL Editor besorgen. Windows 98 kommt z.B. mit Frontpage Express, ein recht einfacher Editor der wenig HTML-Kentnisse voraussetzt. Ich arbeite mit Ulli Meybohm´s HTML Editor IV, ein sehr gutes Freeware-Programm.  Eine ausführliche Online-Hilfe ist Selfhtml, leider auch sehr umfangreich. du kannst deine Page auch online mit Home Page Builder erstellen oder falls du nur Hilfe bei der Frameserstellung brauchst, dann benutze doch einfach ein frame-Script. Überlade deine Seiten nicht mit Bildern und Grafiken, denn wenn die Ladezeiten zu lag werden, laufen dir die Gäste fort. dein Browser speichert Bilder in einem Zwischenspeicher (Cache) auf der Festplatte und kann darum um vieles schneller die Seite aufbauen, als der eines Gastes, welcher erst alles über das Internet laden muß.

 

Tipp: Findest du eine gut gestaltete Internetseite kannst du diese einfach auf deiner Festplatte abspeichern und dann mit einem HTML-Editor anschauen. So kannst du von anderen Webmastern lernen, beachte aber deren Copyright.

3. Ab in's Internet

So, mit diesen Tipps müßtest du die erste Seite jetzt erstellt haben. Nun sollte sie online gehen, das heißt hochgeladen werden. Hast du deine Seite bei einem Webspaceanbieter online erstellt, geht diese normalerweise schon mit der Fertigstellung ins Netz. Offline am eigenen Computer erstellte Seiten werden über E-Mail oder ein FTP-Programm hochgeladen. Jetzt lies dir genau die Angaben deines Anbieters durch. Wird die Seite über FTP ins Netz gebracht brauchst du einb FTP-Prgramm. Außerdem solltest du wissen wie die erste Seite heißen muß und wie sie dann aufgerufen wird.

Ich empfehle WS_FTP. Du brauchst nur folgende Eintragungen zu machen:
Profile Name: z.B. den Namen des Anbieters
Host Name: Server-Adresse z.B. ftp.supertown.de
Host Type: Automatic detect
User ID: Deine User ID
Passwort: Dein Passwort

Damit solltest du deine erste Verbindung bekommen und die Page übertragen. Zur Kontrolle die Startseite online aufrufen und durchtesten. Doctor HTML testet deine Seite durch und meldet alle Fehler, das ist besonders bei umfangreichem HTML-Code sehr hilfreich. So das war's, du bist im Internet vertreten.

 

Tipp: Zur besseren Übersicht kannst du gleich von Anfang an Dateien in verschiedenen Verzeichnissen auf dem Server ablegen. Es bietet sich z.B. an Grafiken, Listen oder Unterseiten in einem eigenen Verzeichnis abzuspeichern. Zur Sicherheit solltest du von allem eine Kopie auf deinem Computer ablegen. Außerdem kannst du dann Änderungen in Ruhe offline durchführen und testen.

4. Besucher

Leider kennt außer dir und deinem Quietscheentchen niemand deine Homepage. Es gibt verschiedene Möglichkeiten, diese bekannt zu machen und Gäste zu bekommen.

a) Eintragung in div. Suchmaschinen und Listen :

Eintragungen können manuell bei jeder Suchmaschine vorgenommen werden oder du kannst einen Eintragedienst  damit beauftragen. Zuvor solltest du allerdings folgendes beachten : Die meisten großen Suchmaschinen verarbeiten Meta Tags. Meta Tags übergeben Informationen wie Titel, Beschreibung und Stichwörter. Unter den Stichworten wir später deine Page gefunden, also überlege gut welche Wörter du angibst.
Beispiel: Mit einem Meta Tag Generator  kannst du dir deine eigenen MetaTags konstruieren. Füll zuerst die Personal-und Page Information aus, klick auf MetaTag und kopiere die Informationen in den HEAD-Bereich von deiner Homepage. Meta Tag Analyzer überprüft die Meta Tags deiner Seiten und gibt Ratschläge. Vergiß nicht die geänderten Daten zu übertragen. Es dauert zwischen 1 Stunde und 2 Wochen bis dein Eintrag aufgenommen wird.
Einige Eintragedienste tragen dich in über 1000 Suchmaschinen und Listen ein. Allerdings ist bei den gut besuchten Listen zu beachten, das bereits nach 1-2 Tagen dein Eintrag so weit hinten steht, daß kaum noch Gäste kommen und ein Neueintrag von Nöten wäre.

Tipp1: Die meisten Surfer schreiben Suchwörter klein. Damit du gefunden wirst schreib deine Wörter erst klein und evt. später noch einmal groß. Auch sollten die wichtigsten Wörter an vorderer Stelle stehen, im Titel und im Text vorkommen. Aktualisiere öfter deine Seite und melde sie neu an. Damit stufen einige Suchmaschinen deinen Eintrag als wichtiger ein und plazieren ihn weiter vorne. Ziel sollte es sein unter die ersten 30 Einträge zu kommen.

Tipp2: Meta Tags sind für viele Suchmaschinen eine sehr wichtige Hilfe zum besseren indexieren deiner Seiten. Umfangreiche Erklärungen und Hilfe sowie viele Links zu Suchmaschinen findest du auf  Promotionseiten

b) Bannertauschdienste :

Ein Banner ist eine Grafik meist 400*40 Pixel groß im JPG oder GIF Format. Meldest du dich bei einem Bannertauschdienst  an, mußt du einen Code auf deiner Homepage installieren. Fortan werden Banner von anderen Mitgliedern auf deiner Seite gezeigt. Klickt jemand darauf wird er zu der betreffenden Seite verlinkt. Auch du brauchst so einen Banner. Entweder malst du selber, es werden Bannerrohlinge in einigen Grafiksammlungen angeboten, oder du läßt dir einen Banner kostenlos erstellen. Achte auf die Bedingungen der Tauschdienste ( Bannergröße, Inhalt der Seite, etc.)

Tipp: Generell ist zu sagen, ein gutes Tauschverhältnis und hohe Startkredite sind besser. Du solltest aber beachten, daß internationale Bannertauschdienste vor allem englischsprachige Surfer verlinken die mit einer deutschsprachigen Seite wenig anfangen können. Auch sind bei geringen Mitgliederzahlen die Seiten auf denen dein Banner gezeigt wird sehr begrenzt.

c) Banner-und Linkrotationen / Hitlisten :

Banner-und Linkrotationen funktionieren meist nach dem gleichen System. Ein neuer User trägt sich ein und dafür fällt der älteste Eintrag raus. Bei Linkrotationen wird lediglich ein Text angegeben, bei Bannerrotationen werden Banner und manchmal zusätzlich noch Text angezeigt Sind die Rotationen mit einer Klickstatistik ausgerüstet, dann kannst du nachschauen wie oft deine Seite angewählt worden ist.

Hitlisten arbeiten nach einem anderen Prinzip. Meist meldest du dich an und erhältst einen Code den du auf deiner Homepage einbinden mußt. Danach klickst du einmal auf den Banner. 12-48 Stunden später ist dein Link in der Hitliste vertreten. Jetzt werden die Klicks auf den Hitlisten-Banner, der sich auf deiner Seite, befindet gezählt. Je mehr Leute auf ihn klicken desto höher rutscht du in der Hitliste, gleichzeitig erhältst du weitere Besucher über diese Liste.

Tipp : An Bannerlisten mit Statistik kannst du gut den Wirkungsgrad deiner Banner erproben oder dir auch bei fremden Bannern mit hoher Klickrate Anregungen holen.

5. Feedback :

Ja, nun bist du neugierig. Wieviel Surfer finden meine Seite und was denken sie? Für´s Erste brauchen wir einen Zähler. Am besten einen mit Reloadsperre und einem attraktiven Design. Brauchst du umfangreiche Statistiken dann empfehle ich den Counter von Extreme Tracking Hier bekommst du alle erdenklichen Informationen über deine Besucher.

Ein  Gästebauch gibt den Surfern direkte Möglichkeit ihre Meinung zu äußern. Hier ist ein gut zu konfigurieren und editierendes Gästebuch von Vorteil.

Du solltest auch deine E-Mailadresse  für den direkten Kontakt angeben.

Auf vielen privaten Internetseiten oder bei Wunderbar Awardbewerbungen kannst du deine Page für einen Award bewerben. Wenn du willst kannst du auch selber Awards vergeben. Diese sind vergleichbar mir Orden-und Auszeichnungen.

Über einen eigenen  Newsletter  unterrichtest du Interessenten bei Änderungen oder Neuerungen an deiner Homepage.

Tipp: Du kannst deine Gäste aktiv an der Seitengestaltung teilhaben lassen. Frag doch einfach mal was sie über deine Homepage denken, wie die Ladezeiten sind, was sie vermissen etc.
Extreme Tracking eignet sich besonders zur Optimierung. Hast du erst mal Hits aus Suchdiensten kannst du sehen welche Suchwörter wie oft eingegeben worden sind und entsprechend deine META TAGS konstruieren.

Hast du Fragen oder Probleme rund um die eigene Homepage? Im  Diskussionsforum kannst du sie stellen.

Frames
Frames teilen das Browserfenster in verschiedene Bereiche ein, in denen jeweils eine eigenständige HTML-Seite ausgeführt werden kann. Dies ist besonders geeignet zur Navigation, Bannerwerbung oder für Partnerlinks.

Die Startseite hat selber keinen auszugebenden Inhalt sondern enthält lediglich die Framesdefinition. Zusätzlich können noch Angaben wie Meta Tags oder Hinweise für nicht framesfähige Browser integriert werden. Diese Framesdefinition lädt die eigentlichen HTML-Seiten in die dafür vorgesehenen Bereiche des Browserfensters.

Alle hier beschriebenen Funktionen lassen sich sehr bequem mit einem ausprobieren. Die Erklärungen sind in HTML ausgeführt und müssen für jeden WYSIWYG-Editor entsprechend von Dir angepaßt werden da dies den Rahmen der Seite sprengen würde.

So sieht der schematische Aufbau aus. Die Frames-Definition gehört zwischen dem HTML-Bereich und dem BODY-Bereich.

Eingeleitet wird die Definition mit <frameset> wobei hier noch weitere Parameter  übergeben werden können. Für jeden einleitenden Tag muß auch ein Endtag, </frameset>, eingebunden werden. Gerade bei verschachtelten Frames ist es sehr wichtig die Endtags auch an der richtigen Stelle zu setzen da sonst das Ergebnis fehlerhaft ist.

• rows - Reihen z.B. <frameset rows="15%,85%"> .
  Der Bildschirm wird in zwei waagerechte Fenster eingeteilt. Das obere entspricht 15% des vorhandenen Gesamtfensters und das untere 85%. Bei prozentualen Angaben sollte die Summe immer 100% betragen.
  
  
  
   

• cols - Spalten z.B. <frameset cols="15%,85%"> .
  Der Bildschirm wird in zwei senkrechte Fenster eingeteilt. Das linke entspricht 15% des vorhandenen Gesamtfensters und das rechte 85%.
  
  
  
   

Die Einteilung kann beliebig erweitert werden. Ein Frameset mit 4 Spalten würde z.B. so definiert: cols="15%,35%,35%,15%">

Neben der relativen Größenangabe in % kannst Du auch eine feste Größe in Pixeln vorgeben. z.B. <frameset rows="100,*"> . Das Sternchen fungiert als Joker und weist dem Fenster den gesamten, noch zur Verfügung stehenden Platz zu. In diesem Fall bekommst Du ein Fenster von 100 Pixeln am oberen Bildschirmrand und darunter ein Fester, das den restlichen Platz im Browser einnimmt. Selbstverständlich darf nur ein Sternchen in Deiner Definition vorkommen.

Um Reihen und Spalten gemischt einzusetzen mußt Du mit verschachtelten Frames arbeiten. In diesem Fall wird der Bildschirm nacheinander mehrmals aufgeteilt bis das gewünschte Ergebnis erscheint.

Hier mal ein vereinfachte Definition welche erst den Bildschirm in zwei Spalten und dann die zweite Spalte wieder in zwei Reihen unterteilt. Die Anmerkungen in Klammern sind nur zur Erklärung.

<frameset cols="160,*">
... (zwei Spalten, links 160 Pixel, rechts der restliche Platz der noch weiter aufgeteilt wird)
<frameset rows="100,*">
... (rechte Spalte, Reihe oben 100 Pixel)
... (rechte Spalte, Reihe unten restlicher Platz)
</frameset>
</frameset>

Nach der eigentlichen Definition der Bereiche des Anzeigenfensters, Frameset, mußt Du nun festlegen in welchem Teil welche Seite gezeigt werden soll. Zusätzlich bekommt jeder Bereich einen eigenen, unverwechselbaren Namen. Dies ist nötig damit später über spezielle Anweisungen bei den Verweisen auch andere Seiten in die Bereiche geladen werden können. Außerdem können auch hier noch weitere Parameter  übergeben werden.

• src="x" - die Seite x wird in dieses Frame geladen, wobei x für eine beliebige HTML-Seite steht z.B. menue.htm. Diese Seite muß natürlich eine real existierende Seite sein.
  
   

• name="x" - dies Frame erhält den Namen x, wobei x für einen beliebigen Namen z.B. links steht. Dieser Name darf nur einmal im gesamten Frameset vergeben werden damit die einzelnen Frames unverwechselbar sind.

Beispiel: Erstellen wir eine Seite mit 3 Frames. Links das Navigationsmenü, die Seite heißt menue.htm das Frame links, rechts-oben einen Bannerwerbeplatz, die Seite heißt banner.htm das Frame oben und darunter das Hauptfenster welches wir main.htm und das Frame hauptfenster nennen.

<frameset cols="160,*">
<frame src="menue.htm" name="links">
<frameset rows="100,*">
<frame src="banner.htm" name="oben">
<frame src="main.htm" name="hauptfenster">
</frameset>
</frameset>
 

Anmerkung: In diesem Beispiel liegen alle HTML-Dateien im selben Verzeichnis wie die Seite mit der Frames-Definition. Sollen Seiten aus Unterverzeichnissen oder von anderen Servern eingebunden werden ist der Link in src="x" entsprechend anzupassen. So könnte hier auch z.B. src="werner/main.htm" oder src="http://www.dieDomäne/werner/main.htm" stehen.

Im NoFrames Bereich kannst Du einen alternativen Text oder auch ein Menü für Browser ablegen die keine Frames darstellen können. Außerdem kannst Du hier Links zu Deinen Unterseiten ablegen damit Suchmaschinen, welche Frames nicht richtig indexieren können, auch Deine Unterseiten finden.

Beispiel :

Alle normalen Links öffnen im selben Frame die angewählte Seite. Möchtest Du nun aber ein neues Browserfester öffnen, das Frameset beenden oder eine Seite in einem anderen Frame öffnen muß mit dem Link ein Ziel, Target, übergeben werden.

• target="x" - wobei x für den Namen des Frames steht, der bei der Frame-Definition mit name= vergeben wurde. Groß- und Kleinschreibung werden dabei unterschieden! Gibt es den von Dir angegebenen Namen nicht öffnet der Browser automatisch ein neues Anzeigenfenster.
  
   

• target="_top" - öffnet die Seite im ganzen Browserfenster und beendet das Frameset
  
   

• target="_blank" - öffnet die Seite in einem neuen Browserfenster und Dein Frameset bleibt im Hintergrund erhalten
  
   

• target="_parent" - öffnet die Seite in dem Zustand des Anzeigefensters, der vor dem Start Deines Framesets aktuell war

Beispiel : Du möchtest in der Navigation aus dem Beispiel Frames und deren Inhalte  zwei Links unterbringen von denen der erste die Seite witze.htm im Hauptfenster anzeigt und die Seite von Dauerstress in einem neuen Fenster öffnet.

<a href="witze.htm" target="hauptfenster">Witze</a>
<a href="http://www.dauerstress.de" target="_blank">Dauerstress</a>
 

Alle Editoren, die mit Frames umgehen können, haben einen Einfache Funktion ( Ziel, Zielframe, Target oder so ähnlich ) um einem Link die nötigen Informationen mitzugeben. Siehe hierzu in die Hilfefunktion deines Editors.

Eine Sonderform, die eingebetteten Frames, erkläre ich hier nicht da bisher nur der Internet Explorer diese anzeigen kann. Für eine genaue Erklärung empfehle ich Selfhtml

Um mehrere Frames mit nur einem einzigen Link ( Klick ) zu ändern muß auf ein kleines Java-Script zurückgegriffen werden. Die zu ändernden Parameter sind blau, Hinweise gelb dargestellt.

Bitte in den HEAD-Bereich der Seite einfügen :

Anstelle von Frame1 Frame2 Frame3 mußt du hier die im Frameset mit name= vergebenen Namen eintragen.

Dies ist der Link. Bitte in den BODY-Bereich der Seite einfügen :

In diesem Link-Code mußt du die URLs seite1.htm seite2.htm seite3.htm gegen deine Seitennamen austauschen, die in die entsprechenden Frames geladen werden sollen.

Hast du nur zwei Frames die geändert werden sollen, ist im Fuktionsaufruf des Java-Scripts ,URL3 und die Zeile parent.Frame3.location.href=URL3; sowie im Link ,'seite3.htm' zu löschen. Analog dazu können, durch die Erweiterung der Anweisungen, weitere Frames geändert werden.

Hier einige gute Seiten .. es lohnt sich vorbeizuschaun:

Meta Tags sind sehr wichtige Indizierungshilfen für die meisten Suchmaschinen, aber nicht das Allheilmittel für eine Spitzenpositionierung. Richtig eingesetzt, können sie durchaus die Position entscheidend verbessern und so einen waren Besucherstrom auslösen. Bei falscher Anwendung hingegen kann deine Seite dafür auch unter Eintrag 19456 verschwinden.

Für die schnelle und einfache Erstellung deiner persönlichen Meta-Tags empfehle ich einen Generator und für eine Überprüfung den META_TAG_ANALYZER.

Generell gilt: Meta Tags gehören in den <HEAD> Bereich deiner Webseite und Umlaute sollten folgendermaßen maskiert werden.

Ersetze das Zeichen ä durch die Zeichenfolge &auml;
Ersetze das Zeichen Ä durch die Zeichenfolge &Auml;
Ersetze das Zeichen ö durch die Zeichenfolge &ouml;
Ersetze das Zeichen Ö durch die Zeichenfolge &Ouml;
Ersetze das Zeichen ü durch die Zeichenfolge &uuml;
Ersetze das Zeichen Ü durch die Zeichenfolge &Uuml;
Ersetze das Zeichen ß durch die Zeichenfolge &szlig;

keywords META TAG

<META NAME="keywords" content="Suchwort1, Suchwort2, usw">

Im keyword tag gibst du die Suchwörter ein, getrennt durch Kommata und Leerzeichen, unter denen deine Seite später gefunden werden soll. Du kannst auch Phrasen verwenden. Phrasen sind mehrere zusammengehörende Keyworte, die nicht durch ein Komma getrennt werden. Eine passende Suchanfrage wird dadurch bei einigen Suchmaschinen höher gewichtet. Du solltest nicht mehr als 1000 Zeichen inkl. Komma und Leerzeichen verwenden.

Vorsicht: Die Verwendung von fremden Produkt- oder Firmennamen kann zu rechtlichen Problemen führen.

description META TAG

<NAME="description" content="Beschreibung deiner Seite">

Im Description tag beschreibst du den Inhalt deiner Seite. Meist wird dieser Text zusammen mit dem Titel in den Suchmaschinen angezeigt. Diese Beschreibung sollte nicht länger als 150 Zeichen sein.

author META TAG

<NAME="author" content="Name des Autors">

Im author tag steht der Name des Autors (d.h.: des inhaltlich Verantwortlichen) der HTML-Datei

date META TAG

<NAME="date" content="Datum und Uhrzeit">

Im date tag steht das Datum und die Uhrzeit der Erstellung oder der Veröffentlichung des Dokumentes.

Das Format ist: 1999-05-02T13:30:10+00:00.
1999 die Jahreszahl, 05 der Monat (Mai), 02 der Tag, 13 die Stunden, 30 die Minuten und 10 die Sekunden. Die Angabe 00:00 hinter dem Pluszeichen ist die Abweichung der Zeit von der Greenwich-Zeit in Stunden und Minuten, im Beispiel keine Abweichung. Wenn du nur das Datum aber keine Uhrzeit angeben willst, notieren nur den Teil der Datumsangabe bis vor dem großen T (für Time).

Des Eeiteren gibt es noch eine ganze Reihe Tags, die von der ein oder anderen Suchmaschine ausgewertet werden. Hier noch mal ein paar Beispiele:

publisher META TAG

<NAME="publisher" content="Name der Publishers">

Im publisher tag steht der Name desjenigen der die HTML-Datei veröffentlicht.

copyright META TAG

<NAME="copyright" content="Copyright">

Im copyright tag steht der Name desjenigen, der alle Rechte an der HTML-Datei hat.

revisit-after META TAG

<NAME="revisit-after" content="Anzahl days">

Im revisit-after tag kannst du dem Suchroboter mitteilen, nach wie vielen Tagen deine Seite neu indiziert werden soll.

robots META TAG

<NAME="robots" content="Anweisung">

Im robots tag kannst du dem Suchroboter mitteilen wie er sich verhalten sollen.