3 Textgestaltung und Schriftbild

Transkript

1 3 Textgestaltung und Schriftbild HTML + CSS lernen ISBN Die Grundlagen von Webseiten sind Ihnen ja nun aus den vorangegangenen Seiten bekannt. Da Sie jetzt wissen, wie eine Webseite aufgebaut wird, können wir uns nun nach und nach der Gestaltung widmen. Als Erstes werden Sie erfahren, wie Sie Ihren Text gestalten und das Schriftbild beeinflussen können. 3.1 Zeilenumbrüche, Absätze und Leerzeichen In bekannten Textverarbeitungsprogrammen wie zum Beispiel Word ist man gewohnt, dass ein Absatz durch das einfache Drücken der ( )- Taste eingefügt werden kann. Zeilenumbrüche, Absätze und mehrere aufeinander folgende Leerzeichen kann der Browser jedoch nur verstehen, wenn diese mit den entsprechenden Tags eingefügt werden. Es reicht nicht aus, im Editor alles schön übersichtlich darzustellen und Zeilenumbrüche dort einzufügen. Der Browser wird Ihnen, wenn Sie nicht mit Tags arbeiten, ein Chaos anrichten. Um Ihnen dies zu verdeutlichen, finden Sie nachfolgend zwei Code-Beispiele. Im ersten Beispiel fehlen die Tags, welcher benötigt werden, um einen Absatz, eine Zeilenschaltung oder ein Leerzeichen zu erzeugen. Wie Sie dem oberen Teil der Abbildung 3.1 entnehmen können, erfolgt somit nicht die gewünschte Anzeige. So klappt es NICHT: <html> <title>zeilen, Absatz und Leerschlag</title> Am Ende dieses Satzes soll ein ZEILENUMBRUCH folgen. Am Ende dieses Satzes soll ein ABSATZ folgen. Zeilenumbrüche, Absätze und Leerzeichen 31

2 Dieser Abschnitt ist ein ABSATZ für sich. Mehrere aufeinander folgende LEERZEICHEN. Das Tag für den Zeilenumbruch lautet (engl. break Umbruch). Sie müssen also immer, wenn wirklich eine Zeile umgebrochen werden soll, dieses Tag an der gewünschten Stelle einfügen. Es ist eines der wenigen Tags, das kein Schlusstag benötigt. Das heißt, Sie können auf ein verzichten, denn ein Zeilenumbruch hat ja nicht einen Anfang und ein Ende. Dasselbe gilt, wenn Sie einen Absatz einfügen möchten: Es wird nicht unbedingt ein Schlusstag benötigt. Der Übersichtlichkeit halber und auch der korrekten HTML-Schreibweise zuliebe kann es jedoch nicht schaden, wenn ein End-Tag eingesetzt wird. Das Tag um einen Absatz zu erzeugen lautet (engl. paragraph Absatz). Ein Absatz entspricht in der Ansicht zwei Zeilenumbrüchen. Die Anweisung (engl. non breaking space geschütztes Leerzeichen) können Sie im Fließtext verwenden, um mehrere hintereinander folgende Leerzeichen einzufügen. So ist es richtig: <html> <title>zeilen, Absatz und Leerschlag</title> Am Ende dieses Satzes soll ein ZEILENUMBRUCH folgen. Am Ende dieses Satzes soll ein ABSATZ folgen. dieser Abschnitt ist ein ABSATZ für sich. Mehrere aufeinander folgende LEERZEICHEN. Sie finden das obige Code-Beispiel auf der CD unter folgendem Pfad: <CDROM>\Buchdaten\Beispiele\Kapitel_03\01_Absaetze.htm. Die nachfolgende Abbildung zeigt Ihnen den Vergleich zwischen falsch und richtig formatiertem Text. Dem oberen Abschnitt können Sie den Text entnehmen, der nur im Editor mit Zeilenumbrüchen, Absätzen und Leerzeichen formatiert wurde, also ohne Tags. Im Browserfenster wird dies, wie Sie sehen können, nicht richtig angezeigt. Der untere Abschnitt zeigt den Text richtig an. Er wurde mit entsprechenden Tags formatiert. 32 Textgestaltung und Schriftbild

