2. Textformatierung

Diesen Tipp in Originalversion zeigen.

2. Textformatierung

Sie beherrschen die HTML-Grundstruktur sehr gut und haben auch das Prinzip der HTML-Syntax verstanden?
Legen Sie zunächst die Datei "projekt1.html" in Ihrem Arbeitsverzeichnis an (betrachten Sie dazu auch "Neue .html-Datei anlegen" unten) und öffnen Sie diese in einem beliebigem Texteditor.
Anschließend fügen Sie darin die HTML-Grundstruktur ein. Zwischen den <body> - Tag kommt dann der Text der angezeigt werden soll.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
Ein beliebiger Text
</body>
</html>

> Listing 2.1: Anfangstext (Online-Beispiel / Download)

<title> ist der erste Tag, den Sie kennenlernen, der in den <head> - Bereich einer HTML-Seite kommt.
Er definiert den Text in der Titelzeile des Browsers. Der gewünschte Titel kommt dabei zwischen <title> und </title>
Normalerweise sind die Informationen im <head>-Tag für den Benutzer nicht sichtbar, der <title>-Tag stellt jedoch eine Ausnahme dar.
Das Aussehen des Titels lässt sich nicht mit HTML beeinflussen (d. h. Sie können den Titel beispielsweise nicht fett darstellen lassen).
Betrachten Sie für das folgende Beispiel die Titelzeile Ihres Browsers (unter Windows ganz oben am Fensterrand).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
Ein beliebiger Text
</body>
</html>

> Listing 2.2: Seitentitel (Online-Beispiel / Download)

Möchten wir nun z. B. das Wort "ein" fett schreiben, so fügen wir dieses Wort in den -Tag ein, möchten wir das Wort "beliebiger" kursiv anzeigen lassen, fügen wir das Wort in den -Tag ein und wollen wir das Wort "Text" unterstrichen formatieren, so fügen wir das Wort in den -Tag ein.

Wichtig	Der <b> - Tag lässt den Text fett (bold) anzeigen.
	Der <u> - Tag lässt den Text unterstrichen (unterlined) anzeigen.
	Der <i> - Tag lässt den Text kursiv (italic) anzeigen.

Der jetzige Stand des Projektes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>
Ein beliebiger Text
</body>
</html>

> Listing 2.3: Schriftformatierungen (Online-Beispiel / Download)

