HTML- Editor Phase5. Dieser Einstieg ist für absolute HTML-Neulinge gedacht, die weder den Editor Phase5 selbst, noch HTML kennen.

Transkript

1 Quelle: Phase5 Editor Der Einstieg Dieser Einstieg ist für absolute HTML-Neulinge gedacht, die weder den Editor Phase5 selbst, noch HTML kennen. Zu allererst sollte natürlich Phase5 auf dem Rechner installiert werden. Bevor das Programm nun gestartet wird, solltest du auf dem Server in deinem Heimatverzeichnis einen Ordner anegen. Nenne ihn "Homepage", "HTML" oder such dir einen anderen Namen aus. In diesen Ordner werden in Zukunft sämtliche Unterordner für diverse Projekte gespeichert. Nun starten wir den Editor. Projekt anlegen Bevor wir jetzt mit der eigentlichen Arbeit beginnen können, müssen wir ein Projekt anlegen. Dazu klicken wir in der obersten Menüleiste auf Projekt, Mousezeiger auf "Projekt auswählen" und wählen den untersten Punkt des aufgeklappten Menüs "Neues Projekt". Nun klicken wir ein zweites Mal auf "Projekt" und wählen diesmal "Projekteinstellungen...". Folgendes Fenster öffnet sich: In das erste Eingabefeld (aktuelles Projekt) geben wir "Tutorial" ein. Dann wählen wir das Standard Homepageverzeichnis, indem wir rechts auf das Ordnersymbol klicken und im folgenden Menü den anfangs angelegten Hauptordner suchen. Dort wählen wir den Ordner "Tutorial" aus. Im Bereich "Standardverzeichnis für gemeinsame Dateien" wählen wir auf die gleiche Weise den selben Ordner. Alle anderen Eingabemöglichkeiten beachten wir für den Anfang erstmal nicht. Jetzt klicken wir noch auf "Übernehmen" und anschließend auf "OK". Seite 1

2 Grundlagen Nachdem wir jetzt ein Projekt eingerichtet haben, erstellen wir eine neue leere Seite, indem wir entweder oben links auf den Button mit dem weissen Blatt klicken oder "Datei" - "Neues HTML Dokument" wählen. Folgendes Fenster öffnet sich: Hier geben wir in die oberste Zeile wie im Beispiel gezeigt "Meine Homepage - Startseite" ein. Der eingegebene Text erscheint später im Browser ganz oben links neben dem Explorer- oder Netscapesymbol (oder Opera, oder...). Alle weiteren Eingabemöglichkeiten lassen wir für dieses Beispiel wieder ausser Acht. Nun klicken wir auf "Erstellen". Im großen Hauptfenster sehen wir jetzt das HTML-Grundgerüst, welches der Editor automatisch erstellt. Jetzt muss das Dokument zunächst abgespeichert werden. Das machen wir mit "Datei" "Speichern unter..." Wir müssten uns jetzt im Ordner "Tutorial" befinden. Dort speichern wir die Seite mit dem Namen "index". Die Endung ".html" vergibt der Editor automatisch. Jetzt eine Erläuterung zum HTML-Grundgerüst. Bitte nicht einfach "überlesen", weil du endlich anfangen möchtest. Es ist ziemlich wichtig. Das Grundgerüst, das der Editor automatisch erstellt hat, sieht folgendermaßen aus: <html> <head> <title>meine Homepage - Startseite</title> <meta name="author" content="hier steht ein Name"> <meta name="generator" content="ulli Meybohms HTML EDITOR"> </head> <body text="#000000" bgcolor="#ffffff" link="#ff0000" alink="#ff0000" vlink="#ff0000"> </body> </html> Anmerkung: Da das Textfeld im Editor breiter ist als mein kleines Feld, werden sich die automatischen Zeilenumbrüche im Editor an anderer Stelle befinden als in diesem und den folgenden Beispielen. Das hat jedoch keine Auswirkungen auf das Dokument selbst. Alles, was Blau ist, bezeichnet man als Tags (Englisch ausgesprochen, also "Tägs"). Sie sagen dem Browser, wie Texte, Bilder, Tabellen usw. angezeigt werden sollen. Braun sind die einzelnen Werte zwischen den Anführungszeichen, z. B. die Hexadezimal-Zahl der Schriftfarbe, Schriftart, Größe usw. Seite 2

