Einstieg für Anfänger

 

Ein kurzer Hinweis vorweg: phase 5 reichtet sich gleichermaßen an "Gelegenheits-HTMLer" und an Profis.

Lassen Sie sich nicht von den vielen Buttons und Menüfunktinen abschrecken!

Sie werden am Anfang davon nur einen Bruchteil gebrauchen. Auch ohne Javascript oder Frames kann man ansprechende Webseiten gestalten.

 

 

Inhalt:

HTML-Anfänger
Die Benutzeroberfläche des HTML-Editor
Erste Schritte im HTML-Editor
Vorschau des Dokuments
Ein Projekt entwerfen

 

HTML-Anfänger

Falls Sie kompletter HTML-Anfänger sind, sollten Sie zuerst einmal einige Grundlagen über HTML lernen. Gute Seiten dazu finden Sie im Internet wenn Sie beispielsweise in Suchmaschinen nach "HTML Einsteiger" suchen. Wir empfehlen die Seiten www.clairette.de und SELFHTML. Näheres dazu gibt es bei unseren Surftipps.

 

Zu Beginn sollten Sie sich auf auf das Erstellen einfacher HTML-Seiten konzentrieren, um ein Gefühl  für die Struktur von HTML bekommen. Lassen Sie sich von Java-Script, CSS , Applets und anderen Ausdrücken nicht verwirren, insbesondere wenn Sie den Quellcode von fremden Seiten studieren. Lernen Sie erst einmal die Grundstruktur, wie man Überschriften setzt, und die Schrift formatiert, was für Textarten es vordefiniert gibt und wie man Grafiken, Links und Tabellen einfügt.

 

Wenn Sie Ihre ersten Seiten selber bauen, werden Sie schnell feststellen, dass der phase 5 Ihnen hilft, die HTML-Befehle regelkonform in das Dokument einzufügen, in dem er an den richtigen Stellen  schließende Klammen oder End-Tags schon einfügt.

 

Die Benutzeroberfläche des HTML-Editor

Bevor wir anfangen, beschaffen wir uns mal einen Überblick über die Programmoberfläche und klären einige Begrifflichkeiten. Das Hauptmenü ist die obere Leiste (Datei, Ansicht, ...). Hier können alle Befehle des Editors aufgerufen werden. Darunter befinden sich die sogenannten "Toolbars". Hier werden häufig benutzte Befehle des Hauptmenüs als Symbole abgebildet, um die Befehle schneller aufrufen zu können. Darunter befindet sich das eigentlich Text-Editor-Fenster, wo Sie Ihre HTML-Dateien bearbeiten. Hier sehen Sie den Quelltext der HTML-Dateien, die Sie geöffnet haben. Wenn Sie mehrere Dateien gleichzeitig geöffnet haben, dann können Sie mit den "Karteireitern" über dem Editorfenster zwischen den Dateien wechseln. Auf der linken Seite sehen Sie den Dateimanager. Hier können Sie durch die Verzeichnisse wechseln, Dateien öffnen, Grafiken einfügen, Dateien verlinken und noch vieles mehr. Detailliertere Informationen dazu finden Sie in späteren Kapiteln.

Erste Schritte im HTML-Editor

Es wird im Folgenden davon ausgegangen, Dass Sie ein paar fundamentale Dinge über HTML wissen. Bitte haben Sie dafür Verständnis, dass diese Hilfe-Datei zum Phase 5 kein HTML-Kurs ersetzen kann.

 

 

Die erste Datei erstellen

Wählen Sie im Hauptmenü Datei > Neues Dokument. Es erscheint nun ein Fenster, in dem Sie einige Angaben zu der Datei machen können, die Sie erstellen wollen. Lassen Sie sich nicht irritieren - auch wenn Sie hier nichts ausfüllen, erstellen Sie eine gültige Seite. Den Titel sollten Sie jedoch angeben z.B. Testseite, und klicken Sie dann auf [ Übernehmen ].Nun müsste folgender Inhalt im Editor erscheinen:

 

<!DOCTYPE HTML PUBLIC....>

<html>

<head>

<title>Testseite</title>

<meta name="author" content="">

<meta name="editor" content="html-editor phase 5">

</head>

<body bgcolor="#FFFFFF" text="#000000"link="#D00000" vlink="#D00000" alink="#D00000">

.................

</body>

</html>

 

Die Dokumente sind hierarchisch strukturiert. Sie sehen nun, dass der komplette Text sozusagen von <html>...</html> eingerahmt wird. Die nächste Unterteilung ist der <head>-Teil und der <body>-Teil. Im Head-Teil (deut.: Kopf) werden Angaben zum Dokument gemacht, wie Autor, Titel und sonstige Beschreibungen, auf die wir später eingehen werden. Der Kopfteil ist erstmal nicht so wichtig. Der wichtigste Teil ist der Body-Teil (deut.: Körper). Hier wird Ihr eigentlicher Inhalt eingetragen. Die zusätzlichen Angaben in dem <Body ...> Befehl können Sie vorerst ignorieren. Das sind  Farbangaben für Schrift, Hintergrund und Verknüpfungen (engl.: Links).

