M.

Kaatze

Webseiten mit HTML und CSS

(Version 2.0)
2 Webseiten mit HTML und CSS (V 2.0)

Inhalt
Aufbau von Webseiten .................................................................................................. 3
Übung: Fragen zu HTML? ................................................................................................................................. 3
Theorie: Inhalt, Layout und Animation ............................................................................................................... 3
HTML-Grundlagen ...................................................................................................... 4
Theorie: HTML-Grundgerüst ............................................................................................................................. 4
Theorie: Tags und Elemente ............................................................................................................................... 5
Übung: Tags und Elemente................................................................................................................................ 6
Zusatz: Einfache HTML-Seiten .......................................................................................................................... 7
CSS-Gestaltung ............................................................................................................ 8
Theorie: CSS...................................................................................................................................................... 8
Übung – Typselektoren für HTML-Elemente ...................................................................................................... 8
Übung – Klassenselektoren................................................................................................................................. 9
Übung – Formatierung direkt im HTML-Element ............................................................................................. 10
Übung – CSS in externer Datei ......................................................................................................................... 11
Zusatz: CSS-Formatierung ............................................................................................................................... 12
Zusatz: Docx-Dateien sind auch fast HTML ..................................................................................................... 12
Weitere HTML-Elemente ............................................................................................ 13
Theorie: Listen ................................................................................................................................................. 13
Übung: Listen .................................................................................................................................................. 14
Theorie: Bilder ................................................................................................................................................. 15
Übung: Bilder .................................................................................................................................................. 15
Theorie: Links .................................................................................................................................................. 19
Übung: Links ................................................................................................................................................... 19
Zusatz: Kleine Webseite mit Kochrezepten ....................................................................................................... 20
Theorie: Tabellen ............................................................................................................................................. 21
Übung: Tabellen ............................................................................................................................................... 22
Theorie: Absolute Positionierung ...................................................................................................................... 24
Übung: Absolute Positionierung ....................................................................................................................... 25
Zusatz: CSS3 ................................................................................................................................................... 25
Wiederholung: Bilder ....................................................................................................................................... 26
Wiederholung: Tabellen ................................................................................................................................... 27
Aufbau von Webseiten ................................................................................................ 28
Theorie: Semantisches HTML .......................................................................................................................... 28
Theorie: Navigation.......................................................................................................................................... 28
Theorie: Box-Modell ........................................................................................................................................ 28
Übung: Einspaltiges Layout .............................................................................................................................. 29
Übung: Zweispaltiges Layout ........................................................................................................................... 30
Übung: Dreispaltiges Layout ............................................................................................................................ 31
Zusatz: Erweiterungen für den <main>-Tag ...................................................................................................... 32
Übungen: Menü mit Buttons............................................................................................................................. 32
Zusatz: Menü mit Buttons und Untermenü ........................................................................................................ 32
Theorie: Webseite mit mehreren Seiten ............................................................................................................. 33
Übung: Webseite mit mehreren Seiten .............................................................................................................. 33
Projektbewertung ....................................................................................................... 34
Informatik@[Link] Webseiten 3

Aufbau von Webseiten

Übung: Fragen zu HTML?

Suche im Internet Antwort auf folgende Fragen:

? Was bedeutet HTML?

? Wozu benötigt man für HTML einen Browser?

? Was ist ein Quelltext?

? Wie alt ist HTML?

? Was ist das W3C?

Theorie: Inhalt, Layout und Animation

Um eine moderne Webseite zu erstellen, benötigt man 3 - 4 Sprachen:
 Mit HTML erzeugt man die Struktur einer Webseite.
 Mit CSS gestaltet man ihr Aussehen.
 Mit JavaScript baut man Animationen und Kontrollabfragen ein.
 Mit PHP / MySQL kann man auf Datenbanken zugreifen.
4 Webseiten mit HTML und CSS (V 2.0)

HTML-Grundlagen

Theorie: HTML-Grundgerüst
Das HTML-Grundgerüst ist die Basis einer Webseite. Obwohl die meisten Browser eine HTML-
Seite auch so erkennt, muss sie jedes Mal das Grundgerüst enthalten.
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>HTML-Grundgerüst</title>
</head>
<body>

</body>
</html>

Schreibe das Grundgerüst ab und speichere die Datei unter [Link] in deinem Ordner.
Um die HTML-Seite im Browser anzuschauen, musst du im Editor „Notepad++“ auf Ausführen
klicken und dann einen Browser aussuchen.

Du solltest nun eine leere Webseite sehen, denn bisher haben wir keinen Inhalt auf unserer
Seite. Oben rechts im Browser sollte nun allerdings der Titel deiner Datei stehen.

Einige Erklärungen zum Grundgerüst:

 Mit Doctype wird festgelegt, welche HTML-Version benutzt wird. Wir benutzen hier HTML 5.
 Im <Head> stehen Informationen, die der Besucher größtenteils nicht sehen kann, z.B. An-
gaben für Suchmaschinen oder den Browser.
 Meta-Tags enthalten Anweisungen für den Browser oder Suchmaschinen. Mit UTF-8 legt man
den deutschen Zeichensatz fest, d.h. Umlaute werden korrekt dargestellt.
 Der <Title> enthält den Titel der Seite.
 Im <body> steht später der eigentliche Inhalt unserer Seite
Das Grundgerüst muss in jeder Seite so angegeben werden. Man kann es natürlich kopieren.
Informatik@[Link] Webseiten 5

