Einführung in HTML und CSS

Für Webseiten sind die zwei wichtigsten Skript Sprachen;

HTML und CSS

HTML ist das Grundgerüst einer Webseite
CSS braucht man für die Gestaltung.

Diese zwei Sprachen kann jeder Webbrowser lesen.
Du kannst mit solchem Code eine Webseite darstellen.
Es gibt verschiedene Webbrowser.

Internet Explorer
Mozzila Firefox
Google Chrome
Opera
und viele andere.

HTML

Im HTML gibt es Tags.
Meistens gibt es dazu einen öffnenden Tag
und ein Tag der wieder schliesst.
Alles was dazwischen ist gehört mit dazu.

Ein Beispiel;
<html> ist der öffnende Tag
</html> ist der schliessende Tag
Beim schliessenden Tag kommt nach Klammer noch ein Slash
/
Bei <html> beginnt eine Webseite
Bei </html> endet die Webseite.

Dazwischen hat eine Webseite ein <head>.
Das heisst auf Deutsch einen Kopf.
und einen Body <body>.
Das heisst auf Deutsch einen Körper.

Im <head> Teil liesst der Browser die Informationen, die er braucht,
um nachher den Body richtig darstellen zu können.
Im Body ist alles das, was man nachher auf der Webseite sieht.

Eine Seite sieht nun also folgendermassen aus;

<html> hier beginnt die Webseite

<head>
hier kommen Anweisungen die der Browser wissen muss, um diese Seite darstellen zu können.
<head>

<body>
Hier kommt alles was man auf der Webseite sehen kann,
also Text, Bilder, Links, Tabellen und vieles mehr.
</body>

</html> Hier endet die Webseite

Bei dieser einfachen Seite kann man zwischen dem öffnenden body Tag und dem schliessenden body Tag bereits schreiben.
Der Browser nimmt seine Standard Schrift
und seine Standard Schriftgrösse
und die Farbe Schwarz.
Er schreibt alles ohne Absatz über die ganze Länge des geöffneten Browser fenster.
Hat ein Wort kein Platz mehr beginnt er eine neue Zeile.
Möchte man selber bestimmen, wo ein Abschnitt kommrn soll, gibt es dafür auch ein HTML Tag,
es kommt vom Englischen break und wird so geschrieben;
<br />
Beim break Tag gibt es kein öffnendes und schliessendes Tag. Es ist beides in einem.

Ein HTML Tag kann ein Attribute haben.
Das sind Zusatz Angaben.
Dem body Tag kann man zum Beispiel das Attribut Hintergrundfarbe geben.
Das sieht dann so aus;
<body bgcolor="aaaaaa">
bgcolor ist die Bezeichnung des Attribut.
Dann kommt ein Gleichzeichen.
Zwischen zwei Anführungszeichen kommt dann der Wert.
bgcolor verlangt als Wert eine Farbe.
#aaaaaa ist ein helles grau.
Wieso man eine Farbe so schreibt, im Kapitel Farben

CSS

Um aber mehr Einfluss zu haben auf die Gestaltung braucht man eine andere Skript Sprache,
nämlich CSS.

Man kann CSS direkt im body brauchen
oder eine separate Datei dafür machen, die dann in die Webseite eingelesen wird.
Oder man schreibt das CSS in den head Teil.
Das wird vorerst unser Art sein CSS zu brauchen.

Um CSS im head Teil einzubinden, braucht es einen neuen HTML Tag;
den style Tag.
Er braucht noch ein Attribut, ein type, darin steht sein Wert "text/css"
<html>
<head>
<style type="text/css">
alles was dazwischen steht sind CSS Anweisungen
</style>
</head>
<body>
u.s.w

Es gibt drei Arten CSS zu brauchen;

Klassen
ID's
oder direkte Ansprachen

Zuerst zu den Klassen;

Eine Klasse beginnt mit einem Punkt
Danach kommt der Name der Klasse
Dann kommt eine öffnende geschweifte Klammer
Dazwischen können viele verschiedene Anweisungen stehen
Am Schluss kommt eine sich schliessende geschweifte Klammer.
Die geschweifte Klammer findest Du indem Du shift klickst und das ä Zeichen oder das Dollar Zeichen.

