vorheriges KapitelInhaltsverzeichnisStichwortverzeichnisnΣchstes Kapitel



Kapitel 34
HTML-Dokumente selbst gemacht

HTML-Dokumente werden bei Windows 98 aus mindestens zwei Gründen benötigt: Als Web-Seiten für die eigene Homepage und als Hintergrund eines Ordnerfensters. Natürlich lassen sich HTML-Dokumente auch als normale Dokumente benutzen. Gegenüber einem normalen Dokument bieten sie die Möglichkeit, Verknüpfungen (zum Beispiel auf Web-Seiten) einfügen zu können, und die Gewißheit, daß die Dokumente mit jedem HTML-Betrachter gelesen werden können. Wer mehr will, kann ein HTML-Dokument durch Einbeziehen von Skriptbefehlen und aktiven Elementen erweitern und kommt so zu einem völlig neuartigen Dokumenttyp, der dann allerdings auf den Internet Explorer oder Windows 98 angewiesen ist. In diesem Kapitel erfahren Sie, wie HTML-Dokumente aufgebaut sind und wie Sie mit FrontPage Express, dem HTML-Editor von Windows 98, eine eigene Homepage für das Internet oder nur zum Spaß und zum Kennenlernen von HTML erstellen können.

Kurzübersicht über dieses Kapitel:

Was ist eigentlich HTML?

Der allgemeine Aufbau eines HTML-Dokuments

FrontPage Express

Die eigene Homepage in 30 Minuten

34.1 Was ist eigentlich HTML?

HTML ist kein Modewort, sondern im Begriff, zum wichtigsten Dokumentstandard der kommenden Jahre zu werden. Dies hat auch Microsoft eingesehen und dafür gesorgt, daß Windows-98-Anwender mit HTML die Benutzeroberfläche maßgeblich gestalten können. Doch was ist nun HTML? Die Abkürzung HTML steht für »Hypertext Markup Language«. HTML wird auch als Seitenbeschreibungssprache bezeichnet, da es, unter Verwendung einfacher Kennzeichen, der sog. Tags, beschreibt, wie ein Dokument beim Betrachten mit einem HTML-Betrachter, wie dem Internet Explorer oder einem Ordnerfenster in der Webansicht, dargestellt wird. Das ist nun alles etwas umständlich formuliert, man könnte auch einfacher feststellen, HTML ist die Sprache des World Wide Web. Diese Formulierung ist kurz und prägnant, doch leider nicht ganz korrekt, denn HTML ist im Grunde völlig unabhängig vom Internet. Sie können Ihre Briefe, Ihre E-Mails, Anleitungen, Kochrezepte, Fahrtkostenabrechnungen, ja beliebige Dokumente in HTML erstellen. Natürlich macht das (vermutlich) niemand, da HTML noch nicht so verbreitet ist und es mit einem vertrauten Textverarbeitungsprogramm im allgemeinen etwas einfacher geht. Doch es spricht vieles dafür, daß HTML und sein Nachfolger XML (auf den in diesem Buch aber nicht eingegangen wird, zumal XML nicht von FrontPage Express unterstützt wird) zum Dokumentstandard der Zukunft wird. Das Besondere an HTML ist nämlich, daß es nicht von einer Firma erfunden, sondern von einem Komitee (dem W3C, dem Tim Berners-Lee, der Mit-Erfinder des Web vorsteht - mehr dazu unter www.w3c.org) standardisiert wurde. Wenn ein Dokument auf HTML basiert, sollte es mit jedem Betrachter und auf jedem Betriebssystem gleich dargestellt werden. Diese Unabhängigkeit ist die große Stärke von HTML.

Web-Seiten werden ausschließlich in HTML erstellt. Die Begriffe Web-Seite und HTML-Dokument sind daher synomyn. Ein HTML-Dokument muß allerdings nicht zwangsläufig im Web landen, sondern kann überall dort auftauchen, wo Textdateien zu finden sind. Zum Beispiel als Hintergrund für ein Ordnerfenster.


34.2 Die ersten Schritte in HMTL

Ein HTML-Dokument sieht auf den ersten Blick verwirrend aus. Vor lauter spitzen Klammern und kryptischen Buchstabenkürzeln ist zunächst nichts zu entziffern. Keine Sorge, es ist alles halb so wild. HTML beruht auf einem einfachen Prinzip 1. Sie müssen sich vorstellen, daß HTML auf jedem Computertyp funktionieren soll. Es darf weder eine bestimmte Hardware (etwa eine hochauflösende Grafikkarte), noch ein bestimmtes Betriebssystem vorausgesetzt werden. Aus diesem Grund müssen Formatierungsmerkmale, wie zum Beispiel Fett, auf die denkbar einfachste Weise eingebaut werden. Und was ist der einfachste Code, den jeder Computer versteht: simpler Text. Angenommen, eine HTML-Seite soll dem Betrachter einen guten Morgen wünschen. Wie muß ihr Inhalt dann lauten? Ganz einfach:

Guten Morgen!

Doch was ist, wenn das Wort Morgen fett dargestellt werden soll? Auch das ist einfach, man muß dem Betrachterprogramm, also etwa dem Internet Explorer, einfach die Anweisung geben: »Ab hier bitte alles fett«. Auch diese Anweisung wird durch Textzeichen dargestellt. Und damit der Betrachter weiß, daß die Anweisung eine Anweisung ist und nicht angezeigt werden soll, wird sie in spitze Klammern gesetzt:

Guten <B>Morgen</B>!

Diese HTML-Zeile weist den Browser an, ab dem Wort Morgen alles fett zu drucken. Wirklich alles? Da man im allgemeinen nur ein Textelement und nicht den gesamten folgenden Text fett sehen möchte, muß es auch eine Und-jetzt-bitte-Schluß-mit-fett -Anweisung geben. Diese gibt es auch, es handelt sich um das gleiche Kennzeichen, das den Fettdruck eingeschaltet hat, nur geht ihr ein Schrägstrich(/) voraus. Sie haben damit mit <B> und </B> Ihre ersten beiden HTML-Tags kennengelernt und ganz nebenbei die Bedeutung der spitzen Klammern erfahren. Sie spitzen Klammern kennzeichnen die HTML -Texte. Kleine Verständnisfrage: Wird denn auch das Aufrufezeichen fett ausgegeben? Nein, denn es folgt auf das </B>-Tag, durch das der Browser angewiesen wird, den Fettdruck auszuschalten.