Theorie: Tags und Elemente

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>Lore-Ley Gedicht</title>
</head>
<body>
<h1>
Lore-Ley
</h1>
<p>
Ich weiß nicht, was soll es bedeuten,<br>
Daß ich so traurig bin,<br>
Ein Märchen aus alten Zeiten,<br>
Das kommt mir nicht aus dem Sinn.
</p>
<p>
Die Luft ist kühl, und es dunkelt,<br>
Und ruhig fließt der Rhein;<br>
Der Gipfel des Berges funkelt<br>
Im Abendsonnenschein.
</p>
<h4>
von Heinrich Heine
</h4>
</body>
</html>

Schreibe das Gedicht ab und speichere es unter [Link]. Nutze dabei die Tabulatortaste
zum Einrücken!

<html> <p> <h1> usw. nennen wir Tags (übersetzt Markierung) oder auch HTML-Elemente. Sie
legen die Struktur einer Webseite fest.
Einige Tags stehen alleine (z.B. <br>), die meisten Tags kommen aber paarweise vor und beste-
hen dann aus einem Anfangs- und Endtag (z.B. <p></p>).
Unterscheiden müssen wir zwischen Block-Elementen und Inline-Elementen:
 Block-Elemente fügen am Ende automatisch einen Zeilenumbruch ein.
<h1></h1> Überschrift (1-6)
<p></p> Absatz
<hr> Horizontale Linie (Kein End-Tag)
<br> Einfacher Zeilenumbruch (Kein End-Tag)
 Inline-Elemente stehen im Textfluss und bewirken keinen Zeilenumbruch.
<em> </em> kursiv
<strong> </strong> betont
<big> </big> größerer Text
<small> </small> kleinerer Text
 tiefergestellt
 hochgestellt
<b> </b> fett
Diese Unterscheidungen sollten sich auch im Quelltext wieder finden.
Allgemein gilt: Im Quelltext nicht mit Zeilen und Einrückungen sparen!
6 Webseiten mit HTML und CSS (V 2.0)

Übung: Tags und Elemente

Ergänze das Gedicht um die anderen Strophen. Denke dabei ans Einrücken!

Schreibe die folgende Datei ab und speichere sie unter [Link].

Du kannst die Seite unter [Link] testen.
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>Kinderreim</title>
</head>
<body>
<h3>
Kinderreim
</h3>
<p>
Eine ^kleine <b>Dickmadam</b><br>
fuhr mal mit der Eisenbahn.
</p>
<p>
Eisenbahn, die <strong>krachte</strong>,<br>
Dickmadam, die lachte.
</p>
<p>
Lachte, bis der <small>Schutzmann</small> kam,<br>
und sie mit zur Wache nahm.
</p>
<hr>
</body>
</html>
Informatik@[Link] Webseiten 7

Zusatz: Einfache HTML-Seiten

Erstelle folgende HTML-Seiten und speichere sie unter einem sinnvollen Dateinamen.
Achte auf einen eingerückten Quelltext und ein vollständiges Grundgerüst.

Überschrift

Absatz

Absatz

Lange Absätze
In langen Absätzen benutzt
man kein <br>, sondern
schreibt alles in einer Zeile.
Der Zeilenumbruch wird dann
durch den Browser erzeugt
und passt sich automatisch
der Fenstergröße an.
8 Webseiten mit HTML und CSS (V 2.0)

CSS-Gestaltung

Theorie: CSS
CSS steht für Cascading Style Sheets (deutsch: Staffelbare Formatvorlagen).
CSS Stylesheets sind eine unmittelbare Ergänzung zu HTML.
Es handelt sich dabei um eine Sprache zur Definition von Formateigenschaften einzelner
HTML-Elemente.
o CSS kann z.B. bestimmen, dass Überschriften 1. Ordnung eine Schriftgröße von 18 Punkt
haben und mit einem Abstand von 1,75 Zentimeter zum darauf folgenden Absatz versehen
werden. Angaben dieser Art sind mit reinem HTML nicht möglich.
o CSS kann Elemente pixelgenau im Anzeigefenster positionieren.
o CSS kann zentrale Formate definieren. So kann man beispielsweise im Kopf einer HTML-
Datei zentrale Definitionen zum Aussehen einer Tabellenzelle notieren. Alle Tabellenzellen
der entsprechenden HTML-Datei erhalten dann die Formateigenschaften, die einmal zentral
definiert sind.
o CSS kann in separaten Dateien notiert werden und dann in beliebige Dateien eingebunden
werden. Dies vereinfacht ein einheitliches Layout.

Übung – Typselektoren für HTML-Elemente

Um einer Webseite ein einheitliches Erscheinungsbild zu geben, kann man zunächst den ein-
zelnen HTML-Elementen (Tags: z.B. H1, p) Formatierungen zuweisen. Diese gelten dann für
alle Tags in deinem Dokument.
Dies geschieht mit einem Style-Element im Head.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS mit Style-Element</title>
<style type="text/css">
Style-Element h1 { color:red; font-size:38px; }
mit 2 Selektoren p { word-spacing:0.5em; font-family:'Verdana',sans-serif; }
</style>
</head>
<body>
<h1>
CSS mit Style-Element
</h1>
<p>
Mit dem Style-Element werden HTML-Tags Formatierungen zugewiesen.
</p>
</body>
</html>

Schreibe die Seite ab und speichere sie unter globale_formatierung.html.

Suche im Internet z.B. unter [Link] nach weiteren CSS-Eigenschaften und baue
sie in deine Seite ein.
Informatik@[Link] Webseiten 9