berta ist ein Beispiel für einen Namen. Es ist egal wie die Klasse heisst.
Die geschweifte Klammer schreibt man mit der Taste Alt Gr gedrückt und den ä oder dem $ Zeichen
zwischen die geschweiften Klammer kommen die CSS Regeln für diese Klasse.

}
</style>

Ein Beispiel ist die Schriftgrösse;

font-size:27px;

Damit werden die Buchstaben 17pixel hoch.
Wenn man ganz nahe auf den Bildschirm schaut, kann man die einzelnen Pixel erkennen.
Das ganze Bildschirmbild ist aus diesen kleinsten Quadraten aufgebaut.
Nicht alle Bildschirme haben die gleiche Auflösung. Verschiedene Auflösungen sind;

1024 x 768
1280 x960
und andere

Es gibt auch noch schlechter und bessere Auflösungen.

font-size ist der CSS Befehl für Schriftgrösse,
dann kommt ein Doppelpunkt.
Dahinter steht der Wert. In dem Fall 27px.
Ganz am Schluss der Zeile kommt noch ein Semikolon, ein Strichpunkt ;
Dieses Semikolon sagt dem Browser, dass die Anweisung zu ende ist.

Ein anders Beispiel ist die Schriftfarbe;

color:#0000FF;

Hier ist color der CSS Befehl für Farbe,
dann kommt der Doppelpunkt,
danach der Wert. Color verlangt als Wert eine Farbe.
#0000FF ist Blau.
Zum Schluss wieder nicht vergessen die Anweisung ab zu schliessen mit dem Semikolon! ;

Die Klasse berta macht nun also eine recht grosse Schrift mit blauer Farbe.

So schreibt die Klasse berta.

Klassen können innerhalb einer Webseite viele male vergeben werden.
Sie können als Attribut verschiedenen Tags mitgegeben werden.

Klassen können an;

und viele andere
vergeben werden

Das Attribut class wird dem eröffnenden Tag folgendermassen weitergegeben
<div class="berta">Dieser Teil wird von berta verändert</div>
<p class="berta">Dieser Teil wird auch von berta verändert</p>
<span class="berta">auch dieser Teil wird von berta verändert</span>
u.s.w.

Hier nun ein Beispiel;

<html>
<html>

<head>
<style type="text/css">
.berta{
    font-size:21px;
    color:#0000FF;
    }
</style>

</head>

<body>
<span class="berta">
Das wird nun alles gross und blau geschrieben ohne einen Zeilenumbruch.
</span>
Das wird alles schwarz und normal gross geschrieben.
<div class="berta">
Das wird auch alles gross und blau geschrieben, aber mit einem Zeilenumbruch.
</div>
Das wird alles schwarz und normal gross geschrieben.
<p class="berta">
Auch das wird gross und blau geschrieben, aber mit einem Zeilenumbruch und zusätzlichem Abstand oben und unten.
</p>
Das wird alles schwarz und normal gross geschrieben.
</body>

</html>

Schaue Dir das Resultat an!

Den Code oben im grauen Kasten einfach kopieren oder noch besser abschreiben und testen!

Du siehst, dass <span> und <div> und <p> für Textabschnitte gebraucht werden.
<span> macht keinen Zeilenumbruch
<div> macht einen Zeilenumbruch
<p> macht einen Abschnitt,
dass heisst es wird zusätzlich zum Zeilenumbruch
noch etwas mehr Abstand nach oben und unten dazu genommen.

Du siehtst auch, dass man Klassen so viele male wie man will verwenden darf!!
Ganz im Gegensatz zu ID's
ID's können nur ein einziges mal verwendet werden.
Dafür haben sie einen anderen grossen Vorteil.
mehr dazu im nächsten Abschnitt;

ID's im CSS

Wie schon oben geschrieben, können ID's nur ein einziges mal gebraucht werden.
Sie sind absolut individuell !!
ID's können unabhänig vom Fluss des HTML positioniert werden.
ID's werden mit einem sogenannten Gartenhaag eröffnet;
#
Dazu klickst Du die Taste;
Alt Gr und die 3
Sonst werden sie genau gleich geschrieben wie Klassen.
Sie haben nach dem Gartenhaag ein Name,
dann eine geöffnete geschweifte Klammer.
Darin die CSS Anweisungen.
Und am Schluss wieder eine sich schliessende geschweifte Klammer.
Hier ein Beispiel;

