Webseiten-Layout mit CSS: Der perfekte Einstieg in Cascading Style Sheets 9783645220392

Table of contents :
Inhaltsübersicht
Vorwort
Worum geht es in diesem Buch?
Herunterladen der Beispielcodes zum Buch
Berichtigungen und Feedback
1 Do’s & Dont’s im Webdesign
1.1 Referenzieren von Dateien
1.2 Auf fremde Quellen referenzieren
2 Die Grundlage: Hypertext Markup Language (HTML)
2.1 Grundregeln
2.2 HTML-Tags im praktischen Einsatz
2.3 Arten von Tags
2.4 Attribute bei den Tags
2.5 HTML-Entitäten
2.6 HTML-Struktur
2.7 Text mit HTML strukturieren
2.8 Zitate
2.9 Logische Auszeichnungen
2.10 Bilder einbinden
2.11 Tabellen
2.12 Hyperlinks
2.13 Elemente zum Gruppieren
2.14 Besondere Tags
2.15 Webadressen für dieses Kapitel
3 Eclipse
3.1 Installation der Entwicklungsumgebung
3.2 Der Browser
3.3 Webadressen für dieses Kapitel
4 Cascading Style Sheets
4.1 CSS-Grundlagen
4.2 Selektoren
4.3 Hierarchie der CSS-Definitionen
4.4 Text und Schrift formatieren
4.5 Positionieren von Elementen
4.6 Navigation
4.7 Layout
4.8 Bilder formatieren
4.9 Besondere Formate
4.10 Formatierungen mit CSS 3
4.11 Webadressen für dieses Kapitel
5 Anhang
5.1 Fachbegriffe
5.2 Websichere Farben
5.3 Quellcodes
Stichwortverzeichnis
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
R
S
T
U
V
W
X
Z
Impressum

Citation preview

---

Inhaltsübersicht

Vorwort Worum geht es in diesem Buch? Herunterladen der Beispielcodes zum Buch Berichtigungen und Feedback

1  Do’s & Dont’s im Webdesign 1.1  Referenzieren von Dateien 1.2  Auf fremde Quellen referenzieren

2  Die Grundlage: Hypertext Markup Language (HTML) 2.1  Grundregeln 2.2  HTML-Tags im praktischen Einsatz 2.3  Arten von Tags 2.4  Attribute bei den Tags 2.5  HTML-Entitäten 2.6  HTML-Struktur 2.7  Text mit HTML strukturieren 2.8  Zitate 2.9  Logische Auszeichnungen 2.10  Bilder einbinden 2.11  Tabellen 2.12  Hyperlinks

2.13  Elemente zum Gruppieren 2.14  Besondere Tags 2.15  Webadressen für dieses Kapitel

3  Eclipse 3.1  Installation der Entwicklungsumgebung 3.2  Der Browser 3.3  Webadressen für dieses Kapitel

4  Cascading Style Sheets 4.1  CSS-Grundlagen 4.2  Selektoren 4.3  Hierarchie der CSS-Definitionen 4.4  Text und Schrift formatieren 4.5  Positionieren von Elementen 4.6  Navigation 4.7  Layout 4.8  Bilder formatieren 4.9  Besondere Formate 4.10  Formatierungen mit CSS 3 4.11  Webadressen für dieses Kapitel

5  Anhang 5.1  Fachbegriffe 5.2  Websichere Farben 5.3  Quellcodes

Stichwortverzeichnis

Vorwort Worum geht es in diesem Buch? Dieses Buch will die Grundlagen des Webdesigns mit CSS vermitteln. Es ist jedoch kein klassisches Lehrbuch, von denen es bereits Dutzende gibt. Es will vielmehr ein »Mitmach-Buch« sein. Es zeigt zwar fertige Lösungen auf, bei denen es sich um in der Praxis oft benötigte (Teil)Layouts handelt. Rein theoretisch können sie direkt in Ihre Webprojekte übernommen werden. Aber eigentlich sind es Startpunkte, die Ihnen ein Gefühl für HTML und CSS geben sollen. Sie erklären den theoretischen Hintergrund und zeigen den Einsatz in der Praxis. Aber trotz allem werden sie erst durch kreative Weiterverwendung zum Leben erweckt. Eine Warnung: Wer eine Aufzählung aller CSS-Eigenschaften und der zugrunde liegenden HTML-Technik mit allen möglichen Einstellungen und Varianten erwartet, wird enttäuscht sein. Ich schreibe hier über den praktischen Einsatz von HTML und CSS. Daher verwende ich auch nicht alle Tags oder CSS-Eigenschaften, sondern beschränke mich auf häufig benutzte Tags und Befehle. Im Web treffen wir auf viele verschiedene Betriebssysteme und Browser in unterschiedlichen Versionen. Ideal wäre es, wenn alle diese Kombinationen unser Design identisch darstellen würden. Aber leider ist dies ganz und gar nicht so. Daher müssen wir versuchen, die einzelnen Browser so zu unterstützen (mit der Art unserer Codierung), dass sie eine (fast) gleiche Darstellung der Website erzeugen. Leider würde die Unterstützung der gesamten Palette verfügbarer Browser einen nicht zu vertretenden Aufwand im Design erzeugen. Daher beschränken wir uns auf eine Auswahl derjenigen Browser, die derzeit hauptsächlich verwendet werden. Dazu wurden Erhebungen namhafter Webanalysten[1] zu Rate gezogen. Davon ausgehend beschränken wir uns auf die Browser mit mehr als 5 %

Marktanteil und halten so den Aufwand für die Codierung in einem vertretbaren Rahmen. In diesem Buch konzentrieren wir uns auf die Versionen 7 und 8 des Internet Explorers, auf die Versionen 3.0 bis 3.6 von Firefox und auf den Safari 4.0. Die Versionen 6 und älter des Internet Explorer lassen wir außen vor. Da Websites zum Teil mit sehr hohem Aufwand an diese Browservarianten angepasst werden mussten, sollten wir nicht allzu traurig darüber sein, dass der IE 6 und älter bei den Anwendern langsam ausstirbt. Sofern es gravierende Abweichungen in der Darstellung zwischen den einzelnen Browsern gibt, werde ich darauf hinweisen und einen Trick[2] zur korrekten Darstellung anbieten. Das Kapitel 1 bietet einen ersten Überblick. Wir lernen einige Grundregeln für Webdesign kennen und schließen damit einige häufig auftretenden Fehlerquellen im technischen Bereich des Designs aus. Das Kapitel 2 beschäftigt sich mit den HTML-Elementen. Wir lernen die wichtigsten Tags und ihre Verwendung kennen. Diese werden wir in den folgenden Kapiteln einsetzen und formatieren. Dieses Kapitel können Sie als Nachschlagewerk für die späteren Formatierungen benutzen. Da es sich bei den Beispielen in diesem Kapitel noch nicht um schwierigere Probleme handelt, benötigen wir für die Arbeit nur einen einfachen Texteditor. Eine Entwicklungsumgebung brauchen wir erst später. In Kapitel 3 installieren wir unsere Entwicklungsumgebung. Diese werden wir hier konfigurieren und im folgenden Abschnitt intensiv benutzen. Zusätzlich werden wir für den Firefox-Browser das eine oder andere AddOn installieren, damit wir uns bei der Arbeit leichter tun. Das Kapitel 4 behandelt den großen Komplex des Designs mit Cascading Style Sheets. Hier werden wir eine Fülle von Formatierungsmöglichkeiten kennenlernen und in einzelnen Beispielen umsetzen. Im Anhang finden Sie weiterführende Informationen und auch den gesamten Quelltext aller im Buch vorgestellten Beispiele.

Herunterladen der Beispielcodes zum Buch Wenn Sie die Franzis-Website unter der Adresse http://www.buch.cd besuchen und dort die letzten fünf Ziffern der ISBN dieses Buches samt Bindestrich eingeben, können Sie alle Beispielcodes und sonstigen Ressourcen zu diesem Buch herunterladen. Die verfügbaren Dateien werden nach der erfolgreichen Anmeldung angezeigt.

