HTML-Editor Phase 5 (Download ) http://www.meybohm.de Fortbildung HTML-Editor Phase 5 (Download ) http://www.meybohm.de konzipiert von Walter Leimeier
Start des Editors Starten Sie den Editor durch einen Klick bzw. Doppelklick auf das Symbol: Machen Sie sich einen Moment mit dem Aufbau des Editors vertraut. Sie erkennen grob gesehen folgende Bereiche:
Menü-Leiste Die Menüleiste ermöglicht Ihnen den Zugriff auf die Menüs von Phase 5 über den jeweiligen Menütitel. Das Hauptmenü ist unterteilt in folgende Untermenüs: Datei (Allgemeine Dateifunktionen, wie öffnen , speichern etc... ) Bearbeiten (Hier befinden sich Funktionen zum Bearbeiten des Editortextes und Zwischenablagefunktionen, die Sie auch aus anderen Windows-Programmen kennen.) Ansicht (Die wichtigste Funktion des Ansichtmenüs ist die aktuell geöffnete Datei in einen Browser (z.B. Internet-Explorer oder Netscape Navigator) zu laden (Vorschau). Ansonsten befinden sich hier Funktionen zum Anpassen der Benutzeroberfläche) Projekt (Dieses Menü bietet mit den Projekteinstellungen das zentrale Werkzeug zur Projekt- und zur Benutzerverwaltung) Einfügen (In diesem Menü befinden sich viele vordefinierte HTML-Sprachelemente. Format (Hier finden Sie Befehle zur Formatierung einer HTML-Datei) Schrift (Hier sind alle möglichen HTML-Befehle untergebracht, die für die Formatierung der Schrift zuständig sind) Konvertierung (In diesem Menü sind alle möglichen Funktionen untergebracht, die in irgendeiner Weise den markierten Text verändern) Tools (Hier befinden sich hilfreiche Werkzeuge) ? (Hier können sie eine externe HTML-Dokumentation starten, und die Programmhilfe aufrufen)
Die Werkzeugleisten HTML Die wichtigsten HTML-Befehle Tabelle Befehle zur Erzeugung von HTML-Tabellen Listen Erzeugung von Listen aller Art (Bullet, Nummer etc...) CSS Erstellung von Cascaded Style Sheets Formular Formularelemente, die im Zusammenhang mit CGI-Scripts u.a. Skriptsprachen verwendet werden. Java Die wichtigsten Sprachkonstrukte (Schleifen, Funktionen) der Sprache Java bzw. Java-Script. VBScripts Befehle zur Programmierung von Visual Basic-Script-Dateien. Colors Hier befinden sich die wichtigsten Grundfarben, 16 benutzerdefinierte Farben, und eine große Farbpalette aus Mischfarben. Sie können mit einem Linksklick den RGB-Farbcode einfügen, oder mit dem rechten Mausknopf über ein Popup-Menü verschiedene Tags einfügen. Parameter Hier ist die Eingabe des Target-Parameters für Links möglich.
Textformat verändern Markieren Sie den Text, dessen Formatierung Sie verändern wollen. Wählen Sie eines der Textwerkzeuge aus. Schauen Sie sich das Resultat im Browser an. Bei Änderungen kann eine Zeichen-Formatierung nicht durch erneutes Markieren und Anwenden des Werkzeuges entfernt werden, wie dies z.B. in MS Word möglich ist. Sie müssen die Formatierungs-Tags von Hand entfernen! Absatz einfügen 9. Unterstrichen Absatz zentriert 10. Index hochgestellt Absatz links ausgerichtet 11. Index tiefgesetzt Absatz rechts ausgerichtet 12. Vorformatierte Schriftart Blocksatz 13. Vordefinierte Überschriften Abschnitt einrücken 14. Aktuellen Schriftgrad verändern Fett 15. Neue Schriftart wählen Kursiv 16. Zeilenumbruch
Ordner anlegen Legen Sie einen Ordner „Homepage“ an. Legen Sie einen Unterordner „Bilder“ an. Schieben Sie die Bilder von der Diskette in den Unterordner „Bilder“
Klicken Sie bitte zunächst auf „Datei“ „Neu“ oder auf das Blattsymbol oben links. Damit öffnen Sie eine neue Datei. Geben Sie als Titel der Seite zum Beispiel „Meine Homepage“ ein. Achten Sie darauf, dass Sie im Feld „HTML-Version“ die Eingabe aktiviert haben Klicken Sie dann auf die Schaltfläche „Erstellen“
Sie erhalten im Editor-Fenster eine Anzeige, die in etwa so aussieht: Was bedeuten nun die einzelnen Angaben in diesem Fenster? Tags Header Body
Aufgabe 1 Geben Sie zwischen den beiden Body-Tags den folgenden Text ein: <body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000"> Ich erstelle meine erste Seite mit dem neuen Editor </body> Speichern Sie nun die Seite unter dem Namen „test.html“ im Ordner „Homepage“ ab. Sie erscheint dann im Datei-Management links. Klicken Sie nun auf das Symbol der Browservorschau in der Werkzeugleiste oben rechts und der Text erscheint.
Aufgabe 2 Markieren Sie den eingefügten Text, wie Sie das bereits aus einer Textverarbeitung kennen und klicken Sie dann auf die Schaltfläche „H3“. Was passiert? Probieren Sie auch die anderen (H)-Schaltflächen aus und schauen Sie sich die Ergebnisse an. Spielen Sie nun ein wenig mit den weiteren Schaltflächen dieser Leiste. Zur Erinnerung noch einmal die Funktionen: Absatz einfügen 9. Unterstrichen Absatz zentriert 10. Index hochgestellt Absatz links ausgerichtet 11. Index tiefgesetzt Absatz rechts ausgerichtet 12. Vorformatierte Schriftart Blocksatz 13. Vordefinierte Überschriften Abschnitt einrücken 14. Aktuellen Schriftgrad verändern Fett 15. Neue Schriftart wählen Kursiv 16. Zeilenumbruch
Aufgabe 3 Arbeiten Sie in der Folge mit dem Menüpunkt „Einfügen“ Führen Sie bitte folgende Schritte durch: Fügen Sie drei horizontale Linien mit den Größen 1, 3, 7 ein. Bringen Sie zwischen jede Linie drei Leerzeilen. Fügen Sie zwischen der ersten und der zweiten Linie die Uhrzeit ein. Fügen Sie zwischen der zweiten und der dritten Linie einen E.Mail-Link mit der E-Mail-Adresse walter@leimeier.de ein. Schicken Sie (ich hoffe, dass es hier geht) eine kurze Mail an Walter Leimeier. Speichern Sie die Datei test.html erneut ab.
Aufgabe 4 Lassen Sie uns einmal Farbe ins Spiel bringen Legen Sie zunächst eine neue Datei mit dem Titel „Farben“ an. Ich hoffe, Sie wissen noch wie das geht. Geben Sie einen beliebigen Text zwischen zwei horizontalen Leisten ein. Klicken Sie anschließend auf die Registerkarte „Colors“. Es öffnet sich eine Farbtabelle. Ersetzen Sie die Farben für den Text und den Hintergrund durch andere Farben. Verändern Sie bitte auch die Farben der beiden horizontalen Leisten und speichern Sie die Datei unter dem Namen „colors.html“ im Ordner „Homepage“ ab.
Ergebnis (Beispiel)
Aufgabe 5 / Bilder einfügen Erstellen Sie eine neue Datei mit dem Titel „Grafiken sind nützlich“ und schreiben Sie als Text „Wir arbeiten nun mit Bildern“ Markieren Sie anschließend den eingegebenen Text und setzen Sie einen Link, indem Sie auf folgendes Symbol klicken und die Adresse http://www.leimeier.de eingeben. Speichern Sie die Datei im Ordner „Homepage“ unter dem Namen „grafik.html“ ab. Fügen Sie nun ein Bild aus dem Bilder-Verzeichnis links ein, indem Sie es in das Editorfenster ziehen. Markieren Sie anschließend den eingefügten Bildquelltext und setzen Sie einen Link, indem Sie auf das Symbol klicken und die Adresse http://www.ddr-alltagskultur.de eintippen.
Aufgabe 6 / Frames Legen Sie ein neues Dokument mit dem Titel „Index“ an und klicken Sie auf „Leeres Dokument erstellen“. Gehen Sie dann zum Menü „Einfügen“ / „Frame“ und wählen Sie die dreigeteilte Vorlage unten links aus.
Aufgabe 6 / Frames Speichern Sie die Datei unter dem Namen „index.html“ ab Legen Sie drei weitere Dateien mit den Namen „links.html“; „oben.html“ und „unten.html“ an. Damit können Sie nun jeden Rahmen individuell bearbeiten. Das Ergebnis könnte (ohne ästhetischen Anspruch!!!) in einfacher Form (mit Text und Bild) so aussehen:
Schluss Gestalten Sie eine kleine Website: - Schule - Hobby - Privatseite - Sport Sie können sich dazu auch Bilder aus dem Netz als Dekomaterial holen. (Vorsicht: Bei Publikation Copyright beachten!) Viel Spaß beim Üben wünscht Ihnen Walter Leimeier