<html>
<html>

<head>
<style type="text/css">
#selma{
    position:absolute;
    width:422px;
    top:367px;
    left:333px;
    font-size:21px;
    color:#033;
    }
</style>

</head>

<body>

Das ist der normale Textfluss.
<br />
Er fliesst von oben nach unten.<br />
Im einem Bächlein helle,<br />
schwimmt die Forelle,<br />
tral lala la<br />
tral lala la<br />
tral lala la<br />
tral lala la<br />
tral lala la<br />
tral lala la<br />
tral lala la<br />
tral lala la<br />
tral lala la<br />
<br />
<div id="selma"><br />
Völlig losgelöst schwebt dieser Textblock.<br />
Ausserhalb vom HTML Fluss<br />
Er gehorcht hier nur den Angaben von<br />
left und<br />
top<br />
in der ID selma<br />
</div>
</body>

</html>

Schaue Dir das Resultat an!

Den Code oben im grauen Kasten einfach kopieren oder noch besser abschreiben und testen!

Die Umlautregeln

schreibe anstelle von ö

ouml;
und anstelle von ä

auml;
Falls einmal ein ü vorkommen sollte,
schreibe

uuml;
Ein Ä schreibe

Auml;
Ein Ü schreibe

Uuml;
Ein Ö schreibe

Ouml;

Dies weil viele Browser grosse Mühe haben ä ö ü zu lesen!!
Es gibt auch noch einen anderen Grund,
wieso der Browser gerade hier mühe hat die Umlaute zu lesen.
Doch davon ein anderes mal.
So oder so ist es in jedem Fall besser
ä, ö und ü's immer so zu schreiben, wie im grauen Kästchen oben !!

z-index

ID's sind einerseits geeignet etwas pixelgenau zu positionieren.
Man kann sie aber auch sehr gut brauchen,
um etwas über oder unter etwas zu schieben.

Hier ein Bespiel;

<html>
<head>
<title>z-index</title>

</head>
<br />
<body bgcolor="#bbbbbb">
<br />
<br />
<br />
<br />
<br />
<img src="Bilder/schnee.jpg" />
<div id="schwebeText">

Dieser Text ist auf einer z-index Ebene.<br />
Er kann über oder unter etwas gehoben werden.<br />
Mit z-index:-1 oder tiefer; unter<br />
Mit z-index:+1 oder höher; über<br />
Es spielt keine Rolle wo im Code diese ID <br />
einem div zum Beispiel zugeordnet wird.<br />
In Position:absolut ist es ausserhalb des HTML Fluss.<br />
Du kannst dieses div im Code also an erster Stelle schreiben,<br />
oder am Schluss oder irgendwo zwischendurch.<br />
Das macht gar keinen Unterschied!<br />
</div>
</body>
</html>

Dieser Text ist auf einer z-index Ebene.
Er kann über oder unter etwas gehoben werden.
Mit z-index:-1 oder tiefer; unter
Mit z-index:+1 oder höher; über
Es spielt keine Rolle wo im Code diese ID
einem div zum Beispiel zugeordnet wird.
In Position:absolut ist es ausserhalb des HTML Fluss.
Du kannst dieses div im Code also an erster Stelle schreiben,
oder am Schluss oder irgendwo zwischendurch.
Das macht gar keinen Unterschied!

Schaue Dir das Resultat an!

Den Code oben im grauen Kasten einfach kopieren oder noch besser abschreiben und testen!
Das Bild ist im Ordner Bilder.
Falls Du on-line arbeitest, ist die absolute Adresse;
http://www.kieselsteine.ch/Unterlagen/Bilder/schnee.jpg
Füge dann diesen ganzen Adresspfad ein, statt des relativen Pfades.
Du hast nun ganz nebenbei auch gerade noch gelernt, wie mann mit HTML Bilder einbindet!
Der <img src="Adresspfad" /> Tag ist einer der wenigen Tags,
die keinen öffnenden und schliessenden Tag brauchen. Da sind beide in einem!

