Hauptmenü

Untermenü

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 Jahren entwickelt habe.

"Kreative"

Bei dieser Spezies handelt es sich um einen ganz besonderen Typus von Mensch. Sie führen den lieben langen Tag ihre 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. Euren Stil

... werdet ihr sicher sehr schnell 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 die doch ziemlicher Müll und wenig praktikabel sind.

3. 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.

4. 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.

5. Anregungen

Für den höchst unwahrscheinlichen Fall [Ironiemodus aus], 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.

6. Ein Hinweis zu den Browsern

Versionen

Da ich meinen Auftritt noch mal komplett überarbeitet habe, beziehen sich alle Angaben zu den Browserversionen auf den Zeitpunkt, wo ich die Tutorials noch mal durchgegangen bin.

7. Übersicht

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!

Fehlersuche

An dieser Stelle zeige ich euch, wie man sich mit Entwicklertools die Arbeit ganz erheblich erleichtern kann. Da aber jeder Browser sein eigenes Werkzeug dafür bereits stellt, konzentriere ich mich hier nur auf Firebug, da die anderen ähnlich funktionieren.

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.