Startseite  >>>  10 Schritte zum Bau der eigenen Homepage  >>> 3. Schritt
 
3. Schritt: Das Arbeiten mit dem Netscape-Composer
- HTML-Sprache leicht gemacht -
 
Inhaltsverzeichnis:
 
1. Allgemeine Einführung
2. Kurze Einführung in die HTML-Sprache
3. Die Funktionen des Netscape-Composers
    a) Das Arbeiten mit Links
    b) Das Arbeiten mit Zielen
    c) Das Arbeiten mit Grafiken
    d) Das Arbeiten mit Tabellen
    e) Spezielle Tips und Tricks
 
 
1. Allgemeine Einführung

Das Dateiformat für die abgespeicherte Datei jeder Webseite einer Homepage wird auch als HTML-Format bezeichnet (Hypertext Markup Language). Für das Erstellen einer solchen Seite existieren zwei Möglichkeiten:
 
a) Mit speziellen Editierprogrammen kann man die Seiten durch Eingabe von Marken in der HTML-Sprache erstellen. Dieses Verfahren ermöglicht zwar eine große Vielfalt an Gestaltung, es ist aber sehr zeitaufwendig und kompliziert. Aus diesem Grunde sollen hier nur elementare HTML-Befehle behandelt werden.
 
b) Als externes Editierprogramm zum Schreiben von Marken ist für unsere Zwecke der Windows-Editor ("Notepad.exe") empfehlenswert. Den externen Editor stellen Sie im Netscape-Communicator (alte Netscape-Versionen) folgendermaßen ein: Wählen Sie "Bearbeiten", "Einstellungen" und "Composer". Geben Sie als externen Editor die Datei "notepad.exe" aus dem Windows-Stammverzeichnis an.

Netscape 7.0 (und aufwärts) besitzt einen eigenen Editor. Er öffnet sich durch die Befehle "Anzeigen" und "HTML-Quelle" im Composer.

Ich empfehle Ihnen aber zum Erstellen von einer Homepage mit Netscape eine alte 4er-Version von Netscape, z.B. 4.78. Die neuen Versionen besitzen zwar viele Extras und eignen sich als moderne Browser, sie sind aber bei weitem nicht so übersichtlich und bewältigen manche Aufgaben nicht. Daher orientiert sich die folgende Beschreibung an der alten Version 4xx. Sie finden eine Download-Möglichkeit des alten Netscape-Browsers bei Schritt 10.
 
c) Der Netscape Composer ist ein in den Netscape-Communicator integriertes Programm, welches auf einfache Art und Weise das Erstellen einer HTML-Seite ermöglicht. Texte werden einfach über den Zwischenspeicher aus einem Textverarbeitungsprogramm geladen, auch Grafiken können über die Befehle "Einfügen" - "Grafik" auf der Seite plaziert werden. Das gesamte Programm ist bei Netscape kostenlos erhältlich.
 
 
2. Kurze Einführung in die HTML-Auszeichnungssprache
 
Jede Webseite besteht in der HTML-Sprache aus einem Kopf (Head) und einem Körper (Body). Alle Eingaben, die im Kopf geschrieben wurden, erscheinen mit Ausnahme der Titels auf der Webseite nicht, sobald sie im Browser angezeigt wird. Der Grundaufbau einer HTML-Seite in der HTML-Sprache sieht etwa folgendermaßen aus:
 
<HTML> <HEAD> <TITLE> 3. Schritt zum Bau der Homepage </TITLE> </HEAD>
<BODY> hier steht der sichtbare Inhalt dieser Seite (mit weiteren Marken) </BODY> </HTML>
 
Der auf dieser Seite hier sichtbare Text ist rot markiert, die Überschrift grün. Sie können den Originaltext dieser Seite in HTML anschauen, wenn Sie "Ansicht" (oder "Anzeigen") und "Seitenquellentext" wählen.
 
Eine Marke, bzw. ein Element in HTML wird auch als "Tag" bezeichnet. Ein Tag beginnt immer mit der Marke in einer Klammer (Vergrößerungszeichen), z.B. <HEAD> und endet mit der selben Marke und (dem hier rot markierten), kleinen Zusatz: </HEAD>. Hier eine kleine Übersicht an Tags:
 