Im gelb-markierte Bereich werden Sie gleich den Text eingeben, der auf der Seite im Browser erscheinen soll.

 

Speichern der Datei

Die Datei existiert z.Zt. nur im Editor, sie muss nun unter einem Namen auf Festplatte gespeichert werden. Wählen Sie dazu im Hauptmenü Datei > Speichern. Es erscheint nun der Standard-Dialog zum Speichern. Wählen Sie hier ein Verzeichnis Ihrer Wahl aus, und geben Sie als Dateinamen test.html ein. Nun sehen Sie auch, wie Ihre Datei farbig eingefärbt wird. Zur besseren Übersicht werden die HTML-Befehle mit einer anderen Farbe vom normalen Text abgehoben.

 

Einfügen der ersten Befehle

Gehen Sie mit dem Cursor im Editorfenster zwischen die Body Tags, also da wo der vertikale

<body ....>

|

</body>

Der

Es wird nun eine Überschrift eingefügt. Überschriften gibt es in sechs Größen. 1 ist dabei die größte und 6 die kleinste. Wir wollen eine Überschrift 1. Ordnung einfügen. Drücken Sie dazu Strg+F1, oder im Hauptmenü auf Format > Überschrift > h1

Nun müsste Ihr Dokument folgendermassen aussehen:

 

<body ....>

<h1>|</h1>

</body>

 

Geben Sie nun zwischen <h1> und </h1> eine Überschrift ein, z.B. Testüberschrift. <h1> leitet die Überschrift 1 ein, und </h1> beendet sie. Wenn bei einem Befehl ein Schrägstrich (engl.: Slash [/]) vorangestellt ist, dann bedeutet das, dass der zuvor eingeleitete Befehl beendet wird,in diesem Fall, dass die Überschrift zu Ende ist.

Nun müsste Ihr Dokument folgendermaßen aussehen:

 

<body ....>

<h1>Testüberschrift|</h1>

</body>

 

Gehen Sie nun mit dem Cursor an das Ende der Zeile, und drücken Sie Enter, um eine neue Zeile einzufügen. Wir wollen nun unseren ersten Paragraphen einfügen. Drücken Sie dazu Strg+Enter oder im Hauptmenü Format > Absatz um  das Paragraph-Tag <p> </p> einzufügen. Schreiben Sie nun dazwischen einen beliebigen Text, z.B. Dies ist mein erstes HTML-Dokument.

Nun müsste Ihr Dokument folgendermaßen aussehen:

 

<body ....>

<h1>Testüberschrift|</h1>

<p>Dies ist mein erstes HTML-Dokument.</p>

</body>

 

Jetzt wollen wir den Begriff "HTML-Dokument" noch fett erscheinen lassen. Markieren Sie dazu diesen Textbereich und  wählen Sie im Hauptmenü Schrift > Fett. Der Text den Sie markiert haben müsste nun von dem <b>...</b> Befehl eingeschlossen sein. Ihr Dokument müsste also so aussehen:

 

<body ....>

<h1>Testüberschrift|</h1>

<p>Dies ist mein erstes <b>HTML-Dokument<b>.</p>

</body>

 

Vorschau des Dokuments

Nun haben Sie schon ein Dokument, das Sie betrachten können. Drücken Sie nun die Taste F9 oder auf den Weltkugel-Button oben rechts um die interne Browservorschau aufzurufen.

Ihr HTML-Dokument erscheint nun im internen Browser des phase 5, der im Prinzip ein abgespeckter Internet Explorer ist.

Ein Homepage-Projekt entwerfen

Setzen Sie sich ein Ziel, wählen Sie ein Projekt, das Sie verwirklichen wollen. Dies kann eine private Homepage sein, wo Sie sich und Ihre Familie beschreiben oder eine Fanpage oder eine Seite für einen Verein oder Ihr Gewerbe. Planen Sie erst auf dem Papier, sammeln Sie Ideen, Text und Grafiken, bilden Sie Strukturen heraus.

Lesen Sie dann in dieser Anleitung, wie man ein Projekt anlegt und nach seinen Wünschen konfiguriert. Nutzen Sie Ihre HTML-Kenntnisse um Ihre Ideen zu verwirklichen. Wenn Sie nicht weiter wissen, dann suchen Sie im Beispielseiten im WWW, die Ihren Vorstellungen entsprechen, und schauen Sie sich den Quelltext an, um zu sehen, wie es andere Leute hinbekommen haben. Wenn Sie bestimmte HTML-Befehle nicht verstehen, schlagen Sie in SelfHTML nach und lesen was der Befehl bedeutet.