0% fanden dieses Dokument nützlich (0 Abstimmungen)

16 Ansichten

HTML

Hochgeladen von

alkis.schlossmann

Verfügbare Formate

Als PDF, TXT herunterladen oder online auf Scribd lesen

0% fanden dieses Dokument nützlich (0 Abstimmungen)

16 Ansichten

HTML

Hochgeladen von

alkis.schlossmann

Verfügbare Formate

Als PDF, TXT herunterladen oder online auf Scribd lesen

Sie sind auf Seite 1/ 66

Themengebiet: Web Design

Betriebssystem: Windows
Zielgruppe: Anwender

Einführung in HTML und CSS

Grundlegende Konzepte und einfache Beispiele

Version 4.1, 23. März 2009

Universität Osnabrück
- Rechenzentrum -
Dipl.-Math Frank Elsner
eMail: [email protected]
Internet: http://www.home.uni-osnabrueck.de/elsner/Skripte/html.pdf
Inhaltsverzeichnis
1 Einleitung.............................................................................................................................4
1.1 Zielsetzung...................................................................................................................4
1.2 Voraussetzungen.........................................................................................................4
1.3 Selbststudium oder Teilnahme am Kurs......................................................................4
1.4 Überblick über die behandelten Themen.....................................................................4
1.5 Download.....................................................................................................................5
1.6 Weiterführende Literatur..............................................................................................5
1.7 Feedback.....................................................................................................................6
2 Erste Schritte.......................................................................................................................7
2.1 Erstellen eines Kurs-Verzeichnisses...........................................................................7
2.2 Erstellen einer Web-Seite mit dem Windows Editor....................................................8
2.3 Anzeigen der Web-Seite in einem Browser.................................................................9
2.4 Hinzufügen von Überschrift und Absätzen................................................................11
2.5 Syntax........................................................................................................................13
2.6 Übungen....................................................................................................................13
3 Kennenlernen von Expression Web..................................................................................14
3.1 Starten von Microsoft Expression Web 2..................................................................14
3.2 Übungen....................................................................................................................20
4 Listen und einfache Textformatierung..............................................................................21
4.1 Listen.........................................................................................................................21
4.2 Syntax........................................................................................................................22
4.3 Übungen....................................................................................................................22
4.4 Textformatierung........................................................................................................23
4.5 Syntax........................................................................................................................23
4.6 Übungen....................................................................................................................24
5 Einfügen von Tabellen......................................................................................................25
5.1 Einfache Tabelle mit 2 Zeilen und 9 Spalten.............................................................25
5.2 Syntax........................................................................................................................28
5.3 Übungen....................................................................................................................28
5.4 Seitenlayout per Tabelle............................................................................................29
5.5 Syntax........................................................................................................................30
5.6 Übungen....................................................................................................................30
6 Einfügen von Bildern.........................................................................................................31
6.1 Verwenden von Piktogrammen (Icons).....................................................................31
6.2 Syntax........................................................................................................................32
6.3 Übungen....................................................................................................................32
6.4 Auswählen eines geeigneten Bild-Formates.............................................................33
6.5 Informationen zum Bildformat GIF.............................................................................33
6.6 Informationen zum Bildformat JPEG.........................................................................34
6.7 Übungen....................................................................................................................34
7 Verwenden von Cascading Style Sheets (CSS)...............................................................35
7.1 Definieren von Formatvorlagen direkt im Dokument.................................................35
7.2 Syntax........................................................................................................................38
7.3 Übungen....................................................................................................................38
7.4 Definieren von Klassen in Formatvorlagen...............................................................39
7.5 Übungen....................................................................................................................41
7.6 Verwenden einer Basisvorlage in einer css-Datei.....................................................42
7.7 Syntax........................................................................................................................43
7.8 Übungen....................................................................................................................43
8 Einfügen von Hyperlinks und Ankern................................................................................45
8.1 Zielsetzung für Hyperlinks ........................................................................................45
8.2 Verweisen auf externe HTML Dokumente................................................................45
8.3 Syntax........................................................................................................................46
8.4 Übungen....................................................................................................................47
8.5 Verweisen innerhalb des selben HTML Dokuments.................................................47
8.6 Syntax........................................................................................................................48
8.7 Übungen....................................................................................................................48
9 Einfügen von sensitiven Bildern........................................................................................50
9.1 Erstellen eines sensitiven Bildes...............................................................................50
9.2 Syntax........................................................................................................................52
9.3 Übungen....................................................................................................................52
10 Einbinden von Formularen..............................................................................................53
10.1 Versenden eines Formulars per E-Mail...................................................................53
10.2 Syntax......................................................................................................................54
10.3 Übungen..................................................................................................................56
11 Gestalten von Seiten mit Stilvorlagen.............................................................................58
11.1 Verwenden eines 3-spaltigen Layouts.....................................................................58
11.2 Übungen..................................................................................................................59
12 Abschluß-Projekt.............................................................................................................60
13 Anhang............................................................................................................................61
13.1 Schriftarten für CSS.................................................................................................61
13.2 Farben......................................................................................................................62
Einführung in HTML und CSS Einleitung

1 Einleitung

1.1 Zielsetzung
Dieses Skript bietet einen ersten Einblick in die Konzepte von HTML und CSS und hilft Ih-
nen, die ersten Web-Seiten zu erstellen.

1.2 Voraussetzungen
In diesem Skript werden grundlegende Kenntnisse des Microsoft Windows Betriebssys-
tems (Dateisystem mit Verzeichnissen und Dateien, Starten und Beenden von Program-
men, Bedienung von Tastatur und Maus) sowie grundlegende Kenntnisse über Textbear-
beitung vorausgesetzt.

1.3 Selbststudium oder Teilnahme am Kurs

Sie können dieses Skript im Selbststudium durcharbeiten und sollten dabei die Übungen
bearbeiten. Die mit "[zusätzlich]" gekennzeichneten Übungen gehen über den Stoff dieses
Skriptes hinaus und können nur mit Hilfe weiterführender Literatur gelöst werden.
Es ist für Studenten und Mitarbeiter der Universität Osnabrück empfehlenswert, an einer
Veranstaltung des Rechenzentrums zu diesem Thema teilzunehmen. Im Rahmen dieser
Veranstaltungen besteht die Möglichkeit, mit Microsoft Expression Web 2 zu arbeiten.
Für das Selbststudium sollten Sie Microsoft Expression Web 2 oder eine im Funktions-
umfang vergleichbare Software zum Bearbeiten von Web-Seiten zur Verfügung haben.

Im Rahmen der Microsoft Campuslizenz IT-Academy der Universität Osnabrück kön-

nen Studenten und Mitarbeiter das Produkt Microsoft Expression Web 2 im MSDN-AA
Portal kostenlos lizenzieren und auch direkt das Setup-Programm zum Installieren her-
unterladen, auf dem privaten Rechner installlieren und für Aufgaben in Forschung und
Lehre nutzen:

http://msdn40.e-academy.com/elms/Storefront/Storefront.aspx?campus=uos

1.4 Überblick über die behandelten Themen

Dieses Skript basiert auf "Microsoft Expression Web 2 für Windows" (im folgenden kurz
EW). In der Regel ist es möglich, die Vorgehensweise auch auf andere Programme zum
Erstellen und Bearbeiten von Web-Seiten zu übertragen, hierzu gehören beispielsweise
Adobe Dreamweaver, Compozer, Microsoft Sharepoint Designer und andere. Textver-

4
Einführung in HTML und CSS Einleitung

arbeitungsprogramme wie OpenOffice Writer und Microsoft Word sind, mit einigigen
Einschränkungen ebenfalls geeignet.

In diesem Skript werden folgende Themen behandelt:

● Erstellen von Web-Seiten mit Überschriften und Absätzen
● Kennernlernen der EW Benutzeroberfläche und Werkzeuge
● Erstellen einer Web-Präsenz (WebSite)
● Formatieren mit Hilfe von Formatvorlagen
● Einfügen von Tabellen
● Einfügen von Bildern
● Einfügen von Formularen

1.5 Download

Skript:
http://www.home.uni-osnabrueck.de/elsner/Skripte/html.pdf

Material:
(nur nach vorheriger Authentifizierung mit Uni-Login möglich!):
http://www.home.uos.de/elsner/Skripte/Material/HTML/

1.6 Weiterführende Literatur

1. SelfHTML
http://selfaktuell.teamone.de/
Hier finden Sie das Standardwerk für HTML; oft kopiert, aber in der Qualität uner-
reicht.
2. World Wide Web Konsortium
http://www.w3.org/
Hier werden alle das World Wide Web betreffenden Aktivitäten koordiniert und ver-
bindliche Regeln vereinbart.
3. WikiPedia Reader Internet
http://de.wikipedia.org/wiki/Wikipedia:WikiReader/Internet
Hier finden Sie Informationen zum Internet allgemein und der Bedeutung und histo-
rischen Entwicklung von HTML.

5
Einführung in HTML und CSS Einleitung

1.7 Feedback
Falls Sie Anregungen oder Kommentare - oder auch einfach nur Lob oder Kritik - zu die-
sem Skript haben, schicken Sie einfach eine Mail an:

[email protected]

6
Einführung in HTML und CSS Erste Schritte

2 Erste Schritte
In diesem Skript beschäftigen Sie sich ausschließlich mit Web-Seiten, die auf „HTML“ ba-
sieren. Derartige Dateien bezeichnen wir auch als HTML-Dateien. Die Abkürzung HTML
steht für Hypertext Markup Language (in etwa: Hypertext-Auszeichnungssprache oder
Hypertext Markierungssprache).
HTML ist eine Sprache, die die Struktur eines Dokuments beschreibt und nicht seine tat-
sächliche Gestaltung. Die meisten Dokumente nutzen gleichartige Elemente wie zum Bei-
spiel Titel, Überschriften, Absätze oder Listen, die konsequent über mehrere Dokumente
hinweg in einheitlicher Form dargestellt werden sollten.
Es besteht die Konvention, dass eine HTML-Datei die Dateiendung .htm oder .html be-
sitzt, wie z. B. index.htm oder LiesMich.html.