Übung – Klassenselektoren
Häufig kommt es vor, dass sich einzelne HTML-Elemente von gleichnamigen unterscheiden sol-
len. So sollen z.B. nicht alle <p></p>-Absätze die gleiche Farbe bekommen.
Hier können im Style-Element Klassen erzeugt werden, die dann den HTML-Elementen zugewie-
sen werden können.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Der Zauberlehrling</title>
<style type="text/css">
body { background: silver; }
h2 { color:midnightblue; font-size:22px; }
p { font-variant:small-caps; }
.gruen { color:#006500; }
.lila { color:purple; )
</style>
</head>
<body>
<h2>
Der Zauberlehrling
</h2>
<p class="gruen">
Hat der alte Hexenmeister<br>
Sich doch einmal wegbegeben!<br>
Und nun sollen seine Geister<br>
Auch nach meinem Willen leben.<br>
Seine Wort und Werke<br>
Merkt ich und den Brauch,<br>
Und mit Geistesstärke<br>
Tu ich Wunder auch.
</p>
<p class="lila">
Walle! walle<br>
Manche Strecke,<br>
Daß zum Zwecke,<br>
Wasser fließe<br>
Und mit reichem, vollem Schwalle<br>
Zu dem Bade sich ergieße.
</p>
</body>
</html>

Klassenformatierungen und globale Formatierungen können beliebig ergänzt werden.

Auch dem Body-Tag können Formatierungen zugewiesen werden.
Suche im Internet den kompletten Text des Zauberlehrlings von Goethe und formatiere jede Stro-
phe in einer eigenen Farbe. Die Farbnamen findest du ebenfalls im Internet.
Alternativ kannst du die Farben auch als Hexadezimalwert angeben. Z.B. color:#500645;
10 Webseiten mit HTML und CSS (V 2.0)

Übung – Formatierung direkt im HTML-Element

Sollen nur einzelne HTML-Elemente formatiert werden, benutzt man das Style-Attribut.
Ein Attribut wird in das Start-Tag hinter die Tag-Bezeichnung geschrieben und weist einem
HTML-Element weitere Eigenschaften zu.
Beispiel: <p style=“color:green; font-family: Verdana“>
Hier steht der Text
</p>
Diese direkte Formatierung sollte aber nur in Ausnahmefällen benutzt werden, da der Quellcode
schnell unübersichtlich wird.
Schreibe die Datei und speichere sie unter direkte_formatierung.html.
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Direkte Formatierung</title>
<style type="text/css">
* { font-family:'Times New Roman',Times,serif; }
Universalselektor: body{ background: silver; }
Gilt im ganzen Dokument h2 { text-align:center; border:1px solid mediumblue }
p { font-size:12px; }
</style>
</head>
<body>
<h2>
Direkte Formatierung
</h2>
<p>
Dieser Absatz ist global formatiert.
</p>
<p style="background-color:plum">
Dieser Absatz ist direkt formatiert.
</p>
<p>
Hier ist ein <b style="font-size:2em">Wort</b> formatiert.
</p>
</body>
</html>
Informatik@[Link] Webseiten 11

Übung – CSS in externer Datei

Vor allem in größeren Homepages macht es Sinn, die CSS-Formatierungen in einer externen
Datei zu speichern. Die Datei wird unter der Endung .css gespeichert und kann dann in allen
HTML-Seiten eingebunden werden.
Der Vorteil ist, dass jetzt alle Seiten das gleiche Format haben.
<!DOCTYPE html>
seite_1.htm
<html>
<head>
<meta charset="UTF-8">
<title>Seite 1</title>
<link rel="stylesheet" type="text/css" href="[Link]"/>
</head>
<body>
<h1>
Seite 1
</h1> Link auf die CSS-Datei
<p>
Dies ist die Seite 1.
</p>
<p>
Hier geht es zu <a href="seite_2.html">Seite 2</a>
</p>
</body>
</html>

<!DOCTYPE html>
seite_2.htm
<html>
<head>
<meta charset="UTF-8">
<title>Seite 2</title>
<link rel="stylesheet" type="text/css" href="[Link]" media="screen" />
<link rel="stylesheet" type="text/css" href="[Link]" media="print" />
</head>
<body>
<h1>
Seite 2
</h1> Diese Zeile ist optional
<p>
Dies ist die Seite 2.
</p>
<p>
Hier geht es zu <a href="seite_1.html">Seite 1</a>
</p>
</body>
</html>

* { font-family:Verdana,sans-serif; }
body{ background: darksalmon; }
[Link]
h1 { text-align:center; border:2px solid mediumblue; background-color: lightblue; }
p { font-size:12px; }
12 Webseiten mit HTML und CSS (V 2.0)

Wenn alles richtig ist, sollte die Seite 1 so aussehen.

Das Wort „Seite 2“ ist ein Link auf die andere HTML-Seite. Zu den Links kommen wir später.
Kannst du die Übung um eine Seite 3 erweitern und verlinken?

Zusatz: CSS-Formatierung
Erstelle die folgende Seite.
Die Linie hat den HTML-Tag <hr> und die CSS-Formatierung
hr { border:2px solid mediumblue; }
Die Formatierung für den p-Tag lautet
p { font-size:12px; text-align:justify; }

Zusatz: Docx-Dateien sind auch fast HTML

 Erstelle ein Word-Dokument mit Word ab 2007 (*.docx) und speichere es ab.
 Benenne im Explorer die Endung in .zip um.
 Öffne die Zip-Datei und schaue dir die Unterordner an. Was stellst du fest?
Informatik@[Link] Webseiten 13

Weitere HTML-Elemente
(Hinweis: Auch wenn einige Zeilen des Grundgerüstes werden aus Platzgründen nicht
mehr angezeigt, sind sie trotzdem nötig!)

Theorie: Listen
Im HTML unterschiedet zwischen sortierten und unsortierten Listen. Beide werden zunächst mit
HTML erstellt und dann ggf. mit CSS gestaltet.
Beispiel: Unsortierte Liste
<ul>
<li>Deutsch</li>
<li>Mathematik</li>
<li>Englisch</li>
</ul>

Beispiel: Sortierte Liste

<ol>
<li>Hausaufgaben machen</li>
<li>Lernen für die Arbeit</li>
<li>Mit Freunden treffen</li>
</ol>

Mit dem CSS-Style list-style-type: kann das Aussehen von Listenzeichen kontrollieren.

list-style-type: decimal für ol-Listen: Nummerierung 1.,2.,3.,4. usw.

list-style-type: lower-roman für ol-Listen: Nummerierung i.,ii.,iii.,iv. usw.
list-style-type: upper-roman für ol-Listen: Nummerierung I.,II.,III.,IV. usw.
list-style-type: lower-latin für ol-Listen: Nummerierung a.,b.,c.,d. usw.
list-style-type: upper-latin für ol-Listen: Nummerierung A.,B.,C.,D. usw.
list-style-type: disc für ul-Listen: gefüllter Kreis als Bullet-Zeichen
list-style-type: circle für ul-Listen: leerer Kreis als Bullet-Zeichen
list-style-type: square für ul-Listen: rechteckiges Bullet-Zeichen
list-style-type: none kein Zeichen oder Nummerierung

Beispiel:
<ul style="list-style-type:circle">
<li>Milch</li>
<li>Käse</li>
<li>Wurst</li>
</ul>

Natürlich kann die CSS-Formatierung auch im Style-Element im Head erfolgen.

14 Webseiten mit HTML und CSS (V 2.0)

Übung: Listen
Erstelle eine unsortierte Liste mit einer Einkaufsliste (Natürlich mit Überschrift)
Erstelle eine sortierte Liste mit Urlaubswünschen (Auch mit Überschrift)
Erstelle eine verschachtelte Liste wie im Beispiel:

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Autokauf</title>
<style type="text/css">
ul { list-style-type:circle; }
CSS-Format <ul>
</style>
</head>
<body>
<h1>
Augen auf beim Autokauf
</h1>
<ol style="list-style-type:upper-latin">
<li>Räder</li>
<ul>
<li>Alle da?</li>
<li>Luft vorhanden?</li>
</ul>
<li>Licht</li>
<ul>
<li>Leuchtet?</li>
</ul>

Hier fehlt was!

</ol>
</body>
</html>
Informatik@[Link] Webseiten 15

Theorie: Bilder
Bilder werden in HTML mit dem img-Element eingefügt. Das img-Element hat keinen abschlie-
ßenden Tag.
<img src=“[Link]“ alt=“Alternativtext“ />
 Mit dem Attribut src wird der Pfad zum Bild angegeben. Liegt das Bild z.B. in einem Ordner
„bilder“, lautet die Pfadangabe src=“bilder/[Link]“.
 Das Attribut alt legt den Text fest, den der Browser anzeigt, wenn das Bild nicht gefunden
wird. Das Attribut ist Pflicht!
 Weitere HTML-Attribute sind z.B. width=“100px“ und height=“100px“ für die Bildgröße.
 Ebenso kann mit dem optionalen Attribut title=““ der Bildtitel beim Überfahren angegeben
werden.
Bilder auf Internetseiten dürfen nur die Formate JPEG, GIF oder PNG haben. Dabei ist darauf zu
achten, dass die Dateigröße möglichst klein ist, um lange Ladezeiten zu vermeiden. Grundsätz-
lich gilt:
o Für die Auflösung reichen 72dpi (Dots per Inch)
o Die Bildgröße nur in Ausnahmefällen mit HTML verkleinern. Besser ist es, das Bild vor dem
Einbau mit einem Grafikprogramm zu verkleinern, z.B. mit Irfanview.

Übung: Bilder
Suche im Internet einige geeignete Bilder und speichere sie in deinem Arbeitsordner.
Erzeuge folgende Datei mit deinem Bild.
<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Fortbewegungsmittel</title>
</head>
<body>
<h1>
Fortbewegungsmittel
</h1>
<h2>
LKW
</h2>
<p>
<img src="[Link]" alt="LKW" />
Zum Transport schwerer Lasten werden heute LKW eingesetzt. …
</p>
<h2>
Kamele
</h2>
</body>
</html>
16 Webseiten mit HTML und CSS (V 2.0)

Je nach Fenstergröße und Bildergröße sollte deine Webseite dann so aussehen:

Um einen schönern Umlauf des Textes um das Bild zu erreichen, müssen wir auch hier CSS
einsetzen. Wie immer gilt auch hier, entweder im Head, oder direkt im img-Tag mit style=““.
Im Head könnte es z.B. so aussehen:

<style type="text/css">
img{ float:left; margin-right:20px; margin-bottom:20px; }
</style>

Textumfluss: Abstand zur Seite: Abstand nach oben/unten:

left oder right margin-left oder margin-right margin-top oder margin-bottom

Die Webseite könnte dann so aussehen: oder so:

Informatik@[Link] Webseiten 17

Wenn man das CSS-Format float benutzt, kann es aber auch zu unerwünschten Nebeneffekten
kommen. Hier wurde die Seite sehr breit geöffnet. Achte auf die Überschrift „Kamele“:

Um zu verhindern, dass der nächste Absatz auch um ein Bild umgebrochen wird, muss man hier
den Befehl style=“clear:left“ bzw style=“clear:right“ ergänzen.

Zum Transport schwerer Lasten werden heute LKW eingesetzt.

</p>
<h2 style="clear:left">
Kamele
</h2>

Du kannst die Seite mit den Fortbewegungsmitteln noch um einige erweitern.

Versuche auch, den Textumfluss abwechselnd zu tauschen. Dafür kannst du bei einigen Bildern
mit style= die Formatierung im Head verändern.

<h2 style="clear:left">
Kamele
</h2>
<p>
<img src="[Link]" alt="Kamel" style="float:right"/>
Das Kamel lebt hauptsächlich in Wüsten.
</p>

Natürlich solltest du jetzt auch den Abstand zur Seite anpassen.

18 Webseiten mit HTML und CSS (V 2.0)

Das Pferdebild ist allerdings viel zu groß für diese Seite. Du kannst es mit den HTML-Attributen
width=“200px“ oder height=“200px“ verkleinern.

1 <p>
2 <img src="[Link]" alt="Pferd" width="200px"/>
3 Pferde sind heute nur noch selten Arbeitstiere.
4 </p>

Besser ist es, wenn du die Verkleinerung am Bild mit einem Grafikprogramm vornimmst.
Du kannst dazu z.B. das Gratis-Programm InfanView nutzen:
Informatik@[Link] Webseiten 19

Theorie: Links
Links sind die große Erfindung des Internets. Mit Links kann man von einer Seite auf eine andere
Seite springen und so durch das Internet „surfen“.
<a href=“[Link] Google Seite</a>
Ein Link besteht immer aus einem Start-Tag mit der URL, also der Adresse der zu öffnenden
Seite, einem angezeigten Text und dem End-Tag.
Anstatt Text kann zwischen den a-Tags auch ein Bild stehen.

Je nachdem, wohin der Link gehen soll, sieht die URL anders aus:
 Link zu einer anderen Seite im Internet:
<a href=“[Link]
 Link zu einer anderen Seite deiner Homepage:
<a href=“seite_2“>Seite 2</a>
 Link zu einer anderen Seite deiner Homepage, die in einem Unterordner liegt:
<a href=“unterordner/seite_2“>Seite 2</a>
 Link zu einer anderen Seite deiner Homepage, die in einem übergeordneten Ordner liegt:
<a href=“../seite_2“>Seite 2</a>

Auch Links kann man mit CSS formatieren:

<style type="text/css">
a:link { font-weight:bold; color:blue; text-decoration:none; }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:green; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }
</style>

