HTML, CSS und die Server-Browser-Kommunikation

Tom Geißler, 17. Juli 2004

Inhaltsverzeichnis

Anfang

Diese Einführung habe ich für eine HTML-Schulung erstellt. Wenn jemand Nutzen daraus zieht, umso besser.

Grundlagen einer Webseitenverbindung (DNS, HTTP)

Der URI, Universal Resource Identifier

Der Abruf einer Webseite beginnt im allgemeinen mit der Eingabe einer Webadresse im dafür vorgesehenen Browserfeld. Diese Webadresse wird von den heute üblichen Browsern auf einen gültigen URI erweitert. Aus welche Bestandteilen setzt sich der aber nun zusammen:

   http://www.d7031.de
   ^^^    ^^^  ^^^  ^^
   1.     4.   3.   2.

1. ist der zu verwendende Protokolltyp (also die Sprache in der sich der Browser und der Webserver unterhalten). Für Browser gängige Protokolle sind HTTP/HTTPS für Webseiten, FTP für den Dateidownload und LDAP für Verzeichnisdienste.

2. ist die Topleveldomain. DNS ist in einer Baumstruktur aufgebaut und dies ist die Wurzel. Hier trifft man häufig auf folgende Werte:

de für das Land Deutschland
ch für das Land Schweiz
at für das Land Österreich
org für Organisationen
net für allgemeines Netz
gov für US-amerikanische Behörden
info für Informationsdienste
biz für Unternehmen

3. ist der Domainname den der Betreiber der Webseite für sich beim zuständigen Registrar reserviert hat (für de ist es das DENIC).

4. ist eine Vereinbarung die auf den maßgeblichen Begründer des World Wide Web Tim Berners-Lee zurück geht. Es bezeichnet den ersten Server einer Internetpräsenz. Es ist eigentlich nur ein Servername, oft sogar nur ein Alias.

Der Punkt trennt die Topleveldomain vom Domainnamen (eventuelle Unterdomains werden wieder durch Punkte getrennt) und dem Servernamen.

Wie finden sich Browser und Server

Nach der Eingabe von z. B.: www.d7031.de macht der Browser (oder das darunterliegende System) eine DNS-Abfrage. Hier wird für den eingebenden Namen die eindeutige IP-Adresse ermittelt. Nur mit dieser Adresse kann eine Verbindung auf dem unter HTTP liegendenden Protokollen TCP/IP zustande kommen. Man kann natürlich mit einem guten Zahlengedächtnis die IP-Adressen auch direkt in de Browser eingeben. Die DNS-Abfrage sieht in etwa so aus (Ausgabe des Programms nslookup):

   #nslookup d7031.de
   
   Server:   192.168.1.1
   Address:  192.168.1.1#53  (befragter DNS-Server)

   Name:     d7031.de
   Address:  213.133.104.31