Hinweise:
Es gibt Web- oder Internet-Seiten, die auf anderen Formaten basieren, wie zum Bei-
spiel Adobe Acrobat PDF Dokumente (mit Dateiendung .pdf, wie z. B. Handbuch.pdf)
oder Flash Dokumente (mit Dateiendung .swf, wie z.B. Intro.swf). Die Erstellung von
Web-Seiten in anderen Formaten als HTML ist nicht Gegenstand dieses Skriptes.

2.1 Erstellen eines Kurs-Verzeichnisses

Legen Sie an geeigneter Stelle mit dem „Windows Explorer“ einen Ordner (Verzeichnis)
für die Übungsdateien und weiteres Material an, hier: „Eigene Dateien\Kurs-HTML“. Kopie-
ren Sie das Skript (Dateiname: html.pdf) und nach und nach alle verwendeten Dateien in
diesen Ordner.
Laden Sie zunächst das Skript in das Programm „Adobe Acrobat (Reader)“ und blenden
Sie das Inhaltsverzeichnis links in den Lesezeichen ein.

7
Einführung in HTML und CSS Erste Schritte

Abbildung 2.1: Adobe Acrobat (Reader) mit Skript

2.2 Erstellen einer Web-Seite mit dem Windows Editor

Jede Web- oder Internet-Seite basiert auf einer Datei, die auf dem eigenen Rechner oder
einem öffentlich zugänglichen Web Server liegt. Im Rahmen dieses Skriptes befinden sich
die Dateien nur auf dem eigenen Rechner.
Sie können den Text einer HTML-basierten Web-Seite, hier die Datei „index.01.htm“, mit
jedem beliebigen Textverarbeitungsprogramm oder Text-Editor schreiben und im Klartext
abspeichern:

<html>
<head>
<title>Das Sonnensystem</title>
</head>