3 Abbildung 3.1: Im Vergleich, mit und ohne Tags Mit einem Trick können Sie sich die Tags für die Umbrüche und Leerzeichen sparen. Das Zauber-Tag heißt <pre>... </pre>. Der Nachteil dabei ist, dass Sie im Quellcode wirklich auf alle Leerzeichen verzichten müssen, denn die Anzeige im Browser-Fenster entspricht exakt Ihrer Eingabe im Editor. Das geht natürlich zu Lasten einer übersichtlichen Darstellung des HTML-Codes. Hinzu kommt, dass die Anzeige im Browser- Fenster nicht mehr dynamisch ist. Wenn Sie das Fenster verkleinern, dann wird der Text nicht mehr von alleine umgebrochen, sondern einfach abgeschnitten (siehe Abbildung 3.2). Zudem wird die Schriftart auf Courier umgestellt. <pre> <html> <title>formatierung</title> <pre> Formatierungshilfe Der Text zwischen dem PRE-Tag wird in Bezug auf Umbrüche so angezeigt, wie eingegeben. Auch die L e e r-zeichen sind vorhanden. Und zwar alle, die im Quellcode eingegeben werden. </pre> Sie finden das obige Code-Beispiel auf der CD unter folgendem Pfad: <CDROM>\Buchdaten\Beispiele\Kapitel_03\02_Feste_Formatierung.htm. Zeilenumbrüche, Absätze und Leerzeichen 33

4 Die nachfolgende Abbildung zeigt deutlich, dass der Text nicht mehr dynamisch ist, sondern beim Verkleinern des Fensters abgeschnitten wird: Abbildung 3.2: Feste Formatierung Die Tabelle 3.1 fasst die erlernten Tags zusammen. Da diese Tags durch alle Browser unterstützt werden, wurde auf einen Browser-Vergleich verzichtet. HTML-Tags <pre>... </pre> Bedeutung Page Break Zeilenumbruch Paragraph Absatz No Breaking Space Geschütztes Leerzeichen Feste Formatierung Tabelle 3.1: Tags für Zeilenumbruch, Absatz und Leerzeichen 3.2 Textausrichtung Das Tag , welches Sie ja im obigen Abschnitt kennen gelernt haben, lässt sich durch verschiedene Attribute und Werte ergänzen. Eines der Attribute nennt sich align und steht, gefolgt vom gewünschten Wert, für die Textausrichtung. Sie haben mit diesem Attribut die Möglichkeit Ihren Text linksbündig, zentriert, rechtsbündig oder als Blocksatz zu formatieren. Eine Zusammenfassung der Attribute für die Textausrichtung können Sie der Tabelle 3.2 entnehmen. Diese Attribute werden durch alle Browser unterstützt. HTML-Tags Bedeutung ... Linksbündig ... Zentriert Tabelle 3.2: Attribute für Textausrichtung 34 Textgestaltung und Schriftbild

5 HTML-Tags Bedeutung ... Rechtsbündig ... Blocksatz Tabelle 3.2: Attribute für Textausrichtung (Forts.) Im nachfolgenden Beispiel finden Sie all diese Attribute im Einsatz. <html> <title>textausrichtung</title> links zentriert rechts Dies ist ein BLOCKSATZ. Ein BLOCKSATZ wird links- und rechtsbündig ausgerichtet. Tests mit Internet Explorer, Netscape, Mozilla und Opera sind erfolgreich verlaufen. Vielleicht fragen Sie sich nun, weshalb die linksbündige Ausrichtung in unserem Beispiel per Tag definiert wurde. Der Text steht ja ohnehin immer am linken Rand, auch wenn kein Tag eingesetzt wird. Das ist richtig. Linksbündig ist die Standardeinstellung. Sie können auf die Angabe von align="left" verzichten. Es ist jedoch auch nicht verkehrt, wenn Sie es verwenden. Meine Empfehlung: Wenn Ihr Text immer linksbündig geschrieben wird, dann lassen Sie das Attribut align="left" weg. Wenn sich die Textrichtung jedoch des Öfteren ändert, dann setzen Sie es ein, denn Ihr Code wird damit übersichtlicher. Sie können so leichter erkennen, wann sich die Ausrichtung ändert. Wie die Anzeige des obigen Codes im Internet Explorer aussieht, können Sie der Abbildung 3.3 entnehmen. Sie finden das folgende Code-Beispiel auf der CD unter folgendem Pfad: <CDROM>\Buchdaten\Beispiele\Kapitel_03\03_Textausrichtung.htm. Textausrichtung 35

