Für das Formatieren von Texten reichen wenige Tags aus:
Überschriften |
(engl. header) werden durch die Tags <h1> Überschrift erster Ordnung </h1> <h2> Überschrift zweiter Ordnung </h2> etc. erzeugt. Hierdurch werden automatisch u.a. auch die Zeichengröße und die Abstände nach oben und unten festgelegt. |
Absätze |
(engl. paragraphs) werden durch Klammerung des Textblockes, d.h.
der zum Absatz gehörenden Textzeilen, mit den Tags <p> ... </p> erzeugt. |
Zeilen- umbrüche |
(engl. line breaks) werden jeweils durch ein einzelnes <br>-Tag am Ende einer Zeile (also in diesem Fall genau hiervor...) erzeugt. |
Textaus- zeichnungen |
Fette Schrift erhält man mit den Tags <b> ... </b>, kursive Schrift mit den Tags <i> ... </i> und unterstrichene Schrift mit den Tags <u> ... </u>. |
Bereichs- klammern |
Eine universelle Bereichsklammerung ist vor allem in Verbindung mit der
css style-Anweisung sinnvoll. Hiermit lassen sich
eine Vielzahl von Formatierungseffekten erzielen. Einige werden
in den folgenden Übungsbeispielen gezeigt.
Die Möglichkeiten sind aber zu vielfältig, um sie hier
aufzählen zu können. Bei Bedarf also selbst bei
selfhtml nachlesen... Es gibt zwei unterschiedliche Tag-Paare für Bereichsklammern: <span> ... </span> für Inline-Bereiche ohne Zeilenumbruch, <div> ... </div> für Block-Bereiche mit Zeilenumbruch. |
Eine weitere Besonderheit ist die Verwendung von Zeichen im Text, die für HTML eine besondere Bedeutung haben. Auch diese Zeichen müssen durch eine Codierung angegeben werden.
Zeichen | Code |
---|---|
ä | ä |
ö | ö |
ü | ü |
ß | ß |
Zeichen | Code |
---|---|
& | & |
< | < |
> | > |
" | " |
Dies ergibt einen Absatz mit rotem Text in der Größe 1.2em und 10% der Fensterbreite als Abstand vom linken und rechten Rand.
Der ganze Bereich des Gedichtes ist mit der Schriftart Comic Sans MS in blau (font-family:Comic Sans MS; color: blue;) formatiert. Das Hintergrundbild ist mittels der style-Anweisung "background-image:url(frosch.jpg)" eingebunden worden. Das Bild kann in der Übung zu Kapitel 5 heruntergeladen werden (bitte den Dateinamen beibehalten).
Findet selbst heraus, wie Absätze, Zeilenumbrüche und Einrückungen am einfachsten herzustellen sind!
Fröschlein Friederich sagt putzmunter:
"Ich fahre jetzt den Fluss hinunter".
Es setzt sich auf ein grünes Blatt
und treibt damit den Fluss hinab.
Des Fröschlein's Freunde lauthals schrein:
"Wie kannst du nur so töricht sein!
Der Fluss ist tief und voll Gefahren,
du bist im Segeln nicht erfahren!
Spring ab, spring schnell, wir warnen dich,
sonst ergeht's dir fürchterlich!"
Das Fröschlein hört sein Herz laut schlagen,
den kühnen Sprung, es muß ihn wagen!
Ein großer Storch, dem Frösche schmecken,
will schon den Hals nach Friederich recken.
Da schnellt das Fröschlein in die Flut,
das ging noch gerade einmal gut!
© K. Milzner, 2013 |