6 < 7 Webdesign | start | Webdesign 7 > 8
CSS-Befehle | Veriante 3: Externe CSS-Datei | HTML-Seitenaufbau
Elemente, die nicht nur auf einer Seite sondern auf vielen Seiten vorkommen und einheitlich gestaltet werden sollen, werden sinnvollerweise in einer externen CSS-Datei definiert.
HTML-Seitenstruktur und Verlinkung auf externe CSS-Datei
Sie können Ihre CSS-Befehle aus dem Stylebereich in eine externe CSS-Datei exportieren und einen Link auf diese Datei in jede HTML-Datei importieren, die Sie mit denselben Regeln gestalten möchten.
Aufgabe: Ergänzen Sie Ihre HTML-Seite um Strukturelemente nach W3C-Syntax
Eine moderne Internetseite nach HTML5-Standard besteht aus mindestens 5 HTML-Struktur-Elementen:
Dokumenttypangabe, head, meta, title, body
Zwischen <head> und </head> befinden sich Metainformationen zur Seite. Dort hinein gehört z.B. der Style-Bereich.
Zwischen <body> und </body> sind alle Inhalte, die der Browser anzeigt.
Kommentare im HTML-Quelltext können Sie mit folgendne Zeichen einfügen: <!-- Kommentar -->
Achtung: Kommentare in einer CSS-Datei werden mit /* und */ gebildet. In der CSS-Dürfen keine < und > benutzt werden
Die Seite "Gruselett" mit HTML-Seitensyntax
<html>
<head>
<meta charset="utf-8"> <!-- Angabe des Zeichensatzes -->
<title>Gedichte und Sprüche</title>
<style>
/* CSS-Kommentar */
h1 {color: red} /*Beispiel CSS-Befehl */
</style>
</head>
<body>
</body>
</html>
Erstellen einer externen CSS-Datei
Aufgabe:
- Erstellen Sie mit Notepad++ eine externe CSS-Datei mit dem Namen style.css. Speichern Sie diese Datei dort ab, wo auch ihre anderen HTML-Dateien gespeichert sind.
- Kopieren Sie alle CSS-Informationen aus der HTML-Datei, die zwischen <style> und </style> stehen in die CSS-Datei. Der HTML-Steuerbefehl <style>, bzw. </style> dürfen nicht in die CSS-Datei kopiert werden
Auswirkung
Ihre HTML-Datei wird jetzt ohne CSS-Befehle angezeigt. Nur die Struktur des Textes ist erkennbar. Damit die CSS-Gestaltung aus der externen CSS-Datei zur Anwendung kommt, muss diese jetzt in der HTML-Datei verlinkt werden.
Aufgabe: Erstellen Sie einen Link in Ihrer HTML-Datei auf die externe CSS-Datei style.css.
Der Link lautet: <link href="style.css" rel="stylesheet" type="text.css">
Dadurch wird die Datei style.css eingebunden. HTML erfährt, dass es sich um eine Stylesheet-Datei handelt vom Typ text/css. mit einer Erweiterung des Medientyps könnte man noch angeben, wann die CSS-Datei wirksam werden soll. Die Ergänzung media="screen" oder media="print" hätte zur Folge, dass im ersten Fall die CSS-Datei nur für die Bildschirmansicht, im zweiten Fall nur beim Ausdruck wirksam werden würde. Für diese Unterscheidung gibt es aber noch andere Möglichkeiten direkt in der CSS-Datei.
<head>
<meta charset="utf-8"> <!-- Angabe des Zeichensatzes -->
<title>Gedichte und Sprüche</title>
<link href="style.css" rel="stylesheet" type="text/css">
<style>
</style>
</head>
<body>
</body>
</html>
Merksatz: Ergänzen Sie folgende Satzanfänge:
Gestaltung in einer externen CSS-Datei eignet sich...
Gestaltaung im Style-Bereich eignen sich weniger...
johannes.bucka@t-online.de. Diese Anleitung steht unter Creative Commons Lizenz: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen (http://de.creativecommons.org/).