Finde selbst heraus, was die einzelnen Formatierungen bedeuten.

Um Fehler zu vermeiden schreibt man Datei- und Ordnernamen möglichst immer klein.

Übung: Links
Erstelle folgende Seite (mit Grundgerüst!) mit dem Namen [Link] in deinem Ordner:

<body>
<h1>
Startseite
</h1>
<p>
Dies ist die Indexseite.
Dies ist der <a href="unterordner/[Link]">Link</a>.
</body>
20 Webseiten mit HTML und CSS (V 2.0)

Erstelle einen Order „unterordner“ und erstelle dort diese Datei „[Link]“:

<body>
<h1>
Inhaltsseite
</h1>
<p>
Dies ist die Inhaltsseite.
Hier gehts <a href="../[Link]">zurück</a>.
</body>

Danach solltest du zwischen den Seiten hin und her springen können.
Ergänze die CSS-Formatierung in beiden Seiten oder binde sie als externe CSS-Datei ein.

Zusatz: Kleine Webseite mit Kochrezepten

Erstelle in deinem Ordner einen neuen Ordner „kochrezepte“.
In diesen Ordner legst du eine Datei „[Link]“, eine Datei „[Link]“, einen Ordner „Bilder“
und einen Ordner „html“. In den Ordner html sollen die Rezeptseiten.
Erstelle weitere Seiten und ergänze sie mit geeigneten Bildern