Berichtigungen und Feedback Obwohl alle Beteiligten mit größter Sorgfalt vorgehen, um die Richtigkeit der Inhalte sicherzustellen, passieren mitunter Fehler. Wenn Sie einen Fehler in diesem Buch entdecken, ob im Text oder im Quellcode, bin ich für eine Mitteilung sehr dankbar. So können Sie anderen Lesern Ärger ersparen und mithelfen, die nachfolgende Version des Buches zu verbessern. Wenn Sie irgendeinen Druckfehler finden, teilen Sie ihn mir bitte per E-Mail an [email protected] mit. Aktualisierungen sowie Verbesserungen des Buches werde ich auf meinem Blog (http://www.guru-20.info) veröffentlichen. Ich würde mich über Reaktionen und Anregungen sehr freuen. Darüber hinaus sind Lob und Kritik sehr willkommen. Sie erreichen mich unter folgender Adresse: [email protected]. Herzlichen Dank vorab! Ihr Clemens Gull [1] Beispielsweise: http://www.webmasterpro.de/portal/webanalyseaktuell.html [2]

einen sogenannten Hack

1  Do’s & Dont’s im Webdesign Im Webdesign gibt es einiges, was wir zwar tun könnten, aber möglichst vermeiden sollen. Wenn wir uns an diese ungeschriebenen Gesetze halten, ersparen wir uns einige Probleme bei unseren Websites. Beginnen wir mit einigen formalen Vorgaben: Datei- und Verzeichnisnamen sollten: keine Leerzeichen enthalten nur aus Buchstaben (a – z und A – Z) und Ziffern bestehen Unterstriche (_) sind erlaubt Groß-/Kleinschreibung ist wichtig Datei- und Verzeichnisnamen sollten »klingende« Namen verwenden. Da wir das Betriebssystem eines Webservers nicht vorab kennen, sollten wir uns auf den kleinsten gemeinsamen Nenner bei den Namen einigen. Denn ein Unix-System speichert die Zeichen anders als ein WindowsSystem. So unterscheiden UNIX-Systeme bei der Groß-/Kleinschreibung und Windows-Systeme nicht. Allein dadurch können uns einige Probleme entstehen, wenn wir uns nicht an die Regeln halten. Struktur Dateien sollten immer logisch gruppiert werden: Bilder in das Verzeichnis \images Style Sheets in das Verzeichnis \css JavaScript-Skripte in das Verzeichnis \js Für jedes Website-Thema sollte ein Verzeichnis erstellt werden: Beispiel-Fotos, Grafiken, Zeichnungen, Skulpturen Die Verzeichnisstruktur sollte nicht mehr als drei Ebenen aufweisen. In jedem Verzeichnis sollte eine Datei namens index.html stehen. Verweise auf Dateien erfolgen immer mit einer relativen Pfadangabe (dazu gleich mehr).

Eine gute und logische Struktur erleichtert uns die Arbeit an einer Website immens. Wenn wir bei allen unseren Sites die gleichen Verzeichnisse anlegen und verwenden, fällt uns die Arbeit leichter. Webserver sind nichts anderes als Computer, die auf eine Datenanforderung reagieren. Wenn ein Anwender eine Domäne verlangt, so ist das für den Webserver ein Verzeichnis auf seiner Festplatte. Findet der Server eine Datei mit dem Namen index.html, so schickt er diese an den anfordernden Browser. Fehlt diese Datei jedoch, zeigt der Webserver den Inhalt des Verzeichnisses als Liste an. Und gerade das wollen wir den Benutzern unserer Website nicht zeigen. Daher sollten wir in jedem Verzeichnis eine Datei namens index.html anlegen.

1.1  Referenzieren von Dateien Webseiten bestehen ja im Grunde nur aus reinem Text, aber trotzdem sehen wir Bilder, hören Sound oder es wird ein Video abgespielt. Zusätzlich gibt es noch Hyperlinks, CSS-Dateien oder externe JavaScript-Dateien. Auf all diese Dateien oder Links müssen wir Referenzen einrichten. Über eine solche Referenz binden wir externe Medien in unsere textbasierten Webseiten ein. Referenzen entstehen zwar immer auf die gleiche Art, aber trotzdem müssen wir sie komplett verstanden haben, um sie zu beherrschen. Wir müssen also Wege (auch Pfade genannt) in den verschiedensten Attributen (beispielsweise href="..." beim a-Tag oder URL(...) in CSS) bei HTML und CSS angeben.

1.2  Auf fremde Quellen referenzieren Die einfachste Methode ist die absolute Adressierung auf eine fremde Quelle. Damit ist gemeint, dass der exakte Ort der Zieldatei bekannt ist und auf diese verwiesen werden kann.

Beispiel http://www.google.at

http://www.example.org/

http://www.example.org/index.html

http://www.example.org/index-html#impressum

http://www.example.org/kontakte.pdf

http://www.example.org/images/logo.gif

Diese Art der Referenzierung (Adressierung) nennen wir absolut. In der eigenen Website verweisen Innerhalb der eigenen Website können wir natürlich auch mit absoluten Referenzen arbeiten, aber es ist nicht üblich. Besser arbeiten wir mit relativen Referenzen. Bei dieser Art werden einfach der Domänenname und das Protokoll weggelassen. Wir navigieren also mit der Pfadangabe durch die Verzeichnisstruktur der eigenen Website. Relativ wird dies genannt, da der Speicherort der aktuellen Datei als Ausgangspunkt verwendet wird und die Referenz relativ zu diesem Punkt erfolgt. Bei diesem Beispiel gehen wir immer vom Wurzelverzeichnis (root) aus. Damit ist die Datei gemeint, die die Referenz enthält. Nehmen wir an, diese Datei hat den Namen portfolio.html und steht im Hauptverzeichnis unserer Domäne. Beispiel: Verweis auf Startseite Sobald wir von der Datei auf die Startseite index.html verweisen wollen, z. B. mit einem Hyperlink, müssen wir diese Schreibweise verwenden: /index.html

Beispiel: Verweis auf Bild in Unterverzeichnis Wollen wir in der Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz so aufbauen: /images/logo.gif

Bei dem folgenden Beispiel gehen wir davon aus, dass wir uns in der Datei info.html im Unterverzeichnis /standard befinden. Beispiel: Verweis auf Datei in höherem Verzeichnis Sobald wir von der Datei auf die Startseite verweisen wollen, z. B. mit einem Hyperlink, müssen wir die folgende Schreibweise verwenden. Wir können mit zwei aufeinanderfolgenden Punkten eine Verzeichnisebene höher wechseln. Wir müssen so vorgehen, da wir uns ja in einem Unterverzeichnis des Hauptverzeichnisses befinden. ../index.html

Beispiel: Verweis auf Bild in höherem Verzeichnis Wollen wir in der HTML-Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz wie folgt aufbauen. Zuerst wechseln wir mit den zwei Punkten ein Verzeichnis höher (in das Hauptverzeichnis) und danach in das Verzeichnis images, das unterhalb des Hauptverzeichnisses angesiedelt ist. ../images/logo.gif

Bei den folgendenen Beispielen gehen wir davon aus, dass die Datei galerie.html im Verzeichnis /photos/paris gespeichert ist. Beispiel: Verweis auf Startseite in höherem Verzeichnis Sobald wir von der Datei auf die Startseite verweisen wollen, z. B. mit einem Hyperlink, müssen wir diese Schreibweise verwenden. Mit einem einfachen Schrägstrich am Anfang wechseln wir immer ins Hauptverzeichnis. /index.html

Beispiel: Verweis auf Bild in entferntem Ordner

Wollen wir in der HTML-Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz wie folgt aufbauen. Zuerst wechseln wir mit den zwei Punkten ein Verzeichnis höher, ins Verzeichnis /photos. Danach geht es wieder eine Stufe höher ins Hauptverzeichnis und in der Folge ins Verzeichnis images, das unterhalb des Hauptverzeichnisses angesiedelt ist. ../../images/logo.gif

Beispiel: Verweis auf Indexseite in höherem Verzeichnis Mit dieser Referenz zeigen wir die Startseite des Verzeichnisses /photos an. ../index.html

AUTONUM Übung: Referenzieren Folgende Verzeichnisstruktur ist gegeben: |-index.html

|-+images

| | logo.gif

| | back.png

|-+css

| | main.css

|-+photos

| | album1.html

| |-+album1

| | | bild1.jpg

| | | bild2.jpg

| | | subalbum1.html

| |-+subalbum1

| | | bild5.jpg

| | | bild6.jpg

Wir wollen von den verschiedenen HTML-Dateien auf CSS-Dateien oder Bilder referenzieren. Dazu benötigen wir die Pfadangabe für die passende Datei. Ermitteln Sie den relativen Pfad für die Referenz auf die Datei main.css in der Datei index.html die Dateien bild1.jpg und bild2.jpg in der Datei album1.html die Datei logo.gif in der Datei subalbum1.html

die Dateien bild5.jpg und bild6.jpg in der Datei subalbum1.html Die Lösungen für diese Übung lauten: css/main.css

album1/bild1.jpg

und album1/bild2.jpg



../../images/logo.gif

../subalbum1/bild5.jpg

und ../subalbum1/bild6.jpg

2  Die Grundlage: Hypertext Markup Language (HTML) Tags sind Marker in HTML. Sie dienen als Formatierungskommandos einer HTML-Seite. In der Folge werden wir die Grundregeln für Tags kennenlernen. Bei den folgenden Beschreibungen wird nur auf die Besonderheiten eingegangen. Die hier aufgeführten Grundregeln gelten aber immer.

2.1  Grundregeln Allgemeine Merkmale Alle HTML-Tags werden von spitzen Klammern < und > umschlossen. Ein Tag besteht immer aus seinem Namen und kann im öffnenden Tag Attribute enthalten. Tags werden in HTML immer nach dem LIFO-Prinzip (Last-In, FirstOut) gesetzt. Beispiel einer gültigen Tag-Folge:

...

Beispiel einer ungültigen Tag-Folge:

2.2  HTML-Tags im praktischen Einsatz Tags werden immer in Kleinbuchstaben geschrieben.

Der öffnende Tag lautet immer gleich wie der schließende. ...

Der schließende Tag beginnt immer mit einem Schrägstrich. ...

Hat der Tag keinen schließenden Partner, wird im öffnenden Tag der Schrägstrich vor der schließenden spitzen Klammer gesetzt.




Werte für Attribute in einem Tag werden immer in Anführungszeichen gesetzt. ...

2.3  Arten von Tags Inline-Elemente Diese Tags werden vom Browser so eingesetzt, dass sie den Textfluss nicht unterbrechen, also keinen Umbruch einfügen. Block-Elemente Diese Tags erzeugen im Browser einen eigenen Block. Wir können uns das optisch als ein Rechteck auf der Seite vorstellen. Meistens wird unterhalb des Elements auch noch automatisch eine Leerzeile eingefügt.

2.4  Attribute bei den Tags Allgemeines Jeder Tag kann über zusätzliche Attribute verfügen. Manche sind zum Steuern der Anzeige da, andere werden für CSS oder JavaScript benötigt. Weitere sind einfach sinnvoll, um Menschen mit Einschränkungen das Benutzen der Website zu erleichtern. Kernattribute Diese Attribute können bei fast allen Tags verwendet werden. Falls in der Folge bei einem HTML-Tag nichts anderes vermerkt ist, können die folgenden Attribute verwendet werden. id Gibt dem Element eine eindeutige Kennung[1]. Mit dieser kann es mittels CSS oder JavaScript angesprochen werden.

class Ordnet dem Element eine oder mehrere Klassen aus einem Style Sheet zu. style Wendet einen bestimmten CSS-Stil auf dieses Element an. title Gibt dem HTML-Element einen eigenen Titel. Dieser wird als Hinweis im Browser angezeigt, sobald der Mauszeiger auf das Element zeigt.

2.5  HTML-Entitäten Betrachten wir vorab einmal, was die Wikipedia über Entitäten zu sagen hat. Der Begriff wird dort folgendermaßen definiert: »Als Entität (synonym Informationsobjekt; englisch Entity) wird in der Datenmodellierung ein eindeutig zu bestimmendes Objekt bezeichnet, dem Informationen zugeordnet werden. Die Objekte können materiell oder immateriell sein.« Was bedeutet das für uns? In HTML können nicht alle Zeichen direkt in die Datei geschrieben werden. Denn manche Zeichen dienen der Steuerung der Datei oder sind für spezielle Funktionen reserviert. Diese Zeichen müssen dann als EscapeSequenz angegeben werden. Die Angabe dieser Sequenz beginnt immer mit einem Ampersand (EtZeichen oder kaufmännisches Und, &) und endet immer mit einem Semikolon (Strichpunkt, ;). Dazwischen kann entweder eine benannte Sequenz oder ein Unicode-Codepoint (dezimal oder hexadezimal) stehen. Üblicherweise wird bei HTML die benannte Version bevorzugt.

Wichtige Entitäten Es gibt für jedes Zeichen eine dezimale Escape-Sequenz und auch für viele Zeichen eine benannte Version. Hier werden nur die wichtigsten für den alltäglichen Gebrauch notwendigen Entitäten aufgeführt. Zeichen

Entität

dezimal

Memo

 

 

Nicht umbrechendes Leerzeichen (non breaking space)

"

"

"

Einfaches doppeltes Anführungszeichen (quotation mark)

&

&

&

Et-Zeichen; es kann nicht direkt dargestellt werden, da es für die Escape-Sequenz reserviert ist (ampersand)

'

'

'

Einfaches Anführungszeichen, Apostroph (apostroph)




Größer-Zeichen; es kann nicht direkt dargestellt werden, da es für die Tags reserviert ist (greater than)

§

§

§

Paragraphen Zeichen (section sign)

©

©

©

Copyright-Symbol (copyright sign)

®

®

®

Symbol für eingetragenes Warenzeichen (registered trademark)

™

™

®

Warenzeichen (trademark)

2

²

²

Hoch zwei

3

³

³

Hoch drei

€

€

€

Euro-Zeichen

•

·

·

Punkt in der Mitte der Zeile

•

•

•

Aufzählungszeichen (bullet)

‰

‰

‰

Promille-Zeichen

ª

♠

♠

Pik-Zeichen (black spade suit)

Zeichen

Entität

dezimal

Memo

§

♣

♣

Treff-Zeichen (auch Kreuz, black club suit)

©

♥

♥

Herz-Zeichen (black heart suit)

¨

♦

♦

Karo- oder Promille-Zeichen (black diamond suit)

ß

ß

ß

Scharfes s

ä

ä

ä

Kleines Umlaut-a

Ä

Ä

Ä

Großes Umlaut-A

ö

ö

ö

Kleines Umlaut-o

Ö

Ö

Ö

Großes Umlaut-O

ü

ü

ü

Kleines Umlaut-u

Ü

Ü

Ü

Großes Umlaut-U

à

à

à

Kleines a mit Accent grave

æ

æ

æ

Kleine ae-Ligatur

Æ

Æ

Æ

Große AE-Ligatur

œ

œ

œ

Kleine oe-Ligatur

Œ

Œ

Œ

Große OE-Ligatur

Alle nationalen Sonderzeichen werden immer mit den entsprechenden Escape-Sequenzen dargestellt!

2.6  HTML-Struktur Jede HTML-Datei muss mindestens die folgenden Tags umfassen: Beispiel für minimales HTML-Dokument







...



...

...

...



Document Type Definition (DTD) Definiert den Dokumententyp laut W3C-Standard. Die DokumenttypDeklaration[2] teilt dem Browser mit, nach welchem Standard er das HTML-Dokument anzeigen soll. Das ist wichtig für die browserunabhängige Anzeige von Internetseiten. Es gibt verschiedene DTDs, von denen uns zwei besonders interessieren. Die DTD darf nur als erste Zeile vor dem öffnenden html-Tag vorkommen. Strict In der strict-Variante sind die Verschachtelungsregeln für HTMLElemente strenger und sauberer formuliert. Alle Inhalte müssen in sogenannten Block-Elementen stehen. Verschiedene Tags – besonders zur Formatierung – werden nicht verwendet. Beispiel

Transitional Wird benutzt, wenn einige der in der strict-Variante nicht erlaubten Elemente und Attribute verwendet werden. In der Variante Transitional sind zum Beispiel die Regeln für die Elementverschachtelung etwas milder. Es ist nach dieser Variante erlaubt, zwischen den body-Tags nackten Text außerhalb eines weiteren Elements zu notieren. Dieser Dokumententyp wird auch benötigt, wenn Links mit dem target-Attribut verwendet werden. Beispiel

Der html-Tag Er kennzeichnet den Beginn und das Ende einer HTML-Datei. Vor dem öffnenden Tag darf nur die DTD stehen. Nach dem schließenden Tag darf kein weiterer Text oder Tag folgen. Jede HTML-Datei kann nur einen html-Block besitzen! Syntax ...

Attribute id

DTD strict, transitional

Bemerkung Der Tag kann nur einmal vorkommen. Er muss entweder als erste beziehungsweise letzte Zeile im Dokument gesetzt werden. Falls eine DTD verwendet wird, muss der öffnende -Tag der DTD folgen und der schließende Tag als letzte Zeile gesetzt werden.

Der head-Tag Im Bereich des head-Blocks stehen Informationen über die HTML-Datei. Damit kann der Browser die Seite richtig darstellen. Zudem verwenden Suchmaschinen spezielle Tags aus diesem Bereich. Jede HTML-Datei kann nur einen Kopfbereich besitzen! Syntax ...

Attribute id

DTD strict, transitional

Bemerkung Der Tag ist nur ein Behälter für andere Elemente und hat keinen eigenen Inhalt. Er muss direkt nach dem html-Tag verwendet werden und kann nur folgende Elemente enthalten: script – style – meta – link – object – isindex – base

Der Zeichensatz Legt fest, welche Zeichenkodierung die HTML-Datei verwendet. Diese Angabe ist für den Browser besonders wichtig, denn sie teilt ihm mit, nach welcher Kodierung die Bytes der Datei in Zeichen umgewandelt werden müssen. Das vermeidet hässliche Zeichen auf einer Website. Beispiel für Zeichensatzkodierung ...



...

Die Erklärung zu den meta-Tags erfolgt weiter unten. Es gibt verschiedene Zeichensätze (charset ). In der Praxis verwenden wir jedoch nur UTF-8 [3], da es uns einige Dinge erleichtert. Der Zeichensatz ist der erste Tag nach dem head-Tag und er wird immer angegeben! Der title-Tag Der Inhalt des title-Tags wird beim Benutzer an verschiedenen Stellen angezeigt: im Browser in der Titelzeile im Browser in den Reitern (sogenannte Tabs) vom Browser beim Setzen von Lesezeichen (Bookmarks, Favoriten) im Browser in der Liste der bereits besuchten Seiten (Chronik) Wenn die HTML-Datei zu den Suchtreffern einer Suche gehört, bieten Suchmaschinen den Titel der Datei als anklickbaren Link an. Damit ist klar, dass der Titel aussagekräftig und klar sein muss. Wir denken daran, dass bei vielen Reitern im Browser nur die ersten Zeichen dargestellt werden. Daher ist es wichtig, dass wir bereits in den ersten 10 bis 15 Zeichen die wichtigste Information transportieren. Syntax ...

Attribute Kernattribute

DTD strict, transitional

Bemerkung Dieser Tag ist nach der Definition von HTML 4.01 obligatorisch (verpflichtend). Der Inhalt darf nur aus ASCII[4]-Zeichen (Buchstaben, Zahlen und einfachen Satzzeichen) bestehen. Alle Sonderzeichen dürfen nicht als HTML-Entitäten codiert sein. Er darf nur im head-Bereich vorkommen.

Beispiel für title-Tag ...

Beispiele zu einfachem HTML

...

...

Bild 2.1  Darstellung des title-Tags im Browser

Der body-Tag Im Bereich des body-Blocks stehen die Inhalte der HTML-Datei. Hier kommen alle Informationen hin, die der Benutzer im Browser sehen bzw. hören soll. Syntax ...

Attribute Kernattribute

DTD strict, transitional

Bemerkung Dieses Element ist in HTML 4.01 als obligatorisch eingeführt worden. Alle Attribute wurden zu Gunsten von CSS als veraltet eingestuft. Es muss direkt nach dem schließenden head-Tag folgen. Der schließende Tag muss direkt vor dem schließenden html-Tag stehen.

Jede HTML-Datei kann nur einen body-Bereich besitzen!

2.7  Text mit HTML strukturieren Hier kommen wir zu den Grundregeln, um Texte in HTML strukturiert darzustellen. Es ist wichtig, diese Tags im Schlaf zu beherrschen. Einerseits geben sie dem Text im Web Struktur und Gewicht. Andererseits werden diese Tags auch von Suchmaschinen zur Gewichtung und zum Indizieren verwendet. Der Absatz Absätze können in HTML nicht einfach durch einen Umbruch in der Zeile eingefügt werden, wir brauchen dazu den p-Tag[5] , um den Browser anzuweisen, dass ein Absatz ausgegeben werden soll. Syntax

...

Attribute Kernattribute

Art Block-Element

DTD strict, transitional

Bemerkung Absätze können keine anderen Blockelemente enthalten.

Beispiel für einen Absatz ...

Dies ist ein normaler Absatz!

Dies ist ein zweiter Absatz!

...

Bild 2.2  Darstellung des p-Tags im Browser

AUTONUM Übung: Formatierung mit HTML Wir erstellen eine neue HTML-Datei mit dem Namen uebung2.html. Danach nehmen wir einen Blindtext[6] und formatieren ihn wie gezeigt in Absätzen. Achten Sie auch auf die entsprechenden Escape-Sequenzen und die Formatierung und Struktur der HTML-Datei.

Bild 2.3  Lösung der 2. Übung im Browser

Der Zeilenumbruch Normalerweise kümmert sich der Browser um den passenden Zeilenumbruch. Er beginnt eine neue Zeile, wenn nicht mehr genug Platz in der aktuellen Zeile vorhanden ist. Der Browser ignoriert auch Z il h l di i f h i T di d d

Zeilenschaltungen, die einfach im Texteditor oder der Entwicklungsumgebung eingegeben werden. Manchmal wollen wir aber eine Zeile an einer bestimmten Stelle beenden. Dafür gibt es den manuellen Zeilenumbruch[7], kurz br. Syntax


Attribute Kernattribute

Art Inline-Element

DTD strict, transitional

Bemerkung Der Break-Tag hat keinen schließenden Tag. Daher werden am Ende vor der schließenden Klammer ein Leerzeichen und ein Schrägstrich eingefügt, um die geforderte Konformität für HTML 4.01 zu erreichen.

Mehrere aufeinanderfolgende Break-Tags können von Browsern zu einem Zeilenumbruch zusammengefasst werden. Es ist nicht sinnvoll, mehrere br-Tags aufeinander folgen zu lassen, da andere Möglichkeiten zur Strukturierung des Textes zur Verfügung stehen.

Da die Browser jede in der Entwicklungsumgebung eingegebene Zeilenschaltung ignorieren, müssen wir diese mit einem br-Tag erzeugen. Es ist aber gleichgültig, ob der Break-Tag mitten im Text, am Ende oder am Anfang einer Zeile steht.

Beispiel für Zeilenumbruch Der Browser wird hier nach dem Wort hat einen Zeilenumbruch einfügen. ...

Dieser Text steht in einer Zeile und hat
40Ä

Zeichen.

...

Bild 2.4  Darstellung des br-Tags im Browser

Oft wäre es praktisch, wenn wir Wörter und Zahlen zu einem Wort zusammenfügen und somit sicherstellen könnten, dass dazwischen kein Zeilenumbruch erfolgt. Dies brauchen wir immer wieder bei einem Datum oder bei Zahlen mit einer Maßeinheit. Bei den HTML-Entitäten haben wir schon den non-breaking-space (das nicht umbrechende Leerzeichen) gesehen. Diese Entität ist genau für diese Zwecke gedacht. Beispiel für nicht-umbrechende Leerzeichen ...

Dieser Text steht in der Zeile und hat 40 Zeichen.


Genauso kann man ein Datum (2. Juni 2008) formatieren. Damit wird es als ein Wort vom Browser erkannt.

...

Bild 2.5  Darstellung des br-Tags mit   im Browser

Wie ist das aber bei langen Wörtern? Der Browser kennt keine automatische Silbentrennung und ein langes Wort wird einfach in die nächste Zeile geschoben, was zu ungewollten Leerräumen führen kann. Dafür gibt es die Entität ­ (soft hyphen, bedingter Trennstrich). Wird diese Entität eingefügt, so erzeugt sie einen Trennstrich, wenn sie am Ende der Zeile steht.

Beispiel für bedingte Trennstriche ...

Dieser Text steht in einer Zeile. Um den bedingten Trennstrich auch erfolgreich ausprobieren zu können brauchen wir jetzt ein langes Wort wie wir es ja alle kennen: Donaudampf­schiffahrts­ Ä

kapitänsmützenrand.

...

Bild 2.6  Darstellung des br-Tags mit ­ im Browser

Aber wir müssen aufpassen, denn ­ wird zwar von allen modernen Browsern grundsätzlich unterstützt. Aber es gibt beim Internet Explorer Probleme, denn der sieht jedes Auftreten der Entität als Worttrenner. Er wird also bei jedem Auftreten einen Bindestrich einfügen, ganz gleich, ob das »soft hyphen« am Zeilenende steht oder nicht. Textgliederung durch Überschriften In HTML stehen sechs verschiedene Überschriftenebenen zur Verfügung. Die Überschriften-Tags sind an einem h zu erkennen (h = headline), auf das die Nummer der zugeordneten Überschriftenebene folgt: , , und so weiter. Überschriften erleichtern die Strukturierung des Textes. Sie werden wie Überschriften in einem gedruckten Text verwendet, die Überschrift 1 ist also auch wichtiger als die Überschrift der Ebene 2 und so weiter. Natürlich müssen sie auch in der richtigen Reihenfolge vorkommen, es darf also keine Überschrift 2 vor der Ebene 1 auftreten. Gerade für die Suchmaschinenoptimierung ist der Einsatz von Überschriften wichtig. Denn dadurch erkennen Suchmaschninen die

wichtigen Begriffe innerhalb eines Textes und können so die Struktur »lesen«. Als Faustregel gilt, dass pro HTML-Datei nur eine Überschrift 1 vorkommen soll. Sobald wir wieder ein wichtiges Thema beginnen, das eine Hauptüberschrift braucht, sollten wir eine neue HTML-Datei erstellen. Suchmaschinen bewerten Dokumente mit vielen Überschrift-1-Ebenen schlechter. Die Browser fügen vor bzw. nach einer Überschrift automatisch Leerraum ein. Syntax ...

...

...

...

...

...

Attribute Kernattribute

Art Block-Element

DTD strict, transitional

Bemerkung Überschriften können keine anderen Blockelemente enthalten.

Beispiel für Überschriften ...

Was sind Gummibärchen?

Freilebende Gummibärchen gibt es nicht

Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man.

...

Bild 2.7  Darstellung des Überschriften-Tags im Browser

AUTONUM Übung: Überschriften Öffnen Sie die Datei uebung2.html und speichern Sie sie unter dem Namen uebung3.html ab. Gliedern Sie den Text jetzt mit verschiedenen (sinnvollen) Überschriften.

Bild 2.8  Lösung der 3. Übung im Browser

Aufzählungen In manchen Texten müssen wir einzelne Punkte aufzählen, entweder mit oder ohne Hierarchie. Natürlich können wir das per Hand machen, aber praktischer ist es mit den Tags, die HTML anbietet. Beide Arten von Listen haben eine Gemeinsamkeit: Sie verwenden denselben li-Tag[8], um einzelne Einträge zu kennzeichnen. Syntax

...

Attribute Kernattribute

Art Block-Element

DTD

strict, transitional

Bemerkung Dieser Tag darf nur innerhalb der Tags ul und ol (siehe unten) vorkommen.

Unsortierte Liste Die unsortierte Liste[9] stellt uns eine Aufzählung ohne jede Hierarchie zur Verfügung. Syntax

...

Attribute Kernattribute

Art Block-Element

DTD strict, transitional

Bemerkung Das Aufzählungszeichen wird normalerweise vom Browser eingestellt. Dieser Tag darf nur li-Tags enthalten.

Beispiel für eine unsortierte Liste ...

• Von nichts kommt nichts



• Üben, üben, üben



• Webdesign ist super!

...

Bild 2.9  Darstellung des ul-Tags im Browser

Sortierte Liste Die sortierte Liste[10] funktioniert fast gleich wie die vorherige. Aber statt ein einfaches Aufzählungszeichen wird eine automatische Nummerierung zur Verfügung gestellt. Syntax ...

Attribute Kernattribute

Art Block-Element

DTD strict, transitional

Bemerkung Das Aufzählungszeichen wird normalerweise vom Browser eingestellt. Dieser Tag darf nur li-Tags enthalten.

Beispiel für eine sortierte Liste ...

Von nichts kommt nichts

Üben, üben, üben

Webdesign ist super!

...

Bild 2.10  Darstellung des ol-Tags im Browser

Verschachtelte Listen Natürlich können wir Listen auch verschachteln. Wir beginnen einfach innerhalb eines li-Elements eine neue Liste. Der Browser kümmert sich dann um die Darstellung der passenden Hierarchie. Beispiel für verschachtelte Listen ...

Sprüche

Von nichts kommt nichts

Üben, üben, üben

Webdesign ist super, wenn man das beherrscht:

Die Grundstruktur

Die Entitäten

Die Tags

• Attribute



• Elementart



• DTD

...

Bild 2.11  Darstellung von verschachtelten Listen im Browser

AUTONUM Übung: Listen Erstellen Sie eine neue Datei mit dem Namen uebung4.html. In dieser Datei erstellen Sie eine unsortierte Liste mit den Farben der Gummibärchen in einer Packung. Danach erstellen Sie eine zweite sortierte Liste, mit der Sie die Farben nach Ihren Vorlieben ordnen. Vergessen Sie nicht, die HTMLStruktur richtig vorzunehmen und auch passende Titel einzufügen.

Bild 2.12  Lösung der 4. Übung im Browser

Bild 2.13  Lösung der 4. Übung im Quellcode

2.8  Zitate Es gibt zwei Varianten, um etwas zu zitieren (also eine Aussage von jemand anderem zu verwenden). Bei längeren Texten oder mehreren Absätzen wird der folgende Tag verwendet: Lange Zitate Syntax ...

Attribute Kernattribute cite = "URL" Gibt die Adresse der Originalquelle an.

Art Block-Element

DTD strict, transitional

Bemerkung Die Formatierung dieses Elements ist nicht vorhersagbar, da es dem Browser überlassen ist, wie es formatiert wird. Aber üblicherweise wird es als eingerückter Text (links und rechts) dargestellt.

Beispiel für ein längeres Zitat ...

Es handelt sich dabei jedoch um eine logische, inhaltliche

Auszeichnung. Wie diese Absätze genau formatiert

werden, bestimmt letztlich der Web-Browser. Die Vorgabe ist

jedoch, solche Absätze auffällig und vom

übrigen Text unterscheidbar anzuzeigen.



...

Bild 2.14  Darstellung des blockquote-Tags im Browser

Zitatquelle Syntax ...

Attribute Kernattribute

Art Inline-Element

DTD strict, transitional

Bemerkung Wird vom Browser üblicherweise kursiv dargestellt.

Beispiel für eine eingefügte Zitatquelle ...

Es handelt sich dabei jedoch um eine logische, inhaltliche

Auszeichnung. Wie diese Absätze genau formatiert

werden, bestimmt letztlich der Web-Browser. Die Vorgabe ist

jedoch, solche Absätze auffällig und vom

übrigen Text unterscheidbar anzuzeigen.

Clemens Gull

...

Bild 2.15  Darstellung des cite-Tags im Browser

Kurze Zitate Für kürzere Zitate wie einen Satz oder eine Wortgruppe gibt es auch noch einen zweiten Tag. Der Bezeichner q ist vom englischen Wort quote abgeleitet, was »Zitieren« oder auch »Zitat« bedeutet. Syntax ...

Attribute Kernattribute

Art Inline-Element

DTD strict, transitional

Bemerkung Die Formatierung dieses Elements ist nicht vorhersagbar, da es dem Browser überlassen ist, wie es formatiert wird.

Beispiel für ein kurzes Zitat ...

Der q-Tag ist für kurze Zitate vorgesehen: Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung. Dadurch kann sich das

Aussehen von Browser zu Browser unterscheiden.

...

Bild 2.16  Darstellung des q-Tags im Browser

2.9  Logische Auszeichnungen Bis jetzt haben wir die Auszeichnung von Texten nach dem Gesichtspunkt der Struktur kennengelernt, aber HTML bietet auch ein paar Möglichkeiten, Text hervorzuheben oder logisch zu kennzeichnen. Hervorhebung Syntax ...

Attribute Kernattribute

Art Inline-Element

DTD strict, transitional

Bemerkung Fast alle Browser stellen diesen Tag als kursiv[11] dar. Die Abkürzung bedeutet emphasized[12].

Beispiel für Hervorhebungen ...

Zuerst genießt man. Dieser Genuss umfasst alle

Sinne. Man wühlt in den Gummibärchen, man fühlt sie.

...

Bild 2.17  Darstellung des em-Tags im Browser

Starke Hervorhebung (Fettung) Syntax ...

Attribute Kernattribute

Art Inline-Element

DTD strict, transitional

Bemerkung Fast alle Browser stellen diesen Text fett[13] geschrieben dar.

Beispiel für eine Fettung ...

Zuerst genießt man. Dieser Genuss umfasst alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie.

...

Bild 2.18  Darstellung des strong-Tags im Browser

Kurzen Quelltext anzeigen Syntax ...

Attribute Kernattribute

Art Inline-Element

DTD strict, transitional

Bemerkung Der Tag zeigt einen Befehl oder einen Quelltext[14] an. Die meisten Browser formatieren diesen Tag mit einer nichtproportionalen Schrift wie zum Beispiel Courier.

Beispiel für einen kurzen Quelltext ...

Am Besten werden kurze Zitate mit dem q-Tag ausgezeichnet.
Beispiel


ein kurzes Zitat>

...

Bild 2.19  Darstellung des code-Tags im Browser

Langen Quelltext anzeigen Bei manchen Webseiten brauchen wir eine exakte Wiedergabe[15] des Quelltexts. Das heißt, es dürfen weder Zeichen noch Einrückungen verändert werden. Dafür wird der -Tag verwendet. Syntax ...

Attribute Kernattribute

Art Block-Element

DTD strict, transitional

Bemerkung Alle Zeichen innerhalb dieses Tags werden trotzdem vom Browser interpretiert.

Die meisten Browser verwenden zur Darstellung eine Schrift mit fester Laufweite, zum Beispiel Courier.

Es ist oft sinnvoll, den pre-Tag mit einem code-Tag zu kombinieren. Damit erhalten wir eine logische und eine strukturelle Auszeichnung der Information.

Beispiel für einen lägneren Quelltext ...

Die Struktur eines html-Dokuments











Struktur einer HTML-Datei





...

...

...









Bild 2.20  Darstellung des pre-Tags im Browser

2.10  Bilder einbinden Auch klar strukturierte und logisch gegliederte HTML-Seiten würden kahl und nackt wirken, wenn wir nicht auch Grafiken, Bilder oder Fotos einbinden könnten. Auch dafür gibt es einen eigenen Tag. Wir können allerdings nicht jedes Grafik-Dateiformat in einer Website verwenden. Es gibt im Web nur drei Datentypen, die von jedem Browser angezeigt werden können, nämlich: .jpg .gif .png

Syntax

Attribute Kernattribute alt="..."

Alternativtext, falls das Bild nicht angezeigt wird border="##" Breite des Rahmens in Pixel oder Prozent height="##" Höhe des Bildes in Pixel oder Prozent width="##" Breite des Bildes in Pixel oder Prozent longdesc="..." URL mit der ausführlichen Beschreibung des Bildes src="..." (relativer) Quellpfad der Datei (verpflichtend)

Art Inline-Element

DTD strict, transitional

Bei der strict-Variante muss das Element immer in einem Block-Element vorkommen. Die Attribute alt und title sollten aus Gründen der Barrierefreiheit immer verwendet werden. Die Größenangaben height und width sollten immer verwendet werden, da der Browser schon den entsprechenden Platz reservieren kann. Dadurch wird ein hässliches »Hüpfen« des Layouts verhindert. Es gibt keinen img-Tag ohne src, alt, title, height und width -Attribute! Beispiel für ein eingebettetes Bild ...

...

Bild 2.21  Darstellung des img-Tags im Browser

2.11  Tabellen Es gibt nicht nur die »üblichen« Maßnahmen, um Text darzustellen. Wir können dafür auch Tabellen verwenden, um ein mehr oder weniger spaltenorientiertes Layout zu erzeugen. Aber wir fixieren uns nicht auf ein Tabellenlayout, denn wir werden noch andere Möglichkeiten kennenlernen. Auch Suchmaschinen bewerten Tabellenlayout oft nicht so gut, und es kann auch für uns als Designer unübersichtlich werden. Trotzdem können wir Tabellen sehr gut einsetzen. Tabellen bestehen aus einer Abfolge von verschiedenen Tags. Das macht den Einstieg etwas schwieriger. Daher werde ich zuerst nur die wichtigen Tags erklären und in der Folge beschreiben, wie wir eine Tabelle zusammenstellen. Syntax ...

Attribute Kernattribute

border="##" Breite des Rahmens in Pixel oder Prozent cellpadding="##" Abstand zwischen Zellenrand und Inhalt in Pixel oder Prozent cellspacing="##" Abstand zwischen den Zellen in Pixel oder Prozent summary="..." Zusammenfassung des Inhalts der Tabelle width="##" Breite der Tabelle in Pixel oder Prozent. Wird keine Breite angegeben und auch die Breite für die Zellen weggelassen, verwendet der Browser die gesamte Fensterbreite. Werden aber für die Zellen Werte für die Breite angegeben, addiert sie der Browser und verwendet die Summe als Tabellenbreite.

Art Block-Element

DTD strict, transitional

Es dürfen nur die Tags caption, col, colgroup, thead, tfoot, tbody in dieser Reihenfolge enthalten sein. Innerhalb von tbody dürfen nur tr-Tags vorkommen. Falls nur ein tbodyTag verwendet wird, darf dieser entfallen. Dann kann auch der tr-Tag direkt innerhalb von table vorkommen. Jede Tabelle hat die Attribute cellpadding, cellspacing, summary und width!

Tabellenzeilen Innerhalb einer Tabelle gibt es einzelne Zeilen. Sie sind durch den Tag (table row) gekennzeichnet. Syntax ...

Attribute

Kernattribute align="left|right|center|justify" bestimmt die horizontale Ausrichtung des Inhalts valign="top|middle|bottom|baseline" bestimmt die vertikale Ausrichtung des Inhalts

Art Block-Element

DTD strict, transitional

Bemerkung Darf nur innerhalb der Elemente table, tbody, tfoot und thead vorkommen.

Darf nur die Elemente th und td enthalten.

Das Attribut align darf nur die Werte left (linksbündig), right (rechtsbündig), center (zentriert) oder justify (Blocksatz) enthalten.

Das Attribut valign darf nur die Werte top (oben), middle (zentriert), bottom (unten) oder baseline (Grundlinie) enthalten.

Tabellenzellen Üblicherweise denken wir bei einer Tabelle an eine Folge von Zeilen und Spalten. In HTML ist dies jedoch ein wenig anders. Eine Tabelle besteht prinzipiell aus Zeilen. Innerhalb dieser Zeilen sind dann die Zellen enthalten. Daher ist es wichtig, dass jede Zeile aus gleich vielen Zellen besteht. Daraus ergeben sich dann die logischen Spalten. Syntax ...

Attribute Kernattribute align="left|right|center|justify" bestimmt die horizontale Ausrichtung des Inhalts valign="top|middle|bottom|baseline" bestimmt die vertikale Ausrichtung des Inhalts abbr="..." Hinweistext über den Inhalt für Screenreader

colspan="##" bestimmt die Anzahl der Spalten, die die Zelle einnimmt rowspan="##" bestimmt die Anzahl der Zeilen, die die Zelle einnimmt height="##" Höhe der Zelle in Pixel oder Prozent width="##" Breite der Zelle in Pixel oder Prozent

Wird bei allen Zellen keine Breite angegeben, so werden die Zellen gleichmäßig auf die Breite der Tabelle verteilt.

Wird nur für einige Zellen eine Breite angegeben, werden die restlichen Zellen gleichmäßig verteilt.

Werden in einer Spalte verschiedene Breiten für eine Zelle angegeben, verwendet der Browser den größten Wert für alle Zellen.

Bei verbundenen Zellen (colspan, rowspan) wird die Angabe der Breite vom Browser ignoriert.

Art Block-Element

DTD strict, transitional

Bemerkung Darf nur innerhalb des Elements tr vorkommen.Wird das Attribut colspan verwendet, ist width für diese Zelle wirkungslos.

Wird das Attribut rowspan verwendet, ist height für diese Zelle wirkungslos.

Jede Spalte hat zumindest eine Zelle mit width! Jede Zeile hat zumindest eine Zelle mit height! Beispiel für eine einfache Tabelle ...

Österreich	Frankreich	Deutschland
Wien	Paris	Berlin
8 Millionen	60 Millionen	80 Millionen

...

Das obige Beispiel zeigt eine Tabelle mit folgenden Eigenschaften: Durch das Attribut border wird ein Rahmen angezeigt, und mit width wird die Breite auf 300 Pixel festgelegt.

Bild 2.22  Beispiel einer einfachen HTML-Tabelle mit Rahmen und Breite

Beispiel für eine Tabelle mit Kopfzeile ...

Nationen
Österreich	Frankreich	Deutschland
Wien	Paris	Berlin
8 Millionen	60 Millionen	80 Millionen

...

Wir sehen, dass die Tabelle aus dem ersten Beispiel um eine Kopfzeile ergänzt wurde:

Bild 2.23  Beispiel einer HTML-Tabelle mit Überschrift

Beispiel für eine Tabelle mit Kopfzeile und Summenspalte ...

Nationen
Österreich	Frankreich	Deutschland	Summe
Wien	Paris	Berlin
8 Millionen	60 Millionen	80 Millionen	148 Millionen

...

Das obige Beispiel zeigt, dass wir eine Tabelle auch um eine Summenspalte ergänzen können.

Bild 2.24  Beispiel einer HTML-Tabelle mit Kopfzeile und Summenspalte

Natürlich können wir mit diesen Tags alleine noch nicht alle Layouts realisieren, die wir uns erträumen. Doch wenn wir bedenken, dass jeder tdTag jedes andere Inline- und Block-Element enthalten kann, sehen wir, wie mächtig diese Konstruktion ist. Denn der td-Tag kann damit auch ein anderes table-Konstrukt enthalten. AUTONUM Übung: Tabellen Erstellen Sie eine neue Datei mit dem Namen uebung5.html. In dieser Datei stellen Sie eine Tabelle (Breite: 700 Pixel) wie im folgenden Bild dar.

Bild 2.25  Darzustellende Tabelle der 5. Übung

2.12  Hyperlinks Was wäre das ganze Web ohne die nützlichen Querverweise? Natürlich gibt es auch dafür einen Tag, den Anchor. Syntax ...

Attribute Kernattribute accesskey="..." Bestimmt ein Zeichen als HotKey href="..." Gibt das Verweisziel an (relativ oder absolut) name="..." Legt einen Ankernamen fest target="_blank|_top|_parent|_self" Bestimmt das Ziel des Verweises

Art Inline-Element

DTD strict, transitional

Bemerkung Der Tag darf nur Inline-Elemente enthalten. Das Attribut target darf nur folgende Werte enthalten: _blank (neues Fenster), _top (oberster Frame), _parent (Elternframe) oder _self (eigener Frame, eigenes Fenster).

Existiert ein a-Element mit dem Attribut name in der HTML-Datei, kann dieser Name mit einem vorangestellten #-Zeichen als href-Wert verwendet werden.

Beispiel für Hyperlinks ...

Links

• 
  
  Google Österreich
  
  



• 
  
  Guru 2.0
  
  



• 
  
  HTL Salzburg
  
  



• 
  
  Schule
  
  

Interne Verweise

• 
  
  Home
  
  



• 
  
  Photos
  
  



• 
  
  Referenzen
  
  



• 
  
  Lebenslauf
  
  



• 
  
  Scribbles
  
  



• 
  
  aktuelle Zeichnungen
  
  
  
  

Nach oben

...

Bild 2.26  Beispiele für verschiedene a-Tags

2.13  Elemente zum Gruppieren Es gibt noch zwei Tags, die wir in der Folge für das Layout und die Formatierung von Webseiten brauchen. Syntax ...

Attribute Kernattribute

Art Block-Element

DTD strict, transitional

Bemerkung Das div-Element (division, Untergliederung) wird üblicherweise fürs Layout von Webseiten eingesetzt, da wir es mit CSS einfach formatieren können und somit auch das Tabellenlayout vermeiden. Am besten stellen wir es uns wie ein Fenster in der Webseite vor.

Beispiel für den div-Tag ...

Hier steht ein Text in einem eigenen Abschnitt.

...

Zusätzlich gibt es ein Inline-Element, das zur Formatierung eingesetzt werden kann: Syntax ...

Attribute Kernattribute

Art Inline-Element

DTD strict, transitional

Bemerkung Dieses Element wird nur zur Formatierung eingesetzt, um innerhalb eines Textes bestimmte Formate anwenden zu können. Daher darf es auch nur andere InlineElemente enthalten.

Beispiel für den span-Tag ...

Hier steht ein einfacher Text. Damit kann man etwas

formatieren.

...

AUTONUM Übung: Gruppieren Erstellen Sie ein neues Verzeichnis mit dem Namen uebung06. Darin erstellen Sie einen Unterordner images und eine Datei index.html. In das Verzeichnis für die Bilder speichern Sie die Dateien computer.png, home.png, info.png und user.png. Weiters benötigen wir im Hauptverzeichnis die Dateien index.html, info.html, links.html und user.html. Die Struktur sollte wie in der folgenden Abbildung aussehen:

Bild 2.27  Dateistruktur für die 6. Übung

Der Haupttitel der Site ist Meine Informationen. Die Seite Info erhält den Zusatztitel Infos, die Seite Links den Zusatz Hyperlinks und die Seite User den Zusatz Meine Person. Nun erstellen wir für alle Seiten ein Layout, wie in der folgenden Abbildung gezeigt:

Bild 2.28  Seitenlayout für die 6. Übung

In der Datei index.html zeigen wir die Informationen wie oben dargestellt an. Die Rahmen der Zellen sind nur für diese Anleitung notwendig. Auf der Website selbst sollen sie nicht dargestellt werden. Wenn wir auf ein Bild oder einen Text in der Symbolleiste klicken, wollen wir zur entsprechenden Seite kommen. Der Knopf der aktiven Seite ist mit keinem Hyperlink versehen. Die Tabelle ist so aufgebaut, dass sich der mittlere Bereich mit einer festen Breite von 700 Pixel innerhalb des Browserfensters zentriert. Auch die

Symbolleiste zentriert sich oberhalb des Inhalts. Ein Knopf ist exakt 80 Pixel breit.

Bild 2.29  Layout der Seite Person in der 6. Übung

In der Datei user.html geben wir Informationen wie Name, Alter, Wohnort und Ausbildung an. Das Layout sehen wir in der vorigen Abbildung. Den title-Tag befüllen wir natürlich. Auch dies sehen wir in der Abbildung.

Bild 2.30  Darstellung der Seite Infos in der 6. Übung

Für die Datei info.html können wir den Text aus der 3. Übung verwenden und ihn wie in der obigen Abbildung darstellen:

Bild 2.31  Darstellung der Links in der 6. Übung

In der Datei links.html stellen wir drei Hyperlinks aus Wikipedia dar und zitieren immer den 1. Absatz wie oben dargstellt. Wir achten natürlich bei allen Seiten auf einen sauber formatierten Quellcode sowie auf den Einsatz der richtigen Tags und Entitäten und beachten die Standard-HTML-Struktur.

2.14  Besondere Tags Es gibt auch noch ein paar Tags, die wir verwenden sollten, um Barrierefreiheit herzustellen. Diesmal hatten wir uns nicht lange mit der Beschreibung der Tags auf, wir werden uns gleich ansehen, wie sie in der Praxis eingesetzt werden. Aber warum sollten wir diese Tags überhaupt einsetzen? Dafür gibt es mehrere Gründe: 1. valides HTML 2. bessere Usability 3. barrierefreier Zugang 4. mehr Layoutmöglichkeiten

… Dieser Tag kann mit »Abkürzung« übersetzt werden. Dadurch haben wir die Möglichkeit, Texte (Abkürzungen) leichter zu erklären. Fährt der Benutzer mit der Maus über den Text zwischen den acronym-Tags, wird ein kleiner Hilfetext (ToolTip) eingeblendet. Beispiel Es werden immer wieder nur die Standard HTML-Tags

verwendet.

Bild 2.32  Darstellung des acronym-Tags im Browser

… Dieser Tag ist ein wenig eigenartig, aber nicht minder nützlich. Damit können wir wie mit cite oder acronym Semantik in HTML einführen. Mit dem address-Tag können wir die Adresse einer Person oder einer Firma auszeichnen. Dieser Tag setzt den Inhalt automatisch kursiv. Beispiel

Max Musterman


Musterweg 13a


A 5020 Salzburg

Bild 2.33  Darstellung des address-Tags im Browser

… und … Diese Tags werden üblicherweise gemeinsam benutzt, obwohl das nicht zwingend vorgeschrieben ist. Sie sind besonders interessant, wenn wir Überarbeitungen eines Textes zeigen wollen. Denn der Text zwischen den ins-Tags[16] wird mit einer Unterstreichung hervorgehoben. Das Gegenteil passiert mit dem Text zwischen den del-Tags[17]: Er wird durchgestrichen. Beispiel

Wir verwenden ab + zu immer die Tags


ins (insertion) + del (delete)


um unsere Texte besser darzustellen.

Bild 2.34  Darstellung der ins- und del-Tags im Browser

… Der abbr-Tag[18] wird ähnlich wie der acronym-Tag verwendet. Der Unterschied zwischen den beiden ist eigentlich gering. Ein Akronym ist eine Abkürzung, die als eigenes Wort gesprochen wird (zum Beispiel TFT). Eine Abkürzung ist dagegen eine Buchstabenkombination, die lang ausgesprochen wird (zum Beispiel DI für Diplomingenieur). Der Unterschied für normale Browser ist nicht merkbar, aber bei Screenreadern, bei Rechtschreibprüfungen oder für Suchmaschinen ist er wichtig. Beispiel

Sehr geehrter Herr DI Guru 2.0!

Bild 2.35  Darstellung des abbr-Tags im Browser

Auf den wbr-Tag[19] sind sicher die wenigsten bisher gestoßen. Er wird dort gesetzt, wo ein Zeilenumbruch sinnvoll wäre, aber nur, wenn das Zeilenende erreicht wird. Dies ist ideal, wenn der Browser die Zeilenumbrüche setzt und wir im Layout horizontale Scrollbalken vermeiden wollen. Da sind wir aber auch gleich beim Problem: Der Tag und seine Ersatz-Entitäten ​ bzw. ­ werden nicht von allen Browsern unterstützt. Die schlaueste Lösung ist daher, auf ​ auszuweichen, da diese Entität von allen wichtigen Browsern unterstützt wird und der IE 6, bei dem dies nicht der Fall ist, über kurz oder lang verschwinden wird. Beispiel

Hier steht ein sehr langer Text, der sich mit den

Zeilenumbrüchen anpassen soll.

Unglücklicherweise ist das aber nicht Cross-

Browserkompatibel. Daher muss man dafür auch

irgendwelche Kunstgriffe verwenden.

…… Die Definitionsliste ist auch eine oft unterschätzte Tag-Kombination. Sie ermöglicht es, mit dem dl-Tag[20] eine Liste zu beginnen. Der dt-Tag[21] legt den Begriff fest und der dd-Tag[22] definiert den Term genauer. Durch Verschachtelung lassen sich damit auch baumartige Strukturen abbilden. Aber viel interessanter ist der Einsatz für Bilder mit Beschriftungen. Mit ein paar CSS-Definitionen dazu lassen sich so optisch ansprechende BildBeschriftungs-Kombinationen erzeugen, wie wir später sehen werden. Ein Beispiel möchte ich jedoch jetzt schon zeigen: Beispiel für eine Definitionsliste





Abbildung 1.1

/* Bild links ausrichten > Extra Style im head erstellen */

dl.imageleft {

width: 210px;

text-align: center;

float: left;

vertical-align: top;

}

.imageleft dt img {

width: 200px;

}

.imageleft dd {

font-weight: bold;

font-size:1em;

color: #000000;

vertical-align: top;

}

/* Bild rechts ausrichten */

dl.imageright {

width: 210px;

text-align: center;

float: right;

vertical-align: top;

}

.imageright dt img {

width: 200px;

}

.imageright dt {

font-weight: bold;

font-size:1em;

color: #000000;

vertical-align: top;

}

Bild 2.36  Darstellung des dl-Tags (wie oben formatiert) im Browser

… Der dfn-Tag[23] führt Fachausdrücke oder Spezialwörter beim Anwender ein. Die Hervorhebung ist auch wieder ein kursiv gesetzter Text. Aber mit CSS ist das leicht zu ändern. Der Text im title-Attribut des Tags wird bei MouseOver wieder als kleines Fenster angezeigt. Beispiel Es werden immer wieder nur die Standard HTML-Tags verwendet.

Bild 2.37  Darstellung des dfn-Tags im Browser

… Der var-Tag[24] wird eigentlich nur bei der Darstellung von Programmcode verwendet. Die Standarddarstellung ist kursiv und kennzeichnet eine Variable des Codes. Beispiel Die Variable uName wird zum Ablegen des Benutzernamens verwendet und ist vom Typ string.

Bild 2.38  Darstellung des var-Tags im Browser

… Der samp-Tag[25] wird auch bei der Darstellung von Programmcode verwendet. Die Standarddarstellung ist in einer Schrift mit fester Laufweite geschrieben und zeigt eine beispielhafte (sample = Stichprobe, Beispiel) Ausgabe eines Programms. Beispiel

Falls die Datei nicht gefunden wurde, zeigt die Applikation die Meldung File not found am Bildschirm an.

Bild 2.39  Darstellung des samp-Tags im Browser

… Der kbd-Tag[26] wird für Benutzereingaben verwendet. Die Standarddarstellung ist in einer Schrift mit fester Laufweite gehalten und zeigt dem Benutzer an, welche Tasten er drücken soll. Beispiel Um die angezeigte Webseite neu zu laden und den Cache zum umgehen, verwenden Sie

die Tasten [STRG]+[R].

Bild 2.40  Darstellung des kbd-Tags im Browser

2.15  Webadressen für dieses Kapitel SelfHTML (Online-Referenz):

http://de.selfhtml.org/ HTML-Lexikon:

http://www.w3schools.com/html World Wide Web-Konsortium:

http://www.w3c.org

Grafische Auswahl von HTML-Entitäten mit Referenz:

http://www.digitalmediaminute.com/reference/entity Textuelle Referenz für HTML-Entitäten:

http://unicode.e-workers.de/entities.php Analyse von Trends und Technologien im Web:

http://www.webmasterpro.de/portal/webanalyse.html [1] Id steht hier für Identification. [2] kurz DTD [3] 8-Bit Unicode Transformation Format [4] American Standard Code for Information Interchange ist ein einheitlicher Code, bei dem jedes Zeichen durch eine eindeutige Kodierungsnummer (0255) angesprochen wird. [5] paragraph [6] Verwenden Sie hierzu den Text über die Gummibärchen. Sie finden ihn unter www.buch.cd. Alternativ gibt es im Web zahlreiche BlindtextGeneratoren, zum Beispiel http://www.blindtexte.de. [7] Abgeleitet von «line-break« [8] Englisch: »list item«, Listenelement [9] Englisch: »unordered list« [10] ordered list

[11] Der englische Ausdruck dafür ist »italic« [12] Zu Deutsch: Hervorgehoben [13] Die englische Bezeichnung für Fettschrift ist »strong«. [14] Auch Sourcecode genannt [15] Der Begriff »pre« leitet sich von »preformatted«, vorformatiert, ab. [16] Abgeleitet vom Begriff »insertion«, einfügen [17] Abgeleitet vom Begriff »delete«, löschen [18] Abgeleitet vom Begriff »abbrevation«, Abkürzung [19] Abgeleitet vom Begriff »word break«, weicher Zeilenumbruch [20] Abgeleitet vom Begriff »definition list«, Definitionsliste [21] Abgeleitet vom Begriff »definition [list] term«, Definitionsausdruck [22] Abgeleitet vom Begriff »definition [list] definition«, Definition [23] Abgeleitet vom Begriff »definition«, Definition [24] Abgeleitet vom Begriff »variable«, Variable [25]

Abgeleitet vom Begriff »sample«, Beispiel [26] Abgeleitet vom Begriff »keyboard«, Tastatur

3  Eclipse 3.1  Installation der Entwicklungsumgebung Bis jetzt kamen wir mit einem simplen Texteditor aus. Nun brauchen wir eine funktionierende Entwicklungsumgebung, um mit HTML und CSS arbeiten zu können. Es gibt unzählige Applikationen am Markt, die alle ihre Vor- und Nachteile in der Entwicklung von Software oder auch Websites haben. Über die letzten Jahre hat sich Eclipse als sehr gute Lösung herausgestellt. Es ist eine kostenlos verfügbare integrierte Entwicklungsumgebung (IDE), die auf Basis der Sprache Java programmiert ist. Da sie durch die verschiedensten Erweiterungen (auch Plug-Ins genannt) angepasst werden kann, ist sie für fast jede Programmieraufgabe geeignet. Durch das Verwenden der plattformübergreifenden Sprache Java ist sie auf jedem Betriebssystem lauffähig, und dadurch ändert sich das Aussehen der IDE auch nicht von System zu System. Zudem sind die Tastenkombinationen für die einzelnen Befehle immer gleich. Da sich Eclipse durch verschiedene Module anpassen lässt, erhalten wir in kürzester Zeit eine komplette Entwicklungsumgebung für HTML und CSS. In späterer Folge können wir sie auch für Sprachen wie JavaScript und PHP benutzen. Wir müssen also nicht zwischen verschiedenen Editoren wechseln. Einen Nachteil müssen wir aber auch kennen. Da es sich um eine textorientierte Entwicklungsumgebung handelt, lassen sich Websites nicht grafisch erstellen, sondern müssen mit HTML und CSS umgehen können. Dafür integriert die IDE die im System installierten Browser als Vorschaufenster für die erstellten Websites.

Download der Software Da die meisten Windows-Rechner kein Java installiert haben, müssen wir hier zuerst das aktuelle Java Runtime Environment (JRE) mit der Version 6.14 auf der Website von Sun[1] herunterladen. Das JRE ist eine Software, die uns gestattet, in Java geschriebene Programme auf unserem Rechner auszuführen. Benutzer von Mac OS X sind bei Java im Vorteil. Da dieses Betriebssystem Java bereits integriert hat, muss nur das Software-Update aufgerufen werden, um die aktuellste Version zu erhalten. Das nächste Paket, das wir benötigen, ist Eclipse. Dieses finden wir auf der Website der Eclipse Foundation[2]. Ganz am Ende der Website findet sich die Version Eclipse Classic 3.5.0, auch Galileo genannt. Rechts daneben finden wir einen Hyperlink für Windows-Systeme und direkt darunter den Link für das Apple-Betriebssystem. Um die Oberfläche auf Deutsch zu erhalten, benötigen wir das BabelSprachpaket[3] für die Galileo-Version.

Installation für Windows-Systeme Hier beginnen wir mit der Installation von Java. Dazu rufen wir das Paket zur Installation des JRE mit einem Doppelklick auf. Windows 7 und Vista zeigen vor der eigentlichen Installation noch eine Warnung an, dass die Installationssoftware Änderungen am Betriebssystem vornehmen wird. Diese bestätigen wir mit dem Knopf Ja. Danach wird die Willkommensseite für die Installation von Java angezeigt. Da wir hier den Zielordner für alle drei Windows-Varianten XP, Vista und 7 gleich lassen können, klicken wir auf den Knopf Installieren. Nun dauert es einige Minuten, bis die komplette Installation durchgeführt wird. Am Ende zeigt das Setup-Programm noch den Erfolg der Installation an. Dieses Fenster können wir mit dem Knopf Schließen bestätigen.

Bild 3.1  Java-Setup bei Windows-Systemen

Installieren von Eclipse Nun können wir mit der Installation von Eclipse fortfahren. Nach dem Entpacken der Installationsdatei erhalten wir ein Verzeichnis Eclipse. Dieses verschieben wir in den Anwendungsordner bei Mac OS X oder in den Programme-Ordner bei den Windows-Systemen. Damit ist die Grundinstallation für die IDE abgeschlossen. Natürlich ist es sinnvoll, dass wir uns unter Windows eine Verknüpfung am Desktop, in der Schnellstartleiste oder bei Apple im Dock ablegen. Als nächster Schritt folgt die Anpassung der Sprache. Eclipse liegt in der Grundinstallation in englischer Sprache vor. Um eine deutschsprachige Version zu erhalten, entpacken wir jetzt das Babel-Sprachpaket. Dieses enthält eine fast vollständige Übersetzung von Eclipse. Nach dem Entpacken erhalten wir ein Verzeichnis eclipse/ mit zwei Unterordnern. Diese beiden Ordner müssen jetzt verschoben werden. Dazu öffnen wir den Ordner, in dem Eclipse installiert ist. Er findet sich unter Windows im Programme-Verzeichnis. Dort existiert ein Unterverzeichnis dropins/, in das wir den Inhalt – die beiden Verzeichnisse features/ und plugins/ – des Sprachpaketes verschieben. Nun können wir mit einem Doppelklick auf das Programmsymbol von Eclipse die Entwicklungsumgebung starten.

Bild 3.2  Startfenster von Eclipse

Kurz danach sehen wir das Fenster für den Arbeitsbereich[4] vor uns. Hier werden wir nach dem Pfad zum Arbeitsbereich gefragt. Dies ist das Verzeichnis, in dem alle Dateien gespeichert werden. Idealerweise legen wir ihn bei Apple-Systemen auf das Verzeichnis Websites[5] aus der Seitenleiste oder auf ein eigenes Verzeichnis /eclipse auf dem Desktop bzw. auf einem USB-Stick.

Bild 3.3  Workspace-Launcher von Eclipse

Dazu klicken wir auf den Knopf Browse, wählen danach aus der Seitenleiste Websites aus und bestätigen dies mit dem Knopf Open. Wenn wir die Option Diesen Wert als Standardwert verwenden und nicht erneut anfragen aktivieren, werden wir beim nächsten Start nicht mehr nach dem Workspace gefragt. Nun klicken wir noch auf Ok und Eclipse startet endgültig. Installieren der Plug-Ins für Eclipse Da Eclipse in der Grundinstallation eine Entwicklungsumgebung für die Programmiersprache Java ist, müssen wir sie jetzt so anpassen, dass wir eine IDE für die Webentwicklung erhalten. Aptana Studio installieren Als erstes installieren wir das Plug-In »Aptana Studio« in der Version 1.5. Auch diese Software ist kostenlos verfügbar, sollte aber über eine Internetverbindung direkt installiert werden. Dazu öffnen wir das Menü Hilfe und klicken auf den Befehl Install New Software…. In dem nächsten Fenster müssen wir im Datenfeld Work with: die URL http://update.aptana.com/install/studio eintragen. Mit dem Knopf Add… fügen wir die Internetadresse zur Liste der verfügbaren Software hinzu.

Bild 3.4  Eintragen der Internetadresse von Aptana

Nun müssen wir für die eingetragene Adresse noch einen Namen im Feld Name: eingeben. Damit wir das Plug-In später wieder identifizieren können, verwenden wir Aptana Studio Plug-In und bestätigen dies mit dem Knopf Ok.

Bild 3.5  Festlegen des Namens für das neue Plug-In

Nun verbindet sich Eclipse mit dem Internet und sucht unter der angegebenen URL nach verfügbarer Software. Sobald die Daten verfügbar sind, zeigt das Installationsprogramm das Aptana-Plug-In an. In der Liste aktivieren wir das Kontrollkästchen vor dem Eintrag Aptana Studio und klicken auf den Knopf Next.

Bild 3.6  Aktivieren der zu installierenden Software

Jetzt wird ein Fenster mit zusammenfassenden Informationen zur Installation angezeigt, das wir mit dem Knopf Next bestätigen. Nun zeigt uns Eclipse die Lizenzvereinbarung für das Plug-In. Dieses bestätigen wir, indem wir die Option I accept the terms of the license agreements aktivieren und auf den Knopf Finish klicken.

Bild 3.7  Lizenzvereinbarung für Aptana Studio anerkennen

Nun wird die Installation durchgeführt. Das sehen wir an dem Fenster, das den Verlauf anzeigt. Wir lassen es im Vordergrund, damit wir erkennen können, wann die Installation abgeschlossen ist. Sobald dies geschehen ist, meldet uns ein Hinweisfenster, dass Eclipse neu gestartet werden muss. Dieses bestätigen wir mit dem Knopf Yes.

Bild 3.8  Eclipse neu starten

Nachdem Eclipse wieder gestartet ist, werden wir auf Windows-Rechnern wegen der Zugriffe der Software auf das Gesamtsystem gewarnt. Einerseits greift die Windows-Firewall ein, um den Internetzugriff zu regeln. Wir erlauben ihn natürlich, indem wir auf Zugriff zulassen bzw. Nicht mehr blocken klicken. Bei Windows 7 und Vista meldet sich zusätzlich noch die Benutzerkontensteuerung, die sichergehen will, dass die Änderungen am System auch autorisiert sind. Auch dieses Fenster bestätigen wir mit Ja.

Erweiterung von Aptana Studio Sobald die Entwicklungsumgebung wieder gestartet ist, erhalten wir den Hinweis, dass wir zusätzliche Komponenten installieren können. Dazu müssen wir die Kontrollkästchen vor Aptana PHP im Bereich Web Application Platforms und im Bereich Ajax Libraries die Pakete für jQuery Support, Prototype und Scriptaculous aktivieren. Mit dem Knopf Install beginnen wir die Installation dieser Zusatzpakete.

Bild 3.9  Weitere Plug-Ins für Aptana Studio auswählen

Auch bei diesen Erweiterungen prüft Eclipse die Verfügbarkeit der Software und zeigt uns ein weiteres Fenster an. Hier aktivieren wir die Optionen Ajax Frameworks und PHP Plugin Builds und fahren mit einem Klick auf den Knopf Next fort. Nun werden die Daten der Pakete aus dem Internet abgerufen und in einem Fenster detailliert angezeigt. Diese Fenster bestätigen wir mit dem Knopf Next. Nun werden wir wie bei der Installation des Aptana Studios zum Bestätigen der Lizenzvereinbarung aufgefordert. Dieses Fenster bestätigen wir mit Finish und warten das Ende der kompletten Installation ab. Auch nach diesem Durchgang werden wir zu einem Neustart von Eclipse aufgefordert, welchen wir mit einem Klick auf den Knopf Yes auslösen.

Anpassen der Perspektive von Eclipse Da Eclipse für verschiedenste Aufgaben geeignet ist, kann es auch sein Aussehen an diese Erfordernisse anpassen. Dies nutzen wir jetzt aus, um eine ideale Arbeitsumgebung zu erhalten. Dazu klicken wir in Eclipse auf das Menü Fenster und dort auf den Befehl Perspektive ändern. In dem Untermenü klicken wir auf den Befehl Andere….

Bild 3.10  Ändern der Perspektive von Eclipse

Jetzt können wir aus der Liste den Eintrag Aptana auswählen und mit Ok bestätigen.

Bild 3.11  Auswählen der Perspektive für Aptana Studio

Nun haben wir die komplette Installation der Entwicklungsumgebung abgeschlossen und sehen die IDE in genau der Einstellung vor uns, wie wir sie in der Folge benötigen.

Bild 3.12  Eclipse mit aktiviertem Aptana Studio

3.2  Der Browser Auch beim Browser haben wir uns mit dem Firefox für eine kostenlos verfügbare Version entschieden. Zudem hat der Firefox mit der Version 3.6 und höher weitere Vorteile. Die Anwendung verhält sich auf allen getesteten Betriebssystemen gleich, stellt die Websites auch gleich dar und zusätzlich unterstützt sie den aktuellen CSS-3-Standard. Die aktuelle Version lässt sich bei der Mozilla Foundation[6] herunterladen. Zusätzlich werden wir Firefox mit einigen nützlichen Add-Ons ausstatten. Dies werden wir in der Folge benötigen, um die Anpassungen und Entwicklungen schneller und effektiver durchführen zu können.

Die Installation der drei Add-Ons geht relativ schnell vonstatten. Wir benötigen nur eine aktive Internetverbindung. Dann öffnen wir das Menü Extras und klicken dort auf den Befehl Add-ons.

Bild 3.13  Das Menü Extras von Firefox

Firebug Als erstes suchen wir das Add-On Firebug. Dazu geben wir im Suchfenster firebug ein und drücken [ Enter]. Firefox sucht jetzt das passende Paket und zeigt es uns an. Zum Beginn der Installation klicken wir auf den Knopf Zu Firefox hinzufügen …

Bild 3.14  Firebug zum Installieren auswählen

Im folgenden Fenster müssen wir fünf Sekunden warten, bis wir den Knopf Jetzt installieren anklicken können.

Bild 3.15  Firebug installieren

Web Developer Bei diesem Add-On gehen wir genauso wie beim vorherigen vor. Wir geben im Suchfeld den Begriff Web Developer ein und drücken [ Enter]. Sobald Firefox das Paket gefunden hat, klicken wir wieder auf Zu Firefox hinzufügen … und danach wieder auf Jetzt installieren. Das Leerzeichen zwischen Web und Developer ist wichtig, damit das richtige Add-On gefunden wird.

Bild 3.16  Web Developer zum Installieren auswählen

GridFox Auch dieses Add-On wird auf dieselbe Weise installiert. Wir geben im Suchfeld den Begriff GridFox ein und drücken [ Enter]. Sobald Firefox das Paket gefunden hat, klicken wir wieder auf Zu Firefox hinzufügen … und danach wieder auf Jetzt installieren. Zum Abschluss der Installation klicken wir auf den Knopf Firefox neu starten, den wir rechts oben im Add-Ons-Fenster finden. Sobald der Browser wieder gestartet ist, zeigt er uns ein Fenster mit den installierten Add-Ons. Dieses Fenster dient einerseits zu unserer Information, andererseits können damit veraltete Add-Ons aktualisiert werden. Wir können dieses Fenster schließen und damit die Installation beenden.

Bild 3.17  GridFox zur Installation auswählen

Bild 3 18 Liste der Add Ons im Firefox

Bild 3.18  Liste der Add-Ons im Firefox

Damit haben wir unser komplettes System für die Entwicklung für HTML, CSS und JavaScript installiert.

3.3  Webadressen für dieses Kapitel Entwicklungsumgebung Eclipse:

http://www.eclipse.org/downloads Deutsches Sprachpaket für Eclipse:

http://download.eclipse.org/technology/babel/babel_language_packs/ga lileo.php Mozilla Firefox:

http://www.mozilla-europe.org/de/firefox Ein Raster über eine Webseite legen – GridFox:

https://addons.mozilla.org/de/firefox/addon/4904 HTML, CSS und Programmierung einer Seite überprüfen – Firebug:

https://addons.mozilla.org/de/firefox/addon/1843 Java-Ablaufumgebung (Java Runtime Environment, JRE):

http://www.java.com/de/download/manual.jsp Applikationen für den USB-Stick: http://portableapps.com/ [1] http://www.java.com/de/download/manual.jsp [2] http://www.eclipse.org/downloads [3] http://download.eclipse.org/technology/babel/babel_language_packs/galile o.php [4] Auch Workspace genannt. [5] Gemeint ist der Pfad /Users/benutzername/Sites

[6] http://www.mozilla-europe.org/de/firefox

4  Cascading Style Sheets Bis jetzt haben wir nur mit HTML gearbeitet. Dadurch hatten wir sehr eingeschränkte Möglichkeiten, unsere Webseiten zu formatieren und zu gestalten. Mit CSS (Cascading Style Sheets) bekommen wir die Möglichkeit, Formate für die HTML-Dateien zentral zu definieren. Wir können fast alle HTMLElemente einer Webseite wie Überschriften, Absätze und Bilder mit Farben und Rahmen und anderen Formaten versehen sowie ihre Positionierung verändern. Obwohl CSS technisch sehr eng mit HTML verknüpft sind, beschreiten wir hiermit einen ersten Schritt in Richtung der Trennung von Inhalt (HTML) und Layout (CSS): Der Inhalt ist in einer HTML-Datei hinterlegt, die Layout-Informationen liefert CSS.

4.1  CSS-Grundlagen Mit CSS können wir steuern, wie die HTML-Elemente im Browser erscheinen. Dazu müssen wir aber CSS in die HTML-Dokumente einbinden. Es gibt grundsätzlich drei Möglichkeiten, mit CSS-Stilen in HTML zu arbeiten: Eingebettete Definitionen, eingebettete und externe Style Sheets. CSS-Definitionen in HTML einbinden Eingebettete Definitionen Diese Stildefinition wird direkt beim entsprechenden Tag durch das styleAttribut definiert. Das folgende Beispiel zeigt, wie einem Paragraphen-Tag eine Stilart zugeordnet wird:

Beispiel ...

Hier steht ein beliebiger Text.

...

Diese Art der Definition sollte eigentlich als letzte eingesetzt werden. Denn sie ist nur für den ausgewählten Tag gültig und bei umfangreichen Websites ist es sehr schwer, die Stile unter Kontrolle zu halten. Zudem ist sie fehleranfällig, da man das ganze HTML-Dokument nach den entsprechenden Stilinformationen durchsuchen muss, wenn zum Beispiel Korrekturen nötig sind. Eingebettete Style Sheets Es ist möglich, Stile mit dem style-Tag in den head-Bereich einer HTMLSeite einzubinden. Beispiel ...

...

...

...

Damit werden die Stildefinitionen im head-Bereich gebündelt. Das ist ein Fortschritt, aber auch nicht optimal. Der definierte Stil bezieht sich zwar nicht mehr nur auf einen einzelnen Tag, gilt aber trotzdem nur für die eine HTML-Datei, in der er steht. Benötigen wir die Stile auf verschiedenen Seiten (das ist der Fall, wenn unsere Website aus mehreren Seiten besteht),

müssen sie jedes Mal in den jeweiligen head-Bereich aufgenommen werden. Dies ist bei größeren Websites natürlich mühsam, fehleranfällig und schwer zu pflegen. Externe Style Sheets Externe Stildefinitionen können über den head-Bereich einer HTML-Seite eingebunden werden. Dies geschieht über den link-Tag. Syntax

Attribute Kernattribute href="..." URL zur verknüpften Datei media="..." legt das zu verwendende Ausgabemedium fest rel="..." legt die »Verwandtschaft« (relationship) fest type="..." legt den MIME-Type fest

DTD strict, transitional

Bemerkung Der link-Tag darf nur innerhalb eines head-Tags vorkommen. Er ist ein »leeres« Element, darf also keinen eigenen Inhalt haben.

Beispiel für externe Style Sheets ...

...





...

...

Es werden immer externe Style Sheets eingesetzt! Dies erleichtert die Verwaltung von CSS-Stilen enorm. Der Aufbau einer CSS-Regel Ein CSS-Stil besteht aus einer oder mehreren Regeln, die das Format und das Aussehen eines bestimmten Seitenelements festlegen. Dadurch ist die Trennung zwischen Inhalt (HTML) und Layout (CSS) gewährleistet. Eine Regel besteht aus zwei Teilen: dem Selektor und dem Deklarationsblock . Was Selektoren sind und wie sie funktionieren, zeigen wir im gleichnamigen Abschnitt. Innerhalb des Deklarationsblockes stehen die einzelnen Deklarationen, die immer mit einem Semikolon (Strichpunkt, ;) abgeschlossen werden. Jede Deklaration besteht aus einem Wertepaar: An der ersten Stelle steht die CSS-Eigenschaft mit einem Doppelpunkt, dann folgt der dazugehörige Wert und zum Schluss kommt ein Strichpunkt. Beispiel für eine CSS-Regel h1 {

font-weight: bold;

color:#990000;

text-align: center;

}

Darstellung von Elementen Elemente werden in HTML generell als Rechteck (Box) dargestellt. Es ist wichtig, dies zu verinnerlichen und mit den verschiedenen Arten von Elementen und Boxen vertraut zu sein.

Alle HTML-Elemente sind grundsätzlich rechteckig! Elementart Es gibt zwei Arten von Elementen: Ersetzte

Diese Elemente haben keinen eigenen Inhalt (z. B. das Bildelement img). Sie besitzen dafür ein Attribut, das bei der Darstellung verwendet wird. Bei img wird beispielsweise die Datei, die im Attribut src (vom englischen Begriff »source«, was »Quelle« bedeutet) angegeben wird, geladen und eingesetzt. Nicht ersetzte

Diese Elemente besitzen einen eigenen Inhalt, der dargestellt wird. Dies trifft auf den Großteil von HTML-Elementen (z. B. p, a, span, usw.) zu. Die Inline-Box Auch Inline-Elemente (HTML-Elemente, die keinen Zeilenumbruch auslösen) haben eine Art Box, mit der sie dargestellt werden. Um sie zu bestimmen, ist die Berechnung der Zeilenhöhe wichtig. Diese wird aus der Höhe des Inhaltsbereichs (normalerweise die Schriftgröße) und des Durchschusses (Differenz zwischen der Schriftgröße und der Zeilenhöhe) ermittelt. Der Durchschuss wird halbiert und je eine Hälfte ober- und unterhalb des Textes eingefügt. Die Zeilenbox Die Höhe der Zeilenbox ermittelt sich aus dem Abstand des höchsten und des niedrigsten Punkts aller Inline-Boxen, die sich in einer Zeile befinden.

Das Box-Modell Auch in CSS gibt es – wie in HTML – zwei Arten von Elementen: Blockund Inline-Elemente. Diese sind prinzipiell gleich wie in HTML. Blockelemente erzeugen einen Umbruch und werden in Form eines Rechtecks dargestellt. Inline-Elemente kommen hingegen direkt im Text vor und erzeugen keinen Umbruch. Besonders zur Darstellung und Formatierung von Blockelementen müssen wir das Box-Modell beherrschen.

Bild 4.1  Das Box-Modell

Um die Größe eines Blockelements berechnen zu können, ist das BoxModell das wichtigste. Die Breite/Höhe eines Elements ergibt sich aus der Summe der einzelnen Breiten/Höhen der Eigenschaften.

Alle Werte für den Hintergrund (Farbe, Bilder, ...) werden über die gesamte Breite/Höhe dargestellt. Wird der Rahmen beispielsweise mit Unterbrechungen dargestellt, scheint dort der Hintergrund durch. Negative Werte können nur bei den margin-Eigenschaften festgelegt werden. Floating Eine spezielle Eigenschaft für Blockelemente ist float. Mit dieser Eigenschaft können Blockelemente links bzw. rechts voneinander positioniert werden. Dafür gibt es einige Regeln: Die Kanten der Elemente dürfen sich nicht überlappen. Die Innenkanten des inneren float-Elements dürfen die Außenkanten des umgebenden Elements nicht überragen. Ein float-Element wird immer so weit oben wie möglich angeordnet. Ein float-Element steht immer so weit rechts beziehungsweise links wie möglich.

Positionierung von Elementen Um die Positionierung durchführen zu können, benötigen wir die Begriffe Canvas (wörtlich übersetzt: die Leinwand, also die gesamte Größe der HTML-Datei in der Darstellung) und Viewport (der sichtbare Teil des HTML-Dokuments im Browserfenster). Arten der Positionierung static

Die Box wird wie üblich angelegt. relative

Das Element wird um die festgelegte Entfernung von seinem ursprünglichen Ort verschoben. Der ursprüngliche Raum wird jedoch beibehalten und der Bezugspunkt ist das linke obere Eck des Elternelements.

absolute

Das Element wird an den angegebenen Werten positioniert und der ursprüngliche Raum wird wieder freigegeben. Als Bezugspunkt wird das linke obere Eck des Canvas festgelegt. fixed

Das Element wird wie mit absolute positioniert. Der Unterschied ist, dass der Bezugspunkt der Viewport ist.

Werte in CSS Schlüsselwörter Dies sind benannte Werte. Sie können je nach Eigenschaft verschiedene Bedeutungen haben. Das Schlüsselwort normal hat bei font-weight einen anderen Sinn als bei letter-spacing. Farbwerte Farbwerte können in verschiedenen Varianten angegeben werden: entweder mit Schlüsselwörtern als Code oder als berechnete Variante. #RRGGBB

Diese Schreibweise besteht aus drei hexadezimalen Werten für RotGrün-Blau. #RGB

Dies ist die Kurzversion der obigen Schreibweise. Hier wird jede angegebene Ziffer verdoppelt, aus #369 wird also #336699. rgb(rrr.rr%, ggg.gg%, bbb.bb%)

Hier können die einzelnen Farbkanäle mit einer Prozentschreibweise angegeben werden. Um ein reines Rot zu erhalten, geben wir rgb(100%, 0%, 0%) an. rgb(rrr, ggg, bbb)

Hier wird anstelle der Prozentwerte eine Ganzzahl im Bereich zwischen 0 und 255 angegeben. Ein reines Rot wird mit rgb(255, 0, 0) erzeugt.

Zahlen Zahlen können als positive (und wo es erlaubt ist auch als negative) Werte angegeben werden. Dezimalzahlen werden prinzipiell mit einem Dezimalpunkt geschrieben. Je nach Eigenschaft kann der Wertebereich eingeschränkt sein. Maßeinheiten Es gibt verschiedene Einheiten für die Größenangaben, diese müssen immer direkt hinter der Zahl (ohne Leerzeichen) angegeben werden. Zwischen Zahl und Maßangabe gibt es nie ein Leerzeichen! Prozentwerte Hier gilt das Gleiche wie für die Zahlen. Zusätzlich muss direkt hinter der Zahl ein Prozentzeichen (%) angegeben werden. Absolute Längenwerte Durch absolute Maßzahlen können wir das Layout und die Größen – in bestimmten Grenzen – relativ exakt festlegen. Zoll/Inch – in Die Einheit Zoll (Inch) kommt aus dem angloamerikanischen Sprachraum und entspricht etwa 2,54 cm. Die Darstellung auf dem Bildschirm erfolgt nur ungefähr, da die meisten Betriebssysteme die Einheit nicht korrekt auf den Bildschirm umrechnen können. Zentimeter – cm Ein Zentimeter entspricht 0,394 Zoll. Jedoch erfolgt auch hier die Umrechnung auf den Bildschirm nur ungefähr. Millimeter – mm Es gilt das Gleiche wie bei den vorigen Maßeinheiten. Punkte – pt Punkte sind eine Standardeinheit im Schriftsatz, hier sind die europäischen Didot-Punkte gemeint. Aktuell löst ein Bildschirm mit

72 dpi[1] auf. Daraus lässt sich der Schluss ziehen, dass ein Zoll aus 72 Punkten besteht und umgekehrt ein Punkt 1/72 Zoll groß ist. Pica – pc Dies ist ebenfalls eine Größe in Punkten, sie kommt jedoch aus dem angloamerikanischen Sprachraum. Ein Pica-Punkt entspricht 12 DidotPunkten und dadurch entsprechen 6 Pica-Punkte einem Zoll. Relative Längenwerte Diese Längenwerte erlauben uns die Angabe von Größen in Abhängigkeit von verschiedensten Basiswerten. Dies ist besonders interessant, wenn wir dem Benutzer Veränderungen erlauben wollen. Denn bei einer Angabe der Schriftgröße von 12 Punkt kann der Anwender nichts mehr verändern. Legen wir aber 200 % für die Überschrift 1 als Schriftgröße fest, so wird diese – in Abhängigkeit von der beim Anwender eingestellten Schriftgröße – berechnet. Momentan interpretieren alle Browser eine Schriftgröße von 100 % als 16 Punkt. Wir verwenden bevorzugt relative Längenwerte! em-Höhe – em Diese Wertigkeit kommt ebenfalls aus der Typographie. Dort wird die Höhe des Buchstabens M bezeichnet. In CSS ist jedoch die Höhe der Zeichenbox des benutzten Zeichensatzes gemeint. 1em entspricht also der normal eingestellten Schriftgröße beim Anwender. Mit der Angabe von 1.5em wird daher die Schriftgröße um das 1 ½-fache größer dargestellt. x-Höhe – ex Dies ist ebenfalls eine Maßeinheit der Typographie und bezeichnet die Höhe des Buchstabens x. Da jedoch die meisten Schriften keine genaue Angabe zum Buchstaben x enthalten, setzen die meisten Browser den Wert 1ex auf 0,5em. Pixel – px In CSS wird ein Zoll mit 96 Pixel definiert. Die meisten Browser

ignorieren dies jedoch und sprechen die realen Pixel auf einem Bildschirm direkt an. Daher ist es de facto ein absoluter Längenwert.

4.2  Selektoren Mit Selektoren werden die Formatangaben auf die HTML-Datei angewendet. Mit den verschiedensten Arten der Selektoren können sehr feine Abstufungen in der Anwendung definiert werden. Universeller Selektor Muster * { }

Beschreibung Passt auf den Namen eines beliebigen Elements

CSS-Version 2.1 und höher

Browser Alle gängigen

Bemerkung Weist eine Regel keinen expliziten Selektor auf, wird der universelle Selektor benutzt.

Beispiel für universellen Selektor /* Der Selektor gilt für alle Elemente */

* {color: red;}

Bild 4.2  Beispiel für den Universal-Selektor

Typ-Selektor Muster element { }

Beschreibung Der Selektor passt auf einen bestimmten HTML-Tag. Es werden jedoch alle Elemente im DOM gefunden.

CSS-Version 1 und höher

Browser Alle gängigen

Bemerkung Dieser Selektor wird auch als Element-Selektor bezeichnet.

Beispiel für Typ-Selektor /* Schriftgroesse für den h1-Tag anpassen */

h1 {font-size: 3em;}

/* Schriftgroesse für den h2-Tag anpassen */

h2 {font-size: 2em;}

/* Schriftgroesse für den p-Tag anpassen */

p {font-size: 1.2em;}

Bild 4.3  Beispiel für den Typ-Selektor

Kontext-Selektor Muster element1 element2 { }

Beschreibung Damit kann ein abhängiges Element ausgewählt werden. Dies sind Elemente, die im DOM unterhalb eines Elements angeordnet sind.

CSS-Version 1 und höher

Browser Alle gängigen

Bemerkung Dieser Selektor wird auch als Nachfahren-Selektor bezeichnet.

Beispiel für Kontext-Selektor

Hier steht ein grüner Text.

Hier steht ein eingerückter, grüner Text.

Hier steht normaler, schwarzer Text.

/* p-Tag innerhalb eines div-Tags formatieren */

div p {color: #009900;}

Bild 4.4  Beispiel für den Kontext-Selektor

Kind-Selektor Muster element1 > element2 { }

Beschreibung Dieser Selektor wählt ebenfalls die Nachfahren eines Elements aus. Er ist aber restriktiver, da er nur direkte Kindelemente verwendet.

CSS-Version 2.1 und höher

Browser Alle gängigen außer dem Internet Explorer 6

Beispiel für Kind-Selektor

Hier steht ein grüner Text.

Hier steht ein eingerückter Text.

/* direkten p-Tag innerhalb eines div-Tags formatieren */

div > p {color: #009900;}

Bild 4.5  Beispiel für den Kind-Selektor

Benachbarte Geschwisterelemente Muster element1 + element2

Beschreibung Damit können Elemente, die sich auf derselben Ebene des DOMs befinden, ausgewählt werden.

CSS-Version 2.1 und höher

Browser Alle gängigen außer dem Internet Explorer 6

Beispiel für benachbarte Geschwisterelemente

Hier steht roter Text.

Hier steht jetzt blauer Text.

Hier wird noch viel Text geschrieben.

Hier steht eine rote Überschrift

/* p-Tag formatieren */

p {color: #990000;}

/* p-Tag in der selben Hierarchie definieren */

p + p {color: #000099;}

/* h2-Tag definieren */

h2 {color: #990000;}

Bild 4.6  Beispiel für Geschwister-Elemente

Klassen-Selektor Muster element.klasse .klasse

Beschreibung In HTML können Tags mit dem Kernattribut class = "..." versehen werden. Dadurch ist eine spezielle Zuordnung der Formatierung über diesen Selektor möglich.

CSS-Version 1 und höher

Browser Alle gängigen

Bemerkung Der Klassenname wird durch einen Punkt vom Elementnamen getrennt. Vor oder nach dem Punkt darf kein Leerzeichen stehen. Wird kein Elementname angegeben, kann die Klasse auf alle Elemente angewendet werden, sonst nur auf die spezifizierten Elemente.

Beispiel für Klassen-Selektor

Hier steht fetter, roter Text.

Dieser Text ist schwarz und normal geschrieben.


Der Hintergrund ist aber gelb und mit einem grauen Rand.

Dieser Text ist wieder rot und fett geschrieben.

/* elementlose Klasse */

.wichtig {

color: red;

font-weight: bold;

}

/* Klasse für div-Tags */

div.wichtig {

border: 1px solid #999;

background-color: yellow;

}

Bild 4.7  Beispiel für den Klassen-Selektor

ID-Selektor Muster element1#id #id

Beschreibung In HTML können Tags mit dem Kernattribut id="..." versehen werden. Dadurch sind sie eindeutig gekennzeichnet. Denn jeder id-Wert darf pro HTML-Datei nur einmal vorkommen.

CSS-Version 1 und höher

Browser Alle gängigen

Bemerkung

Der id-Wert wird mit einem Hash (#) vom Elementnamen getrennt. Vor oder nach dem Hash darf kein Leerzeichen stehen. Wird kein Elementname angegeben, kann die ID auf ein beliebiges Element angewendet werden, sonst nur auf das spezifizierte Element.

Beispiel für ID-Selektor

Hier steht fetter, roter Text.

Der Hintergrund ist gelb und mit einem grauen Rand.

Der gesamte Text ist rot und fett geschrieben.

/* elementlose ID */

#wichtigerText {

color: red;

font-weight: bold;

}

/* ID für ein Element */

div#wichtigesFenster {

border: 1px solid #999;

background-color: yellow;

color: red;

font-weight: bold;

}

Bild 4.8  Beispiel für den ID-Selektor

Allgemeiner Attribut-Selektor Muster element[attr]

Beschreibung

Wählt alle Elemente aus, die ein bestimmtes Attribut definiert haben. Der Wert des Attributes ist gleichgültig.

CSS-Version 2.1 und höher

Browser Alle gängigen außer dem Internet Explorer 6

Beispiel für allgemeiner Attribut-Selektor /* Auswahl eines a-Tag mit target-Attribut */

a[target] {

border-bottom: 5px dotted #993366;

}

Bild 4.9  Beispiel für den allgemeinen Attribut-Selektor

Exakter Attribut-Selektor Muster element[attr="wert"]

Beschreibung Wählt alle Elemente aus, die ein bestimmtes Attribut definiert haben. Der Wert des Attributes wird hier exakt berücksichtigt.

CSS-Version 2.1 und höher

Browser Alle gängigen außer dem Internet Explorer 6

Beispiel für exakten Attribut-Selektor /* Auswahl eines a-Tag mit target-Attribut _blank */

a[target="_blank"] {border-bottom: 5px dotted #006633;}

Bild 4.10  Beispiel für den exakten Attribut-Selektor

Teilweiser Attribut-Selektor Werteliste-Variante Muster element[class~="wert"]

Beschreibung Der Selektor wählt alle Elemente aus, die ein bestimmtes Attribut definiert haben. Der Wert des Attributs wird hier exakt berücksichtigt, aber aus einer mit Leerzeichen getrennten Liste des Attributs class ausgewählt.

CSS-Version 2.1 und höher

Browser Alle gängigen außer dem Internet Explorer 6

Beispiel für teilweisen Attribut-Selektor

Hier steht normaler Text.

Hier steht unterstrichener Text.

/* Auswahl eines p-Tag mit class-Attribut wichtig */

p[class~="wichtig"] {border-bottom: 5px dashed #993366;}

Bild 4.11  Beispiel für den teilweisen Attribut-Selektor

Wertanfangs-Variante Muster element[class^="wert"]

Beschreibung Der Selektor wählt alle Elemente aus, die ein bestimmtes Attribut definiert haben. Der Wert des Attributes wird hier exakt berücksichtigt, aber nur, wenn er am Beginn steht.

CSS-Version 3 und höher

Browser Internet Explorer 8, Firefox 3.0 und höher, Opera 9 und höher, Safari 3 und höher

Beispiel für die Wertanfangs-Variante

Hier steht normaler Text.

Hier steht unterstrichener Text.

/* Auswahl eines p-Tag mit class-Attribut zweiter... */

p[class^="zweiter"] {border-bottom: 2px dashed #993366;}

Bild 4.12  Beispiel für den teilweisen Attribut-Selektor

Wertende-Variante Muster element[class$="wert"]

Beschreibung Der Selektor wählt alle Elemente aus, die ein bestimmtes Attribut definiert haben. Der Wert des Attributes wird hier exakt berücksichtigt, aber nur, wenn er am Ende steht.

CSS-Version 3 und höher

Browser Internet Explorer 8, Firefox 3.0 und höher, Opera 9 und höher, Safari 3 und höher

Beispiel für die Wertende-Variante

Hier steht normaler Text.

Hier steht unterstrichener Text.

/* Auswahl eines p-Tag mit class-Attribut zweiter... */

p[class$="Absatz"] {border-bottom: 2px dashed #993366;}

Im Wert enthaltene Variante Muster element[class*="wert"]

Beschreibung Der Selektor wählt alle Elemente aus, die ein bestimmtes Attribut definiert haben. Der Wert des Attributes wird hier berücksichtigt, wenn er irgendwo steht.

CSS-Version 3 und höher

Browser

Internet Explorer 8, Firefox 3.0 und höher, Opera 9 und höher, Safari 3 und höher

Beispiel für eine im Wert enthaltene Variante

Hier steht normaler Text.

Hier steht unterstrichener Text.

/* Auswahl eines p-Tag mit class-Attribut ...Absatz... */

p[class*="Absatz"] {border-bottom: 2px dashed #993366;}

Pseudoklassen Darunter werden keine Klassen verstanden, wie es sie in objektorientierten Programmiersprachen gibt, sondern Zustände im HTML-Dokument. Sie sind also nur vorhanden, wenn der Benutzer eine bestimmte Aktion durchführt. Pseudoklasse :active Muster element:active

Beschreibung Sobald der Benutzer das Element aktiviert, beispielsweise der Zeitpunkt zwischen dem Drücken der Maustaste und dem Loslassen.

CSS-Version 1 und höher

Browser Alle gängigen

Bemerkung Mit diesen Selektoren kann das Aussehen des Elements bei Zuständen oder bestimmten Positionen verändert werden. Es können aber keine fremden Elemente angepasst werden.

Beispiel für :active

Hier geht es zum Ä

Guru.

/* Farbe eines aktiven Links auf grün setzen */

a:active {color: #00FF00;}

Pseudoklasse :focus Muster element:focus

Beschreibung Wird aktiv, sobald ein Element den Fokus erhält, beispielsweise wenn in einem Formularfeld der Cursor blinkt.

CSS-Version 2.1 und höher

Browser Alle gängigen außer Internet Explorer 6 und 7

Beispiel für :focus ...

ohne Focus:

Ä




mit Focus:



/* Eingabfeld anpassen */

input {

color: #CCCCCC;

background-color: #333333;

border: 1px solid red;

}

input:focus {

color: black;

background-color: white;

}

Bild 4.13  Beispiel für die Pseudoklasse :focus

Pseudoklasse :hover Muster element:hover

Beschreibung Wird aktiv, wenn der Mauszeiger über das Element fährt und inaktiv, wenn der Mauszeiger das Element wieder verlässt.

CSS-Version 2.1 und höher

Browser Alle gängigen; im Internet Explorer 6 funktioniert diese Klasse allerdings nur für den aTag.

Beispiel für :hover /* Format für eine Zelle festlegen */

td {

background-color: white;

border: 1px dotted #E0E0E0;

}

/* anpassen für Hover-Effekt */

td:hover {

background-color: #E0E0E0;

border: 1px solid black;

}

Bild 4.14  Beispiel für die Pseudoklasse :hover

Pseudoklasse :link Muster element:link

Beschreibung Gilt für alle Hyperlinks, die noch nicht besucht wurden.

CSS-Version 1 und höher

Browser Alle gängigen

Beispiel für :link /* unbesuchte Links formatieren */

a:link {

color: green;

text-decoration: underline;

}

Pseudoklasse :visited Muster element:visited

Beschreibung Gilt für alle Hyperlinks, die bereits besucht (vom Benutzer angeklickt) wurden.

CSS-Version 1 und höher

Browser Alle gängigen

Beispiel für :visited /* besuchte Links formatieren */

a:visited {

color: #999999;

text-decoration: none;

font-style: italic;

}

Pseudoelemente Diese Elemente sind nicht im HTML-Dokument selbst vorhanden. Sie stehen aber in logischen Abhängigkeiten von HTML-Tags zur Verfügung. Damit haben wir besondere Möglichkeiten der Formatierung. Pseudoelement :after Muster element:after

Beschreibung Fügt den mit der Eigenschaft content festgelegten Wert nach dem Inhalt des Elements ein.

CSS-Version 2.1 und höher

Browser Alle gängigen, beim Internet Explorer erst ab Version 8

Beispiel für :after Dies ist ein Zitat von Guru 2.0

/* Zitat anpassen */

blockquote:after {

content: " [Zitat]";

}

Bild 4.15  Beispiel für das Pseudoelement :after

Pseudoelement :before Muster element:before

Beschreibung Fügt den mit der Eigenschaft content festgelegten Wert vor dem eigentlichen Inhalt des Elements ein.

CSS-Version 2.1 und höher

Browser Alle gängigen, Internet Explorer ab Version 8

Beispiel für :before Dies ist ein Zitat von Guru 2.0

/* Zitat anpassen */

blockquote:before {

content: "Der Guru 2.0 sagt: ";

}

Bild 4.16  Beispiel für das Pseudoelement :before

Pseudoelement :first-child Muster element:first-child

Beschreibung

Dieses Element wird zur Formatierung ausgewählt, wenn es das erste Kind eines anderen Elements ist.

CSS-Version 2.1 und höher

Browser Alle gängigen Browser, Internet Explorer ab Version 7

Beispiel für :first-child

Dieser Absatz wird fett und kursiv geschrieben.

Dieser Absatz wird ganz normal geschrieben,

da er nicht das 1. Kind ist.

/* erstes Kind-Element anpassen */

p:first-child {

font-weight: bold;

font-style: italic;

}

Bild 4.17  Beispiel für das Pseudoelement :first-child

Pseudoelement :first-line Muster element:first-line

Beschreibung Die angegebene Formatierung wird auf die erste Zeile eines Elements angewendet.

CSS-Version 1 und höher

Browser Alle gängigen Browser, Internet Explorer ab Version 7

Beispiel für :first-line

Dieser Text wird kursiv geschrieben,

da es die erste Zeile ist.


Hier wird wird ganz normal geschrieben,

da es nicht mehr die 1. Zeile ist.

/* nur die erste Zeile formatieren */

p:first-line {font-style: italic;}

Bild 4.18  Beispiel für das Pseudoelement :first-line

4.3  Hierarchie der CSS-Definitionen Ein HTML-Dokument kann durchaus mehrere externe Style Sheets, ein eingebettetes Style Sheet und auch noch eingebettete Definitionen enthalten. Deshalb kann es bei CSS prinzipiell zu Konflikten bei der Definition kommen. Dann ist es wichtig zu wissen, welche Einstellungen gültig sind. Dazu gibt es die Begriffe Spezifität und Vererbung. Spezifität Die Berechnung der Spezifität erfolgt anhand der Werte der folgenden Tabelle, wobei die Werte addiert werden. Ein Selektor, der fünf Identifier für Elemente enthält, hat somit den Wert 0-0-0-5 und ein Selektor mit einem Klassen-Identifier hat den Wert 0-0-1-0. Da die Spezifität von links nach rechts bewertet wird, kommt dem zweiten Beispiel mehr Gewicht zu. Art des Selektors

Spezifität

Art des Selektors

Spezifität

Universalselektor

Kombinatoren

0

0

0

0

Identifier (Elemente, Pseudoklassen)

0

0

0

1

Identifier (Klassen, Pseudoklassen, Attribute)

0

0

1

0

Identifier (ID)

0

1

0

0

eingebettete Definitionen

1

0

0

0

Vererbung Alle Elemente eines HTML-Dokuments bilden eine Baumstruktur, die Document-Object-Model[2] genannt wird. Der body-Tag bildet hierbei die Wurzel des Baums. Alle weiteren Elemente werden in ihren Abhängigkeiten abgebildet. Beispiel für Vererbung ...

Eine Überschrift

• 1. Eintrag



• 2. Eintrag



• 3. Eintrag

Hier steht noch weiterer Text.

Hier steht die Fusszeile –

Kontakt

Dieser Ausschnitt würde sich im DOM so abbilden:

+--body

|

+--h1

|

+--div

| |

| +--img

| |

| +--ul

| | |

| | +--li

| | |

| | +--li

| | |

| | +--li

| |

| +--p

|

+--div

|

+--p

|

+--a

Durch diese Darstellung sehen wir, wie die Elemente voneinander abhängen, und auch, wie sinnvoll die Einrückung vom Code im HTMLDokument ist, um seine Struktur besser zu verstehen. Auch die Vererbung ist mit der Baumstruktur leicht erklärt: Alle Eigenschaften eines Knotens werden auf seine Kinder vererbt. Wenn zum Beispiel body die Schriftgröße 12pt aufweist, tun dies auch alle anderen Elemente. Wenn der p-Tag fett geschrieben wird, ist das auch beim davon abhängigen a-Tag der Fall. Es werden aber nicht alle Eigenschaften vererbt, beispielsweise wird border oder margin nicht an die Kinder weitergegeben.

4.4  Text und Schrift formatieren Überschriften Wie wir durch den Umgang mit HTML wissen, gibt es sechs verschiedene Ebenen für Überschriften. Oft werden Überschriften mit p-Tags und dem class-Attribut

formatiert. Dies ist jedoch aus der Sicht von Suchmaschinen

nicht sinnvoll, da diese die Hierarchie des Textes nicht mehr nachvollziehen können. Überschriften werden immer mit den h#-Tags formatiert! Eine kreative Überschrift AUTONUM Übung: Textformatierung mit CSS Wir wollen Folgendes mit CSS erreichen:

Bild 4.19  Überschriften der 7. Übung

Dazu müssen wir mit unserer Entwicklungsumgebung Eclipse arbeiten. Schauen wir uns diese Aufgabe gemeinsam an.

Ein Projekt in Eclipse erstellen Starten wir unsere Entwicklungsumgebung Eclipse. Sobald die IDE[3] läuft, wechseln wir in den Projekt-Explorer und legen ein neues Projekt an. Dazu führen wir einen Rechtsklick auf den weißen Bereich im ProjektExplorer aus. Im Kontextmenü wählen wir aus dem Untermenü Neu den Befehl Default Web Project aus.

Bild 4.20  Kontextmenü des Projekt-Explorers von Eclipse

Als Nächstes müssen wir den Namen des Projekts cssUebungen eingeben. Wir achten natürlich darauf, dass das Projekt im richtigen Ordner angelegt wird. Sobald wir fertig sind, klicken wir auf Weiter >.

Bild 4.21  Web Project Wizard: Projektnamen vergeben

Da wir keine zusätzlichen Bibliotheken benötigen, können wir das nächste Fenster gleich mit Weiter > bestätigen.

Bild 4.22  Web Project Wizard: zusätzliche Bibliotheken

Auch ein Hosting-Paket gehört nicht zu unseren Wünschen. Daher klicken wir auf Fertig stellen.

Bild 4.23  Web Project Wizard: Hosting auswählen

Nun legt Eclipse das Projekt an und zeigt es uns sofort im Explorer an. Als nächstes legen wir mit dem Kontextmenü des Projekts sofort einige Unterverzeichnisse an.

Bild 4.24  Eclipse Projekt-Explorer: Ordner neu anlegen

Ordner in Eclipse anlegen Wir legen für unser neues Projekt folgende Ordner an: images css uebungen Nun sollte unser Projekt so aussehen:

Bild 4.25  Verzeichnisstruktur von cssUebungen

Eine Datei in Eclipse anlegen Zuerst müssen wir im Verzeichnis uebungen/ eine HTML-Datei mit dem Namen uebung07.html anlegen. Dazu klicken wir zuerst auf das Verzeichnis uebungen/ und danach rufen wir das Kontextmenü mit dem Rechtsklick auf. Dort wählen wir aus dem Menü Neu den Befehl HTML File.

Bild 4.26  Neue HTML-Datei in Eclipse anlegen

Im Fenster des Assistenten geben wir den Namen uebung07.html ein und klicken auf Fertig stellen.

Bild 4.27  Den Dateinamen in Eclipse festlegen

Nun öffnet Eclipse sofort die Datei im Editorfenster. Hier passen wir natürlich sofort den Titel auf kreative Überschriften an. Achten Sie aber auf die richtigen Entitäten. Nun benötigen wir unseren Blindtext über die Gummibärchen aus der 3. Übung und legen im body zwei Überschriften an. Das Leben der Gummibärchen

Eine andere Sicht auf die Dinge

Nun folgt der Absatz von Freilebende geschlechtsneutral.

Gummibärchen … sind diese

Danach kommt wieder eine Überschrift.

Nun sind Gummibärchen weder wabbelig noch zäh,

Und nun der restliche Absatz von " hilflose, nette Gummibärchen".

Datei jetzt so aussehen:

sie stehen genau an…"

bis "…

Damit sollte die Vorschau unserer HTML-

Bild 4.28  Ausgabe der unformatierten Datei uebung07.html

Nun wechseln wir im Projekt-Explorer in das Verzeichnis css/ und legen dort ein neues CSS File mit dem Namen main07.css an. Auch diese Datei wird von Eclipse sofort geöffnet. Kommentare in CSS Als erstes fügen wir einen Kommentar ein. Das ist sinnvoll, damit wir auch später noch wissen, was wir uns während der Erstellung der Datei gedacht haben und damit wir es nachvollziehen können. Kommentare werden in CSS mit der Kombination /* begonnen und mit */ wieder abgeschlossen. Sie können eine Zeile oder auch mehrere Zeilen lang sein. Am Anfang fügen wir also die Information zur Datei ein und auch gleich einen Kommentar für die folgenden Definitionen.

/*

Funktion: css-Datei fuer uebung07.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

...

Nun definieren wir zuerst den body-Tag mit verschiedenen Grundeinstellungen, die für die gesamte Seite gelten sollen. ...

body {

padding: 0px;

margin: 20px;

font-family: Tahoma, Arial, Helvetica, sans-serif;

font-size: 1em;

font-weight: normal;

}

...

Abstände in CSS Wie wir bereits im Abschnitt »Das Box-Modell« ab Seite 95 kennengelernt haben, gibt es zwei Arten von Abständen bei HTML-Elementen. Zuerst wollen wir uns um den Abstand zwischen dem Rand eines Elements und seinem Inhalt kümmern. Dafür gibt es die padding -Attribute. Eigenschaft padding-top oberer Abstand padding-right rechter Abstand padding-bottom unterer Abstand padding-left linker Abstand padding Kurzversion[4]

Beschreibung Dieser Wert gibt den entsprechenden Abstand zwischen dem äußeren Rand und dem Inhalt des Elements an. Ist der Inhalt ein weiteres Blockelement, wird der Abstand vom Rand des äußeren Elements zum Rand des inneren Elements berechnet.

Werte Längenangabe oder %-Wert

CSS-Version 1 und höher

Syntax-Beispiele /* für den linken Rand keinen Abstand verwenden */ padding-left: 0px; /* für alle 4 Ränder gleichen Abstand verwenden */ padding: 5px; /* für oben/rechts & unten/links gleiche Werte verwenden */ padding: 10px 5px; /* oben, rechts, unten und links verschiedene */ */ Werte verwenden */ padding: 10px 5px 20px 14px;

Bild 4.29  Padding bei Blockelementen

Da wir für unsere Webseite einen definierten Anfangspunkt und Basiswerte benötigen, legen wir den padding-Wert auf 0px fest. Um Abstände zwischen den Rändern einzelner Elemente zu definieren, bedienen wir uns einer Familie von Eigenschaften, die das Wort margin enthalten. Eigenschaft margin-top

oberer Rand margin-right rechter Rand margin-bottom unterer Rand margin-left linker Rand margin Kurzversion[5]

Beschreibung Dieser Wert gibt den Abstand zwischen dem äußeren Rand und dem Rand des nächsten Elements an.

Werte Längenangabe oder %-Wert

CSS-Version 1 und höher

Syntax-Beispiele /* keinen linken Rand verwenden */ margin-left: 0px; /* ShortCut: für alle 4 Ränder gleichen Abstand verwenden */ margin: 5px; /* ShortCut: für oben & rechts und */ /* unten & links gleiche Werte verwenden */ margin: 10px 5px; /* ShortCut: oben, rechts, unten und links verschiedene */ /* Werte verwenden */ margin: 10px 5px 20px 14px;

Auch hier benötigen wir für die gesamte Webseite einen definierten Basiswert. Der Inhalt des Dokuments soll einen Abstand von 20px vom Fensterrand des Browsers haben.

Nun folgt die Definition der Schriften, die auch für die gesamte Webseite gelten sollen, falls sie nicht später anders definiert werden. Schriften festlegen Bei der Auswahl der Schriftart müssen wir immer an Folgendes denken: Der Browser kann nur Schriften verwenden, die der Anwender auch installiert hat! Das heißt: Die Schriften, die auf unserem System installiert sind, besitzt der Besucher der Website normalerweise nicht. Daher müssen wir uns auf Schriftarten festlegen, die auf jedem Betriebssystem vorhanden sind. Leider gibt es aber keine Schriftart, die auf jedem System standardmäßig vorhanden ist. Daher können wir in CSS auch mehrere Schriften angeben, die verwendet werden sollen. Bestimmen können wir das mit dem Attribut font-family. Eigenschaft font-family

Beschreibung Legt die zu verwendende Schriftart fest.

Werte Schriftname(n), mit Komma getrennt, oder eine generische Schriftfamilie serif Systemschrift mit Serifen sans-serif Systemschrift ohne Serifen Monospace Schrift mit fester Laufweite cursive Schrift mit kursivem Schnitt fantasy Schmuckschrift inherit Verwende (erbe) die passende Eigenschaft vom Elternelement

CSS-Version 1 und höher

Syntax-Beispiele /* Nur eine bestimmte Schrift */ font-family: Arial; /* sans-serife Familie */ font-family: sans-serif; /* sans-serife Familie (hierarchisch) */ font-family: Arial, Helvetica, sans-serif;

Bemerkung Besteht der Name einer Schrift aus mehr als einem Wort, so muss der Name in doppelte Anführungszeichen eingeschlossen werden, z. B.: "Times New Roman". Werden mehrere Schriften angegeben, so werden sie von links nach rechts auf dem System gesucht. Sobald eine Schrift gefunden wurde, wird sie verwendet, z. B.: Tahoma, Arial, Helvetica, sans-serif. Wird Tahoma nicht gefunden, so wird nach Arial gesucht, wird Arial nicht gefunden, wird nach Helvetica gesucht. Ist auch diese nicht vorhanden, wird eine installierte sans-serif Schrift verwendet.

Es muss immer eine globale Schriftgruppe als letzte Schriftfamilie angegeben werden. Wir verwenden eine globale Standarddefinition für serifenlose Schriften. font-family: Tahoma, Arial, Helvetica, sans-serif;

Nun müssen wir den Schriftstil festlegen. Das geschieht mit dem Attribut font-style. Eigenschaft font-style

Beschreibung Legt den zu verwendenden Schriftstil fest.

Werte normal normaler Stil italic

kursiver Schriftstil oblique leicht schräggestellte Schrift, ähnlich wie kursiv. Dieser Typ wird seltener unterstützt. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement

CSS-Version 1 und höher

Syntax-Beispiele font-style: italic;

Sobald ein Wert von uns nicht definiert wurde, kann der Browser seine eigenen »Vermutungen« anstellen, daher: Es werden alle Einstellungen explizit definiert, auch wenn es Standardwerte gibt! Wir verwenden für unsere Webseite den normalen Schriftschnitt. Nun müssen wir die Schriftstärke mit dem Attribut font-weight definieren. Eigenschaft font-weight

Beschreibung Legt die Stärke der Schrift fest

Werte normal normal bold fett bolder fetter als normal, aber weniger als fett lighter dünner als normal inherit Verwende (erbe) die passende Eigenschaft vom Elternelement

CSS-Version 1 und höher

Syntax-Beispiele font-weight: normal;

Auch hier legen wir einen normalen Standardwert fest. Nun bleibt uns noch die Definition der Schriftgröße. Dafür gibt es die Eigenschaft font-size. Eigenschaft font-size

Beschreibung Legt die Größe der Schrift fest

Werte Definierte Größenangaben xx-small extra klein x-small sehr klein small klein medium mittlere Größe large größer x-large sehr groß xx-large extra groß smaller Um einen Faktor kleiner als das Elternelement larger Um einen Faktor größer als das Elternelement inherit Verwende (erbe) die passende Eigenschaft vom Elternelement

CSS-Version 1 und höher

Syntax-Beispiele /* feste Größe */

font-size: 12px; /* größer als das Elternelement */ font-size: larger; /* um Faktor 1.5 größer als Standardgröße des Browser */ font-size: 150%; /* So groß wie ein M der definierten Schrift */ font-size: 1em;

Wir definieren Schriften nie mit festen Werten! Nur mit relativen Angaben wie em oder %-Satz kann der Anwender mögliche Sehschwächen selbst ausgleichen. Dies ist notwendig, um auf die Einstellungen des Anwenders Rücksicht zu nehmen. Außerdem ist es guter Stil, auf eine möglichst barrierefreie Seitendarstellung zu achten. Der gesamte Block für den body-Tag sieht jetzt wie folgt aus. body {

padding: 0px;

margin: 20px;

font-family: Tahoma, Arial, Helvetica, sans-serif;

font-style: normal;

font-weight: normal;

font-size: 1em;

}

Nun müssen wir unserer HTML-Seite zeigen, wo sie das Style Sheet findet und dass es verwendet werden soll. Dazu gibt es einen eigenen Tag im head-Bereich der Webseite, nämlich . Syntax

Attribute href = "URL" Gibt die Adresse der zu verlinkenden Datei an. type = "text/css" type = "text/javascript" Enthält die Art der enthaltenen Daten.

rel = "..." Gibt die Art der »Verwandtschaft« (rel ist von relationship abgeleitet) zwischen der Originaldatei und der eingebundenen Datei an. Hier können verschiedene vordefinierte Werte je nach Beziehung angegeben werden.

Art Head-Element

DTD strict, transitional

Damit sieht jetzt der Kopfbereich unserer HTML-Datei so aus:



kreative Überschriften



Und wir können uns das neue Aussehen der HTML-Seite sofort im Browser ansehen:

Bild 4.30  Die Datei uebung07.html mit definiertem body-Tag

Nun gehen wir einen Schritt weiter und passen die Überschriften an. Beginnen wir mit der Hauptüberschrift und ändern den h1-Tag in der CSSDatei ab. /* Ueberschriften */

h1 {

width: 500px;

padding: 0px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

font-weight: normal;

font-style: italic;

color: #333333;

}

In diesem Block finden wir gleich in der ersten Zeile ein neues Attribut. Dort ändern wir die Breite des Elements mit der Eigenschaft width. Die Größe eines Elements – Breite und Höhe Eigenschaft width

Beschreibung Gibt die innere Breite des Elements laut Box-Modell an.

Werte Definierte Breite mit Maßangabe oder in Prozent. auto Der Browser berechnet die ideale Breite. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* feste Breite angeben */ width: 500px; /* relative Breite in % */ width: 75%;

Bemerkung Die Angabe der Breite funktioniert nur mit Blockelementen. Bei einer relativen Angabe wird immer die Breite des Elternelements als Basis verwendet. Ist das Element ein direktes Kind des body-Elements, so wird der Viewport als Bezugsbreite verwendet.

Eigenschaft height

Beschreibung Gibt die innere Höhe des Elements laut Box-Modell an

Werte Definierte Höhe mit Maßangabe oder in Prozent

auto Der Browser berechnet die ideale Höhe inherit Verwende (erbe) die passende Eigenschaft vom Elternelement

CSS-Version 1 und höher

Syntax-Beispiele /* feste Höhe angeben */ height: 150px; /* relative Höhe in % */ height: 75%;

Bemerkung Die Angabe der Höhe funktioniert nur mit Blockelementen. Bei einer relativen Angabe wird immer die Höhe des Elternelements als Basis verwendet. Ist das Element ein direktes Kind des body-Elements, so wird der Viewport als Bezugshöhe verwendet.

Farben definieren Natürlich können wir auch die Farben in CSS festlegen. Besonders wichtig ist hier, auf websichere Farben[6] zu achten. Mit CSS können wir grundsätzlich zwei Arten von Farben bestimmen, nämlich die Hintergrundund die Schriftfarbe. Dafür verwenden wir die Eigenschaften backgroundcolor

und color.

Eigenschaft background-color

Beschreibung Legt die Hintergrundfarbe des Elements fest

Werte name Name einer benannten Farbe RGB Ein RGB-Wert mit der Funktion rgb()

Hex Ein hexadezimaler Farbwert

CSS-Version 1 und höher

Syntax-Beispiele /* Die Hintergrundfarbe rot festlegen */ background-color: red; background-color: rgb(255, 0, 0); background-color: #FF0000;

Eigenschaft color

Beschreibung Legt die Schrift- bzw. Vordergrundfarbe eines Elements fest

Werte name Name einer benannten Farbe RGB Ein RGB-Wert mit der Funktion rgb() Hex Ein hexadezimaler Farbwert

CSS-Version 1 und höher

Syntax-Beispiele /* Die Textfarbe rot festlegen */ color: red; color: rgb(255, 0, 0); color: #FF0000;

Durch das Ändern der Schrift und der Einstellungen dazu sieht unsere Beispielseite jetzt so aus:

Bild 4.31  Die Datei uebung07.html mit angepasstem h1-Tag

Zeilenhöhe verändern Nun passen wir die erste Zeile der Überschrift h1 an. h1:first-line {

line-height: 90%;

font-size: 0.65em;

color: #000066;

}

Wir verwenden dazu das Pseudoelement für die erste Zeile[7] und ändern die Höhe der Zeile für dieses Element. Zusätzlich passen wir auch die Schriftgröße und die Schriftfarbe an. Dafür verwenden wir das Attribut line-height.

Eigenschaft line-height

Beschreibung Legt die Zeilenhöhe fest.

Werte normal Die passende Höhe für die ausgewählte Schriftgröße zahl Eine Zahl, die mit der aktuellen Schriftgröße multipliziert wird, um die Zeilenhöhe zu berechnen festerWert Eine Zahl mit einer Maßangabe, um die Zeilenhöhe absolut festzulegen % Eine Prozentangabe, die die Zeilenhöhe relativ zur Schriftgröße festlegt inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* Die Zeilenhöhe auf 1em festlegen */ line-height: 1em; /* Zeilenhöhe auf 90% der */ /* aktuellen Schriftgröße festlegen */ line-height: 90%;

Bemerkung Ein Wert von 1 oder 100 % ist die normale Höhe einer Zeile. Werden kleinere Werte verwendet, so ist die Zeile niedriger als die Schriftgröße. Bei größeren Werten ist sie höher.

Durch diese Änderung verändert sich auch die Überschrift der Webseite.

Bild 4.32  Die Datei uebung07.html mit angepasstem Pseudoelement

Nun kommt ein kleiner Trick, um die Hauptüberschrift in zwei Zeilen zu teilen. Wir haben ja im HTML-Dokument das letzte Wort in einen span-Tag geklammert. Wir wissen auch, dass dieser Tag ein Inline-Tag ist und zum Zweck der Formatierung in HTML eingesetzt wird. Nun formatieren wir diesen Tag mit CSS neu. Mit der Eigenschaft display können wir die Art der Anzeige eines Elements anpassen, in unserem Fall wollen wir aus dem Inline- ein Blockelement machen. Dazu verwenden wir die Technik des Kontext-Selektors [8]. h1 span {

display: block;

}

Eigenschaft display

Beschreibung Definiert die Art der Box, die der Browser für dieses Element verwenden soll.

Werte none Das Element ist kein Box-Element. block Das Element wird zu einem Blockelement (Zeilenumbruch vor und nach dem Element). inline Das Element wird zu einem Inline-Element (kein Zeilenumbruch vor und nach dem Element). inline-block

Das Element wird zu einem Blockelement im Text (ohne Zeilenumbruch vor und nach dem Element). inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* Ein Block-Element erzeugen */ display: block;

Dadurch wird unsere Hauptüberschrift jetzt umbrochen und das letzte Wort wird neu formatiert.

Bild 4.33  Die Datei uebung07.html mit angepasstem span-Tag

Nun passen wir den h2-Tag an. Aber wir wollen nur dem Tag, der einer Hauptüberschrift folgt, ein neues Aussehen geben. Daher arbeiten wir hier mit einem Geschwister-Selektor . Sonst kennen wir alle CSS-Eigenschaften bereits. h1 + h2 {

width: 500px;

padding: 20px 0px 0px 0px;

margin: 0px 0px -10px 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.25em;

font-weight: normal;

font-style: italic;

color: #666666;

}

Wenn wir jetzt unsere Beispielseite aufrufen, sehen wir die Änderungen. Uns fällt auf, dass nur ein h2-Tag verändert wurde.

Bild 4.34  Die Datei uebung07.html mit angepasstem Geschwister-Element

Jetzt müssen wir auch noch die restlichen Überschriften der zweiten Ebene formatieren. h2 {

width: 500px;

padding: 0px;

margin: 0px 0px -10px 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.25em;

font-weight: normal;

font-style: italic;

color: #000066;

}

Auch hier kennen wir bereits alle Eigenschaften und können uns die Änderungen im Browser ansehen.

Bild 4.35  Die Datei uebung07.html mit angepasstem h2-Tag

Den Zeichenabstand verändern Als Letztes folgt noch die Formatierung für den Fließtext, also die p-Tags, die Geschwister einer Überschrift der zweiten Ebene sind. /* Absaetze */

h2 + p {

width: 480px;

margin: 10px 0px 20px 20px;

line-height: 150%;

font-size: 0.75em;

letter-spacing: 0.05em;

}

Hier entdecken wir in der letzten Zeile eine neue Eigenschaft namens letter-spacing, die den Abstand der einzelnen Zeichen in einem Text

verändert. Eigenschaft letter-spacing

Beschreibung Definiert den Abstand zwischen den einzelnen Buchstaben, die sogenannte Laufweite.

Werte normal Keine zusätzlichen Abstände zwischen den Buchstaben. festerWert Eine absolute Maßangabe, um zusätzlichen Abstand zwischen den Buchstaben zu erzeugen. Es sind auch negative Werte erlaubt, um den Text zu komprimieren. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* Ein "Leerzeichen" zwischen den Buchstaben einfügen */ letter-spacing: 1em;

Bild 4.36  Die endgültige Ausgabe der Datei uebung07.html

Nun können wir uns an einer weiteren Formatierung der Überschriften versuchen. AUTONUM Übung: Überschriften mit CSS Speichern Sie die Datei uebung07.html und main07.css mit der neuen Nummer 08. Passen Sie die Dateien jetzt so an, dass folgendes Ergebnis für die 1. Überschrift verwirklicht wird.

Bild 4.37  Angepasste Überschrift der 8. Übung

Eigene Schriftart verwenden Bis jetzt haben wir als Webdesigner immer nur mit den Standardschriften arbeiten können. Das heißt: Alle Schriften, die auf dem Anwendercomputer installiert sind, können wir verwenden. Aber da wir alle Systeme von den verschiedenen Windows- und Office-Versionen über Mac OS X bis zu Linux berücksichtigen müssen, war die Auswahl sehr klein. Eine Times, eine Helvetica und schon ist es eigentlich vorbei mit der Typographie. In der CSS-Version 2 gab es zwar die Möglichkeit, Schriften einzubinden. Aber diese wurde laut W3C[9] wegen mangelnder Unterstützung in der CSS-Version 2.1 wieder aufgegeben. Jetzt ist sie in der Version 3 von CSS wieder enthalten. Aber wie klappt das Ganze eigentlich? Und wie schaut das mit dem Urheberrecht aus?

Technik Die Technik ist eigentlich ganz einfach. Wir stellen einen Font (eine Schriftart) auf einer URL zur Verfügung und verwenden ihn dann. Dafür gibt es verschiedene Tools wie: GlyphGate (früher Fairy)[10] eine kostenpflichtige Webserver-Extension Microsoft WEFT[11] Software zum Umwandeln von Schriften für das Web SIL International[12] Techniken zur Erzeugung von Schriften und verschiedene Ressourcen Schriften in Cascading Style Sheets Dieser Teil ist eigentlich relativ einfach, wird aber noch nicht von allen Browsern unterstützt. Zuerst müssen wir eine Schrift per FTP auf einen Webserver übertragen. Wir müssen ein wenig aufpassen, dass die Schrift auch von jedem System erkannt wird. Sehr gut eignen sich TrueTypeFonts[13], da sie eigentlich von jedem Betriebssystem angezeigt werden können. Falls wir ganz sicher gehen wollen, nehmen wir eine Schrift von SIL oder wandeln mit dem WEFT einen TrueType-Font um. Der zweite Schritt besteht im Anpassen der CSS-Datei. Am Anfang fügen wir einen @font-face-Parameter ein. @font-face {

font-family: Andika;

src: local(AndBasR) Ä

url(http://example.com/fonts/AndBasR.ttf);

}

In der 2. Zeile geben wir der Schrift einen Namen. Diesen können wir in der Folge im gesamten CSS mit dem Attribut font-family verwenden. Verwenden Sie dafür einen Namen ohne Leer- und Sonderzeichen!

In der 3. Zeile legen wir fest, woher die Schrift bezogen werden soll. Mit local() können wir den Browser anweisen, dass er die lokal installierte Schrift verwenden soll – natürlich nur, wenn sie auch lokal vorhanden ist. Falls dies nicht der Fall ist, kommt der Parameter url() zum Zug. Hier können wir eine URL (absolut oder relativ) angeben, von der die Schrift geladen werden soll. Der dritte Schritt ist dann die Verwendung der Schrift im CSS. .entrytitle {

color: #8A8D18;

display: block;

font-family: Andika, Tahoma, Verdana, Helvetica, Ä

Arial, sans-serif;

font-size: 1.6em;

}

Wir sehen in der 4. Zeile, wie die im ersten Beispiel definierte Schrift angewendet wird. In diesem Beispiel wird darauf Rücksicht genommen, dass noch nicht alle Browser CSS 3 und den @font-face-Eintrag sauber unterstützen. Daher wurden als Alternativen weitere Schriften angegeben. Hier eine kleine Auswahl an Browsern und wie sie diesen Parameter unterstützen. Browser

Firefox

Version

2 nein

3

Internet

Explorer 3.1 ja

3.5

6

7

Opera 8

unvollständig

Safari

9

9.5

3

4

nein

ja

nein

ja

Lizenz & Recht Hier müssen wir ein wenig aufpassen. Denn auch jede Schrift unterliegt dem Urheberrecht und wir dürfen sie nicht einfach weiterkopieren. Daher müssen wir uns den Lizenzvertrag zu jeder Schrift genau durchlesen. Oft ist es untersagt, die Schrift auf Websites einzusetzen oder öffentlich zur Verfügung zu stellen. Und genau das machen wir, wenn wir sie auf einem Webserver ablegen.

4.5  Positionieren von Elementen Nachdem wir uns mit den Schriften und verschiedenen Möglichkeiten der Darstellung beschäftigt haben, können wir uns jetzt an ihre Positionierung wagen. AUTONUM Übung: Widgets Unser Ziel ist es, zwei sogenannte Widgets [14] zu positionieren und eine Grafik ein wenig außerhalb dieser zu positionieren. Schauen wir einmal auf das gewünschte Ergebnis.

Bild 4.38  Widgets mit Grafiken aus der 9. Übung

Als erstes benötigen wir die Grafik guru_r.png aus dem Angaben-Ordner. Diese kopieren wir in das Verzeichnis images/ unseres Projekts in Eclipse. Sobald wir Dateien in einem Eclipse-Projekt über den Explorer bzw. Finder verändern, müssen wir im Projekt-Explorer von Eclipse den Inhalt des Projekts bzw. des Ordners aktualisieren. Sonst sehen wir einerseits die Veränderungen nicht in Eclipse. Andererseits kann es uns passieren, dass Firefox die Dateien nicht findet und anzeigt. Dazu rufen wir das Kontextmenü des Ordners auf und klicken auf den Befehl Aktualisieren. Nun benötigen wir im Verzeichnis uebungen/ eine neue HTML-Datei mit dem Namen uebung09.html und im Verzeichnis css/ eine neue CSS-Datei mit dem Namen main09.css.

Der Inhalt der HTML-Datei besteht wieder aus einem Absatz des Gummibärchentexts. Wir stellen diesen aber als unsortierte Liste mit Grafiken und h2-Überschriften dar. Natürlich achten wir wieder auf eine saubere Struktur der HTML-Datei.





Text & Bild

• 
  
  Widget #1
  
  

  Freilebende Gummibärchen gibt es nicht.
  
  Man kauft sie in Packungen an der Kinokasse.
  
  Dieser Kauf ist der Beginn einer fast
  
  ...
  
  geschlechtliches wäre, denn prinzipiell
  
  sind diese geschlechtsneutral.

  
  
  



• 
  
  Widget #2
  
  

  Freilebende Gummibärchen gibt es nicht.
  
  Man kauft sie in Packungen an der Kinokasse.
  
  Dieser Kauf ist der Beginn einer fast
  
  ...
  
  geschlechtliches wäre, denn prinzipiell sind
  
  diese geschlechtsneutral.

  
  
  

Nun beginnen wir mit der CSS-Datei. An den Anfang kommen natürlich ein passender Kommentar und die Formatierung des body-Tags. Hier sind

keine neuen Eigenschaften zu finden, sondern wir legen nur die Standardformatierungen fest. /*

Funktion: css-Datei fuer uebung09.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #F0F0F0;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 1em;

font-weight: normal;

}

Jetzt müssen wir unseren ul-Tag neu formatieren. Denn sonst wird der HTML-Code ja als Liste dargestellt und nicht als Widgets. Diese Technik, eine unsortierte Liste für Menüs oder Widgets zu verwenden, ist weit verbreitet und wird wegen ihrer klaren Struktur gerne in HTML eingesetzt. /* unordered list */

ul {

position: relative;

list-style: none;

margin: 20px 0px;

padding: 0px;

}

Die erste Zeile des CSS-Blocks kümmert sich um die Positionierung des ulElements. Hier fällt uns die Eigenschaft mit dem Namen position auf. Eigenschaft position

Beschreibung Legt die Art der Positionierung eines Elements im Viewport/Canvas fest.

Werte absolute Positioniert das Element auf Basis von left, top, right oder bottom absolut vom oberen linken Eck des Canvas bzw. des Elternelements, das keinen static-Wert

besitzt. fixed Positioniert das Element auf Basis von left, top, right oder bottom absolut vom oberen linken Eck des Viewports. relative Positioniert das Element auf Basis von left, top, right oder bottom relativ zu seiner ursprünglichen Position. static Das Element wird ohne Positionierung angezeigt. Es werden alle Positions-Elemente ignoriert. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 2 und höher

Syntax-Beispiele /* absolute Positionierung */ position: absolute;

Die obere linke Ecke Zur Einstellung der Positionierungsart benötigen wir auch noch die Möglichkeit der Positionsangabe. Wir können ein Element mit dem oberen Rand positionieren. Das tun wir mit dem Attribut top. Eigenschaft top

Beschreibung Definiert die Position des oberen Rands eines Elements.

Werte auto Mit dem Standardwert berechnet der Browser den oberen Elementrand. festerWert Gibt einen absoluten Wert mit einer Maßangabe für den oberen Rand an. Negative Werte sind ebenfalls erlaubt. %

Berechnet den oberen Rand mit einer Prozentangabe auf Basis des Elternelements. Negative Werte sind erlaubt. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 2 und höher

Syntax-Beispiele /* absoluter oberer Rand */ top: 50px; /* relativer oberer Rand */ top: 5%;

Bemerkung Das Element zeigt keine Wirkung, falls die Positionierungsmethode static verwendet wird. Es kann nicht gemeinsam mit bottom verwendet werden.

Natürlich können wir ein Element auch mit dem linken Rand positionieren. Dafür gibt es die Eigenschaft left. Eigenschaft left

Beschreibung Definiert die Position des linken Rands eines Elements

Werte auto Mit dem Standardwert berechnet der Browser den linken Elementrand. festerWert Gibt einen absoluten Wert mit einer Maßangabe für den linken Rand an. Negative Werte sind ebenfalls erlaubt. % Berechnet den linken Rand mit einer Prozentangabe auf Basis des Elternelements. Negative Werte sind erlaubt. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 2 und höher

Syntax-Beispiele /* absoluter linker Rand */ left: 50px; /* relativer linker Rand */ left: 5%;

Bemerkung Das Element hat keine Wirkung, falls die Positionierungsmethode static verwendet wird. Es kann nicht gemeinsam mit right verwendet werden.

Die untere rechte Ecke Ein Sonderfall der Positionierung ist die Berechnung über das untere rechte Eck. Denn hier geben wir den Abstand vom unteren rechten Rand des Elternelements an. Den unteren Rand bestimmt die Eigenschaft bottom. Eigenschaft bottom

Beschreibung Definiert die Position des unteren Rands eines Elements.

Werte auto Mit dem Standardwert berechnet der Browser den unteren Elementrand. festerWert Gibt einen absoluten Wert mit einer Maßangabe für den Abstand des unteren Abstands an. Negative Werte sind ebenfalls erlaubt. % Berechnet den unteren Abstand mit einer Prozentangabe auf Basis des Elternelements. Negative Werte sind erlaubt. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 2 und höher

Syntax-Beispiele /* absoluter unterer Abstand */ bottom: 50px;

/* relativer unterer Abstand */ bottom: 5%;

Bemerkung Die Eigenschaft hat keine Wirkung, falls die Positionierungsmethode static verwendet wird. Sie kann nicht gemeinsam mit top verwendet werden.

Nun können wir den rechten Abstand eines Elements festlegen. Dafür verwenden wir die Eigenschaft right. Eigenschaft right

Beschreibung Definiert die Position des rechten Rands eines Elements.

Werte auto Mit dem Standardwert berechnet der Browser den rechten Abstand. festerWert Gibt einen absoluten Wert mit einer Maßangabe für den Abstand des rechten Rands an. Negative Werte sind ebenfalls erlaubt. % Berechnet den rechten Abstand mit einer Prozentangabe auf Basis des Elternelements. Negative Werte sind erlaubt. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 2 und höher

Syntax-Beispiele /* absoluter rechter Abstand */ right: 50px; /* relativer rechter Abstand */ right: 5%;

Bemerkung Die Eigenschaft hat keine Wirkung, falls die Positionierungsmethode static verwendet wird. Sie kann nicht gemeinsam mit left verwendet werden.

Darstellung von Listen Bei den ul bzw. ol-Tags können wir auch die Darstellung der Liste beeinflussen. Eigenschaft list-style-type

Beschreibung Legt die Art und Darstellung eines Aufzählungszeichens für einen li-Tag (List-Item) fest.

Werte none Kein Aufzählungselement circle Einen kleinen Kreis (o) verwenden. disc Einen kleinen ausgefüllten Kreis (l) verwenden. square Ein ausgefülltes Quadrat (n) verwenden. armenian Die armenische Nummerierung verwenden. decimal Eine dezimale Nummerierung verwenden. decimal-leading-zero Eine dezimale Nummerierung mit führender Null (01, 02, 03, 04, …) verwenden. georgian Eine georgische Nummerierung (an, ban, gan, …) verwenden. lower-alpha Kleinbuchstaben (a, b, c, d, …) verwenden. lower-greek kleine, griechische Buchstaben (α, β, γ, δ, ε, …) verwenden. lower-latin Kleinbuchstaben (a, b, c, d, …) verwenden. lower-roman kleine, römische Zahlen (i, ii, iii, iv, v, …) verwenden. upper-alpha

Großbuchstaben (A, B, C, D, …) verwenden. upper-latin Großbuchstaben (A, B, C, D, …) verwenden. upper-roman große römische Zahlen (I, II, III, IV, V, …) verwenden. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* kein Listenzeichen */ list-style-type: none; /* Nummerierung mit Dezimalzahlen */ list-style-type: decimal;

Zusätzlich zu den bereits vorhandenen Zeichen können wir auch eine eigene Grafik als Listenmarkierer verwenden. Das geschieht mit der Eigenschaft list-style-image. Eigenschaft list-style-image

Beschreibung Ersetzt das Aufzählungszeichen durch ein eigenes Bild.

Werte none Es wird kein eigenes Bild verwendet. Dafür bestimmt die Eigenschaft list-styletype die Art des Markierers. Sind beide Eigenschaften auf none gesetzt, wird absolut kein Markierer verwendet. Dies ist die Standardeigenschaft. url Eine URL zu einer Grafikdatei. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele

/* kein Bild verwenden */ list-style-image: none; /* ein eigenes Bild verwenden */ list-style-image: url("../images/bullet.png");

Bemerkung Es sollte zusätzlich die Eigenschaft list-style-type definiert werden. Falls das Bild nicht geladen werden kann, wird trotzdem ein Aufzählungszeichen angezeigt.

Als Letztes können wir mit dem Attribut list-style-position noch die Position des Listenmarkierers festlegen. Eigenschaft list-style-position

Beschreibung Definiert, ob das Aufzählungszeichen inner- bzw. ausserhalb des Textflusses angezeigt wird.

Werte inside Der Listenmarker wird im Text integriert. Damit läuft die linke Fluchtlinie bei mehrzeiligen Elementen durchgehend. outside Der Listenmarker wird außerhalb des Textes dargestellt. Es gibt eine linke Fluchtlinie für die Marker und eine zweite für den Text. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* Listenzeichen außerhalb */ list-style-position: outside;

Bild 4.39  Liste mit außen liegenden Listenelementen /* Listenzeichen innerhalb */ list-style-position: inside;

Bild 4.40  Liste mit innen liegenden Listelementen

Wir können auch eine Kurzversion für die oberen drei Einstellungen verwenden. Sie heißt list-style. Eigenschaft

list-style

Beschreibung Die Eigenschaft kombiniert die einzelnen Eigenschaften eines li-Tags zu einer Kurzversion.

Werte list-style-type siehe oben list-style-position siehe oben list-style-image siehe oben inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* Listenzeichen definieren */ list-style: square outside url("../images/bullet.gif");

»runde« Ecken erzeugen Nun müssen wir uns um das Listenelement kümmern. Da wir in HTML das Kernattribut class mit dem Wert klein belegt haben, müssen wir auch im CSS diesen Klassennamen verwenden. li.klein {

position: relative;

width: 30%;

height: 200px;

margin: 0px 15px 20px 0px;

padding: 0px;

background: #FFFFFF;

border-radius: 10px

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

Bis auf die letzten drei Zeilen des CSS-Blocks sind uns diese Eigenschaften bereits bekannt. Diese letzten Zeilen sind eigentlich nur für eines zuständig: Das Widget soll »runde« Ecken haben. Dies klappt auch bei allen CSS-3kompatiblen Browsern sehr gut. Leider funktioniert es aber beim Internet Explorer (noch) nicht fehlerfrei. Wie wir trotzdem diese Darstellung erzeugen können, sehen wir in den Abschnitten »Registerkarten mit abgerundeten Ecken« und »Eine kreative Bilddarstellung«. Da wir für jeden Browsertyp eine eigene Eigenschaft verwenden müssen, stellen wir sie diesmal als Tabelle dar. Wichtig ist, dass wir als Wert immer eine Zahl mit einer Maßangabe verwenden. Prozentwerte sind für diese Eigenschaft nicht erlaubt. CSS3

Mozilla

(bspw.: Firefox)

WebKit

(bspw.: Safari)

border-top-right-radius

-moz-border-radius-topright

-webkit-border-top-rightradius

border-bottom-right-

-moz-border-radius-

-webkit-border-bottom-

radius

bottomright

right-radius

border-bottom-left-

-moz-border-radius-

-webkit-border-bottom-

radius

bottomleft

left-radius

border-top-left-radius

-moz-border-radius-topleft

-webkit-border-top-leftradius

border-radius

-moz-border-radius

-webkit-border-radius

Nun haben wir für unsere Widgets einen weißen Hintergrund mit runden Ecken erzeugt. Einen kleinen Nachteil haben diese Eigenschaften in Eclipse: Sie erzeugen eine Fehlermeldung, da sie entweder gar nicht oder nicht richtig erkannt werden. Diesen Fehler können wir aber ruhig ignorieren.

Bild 4.41  Die teilweise formatierten Widgets mit »runden« Ecken

Der Titelbalken des Widgets Wie wir sehen, klappt die Formatierung schon ganz gut. Nun müssen wir uns um die Überschrift h2 kümmern und sie als Titelbalken des Widgets darstellen.

Zuerst werden wir das linke obere Eck der Überschrift abrunden. Damit erzeugen wir einen kleinen Eyecatcher, da das rechte obere Eck nicht abgerundet wird. /* Ueberschriften */

h2 {

border-top-left-radius: 10px;

-moz-border-radius-topleft: 10px;

-webkit-border-top-left-radius: 10px;

}

Als Nächstes passen wir die Überschrift und die Absätze innerhalb der liTags an. Dies müssen wir so machen, denn alle anderen Elemente innerhalb der Webseite sollen ja regulär dargestellt werden. Als erstes kümmern wir uns um die Text- und Hintergrundfarbe des Titelbalkens. li h2 {

background-color: #229922;

color: #FFFFFF;

}

Nun müssen wir nur noch die Schriftgröße und die Abstände der Elemente definieren. Hier sehen wir wieder die abhängigen Elemente. Zusätzlich können wir mehrere Elemente gleich formatieren oder ihnen die gleichen Eigenschaften zuweisen, wenn wir sie mit Komma getrennt auflisten. li h2,

li p {

font-size: 0.7em;

padding: 5px 60px 5px 10px;

margin: 0px;

}

Wenn wir uns die Webseite ansehen, sieht es soweit ganz gut aus. Wir müssen uns jetzt noch um die Position des Bildes kümmern.

Bild 4.42  Die teilweise formatierten Widgets mit Titelbalken

Die Eigenschaften für die Positionierung der Elemente haben wir schon weiter oben kennengelernt. Nun müssen wir sie nur noch anwenden. /* Bilder */

li img {

position: absolute;

top: 10px;

right: -70px;

height: 121px;

width: 126px;

}

Elemente mit Firebug positionieren Besonders hier ist es schwierig, die genaue Position des Bildes im Kopf zu berechnen. Daher benützen wir Firebug, um uns das Leben leichter zu machen. Dazu rufen wir die Firebug-Webseite im Firefox-Browser auf und aktivieren das Add-On. Nun können wir den zweiten Knopf in der Symbolleiste von Firebug anklicken.

Bild 4.43  Ein HTML-Element mit Firebug suchen

Nun können wir mit der Maus über die einzelnen Elemente der Webseite fahren und sehen im unteren Bereich das DOM und auch die CSS-Werte. Sobald wir auf ein Element klicken, wird die Anzeige im unteren Bereich fixiert. Wir wählen in unserem Fall eines der beiden img-Elemente aus.

Bild 4.44  Mit Firebug ausgewähltes img-Element

Nun können wir auf der rechten Seite von Firebug die CSS-Eigenschaften einfach verändern. Wir klicken auf den entsprechenden Eigenschaftswert und geben entweder einen neuen Wert ein oder verändern die Werte mit den Pfeiltasten nach oben bzw. unten. Dies machen wir mit allen Werten, bis das Ergebnis unseren Vorstellungen entspricht. Nun müssen wir die Eigenschaften aus Firebug nur noch in unsere CSSDatei übertragen und sehen dann die komplett formatierte Seite vor uns.

Bild 4.45  Formatierte Widgets einer Webseite

4.6  Navigation Nun können wir eine einfache vertikale Navigation mit CSS aufbauen. AUTONUM Übung: Vertikale Navigation Mit dieser Übung erstellen wir aus einer unsortierten Liste eine vertikale Navigation.

Bild 4.46  Die unsortierte Liste für die 10. Übung

Hier ergeben sich auch noch zusätzliche Anforderungen. Menüpunkte der ersten Ebene sollen eine kräftigere Hintergrundfarbe besitzen. Alle Menüpunkte sollen jedoch die Hintergrundfarbe beim Überfahren mit der Maus verändern. Aber bei Gruppierungsmenüpunkten soll dies nicht der Fall sein, damit der Anwender sofort erkennt, welche Navigationspunkte er anklicken kann. Zusätzlich stellen wir mit den entsprechenden Pfeilen vor den Menüpunkten den Status dar.

Bild 4.47  Formatierte vertikale Navigation der 10. Übung

Für diese Übungen benötigen wir zusätzliche Grafiken (navArrow.png und subArrow.png), die wir im Verzeichnis Angaben/ finden. Diese beiden Dateien kopieren wir in das Verzeichnis images/ unseres Projekts. Die einfache HTML-Datei für diese Übung finden Sie im Anhang ab Seite 261. Um dieses Problem der Navigation zu lösen, benötigen wir weitere neue Eigenschaften von CSS.

Ein Hintergrundbild verwenden Um mit Hintergrundbildern zu arbeiten, gibt es eine Reihe von CSSEigenschaften. Die erste heißt background-image und legt fest, welches Bild wir verwenden wollen. Eigenschaft background-image

Beschreibung Legt ein Hintergrundbild für ein Element fest.

Werte url Ein Pfad/Dateiname für das Hintergrundbild. none Kein Hintergrundbild verwenden. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* ein Hintergrundbild verwenden */ background-image: url(../images/subArrow.png); /* Hintergrundbild entfernen */ background-image: none;

Bemerkung Als Hintergrundfläche wird laut Box-Modell die Gesamtgröße eines Elements ohne die Werte für margin verwendet.

Ist der Rahmen nicht durchgängig, dann wird das Bild auch in den freien Bereichen des Rahmens angezeigt.

Normalerweise wird das Bild im linken oberen Eck des Elements platziert und gekachelt (vertikal und horizontal wiederholt).

Nun können wir auch bestimmen, ob und wie das Hintergrundbild wiederholt werden soll. Dafür verwenden wir das CSS-Attribut background-

repeat. width

Bei dieser Eigenschaft sollten wir auch die Werte für height und

vergeben.

Eigenschaft background-repeat

Beschreibung Gibt an, ob und wie das Hintergrundbild wiederholt werden soll.

Werte repeat Das Bild wird horizontal und vertikal wiederholt, so dass ein Muster entsteht. repeat-x Das Bild wird horizontal wiederholt (das x steht für die horizontale x-Achse), so dass ein Muster in einer Art Zeile entsteht. repeat-y Das Bild wird vertikal wiederholt (das y steht für die vertikale y-Achse), so dass ein Muster in einer Art Spalte entsteht. no-repeat Keine Wiederholung verwenden. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* ein Hintergrundbild als Kacheln verwenden */ background-repeat: repeat;

Wir können das Hintergrundbild auch auf der Webseite fixieren oder normal scrollen lassen. Das geschieht mit dem Attribut background-attachement. Eigenschaft background-attachement

Beschreibung Legt fest, ob das Hintergrundbild fixiert dargestellt werden oder mit dem Seiteninhalt scrollen soll.

Werte

scroll Das Hintergrundbild wird normal mit dem Inhalt gescrollt. fixed Das Bild bleibt immer an derselben Position stehen, egal, wie der Seiteninhalt gescrollt wird. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* ein Hintergrundbild soll mitscrollen */ background-attachement: scroll;

Wenn wir das Bild nicht wiederholen, können wir ihm über die Eigenschaft background-position eine exakte oder relative Position mitgeben. Eigenschaft background-position

Beschreibung Legt die Startposition eines Hintergrundbildes fest.

Werte top left Oberes linkes Eck des Elements. top center Oberer Rand des Elements und horizontal zentriert. top right Oberes rechtes Eck des Elements. center left Vertikal zentriert, aber am linken Rand des Elements. center center Genau um den Mittelpunkt des Elements zentriert. center right Am rechten Rand des Elements, aber vertikal zentriert. bottom left Unteres linkes Eck des Elements. bottom center

Unterer Rand des Elements und horizontal zentriert. bottom right Unteres, rechtes Eck des Elements. x% y% Gibt an, um wieviel Prozent das Hintergrundbild vom linken und vom oberen Rand verschoben werden soll. Die Basis für die Prozentwerte ist die Breite bzw. Höhe des Elements. xPos yPos Eine absolute Zahl mit Maßangabe für die Position des Bildes. Zuerst wird der horizontale und als zweiter Wert der vertikale Abstand angegeben. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* absolute Position für das Hintergrundbild */ background-position: 50px 20px;

Zur Festlegung der einzelnen Werte gibt es auch eine Kurzversion. Sie lautet einfach background. Eigenschaft background

Beschreibung background ist eine Kurzversion (und Kombination) aller Eigenschaften für das Hintergrundbild

Werte background-color siehe oben background-image siehe oben background-repeat siehe oben background-attachement siehe oben background-position

siehe oben inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* Kurzversion für ein Hintergrundbild */ background: #339944 url(../navArrow.png) 10px center no-repeat;

Nun müssen wir nur noch wissen, wie wir die automatische Auszeichnung für einen a-Tag verändern. Texte ausrichten Wie wir die Farbe eines Textes ändern, haben wir bereits weiter oben behandelt. Natürlich können wir Absätze auch ausrichten. Das geschieht mit der Eigenschaft text-align. Eigenschaft text-align

Beschreibung Legt die horizontale Ausrichtung eines Textes fest.

Werte left Den Inhalt des Elements linksbündig ausrichten. right Den Inhalt des Elements rechtsbündig ausrichten. center Den Inhalt des Elements zentriert ausrichten. justify Den Inhalt des Elements als Blocksatz mit Leerzeichenausgleich ausrichten. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* rechtsbündiger Text */ text-align: right;

Bemerkung Damit diese Art der Ausrichtung von Text auch funktioniert, ist es wichtig, die Eigenschaft width zu definieren.

Natürlich können wir Text nicht nur an der horizontalen Achse, sondern auch an der vertikalen Achse des Elements ausrichten. Dafür gibt es die Eigenschaft vertical-align. Eigenschaft vertical-align

Beschreibung Legt die vertikale Ausrichtung eines Textes fest.

Werte festerWert Mit einer Zahl und einer Maßangabe wird die erste Zeile um diesen Wert eingerückt. %Wert Hier wird die erste Zeile um einen Prozentsatz der Breite des Elements eingerückt. baseline Den Inhalt mit dem unteren Rand des Elternelements ausrichten. top Den Inhalt mit dem oberen Rand des Elternelements ausrichten. middle Den Inhalt vertikal zentriert ausrichten. bottom Den Inhalt am unteren Rand ausrichten. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* zentrierter Text */ vertical-align: middle;

Bemerkung Damit die Ausrichtung von Text in der Senkrechten sauber funktioniert, sollten wir die height-Eigenschaft des Dokuments definieren.

Texte auszeichnen Um Texte zu unterstreichen oder durchzustreichen, gibt es eine Eigenschaft in CSS, nämlich text-decoration. Gerade diese Eigenschaft wird immer wieder für die a-Tags verwendet, wenn das Unterstreichen von Hyperlinks das Layout zerstört. Eigenschaft text-decoration

Beschreibung Legt die Auszeichnung eines Textes fest.

Werte none Alle Linien entfernen. underline Den Inhalt des Elements unterstreichen. overline Eine Linie oberhalb des Inhalts des Elements zeichnen. line-through Den Inhalt des Elements durchstreichen.

CSS-Version 1 und höher

Syntax-Beispiele /* unterstrichener Text */ text-decoration: underline;

Wenn es notwendig wird, die Groß-/Kleinschreibung für Texte zu ändern, müssen wir diese nicht in HTML anpassen, sondern können es mit der CSSEigenschaft text-transform tun. Eigenschaft

text-transform

Beschreibung Definiert die Schreibweise von Text.

Werte none Den Inhalt des Elements nicht verändern. capitalize Den Text als Kapitälchen[15] darstellen. lowercase Den Text in Kleinbuchstaben umwandeln. uppercase Den Text in Großbuchstaben umwandeln.

CSS-Version 1 und höher

Syntax-Beispiele /* Text in Kleinbuchstaben darstellen*/ text-transfrom: lowercase;

Damit wir nicht ein gesamtes Element einrücken müssen, können wir Texte innerhalb eines Elements vom linken Rand absetzen. Diese Einrückung steuern wir mit der Eigenschaft text-indent. Eigenschaft text-indent

Beschreibung Definiert die Einrückung der ersten Zeile eines Textes.

Werte festerWert Mit einer Zahl und einer Maßangabe wird die erste Zeile um diesen Wert eingerückt. %Wert Hier wird die erste Zeile um einen Prozentsatz der Breite des Elements eingerückt.

CSS-Version 1 und höher

Syntax-Beispiele

/* 1. Zeile des Texts um 25 Pixel einrücken */ text-indent: 25px;

Bemerkung Für diese Eigenschaften können negative Werte verwendet werden.

Eigentlich kennen wir jetzt alle Eigenschaften, um die Navigation richtig darzustellen. Probieren Sie es einfach selbst aus. Wenn Sie die Lösung nicht sofort finden, können Sie im Anhang ab Seite 262 nachschauen. Navigation mit Registerkarten AUTONUM Übung: Karteikarten Mit dieser Übung erstellen wir aus einer unsortierten Liste eine Navigation mit Karteikarten, wie in der folgenden Abbildung dargestellt. Um den Eindruck der Karteikarten beizubehalten, ist es wichtig, dass der Reiter auch wirklich mit der Fläche der Karte verbunden ist. Die inaktiven Reiter müssen hingegen leicht von der Karte abgesetzt werden, damit ein Eindruck von Tiefe entsteht. Natürlich nutzen wir auch hier wieder den hover-Effekt, um die Reiter zu animieren.

Bild 4.48  Formatierte Navigation mit Registerkarten der 11. Übung

Wie immer benötigen wir auch hier eine Datei uebung11.html und eine main11.css. Es ist jetzt sicher kein Problem mehr, sie in Eclipse anzulegen. Den Code für die HTML-Datei finden Sie im Anhang ab Seite 264.

Bild 4.49  Der unformatierte Inhalt der HTML-Datei 11. Übung

Um zur formatierten Ausgabe zu kommen, benötigen wir wieder einige CSS-Elemente und auch neue Eigenschaften. Beginnen wir wie üblich mit der Formatierung des body-Tags. /* Basisformate */

body {

margin: 25px;

background-color: #E0E0E0;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 1em;

font-weight: normal;

}

Da die Navigation auf der Webseite einmalig ist, haben wir sie in HTML mit dem Kernattribut id versehen. Wir formatieren daher auch als erstes den ul-Tag

mit der passenden ID.

/* Navigation */

ul#navigation {

float: left;

padding: 15px 5px 0px 5px;

margin: 0px;

width: 80%;

list-style: none;

border-width: 0px 0px 5px 0px;

border-style: solid;

border-color: #E99849;

}

Hier finden sich viele bekannte Eigenschaften, aber auch einige neue sind versteckt. Die erste kümmert sich um den Fluss der Elemente in HTML. Der Fluss der Elemente Normalerweise werden die Elemente in HTML nacheinander (sequenziell) dargestellt. Damit ist gemeint, dass jedes Element vom Browser identifiziert und unterhalb des vorhergehenden dargestellt wird. Mit der Eigenschaft float können wir hier eingreifen und diese Eigenart der Browser anpassen. Dadurch können wir Blockelemente nebeneinander darstellen, ohne sie fix positionieren zu müssen. Eigenschaft float

Beschreibung Legt die Art des Textflusses eines HTML-Elements fest.

Werte left Das Element steht am linken Rand. Alle folgenden Elemente werden rechts davon positioniert. right Das Element steht am rechten Rand. Alle folgenden Elemente werden links davon positioniert. none Das Element verhält sich vollständig normal in Bezug auf den Elementfluss. Mit diesem Wert kann eine Veränderung des Elementflusses aufgehoben werden. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* am rechten Rand fließen */ float: right;

Beschreibung

Elemente mit der Positionierungsmethode absolute ignorieren diese Eigenschaft.

Passend dazu gibt es die Eigenschaft

clear,

die wir später brauchen

werden. Damit können wir festlegen, auf welcher Seite solche fließenden Elemente verboten sind. Eigenschaft clear

Beschreibung Definiert, auf welcher Seite eines Elements Floating-Elemente verboten sind.

Werte left Floating-Elemente sind am linken Rand verboten. right Floating-Elemente sind am rechten Rand verboten. both Floating-Elemente sind an beiden Rändern verboten. none Floating-Elemente sind an beiden Rändern erlaubt. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* am rechten Rand sind keine Floating-Elemente erlaubt */ clear: right;

Rahmen mit CSS Danach sehen wir einige Eigenschaften mit dem Wort border. Dadurch können wir die Darstellung von Rahmen beeinflussen. Am häufigsten werden wir die Kurzversion brauchen, um alle vier Ränder gleichzeitig festzulegen. Eigenschaft

border

Beschreibung Eine Kurzversion, um alle Rahmeneigenschaften auf einmal festzulegen.

Werte border-width Dicke des Rahmens, siehe unten. border-style Art des Rahmens, siehe unten. border-color Farbe des Rahmens, siehe unten. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* einen dünnen schwarzen Rahmen rund um */ /* das Element zeichnen */ border: 1px solid #000000;

Zusätzlich können wir auch für jede Seite den Rahmen extra mit einer Kurzversion definieren. Die Attribute dazu lauten border-top, borderright, border-bottom und border-left . Die Werte für diese Eigenschaften sind gleich wie bei der vorhergehenden Eigenschaft border. Wollen wir nur den Rahmen einer einzelnen Seite verändern, müssen wir border-top-width, border-right-width, border-bottom-width oder borderleft-width verwenden.

Die Breite des Rahmens für alle vier Seiten können wir mit der Eigenschaft border-width festlegen: Eigenschaft border-width

Beschreibung Legt die Breite des Rahmens fest.

Werte thin Einen dünnen Rahmen verwenden. medium Einen Rahmen mit mittlerer Stärke verwenden. Dies ist auch der Standard. thick Einen dicken Rahmen anzeigen. festerWert Eine Zahl mit Maßangabe für den Rahmen verwenden. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* einen Rahmen mit 1 Pixel zeichnen */ border-width: 1px;

Bemerkung Bevor die Breite oder Farbe eines Rahmens verändert werden kann, muss der Rahmen definiert werden. Damit muss die Eigenschaft border-style immer vor der Breite festgelegt werden.

Bild 4.50  Beispiele für Rahmenstärken in CSS

Die Art des Rahmens für alle vier Seiten können wir mit der Eigenschaft border-style festlegen. Sie wird im nachfolgenden Absatz genauer erläutert. Wollen wir nur den Rahmen einer einzelnen Seite verändern,

müssen wir border-top-style, border-right-style, border-bottom-style oder border-left-style verwenden. Eigenschaft border-style

Beschreibung Legt die Art des Rahmens fest.

Werte dotted Einen punktierten Rahmen verwenden. dashed Einen gestrichelten Rahmen verwenden. solid Einen durchgezogenen Rahmen anzeigen. none Keinen Rahmen anzeigen. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 1 und höher

Syntax-Beispiele /* einen durchgezogenen Rahmen oben und unten zeichnen */ border-style: solid none solid none;

Bemerkung Wird der Stil auf none gesetzt und trotzdem eine Rahmenbreite angegeben, so zählt die Breite des Rahmens trotzdem zur Gesamtbreite des Elements, obwohl er nicht sichtbar ist. Bevor die Breite oder Farbe eines Rahmens verändert werden kann, muss der Rahmen definiert werden. Damit muss diese Eigenschaft immer vor der Breite und Farbe festgelegt werden.

Ist der Wert des Rahmens dotted oder dashed, sehen wir ein Hintergrundbild (falls vorhanden) an den freien Stellen des Rahmens.

Bild 4.51  Beispiele für Rahmenarten in CSS

Die Farbe des Rahmens für alle vier Seiten können wir mit nachfolgender Eigenschaft festlegen. Wollen wir nur den Rahmen einer einzelnen Seite verändern, müssen wir border-top-color, border-right-color, borderbottom-color oder border-left-color verwenden. Die Attribute werden wie folgt verwendet: Eigenschaft border-color

Beschreibung Definiert die Farbe eines Rahmens.

Werte name Eine benannte Farbe. RGB Ein mit der Funktion rgb() erstellter RGB-Wert. Hex Ein hexadezimaler Wert. transparent Der Rahmen wird durchsichtig angezeigt, nimmt aber den mit der Breite definierten Platz ein. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version

1 und höher

Syntax-Beispiele /* vier verschiedene Beispiele, um einen roten Rahmen */ /* um ein Element zu zeichnen */ border-color: red; border-color: rgb(255, 0, 0); border-color: #FF0000; border-color: #F00;

Bemerkung Bevor die Breite oder Farbe eines Rahmens verändert werden kann, muss die Rahmenart definiert werden. Damit muss die Eigenschaft border-style immer vor der Farbe festgelegt werden.

Wird die Farbe auf transparent gesetzt, so zählt die Rahmenbreite trotzdem zur Gesamtbreite des Elements, obwohl der Rahmen nicht sichtbar ist.

Nun sehen wir im Browser bereits die geänderte Formatierung.

Bild 4.52  Die Datei der 11. Übung mit formatiertem ul-Tag

Semantik mit HTML und CSS Nun müssen wir die li-Tags nebeneinander darstellen, damit sie wie die Reiter einer Karteikarte wirken. Es ist aus Gründen der Semantik nötig, die Reiter in HTML als unsortierte Liste auszuführen. Denn diese Reiter sind ja eigentlich eine Gruppierung, und diese wird in HTML am besten mit liTags abgebildet. Dadurch ist für uns die Zusammengehörigkeit der Elemente klar ersichtlich. Was aber noch viel wichtiger ist: Auch Computer und nicht zuletzt Suchmaschinen können dadurch die Bedeutung erfassen. Idealerweise vergeben wir auch einen sprechenden Wert für das id-Attribut. Natürlich können wir auch »Reiter« oder »Karte« oder ein anderes beliebiges Wort für die Identifikation des ul-Tags verwenden. Aber auch hier ist die Bezeichnung »Navigation« ideal. Einerseits sehen wir sofort, um welche Art von Gruppierung bzw. Liste es sich handelt. Andererseits können Suchmaschinen oder Computer die Bedeutung der folgenden liTags erkennen. Zuerst waren diese Elemente nur einfache Texte in einer Liste. Mit der »eingebauten« Semantik haben wir es nun aber geschafft, eine maschinenlesbare Semantik zu integrieren. ul#navigation li {

float: left;

padding: 5px 5px 0px 5px;

margin: 0px 5px 0px 5px;

color: #020F34;

font-family: Arial, Helvetica, sans-serif;

font-weight: normal;

letter-spacing: 0.1em;

}

In diesem Teil des Codes sind keine echten Neuheiten für uns versteckt. Wenn wir die Webseite jetzt aufrufen, stehen die li-Tags aufgrund der float-Eigenschaft schon nebeneinander.

Bild 4.53  Die Datei der 11. Übung mit formatiertem li-Tag

Als Nächstes passen wir den aktiven Reiter an. Damit geben wir dem Benutzer eine bessere Bedienbarkeit an die Hand, da er sofort erkennt, welcher Bereich momentan angezeigt wird. ul#navigation li.aktiv {

padding: 5px 15px 5px 15px;

margin: 0px;

background-color: #E99849;

color: #FFFFFF;

font-weight: bold;

font-style: italic;

}

Bild 4.54  Die Datei der 11. Übung mit formatiertem aktivem li-Tag

Langsam nimmt unsere Webseite das Aussehen einer Kartei an. Nur die formatierten a-Tags stören das Bild noch ein wenig. Natürlich nutzen wir auch das hover-Element, um dem Benutzer ein Feedback zu den Möglichkeiten der Webseite zu geben. In den folgenden beiden Formatierungen ist nichts Besonderes versteckt. Wir benutzen die uns bereits bekannten Eigenschaften einfach in einer neuen Kombination. ul#navigation a {

padding: 5px 15px 5px 15px;

margin: 0px;

background-color: #999999;

color: #333333;

text-decoration: none;

}

ul#navigation a:hover {

background-color: #E99849;

border-bottom: 1px solid #E99849;

}

Bild 4.55  Die Datei der 11. Übung mit formatiertem a-Tag

Jetzt sehen wir auch die einzelnen inaktiven Reiter. Nun fehlt nur noch die Karteikarte unterhalb des Reiters selbst. Diese haben wir in HTML im divTag untergebracht. Gleichzeitig können wir auch den p-Tag innerhalb der Karteikarten formatieren. Denn wir haben bereits Texte innerhalb der Tags geschrieben. Wir verwenden die Methode der »abhängigen Elemente«, wie wir sie weiter oben kennengelernt haben. Damit stellen wir sicher, dass nur die Absätze innerhalb der Karteikarte ein besonderes Format haben. div.content {

clear: both;

padding: 5px 5px 10px 5px;

margin: 0px;

width: 80%;

height: 400px;

background-color: #E99849;

}

div.content p {

line-height: 1.5em;

font-size: 0.9em;

letter-spacing: 0.05em;

}

Damit ist unser Layout abgeschlossen, so wie es am Anfang dieses Abschnitts präsentiert wurde. Um die Metapher der Registerkarten richtig darzustellen, ist es wichtig, dass der aktive Reiter mit der Fläche der Karteikarte in Verbindung steht, sonst hat der Anwender den Eindruck von Knöpfen statt von Reitern. Die inaktiven Reiter müssen aber von der Karteikarte abgesetzt werden. Dies erreichen wir mit der feinen Linie am unteren Rand der dunkelgrauen Reiter. Metaphern im Layout müssen richtig umgesetzt werden, damit sie eine Erleichterung für den Anwender bieten. Registerkarten mit abgerundeten Ecken Bis jetzt haben wir die Navigation und abgerundete Ecken kennengelernt. Leider haben wir gerade bei den runden Ecken das Problem, dass sie nicht mit allen Browsern kompatibel sind. Daher müssen wir hier mit einem Trick arbeiten, genauer gesagt mit Hintergrundgrafiken. Dadurch zeigen auch Browser, die den CSS3-Standard noch nicht komplett umsetzen, die Ecken richtig an. AUTONUM Übung: Runde Ecken für alle Browser Wir benötigen eine Datei uebung12.html und eine main12.css. Dies ist jetzt sicher kein Problem mehr. Den Code für die HTML- und CSS-Datei finden Sie im Anhang. Zusätzlich brauchen wir im Verzeichnis images/ die Dateien navBack.png, reiterLinks.png und reiterRechts.png.

Nun können wir die unten gezeigte Formatierung erzeugen. Der einzige Trick sind die etwas komplizierteren Anmerkungszeilen am Ende der CSSDatei. Diese verstecken die CSS-Definition vor inkompatiblen Browsern und sind einfach so zu verwenden. Ansonsten sind hier keine Besonderheiten versteckt, sondern es werden nur bekannte Eigenschaften angewendet.

Bild 4.56  Formatierte Navigation mit Karteikarten der 12. Übung

Werfen wir nun noch einen kurzen Blick auf diese sogenannten Hacks. Sie sind auch unter dem Begriff »History Hack« bekannt, denn sie hindern manche Browserversionen daran, die definierten Stile zu interpretieren. /*\*//*/

#navigation ul li a {

display: inline-block;

white-space: nowrap;

width: 1px;

}

#navigation ul {

padding-bottom: 0px;

margin-bottom: -1px;

}

/**/

Wir sehen in diesem Beispiel eine Folge von Kommentarkennzeichen am Anfang und am Ende des Codes. Sie verhindern, dass alle Browser außer dem Internet Explorer der Version 5 diese Definition verwenden. Sie gelten also nur für eine veraltete Version des Browsers. Aber wir können uns nie sicher sein, dass nicht manche Benutzer noch diese Version verwenden. /*\*/

* html #navigation ul li a {

padding: 0px;

}

/**/

Diese beiden Kommentarzeilen stellen genau die Umkehrung der vorherigen dar. Diese Definition wird daher von allen gängigen Browsern außer dem Internet Explorer 5 angewendet. Bei diesem Trick müssen wir noch zusätzlich den html-Tag verwenden. Grundsätzlich ist dieser Tag eigentlich nicht formatierbar, da er ja den Anfang und das Ende einer HTML-Datei markiert und erst der Kind-Tag body den Bereich für die Ausgabe im Browser festlegt. Da dieser Hack aber nicht »normal« mit dem Document Object Model umgeht, müssen wir diesen Basis-Tag ausnahmsweise verwenden.

4.7  Layout Zweispaltiges Layout ohne Tabellen Immer wieder benötigen wir ein mehrspaltiges Layout, auch MagazinLayout genannt. Dies lässt sich mit ein paar CSS-Definition und dem Wissen aus der 8. Übung sehr leicht realisieren. AUTONUM Übung: Zweispaltiges Layout Wir benötigen eine Datei uebung13.html und eine Datei main13.css. Diese anzulegen, ist jetzt sicher kein Problem mehr. Den Code für die HTMLDatei finden Sie im Anhang ab Seite 269. Danach erstellen wir die CSSDatei. Diesmal gehen wir aber nur auf die »Spezialfälle« ein. Die gesamte Datei ist ab Seite 270 zu finden. Wir benutzen die beiden Gummibärchenabsätze aus der 8. Übung, um nicht alles eintippen zu müssen. Aber kopieren Sie nur die Überschriften und die p-Tags, denn Rest müssen wir selbst erstellen. Sobald unser CSS fertig ist, sollte die Ausgabe wie in der folgenden Abbildung aussehen.

Bild 4.57  Zweispaltiges, flexibles Layout der 13. Übung

Der Kopf der CSS-Datei ist für uns nichts Besonderes mehr. /*

Funktion: css-Datei fuer uebung13.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #F0F0F0;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 1em;

font-weight: normal;

}

p {

...

Die Überschriften stellen sicher kein Problem mehr dar. Falls doch, müssen wir einfach ein paar Seiten zurückblättern und die 8. Übung nochmal durcharbeiten. Uns interessiert hier in erster Linie das zweispaltige Layout. Wenn wir uns die nächste Abbildung ansehen, wird der Aufbau der Seite

gleich viel klarer, denn diesmal sind die einzelnen div-Tags durch unterschiedliche Farben hervorgehoben.

Bild 4.58  Darstellung der div-Tags in der 13. Übung

Wir sehen, dass ein umlaufender div-Tag (#content) die beiden Spalten umschließt. Diese Spalten sind wieder in zwei div-Tags (#sp_links [linke Spalte] und #sp_rechts [rechte Spalte]) aufgeteilt. Innerhalb jedes Spaltendiv-Tags

ist dann wieder je ein div-Tag (heller und dunkler) mit dem eigentlichen Inhalt der Spalte angesiedelt. Diese Verschachtelung ist zwar kompliziert, aber trotzdem notwendig. Denn damit vermeiden wir Probleme mit der Darstellung des Box-Modells bei den verschiedenen Browsertypen. Zusätzlich sind die Darstellung des Spalteninhalts und das Positionieren der

beiden Spalten mit dieser Methode viel einfacher für uns. Kümmern wir uns also um den umgebenden div-Tag. /* div für Inhaltsbereich */

#content {

width: 90%;

margin: 1em auto;

text-align: left;

max-width: 1024px;

}

Die Breite beschränken wir auf 90 % des Viewports. Mit der Angabe auto bei der Eigenschaft margin schaffen wir es, die Spalten innerhalb des Viewports zu zentrieren. Damit aber unser Layout bei großen Bildschirmbreiten nicht komplett durcheinander gerät, benötigen wir eine neue Eigenschaft, mit der wir die Breite auch begrenzen können. Sie heißt max-width. Eigenschaft max-width

Beschreibung Legt die maximale Breite eines Elements fest.

Werte festerWert Eine Zahl mit Maßangabe. %Satz Eine Prozentzahl, die auf Basis des Elternelements berechnet wird. none Keine maximale Breite ist vorgegeben. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 2 und höher

Syntax-Beispiele /* eine maximale Breite von 1000 Pixel */ max-width: 1000px;

Bemerkung Diese Eigenschaft schließt die Werte für padding, margin und border nicht ein.

Nun können wir uns um die linke Spalte kümmern. Das erste Element definiert den umgebenden div-Tag für diese Spalte. Danach definieren wir den inneren Bereich und dessen Formatierung. Im dritten Element legen wir eine spezielle Formatierung für den p-Tag fest. /* linke Spalte (Seitenleiste) */

#sp_links {

float: left;

width: 20%;

margin: 0px 0px 0px 0px;

padding: 0px 10px 0px 0px;

border-right: 1px dotted #000066;

}

#sp_links_content {

margin: 0px;

padding: 0.5em 1em;

font-size: 70%;

text-align: justify;

}

#sp_links_content p {

line-height: 1.25em;

}

Nun folgt der Bereich für die rechte Spalte. Auch hier kennen wir schon alle Eigenschaften. Wir nutzen aber die Möglichkeit, für den margin negative Werte eingeben zu können, um die richtige Position der Spalte zu definieren. Das ist auch ein Grund, warum wir zwei verschachtelte div-Tags verwenden, denn wir können den inneren Tag mit negativen Werten positionieren, ohne die linke Spalte zu verändern. Denn für HTML sind nur die äußeren beiden Spalten-Tags für die Darstellung des Elementflusses relevant. Die inneren werden hier nicht berücksichtigt. * rechte Spalte (Inhalt) */

#sp_rechts {

margin: -5px 0px 0px 20%;

padding: 0px 0px 0px 10px;

}

#sp_rechts_content {

margin: 0px;

padding: 0.5em 1em;

font-size: 100%;

}

#sp_rechts_content p {

padding-left: 15px;

line-height: 1.5em;

}

