Print
Mittwoch, 6. Juni 2007 |

Baue dein Layout mit XHTML und CSS

Welche Arten zur Formatierung gibt es?



Formatierung wird über zwei Arten vorgenommen: Durch spezielle Tags und über ein Style Sheet.

Obwohl die Formatierung über Tags auch komplett durch Style Sheets ersetzt werden könnte, macht ihre Verwendung auch weiterhin Sinn, da sie nicht zuletzt für die Strukturierung des Textes verantwortlich sind und auch Suchmaschinen helfen, den Text zuzuordnen.

Formatierung über Tags



Wir wenden uns zuerst der Formatierung über Tags zu. Sie vorzunehmen ist einfach.
In diesem Teil wollen wir eine Haupt-Überschrift auf unserer Seite, einen fett geschriebenen Text, einen kursiven Text und zwar in verschiedenen Paragraphen und für jeden dieser beiden Texte noch eine "Unterüberschrift".

Fange wir vorne an: Öffne wieder die Datei aus dem ersten Teil dieses Tutorials.

Erstellen einer Überschrift

 

Eine Überschrift besteht aus einem h und einem index (1 bis 6). Desto niedriger die Zahl, desto höher der "Wert" der Überschrift.
Jeder Browser erkennt dieses Element, und formatiert ihn anders als den normalen Text. Versuchen wir es. Fügen wir über unserem "HALLO WELT!!" Text noch eine Überschrift ein


<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
        <title>Meine erste Seite</title>
    </head>
    <body>
        <h1>Meine erste Seite</h1>
        HALLO WELT!!!
    </body>
</html>

 

Speichere die Datei wieder, und öffne sie in deinem Browser. Über dem "HALLO WELT!!" steht viel größer "Meine erste Seite".
Wenden wir uns unseren Unterpunkten auf der Seite zu, dem fetten und den Kursiven Text.

Div's, Paragraphs und einfache Formatierung

Wir werden jetzt auch zum ersten Mal Elemente zur Strukturierung unserer XHTML Datei verwenden.
Dabei verwenden wir <div></div> elemente um zusammengehörige Gebiete zusammenzufassen, und <p></p> Elemente um einen Paragraphen darzustellen.

Fangen wir mit dem dicken Text an. Um Text dick darzustellen reicht es aus, ihn in ein <b></b> Element zu stecken. Fügen wir noch eine Überschrift dazu, um dem Benutzer zu sagen was er hier sieht.

Erstellen wir also folgendes Fragment:


    <div>
        <h2>Dicker Text</h2>
        <p>
            Der folgende Text ist dick: <b>Dicker Text</b>
        </p>
    </div>

 

Dasselbe machen wir für den kursiven Text:


    <div>
        <h2>Kursiver Text</h2>
        <p>
            Der folgende Text ist kursiv: <i>Kursiver Text</i>
        </p>
    </div>

 

Füge die beiden Teile untereinander in unsere Datei ein und speicher sie. Die Datei sollte nun etwa so aussehen:


<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
        <title>Meine erste Seite</title>
    </head>
    <body>
        <h1>Meine erste Seite</h1>

        <div>
            <h2>Dicker Text</h2>
            <p>
                Der folgende Text ist dick: <b>Dicker Text</b>
            </p>
        </div>

        <div>
            <h2>Kursiver Text</h2>
            <p>
                Der folgende Text ist kursiv: <i>Kursiver Text</i>
            </p>
        </div>

        HALLO WELT!!!
    </body>
</html>

 

Wenn du die Datei im Browser öffnest sollte sie in etwa so aussehen:

Abbildung 1

 

Das ist zwar ein Anfang, aber noch weit weg von dem, was man im Internet bewundern kann. Es fehlen Farben, alles ist untereinander...
Aber all das können wir mit einem ungeheuer mächtigem Hilfsmittel nachliefern:

Formatierung über Stylesheets

 

Das, was man im XHTML file macht ist der Inhalt. Das eigentliche Design wird in einem externen File beschrieben, dem sogenannten Stylesheet.
Ein Stylesheet zu erstellen funktioniert ähnlich wie das erstellen einer XHTML Datei: Öffne deinen Texteditor und speichere das leere File als style.css in denselben Ordner wie deine XHTML Datei. Wichtig ist die Endung - css. Sie sagt aus, dass es sich um ein Cascading Style Sheet handelt.

Zuerst bereiten wir jetzt unser XHTML Dokument vor, sodass es das Style Sheet auch verwendet. Das wird über ein <link /> Element im Kopf der XHTML Datei erledigt.

Das link Element benötigt hier drei Attribute:
    rel="stylesheet" - Erklärt den Bezug des links zu der Datei
    type="text/css" - Legt den Typ des Links fest
    href="style.css" - Sagt wo das Stylesheet zu finden ist.

Der Kopf unserer XHTML Datei sieht nun also so aus:


    <head>
        <title>Meine erste Seite</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

 

Wenn wir das XHTML file öffnen sieht alles weiterhin aus wie immer. Das liegt daran, dass wir im Stylesheet noch nichts definiert haben. Damit beginnen wir jetzt.

StyleSheet Syntax

 

Ein Stylesheet besteht aus sogenannten Selektoren, die folgendermaßen gegliedert sind:


Selektor { Eigenschaft-A: Wert-A; Eigenschaft-B: Wert-B; }



Der Selektor ist entweder der Name eines XHTML Elements, der Name einer Klasse mit einem zusätzlichen Punkt am Anfang oder eine Id mit einer Raute (#) am Anfang.

Der Name eines XHTML Elements ist zum Beispiel body oder div. Klassen und Ids sind Attribute eines Elements. So kann ein div-Element zum Beispiel folgendermaßen aussehen:


    <div id="mydiv" class="myclass">text</div>

 Im Stylesheet kann ich jetzt dieses Div alternativ mit einer der Drei folgenden CSS Selektoren ansprechen:


    div { }
    .myclass { }
    #mydiv { }

 

Der Unterschied zwischen den drei Möglichkeiten ist:

  • Spreche ich ein Element an, gilt das immer für ALLE diese Elemente
  • Die Id ist "unique" - das heißt es darf nur ein Element mit dieser ID auf der XHTML Seite existieren. Ich spreche also nur dieses Element an.
  • Class kann von mehreren Elementen verwendet werden. Außerdem kann ein Element mehrere Klassen verwenden. Das macht man mittels eines leerzeichens zwischen den Klassen




    <div class="class1 class2">text</div>


Ein div das mehrere Klassen verwendet.

Öffne nun dein StyleSheet und füge folgende Zeilen hinzu:


    body
    {
        background-color: blue;
    }

 Wir wenden den Style auf das Body element an - damit gilt diese Eigenschaft für die ganze Seite. Als Eigenschaft wollen wir die Hintergrundfarbe (background-color) ändern. Als Wert nehmen wir "blue", also blau.

Speichere die Datei und öffne deine XHTML Datei im Browser. Wenn sie gleich aussieht wie vorher drücke "F5" (oder "STRG+F5") um die Seite neu zu laden.
Der Hintergrund sollte jetzt Blau sein.

Als nächstes wollen für unsere Div's einen weißen Hintergrund, und für unsere Überschrift eine weiße Schrift, damit man sie besser lesen kann.

Die Eigenschaft für die Schriftfarbe heißt color.


    body
    {
        background-color: blue;
    }
    h1
    {
        color: white;
    }
    div
    {
        background-color: white;
    }

 Bei den div's sehen wir nun zwei dinge:
    a.) Das div geht über die gesamte Länge des Bildschirms.
    b.) Die Schrift klebt am Rand.

Beides ändern wir nun. Die Länge wird über die Eigenschaft width definiert, der Abstand der Schrift vom Rand über padding.
Außerdem wollen wir das div im Vergleich zur Überschrift etwas eingerückt haben. Das machen wir über die Eigenschaft margin. Sie definiert den Abstand des Elementes vom Rand.

Weil das Blau sehr intensiv ist, wählen wir einen anderen Farbton aus dem RGB-Farbraum.
Zum Beispiel ein Gray mit dem Wert: #363636


    body
    {
        background-color: #363636;
    }
    h1
    {
        color: white;
    }
    div
    {
        background-color: white;
        width: 200px;
        padding: 5px;
        marging: 10px;
    }

Speichere das StyleSheet und öffne die XHTML Datei in deinem Browser.
Sie sollte nun folgendermaßen aussehen:

Abbildung 2

 

Nun fügen wir noch ein Bild oben in die Seite ein. Das wäre der Platz, an dem sonst dein Logo sitzen würde.

Öffne die XHTML Datei und füge die fett angezeigte Zeile ein:


<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
        <title>Meine erste Seite</title>
    </head>
    <body>

        <div id="header"></div>

        <h1>Meine erste Seite</h1>

        <div>
            <h2>Dicker Text</h2>
            <p>
                Der folgende Text ist dick: <b>Dicker Text</b>
            </p>
        </div>

        <div>
            <h2>Kursiver Text</h2>
            <p>
                Der folgende Text ist kursiv: <i>Kursiver Text</i>
            </p>
        </div>

        HALLO WELT!!!
    </body>
</html>



Jetzt öffne das StyleSheet und füge die Id header hinzu.
Pass aber gut auf, denn wir haben ja bereits einige Eigenschaft für das div-Element festgelegt. Damit sie nicht auftreten, müssen wir sie mit neuen Werten überschreiben!

Ein Bild können wir mit der Eigenschaft background-image:url(dateiname) hinzufügen. Sollte das Bild zu klein sein, wird es automatisch wiederholt.
Verhindern kann man das mit der Eigenschaft background-repeat. Setzt man sie auf no-repeat findet keine Wiederholung statt.

Als Bild nehmen wir einen Banner von oesimania.de: http://oesimania.de/Fotos/HPs/banner004.jpg

Die Id im Stylesheet sieht jetzt folgendermaßen aus:


    #header
    {
        background-image: url(http://oesimania.de/Fotos/HPs/banner004.jpg);
        width: 468px;
        height: 60px;
        padding: 0px;
        margin: 0px;
    }


Die entgültige Seite sieht nun so aus:

Abbildung 3

 

Erfahre im nächsten Teil, wie du deiner Seite eine Navigation und andere Seiten hinzufügen kannst.