Bevor Sie das eben Gelernte in die Praxis umsetzen und mit dem Editor ein HTML-Dokument erstellen, sollten Sie wissen, daß grundsätzlich jedes HTML-Dokument durch das Tag <HTML> eingeleitet und durch das Tag </HTML> wieder beendet werden muß. Das komplette HTML-Dokument könnte also wie folgt aussehen:

<HTML>Guten <B>Morgen!</B></HTML>

Damit das Ganze nicht so nüchtern wirkt, sollte man die erste Zeile als optisch auffällige Überschrift formatieren, eine Trennlinie und einen zweiten Satz hinzufügen:

<HTML><H1>Guten <B>Morgen!</B></H1><HR>Mein erster Versuch mit HTML - nicht schlecht, oder?</HTML>

Wenn Sie diese Zeile mit dem Editor eintippen und in einer Datei mit der Erweiterung .Htm abspeichern, haben Sie Ihr erstes HTML-Dokument erstellt, das Sie sich mit dem Internet Explorer anschauen können. Im Prinzip ist das auch eine Web-Seite, doch sollten Web-Seiten im allgemeinen etwas informativer sein.

Übrigens müssen HTML-Tags nicht groß geschrieben werden. Diese Schreibweise wird in diesem Buch nur aus Gründen der besseren Lesbarkeit gewählt.


Genau wie das <B>-Tag den Fettdruck einschaltet, gibt es andere Tags, über die Sie zum Beispiel den Schrifttyp oder die Schriftgröße einstellen können. Als wichtigste Regel sollten Sie sich merken, daß ein Tag so lange gültig ist, bis es durch sein Gegenstück wieder aufgehoben wird. Allerdings besitzt nicht jedes Tag ein solches Gegenstück. Ein Beispiel für ein Tag ohne Gegenstück ist <HR>, das eine horizontale Linie einfügt. Weiterhin sollten Sie sich bereits jetzt darauf einstellen, daß Tags verschachtelt werden können. Sie können daher mit dem <FONT>-Tag eine andere Schriftart festlegen und vor dem abschließenden </FONT>-Tag ein weiteres <FONT>-Tag folgen lassen, um etwa andere Schriftattribute zu ändern. Aber: Auch bei verschachtelten Tags muß auf jedes Tag ein Gegenstück folgen.

Der Internet Explorer zeigt beim Laden eines fehlerhaften HTML-Dokuments keine Fehlermeldung an, sondern stellt das Dokument einfach nicht oder nur eingeschränkt dar. Falls im Dokument also auf einmal merkwürdige Zeichen (nämlich der Inhalt der Tags) erscheinen oder Teile des Dokuments nicht angezeigt werden, haben Sie wahrscheinlich irgendwo eine spitze Klammer vergessen.


Falls Sie HTML-Dokumente nicht mit Front Page Express, sondern doch mit dem Windows-Editor kennenlernen wollen (was grundsätzlich keine schlechte Idee ist), sollten Sie sich einen Rahmen anlegen, der aus dem Grundgerüst besteht, das jedes HTML-Dokument benötigt. Sie müssen dann nicht jedesmal alle Tags neu eintippen.


Doch wo erfahre ich, welche HTML-Tags es gibt? Leider können die HTML-Tags aus Platzgründen nicht in diesem Buch vorgestellt werden. HTML-Referenzen und gut gemachte Einführungen finden Sie im Web in großer Auswahl. Suchen Sie einfach nach dem Stichwort HTML-Einführung oder HMTL Tutor. Der Rest ergibt sich dann von alleine.

34.3 Der allgemeine Aufbau eines HTML-Dokuments

Jedes HTML-Dokuments besitzt einen allgemeinen Aufbau. Er besteht aus einem Kopfteil (auch Header genannt) mit Angaben zum Dokument und einem Rumpfteil (auch Body genannt), der den eigentlichen Inhalt umfaßt:

<HTML><HEAD> <TITLE>Text des Titels</TITLE></HEAD><BODY> Hier werden Überschriften, Text, Verknüpfungen, Bilder oder Skripts eingefügt</BODY></HTML>

Auch wenn es nicht zwingend erforderlich ist, daß ein HTML-Dokument ein <HEAD>- und ein <BODY>-Tag enthält, ist dies die allgemein übliche Aufteilung, die auch von FrontPage Express angelegt wird.

34.3.1 Besonderheiten von HTML

HTML besitzt ein paar Besonderheiten, die es zu kennen gilt, denn sonst wird der Einstieg sehr mühsam.

HTML-Dateien sind grundsätzlich reine Textdateien, d. h., alle Eigenschaften des HTML-Dokuments sind in der Datei enthalten. Anders als bei einem Word-Dokument gibt es keine verborgenen Formatinformationen, so daß Sie aus der Datei 1:1 entnehmen können, wie die Seite dargestellt wird. Allerdings können HTML-Dokumente mit in separaten Dateien ausgelagerten Stilvorlagen (ähnlich den Dokumentvorlagen) arbeiten. Doch von dieser fortgeschrittenen Möglichkeit machen nur wenige Web-Designer Gebrauch.

Ein HTML-Dokument kann beliebig groß werden. Handelt es sich um eine Web-Seite, sollte man das Dokument aber nicht zu groß machen, sondern statt dessen in mehrere Teildokumente aufteilen. Wann immer jemand das Dokument anfordert, wird es komplett geladen. In einem Intranet ist das natürlich kein Problem, bei einer 28.8-Modemverbindung im Internet allerdings schon.

Bilder oder andere Objekte, wie zum Beispiel Java-Komponenten, sind grundsätzlich externe Dateien, d. h., sie werden nicht in das HTML-Dokument eingebettet. Sie werden von dem HTML-Dokument über ein spezielles Tag, zum Beispiel <IMG> für Bilder oder <OBJECT> für Komponenten, angesprochen. Damit das HTML-Dokument vollständig dargestellt werden kann, müssen die externen Dateien ebenfalls vorliegen. Bilder, die nicht geladen werden konnten, werden durch ein leeres Rechteck dargestellt.