Nun gibt es auch noch den - Tag (font = Schrift auf Deutsch), mit dessen Hilfe noch viele weitere Dinge umgesetzt werden können.
So gibt das Attribut "color" die Farbe des Textes an und das Attribut "size" die Größe des Textes.
Falls ein "Farbcode" (immer hexadezimal, z. B: #00FF03) als Inhalt des "color" - Attributes verwendet werden soll, muss dieser mit einer Raute ( # ) eingeleitet werden, ein "Farbwort" (z. B. red) dagegen nicht.
[Sehen Sie unten: Wie erstelle ich einen hexadezimalen "Farbcode"?]

Bei dem Attribut "size" können Werte von -2 (sehr klein) bis +2 (sehr groß) eingesetzt werden.
Nehmen wir einmal an, wir möchten die Wörter "ein" und "beliebiger" rot färben, und das Wort "Text" so groß wie (bisher) möglich anzeigen lassen.
Hinweis: Da HTML zukünftig keine "Design-Sprache" wird, sondern mehr in Richtung Logik und Struktur gehen soll, möchte ich Ihnen allgemein von der Verwendung von "designspezifischen Tags" wie beispielsweise , , und abraten.
Sie werden im Laufe des Tutorials weitere Möglichkeiten kennenlernen, wie Sie Ihre designerische Vorstellungen optimal verwirklichen können.
Folgendermaßen sieht es dann aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Der Titel</title>
</head>
<body>

Ein beliebiger



Text

</body>
</html>

> Listing 2.4: Farbe und Größe (Online-Beispiel / Download)

Möchten wir nun beispiesweise eine zweite Zeile unter dieser einfügen, so müssen wir zuerst einen Zeilenumbruch mit (Break) machen und anschließend kann darunter ein neuer Text eingefügt werden.
Es ist übrigens egal, ob im Texteditor ein Zeilenumbruch erfolgt oder nicht, im Browser wird immer ein Zeilenumbruch dargestellt, sobald ein erscheint.
Der letzte Schritt des Projektes:

> Listing 2.5: Zeilenumbruch (Online-Beispiel / Download)

Zusammengefasst	Mit dem <b> - Tag kann Text fett, mit dem <u> - Tag unterstrichen, und mit dem <i> - Tag kursiv angezeigt werden.
	Mit Hilfe des Tags <font> kann die Größe und die Farbe des Textes angegeben werden.
	Dabei gibt das Attribut "color" die Farbe an (Raute, falls Farbcode) und "size" die Größe (von -2 bis +2).
	Zeilenumbrüche können mit dem Tag <br> gesetzt werden.
	In späteren Teilen des Tutorials werden Sie modernere, umfangreichere Möglichkeiten kennenlernen, um Ihre Vorstellungen in Sachen Design umzusetzen.

Neue .html-Datei anlegen

Befolgen Sie die folgenden Schritte, um eine HTML-Datei unter Windows zu erstellen:

1.Gehen Sie dazu in Ihr Arbeitsverzeichnis mit dem Explorer.
2.Üben Sie einen Rechtsklick auf eine freie Stelle im Explorer aus.
3.Fahren Sie mit dem Mauszeiger auf "Neu >" und wählen Sie "Textdokument" aus. Bestätigen Sie dies mit einem Klick.
4.Geben Sie der Datei nun die Endung ".html", indem Sie die vorhandene Endung ".txt" durch ".html" ersetzen.
(Wird diese Dateiendung nicht angezeigt, gehen Sie auf "Extras" (unter Windows 2000/XP) bzw. "Ansicht" (unter Windows 95/98/ME) -> "Ordneroptionen" und klicken Sie dort auf die Registerkarte "Ansicht". Entfernen Sie dort den Haken vor "Erweiterungen bei bekannten Dateitypen ausblenden" und bestätigen Sie dies mit einem Klick auf "OK".)

Wie erstelle ich einen hexadezimalen "Farbcode"?

Möchten Sie wissen, wie Sie unter Windows einen "Farbcode" erstellen können, mit Ihrer gewünschten Farbe?
Ein Farbcode besteht immer aus einem "#"-Zeichen am Anfang, sowie aus sechs weiteren Stellen. Ein Beispiel für ein Farbcode wäre "#FF67A2".
Der Farbcode gibt die Rot-, Grün- und Blau-Werte einer Farbe an, weshalb er auch RGB-Wert genannt wird.

1.Öffnen Sie über "Start" -> "(Alle) Programme" -> "Zubehör" -> "Paint" das Programm Paint.
2.Klicken Sie links unten auf der Farbpalette doppelt auf eine beliebige Farbe.
3.Im daraufhin erscheinenden Fenster klicken Sie auf "Farben definieren >>".
4.Wählen Sie dort eine Farbe aus, die Ihnen gefällt.
5.Öffnen Sie neben Paint noch über "Start" -> "(Alle) Programme" -> "Zubehör" -> "Rechner" den Taschenrechner.
6.Klicken Sie im Taschenrechner auf "Ansicht" -> "Wissenschaftlich", stellen Sie sicher, dass links "Dez" markiert ist.
7.Nehmen Sie nun wieder Paint her und geben Sie den Wert für "Rot" in den Taschenrechner ein.
8.Markieren Sie im linken Teil des Taschenrechners den Kreis links neben "Hex", dies ist der erste Wert des Farbcodes. Erscheint hier beispielsweise "D7", so haben wir bereits den noch unvollständigen Farbcode "#D7".
9.Markieren Sie im Taschenrechner wieder "Dez", nehmen Sie in Paint den "Grün"-Wert Ihrer Farbe her, geben Sie diese wieder in den Taschenrechner ein und klicken Sie auf "Hex". Kommt hier z. B. der Wert "B" (also nur ein Einstelliger) heraus, so muss davor eine 0 angefügt werden. Wir erhalten somit den bisherigen Wert "#D70B".
10.Wiederholen Sie Schritt 9 nochmals mit dem "Blau"-Wert Ihrer Farbe. Sie sollten letztendlich einen Wert in der Art, wie z. B. "#D70BAF" erhalten.
11.Abschließend können Sie Paint und den Taschenrechner schließen.

Weiter zu Teil 3 (Tabellen) > (as)

Copyright (c) 2002-2005 by Andreas Schroth

URL: www.computer-tipps.net/webdesign163.html