HTML / CSS - Praxistutorial 1 - Überblick

1. Die Abschnitte

• Überblick
• Basisdefinitionen
• Aufbau
• Hauptmenü
• Untermenü
• Inhalt
• Zusatzinfos

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

Nun jetzt geht es endlich los. Ich hoffe, ihr habt euch intensiv mit der Theorie auseinandergesetzt, denn die elementaren Grundlagen werde ich hier nicht mehr erläutern! Daher empfehle ich allen, die direkt hier gelandet sind, erst mal die Punkte HTML und CSS durchzuarbeiten.

Um euch den ersten Einstieg zu erleichtern, habe ich den Schweregrad dieses Tutorials bewusst niedrig gehalten. Richtig schwierig wird es beim zweiten. Darum werde ich auf einige Dinge verzichten, mit denen ich sonst immer arbeite.

4. Der Quellcode

Da vorformatierter Quellcode mittels <pre> nicht automatisch umbricht, musste ich das manuell machen. Als Maßstab habe ich eine Auflösung von 1024x768 genommen. Der Code wirkt daher ziemlich gestaucht, ihr solltet den einen oder anderen Teil per Hand euren Wünschen entsprechend umformatieren.

5. Das Thema

Da mir trotz längeren Überlegens nichts Vernünftiges eingefallen ist, bauen wir uns einfach mal eine Seite über ein paar Mauerreste. Dieses Steingerümpel steht am Loch Ness (ich weiß, da wo das dumme Monster sein Unwesen treibt), und nennt sich Urquhart Castle (ausgesprochen Örkwart), eine Burg, die Ende des 17. Jahrhunderts zerstört wurde.

6. Die Daten

Den Basiscode und die komplette Lösung für dieses Tutorial findet ihr rechts unter dem Punkt "Daten".

Folgende Dateien und Ordner müssen, wie unten beschrieben, vorhanden sein:

Struktur

• index.htm (Diese Datei benötigen wir nur als Einstieg, um zur eigentlichen Seite zu verlinken)
• styles.css (hier sammeln wir unsere StyleSheet-Anweisungen)
• site (Ordner)
  • schloesser (Ordner)
    • urquhart.htm (diese Datei wollen wir bearbeiten)
• pics (Ordner)
  • schloesser(Ordner)
    • head_urquhart.jpg (Schmuckbild für den oberen Bereich)
    • urquhart.jpg (Schmuckbild im Fließtext)
    • loch_ness.jpg (Schmuckbild im Fließtext)
  • menue (Ordner)
    • marker.gif (Navigationselement)

So jetzt öffnet die Dateien styles.css bzw. site/schloesser/urquhart.htm mit dem Editor eurer Wahl und dann legen wir los. Bitte vergesst aber nicht, nach jeder Änderung eurer Dateien neu abzuspeichern, und den "Aktualisieren"-Button im Browser zu benutzen (oder F5)!

weiter zum nächsten Abschnitt