HTML-Dokumente werden von jedem Browser ein wenig anders dargestellt. Das gilt besonders für fortgeschrittene HTML-Elemente wie Frames oder Tabellen.

Und noch eine Kleinigkeit gilt es zu berücksichtigen. In einem HTML-Dokument gibt es keine automatischen Zeilenumbrüche, d. h. wenn Sie beim Erstellen eines HTML-Dokuments durch Drücken der (¢)-Taste einen Zeilenumbruch einfügen, heißt das nicht automatisch, daß an dieser Stelle auch ein Zeilenumbruch erfolgt. Daß dies bei FrontPage Express sowie bei nahezu allen übrigen HTML-Editoren dennoch passiert, ist einfach ein Zugeständnis an den Komfort. Zeilenumbrüche müssen explizit eingefügt werden, bei FrontPage Express zum Beispiel über den Menübefehl Einfügen|Wechsel.

34.4 FrontPage Express

FrontPage Expresss ist ein kleiner, aber feiner HTML-Editor zum Erstellen von HTML-Dokumenten. Es besitzt bezüglich seiner Bedienung gewisse Ähnlichkeiten zu WordPad, wenngleich FrontPage Express weitergehende Möglichkeiten bietet und durch den Umstand, daß es auf HTML basiert, nicht mit einem typischen Textprogramm vergleichbar ist.

FrontPage Express muß gegebenenfalls nachträglich über das Windows-Setup installiert werden. Sie finden es in der Kategorie Internet-Programme.


Nach dem Start von FrontPage Express werden Sie, genau wie bei WordPad, mit einem Programmrahmen und einer leeren Fläche begrüßt werden. Sie können entweder Text direkt eingeben oder ein bereits vorhandenes HTML-Dokument laden und bearbeiten. Das sind die beiden wichtigsten Aufgaben von FrontPage Express.


Abbildung  34.1: FrontPage Express ist ein leicht zu bedienender HTML-Editor ohne auffällige Extras


FrontPage Express kann, und das wird leicht übersehen, anders als WordPad mit mehreren Dokumentfenstern arbeiten. Sie können also mehrere HTML-Dokumente nacheinander laden und zum Beispiel Texte zwischen den einzelnen Dokumenten durch Ziehen mit der Maus kopieren. Das ist immer dann besonders praktisch, wenn Sie ein neues HTML-Dokument auf der Grundlage eines bereits vorhandenen Dokuments erstellen möchten. Das Umschalten zwischen den einzelnen Dokumentfenstern geschieht mit der Maus oder über das Fenster-Menü.

34.4.1 Die Eingabe und das Formatieren von Text

FrontPage Express zeigt Ihnen die eingegebenen Texte (sowie alle übrigen Elemente) bereits so an, wie sie später beim Betrachten des HTML-Dokuments angezeigt werden. Eine Vorschaufunktion ist daher nicht zwingend erforderlich. Sie wäre aber dennoch sinnvoll, da jeder Web-Browser seine Eigenheiten besitzt und ein und dasselbe HTML-Dokument von verschiedenen Web-Browsern auch etwas verschieden dargestellt wird. In der Regel soll eingegebener Text auch optisch etwas verändert und zum Beispiel fett oder in einer anderen Farbe oder Größe angezeigt werden. Diese optische Veränderung von Textelementen wird als Formatierung bezeichnet. Das Prinzip, nach dem ein Text formatiert wird, ist sehr einfach. Sie geben den Text ein, markieren den zu formatierenden Bereich mit der Maus und stellen das neue Formatierungsmerkmal (zum Beispiel die Schriftgröße) in der Symbolleiste ein oder wählen über den Menübefehl Format|Zeichen ein Dialogfeld, in dem Sie alle Formatierungsmerkmale einstellen können.


Abbildung  34.2: In der Format-Symbolleiste werden die wichtigsten Textattribute eingestellt


Wie bei jedem Textprogramm können Sie auch bei FrontPage Express die Aktionen wieder rückgängig machen. Bei FrontPage Express kann (anders als beim FrontPage-Editor) allerdings nur die jeweils letzte Änderung rückgängig gemacht werden.


Folgende Attribute lassen sich über die Format-Symbolleiste einstellen:

HTML-Formatierungsebene (zum Beispiel Normal oder H1)

Schrifttyp (zum Beispiel Verdana)

Relative Schriftgröße (größer oder kleiner)

Die Textattribute Fett, Kursiv und Unterstrichen

Die Farbe (Vordergrundfarbe)

Die Ausrichtung eines Absatzes (linksbündig, rechtsbündig oder zentriert - Blocksatz gibt es noch nicht)

Die Art der Aufzählung (Aufzählungspunkte oder Nummern)

Das gleichzeitige Einrücken des linken und rechten Einzuges des Absatzes um einen festen Betrag nach links

Drücken Sie die Tastenkombination (Strg)+(S), verliert der aktuell selektierte Text seine Formatierungsmerkmale.


Als Alternative zur Format-Symbolleiste können Sie über den Menübefehl Format|Zeichen ein Dialogfeld aufrufen, in dem Sie nicht nur alle Formatierungsmerkmale, die über die Symbolleiste zur Verfügung stehen, sondern auch zusätzliche Merkmale einstellen können:

den Schriftgrad (d. h. die Schriftgröße in Punkt).

spezielle HTML-Formatierungsmerkmale, wie zum Beispiel Zitatschrift, Tastaturschrift oder blinkend.

das Hoch- und Tiefstellen von Textelementen (zum Beispiel für chemische Formeln) durch Angabe der vertikalen Position in Prozent.

Alle zusätzlichen Textmerkmale finden Sie in der Registerkarte Weitere Formate. Beachten Sie dabei aber, daß FrontPage Express die eingestellten Merkmale etwas anders anzeigt als zum Beispiel der Internet Explorer. Wenn Sie viel mit diesen speziellen Merkmalen arbeiten, sollten Sie sich Änderungen stets auch mit dem Internet Explorer anschauen.

34.5 Die eigene Homepage in 30 Minuten

