In der Übung 02 geht es um die Formatierung der Schriften (Feinlayout). Zum Verständnis der Methode ist der Artikel Zusammenspiel von HTML -und CSS heranzuziehen.
In Übersicht: Die Formatierung der Schriften (Feinlayout) geschieht in einer eigens anzulegenden Datei mit der Endung .css (z. B. kann sie style.css genannt werden). In diese werden die Formatierungen eingetragen, z. B. Überschrift 1 soll grün sein, Überschrift 2 soll rot sein usw.
An jede einzelne HTML-Seite muss das Stylesheet style.css angefügt werden.
Schritte zur Übung 02:
- Anlegen der Seite index.html
- Einfügen von Text:
“Überschrift 1” (als Überschrift 1 formatieren)
Einige Sätze Dummy-Text einfügen
“Überschrift 2” einfügen (als Überschrift 2 formatieren)
- Über Datei / Neu ein leeres Stylesheet anlegen
- Mit dem Namen style.css speichern
- Zur index.html wechseln
- Rechts im Eigenschaftsfenster das Symbol für Stylesheet anfügen suchen und aktivieren
- Durchsuchen wählen und style.css auwählen, OK und Speichern
Die Seite und das Stylesheet sind jetzt verbunden, sobald im Stylesheet ein Format eingetragen wird, wirkt es auf der Seite.
Formatierungen für Überschrift 1 (h1), Absatztext (p) und Überschrift 2 (h2) vornehmen
Im Stylesheet folgenden Text eintragen, in dieser Formatierung mit den Zeilenschaltungen und Einzügen. Dabei unbedingt die Begriffe aus der Liste, die DW automatisch öffnet, mit Enter übernehmen:
h1{
font-family:Arial, Helvetica, sans-serif;
font-size:36px;
color:red;
}
h2{
font-family:Arial, Helvetica, sans-serif;
font-size:26px;
color:green;
}
p{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
color:#000000;
}- Wenn der Text eingetragen ist, speichern.
Ab jetzt wird der Texte von index.html wie im Stylesheet festgelegt angezeigt.