Kleines Hilfe ABC für Anfänger und die die welche waren !

Quelltexte

Grundsätzliches

Vorbereitung

Probleme

Tipps

Beispiel

Lernen



Quelltexte
So werden Scripte kopiert

  1. Das gewünschte Scripte gefunden? Super!
  2. Klick mit rechts in die Seite in der sich das Script befindet
  3. Wähle nun z.B. im Internetexplorer die Option "Quelltext anzeigen"
  4. Jetzt suchst Du das Javascript in dem Wirrwarr von Buchstaben und Zahlen, ganz easy.
  5. Das Script ist meistens mit Kommentaren gekennzeichnet und beginnt in der Regel mit: SCRIPT LANGUAGE="JavaScript"
  6. Nun muss das Script kopiert und in die eigene Seite eingefügt werden. Fertig!
  7. Wichtig: Es dürfen keine Copyrights entfernt werden!

Grundsätzliches
Vorab ein paar nützliche Infos.

  1. Alles sieht komplizierter aus als es ist.
  2. Damit das Internet das bleibt was es ist kopiere nicht andere Designs sondern hole Dir nur Inspirationen für Deine eigenen Projekte.
  3. Versuche Unübersichtlichkeit zu vermeiden, denn davon gibt es schon genügend Seiten.
  4. Der gesamte Quelltext wird benötigt um die Internetseiten im Browser darzustellen. Um so sauberer er geschrieben ist um so besser das Ergebniss für den Betrachter und den Browser.(siehe Beispiel)
  5. Leider sind Javascripte oft noch Browserabhängig, daß heißt Scripte die im IE funktionieren müssen im Netscape nicht funktionieren und umgekehrt. Bei der Anpassung der Javascripte sind der Fantasie keine Grenzen gesetzt.
  6. Javascripte vereinfachen die Gestaltung von Internetseiten sehr in Menüführung und Funktionalität. Trotzdem gibt es immer noch Menschen die Javascript in Ihrem Browser deaktivieren aus welche Gründen auch immer.
  7. Meistens kann man Javascripte irgenwo im Quelltext einbauen. Groß und klein Schreibung spielen oft auch keine besondere Rolle. Probier es einfach aus.
  8. Kommentare im Quelltext sollen Hilfen zum Einbau sein. Außerdem werden sie vom Browser ignoriert also nicht dargestellt.
    z.B.
    <!--Hier steht der Kommentar--> z.B.
    // hier Anzahl der Bilder eintragen (einzeiliger Kommentar) beginnend mit zwei Schrägstrichen

    z.B.
    /* Bitte diesen Vermerk nicht entfernen
    Die Copyrightrechte liegen beim Autor ...*/     (mehrzeiliger Kommentar)


  9. Aufbau eines einfachen Javasriptes

    10. <script language="JavaScript"> <!-- Inhalt des Javascriptes //--> </script>
  10. Aufbau eines erweiterten Javasriptes

    11. <SCRIPT language=JavaScript> <!-- function abfragen() { if (confirm("Willst Du wirklich auf meine Seiten")) {} else {window.location.href="index.html";}} // --> </SCRIPT> Hier steht die onloadAnweisung fuer die Funktion "abfragen". abfragen muss genauso geschrieben werden wie im eigentlichen Script. <BODY onload=abfragen()> Das gilt für alle Javascripte mit Funktionen.(immer gleicher Wortlaut)

  11. Aufbau eines Javasriptes mit if+else Anweisung

    12. <script language="Javascript"> <!-- var password = prompt("Bitte Passwort eingeben!") Textmitteilung fuer die Eingabe if (password == "geheim") { Hier steht das Passwort alert("Passwort stimmt !") Alertbox bei richtiger Eingabe location = "richtig.html" Ziel bei korrekter Eingabe } else { else bedeutet falsch location = "falsch.html" Ziel bei falscher Eingabe } //--> </script>