Bitte schauen Sie gleich auf die Uhr. Sie werden nämlich innerhalb der nächsten 30 Minuten Ihre erste Homepage fertigstellen. Auch wenn Sie noch keine Homepage für das Internet benötigen, betrachten Sie die folgende Übung einfach als Aufwärmtraining für den Einstieg in HTML und den Umgang mit FrontPage Express. Welchen Inhalt die Homepage enthalten soll, spielt für die Übung keine Rolle. Wie wäre es mit einer Selbstdarstellung oder einer kleinen Abhandlung zu einem bestimmten Thema. Wenn Sie möchten, stellen Sie zunächst (stichwortartig) ein kurzes Selbstportrait auf einem Blatt Papier oder in einem Textdokument zusammen. Vielleicht verfügen Sie auch über ein nettes Foto, das sich für die Homepage eignet (ein solches Foto können Sie sich zum Beispiel mit einer preiswerten digitalen Kamera anfertigen). Natürlich geht es auch ohne Foto, zumal nicht jeder mit Bild weltweit vertreten sein möchte. Sie können die vorgeschlagenen Texte auch 1:1 übernehmen. Damit Sie wissen, was auf Sie zukommt, sehen in Bild 34.1 das Ergebnis dieser Übung. Verwenden Sie dieses Bild bitte als Vorlage für die Umsetzung.


Abbildung  34.3: So (oder so ähnlich) soll die erste Homepage später einmal aussehen


Hier zunächst eine Kurzübersicht über die einzelnen Schritte:

Sie starten FrontPage Express und legen über den Menübefehl Datei|Neu ein neues HTML-Dokument an.

Sie geben dem Dokument eine Überschrift und weisen dieser über die linke Auswahlliste in der Format-Symbolleiste ein H1-Format (das in HTML-Dokumenten übliche Format für Hauptüberschriften) zu.

Sie fügen ein Bild ein (in diesem Beispiel das Windows-Logo von der Windows-98-CD).

Sie fügen über den Menübefehl Einfügen|Horizontale Linie eine Trennlinie ein, damit sich die Überschrift vom folgenden Textblock optisch etwas abhebt.

Sie fügen einen Textblock (Normaler Text) ein. Dieser soll den Hauptteil der Seite darstellen.

Sie fügen über den Menübefehl Tabelle|Tabelle einfügen eine Tabelle ein. Die Optik der Tabelle ist am Anfang wenig ansprechend, doch nach ein paar Einstellungen sieht alles schon ganz anders aus.

Sie füllen die Tabelle mit ein paar Zeilen, in diesem Beispiel Tips zum Arbeiten mit Windows 98.

Sie schreiben die einzelnen Arbeitsanleitungen.

Sie verknüpfen jeden Eintrag in der linken Spalte mit dem entsprechenden Text (Sie fügen also ein Hyperlink sein, so daß der Betrachter durch Anklicken der Verknüpfung in der Tabelle zu der Textpassage kommt).

Sie ändern einige Formatierungsmerkmale, wie zum Beispiel die Hintergrundfarbe, die Schriftfarbe und die allgemeine Seitenbreite, damit die Seite optisch etwas attraktiver wirkt.

Damit ist die Homgepage fertig, und Sie können sie im Prinzip in das Internet stellen (wie das geht, wird am Beispiel von T-Online am Ende kurz beschrieben).

Das war die Schnellübersicht, im folgenden werden die einzelnen Schritte, die Sie natürlich nicht streng in dieser Reihenfolge ausführen müssen, ausführlicher beschrieben.


1. Starten Sie FrontPage Express. Wie bei einem Textverarbeitungsprogramm werden Sie auch bei FrontPage Express zunächst mit einer leeren Seite begrüßt. Möchten Sie eine Vorlage als Grundlage benutzen, müssen Sie den Menübefehl Datei|Neu auswählen. Sie erhalten eine Auswahl, die auch einige Assistenten enthält. Das Ergebnis ist in diesem Fall ein HTML-Dokument, auf dem einige Elemente bereits angeordnet sind und in das Sie nur noch die fehlenden Daten eintragen müssen.

2. Geben Sie eine Überschrift ein. Dies können Sie zwar zu jedem Zeitpunkt nachholen, doch wie beim ersten Schulaufsatz fängt man am besten mit der Überschrift an. Geben Sie dazu folgenden Text ein:

Wilkommen auf meiner Windows-98-Seite!

Damit der Text nicht ganz so blaß wirkt (schließlich handelt es sich um eine Überschrift), setzen Sie die Textmarke in die Zeile und wählen Sie aus der Formatauswahlliste den Eintrag »Überschrift1« aus.

3. Nun kommt etwas Grafik ins Spiel. Sie sollen das offizielle Windows-98-Logo an den Anfang der Seite setzen. Setzen Sie dazu erst einmal die Textmarke an den Beginn der Zeile, führen Sie den Menübefehl Einfügen|Bild aus, klicken Sie auf die Durchsuchen-Schaltfläche, und wählen Sie die Datei mit dem Logo aus (Sie können natürlich jedes andere Bild verwenden), das Sie in Form der Datei Logo.gif zum Beispiel im Verzeichnis win98\tour\overview\content\images der Windows-98-CD finden 2 .

Gerade am Anfang werden Sie mit dem Anordnen der Grafik ein wenig experimentieren müssen. Grafiken können nicht beliebig, sondern nur links, zentriert oder rechts angeordnet werden. Wenn Sie eine Grafik an einer beliebigen Stelle darstellen wollen, müssen Sie sie in eine Tabelle integrieren.

4. Bevor es weitergeht, soll noch eine grundlegende Änderung vorgenommen werden. Standardmäßig formatiert FrontPage Express alle Zeichen in der Schrift Times New Roman. Diese ist für die Darstellung auf einer Web-Seite gut, aber nicht optimal geeignet. Etwas ansehnlicher (und auch üblicher) ist die Schriftart Verdana. Um zu erreichen, daß alle Texte automatisch mit dieser Schriftart angezeigt werden, müssen Sie den Menübefehl Extras|Schriftartoptionen ausführen, die Sprache US/Westeuropäisch und in der Auswahlliste Proportionalschriftart den Eintrag Verdana einstellen.

