HTML / CSS - Praxistutorial 2 - Überblick
1. Die Abschnitte
2. Browser
Das folgende Tutorial wurde mit den folgenden Browsern getestet.
Firefox 26.0
Google Chrome 32.0
Internet Explorer 8.0 - 11.0
Opera 19.0
Safari 5.0
3. Einführung
Im ersten Tutorial habe ich euch gezeigt wie man es machen kann. Nun erfahrt ihr, wie man es besser machen kann. Wir bauen dieselbe Seite noch mal auf, aber diesmal etwas anders. Auch erwarte ich von euch, dass ihr bestimmte Dinge selber erledigt. Ich liefere diesmal nicht den kompletten Code.
4. Die Daten
Den Basiscode und die komplette Lösung für dieses Tutorial findet ihr rechts unter dem Punkt "Daten".
Struktur
Ist dieselbe, wie im ersten Tutorial, bis auf Folgendes.
-
css(Ordner)html.cssklassen.csslinks.cssrahmen.css
5. Häh???
Ja genau, häh! Diesmal ist ein Ordner namens css hinzugekommen, der verschiedene CSS-Dateien enthält. Warum mache
ich das? Nun, schaut euch mal die Stylesheet-Datei aus dem ersten Tutorial an. Über 200 Zeilen, alles nur kreuz und quer
verteilt, also Kraut-und-Rüben-Code. Bei größeren Projekten komme ich schon mal locker auf 1000 bis 2000 Zeilen (bei meiner Schreibweise)
und glaubt mir, wenn ihr da nicht von Anfang an Ordnung haltet, verliert ihr ganz schnell den Überblick.
6. Grundgerüst
Baut jetzt ein HTML-Basisgerüst wie im ersten Tutorial für die Seite urquhart.htm auf und nehmt als
Doctype-Defintionen XHTML 1.0 Transitional. Bindet den entsprechenden Zeichensatz ein und verlinkt wie
gehabt auf die styles.css. Achtet bitte auch auf die besondere Schreibweise von "singulären" Tags. Tipp:
/>.
styles.css
Bei der Theorie zu CSS habe ich unter dem Punkt Einbindung schon mal darauf hingewiesen,
dass man mit einer Stylesheet-Anweisung weitere CSS-Dateien einbinden kann. Und genau das machen wir jetzt hier. Tragt also
in die styles.css Folgendes ein.
/* allg. HTML-Elemente */
@import url(css/html.css);
/* Rahmen-Definitionen */
@import url(css/rahmen.css);
/* alle Link-Defintionen */
@import url(css/links.css);
/* spez. Klassen */
@import url(css/klassen.css);
Damit können wir nun unsere Anweisungen entsprechend ihres "Charakters" in unterschiedliche Dateien unterbringen und so den Überblick behalten.
html.css(alle Definitionen, die sich auf HTML-Tags beziehen)klassen.css(alle speziellen Klassen-Definitionen)links.css(alle Definitionen, die sich auf Links beziehen)rahmen.css(alle Definitionen für die grundsätzliche Unterteilung)
Eine Anmerkung
Performance-Fetischisten werden an dieser Stelle einwenden, dass man hier unnötige Anfragen an den Server schickt, weil man anstelle einer CSS-Datei auf einmal fünf abrufen muss. Das wirkt sich somit auf die Verarbeitungsgeschwindigkeit aus, die nicht optimal ist. Das mag ja wahr sein, aber man kann es auch übertreiben. Aber was ist wichtiger, übersichtlicher Code oder ein paar Zehntelsekunden Zeitgewinn? Das ist eine einfache Kosten-Nutzen-Rechnung. Hardware ist billig, ein Programmierer nicht. Einzige Ausnahme, ihr habt einen Auftritt mit so hohen Zugriffsraten, dass der Server in die Knie geht. In dem Fall sollte man wirklich tunlichst darauf achten, die Anzahl der Anfragen auf ein Minimum zu beschränken.
Ein Hinweis
Mittlerweile hört man auch immer wieder von Suchmaschinenbetreibern, dass diese Vorgehensweise (plus einige andere) zu einem besseren Ranking führen soll. Mein persönlicher Verdacht ist aber, dass die das nur machen, um ihren Traffic beim Crawlen zu reduzieren. Das spart Kosten, erhöht den Gewinn und die Aktionäre freuen sich. Ich selber habe mich bis jetzt nicht daran gehalten und mein Ranking wird trotzdem immer besser. Also drauf gesch***en.