[Link]

[Link]

1 a:link { font-weight:bold; color:blue; text-decoration:none; }

2 a:visited { font-weight:bold; color:gray; text-decoration:none; }
3 a:focus { font-weight:bold; color:red; text-decoration:underline; }
4 a:hover { font-weight:bold; color:green; text-decoration:none; }
5 a:active { font-weight:bold; color:lime; text-decoration:underline; }
6 * { font-family:Verdana,sans-serif; }
7 body { background: snow; }
8 h1 { font-size:18px; }
9 h2 { font-size:16px; }
10 p { font-size:14px; }
11 ul { list-style-type:circle; }
Informatik@[Link] Webseiten 21

Theorie: Tabellen
Tabellen haben in HTML zwei Aufgaben:
 Darstellung von tabellarischen Daten, z.B. Fußballergebnisse
 Formatierung mit versteckten Tabellen
Der Quelltext ist für beides gleich, nur die Formatierung und der Inhalt sind verschieden.
Grundsätzlich sieht der HTML-Code für eine Tabelle so aus:
<body>
<table>
<tr>
<th>Kopfzelle 1</th>
<th>Kopfzelle 2</th>
<th>Kopfzelle 3</th>
</tr>
<tr>
<td>Inhalt 1</td>
<td>Inhalt 2</td>
<td>Inhalt 3</td>
</tr>
<tr>
<td>Inhalt 4</td>
<td>Inhalt 5</td>
<td>Inhalt 6</td>
</tr>
</body>