Der Trick mit dem Elementfluss Da wir mit dem Spaltenlayout den Fluss der Elemente in HTML »durcheinandergebracht« haben, müssen wir ihn jetzt wieder richtig stellen. Dazu wird im Webdesign gerne ein »Clean-Tag« bzw. »Reset-Tag« verwendet. Das ist nichts anderes als ein speziell formatierter div-Tag. Er wird als leerer Tag eingeschoben, um die float- und clear-Eigenschaft zurückzusetzen. Hier taucht auch zum ersten Mal die Eigenschaft visibility auf. Eigenschaft visibility

Beschreibung Legt die Sichtbarkeit eines Elements fest.

Werte visible Das Element ist sichtbar. hidden Das Element ist unsichtbar, behält aber den verbrauchten Platz auf der Seite (es wird also eine leere Fläche dargestellt). inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 2 und höher

Syntax-Beispiele /* Das Element verstecken */ visibility: hidden;

Beschreibung Im Gegensatz zur Eigenschaft display wird das Element nur ausgeblendet, aber der notwendige Platz des Elements nicht freigegeben.

Nun können wir das Format für diesen speziellen Tag definieren. /* Cleanformat */

div.cleaner {

clear: both;

float: none;

height: 1px;

margin: 0px;

padding: 0px;

border: none;

visibility: hidden;

}

