Dipl.-Inf. (FH) T. Mättig

09.05.2005

Komplexes HTML- und CSS-Beispiel zum Selbststudium

Abgelegt unter: — Thiemo Mättig @ 18:25

Anhand eines komplexeren Beispieles möchte ich zeigen, dass HTML-Dokumente üblicherweise aus mehreren logischen Blöcken bestehen: Normalerweise gibt es ein Menü, mit dessen Hilfe man innerhalb der Web-Präsenz navigiert, ein Logo mit einem Schriftzug oder einer Grafik und den eigentlichen Text. Sie werden ein fertiges Beispiel-Dokument analysieren und Schritt für Schritt nachvollziehen.

Was ist zu tun:

Die komplette Beispiel-Präsenz (ZIP, 13 KB) gibt es hier als komprimiertes Archiv zum Herunterladen. Laden Sie die Datei herunter, speichern Sie sie an einer geeigneten Stelle und packen Sie sie aus, indem Sie mit der rechten Maustaste auf die heruntergeladene Datei klicken und im dann erscheinenden Kontextmenü den entsprechenden Menüpunkt zum Extrahieren wählen. Sie sollten dann ein neues Verzeichnis “beispiel-web-praesenz” mit insgesamt 7 Dateien vorfinden.

Schauen Sie sich die Dateien an, auch die Bilder. Zwei davon (klecks.png und risskante.png) dienen gestalterischen Zwecken und sehen für sich genommen etwas merkwürdig aus. Dazu später mehr.

Im Folgenden sind die Dateien index.html und stylesheet.css noch einmal abgebildet (allerdings ein wenig gekürzt, um das Ganze übersichtlicher zu machen). Die Zeilen sind nummeriert, dabei steht H für “HTML” und S für “Stylesheet".

 H1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 H2 <html>
 H3   <head>
 H4     <title>Alles über offen-siv</title>
 H5     <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 H6     <link rel="stylesheet" type="text/css" href="stylesheet.css">
 H7   </head>
 H8   <body>
 H9     <div id="titel">
H10       <h1>offen-siv</h1>
H11     </div>
H12     <div id="menue">
H13       <a href="index.html">Einleitung</a>
H14       <a href="angebote.html">Die Angebote</a>
H15     </div>
H16     <div id="inhalt">
H17       <h1>Über offen-siv</h1>
H18       <p>
H19         Hier geht es
H20         <a href="http://www.hs-zigr.de/studenten/">zu offen-siv</a>.
H21       </p>
H22     </div>
H23   </body>
H24 </html>

Erläuterungen:

Zeile H1 bestimmt den Dokumenten-Typ. In unserem Fall handelt es sich um die verbreitete und robuste Version 4.01 der HTML-Sprache. Diese Angabe ist wichtig, damit das Dokument in allen Web-Browsern gleich aussieht und nicht etwa Maßeinheiten oder Formatierungen falsch interpretiert werden.

Zeile H2 leitet das eigentliche HTML-Dokument ein. Dieses endet erst mit Zeile H24. Das gesamte Dokument ist in diese beiden HTML-Elemente praktisch eingeklammert. Außer der Dokumententyp-Angabe darf außerhalb nichts stehen.

Zeile H3 leitet den Dokumenten-Kopf ein. Dieser endet mit Zeile H7 und enthält diverse versteckte Angaben. Üblicherweise umfassen diese Angaben den Fenstertitel (für Suchmaschinen und zur Anzeige in der Titelzeile des Browser-Fensters), den Zeichensatz (damit die deutschen Umlaute in allen Web-Browsern weltweit korrekt angezeigt werden) sowie die Verknüpfung zur zugehörigen Stylesheet-Datei (mit den Formatierungs-Angaben, welche die konkrete Darstellung des Dokumentes bestimmen).

Zeile H8 leitet den eigentlichen Dokumenten-Körper ein. Dieser endet mit Zeile H23 und enthält den im Browser-Fenster sichtbaren Teil.