Tag auszuführende Aktion im Browser
<HTML> Öffnet, bzw. beendet ein HTML-Dokument 
<HEAD> Kopf der Seite mit Inhaltsangaben zur Datei (Name des Autors, Seitentitel, Schriftsatz, Betriebssystem) 
<BODY> Im Browser sichtbarer Teil des Dokuments
<A HREF="Datei.htm">Datei</A> Fügt einen Link ein
<CENTER> Zentriert einen Text oder eine Grafik in die Mitte
<FONT SIZE=+1> Die Schriftgröße des nachfolgenden Textes wird um eine Stufe vergrößert
<IMG SRC="Dateiname.jpg HEIGHT=204 WIDTH=185> Einfügen einer Grafik mit einer Größe von 204x185 Pixel 
<TABLE BORDER COLS=2 WIDTH="100%"> Einfügen einer Tabelle mit 2 Spalten und 100% Bildbreite
 
Um den Seitenquelltext z. B. dieser Seite mit allen HTML-Befehlen anzuschauen, wählen Sie "Datei" und "Seite bearbeiten". Es öffnet sich der Composer. Zur Änderung einer Seite mit Hilfe des Editors wählen Sie jetzt "Bearbeiten" (oder in neuen Netscape-Versionen "Anzeigen") und "HTML-Quelle". Die Seite öffnet sich im Editor, in dem Sie mit der HTML-Sprache schreiben und abspeichern können. Das folgende Kapitel soll aber zeigen, dass der Netscape-Composer das umständliche Schreiben im Editor weitgehend umgehen kann:
 
 
3. Die Funktionen des Netscape-Composers
 
Für alle weiteren Schritte benötigen Sie die alte Version 4.78 des Netscape-Communicators, der das Programm "Composer" enthält. Der Browser kann bei ZDNET downgeloadet werden. Zum Öffnen des Programms gibt es zwei Möglichkeiten:
 
a) Wählen Sie den Befehl "Composer" in der Menüleiste "Communicator". Bei neuen Netscape-Versionen öffnet sich der Composer durch die Befehle "Fenster" und "Composer".
b) Wählen Sie die Befehle "Neu" und "leere Seite" in der Menüleiste "Datei" (oder "Neu" und "Composer-Seite").
 
In beiden Fällen a) und b) wird ein neues Fenster geöffnet, in das Sie Text schreiben können. Der Composer ist ein vollwertiges Textvearbeitungsprogramm. Im Menü "Format" (oder "Absatz") kann ähnlich wie bei Word der Text und das Format aller Text- und Bildelemente bearbeitet werden. Es besitzt im Vergleich zu Word aber bestimmte Vorzüge: Zum Abspeichern der Seite wählen Sie einfach "Speichern unter" im Menü "Datei" und vergeben einen Dateinamen mit dem Zusatz ".htm" oder ".html". Die Startseite einer Homepage lautet immer index.htm oder index.html . Entscheiden Sie sich nur für einen Zusatz (in der Regel ".htm"), da eine Seite nicht erkannt wird, wenn ein Link auf einen Dateinamen mit der Endung ".htm" verweist und die Seite in Wirklichkeit die Endung ".html" besitzt. Verwenden Sie nur Kleinbuchstaben, nicht mehr als 8 Zeichen für den Dateinamen, keine Sonderzeichen und keine Leerstellen (entsprechend von Windows 3.1), da ein paar Nutzer noch das alte Windows-Betriebssystem verwenden! Im folgenden werden die wichtigsten Grundelemente und Gestaltungsmöglichkeiten einer HTML-Seite ausführlich beschrieben:
 
 
a) Das Arbeiten mit Links
 
Jede Seite sollte zu anderen Seiten oder Dateien verweisen, wo tiefergehende oder zusätzliche Informationen abrufbar sind: Sie sehen hier, dass ein Link nicht unbedingt auf eine HTML-Seite verweisen muss. Verweist der Link auf eine Grafik-Datei mit dem Zusatz ".jpg" oder ".gif", dann wird die Grafik im selben oder evt. in einem neuen Fenster geöffnet.
 
Zum Erstellen eines Links gehen Sie folgendermaßen vor: Dafür gibt es mehrere Möglichkeiten: Mit dem Befehl "Datei wählen" können Sie auch Verknüpfungen zu Ordnern Ihrer Festplatte herstellen. Achten Sie aber darauf, dass Sie keine absoluten Pfade verwenden, d.h. Sie würden in diesem Fall den Pfad der Dateiordner angeben (z.B. C:/Verzeichnis1/Datei.htm). In diesem Zusammenhang empfehle ich auch, keine Unterordner für Ihre Homepage anzulegen, sondern alles in einem einzigen Ordner abzulegen.
 