Die Webseiten von www.d7031.de liegen also auf dem Server mit der IP-Adresse213.133.104.31.
Der Browser schickt nun ein Anfrage an den Server (hier im privaten Netz), z. B. so:

   connect to [192.168.1.1] from [192.168.1.10] 1035
   GET / HTTP/1.1
   User-Agent: ELinks/0.9.1 (textmode; Linux 2.4.18-1-386 i586; 100x37)
   Referer: http://www.gnu.org/
   Accept: */*
   Accept-Encoding: gzip
   Accept-Language: de_DE
   Connection: Keep-Alive

Daraufhin anwortet der Server so oder so ähnlich:

   HTTP/1.1 200 OK
   Date: Mon, 12 Jul 2004 18:22:07 GMT
   Server: Apache/1.3.26 (Unix) Debian GNU/Linux PHP/4.1.2
   Last-Modified: Sat, 26 Oct 2002 09:12:14 GMT
   ETag: "5f726-100e-3dba5c6e"
   Accept-Ranges: bytes
   Content-Length: 4110
   Keep-Alive: timeout=15, max=100
   Connection: Keep-Alive
   Content-Type: text/html; charset=iso-8859-1

   <!DOCTYPE HTML PUBliC "-//W3C//DTD HTML 3.2//EN"">
   ...
   ...

Ab hier wirds dann meist bunt.
Alle Elemente die im Browser zu sehen sind wurden vorher heruntergeladen!

Einblick in die Webserverkonfiguration

Derzeit am häufigsten verbreitet ist der Webserver Apache in der Version 1.x oder in der neuen Version 2.x. Die Konfiguration erfolgt wie in unixartigen Systemen üblich über Textdateien, hier vor allem über die httpd.conf. Neben vielen globen Einstellungen werden dem Server hier auch mitgeteilt welche Module geladen werden sollen, so zum Beispiel das Modul cgi oder das Modul alias.

Die Konfiguration eines Verzeichnisses im Server für unsere Webseite könnte so aussehen:

   Alias /web/ /var/www/web/

   <Directory /web>
     Order deny,allow
     Deny from All
     Allow from 192.168.0.0/16
   </Directory>

Wichtig für die korrekte Verarbeitung der einzelnen Dateien ist die Zuordnung der Dateitypen zu den Programmen und die funktionierende Abarbeitung von serverseitigen Scripten durch das zuständige Programm. Für ein PHP-Script (Apache 2) sieht das zum Beispiel so aus:

   ScriptAlias /php/ "/bin/php/"
   AddType application/x-httpd-php .php
   Action  application/x-httpd-php "/php/php"

Die Zuordnung der Dateiendung (bzw. der Mime-Typen) zu den clientseitig einzusetzenden Programmen wird wie folgt konfiguriert:

   application/msaccess                            mdb
   application/msword                              doc dot
   application/pdf                                 pdf
   application/postscript                          ps ai eps
   application/x-httpd-php                         phtml pht php
   application/x-ogg                               ogg
   audio/mpeg                                      mpga mpega mp2 mp3
   image/jpeg                                      jpeg jpg jpe
   image/gif                                       gif
   image/png                                       png
   text/css                                        css
   text/html                                       htm html xhtml
   video/quicktime                                 qt mov

Der Browser erhält so Informationen wie mit der Datei umzugehen ist. Dateitypen die keinem Programm zugeordnet werden können sind vom Typ application/octet-stream. Der Browser bietet eine Programmauswahl oder die Möglichkeit der Speicherung dieser Datei an.

Logfiles und deren Auswertung

Logbeispiel eines Apache

Der Webserver Apache speichert die Informationen über die Seitenabrufe in einem Logfile (access.log). Die zu protokollierenden Informationen sind konfigurierbar. Hier ein Beispiel eines Apache 2 unter Debian:

192.168.1.1 - - [15/Jun/2004:21:04:00 +0200] "GET / HTTP/1.1" 200 812 
 "http://kirk/" "ELinks/0.9.1 (textmode; Linux 2.4.18-1-386 i586; 100x37)"
192.168.1.1 - - [15/Jun/2004:21:04:02 +0200] "GET /info.php HTTP/1.1" 200 3796 
 "http://kirk/info.php" "ELinks/0.9.1 (textmode; Linux 2.4.18-1-386 i586; 100x37)"

Neben der Client-IP-Adresse wird hier die Zugriffszeit, die Abfragemethode, der Ergebniscode, die Dateigröße, das abgerufene Element sowie Informationen über der Browser protokolliert.

Software zur Auswertung

Zur Auswertung einer solchen Datei bieten sich verschiedene Programme an. Sie stellen das Ergebnis als Webseite dar. Gut geeignet sind nach meiner Ansicht folgende Programme:
http://awstats.sourceforge.net/
http://www.mrunix.net/webalizer/

Dynamische Webseiten

HTML-Seiten sind statisch. Will man nun aber stehts automatisch aktualisierte Seiten, z. B. mit Inhalten aus Datenbanken, so bieten sich dynamische generierte Seiten an. Man kann zwei Arten der Erzeugung unterscheiden.

Serverseitig (PHP, Perl, ASP)

Hier wird die HTML-Seite auf dem Server erzeugt und die fertige Datei an den Browser gesendet. Der Browser benötigt zur Darstellung keine erweiterte Funktionalität. Das nachfolgende Beispiel zeigt den Quellcode eines PHP-Scriptes (diesen Code bekommt man in der Regel nicht zu sehen):

   <html>
    <head>
      <title>PHP-Test</title>
    </head>
    <body>
      <?php echo "<p>Hallo Welt</p>"; ?>
    </body>
   </html>

Der Webserver und das zuständige Programm erzeugen beim Abruf folgendes Ergebnis, welches der Server zum Browser ausliefert:

   <html>
    <head>
      <title>PHP-Test</title>
    </head>
    <body>
      <p>Hallo Welt</p>
    </body>
   </html>

In der überwiegend von auf Microsoft-IIS Webservern eingesetzten Scriptsprache ASP könnte ein Script so aussehen:

   <html>
    <head>
      <title>Zeitangabe</title>
    </head>
    <body>
      <p><%=time()%></p>
    </body>
   </html>

Einen sehr großen Funktionsumfang hat, die auch für serverseitige Scripte einsetzbare Sprache, Perl. Hier auch ein Beipiel dazu:

   #!/usr/bin/perl -w
   use CGI;
   $inhalt = new CGI;

   print
       $inhalt->header,
       $inhalt->start_html('Willkommen'),
       $inhalt->h1('Hallo Welt');
       ...
   print 
       $inhalt->end_html();
   exit 0;

Ebenfalls Eingesetz werden Java Server Pages jsp.

Hinter dem Kürzel cgi können sich Anwendungen in verschiedenen Programmiersprachen verbergen. Neben Perl werden Shell-Scripte oder C- und C++-Programme verwendet.

Clientseitig (Javascript)

Möchte man im Browser eine Scriptsprache einsetzen, um z. B. Formulareingaben vor der Übertragung zu prüfen, so kann man Javascript verwenden. Die Nutzung dieser Sprache setzt jedoch die Fähigkeit bzw. die Aktivierung zur Ausführung von Javascript im Browser voraus. Der Einfluß hierauf ist jedoch begrenzt. Hier ein Stück Quellcode:

<a href="#" onclick="alert('Hallo Welt!')">Hallo Welt Link</a>

Leider wird Javascript oft für die Darbietung von grafischen Animationen genutzt. Es ist die freie Entscheidung des Webmasters dies einzusetzen, jedoch sollte die Funktionalität auch bei ausgeschaltetem Javascript erhalten bleiben. CSS kann einige Funktionen ebenso abbilden. Die Abwährtskompatibilität bleibt hier aber eher gewahrt.

Verschiedene Browser und deren Kompatibilität zum Standard

Der derzeit meist verbreitete Browser ist der Microsoft Internet Explorer in den Versionen 5.x und 6.x. Leider gibt es bei CSS-Elementen aus den Standards des W3C Darstellungsprobleme mit diesen Browsers. Viel weiter entwickelt sind hier die plattformübergreifend verfügbaren Browser Opera und Mozilla/Firefox. Mit einer standardkonformen Darstellung lassen sich viele Gestaltungselemente über CSS realisieren ohne auf Javascript zurückgreifen zu müssen (auch bei Javascript gibt es Funktionsunterschiede in den Browsern). Die Darstellung der Webseiten in anderen Systemen sollte jedoch nie außer aucht gelassen werden. Nicht jeder Nutzer will oder kann die grafischen Funktionen nutzen. Die Besucher einer Seite interessieren sich für den Inhalt. Anlaufstellen für das browserunabhängige Webdesign sind z.B.:
http://www.anybrowser.org/
http://bobby.watchfire.com/bobby/html/en/index.jsp
http://www.delorie.com/web/wpbcv.html
http://www.karzauninkat.com/Goldhtml/
http://www.dejavu.org/

Die Lesbarkeit seiner Seiten für ältere Browser, Suchmaschinen, ...kann man testen, indem im Browser Javascript bzw. Scriptsprachen abgeschalten werden und die zentrale CSS-Datei deaktiviert wird.

HTML-Grundlagen

Grundlegendes

Über HTML gibt es online und offline viel Dokumentation. Das aus meiner Sicht Beste für Anfänger und als ideales Nachschlagewerk ist hierzu http://www.selfhtml.org von Stefan Münz und seinem Team.

DTD

HTML ist eine Sprache um einen Text logisch zu gliedern. Derzeit aktuell ist die Version 4.01 des HTML-Standards. Zunehmend verbreitet sich der Standard XHTML 1.0. Ein einfaches Grundgerüst sieht so aus:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
   <html>
     <head>
       <title>Titel</title>
     </head>
     <body>
       <p>z. B. ein Absatz</p>
     </body>
   </html>

Die DOCTYPE-Anweisung teilt dem Browser die verwendete Sprache mit. Für HTML und XHMTL 1.0 gibt es je drei Dokumenttypen:

Transitional: HTML in denen noch ältere Sprachelemente erlaubt sind
Strict: HTML 4 ohne Sprachelemente aus früheren Versionen, die Formatierung erfolgt über CSS
Frameset: für HTML-Seiten die Framesets definieren

In XHMTL 1.1 gibt es diese Unterscheidung nicht mehr. Hier gibt es nur noch eine dem Strict ensprechenden Dokumenttyp.

Anmerkungen zum Quellcode

Es ist sinnvoll sich bei der Erstellung von HTML-Seiten einige Grundregeln aufzuerlegen. Ich versuche mich an folgende Konventionen zu halten:

Alle Tags werden klein geschrieben (für XHTML ist das zwingend).
Den Quelltext strukturiert formatieren.
Alle Tags die Inhalt haben können, werden auch wieder geschlossen.
Für die Formatierung der Tags ist CSS (möglichst in einer zentralen Datei) zuständig.
Die Struktur der Seite soll auch eine Darstellung ohne CSS zulassen.
Dateinamen werden immer klein sowie ohne Umlaute und Leerzeichen geschrieben.
Den Quelltext immer syntaktisch prüfen (z. B. über www.w3.org).

Kommentare werden so  definiert. Sie könne auch über mehrere Zeilen gehen.

Der Kopf

Die erste Zeile einer HTML-Datei ist die DOCTYPE-Anweisung. Danach folgt der <head>...</head>-Abschnitt. Hierin wird der Titel der Seite (erscheint im Betriebssystemfenster der Browsers oder auch oben rechts) mit dem Tag <title>...</title> festgelegt. In diesem Bereich können noch mehrere Elemente notiert werden, wie z. B.:

   <head>
     <title>Titel der Seite</title>
     <meta name="author" content="Ich">
     <meta name="keywords" content="Schlüsselwörter für die Suchmaschine">
     <meta name="description" content="Beschreibung für die Ergebnisanzeige 
          der Suchmaschine.">
     <link rel="stylesheet" type="text/css" href="meine.css">
   </head>

Der Body

Mit dem Tag <body>...</body> wird der Hauptteil der Seite umschlossen. Hierin liegen dann alle Grafiken und Texte die im Browser erscheinen sollen.
Für die Gliederung des Textes gibt es eine Anzahl von Tags. Hier ist eine kleine Auswahl:

Die Überschriften können, logisch strukturiert, mit den Elementen <h1>...</h1> bis <h6>...</h6> abgebildet werden.
Für Abschnitte stehen die Elemente <p>...</p> und <div>...</div> zur Verfügung. Zeilenumbrüche werden mit <br> und horizontale Linien mit <hr> eingefügt.
Listen werden als nummerierte Listen mit <ol><li>...</li></ol> oder als Listenpunkte mit Anstrich durch <ul><li>...</li></ul> erzeugt. Der einzelne Listeneintrag wir vom Tag <li>...</li> umschlossen.
Für die Darstellung von vorformatierten Text (wie Quellcode) steht das Tag <pre>...</pre> zur Verfügung.
Adressen kann man mit <adress>...</adress> und Zitate mit <blockquote>...</blockquote> abbilden.

Tabellen

Tabellen sind für die Darstellung von tabellarischen Daten zuständig. Häufig werden sie aber als blinde Tabellen zur Seitengestaltung benutzt. CSS bietet hier jedoch die besseren Gestaltungsmöglichkeiten. Eine einfache Tabelle sieht z. B. so aus:

   <table>
     <tr>
       <th>1. Kopfzelle</th>
       <th>2. Kopfzelle</th>
     </tr>
     <tr>
       <td>Feld A2</td>
       <td>Feld B2</td>
     </tr>
     <tr>
       <td>Feld A3</td>
       <td>Feld B3</td>
     </tr>
   </table>

Das Tag <tr>...</tr> beschreibt eine Tabellenzeile. Mit <th>...</th> wird die Tabellenüberschriftszelle festgelegt, diese Angabe ist nicht zwingend erforderlich. Das Element <td>...</td> erzeugt dann die Tabellenzelle.
Alle Zellen sollten mit einem Inhalt versehen sein (ggf. mit dem Leerzeichen  ). Manche Browser haben sonst Darstellungsprobleme. Man kann auch Zellen (<td colspan=2>zwei Zellen verbunden</td>) oder Zellen spaltenweise verbinden (<th rowspan=2>zwei Zellen übereinander</th>). Auch eine Kombination der beiden Werte ist möglich.

Verweise (Links)

Verweise sind grundlegender Bestandteil des WWW. Verweise strukturieren die Website und verbinden zu anderen Dokumenten in der weiten Welt. Die Beschreibung der Links sollte immer aussagekräftig sein (das alleinstehende Wort hier sollte man meiden). Ein Link auf eine andere Seite sieht so aus:

 absoluter Verweis:
   <a href="http://www.d7031.de/text/impress.html">Impressum</a>

 relativer Verweis (zur aktuellen Seite):
   <a href="text/impress.html">Impressum</a>

Will man die Darstellung des Links in einer neuen Seite erreichen, so kann man das Attribut target=_blank" benutzen, also

   <a href="http://www.d7031.de/text/impress.html" target="_blank">Impressum</a>

Verweise sollten in einer sinnvollen Menge eingesetzt werden. Zuwenig ist ebenso schlecht wie zuviel. Links können natürlich auch auf Dateien zeigen die heruntergeladen werden können (dies gilt auch PDF-Dateien).
Bei längeren Seiten können Links auch auf selbst definierte Anker in der Seite verweisen. Die Navigation innerhalb der Seite wird, ohne sich den Finger wund zu scrollen, vereinfacht. Die Syntax sieht dann wie folgt aus:

 Der Anker:
   <a name="wählbarerName">z. B. ein Abschnitt</a>

 Der Link zum Anker:
   <a href="#gewählterName">wohin geht es?</a>

E-Mail-Links haben eine etwas abweichende Syntax. Sie rufen in vielen Browsers gleich das vorgesehene Mailprogramm auf und tragen den Empfänger ein:

   <a href="mailto:Tom@d7031.de">Tom@d7031.de</a>

Grafiken

Als Grafikformate haben sich in HTML-Seiten die Formate GIF, JPEG und PNG etabliert. GIF war bisher mit einem Patent belegt und wurde deshalb nicht uneingeschränkt eingesetzt. Die Grafiken sollten für die Darstellung am Monitor optimiert werden. Die Größe der Datei soll so gering wie möglich sein, es gibt noch User mit wenig Bandbreite (Modem, GPRS). Wenn größere Grafiken mit einer besseren Auflösung angeboten werden, so ist eine Größenangabe im Link recht sinnvoll. Eingebunden werden die Grafiken so:

   <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0!" 
      width="88px" height="31px">

Mit src wird die Quelle definiert. Sie kann auch auf einem anderen Server liegen. Das alt-Attribut ist Pflicht. Es wird in Browsern die keine Grafiken darstellen können oder wollen als Alternativtext angezeigt. Einige Browserhersteller generieren hieraus einen Tooltip. Die Größenangaben sind wahlfrei. Sie ermöglichen jedoch dem Browser eine Platzreservierung für die Grafik beim Rendern der Seite.

CSS

CSS-Grundlagen

Die Darstellungsweise einer Webseite im Browser wird durch zwei Elemente bestimmt. Im HTML wird der eigentliche Inhalt und die logische Strukur (Übersichriften, Absätze, Tabellen, ...) bestimmt. Mit CSS erfolgt die Definition der Darstellung von HTML-Seiten. Von der früher üblichen Textformatierung im HTML-Quelltext (z. B. mit <font>) ist abzusehen.

Es werden derzeit zwei CSS-Sprachversionen eingesetzt. Einmal die Verson 1.0 von 1996 und die Überarbeitung durch Version 2.0 von 1999.

Maßgebend für die Verwendung der Sprachelemente aus Version 1 oder 2 sind die Fähigkeiten der Browser diese jeweiligen Sprachelemente korrekt umzusetzen. Mt einer klaren, logischen Struktur der HTML-Seite ist es aber weitestgehend möglich, auch in einem Browser der gar nicht mit CSS umgehen kann bzw. bei Geräten die bauartbedingt die Formatanweisungen nicht übernehmen können, die Seite gut lesbar darzustellen. Ein Test mit verschiedenen Browsern (wenn möglich auf verschiedenen Betriebssystemen) ist nach wie vor unerlässlich! Insbesondere bei Größenangeben für die Schrift ist es günstiger mit relativen Werten (em, %, ...) zu arbeiten. Die Auflösung des Bildschirms/Displays und damit die reale Schriftgröße ist bei einem PC mit MS Windows anders als bei einem Mac und wieder anders bei Unix/Linux. Ähnliches gilt für die Farbwahl. Die Anzeige hängt stark von den Einstellungen des Monitors beim Benutzer ab.

   Best Viewed with 743x398.5 mit 37 Farben auf Haitisch-17"
   Monitor, Konrastregler auf 92° Helligkeit auf 17°, Mittwoch
   morgens um 7.36 Uhr von Januar bis März bei bewölktem Wetter
   in einem nach Nordosten ausgerichteten Gebäude.
                                  Ulrich Eckhardt in de.alt.sysadmin.recovery

CSS einbinden

Eine Möglichkeit der Styledefinition besteht in der Einbindung der Anweisungen zur Formatierung im Header einer HTML-Datei. Dies bietet sich für die direkte Formatierung einzelner, weniger Seiten an. ebenso beim überschreiben einzelner Formate aus einer zentralen Datei für diese Seite:

   <style type="text/css">
   <!--
      em { font-size:2em; }
   -->

Weitaus besser geeignet ist eine zentrale Formatdefinition für alle Seiten. Änderungen am Layout können so schnell global durchgeführt werden. die Größe der HTML-Seiten wird nebenbei ebenso verringert. Eine solche zentrale Formatierung wird über eine link-Anweisung im Header eingebunden:

   <link rel="stylesheet" type="text/css" href="meine.css">

Die dritte Möglichkeit besteht in der Direktformatierung von HTML-Elementen:

   <p style="font-color:blue;">Blauer Text.</p>

Diese direkte Formatierung hat Vorrang vor der Formatierung im Header und diese hat wiederum Vorrang vor einer externen, eingebunden CSS-Datei.
Wenn nichts anders angegeben benutze ich im nachfolgenden die Formatierung über eine zentrale Formatdatei.

CSS-Definitionen für verschiedene Ausgabemedien

Man kann für verschiedene Ausgabemedien (Bildschirm, Drucker) eine jeweils passende CSS-Datei erstellen. Bei der Einbindung im Header sind die jeweiligen Ausgabemedien anzugeben:

   <link rel="stylesheet" media="screen" href="bildschirm.css">
   <link rel="stylesheet" media="print"  href="drucker.css">

Aufbau einer CSS-Datei

Jedes HTML-Element kann wie folgt formatiert werden:

   HTML-Element(e) {Eigenschaft:Wert(e);...}

Also z. B.:

   body {background-color:darkblue;color:yellow;}

Kommentare erfolgen wie unter der Programmiersprache C mit /*...*/ und dürfen nicht verschachtelt werden.