3 Schwarz sind die Texte, die letztendlich auf der Homepage zu sehen sind. Tipp Diese unterschiedlichen Farben sind keine Notwendigkeit bei HTML, sondern eine Unterstützung des Editors, um Texte und Tags leicht unterscheiden zu können. siehe Ansicht > Syntax farblich hervorheben Das Grundgerüst ist in 3 Hauptbereiche geteilt. Der Anfang <html> und das Ende </html> zeigen dem Browser, wo HTML anfängt und wo es aufhört. Zwischen <head> und </head> stehen der Titel und die Meta-Tags. Was zwischen diesen beiden Tags eingesetzt ist, erscheint optisch nicht auf der Seite selbst, sondern wird z. B. für Suchmaschinen genutzt. Die eigentliche Arbeit an der Seite findet zwischen <body> und </body> statt. Dort befinden sich in der obersten Zeile die so genannten Body-Tags. Dort werden einige Grundeinstellungen für die Seite vorgenommen. Die vorgegebenen Body-Tags sind: text="#000000" bestimmt, in welcher Schriftfarbe der Text dargestellt wird. bgcolor="#ffffff" ist die Hintergrundfarbe der Seite. link="#ff0000" ist die Farbe der Links, die noch nicht angeklickt wurden. alink="#ff0000" ist die Farbe der aktiven Links (die aktuell geöffnete Seite). vlink="#ff0000" ist die Farbe der besuchten (visited) Links. Die Werte in den Anführungszeichen können natürlich nach eigenem Geschmack verändert werden. Es gibt noch weitere Body-Tags, die man durch Rechtsklick in die Body-Zeile auswählen kann. Auf diese gehe ich jedoch im Moment nicht weiter ein. Jetzt aber endlich zum praktischen Teil! Textformatierung Jetzt wollen wir anfangen, Texte zu formatieren. Wir schreiben zwischen <body> und </body> die Worte "Meine erste Homepage" <html> <head> <title>meine Homepage - Startseite</title> <meta name="author" content="hier steht ein Name"> <meta name="generator" content="ulli Meybohms HTML EDITOR"> </head> <body text="#000000" bgcolor="#ffffff" link="#ff0000" alink="#ff0000" vlink="#ff0000"> Meine erste Homepage </body> </html> Diese 3 Worte können wir nun bereits in der Browser-Vorschau betrachten. Dazu klicken wir auf den Vorschau-Button im Editor. Da wir diese 3 Worte noch nicht formatiert haben, werden sie in der Standardschriftart und -größe des Browsers angezeigt. Ein erneuter Klick auf den Vorschau-Button wechselt die Ansicht wieder zum HTML-Text. Seite 3

4 Schriftart Jetzt verändern wir zunächst die Schriftart: Dazu markieren wir die 3 Worte mit der Mouse und klicken oben im Menü auf "Schrift", führen den Zeiger auf "Schriftart" und wählen aus dem ausklappenden Menü "VERDANA,ARIAL,HELVETICA" aus.: meine erste Homepage Anmerkung: Es ist empfehlenswert, mehrere ähnliche Schriftarten gleichzeitig anzugeben. Phase 5 macht dies automatisch. In diesem Fall die Schriftarten Verdana, Arial und Helvetica. Grund: Eine fertige Homepage wird ja nicht nur von einem selbst betrachtet, sondern hoffentlich auch von anderen Internetsurfern. Damit die von dir gewählte Schriftart auch auf dem Bildschirm des anderen Surfers angezeigt wird, muss dieser diese Schriftart auf seinem eigenen PC installiert haben. Nun kann es passieren, dass der Surfer eben genau die von dir gewählte Schriftart nicht auf seinem PC hat. Wenn man nun mehrere Schriftarten angibt, wählt der Browser die nächstmögliche Schriftart aus. Schriftgröße Jetzt wollen wir unsere Worte noch in einer größeren Schrift darstellen. Dazu klicken wir mit der rechten Moustaste in eine beliebige Stelle zwischen Es öffnet sich ein Menü. Wir zeigen mit der Mouse auf "size" und wählen in dem aufklappenden Menü "+2". meine erste Homepage</font Anmerkung: "size" und "face" können auch in anderer Reihenfolge im HTML-Text stehen. Das Ergebnis ist das Gleiche. Die verschiedenen Schriftgrößen:"-2" ist die kleinste Schriftgröße "+4" ist die größte Eine andere Variante, als über das Menü "Schrift" - "Schriftgröße" usw Dazu markieren wir den gesamten Text von Anfang bis Ende (ohne Überschrift). Jetzt klicken wir im Menü oben den Button "-1" an (wieder unter der Ebene "Text"). Seite 4