Einige Erklärungen zur Tabelle:

<table>: Hier beginnt die Tabelle. Standardmäßig wird kein Rahmen angezeigt. Wir spre-
chen dann von einer versteckten Tabelle.
Soll ein Rahmen angezeigt werden, muss im Style-Element die Zeile
table, td, th {border: 1px solid red;}
angegeben werden.
<tr></tr>: Das Element <tr></tr> legt jeweils eine neue Tabellenzeile an.
<th></th>: Das Element <th></th> legt jeweils eine Tabellenkopf-Zelle an. Diese hebt sich
von einer normalen Zelle durch eine fette Schrift ab und kann mit CSS einzeln
formatiert werden.
<td></td>: Das Element <td></td> legt jeweils eine normale Tabellen-Zelle an.

Wichtig: In jeder Tabellenzeile muss die gleiche Anzahl von Zellen vorkommen.

Eine Tabellenformatierung mit CSS kann dann so aussehen:

<style type="text/css">
table, td, th {border: 1px solid red;}
table {width:400px; height:200px;}
th {text-align:center; background-color:gray;}
td {text-align:justify; vertical-align:top;}
</style>

Weitere Formatierungsmöglichkeiten werden in den

Übungen erklärt.
22 Webseiten mit HTML und CSS (V 2.0)

Übung: Tabellen
Erstelle folgende Tabellen:

 Soll nur eine Spalte eine bestimmte Größe erhalten, gibt man im ersten Tag der Spalte die
Breite an: <th style="width:200px">Adresse</th>

Sollen in einer Tabelle zwei nebeneinander liegende Zellen verbunden werden, benutzt man das
Attribut colspan.

<table>
<tr>
<th colspan="2">Zelle über 2 Spalten</th>
</tr>
<tr>
<td>rechte Zelle</td>
<td>linke Zelle</td>
</tr>
</table>

Um mehrere untereinander liegende Zellen zu verbinden, nutzt man hingegen das Attribut
rowspan.

<table>
<tr>
<td rowspan="2">Zelle über 2 Zeilen</td>
<td>obere Zelle</td>
</tr>
<tr>
<td>untere Zelle</td>
</tr>
</table>

Um ein Schachbrett zu erzeugen, benutzt man eine CSS-Klasse schwarz und weist sie dann
abwechselnd den Zellen zu. <style type="text/css">

table {width:600px; height:600px; }

Informatik@[Link] Webseiten 23

.black{background:black; }
</style>

Für diese Seite ist viel CSS nötig.

<style type="text/css">
* { font-family:Verdana,sans-serif;
text-align:center; }
table, td, th {border: 1px solid #85CD2E;
border-collapse: collapse} /* kein doppelter Rahmen */
table { width:550px; }
th { font-size:14px;
padding:6px;}
td { font-size:10px;
height:14px;
padding:3px; /* Innenabstand */
min-width:35px; } /* Mindestbreite */
.stark { background:red; }
.mittel { background:orange; }
.schwach{ background:yellow; }
</style>
24 Webseiten mit HTML und CSS (V 2.0)

Theorie: Absolute Positionierung

Für die absolute Positionierung benutzt man ein Div-Container. Dadurch schaft man ein frei po-
sitionierbares HTML-Element, welches dann wiederum weitere HTML-Elemente wie z.B. Text,
Bilder, Listen oder Tabellen enthalten kann.
(Die Position wird in Pixeln angegeben. Top:0; left:0 ist oben links im Browserfenster.)

Man kennt es in Textverarbeitungsprogrammen unter dem Begriff „Textfeld“ , ein „Post-IT“

würde auf einem Blatt Papier den gleichen Zweck erfüllen.

<body>
<div style="position:absolute; top:130px; left:300px">Text</div>
</body>

Das Div-Element ist dazu da, einen bestimmten Bereich mit CSS zu formatieren. Es hat ansonsten nur
die Auswirkung, dass nach dem End-Div-Tag automatisch ein Absatz gesetzt wird.

Gibt man dem Div-Element weitere CSS-Attribute hinzu, erhält das Element z.B. einen
Rahmen oder einen Hintergrund.

9 <body>
10 <div style="position:absolute; top:130px; left:300px">Text1</div>
11 <div style="position:absolute; top:30px; left:100px; width:200px;
12 height:100px; background-color:#FFDF00; border:1px solid #804000;">
13 Text 2
14 </div>
15 </body>
Informatik@[Link] Webseiten 25

Liegen mehrere Ebenen übereinander, entscheidet die Reihenfolge im Quelltext. Es gilt:

Je später im Quelltext, umso weiter oben.

9 <body>
10 <div style="position:absolute; top:130px; left:300px">Text1</div>
11 <div style="position:absolute; top:30px; left:100px; width:200px;
12 height:100px; background-color:#FFDF00; border:1px solid #804000;">
13 Text 2
14 </div>
15 <div style="position:absolute; top:80px; left:110px; width:200px;
16 height:100px; background-color:green; border:1px solid #804000;">
17 Text 3
18 </div>
19 </body>
20 </html>

Übung: Absolute Positionierung