Vererbung von Formatanweisungen

HTML-Elemente die innerhalb eines anderen (eltern-) HTML-Elementes stehen erben die übergeordneten Formatanweisungen:

  <p style="background-color:darkblue;color:yellow;">Gelb auf Blau
     <span style="color:white;">weiss auf blau</span>hier wieder wie vorher
  </p>

Ebenso ist es möglich die Definition eines Elementes nur für eine bestimmte Verbindung von Element und Elternelement gültig zu machen:

   div b {color:red;}

   <div>Ein Text wird <b>rot und fett</b>.</div>
   <p>Ein Text wird <b>nur fett</b>.</p>

Die Verschachtelungstiefe spielt hier keine Rolle. Eine feine Steuerung der Formatierung abhängig von der Verschachtelungstiefe ist wie folgt möglich:

   div>b
   div*b
   div+b

DIV und SPAN

Mit diesen beiden HTML-Elementen können Bereiche definiert werden, die dann wie gewünscht formatiert werden können. Der Unterschied zwischen beiden besteht lediglich darin, daß div einen Zeilenumbruch erzeugt, span arbeitet inline.

Formatklassen

In CSS können Formatierungen für beliebige oder aber für bestimmte HTML-Elemente defifniert werden. Universell einsetzbare Elemente werden wie folgt definiert:

   .<wählbarerName> {Formatanweisung(en);}

