<http://www.onlyfree.de/>
<http://www.anonym-surfen.com/>
<http://www.webmaster-world.com/>
<http://www.onsite.org/html/antispam_email.html>
suche in google: e-mail adresse verschlüsseln
<http://www.lerneniminternet.de/htm/tip_spam-email.html>
<http://www.gaijin.at/ols.php>
<http://www.hpserver.de/>
<http://de.selfhtml.org/>
<http://www.web-toolbox.net/webtoolbox/index.htm>
<http://www.6webmaster.com/>
Bilder von anderem Server auf Website einstellen:
Topseller
<IMG SRC="http://www.h-tronic.de/pic/top.gif">
Neu und innovativ
<IMG SRC="http://www.h-tronic.de/pic/neu.gif">
Großhandel
<IMG SRC="http://www.h-tronic.de/pic/gh.gif">
Link in neuer Seite öffnen:
<A HREF="http://www.ramasuri.de/" target="_blank">Radio Ramasuri</A></B></P><br><br>
<A HREF="http://www.h-tronic.de/html/agb_s.html" target="_blank">hier</A></B></P>
Text fett kursiv und rot
<b><i><font color="#FF0000">Mindestbestellmenge 300 Stück!</font></b></i><br>
Download von Server H-Tronic:
<A HREF="http://www.h-tronic.de/Presse/download/anleitungc4.pdf" target="_blank">1242462 Akkumaster C4</A></B></P><br><br>
e-mail verlinken:
<a href="mailto:Stefan.knab@h-tronic.de">Stefan.knab@h-tronic.de</a>
<http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html> =
Spezialeffekte
· Vorwort <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein.html>
· Hinweise zum Layout <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein51.html>
· Schrift <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o Schriftarten <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o Schriftgrößen <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Farben <em> <strong> <body> <font> class <style> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Anordnung (align) <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o linksbündig, rechtsbündig, zentriert <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o Chaos oder Harmonie <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o unten, oben, neben Bildern <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Abstände <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o horizontale Abstände <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o Einrückungen <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o vertikale Abstände <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Trennlinien <hr> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Numerierungen <ol> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Frames <frameset> <frame> <noframes> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Navigationshilfen <link> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· siehe auch Interaktion mit dem Benutzer <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein53.html>
Schrift
· Schriftarten <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Schriftgrößen <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Schrift- und Hintergrundfarben <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
Schriftarten
In Spezialfällen kann man die Schriftart mit folgenden Befehlen festlegen:
<b> ..... </b> für fette Schrift (boldface),
<i> ..... </i> für kursive Schrift (italic),
<u> ..... </u> für Unterstreichungen (underline),
<tt> ... </tt> für nicht proportionale Schrift (teletype),
<code> ... </code> für Computer-Schrift.
Diese Befehle sollten Sie nur dann verwenden, wenn eine bestimmte Schriftart per Konvention vorgeschrieben ist (z.B. Fettdruck für Vektoren und Kursivdruck für skalare Variable in der Mathematik, Computer-Schrift für Programmbeispiele, Kursivdruck für lateinische Pflanzen- und Tiernamen und dergleichen).
Wenn es jedoch darum geht, Wörter oder Textteile mit einer bestimmten Bedeutung vom normalen Text abzuheben, sollten Sie nicht diese Befehle verwenden sondern die Markierung mit <em> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html> oder <strong> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html>.
Unterstreichungen sollten Sie überhaupt vermeiden, weil sie Verwechslungen mit Hypertext-Links <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein3.html> bewirken würden.
Manche Schriftarten können von manchen Clients <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> nicht dargestellt werden, sie werden dann durch eine andere geeignete Schriftart ersetzt.
Schriftgrößen
Die Schriftgröße wird vom Benutzer auf seinem Client <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> so eingestellt, wie es für seine Bildschirm-Auflösung und seine Augen am besten ist.
In HTML 3 <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> sind mehrere Möglichkeiten vorgesehen, die Schriftgröße von bestimmten Wörtern oder Textteilen zu beeinflussen <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein51.html>:
<big> ....... </big> für größere Schrift,
<small> ... </small> für kleinere Schrift,
<font size="+n"> ... </font> für eine um n Stufen größere Schrift,
<font size="-n"> ... </font> für eine um n Stufen kleinere Schrift,
<font size=n> ...... </font> für Schrift in einer bestimmten Größe,
sowie mit Style-Sheets <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein51.html>. Ob und wie diese Größenangaben wirken, hängt vom Web-Browser <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> und vom Client-Bildschirm <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> ab.
Viele, aber nicht alle Web-Browser stellen Überschriften <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html> der Ebenen 1 bis 3 durch fette und große Schrift dar, manche stellen Überschriften der Ebenen 5 und 6 durch kleinere Schrift dar. Die entsprechenden Befehle <hx> sollten aber wirklich nur für Überschriften der jeweiligen Ebene verwendet werden und nicht für andere Zwecke, denn das hätte unerwünschte Nebeneffekte auf eine eventuelle Einrückung der nachfolgenden Texte sowie auf Suchhilfen <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> und automatisch erstellte Inhaltsverzeichnisse.
Farben <em> <strong> <body> <font> class <style>
Im allgemeinen ist es günstiger, wenn Sie dem Leser überlassen, welche Schrift- und Hintergrundfarben er auf seinem Client-Rechner <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> verwendet - in Abhängigkeit von den technischen Möglichkeiten seines Bildschirms und Druckers, den Lichtverhältnissen in seinem Zimmer, der Sehschärfe seiner Augen, seinen Gewohnheiten, dem Zusammenspiel mit anderen Bildschirmfenstern - kurz, so wie es für ihn am angenehmsten ist.
Wenn Sie als Autor trotzdem auf Ihren Web-Pages bestimmte Farben für bestimmte Zwecke einsetzen wollen, dann müssen Sie die folgenden Punkte beachten:
· Wenn Sie die Farbe für den Text festlegen, müssen Sie auch eine dazu passende Farbe für den Hintergrund festlegen, damit nicht z.B. bei einem Benutzer, der weiße Schrift auf blauem Hintergrund eingestellt hat, plötzlich blaue Schrift auf blauem Hintergrund entsteht.
· Wenn Sie die Farbe für einen bestimmten Textteil festlegen, müssen Sie auch dazu passende Farben für alle anderen Textteile festlegen.
· Sie können sich nicht darauf verlassen, daß alle Leser die Farben tatsächlich sehen werden, deshalb müssen Sie zusätzlich immer auch andere Mittel einsetzen, um den erwünschten Effekt zu erreichen (z.B. <em> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html> oder <strong> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html>). Der Leser könnte den Text ja auf einem Schwarzweißdrucker ausdrucken oder ihn mit einem Web-Browser <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> ansehen, der keine Farben darstellt oder nur für 16 Grundfarben konfiguriert ist, oder er könnte farbenblind sein.
· Achten Sie bei der Wahl der Farben darauf, welche Schriftfarben auf welchen Hintergrundfarben gut lesbar sind, welche Farben ästhetisch zueinander passen, und welche Assoziationen sie bei den Lesern wecken (Verkehrszeichen, Temperaturen, Gefühle, politische Parteien, Firmen, Sportklubs, ...).
In HTML 2 <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> gibt es keine Befehle für die Spezifikation von Farben, sondern nur allgemein für Hervorhebungen mit <em> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html> und <strong> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html>. In HTML 3 <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> ist die Möglichkeit vorgesehen, Farben und andere graphische Effekte entweder im jedem Einzelfall mit Parametern in <body> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein1.html> und <font> oder wesentlich eleganter und allgemeiner mit Klassen und Style-Sheets <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein51.html> zu vereinbaren. Diese Möglichkeiten werden freilich nicht von allen Web-Browser <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> unterstützt. Im folgenden wird angegeben, wie Sie diese verschiedenen Möglichkeit so kombinieren sollen, daß Sie den gewünschten Effekt auf möglichst vielen Web-Browsern <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein1.html> erreichen.
Die Farben werden in diesen Befehlen meist in der Form #rrggbb spezifiziert, wobei rr, gg und bb hexadezimale Zahlenangaben zwischen 00 (0) und FF (255) für den Rot-, Grün- und Blauanteil sind. Damit können theoretisch ca. 16 Millionen verschiedene Farben spezifiziert werden, praktisch sollten Sie sich jedoch auf die 216 Farben beschränken, die aus Kombinationen von 00, 33, 66, 99, CC und FF zusammengesetzt sind, oder überhaupt nur auf die aus 00 und FF zusammengesetzten Grundfarben. Beispiele (wobei die Sternchen je nach dem verwendeten Browser in den jeweiligen Farben erscheinen oder nicht):
#FFFFFF = weiß *****
#000000 = schwarz *****
#FF0000 = rot *****
#00FF00 = grün *****
#0000FF = blau *****
#FFFF00 = gelb *****
#FF00FF = magenta (lila) *****
#00FFFF = cyan (blaugrün) *****
#999999 = grau *****
#000066 = dunkelblau *****
#9999FF = hellblau *****
#660000 = dunkelrot *****
#FF9999 = rosa *****
In manchen Fällen können Farben auch durch bestimmte englische Wörter spezifiziert werden, z.B. white, black, red, blue, green.
Beispiel: Sie wollen erreichen, daß der Name Ihrer Firma immer in blauer Farbe und/oder fetter oder stark hervorgehobener Schrift erscheint. Als Kontrast dazu wählen Sie weiß für den Hintergrund, schwarz für den normalen Text und verschiedene Rottöne für Hypertext-Links.
In Ihrem HTML-File "enzian.html" geben Sie zu diesem Zweck die folgende Kombination von Befehlen an:
<html>
<head>
<title>Enzian</title>
<link rev=made href="webmaster@www.enzian.com">
<link rel=stylesheet href="enzian.css" type="text/css">
</head>
<body text="#000000" bgcolor="#FFFFFF"
link="#990000" vlink="#660000" alink="#FF0000" >
<h1 class=enzian><font color="#0000FF">Enzian</font></h1>
<p>
Wer
<strong class=enzian><font color="#cccccc">Enzian</font></strong>
trinkt, wird schneller
<strong class=enzian><font color="#0000FF">blau</font></strong>.
Dies wurde von
<a href="knieriem.html">namhaften Experten</a>
getestet ...
</body>
</html>
und im Style-Sheet-File "enzian.css" die folgenden Spezifikationen:
BODY { color: black; background: white }
A:link { color: #990000; background: white }
A:visited { color: #660000; background: white }
A:active { color: #FF0000; background: white }
.enzian { color: #0000FF; background: white; font-weight: bold }
Anmerkung: Theoretisch könnten Sie diese Style-Angaben direkt im HTML-File angeben, zwischen <style type="text/css"> und </style> innerhalb von <head>, anstelle des Style-Sheet-Link, aber manche nicht normgerechte Browser würden die Style-Angaben dann als Text am Bildschirm anzeigen statt sie zu interpretieren oder zu ignorieren.
Hier noch ein Beispiel dafür, wie Sie es nicht machen sollten:
- - - Die Eingabe von
<font color="#999999">Grau</font>
ist in Goethes "Faust" die Theorie, doch
<font color="#00FF00">grün</font>
des Lebens
<font color="#FF9900">goldner</font>
Baum, und was man
<font color="#000000">schwarz</font>
auf
<font color="#FFFFFF">weiß</font>
besitzt, kann man getrost nach Hause tragen.
- - - bewirkt die Ausgabe von
Grau ist in Goethes "Faust" die Theorie, doch grün des Lebens goldner Baum, und was man schwarz auf weiß besitzt, kann man getrost nach Hause tragen.
und je nachdem, welchen Web-Browser Sie verwenden, sehen Sie hier entweder überhaupt keine Hervorhebung der Farbennamen, oder ein Teil dieser Wörter hebt sich nicht gut genug von der Hintergrundfarbe ab.
- - -
Anordnung (align)
· linksbündig, rechtsbündig, zentriert <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Chaos oder Harmonie <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· unten, oben, neben Bildern <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
Linksbündig, rechtsbündig, zentriert
Die Anordnung und Ausrichtung von Texten und Bildern in Absätzen, Überschriften und Tabellen kann mit Align-Hinweisen in den HTML-Befehlen <p> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html>, <h1> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html>, <td> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html> usw. beeinflußt werden.
Die Align-Hinweise werden von manchen Web-Browsern befolgt und von anderen ignoriert <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein51.html>.
Beispiele:
- - - Die Eingabe von
<p align=left>
Linksbündig ist die normale Ausrichtung von Absätzen.
<p align=right>
Hoffentlich geht das
<br>
mit rechten Dingen zu.
<p align=center>
Im Reich der<br>Mitte
<p>
- - - bewirkt eine Darstellung wie
Linksbündig ist die normale Ausrichtung von Absätzen.
Hoffentlich geht das
mit rechten Dingen zu.
Im Reich der
Mitte
- - -
Ein Bereich von mehreren Absätzen kann man mit dem Befehl <div> zusammengefaßt werden. So kann man z.B. mit einer Befehlsfolge wie
<div align=center>
<p>
erster zentrierter Absatz
<p>
zweiter zentrierter Absatz
</div>
eine Folge von mehreren zentrierten Absätze erreichen.
Vorsicht!
Zentrierte und linksbündige Layouts sollen niemals vermischt werden:
In linksbündigen Layouts sucht das Auge des Lesers entlang des linken Randes nach allen wichtigen Elementen (Überschriften, Aufzählungen, Numerierungen u.dgl.).
In zentrierten Layouts sucht der Leser in der Mitte des Bildschirms nach den wichtigen Elementen.
Wenn zentrierte und linksbündige Überschriften oder Listen abwechseln, funktioniert das rasche Auffinden der wichtigen Elemente nicht mehr, der Überblick geht verloren, und das Layout wird als unübersichtlich empfunden.
Beispiel:
Chaos
ist schlecht lesbar.
Harmonie
ist gut lesbar.
- - -
Deshalb: entweder alle Überschriften zentriert, oder (besser) alle Überschriften linksbündig.
Umgekehrt ist es aber üblich und empfehlenswert, bestimmte "fremde Elemente" wie Titelseiten, Bilder, Tabellen oder mathematische Formeln durch Zentrierung deutlich vom laufenden Text abzuheben und damit die Übersichtlichkeit und Lesbarkeit des laufenden Textes zu vergrößern.
Beispiel:
- - - Die Eingabe von
<p align=center>
<img src="austria.gif" alt="Oesterreich">
- - - bewirkt eine Darstellung wie
<http://www.onlyfree.de/>
<http://www.anonym-surfen.com/>
<http://www.webmaster-world.com/>
<http://www.onsite.org/html/antispam_email.html>
suche in google: e-mail adresse verschlüsseln
<http://www.lerneniminternet.de/htm/tip_spam-email.html>
<http://www.gaijin.at/ols.php>
<http://www.hpserver.de/>
<http://de.selfhtml.org/>
<http://www.web-toolbox.net/webtoolbox/index.htm>
<http://www.6webmaster.com/>
Bilder von anderem Server auf Website einstellen:
Topseller
<IMG SRC="http://www.h-tronic.de/pic/top.gif">
Neu und innovativ
<IMG SRC="http://www.h-tronic.de/pic/neu.gif">
Großhandel
<IMG SRC="http://www.h-tronic.de/pic/gh.gif">
Link in neuer Seite öffnen:
<A HREF="http://www.ramasuri.de/" target="_blank">Radio Ramasuri</A></B></P><br><br>
<A HREF="http://www.h-tronic.de/html/agb_s.html" target="_blank">hier</A></B></P>
Text fett kursiv und rot
<b><i><font color="#FF0000">Mindestbestellmenge 300 Stück!</font></b></i><br>
Download von Server H-Tronic:
<A HREF="http://www.h-tronic.de/Presse/download/anleitungc4.pdf" target="_blank">1242462 Akkumaster C4</A></B></P><br><br>
e-mail verlinken:
<a href="mailto:Stefan.knab@h-tronic.de">Stefan.knab@h-tronic.de</a>
<http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html> =
Spezialeffekte
· Vorwort <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein.html>
· Hinweise zum Layout <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein51.html>
· Schrift <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o Schriftarten <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o Schriftgrößen <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Farben <em> <strong> <body> <font> class <style> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Anordnung (align) <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o linksbündig, rechtsbündig, zentriert <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o Chaos oder Harmonie <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o unten, oben, neben Bildern <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Abstände <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o horizontale Abstände <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o Einrückungen <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
o vertikale Abstände <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Trennlinien <hr> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Numerierungen <ol> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Frames <frameset> <frame> <noframes> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Navigationshilfen <link> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· siehe auch Interaktion mit dem Benutzer <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein53.html>
Schrift
· Schriftarten <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Schriftgrößen <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Schrift- und Hintergrundfarben <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
Schriftarten
In Spezialfällen kann man die Schriftart mit folgenden Befehlen festlegen:
<b> ..... </b> für fette Schrift (boldface),
<i> ..... </i> für kursive Schrift (italic),
<u> ..... </u> für Unterstreichungen (underline),
<tt> ... </tt> für nicht proportionale Schrift (teletype),
<code> ... </code> für Computer-Schrift.
Diese Befehle sollten Sie nur dann verwenden, wenn eine bestimmte Schriftart per Konvention vorgeschrieben ist (z.B. Fettdruck für Vektoren und Kursivdruck für skalare Variable in der Mathematik, Computer-Schrift für Programmbeispiele, Kursivdruck für lateinische Pflanzen- und Tiernamen und dergleichen).
Wenn es jedoch darum geht, Wörter oder Textteile mit einer bestimmten Bedeutung vom normalen Text abzuheben, sollten Sie nicht diese Befehle verwenden sondern die Markierung mit <em> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html> oder <strong> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html>.
Unterstreichungen sollten Sie überhaupt vermeiden, weil sie Verwechslungen mit Hypertext-Links <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein3.html> bewirken würden.
Manche Schriftarten können von manchen Clients <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> nicht dargestellt werden, sie werden dann durch eine andere geeignete Schriftart ersetzt.
Schriftgrößen
Die Schriftgröße wird vom Benutzer auf seinem Client <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> so eingestellt, wie es für seine Bildschirm-Auflösung und seine Augen am besten ist.
In HTML 3 <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> sind mehrere Möglichkeiten vorgesehen, die Schriftgröße von bestimmten Wörtern oder Textteilen zu beeinflussen <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein51.html>:
<big> ....... </big> für größere Schrift,
<small> ... </small> für kleinere Schrift,
<font size="+n"> ... </font> für eine um n Stufen größere Schrift,
<font size="-n"> ... </font> für eine um n Stufen kleinere Schrift,
<font size=n> ...... </font> für Schrift in einer bestimmten Größe,
sowie mit Style-Sheets <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein51.html>. Ob und wie diese Größenangaben wirken, hängt vom Web-Browser <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> und vom Client-Bildschirm <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> ab.
Viele, aber nicht alle Web-Browser stellen Überschriften <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html> der Ebenen 1 bis 3 durch fette und große Schrift dar, manche stellen Überschriften der Ebenen 5 und 6 durch kleinere Schrift dar. Die entsprechenden Befehle <hx> sollten aber wirklich nur für Überschriften der jeweiligen Ebene verwendet werden und nicht für andere Zwecke, denn das hätte unerwünschte Nebeneffekte auf eine eventuelle Einrückung der nachfolgenden Texte sowie auf Suchhilfen <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> und automatisch erstellte Inhaltsverzeichnisse.
Farben <em> <strong> <body> <font> class <style>
Im allgemeinen ist es günstiger, wenn Sie dem Leser überlassen, welche Schrift- und Hintergrundfarben er auf seinem Client-Rechner <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> verwendet - in Abhängigkeit von den technischen Möglichkeiten seines Bildschirms und Druckers, den Lichtverhältnissen in seinem Zimmer, der Sehschärfe seiner Augen, seinen Gewohnheiten, dem Zusammenspiel mit anderen Bildschirmfenstern - kurz, so wie es für ihn am angenehmsten ist.
Wenn Sie als Autor trotzdem auf Ihren Web-Pages bestimmte Farben für bestimmte Zwecke einsetzen wollen, dann müssen Sie die folgenden Punkte beachten:
· Wenn Sie die Farbe für den Text festlegen, müssen Sie auch eine dazu passende Farbe für den Hintergrund festlegen, damit nicht z.B. bei einem Benutzer, der weiße Schrift auf blauem Hintergrund eingestellt hat, plötzlich blaue Schrift auf blauem Hintergrund entsteht.
· Wenn Sie die Farbe für einen bestimmten Textteil festlegen, müssen Sie auch dazu passende Farben für alle anderen Textteile festlegen.
· Sie können sich nicht darauf verlassen, daß alle Leser die Farben tatsächlich sehen werden, deshalb müssen Sie zusätzlich immer auch andere Mittel einsetzen, um den erwünschten Effekt zu erreichen (z.B. <em> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html> oder <strong> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html>). Der Leser könnte den Text ja auf einem Schwarzweißdrucker ausdrucken oder ihn mit einem Web-Browser <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> ansehen, der keine Farben darstellt oder nur für 16 Grundfarben konfiguriert ist, oder er könnte farbenblind sein.
· Achten Sie bei der Wahl der Farben darauf, welche Schriftfarben auf welchen Hintergrundfarben gut lesbar sind, welche Farben ästhetisch zueinander passen, und welche Assoziationen sie bei den Lesern wecken (Verkehrszeichen, Temperaturen, Gefühle, politische Parteien, Firmen, Sportklubs, ...).
In HTML 2 <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> gibt es keine Befehle für die Spezifikation von Farben, sondern nur allgemein für Hervorhebungen mit <em> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html> und <strong> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html>. In HTML 3 <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> ist die Möglichkeit vorgesehen, Farben und andere graphische Effekte entweder im jedem Einzelfall mit Parametern in <body> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein1.html> und <font> oder wesentlich eleganter und allgemeiner mit Klassen und Style-Sheets <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein51.html> zu vereinbaren. Diese Möglichkeiten werden freilich nicht von allen Web-Browser <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/heinwas.html> unterstützt. Im folgenden wird angegeben, wie Sie diese verschiedenen Möglichkeit so kombinieren sollen, daß Sie den gewünschten Effekt auf möglichst vielen Web-Browsern <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein1.html> erreichen.
Die Farben werden in diesen Befehlen meist in der Form #rrggbb spezifiziert, wobei rr, gg und bb hexadezimale Zahlenangaben zwischen 00 (0) und FF (255) für den Rot-, Grün- und Blauanteil sind. Damit können theoretisch ca. 16 Millionen verschiedene Farben spezifiziert werden, praktisch sollten Sie sich jedoch auf die 216 Farben beschränken, die aus Kombinationen von 00, 33, 66, 99, CC und FF zusammengesetzt sind, oder überhaupt nur auf die aus 00 und FF zusammengesetzten Grundfarben. Beispiele (wobei die Sternchen je nach dem verwendeten Browser in den jeweiligen Farben erscheinen oder nicht):
#FFFFFF = weiß *****
#000000 = schwarz *****
#FF0000 = rot *****
#00FF00 = grün *****
#0000FF = blau *****
#FFFF00 = gelb *****
#FF00FF = magenta (lila) *****
#00FFFF = cyan (blaugrün) *****
#999999 = grau *****
#000066 = dunkelblau *****
#9999FF = hellblau *****
#660000 = dunkelrot *****
#FF9999 = rosa *****
In manchen Fällen können Farben auch durch bestimmte englische Wörter spezifiziert werden, z.B. white, black, red, blue, green.
Beispiel: Sie wollen erreichen, daß der Name Ihrer Firma immer in blauer Farbe und/oder fetter oder stark hervorgehobener Schrift erscheint. Als Kontrast dazu wählen Sie weiß für den Hintergrund, schwarz für den normalen Text und verschiedene Rottöne für Hypertext-Links.
In Ihrem HTML-File "enzian.html" geben Sie zu diesem Zweck die folgende Kombination von Befehlen an:
<html>
<head>
<title>Enzian</title>
<link rev=made href="webmaster@www.enzian.com">
<link rel=stylesheet href="enzian.css" type="text/css">
</head>
<body text="#000000" bgcolor="#FFFFFF"
link="#990000" vlink="#660000" alink="#FF0000" >
<h1 class=enzian><font color="#0000FF">Enzian</font></h1>
<p>
Wer
<strong class=enzian><font color="#cccccc">Enzian</font></strong>
trinkt, wird schneller
<strong class=enzian><font color="#0000FF">blau</font></strong>.
Dies wurde von
<a href="knieriem.html">namhaften Experten</a>
getestet ...
</body>
</html>
und im Style-Sheet-File "enzian.css" die folgenden Spezifikationen:
BODY { color: black; background: white }
A:link { color: #990000; background: white }
A:visited { color: #660000; background: white }
A:active { color: #FF0000; background: white }
.enzian { color: #0000FF; background: white; font-weight: bold }
Anmerkung: Theoretisch könnten Sie diese Style-Angaben direkt im HTML-File angeben, zwischen <style type="text/css"> und </style> innerhalb von <head>, anstelle des Style-Sheet-Link, aber manche nicht normgerechte Browser würden die Style-Angaben dann als Text am Bildschirm anzeigen statt sie zu interpretieren oder zu ignorieren.
Hier noch ein Beispiel dafür, wie Sie es nicht machen sollten:
- - - Die Eingabe von
<font color="#999999">Grau</font>
ist in Goethes "Faust" die Theorie, doch
<font color="#00FF00">grün</font>
des Lebens
<font color="#FF9900">goldner</font>
Baum, und was man
<font color="#000000">schwarz</font>
auf
<font color="#FFFFFF">weiß</font>
besitzt, kann man getrost nach Hause tragen.
- - - bewirkt die Ausgabe von
Grau ist in Goethes "Faust" die Theorie, doch grün des Lebens goldner Baum, und was man schwarz auf weiß besitzt, kann man getrost nach Hause tragen.
und je nachdem, welchen Web-Browser Sie verwenden, sehen Sie hier entweder überhaupt keine Hervorhebung der Farbennamen, oder ein Teil dieser Wörter hebt sich nicht gut genug von der Hintergrundfarbe ab.
- - -
Anordnung (align)
· linksbündig, rechtsbündig, zentriert <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· Chaos oder Harmonie <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
· unten, oben, neben Bildern <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein52.html>
Linksbündig, rechtsbündig, zentriert
Die Anordnung und Ausrichtung von Texten und Bildern in Absätzen, Überschriften und Tabellen kann mit Align-Hinweisen in den HTML-Befehlen <p> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html>, <h1> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html>, <td> <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein2.html> usw. beeinflußt werden.
Die Align-Hinweise werden von manchen Web-Browsern befolgt und von anderen ignoriert <http://userpage.chemie.fu-berlin.de/diverse/htmleinf/hein51.html>.
Beispiele:
- - - Die Eingabe von
<p align=left>
Linksbündig ist die normale Ausrichtung von Absätzen.
<p align=right>
Hoffentlich geht das
<br>
mit rechten Dingen zu.
<p align=center>
Im Reich der<br>Mitte
<p>
- - - bewirkt eine Darstellung wie
Linksbündig ist die normale Ausrichtung von Absätzen.
Hoffentlich geht das
mit rechten Dingen zu.
Im Reich der
Mitte
- - -
Ein Bereich von mehreren Absätzen kann man mit dem Befehl <div> zusammengefaßt werden. So kann man z.B. mit einer Befehlsfolge wie
<div align=center>
<p>
erster zentrierter Absatz
<p>
zweiter zentrierter Absatz
</div>
eine Folge von mehreren zentrierten Absätze erreichen.
Vorsicht!
Zentrierte und linksbündige Layouts sollen niemals vermischt werden:
In linksbündigen Layouts sucht das Auge des Lesers entlang des linken Randes nach allen wichtigen Elementen (Überschriften, Aufzählungen, Numerierungen u.dgl.).
In zentrierten Layouts sucht der Leser in der Mitte des Bildschirms nach den wichtigen Elementen.
Wenn zentrierte und linksbündige Überschriften oder Listen abwechseln, funktioniert das rasche Auffinden der wichtigen Elemente nicht mehr, der Überblick geht verloren, und das Layout wird als unübersichtlich empfunden.
Beispiel:
Chaos
ist schlecht lesbar.
Harmonie
ist gut lesbar.
- - -
Deshalb: entweder alle Überschriften zentriert, oder (besser) alle Überschriften linksbündig.
Umgekehrt ist es aber üblich und empfehlenswert, bestimmte "fremde Elemente" wie Titelseiten, Bilder, Tabellen oder mathematische Formeln durch Zentrierung deutlich vom laufenden Text abzuheben und damit die Übersichtlichkeit und Lesbarkeit des laufenden Textes zu vergrößern.
Beispiel:
- - - Die Eingabe von
<p align=center>
<img src="austria.gif" alt="Oesterreich">
- - - bewirkt eine Darstellung wie