Im HTML-Code sieht ein Link folgendermaßen aus:
 
<A HREF="Datei.htm">Datei</A>
 
Der Link ist ein relativer Link (d.h. er führt zur "Datei.htm", die sich auf dem selben Server befindet) und ist mit dem grün markierten Text unterlegt. Statt der rot markierten Zieladresse können Sie auch eine komplette URL-Adresse angeben (http://www...), dann handelt es sich um einen absoluten Link.
 
Wollen Sie, dass sich bei Betätigen eines Links die Seite in einem neuen Fenster öffnet, dann klicken Sie im Composer mit der rechten Maustaste auf den Link und wählen Sie "Verknüpfungseigenschaften" und "HTML Spezial". Ergänzen Sie in dem Fenster den Befehl:
 
TARGET="_BLANK"
 
Der Link würde jetzt im HTML-Code folgendermaßen lauten:
 
<A HREF="Datei.htm" TARGET="_BLANK">Datei</A>
 
Wollen Sie, dass sich sämtliche Links einer Seite in einem neuen Fenster öffnen, dann müssen Sie die Seite im Windows-Editor öffnen (siehe oben) und in den HEAD der Seite folgenden Tag einfügen:

<BASE TARGET="_BLANK">
 
Soll die Zieladresse nicht oder ein Ersatztext in der unteren Leiste angezeigt werden (Bsp.: Link zur Startseite), dann geben Sie unter "HTML-Spezial" bei dem entsprechenden Link (mit rechter Maustaste auf den markierten Link klicken und "Verknüpfungseigenschaften" wählen) folgenden Code ein:
 
ONMOUSEOVER="window.status='Ersatztext'; return true "
 
Beim Betätigen des Links erscheint dann der Ersatztext in der unteren Leiste.
 
 
b) Das Arbeiten mit Zielen
 
Ein "Ziel" ist eine Stelle innerhalb eines HTML-Dokuments auf die ein direkter Link angelegt werden kann. Wenn Sie beispielsweise ein sehr langes HTML-Dokument mit vielen Unterpunkten angelegt haben, dann möchten Sie vielleicht aus einem Inhaltsverzeichnis zu bestimmten Stichworten springen. Beispiel: Wenn Sie hier klicken, dann gelangen Sie zum Anfang der Seite.
 
Fahren Sie mit dem Cursor an die Stelle, wo ein Ziel angelegt werden soll. Wählen Sie dann aus dem Menü "Einfügen" den Befehl "Ziel" und vergeben Sie einen aussagekräftigen Namen. Auf diese Weise können Sie auf viele Ziele innerhalb des Dokuments oder auf Ziele bei anderen Dokumenten verweisen.
 
 
c) Das Arbeiten mit Grafiken
 
Zum Einfügen einer Grafik wählen Sie aus dem Menü "Einfügen" den Befehl "Grafik". Es können nur Dateien mit dem Zusatz ".jpg" oder ".gif" als Grafik eingefügt werden. Im Menü "Grafikeigenschaften" finden Sie die Untermenüs "Grafik" und "Verknüpfung". Im Untermenü "Grafik" wählen Sie eine Datei aus, die als Grafik erscheinen soll. Mit Hilfe der Befehle unter "Abmessungen" können Sie die Grafik verkleinert oder vergrößert erscheinen lassen. Im HTML-Code erscheint eine eingefügte Grafik so:
 
<IMG SRC="Grafikdatei.gif" HEIGHT=150 WIDTH=234>
 
Die Längen- und Höhenangaben beziehen sich auf Pixel. Im Menü "Verknüpfung" können Sie einen Link auf ein anderes Ziel oder eine andere Dateiquelle angeben. In diesem Fall gelangen Sie durch einen Klick auf die Grafik zu einer anderen Quelle. Beispiele:

Linkfähige Grafiken sind in der Regel an einer blauen Umrandung zu erkennen. Dies muss aber nicht sein. Die blaue Umrandung löschen Sie durch folgende Aktion: Klicken Sie im Composer mit der rechten Maustaste auf die Grafik. Wählen Sie Grafik-/Verknüpfungseigenschaften und geben Sie für den "Außenbereich der Grafik" als durchgezogenen Rand "0 Pixel" ein. Dann erscheint nur die Hand, wenn Sie über die Grafik mit der Maus fahren.
 
