Workshop HTML5 & CSS3 - Weblayouts professionell umsetzen - ein Einstieg in die Frontend-Entwicklung
von: Stephan Heller
dpunkt, 2012
ISBN: 9783864911965
Sprache: Deutsch
316 Seiten, Download: 42086 KB
Format: EPUB, PDF, auch als Online-Lesen
Mehr zum Inhalt
Workshop HTML5 & CSS3 - Weblayouts professionell umsetzen - ein Einstieg in die Frontend-Entwicklung
3 Grundlayout aufbauen
Abb. 3–1 In den nächsten drei Kapiteln wird erst das HTML-Grundgerüst und dann das Layout schrittweise aufgebaut.
In diesem Kapitel wird das HTML-Grundgerüst aufgebaut und die »Geometrie« des Layouts über CSS angelegt. In Zukunft müssen Sie nicht mehr jedes Mal die Seite von Grund auf neu aufbauen, sondern können mit einem Basispaket starten, wie es am Ende dieses Kapitels zur Verfügung steht.
Kapitel 3 Startpaket: www.h5c3.de/listing-3-1
HTML-Tag versus HTML-Element
Ein HTML-Tag bezeichnet das, was zwischen den spitzen Klammern <...> steht. Ein HTML-Element ist die komplette Einheit aus »öffnendem Tag«, »schließendem Tag« und dem, was dazwischen steht (Details dazu im Grundlagenteil Kapitel 24).
Diese beiden Begriffe werden im Alltag häufig synonym verwendet. Diese sprachliche Ungenauigkeit hat allerdings einen Grund: CSS-Anweisungen werden an den Elementnamen oder die Attribute innerhalb der HTML-Tags gekoppelt, bestimmen aber dann die Darstellung des ganzen HTML-Elements.
Im Workshop werden die Begrifflichkeiten so wie in der Entwicklersprache verwendet. Falls Sie im Workshop »Tag« lesen, ist zumeist das öffnende HTML-Tag gemeint. Falls Sie von umschließenden Tags lesen, sind sowohl öffnende als auch schließende Tags gemeint. Und an vielen Stellen sind die Begriffe auch austauschbar, ohne dass sich der Sinn verändert.
3.1 HTML-Grundgerüst anlegen
Grundgerüst anlegen und CSS-Einbindung testen
Zum Aufbau des HTML-Grundgerüsts wird die leere index.html geöffnet.
Das Grundgerüst im Detail finden Sie in Kapitel 24.6.
Mehr zu meta-Elementen
(Codezeile 4) finden Sie in
Kapitel 26.2.
Die erste Codezeile <!DOCTYPE html> definiert, dass das HTML nach Regeln von HTML5 aufgebaut ist. Das html-Element (Codezeile 2) wird als »Wurzelelement« der Webseite bezeichnet. Dieses hat zwei Unterelemente, sogenannte »Kindelemente«, nämlich head und body. Dieser Aufbau ist für alle Webseiten gleich.
Weitere Details zum »Verlinken« von
CSS-Dateien finden Sie in Kapitel 33.
Im head wird die CSS-Datei eingebunden (Codezeile 6). Vor dem Namen der Datei style.css sehen Sie die Pfadangabe _css, dies entspricht dem Ordnernamen in der Dateistruktur (siehe Abb. 2–1).
Was bei Pfadgaben zu beachten ist,
wird in Kapitel 24.5 beschrieben.
Details zum title-Element finden Sie im
Grundlagenteil in Kapitel 26.1.
Zusätzlich sehen Sie das title-Element (Codezeile 5). Dies ist eines der wichtigsten HTML-Elemente für die Suchmaschinenoptimierung. Im title steht das, was in der oberen Browserleiste beziehungsweise auf dem Tabreiter angezeigt wird, und sollte für jede einzelne HTML-Seite individuell und prägnant den Inhalt der Webseite wiedergeben.
Test auf korrekte Einbindung der CSS-Datei
Innerhalb des body-Elements sehen Sie eine Überschrift erster Ordnung h1 (Codezeile 9). In der CSS-Datei style.css wird eine einfache CSS-Regel definiert, welche den Text der h1 rot darstellen soll. Beides, sowohl die h1 im HTML- als auch die dazu passende Regel im CSS-Code, dient lediglich dem Test, ob die CSS-Datei richtig eingebunden ist.
Grundgerüst mit Test-CSS: www.h5c3.de/listing-3-2
Wenn Sie neu in die Thematik einsteigen, ist dies sicher ein spannender Moment. Rufen Sie die Seite im Browser auf. Wenn das »Hallo Welt« in Rot erscheint, ist das Grundgerüst korrekt angelegt und die CSS-Datei richtig verlinkt. Sowohl die h1 im HTML-Code als auch die h1-Testregel im CSS-Code können dann wieder gelöscht werden.
3.2 HTML-Seitengerüst aufbauen
Grundaufbau einer HTML-Datei: Kapitel 24.6
Aus der Struktur, die in Kapitel 2.3.1 ermittelt wurde, kann das Seitengerüst aufgebaut und damit die drei Grundelemente in das HTML eingefügt werden:
Struktur verfeinern
CSS kommt bislang noch nicht vor (mit Ausnahme der wieder gelöschten Testregel) – und das aus einem gutem Grund. Für das Grundgerüst ist eine schlüssige HTML-Struktur wichtig, die optische Darstellung spielt zu diesem Zeitpunkt dagegen noch keine Rolle und soll nicht von dem eigentlichen strukturellen Aufbau ablenken.
Auch die im zweiten Schritt ermittelte, etwas detailliertere Struktur kann bereits ins HTML übertragen werden. Ein horizontaler Block wird dabei jeweils von einem div umgeben, Grafiken werden mit einem Text symbolisiert, Navigationselemente können mit dem neuen HTML5-Tag nav ausgezeichnet werden und bekommen damit bereits eine »Rolle« in HTML zugewiesen. Alle weiteren Elemente, die weder Navigationsbereich noch Grafik sind, werden ebenfalls mit einem div umschlossen:
Abb. 3–2 Verschiedene Navigationsstrukturen
Um mit klaren Begrifflichkeiten weiterzuarbeiten, werden die Navigationsstrukturen benannt. Dabei stellen die roten Navigationsleisten in Abb. 3–2 oben (1) und unten (2) übergreifende Navigationselemente dar und werden als Metanavigation bezeichnet. Die Navigation links oben (3) entspricht der Hauptnavigation, die je nach Unterseite um eine Unternavigation (4) erweitert wird – in der Praxis ist hier der Begriff »Subnavigation« gebräuchlich.
Grundlegendes zu id und class ist in Kapitel 35 beschrieben.
Der nächste Schritt ist auf den ersten Blick nicht intuitiv, wird sich jedoch im weiteren Verlauf des Workshops klären. Das Grundgerüst wird mit id- und class-Attributen versehen. Diese sind die »Ankerpunkte«, über die später die Verbindung zwischen HTML und CSS hergestellt wird. id- und class-Attribute stellen zwei von mehreren Möglichkeiten dar, HTML aus dem CSS heraus konkret anzusprechen.
Für Elemente, die auf einer Seite nur einmal vorkommen, wie Kopf, Hauptnavigation, Inhalt und Fuß, werden individuelle id vergeben. Dieselbe id darf pro HTML-Seite nur ein einziges Mal vergeben werden. Für andere Elemente, die sich auf der Seite wiederholen, wie etwa die Metanavigation, werden class-Attribute eingefügt.
Die Attributnamen id und class sind vorgegeben und Teil der HTML-Sprache, die Werte selbst können hingegen frei vergeben werden. Diese sollten so sprechend wie möglich sein, sodass andere Entwickler mit einem Blick auf den Quelltext wissen, was Sie meinen.
Die Werte für id und class dürfen keine Leerzeichen beinhalten, Umlaute sind tabu. Wird ein »Bezeichner«, also ein Attributwert aus mehreren Wörtern gebildet, können diese jeweils mit einem Minuszeichen – oder einem Unterstrich _ voneinander getrennt. Auch der »CamelCase« ist eine gebräuchliche Schreibweise (die Bezeichnung leitet sich aus dem Wechsel von Groß- und Kleinbuchstaben ab, welche an »Kamelhöcker« erinnern; siehe Abb. 3–3).
Welche Variante man wählt, ist Geschmacksache, lediglich sollte eine einheitliche Schreibweise eingehalten werden, was Quelltexte einerseits homogener aussehen lässt, vor allem aber Fehlerquellen reduziert, wenn klar ist, nach welchem Muster die Bezeichner gebildet werden.
Abb. 3–3 CSS erlaubt unterschiedliche Notationen. Rechts oben ist der CamelCase zu sehen. Die Schreibweisen können auch gemischt werden, was nicht falsch, aber unschön ist und häufig Fehler nach sich zieht.
Bezüglich der Benennungen beziehungsweise Bezeichner lassen sich ein paar Vorüberlegungen anstellen: Die Hauptnavigation könnte mit id="haupt-navigation" benannt werden (um es einfacher zu machen, reicht hier auch id="navigation" und wird mit hoher Wahrscheinlichkeit von jedem als Hauptnavigation verstanden). Auch id="navi" wäre ein vertretbare und wenig fehleranfällige Bezeichner.
Die horizontalen Blöcke, die im Layout ermittelt wurden, werden möglichst sprechend benannt. id="kopf" ist dabei der komplette Kopf, id="kopf-oben" dann der obere Block innerhalb des Kopfbereichs, id="kopf-unten" der untere. Entsprechend werden die id- und class-Attribute für das ganze HTML vergeben.
3.3 CSS-Grundlayout aufsetzen
Dieses HTML-Grundgerüst ist ausreichend, um damit alle Seiten aufzubauen. Jetzt kann mit der eigentlichen visuellen Umsetzung begonnen werden.
Abb. 3–4 Darstellung des HTML-Grundgerüsts ohne jegliches CSS-Design
In Abb. 3–4 werden die Platzhaltertexte in der Browseransicht sichtbar, die im Grundgerüst...