Als Letztes müssen wir nur noch die Fußzeile formatieren. Indem wir die Überschrift und die Fußzeile ober- bzw. unterhalb der Spalten, aber innerhalb des div-Tags setzen, ersparen wir uns viel Positionierungsarbeit. Denn die beiden Elemente sind richtig ins Layout eingefügt und haben auch als Breite den richtigen Wert von 90 % des umgebenden Tags. Bei der folgenden Formatierung sehen wir auch wieder schon das Box-Modell[16]. Denn der obere Rahmen wird zwischen der margin- und der paddingEigenschaft eingefügt. Dadurch erreichen wir einen Abstand zu den Spalten und auch einen zusätzlichen Freiraum zwischen Linie und Text der Fußzeile. /* Fusszeile */

div.footer {

margin-top: 10px;

padding-top: 5px;

width: 100%;

font-size: 0.7em;

color: #909090;

text-align: center;

border-top: 1px solid #E0E0E0;

}

Eine vertikale Galerie Immer wieder benötigen wir eine kreative Darstellung von Bildern. Aber wir wollen dafür nicht mit JavaScript und/oder PHP zu programmieren beginnen. Eine Bildergalerie mit ein wenig Benutzerinteraktion lässt sich auch sehr leicht mit reinem CSS erstellen.