5 Zeilenumbruch und Leerzeilen Nun soll unter die Überschrift ein kurzer Text, an dem wir weitere Formatierungsmöglichkeiten lernen können. Dazu müssen wir zunächst ein paar Leerzeilen einfügen, damit der Text nicht direkt an der Überschrift "klebt". In HTML ist es nicht möglich, eine Leerzeile durch bloßes drücken von "Return/Enter" zu erreichen. Damit bekommt man zwar eine Leerzeile in den HTML-Text; diese hat jedoch auf der Seite selbst keine Auswirkungen. Um zunächst einen Zeilenumbruch zu erreichen, klicken wir mit der Mouse direkt hinter und klicken anschließend auf den Button Dieser befindet sich unter der Ebene "Text" Der Editor fügt ein ein, und der Cursor rutscht eine Zeile tiefer. Fettschrift: Jetzt machen wir die Worte "Phase 5" in Fettschrift. Dazu Wort und Zahl markieren und auf der Karte "Text" wie bei einem Textverarbeitungsprogramm auf phase 5 klicken. Zentrieren Nun werden wir die Überschrift in der Mitte zentrieren. Dazu markieren wir die Überschrift mitsamt den Font-Tags davor und dahinter. Jetzt klicken wir in der Karte "Text" auf den Button Textfarbe ändern Dieses soll der letzte Schritt im Bereicht Textformatierung sein. Wir wollen der ersten Satz in einer anderen Farbe darstellen. Dazu wieder den Satz markieren, diesmal jedoch OHNE die Font-Tags, also von "Ich versuche..." bis "...vermutet hatte." Jetzt klicken wir oben im Menü auf "Schrift" und wählen "Schriftfarbe". Es öffnet sich ein Fenster, in dem man sich eine Farbe auswählen kann. Wir wählen jetzt mal einen Rot-Ton und klicken anschließend auf "OK". Tipp Der folgende HTML-Text kann nun etwas von deinem abweichen, da wir eventuell verschiedene Rot- Töne gewählt haben. In dem Fall ist die Farbnummer anders. text in rot. Allgemeiner Hinweis: mehrere Leerzeichen hintereinander werden bei HTML ignoriert. Es macht also keinen Unterschied, ob man im HTML-Text ein einziges Leerzeichen nach einem Wort macht oder 10. Die Lücke wird trotzdem nur ein Zeichen lang sein. Seite 5

6 Grafiken einfügen Jetzt lernen wir, wie man Grafiken in eine HTML-Seite einbindet. Dazu legen wir erstmal ein Unterverzeichnis an, in welches die Grafiken gespeichert werden. Unterverzeichnisse sind nicht zwingend notwendig - sorgen jedoch bei Projekten mit vielen Grafiken und Seiten für den nötigen Überblick. Das Unterverzeichnis soll schlicht und einfach "bilder" heissen. Dazu klicken wir mit rechts auf "Projekt Tutorial" im linken oberen Fenster und wählen "Verzeichnis anlegen". Als Name geben wir "bilder" ein. Mit "OK" bestätigen. Das neue Verzeichnis erscheint nun unter "Projekt Tutorial". Jetzt benötigen wir noch eine Grafik. Damit wir ein einheitliches Ergebnis bekommen. Speichere bitte ein Bild in den neuen Bilder-Ordner. (Rechtsklick - Bild/Grafik speichern unter...) Bevor wir jetzt die Grafik in unser HTML-Dokument einfügen, fügen wir noch 2 Leerzeilen unter unseren Text ein. Also 3 mal . Eins für den Zeilenumbruch und 2 für die Leerzeilen. Jetzt setzen wir den Cursor hinter das letzte und klicken im linken oberen Fenster auf unser neues Bilderverzeichnis. Im Fenster links unten erscheint z.b. die Grafik " strand.jpg " oder *.gif. Diese klicken wir einmal an, und der HTML-Text für das Bild wird hinzugefügt. <img src="bilder/strand.jpg" width="163" height="122" border="0" alt=""> Kurze Erklärung zum Img-Tag: Der Editor fügt zum eigentlichen img-tag automatisch weitere Angaben ein. width="163" = Breite des Bilder in Pixel border="0" = Rahmen des Bilder (in diesem Fall keiner) height ="122"= Höhe des Bildes in Pixel alt =""= Alternativtext Grafik zentrieren Um das Bild zu zentrieren, markieren wir den gesamten img-tag (mitsamt den Klammern < > ). Jetzt klicken wir wieder auf das Zentrieren-Symbol unter der Karte "Text" Als letztes in dieser Kategorie geben wir dem Bild einen Rahmen und setzen einen Alternativtext ein. Dazu verändern wir einfach den Wert bei "border" auf 2. Das Bild bekommt einen Rahmen von 2 Pixel. Den Alternativtext schreiben wir zwischen die Anführungszeichen bei "alt". Als Alternativtext wählen wir das Wort "Strand". Wenn man jetzt in der Vorschau mit der Mouse auf das Bild zeigt, erscheint dort das Wort "Strand". Alternativtext ist zwar nicht zwingend notwendig, sollte aber trotzdem bei jedem Bild angegeben werden. Es gibt Surfer, die für schnellere Ladezeiten die Grafikanzeige ausschalten. Sie sehen dann nur ein leeres Feld ohne Bild. Wenn bei dem Bild Alternativtext angegeben wurde, erscheint dieser in dem leeren Feld, und der Surfer weiss, was ihn dort für ein Bild erwartet hätte. Wichtig ist das vor allem, wenn das Bild mit einer anderen Seite verlinkt wurde (zum Beispiel bei Buttons). Ohne Alternativtext wüsste der Surfer nicht, wo ihn der Link hinführt. Hier der HTML-Text mit Border- und Alternativangaben. <img src="bilder/strand.jpg" width="163" height="122" border="2" alt="strand"> Hinweis: Web-Grafiken dürfen nur die Formate jpg oder gif haben. Alle anderen Grafikformate würde viel zu lange Ladezeiten verursachen. Seite 6