5.Fügen Sie eine Trennlinie ein. Positionieren Sie die Textmarke auf die Position nach dem letzten Zeichen nach der Überschrift, und führen Sie den Menübefehl Einfügen|Horizontale Trennlinie aus. Dadurch wird nach der Überschrift eine Trennlinie eingefügt.

6.Fügen Sie einen Textblock ein. Der folgende Schritt ist der aufwendigste Schritt in dieser Übung, denn Sie sollen folgenden Textblock einfügen:

Hier findet Ihr Tips und Tricks, einfache Anleitungen und vieles mehr rund um Windows, damit das Arbeiten mit Windows noch mehr Spaß macht.Offizielle Informationen zu Windows 98 gibt es bei Microsoft.

Was Sie nicht sehen können, ist der Umstand, daß die erste Zeile nicht mit einem Zeilenumbruch beendet wurde, da ein automatischer Umbruch erfolgen soll, wenn der Betrachter das Fenster verkleinert (das ist nicht der Fall, wenn Sie jede Zeile mit der (¢)-Taste beenden).

Möchten Sie erreichen, daß zwei Zeilen zu einem Absatz gehören und die gleichen Formatierungsmerkmale gelten, müssen Sie die Zeilen durch einen weichen Zeilenumbruch verbinden, der durch das gleichzeitige Drücken der (¢)- und der (ª)-Taste eingefügt wird.


Ein Textabsatz kann linksbündig, rechtsbündig oder zentriert angeordnet werden. Blocksatz gibt es in HTML leider (noch) nicht, auch wenn dies sehr praktisch wäre. Im allgemeinen entscheidet man sich für linksbündig. Zentriert werden in der Regel nur Überschriften.


1. Als nächstes soll das Wort Microsoft eine Verknüpfung auf die Windows-98-Webseite von Microsoft erhalten. Es ist ja eine der großen Stärken von HTML, daß man jedes Text- und Grafikelemente mit einer Verknüpfung belegen kann. Markieren Sie also das gesamte Wort, und führen Sie den Menübefehl Einfügen|Hyperlink aus. Es erscheint ein Dialogfeld, in dessen Eingabefeld URL Sie die Webadresse eingeben müssen (z. B. www.eu.microsoft.com/germany/windows98). Nach Bestätigen mit der OK-Schaltfläche werden Sie feststellen, daß das Wort Microsoft unterstrichen wurde. Es ist jetzt ein Hyperlink, durch dessen Anklicken man auf die Microsoft-Webseite gelangt.

2. Jetzt wird es unter Umständen etwas komplizierter, denn es soll eine Tabelle eingefügt werden. Führen Sie zunächst den Menübefehl Tabelle|Tabelle einfügen aus. Es erscheint ein Dialogfeld, in dem Sie die Anzahl der Spalten (2), der Zeilen (3) und unter anderem auch die Breite der Umrandung (1) einstellen können. Alle diese Angaben können nachträglich geändert werden. Das Resultat ist eine ziemlich kleine Tabelle, die größer wird, sobald Sie Texte oder Grafiken einfügen.

3.Jetzt wird die Tabelle mit Text gefüllt. Fügen Sie in die erste Spalte der ersten Zeile den Text Arbeitsschritt und in die zweite Spalte der ersten Zeile den Text Schwierigkeitsgrad ein. Sie werden feststellen, daß sich die Breite der Spalten automatisch an den Inhalt anpaßt. Füllen Sie die übrigen zwei oder drei Zeilen nach dem gleichen Schema, wobei Sie sich die Inhalte selber ausdenken können. Da wir die zweite Zeile für die nächste Übung noch benötigen, sollten Sie in die erste Spalte der zweiten Zeile den Text Schnellstartleiste erweitern und in die zweite Spalte den Text Leicht eintippen.

Gegebenenfalls kann es erforderlich sein, die Breite der ersten Spalte etwas zu erhöhen. Setzen Sie die Textmarke in die Zelle, führen Sie den Menübefehl Tabelle|Zelleneigenschaften aus, und geben Sie für die Breite einen Wert von 50% ein.


4. Nun benötigen wir noch eine kleine Arbeitsanleitung, auf die der Eintrag in der zweiten Zeile der Tabelle verweisen soll. Fügen Sie als erstes über den Menübefehl Einfügen|Horizontale Linie eine weitere Trennlinie ein und geben Sie dann den folgenden Text ein:

Neue Einträge in die Schnellstartleiste einfügenDie Schnellstartleiste von Windows 98 läßt sich um beliebige Einträge erweitern.Dazu müßt Ihr folgende Schritte ausführen:Als erstes müßt Ihr das Programmsymbol lokalisieren.Programmsymbol mit der rechten Maustaste auf die Schnellstartleiste ziehen und dort loslassen.Aus dem Menü den Eintrag Verknüpfung(en) hier erstellen wählen.

Selbstverständlich ist dies lediglich ein Textvorschlag, Sie können den Text völlig frei gestalten. Die Arbeitsschritte sollten Sie als Aufzählungen formatieren, was über das entsprechende Symbol in der Formatleiste geschieht.

Prinzipiell ist es natürlich kein Problem, Textpassagen aus Word (oder einem anderen Textprogramm) in ein HTML-Dokument einzufügen. Bei Word müssen Sie aber beachten, daß dieser Text automatisch im RTF-Format eingefügt wird. Da keine Formatierungsmerkmale übernommen werden sollen, müssen Sie den Text zunächst filtern, indem Sie ihn über den Menübefehl Bearbeiten|Inhalte einfügen (den es bei FrontPage Express nicht gibt) in ein neues Word-Dokument als unformatierten Text einfügen.


5. Damit ein Anklicken eines Eintrags in der ersten Spalte der Tabelle dazu führt, daß die entsprechende Stelle mit der Arbeitsanleitung aufgerufen wird, sind zwei Schritte erforderlich:

Die Stelle mit der Arbeitsanleitung muß mit einer Textmarke versehen werden.

In der Spalte muß eine Verknüpfung auf diese Textmarke eingefügt werden.