Erstelle folgende Webseite:

Erstelle eine Webseite mit mehreren Ebenen, die auch Bilder enthalten.

Zusatz: CSS3
Mit CSS3 kannst du Schattierungen oder abgerundete Rahmen erstellen. Wenn du in
einer Suchmaschine „CSS3 generator“ eingibst, findest du Webseiten, mit denen du
dies einfach erstellen kannst.
Nutze dies für die absolute Positionierung oder Tabellen.
26 Webseiten mit HTML und CSS (V 2.0)

Wiederholung: Bilder
 Schreibe handschriftlich den Quelltext für diese Seite auf. (Auch das Grundgerüst!).
Die Bilder heißen Hamburg_1.jpg und Hamburg_2.jpg. Den wiederholten Text musst
du nur andeuten.

 Erstelle eine ähnliche Seite mit Texten und Bildern deiner Wahl am PC
Informatik@[Link] Webseiten 27

Wiederholung: Tabellen
 Schreibe handschriftlich den Quelltext für diese Seite auf. (Auch das Grundgerüst!).
Die CSS-Angaben lauten folgendermaßen:

table {width:400px; height:400px}

td {text-align:center; vertical-align:middle; }

 Erstelle eine ähnliche Seite deiner Wahl am PC

28 Webseiten mit HTML und CSS (V 2.0)

Aufbau von Webseiten

Theorie: Semantisches HTML

Semantisches HTML bedeutet, die Webseite zu strukturieren und dieses mit eigenen
„bedeutungsvollen“ Tags zu strukturieren.
Das Layout der Seite ist dabei zunächst nebensächlich und wird erst später mit CSS
festgelegt.
Beispiele für Semantisches HTML:

Zweispaltiges Layout Dreispaltiges Layout

(horizontale Navigation) (vertikale Navigation)
<header> <header>
<nav>

<nav> <main> <aside>

<main> <aside>

<footer> <footer>
Das Main-Element kann <article>-Tags enthalten, um auch hier weiter zu untergliedern.
<header>, <aside> und <footer> können natürlich auch weggelassen werden, um den
Quelltext zu vereinfachen.

Theorie: Navigation
Will man nicht nur eine einzelne Seite erstellen, benötigt man ein Navigationsmenü, um zwischen
den verschiedenen Seiten des Web-Auftrittes (Website) wechseln zu können.
Momentan ist es üblich, die Navigationspunkte in eine unsortierte Liste <ul> zu schreiben und dann
mit CSS zu formatieren.

Theorie: Box-Modell
Das Box-Modell zeigt, welche Bedeutung die Größen- und Abstandsattribute haben:
Informatik@[Link] Webseiten 29

Übung: Einspaltiges Layout

Wichtig: Der Body-Teil ist bei drei Layout-Beispielen in diesem Kapitel sehr ähnlich aufgebaut.
Die Unterschiede liegen überwiegend an Veränderungen in den CSS-Styles.
<!doctype html>
<html>
<head>
<title>Einspaltiges Layout</title>
<meta charset="UTF-8">
<style type="text/css">
* { margin:0px;
padding:0px;
border: 0px; }
header, footer { background-color: #DDDDDD;
padding: 5px;
text-align:center; }
nav { background-color: #BBBBBB;
padding: 5px;
text-align:center;
font-weight: bold; }
nav ul { list-style-type: none; }
nav ul li { display: inline; }
</style>
</head>
<body>
<header>Einspaltiges Layout</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<main>
<h1>Überschrift</h1>
<p>Text 1</p>
</main>
<footer>Fußzeile</footer>
</body>
</html>

Einige Erklärungen zum Style-Element:

* Der Universalselektor * setzt alle Abstände zunächst auf 0, da sie sonst in den
Browsern unterschiedliche Standardwerte haben können.
nav ul Hier wird die Liste formatiert, die innerhalb der Navigation liegen.
nav ul li Mit display: inline wird festgelegt, das die Listeneinträge in der Navigation keinen
Zeilenumbruch haben.
30 Webseiten mit HTML und CSS (V 2.0)

Übung: Zweispaltiges Layout

<!doctype html>
<html>
<head>
<title>Zweispaltiges Layout</title>
<meta charset="UTF-8">
<style type="text/css">
* { margin:0px;
padding:0px;
border: 0px; }
header, footer { background-color: #DDDDDD;
padding: 5px;
text-align:center; }
Mit #spalten for- nav { background-color: #BBBBBB;
matieren wir das padding: 5px;
HTML-Element text-align:center;
mit der ID „spal- font-weight: bold; }
ten“. Die IDs äh- nav ul { list-style-type: none; } padding: 0px 5px legt
neln den Klassen. nav ul li { display: inline; den Abstand zwischen
padding: 0px 15px } den Listenpunkten fest.
#spalten { display: table;
min-width: 720px; O nach oben und unten
max-width: 60em; }
aside { background-color: #AAAAAA; 15 nach links und rechts
padding: 5px;
width: 180px;
display: table-cell; }
main { padding: 5px;
display: table-cell; }
</style>
</head>
<body>
<header>Zweispaltiges Layout</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Impressum</a></li> Mit CSS display:table wird fest-
<li><a href="#">Kontakt</a></li>
</ul>
gelegt, dass sich die darin lie-
</nav> genden Elemente (display:
<div id="spalten"> table-cell) wie Tabellenzellen
<aside> benehmen sollen.
<h3>Seitenleiste</h3>
<p>z.B. Links oder Untermenü</p>
Sie haben dann z.B. die glei-
<ul> che Höhe.
<li><a href="#">Link 1</a></li>
</ul>
</aside>
<main>
<h1>Inhalt</h1>
<p>Hier steht der Text. … Hier steht der Text.</p>
</main>
</div>
<footer>Fußzeile</footer>
</body>
</html>
Informatik@[Link] Webseiten 31