Die Zeilen H9, H12 und H16 unterteilen den Dokumenten-Körper noch einmal in drei Teile. Zu diesem Zweck kommt das sogenannte allgemeine Block-Element <div> (für division = Bereich) zum Einsatz. Dieses Element hat selbst keinerlei darstellende Wirkung. Mittels zusätzlicher identifizierender Namen werden die drei Blöcke unterscheidbar gemacht, so dass sie später verschieden formatiert werden können. Der erste Block steht für den Titel bzw. das Logo der Web-Seite und reicht von Zeile H9 bis H11. Der zweite Block umfasst das Haupt-Menü und reicht von H12-H15. Der dritte Block umfasst den Inhaltsteil des Dokumentes und reicht von H16-H22.

Der erste Block enthält lediglich eine Haupt-Überschrift (Zeile H10). Der zweite Block enthält zwei Links (H13 und H14). Der dritte Block enthält wieder eine Überschrift (H17) sowie einen Absatz (H18-H21). Dieser letzte Absatz enthält wiederum einen Link (H20).

Was ist zu tun:

Kopieren Sie die Datei index.html und geben Sie der Kopie einen neuen Namen, z.B. versuch.html. Bearbeiten Sie diese neue Datei (rechte Maustaste und “Öffnen mit Editor” oder verwenden Sie phase5). Ändern Sie im Kopf das Vorkommen von stylesheet.css in versuch.css. Wenn Sie die HTML-Datei jetzt im Web-Browser betrachten, sollte sie schwarz-weiß, ohne besondere Formatierungen angezeigt werden (etwa so).

Überlegen Sie, ob die verwendete Unterteilung in Haupt-, Unter-Überschriften und Absätze sinnvoll ist.

Im nächsten Schritt kommen die passenden Format-Anweisungen hinzu. Erstellen Sie dazu ein neues leeres Textdokument und geben Sie diesem den Namen versuch.css (selber Name wie oben). Öffnen Sie parallel die beiden Dateien stylesheet.css und versuch.css im Editor oder in phase5.

Nun markieren Sie die erste Zeile in stylesheet.css und kopieren diese in das momentan noch leere Dokument versuch.css. Speichern Sie die Änderung und sehen Sie sich das HTML-Dokument versuch.html an (nicht vergessen, im Web-Browser “Aktualisieren” zu drücken). Wiederholen Sie dies für jede Zeile der Stylesheet-Datei. Beobachten Sie jeweils, was sich in der Darstellung der HTML-Seite ändert.

 S1 body
 S2 {
 S3   background-color: rgb(100%, 80%, 0%);
 S4   background-image: url(klecks.png);
 S5   font-family: Verdana;
 S6 }
 S7 #titel
 S8 {
 S9   background-color: rgb(0%, 25%, 65%);
S10   background-image: url(risskante.png);
S11   background-repeat: no-repeat;
S12   padding: 0.5em;
S13 }
S14 #titel h1
S15 {
S16   font-family: Georgia;
S17   margin: 0;
S18 }
S19 #menue
S20 {
S21   width: 10em;
S22   float: right;
S23   margin-left: 2em;
S24   margin-bottom: 1em;
S25 }
S26 #menue a
S27 {
S28   color: rgb(100%, 80%, 0%);
S29   font-weight: bold;
S30   text-decoration: none;
S31   display: block;
S32 }
S33 #menue a:hover
S34 {
S35   background-color: blue;
S36 }
S37 #inhalt
S38 {
S39   background-color: white;
S40   border: 2px solid rgb(75%, 60%, 0%);
S41   padding: 1em;
S42   margin-top: 1em;
S43 }
S44 h1
S45 {
S46   color: rgb(0%, 25%, 65%);
S47 }
S48 em
S49 {
S50   color: red;
S51 }
S52 img
S53 {
S54   border: 1px solid black;
S55 }

Erläuterungen:

Die Formatanweisungen sind blockweise zu lesen, wobei ein Block immer mit einem sogenannten Selektor (z.B. Zeile S1) beginnt und dann in Klammern (S2-S6) eine Reihe von zugehörigen Formatierungs-Eigenschaften (S3-S5) auflistet. Der Selektor bezeichnet das oder die HTML-Elemente, auf die sich die nachfolgenden Formatanweisungen auswirken sollen. Ein Selektor besteht im einfachsten Fall aus dem Namen des zugehörigen HTML-Elements, er kann aber auch komplizierter sein.