Markieren Sie als erstes die Überschrift der Arbeitsanleitung, und führen Sie den Menübefehl Bearbeiten|Textmarke aus. Die aktuell markierte Zeile wird in dem Feld Name der Textmarke angezeigt. Bestätigen Sie mit OK, wird in die Zeile eine Textmarke eingefügt, auf die man von anderen Stellen aus verweisen kann (Sie werden feststellen, daß die Zeile mit einer blau gestrichelten Linie angezeigt wird). Markieren Sie nun die erste Spalte in der zweiten Zeile der Tabelle, und führen Sie den Menübefehl Einfügen|Hyperlink aus. Diesmal soll auf keine Web-Seite (URL), sondern auf eine Textmarke verwiesen werden. Wählen Sie daher die Registerkarte Geöffnete Seiten, selektieren Sie die HTML-Seite (sie sollte Standard-Seite ohne Titel heißen), und wählen Sie aus der Auswahlliste Textmarke die Textmarke aus. Wenn Sie das Dialogfeld mit der OK-Schaltfläche schließen, wurde ein Hyperlink auf die Textmarke eingefügt. Wann immer später der Betrachter auf dieses Hyperlink klickt, wird die Textpassage aufgerufen, der die Textmarke voransteht.

6. Führen Sie den Menübefehl Datei|Speichern unter aus, klicken Sie auf die Schaltfläche Als Datei, geben Sie als Dateinamen Meine erste Homepage.htm ein, und bestätigen Sie das Dialogfeld mit der OK-Schaltfläche.

Das HTML-Dokument wurde damit in einer Textdatei gespeichert. Es ist recht lehrreich, sich einmal den Inhalt einer solchen HTML-Datei, zum Beispiel mit dem Editor, anzuschauen. Sie sehen eine Reihe von HTML-Tags, die den von Ihnen eingegebenen Text einrahmen. Den gleichen Quelltext sehen Sie übrigens, wenn Sie in FrontPage Express den Menübefehl Ansicht|HTML ausführen. Übrigens, wenn Sie möchten und wenn Sie sich ein wenig mit HTML auskennen, können Sie bei FrontPage Express (wie auch beim FrontPage-Editor) jederzeit Änderungen im HTML-Quellcode durchführen. Wenn Sie das HTML-Fenster wieder über die OK-Schaltfläche schließen, werden diese Änderungen automatisch bei der Darstellung des Dokuments berücksichtigt.

Damit ist die Homepage zunächst fertig (haben Sie auf die Uhr geschaut?) Sie können natürlich nach Herzenslust weitere Veränderungen vornehmen. Das Ergebnis wird zwar mit Bild 34.1 nicht unbedingt identisch sein, es sollte aber große Ähnlichkeiten aufweisen.

Sie können das Dokument noch einmal abspeichern und es mit dem Internet Explorer anschauen, indem Sie diesen starten und das Dokument über den Menübefehl Datei|Öffnen laden.


Abbildung  34.4: Die fertige Homepage wird über den Öffnen-Befehl in den Internet Explorer geladen


Ganz fertig ist das HTML-Dokument natürlich nicht, zumal es sich lediglich um eine Übung handelt und Sie das Resultat, sofern Sie die vorgeschlagenen Texte übernommen haben, mit ganz anderen Augen betrachten dürften, als wenn es sich tatsächlich um Ihre eigene Homepage handeln würde. Alles weitere hängt natürlich von Ihnen ab. Mit dem, was Sie bisher über den Umgang mit FrontPage Express gelernt haben, können Sie Ihre Homepage nun erweitern oder einfach noch einmal von vorne anfangen.

34.5.1 Kleine Erweiterungsvorschläge

Das Erstellen von Web-Seiten ist eine Tätigkeit, bei der Erfahrung und das Wissen um gewisse Kniffe eine entscheidende Rolle spielen. Die folgenden (aus der Sicht eines Web-Profis sicherlich recht banalen) Hinweise sollen Ihnen ein paar Anregungen für Erweiterungen geben:

Führen Sie den Menübefehl Format|Hintergrund aus, und ändern Sie die Hintergrundfarbe von Weiß auf Schwarz. Voilà. Das sieht doch alles gleich sehr viel ansprechender aus. Auch wenn es natürlich Geschmackssache ist, wirken Web-Seiten mit einem schwarzen Hintergrund besonders schick, zumal sich Grafiken optimal von einem schwarzen Hintergrund abheben.

Falls Sie mit HTML-Dokumenten erst wenig Erfahrung haben, werden Sie am Anfang ein wenig experimentieren müssen, denn nicht alles, was erlaubt ist, ist auch sinnvoll. Denken Sie daran, daß eine Web-Seite nicht nur Ihnen, sondern auch den zahlreichen Betrachtern gefallen muß 3 .

Das Stilmittel schlechthin sind Tabellen, denn über Tabellen können Sie (auch wenn Sie gar keine Tabellen darstellen möchten) Text und Grafikelemente sehr flexibel positionieren und erreichen dennoch eine weitestgehende Browser-Neutralität (nicht vergessen, es gibt da draußen noch andere Browser als den Internet Explorer).

Schauen Sie sich im Web um, denn dort finden Sie ein paar Millionen Anschauungsbeispiele. Sicherlich ist es zu zeitaufwendig, das Design einer Web-Seite zu studieren, doch wenn Ihnen ein Effekt gut gefällt, können Sie sich über den Befehl Ansicht|Quelltext anzeigen den HTML-Code anschauen. Erwarten Sie aber nicht zuviel. Zum einen kann der Code sehr umfangreich sein, zum anderen läßt sich nicht jede Darstellungsform aus dem HTML-Code ableiten (so einfach wollen sich die Profis meistens nicht in die Karten schauen lassen).

Vielleicht ist Ihnen bereits die Zeitangabe aufgefallen, die im rechten unteren Bereich der Statusleiste angezeigt wird. Diese gibt an, wie lange der Download der Seite mit einem 28.800 Bit/s-Modem dauern wird. Auf diese Weise können Sie sehr einfach abschätzen, wieviel Grafik oder andere Medienelemente Sie auf die Seite laden dürfen, ohne den Benutzer durch lange Wartezeiten zu entnerven. Auch wenn es keine offiziellen Richtlinien gibt, sollte ein Wert von einer Minute nicht überschritten werden.