7 Kleine Bilder in den Text einfügen Inline-Bilder 1. Kleinere Bilder werden gewissermaßen wie einzelne Schriftzeichen behandelt; man kann sie direkt in den Text einbauen - <img src=" alt="das ist neu!"> so, Text an der Unterkante des Bildes; 2. oder, mit Hilfe des Attributes align=middle, so, Text in der Mitte <img align=middle src=" alt="das ist neu!"> des Bildes; 3. oder, mit Hilfe des Attributes align=top, so, Text an der Oberkante <img align=top src=" align=top alt="das ist neu!"> des Bildes. 4. Voreingestellt ist align=bottom (siehe Beispiel 1). Verwendet man das Attribut der horizontalen Ausrichtung align=right/left, dann wird die Graphik am rechten bzw. linken Bildschirmrand dargestellt, und der Text fließt links bzw. rechts an ihr vorbei - <img align=right src=" alt="das ist neu!">. Anmerkungen: Nicht alle Browser beachten das ALIGN-Attribut. Eine Kombination der vertikalen (top/middle/bottom) und der horizontalen (left/right) Ausrichtung ist nicht möglich. Zentrieren läßt sich ein Bild nur mit <center>...</center>. Nur bei expliziter horizontaler Ausrichtung fließt der Text um das Bild. Will man bei zwei Bildern, daß eines links und das andere rechts plaziert wird, und der Text dazwischen, dann zitiert man zuerst die beiden Bilder, eines mit align=left, das andere mit align=right, und schreibt dann den Text. Quelle: Seite 7

8 Hyperlinks Nachdem wir 2 verschiedene Seiten erstellt haben, lernen wir, wie man diese miteinander verknüpft (verlinkt). Wir möchten zuerst einen Link auf die Startseite (index.html) setzen, welcher auf die 2. Seite führt. Dazu wählen wir die Seite index.html an. Möglichkeit 1: Jetzt markieren wir das Wort "welches als Link fungieren soll" und klicken oben in der Menüleiste auf "Einfügen" und wählen den ersten Punkt "Hyperlink" aus. Zwischen die Anführungszeichen müssen wir nun das Ziel des Links angeben. Das soll z.b. die Seite tabelle.html sein, also schreiben wir genau dieses hinein. <a href="tabelle.html">tabelle</a> Das Unterstrichene muss von Hand eingetragen werden. In dem Broser ist das Wort "Tabelle" nun unterstrichen und rot. Rot deshalb, weil wir in den Body-Tags als Linkfarbe rot angegeben haben (bzw. weil es der Editor vorgegeben hat). Möglichkeit 2 Wir können Drag and Drop einsetzen und die Datei auf die der Links weisen soll, in den Quelltext ziehne. <a href="farben.htm">farben.htm</a> Es wird automatisch der Dateiname eingesetzt. Wir können den Text (unterstrichener Teil) allerdings auch ändern. Bilder als Links Nun setzen wir einen Link auf die Seite "tabelle.html", der zurück auf die Startseite führt. Wir wählen wieder die Seite "tabelle.html" an. Anstatt eines Textlinks möchten wir hier ein Bild mit der Startseite verlinken. Dazu markieren wir in der Tabelle den gesamten img-tag <img src="bilder/strand.jpg" width="163" height="122" border="0" alt="">. Jetzt wählen wir wieder "Einfügen" oben in der Menüleiste und klicken auf "Hyperlink". Im Link-Tag geben wir zwischen die Anführungszeichen die Zieldatei ein, also "index.html". <a href="index.html"><img src="bilder/strand.jpg" width="163" height="122" border="0" alt=""></a> Links auf Seiten außerhalb der eigenen Homepage Wenn ein Link auf eine andere Homepage im www führen soll, muss man - statt des einfachen Dateinamens wie bei internen Links - die komplette Homepageadresse eingeben. Also beispielsweise <a href=" Phase 5 Editor</a> Seite 8