M A C F O R U M
NORBERT KÜHLTHAU, 3.12.97 
Anmerkungen bitte mitlesen, MARKUS DEISTLER, 22.10.2001

Homepage - aber wie?

Eine Kurzeinführung



Homepage - nur für Programmierer?

Einfache Homepages (etwa die Standardseiten des FEN) kann technisch gesehen wirklich jeder selbst anfertigen. Niemand sollte sich vom„Programmier“-Brimborium beeindrucken lassen. Bei den meisten Homepages ist die überzogene Gestaltung, die Überfrachtung mit technischen Spielereien und geklauten Bildern/Animationen nur hinderlich. Oft sind gerade einfach aufgebaute Homepages die besseren.

Bei einfach aufgebauten Homepages kann man problemlos auf grafische Editoren zurückgreifen (z.B. Pagemill), die es einem ersparen, sich mit HTML zu beschäftigen.
Nur wenn die Seite komplizierter aufgebaut ist, wird es nötig, tiefer in HTML einzusteigen, da die verschiedenen Browser komplexen HTML-Code unterschiedlich interpretieren und die grafische Vorschau solcher Editoren somit nutzlos wird.

Wer möglichst bequem eine einfach aufgebaute Homepage erstellen will, benötigt vielleicht gar keine Zusatzsoftware: Bei vielen Text-/Grafikprogrammen ist in den neueren Versionen bereits die Option eingebaut, die Seite als HTML-Dokument zu exportieren.
Falls nicht: Das Programm

Myrmidon
http://www.terrymorse.com/

kann wie ein Druckertreiber in der Auswahl angewählt werden und wandelt dann ebenfalls Bild/Textdokumente in eine HTML-Datei um. Auch Browser enthalten neuerdings (sehr) einfache Werkzeuge zur Gestaltung von Homepages. Ob solche Simpel-Lösungen den eigenen Ansprüchen genügen, muss jeder selbst entscheiden.

Um HTML einmal auszuprobieren, sind keinerlei Investitionen nötig, man benötigt noch nicht einmal einen Internet-Anschluß, nur einen Browser und ein Textprogramm.


HTML lernen?

Das ist einfacher als es klingt: HTML ist ja schließlich keine Programmiersprache, sondern nur ein einfaches Datenformat, um einen Text plattformübergreifend typografisch aufbereiten zu können (HTML=HyperText Markup Language).

Das wichtigste Argument dafür, HTML zu lernen: Bei allen Internetseiten kann man sich auch den HTML-Code ansehen, so daß man leicht etwas dazulernen und sich einiges abschauen kann.

Außerdem hat man dann die größtmögliche Kontrolle über die Seite, bei grafischen,„HTML-freien“ Editoren sind die Möglichkeiten in jedem Fall geringer. Wenn etwas nicht klappt, hat man bei HTML-Editoren durch Herumprobieren wenigstens die Chance, zu verstehen, warum. Bei grafischen Editoren ist man alleingelassen, sobald etwas nicht funktioniert.
Bei HTML-Editoren kann man auch die neuesten Tags eintippen, bei grafischen Editoren muß man auf die nächste Programmversion warten. Es lohnt sich also, einen Blick auf HTML zu werfen.


Die ersten Schritte...

Jede Webseite ist zunächst einmal nur eine Textdatei, so daß ein einfaches Textprogramm wie Simple-Text ausreicht, um eine eigene Seite zu erstellen. Andere Programme erhöhen zwar den Komfort, aber für den ersten Kontakt empfehle ich doch diesen Schritt, der dem Vorgang schlagartig seine einschüchternde Aura nimmt:
Ich tippe einen Satz in Simple-Text.
Dieser Satz wird nun durch Markierungen (Tags) ergänzt, die einem Abschnitt bestimmte Merkmale zuordnen. Die Tags kommen meistens paarweise, um Beginn und Ende des Abschnitts leichter bezeichnen zu können.
Ich tippe <B>einen</B> Satz in Simple-Text.
Die Markierung <B> sagt dem Browserprogramm: ab hier fett.
Die Markierung </B> sagt dem Browserprogramm: ab hier nicht mehr fett.
Jetzt noch der (berüchtigte)„Blink“-Tag, der vielen Homepages den Charme einer Hochsicherheitszone verleiht:

Anm.: Das Blinken funktioniert nur noch mit Netscape 4.x-Browsern! Auch die Stylesheet-Angabe „text-decoration: blink“ funktioniert nirgends sonst. Eine Einführung in „Cascading Style Sheets“ auf Englisch findet man übrigens bei http://www.w3.org.