Vorbereitung
Diese Hinweise zur Vorbereitung sollte man nicht außer acht lassen.

  1. Beschaffe Dir die geläufigsten Browser, wie Netscape Navigator Und MS-Internet Explorer. So kannst Du sofort die Unterschiede in den Browsern sehen und gegebenenfalls ausmerzen.
  2. Versuche gleich mit einem Textorientierten Editor zu arbeiten, denn so lernst Du es am besten. Außerdem kannst Du so alle Möglichkeiten der Websiterstellung voll ausnutzen.
  3. Je einfacher der Editor um so leichter die Erstellung eines übersichtlichen Quelltextes. Ich persöhnlich benutze oft den Windows Editor, weil ich auch ohne viel Schnickschnack auskomme.
  4. Mache Dir Gedanken über den Inhalt und das Layout Deiner Seiten BEVOR Du beginnst, denn danach sind Änderungen generell mit viel Arbeit verbunden.Der beste Editor ist meiner Meinung nach der von Ulli Meybohm. Du kannst ihn hier HTML Editor herrunterladen
  5. Lasse Dich von anfänglichen Schwierigkeiten nicht entmutigen und versuche nicht gleich alles auf einmal zu lernen.
  6. Da man im Netscape Navigator den Quelltext nicht direkt bearbeiten kann ist es besser den Internet Explorer zu verwenden.Dort kannst Du dir den Text ansehen und sofort verändern.(rechte Maustaste oder oben im Symbolmenü unter bearbeiten.

Probleme
Hinweise zur Problembewältigung

  1. Leider kann ich hier nicht detailierte Anweisungen für tausende von Scripten niederschreiben aber ich hoffe trotzdem das es eine kleine Stütze sein wird.
  2. Schwierigkeiten sind da um sie aus dem Weg zu räumen, was zugegeben nicht immer leicht ist.
  3. Behalte immer das funktionierende Original, denn so kannst Du sicher sein das es an Dir liegen muß.
  4. Bei Problemen mit eigenen Scripten oder Scripten von dieser Webseite kannst Du das Forum nutzen.
  5. Natürlich gibt es weit aus bessere Foren als dieses hier. Aber eines mehr im www kann ja nicht schaden.
  6. Wenn etwas unklar ist gibt es die Möglichkeit in Self Html nachzusehen.
  7. Zugegebener Maßen hatte ich bei dieser Webseite genügend Probleme, deshalb kann ich sagen am Problem dran bleiben und nicht locker lassen.Wie schon erwähnt kann ich keine vorgefertigten Patentlösungen anbieten, trotzdem ist es sicherlich hilfreich sich diese Hilfeseite genau durchzulesen.

Tipps
Hier ein paar Tipps zur Gestaltung und Optimierung der Seiten.

  1. Halte immer daran fest etwas noch nicht da gewesenes zu gestalten, dann läßt der Erfolg nicht lange auf sich warten.
  2. Der Quelltext ist das wichtigste Deiner Webseite. Gestalte ihn übersichtlich so das spätere Änderungen nicht zur Qual werden.
  3. Versuche den Quelltext so klein wie möglich zu halten, denn jedes Zeichen muß übertragen werden. Auch Leerzeichen gehören dazu. Je kompakter der Text, umso schneller sind auch die Ladezeiten.
  4. Den größten Anteil der Ladezeiten nehmen allerdings Flashanimationen, Grafiken und Javaapplets in Anspruch. Also sparsam damit umgehen denn nicht jeder hat einen ISDN,DSL,etc. Anschluss. Und wie ja allgemein bekannt ist lange Ladezeiten verscheuchen die Besucher.
  5. Bevor Du beginnst mache Dir immer eine Kopie der Seite oder des Javascriptes mit dem Du arbeiten willst. Das ist wichtig weil alles mögliche passieren kann und das Original dann unbrauchbar ist. Kontrolliere nach jedem Arbeitsschritt den Du machst die Funktionalität der Seite oder des Scriptes.Das spart im Endeffekt viel Arbeit und Nerven.
  6. Melde Deine Seiten regelmäßig bei den Suchmaschinen an, (denn einmal reicht oft nicht aus) damit Du auch gefunden wirst und die Suchroboter Deine Seiten nicht "vergessen".
  7. Eine weitere Möglichkeit sind Eintragungen in Webarchiven und Linklisten.
  8. Verwendung von Cascaded Style Sheets erleichtert die Erstellung und Wartung von Internetseiten sehr. Style Sheets sind Stile für das Outfit einer oder mehrerer Seiten. Es muß eine separate Datei angelegt werden, die später im gleichen Ordner wie die Seiten stehen muß.Die Dateiendung ist css.
  9. Schau beim surfen mal in Deinen Browsercache und nehme mal eine css Datei unter die Lupe. Aufgerufen wird die Datei mit diesem Befehl: <LINK href="bspname.css" type=text/css rel=STYLESHEET> Dieser Befehl kommt nach dem Erstellen der Datei in Deine Seite.
  10. Angelegt wird sie indem man in eine Textdatei die Stilevorgaben einträgt und die Dateiendung auf css ändert.

Beispiel
So sollte in etwa das Grundgerüst einer Html Seite aussehen.

Die Dateiendung muß immer htm oder html sein. Was davor steht ist egal.
z.B. "bilder.html" oder
z.B. "meine_erste_internetseite_war_nicht_so_einfach.html" <HTML> <HEAD> <TITLE>Hier den Seitentitel eintragen</TITLE> <META NAME="author" CONTENT="Dein Name"> <META NAME="generator" CONTENT="Dein Html Editor"> <META NAME="KEYWORDS" CONTENT="Schluesselwoerter mit Komma trennen"> <META NAME="DESCRIPTION" CONTENT="Kurze Beschreibung Deiner Seite"> <META NAME="Audience" CONTENT="Zielgruppen eintragen z.B.alle"> <META NAME="Revisit-after" CONTENT="Abstand fuer Besuche der Roboter z.B. 15 days"> <META NAME="Robots" CONTENT="Angaben fuer Suchroboter z.B. INDEX,FOLLOW"> <META NAME="PAGE-TYPE" CONTENT="z.B. Private Homepage"> <META NAME="expire" CONTENT="Wann laeuft Deine Seite ab z.b. 2005"> <META HTTP-EQUIV="refresh" CONTENT="Nur zum autom. nachladen der Seite z.B. 30 "> <META NAME="CASSIFICATION" CONTENT="z.B. Autos"> <META HTTP-EQUIV="Content-language" CONTENT="Srache z.B. de"> <META HTTP-EQUIV="Reply to" CONTENT="Deine E-Mail Adresse"> </HEAD> <BODY TEXT="#FFFFFF" BGCOLOR="#000000" LINK="#00FFAF" VLINK="#FF007F" ALINK="#FFFFFF" BACKGROUND="Dein Hintergrundbild.jpg"> Hier kommt der gesamte Inhalt Deiner Seite rein. z.B.die Ueberschrift <h2>Willkommen auf meiner Homepage</h2> oder ein kleines Script <Script Language="JavaScript"> onLoad=window.alert('So sieht eine perfekte Seite aus!'); </script> oder ein zentriertes Bild <div align="center"> <IMG SRC="bild.jpg" WIDTH="200" HEIGHT="100" BORDER="0" ALT="Beschreibung"></div> oder ein rechts ausgerichteter Link <div align="right"> <A HREF="http://www.deineSeite.de">Homepage</A></div> oder eine horizontale Linie <hr noshade size="2"> </BODY> </HTML>

Lernen
Die goldenen Regeln für ein effektives Weiterkommen.

  1. Schau Dir die Quelltexte von anderen Internetseiten an und versuche daraus zu lernen.
  2. Hast Du Seiten gefunden die Dir gefallen schau Dir die Quelltexte an.
  3. Lass Dich nicht von meterlagen Quelltexten abschrecken, denn oft sind viele unnötig groß und unlogisch aufgebaut.
  4. Kaufe Dir Bücher oder besuche Kurse über Themen die Dich interessieren.Die Volkshochschulen bieten in der Regel alles an was man braucht und die Kosten sind auch akzeptabel. Du kannst Dir bei den Volkshochschulen einen Überblick darüber verschaffen.
  5. Experimentiere mit Javascripten, verändere sie und schau was passiert.
  6. Wenn Du selbst Scripte schreiben willst sind Deiner Kreativität keine Grenzen gesetzt.Trotzdem ist es ratsam sich erst umzusehen ob der Markt nicht schon etwas passendes bietet.
MfG Webmaster Darwin