Übung: Dreispaltiges Layout

Wird hier das Wort „auto“
<!doctype html>
<html> ergänzt (vor dem ;), ist das
<head> Layout immer im Fenster
<title>Dreispaltiges Layout</title> zentriert.
<meta charset="UTF-8">
<style type="text/css">
* { margin:0px; Die minimale Größe des
padding:0px; Layouts ist 720px. Ist das
border: 0px; } Fenster kleiner, gibt es
body { min-width: 720px;
max-width: 60em;} Scrollbalken.
header, footer { background-color: #DDDDDD; Die maximale Größe sind
padding: 5px;
text-align:center;} 60 Zeichen. Dies dient der
#spalten { display: table; } besseren Lesbarkeit.
nav { background-color: #BBBBBB;
padding: 5px;
width: 160px;
display: table-cell; }
nav ul { list-style-type: none; }
aside { background-color: #AAAAAA;
padding: 5px;
width: 180px;
display: table-cell; }
main { padding: 5px;
display: table-cell; }
li { margin: 5px 15px }
</style>
</head>
<body>
<header>Dreispaltiges Layout</header>
<div id="spalten">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Impressum</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
<main>
<h1>Inhalt</h1>
<p>Hier steht der Text. … Hier steht der Text. Hier steht der
Text. Hier steht der Text.</p>
</main>
<aside>
<h3>Seitenleiste</h3>
<p>z.B. Links oder Werbung</p>
<ul>
<li><a href="#">Link 1</a></li>
</ul>
</aside>
</div>
<footer>Fußzeile</footer>
</body>
</html>
32 Webseiten mit HTML und CSS (V 2.0)

Zusatz: Erweiterungen für den <main>-Tag

Bisher steht im <main>-Teil nur eine Überschrift mit einem Text.
Um den <main>-Teil weiter zu strukturieren, kann der <article>-Tag benutzt werden.
Dieses würde man z.B. für einen Blog mit verschiedenen Einträgen verwenden.
<main>
<article>
<h1>Artikel 1</h1>
<p>Text 1</p>
</article>
<article>
<h1>Artikel 2</h1>
<p>Text 2</p>
</article>
</main>

Übungen: Menü mit Buttons

Bisher besteht das Menü aus Wörtern. Sollen sie einen Button-Effekt bekommen, muss im Style-
Element folgendes ergänzt werden:
nav ul li a { border: 1px solid #000000;
background-color: #F7932E;
padding: 2px 5px 2px 5px;
color: #000000;
text-decoration: none;
font-weight: bold; }
nav ul li a:hover { background-color: #A55E16;
color: #ffffff; }

Zusatz: Menü mit Buttons und Untermenü

Zunächst müssen die Untermenüpunkte als verschachtelte Liste im Body angegeben

werden:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Impressum</a></li>
<li>
<a href="#">Kontakt</a>
<ul>
<li><a href="#">Anfahrt</a></li>
<li><a href="#">Formular</a></li>
</ul>
</li>
</ul>
</nav>
Informatik@[Link] Webseiten 33

Dann folgt die Erweiterung des Style-Elements (Neuerungen sind fett gedruckt):
<style type="text/css">
* { margin:0px;
padding:0px;
border: 0px; }
header, footer { background-color: #DDDDDD;
padding: 5px;
text-align: center; }
nav { background-color: #BBBBBB;
height: 30px;
padding: 5px 0px 0px 0px;
text-align: center;
font-weight: bold; }
nav ul { list-style-type: none; }
nav ul li { float: left;
position: relative; }
nav ul li a { display: block;
width: 100px;
border: 1px solid #000000;
background-color: #F7932E;
padding: 2px 5px 2px 5px;
color: #000000;
text-decoration: none;
font-weight: bold; }
nav ul li a:hover { background-color: #A55E16;
color: #ffffff; }
nav ul li ul { display: none;
position: absolute; }
nav ul li:hover ul { display: block; }
nav ul li:hover ul a { display: block;
width: 100px;
color: black;
text-align: center;
background-color: yellow; }
nav ul li ul li a:hover { background-color: silver; }
</style>

Theorie: Webseite mit mehreren Seiten

Will man eine Webseite aus mehreren Seiten erstellen, ist es sinnvoll, zuerst die Startseite mit
der kompletten Navigation fertig zu stellen. (Geht natürlich auch mit externem CSS!)
Diese Startseite wird dann die Vorlage für alle weiteren Seiten. Hier wird dann nur noch der Inhalt
ausgetauscht.
Nachteil: Will man die Navigation verändern, muss man dies in jeder einzelnen Datei tun. Mit PHP
werden wir dies später verbessern.

Übung: Webseite mit mehreren Seiten

Erstelle eine Webseite mit einer Navigation deiner Wahl mit mindestens 3 verschiedenen Inhalts-
seiten.
Du kannst dafür deine Dateien aus den anderen Kapiteln nutzen. Kopiere dazu den Quelltext aus
dem Body in den Main-Teil.
Lege für eine Webseite unbedingt einen eigenen Ordner an, in dem alle Dateien vorhanden sind.