z. B.:

   .rahmen {border-style:dotted;}

Für bestimmte Elemente erfolgt die Definition so:

   p.rahmen {border-style:solid;}

In der HTML-Datei werden die Klassen über das Schlüsselwort class angesprochen.

   <p class="rahmen">Dieser Text hat einen durchgehenden Rahmen</p>

oder:

   <li class="rahmen">Dieser Listeneintrag hat einen gestrichelten Rahmen</li>

Individualformate

Ähnlich wie die Formatklassen können Bereiche über Individualformate formatiert werden. Jedoch dürfen die Individualformate im Gegensatz zu den Formatklassen pro HTML-Seite nur einmal zugewiesen werden. Die Definition in der CSS-Datei erfolgt über:

   #<wählbarerName> {Formatanweisung(en);}

Verwendet wird diese Form für die Formatierung von Elementen mit absoluter Positionierung (position:absolute). Die Einbindung im HTML erfolgt über das Schlüsselwort id, z. B.:

   <div id="linksoben">Hier steht dann mal was.</div>

Pseudoformate

Für das Element a oder p können für die einzelnen Zustände des Elementes getrennte Formate definiert werden:

   a:link        {color:red;}
   a:hover       {color:blue;}
   p:firstletter {font-size:200%;}

Die Trennung von Element und Zustand erfolgt mittels Doppelpunkt. Die hieraus entstehenden Möglichkeiten sind im Absschnitt CSS-Menüs dargestellt.