<html>Ich tippe <B>einen</B> Satz in <blink>Simple-Text</blink></html>.
Vor den Satz habe ich noch <html> eingegeben, was dem Browser zeigt, daß es sich auch wirklich um HTML handelt, an den Schluß kann man der Ordnung halber auch noch ein </html> stellen. Dann speichere ich das Dokument als Text-Datei. Diese wird nun einfach auf das Netscape-Ikon gezogen (oder auf das geöffnete Browser-Fenster), um sie mit dem Browser zu öffnen .
Das Ergebnis sieht so aus:
Ich tippe einen Satz in Simple-Text.

Wer sich an längeren Texten versucht, wird feststellen, daß der Browser aufeinanderfolgende Leerzeichen, Tabulator- und Absatzmarkierungen einfach übergeht. Um den Text zu gliedern müssen daher spezielle Tags benutzt werden, z.B. <BR> für „Neue Zeile“ und <P> für„Absatz“. Dennoch sind normales„Return“, Tabs und aufeinanderfolgende Leerzeichen nicht überflüssig, mit ihnen kann man den HTML-Code übersichtlich strukturieren, ohne die Darstellung im Browser zu beeinflussen.

Für eine minimale, aber komplette Homepage fehlen jetzt nur noch wenige Angaben: Jede Internetseite hat einen„Head“-Abschnitt, der allgemeine Angaben zum Text enthält, und einen„Body“-Abschnitt mit dem eigentlichen Text.
Die komplette Seite sieht demnach so aus:
<html>
Platzhalterbild <head>
Platzhalterbild <title>Mein erster Versuch</title>
Platzhalterbild </head>
Platzhalterbild <body>
Platzhalterbild Ich tippe <B>einen</B> Satz in <blink>Simple-Text</blink>.
Platzhalterbild </body>
</html>

Einrückungen und neue Zeilenanfänge sind dabei Geschmackssache und dienen nur der besseren Übersichtlichkeit.
Wer jetzt loslegen will braucht eigentlich nur noch eine Auflistung aller Tags mit Erläuterung, und das findet man am aktuellsten im Internet, z.B. hier:

Eine knappe Einführung in HTML:
http://www.uni-karlsruhe.de/Betrieb/HTML/Kurzanleitung.html

Eine sehr umfangreiche Einführung in HTML samt Tag-Liste, auch als Buch erhältlich, kann auch komplett als zip-Datei geladen werden:
http://www.teamone.de/selfhtml/


Wofür brauche ich einen HTML-Editor?

Natürlich möchte ich niemandem empfehlen, seine Homepage mit SimpleText zu erstellen. Tags können länger als nur drei Zeichen sein, und sie können zu allem Überfluß auch noch kombiniert werden. Mitunter liegen Anfangs- und Endtag viele Zeilen auseinander. Das alles macht die Seite sehr schnell unübersichtlich. Und niemand hat Lust, sich dutzende oder hunderte von Tags zu merken. Ein Editor erleichtert dies, je nach Preisklasse unterschiedlich gut.

HTML-Editoren im Freeware oder Sharewarebereich bieten meist eine übersichtliche Darstellung des HTML-Codes, oft mit farbiger Hervorhebung, manchmal mit automatischem Syntax-Check. Als Eingabe-Erleichterung dienen Paletten oder Tastaturkürzel. Will man allerdings nachträglich noch eine Angabe hinzufügen oder ändern, muß man dies direkt im HTML-Code tun, oder man löscht den gesamten Tag und gibt alles neu ein.
Um das Ergebnis sehen zu können, wird per Knopfdruck auf einen Browser eigener Wahl umgeschaltet.
Für den Anfänger sei hier ausdrücklich das Sharewareprogramm„Pagespinner“ empfohlen, das mit einer Fülle an mitgelieferten Beispielen sogar an JavaScript und StyleSheets heranführt. Sein Hauptdefizit ist der mangelhafte Tabelleneditor (mittels Tab-Taste).

Pagespinner
http://www.optima-system.com

BBEdit (Lite)
http://www.barebones.com/free/free.html

BBEdit HTML-Erweiterungen
http://www.barebones.com/support/html.html


Anmerkung: Editoren im mittleren Preisbereich (z.B. Pagemill) gibt es inzw. nicht mehr, oder werden für die Macintosh-Plattform nicht mehr weiterentwickelt (Symantec Visual Page). Registrierte Pagemill-Anwender können Adobes Golive 5.0 günstig erwerben. Info dazu hier!