Verwendet man als Selektor den Namen des HTML-Elements body, so wirken sich die nachfolgenden Angaben auf das gesamte Dokument aus. Dies ist sehr gut geeignet, um z.B. eine Standard-Schriftart (Zeile S5) festzulegen oder eine dokumentenweite Hintergrundfarbe (S3) zu bestimmen. Anstatt einer Hintergrundfarbe kann auch eine Bilddatei angegeben werden (S4), die dann als sogenannte Kachel immer wiederholt wird und so den Hintergrund füllt.

Die drei im HTML-Dokument mit den Angaben id="titel" usw. unterscheidbar gemachten Blöcke werden innerhalb der Stylesheets mit einem führenden Rautezeichen selektiert. Der Selektor in Zeile S7 bezeichnet beispielsweise das HTML-Element in Zeile H9, die Angaben S9-S12 wirken sich also auf den Block H9-H11 aus.

Auch hier kommt wieder eine Hintergrundgrafik vor (S10), allerdings soll sich diese nicht wiederholen (S11). Die Angabe für den Innenabstand (S12) sorgt dafür, dass Hintergrundfarbe (S9) und Grafik (S10) nicht bündig mit den Buchstaben des Titels abschließen, sondern einen kleinen Abstand von diesen wahren. Als Maßeinheit wird hier em verwendet, das für “bezogen auf die Schriftgröße” steht. Sprich: 1em entspricht etwa einer Zeilenhöhe. (Nicht zu verwechseln mit dem HTML-Element <em>, das für emphatisch = hervorgehoben steht.)

Bis hier sollte Ihr Dokument etwa so aussehen.

In Zeile S14 werden zwei Selektoren zu einem kombiniert: Gemein sind nur diejenigen Überschriften 1. Ordnung, die sich innerhalb des Titel-Blockes befinden, also innerhalb von H9-H11. Diese Überschrift (es gibt dort nur eine) erhält eine vom restlichen Dokument verschiedene Schriftart. Außerdem wird sie aller ihrer Außenabstände beraubt. Auf diese Weise kann diese Überschrift bündig an das nachfolgende Menü anschließen.

Der Block mit dem Menü (H12-H15) wird auf eine definierte Breite verkleinert und rechtsbündig ausgerichtet. Anstelle der Eigenschaft text-align: right; kommt jedoch float: right; zum Einsatz (Zeile S22). Grundsätzlich bewirken beide das Selbe, letzteres sorgt jedoch dafür, dass die nach dem Menü folgenden Elemente des Inhalt-Blockes nicht unter sondern links neben das menü platziert werden. Der Inhalt “umfließt” das Menü.

Die bis jetzt in einer Zeile stehenden Links innerhalb des Menüs werden in Blockelemente umgeformt (S31), was den in diesem Fall gewollten Effekt hat, dass jeder Link in einer eigenen Zeile dargestellt wird. Außerdem werden diese Menü-Links ihrer Unterstreichung beraubt (S30). Eine zusätzliche Angabe sorgt unter Verwendung der sogenannten “Pseudoklasse” :hover dafür, dass die Menü-Punkte beim Überfahren mit dem Mauszeiger aufleuchten (S33-S36).

In den Zeilen S44-S55 folgen Formatanweisungen, die sich wieder auf allgemeine HTML-Elemente beziehen, unabhängig vom sie eventuell umgebenden Block. So erhalten in Zeile S52-S55 alle mittels <img …> in den Inhalt eingebundenen Bilder eine dünne durchgezogene Rahmenlinie.

Zu beachten ist, dass sich die Selektoren S44 und S14 unter Umständen überschneiden können, da sich die zu S44 gehörenden Angaben auch auf den mit S14 selektierten Block auswirken, nicht jedoch umgekehrt.

Das vollständige Beispiel sollte jetzt etwa so aussehen.

Bei Fragen oder Problemen zögern Sie bitte nicht, die Kommentarfunktion hier zu benutzen! (E-Mail und URI sind freiwillige Angaben.)

Kommentare

Noch keine Beiträge.

Einen Kommentar abgeben

Sorry, das Kommentarformular ist derzeit abgeschaltet.

Powered by WordPress