Wertangaben

Benutzen Sie bei der Angabe von Größen möglichst wenig absolute Maßeinheiten wie cm, mm, pt,..., denn Sie kennen ja das Ausgabegerät nicht. Besser, wenn auch nicht optimal, sind Angaben in Pixel px und für davon abhängige Elemente relative Angaben wie em oder %. Dezimaltrenner ist der Punkt. Negative Werte sind teilweise (z. B. bei Abständen) zulässig. Auch hier gilt wie für jeden Text: Nur soviel unterschiedliche Formatierungen wie unbedingt nötig, der Inhalt entscheidet.

Abstandsformatierung

Die Formatangaben im CSS (margin:...) beziehen sich immer auf das Elternelement. So bschreibt ein margin:10px für ein p-Element im folgenden HTML-Code:

   ...
   <body>
      <p>Absatz</p>
   </body>
   ...

den Abstand des Absatzes zur Gesamtseite. Jedoch wird der Abstand von p in:

   ...
   <body>
      <div>
         <p>Absatz</p>
      </div>
   </body>
   ...

hier zum Element div definiert.
Neben der Einzelauflistung von margin-top:...; margin-left:...;... können die Werte durch Leerzeichen getrennt auch wie folgt angegeben werden:

   margin:oben rechts unten links;
   margin:oben+unten rechts+links;
   margin:oben rechts+links unten;

