Tutorials HTML / CSS

1. Nörgel, Nörgel

Viele selbsternannte und auch echte Experten werden nach Durchsicht der Tutorials sagen, dass man das auch gaaaanz anders machen kann. Auf die Meinung der "Selbsternannten" sch*** ich, aber die wirklichen Profis liegen mit ihrer Meinung goldrichtig. Es existieren tatsächlich viele Möglichkeiten, Internetseiten aufzubauen.

Geschmäcker

... sind nun mal verschieden. Jeder entwickelt im Laufe der Zeit seinen eigenen und persönlichen Stil. In den folgenden Tutorials werdet ihr den Meinigen kennen lernen, den ich in den letzten vier bis fünf Jahren entwickelt habe.

"Kreative"

Bei dieser Spezies handelt es sich um einen ganz besonderen Typus von Mensch. Sie führen den lieben langen Tag ihr Maus spazieren, klicken wie wild in ihren "Kreativ"-Programmen herum und sind immer für eine Überraschung gut. Letzteres bedeutet leider Folgendes:

"Also, das müssen wir jetzt gaaaanz anders machen. Ich habe da eine gaaanz tolle Idee. Macht das doch so und so und so" [Quelle: "Kreative", mögen sie in der Hölle schmoren]

Also machen wir das so und so und so. Und wir jammern, schimpfen, und verfluchen den Tag unserer Geburt, weil wir wieder mal alles komplett umschreiben müssen. Wer so etwas einmal mitgemacht hat, versucht beim nächsten Mal anders an einen Internetauftritt heranzugehen.

2. Stile

Mein Stil

Wie ihr bald merken werdet, zerstückel ich Internetseiten in mehrere Abschnitte, die ich in einzelnen <div>-Elementen unterbringe. Das ist meine Art, mit der Sprunghaftigkeit unserer "Kreativen" umzugehen, und so möglichst flexibel zu bleiben. Im Moment arbeite ich gerade an einem CSS-Core, der auf YAML basiert. Wenn ich damit fertig bin, werde ich es euch irgendwann mal vorstellen. Wird sicher recht interessant.

Eurer Stil

Den werdet ihr sicher bald selber finden. Übernehmt aber bitte nicht kritiklos das, was andere vormachen (meine Wenigkeit eingeschlossen). Steht dem, was man euch erzählt, sehr skeptisch gegenüber und fragt euch immer, ob das sinnvoll ist (und nicht, ob das Sinn macht). Ich selber habe zu Beginn meiner CSS-Karriere viel Zeit damit verschwendet, mich durch irgendwelche Tutorials und Anleitungen zu kämpfen, bis ich eingesehen habe, dass das doch ziemlicher Müll und wenig praktikabel ist.

4. Vorgehensweise

Auch hier scheiden sich mal wieder die Geister. Es gibt Leute, die erst eine Seite in HTML aufbauen und dann die CSS-Formatierungen vornehmen. Das ist auch in Ordnung, wenn man schon entsprechende Inhalte hat. Allerdings habe ich oft die leidvolle Erfahrung gemacht, dass zum Beispiel Texte oder Bilder von Kunden erst peu à peu nachgeliefert werden, so dass man sich vorerst mit Dummies begnügen muss. Daher baue ich meine Seiten immer Stück für Stück auf, also meinetwegen erst die Hauptnavigation, dann die jeweiligen Unterpunkte, danach die Bilder und Texte.

5. Tipps

Kopiert euch den Quellcode nicht einfach in den Editor eurer Wahl hinein und hofft, dass alles klappt. Nein, spielt damit herum, ändert die Werte oder kommentiert auch ruhig mal diverse Zeilen aus. Dann werdet ihr relativ schnell lernen, was nun was bewirkt, und wann man es wo einsetzen sollte.

6. Browser

Ich habe die Tutorials mit den folgenden Browsern getestet. Wer sich unbedingt Ärger einhandeln möchte, sollte auch noch andere hinzuziehen (*grins).

• 6.0, 7.0, 8.0
• 2.0, 3.0, 3.5
• 9.0, 9.6, 10.1
• 3.1, 4.0

7. Anregungen

Für den höchst unwahrscheinlichen Fall, dass ihr mit meinen Tutorials nicht klarkommt (bitte erst alle durcharbeiten und dann rumnörgeln), schickt mir bitte ein Mail mit der Angabe der Gründe. Ich werde mich beizeiten dessen annehmen.

8. Übersicht

Bugs & Hacks

Eine kleine Liste von Darstellungsfehlern, die insbesondere der Internet Explorer 6 produziert. Diese Liste wird peu à peu ergänzt.

Floaten

Eine Einführung, wie man Blockelemente nebeneinander platzieren kann, ohne auf so krude Methoden wie position: absolute zurückgreifen zu müssen. Bitte lesen, das ist sehr wichtig!

Praxistutorial 1

Ein einfaches und leichtes Beispiel, wie man ein HTML-Dokument auch ohne Layout-Tabellen nur unter Verwendung von Cascading Style Sheets aufbaut.

Praxistutorial 2

Dies baut auf dem ersten auf. Allerdings ist der Schweregrad ein wenig höher und man muss nun einige Dinge ohne mein Zutun selber erledigen. Hier geht es vor allem um sauber ausgezeichnete Selektoren und deren Möglichkeiten.

Praxistutorial 3

Hier wollen wir uns mal ein wenig mit dem korrekten Aufbau von Formularen beschäftigen. Dabei geht es besonders um syntaktische Feinheiten, die uns Formulare bieten, aber offenbar immer noch nicht alle kennen.

Praxistutorial 4

Nachdem ihr im dritten Tutorial gelernt habt, wie man ein Formular korrekt aufbaut, zeige ich euch hier, wie man es per CSS formatieren kann. Dabei gehe ich besonders auf die unterschiedliche Darstellungsweise diverser Browser ein. Ich werde euch zeigen, wer was wie macht und welche Möglichkeiten es gibt, das zu unterbinden. Oder auch nicht.