Diese Seite ist konzipiert für den Unterricht am Technischen Gymnasium und am Berufskolleg Technik und Medien in Baden-Württemberg.
Empfehlung:
Hilfreich für die didaktische Umsetzung dieses Kurses waren viele Anregungen des HTML-Seminars, einem nicht kommerziellen Forschungsprojekt des Institut für webbasierte Kommunikation und E-Learning. Zur Vertiefung der Kenntnisse ist diese Seite sehr zu empfehlen.
Der nicht nur von Maschinen sondern auch von Menschen lesbare und verstehbare HTML-Code erleichtert die schnelle Umsetzung eigener Gestaltungsideen für die Veröffentlichung im Internet. Texte und Bilder können an Ort und Stelle im Text so dargestellt und positioniert werden, wie es dem Entwickler gefällt. Sobald Projekte komplexer werden behindert diese individuelle Gestaltung eine übergreifende und einheitliche Gestaltung. Schon der Versuch, eine Überschrift auf dreißig Seiten von der Farbe rot auf blau umzustellen oder eine andere Schriftfamilie zuzuweisen, wird zur Sklavenarbeit.
Zukunftsweisende Gestaltung kann daher nur darin bestehen, die Struktur der darzustellenden Inhalte und deren optische Gestaltung klar voneinander zu trennen.
Ich weiß nicht, was soll es bedeuten,
Daß ich so traurig bin,
Ein Märchen aus uralten Zeiten,
Das kommt mir nicht aus dem Sinn.
Die Luft ist kühl und es dunkelt,
Und ruhig fließt der Rhein;
Der Gipfel des Berges funkelt,
Im Abendsonnenschein.
Heinrich Heine, 1822 (1799-1856)
Gruselett
Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz
Christian Morgenstern.
Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz.
Christian Morgenstern
Erklärung:
HTML-Elemente sind in der Anzahl begrenzt. Absätze (<p></p>) mit unterschiedlicher Funktion können nur unterschieden werden, wenn sie gesondert gekennzeichnet werden. Dafür gibt es die Möglichkeit, einem Element eine Klasse zuzuweisen. Klassennamen dürfen frei erfunden werden. Es empfiehlt sich eine einheitliche Schreibweise z.B. sprechende Begriffe in Kleinschreibung, die einen Rückschluss auf die Verwendungsstruktur zulassen. Der Absatz mit dem Autornamen erhält oben den Namen "autorname" und kann später als Klasse angesprochen und definiert werden.
Es sollte vermieden werden einen Klassennamen zu wählen, der eine Gestaltung festlegt. Ein Klassenname "kursiv", z.B. ist theoretisch möglich, wäre jedoch dann nicht mehr sinnvoll, wenn eine spätere Gestaltung geändert werden soll.
Damit alle Standardbrowser HTML-Code korrekt darstellen, müssen in den erste Zeilen des Dokumentes DOCTYPE-Definitionen angegeben werden. Wenn Sie in einem HTML-Editor, wie z.B. dem kostenlosten Opensource-Programm KompoZer eine neue Seite öffnen, werden diese Informationen bereits vom Programm eingetragen.
Achtung!
Achten Sie darauf, dass das Dokument mit der DOCTYPE-Definition beginnt und nicht etwa mit einer Leerzeile!
In dieser Zeile wird angegeben, welcher HTML-Version und welcher DTD (Document Type Definition) dieses HTML-Dokument folgen soll. Die Definition wurde vom W3C-Consortium festgelegt. Der Link verweist auf die entsprechende Version der DTD.Im Anschluss an die HTML-Definition wird die Seite zwischen den Elementen <html> und </html> beschrieben. (Das HTML-Element erhält eine Ergänzung mit Angaben zur HTML-Version und zur verwendeten Sprachversion)
Komplett ist eine HTML-Seite erst dann, wenn sie ein HTML-Element (<html>...</html>) und darin einen HEAD-Bereich (<head>...</head) gefolgt von einem BODY-Bereich (<body>...</body>) enthält.
Code für die Gestaltung der Gedichtebox
Hinweis!
Im Gegensatz zu IDs (Beispiel: #navigation) dürfen Klassen (z.B. .autorname oder .gedichtebox) beliebig oft auf einer Seite verwendet werden. IDs dürfen pro Seite nur einmal genutzt werden.
Der Text klebt links und oben an der Box. Geben Sie der Box einen Innenabstand (padding) von ca. 1.0em. Erweitern Sie die CSS-Definition für .gedichtebox um den Befehl: padding: 1.0em
Title wird im Kopf des Browserfensters angezeigt. Suchmaschinen erkennen diesen Titel und verlinken damit auf die Website. Mit diesem Titel wird die Seite auch in Linklisten gespeichert.
Der komplette Kopfbereich (zwischen <head> und </head>) mit CSS-Befehlen:
Wollen Sie mehrere Seiten mit demselben Aussehen gestalten, macht es Sinn, die CSS-Befehle in eine eigene CSS-Datei auszulagern.
Externe CSS-Datei für die Bildschirmansicht (screen.css):
Wollen Sie, dass für den Ausdruck eine von der Darstellung am Monitor abweichende Darstellung, dann erstellen Sie zusätzlich zur Datei screen.css eine zweite Datei und nennen Sie diese z.B. print.css.
CSS-Datei für den Druck (print.css):
Alle Änderungen in der externen CSS-Datei wirken sich nun direkt auf alle Seiten aus, in denen auf diese CSS-Datei verwiesen wird. Ohne Angabe des Medientyps gilt die CSS-Datei für alle Ausgabemedien.
Legen Sie im Link den Medientyp fest (z.B. media="print"), dann werden die dort festgelegten Einstellungen im jeweiligen Ausgabemedium wirksam. Steht diese Datei in der Reihenfolge an letzter Stelle, werden alle vorher festgelegten und für dieses Medium gültigen Definitionen überschrieben.
Quellcode der kompletten bisherigen Seite; die neu eingefügten Links sind hervorgehoben.
Hinweis zu Dreamweaver:
Dreamweaver bietet in der Entwurfsansicht einen Umschalter, der die Auswirkung der Ausgabe im jeweiligen Medientyp zeigt.
(Sollten Sie den Umschalter nicht sehen, blenden Sie über Ansichten -> Symbolleisten die Symbolleiste "Stilwiedergabe" ein. Danach können Sie in der Ansicht "Entwurf" durch Klick auf das Druckersymbol die Druckansicht und durch Klick auf das Screen-Symbol die Bildschirmansicht betrachten.
Jeder Bereich ist durch eine eigene ID gekennzeichnet.
Der zusätzliche Code in der CSS-Datei für die vier IDs:
Achtung!
Jede ID (z.B. #navigation) darf auf einer Seite nur einmal verwendet werden.
Zusammenfassung: Code für die DIV-Boxen im Body-Bereich:
Am Aussehen der Seite hat sich durch die Einführung der IDs (#header, #navigation, #trennzeile und #content) jedoch nichts geändert. Dies ist auch nicht verwunderlich, denn die DIV-Boxen wurden zwar angelegt und die dazugehörigen IDs sind in der CSS-Datei enthalten. Jedoch haben Sie noch keine Gestaltungsanweisungen erhalten.Tipp!
Benutzen Sie die Farbpalette zur Auswahl einer Farbe
Achtung!
Einer der beliebtesten Fehler in CSS-Befehlen sind vergessene Semikolons ";" und geschweifte Klammern. Machen Sie nach jedem Befehl einen Strichpunkt. Ein vergessener Strichpunkt kann die folgenden Definitionen ausschalten.
Ausbaustufe 1: Ansicht der in der CSS-Datei farbig ausgezeichneten Seitenbereiche in der Browseransicht
Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz.
Christian Morgenstern
Folgende Grafik soll als Header verwendet werden. Die Grafik ist in einer Breite von über 1.800 px angelegt. Sie ist damit für alle gängigen Bildschirme breit genug und wird immer in voller Breite dargestellt.
Achtung!
Von einem Hintergrundbild ist immer nur so viel zu sehen, wie ihm Platz eingeräumt wird. Daher müssen wir dem DIV-Bereich eine Höhe geben.
Ausbaustufe 2
Christian Morgenstern
Farben sind auch Geschmackssache. Es empfiehlt sich jedoch eine Orientierung an bereits vorhandenen Farbobjekten. Entnehmen Sie z.B. eine Farbe aus einem Bild, das Sie auf der Homepage benutzen. Wenn Sie die Firefox-Erweiterung ColorZilla nutzen, können Sie über die Pipette die Farbe auswählen.
Über die CSS-Definition background-color geben Sie dem Bereich für die Navigation die Farbe mit.
Tipp!
Benutzen Sie die Farbpalette zur Auswahl einer Farbe
(Auf websichere Farben achten. Siehe Erklärung im PopUpfenster)Hinweis:
Achten Sie bei den Hintergrundfarben darauf, dass diese einen genügend großen Kontrast zur Vordergrundfarbe (Schrift) bietet.
Ausbaustufe 3
Die Erzeugung von Schlagschatten sind bei vielen Webdesignern das höchste der Gefühle. Was im Web funktioniert, sollte jedoch nicht automatisch ein Vorbild für den Druck sein.
Bei der Erzeugung von Bildern am Monitor kommt die additive Farbmischung zum Einsatz. Dabei trifft Licht aus einer Kombination der Farben Rot, Gelb und Blau direkt das Auge des Betrachters. Das Ergebnis ist eine Farbwahrnehmung, bei der Leuchtkraft und Schattenwirkungen eines Bildes relativ intensiv wahrgenommen werden können. Beim gedruckten Dokument wird das Licht nur reflektiert. Die Lichtquelle ist nur indirekt wahrnehmbar. Der Eindruck einer Schattenwirkung kann daher beim Druckdokument nur aus der Erfahrung des Betrachters heraus hergestellt werden. Es gehört viel Erfahrung dazu, im Druck ein ähnlich gutes Ergebnis zu erzielen. Was am Bildschirm gut aussieht, muss im Ausdruck noch lange nicht gut aussehen.
Zusatzübung:
Erstellen Sie eine print.css, in der Sie den Druck des Schattens unterbinden.
Um einen Schlagschatten darzustellen, geben Sie der ID #trennzeile in der CSS-Datei den entsprechenden "Auftrag". Der Schatten wird erzeugt durch die Anzeige einer kleinen Hintergrundgrafik (Größe 1px) mit einem Farbverlauf von Grau nach Weiß, die auf der X-Achse wiederholt wird. Das Bild für diesen Hintergrund haben Sie bereits heruntergeladen und im Ordner bilder gespeichert.
Ausbaustufe 4
Testen Sie:
Wenn Sie die Schrift "Trennzeile mit Schatten" löschen, verschwindet der Schatten wieder. Der Schatten liegt im Hintergrund. Wenn das Element keinen Platz benötigt, dann bekommt es auch keine Höhe und somit wird der Schatten nicht angezeigt.
Alternativ kann die Trennzeile auch als Klasse angelegt werden, wenn diese auf einer Seite mehrfach Verwendung finden soll.
Hinweis!
Damit die Definition wirkt, müssen Sie der DIV-Box im Body anstelle der CSS-ID #trennzeile(<div id="trennzeile"></div> die CSS-Klasse .trennzeile zuweisen (<div class="trennzeile></div>)
Ausbaustufe 5: Trennzeile mit Schatten
Ergebnis: Nach dieser Auswahl wird die Schrift im gesamten Dokument in Arial, bzw. einer serifenlosen Schrift angezeigt.
Die Schrift in der Kopfzeile soll weiß werden und rechts ausgerichtet sein. Damit bleibt sie mit jedem Fenster sichtbar.
Die Schrift im Kopfbereich wurde zwischen den Absatz-TAGS <p> und </p> platziert ( siehe Schritt 5) und somit kann man für alle <p></p> im Header eine Definition vereinbaren. Die Schrift soll weiß sein und größer sein als z.B. der Seitentitel.
Tipp!
Sortieren Sie alle CSS-Befehle in der CSS-Datei so, dass die, die zusammengehören untereinander stehen. Sie können mit /* .. */ Kommentare in der CSS-Datei unterbringen.
Erklärung der Befehle:
color:white: Schriftfarbe weiß
text-align:right: die Schrift wird rechtsbündig ausgerichtet.
font-size: 2em: relative Schriftgröße. Vorteile der Größenangabe em
padding: 0.4em 0.4em 0 0: Abstand zu den Rändern: 0.4 em von oben (das ist der erste Wert), 0.4em nach rechts (das ist der zweite Wert) und jeweils 0 nach unten und 0 nach links. (Tipp: diese Angaben sind immer wie eine Uhr im Uhrzeigersinn zu lesen und der Start ist oben).
Ergebnis: Durch diese Angaben haben wir nun eine große weiße Schrift. In der Vorschau ansehen.
Ausbaustufe 6: Anpassung der Schrift im Header
Christian Morgenstern
Ausbaustufe 7: Navigation erhält einen Innenabstand zum linken Rand.
Ausbaustufe 8: Der Text in der Gedichtebox erhält auf allen Seiten einen Innenabstand
Christian Morgenstern
Auf dieser Seite erfahren Sie einiges über Christian Morgenstern aber auch,
wie man mit CSS Webseiten gestalten kann.
Hier eine Kostprobe
Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz.
Christian Morgenstern
Im Schritt 1 wurden bereits mit dem Universalselektor * alle Abstände (margin und padding) auf 0 gesetzt. Dadurch sind auch die Abstände zwischen den Überschriften und den Absätzen verschwunden.
Ausbaustufe 9
Christian Morgenstern
Auf dieser Seite erfahren Sie einiges über Christian Morgenstern aber auch,
wie man mit CSS Webseiten gestalten kann.
Hier eine Kostprobe
Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz.
Christian Morgenstern
Tipp:
Legen Sie in der CSS-Datei eine CSS-Definition für Fußzeile an und positionieren Sie eine DIV-Box mit der Fußzeile unterhalb von <div id="content">...</div>. Fügen Sie anschließend auf die gleiche Weise eine zusätzliche Schattenzeile ein.
Warnung:
Sebst wenn es funktionieren würde: Benutzen Sie für die Definition der Fuß- und der Schattenzeile nicht die bereits vorhandenen IDs "#navigation" und/oder "#trennzeile". IDs sollten auf einer Seite nur einmal vorkommen.
Benutzen Sie für die Definition der Fußzeile eine neue ID, für die Definition der Schattenzeile die Klasse, (z.B. .schattenzeile {...}). Sie können die bisher als ID angelegte Trennzeile in eine Klasse verwandeln diese mehrfach, also auch unterhalb der Navigation verwenden.
Ausbaustufe 10
Christian Morgenstern
Inhalt ...
Das Aussehen soll, wie im übrigen Content auch, ausschließlich über die CSS-Datei gesteuert werden. Ziel ist es, durch eine passende Kombination aus Strukturelementen, aktive Menülinks hervorzuheben ohne dabei individuelle Layoutinformationen in den Link einfügen zu müssen.
CSS-Datei-Befehl für aktive Links (jeweils der aktuelle Link soll bold und weiß sein)
Navigationseintrag im Body (Nur Links mit der übereinstimmenden ID und Klasse werden im Menü hervorgehoben)
Ausbaustufe 11: Navigationsleiste mit hervorgehobenem Link der aktuellen Seite
Christian Morgenstern
Hier eine Kostprobe
Der Flügelflagel gaustert
durchs Wiruwaruwolz,
die rote Fingur plaustert
und grausig gutzt der Golz.
Christian Morgenstern