34.6 Wie kommt eine Web-Seite in das Internet?

Ihre Homepage ist fertig, nun sollen sie alle sehen. Leider kann für das Hineinstellen einer Web-Seite ins Internet an dieser Stelle kein allgemeines Rezept angegeben werden, denn dieses Verfahren hängt von Ihrem Internet-Dienstanbieter ab (Voraussetzung ist natürlich, daß Ihr Internet-Dienstanbieter diese Möglichkeit überhaupt bietet). In der Regel erhalten Sie die Adresse eines Ftp-Servers, in den Sie die einzelnen Seiten einfach nur kopieren müssen (beachten Sie, daß einige Server auf der Erweiterung .Html bestehen und bei den Dateinamen auf Groß- und Kleinschreibung achten). Vielleicht ist Ihnen in der Programmgruppe Internet Explorer der Eintrag Web Publishing-Assistent aufgefallen. Dieser Assistent ist Ihnen beim Hinaufladen der Seiten behilflich, kann aber auch nur das erledigen, was Sie ihm vorgeben.

Die Arbeit mit dem Assistenten sieht so aus, daß Sie zuerst den Namen der Htm-Datei oder den eines Verzeichnisses angeben, in dem sich die zu veröffentlichenden Dateien befinden. Anschließend legen Sie den Namen des Web-Servers fest, stellen die Verbindung zu Ihrem Internet-Dienstanbieter her und lassen die ausgewählten Dateien auf den Server des Internet-Dienstanbieters kopieren. Besonders praktisch ist der Assistent bei Servern, bei denen Sie direkt von FrontPage oder FrontPage Express auf den Server publizieren, also die Dateien nicht noch einmal als Htm-Dateien zwischenspeichern müssen. Ansonsten übernimmt der Publishing-Assistent nur die Funktion eines Ftp-Programms, das Sie Schritt für Schritt durch das Kopieren der Dateien bzw. eines Verzeichnisses in das Verzeichnis des Servers führt.

34.6.1 Der direkte Zugriff per Ftp

Für den Ftp-Zugriff (Ftp steht für File Transfer Protocol) gibt es viele schicke Ftp-Programme. Das Ftp.exe im Windows-Verzeichnis tut es auch, wenngleich man hier erst einmal die verschiedenen Ftp-Befehle erlernen muß. Sie können auch die kleine Hilfe in Anspruch nehmen, indem Sie erst das ? und dann den Befehl eingeben oder über das ? eine Liste aller Befehle abrufen. Stellen Sie als erstes eine Internet-Verbindung (über T-Online) her, und rufen Sie dann über das Startmenü und den Eintrag Programme die MS-DOS-Eingabeaufforderung auf. Es erscheint ein Fenster mit schwarzem Hintergrund, in dem Sie folgendes eingeben:

ftp home-up.t-online.de

Anschließend fragt Sie der T-Online-Server nach Usernamen (anonymous) und Paßwort (Ihre E-Mail-Adresse). Wenn schon eine Homepage existiert, genügt es, zweimal die (Enter)-Taste zu betätigen. Durch Eingabe von Dir sehen Sie alle bereits in Ihrem Verzeichnis vorhandenen Dateien. Sie können Dateien zum Beispiel löschen (Delete) oder Umbenennen (Rename). Ftp ist dabei immerhin so komfortabel, daß Sie lediglich den Befehl eintippen müssen und das Programm Sie dann nach den Dateinamen fragt. Für den Upload ist der Send-Befehl zuständig:

Send "C:\Eigene Dateien\Homepage.htm"

Wenn Sie diesen Befehl eintippen, überträgt Ftp die angegebene Datei an den Server (wenn der Dateiname nicht stimmt, erhalten Sie allerdings keine Fehlermeldung). Wenn die Homepage keine weiteren Elemente, etwa Grafikbilder, enthält, sind Sie fertig und können sich mit dem Bye-Befehl verabschieden (Trennen der Internet-Verbindung aber nicht vergessen). Falls doch, müssen Sie mit dem Send-Befehl auch die übrigen Dateien heraufladen.

Und wann können andere Ihre Homepage abrufen? Im allgemeinen dauert es ca. 30 Minuten. Außerdem behält sich die Telekom AG als Betreiberin das Recht vor, einzelne Seiten zurückzuweisen (zum Beispiel wenn diese diskriminierende oder andere sittenwidrige Inhalte enthalten sollten).

Vergessen Sie nicht, die einzelnen Grafikdateien (zum Beispiel die Hintergrundgrafiken) in das Verzeichnis zu kopieren, in der sich auch die Homepage befindet, denn diese sind grundsätzlich nicht in der Html-Datei enthalten.


Unter welcher Adresse ist eine Homepage abrufbar?

Das wichtigste an Ihrer neuen Homepage ist natürlich die Adresse (URL), unter der sie weltweit für jeden Web-Surfer erreichbar ist. Bei T-Online lautet sie allgemein:

http://home.t-online.de/home/ <T-Online-Nr.-Mitbenutzer-Nr. /<Dokumentname>

oder

http://home.t-online.de/home/ <E-Mail-Alias>/<Dokumentname>

Bei Dokumentname handelt es sich um den Dateinamen jener Datei, die die Homepage enthält. Heißt die Homepage von Herrn Mike Muster Homepage.htm (dies ist der übliche Name, wenngleich Sie einen beliebigen Namen wählen können) und besitzt Herr Muster den E-Mail-Alias M_Muster, dann lautet die komplette Adresse seiner Homepage:

http://home.t-online.de/home/M_Muster/Homepage.htm

Allein schon wegen der einfacheren Adresse sollte man sich bei T-Online einen E-Mail-Alias besorgen.

Ihr T-Online-Kennwort wird nicht benötigt, da Sie sich bereits mit dem Kennwort bei T-Online angemeldet haben und man von außen nicht auf den Ftp-Server von T-Online zugreifen kann. Damit ist sichergestellt, daß niemand Ihre Homepage ohne Ihr Kennwort verändern kann.

Den E-Mail-Alias müssen Sie ohne den Domänenzusatz @t-online.de angeben.


Tabelle 34.1: Die für das Hinaufladen eines HTML-Dokuments bei T-Online erforderlichen Daten