Direktansprache mit CSS

Nun kannst Du CSS Klassen machen und weisst über CSS ID's bescheid.
Jetzt fehlt nur noch die dritte Art, die Direktansprache.
Wenn man eine Klasse schreibt, beginnt man mit einem Punkt .
Wenn man eine ID schreibt, beginnt man mit einem Gartenhaag #
Bei der Direktansprache schreibt man direkt das HTML Tag, dass man ansprechen möchte.
Als Beispiel nehmen wir gerade einmal das Bild.
Du kannst für alle Bilder, die auf dieser Webseite erscheinen eine einheitliche Regel erstellen.
Hier ein Beispiel;

<html>
<head>
<title>Bilderrahmen</title>

</head>

<body bgcolor="#141322">
<br />
<br />
<img src="Bilder/bild1.jpg" />
<br />
<br />
<img src="Bilder/bild2.jpg" />
<br />
<br />
<img src="Bilder/bild3.jpg" /><img src="Bilder/bild4.jpg" /><img src="Bilder/bild5.jpg" />
<br />
<img src="Bilder/bild6.jpg" />
<br />
<br />
<br />
<img src="Bilder/bild7.jpg" />
<br />
<br />
<img src="Bilder/bild8.jpg" /><img src="Bilder/bild9.jpg" />
</body>

</html>

Schaue Dir das Resultat an!

Den Code oben im grauen Kasten einfach kopieren oder noch besser abschreiben und testen!

Hier wird nun also direkt der img Tag angesprochen.
So werden alle img Tag im ganzen Dokument mit diesen CSS Regeln versehen.
In der CSS Regel steht, dass die Bilder einen Rahmen bekommen sollen.
Bilderrahmen sind im CSS leider sehr mühsam!
Es braucht einen Befehl für die Rahmenbreite
Es braucht weiter einen Befehl für die Rahmenart
und dazu erst noch einen Befehl für die Rahmenfarbe.
Dazu hat es noch ein margin.
Diese bewirkt, dass oben, rechts, unten und links einen Abstand von 10px eingehalten wird.
Noch aufwendiger wird es,
wenn man bei den Bilderrahmen jede Seite mit anderer Farbe, Breite und Art haben möchte;
So braucht es viermal die drei Befehle!
Ersetze also im Beispiel oben die CSS Regel mit der folgenden;

Schaue Dir das Resultat an!

Für die Rahmenart gibt es viele Varianten;

dashed
dotted
double
groove
hidden
inherit
inset
none
outset
ridge
und solid

Nicht alle wirken bei allen Browsern. Probier ein bisschen die Möglichkeiten aus, die die Bilderrahmen so bieten!

Natürlich könntest Du die Rahmen auch mittels einer Klasse weitergeben.
Das hat den Vorteil, dass Du nicht gleich alle Bilder auf der Webseite gleich einrahmen musst.
Oder Du machst es trotzdem mit der direkten Ansprache auf den img Tag.
und machst zusätzlich eine Klasse mit einem anderen Bilderrahmen.
So kannst Du einem gewünschten Bild einen anderen oder kein Rahmen zuweisen
Kein Rahmen kannst Du machen mit border="0"
Und so fügst Du die Klasse dem speziellen Bild zu;

<img src="Bilder/bild7.jpg" class="spezialRahmen" />

Die Klasse "spezialRahmen" kannst Du nun selber nach Deinen eigenen Wünschen erstellen.

So wird der Befehl für alle Bilder für dieses eine Bild überschrieben!
Es wird immer der am nächsten beim Objekt geschriebene CSS Befehl gebraucht.
oben genannte werden überschrieben.
Von da kommt auch der Name CSS
Er heisst auf Englisch;
Cascading Style Sheets
Es ist also eine Art Treppen Styl.
Immer die letzte Treppe wirkt!!

Wenn Du diese Seite sorgfältig durch gearbeitet hast,
hast Du Dir schon ein soliden Anfangs- Grund- Stock in HTML und CSS erarbeitet.
Kompliment !!!

zurück zum Inhaltsverzeichnis