Bild 4.59  Ansicht der Galerie der 13. Übung

AUTONUM Übung: Senkrechte Galerie Wir benötigen eine Datei namens uebung14.html und eine main14.css. Das ist jetzt sicher kein Problem mehr. Den Code für die HTML-Datei finden Sie im Anhang ab Seite 273. Danach erstellen wir die CSS-Datei. Zum Schluss müssen wir uns noch die Bilder paris01.jpg bis paris07.jpg und win_back.png aus dem Verzeichnis angaben/ in das Verzeichnis images/ kopieren. Natürlich beginnen wir in der CSS-Datei wieder mit einem Standardblock. /*

Funktion: css-Datei fuer uebung14.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #F0F0F0;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1em;

color: #000090;

font-weight: normal;

}

/* Ueberschriften */

h1 {

width: 90%;

padding: 0px 0px 20px 69px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

}

/* Liste und Inhalt */

ul {

text-align: center;

}

Nun können wir gleich mit der Definition für die Galerie beginnen. Hier definieren wir nur die Eckdaten für den ul-Tag, damit dieser korrekt

angezeigt wird. Die Höhe und Breite des Tags müssen wir natürlich den Werten der Bilder entsprechend anpassen. Natürlich sollten alle Bilder gleich groß sein, damit keine hässlichen Lücken oder Verzerrungen bei den angezeigten Fotos entstehen. /* Galerie */

#galerie {

padding: 0;

margin: 0;

list-style-type: none;

overflow: hidden;

width: 373px;

height: 436px;

border: 1px solid #FFFFFF;

background-color: #647B9D;

}

Nun definieren wir ein einzelnes List-Item innerhalb der Liste. Damit wir eine Trennung zwischen den einzelnen Bildern erhalten und später nur ein dünner Streifen des Bildes angezeigt wird, definieren wir die entsprechenden Eigenschaften. #galerie li {

float: left;

border-bottom: 1px solid #888888;

overflow: hidden;

}

Hier taucht eine neue Eigenschaft auf, nämlich overflow. Eigenschaft overflow

Beschreibung Definiert, wie mit dem Inhalt des Elements verfahren wird, falls nicht genug Platz für die Anzeige vorhanden ist.

Werte visible Der Inhalt ist sichtbar und die Höhe/Breite des Elements wird nicht berücksichtigt. hidden Der Inhalt ist teilweise sichtbar. Er wird mit der Höhe/Breite des Elements beschnitten.

scroll Der Inhalt ist teilweise sichtbar. Er wird mit der Höhe/Breite des Elements beschnitten und die passenden Rollbalken werden hinzugefügt. auto Der Inhalt ist teilweise sichtbar. Er wird mit der Höhe/Breite des Elements beschnitten und die passenden Rollbalken sollten hinzugefügt werden. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 2 und höher

Syntax-Beispiele /* Den Inhalt des Elements beschneiden */ overflow: hidden;

Damit wir dem Anwender etwas Interaktivität bieten können, benötigen wir einen passenden Tag. In unserem Fall verwenden wir den a-Tag und die passende Pseudoeigenschaft. Diesen formatieren wir ebenfalls mit CSS. Da wir die Formatierung nur für die Galerie anwenden wollen und sich nicht unsere ganze Seite verändern soll, definieren wir das CSS mit den passenden Kontext-Selektoren. #galerie li a {

display: block;

height: 30px;

width: 373px;

float: left;

text-decoration: none;

border-bottom:1px solid #fff;

cursor: default;

}

#galerie li a:hover {

background: #EEE;

height: 250px;

}

Hier verwenden wir wieder eine neue Eigenschaft, nämlich cursor. Sie wird wie folgt verwendet: Eigenschaft cursor

Beschreibung Definiert die Darstellung des Mauszeigers, wenn er auf dieses Element zeigt.