Animierte GIF-Grafiken können wie eine normale Grafik eingefügt werden. Beim Abspeichern der Datei werden sämtliche Grafiken, die für die HTML-Seite benötigt werden, im gleichen Ordner mit abgespeichert. Dies ist in der Regel notwendig. Soll die Grafik am ursprünglichen Ort bleiben, dann wählen Sie unter "Grafik-/Verknüpfungseigenschaften" "Grafik bleibt an der ursprünglichen Adresse". Dies wird beispielsweise dann benötigt, wenn Sie bei Ihrem Provider nur 1 MB Platz für Ihre Homepage besitzen und Ihre Grafiken auf einem amerikanischen, kostenlosen Server ablegen wollen. Achten Sie aber dann darauf, dass als Pfad auf die Grafik die korrekte URL-Adresse angegeben wurde. Allerdings müssen Sie dabei beachten, dass Sie keine fremden Grafiken von anderen Urheberrechtsvertretern so in Ihre Seiten einbinden dürfen, dies ist nicht erlaubt.
 
Auf dieser Seite ist der Seitenhintergrund mit einer Grafik gestaltet (weiße Tapete). Klicken Sie im Composer mit der rechten Maustaste einfach auf eine leere Stelle des Dokuments und sie erhalten eine Menüauswahl. Unter "Seiteneigenschaften" können Sie eine Hintergrundgrafik auswählen. Das Häkchen wird automatisch gesetzt, sobald Sie eine GIF- oder JPG-Datei angewählt haben.
 
 
d) Das Arbeiten mit Tabellen
 
Viele Texte einer Webseite sind (wie bei diesem Abschnitt) in einer Tabelle angelegt. Mit Hilfe von Tabellen können Texte und Bilder sehr übersichtlich angeordnet werden. Wählen Sie aus dem Menü "Einfügen" die Befehle "Tabelle" - "Tabelle". Es öffnet sich ein Fenster, in dem Sie die Werte für die Tabelle eingeben können:  Zeilenzahl, 
Spaltenzahl, 
Tabellenausrichtung, 
Randbreite, 
Tabellenbreite, 
Tabellenhintergrund 
 
Bei "Tabellenausrichtung" ist generell die zentrierte Ausrichtung zu bevorzugen. Wollen Sie den Tabellenhintergrund mit einer Farbe versehen, dann wählen Sie eine entsprechende Farbe. Wenn Sie die Tabelle nur zum Anordnen von Text und Grafik benutzen wollen, dann müssen Sie bei "Randbreite" "0 Pixel" eingeben. Die Tabelle erscheint dann nicht, aber die Texte und Grafiken können auch nebeneinander angeordnet werden. Der Abschnitt oben wurde in einer zweispaltigen Tabelle mit der Randbreite 0 angelegt.
 
Das Arbeiten mit Tabellen ermöglicht die automatische Einstellung einer Seite auf verschiedene Monitorgrößen. Ist bei "Tabellenbreite" "100% des Fensters" gewählt, dann passt sich die Tabellenbreite automatisch an die Bildschirmbreite an. Dies kann aber von Nachteil sein, wenn Sie Ihre Homepage bei einer Auflösung von 1024x768 Pixel erstellt haben und dem Betrachter einen kleinerer Monitor zur Verfügung steht. Um die Bildbreite dennoch beizubehalten, sollte die Tabellenbreite in Pixel absolut angegeben werden. Die gesamte Breite bei einem 17-Zoll-Monitor bei der Auflösung 1024x768 Pixel beträgt im Netscape-Communicator etwa 970 Pixel. Wenn auch Nutzer mit einer Bildeinstellung von 800x600 Pixel ein ordentliches Bild haben sollen, kann man die Texte und Grafiken in einer 760 Pixel breiten Tabelle anzulegen. Der Nachteil dabei ist, dass die Seite eventuell nicht mehr einwandfrei ausgedruckt wird. Eine andere Möglichkeit wäre das Freilassen von relativ viel Platz.
 
 
e) Spezielle Tipps und Tricks  
Copyright: T. Seilnacht
 www.seilnacht.com