|
Multimediakurs Leinfelder: Inhalt/A: Einsteiger/Modul 1 "Webbasic"/Modul 1.6 "html-mit Netscape Composer (1 v. 3)" |
| (© copyright) Letzte Änderungen: |
Ab sofort lassen wir uns von html-Editoren (auch Webeditoren genannt) die Arbeit zur Webseitenerstellung wesentlich erleichtern. Insbesondere zur Fehlersuche ist es aber wesentlich, dass Sie die Grundstruktur der html-Sprache verstanden haben. In dieser Lektion verwenden wir den Composer insbesondere, um unser Wissen über die html-Sprache (auch html-Source, html-Code oder html-Quelle genannt) zu erweitern. Sie können jedoch das Übungsziel, nämlich das weitere Erlernen von html-Code durch Ausprobieren mithilfe eines Webeditors auch durch andere Editoren erreichen. Wichtig ist, dass Sie jeweils den generierten Quellcode laufend inspizieren und verstehen lernen.
Schritt 1: Netscape Navigator 6 installieren
Installieren Sie Netscape Navigator 6 oder neuer (für nichtkommerzielle Nutzung kostenlos). Hier finden Sie Möglichkeiten des Downloads.
Schritt 2: Neue Composer-Seite aufrufen
Starten Sie das das Programm Netscape Navigator. Gehen Sie in der Menuleiste ins Menu Datei, und öffnen dort unter Neu eine Neue Composer Seite (wie in unten stehendem Bild dargestellt). Falls sich beim Start des Navigators ein Browserfenster geöffnet hat, können Sie dieses schließen oder in die Taskleiste schieben (bzw. beim Mac zusammenklappen).
Schritt 3: Ordner anlegen, neue Seite mit Titel versehen und abspeichern.
Schreiben Sie einen Text wie in einem Texteditor und speichern ihn. Legen Sie dazu am besten einen neuen Ordner auf Ihrer Festplatte an (Namen ohne Leerzeichen und ohne Umlaute). Geben Sie Ihrer Datei einen beliebigen Namen ohne Leer-und Sonderzeichen. Die Endung .html wird in der Regel automatisch angefügt. Vor dem Speichern werden Sie noch zur Eingabe eines Titels für Ihre Seite aufgefordert. Machen Sie dies (z.B. Meine erste Webseite) und speichern ab.
Wichtig (und das müssen wir uns bei Benutzung mit dem Composer einbläuen): Speichern Sie möglichst früh ab. Bilder und Links dürfen Sie erst einbauen, wenn Sie zuvor einmal abgespeichert haben (Erklärung später), ansonsten funktioniert online gar nichts.
Schritt 4: den Editor zum Formatieren verwenden:
Schreiben Sie einige weitere Zeilen Text, verwenden Sie auch einige Umlaute (z.B. wie in untenstehendem Bild). Versuchen Sie diesen Text mit den zur Verfügung stehenden Optionen zu formatieren. Formatieren Sie z.B. eine Überschrift (markieren und Klappmenü links verwenden). Erstellen Sie Fettschrift und Kursiv (jeweils markieren und dann das entsprechende Symbol B bzw. I anklicken), verwenden Sie eine Textfarbe (Text markieren, auf das Schwarz-Weiss-Symbol neben dem Klappmenu klicken und Farbe auswählen) und vergrößern Sie ein Wort (durch Markieren und Klicken auf das +a-Symbol).
Ihr Produkt sollte in etwa wie unten aussehen:
Beim Erstellen einer Composer-Seite beginnen Sie automatisch im Standardmodus (linker Reiter unten auf Bild oben). Dies ist der normale Arbeitsmodus, der Ihnen auch in etwa zeigt, wie die Seite aussehen wird (durch Klicken auf den Ansichtsmodus, Reiter rechts unten, wird das zu erwartende Seitenlayout im Browser noch besser simuliert).
Schritt 5: Kontrolle des html-Codes und weiteres Erlernen des html-Codes durch Ausprobieren und Ergebniskontrolle.
Im Prinzip könnten Sie nun Ihre Seite weiter erstellen, wir wollen aber doch sehen, wie der erstellte html-Code aussieht. Klicken Sie dazu auf den Reiter <html> Quelle. Der Modus stellt nun auf html-code um, was etwa wie auf untenstehendem Bild aussieht.
Schauen wir uns das Ergebnis mal Zeile für Zeile durch.
In der ersten Zeile wurde automatisch ein <! >-Informationstag eingeführt. Hier hat Netscape Composer automatisch eingetragen, welche Version von html der Seite zugrunde liegt (hier html 4.01). Wir sollten diese Zeile nicht löschen, obwohl sie optional ist, denn sie kann zu rascherem und v.a. korrektem Seitenaufbau im Browser beitragen.
Zweite und dritte Zeile sind und klar. Hier wird das html-Dokument und der Header mit den entsprechenden Tags begonnen (vgl. Modul 1.3)
In der vierten Zeile hat der Composer wieder automatisch eine Zeile eingefügt, und zwar in einem sogenannten <meta>-Tag mit entsprechenden Attributen. Hier geht es v.a. darum, den verwendeten Zeichensatz anzugeben. Ist auch eher optional, aber sollten wir lassen. In einer Seite für griechische Schrift müsste hier unter charset ein anderer Schlüssel angegeben werden, dann würde auch auf einem Browser deutscher oder englischer Version die griechische Schrift richtig angezeigt. Also drinlassen, damit man in China auch unsere lateinische Schrift angezeigt bekommt.
Fünfte und sechste Zeile ist wieder klar: hier kommt der Titel für Seite, dann wird der Header geschlossen.
Sehen Sie dann mal im nachfolgenden Body-Teil durch, wie nun die gewünschte vorgenommene Formatierung umgesetzt wurde. Sie sollten eigentlich fast alle Tags aus den früheren Lektionen kennen. Sehen Sie dort ggf. nach und vergleichen Sie. Der <big> - Tag ist jedoch neu. Sie sehen, dass der Navigator die größere Schrift für Paläontologie nicht mit dem Tag <font size=+1> oder <font size=4> formatiert hat, wie wir es in Modul 1.3 gelernt haben, sondern mit dem uns bislang unbekannten Tag <big< </big>. Kleinere Schrift wäre auch mit dem Tag <small> </small>, möglich gewesen.
Frage: Überlegen Sie mal, auf welche Weisen Sie Standard-Schrift um zwei Stufen vergrößern können? Wissen Sie es? Dann klicken Sie hier?
Tipp: Sie können auch direkt im html-Quellenmodus editieren, das Ergebnis sehen Sie dann, wenn Sie zurück auf Standard klicken.
Eine weitere Hilfe, html-Code zu erlernen/verstehen ist, wenn Sie auf den Reiter "TD-Alle Tags anzeigen" klicken. Hier bleiben Sie im Prinzip im normalen Standard-Editiermodus, bekommen aber zusätzlich die Anfangstags für Ihre Formatierungen und Strukturierungen eingeblendet. Das Ergebnis sieht wie unten aus.
Schritt 6: Vorschaumodus:
Sie wollen nun sehen, wie Ihre Seite wirklich aussieht, wenn sie später mal online ist. Clicken Sie hierzu im Composer auf den Knopf "Vorschau". Dann wird Ihre Seite im Netscape-Browser als lokale Datei geladen. Sie können aber auch die Seite abspeichern, den Composer schließen und und dann von der Netscape-Titelleiste aus unter Datei/Datei öffnen Ihr Werk betrachten. Es sollte dann etwa wie unten stehend aussehen. Sie können die Seite natürlich auch in einem anderen Webbrowser (z.B. Internet-Explorer) auf die gleiche Weise offline betrachten.
So, nun können Sie an Ihrer ersten Seite weiterbasteln. Schreiben Sie weiteren Text, formatieren Sie ihn, erstellen Sie Listen, nehmen Sie Zentrierungen vor, fügen Sie horizontale Linien ein und schauen sich immer wieder das Ergebnis im html-Quelle Modus an. So kommen Sie am schnellsten hinter die Geheimnisse von html. Verwenden Sie die Optionen für Einfügen von Graphik sowie für Erstellen von Verknüpfungen (=Links) und Zielen (= Anker) noch nicht. Zu Tabellen kommen wir als nächstes, aber zuvor ne kleine Pause. ....
Wie bekomme ich meine Seite wieder in den Composer?
... ach so, wenn Sie zur Pause Ihren Computer abschalten und dann wieder einschalten, erhebt sich die Frage, wie Sie Ihre Seite wieder in den Composer bekommen. Nun, das ist nicht schwer. Netscape Navigator wieder starten und unter Datei/Datei öffnen aufrufen. (Etwas verwirrend: Seite öffnen bedeutet etwas anderes, nämlich das Laden einer online-Seite via Internet durch Angabe der URL).
Nun ist die Seite im Browser. Wenn Sie unter Menu Datei nun Seite bearbeiten aufrufen (siehe untenstehendes Bild) sind Sie wieder im Composer. (Hinweis: bei älteren Versionen von Netscape gab es z.T. die Option Datei im Composer öffnen, die neue Version erfordert anscheinend obigen Umweg).
... nu aber wirklich Pause!
>>Weiter in der Lektion (Modul 1.6.1: Tabellenerstellung mit demComposer)
<< Modul 1.5: html-Referenzen