Werte auto Der Browser legt die Cursorart fest. pointer Zeigt eine Hand an. default Der Standardzeiger. wait Zeigt eine Sanduhr an. inherit Verwende (erbe) die passende Eigenschaft vom Elternelement.

CSS-Version 2 und höher

Syntax-Beispiele /* Den Mauszeiger als Hand darstellen */ cursor: pointer;

Nun müssen wir nur noch die Darstellung eines Bildes innerhalb des a-Tags festlegen. Bei dieser Formatierung geht es aber nur noch um Feinheiten wie die Breite eines Bildes und darum, wie es reagiert, wenn der Benutzer mit der Maus darauf zeigt. #galerie li a img {

width: 373px;

border: 0px;

}

#galerie li a:hover img {

height: 250px;

}

Die Pseudoeigenschaft :hover enthält den Trick bei dieser Formatierung. Denn alle Elemente, die die Bilder darstellen, haben eine sehr geringe Höhe von 30px, obwohl die Fotos selbst viel größer sind.

Sobald der Anwender nun mit der Maus über ein Element fährt, werden Pseudoeigenschaften aktiv. Und diese haben die »richtige« Höhe für das Bild definiert. Dadurch zeigt der Browser das gesamte Bild an. Ein flexibles Layout Weiter oben haben wir bereits das feste Layout kennengelernt. Das hat natürlich den Vorteil, dass wir alles sehr genau positionieren und bestimmen können. Ein flexibles Layout passt sich aber der Größe des Viewports an. Dadurch haben wir zwar den Vorteil der besseren Ausnutzung des Bildschirms, das Layout selbst gestaltet sich aber etwas schwieriger. Bei dieser Art des Layouts müssen wir mit Prozentangaben statt den gewohnten Pixelwerten arbeiten. AUTONUM Übung: Flexibles Layout Wir benötigen eine Datei uebung15.html und eine main15.css. Das ist jetzt sicher kein Problem mehr. Den Code für die HTML-Datei finden Sie im Anhang ab Seite 277. Danach erstellen wir die CSS-Datei. Natürlich beginnen wir in der CSS-Datei wieder mit einem Standardblock. Danach definieren wir die drei Überschriftsebenen.

Bild 4.60  Das Layout der 15. Übung

...

/* Ueberschriften */

h1 {

float: right;

margin: 0px 0px 0px 0px;

padding: 5px 15px 15px 15px;

background-color: #A8692D;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

-moz-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

font-weight: normal;

font-size: 2.5em;

color: #F0DB9C;

}

h2 {

padding: 30px 0px 0px 0px;

margin: 0px;

font-family: Arial, Helvetica, sans-serif;

font-weight: normal;

font-size: 2.2em;

letter-spacing: 0.1em;

color: #A8692D;

}

h3 {

padding: 0px;

margin: 0px;

font-weight: normal;

font-size: 1.6em;

color: #A8692D;

}

...

In diesem Teil der CSS-Formate ist nur im h1-Tag eine Besonderheit zu beachten: Wir nutzen diesen Tag als Label! Wie wir in der obigen Abbildung sehen, ist rechts oben ein Marker mit dem Eintrag »Layouts?« eingebaut. Dies ist unsere Überschrift 1. Mit der Eigenschaft float: right können wir sie dort positionieren. Der Rest sind Standard-Definitionen. Die folgenden Formate für die einzelnen div-Tags sind ähnlich wie die Formate im Abschnitt »Zweispaltiges Layout ohne Tabellen«. Die einzige Änderung ist das Verwenden von Prozentwerten. Als kleiner Tipp sollten

wir noch GridFox zum Ausrichten der Layer einsetzen. Gerade durch die Linien sehen wir sehr gut, ob sich die einzelnen Ebenen auf einer Horizontalen befinden.

4.8  Bilder formatieren Sobald wir Fotos auf einer Webseite zeigen wollen, müssen wir sie ansprechend darstellen. Dazu haben wir mehrere Möglichkeiten. Wir beginnen zuerst mit einer Art Formatierung, wie sie die CSS-Version 3 nutzt, dafür aber ohne Hintergrundgrafiken auskommt. Bilder im Polaroid-Stil AUTONUM Übung: Bilder mit Rahmen und Titeln Mit dieser Übung erstellen wir eine einfache Galerie, in der die Bilder mit einem Rahmen und Titel versehen werden. Dazu benötigen wir wieder die »Paris-Bilder« der vorhergehenden Übung und eine Datei uebung16.html und eine main16.css. Den Code für die HTML-Datei finden Sie im Anhang ab Seite 280. Danach erstellen wir die CSS-Datei. Die Bilder paris01.jpg bis paris07.jpg haben wir ja bereits im richtigen Verzeichnis stehen.

Bild 4.61  Die Darstellung der Galerie der 16. Übung

Natürlich beginnen wir in der CSS-Datei wieder mit einem Standardblock für die Basisformate. Gleichzeitig definieren wir die Breite der Galerie. /*

Funktion: css-Datei fuer uebung15.html

Erstellt: 01-10-2009 12: 11: 00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #C0C0C0;

font-family: "Comic Sans MS", Georgia, Ä

"Times New Roman", Times, serif;

font-size: 1em;

color: #000099;

font-weight: normal;

}

/* Überschriften */

h1 {

width: 90%;

padding: 0px 20px 20px 20px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

}

/* Galerie */

div#gallery {

width: 500px;

}

Nun sehen wir bereits die Bilder und die Titel untereinander dargestellt. Denn der umgebende div-Tag legt die Breite mit maximal 500px fest.

Bild 4.62  Die Bilder in der Galerie der 16. Übung

Jetzt formatieren wir die Klasse polaroid, um der Galerie ein wenig Form zu geben. In dieser Formatierung ist eigentlich nichts Spezielles versteckt. Wir nutzen nur das Wissen aus den vorherigen Kapiteln über die Positionierung, die Ränder und die Hintergrundfarben. Die verwendete float-Eigenschaft benötigen wir, damit die Bilder mit der nächsten Formatierung elegant nebeneinander dargestellt werden. /* Formatierung für die Bilder */

div.polaroid {

float: left;

background-color: #FFFFFF;

margin-left: 10px;

margin-bottom: 13px;

padding: 10px;

border: 1px solid #333333;

border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

font-size: 0.8em;

font-style: italic;

text-align: center;

}

Bild 4.63  Die Bilder mit Rahmen in der Galerie der 16. Übung

Als Letztes nutzen wir die Möglichkeit des Kontext-Selektors, um die Bilder zu definieren. Wenn wir hier die Eigenschaft width nutzen, können wir die Fotos proportional kleinerrechnen. Gleichzeitig definieren wir den img-Tag mit der Eigenschaft display als Block-Element. Damit wirkt sich

die Eigenschaft float aus der vorhergehenden Definition aus und wir haben die Galerie so dargestellt, wie wir es uns wünschen. Denn jetzt wird auch der Titel automatisch unter dem Bild dargestellt. Eine kreative Bilddarstellung Da wir im vorherigen Beispiel eine CSS-Version verwendet haben, die noch nicht von alle Browsern benutzt werden kann, versuchen wir es diesmal mit einer Darstellung für alle gängigen Browser. AUTONUM Übung: Bilder im Fotoalbum-Stil Mit dieser Übung erstellen wir eine einfache Galerie, in der die Bilder mit einem Rahmen und Titel versehen werden. Dazu benötigen wir wieder die ersten beiden Paris-Bilder der vorhergehenden Übung, die Datei bildBack.png im Verzeichnis /images, eine Datei uebung17.html und eine main17.css. Den Code für die HTMLDatei finden Sie im Anhang ab Seite 283. Danach erstellen wir die CSSDatei. Die Bilder paris01.jpg und paris02.jpg haben wir ja bereits im richtigen Verzeichnis stehen.

Bild 4.64  Bilder mit Rahmen und Beschriftung der 17. Übung

Wie üblich beginnen wir mit dem Code-Block am Anfang der CSS-Datei und definieren dadurch den body , h1 und die beiden p-Tags. p {

padding-top: 7px;

margin-bottom: 5px;

margin-top: 0px;

}

p + p {

padding-top: 5px;

margin-bottom: 5px;

margin-top: 0px;

}

Die Formatierungen für die Absätze benötigen wir nur, damit die Ausrichtung der oberen Ränder der beiden Elemente (p und dl-Tag) gleich ist. Die Ausrichtung lässt sich sehr einfach durch das Firefox-Add-On GridFox überprüfen. Da wir zwei aufeinanderfolgende Absätze verwenden, können wir hier mit dem Geschwister-Selektor arbeiten.

Bild 4.65  Überprüfen der vertikalen Ausrichtung mit GridFox

Nun definieren wir einen div-Tag für die Darstellung der Galerie. Und darauf folgt sofort die Definition des dl-Tags. Dieses Format besitzt keine Geheimnisse mehr für uns. Nun formatieren wir auch die beiden inliegenden Elemente, indem wir Formate für den dd- und dt-Tag festlegen. Hier sehen wir, dass wir die Beschriftung des dd-Elements mit einem negativen Wert für margin-top in das Bild hineinrücken. dd {

font-size: 0.8em;

text-align: right;

color: #F0F090;

margin: -29px 10px 5px 0px;

font-style: italic;

}

dt {

padding-top: 10px;

}

Als letztes definieren wir das Aussehen des Bildes mit einem KontextSelektor. Besonders interessant ist die Überlegung hinter der backgroundEigenschaft. Sobald wir die Hintergrundgrafik betrachten, sehen wir, dass sie viel größer als das Bild ist. Sie hat eine Breite von 700 und eine Höhe von 900 Pixeln. Wenn wir sie sehr genau anschauen, sehen wir auch, dass nur das rechte

untere Eck und die von diesem Eck ausgehenden Linien vorhanden sind, der Rest ist eine weiße Fläche. Dies hat den Grund, dass auch größere Bilder einen Rahmen erhalten können. Für die kleineren Bilder verschieben wir die Grafik im Hintergrund einfach an die passende Stelle. Und diese wird durch das rechte untere Eck bestimmt. Denn jetzt zeigt der Browser den passenden Abschnitt der Hintergrundgrafik an. Der Teil des Hintergrundbilds, der zu groß ist, wird links und oben einfach abgeschnitten. Wir sehen das sehr gut in der folgenden Abbildung. Hinter dem Bild liegt im hellen Bereich der Rahmen für das Foto, der links und oben hinter dem Bild hervorragt. Der dunkler umrandete Bereich ist der vom Browser wirklich angezeigte Layer.

Bild 4.66  Darstellung der Layer für die Fotoecke

Sobald der Anwender diese aufgebogene Ecke und die davon ausgehenden Linien sieht, nimmt er an, dass es sich um ein Foto handelt. Das erreichen

wir mit dem Wert bottom right für die Eigenschaft background-position . Die padding-Werte sind nur für die richtige Position des Bildes zuständig. Denn damit überdeckt das Bild den Rahmen nicht mehr. dt img {

display: block;

width: 175px;

background: transparent url("../images/bildBack.png") Ä

bottom right no-repeat;

padding: 0px 4px 10px 0px;

}

4.9  Besondere Formate Zitate formatieren Ab und zu treffen wir auch auf Formatierungen, die nicht alltäglich sind. Dazu gehören auch die Zitate. Diese Art der Formatierung lässt sich zum Beispiel sehr gut für die Kommentare in einem Blog verwenden. AUTONUM Übung: Zitate Dazu benötigen wir die Datei blockquote.png im Verzeichnis /images, eine Datei uebung18.html und eine main18.css. Den Code für die HTML-Datei finden Sie im Anhang ab Seite 286. Sie enthält nichts Besonderers außer der Darstellung von zwei Absätzen des »Gummibärchen-Textes«, den wir mit dem blockquote-Tag als Zitat ausgezeichnet haben. Danach erstellen wir die CSS-Datei.

Bild 4.67  Das formatierte Zitat aus der 18. Übung

Wie üblich beginnen wir mit dem Code-Block am Anfang der CSS-Datei – und definieren dadurch den body –, dem div -Layer für den Inhalt, dem h1Tag und dem p-Tag für die Absätze. Als Nächstes folgen die Formatierungen für den blockquote-Tag, den in ihm enthaltenen Absatz und für den cite-Tag.

Da wir beim blockquote-Tag die Textausrichtung mit text-align: right definiert haben und mit dem Kontext-Selektor die Ausrichtung eines Absatzes mit text-align: left festgelegt haben, passiert Folgendes: Der Text des Zitats wird durch die Absatzformatierung links ausgerichtet. Alle anderen Texte, in unserem Fall der cite-Tag, werden am rechten Rand des Elements ausgerichtet. Eine semantisch richtige Visitenkarte Die Semantik[17] wird im Web immer wichtiger. Denn die Suchmaschinen oder andere Computer versuchen immer stärker vom maschinenlesbaren Inhalt logische Rückschlüsse auf die Bedeutung des Inhaltes zu ziehen. Damit können diese Programme dem Anwender bessere, genauere oder auch nur plausibere Suchresultate präsentieren. Natürlich müssen wir die Maschinen dabei unterstützen. Und das geht am Besten, wenn wir unsere HTML/CSS-Daten semantisch richtig auszeichnen. Wir haben das schon weiter oben einmal gemacht. Aber diesmal werden wir eine Adresse (besser die Daten einer Visitenkarte) semantisch richtig schreiben und auch gleichzeitig formatieren. In der Fachsprache nennen wir diese Art der Auszeichnung auch Mikroformate[18] , die für verschiedene Arten von Daten existieren. Der ganze Trick bei dieser Art der Formatierung ist das Kernattribut class bei den einzelnen Tags. Hier sind verschiedene Klassennamen vorgeschrieben, damit es als Mikroformat gültig wird. Schauen wir uns zum besseren Verständnis eine Visitenkarte einer Webagentur in der Praxis an. AUTONUM Übung: Visitenkarte Dazu benötigen wir die Datei guru_r.png (die bereits im images-Verzeichnis steht), eine Datei uebung19.html und eine main19.css. Den Code für die HTML-Datei finden Sie im Anhang ab Seite 289. Am Anfang formatieren

wir die HTML-Datei wie gewohnt. Danach folgen die einzelnen Definitionen für die Visitenkarte und die enthaltenen Klassen.

Bild 4.68  Die formatierte Visitenkarte der 19. Übung

Wir beginnen mit der Visitenkarte selbst. Hier versuchen wir die Visitenkarten-Metapher so gut wie möglich in den Browser zu übertragen. /* Visitenkarte */

div.vcard {

width: 500px;

height: 280px;

background: #84CBDB url(../images/guru_r.png) 15px 10px Ä

no-repeat;

border-radius: 4px;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

}

div.vcard address {

padding: 30px 20px 30px 100px;

color: #687221;

font-family: Verdana, "MS Sans Serif", sans-serif;

font-weight: normal;

font-style: normal;

font-size: .8em;

}

...

Damit nicht der gesamte Text entlang einer Fluchtlinie ausgerichtet ist, definieren wir alle Tags mit einem linken Abstand von 120 Pixeln. Nur der Organisationsname hat einen Abstand von 50 Pixeln. Für den Firmennamen verwenden wir aber die Eigenschaft padding . Denn durch das Box-Modell können wir jetzt am unteren Rand des Elements eine Linie ziehen, die länger als der Name ist. Ein kleiner Trick ist in der Definition von address .fn (für den Namen) und .tel (für die Telefonnummer) versteckt. Denn die Werte für margin werden von den meisten Browsern nur bei Blockelementen erkannt. Daher verwenden wir hier die Eigenschaft display: inline-block . Damit wird das Element zwar als Block angezeigt, aber innerhalb des Textes. Somit erzeugt der Browser keinen Umbruch vor und/oder nach dem Element. Als letzten Schritt machen wir uns das Leben noch ein wenig leichter. Wir nutzen das Pseudoelement :before . Da wir nicht bei allen Daten die Bezeichnung in HTML schreiben wollen, können wir es auch mit CSS erledigen. ...

address .cell:before {

content: "mobile: ";

}

address .email:before {

content: "eMail: ";

}

address .url:before {

content: "web: ";

}

...

Damit haben wir unsere Visitenkarte erzeugt. Aber wie können wir sie jetzt nutzen? Sobald wir uns im Firefox ein Add-On namens »Tail Export« installieren, sehen wir den Vorteil. Nach einem Klick auf das Symbol in der

Statusleiste erhalten wir im Browser eine Seitenleiste, mit der wir die Visitenkarte ohne jeden Aufwand in unser Adressbuch übernehmen können.

Bild 4.69  Die exportierbare Visitenkarte im Browser

4.10  Formatierungen mit CSS 3 Wir haben ja bereits in den vorherigen Abschnitten einige Formatierungen verwendet, die der CSS-Version 3 entstammen. In diesem Abschnitt werden wir uns aber ausschließlich mit diesem Thema beschäftigen. Das Problem dieser Art der CSS-Formatierung ist die noch nicht vollständige Unterstützung durch die Browser. Meistens ist das aber nicht sehr problematisch, denn unbekannte CSS-Attribute werden normalerweise von den Browsern ignoriert. Natürlich sind in CSS 3 mehr Eigenschaften hinzugekommen, als ich hier beschreiben kann. Ich werde mich hier auf die beschränken, die schon von den meisten Browsern unterstützt werden.

Schatteneffekte AUTONUM Übung: Schatten bei Bildern Dazu benötigen wir die Dateien paris01.jpg bis paris03.jpg, die bereits im Verzeichnis /images gespeichert sind. Zusätzlich müssen wir wieder eine Datei uebung20.html und eine Datei main20.css anlegen. Den vollständigen Code für die beiden Dateien finden Sie im Anhang ab Seite 292. Zuerst benötigen wir im HTML-Code die entsprechenden div-Tags, um die Bilder und die Formatierungen entsprechend darstellen zu können. ...

...



...






...

...

Sobald wir die CSS-Datei entsprechend aufgebaut haben, werden wir das folgende Resultat vor uns sehen.

Bild 4.70  Die verschiedenen formatierten Bilder der 20. Übung

Nun können wir uns an die ersten Formate wagen. Hier nutzen wir erstmals die Möglichkeit, mehrere Klassen auf ein Element anzuwenden. Da wir Bilder mit und ohne Rahmen darstellen wollen, definieren wir zuerst eine Klasse, die nur den Rahmen formatiert. Auch diese Klasse enthält bereits CSS 3 für die Rundungen. Diese haben wir bereits im Abschnitt über »runde« Ecken erzeugen kennengelernt. Die Anwendung haben wir bereits im HTML-Code gesehen: Wir können beim Attribut class mehrere Klassen durch Leerzeichen getrennt angeben. .rahmen {

border: 1px solid #3333CC;

border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

}

Nun formatieren wir die Klassen für den Schatten bei einem div-Tag. div.picShadow {

display: inline-block;

font-size: 0.8em;

text-align: center;

color: #6666CC;

background-color: #F5F5F2;

padding: 15px;

box-shadow: 4px 4px 2px #6666CC;

-moz-box-shadow: 4px 4px 2px #6666CC;

margin: 0px 0px 20px 10px;

}

Hier fällt uns hoffentlich das Attribut box-shadow auf. Eigenschaft box-shadow

Beschreibung Definiert einen Schatten für ein Element.

Werte horOffset Der horizontale Offset (Abstand) des Schattens. Positive Werte rücken den Schatten nach rechts und negative Pixel-Angaben nach links. verOffset Der vertikale Offset (Abstand) des Schattens. Positive Werte rücken den Schatten nach unten und negative Pixel-Angaben nach oben. blur Die Schärfe des Schattens in Pixel. Je größer dieser Wert ist, desto unschärfer wird die Abgrenzung des Schattens. color Die Farbe des Schattens.

CSS-Version 3 und höher

Syntax-Beispiele

/* Scharfer Schatten mit */ /* 5 Pixel nach rechts und 10 nach unten */ box-shadow: 5px 10px 0px #CCCCCC; /* Scharfer Schatten mit */ /* 5 Pixel nach links und 10 nach oben */ box-shadow: -5px -10px 0px #CCCCCC; /* leicht unscharfer Schatten mit */ /* 5 Pixel nach links und 10 nach unten */ box-shadow: -5px 10px 3px #CCCCCC; /* stark unscharfer Schatten mit */ /* 5 Pixel nach rechts und 10 nach oben */ box-shadow: 5px -10px 10px #CCCCCC;

Bemerkung Diese Werte für den Offset und die Schärfe sollten immer angegeben werden. Soll ein Wert nicht benutzt werden, so sollte der Wert 0 (Null) verwendet werden.

Die Formatierung für die Bilder selbst enthält kein Geheimnis mehr. Wir verwenden auch in diesem Fall wieder Kontext-Selektoren , um die Formatierungen genau anwenden zu können. div.picShadow img {

display: block;

margin-bottom: 10px;

border: 1px solid #000099;

}

AUTONUM Übung: Textschattierungen Hier können wir die Dateien aus der vorherigen Übung verwenden und unter dem Namen uebung21.html und main21.css speichern. Den vollständigen Code für die beiden Dateien finden Sie im Anhang ab Seite 294. Die einzige Änderung in der HTML-Datei ist der Text im h1-Element. ...

CSS3: Schatten bei der Überschrift

...

Nun können wir auch sofort die Formate für die Überschrift in der CSSDatei anpassen, um das Resultat zu sehen.

Bild 4.71  Ein Schatten bei der Überschrift

/* Überschriften & Absätze */

h1 {

width: 90%;

padding: 0px 20px 20px 20px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

text-shadow: 4px 4px 5px #6666CC;

}

Um Textelemente mit einem Schatteneffekt zu versehen, setzen wir hier das Attribut text-shadow ein. Es ist sehr einfach zu verwenden: Eigenschaft text-shadow

Beschreibung Definiert einen Schatten für einen Text.

Werte horOffset Der horizontale Offset (Abstand) des Schattens. Positive Werte rücken den Schatten nach rechts und negative Pixel-Angaben nach links. verOffset Der vertikale Offset (Abstand) des Schattens. Positive Werte rücken den Schatten nach unten und negative Pixel-Angaben nach oben. blur Die Schärfe des Schattens in Pixel. Je größer dieser Wert ist, desto unschärfer wird die Abgrenzung des Schattens. color Die Farbe des Schattens.

CSS-Version 3 und höher

Syntax-Beispiele /* Scharfer Schatten mit */ /* 5 Pixel nach rechts und 10 nach unten */ text-shadow: 5px 10px 0px #CCCCCC; /* Scharfer Schatten mit */ /* 5 Pixel nach links und 10 nach oben */ text-shadow: -5px -10px 0px #CCCCCC; /* leicht unscharfer Schatten mit */ /* 5 Pixel nach links und 10 nach unten */ text-shadow: -5px 10px 3px #CCCCCC; /* stark unscharfer Schatten mit */ /* 5 Pixel nach rechts und 10 nach oben */

text-shadow: 5px -10px 10px #CCCCCC;

Bemerkung Diese Werte für den Offset und die Schärfe sollten immer angegeben werden. Soll ein Wert nicht benutzt werden, so sollte der Wert 0 (Null) verwendet werden.

Die Deckkraft von Elementen AUTONUM Übung: Fade-Out Hier können wir die Dateien aus der vorherigen Übung verwenden und unter den Namen uebung22.html und main22.css speichern. Den vollständigen Code für die beiden Dateien finden Sie im Anhang ab Seite 294. Die einzige Änderung in der HTML-Datei sind die Klassen beim dritten Bild. Natürlich können wir auch die Überschriften und den Titel anpassen. ...

La Defense

...

Bild 4.72  Ein Bild mit geringer Deckkraft

Nun müssen wir nur eine Klasse für die Deckkraft anlegen. Als kleinen Trick verwenden wir auch das proprietäre Format für die Browser mit der Mozilla-Engine. Damit der Internet Explorer ebenfalls die Deckkraft verändert, verwenden wir die Eigenschaft filter. Diese gilt aber nur für diesen Browser und wird in der Zukunft nicht mehr untersützt. /* Deckkraft anpassen */

.deckkraft {

opacity: 0.2;

-moz-opacity: 0.2;

filter: alpha(opacity=20) /* nur für IE */

}

Die Deckkraft von Elementen wird über die Eigenschaft opacity gesteuert. Sie legt fest, ob ein Element kräftig hervorsticht oder mit dem Hintergrund verschmilzt. Eigenschaft opacity

Beschreibung Legt die Deckkraft für ein Element fest.

Werte festerWert Ein Prozent-Wert im Bereich zwischen 0 und 1, der die Deckkraft festlegt. Der Wert 0 steht hier für komplett durchsichtig und 1 für 100% deckend.

CSS-Version 3 und höher

Syntax-Beispiel /* Deckkraft auf ein Viertel festlegen */ opacity: 0.25;

Bemerkung Der Wert ist eine Prozentangabe als Dezimalzahl. Das Zeichen % darf allerdings nicht angegeben werden. Die Angabe der Deckkraft wird auf alle Kind-Elemente vererbt.

Mehrspaltiger Textsatz AUTONUM Übung: Layout im Zeitungsstil Wir benötigen zwei Dateien: Speichern Sie uebung23.html und main23.css. Den vollständigen Code für die beiden Dateien finden Sie im Anhang ab Seite 298. In der HTML-Datei haben wir einen längeren Text innerhalb eines div-Tags stehen.

...

Mehrspaltiger Textsatz

Freilebende ...

Freilebende ...

Freilebende ...

...

Bild 4.73  Ein mehrspaltiger Textsatz

Nun müssen wir die Klasse für den div-Tag formatieren, damit der Text auch in mehreren Spalten angezeigt wird. .multicolumn {

column-count: 3;

column-gap: 20px;

column-rule: 2px solid #F2F2F5;

-moz-column-count: 3;

-moz-column-gap: 20px;

-moz-column-rule: 2px solid #F2F2F5;

}

Mit der Eigenschaft column-count können wir festlegen, wie viele Spalten der Textsatz haben soll. Eigenschaft column-count

Beschreibung Legt die Anzahl der Spalten fest.

Werte festerWert Die Anzahl der anzuzeigenden Spalten.

CSS-Version 3 und höher

Syntax-Beispiel /* 3-Spalten-Satz */ column-count: 3;

Bemerkung Es dürfen nur ganzzahlige Werte ohne Maßangabe verwendet werden.

Eigenschaft column-gap

Beschreibung Legt den Abstand zwischen den Spalten fest.

Werte festerWert Ein Pixelwert für den Abstand der Spalten.

CSS-Version 3 und höher

Syntax-Beispiel /* 100 Pixel Spaltenabstand */

column-gap: 100px;

Bemerkung Es dürfen nur ganzzahlige Werte mit der Maßangabe für Pixel verwendet werden.

Wenn wir zwischen den Spalten eine Trennlinie haben wollen, benutzen wir das Attribut column-rule. Eigenschaft column-rule

Beschreibung Erzeugt eine Linie zwischen den Spalten.

Werte Breite Ein Pixelwert für die Breite der Linie. Typ Die Art der Linie, wie sie auch bei der Eigenschaft border verwendet wird. Farbe Die Farbe der Linie.

CSS-Version 3 und höher

Syntax-Beispiel /* Eine blaue Linie mit 2 Pixel zwischen den Spalten */ column-rule: 2px solid #0000FF;

4.11  Webadressen für dieses Kapitel Allgemeines CSS-Lexikon:

http://www.w3schools.com/css Liste mit möglichen Hacks und ihren Auswirkungen:

http://centricle.com/ref/css/filters Tipps und Tricks mit CSS:

http://css-tricks.com

Farben Farbauswahl, Kontraste:

http://kuler.adobe.com (Kostenlose Registrierung ist notwendig) Farbauswahl, Kontraste, Farbblindheit simulieren:

http://colorschemedesigner.com Schriften Über 40.000 freie True-Type-Schriften:

http://www.fontpool.com Schriften zu Kinofilmen, TV-Serien und verschiedenen Produkten:

http://www.daeng2k.de/schriftarten.php?kat=1 Blindtexte für Design-Vorlagen Archiv unzähliger Blindtexte:

http://www.newmediadesigner.de Zufällige Texte:

http://www.blindtexte.de Auswählbare Texte auf die Zeichenzahl genau:

http://www.blindtextgenerator.de Geschichten:

http://www.all2e.com/Ressourcen/Blindtexte

Tools und Online-Hilfen Automatische Formatierung von Style Sheets:

http://www.styleneat.com CSS formatieren und verkleinern:

http://csstidyonline.com Ungenutzte CSS-Regeln in einer Website finden:

http://github.com/geuis/helium-css Lesezeichen online verwalten:

http://www.delicious.com

http://www.mister-wong.de Mikroformate mit Firefox exportieren – TailsExport:

https://addons.mozilla.org/de/firefox/addon/2240

HTML auf Gültigkeit prüfen:

http://validator.w3.org CSS auf Gültigkeit prüfen:

http://jigsaw.w3.org/css-validator/ [1] Dots per inch, Punkte pro Zoll [2] kurz DOM [3] Integrated Development Environment (integrierte Entwicklungsumgebung) [4] auch ShortCut [5] Auch ShortCut genannt. [6] Siehe dazu auch den Abschnitt »Websichere Farben« im Anhang. [7] siehe Seite 117 [8] siehe Seite 101 [9] Word Wide Web Consortium, online unter http://www.w3.org [10] Online unter http://www.glyphgate.com/ [11] Web Embedding Font Tools, online unter http://www.microsoft.com/typography/WEFT.mspx [12] Online unter http://scripts.sil.org/cms/scripts/page.php? site_id=nrsi&cat_id=FontDownloads

[13] Diese sind an der Dateierweiterung .ttf erkennbar. [14] Ein Widget ist eine Komponente einer grafischen Benutzeroberfläche oder ein kleines Programm, das häufig nur zum Anzeigen einer Information benötigt wird. Der Begriff Widget setzt sich aus Windows und Gadget zusammen – wobei mit Windows einmal nicht das MicrosoftBetriebsystem, sondern das Fenstersystem »X Windows« aus der Unix-Welt gemeint ist. [15] Bei dieser Art der Schreibweise werden ein Großbuchstabe zu Beginn eines Wortes etwas größer geschrieben und alle Kleinbuchstaben als normale Großbuchstaben dargestellt (z. B.: Kapitälchen). [16] siehe Seite 95 [17] Lehre von der Bedeutung von sprachlichen Zeichen, Wörtern, Sätzen oder Texten. [18] Für weitere Informationen und Definitionen können Sie unter http://www.microformats.org/ nachlesen.

5  Anhang 5.1  Fachbegriffe Allgemeine Begriffe Browser Als Browser bezeichnen wir Client-Programme für den Zugriff auf Webserver. Es gibt viele verschiedene solche Programme. Die meisten laufen auf einer grafischen Benutzeroberfläche mit Maus. Spezielle Browser-Programme können die Informationen auch zeilenorientiert, in Blindenschrift oder akustisch (als gesprochene Texte) darstellen. Typische Web-Browser waren bzw. sind Mosaic, Lynx, Netscape, Internet-Explorer, Opera, Konquerer, Mozilla, Firefox. Die meisten Web-Browser unterstützen nicht nur den Zugriff auf Webserver, sondern auch auf andere Internet-Services wie Telnet, FTP, EMail und Usenet News. Hypertext Das sind Texte mit Querverweisen, die ähnlich wie in einem Lexikon die Verbindung zu weiteren Informationen herstellen. Im Web werden solche Verweise mit der Hilfe von URLs[1] realisiert. Bei Hypertext-Dokumenten gibt es anders als bei Druckwerken keine vorgegebene lineare Lesereihenfolge, sondern die Leser können jede Einzelinformation über viele verschiedene Wege und von vielen verschiedenen Stellen aus erreichen.

Internet Das Internet ist das größte Computer-Netzwerk der Welt. Es verbindet mehrere Millionen Computer und mehrere hundert Millionen Menschen. Es ist ein Zusammenschluss von vielen lokalen, nationalen und internationalen Computer-Netzen, die alle das Protokoll TCP/IP[2] verwenden und jeweils lokal und nicht über eine Welt-Zentrale verwaltet werden. Das Internet unterstützt viele verschiedene Services. Die wichtigsten sind: Telnet für den Aufruf von Programmen auf anderen Computern, FTP [3] für die Übertragung von Dateien auf andere Computer, E-Mail, Usenet News (Veröffentlichungen in Diskussionsforen) und IRC [4] für den Austausch von Informationen mit anderen ComputerBenutzern sowie WWW [5] für den Zugriff auf Informationssysteme in aller Welt. Intranet Unter Intranet verstehen wir ein nicht öffentliches, firmeninternes Netzwerk, das die gleiche Technik wie das weltweite Internet verwendet. WWW Das WWW ist ein Informationssystem, das einen bequemen Zugriff auf Informationen, die auf vielen verschiedenen Computern gespeichert sind, über Hypertext-Links ermöglicht. Der Zugriff erfolgt nach dem Prinzip von Server und Client über das Internet mit dem Protokoll HTTP (Hypertext Transport Protocol). TextInformationen werden auf den WWW-Servern in Form von HTML-Dateien gespeichert. Außerdem können auch Bilder, Töne, Videos und beliebige sonstige Dateien über das Web übertragen werden. Das WWW wurde am europäischen Kernforschungszentrum CERN in Genf entwickelt und wird vom W3-Consortium [6] weiter ausgebaut. Der Name bedeutet »weltweites Netz«.

Technische Begriffe Domain Eine Domain [7] ist ein Namensraum, der zusammen mit dem Hostnamen dazu dient, Computer im Internet zu identifizieren. Sie ist unter anderem Bestandteil der URL einer Webseite, wie z. B. example.com. HTTP Das Hypertext Transfer Protocol ist das Protokoll, mit dem die Informationen zwischen Servern und Clients über das Internet übertragen werden. URL Der Uniform Resource Locator, URL, ist die Adresse, die das ClientProgramm (Browser) benötigt, um eine bestimmte Information vom jeweiligen Server zu erhalten. Der URL enthält zu diesem Zweck Informationen wie die Art des Zugriffs (Protokoll), die Adresse des Servers (Hostname) und den Filenamen der Datei, in der die gewünschte Information gespeichert ist. Webserver Webserver laufen meistens auf Unix-Systemen. Typische Webserver waren bzw. sind Apache oder der Microsoft IIS. Auf Webservern werden die Websites gespeichert. Sie sind über eine URL ansprechbar und liefern den Clients die entsprechenden Websites aus. root Mit diesem Begriff werden zwei Dinge bezeichnet. Innerhalb einer Verzeichnisstruktur wird damit das Haupt- bzw. Wurzelverzeichnis benannt. Wenn es um Benutzer geht, wird damit der (Super)Administrator oder der Hauptbenutzer bezeichnet.

Webdesign-Begriffe CSS Cascading Style Sheets ist ein vom W3-Consortium definiertes, einfaches Format für Stilvorlagen für die Darstellung von HTML-Dokumenten. Diese Informationen werden meistens in eigenen Dateien mit der Endung .css zusammengefasst. Homepage Der Begriff Homepage bezeichnet die Seite, die ein Webserver ausliefert, falls keine genauen Angaben vom Benutzer gemacht werden. Normalerweise hat diese HTML-Datei den Namen index.html oder index.php. HTML HTML steht für HyperText Markup Language, sozusagen die Sprache des World Wide Web. HTML unterstützt logische Markierungen, bei denen die logische Bedeutung der Textteile so festgelegt wird, dass sie vom jeweiligen Browser in einer möglichst guten Form dargestellt werden können. HTML kann mit gewöhnlichen Texteditoren erstellt werden. HTML-Tags Ein »Marker« in HTML. Tags sind Formatierungskommandos einer HTML-Seite. Webseite Eine einzelne HTML-Datei der Website. Dies ist zum Beispiel die Datei infos.html mit allen darin enthaltenen Bildern und Dateien, die in der HTML-Datei aufgerufen werden.

Website Alle Dateien, die unter einer Domäne verfügbar sind. Dies ist also die Gesamtheit aus der Homepage und den einzelnen Webseiten, den CSSDateien, den Bildern, Sounddateien und, und, und.

5.2  Websichere Farben Darunter versteht man Farben, deren Hexadezimalcode aus einer Kombination von drei Werten des RGB-Farbraums[8], nämlich 00, 33, 66, 99, CC und FF bestehen. Ein Code sieht dann z. B. so aus: # 00FF99. Die ersten beiden Stellen stehen für Rot, die nächsten beiden für Grün und die letzten beiden für Blau. Bei websicheren Farben kann es nur 216 verschiedene Farben geben, da es nur drei Farbkanäle und sechs Farbwerte pro Kanal gibt. Da wir mit einem additiven Farbsystem arbeiten, können wir die Werte auch als Prozentzahlen ausdrücken und so den Anteil der jeweiligen Farbe bestimmen: Prozent

Hexadezimal

Dezimal

0%

00

0

20 %

33

51

40 %

66

102

60 %

99

153

80 %

CC

204

100 %

FF

255

Wir sollten websichere Farben benutzen, weil einige Browser nicht in der Lage sind, alle Farben darzustellen. Wenn man andere Kombinationen verwendet, versucht der Browser, die nächste websichere Farbe zu schätzen. Das bedeutet, dass das Design letztendlich anders aussieht, als wir

es gerne gehabt hätten. Bei Bildern in Formaten wie JPEG oder PNG ist das anders, da wir ja das ideale Format für den Bildinhalt wählen und daher die Farben vom Grafikprogramm richtig gespeichert werden. Jeder Monitor besitzt aufgrund seiner Bauweise, Alter und Betriebszeit andere Farbwiedergabeeigenschaften. Das gilt sogar für Monitore des gleichen Herstellers und Typs. Die websicheren Farben sind so standardisiert, dass sie auf annähernd jedem Monitor und unter Verwendung der entsprechenden Browser eine höchstmöglich originale Farbwiedergabe ergeben. Schwankungen können wir jedoch nicht ausschließen und eine 100 %-ige Sicherheit kann es nie geben. Um nicht immer mit den Codes arbeiten zu müssen, können wir auch – für die Standardfarben – Namen verwenden.

