Webseiten Quick'n easy
<html>
<head>
<title>Mein erstes Dokument</title>
<style>
body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color: purple;
}
h2 { color: yellow; background-color: purple; }
p {
background-color: orange;
border: 1px solid red;
color: black;
}
</style>
</head>
<body>
<h2>Meine Seite</h2>
<img src="meinbild.gif" alt="Mein Bild" border="0" width="200"
align="right">
Ich begrüße Sie auf meiner Webseite.
<p>
Als erstes möchte ich mich vorstellen:
</p>
Mein Name ist ...<br>
ich bin ....<br>
</body>
</html>
Bei genauerer Betrachtung des Quelltextes, fällt auf, daß sich
am Dokument nichts geändert hat. Lediglich im Kopfbereich ist ein
Tag <style></style> hinzugekommen.
Mit Styles gibt man an, was bei der Darstellung vom Webbrowser
anders gemacht werden soll. Im vorliegenden Beispiel haben wir
die Darstellung einiger Tags modifiziert:
dem Body haben wir eine neue Schrift gegeben. Dies passiert mit
font-family. Dabei schaut der Browser, ob er eine Arial findet.
Findet er die nicht, schaut er nach einer Helvetica. Ist auch das
nicht vorhanden, nimmt er Sans Serif. In den meisten Fällen kommt
er aber mit Arial und Helvetica aus.
Diese Schriften sind zwar nicht identisch, aber sehr ähnlich.
Als nächstes haben wir den Font auf 12 Pixel gestellt, was
relativ groß ist..
Zuletzt haben wir die Schriftfarbe auf purple gestellt.
body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
color: purple;
}
Man beachte, daß erst das zu verändernde Tag geschrieben
wird (hier body) und dann in geschweiften Klammern eingerahmt({}),
jeweils die Angaben was wie zu ändern ist. Jede Angabe wird mit
einem ; abgeschlossen. Bei der letzten Angabe ist dies nicht
nötig, aber wenn man immer alles mit einem ; abschließt, kann man
das Semikolon (;) nicht vergessen, wenn man später noch etwas
hinzufügt.
Als nächstes ändern wir in unserer Überschrift (h2) die Textfarbe
auf purple (lila) und den Text auf yellow (gelb).
Zu guter Letzt ändern wir im Absatz (<p>) die Hintergrundfarbe und
die Textfarbe. Dazu kommt noch die Angabe, daß wir einen Rand
gezogen haben möchten, mit 1 Pixel Breite und in red (rot). Zu
Farben gibt es mehr am Ende des Kurses, wenn wir uns eingehender mit CSS
befassen.
p {
background-color: orange;
border: 1px solid red;
color: black;
}
Hier eine Farbtafel mit den offiziell verfügbaren Farbnamen.
Wir werden zu einem späteren Zeitpunkt sehen, wie man die komplette
Farbpalette mit über 14 Millionen Farben ausschöpfen kann.
Wenn es sich nur manchmal ändern soll...
... Kann man eine Klasse mit den entsprechenden
Layout-Eigenschaften verwenden. Im Tag verwendet man das Attribut
class="name", wobei 'name' fast frei wählbar ist. Bitte nur Buchstaben,
Ziffern und Unterstriche verwenden und nicht mit einem Unterstrich
beginnen.
Im <style> </style> wird dann an Stelle des Tags der Name
geschrieben, mit einem Punkt (.) davor.
<html><head>
...
<style>
.roter_absatz
{
background-color: maroon;
color: silver;
}
</style>
</head><body>
<p class="roter_absatz">
Nur diesen Absatz rot einfärben
</p>
<p>Dieser Absatz bleibt unberührt</p>
<div class="roter_absatz">
Auch hier wird der gleiche Style verwendet
</div>
</body></html>
Eine solche
Style-Angabe kann mit jedem Tag verwendet werden, also nicht nur
für <p class="roter_absatz">, sondern auch mit <h1
class="roter_absatz"> oder <div> und viele mehr.
Will man die Style-Klasse an einem Tag festmachen, geht dies
auch:
<html> <head>
...
<style>
p.roter_absatz
{
background-color: maroon;
color: silver;
}
</style>
</head> <body>
<p class="roter_absatz">
Nur diesen Absatz einfärben.
</p>
<p>Dieser Absatz bleibt unberührt</p>
<div class="roter_absatz">
Dieser Absatz ist auch nicht betroffen.
</div>
</body></html>
Nur dieses Mal eine andere Farbe
Wenn man 'mal eben schnell' etwas ausprobieren möchte,
oder wirkllich nur dieses eine Mal ein besonderes Layout wünscht,
gibt es für jedes Tag ein Attribut style. Hier füllt man
dann nur noch die Angaben ein, die man sonst zwischen die
geschweiften Klammern schreibt.
Eine Style-Angabe im Head-Bereich entfällt dann.
<html><head><title>Style-Attribut</title></head>
<body>
<p style="background-color: maroon; color: yellow">Mal eine andere
Farbwahl probieren</p>
</body></html>
Innerhalb des Style-Attributes sollte derzeit
kein Zeilenumbruch im Dokument stehen, sonst kommen einige Webbrowser
noch durcheinander.
CSS-Standard
Offizielle Dokumentation zum Standard
Farbdefinitionen
Vom W3Consortium vorgesehene Farbnamen
Nur ein klein wenig
Erweitern Sie das unten dargestellte Dokument wie folgt:
* die erste Überschrift soll eine helle Schrift und einen
blauen Hintergrund erhalten
* alle Überschriften sollen im Font Arial (bzw.
Helvetica..) dargestellt werden.
* der letzte Absatz soll Gelb hinterlegt sein.
<html>
<head>
<title>Uebung1</title>
</head>
<body>
<h1>Eine neue Headline</h1>
<p>
Hier kommt ein Blindtext. Hier kommt ein Blindtext.
Hier kommt ein Blindtext. Hier kommt ein Blindtext.
Hier kommt ein Blindtext. Hier kommt ein Blindtext.
Hier kommt ein Blindtext.
</p>
<h1>Headline Nummer 2</h1>
<p>
Ich bin Absatz zwei. Ich bin Absatz zwei.
Ich bin Absatz zwei. Ich bin Absatz zwei.
Ich bin Absatz zwei. Ich bin Absatz zwei.
Ich bin Absatz zwei.
</p>
</body>
</html>
In diesem Lösungsvorschlag haben wir versucht alle drei
Möglichkeiten unterzubringen. Man kann es auch anders handhaben.
Wir haben alle h1 generell mit dem gleichen Font versehen (mit
style im head). Den blauen Hintergrund haben wir mit einem class
- ebenfalls mit style im head - realisiert (einfach um diese
Variante zu zeigen). Die Änderungen für den letzten Absatz haben
wir direkt im p-Tag durch ein style-Attribut angegeben.
Außerdem haben wir den Absatz orange hinterlegt statt yellow,
einfach weil wir orange hübscher fanden.
<html>
<head>
<title>Uebung1</title>
<style>
h1 {
font-family: Arial, Helvetica, "Sans Serif";
}
.blau {
background-color: navy;
color: silver;
}
</style>
</head>
<body>
<h1 class="blau">Eine neue Headline</h1>
<p>
Hier kommt ein Blindtext. Hier kommt ein Blindtext.
Hier kommt ein Blindtext. Hier kommt ein Blindtext.
Hier kommt ein Blindtext. Hier kommt ein Blindtext.
Hier kommt ein Blindtext.
</p>
<h1>Headline Nummer 2</h1>
<p style="background-color: orange;">
Ich bin Absatz zwei. Ich bin Absatz zwei.
Ich bin Absatz zwei. Ich bin Absatz zwei.
Ich bin Absatz zwei. Ich bin Absatz zwei.
Ich bin Absatz zwei.
</p>
</body>
</html>