6 Abbildung 3.3: Textausrichtung Das Attribut align wird nicht nur für die Ausrichtung von Absätzen verwendet. Es wird beispielsweise auch eingesetzt, um Überschriften und Linien entsprechend zu positionieren. Die Vorgehensweise ist dieselbe. Es ändert sich lediglich das auszurichtende Objekt. Mehr dazu jedoch später. 3.3 Textformatierungen , , , <strike> Um Textpassagen auf Ihrer Webseite hervorzuheben, können Sie auf bekannte Formatierungsformen wie z.b. fett, kursiv, unterstrichen usw. zurückgreifen. Damit ein Wort oder ein Textabschnitt entsprechend dargestellt werden kann, sind wiederum Tags erforderlich. Bei der Verwendung dieser Tags ist es besonders wichtig, dass Sie ein Anfangs- und vor allem auch ein Schlusstag einfügen. Wenn Sie das Schlusstag vergessen, dann wird der gesamte restliche Text Ihrer Webseite in der Formatierung des Anfangstags weitergeführt. Um Text fett zu formatieren, verwenden Sie und (engl. bold fett). Die nachfolgende Referenz umfasst die Tags für die erwähnten Formatierungen. Diese Tags werden durch alle getesteten Browser unterstützt. HTML-Tags ... ... ... <strike>... </strike> Bedeutung Bold Fett Italic Kursiv Underline Unterstrichen Strike Durchgestrichen Tabelle 3.3: Tags für Fett, Kursiv,Unterstrichen und Durchstreichen 36 Textgestaltung und Schriftbild

7 Das nachfolgende Beispiel zeigt Ihnen die gelernten Tags im Einsatz: <html> <title> Fett, Kursiv, Unterstrichen und Durchgestrichen </title> Ein Wort fett schreiben. Ein Wort kursiv schreiben. Ein Wort unterstrichen schreiben. Ein Wort <strike>durchstreichen</strike>. Sie finden das obige Code-Beispiel auf der CD unter folgendem Pfad: <CDROM>\Buchdaten\Beispiele\Kapitel_03\04_Formatierungen.htm. Verwenden Sie nach Möglichkeit keinen unterstrichenen Text. Denken Sie daran, dass auch Hyperlinks unterstrichen dargestellt werden. Ein unterstrichener Text könnte somit fälschlicherweise als Hyperlink gedeutet werden. Textformatierungen können selbstverständlich auch ineinander verschachtelt werden. Manchmal möchte man ja einen Textabschnitt fett formatieren und ein Wort aus diesem Abschnitt noch kursiv hervorheben. Die Vorgehensweise ist recht einfach, wie Sie dem nachfolgenden Code-Fragment entnehmen können: verschachtelteformatierungenanwenden Zuerst wird die Textpassage, welche fett angezeigt werden soll, in das Tag ... eingeschlossen. Innerhalb dieses Tags wird ein weiteres Tag verwendet, um das einzelne Wort»Formatierungen«zusätzlich zur Fett-Formatierung auch kursiv darzustellen ... . Neben den nun gelernten Tags stehen Ihnen noch weitere für die Formatierung Ihres Textes zur Verfügung. Ich habe mir erlaubt, diese in der nachfolgenden Referenz zusammenzufassen. Bitte beachten Sie, dass einige dieser Tags nicht durch alle Browser unterstützt werden. Manche Tags werden zwar unterstützt, jedoch anders dargestellt. Textformatierungen 37

8 Tag Beschreibung IE NS 4.x Damit Sie sich ein Bild davon machen können, wie die einzelnen Tags im Browserfenster angezeigt werden, habe ich Ihnen zur Veranschaulichung eine entsprechende Webseite zusammengestellt. Die Anzeige können Sie der Abbildung 3.4 entnehmen. NS 7.x ... Fettschrift X X X X X <big>... </big> Große Schrift X X X X X <blink>... </blink> Blinkender Text X X X <cite>... </cite> Zitat X X X X X <code>... </code> Quellcode X X X X X <dfn>... </dfn> Definition X X X X ... Emphatisch X X X X X ... Kursiv X X X X X <kbd>... </kbd> Tastatureingabe X X X X X <listing>... </listing> Quelltext X X D D D <s>... </s> Durchgestrichen X X X X X ... Kleine Schrift X X X X X <strike>... </strike> Durchgestrichen X X X X X ... Tiefgestellt X X X X X ... Hochgestellt X X X X X <tt>... </tt> Dicktengleiche Schrift X X X X X ... Unterstrichen X X X X X <var>... </var> Variablenname X X X X X Tabelle 3.4: Weiterführende Textformatierungen MZ OP Abbildung 3.4: Verschiedene Zeichenformatierungen 38 Textgestaltung und Schriftbild