Bild 5.1  Benannte Farben in CSS

5.3  Quellcodes Lösung zur 2. Übung





Übung 2 – Die Gummibärchen

Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung GummibärchenMensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi. Die Tastempfindung geht auch ins Sexuelle. Das bedeutet nicht unbedingt, dass das Verhältnis zum Gummibärchen ein geschlechtliches wäre, denn prinzipiell sind diese geschlechtsneutral.

Nun sind Gummibärchen weder wabbelig noch zäh; sie stehen genau an der Grenze. Auch das macht sie spannend. Gummibärchen sind auf eine aufreizende Art weich. Und da sie weich sind, kann man sie auch ziehen. Ich mache das sehr gerne. Ich sitze im dunklen Kino und ziehe meine Gummibärchen in die Länge, ganz ganz langsam. Man will sie nicht kaputtmachen, und dann siegt doch die Neugier, wieviel Zug so ein Bärchen aushält. (Vorstellbar sind u. a. Gummibärchen-Expander für Kinder und Genesende). Forscherdrang und gleichzeitig das Böse im Menschen erreichen den Climax, wenn sich die Mitte des gezerrten Bärchens von Millionen Mikrorissen weiß färbt und gleich darauf das zweigeteilte Stück auf die Finger zurückschnappt. Man hat ein Gefühl der Macht über das hilflose, nette Gummibärchen. Und wie man damit umgeht: Mensch erkenne dich selbst!

Jetzt ist es so, dass Gummibärchen ja nicht gleich Gummibärchen ist. Ich bevorzuge das klassische Gummibärchen, künstlich gefärbt und aromatisiert. Mag sein, dass es eine Sentimentalität ist. Jedenfalls halte ich nichts von neuartigen Alternativ-Gummibärchen ohne Farbstoff (»Mütter, mit viel Vitamin C«), und auch unter den konventionellen tummeln sich schwarze Schafe: die schwarzen Lakritz-Bärchen. Wenn ich mit Xao im Kino bin, red ich ihm so lange ein, dass das die besten sind, bis er sie alle ißt. Sie schmecken scheußlich und fühlen sich scheußlich an. Dagegen das schöne, herkömmliche Gummibärchen: allein wie es neonhaft vom Leinwandleuchten illuminiert, aber ganz ohne die Kühle der Reklameröhren!

Die nächste prickelnde Unternehmung ist das Kauen des Gummibärchens. Es ist ein Katz-und-Maus-Spiel. Man könnte zubeißen, läßt aber die Spannung noch steigen. Man quetscht das nasse Gummibärchen zwischen Zunge und Gaumen und glibscht es durch den Mund. Nach einer Zeit beiße ich zu, oft bei nervigen Filmszenen. Es ist eine animalische Lust dabei. Was das schmecken angeht. wirken Gummibärchen in ihrer massiven Fruchtigkeit sehr dominierend.

Zigaretten auf Gummibärchen schmecken nicht gut.

Anführen sollte man auch noch: manche mögen die Grünen am liebsten, manche die Gelben. Ich mag am liebsten die Roten. Sie glühen richtig rot, und ihr Himbeergeschmack fährt wie Napalm über die Geschmacksknospen. Eine meiner Lieblingsphantasien, wo es um Gummibärchen geht, ist der Gummibär. Ich will einen riesigen Gummibären. Jeder wahre Gummibärchen-Gourmet wird mich verstehen.

Ebenfall phantasieanregend können sie eingesetzt werden zum Aufbau verschiedener »Orgiengruppen- Modelle« oder als »Demonstrationsobjekt für wirbellose Tiere«. Abgesehen vom diabolischen Lustgewinn müßte man die Bärchen gar nicht zerreißen. Sie sind ja durchscheinend.

Zu behaupten, dass sich im Gummibärchen das Wesen aller Dinge offenbart, finde ich keinesfalls als gewagt. Wer schon einmal über einem roten Gummibärchen meditiert hat, weiß von diesen Einsichten. Wenn ich das Kino verlasse oder die Packung einfach leergegessen ist, habe ich meist ein Gefühl, als hätte mir einer in den Magen getreten. Hier schläft die gesteigerte Intensität – als deren Ursache den Gummibärchen durchaus der Charakter einer Droge zuerkannt werden kann – ins Negative um, in den überdruß.

In dichter und geraffter Form spiegelt sich im Verhältnis zum Gummibärchen eine menschliche Love-Affair wider. Nie wieder Gummibärchen, denke ich jedesmal. In der Zwischenzeit lächle ich dann über den Absolutheitsanspruch den diese Momente erheben. Schon zu Hause beunruhigen mich wieder Gerüchte über einen Marktvorstoß der Japaner mit Gummireis oder Gummischweinen. Und wieder und wieder geht es mir durch den Kopf: Gummibärchen sind Spitze.

Lösung zur 3. Übung





Übung 3 – Die Gummibärchen



Gummibärchen

Die Beziehung zu den Gummibärchen

Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung GummibärchenMensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi. Die Tastempfindung geht auch ins Sexuelle. Das bedeutet nicht unbedingt, dass das Verhältnis zum Gummibärchen ein geschlechtliches wäre, denn prinzipiell sind diese geschlechtsneutral.

Nun sind Gummibärchen weder wabbelig noch zäh; sie stehen genau an der Grenze. Auch das macht sie spannend. Gummibärchen sind auf eine aufreizende Art weich. Und da sie weich sind, kann man sie auch ziehen. Ich mache das sehr gerne. Ich sitze im dunklen Kino und ziehe meine Gummibärchen in die Länge, ganz ganz langsam. Man will sie nicht kaputtmachen, und dann siegt doch die Neugier, wieviel Zug so ein Bärchen aushält. (Vorstellbar sind u. a. Gummibärchen-Expander für Kinder und Genesende). Forscherdrang und gleichzeitig das Böse im Menschen erreichen den Climax, wenn sich die Mitte des gezerrten Bärchens von Millionen Mikrorissen weiß färbt und gleich darauf das zweigeteilte Stück auf die Finger zurückschnappt. Man hat ein Gefühl der Macht über das hilflose, nette Gummibärchen. Und wie man damit umgeht: Mensch erkenne dich selbst!

Arten von Gummibärchen

Jetzt ist es so, dass Gummibärchen ja nicht gleich Gummibärchen ist. Ich bevorzuge das klassische Gummibärchen, künstlich gefärbt und aromatisiert. Mag sein, dass es eine Sentimentalität ist. Jedenfalls halte ich nichts von neuartigen Alternativ-Gummibärchen ohne Farbstoff (»Mütter, mit viel Vitamin C«), und auch unter den konventionellen tummeln sich schwarze Schafe: die schwarzen Lakritz-Bärchen. Wenn ich mit Xao im Kino bin, red ich ihm so lange ein, dass das die besten sind, bis er sie alle ißt. Sie schmecken scheußlich und fühlen sich scheußlich an. Dagegen das schöne, herkömmliche Gummibärchen: allein wie es neonhaft vom Leinwandleuchten illuminiert, aber ganz ohne die Kühle der Reklameröhren!

Der Verzehr von Gummibärchen

Die nächste prickelnde Unternehmung ist das Kauen des Gummibärchens. Es ist ein Katz-und-Maus-Spiel. Man könnte zubeißen, läßt aber die Spannung noch steigen. Man quetscht das nasse Gummibärchen zwischen Zunge und Gaumen und glibscht es durch den Mund. Nach einer Zeit beiße ich zu, oft bei nervigen Filmszenen. Es ist eine animalische Lust dabei. Was das schmecken angeht. wirken Gummibärchen in ihrer massiven Fruchtigkeit sehr dominierend. Zigaretten auf Gummibärchen schmecken nicht gut.

Anführen sollte man auch noch: manche mögen die Grünen am liebsten, manche die Gelben. Ich mag am liebsten die Roten. Sie glühen richtig rot, und ihr Himbeergeschmack fährt wie Napalm über die Geschmacksknospen. Eine meiner Lieblingsphantasien, wo es um Gummibärchen geht, ist der Gummibär. Ich will einen riesigen Gummibären. Jeder wahre Gummibärchen-Gourmet wird mich verstehen.

Weiteres zu den Gummibärchen

Ebenfall phantasieanregend können sie eingesetzt werden zum Aufbau verschiedener »Orgiengruppen- Modelle« oder als »Demonstrationsobjekt für wirbellose Tiere«. Abgesehen vom diabolischen Lustgewinn müßte man die Bärchen gar nicht zerreißen. Sie sind ja durchscheinend.

Zu behaupten, dass sich im Gummibärchen das Wesen

aller Dinge offenbart, finde ich keinesfalls als gewagt. Wer

schon einmal über einem roten Gummibärchen meditiert

hat, weiß von diesen Einsichten. Wenn ich das Kino verlasse

oder die Packung einfach leergegessen ist, habe ich meist ein

Gefühl, als hätte mir einer in den Magen getreten. Hier

schläft die gesteigerte Intensität – als deren Ursache

den Gummibärchen durchaus der Charakter einer Droge

zuerkannt werden kann – ins Negative um, in den

überdruß.

In dichter und geraffter Form spiegelt sich im Verhältnis zum Gummibärchen eine menschliche Love-Affair wider. Nie wieder Gummibärchen, denke ich jedesmal. In der Zwischenzeit lächle ich dann über den Absolutheitsanspruch den diese Momente erheben. Schon zu Hause beunruhigen mich wieder Gerüchte über einen Marktvorstoß der Japaner mit Gummireis oder Gummischweinen. Und wieder und wieder geht es mir durch den Kopf: Gummibärchen sind Spitze.

Lösung zur 4. Übung





Übung 4 – Farben der Gummibärchen



Gummbärchen

Farben

• grün



• dunkelrot



• weiß



• gelb



• orange



• hellrot

meine Lieblinge

grün

weiß

dunkelrot

hellrot

gelb

orange

Lösung zur 5. Übung





Übung 5 – Farben der Gummibärchen



Gummbärchen

Farben	Stückzahlen (in Tsd.) der Monate 2008												Summe	%-Anteil
	Jän.	Feb.	März	Apr.	Mai	Juni	Juli	Aug.	Sep.	Okt.	Nov.	Dez.
rot	1.100	1.250	1.300	1.300	1.270	1.200	1.230	1.170	1.250	1.300	1.350	1.450	15.170	33,33
grün	1.200	1.350	1.400	1.400	1.370	1.300	1.330	1.270	1.350	1.400	1.450	1.550	16.370	35,97
gelb	1.000	1.150	1.200	1.200	1.170	1.100	1.130	1.070	1.150	1.200	1.250	1.350	13.970	30,70
Summe	3.300	3.750	3.900	3.900	3.810	3.600	3.690	3.510	3.750	3.900	4.050	4.350	45.510	100,00
%-Anteil	7,25	8,24	8,57	8,57	8,37	7,91	8,11	7,71	8,24	8,57	8,90	9,56	100,00

Lösung zur 6. Übung Die Datei index.html







Meine Informationen

Home Ä Person Ä Infos Ä Links Dies ist die 6. Übung & die Ä erste Website Dies ist die Startseite mit dem NamenÄ index.html In der Navigationsleiste sind vier Bilder enthalten, welche aus dem Verzeichnis /images/ kommen. Die Namen sind: computer.png home.png info.png user.png Diese vier Knöpfe haben diese Funktionen: Home Zeigt diese Seite an. Person Dort zeigen wir personenenbezogene Informationen an. Infos Hier schreiben wir den Blindtext von den Gummibärchen. Links Zeigt uns eine Liste mit Hyperlinks an.

Die Datei user.html





Person :: Meine Informationen

Ä Home Person Ä Infos Ä Links Wer bin ich? Name: Guru 2.0 Alter: 40 Jahre Wohnort: Salzburg Ausbildung: kaufmännische Matura Studium zum Dipl.-Ing.

Die Datei info.html





Informationen :: Meine Informationen

Ä Home Ä Person Infos Ä Links Gummibärchen Die Beziehung zu den Gummibärchen Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der ... Arten von Gummibärchen Jetzt ist es so, dass Gummibärchen ja nicht ... Der Verzehr von Gummibärchen Die nächste prickelnde Unternehmung ist das Kauen ... Anführen sollte man auch noch: manche mögen ... Weiteres zu den Gummibärchen Ebenfall phantasieanregend können sie eingesetzt ... Zu behaupten, dass sich im Gummibärchen das ... In dichter und geraffter Form spiegelt sich im ...

Die Datei links.html





Hyperlinks :: Meine Informationen

Ä Home Ä Person Ä Infos Links Wikipedia – Informationen The Legend of Ä Zelda Link: wikipedia.org/wiki/The_Legend_of_ZeldaÄ The Legend of Zelda (jap. ゼルダの伝説, Zeruda no densetsu), kurz Zelda oder LoZ genannt, ist eine populäre Videospiel-Serie. Seit 1986 sind bislang dreizehn Titel exklusiv für Nintendo-Konsolen erschienen. Zelda gilt mit über 52 Millionen verkauften Einheiten als die bisher erfolgreichste Action-Adventure-Reihe. Der dabei erfolgreichste Teil der Reihe, The Legend of Zelda: Ocarina of Time, verkaufte sich 7,6 Millionen Mal und neben diversen Auszeichnungen wurde es auch ins Guinness-Buch der Rekorde aufgenommen, nämlich als das Spiel mit den meisten Vorbestellungen in seinem Erscheinungsjahr 1998. Super Mario Link: wikipedia.org/wiki/Super_Mario Super Mario, jap.: スーパーマリオ (amerikanisch: [sʊ.pɚ mæɹ.i.oʊ], deutsch [zu:pɐ ma:ʁio]) ist eine Videospiel-Figur der Firma Nintendo und deren Maskottchen. Super Mario ist Nintendos wohl populärste Videospiel-Figur sowie Protagonist und titelgebender Held der erfolgreichsten Videospielreihe des Unternehmens. Die Spielfigur taucht daher – von wenigen Ausnahmen abgesehen – nur in Spielen für Nintendo-Spielkonsolen auf. Mit über 295 Millionen verkauften Spielen ist Mario nicht nur die erfolgreichste Nintendo-Reihe, sondern die bisher erfolgreichste Videospielreihe überhaupt. Ferner gilt Mario als bekannteste Videospielfigur der Welt. 2005 wurde er mit einem Stern auf dem Walk of Game geehrt. Hypertext Markup Ä Language Link: wikipedia.org/wiki/HtmlÄ Die Hypertext Markup Language (HTML, dt. Hypertext-Auszeichnungssprache), oft kurz als Hypertext bezeichnet, ist eine textbasierte Auszeichnungssprache zur Strukturierung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. HTML-Dokumente sind die Grundlage des World Wide Web und werden von einem Webbrowser dargestellt. Neben den vom Browser angezeigten Inhalten einer Webseite enthält HTML zusätzliche Angaben in Form von Metainformationen, die z. B. über die im Text verwendete Sprache oder den Autor Auskunft geben oder den Inhalt des Textes zusammenfassen. Die Auszeichnungssprache wird vom World Wide Web Consortium (W3C) weiterentwickelt. Aktuell trägt HTML die Versionsnummer 4.01. HTML5 befindet sich in der Entwicklung. Parallel existiert die Extensible Hypertext Markup Language (XHTML), die zeitweilig als Ersatz für HTML 4.01 gedacht war.

Lösung zur 7. Übung Die Datei uebung07.html





kreative Überschriften





Das Leben der Gummibärchen

Eine andere Sicht auf die Dinge

Freilebende Gummibärchen gibt es nicht.

Man kauft sie in Packungen an der Kinokasse. Dieser

Kauf ist der Beginn einer fast erotischen und

sehr ambivalenten Beziehung Gummibärchen-Mensch.

Zuerst genießt man. Dieser Genuß umfaßt

alle Sinne. Man wühlt in den Gummibärchen, man

fühlt sie. Gummibärchen haben eine Konsistenz

wie weichgekochter Radiergummi. Die Tastempfindung geht

auch ins Sexuelle. Das bedeutet nicht unbedingt, daß

das Verhältnis zum Gummibärchen ein

geschlechtliches wäre, denn prinzipiell sind

diese geschlechtsneutral.

Nun sind Gummibärchen weder wabbelig noch

zäh,

sie stehen genau an der Grenze. Auch das macht sie

spannend. Gummibärchen sind auf eine aufreizende Art

weich. Und da sie weich sind, kann man sie auch ziehen.

Ich mache das sehr gerne. Ich sitze im dunklen Kino und

ziehe meine Gummibärchen in die Länge, ganz

ganz langsam. Man will sie nichtkaputtmachen, und dann

siegt doch die Neugier, wieviel Zug so ein Bärchen

aushält. (Vorstellbar sind u. a.

Gummibärchen-Expander für Kinder und Genesende).

Forscherdrang und gleichzeitig das Böse im Menschen

erreichen den Climax, wenn sich die Mitte des gezerrten

Bärchens von Millionen Mikrorißen weiß

färbt und gleich darauf das zweigeteilte Stück

auf die Finger zurückschnappt. Man hat ein

Gefühl der Macht über das hilflose, nette

Gummibärchen.

Die Datei main07.css /*

Funktion: css-Datei fuer uebung07.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

body {

padding: 0px;

margin: 20px;

font-family: Tahoma, Arial, Helvetica, sans-serif;

font-style: normal;

font-weight: normal;

font-size: 1em;

}

/* Überschriften */

h1 {

width: 500px;

padding: 0px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

font-weight: normal;

font-style: italic;

color: #333333;

}

h1:first-line {

line-height: 90%;

font-size: 0.65em;

color: #000066;

}

h1 span {

display: block;

}

h1 + h2 {

width: 500px;

padding: 20px 0px 0px 0px;

margin: 0px 0px -10px 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.25em;

font-weight: normal;

font-style: italic;

color: #666666;

}

h2 {

width: 500px;

padding: 0px;

margin: 0px 0px -10px 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.25em;

font-weight: normal;

font-style: italic;

color: #000066;

}

/* Absätze */

h2 + p {

width: 480px;

margin: 10px 0px 20px 20px;

line-height: 150%;

font-size: 0.75em;

letter-spacing: 0.05em;

}

Lösung zur 8. Übung Die Datei uebung08.html





kreative Überschriften





Das Leben der Gummibärchen

Eine andere Sicht auf die Dinge

Freilebende Gummibärchen gibt es nicht. Man kauft

sie in Packungen an der Kinokasse. Dieser Kauf ist

der Beginn einer fast erotischen und sehr ambivalenten

Beziehung Gummibärchen-Mensch. Zuerst genießt

man. Dieser Genuß umfaßt alle Sinne. Man

wühlt in den Gummibärchen, man fühlt sie.

Gummibärchen haben eine Konsistenz wie weichgekochter

Radiergummi. Die Tastempfindung geht auch ins Sexuelle.

Das bedeutet nicht unbedingt, daß das

Verhältnis zum Gummibärchen ein

geschlechtliches wäre, denn prinzipiell sind

diese geschlechtsneutral.

Nun sind Gummibärchen weder wabbelig noch Ä

zäh,

sie stehen genau an der Grenze. Auch das macht sie

spannend. Gummibärchen sind auf eine aufreizende Art

weich. Und da sie weich sind, kann man sie auch ziehen.

Ich mache das sehr gerne. Ich sitze im dunklen Kino und

ziehe meine Gummibärchen in die Länge, ganz ganz

langsam. Man will sie nichtkaputtmachen, und dann siegt

doch die Neugier, wieviel Zug so ein Bärchen

aushält. (Vorstellbar sind u. a.

Gummibärchen-Expander für Kinder und Genesende).

Forscherdrang und gleichzeitig das Böse im Menschen

erreichen den Climax, wenn sich die Mitte des gezerrten

Bärchens von Millionen Mikrorißen weiß

färbt und gleich darauf das zweigeteilte Stück

auf die Finger zurückschnappt. Man hat ein

Gefühl der Macht über das hilflose, nette

Gummibärchen.

Die Datei main08.css /*

Funktion: css-Datei fuer uebung08.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

body {

padding: 0px;

margin: 20px;

font-family: Tahoma, Arial, Helvetica, sans-serif;

font-style: normal;

font-weight: normal;

font-size: 1em;

}

/* Überschriften */

h1 {

width: 500px;

padding: 0px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

font-weight: normal;

font-style: italic;

color: #000066;

}

h1:first-line {

line-height: 90%;

font-size: 0.65em;

color: #CCCCCC;

}

h1 span {

display: block;

margin: -11px 0px 0px 40px;

}

h1 + h2 {

width: 500px;

padding: 20px 0px 0px 0px;

margin: 0px 0px -10px 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.25em;

font-weight: normal;

font-style: italic;

color: #666666;

}

h2 {

width: 500px;

padding: 0px;

margin: 0px 0px -10px 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.25em;

font-weight: normal;

font-style: italic;

color: #000066;

}

/* Absätze */

h2 + p {

width: 480px;

margin: 10px 0px 20px 20px;

line-height: 150%;

font-size: 0.75em;

letter-spacing: 0.05em;

}

Lösung zur 9. Übung Die Datei uebung09.html







Text & Bild

• 
  
  Widget #1
  
  

  Freilebende Gummibärchen gibt es nicht.
  
  Man kauft sie in Packungen an der Kinokasse.
  
  Dieser Kauf ist der Beginn einer fast erotischen und
  
  sehr ambivalenten Beziehung Gummibärchen-
  
  Mensch. Zuerst genießt man. Dieser Genuß
  
  umfaßt alle Sinne. Man wühlt in den
  
  Gummibärchen, man fühlt sie.
  
  Gummibärchen haben eine Konsistenz wie
  
  weichgekochter Radiergummi. Die Tastempfindung geht
  
  auch ins Sexuelle. Das bedeutet nicht unbedingt,
  
  daß das Verhältnis zum Gummibärchen
  
  ein geschlechtliches wäre, denn prinzipiell
  
  sind diese geschlechtsneutral.

  
  
  



• 
  
  Widget #2
  
  

  Freilebende Gummibärchen gibt es nicht.
  
  Man kauft sie in Packungen an der Kinokasse.
  
  Dieser Kauf ist der Beginn einer fast erotischen und
  
  sehr ambivalenten Beziehung Gummibärchen-
  
  Mensch. Zuerst genießt man. Dieser Genuß
  
  umfaßt alle Sinne. Man wühlt in den
  
  Gummibärchen, man fühlt sie.
  
  Gummibärchen haben eine Konsistenz wie
  
  weichgekochter Radiergummi. Die Tastempfindung geht
  
  auch ins Sexuelle. Das bedeutet nicht unbedingt,
  
  daß das Verhältnis zum Gummibärchen
  
  ein geschlechtliches wäre, denn prinzipiell
  
  sind diese geschlechtsneutral.

  
  
  

Die Datei main09.css /*

Funktion: css-Datei fuer uebung09.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #F0F0F0;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 1em;

font-weight: normal;

}

/* ungeordnete Liste */

ul {

position: relative;

list-style: none;

margin: 20px 0px;

padding: 0px;

}

li.klein {

position: relative;

width: 30%;

margin: 0px 15px 20px 0px;

padding: 0px;

background: #FFFFFF;

height: 200px;

border-radius: 10px;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

}

/* Überschriften */

h2 {

border-top-left-radius: 10px;

-moz-border-radius-topleft: 10px;

-webkit-border-top-left-radius: 10px;

}

li h2 {

background-color: #229922;

color: #FFFFFF;

}

li h2,

li p {

font-size: 0.7em;

padding: 5px 60px 5px 10px;

margin: 0px;

}

/* Bilder */

li img {

position: absolute;

top: -15px;

right: -81px;

height: 121px;

width: 126px;

}

Lösung zur 10. Übung Die Datei uebung10.html





vertikale Navigation

• News



• Über mich
  
  
  
  
  
  • 
    
    Referenzen
    
    
  
  
  
  • Galerie
  
  
  
  
  
  



• Kontakt

Die Datei main10.css /*

Funktion: css-Datei fuer uebung10.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #E0E0E0;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 1em;

font-weight: normal;

}

/* Navigation */

ul#navigation {

width: 200px;

padding: 0px;

margin: 0px;

border-width: 1px 1px 0px 1px;

border-style: solid;

border-color: #F0F0F0;

background-color: #66CC77;

list-style: none;

}

ul#navigation li.news,

ul#navigation li.ueberMich,

ul#navigation li.kontakt,

ul#navigation a.news,

ul#navigation a.ueberMich,

ul#navigation a.kontakt {

display: block;

padding: 4px 0px;

margin: 0px;

border-bottom: 1px solid #F0F0F0;

text-indent: 25px;

text-decoration: none;

color: #FFFFFF;

}

ul#navigation li.news,

ul#navigation li.ueberMich,

ul#navigation li.kontakt {

padding: 4px 0px 0px 0px;

background: transparent url(../images/subArrow.png) Ä

10px 10px no-repeat;

}

ul#navigation a.news,

ul#navigation a.ueberMich,

ul#navigation a.kontakt {

background: #339944 url(../images/navArrow.png) Ä

10px center no-repeat;

}

ul#navigation a:hover,

ul#navigation a:focus,

ul#navigation a:active {

background-color: #118822;

}

ul#navigationSub {

padding: 0px;

margin: 0px;

list-style: none;

}

ul#navigationSub li.referenz,

ul#navigationSub li.gallery,

ul#navigationSub a.referenz,

ul#navigationSub a.gallery {

display: block;

padding: 4px 0px 4px 20px;

margin: 0px;

text-decoration: none;

color: #FFFFFF;

}

ul#navigationSub li.referenz,

ul#navigationSub li.gallery,

ul#navigationSub a.referenz,

ul#navigationSub a.gallery {

background: transparent url(./navArrow.png) 30px Ä

center no-repeat;

}

ul#navigationSub a:hover,

ul#navigationSub a:focus,

ul#navigationSub a:active {

background-color: #55BB66;

}

Lösung zur 11. Übung Die Datei uebung11.html





horizontale Navigation

• News



• Über mich



• Kontakt

Freilebende Gummibärchen gibt es nicht.

Man kauft sie in Packungen an der Kinokasse.

Dieser Kauf ist der Beginn einer fast erotischen und

sehr ambivalenten Beziehung Gummibärchen-Mensch.

Zuerst genießt man. Dieser Genuß

umfaßt alle Sinne. Man wühlt in den

Gummibärchen, man fühlt sie.

Gummibärchen haben eine Konsistenz

wie weichgekochter Radiergummi. Die Tastempfindung geht

auch ins Sexuelle. Das bedeutet nicht unbedingt,

daß das Verhältnis zum Gummibärchen ein

geschlechtliches wäre, denn prinzipiell sind diese

geschlechtsneutral.

Die Datei main11.css /*

Funktion: css-Datei fuer uebung11.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #E0E0E0;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 1em;

font-weight: normal;

}

/* Navigation */

ul#navigation {

float: left;

padding: 15px 5px 0px 5px;

margin: 0px;

width: 80%;

list-style: none;

border-width: 0px 0px 5px 0px;

border-style: solid;

border-color: #E99849;

}

ul#navigation li {

float: left;

padding: 5px 5px 0px 5px;

margin: 0px 5px 0px 5px;

color: #020F34;

font-family: Arial, Helvetica, sans-serif;

font-weight: normal;

letter-spacing: 0.1em;

}

ul#navigation li.aktiv {

padding: 5px 15px 5px 15px;

margin: 0px;

background-color: #E99849;

color: #FFFFFF;

font-weight: bold;

font-style: italic;

}

ul#navigation a {

padding: 5px 15px 5px 15px;

margin: 0px;

background-color: #999999;

color: #333333;

text-decoration: none;

}

ul#navigation a:hover {

background-color: #E99849;

border-bottom: 1px solid #E99849;

}

div.content {

clear: both;

padding: 5px 5px 10px 5px;

margin: 0px;

width: 80%;

height: 400px;

background-color: #E99849;

}

div.content p {

line-height: 1.5em;

font-size: 0.9em;

letter-spacing: 0.05em;

}

Lösung zur 12. Übung Die Datei uebung12.html





horizontale Navigation für alle Browser

• Neuheiten



• Über mich



• Meine Arbeiten



• Referenzen



• Impressum



• 
  
  Kontakt
  
  

Die Datei main12.css /*

Funktion: css-Datei fuer uebung12.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

body {

background: #FFF;

color: #000;

font: 62.5% "Lucida Grande", Verdana, Helvetica, sans-serif;

margin: 0px;

padding: 0px;

}

/* Navigation */

#navigation {

background: #AFD5E0 url("../images/navBack.png") repeat-x;

border: 1px solid #979797;

border-width: 1px 0px 1px 0px;

font-size: 1.1em;

margin-top: 1em;

padding-top: .6em;

}

#navigation ul, #navigation ul li {

list-style: none;

margin: 0px;

padding: 0px;

}

#navigation ul {

padding: 5px 0px 4px 0px;

text-align: center;

}

#navigation ul li {

display: inline;

margin-right: .75em;

}

#navigation ul li.last {

margin-right: 0px;

}

#navigation ul li a {

background: url("../images/reiterRechts.png") no-repeat Ä

100% 0px;

color: #0066CC;

padding: 5px 0px 5px 0px;

text-decoration: none;

}

#navigation ul li a span {

background: url("../images/reiterLinks.png") no-repeat;

padding: 5px 1em 5px 1em;

}

#navigation ul li a:hover span {

color: #6699CC;

text-decoration: underline;

}

/*\*//*/

#navigation ul li a {

display: inline-block;

white-space: nowrap;

width: 1px;

}

#navigation ul {

padding-bottom: 0px;

margin-bottom: -1px;

}

/**/

/*\*/

* html #navigation ul li a {

padding: 0px;

}

/**/

Lösung zur 13. Übung Die Datei uebung13.html





2 Spalten ohne Tabelle





Das Leben der Gummibärchen



Eine andere Sicht auf die Dinge

Freilebende Gummibärchen gibt es nicht.

Man kauft sie in Packungen an der Kinokasse.

Dieser Kauf ist der Beginn einer fast erotischen

und sehr ambivalenten Beziehung

Gummibärchen-Mensch. Zuerst genießt

man. Dieser Genuß umfaßt alle Sinne.

Man wühlt in den Gummibärchen, man

fühlt sie. Gummibärchen haben eine

Konsistenz wie weichgekochter Radiergummi. Die

Tastempfindung geht auch ins Sexuelle. Das

bedeutet nicht unbedingt, daß

das Verhältnis zum Gummibärchen ein

geschlechtliches wäre, denn prinzipiell sind

diese geschlechtsneutral.

Nun sind Gummibärchen weder wabbelig Ä

noch zäh,

sie stehen genau an der Grenze. Auch das macht

sie spannend. Gummibärchen sind auf eine

aufreizende Art weich. Und da sie weich sind,

kann man sie auch ziehen. Ich mache das sehr

gerne. Ich sitze im dunklen Kino und ziehe meine

Gummibärchen in die Länge, ganz ganz

langsam. Man will sie nicht kaputtmachen, und

dann siegt doch die Neugier, wieviel Zug so ein

Bärchen aushält. (Vorstellbar sind

u. a. Gummibärchen-Expander für

Kinder und Genesende). Forscherdrang und

gleichzeitig das Böse im Menschen erreichen

den Climax, wenn sich die Mitte des gezerrten

Bärchens von Millionen Mikrorißen

weiß färbt und gleich darauf das

zweigeteilte Stück auf die Finger

zurückschnappt. Man hat ein Gefühl der

Macht über das hilflose, nette

Gummibärchen.

Impressum :: Kontakt :: © 2009





Die Datei main13.css /*

Funktion: css-Datei fuer uebung13.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #F0F0F0;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size: 1em;

font-weight: normal;

}

p {

letter-spacing: 0.05em;

color: #000066;

}

/* Überschriften */

h1 {

width: 90%;

padding: 0px 0px 20px 69px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

}

h1:first-line {

line-height: 90%;

font-size: 1em;

color: #000066;

}

h1 span {

display: block;

margin: -29px 0px 0px -62px;

font-size: 2.75em;

color: #6666FF;

}

h2 {

width: 90%;

padding: 0px;

margin: 0px 0px -5px 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.25em;

font-weight: normal;

font-style: italic;

color: #6666FF;

}

/* div für Inhaltsbereich */

#content {

width: 90%;

margin: 1em auto;

text-align: left;

max-width: 1024px;

}

/* linke Spalte (Seitenleiste) */

#sp_links {

float: left;

width: 20%;

margin: 0px 0px 0px 0px;

padding: 0px 10px 0px 0px;

border-right: 1px dotted #000066;

}

#sp_links_content {

margin: 0px;

padding: 0.5em 1em;

font-size: 70%;

text-align: justify;

}

#sp_links_content p {

line-height: 1.25em;

}

/* rechte Spalte (Inhalt) */

#sp_rechts {

margin: -5px 0px 0px 20%;

padding: 0px 0px 0px 10px;

}

#sp_rechts_content {

margin: 0px;

padding: 0.5em 1em;

font-size: 100%;

}

#sp_rechts_content p {

padding-left: 15px;

line-height: 1.5em;

}

/* Cleanformat */

hr.cleaner {

clear: both;

float: none;

height: 1px;

margin: 0px;

padding: 0px;

border: none;

visibility: hidden;

}



/* Fusszeile */

div.footer {

margin-top: 10px;

padding-top: 5px;

width: 100%;

font-size: 0.7em;

color: #909090;

text-align: center;

border-top: 1px solid #E0E0E0;

}

Lösung zur 14. Übung Die Datei uebung14.html





Eine Galerie mit CSS





Eine vertikale Galerie

Mit der Maus über die Bilder fahren.

• 
  
  
  
  
  
  



• 
  
  
  
  
  
  



• 
  
  
  
  
  
  



• 
  
  
  
  
  
  



• 
  
  
  
  
  
  



• 
  
  
  
  
  
  



• 
  
  
  
  
  
  




Eine vertikale Galerie

Die Datei main14.css /*

Funktion: css-Datei fuer uebung14.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #F0F0F0;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1em;

color: #000090;

font-weight: normal;

}

/* Überschriften */

h1 {

width: 90%;

padding: 0px 0px 20px 69px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

}

/* Liste und Inhalt */

ul {

text-align: center;

}

ul p {

padding: 0px;

margin: 290px 0px 0px 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 2em;

font-weight: normal;

font-style: italic;

color: #FCFB7F;

letter-spacing: 0.15em;

}

/* Galerie */

#galerie {

padding: 0;

margin: 0;

list-style-type: none;

overflow: hidden;

width: 373px;

height: 436px;

border: 1px solid #888;

background-color: #647B9D;

}

#galerie li {

float: left;

border-bottom: 1px solid #888888;

overflow: hidden;

}

#galerie li a {

display: block;

height: 30px;

width: 373px;

float: left;

text-decoration: none;

cursor: default;

}

#gallery li a img {

width: 373px;

border: 0;

}

#gallery li a:hover {

background: #EEE;

height: 250px;

}

#gallery li a:hover img {

height: 250px;

}

Lösung zur 15. Übung Die Datei uebung15.html





Ein flexibles Layout





Layouts?

Varianten des Layouts

Immer wieder gibt es verschiedenen Arten desÄ

Layouts. Welche auch immer wieder sehr kontrovers Ä

diskutiert werden.

Festes Layout

Das fixe Layout basiert auf Breitenangaben mit Ä

absoluten Werten. Bei einer Breite von 700 Pixel Ä

wird es immer – egal auf welchem Medium – so Ä

dargestellt.

Flexibles Layout

Das flexible Layout basiert auf Breitenangaben Ä

mit relativen (Prozent) Werten. Durch die Angabe Ä

von Prozentzahlen passt sich die Darstellung dem Ä

Fenster eines Browsers an.

Die Datei main15.css /*

Funktion: css-Datei fuer uebung15.html

Erstellt: 01-10-2009 12:11:00, Clemens Gull

*/

/* Basisformate */

body {

margin: 0px 1% 0px 1%;

padding: 0px;

background-color: #F0F0F0;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1em;

color: #000090;

font-weight: normal;

text-align: center;

}

/* Überschriften */

h1 {

float: right;

margin: 0px 0px 0px 0px;

padding: 5px 15px 15px 15px;

background-color: #A8692D;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px;

-moz-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

font-weight: normal;

font-size: 2.5em;

color: #F0DB9C;

}

h2 {

padding: 30px 0px 0px 0px;

margin: 0px;

font-family: Arial, Helvetica, sans-serif;

font-weight: normal;

font-size: 2.2em;

letter-spacing: 0.1em;

color: #A8692D;

}

h3 {

padding: 0px;

margin: 0px;

font-weight: normal;

font-size: 1.6em;

color: #A8692D;

}

/* div-Formate */

#content {

float: left;

width: 90%;

padding: 0px 5% 10px 5%;

margin: 0px;

text-align: left;

background-color: #F0DB9C;

}

div.teaser {

margin: 2% 0px 2% 1%;

padding: 5px 15px 5px 15px;

background-color: #E3E296;

border: 1px solid #B6B917;

border-top-left-radius: 10px;

border-bottom-right-radius: 10px;

-moz-border-radius-topleft: 10px;

-moz-border-radius-bottomright: 10px;

-webkit-border-top-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

color: #687221;

}

div.post {

width: 45%;

float: left;

margin: 0px 0% 0% 1%;

padding: 1% 2% 1% 2%;

border-top-left-radius: 10px;

border-bottom-right-radius: 10px;

-moz-border-radius-topleft: 10px;

-moz-border-radius-bottomright: 10px;

-webkit-border-top-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

background-color: #ECCF90;

color: #687221;

}

div.post p {

padding: 5px 0px;

margin: 0px;

text-align: justify;

}

Lösung zur 16. Übung Die Datei uebung16.html





Polaroid-Effekt mit CSS





Bilder mit Polaroid-Effekt





Eiffelturm





Jardin du Luxembourg





La Defense





Louvre mit Pyramiden





Bistro bei Notre Dame





