Erstellung einer kleinen Homepage mit mehreren Unterseiten
II. HTML & CSS
5. Die HTML Datei
Wecheln Sie zu Weaverslave und zu der Datei 'index.html.
Das Programm hat die nötige Grundstruktur schon vogegeben:
- Der Dokumententyp steht ganz vorne und sollte nicht ohne weiteres verändert werden. Der "doctype" ist für jede Internetseite erforderlich und bestimmt, wie der Browser die Seite einliest.
- Die Anfangs- und Endtags <....> bzw. <...../> für die ganze Seite <html> , für den Seitenkopf <head> und den Inhaltsbereich <body> sind schon eingetragen
Ändern Sie die Datei wie auf Abb.4 und tragen Sie auch die Kommentare zwischen <!-- und --> ein. Diese dienen zur Übersicht bei größeren Seiten
Abb. 4 (zum Vergrößern anklicken)
Sie werden feststellen, daß sich das Programm recht kooperativ verhält. So werden die erwarteten End-Tags schon eingefügt, die Umlaute automatisch in browser-lesbare Zeichen umgesetzt und die Box auf der rechten Seite wird sich bei längerer Benutzung auch als recht hilfreich erweisen.
HTML-Tags werden auf so unendlich vielen Seiten erklärt, daß ich das nicht wiederholen möchte, legen Sie besser ein Lesezeichen für die Standardrefenz an:
link
SELFHTML
Speichern Sie die html-Datei und wechseln Sie jetzt zum Browser. Aktualisieren Sie [F5] und Sie sehen das Ergebnis an (Abb.5).
Abb. 5 (zum Vergrößern anklicken)
Noch nicht sehr beeindruckend, aber Sie sehen schon, wie die Tags den Inhalt beschreiben und wie das <title>-Tag in der Titelzeile des Browsers übernommen wurde.
6. Wieso eigentlich HTML und CSS?
Vor der Einführung von CSS (Cascading Style Sheets - ungefähr: von oben her vererbende Stilbeschreibungen) waren Stilbeschreibungen wie z.B. Maße, Farben, Randlinien, Hintergründe usw. alle im HTML-Code integriert.
Das machte den Code sehr unübersichtlich, aufgebläht und äusserst schwer zu bearbeiten. Durch die Trennung des Inhaltes (HTML) und des Aussehens (CSS) kann beides getrennt bearbeitet werden. Das hat enorme Vorteile bei der Aktualisierung der Texte und ermöglicht es außerdem Suchmaschinen, den gesamten Inhalt einer Website zu lesen und sie deshalb besser auffindbar zu machen.
7. Die CSS Datei
Wechseln Sie jetzt wieder zum Explorer, klicken rechts auf die Datei 'stylesheet.css', öffnen sie mit TopStyle Lite und ändern Sie die leere Datei wie in Abb. 5.
Abb. 6 (zum Vergrößern anklicken)
Tipp: Tragen Sie auch im Stylesheet gleich Kommentarzeilen mit ein und gliedern Sie damit die Datei !
Wie Sie sehen, hilft auch dieses Programm ein wenig beim Code. Der CSS-Code ist absolut unterschiedlich zu HTML, auch wenn beide zusammen den gleichen Inhalt beschreiben. Das HTML-body-Tag in Spitzklammern beschreibt den Inhalt der Seite und der CSS-Bezeichner "body {.......} beschreibt das Aussehen der Seite, in diesem Fall einen hellblauen Hintergrund.
Auch für CSS gibt es zahlreiche Hilfeseiten, ich empfehle die Standardseite
link
CSS4YOU
und noch eine gute Schweizer Seite
als Lesezeichen zu markieren.
Speichern Sie die Datei, wechseln Sie zum Browser und aktualisieren Sie [F5].
Bevor der Browser Änderungen anzeigt, müssen die Dateien immer erst abgespeichert sein. Kontrollieren Sie deshalb lieber nach jeder größeren Veränderung, bevor Sie zuviel wieder rückgängig machen müssen.
Aber bis jetzt hat sich noch nichts verändert, denn der Browser hat nur die Datei 'index.html' gelesen und weiß nichts von der 'stylesheet.css'.
8. Einbinden des Stylesheets
Wechseln Sie jetzt wieder zu Weaverslave und fügen Sie folgende Zeile in den "head" Bereich ein:
Abb. 7 (zum Vergrößern anklicken)
Damit haben Sie einen Art Hyperlink <href> erzeugt, der die CSS-Datei einliest, bevor der HTML Code dazukommt. Hyperlinks und Hybertext sind die wichtigsten Merkmale von HTML. Hyperlinks verweisen auf andere Dateien. Mit dem kleinen Befehl <a href>...</a> (und seinen entsprechenden Parametern) verlinken Sie nicht nur innerhalb der Seitenstruktur Ihrer Homepage, sondern auch zu jeder anderen Adresse im Internet.
Speichern Sie die Datei, wechseln Sie zum Browser und aktualisieren Sie [F5]. Der Hintergrund sollte jetzt hellblau sein.
9. Aufteilung in Bereiche
CSS beschreibt einzelne "Kästen" (Boxes) auf der Seite, wobei immer nur ein Kasten oder mehrere Kästen in einem anderen Kasten sein können. Nie können zwei Kästen nebeneinander stehen, da dann keine logische Zuordnung mehr erfolgen kann. Diese Kästen können entweder sogenannte inline-Elemente wie Überschriften und Absätze oder block-Elemente wie Aufzählungen, Listen oder div (von division=Bereich) -Elemente sein. In HTML werden diese Elemente so verschachtelt, daß immer ein div - Bereich innerhalb eines anderen steht. Durch Parameter wie "float: right" bzw. "float: left" wird dann erreicht, daß der Bereich in die rechte bzw. linke obere Ecke des ihn umgebenden Kastens rutscht. Zusätzlich können den Bereichen noch Parameter wie "width" (Breite)und viele anderen Eigenschaften zugewiesen werden.
Wechseln Sie wieder zu Weaverslave und tragen Sie die beiden neuen Zeilen ein:
Abb. 8 (zum Vergrößern anklicken)
Damit fügen Sie in das body-Element einen weiteren Bereich ein und nennen ihn "id(identifier)=container". Allerdings muß der Bereich noch beschrieben werden. Dazu wechlseln Sie wieder zu TopStyle und tragen folgende Definition ein:
Tipp: Probieren Sie dabei das Drop-Down Menü aus. Mit ein bißchen Gewöhnung können Sie sich Ihr CSS zusammenklicken, auch wenn die Gratisversion nicht komplett ist.
Abb. 9 (zum Vergrößern anklicken)
Schauen Sie sich das Ergebnis an.
Das war ja schon ein wenig CSS. Achten Sie, wie auch bei HTML, unbedingt auf die richtige Syntax. Ein fehlendes Komma oder eine falsch gesetzte geschweifte Klammer läßt Ihr Design vollkommen aus den Fugen geraten und die Fehlersuche ist bei größeren Seiten oft nervig und kann lange dauern. Für ein besseres Verständnis und genaue Erklärungen der Syntax lohnt sich ein Lesezeichen für diese Seite:
link
CSS - Tutorial
Tragen Sie jetzt in Weaverslave einen Inhalts- und einen Fußbereich ein:
Abb. 10 (zum Vergrößern anklicken)
In TopStyle sehen die Ergänzungen so aus:
Abb. 11 (zum Vergrößern anklicken)
Soviel bis hier: Sie haben jetzt einen zentrierten Bereich mit einer Breite vonn 780 Pixel definiert (die Höhe ergibt sich aus dem Inhalt). Die Ränder links und rechts definiert der Browser automatisch, um den Container auf dem Bildschirm (die Bildschirmauflösung beim Betrachter ist ja nicht bekannt) mittig zu platzieren. Außerdem soll der Hintergrund dieses Bereiches grau sein.
Im unteren Rand (Fußbereich) soll eventuell enthaltener Text mittig angeordnet sein.
Die Reihenfolge der Anweisungen ist dabei völlig egal, wie überhaut die Reihenfolge aller Definitions in der CSS-Datei nicht vorgegeben ist. Es kann aber hilfreich sein, sich eine eigene Ordnung anzugewöhnen und Abschnitte zu kommentieren.
Wenn keine Parameter für einen Bereich definiert werden, werden die vorher im Stylesheet angegebenen Werte oder die Standardeinstellungen verwendet.
10. Ein Bild einfügen
Löschen Sie die Zeile "Meine Homepage" und tragen Sie ein:
Abb. 12 (zum Vergrößern anklicken)
Der Kopfbereich im CSS:
Abb. 13 (zum Vergrößern anklicken)
Ändern Sie im Stylesheet noch die Hintergrundfarbe für "#kopfbereich" und "#fussbereich" auf blau, zusätzlich noch die Schriftfarbe "color" im Fuß auf gelb. Weitere Anpassungen sind nicht nötig, da Bilder in CSS sowieso nur eingschränkt definierbar sind. Die Bildgröße muß immer im HTML-Code stehen, das Attribut "alt" benennt das Bild und sollte laut HTML-Regeln immer mitnotiert werden.
Schauen Sie sich jetzt das vorläufige Ergebnis an. Achten dabei Sie auf den Rand um das Logo, welcher durch die 10px "padding" bestimmt wird. Padding, margin, border und content sind Teile des Box-Moelles, welches in CSS von entscheidender Bedeutung ist. Ausserdem stehen der Inhalts- und der Fußbereich noch nebeneinander. Das wird später im CSS noch geregelt.
Bevor Sie fortfahren, sollten Sie sich das
link
Box - Modell
etwas näher anschauen.