Editoren im mittleren Preisbereich (z.B. Pagemill) bieten meist eine sogenannte WYSIWYG-Darstellung an (What You See Is What You Get). Für einfache Seiten ist das durchaus brauchbar und so bequem wie ein normales Text/Grafikprogramm. Will man etwas komplexere Seiten erstellen, stößt man jedoch schnell an Grenzen. Die programmeigene Preview-Darstellung versagt dann, da es Unterschiede zwischen den Browsern gibt, die einer einheitlichen Regelung Hohn sprechen. Da Microsoft mittlerweile am Browser-Markt aufgeholt hat, kann es sich Rangeleien mit Netscape erlauben. Und auch Netscape selbst weicht von den Beschlüssen des WWW-Konsortiums ab. Man kommt also nicht darum herum, das Endergebnis auf verschiedenen Browsern zu testen, selbst die einzelnen Versionen der Browser können Unterschiede aufweisen. Will man dann die HTML-Seiten solcher Editoren nachbessern, zeigt sich oft, daß der Code recht„chaotisch“ und„unübersichtlich“ aufgebaut ist. Es gibt extra Zusatzprogramme, um solche Seiten optisch aufzubereiten und„lesbar“ zu machen.

Pagemill
http://www.adobe.com/prodindex/pagemill/main.html

Außerdem erhielt ich von Uwe Buschhorn folgenden Tip:

„Es gibt einen neuen WYSIWYG-Editor fuer den Mac. Heißt Freeway, ist gut und unterstützt auch die 68k-Macs. Lehnt sich in der Funktionsweise an NetObjects Fusion an. Bei www.softpress.com gibts ne 30 Tage-Trial Version.
Beide Editoren zeichnen sich insbesondere durch die pixelgenaue Möglichkeit der Anordnung der Seitenelemente aus. Man kann also mit wenigen Mausklicks alle Elemente genau dahin positionieren, wo sie auch hin sollen. Man arbeitet also wie mit einem DTP-Programm. Realisiert wird dies durch eine Vielzahl von 'blank-Tables', die im HTML-Code untergebracht werden. Eine komplette Web-Seite ist so tatsächlich in ein paar Minuten fertig und man muß nichts über HTML wissen.

An dieser Programmtechnik scheiden sich aber die Geister. Der HTML-Code ist durch die Tables wesentlich umfangreicher. Außerdem passt sich das Seitenlayout nicht dynamisch unterschiedlichen Fensterbreiten des Browsers an. Das kann aber andererseits auch von Vorteil sein. Die Seite kommt beim Empfänger exakt so an, wie sie gestaltet wurde. Und wie gesagt: Man muß sich nicht mit HTML befassen.“


Teure Editoren im Profi-Bereich (z.B. Adobes Golive ) bieten nicht nur unterschiedliche Darstellungs- und Eingabemodi (HTML, Tabellen, Frames, Groblayout), diese korrespondieren auch miteinander, so daß Änderungen und Feinabstimmungen kein Problem sind. Außerdem bieten sie Hilfsmittel an, um das Management umfangreicher Sites zu erleichtern.

Adobes Golive
http://www.adobe.de/products/golive/main.html


Eine ausführlichere Beschreibung und Bewertung unterschiedlicher HTML-Editoren findet man unter http://www.tidbits.com/tb-issues/ und zwar in den Ausgaben #384 bis #391. Es gibt auch eine deutsche Übersetzung der Tidbits unter http://www.tidbits.com/tb-issues/lang/de/.


Wie bekomme ich die Homepage auf den FEN-Server?

Jedes Mitglied im FEN-Förderverein hat 2 MB Web-Space zur Verfügung, was für viele Seiten ausreicht. Hat man die Mitgliedschaft bestätigt bekommen, kann es noch ein paar Tage dauern (bei mir waren es 6), bis auch der Zugang zum Web-Space eingerichtet ist. Erhält man also zunächst nur Fehlermeldungen beim Upload, liegt es meist daran.
Zum Übertragen der Seiten braucht man einen FTP-Client, ich nehme dazu

Fetch
http://fetchsoftworks.com/

Startet man das Programm, sollte zunächst nur die Menüleiste erscheinen. Falls ein Fenster erscheint und Angaben abfragen will, cancelt man dies. Dann wählt man im Menü„Customize“ den Punkt„ New Shortcut...“und gibt hier folgende Angaben ein:

Name: Homepage
Type: (unknown)
Host: www.fen-net.de
User ID: xy0815 (die persönliche Login-ID)
Password: oooooooo (das persönliche Passwort)
Directory: public_html

Unter„Window/Fetch Shortcuts“ kann man die Eingaben auch nachbearbeiten oder löschen.
Sodann wählt man im Menü„Customize“ den Punkt„Preferences“ und gibt bei„General“ ein:

(x) Use Internet Config (ankreuzen, falls dies installiert ist)
Default shortcut: (Homepage) (= falls man möchte, daß bei Programmstart bereits diese Verbindung angeboten wird)
(Internetadresse), z.B. xy0815@fen-net.de
(x) Display server messages
(x) Keep connections active

Dann weiter zu„Upload“:

Default text format: (Raw Data)
Default non-text format: (Raw Data)

Der Rest ist egal, soweit ich das abschätzen kann, andernfalls möge man mich berichtigen.
Nun wählt man sich ein, um eine stabile PPP-Verbindung zum FEN-Server aufzubauen. Dann ist im Menü„File“ Punkt„Shortcuts.../Homepage“ zu wählen. Fetch versucht nun, das Verzeichnis„public_html“ auf dem FEN-Server zu finden und zeigt dessen Inhalt an.

Fetch-Screenshot

Mit dem Button„Put File...“ wählt man die HTML-Textdatei auf der Festplatte aus, die dann (Raw Data bestätigen) dorthin geladen und auch gleich im Verzeichnisfenster angezeigt wird.
Ab jetzt ist die Seite öffentlich per Browser zugänglich, die Adresse lautet:
http://www.fen-net.de/~xy0815/NameDerDatei
Mit„Delete Directory or File“ kann die Seite wieder gelöscht werden.

Da die Verknüpfungen zwischen mehreren Seiten normalerweise relativ sind, bleiben sie auch auf dem Server intakt. Vorausgesetzt, man hat an der relativen Position der Seiten nichts verändert oder etwa versehentlich absolute Links gesetzt.

Jetzt kann man mit dem Browser noch einmal testen, ob die Homepage auch ausreichend schnell vom Server geladen wird, hier kann man noch einmal böse Überraschungen erleben.
Falls man sich jetzt freut, daß die Umlaute richtig angezeigt werden: Von wegen, das liegt vermutlich nur daran, daß man immer noch am selben Rechner sitzt. Eine richtige Darstellung an anderen Rechnern ist nur garantiert, wenn die Umlaute zuvor in „html entities“ umgewandelt wurden, d.h. ü wird als &uuml; eingegeben, ß als &szlig; usw.
Pagespinner erledigt die Umwandlung eines Textes komfortabel mit dem Befehl„Edit/Convert/To ISO Latin-1“. Das sollte man aber erst am Schluß machen, wenn alles paßt, da der HTML-Text dadurch schwerer lesbar wird.

Wichtig ist noch, daß GROSS- und kleingeschriebene Dateinamen auf dem FEN-Server (Unix) unterschieden werden, während der Mac keinen Unterschied macht. Eine häufige Fehlerquelle, falls man Links per Hand eintippt!

Wie mache ich meine Homepage bekannt?

- Sofern eine Seite (sinnvollerweise die Einstiegsseite) als index.html benannt wurde, wird diese vom FEN-Server erkannt. Die Seite wird dann, alphabetisch nach dem User-Namen, in der Liste der FEN-Homepages aufgeführt. Da diesmal kein Mensch dahintersteckt, sondern ein kleines Programm, dauert das auch nicht 6 Tage, sondern nur wenige Minuten.

- Wer eine Homepage erstellt hat, die im weitesten Sinne etwas mit dem „Mac“ zu tun hat, kann dies in der FEN Mac-Gruppe (fen.comp.mac.allg) bekanntgeben oder eine Mail an xx511@fen-net.de schicken. Die Homepage wird dann auch im FEN Mac-Forum aufgelistet.

- Am besten ist es natürlich, einen kleinen Beitrag für das FEN Mac-Forum zu schreiben, der die Leser auf ein Thema der Homepage neugierig macht :-)


[Zurück zum Seitenanfang] [MacForum]

made with Macintosh
© 1998, Norbert Kühlthau - Letzte Änderung: 18. April 1998
Verbesserungsvorschläge an na1069@fen-net.de
Das FEN-Logo Valid HTML 4.01!