<body>
Das Sonnensystem
[Quelle: Wikipedia http://de.wikipedia.org/wiki/Sonnensystem]

Überblick
Das Sonnensystem umfasst die Sonne, die sie umkreisenden Planeten und deren
natürliche Satelliten, die Zwergplaneten und andere Kleinkörper wie Kometen,
Asteroiden und Meteoroiden. Dem Sonnensystem gehört auch die Erde an.
[Bild vom Sonnensystem]

</body>

8
Einführung in HTML und CSS Erste Schritte

</html>

Die nebenstehende Abbildung zeigt beispielhaft, wie dieser Text im Windows Editor
erfaßt werden kann.
Starten Sie den Windows Editor über Start > Programme > Zubehör > Editor. Geben Sie
den Text wie oben vorgegeben ein.

Abbildung 2.2: HTML-Quelltext > Windows Editor

Speichern Sie diese Datei im Verzeichnis „Sonnensystem“ unter dem Namen

„index.01.htm“. Beenden Sie den Windows Editor über „Datei > Beenden“.

2.3 Anzeigen der Web-Seite in einem Browser

Ein Web Browser hat eine „eigene Sicht“ auf HTML-Quelltext. Die interessanten Bereiche
sind in der folgenden Abbildung hervorgehoben.

9
Einführung in HTML und CSS Erste Schritte

Abbildung 2.3: HTML-Quelltext > Bereiche und Bereichsmarkierungen

Starten Sie einen beliebigen Web Browser, hier Internet Explorer, und laden Sie die Da-
tei „index.01.htm“ über „Datei > Datei öffnen“.

Abbildung 2.4: HTML-Quelltext > Web Browser

Erläuterungen zur Darstellung im Web Browser:

1. Eine Web-Seite gliedert sich in unterschiedliche Bereiche, die anhand von Be-
reichsmarkierungen im HTML-Quelltext kenntlich gemacht werden.
2. Anfang und Ende eines Bereiches haben den selben Namen und werden durch
<...> (Anfang) und </...> (Ende) bezeichnet.

10
Einführung in HTML und CSS Erste Schritte

3. Der Eintrag für den Titel wird ausgewertet und in einem eigenen Feld angezeigt.
4. Zeilenumbrüche bei der Formatierung des HTML-Quelltextes werden stillschwei-
gend ignoriert, genauso wie Kommentare.

2.4 Hinzufügen von Überschrift und Absätzen

Die folgenden HTML-Elemente definieren Überschriften der Ebene 1 und Ebene 2 sowie
Absätze und Zeilenumbrüche.
Bereich HTML-Element Bemerkungen
Überschrift Ebene 1 <h1>...</h1> Möglich: h1 - h6
Überschrift Ebene 2 <h2>...</h2>
Absatz <p>...</p> Vergleichen Sie: <br />
Zeilenumbruch <br /> Ohne Inhalt!

Ergänzen Sie den Text durch Überschriften und Absätze wie durch die farbigen Markierun-
gen vorgegeben und speichern Sie unter „index.02.htm“.

Laden Sie die Datei „index.02.htm“ in einen Browser. Beachten Sie, wie der Web Browser
die zusätzlichen HTML-Elemente auswertet und die Darstellung verändert.

11
Einführung in HTML und CSS Erste Schritte

Abbildung 2.5: index.02.htm, Überschriften und Absätze

Speichern Sie die Datei und beenden Sie Windows Editor und Web Browser.

Gratulation – Sie haben Ihre erste Web-Seite mit Überschriften und Absätzen erstellt.

In den folgenden Kapiteln werden Sie mit "Microsoft Expression Web 2 für Windows"
(im folgenden kurz EW) ein Programm kennenlernen, das Sie umfassend bei der Erstel-
lung und Bearbeitung von Web-Seiten unterstützt.

Prinzipiell – eine gewisse Leidensfähigkeit vorausgesetzt - könnten Sie aber auch die
Web-Seiten aus allen folgenden Kapitel mit dem einfachen Windows Editor erstellen und
mit einem Web Browser testen.

12
Einführung in HTML und CSS Erste Schritte

2.5 Syntax
Bereich HTML-Element Bemerkungen
Gesamtes Dokument <html> … </html> Genau einmal,
äußere Schachtelung-
Klammer
Kopfbereich (Metadaten) <head> … </head> Genau einmal.
Titel <title> … </title> Im Kopfbereich.
Textbereich <body> … </body> Genau einmal.

Bereich HTML-Element Bemerkungen

Überschrift Ebene 1 <h1>...</h1> Möglich: h1 - h6
Überschrift Ebene 2 <h2>...</h2>
Absatz <p>...</p> Vergleichen Sie: <br />
Zeilenumbruch <br /> Ohne Inhalt!

2.6 Übungen
1. Legen Sie an geeigneter Stelle mit dem „Windows Explorer“ einen Ordner (Ver-
zeichnis) für die Übungsdateien und weiteres Material an, hier: „Eigene
Dateien\Kurs-HTML“.
2. Erstellen Sie die beiden Übungsdateien des vorherigen Kapitels.

13
Einführung in HTML und CSS Kennenlernen von Expression Web

3 Kennenlernen von Expression Web

In diesem Kapitel lernen Sie die Benutzeroberfläche und die Bedienung von "Microsoft
Expression Web 2 für Windows" (im folgenden kurz EW) anhand eines einfachen Bei-
spiels kennen.

3.1 Starten von Microsoft Expression Web 2

Erstellen Sie zunächst im Kurs-Verzeichnis ein Unterverzeichnis „Sonnensystem“.

Starten Sie EW über "Start > Programme > Microsoft Expression > Expression Web" (Vor-
einstellung) bzw. über den auf Ihrem Rechner eingestellten Menüpunkt.

EW besitzt eine Benutzeroberfläche, bei der das übliche Menüsystem und der Anzeigebe-
reich für Dokumente durch viele kontext-sensitive Paletten ergänzt wird.

Abbildung 3.1: Elemente der Benutzeroberfläche von EW

14
Einführung in HTML und CSS Kennenlernen von Expression Web

Erstellen Sie über „Datei > Neu > Website“ eine neue Web-Präsenz mit folgenden Einstel-
lungen.

Abbildung 3.2: Erstellen einer neuen Web-Präsenz (Website)

Es wird eine neue Web-Präsenz erstellt und die Startseite „index.htm“ bzw. „default.htm“
wird als erste Datei geladen und in einer geteilten Ansicht (Code- und Design-Ansicht) dar-
gestellt

Hinweise
Der Dateiname „index.htm“ ist bei vielen Internet-Providern für die Start- oder Heimatsei-
te vorgeschrieben. Benennen Sie die Datei „default.htm“ nach „index.htm“ um (Klicken
mit rechter Maustaste > Umbenennen).

15
Einführung in HTML und CSS Kennenlernen von Expression Web

Abbildung 3.3: index.htm in Code- und Design-Ansicht

Die Bedeutung der Paletten wird in späteren Kapiteln erläutert.

Hinweise
In der Code-Ansicht wird der Aufbau mit den Bereichen Kopf-Bereich (Head) und Text-
Bereich (Body) deutlich; der Text kann zudem überall mit Kommentaren versehen
werden.
Jeder Bereich beginnt mit einer Markierung <Bereichsname> und endet mit der Markie-
rung </Bereichsname>. Beachten Sie beim Ende einer Markierung das Zeichen „/“ vor
dem Namen des Bereiches.
Kommentare () helfen dem Autor bei der Gliederung seines HTML-Quelltextes,
werden aber vom Web-Browser vollständig ignoriert, also nicht angezeigt.
HTML-Quelltext kann beliebig formatiert werden. Einrückungen, Leerzeichen usw. wer-
den beim Anzeigen vom Web Browser ignoriert. Einrückungen und Leerzeichen dienen
also nur Ihnen als Autor, aber nicht dem Leser bei der Anzeige der Seite

Klicken sie auf „Format > Eigenschaften“ und geben Sie geeignete Werte über Titel und
Stichwörter ein.

16
Einführung in HTML und CSS Kennenlernen von Expression Web

Abbildung 3.4: Eigenschaften einer Web-Seite

Klicken Sie auf die Schaltfläche „OK“, um diese Eigenschaften zu bestätigen. Die Angaben
zu Titel und Stichwörtern werden in den HTML-Quelltext (Code) übertragen. Geben Sie
nun den Text in der Design-Ansicht ein.
Beachten Sie, daß EW die beiden Ansichten immer synchronisiert, d.h. Änderungen in der
Code-Ansicht werden in die Design-Ansicht übertragen und umgekehrt. Mit diesem Two-
Way-Editing können Sie in einer beliebigen Ansicht arbeiten und sehen die Änderungen
sofort in der jeweils anderen Ansicht. Gelegentlich müssen Sie über „Ansicht > Aktualisie-
ren“ die Synchronisation explizit anstoßen.

17
Einführung in HTML und CSS Kennenlernen von Expression Web

Abbildung 3.5: Code- und Design-Ansicht: index.htm

Sie können über Menüsystem, Auswahlboxen oder Werkzeugleisten den Text in vielfälti-
ger Weise formatieren. Es stehen Ihnen, vergleichbar zu Textverarbeitungsprogrammen
wie StarOffice, OpenOffice, Word etc., die üblichen Elemente wie Überschriften, Bilder,
Tabellen, Listen zur Verfügung.
Markieren Sie Schritt für Schritt die Textbereiche in der Design-Ansicht, die als Überschrif-
ten und als Paragraphen vorgesehen sind und formatieren Sie den entsprechenden Be-
reich über die Absatz-Formatierung in der Werkzeugleiste, hier als Beispiel eine Formatie-
rung als „Überschrift 1“.

18
Einführung in HTML und CSS Kennenlernen von Expression Web

EW fügt zu Beginn eines Absatzes automatisch ein nicht trennbares Leerzeichen (&nbsp)
ein, so daß ein Absatz ein wenig eingerückt wird.
Nach Beendigung dieser Aufgabe ergibt sich folgende Darstellung in Code- und Design-
Ansicht:

Abbildung 3.6: Code- und Design-Ansicht: index.htm

Speichern Sie die Datei unter dem Namen „index.01.htm“ und beenden Sie EW.

Gratulation – Sie haben Ihre erste Web-Präsenz (WebSite) mit einer Startseite erstellt.
Die Startseite enthält einen einführenden Text mit Überschriften und Absätzen.

In den folgenden Kapiteln werden Sie einige weitere HTM-Elemente wie Textformatierung,
Listen, Tabellen und Bilder ergänzen.

19
Einführung in HTML und CSS Kennenlernen von Expression Web

3.2 Übungen
1. Erstellen Sie die Web-Präsenz „Sonnensystem“ auf Ihrem Rechner in einem geeig-
neten Verzeichnis.
2. Gibt es in diesem Verzeichnis „ungewöhnliche“ Unterverzeichnisse?
3. Laden Sie die Startseite „index.htm“ in alle auf dem Rechner verfügbaren Web
Browser und vergleichen Sie jeweils die Darstellung.
4. Lassen Sie sich im Web Browser den Quelltext der Startseite anzeigen.
5. [zusätzlich]
Machen Sie sich mit Debugging-Werkzeugen wie den Firefox Browser Add-Ons Fi-
reScope und FireBug vertraut.

20
Einführung in HTML und CSS Listen und einfache Textformatierung

4 Listen und einfache Textformatierung

In diesem Kapitel lernen Sie, wie Sie Text fett und kursiv formatieren können und wie Sie
Listen einfügen können. Hierzu stehen in der Werkzeugleiste die üblichen Werkzeuge zur
Verfügung (Fett, Kursiv sowie nummerierte Liste und ungeordnete Liste).

4.1 Listen
Erstellen Sie eine neue Datei „planeten.01.htm“ mit geeignetem Titel und Stichwörtern.
Geben Sie die 8 Planeten zeilenweise ein und formatieren Sie diese Zeilen über die Werk-
zeugleiste als nummerierte Liste.
Code-Ansicht:

Design-Ansicht:

21
Einführung in HTML und CSS Listen und einfache Textformatierung

4.2 Syntax
Bereich HTML-Element Bemerkungen
ungeordnete Liste <ul> … </ul> <ul type=square>
(bullet list) eckige Bullets
<ul type=circle>
runde Bullets
<ul type=disc>
gefüllte Bullets
Listeneintrag <li>...</li>

Bereich HTML-Element Bemerkungen

nummerierte Liste <ol> … </ol> <ol type=A>
(ordered list) A,B,C...
<ol type=a>
a,b,c...
<ol type=I>
I,II,III...
<ol type=i>
i,ii,iii
<ol start=(Zahl)>
Vorgabe Startwert
Listeneintrag <li>...</li>

4.3 Übungen
1. Erstellen Sie eine nach Alphabet sortierte, „Bullet“-Liste der Planeten.
(Datei: planeten.02.htm).
2. Erstellen Sie eine geordnete Liste mit den Einträgen „Innere Planeten“ und „Äußere
Planeten“, die als Unterliste die jeweiligen Planeten in ihrer Reihenfolge im Sonnen-
system enthalten.
(Datei: planeten.03.htm).
(siehe: http://de.wikipedia.org/wiki/Innerer_und_%C3%A4u%C3%9Ferer_Planet)
3. [zusätzlich]
Erstellen Sie eine alphabetische Liste der Planeten, bei der ein von Ihnen gewähl-
tes Aufzählungszeichen vorangestellt wird. Verwenden Sie die Bilddatei „3d.gif“ als
„Bullet“.
(Datei: planeten.04.htm).
(siehe: http://de.wikipedia.org/wiki/Sonnensystem)
Hinweis:
Definieren Sie eine spezielle Formatvorlage für eine Aufzählung.

22
Einführung in HTML und CSS Listen und einfache Textformatierung

4.4 Textformatierung
In diesem Abschnitt lernen Sie einige einfache Textformatierungen kennen. Das Thema
Textformatierung wird im Zusammenhang mit CSS ausführlicher behandelt.
Geben Sie die Planeten in der richtigen „astronomischen“ Reihenfolge in der Datei „plane-
ten.05.htm“ ein und ergänzen Sie einen Merkspruch in einem eigenen Abschnitt.
Zeichnen Sie den jeweils ersten Buchstaben eines Planeten und des zugehörigen Wortes
im Merkspruch fett aus, damit sich der Merkspruch besser einprägt.

Hinweise:
Das markierte Zeichen, beispielsweise „M“, wird in der Code-Ansicht durch die gewählte
Start- und Ende-Markierung „eingerahmt“; d.h. bei Formatierung mit „Fett“ wird aus „M“
nun „<b>M</b>“.
HTML-Elemente können in geeigneter Form ineinander verschachtelt werden.

Code- und Design-Ansicht:

Abbildung 4.1: Fett und Kursiv

4.5 Syntax
Bereich HTML-Element Bemerkungen
Fett (bold) <b> … </b> Schachtelung möglich.
Kursiv (italic) <i> … </i> Schachtelung möglich.

23
Einführung in HTML und CSS Listen und einfache Textformatierung

Sonderzeichen HTML-Entity Bemerkungen

" "
Erzwungenes, nicht  
trennbares Leerzeichen

4.6 Übungen
1. Markieren Sie wichtige Wörter oder Passagen in der Startseite „index.htm“ in geeig-
neter Form und speichern Sie unter „index.03.htm“.
2. Erstellen Sie einen Merkspruch für die deutschen Nordseeinseln (siehe unten) und
speichern Sie unter „nordseeinseln.01.htm“.
3. Kennzeichnen Sie den Anfangsbuchstaben einer Insel mit jeweils einer eigenen
Farbe und und speichern Sie unter „nordseeinseln.02.htm“.
4. [zusätzlich]
Markieren Sie im Impressum (siehe unten) wichtige Passagen in geeigneter Art und
Weise und speichern Sie unter „impressum.01.htm“.

Welcher = Wangerooge
Seemann = Spiekeroog
liegt = Langeoog
bei = Baltrum
Nanni = Norderney
im = Juist
Bett = Borkum

<p>Bei direkten oder indirekten Verweisen auf fremde Internetseiten ("Links"),<br /> die
außerhalb des Verantwortungsbereiches des Autors liegen, würde eine Haftungsver-
pflichtung ausschließlich in dem Fall in Kraft treten, in dem der Autor von den Inhalten
Kenntnis hat und es ihm technisch möglich und zumutbar wäre, die Nutzung im Falle
rechtswidriger Inhalte zu verhindern. Der Autor erklärt hiermit ausdrücklich, dass zum
Zeitpunkt der Linksetzung keine illegalen Inhalte auf den zu verlinkenden Seiten erkenn-
bar waren. Auf die aktuelle und zukünftige Gestaltung, die Inhalte oder die Urheber-
schaft der gelinkten/verknüpften Seiten hat der Autor keinerlei Einfluss. Deshalb distan-
ziert er sich hiermit ausdrücklich von allen Inhalten aller gelinkten /verknüpften Seiten,
die nach der Linksetzung verändert wurden. Diese Feststellung gilt für alle innerhalb des
eigenen Internetangebotes gesetzten Links und Verweise sowie für Fremdeinträge in
vom Autor eingerichteten Gästebüchern, Diskussionsforen und Mailinglisten. <nobr>Für
illegale, fehlerhafte oder unvollständige Inhalte und insbesondere für Schäden, die aus
der Nutzung oder Nichtnutzung solcherart dargebotener Informationen entstehen, haftet
allein der Anbieter der Seite, auf welche verwiesen wurde, nicht derjenige, der über
Links auf die jeweilige Veröffentlichung</nobr> lediglich verweist.</p>

24
Einführung in HTML und CSS Einfügen von Tabellen

5 Einfügen von Tabellen

In diesem Kapitel lernen Sie Tabellen kennen, mit deren Hilfe Sie Informationen struktu-
riert darstellen können.

5.1 Einfache Tabelle mit 2 Zeilen und 9 Spalten

Laden Sie die die Datei „planeten.05.htm“. Klicken Sie auf „Tabelle > Tabelle einfügen“
und wählen Sie folgende Einstellungen.

Die Zellen sind mit Leerzeichen als Platzhaltern vorbesetzt worden. Geben Sie nun in der
Design-Ansicht in der obersten Zeile der Tabelle das Wort „Eigenschaft“ und danach die
Namen der 8 Planeten ein; insgesamt enthält die Zeile damit 9 Zellen. Springen Sie dabei
mit der „Tabulatur“-Taste von einer Zelle zur nächsten. Die 2. Zeile bleibt zunächst leer.

25
Einführung in HTML und CSS Einfügen von Tabellen

Hinweise
Die Markierung <table> leitet eine Tabelle ein. Das Ende einer Tabelle wird durch die
Markierung </table> markiert.
<tr> leitet jeweils eine neue Tabellenzeile ein. Im Anschluß daran werden die Zellen der
betreffenden Zeile durch <th> oder <td> definiert. Eine Tabellenzeile wird durch </tr>
beendet.
Das Element <td> definiert eine (Tabellen-) Zelle. In einer Zelle können beliebige Ele-
mente stehen, d.h. außer normalem Text z.B. auch Verweise, Bilder und natürlich auch
wieder Tabellen.

Abbildung 5.1: Tabelle: Einfügen von Zellen über Tabulator

Die Tabelle erhält aufgrund der Definition bereits einen äußeren Rahmen.

26
Einführung in HTML und CSS Einfügen von Tabellen

Fügen Sie nun in der 2. Zeile die Massen der Planeten im Vergleich zur Erdmasse ein.

Speichern Sie unter „planeten.06.htm“.

Hinweise
Eine (Beginn-) Markierung eines HTML-Elementes kann durch Attribute erweitert wer-
den, die dessen Darstellung genauer festlegen.
Die Wertzuweisung erfolgt in der Form: attribut=“wert“.
Mehrere Attribute müssen durch Leerzeichen getrennt werden.
<Markierung attribut="wert" attribut=“wert“ ...>Inhalt</Markierung>
Die möglichen Attribute für jedes HTML Element finden Sie in einer HTML Referenz.

Ergänzen Sie die Darstellung der Tabelle, indem Sie einen Tabellen-Namen und innere
Gitterlinien hinzufügen. Verwenden Sie hierzu die Code-Ansicht und fügen Sie folgende
Attribute hinzu.
<table style="width: 100%" border="1" title="Eigenschaften">

Nutzen Sie dabei die Unterstützung von EW aus, indem Sie sich sämtliche Attribute auflis-
ten lassen und durch Klicken das gewünschte Attribut auswählen.
Speichern Sie unter „planeten.07.htm“.

27
Einführung in HTML und CSS Einfügen von Tabellen

5.2 Syntax
Bereich HTML-Element Bemerkungen
Tabelle <table> … </table> Container-Element
Zeile <tr>... </tr>
Zelle <td> … </td> Attribute:
width=“40%“

5.3 Übungen
1. Ergänzen Sie über „Tabelle > Einfügen“ eine Zeile mit „Äquatordurchmesser (km)“
und tragen Sie die entsprechenden Werte ein. Speichern Sie unter
„planeten.08.htm“.
2. Verändern Sie die äußeren und die inneren Rahmenfarben mit geeigneten Farben
und den Hintergrund der ersten Zeile mit Grau und speichern Sie unter
„planeten.09.htm“.
Hinweise:
Markieren Sie den jeweiligen Bereich und nutzen Sie dann das Kontext-Menü „Zel-
leneigenschaften“ bzw. „Tabelleneigenschaften“ (rechte Maustaste!).
3. [zusätzlich]
Erstellen Sie eine neue Datei „mars+co.01.htm“. Erstellen Sie eine Tabelle mit 4
Zeilen und 2 Spalten. Schreiben Sie den Namen des jeweiligen Planeten fett und
verwenden Sie den zugehörigen Text. Setzen Sie Name und Text für die Planeten
Venus, Mars, Merkur und Jupiter jeweils alternierend in die linke und die rechte
Spalte. Ziehen Sie dabei jeweils den Namen des Planeten an den zugehörigen Text
heran und fluchten Sie den Text gegen die Überschrift (valign="top"). Die Ausrich-
tung der Tabelle soll schematisch gesehen folgendermaßen aussehen:

Mars | Text linksbündig

Text rechtsbündig | Venus
Merkur | Text linksbündig
Text rechtsbündig | Jupiter

Merkur: Wegen seiner großen Sonnennähe ist Merkur nur in der Abend- oder Mor-
gendämmerung beobachtbar. Sein Abstand von der Erde schwankt zwischen 80 und
220 Millionen Kilometern. Seine Rotationsperiode beträgt 58,65 Tage, seine si-
der. Umlaufzeit beträgt 87,97 Tage. Da der Planet keine nennenswerte Atmosphä-
re besitzt, herrschen große Temperaturgegensätze zwischen Tag- und Nachtseite,
etwa 585K (rund 310°C) und 150K (-120°C). Die Oberfläche des Merkur besitzt
erdmondähnliche Formationen.
Venus: Bezüglich Masse, Dichte und Radius sind ich Venus und Erde sehr ähn-
lich. In den anderen physikalischen Parametern treten jedoch kaum Gemein-
samkeiten auf. Eine Besonderheit gegenüber allen anderen Planeten ist die

28
Einführung in HTML und CSS Einfügen von Tabellen

langsame Venusrotation von 243 Erdtagen, die entgegengesetzt (retrograd) zur

Bahnbewegung um die Sonne gerichtet ist. Die Länge eines Sonnentages auf der
Venus entspricht 117 Erdtagen.
Mars: Außer der Erde ist der Mars der einzige Planet, bei dem es möglich ist,
durch seine Atmosphäre auf die feste Oberfläche zu blicken. Seine Entfernung
zur Erde schwankt je nach Stellung der beiden Planeten auf ihren Bahnen zwi-
schen rund 400 Mill. km und 56 Mill. km. Der Marstag ist nur wenig länger als
ein Erdentag (24h 37min).
Jupiter: Der Planet Jupiter ist der größte und massereichste Planet des Son-
nensystems; er gehört zu den hellsten Objekten des Himmels. Je nach der Stel-
lung von Jupiter und Erde ändert sich der Abstand des Planeten von der Erde
zwischen 588 Mill. und 967 Mill. km. Schon bei Betrachtung des Jupiters mit
kleinen Fernrohren fällt seine starke Abplattung auf, die er infolge seiner
schnellen Rotation besitzt.

5.4 Seitenlayout per Tabelle

Erstellen Sie eine neue Datei „groessenvergleiche.01.htm“, deren Layout über eine Tabel-
le definiert wird. Folgendes häufig verwendete Layout-Schema soll genutzt werden.

+------------------------------------------------+
| Header (Logo etc.) |
+------------------------------------------------+
| Navigation | Content | Sidebar |
+------------------------------------------------+
| Footer (Kontakt, Datum, Copyright etc.) |
+------------------------------------------------+

Erstellen Sie hierzu eine 3x3 Tabelle und verschmelzen Sie über „Tabellen > Ändern >
Zellen verbinden“ alle Zellen in der ersten und in der dritten Zeile. Färben Sie den Hinter-
grund der Zellen wie unten vorgegeben grau und violett ein. Verwenden Sie geeignete
Texte als Platzhalter.

29
Einführung in HTML und CSS Einfügen von Tabellen

Abbildung 5.2: Tabelle: Seitenlayout

5.5 Syntax
Bereich HTML-Element Bemerkungen
Zelle <td width=“20%“ ...> Breite relativ in Prozent
oder absolut in Pixel
<td rowspan=“2“ ...> Zellen untereinander ver-
schmelzen
<rd colspan=“2“ ...> Zellen nebeneinander
verschmelzen

5.6 Übungen
1. Legen Sie in der Datei „groessenvergleiche.01.htm“ die Breiten für die Zellen in der
mittleren Zeile auf die Prozentwerte 20%, 60% und 20%. Speichern Sie unter „gro-
essenvergleiche.02.htm“.
2. [zusätzlich]
Welche Formatvorlagen sind von EW im Hintergrund erzeugt worden?

30
Einführung in HTML und CSS Einfügen von Bildern

6 Einfügen von Bildern

In diesem Kapitel wird ein Text durch das Hinzufügen von Bilder erweitert. Bilder dienen
zum Beispiel zur Illustration komplexer Sachverhalte, aber auch zur Auflockerung von Tex-
ten durch Piktogramme oder auch als Gestaltungselemente in einem Layout (Logo etc.).

6.1 Verwenden von Piktogrammen (Icons)

In diesem einführenden Beispiel werden Piktogramme in den Text einfügt.
Erstellen Sie einen neuen Ordner „media“ und speichern Sie die Bilder „lightbulb.gif“, „re-
mote.gif“ und „info.gif“ in diesem Ordner.
Laden Sie die Datei „planeten.09.htm“.
Ziehen Sie nun die Datei „lightbulb.gif“ aus dem Ordner „media“ hinter den Merksatz und
geben Sie einen geeigneten alternativen Text, hier „Lightbulb“, ein.

Abbildung 6.1: Einfügen eines Bildes (Grafik)

31
Einführung in HTML und CSS Einfügen von Bildern

In der Code-Ansicht werden die entsprechenden Informationen ergänzt.

<img alt="Lightbulb" width="12 height="12" src="media/lightbulb.gif""

Speichern Sie unter „planeten.10.htm“.

Hinweise
Ein Bild kann (vergleichbar zu einem Zeichen) an jeder Stelle in einem HTML Dokument
eingefügt werden, also auch in einer Tabellen-Zelle.
Ein Bild wird auf Grundlage einer bereits existierenden Bild-Datei eingefügt, diese liegt
im Regelfall auf dem selben Web Server und häufig auch im selben Verzeichnis wie das
HTML-Dokument oder in einem Unterverzeichnis „media“, „bilder“ etc.

6.2 Syntax
Bereich HTML-Element Bemerkungen
Bild <img ...> Kein Inhalt!

Das Bild liegt im gleichen Verzeichnis wie ein HTML Dokument:

<img src="datei.gif">
Das Bild liegt in einem anderem Verzeichnis, relativ zum Dokument:
<img src="../[pfad]/datei.gif">
Alternativer Text (bei Nichtanzeige des Bildes):
<img src="datei.gif" alt="Text">
Rahmen um ein Bild:
<img src="datei.gif" border=(Zahl)> = Breite in Pixel

6.3 Übungen
1. Speichern Sie die Symbole der Planeten im Ordner „media“ (Quelle: http://de.wikipe-
dia.org/wiki/Sonnensystem). Ergänzen Sie die Liste der Planeten mit ihren jeweiligen
Symbolen (siehe unten).
2. Speichern Sie zunächst die beiden Bilder mit Größenvergleichen „Erde-Venus“ und „Ju-
piter-Saturn“ aus der Material-Sammlung oder direkt aus der Quelle in den Ordner „me-
dia“ (Quelle: http://www.rense.com/general72/size.htm). Klicken Sie hierzu mit der rech-
ten (!) Maustaste und wählen Sie "Save As" (bzw. „(Ziel) Speichern unter“) im Kontext-
menü.

32
Einführung in HTML und CSS Einfügen von Bildern

3. Fügen Sie nun die beiden Bilder mit Größenvergleichen untereinander in die Datei „gro-
essenvergleiche.02.htm“ ein. Speichern Sie unter „groessenvergleiche.03.htm“.
4. [zusätzlich]
Sorgen Sie für Abstand der Bilder zum umgebenden Text.
5. [zusätzlich]
Skalieren Sie die Bilder mit einem geeigneten Programm wie zum Beispiel Adobe
Photshop (oder dem kostenlosen Programm Paint.Net) unter Beibehaltung der Propor-
tionen auf eine Breite von 400 Pixel. Fügen Sie geeignete Beschriftungen hinzu. Spei-
chern Sie unter „groessenvergleiche.04.htm“.
Hinweis:
Photoshop > Datei öffnen, Bild > Bildgröße, Speichern unter: 13db9ddd-400x225.jpg

Abbildung 6.2: Text mit Symbolen der Planeten

6.4 Auswählen eines geeigneten Bild-Formates

In einem HTML Dokument können Sie die Bildformate GIF, Animated GIF, JPEG und, bei
neueren Web Browsern, auch das Bildformat PNG verwenden.
Bilder werden in der Regel mit einer maximalen Auflösung von 800 x 800 Pixeln in eine
Seite eingebaut; typische Größen sind 640 x 480, 320 x 240 und 120 x 80.

6.5 Informationen zum Bildformat GIF

Das GIF Format umfaßt zwei sehr ähnliche Bildformate: GIF87, das Original, und GIF89a,
das Erweiterungen für Transparenz und Interlacing sowie für GIF-Bilder mit mehreren
Einzelbildern (Annimated GIF) enthält, die für einfache Animationen verwendet werden
können.
GIF-Dateien eignen sich ausgezeichnet für Logos, Icons, Strichzeichnungen und an-
dere einfache Bilder. Weniger gut geeignet sind sie für Bilder mit vielen Details, weil das
GIF-Format auf 256 Farben begrenzt ist. Fotos im GIF Format sehen deshalb grobkörnig
und fleckig aus.
Transparente GIF-Bilder haben einen unsichtbaren Hintergrund, so daß die Farbe (oder
das Muster) des Seitenhintergrundes durchscheinen und dem Bild die Erscheinung geben,
auf der Seite zu schweben.

33
Einführung in HTML und CSS Einfügen von Bildern

Interlacing sorgt dafür, daß das GIF Bild anders abgespeichert wird. Statt die einzelnen
Zeilen hintereinander zu speichern, wird eine GIF Datei schrittweise gespeichert, wobei je-
weils jede achte Zeile gespeichert wird, beginnend bei der ersten, gefolgt von jeder achten
beginnend bei der vierten, gefolgt von jeder vierten, beginnend bei der dritten und dann
die restlichen Zeilen.

6.6 Informationen zum Bildformat JPEG

JPEG ist primär für das Speichern von Fotos ausgelegt. Anders als GIF Bilder können
JPEG Bilder eine beliebige Anzahl Farben haben, und der Algorithmus für die Kom-
primierung ist insbesondere für die Muster geeignet, die man häufig auf Fotos findet. Des-
halb ist die Größe der erzeugten Dateien wesentlich geringer als bei einem un-
komprimierten Bild-Format (wie z.B. TIFF).
Andererseits ist dieser Komprimierungsalgorithmus nicht besonders gut für Strichze-
ichnungen oder Bilder mit großen Blöcken gleicher Farbe geeignet. Darüber hinaus wird
hier die Komprimierung mit Verlust durchgeführt, das bedeutet, daß Teile des Bildes igno-
riert werden, um es insgesamt kleiner zu machen.
Das Konzept von progressivem JPEG ähnelt dem von GIF Interlacing. Progressive JPEG
Dateien werden auf spezielle Weise gespeichert, so daß sie in fortschreitend detaillierter
Weise dargestellt werden, wenn sie geladen werden.

Bildformat HTML-Element Bemerkungen

GIF src=“bild.gif“
PNG src=“bild.png“
JPEG src=“bild.jpg“

6.7 Übungen
1. Finden Sie Quellen für lizenzfreie Bilder, Piktogramme, Clipsarts usw.
2. Legen Sie sich in einem geeigneten Unterverzeichnis eine Sammlung von lizenz-
freien Piktogrammen zur Gestaltung Ihrer Seiten an.
3. Legen Sie sich in einem geeigneten Unterverzeichnis eine Sammlung von lizenz-
freien Bildern zum Thema „Sonnensystem“ an.

34
Einführung in HTML und CSS Verwenden von Cascading Style Sheets (CSS)

7 Verwenden von Cascading Style Sheets (CSS)

Zur Formatierung von HTML-Elementen sollten Sie ausschließlich Formatvorlagen (an-
dere Bezeichnung: Stilvorlagen, englisch: Cascading Style Sheets oder kurz Styles) ver-
wenden.
In diesem Kapitel werden Sie Formatvorlagen anhand einfacher Beispiele kennelernen.

7.1 Definieren von Formatvorlagen direkt im Dokument

Das folgende einführende Beispiel illustriert die Definition einer Formatvorlage für ein
HTML-Element, hier: h1 (Überschrift Ebene 1), direkt im HTML-Dokument.
Laden Sie die Datei „index.01.htm“ und ergänzen Sie im Kopfbereich folgende Informatio-
nen, um eine Formatvorlage für das HTML Element „h1“ zu definieren.

<html>
<head>
<title>Sonnensystem</title>
<style type="text/css">
h1 {
color: blue;
}
</style>
</head>
<bddy>
<h1>Sonnensystem</h1>
...
</body>
</html>

Das Attribut „color“ legt die Schriftfarbe fest, hier: blue (blau). Es ergeben sich folgende
Änderungen in der Design-Ansicht und in der Palette „Formatvorlagen“:

35
Einführung in HTML und CSS Verwenden von Cascading Style Sheets (CSS)

Abbildung 7.1: Formatvorlagen

Beachten Sie die Änderungen in der Palette „Formatvorlagen“. EW hat automatisch die
Änderungen im Quelltext mit der Palette „Formatvorlagen“ synchronisiert.
Speichern Sie unter „index.02.htm“.

Hinweise
In diesem Beispiel ist die Stilvorlage direkt in das HTML-Dokument eingebettet.
Die Stilvorlage wird bei der Einbettung direkt im HTML Dokument eingeleitet durch:
<style type="text/css"> und beendet durch </style>.
Jede Definition in der Stilvorlage beginnt mit der Markierung (tag) des HTML-Elementes
und enthält eine beliebige Anzahl von (CSS-spezifischen) Attributen mit den zugehöri-
gen Werten.
Ein häufiger Fehler ist das Verwenden eines Gleichheitszeichens (=) bei der Attribut-Zu-
weisung in einer Formatvorlage; innerhalb einer Formatvorlage werden Attribut und Wert
durche einen Doppelpunkt (:) getrennt.
Von der Verwendung von sogenannten Inline-Styles (ad-hoc, direkt im HTML-Element)
ist dringend abzuraten.

36
Einführung in HTML und CSS Verwenden von Cascading Style Sheets (CSS)

Die Bezeichnung CSS Stylesheet ist nicht sehr gelungen, weil CSS selbst als Abkür-
zung für Cascading Style Sheet steht; sie ist allerdings üblich ...

Im folgenden Beispiel wird die Formatierung der HTML-Elemente „h1“ und „h2“ (Über-
schrift der Ebenen 1 und) und „p“ (Paragraph) in einer Stilvorlage (CSS Stylesheet) inner-
halb des HTML-Dokumentes definiert, wobei für diese HTML-Elemente mehrere Attribute
in der Formatvorlage gesetzt werden.

<html>
<head>
<title>Sonnensystem</title>
…

h1 {
font-family: arial;
font-size: 14pt;
color: red
}

h2 {
font-family: arial;
font-size: 12pt;
color: red
}

p {
font-family: arial;
font-size: 12pt;
color: gray
}
</style>

</head>
<body >
<h1>Sonnensystem</h1>
<p>...</p>
</body>
</html>

Tabelle 7.1: Beispiel für eine Stilvorlage direkt im HTML-Dokument

37
Einführung in HTML und CSS Verwenden von Cascading Style Sheets (CSS)

Abbildung 7.2 Formatvorlagen

Speichern Sie unter „index.04.htm“.

7.2 Syntax

Bereich HTML-Element Bemerkungen

Style Container <style type=“text/css> Container-Element
..
</style
Formatvorlage HTML-Element Mehrere durch Kommata
{ Attribut-1:Wert-1, getrennte Elemente mög-
Attribut-2: Wert-2; lich.
}

7.3 Übungen
1. Erstellen Sie in Anlehnung an die einführende Beispiele Formatvorlagen für die Da-
tei „planeten.10.htm“ mit Absätzen in grauer Schrift und blauen Überschriften mit
abgestuften Größen. Speichern Sie unter „planeten.11.htm“.
2. Sie werden bemerkt haben, dass einige HTML Elemente von den Formatvorlagen
in „planeten.11.htm“ nicht erfaßt werden. Welche? Ergänzen Sie passende Format-
vorlagen für die fehlenden HTML Elemente. Speichern Sie unter „planeten.12.htm“.
Hinweise:
Tabellen und Listen

38
Einführung in HTML und CSS Verwenden von Cascading Style Sheets (CSS)

3. Fassen Sie in der Datei „index.05.htm“ die Formatvorlagen wie unten vorgegeben
zusammen. Welche Vorteile sehen Sie in dieser Vorgehensweise?
h1,h2,p {
font-family: arial;
}
h1,h2 {
color: red;
}
h1 {
font-size: 14pt;
}
h2 {
font-size: 12pt;
}
p {
font-size: 12pt;
color: gray;
}

7.4 Definieren von Klassen in Formatvorlagen

Bislang haben Sie eine Formatvorlage vollständig auf ein HTML Element angewendet, so
dass beispielsweise immer alle Absätze („p“) davon betroffen waren.
In diesem Abschnitt lernen Sie das allgemein anwendbare Attribut „class“ kennen, mit dem
verschiedene unterscheidbare Klassen von Formatvorlagen für das selbe HTML Element
erstellt werden können.
Öffnen Sie die Datei „planeten.12.htm“.
Definieren Sie mit EW eine Formatvorlage mit Namen „.RedFrame“ (Achtung: vorausge-
hender Punkt), mit der ein grauer Hintergrund und ein roter Rahmen definiert wird.

39
Einführung in HTML und CSS Verwenden von Cascading Style Sheets (CSS)

Abbildung 7.3: Formatvorlage für Klasse .RedFrame

Wenden Sie diese Formatvorlage auf den Merkspruch an (rechte Maustaste auf Format-
vorlage, Formatvorlage übernehmen) und beobachten Sie die Veränderungen in der
Code- und Design-Ansicht.

40
Einführung in HTML und CSS Verwenden von Cascading Style Sheets (CSS)

Abbildung 7.4: Klasse (class)

Speichern Sie unter „planeten.13.htm“.

7.5 Übungen
4. Wie können Sie die Formatierung eines HTML Elementes mit einer Klasse wieder
rückgängig machen?
5. Ergänzen Sie den untenstehenden Text in der Datei „index.05.htm“. Definieren Sie
eine geignete Klasse „LessImportant“ (.LessImportant {font-size: 8pt;font-style: ita-
lic;}) und wenden Sie diese Klasse auf den neu hinzugefügten Text an. Umgeben
Sie die Überschriften mit einem rotem Rahmen und grauen Hintergrund. Speichern
Sie unter „index.06.htm“
6. Speichern Sie die Datei „smiley.gif“ in den Ordner „media“. Definieren Sie eine Klas-
se „bullet-smiley“ mit der Bild-Datei als Bildsymbol für das Aufzählungszeichen und
wenden Sie diese Klasse auf die Liste in in „planeten.13.htm“ an. Speichern Sie un-
ter „planeten.14.htm“. Verwenden Sie ggf. weitere Aufzählungssymbole.

Als Folge der Entstehung des Sonnensystems bewegen sich alle Planeten, Pluto
und der Asteroidengürtel auf einem rechtläufigen Orbit um die Sonne. Auch die
Rotation der meisten größeren Körper des Sonnensystems erfolgt in rechtläufi-
ger Richtung. Ebenfalls rechtläufig ist die Drehrichtung fast aller Planeten

41
Einführung in HTML und CSS Verwenden von Cascading Style Sheets (CSS)

um ihre Achse, also identisch mit der Umlaufsrichtung auf ihrer Bahn um die
Sonne. Lediglich die Venus dreht sich entgegengesetzt, und die Drehachse von
Uranus liegt nahezu in seiner Bahnebene.

Abbildung 7.5 Spezielle Aufzählungssymbole

7.6 Verwenden einer Basisvorlage in einer css-Datei

Im folgenden Beispiel wird eine zentrale Vorlagendatei - üblicherweise mit der Dateien-
dung .css - ausgelagert und dann per Verweis in ein HTML-Dokument eingebunden.
Erstellen Sie ein neues Unterverzeichnis „css“ und erstellen Sie dort eine Datei „basis-sty-
le.01.css“ (externe Style Sheet Datei), in der alle HTML Elemente auf sinnvolle Standard-
Werte gesetzt werden:
body {
font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 62.5%;
background-color: #fff;
color: #000;
}
body, h1, h2, h3, h4, h5, h6, div, p, table, td, ul, ol, li, dd, dt, dl,
blockquote, address, hr, pre {
margin: 0;
padding: 0;
}
p, li, h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 1em;
}

Binden Sie diese Basis-Stilvorlage „basis-style.01.css“ mit der folgenden Syntax in das
HTML Dokument „index.01.htm“ ein.

42
Einführung in HTML und CSS Verwenden von Cascading Style Sheets (CSS)

<title>Sonnensystem</title>
<link rel="stylesheet" type="text/css" href="css/basis-style.01.css">
</head>
<body >

<h1>Sonnensystem</h1>

...

</body>
</html>

Hinweise
Es gehört zu den wichtigen Aufgaben eines Web-Designers, ansprechende Zusammen-
stellungen von Schriftarten und Schriftgrößen zu verwenden.
Verwenden Sie ferner ein einheitliches, abgestimmtes Farbschema für Ihre Web-Prä-
senz.
ColorPicker: http://www.pagetutor.com/colorpicker/index.html
Hilfreich beim Testen von Farbschemata sind u.a. folgende Seiten:
http://www.colorschemer.com/online.html
http://www.colorschemer.com/

Bei einer Vielzahl von HTML-Dokumenten - man denke an eine Website mit 1000+ Seiten
– ist es ausgesprochen effektiv, alle Dokumente mit der selben Stilvorlage zu verknüpfen.
Eine Änderung der Stilvorlage wirkt sich umgehend auf alle verknüpften 1000+ Dokumente
aus.

7.7 Syntax

Bereich HTML-Element Bemerkungen

Referenz auf Style File <link rel="stylesheet" je HTML Dokument
type="text/css"
href="datei.css">
Style File (datei.css) Formatvorlagen

7.8 Übungen
1. Lagern Sie die aktuellen Formatvorlagen der Datei „planeten.14.htm“ in die externe
Style Datei „basis-style-02.css“ aus und fügen Sie in „planeten.15.htm“ nur noch
einen Verweis auf diese Style Datei ein.

43
Einführung in HTML und CSS Verwenden von Cascading Style Sheets (CSS)

2. Erstellen Sie in Anlehnung an das einführende Beispiel eine Stilvorlage „basis-style-

03.css“ mit blauen gerahmten Überschriften und Absätzen in schwarzer Schrift.
Verwenden Sie diese externe Style Datei in „index.02.htm“.
3. [zusätzlich]
Erweitern Sie die Formatvorlagen für „h1“ und „p“ um weitere Attribute. Speichern
Sie unter „basis-style-04.css“ und testen Sie die Formatvorlagen in „index.03.htm“.

44
Einführung in HTML und CSS Einfügen von Hyperlinks und Ankern

8 Einfügen von Hyperlinks und Ankern

In diesem Kapitel werden HTML-Elemente zur Definition von Ankern (Sprungzie-
len) und Verweisen behandelt. Für Hyperlinks gibt es auch die Bezeichnungen
Internet-Adressen, Adressen, URL, Web-Links, Verweise oder kurz Links.
Hoffen Sie nicht darauf, einheitliche Bezeichnungen vorzufinden ...

8.1 Zielsetzung für Hyperlinks

Hyperlinks sind die „Essenz“ von HTML als Beschreibungssprache für „nicht-lineare“ Do-
kumente (Stichwort: Hypertext). Das HTML Element „a“ steht hierbei als Abkürzung für
Anchor (engl. für Anker).
Das folgende Beispiel zeigt einen typischen Hyperlink für eine Heimatseite:
Sie finden weitere Informationen auf meiner
<a href="http://www.home.uni-osnabrueck.de/elsner">Heimatseite</a>.

Hinweise
• Das HREF Attribut (für Hypertext REFerence) definiert entweder einen Verweis auf
ein „entferntes“ HTML-Dokument, das auf einem anderen Web Server im Internet liegt,
oder einen Verweis auf ein anderes HTML-Dokument auf dem selben Web Server
oder sogar auf eine bestimmte Position (Anker) im selben HTML Dokument.
• Wenn ein Hyperlink von einem Leser ausgewählt (angeklickt) wird, wird der Leser zu
einem anderen HTML-Dokument oder zu einer anderen Stelle im aktuellen HTML-Do-
kument weitergeleitet. Damit ist ein nicht-lineares Lesen eines HTML-Dokumentes
möglich, indem von einer Position zu einer anderen entfernten Position gesprungen
werden kann.
• Typischerweise wir ein Hyperlink durch Unterstreichung und zusätzlich eine andere
Schriftfarbe (häufig blau oder rot) kenntlich gemacht.
• Das HREF Attribut kann auch auf einen anderen Dokument-Typ (Adobe Acrobat Rea-
der Dokument etc.) und ggf. auch auf Medien (Video, Audio, Animation, Java-Applet
etc.) verweisen.

8.2 Verweisen auf externe HTML Dokumente

Laden Sie die Datei „index.06.htm“ und fügen Sie einen Hyperlink auf den zu Grunde lie-
genden Wikipedia Artikel ein. Markieren Sie hierzu das Wort „Wikipedia“ und verwenden
Sie dann den den Menüpunkt „Einfügen > Hyperlink“ oder das entsprechende Piktogramm
in der Werkzeugleiste. Geben Sie die passende Adresse ein.

45
Einführung in HTML und CSS Einfügen von Hyperlinks und Ankern

Abbildung 8.1 Einfügen eines Hyperlinks

Code-Ansicht:

[Quelle: <a href="http://de.wikipedia.org/wiki/Sonnensystem">Wikipedia</a> ]

Speichen Sie unter „index.07.htm“

8.3 Syntax

Bereich HTML-Element Bemerkungen

Hyperlink <a href=Adresse>... </a>
Adresse http:/server/path/

46
Einführung in HTML und CSS Einfügen von Hyperlinks und Ankern

Weltweite Verweise
Schema: <a href="http://Server/Verzeichnis/Datei">Verweistext</a>

Server: www.domain.de, www.domain.com, www.domain.fr usw.

8.4 Übungen
1. Erstellen Sie in der Datei „„index.07.htm“ am Ende einen Verweis auf die die deutsche
Google Heimatseite (http://www.google.de) mit dem Text „Weiterlesen ...“. Was errei-
chen Sie mit dem Hyperlink „http://www.google.de/search?q=sonnensystem“? Spei-
chern Sie unter „index.08.htm“. Klicken Sie auf die im HTML Dokument eingebauten
Hyperlinks und beobachten Sie den Effekt.
2. Ergänzen Sie das Attribut „target=“_blank“ und beobachten Sie den Effekt, wenn Sie
nun auf einen Hyperlink klicken.
3. [zusätzlich]
Ergänzen Sie weitere Informationsquellen als Links.

<a
target=“_blank“
href="http://de.wikipedia.org/wiki/Sonnensystem" >Wikipedia</a>

8.5 Verweisen innerhalb des selben HTML Dokuments

Im folgenden HTML Dokument werden 2 Anker (mit Namen „oben“ und
„unten)“ und 2 Hyperlinks mit den Texten „Gehe nach oben“ und „Gehe nach
unten“) definiert, um jeweils innerhalb des Dokuments von oben nach unten
bzw. von unten nach oben springen zu können.

Zur allgemeinen Verwirrung trägt meiner Erfahrung nach bei, daß der Name
eines Ankers kein # enthalten darf, während das Ziel eines Hyperlinks zu-
sätzlich mit # gekennzeichnet werden muß!

Definieren eines Hyperlinks mit Ziel "#unten" (mit #):<br>

<a href="#unten">Gehe nach unten!</a><br>
Definieren eines Ankers mit Bezeichner "oben" (ohne #):<br>
<a name="oben">Hier ist oben!</a><br>
<p>Text ...

<p>Lore ipsum</p>
...(viele Wiederholungen!) ...

47
Einführung in HTML und CSS Einfügen von Hyperlinks und Ankern

<p>Lore ipsum</p>

Definieren eines Ankers mit Bezeichner "unten" (ohne #): <br>

<a name="unten">Hier ist unten!</a><br>
Definieren eines Hyperlinks mit Ziel "#oben" (mit #):<br>
<a href="#oben">Gehe nach oben!</a><br>

Tabelle 8.1: Sprung-Möglichkeit von oben nach unten bzw. umgekehrt

Die Darstellung sieht folgendermaßen aus:

8.6 Syntax

Lokale Verweise Anker(Sprung-Ziel) in Datei:

(innerhalb eines HTML Do- <a name="Bezeichner"> Text </a>
kumentes)
Verweis zu diesem Anker:
<a href="#Bezeichner">Verweistext</a>

8.7 Übungen
1. Erstellen Sie eine Datei „sonne.01.htm“ mit dem unten vorgegebenem Text. Erstel-
len Sie ein Inhaltsverzeichnis mit den Einträgen "allgemeine Informationen" und
"Sonnenflecken" als Verweise auf die entsprechenden Abschnitte.
Hinweise:
Definieren Sie hierzu zunächst die beiden Überschriften der Ebene 2 als Anker. Er-
stellen Sie dann das Inhaltsverzeichnis als eine geordnete Liste, wobei jeder Lis-
teneintrag einen Verweis auf den zugehörigen Anker darstellt.
2. Verwenden Sie das Layout von „groessenvergleiche.05.htm“ als Grundlage für die
neue Startseite „index.09.htm“ und fügen Sie im Bereich der Navigation Verweise
auf die bisher erstellten HTML Dokumente ein. Verwenden Sie die Verweistexte

48
Einführung in HTML und CSS Einfügen von Hyperlinks und Ankern

„Home“, „Sonne“, „Größenvergleiche“, „Planeten“. Verweisen Sie auf eine geeigne-

te Stilvorlage „basis-style.css“.
3. Passen Sie die Layouts aller Dokumente an.
Text-1:
h1: Die Sonne
h2: allgemeine Informationen
Die Sonne ist unser nächster Stern. Sie ist ein Mitglied unserer Galaxie, der
Milchstraße. Die Sonne ist ein gelber Zwergstern, das heißt ein Stern durch-
schnittlicher Größe. Vermutlich ist sie mehr als 4 Milliarden Jahre alt. Die
Sonne dreht sich langsam um ihre Achse. Außerdem kreist sie um das Zentrum der
Milchstraße. Der Kern oder das Zentrum der Sonne ist sehr heiß. Dort findet
ein Prozeß statt, den man "Kernfusion" nennt. Die Kernfusion produziert eine
Menge Energie. Ein Teil dieser Energie wird als Licht und Wärme in den Welt-
raum abgestrahlt. Ein kleiner Teil davon erreicht die Erde! Ströme aus Gaspar-
tikel, auch Sonnenwind genannt, verlassen ebenfalls die Sonne.
h2: Sonnenflecken
Auf der Sonnenoberfläche gibt es Gebiete, die etwa 1500 Grad kälter als ihre
Umgebung sind. Wir nennen diese Gebiete "Sonnenflecken", weil sie im Vergleich
zur normalen Sonnenoberfläche dunkel aussehen. Die Sonnenflecken werden durch
das aus dem Sonneninneren aufsteigende starke Magnetfeld erzeugt. Die Sonne
produziert auch große Energieausbrüche, die Flares genannt werden. Diese Fla-
res schießen einen Strom schneller Teilchen von der Sonnenoberfläche in den
Weltraum. Treffen diese Teilchen die Erdatmosphäre so erzeugen sie ein Leuch-
ten, das wir Polarlicht nennen.

49
Einführung in HTML und CSS Einfügen von sensitiven Bildern

9 Einfügen von sensitiven Bildern

Das Einbinden von sensitiven Bildern (auch: clickable images, sensitive map) in ein
HTML-Dokument erhöht dessen Interaktivität.
Sie können als Leser bei einem sensitiven Bild auf bestimmte „heiße“ Bild-Bereiche (hot
spots) klicken, um eine Aktion (Laden einer Datei) anzustoßen, die mit dem gewählten
Bild-Bereich in Zusammenhang steht.
Eine denkbare Anwendung wäre das Bild eines Skeletts, bei dem einzelne Knochen an-
geklickt werden können, woraufhin eine Erklärung zu diesem Knochen eingeblendet wird.
Analog wären Landkarten, Gebäudepläne, historische Gemälde etc. mit erklärenden Tex-
ten denkbar.

9.1 Erstellen eines sensitiven Bildes

In diesem Abschnitt wird ein sensitives Bild erstellt. Es umfaßt folgende Elemente:
1. Bild-Datei
2. erweitertes HTML-Element <img usemap=“...“ ...>
3. <map>...</map> Element mit Definitionen für sensitive Bereiche
4. Sprungziele für die sensitiven Bereiche

Erstellen Sie eine Datei „jupiter.01.htm“ mit Kurzinformationen über den Jupiter.

Erstellen Sie eine neue Datei „sensitive-map.01.htm“ und fügen Sie die Bilddatei „800px-
Solar_sys8.jpg“ aus dem Ordner „media“ ein.

Quelle: http://de.wikipedia.org/w/index.php?
title=Datei:Solar_sys8.jpg&filetimestamp=20070106211750

Aktivieren Sie nun die Symbolleiste Bilder über „Ansicht > Symbolleisten > Bilder“. Krei-
sen Sie den Jupiter per Kreis-Auswahlwerkzeug ein und tragen Sie als Adresse die Datei
„jupiter.01.htm“ ein.

50
Einführung in HTML und CSS Einfügen von sensitiven Bildern

Abbildung 9.1 Definieren eines Hotspots

Speichern Sie die Datei und testen Sie, ob der „Hotspot“ (Jupiter) auf einen Mausklick rea-
giert.

51
Einführung in HTML und CSS Einfügen von sensitiven Bildern

9.2 Syntax
Karte <map name="map_name">
(map) <area shape="rect" coords="ol,or,ul,ur"
href="datei_1.html>
<area shape="circle" coords="x,y,r"
href="datei_2.htm">
<area shape="polygon" coords="x1,y2,x2,x2,..."
href="datei_3.htm">
...
</map>

Hotspot rect = viereckige verweis-sensitive Fläche

(area) cirle = runde verweis-sensitive Fläche
polygon = beliebige vieleckige verweis-sensitive Fläche
ol = Pixel von links für linke obere Ecke
or = Pixel von oben für linke obere Ecke
ul = Pixel von links für rechte untere Ecke
ur = Pixel von oben für rechte untere Ecke
x(1,2).. = Pixel von links
y(1,2).. = Pixel von oben
r = Radius
datei_n.htm = Verweisziel
Bild <img src="image.gif"
usemap="#map_name"
border=0>
Tabelle 9.1: Sensitive Bilder

9.3 Übungen
1. Ergänzen Sie Dateien mit Kurzinformationen für die Planeten und erweitern Sie die
sensitive Karte um „Hotspots“ für weitere Planeten. Speichern Sie unter „sensitive-
map.02.htm“.
2. Erweitern Sie die Bilder der Größenvergleiche zu sensitiven Bildern.

52
Einführung in HTML und CSS Einbinden von Formularen

10 Einbinden von Formularen

In diesem Kapitel lernen Sie die Formulare kennen.
Formulare dienen der Kommunikation zwischen Autor und Leser. Eine typische Anwen-
dung von Formularen sind Gästebücher oder Feeback-Formulare.
In Formularen kann der Leser Eingabefelder ausfüllen, in mehrzeiligen Textfeldern Text
eingeben, aus Auswahl-Listen einen oder mehrere Einträge auswählen und Schaltflächen
(Buttons) anklicken.
Abschließend kann der Leser auf eine Schaltfläche zum „Absenden“ klicken, um das For-
mular zur Verarbeitung abzusenden.

10.1 Versenden eines Formulars per E-Mail

Das folgende einführende Beispiel demonstriert das Versenden einer E-Mail per Formular.
In diesem Fall werden die Paare Absender=xxx, Qualitaet=n an die vorgegebene E-
Mail Adresse versendet.
Bewertung der Veranstaltung:

<table>

...
</tr>

...
</tr>
<tr>
<td><input type="Submit" name="Absenden" value="Absenden">
</tr>
</table>
</form>

Tabelle 10.1: Versenden eines Formulars per Mail [form-001.htm]

Die Darstellung sieht folgendermaßen aus:

53
Einführung in HTML und CSS Einbinden von Formularen

Abbildung 10.1: Formular

10.2 Syntax

Formular definieren <form action="(URL-Adresse)" method=[get od. post]>

... Formular-Elemente und beliebige andere Elemente ...
</form>
Texteingabe-Felder Einzeilige Eingabefelder:
<input name="(Bezeichner)"
size=#(Zeichen) maxlength=#(Zeichen)">
Mehrzeilige Eingabefelder:
<textarea="Bezeichner" rows=#(Zeilen) cols=#(Zeichen)>
evtl.: vorbelegter Text ...
</textarea>
Zeilenumbruch erzwingen:
textarea="Bezeichner" wrap=virtual>
(wrap=virtual: Zeilenumbrüche werden nicht übertragen)
(wrap=physical: Zeilenumbrüche werden übertragen)

54
Einführung in HTML und CSS Einbinden von Formularen

Formular definieren <form action="(URL-Adresse)" method=[get od. post]>

... Formular-Elemente und beliebige andere Elemente ...
</form>
Auswahllisten <select name="(Bezeichner)" size=#(Anzahl)> [multiple]
<option> angezeigter Text
...
</select>
Extras:
<select ... multiple> = Mehrfachauswahl möglich
<option selected> = per Voreinstellung ausgewählter Ein-
trag
Radio- und Check- Radio:
box-Buttons <input type=radio name="(Bezeichner)" value="(Daten)">
Beschriftung
(mehrere Radio-Buttons mit gleichem Namen bilden eine
Gruppe, aus der genau ein Wert ausgewählt werden kann)
Checkbox:
<input type=checkbox name="(Bezeichner)" value="(Da-
ten)"> Beschriftung
(mehrere Check-Boxes mit gleichem Namen bilden eine
Gruppe, aus der beliebig viele Werte - oder auch keiner -
ausgewählt werden kann)
Ausführungsbuttons <input type=submit value="(Beschriftung)"> = Abschicken
<input type=reset value="(Beschriftung)"> = Verwerfen
Frei definierbare <input type=button value="(Beschriftung)" onClick=> (Ja-
Buttons vaScript)
Versteckte Elemente <input hidden value="(Daten)">
(wird vom HTTP-Protokoll mit übertragen)
Tabelle 10.2: Definieren eines Formulars

Hinweise
Mit dem HTML Element „form“ ein Formular (form, englisch für Formular) definiert.
Häufig verwendete Elemente in einem Formular sind Eingabefelder, Auswahllisten oder
Schaltfläche (Buttons). Für die genaue Positionierung der Elemente (Layout) können Ta-
bellen verwendet werden.
Darüber hinaus können Sie zwischen <form...> und </form> auch Text eingeben und
diesen Text wie üblich als Text oder Absatz formatieren. Auch Bilder, Verweise, Tabel-
len, Multimedia-Elemente sind ebenfalls im Formular erlaubt. So können Sie Ihr Formu-
lar optisch aufwerten und mit erklärendem Text oder Bildern versehen.
Im einleitenden FORM-Tag geben Sie mit dem Attribut "action=“URL“ an, was mit den
ausgefüllten Formular-Daten passieren soll, wenn der Leser das Formular abschickt.

55
Einführung in HTML und CSS Einbinden von Formularen

Die Angabe des CGI Scripts bzw. der E-Mail Adresse sollte in Anführungszeichen ste-
hen. In der Regel wird hier ein CGI Script auf dem Server-Rechner aufgerufen, das die
Daten weiterverarbeitet. Für den Namen eines CGI Scripts gelten die gleichen Regeln
wie bei Verweisen..
Die Angabe bei action=“URL“ kann auch eine E-Mail-Adresse sein; (normalerweise Ihre
eigene) mit vorangestelltem mailto: (mailto für: Mail an). Dann werden die ausgefüllten
Formulardaten an diese E-Mail-Adresse geschickt.

10.3 Übungen
1. Erstellen Sie das unten gelistete - nicht ganz erst gemeinte - Formular. Speichern Sie
es unter dem Dateinamen „flugbuchung.01.htm“ und ergänzen Sie die Navigation von
„index.htm“ entsprechend.
2. [zusätzlich]
Erweitern Sie das Formular um Angaben des Buchers (Name, Adresse, Alter), Bilder
der Planeten, Logos für Raucher und Nichtraucher und Logos der Fluggesellschaften
usw – Ihrer Phantasie sind keine Grenzen gesetzt. Speichern Sie es unter „„flugbu-
chung.02.htm“.

56
Einführung in HTML und CSS Einbinden von Formularen

form action="...">
<table width="100%" border="1" >
<tr>
<td width="30%">Zu welchem Planeten möchten Sie?</td>
<td width="70%"><input type="Text" name="Planet" value="<Name>" size="20"
maxlength="50"></td>
</tr>
<tr>
<td>Raucher oder Nichtraucher?</td>
<td><input type="Radio"
name="Raucher"
value="1"
checked> (Raucher) 
<input type="Radio"
name="Raucher"
value="2"
> (Nichtraucher)</td>
</tr>
<tr>
<td>Fluggesellschaft?</td>
<td><select name="Fluggesellschaft"
size="3"><option value="" selected>ESA</option>
<option value="">NASA</option>
<option value="">NeverComeBack Airlines</option>
</select></td>
</tr>
<tr>
<td>Besondere Wünsche?</td>
<td><textarea name="Wuensche"
cols="50"
rows="3">Tragen Sie hier weitere Wünsche ein!</textarea></td>
</tr>
<tr>
<td><input type="Submit"
name="Absenden"
value="Absenden"></td>
<td><input type="Reset" value="Abbrechen"></td>
</tr>
</table>
</form>

Tabelle 10.3: Flugbuchung

57
Einführung in HTML und CSS Gestalten von Seiten mit Stilvorlagen

11 Gestalten von Seiten mit Stilvorlagen

In diesem Kapitel erfahren Sie, wie Sie mit Stilvorlagen eine flexible Seitenaufteilung erzie-
len können. Ähnlich wie mit einer Tabelle können Sie damit das grundlegende Layout ei-
ner Seite festlegen.

Hinweise:
Vorlagen:
http://www.ibdjohn.com/csstemplate/
http://www.planethtml.de/s/vorlagen/webseiten_01.shtml

11.1 Verwenden eines 3-spaltigen Layouts

Im folgenden größeren Beispiel wird mit Hilfe des Containers <div> und dem CSS Attribut
„float“ ein drei-spaltiges Seitenlayout erzielt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>CSS Layout</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="css-layout-001.css" />
<style type="text/css">
</style>
</head>
<body>
<div id="head">
<h1>Erste Überschrift</h1>
</div>

<div id="menulinks">
<ul>
<li><a href="#">Irgendwas</a></li>
<li><a href="#">Irgendwas</a></li>
<li><a href="#">Irgendwas</a></li>
<li><a href="#">Irgendwas</a></li>
<li><a href="#">Irgendwas</a></li>
</ul>

Die Stylesheet Datei enthält folgende Stile (Auszug):

...

58
Einführung in HTML und CSS Gestalten von Seiten mit Stilvorlagen

#menulinks{
float:left;
width:120px;
}
...

Die Darstellung sieht folgendermaßen aus:

Abbildung 11.1: CSS Layout

11.2 Übungen
1. Analysieren Sie das vorgestellte Seitenlayout. Informationen liefert:
http://css.fractatulum.net/index.htm
2. [zusätzlich]
Nutzen Sie die Anregungen in dem folgenden Artikel, um ein eigenes CSS Layout für
eine Seite zu entwickeln:
http://www.andreas-kalt.de/webdesign/tutorials/css-layout-erstellen?pg=all
3. [zusätzlich]
Sie finden eine vollständige Referenz zu CSS unter:
http://de.selfhtml.org/navigation/css.htm
Nutzen Sie diese Informationen, um weitere Stile zu entwickeln.

59
Einführung in HTML und CSS Abschluß-Projekt

12 Abschluß-Projekt
Erstellen Sie aus den bisher erarbeiteten Dateien eine Web-Präsenz mit folgenden Eigen-
schaften:
1. zentrale dynamische Webvorlage mit den Bereichen "Navigation", "Content" usw.
2. zentrales Style File mit Formatvorlagen für h1, h2, p usw.
3. gleichartige Navigation auf alle Seiten (über dyn. Webvorlage)
4. sensitives Bild mit mindestens 4 Hotspots

Dynamische Webvorlage vorlage.dwt (Beispiel):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww-

w.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<title>(Title)</title>

</head>

<body>

<p>(Navigation)</p>

<p>(Content)</p>

60
Einführung in HTML und CSS Anhang

13 Anhang

13.1 Schriftarten für CSS

/****************
* From the article "8 Definitive Web Font Stacks"
* by Michael Tuck
* http://www.sitepoint.com/article/eight-definitive-font-stacks
* Copyright SitePoint 2008
*/

/*
* Filename: font-stack.css.txt
*/

/* Times New Roman-based stack */

font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Ro-
man No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */

font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Luci-
da, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, se-
rif;

/* Traditional Garamond-based serif stack */

font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book
Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman
No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century
Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */

font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans",
"Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation
Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial,
sans serif;

/* Verdana-based sans serif stack */

font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
"DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana
Ref", sans serif;

/* Trebuchet-based sans serif stack */

font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bit-
stream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans serif;

/* Impact-based sans serif stack */

font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Hel-
vetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif;

/* Monospace stack */

61
Einführung in HTML und CSS Anhang

font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lu-
cida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Libe-
ration Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

13.2 Farben
(RGB-) Farbwerte werden in HTML über vordefinierte Farbnamen (red, greeen, blue usw.)
oder als 6-stellige Hexadezimal-Tripel eingegeben.
Im Hexadezimalsystem sind die Ziffern 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e und f erlaubt. Die He-
xadezimalzahl ff entspricht „f * 16 +f = 15*16*15 = 255“. a steht für 10, b für 11 usw. bis f
ür 15.
Höhere Werte erzeugen generell hellere Farben, niedrigere dunkle Farben. Jeweils zwei
Ziffern im HEX-Tripel bestimmen in dieser Reihenfolge die Anteile der Farben Rot, Grün
und Blau.
Einfache Beispiele für Farbwerte lauten:
RRGGBB: RRed-GGreen-BBlue
#ff0000 (Rot)
#00ff00 (Grün)
#0000ff (Blau)
#ffffff (Weiß)
#000000 (Schwarz)
#808080 (Grau)

Die folgende Tabelle enthält die vordefinierten Farbnamen mit den zugehörigen RGB-Wer-
ten als Hex-Tripel:
Farbname HEX-Tripel dt. Übersetzung Beispiel