HTML-Workshop

HTML-Workshop: Let's go public...

Textformatierung

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.

Zeichencodierung

Umlaute sind etwas spezifisch Deutsches. Um sicher zu stellen, daß der Browser sie auch wie gewünscht anzeigt, sollten sie nur durch eine Codierung beschrieben und nicht direkt über die Tastatur eingegeben werden.

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
&	&
<	<
>	>
"	"

Erstellt in eurem Projektverzeichnis eine neue HTML-Datei mit dem Namen

"textformatierung.htm"

und erstellt hierin alle nachfolgend dargestellten Übungstexte inklusive der Überschriften und Zusatzinformationen.

Übung 1

<h4 align="center"> Übung 1 </h4> ergibt eine Überschrift 4. Ordung, die durch das align-Attribut zentriert dargestellt wird. Die align-Werte left und right sorgen für links- bzw. rechtsbündige Ausrichtung, justify für Blocksatz.

Übung 2

Dies ergibt einen Absatz mit rotem Text in der Größe 1.2em und 10% der Fensterbreite als Abstand vom linken und rechten Rand.

Übung 3

Dies ergibt mit Hilfe des div-Tags einen Absatz mit 20 Pixel breitem linken Rand und der Schriftart Times New Roman, oder, falls die Schriftart im Browser nicht installiert ist, der Schriftart Times oder einer anderen serifenlosen Schrift. Mit Hilfe des span-Tags, z.B. durch <span style="background-color: yellow;"> ... </span> , können innerhalb des Fliesstextes Formatierungen wie diese gelbe Hinterlegung im Stile eines Textmarkers vorgenommen werden.

Übung 4

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!

Übermut

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!

Überschriften, Zeilenumbrüche, Absätze, Textauszeichnungen, Zeichencodierungen, ...