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)!