9 3.4 Umlaute und Sonderzeichen Umlaute und Sonderzeichen sind spezielle Zeichen, die von Land zu Land und von Sprache zu Sprache abweichen. Von daher ist es möglich, dass ein Umlaut, wenn er als gewöhnlicher Text eingetippt wird, nicht durch alle Browser korrekt angezeigt wird. Das soll nicht heißen, dass es grundsätzlich nicht möglich ist, solche Zeichen korrekt darzustellen, sie müssen dazu jedoch maskiert werden. Tabelle 3.5 und Tabelle 3.6 können Sie die am häufigsten verwendeten Umlaute und Sonderzeichen entnehmen. Maskierung Jedes dieser Zeichen kann entsprechend maskiert werden. Die Darstellung all dieser Zeichen hat eins gemeinsam: Ihnen wird ein kaufmännisches»und«(&) vorangestellt und sie werden mit einem Semikolon (;) beendet. Ein»ä«müsste als ä maskiert werden. Sie können sich dies durch eine Eselsbrücke sehr einfach merken: Das a, also der erste Buchstabe nach dem»&«, steht für den Umlaut. Denken Sie hier einfach die Pünktchen auf dem Buchstaben»a«weg. Nun folgt die Zeichenfolge uml, welche den ersten drei Buchstaben des Wortes Umlaut entsprechen. Zusammengesetzt ergibt das: ä. Wenn der Fließtext spitze Klammern enthält, dann ist es besonders wichtig, diese zu maskieren, denn wie Sie wissen, sind die spitzen Klammern für das Einschließen der Tags reserviert. Damit der Browser spitze Klammern korrekt umsetzen kann und nichts durcheinander bringt, ist eine entsprechende Maskierung unbedingt erforderlich. Des Weiteren ist hier die Groß- und Kleinschreibung zu beachten. Wenn Sie beispielsweise ein großes»ü«schreiben möchten, dann müssen Sie in der Maskierung das»u«großschreiben: Ü. Wenn das»ü«kleingeschrieben werden soll, dann muss es auch innerhalb der Maskierung kleingeschrieben werden: ü. Im folgenden Beispiel wird veranschaulicht, wie eine solche Maskierung aussieht. Zu Beginn mag das Ganze etwas gewöhnungsbedürftig sein, aber bitte halten Sie sich an diese Konvention, Sie werden sich recht schnell daran gewöhnen. Die eifrigen Leser unter Ihnen werden nun vermutlich versuchen einen HTML-Code mit nicht-maskierten Umlauten und Sonderzeichen zu erstellen und werden feststellen, dass Ihr Browser dies korrekt interpretiert. Das stimmt schon, aber wie gesagt, bitte bedenken Sie, dass nicht alle Besucher dieselben Ländereinstellungen und Browser wie Sie verwenden. Mit anderen Werkzeugen im Einsatz wird Ihre Webseite, wenn sie nicht korrekt formatiert bzw. maskiert wird, schlicht und einfach nicht mehr leserlich angezeigt werden. Umlaute und Sonderzeichen 39

10 <html> <title>umlaute und Sonderzeichen</title> Menü: Gemüse mit Käse überbacken Kosten 3.-- Sie finden das obige Code-Beispiel auf der CD unter folgendem Pfad: <CDROM>\Buchdaten\Beispiele\Kapitel_03\05_Maskierung.htm. Der Abbildung 3.5 können Sie entnehmen, wie der obige Code im Browser-Fenster angezeigt wird. Abbildung 3.5: Umlaute und Sonderzeichen Den folgenden Tabellen können Sie die am häufigsten eingesetzten Umlaute und Sonderzeichen entnehmen. Diese Liste müsste für den deutschen Sprachgebrauch noch umfangreicher sein. Da eine so umfangreiche Liste an dieser Stelle jedoch unübersichtlich wäre, habe ich sie im Anhang untergebracht. HTML ä Ä ö Ö ü Ü Umlaute ä Ä ö Ö ü Ü Tabelle 3.5: Umlaute HTML Sonderzeichen ß ß Tabelle 3.6: Sonderzeichen 40 Textgestaltung und Schriftbild