Für den Innenabstand steht das Schlüsselwort padding zur Verfügung. Hier wird der Abstand des Textes zu seinem Rand bestimmt. Sinnvoll zum Beispiel bei eingerahmten Text:

	 
   p.rahmen {
             padding-top:10px;
             padding-bottom:20px;
             border-style:solid red;
             }

   <p class="rahmen">Text mit Abstand und Rahmen</p>

Zentrieren eines Textes mit CSS

Oft besteht der Wunsch einen Text in einem Rahmen horizontal mittig, aber nicht mit der Textformatierung zentriert sondern linksbündig zu setzen. Dies ist einfach mit den folgenden Werten lösbar:

   margin-left:auto;
   margin-right:auto;
   width:10em;

Für die vertikale Zentrierung eines Textes in einem Rahmen oder Bereich sind folgende CSS-Anweisungen verwendbar:

   display:table-cell;
   vertical-align:middle;
   min-height:5em;

Grafik mit Untertitel und Rahmen

Ein Beispiel auf den Seiten des W3C zeigt die Darstellungsmöglichkeiten eine Grafik mit Rahmen und Label:
http://www.w3.org/Style/Examples/007/figures.html

CSS-Menüs, Text mit Mouseoverfunktion

CSS bietet die Möglichkeit einer feststehenden Navigation auf einer absoluten Position. Ein Beispiel ist unter
http://www.w3.org/Style/Examples/007/menus.html
zu finden. Ebenso ist es möglich eine Mouseoverfunktion ohne den Einsatz von clientseitigen Scriptsprachen zu realisieren:
http://www.meyerweb.com/eric/css/edge/

Schluß

Der Text unterliegt der GPL.

Tom Geißler

   Die Wunsch-Website einer Werbeagentur ist DAU-kompatibel, sonst nichts.
   Webdesigner haben bekanntlich zur Sicherheit im Netz und zu korrektem
   HTML ein Verhältnis wie Klaus Störtebeker zum Handelsrecht.
                    http://www.heise.de/tp/deutsch/inhalt/te/13095/1.html