Axe historique





Die Datei main16.css /*

Funktion: css-Datei fuer uebung15.html

Erstellt: 01-10-2009 12: 11: 00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #C0C0C0;

font-family: "Comic Sans MS", Georgia, Ä

"Times New Roman", Times, serif;

font-size: 1em;

color: #000099;

font-weight: normal;

}

/* Überschriften */

h1 {

width: 90%;

padding: 0px 20px 20px 20px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

}

/* Galerie */

div#gallery {

width: 500px;

}

/* Formatierung für die Bilder */

div.polaroid {

float: left;

background-color: #FFFFFF;

margin-left: 10px;

margin-bottom: 13px;

padding: 10px;

border: 1px solid #333333;

border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

font-size: 0.8em;

font-style: italic;

text-align: center;

}

div.polaroid img {

display: block;

margin-bottom: 10px;

border: 1px solid #000000;

width: 130px;

}

Lösung zur 17. Übung Die Datei uebung17.html





Kreative Bilddarstellung





Kreative Bilddarstellung







Eiffelturm





Jardin du Luxembourg

Freilebende Gummibärchen gibt es nicht. Man Ä

kauft sie in Packungen an der Kinokasse. Dieser Ä

Kauf ist der Beginn einer fast erotischen und sehr

ambivalenten Beziehung Gummibärchen-Mensch. Ä

Zuerst genießt man. Dieser Genuß Ä

umfaßt alle Sinne. Man wühlt in den Ä

Gummibärchen, man fühlt sie. Ä

Gummibärchen haben eine Konsistenz wie Ä

weichgekochter Radiergummi. Die Tastempfindung geht Ä

auch ins Sexuelle. Das bedeutet nicht unbedingt, Ä

daß das Verhältnis zum Gummibärchen Ä

ein geschlechtliches wäre, denn prinzipiell Ä

sind diese geschlechtsneutral.

Nun sind Gummibärchen weder wabbelig noch Ä

zäh, sie stehen genau an der Grenze. Auch das Ä

macht sie spannend. Gummibärchen sind auf eine Ä

aufreizende Art weich. Und da sie weich sind, kann Ä

man sie auch ziehen. Ich mache das sehr gerne. Ich Ä

sitze im dunklen Kino und ziehe meine Ä

Gummibärchen in die Länge, ganz ganz Ä

langsam.

Die Datei main17.css /*

Funktion: css-Datei fuer uebung16.html

Erstellt: 01-10-2009 12: 11: 00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #FFFFFF;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1em;

color: #000099;

font-weight: normal;

}

/* Überschriften & Absätze */

h1 {

width: 90%;

padding: 0px 20px 20px 20px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

}

p {

padding-top: 7px;

margin-bottom: 5px;

margin-top: 0px;

}

p + p {

padding-top: 5px;

margin-bottom: 5px;

margin-top: 0px;

}

/* Galerie */

div#gallery {

width: 500px;

}

/* Formatierung für die Bilder */

dl {

float: right;

margin: 0px 0px 15px 15px;

padding: 0px;

}

dd {

font-size: 0.8em;

text-align: right;

color: #F0F090;

margin: -29px 10px 5px 0px;

font-style: italic;

}

dt {

padding-top: 10px;

}

dt img {

display: block;

width: 175px;

background: transparent url("../images/bildBack.png") Ä

bottom right no-repeat;

padding: 0px 4px 10px 0px;

}

Lösung zur 18. Übung Die Datei uebung18.html





Ein Zitat in HTML





Ein Zitat in HTML

Freilebende Gummibärchen gibt es nicht. Man Ä

kauft sie in Packungen an der Kinokasse. Dieser Ä

Kauf ist der Beginn einer fast erotischen und sehr Ä

ambivalenten Beziehung Gummibärchen-Mensch. Ä

Zuerst genießt man. Dieser Genuß Ä

umfaßt alle Sinne. Man wühlt in den Ä

Gummibärchen, man fühlt sie. Ä

Gummibärchen haben eine Konsistenz wie Ä

weichgekochter Radiergummi. Die Tastempfindung geht Ä

auch ins Sexuelle. Das bedeutet nicht unbedingt, Ä

daß das Verhältnis zum Gummibärchen Ä

ein geschlechtliches wäre, denn prinzipiell Ä

sind diese geschlechtsneutral.

Nun sind Gummibärchen weder wabbelig noch Ä

zäh, sie stehen genau an der Grenze. Auch Ä

das macht sie spannend.

All2e (Ressourcen)

Gummibärchen sind auf eine aufreizende Art Ä

weich. Und da sie weich sind, kann man sie auch Ä

ziehen. Ich mache das sehr gerne. Ich sitze im Ä

dunklen Kino und ziehe meine Gummibärchen in Ä

die Länge, ganz ganz langsam.

Die Datei main18.css /*

Funktion: css-Datei fuer uebung17.html

Erstellt: 01-10-2009 12: 11: 00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #E0E0E0;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1em;

color: #000099;

font-weight: normal;

}

div#content {

width: 400px;

border: 1px solid #000099;

padding: 10px;

}

/* Überschriften & Absätze */

h1 {

width: 90%;

padding: 0px 20px 20px 20px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

}

p {

padding:0px 0px 10px 0px;

margin: 0px;

font-family: Verdana, serif;

font-size: 0.9em;

}

/* Zitate */

blockquote {

margin: 10px 0px 20px 0px;

padding: 15px 20px 15px 20px;

border: 1px solid #8A8D18;

border-radius: 3px;

-moz-border-radius: 3px;

-webkit-border-radius: 3px;

background-color: #E9E9E9;

color: #A1A61C;

font-family: Verdana, serif;

text-align: right;

}

blockquote p {

font-family: Georgia, "Times New Roman", Times, serif;

font-weight: normal;

font-style: italic;

font-size: 1em;

line-height: 1.1em;

text-align: left;

text-indent: 20px;

padding-top: 10px;

background: transparent url(../images/blockquote.png) Ä

0px 0px no-repeat;

}

blockquote cite {

font-size: 0.8em;

}

Lösung zur 19. Übung Die Datei uebung19.html





Visitenkarte der WebWorker





Eine Visitenkarte als Mikroformat



Agentur WebWorker


Raphael W. Orker






Designweg 17a




5020

Salzburg


Austria




+43 664 5566770


[email protected]




www.webworker.at







Die Datei main19.css /*

Funktion: css-Datei fuer uebung18.html

Erstellt: 01-10-2009 12: 11: 00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #E0E0E0;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1em;

color: #000099;

font-weight: normal;

}

/* Überschriften & Absätze */

h1 {

width: 90%;

padding: 0px 20px 20px 20px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

}



/* Visitenkarte */

div.vcard {

width: 500px;

height: 280px;

background: #84CBDB url(../images/guru_r.png) 15px 10px Ä

no-repeat;

border-radius: 4px;

-moz-border-radius: 4px;

-webkit-border-radius: 4px;

}

div.vcard address {

padding: 30px 20px 30px 100px;

color: #687221;

font-family: Verdana, "MS Sans Serif", sans-serif;

font-weight: normal;

font-style: normal;

font-size: .8em;

}

address .fn,

address .addr,

address .street-address,

address .postal-code,

address .country-name,

address .tel,

address .email,

address .url {

margin-left: 120px;

}

address .org {

padding-left: 50px;

font-size: 1.7em;

font-style: italic;

letter-spacing: 0.2em;

border-bottom: 1px solid #FFFFFF;

}

address .fn,

address a {

color:#53848F;

text-decoration: none;

}

address a:hover {

color:#497085;

text-decoration: underline;

}

address .fn {

display: inline-block;

margin-left: 100px;

padding-top: 20px;

padding-bottom: 20px;

font-size: 1.7em;

color: #74542F;

}

address .tel {

display: inline-block;

padding-top: 20px;

padding-bottom: 20px;

}

address .cell:before {

content: "mobile: ";

}

address .email:before {

content: "eMail: ";

}

address .url:before {

content: "web: ";

}

Lösung zur 20. Übung Die Datei uebung20.html





Schatten mit CSS3





CSS3: Schatten



Der Eiffelturm





Ruhe im Park






La Defense





Die Datei main20.css /*

Funktion: css-Datei fuer uebung20.html

Erstellt: 01-10-2009 12: 11: 00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #E0E0E0;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1em;

color: #000099;

font-weight: normal;

}

/* Überschriften & Absätze */

h1 {

width: 90%;

padding: 0px 20px 20px 20px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

}

/* Schatten */

.rahmen {

border: 1px solid #3333CC;

border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

}

div.picShadow {

display: inline-block;

font-size: 0.8em;

text-align: center;

color: #6666CC;

background-color: #F5F5F2;

padding: 15px;

box-shadow: 4px 4px 2px #6666CC;

-moz-box-shadow: 4px 4px 2px #6666CC;

margin: 0px 0px 20px 10px;

}

div.picShadow img {

display:block;

margin-bottom:10px;

border:1px solid #000099;

}

Lösung zur 21. Übung Die Datei uebung21.html





Schatten mit CSS3





CSS3: Schatten bei der Überschrift



Der Eiffelturm





Ruhe im Park






La Defense





Die Datei main21.css /*

Funktion: css-Datei fuer uebung21.html

Erstellt: 01-10-2009 12: 11: 00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #E0E0E0;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1em;

color: #000099;

font-weight: normal;

}

/* Überschriften & Absätze */

h1 {

width: 90%;

padding: 0px 20px 20px 20px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

text-shadow: 4px 4px 5px #6666CC;

}

/* Schatten */

.rahmen {

border: 1px solid #3333CC;

border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

}

div.picShadow {

display: inline-block;

font-size: 0.8em;

text-align: center;

color: #6666CC;

background-color: #F5F5F2;

padding: 15px;

box-shadow: 4px 4px 2px #6666CC;

-moz-box-shadow: 4px 4px 2px #6666CC;

margin: 0px 0px 20px 10px;

}

div.picShadow img {

display:block;

margin-bottom:10px;

border:1px solid #000099;

}

Lösung zur 22. Übung Die Datei uebung22.html





Deckkraft mit CSS3





CSS3: Deckkraft von Elementen



Der Eiffelturm





Ruhe im Park






La Defense





Die Datei main22.css /*

Funktion: css-Datei fuer uebung22.html

Erstellt: 01-10-2009 12: 11: 00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #E0E0E0;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1em;

color: #000099;

font-weight: normal;

}

/* Überschriften & Absätze */

h1 {

width: 90%;

padding: 0px 20px 20px 20px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

text-shadow: 4px 4px 5px #6666CC;

}

/* Schatten */

.rahmen {

border: 1px solid #3333CC;

border-radius: 6px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

}

div.picShadow {

display: inline-block;

font-size: 0.8em;

text-align: center;

color: #6666CC;

background-color: #F5F5F2;

padding: 15px;

box-shadow: 4px 4px 2px #6666CC;

-moz-box-shadow: 4px 4px 2px #6666CC;

margin: 0px 0px 20px 10px;

}

div.picShadow img {

display:block;

margin-bottom:10px;

border:1px solid #000099;

}

/* Deckkraft anpassen */

.deckkraft {

opacity: 0.2;

-moz-opacity: 0.2;

filter: alpha(opacity=20) /*nur für IE */

}

Lösung zur 23. Übung Die Datei uebung23.html





Mehrspaltiger Textsatz





Mehrspaltiger Textsatz

Freilebende Gummibärchen gibt es nicht.

Man kauft sie in Packungen an der Kinokasse.

Dieser Kauf ist der Beginn einer fast erotischen und

sehr ambivalenten Beziehung Gummibärchen-Mensch.

Zuerst genießt man. Dieser Genuß

umfaßt alle Sinne. Man wühlt in den

Gummibärchen, man fühlt sie.

Gummibärchen haben eine Konsistenz

wie weichgekochter Radiergummi. Die Tastempfindung geht

auch ins Sexuelle. Das bedeutet nicht unbedingt,

daß das Verhältnis zum Gummibärchen ein

geschlechtliches wäre, denn prinzipiell sind diese

geschlechtsneutral.

Freilebende Gummibärchen gibt es nicht.

Man kauft sie in Packungen an der Kinokasse.

Dieser Kauf ist der Beginn einer fast erotischen und

sehr ambivalenten Beziehung Gummibärchen-Mensch.

Zuerst genießt man. Dieser Genuß

umfaßt alle Sinne. Man wühlt in den

Gummibärchen, man fühlt sie.

Gummibärchen haben eine Konsistenz

wie weichgekochter Radiergummi. Die Tastempfindung geht auch ins Sexuelle. Das bedeutet nicht unbedingt,

daß das Verhältnis zum Gummibärchen ein geschlechtliches wäre, denn prinzipiell sind diese geschlechtsneutral.

Freilebende Gummibärchen gibt es nicht.

Man kauft sie in Packungen an der Kinokasse.

Dieser Kauf ist der Beginn einer fast erotischen und

sehr ambivalenten Beziehung Gummibärchen-Mensch.

Zuerst genießt man. Dieser Genuß

umfaßt alle Sinne. Man wühlt in den

Gummibärchen, man fühlt sie.

Gummibärchen haben eine Konsistenz

wie weichgekochter Radiergummi. Die Tastempfindung geht auch ins Sexuelle. Das bedeutet nicht unbedingt,

daß das Verhältnis zum Gummibärchen ein geschlechtliches wäre, denn prinzipiell sind diese geschlechtsneutral.

Die Datei main23.css /*

Funktion: css-Datei fuer uebung23.html

Erstellt: 01-10-2009 12: 11: 00, Clemens Gull

*/

/* Basisformate */

body {

margin: 25px;

background-color: #E0E0E0;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1em;

color: #000099;

font-weight: normal;

}

/* Überschriften & Absätze */

h1 {

width: 90%;

padding: 0px 20px 20px 20px;

margin: 0px;

font-family: Georgia, "Times New Roman", Times, serif;

font-size: 1.75em;

color: #000066;

font-weight: normal;

font-style: italic;

}

.multicolumn {

column-count: 3;

column-gap: 20px;

column-rule: 2px solid #F2F2F5;

-moz-column-count: 3;

-moz-column-gap: 20px;

-moz-column-rule: 2px solid #F2F2F5;

}

[1] Uniform Resource Locator [2] Transfer Control Protocol/Internet Protocol [3] File Transfer Protocol [4] Internet Relay Chat [5] World Wide Web [6] http://www.w3c.org [7] Domäne [8] Rot, Grün und Blau

Stichwortverzeichnis A absolute →, → Abstand innen → Zeichen → AddOn FireBug → GridFox → Add-On GridFox →, → Tail Export → AddOn WebDeveloper → Anker → Aptana Studio AJAX → erweitern → installieren → jQuery → PHP →, → Plug-In → Prototype → Scriptaculous → armenian → ASCII → Attribut → abbr → accesskey → align →, → alt → border →, → cellpadding → cellspacing → class →, →, → colspan → float → height →, →, → href →, →, → id →, → longdesc → media →

name → rel →, → rowspan → src → style → summary → target → type →, → valign →, → width →, → Attribut-Selektor allgemein → exakt → Teil des Werts → teilweise → Wertanfang → Wertende → Wertliste → Ausrichten Grundlinie → links →, → Mitte → oben →, → rechts →, → Texte → unten →, → zentriert →, → auto →, →, →, →, →, →, →, → B background →, → background-attachement → background-color → background-image → background-position → background-repeat → inherit → background-attachement →, → fixed → inherit → scroll → background-color →, → Hex → name → RGB → background-image →, → inherit → none →

url → background-position →, →, → bottom center → bottom left → bottom right → center center → center left → center right → fester Wert → inherit → Prozent → top center → top left → top right → background-repeat →, → inherit → no-repeat → repeat → repeat-x → repeat-y → baseline → before → Benutzerkontensteuerung → Bild Hintergrund →, → block → Block-Element → Blockelement → Blocksatz → blur →, → bold → bolder → border →, → border-color → border-style → border-width → inherit → border-bottom → border-bottom-color → border-bottom-style → border-bottom-width → border-color →, → Hex → inherit → name → RGB → transparent → border-left →

border-left-color → border-left-style → border-left-width → border-radius → border-right → border-right-color → border-right-style → border-right-width → border-style →, → dashed → dotted → inherit → none → solid → border-top → border-top-color → border-top-style → border-top-width → border-width →, → fester Wert → inherit → medium → thick → thin → both → bottom →, →, →, →, → auto → fester Wert → inherit → Prozent → Box inline → Modell → Zeile → Box-Modell → box-shadow → blur → color → horizontaler Offset → vertikaler Offset → Browser →, → FireFox → Internet Explorer →, → C Canvas →, → capitalize → Cascading Stylesheets →

Cascading Style Sheets → center →, → charset → circle → class →, → clear → both → inherit → left → none → right → color →, →, → Hex → name → RGB → column-count → fester Wert →, → column-gap → column-rule → CSS →, → Abstand → Attribut-Selektor (allgemein) → Attribut-Selektor (exakt) → Attribut-Selektor (teilweise) → body-Tag → Deklarationsblock → eingebettete Definition → eingebettetes StyleSheet → Elementgröße → em-Höhe → externes StyleSheet → Farben → Farbwerte → Geschwister-Selektor → h1-Tag → Hierarchie → ID → ID-Selektor → Inch → Kind-Selektor → Klasse → Klassen-Selektor → Kommentar → Kontext-Selektor → Längenwerte → Maßeinheiten → Millimeter → Pica →

positionieren → Prozentwerte → Pseudoelement → Pseudoklasse → Punkt → px-Höhe → Regel → rgb() → Schlüsselwörter → Schrift → Selektor → Selektoren → Spezifität → Typ-Selektor → Überschrift → Universal-Selektor → Vererbung → Werte → x-Höhe → Zahlen → Zentimeter → Zoll → CSS 3 → cursive → cursor → auto → default → inherit → pointer → wait → D dashed → decimal → decimal-leading-zero → default → disc → display →, →, →, → block → inherit → inline → inline-block → none → Document Object Modell →, →, →, →, → Document Type Definition → Domain → dotted → DTD →

durchstreichen → E Ecken rund →, → Eclipse →, →, →, → Aptana Studio installieren → Arbeitsbereich festlegen → Editorfenster → Galileo → installieren → Perspektive → Projekt → Projekt-Explorer →, → Sprachpaket → Sprachpaket installieren → Eigenschaft background → background-attachement → background-color → background-image → background-position → background-repeat → border → border-color → border-radius → border-style → border-width → bottom → box-shadow → clear →, → color → column-count → column-gap → column-rule → content →, → cursor → display → float →, → font-family → font-size → font-style → font-weight → height → left → letter-spacing → line-height → list-style →

list-style-image → list-style-position → list-style-type → margin →, → margin-bottom → margin-left → margin-right → margin-top → max-width → -moz-border-radius → opacity → overflow → padding →, → padding-bottom → padding-left → padding-right → padding-top → position → right → text-align → text-decoration → text-indent → text-shadow → text-transfrom → top → vertical-align → visibility → -webkit-border-radius → width → Element Block →, →, →, → body →, → Breite → Höhe → Inline →, → inline → innerer Abstand → positionieren → Elementfluss →, → Entität → Anführungszeichen → Apostroph → Copyright → et-Zeichen → Euro → festes Leerzeichen → größer als → hoch drei →

hoch zwei → kleiner als → Paragraph → Promille → scharfes s → shy → Umlaute → Warenzeichen → Entwicklungsumgebung → installieren → Escape-Sequenz → F fantasy → Farbe benannt → hexadezimal → Hintergrund → RGB → Text → Vordergrund → Farben definieren → Farbwerte → FireBug →, → Firefox →, → FireFox → Add-On →, → Add-Ons → Firefox FireBug → GridFox → WebDeveloper → first-line → fixed →, → float →, →, →, → inherit → left → nnone → right → Fokus → font-face → font-family →, → cursive → fantasy → inherit → Monospace → sans-serif →

serif → font-size → inherit → large → larger → medium → small → smaller → x-large → x-small → xx-large → xx-small → font-style → inherit → italic → normal → oblique → font-weight → bold → bolder → inherit → lighter → normal → G Galerie vertikal → georgian → Geschwister-Selektor →, → GridFox →, → Großschreibung → H Hash → height →, → auto → inherit → Hex →, → hidden →, → Hintergrundbild → Hintergrundfarbe → Höhe Zeile → Homepage → hover →, → HTML →, → Aufzählung → Bilder →

body → CSS definieren → Definitionsliste → Dokumenttyp → Elementart → Elementfluss → Entität → gruppieren → hervorheben → Hyperlinks → Quelltext → seltene Tags → sortierte Liste → Struktur → Tabellen → Tag → unsortierte Liste → verschachtelte Listen → Zeichensatz → Zitate → HTML-Box → Hypertext → Hypertext Markup Language → I ID-Selektor → inerhit → inherit →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, →, → inline → inline-block →, → Inline-Box → Inline-Element → inside → Installieren Entwicklungsumgebung → Intallieren Aptana Studio → Internet → Internet Explorer → Intranet → italic → J Java → installieren → Runtime Environement → justify →

K Kapitälchen → Kernattribut → class →, → id →, → style → title → Kind-Selektor → Klassen-Selektor → Kleinschreibung → Kommentar → Kontext-Selektor →, →, → L Längenwerte absolut → relativ → large → larger → Laufweite → Layout Spalten → left →, →, →, →, →, → auto → fester Wert → inherit → Prozent → letter-spacing → fester Wert → inherit → normal → lighter → line-height → fester Wert → inherit → normal → Prozent → zahl → line-through → links → linksbündig → Liste Definitionen → sortiert → unsortiert →, →, →, → verschachtelt → list-style → inherit →

list-style-image → list-style-position → list-style-type → list-style-image →, →, → inherit → none → url → list-style-position →, → inherit → inside → outside → list-style-type →, →, → armenian → circle → decimal → decimal-leading-zero → disc → georgian → inherit → lower-alpha → lower-greek → lower-latin → lower-roman → none → square → upper-alpha → upper-latin → upper-roman → local → lower-alpha → lowercase → lower-greek → lower-latin → lower-roman → M margin →, →, → auto → margin-bottom → margin-left → margin-right → margin-top →, → max-width → fester Wert → inherit → none → Prozent → medium →, →

middle → Mikroformate → Monospace → -mozborder-radius → N name →, →, → Navigation → Registerkarten → none →, →, →, →, →, →, →, →, → no-repeat → normal →, →, →, → O oblique → Offset horizontal →, → vertikal →, → opacity → fester Wert → outside → overflow → auto → hidden → inherit → scroll → visible → overline → P padding →, → Parameter font-face → Perspektive Aptana → pointer → position → Position absolute → position absolute → Position fixed → position fixed → inherit → Position links →

oben → rechts → relative → position relative → Position static → position static → Position unten → Positionierung → Projekt-Explorer → Protokoll FTP → http →, → IRC → TCP/IP → Telnet → Usenet → Prozent →, →, →, →, →, →, →, → Pseudeoeigenschaft → Pseudoeigenschaft hover → Pseudoelement →, →, → after → before → first-child → first-line →, → hover → Pseudoklasse → active → focus → hover → link → visited → R Rahmen → Art → Breite → dick → dünn → durchgezogen → gestrichliert → punktiert → Stil → rechtsbündig →

Registerkarten → relative → repeat → repeat-x → repeat-y → RGB →, →, → right →, →, →, →, →, →, →, →, → auto → fester Wert → inherit → Prozent → S sans-serif → Schriftart eigene → Schriftfarbe → Schrift festlegen → scroll →, → Selektor → Attribut (allgemein) → Attribut (exakt) → Attribut (teilweise) → Geschwister →, →, → ID → Kind → Klasse → Kontext →, →, →, →, →, → Typ → universell → Semantik → serif → small → smaller → solid → Spalten zwei → Spezifität → square → static →, →, →, →, → StyleSheet eingebettet → extern → T Tabelle Zeile → Zelle →

Tag → a →, →, →, →, →, → abbr → acronym → address → Arten → Attribut → blockquote →, →, → body →, →, →, →, →, →, → br → cite →, → code → dd →, → del → dfn → div →, →, →, →, →, →, →, →, →, →, → dl →, →, → dt → em → h1 →, →, →, →, → h1 – h6 → h2 →, →, →, → head →, →, → html →, → img →, →, → ins → kbd → Kernattribut → li →, →, →, →, → link →, → ol →, → p →, →, →, →, →, →, → pre → q→ samp → span →, →, → strong → style → table →, → td →, → title → tr → ul →, →, →, →, →, →, → var → wbr → Text ausrichten →, → auszeichnen →

Blocksatz → durchstreichen → einrücken → linksbündig → rechtsbündig → unterstreichen → zentrieren → text-align →, → center → inherit → justify → left → right → text-decoration → line-through → none →, → overline → underline → Textfarbe → text-indent → fester Wert → Prozent → text-shadow → blur → color → horizontaler Offset → vertikaler Offset → text-transform → capitalize → lowercase → none → uppercase → thick → thin → top →, →, →, → auto → fester Wert → inherit → Prozent → transparent → Typ-Selektor → U Überschrift → underline → Universal-Selektor → unterstreichen → upper-alpha →

uppercase → upper-latin → upper-roman → URL →, →, →, →, → UTF-8 → V Vererbung → vertical-align → baseline → bottom → fester Wert → inherit → middle → Prozent → top → Viewport →, → viewport → Viewport →, →, → visibility → hidden → inherit → visible → visible →, → Visitenkarte → Vordergrundfarbe → W W3C →, → wait → WebDeveloper → -webkit-border-radius → WebSeite → WebServer → WebSite → Wert fest →, →, →, →, →, →, →, →, →, →, →, →, → fester → prozent → Widget → width →, → auto → inherit → WWW → X x-large → x-small →

xx-large → xx-small → Z zahl → Zeichen Abstand → Zeichensatz ASCII → UTF-8 → Zeile Höhe → Zeilenbox → zentrieren → Zitat kurz → lang → Quelle →

Bibliografische Information der Deutschen Bibliothek

Die Deutsche Bibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte Daten sind im Internet über http://dnb.ddb.de abrufbar. Hinweis: Alle Angaben in diesem Buch wurden vom Autor mit größter Sorgfalt erarbeitet bzw. zusammengestellt und unter Einschaltung wirksamer Kontrollmaßnahmen reproduziert. Trotzdem sind Fehler nicht ganz auszuschließen. Der Verlag und der Autor sehen sich deshalb gezwungen, darauf hinzuweisen, dass sie weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte Angaben zurückgehen, übernehmen können. Für die Mitteilung etwaiger Fehler sind Verlag und Autor jederzeit dankbar. Internetadressen oder Versionsnummern stellen den bei Redaktionsschluss verfügbaren Informationsstand dar. Verlag und Autor übernehmen keinerlei Verantwortung oder Haftung für Veränderungen, die sich aus nicht von ihnen zu vertretenden Umständen ergeben. Evtl. beigefügte oder zum Download angebotene Dateien und Informationen dienen ausschließlich der nicht gewerblichen Nutzung. Eine gewerbliche Nutzung ist nur mit Zustimmung des Lizenzinhabers möglich. © 2012 Franzis Verlag GmbH, 85540 Haar Alle Rechte vorbehalten, auch die der fotomechanischen Wiedergabe und der Speicherung in elektronischen Medien. Das Erstellen und Verbreiten von Kopien auf Papier, auf Datenträgern oder im Internet, insbesondere als PDF, ist nur mit ausdrücklicher Genehmigung des Verlags gestattet und wird widrigenfalls strafrechtlich verfolgt. Die meisten Produktbezeichnungen von Hard- und Software sowie Firmennamen und Firmenlogos, die in diesem Werk genannt werden, sind in der Regel gleichzeitig auch eingetragene Warenzeichen und sollten als solche betrachtet werden. Der Verlag folgt bei den Produktbezeichnungen im Wesentlichen den Schreibweisen der Hersteller. Lektor: Franz Graser

EPUB-Bearbeitung und Konvertierung: www.goebel-software.com

Coverart & -design: www.ideehoch2.de ISBN 978-3-645-22039-2

Das Franzis-Praxisbuch für innogy SmartHome Prinz, Nicholas 9783645224581 191 Seiten

Titel jetzt kaufen und lesen HOLEN SIE ALLES AUS IHREM INNOGY® SMARTHOME HERAUS Das Franzis-Praxisbuch für innogy® SmartHome ist das Standardwerk für alle, die das Maximum aus ihrer innogy®-SmartHome-Hardware

herausholen wollen. Es stellt das innogy®-SmartHome-System und dessen Komponenten ausführlich vor und zeigt in mehreren praxisnahen Projekten dessen vielfältige Einsatzmöglichkeiten. Es erklärt in verschiedenen Szenarien anschaulich und auch für Einsteiger verständlich, wie sich die intelligenten Steckdosen, Sensoren und Steuereinheiten optimal kombinieren und mit anderen Smart-Home-Geräten wie etwa Amazons Alexa-Lautsprecher Echo verbinden lassen. Funktion, Aufbau und Systematik des innogy®SmartHome-Systems werden anhand anschaulicher Grafiken verständlich erklärt. Titel jetzt kaufen und lesen

Hacking im Web 2.0 Schäfers, Tim Philipp 9783645224680 497 Seiten

Titel jetzt kaufen und lesen Der Erfolg des E-Commerce hat auch seine Schattenseiten: Hackerangriffe im Web gehören inzwischen zum Alltag. Es geht dabei nicht nur um unsichere Firewalls oder Fehler in Betriebssystemen, häufig stellt die selbst programmierte

Webapplikation das größte Einfallstor dar. Um sich vor Hackern zu schützen, ist es wichtig, wie ein Hacker zu denken. In diesem Buch lernen Sie die häufigsten Angriffsmethoden kennen und erhalten Tipps, wie Sie sich dagegen schützen können. Analysieren Sie Ihren Programmcode auf Schwachstellen und schließen Sie die Lücken gleich in der Implementierungsphase. Die wichtigsten Angriffsvektoren Durch die Kombination verschiedenster Technologien wie Browser, HTML, JavaScript, PHP, Java und SQL in Webanwendungen sind die potenziellen Schwachstellen quasi unzählbar. Ob SQL-Injection, Cross-Site-Scripting oder SessionHijacking: Lernen Sie die Funktionsweise dieser Angriffe kennen, stellen Sie Ihr Können beim Angreifen der Testumgebung unter Beweis und schützen Sie sich mit den aufgeführten Tipps erfolgreich vor Angriffen. Werkzeuge kennen und nutzen Entwickler sind keine Sicherheitsexperten und können nicht jede Schwachstelle der eingesetzten Programmiersprache und Bibliotheken kennen. Umso wichtiger ist es, die entstandene Webanwendung auf ihre Schwachpunkte zu testen. Schäfers stellt in einem ausführlichen Anhang zahlreiche Werkzeuge vor, mit denen Sie effektiv nach Schwachstellen suchen können. Titel jetzt kaufen und lesen

Kaufmann und Kauffrau im ECommerce Schmitt, Bernd 9783645224628 345 Seiten

Titel jetzt kaufen und lesen Das Handbuch für Ausbildung und BerufDieses Buch ist ein Muss für alle angehenden und praktizierenden E-Commerce-Kaufleute:Es vereint die Theorie aller drei Lehrjahre des neuen Ausbildungsberufs

"Kaufmann/Kauffrau im E-Commerce" mit einem ergiebigen Praxisteil, den Sie so wahrscheinlich in keinem klassischen Lehrbuch finden.Auszubildende bekommen einen Rundumblick über die Inhalte ihrer Lehre und können sich mit zahlreichen Übungen effizient auf die Abschlussprüfung vorbereiten. Allen, die bereits im E-Commerce tätig sind, vermittelt das Buch den neu eingeführten Wissensstandard ihrer Berufsgruppe. Das macht "Kaufmann und Kauffrau im E-Commerce" zu einem unverzichtbaren Begleiter für Azubis und Berufstätige. Aus dem Inhalt:Die Theorie – Wissen für ECommerce-Kaufleute aus allen drei LehrjahrenDie Praxis – ShopBetreuung im AlltagDie Prüfung – Vorbereitung auf die AbschlussprüfungOnline-Sortimente gestalten und die Beschaffung unterstützenOnline-Marketing-Maßnahmen umsetzen und bewertenZahlungssysteme auswählen, testen und anwendenDie EU-Datenschutz-Grundverordnung (EU-DSGVO) umsetzenEinen kostenlosen Übungsshop für Zuhause einrichten Titel jetzt kaufen und lesen

Kamerabuch Sony RX10 IV Nagel, Michael 9783645224574 256 Seiten

Titel jetzt kaufen und lesen Die RX10 IV ist die perfekte High-End-Bridge-Kamera für jede Aufnahmesituation, egal ob Makro- und Supertele benötigt werden. Die RX10 IV ist die perfekte Reisekamera und eine gleichwertige Alternative zu einer Systemkamera: Immer noch kompakt, ersetzt sie mit dem Superzoom bis 600 mm (Referenz Kleinbildformat) einen ganzen Objektivpark und das bei bestechender Qualität. Die SONY RX10 IV bietet dem anspruchsvollen Fotografen neben

hochklassigen Automatiken ein Maximum an manuellen und individuellen Einstellmöglichkeiten. Diese technische Vielfalt ist Fluch und Segen zugleich – und will beherrscht werden. Und hier setzt dieses Buch an: Es bietet eine fachlich ehrliche und vor allem kritische Auseinandersetzung mit der neuen Sony RX10 IV. Lassen Sie die Automatikmodi hinter sich und lernen Sie die Kamera mit ihren außergewöhnlichen Finessen und Möglichkeiten wirklich kennen. Michael Nagel zeigt Ihnen anschaulich den Weg zum optimalen Kamerasetup, so dass Sie jede Bildidee sofort umsetzen können. Das Ziel ist erreicht, sobald Sie dieses Buch nicht mehr zur Unterstützung benötigen. Bis dahin ist es das wichtigste Zubehör für Ihre Sony RX10 IV. Titel jetzt kaufen und lesen

EQUI Animo Haas, Wiebke 9783645205856 320 Seiten

Titel jetzt kaufen und lesen Lassen wir Wiebke Haas einfach in über 220 ganz besonderen Fotografien von Pferden sprechen und vielleicht gelingt ein kleiner Einblick in die Seele dieser wundervollen Individuen.Dieses Buch ist ein Bildband, kein Lehrbuch, keine Anleitung – es ist eine Hommage an die Schönheit der Pferde, ein Buch der Muße für jeden Pferdefreund.In vier Chaptern zeigt Wiebke Haas ihre ganz persönliche Welt der Pferde, die ihr ganzes Leben bestimmen: „In meinem Leben dreht sich alles um Pferde. Ich weiß selber gar nicht genau, wie es dazu gekommen ist, denn für mich fühlt es sich an, als wäre ich bereits als »Pferdemensch« auf die Welt gekommen. Sicherlich wird es den meisten Pferdefreunden und Pferdehaltern

ähnlich gehen. Kein Tag in meinem Leben vergeht, in dem ich mich nicht mit den Tieren beschäftige. Im Übrigen ist es mir ein Rätsel, warum nicht alle Menschen auf der Welt mit dem »Pferdevirus« infiziert sind.“Chapter I - EQUUS – Indoor- und Studioporträts von einzigartiger Intensität. Diese Art zu fotografieren ist das ganz Spezielle und Unverkennbare an Wiebke Haas, die weltweit Anerkennung in Form von zahlreichen Auszeichnungen erhalten hat. „Die Arbeit mit Pferden im Studio bedeutet für mich vor allem eines: mich voll und ganz auf mein Gegenüber einzulassen. Umgebungsfaktoren, wie Wetter oder Hintergrund, spielen keine Rolle. Das ganze Setting ist auf das Wesentliche reduziert – auf das Pferd als Motiv selbst.“Chapter II - HORSESTYLE – oder ganz einfach: Pferde haben ihren eigenen Kopf, und der ist ganz unverkennbar individuell, so wie der Charakter jedes Pferdes. „Pferde nicht nur abzubilden, sondern richtige, fast schon menschliche Posen aus ihnen herauszulocken, ist eine meiner größten Leidenschaften. Wichtig ist es mir bei diesem Projekt vor allem, dass die Pferde nicht nur ihre Mähnen schütteln, sondern der Eindruck einer echten Frisur entsteht. Gesichtsausdruck und Choreografie der Haare entstehen dabei nicht zufällig, sondern sind sorgsam geplant und ausgewählt. So unterschiedlich die Stars der Horsestyle-Serie sind, so verschieden sind auch ihre Charaktere.“Chapter III - HOOFBEATS – der Hufschlag, der Rhythmus der Hufe lässt unser Herz pulsieren und uns eine einzigartige Verbindung zu diesen edlen Geschöpfen finden.„Die Bilder im Freien stellen für einen Fotografen eine ganz andere Herausforderung dar als Shootings mit Kunstlicht. Dabei gilt es, den Hintergrund passend zum Motiv wirken zu lassen. Ich muss mich nach Tageszeit und Licht richten und das Pferd in einem viel

größeren Radius dorthin lenken, wo ich es brauche. Dabei gilt es vor allem, die Models so zu motivieren, dass sie sich freiwillig von ihrer temperamentvollen, starken Seite zeigen oder dass sie mir bei Porträtaufnahmen einen ganz intensiven Blick schenken.“Chapter IV - WILD THINGS – ja, es gibt sie noch, die vollkommen frei in der Wildbahn lebenden Pferde. Frei von Menschen und der damit verbundenen Domestikation. Und doch gibt es eine Verbindung, ein unsichtbares Band zwischen Mensch und Animalis.„Ich habe mich in meinem Leben noch nie so sicher gefühlt wie direkt in einer Pferdegruppe. Die Wildpferde sind hoch sensibel und nehmen ihre Umgebung sehr genau wahr. Diese Sensibilität ist heimischen Pferden oftmals abtrainiert worden.“Großformatiger Bildband mit über 220, teils preisdotierten Pferde-Porträts von Wiebke Haas Titel jetzt kaufen und lesen