Textformatierung
Jetzt wollen wir anfangen, Texte zu formatieren.
Wir schreiben zwischen <body> und </body> die Worte "Meine erste Homepage"
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.
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.
Der HTML-Text sieht nun so aus:
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
<font face="VERDANA,ARIAL,HELVETICA">
Es öffnet sich ein Menü. Wir zeigen mit der Mouse auf "size" und wählen in dem aufklappenden Menü "+2". Der HTML-Text sieht nun folgendermaßen aus:
(Ein Klick auf "vergleichen" öffnet eine neue Seite, um das jeweilige Ergebnis zu vergleichen. Anschließend die Seite mit "x" schließen.)
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
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 </font> und klicken anschließend auf den Button
Dieser befindet sich unter der Ebene "Text"
Der Editor fügt ein <br> ein, und der Cursor rutscht eine Zeile tiefer. Jetzt klicken wir noch 2 mal auf den Button, um 2 Leerzeilen einzufügen.
An die Stelle, wo sich der Cursor nun befindet, schreiben wir folgenden Text (oder kopieren ihn einfach rüber):
Ich versuche gerade, mich davon überzeugen zu lassen, dass HTML gar nicht so schwer ist, wie ich es vermutet hatte. Gleich werde ich weitere Formatierungen an diesem Text vornehmen, um zu lernen, wie man mit dem HTML Editor Phase 5 umgeht.
Der HTML-Text dazu sieht nun folgendermaßen aus:
Nun ist zwar unsere Überschrift formatiert - der soeben eingefügte Text ist jedoch noch völlig unformatiert. Das liegt daran, dass wir bereits nach der Überschrift den "Font-Tag" mit </font> abgeschlossen haben.
Jetzt hätten wir theoretisch die Möglichkeit, den Abschlusstag </font> einfach zu verschieben und hinter unseren neuen Text zu setzen. Dadurch würde der Text dann in der gleichen Schriftart und -größe wie die Überschrift dargestellt werden, da der Browser so lange die Font-Formatierung beibehält, bis sie wieder abgeschlossen wird.
Anmerkung: Da dies eine Regel ist, gibt es auch Ausnahmen. Diese lernen wir später kennen.
Wir wollen den Text anders als die Überschrift gestalten, also lassen wir den Font-Abschlusstag dort, wo er ist.
Als erstes wollen wir den Text in kleinerer Schrift darstellen und die Schriftart ändern. 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").
Das ist eine einfachere Variante, als über das Menü "Schrift" - "Schriftgröße" usw.
Jetzt verändern wir die Schriftart, indem wir wieder mit rechts in den Bereich <font size="-1"> klicken und aus dem Menü diesmal "face" auswählen. Aus dem ausklappenden Menü wählen wir "VERDANA,ARIAL,HELVETICA"
HTML-Text:
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
klicken.
HTML-Text:
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
HTML-Text:
In der Vorschau sieht man jetzt, dass der Text eine weitere Zeile nach unten gerutscht ist. Das kommt daher, dass nach einem zentrierten Abschnitt automatisch ein Zeilenumbruch erfolgt. Daduch wir das erste <br> nicht mehr als Zeilenumbruch gewertet, sondern als Leerzeile.
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".
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.
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.
|