Host Name:

home-up.t-online.de

Host Type:

Automatic detect

User:

Anonymous

Password:

Ihre E-Mail-Adresse (Alias oder Kombination aus T-Online-Nummer und Mitbenutzernummer).

 

Die Web-Seite ist im Internet - was nun?

Damit andere von Ihrer Web-Seite erfahren, müssen Sie sie bekannt machen. Schließlich steht das erste W bei WWW für worldwide. Doch wonach wird ein Web-Surfer in Bangladesch oder auf den Fidschi-Inseln wohl suchen? Sicher nicht nach Ihrem Namen, sondern nach dem skurrilen Hobby, das Sie betreiben, oder anderen Dingen, die auf Ihrer Web-Seite unverwechselbar sind. Er oder sie ruft eine Suchmaschine auf und gibt verschiedene Suchbegriffe ein. Damit aber, und jetzt kommt der entscheidende Punkt, die Suchmaschine auch Ihre Seite(n) miteinbezieht, müssen Sie Ihre Seite den Suchmaschinen bekannt machen. Die meisten Suchmaschinen, zum Beispiel Yahoo oder AltaVista, enthalten auf ihrer Seite eine Verknüpfung, mit der Sie Ihre Web-Seite bei der Suchmaschine anmelden können (bei Yahoo finden Sie die Verknüpfung in den Unterkategorien). Das kostet nichts und stellt sicher, daß die Suchmaschine ein paar Tage später Ihre Seite besucht (es gibt sogar kostenlose Dienste, die Ihre Seite bei allen gängigen Suchmaschinen anmelden). Wie die Suchmaschine damit umgeht, ist von Fall zu Fall verschieden. Große und leistungsfähige Suchmaschinen führen eine Volltextindizierung durch, das heißt, sie fügen alle Hauptwörter auf der Seite ins Suchgedächtnis ein. Andere Suchmaschinen orientieren sich lediglich an jenen Informationen, die Sie als Web-Designer zur Verfügung stellen. Und das ist genau der springende Punkt. Wenn Sie nichts zur Verfügung stellen, kann die Suchmaschine nichts finden.

Das Einfügen von Stichwörtern (und vielen anderen Formalien) geschieht über <META>-Tags. Dabei handelt es sich um Tags, durch die ein HTML-Dokument mit zusätzlichen Informationen ausgestattet werden kann, die der Browser aber nicht interpretiert. Wenn Sie daher möchten, daß ein Begriff auf Ihrer Seite als Suchkriterium herangezogen wird, müssen Sie ein entsprechendes <META>-Tag einfügen. Führen Sie dazu den Menübefehl Datei|Seiteneigenschaften aus, und wählen Sie die Registerkarte Benutzerdefiniert. Klicken Sie nun auf die obere Hinzufügen-Schaltfläche. Es erscheint ein weiteres Dialogfeld, in dem Sie ein <META>-Tag festlegen können. Jedes dieser Tags benötigt einen Namen (zum Beispiel Keywords) und einen Wert (zum Beispiel Zierfische). Konkret geben Sie in das Name-Feld Keywords und in das Wert-Feld eine Reihe beliebiger Stichwörter ein, die durch Kommata voneinander getrennt werden.

Die Schlüsselwörter sind sehr wichtig, denn sie sorgen dafür, daß eine Suchmaschine mit zusätzlichen Informationen über Ihre Web-Seite versorgt gibt. Haben Sie als Keyword unter anderem »Zierfische« eingetragen und gibt ein Benutzer in Adis Abeba bei seiner Suche das Stichwort Zierfische ein, so ist die Wahrscheinlichkeit nun sehr viel größer, daß Ihre Seite an einer der oberen Positionen erscheint. Eine Garantie dafür gibt es nicht, denn die großen Suchmaschinen verwenden eine komplizierte Formel, um einstufen zu können, ob eine Seite die gewünschten Informationen enthält. Ohne Schlüsselwörter dürften die Chancen, daß Ihre Seite berücksichtigt wird, allerdings sehr viel geringer sein.


Vielleicht ist Ihnen schon aufgefallen, daß Sie in der Suchen-Explorerleiste nach einer erfolgreichen Suche eine kurze Zusammenfassung der einzelnen Seiten als Tooltip erhalten, wenn Sie den Mauszeiger über die Verknüpfung bewegen. Diese Inhaltsangabe denkt sich der Internet Explorer nicht aus. Das Programm orientiert sich lediglich an einem speziellen <META>-Tag mit dem Namen Bulletin-Text, das diese Informationen zur Verfügung stellt.

Zum Schluß noch ein wichtiger Tip für alle, bei denen es mit der Homepage und dem Hinaufladen zu T-Online noch nicht so richtig funktioniert hat oder die vor lauter Tags, Ftp-Server und Anmeldeadressen den Überblick verloren haben. Geben Sie nicht gleich auf, und schieben Sie vor allem keinen Frust vor sich her. Es gibt im Web viele hilfsbereite Menschen, die eigene Web-Seiten mit Hilfestellungen, Tips und kompletten Anleitungen angefertigt haben. Erste Anlaufstelle sollte die Diskussionsgruppe t-online.homepage sein (für den Zugriff müssen Sie sich allerdings bei T-Online anmelden, mit einem anderen Internet-Zugang geht es nicht), wo sich T-Online-Mitglieder gegenseitig helfen und das kompetente T-Online-Team hilfreich zur Seite steht.


1. Obwohl es von Wissenschaftlern erfunden wurde.

2. Falls Sie tatsächlich an Ihrer Homepage basteln, sollten Sie zunächst abklären, ob Sie das offizielle Microsoft-Logo verwenden dürfen.

3. Bei der Konkurrenz im Web müssen Sie schon etwas dafür tun, damit ein Besucher wiederkommt. Zwar steht im allgemeinen der Inhalt im Vordergrund, doch auch hier gilt: Der erste Eindruck ist oft der wichtigste.


Markt&Technik Buch- und Software-Verlag GmbH.
Windows 98 - Das Kompendium, ISBN: 3-8272-5362-6


vorheriges KapitelTop Of PageInhaltsverzeichnisStichwortverzeichnisnΣchstes Kapitel