Webseiten erstellen für Einsteiger - Amazon S3...7 Inhalt Vorbemerkungen ..... 15 t r a t S m e d r o 1V..... 21 1.1 Wie kommt die Seite aus dem Internet auf meinen

Daniel Mies

Webseiten erstellen für EinsteigerSchritt für Schritt zur eigenen Website

1514.book Seite 1 Dienstag, 5. Januar 2010 11:02 11

Auf einen Blick

1 Vor dem Start ...................................................................... 21

TEIL I Grundlagen

2 Welche Aufgaben hat HTML? ............................................... 39

3 Wie gestalten wir unsere Webseite mit CSS? ........................ 61

TEIL II Praxis

4 Einer Webseite mit HTML Struktur verleihen ........................ 81

5 Webseiten mit CSS gestalten ................................................ 169

6 jQuery – mehr Usability und Animation ................................ 237

7 Suchmaschinenoptimierung ................................................. 275

8 Der letzte Schliff ................................................................... 287

TEIL III Referenz

A HTML .................................................................................. 305

B CSS ...................................................................................... 323

C jQuery .................................................................................. 343


7

Inhalt

Vorbemerkungen .......................................................................................... 15

1 Vor dem Start ................................................................................ 21

1.1 Wie kommt die Seite aus dem Internet auf meinen Computer? .......... 211.2 Webspace .......................................................................................... 231.3 Unser Handwerkszeug ........................................................................ 23

1.3.1 Editor .................................................................................... 241.3.2 FTP-Programm ...................................................................... 261.3.3 Browser ................................................................................. 281.3.4 Firebug .................................................................................. 28

1.4 Eine Seite ins Internet stellen ............................................................. 301.4.1 Eine Verbindung mit dem Server herstellen ........................... 301.4.2 Ordnerstrukturen .................................................................. 331.4.3 Eine Datei ins Internet laden ................................................. 331.4.4 Unsere erste Seite im Internet ............................................... 34

1.5 Ausblick ............................................................................................. 36

TEIL I Grundlagen

2 Welche Aufgaben hat HTML? .................................................... 39

2.1 Trennung von Inhalt, Layout und Animation ...................................... 392.2 Was ist HTML? ................................................................................... 392.3 Grundregeln für die Verwendung von HTML ...................................... 41

2.3.1 Tags und Elemente ................................................................ 412.3.2 Tags ...................................................................................... 412.3.3 Elemente ............................................................................... 412.3.4 Attribute ............................................................................... 422.3.5 Verschachtelung .................................................................... 432.3.6 Block- und Inline-Elemente ................................................... 442.3.7 Kommentare ......................................................................... 452.3.8 Zusammenfassung ................................................................. 46

2.4 »Hallo Welt« – unsere erste Webseite ................................................ 472.5 Grundaufbau einer HTML-Seite .......................................................... 48

2.5.1 Doctype ................................................................................ 482.5.2 <html> .................................................................................. 51


Inhalt

8

2.5.3 <head> .................................................................................. 522.5.4 <body> .................................................................................. 55

2.6 Dateibenennung und Pfadangaben in HTML ...................................... 552.6.1 Dateibenennung .................................................................... 552.6.2 Verknüpfungen und Pfadangaben in HTML ........................... 552.6.3 Absolute Pfadangaben ........................................................... 562.6.4 Pfadangaben relativ zur Basis ................................................. 572.6.5 Relative Pfadangaben ............................................................ 572.6.6 Beispiele ................................................................................ 58

2.7 Ausblick ............................................................................................. 59

3 Wie gestalten wir unsere Webseite mit CSS? ....................... 61

3.1 Was sind CSS? .................................................................................... 623.1.1 Wie ist eine CSS-Angabe aufgebaut? ..................................... 633.1.2 Was sind Eigenschaften? ........................................................ 643.1.3 Was ist ein Selektor? ............................................................. 643.1.4 Vererbung ............................................................................. 69

3.2 HTML mit CSS verknüpfen ................................................................. 713.3 Ein Basis-Stylesheet ............................................................................ 76

3.3.1 Der HTML-Teil ...................................................................... 763.3.2 Unsere CSS-Grundlage ........................................................... 76

3.4 Ausblick ............................................................................................. 78

TEIL II Praxis

4 Einer Webseite mit HTML Struktur verleihen ........................ 81

4.1 Mit »div«-Containern Bereiche festlegen ............................................ 814.1.1 Besonderheiten ..................................................................... 854.1.2 Anordnung mit CSS ............................................................... 864.1.3 Was haben wir bisher getan? ................................................. 93

4.2 Inhalte einfügen ................................................................................. 944.2.1 Texte in eine HTML-Datei einfügen ....................................... 944.2.2 Zeilenumbrüche und Trennlinien ........................................... 954.2.3 Leerzeichen ........................................................................... 954.2.4 Text mit CSS formatieren ....................................................... 95

4.3 Die Inhalte mit Überschriften strukturieren ........................................ 974.4 Webseitenkrankheiten: »Divitis«, »Classitis« und »IDitis« .................... 1004.5 Unsere Webseite mit Links vernetzen ................................................. 103

4.5.1 Aufbau eines Links ................................................................ 103


Inhalt

9

4.5.2 Links zu anderen Seiten ......................................................... 1034.5.3 Zielfenster festlegen .............................................................. 1044.5.4 Der Titel des Links ................................................................. 1044.5.5 Links innerhalb der eigenen Seite .......................................... 1054.5.6 Anker .................................................................................... 105

4.6 Mit Listen die Seite gliedern .............................................................. 1084.6.1 Unsortierte Listen .................................................................. 1094.6.2 Sortierte Listen ...................................................................... 1094.6.3 Definitionslisten .................................................................... 1104.6.4 Gestaltung von Listen mit CSS ............................................... 111

4.7 Die Texte auf unserer Webseite mit Bildern aufwerten ....................... 1124.8 Tabellen richtig einsetzen ................................................................... 115

4.8.1 Beispiel: Layout mit Tabellen oder Layout mit »div« ............... 1154.8.2 Sollen wir nun gar keine Tabellen verwenden? ....................... 1174.8.3 Eine einfache Tabelle ............................................................. 1184.8.4 Zellen verbinden ................................................................... 1194.8.5 Attribute für die Tabellengestaltung ...................................... 1204.8.6 Weitere Möglichkeiten bei der Tabellengestaltung ................ 1214.8.7 Tabellenbeschriftung ............................................................. 1264.8.8 Gestaltung der Tabelle mit CSS .............................................. 126

4.9 Interaktion und Kommunikation mit Formularen ................................ 1284.9.1 Formulare anlegen ................................................................. 1284.9.2 input ..................................................................................... 1294.9.3 Auswahllisten ........................................................................ 1334.9.4 Elemente mit »label« gruppieren ........................................... 1354.9.5 Eingabebereiche .................................................................... 1354.9.6 Buttons ................................................................................. 1364.9.7 Weitere Möglichkeiten .......................................................... 138

4.10 Unsere HTML-Datei – die wichtigsten Elemente in einer Datei ........... 1394.10.1 Der Rahmen .......................................................................... 1394.10.2 Die Navigation ...................................................................... 1414.10.3 Der Titel der Seite ................................................................. 1504.10.4 Das Banner ............................................................................ 1514.10.5 Die Infoboxen ....................................................................... 1524.10.6 Der Inhaltsbereich ................................................................. 1554.10.7 Die Seitenleiste ..................................................................... 1624.10.8 Der Fußbereich: weitere Informationen übersichtlich

gegliedert .............................................................................. 1654.11 Was haben wir erreicht? ..................................................................... 167


Inhalt

10

5 Webseiten mit CSS gestalten .................................................... 169

5.1 Einheiten, Farben und Hintergrundwissen .......................................... 1695.1.1 Einheiten ............................................................................... 1695.1.2 Prozentuale Angaben ............................................................ 1715.1.3 Farbangaben ......................................................................... 1715.1.4 Das Box-Modell .................................................................... 1745.1.5 Aufbau des Stylesheets .......................................................... 1765.1.6 CSS-Eigenschaften mit mehreren Werten ............................... 177

5.2 Überblick über die Möglichkeiten mit CSS ......................................... 1785.3 Schrift und Textbild ............................................................................ 178

5.3.1 Schrift ................................................................................... 1795.3.2 Text ....................................................................................... 1845.3.3 Listen .................................................................................... 185

5.4 Rahmen und Abstände ....................................................................... 1875.4.1 Rahmen ................................................................................. 1885.4.2 Außenabstände ..................................................................... 1905.4.3 Innenabstände ....................................................................... 190

5.5 Hintergrundbilder und -farbe ............................................................. 1915.5.1 Positionieren ......................................................................... 1945.5.2 Automatische Inhalte ............................................................ 2045.5.3 Pseudoelemente und -klassen ............................................... 204

5.6 In der Praxis: Gestaltung unserer Webseite ........................................ 2075.6.1 Grundformatierungen ............................................................ 2075.6.2 Das Schriftbild ....................................................................... 2085.6.3 Formatierung der HTML-Elemente ........................................ 2115.6.4 Hilfsklassen ........................................................................... 2155.6.5 Navigation ............................................................................. 2165.6.6 Der Titel ................................................................................ 2205.6.7 Banner .................................................................................. 2205.6.8 Der Inhaltsbereich ................................................................. 2215.6.9 Die Seitenleiste ..................................................................... 2305.6.10 Der Fußbereich ...................................................................... 232

5.7 Ausblick ............................................................................................. 236

6 jQuery – mehr Usability und Animation .................................. 237

6.1 Was ist JavaScript, und was sind Frameworks? ................................... 2376.1.1 JavaScript .............................................................................. 2376.1.2 Frameworks: jQuery statt JavaScript ...................................... 239

6.2 jQuery-Grundlagen ............................................................................ 241


Inhalt

11

6.3 Möglichkeiten, die jQuery uns bietet ................................................. 2486.3.1 Selektoren ............................................................................. 2486.3.2 Attribute auslesen, hinzufügen und entfernen ....................... 2516.3.3 Manipulation von Elementen ................................................ 2536.3.4 Mit jQuery CSS manipulieren ................................................. 2566.3.5 Ereignisse mit jQuery steuern ................................................ 2576.3.6 Professionelle Effekte mit jQuery einfügen ............................. 2596.3.7 Kommentare in jQuery einfügen ............................................ 2616.3.8 Weitere Möglichkeiten mit jQuery ........................................ 261

6.4 Mit jQuery unsere Seite aufwerten ..................................................... 2626.4.1 Infoboxen mit jQuery ............................................................ 2626.4.2 Artikel ein- und ausblenden .................................................. 2666.4.3 Kommentarfeld ..................................................................... 268

6.5 Das Zauberwort AJAX ........................................................................ 2716.5.1 Dateien mit ».load()« importieren .......................................... 2716.5.2 Darstellung bei deaktiviertem JavaScript ................................ 2726.5.3 Alternative Inhalte einfügen und mit jQuery wieder

entfernen .............................................................................. 2736.6 Ausblick ............................................................................................. 274

7 Suchmaschinenoptimierung ....................................................... 275

7.1 BMW & Google ................................................................................. 2767.2 Optimierung der eigenen Internetseite für Suchmaschinen ................. 277

7.2.1 Warum Links so wichtig sind ................................................. 2787.2.2 Standardkonformer Code ....................................................... 2797.2.3 Wichtige Angaben im <head> ............................................... 2807.2.4 Vorgaben für den Webcrawler ............................................... 282

7.3 Ausblick ............................................................................................. 285

8 Der letzte Schliff ........................................................................... 287

8.1 Eine Webseite für alle Browser optimieren ......................................... 2878.1.1 MultipleIE – die Webseite in allen Versionen des

Internet Explorers betrachten ................................................ 2888.1.2 CSS-Hacks – im Stylesheet andere Browser ausschließen ........ 2908.1.3 Sinnvoller Einsatz von Kommentaren ..................................... 2928.1.4 Conditional Comments – ein eigenes Stylesheet für den

Internet Explorer ................................................................... 2928.2 Unsere Seite für den Internet Explorer optimieren .............................. 294

8.2.1 Transparente PNGs im Internet Explorer 6 ............................. 295


Inhalt

12

8.3 Barrierefreiheit – Webseiten »einfach für alle« .................................... 2968.3.1 Wie sehen andere meine Seite? ............................................. 2978.3.2 Zusätzliche Navigationselemente einbinden ........................... 2978.3.3 Tabindex und Accesskeys – Navigation mit der Tastatur ......... 300

8.4 Ausblick ............................................................................................. 301

TEIL III Referenz

A HTML ............................................................................................... 305

A.1 Struktur Ihrer Webseite ...................................................................... 305A.2 Angaben im head ............................................................................... 306A.3 Text ................................................................................................... 308A.4 Links .................................................................................................. 312A.5 Präsentation ....................................................................................... 312A.6 Listen ................................................................................................. 314A.7 Bilder und Objekte ............................................................................. 315A.8 Tabellen ............................................................................................. 317A.9 Formulare .......................................................................................... 319A.10 Scripteinbindung ................................................................................ 321A.11 Weitere Informationen ....................................................................... 322

B CSS ................................................................................................... 323

B.1 Selektoren, Pseudoelemente und -klassen .......................................... 323B.1.1 Selektoren ............................................................................. 323B.1.2 Selektieren mit Attributen ..................................................... 324B.1.3 Kombinationen von Selektoren .............................................. 325B.1.4 Pseudoelemente .................................................................... 327B.1.5 Pseudoklassen ....................................................................... 327

B.2 Schrift und Text .................................................................................. 328B.3 Rahmen ............................................................................................. 331B.4 Abstände ........................................................................................... 333B.5 Listen ................................................................................................. 334B.6 Farben und Hintergrundbilder ............................................................ 335B.7 Positionierung .................................................................................... 337B.8 Bereiche ein- und ausblenden ............................................................ 338B.9 Höhe und Breite ................................................................................. 339B.10 Automatische Inhalte ......................................................................... 340B.11 Druck ................................................................................................. 340


Inhalt

13

C jQuery .............................................................................................. 343

C.1 Einleitende Hinweise .......................................................................... 343C.2 Selektoren .......................................................................................... 343C.3 Filter .................................................................................................. 344C.4 Attribute ............................................................................................ 347C.5 Filtern und Finden ............................................................................. 348C.6 Manipulation ..................................................................................... 350C.7 CSS .................................................................................................... 351C.8 Ereignisse ........................................................................................... 351C.9 Effekte ............................................................................................... 352

Index ............................................................................................................ 353


21

Bevor wir loslegen können, müssen vorab zwei Schritte erfolgen: Wir benötigen zum einen das grundlegende Handwerkszeug und müssen uns zum anderen Gedanken darüber machen, wie wir unsere Seite ins Inter-net stellen.

1 Vor dem Start

Machen Sie es sich gemütlich, und schalten Sie ruhig schon mal Ihren Rechneran. Im Rahmen dieses Kapitels möchte ich Ihnen das eine oder andere Programmvorstellen, mit dem Sie Ihre Webseite erstellen können. Zunächst interessiert Siesicherlich, wie das alles mit dem Internet und einer Webseite grundsätzlich funk-tioniert, wo Sie selbst Ihre Seite ins Internet stellen können und was Sie dabei be-achten müssen. Daher möchte ich zuerst das Thema »Webspace« mit Ihnen be-sprechen. Danach stelle ich Ihnen ein paar Programme vor, die Ihnen die Arbeitbei der Erstellung von Webseiten erleichtern. Am Ende des Kapitels zeige ichIhnen schließlich, wie Sie eine Seite ins Internet stellen können.

1.1 Wie kommt die Seite aus dem Internet auf meinen Computer?

Wenn Sie Ihren Browser starten und eine URL Ihrer Wahl eingeben, erscheintdort in der Regel nach einigen Sekunden die Seite, die Sie sehen möchten. Wasfür Sie als Benutzer relativ einfach ist, bedeutet für Ihren Computer und den Ser-ver, auf dem die gewünschte Seite liegt, erst einmal Arbeit.

Ihr Computer bekommt von Ihnen zunächst eine URL wie zum Beispielwww.webseiten-buch.de genannt, und diese übersetzt er dann in eine IP-Adresse.Eine IP-Adresse (oft auch nur »IP« genannt) ist so etwas wie eine Hausnummer imInternet, mit der der richtige Server ausgewählt wird. Dieser Server wird darauf-hin »beauftragt«, eine bestimmte Webseite zu liefern.

Wenn der angesprochene Server eine Webseite liefern kann, wird Ihrem Compu-ter zunächst ein Paket mit allerlei Daten zugesendet. Der Browser arbeitet die ge-lieferten Daten anschließend ab: Zunächst wird eine HTML-Datei genommen undvom Browser ausgewertet.


22

Vor dem Start1

In der HTML-Datei (diese lernen Sie in Kapitel 2, »Welche Aufgaben hat HTML?«,richtig kennen) stehen jede Menge Informationen und Inhalte, die auf der Web-seite dargestellt werden sollen, wie zum Beispiel die Texte oder auch Bilder undLinks. Moderne Webseiten beinhalten zudem noch Gestaltungsanweisungen inForm einer CSS-Datei. Die Information, ob es eine CSS-Datei zu der HTML-Dateigibt, steht in eben dieser HTML-Datei.

Mit dem sogenannten Stylesheet (CSS steht für Cascading Style Sheets) wird demBrowser gesagt, wie die Webseite aussehen soll, welche Farbe welcher Teil derWebseite haben und wo was stehen soll. Der Browser interpretiert, was in derCSS-Datei steht, und wandelt die HTML-Elemente dementsprechend um.

Eine weitere Komponente sind dynamische Elemente, die mit JavaScript einge-bunden werden. Mit diesen Elementen können beispielsweise Bereiche ein- undausgeblendet oder auch andere Inhalte in eine Seite geladen werden (mehr dazuerfahren Sie in Kapitel 6, »jQuery – mehr Usability und Animation«).

Das hört sich zunächst sehr umfangreich an, aber Sie werden in diesem BuchSchritt für Schritt den Umgang mit HTML, CSS und jQuery erlernen. Sie werdensehen, dass alle drei Sprachen sehr einfach sind und aufeinander aufbauen.

Damit die fertige Seite schließlich von anderen Benutzern im Internet besuchtwerden kann, benötigen wir außerdem Speicherplatz, sogenannten Webspace.


23

Unser Handwerkszeug 1.3

1.2 Webspace

Webspace liegt auf speziell ausgestatteten Rechnern, die ans Internet angeschlos-sen sind, den Webservern.

Hier gibt es sehr viele Anbieter mit unterschiedlichen Angeboten und natürlichauch Preisen. Daher möchte ich Ihnen einige Ratschläge mit auf den Weg geben,damit Sie wissen, was Sie wirklich benötigen.

Für die Themen, die wir im Buch besprechen, brauchen Sie noch keinen eigenenWebspace. Sie können alle Beispiele ganz normal auf Ihrer Festplatte speichernund dann in Ihrem Browser betrachten.

Anforderungen an den Provider

Für eine einfache Webseite reichen meistens schon 10 MB aus. Sie werden aberwahrscheinlich keinen Provider finden, der Ihnen genau die Menge an Speicher-platz vermietet, die Sie brauchen, und daher können Sie in der Regel eines derkleinsten Pakete nehmen. Ich rate Ihnen, kein Visitenkartenpaket zu nehmen, dadieses in der Regel nur eine Domain und zudem kaum oder sogar überhaupt kei-nen Speicherplatz enthält.

Ausreichende Pakete bekommen Sie bei manchen Anbietern schon ab ca. 2 € imMonat. Sie sollten aber hier nicht nur auf den Preis achten, sondern auch Testbe-richte und Meinungen anderer Kunden berücksichtigen. Halten Sie auch ein Augeauf die Vertragslaufzeit, denn wenn Sie später Ihre Webseite vergrößern oder zueinem anderen Provider umziehen möchten, sollten Sie möglichst flexibel sein.

1.3 Unser Handwerkszeug

Drei Dinge brauchen wir, um unsere Webseite zu erstellen: einen Editor, in demdie Webseitenerstellung erfolgt, ein FTP-Programm, mit dem wir die Dateien insInternet laden, und einen Browser, mit dem wir unsere Seite betrachten könnenund der uns im optimalen Fall auch bei der Erstellung der Webseite hilfreich seinkann.

Ich stelle Ihnen auf den folgenden Seiten Software für Windows, Linux undMac OS X vor. Es gibt sowohl bei den Editoren als auch bei den FTP-Programmenund Browsern sehr viele weitere Programme, und wenn Sie schon Erfahrung miteinem dieser Programme haben, spricht nichts gegen die Verwendung eines sol-chen Programms.


24

Vor dem Start1

Die einzige Ausnahme in diesem Buch ist jedoch der Browser: Die Beispiele inden ersten Kapiteln sind für den Firefox von Mozilla optimiert, und erst am Endedes Buchs zeige ich Ihnen, wie Sie die Seiten für alle weiteren Browser optimie-ren. Dies hat den Grund, dass der Firefox einerseits sehr weit verbreitet undzudem grundsätzlich ein sehr guter Browser ist und dass er andererseits wesent-lich korrekter Webseiten darstellt als der Internet Explorer von Microsoft. WennSie also bisher den Internet Explorer 6 verwendet haben, sollten Sie für die Bei-spiele in diesem Buch den Firefox einsetzen. Wenn Sie einen modernen Browserwie Konqueror, OmniWeb, Opera, Safari, Google Chrome oder den Internet Ex-plorer (Version 7, oder besser 8) verwenden, sollten die Beispiele in Ihrem Brow-ser richtig dargestellt werden.

1.3.1 Editor

Als Erstes brauchen wir ein Programm, in dem wir unsere Webseite erstellenkönnen. Das Schöne an HTML, CSS und JavaScript ist, dass wir hier keine spezi-elle Software kaufen müssen, sondern die Software schon auf unserem Rechnervorinstalliert haben. Jedes Betriebssystem verfügt über einen einfachen Textedi-tor. So können Sie bei Windows beispielsweise auf den einfachen »Editor« zu-rückgreifen, und die Linux-Benutzer unter Ihnen haben gleich mehrere Editorenzur Auswahl.

Wenn Sie einen Editor im Internet suchen, sollten Sie darauf achten, dass dieserSyntax-Highlighting beherrscht. Das bedeutet, dass er HTML, CSS und JavaScriptfarbig hervorhebt, was die Fehlersuche oftmals ziemlich erleichtert und vor allemdie Arbeit einfacher macht. Probieren Sie ruhig mehrere Editoren aus, und be-trachten Sie die vorgeschlagenen Programme als einfache Empfehlungen.

Windows

Unter Windows möchte ich Ihnen den Editor Notepad++ empfehlen. Er bietetneben dem wichtigen Syntax-Highlighting viele nützliche Funktionen, die Ihnendie Arbeit erleichtern. Sie finden die Version 5.6.4 auf der CD zum Buch oderunter notepad-plus.sourceforge.net. Mir persönlich gefallen an diesem Editor dreiAspekte besonders: Er ist sehr einfach gestaltet, er ermöglicht es Ihnen, mit Tabsmehrere Dateien parallel zu bearbeiten, und er besitzt einen integrierten Datei-browser. Sie können also selbst zwischen den Ordnern und Dateien im Pro-gramm hin- und herwechseln.

Eine besondere Funktion rundet Notepad++ ab: Sie können Arbeitsabläufe mitMakros aufnehmen und diese zu jeder Zeit ausführen lassen. So könnten Sie bei-spielsweise Vorlagen als Makro speichern, die von Notepad++ automatisch er-stellt werden, wenn Sie diese benötigen.


25


Linux

Für die unterschiedlichen Linux-Distributionen gibt es unzählige Editoren, diesich für die Erstellung von Webseiten eignen. Auch wenn ich davon ausgehe, dassdie meisten Linux-Benutzer bereits einen Editor haben, mit dem sie arbeiten,möchte ich Ihnen mit BlueFish kurz einen weiteren Editor vorstellen, den ich fürgeeignet halte. BlueFish hat ähnliche Funktionen, die ich schon bei Notepad++

für Windows dargestellt habe. Hinzu kommt, dass BlueFish ein sehr kleines Pro-gramm ist, das zudem sehr schnell arbeitet und Dateien lädt. Darüber hinaus kön-nen Sie FTP-Funktionalitäten integrieren. Sie erhalten BlueFish unter blue-fish.openoffice.nl, wo Sie auch die wichtigsten Informationen für den Downloadfinden.

Abbildung 1.1 »Notepad++« – mehrere Tabs erlauben das Bearbeiten der Dateien in einem Fenster.

Abbildung 1.2 So lassen sich Dateien leichter bearbeiten – die HTML-Elemente (mehr dazu in Kapitel 2, »Welche Aufgaben hat HTML?«) werden farblich hervorgehoben.


26

Vor dem Start1

Mac OS X

Für das Betriebssystem Mac OS X möchte ich Ihnen den Editor Smultron ansHerz legen. Sie finden den Editor auf der CD zum Buch oder im Internet untersmultron.sourceforge.net. Ein besonders nettes Feature bei Smultron sind Snip-pets: Mit diesen können Sie Codebausteine, die Sie häufig verwenden, speichernund wiederverwenden.

1.3.2 FTP-Programm

Mit einem FTP-Programm können Sie alle Dateien auf Ihren Webspace laden. Siesind dabei natürlich nicht nur auf Ihre Homepage beschränkt, sondern können

Abbildung 1.3 Der Editor »BlueFish«

WYSIWYG

Die Abkürzung WYSIWYG steht für »what you see is what you get« und beschreibt Pro-gramme, die während der Erstellung einer Datei anzeigen, wie diese Datei im fertigenZustand aussieht. Textverarbeitungsprogramme wie Microsoft Word arbeiten nach die-sem Prinzip.

Solche Programme gibt es auch zum Erstellen von Webseiten, und trotzdem möchte ichIhnen davon grundsätzlich abraten. WYSIWYG-Editoren produzieren sehr viel Code,den Sie im Endeffekt gar nicht benötigen, und sie tun sich mit der Einbindung von CSSfür die Gestaltung und von JavaScript für die Animation zudem oft sehr schwer.

Sie werden es im Verlauf dieses Buchs sicherlich immer mehr zu schätzen lernen, Web-seiten selbst zu schreiben.


27


auch Dateien auf Ihren Webspace laden, die Sie anderen zur Verfügung stellenmöchten (wenn Sie beispielsweise im Team an einer Präsentation arbeiten).

ASCII- und Binärmodus

Wenn Sie Dateien ins Internet stellen, sollten Sie darauf achten, in welchemModus Sie die Dateien auf den Server hochladen. Es gibt hier den ASCII-Modus,der für Textdateien (wie Ihre HTML-, CSS- und JavaScript-Dateien es sind) geeig-net ist und dafür genutzt werden sollte, und den Binärmodus, der beispielsweisefür Bilddateien oder Word-Dokumente eingesetzt werden sollte.

FileZilla

Das Besondere an dem FTP-Programm FileZilla, das ich Ihnen hier vorstellenmöchte, ist, dass es eine Version für jedes verbreitete Betriebssystem gibt. Dieserleichtert Ihnen die Arbeit natürlich enorm, wenn Sie mit mehreren Betriebssys-temen arbeiten, und macht selbstverständlich auch die Beschreibung hier imBuch wesentlich einfacher. Sie finden FileZilla im Internet unter www.FileZilla.deoder auf der CD zum Buch unter Tools/FileZilla.

Abbildung 1.4 FileZilla – mit diesem FTP-Programm können Sie Dateien ins Internet laden.


28

Vor dem Start1

Wie Sie FileZilla benutzen können, erkläre ich Ihnen im weiteren Verlauf diesesKapitels. Wir werden dann auch unsere erste Seite ins Internet stellen, bevor wiruns anschließend dem Thema »HTML« zuwenden.

1.3.3 Browser

Browser gibt es wie Sand am Meer. Jedes Betriebssystem hat eigene Browser(Windows hat den Internet Explorer, Linux unter anderem den Konqueror undMac wiederum den Safari), die natürlich vollkommen ausreichend sind, um imInternet zu surfen. Das Problem, auf das wir in diesem Buch noch öfter zu spre-chen kommen werden, ist allerdings, dass eine Seite nicht immer von allen Brow-sern gleich dargestellt wird.

Manche orientieren sich dabei an Standards, andere (wie leider sehr häufig derInternet Explorer) schaffen dagegen eigene Standards. Wir werden uns in diesemBuch daher zunächst auf die Erstellung von Webseiten für den Firefox konzen-trieren. Dieser Browser ist weit verbreitet, ist für jedes Betriebssystem verfügbarund orientiert sich sehr stark an den Webstandards.

Nachdem wir unsere Seite für den Firefox erstellt haben, schauen wir uns dieSeite in anderen Browsern an und optimieren diese dementsprechend. So habenwir eine gemeinsame Basis, auf der wir arbeiten können.

1.3.4 Firebug

Gerade wenn Sie anfangen, mit CSS zu arbeiten, werden Sie Firebug zu schätzenlernen. Firebug ist eine kostenlose Erweiterung für Firefox, die Ihnen einige in-teressante Funktionen bietet, auf die ich hier, zumindest auszugsweise, eingehenmöchte.

Auf den ersten Blick können Sie sich mit Firebug »nur« den Quellcode IhrerHTML-, CSS- und JavaScript-Dateien ansehen. Dies ist bei eigenen Projekten inder Regel nicht besonders wichtig, da Sie ja die Originaldateien auf Ihrem Rech-ner haben sollten. Wirklich interessant ist die Möglichkeit, Ihre HTML- und IhreCSS-Dateien live zu editieren. Das heißt, dass Sie, während Sie den Code in Fire-bug ändern, im Browser sehen, was diese Veränderungen bewirken.

Installation von Firebug

Sie können Firebug in Ihrem Firefox installieren, indem Sie auf Extras � Add-ons

klicken und in dem sich dann öffnenden Fenster Erweiterungen wählen (wenndies nicht bereits vorausgewählt ist). Unten rechts finden Sie dann einen LinkErweiterungen herunterladen. Dieser führt Sie zur Seite http://addons.mozilla.org.


29


Der schnellste Weg zu Firebug führt über das Benutzen der Suche. Geben Sie ein-fach in das Suchfenster auf der Mozilla-Seite »Firebug« ein. Auf der Seite mit denSuchergebnissen sollte Firebug an erster Stelle stehen. Klicken Sie einfach auf denNamen Firebug. Der Link führt Sie daraufhin automatisch zur Installationsseite.

Abbildung 1.5 Firebug – Dateien »live« in Firefox bearbeiten

Abbildung 1.6 Das Add-ons-Menü im Firefox. Unten rechts finden Sie den Link, um weitere Add-ons (Erweiterungen) zu installieren.


30

Vor dem Start1

Auf der Installationsseite müssen Sie nur noch auf Installieren klicken, undschon wird Firebug (nach Ihrer Bestätigung, dass Sie die Erweiterung installierenmöchten) installiert. Sie müssen dann lediglich den Browser einmal neu starten,und schon stehen Ihnen Firebug und seine Möglichkeiten zur Verfügung.

1.4 Eine Seite ins Internet stellen

Bevor Sie eine Datei ins Internet laden können, benötigen Sie zunächst entspre-chende FTP-Zugangsdaten. Diese werden Ihnen entweder bereits mitgeteilt,wenn Sie Ihren Webspace vom Provider erhalten, oder sind auf der Administra-tionsoberfläche Ihres Webspace-Anbieters zu finden. Die Zugangsdaten bestehenmindestens aus einer Serveradresse (die häufig mit ftp:// beginnt), einem Benut-zernamen und einem Passwort.

1.4.1 Eine Verbindung mit dem Server herstellen

Damit wir überhaupt Dateien ins Internet laden können, müssen wir eine Ver-bindung zwischen dem Server, auf dem unser Webspace liegt, und unserem Com-

Abbildung 1.7 Firebug auf »addons.mozilla.com«


31

Eine Seite ins Internet stellen 1.4

puter herstellen. Der Server muss schließlich die Dateien, die dort abrufbar seinsollen, erst einmal bekommen.

Wir öffnen dafür unser FTP-Programm (FileZilla) und stellen eine Verbindung zuunserem Server her. Hierfür gibt es zwei Möglichkeiten: eine schnelle Verbin-dung und alternativ den Servermanager.

Schnelle Verbindung

Ganz schnell geht es, wenn Sie die Zugangsdaten für Ihren Webspace oben in dieLeiste eingeben. Dort wird nach Server, Benutzername, Passwort und Port ge-fragt. In den meisten Fällen müssen Sie den Port nicht angeben, ansonsten weistIhr Webspace-Anbieter Sie sicherlich darauf hin.

Wenn Sie nun Ihre Daten eingegeben haben, klicken Sie auf Verbinden. Im obe-ren Fenster Ihres FTP-Programms stehen die »Arbeitsschritte« Ihres FTP-Pro-gramms, die uns aber nicht weiter interessieren. Nur wenn die Verbindung nichtzustande kommt, sollten Sie Ihre Zugangsdaten kontrollieren und prüfen, ob Siealles richtig eingegeben haben.

Servermanager

Die Alternative zur schnellen Verbindung ist der Servermanager, den Sie unterdem Menüpunkt Datei finden. Wenn Sie diesen öffnen, können Sie mehrere Ser-ververbindungen verwalten, was besonders praktisch ist, wenn man mehrere Sei-ten betreut.

Um unsere Verbindung im Servermanager einzurichten, klicken wir zunächst aufNeuer Server und füllen dann die Eingabemaske auf der rechten Seite aus. Dort

Abbildung 1.8 Eine schnelle Serververbindung mit FileZilla einrichten

Abbildung 1.9 Erfolgreiche Verbindung zu einem Server


32

Vor dem Start1

werden die gleichen Daten benötigt wie auch schon bei der schnellen Verbin-dung. Neu ist die Möglichkeit, die Verbindungsart anzugeben. Wenn Sie Ihr Pass-wort nicht ständig neu eingeben möchten, wählen Sie unter Verbindungsart dieOption Normal aus. Wenn Sie sicherstellen möchten, dass kein Unbefugter mitIhrem Rechner auf Ihren Webspace zugreifen kann, sollten Sie hier die OptionNach Passwort fragen auswählen.

Neben den erweiterten Einstellungen, die Sie in der Leiste über den Eingabefel-dern festlegen können, können Sie auch den Servertyp bestimmen. Dieser sollte,wenn Ihr Webspace-Anbieter nichts anderes angibt, FTP – File Transfer Proto-

col sein. Alle weiteren Einstellungsmöglichkeiten benötigen Sie am Anfangnicht.

Abbildung 1.10 Der Servermanager in FileZilla

Abbildung 1.11 Der Servermanager mit den Zugangsdaten für unseren Server


33


Wenn Sie sich nun mit dem Server verbinden möchten, wählen Sie einfach Ver-

binden aus, und schon können Sie, sobald die Verbindung zustande gekommenist, Dateien ins Internet laden.

1.4.2 Ordnerstrukturen

Jetzt, da wir mit unserem FTP-Programm auf unseren Webspace zugreifen kön-nen, schauen wir uns die Möglichkeiten genauer an, die FileZilla uns bietet. Dengrößten Raum in dem Programm nehmen vier Fenster ein, die, wenn Sie mit demServer verbunden sind, Ordner und Dateien anzeigen. Auf der linken Seite findenSie die Ordner, die bei Ihnen auf der Festplatte liegen, und rechts die Dateien aufdem Server. Oben sehen Sie eine Ordnerübersicht und darunter den Inhalt desjeweils ausgewählten Ordners.

1.4.3 Eine Datei ins Internet laden

Natürlich möchten wir auch unsere Dateien und Ordner auf den Server kopieren.Wir haben hier mit FileZilla zwei Möglichkeiten: Wir können entweder eine odermehrere Dateien direkt übertragen oder diese zu einer Warteschlange hinzufü-gen und später, wenn wir alle Dateien in der Warteschlange haben, kompletthochladen.

Dateien direkt hochladen

Wenn Sie eine oder mehrere Dateien direkt hochladen möchten, wählen Sie dieseauf der linken Seite aus, klicken dann mit der rechten Maustaste auf die ausge-wählten Dateien und Ordner und wählen Hochladen aus.

Dies hat den Vorteil, dass Sie sich Ihre Veränderungen direkt online ansehen kön-nen. Gerade wenn Sie mehrere Dateien in einem Ordner oder den komplettenInhalt eines Ordners hochladen möchten, ist diese Variante natürlich praktisch.

Abbildung 1.12 Links die Dateien auf unserem Rechner, rechts die Dateien auf dem Server


34

Vor dem Start1

Dateien zur Warteschlange hinzufügen und dann hochladen

Wenn Sie an mehreren Stellen in unterschiedlichen Ordnern Änderungen vorge-nommen haben, die Sie aber gemeinsam hochladen möchten, sollten Sie diesemit der Funktion Zur Warteschlange hinzufügen hochladen, die Sie ebenfallsüber die rechte Maustaste auswählen können.

Dies hat den Vorteil, dass Sie nicht alle Ordner und Dateien zusammen hochladenmüssen, sondern einzelne Dateien aus unterschiedlichen Ordnern auswählenund diese dann gemeinsam hochladen können.

Wenn Sie Ihre Auswahl getroffen haben, sehen Sie unter den Fenstern mit denOrdneransichten ein Fenster, in dem die entsprechenden Dateien aufgelistetsind. Wenn Sie mit der rechten Maustaste in dieses Fenster klicken, können Siemit Warteschlange abarbeiten alle Dateien gemeinsam hochladen.

Sie können natürlich auch über die Fenster auf der rechten Seite bequem Dateienvom Server auf Ihren PC laden, wenn Sie beispielsweise von einem anderen PCaus Ihre Webseite aktualisiert haben und den aktuellen Stand auch auf IhremRechner haben wollen.

1.4.4 Unsere erste Seite im Internet

Wenn Sie schon Webspace besitzen und dort noch keine Seite online ist, solltenSie diesen Zustand bereits jetzt ändern und eine Visitenkarte ins Internet laden.Dies hat den Vorteil, dass Sie daraufhin im Internet präsent sind und vielleichtdas Glück haben, dass eine Suchmaschine wie Google Ihre Seite bereits findet.

Abbildung 1.13 Unsere Warteschlange im unteren Fenster von FileZilla

Wann lade ich Dateien hoch?

Im Rahmen dieses Buchs überlasse ich es vollkommen Ihnen, wann Sie die Webseite,die wir gemeinsam erstellen werden, auf Ihren Webspace laden. Sie können für sichselbst entscheiden, ob Sie Ihre Besucher an den »Bauarbeiten« teilhaben lassen oder obSie ausschließlich die finale Version ins Internet stellen möchten.

Wir haben in diesem Buch den Vorteil, dass wir auf keinen Server angewiesen sind, umunsere Webseite zu testen, und daher auch alle Dateien ganz normal auf der Festplattespeichern und anschließend im Browser ansehen können.


35


Damit Sie eine Seite ins Internet stellen können, bevor Sie überhaupt wissen, wasSie genau machen müssen, habe ich auf der CD zum Buch eine kleine Webseiteerstellt, die als erste Visitenkarte im Internet ausreichen sollte. Damit Sie dieseauch online verwenden können, befolgen Sie bitte folgende Schritte:

1. Kopieren Sie den Ordner Visitenkarte, den Sie auf der CD unter Code/Kapi-

tel 1 finden, an eine Stelle auf Ihrer Festplatte, die Sie anschließend wieder-finden können. Wenn Sie sich in Ihrem Dateisystem nicht auskennen, kopie-ren Sie den Ordner einfach in das Basisverzeichnis (bei Windows: C:\, beiallen anderen Betriebssystemen: /).

2. Öffnen Sie im Ordner Visitenkarte die Datei index.htm, und passen Sie diebeiden folgenden Zeilen an, indem Sie das fett Markierte durch Ihren Namenersetzen:

<title>Max Mustermann online</title>

...

<h1>Max Mustermann online</h1>

3. Öffnen Sie FileZilla, und wählen Sie im linken Fenster den Ordner aus.

4. Stellen Sie eine Verbindung zu Ihrem Webserver her.

5. Laden Sie die Dateien hoch, aber nicht den Ordner Visitenkarte, sondern nurseinen Inhalt.

6. Öffnen Sie Ihre Seite in Ihrem Browser.

Abbildung 1.14 Eine Übergangsseite


36

Vor dem Start1

1.5 Ausblick

Jetzt, da wir zumindest schon einmal einen Platzhalter für unsere zukünftige Seiteim Internet haben, wenden wir uns den Themen »HTML«, »CSS«, »jQuery« und»Suchmaschinenoptimierung« zu. Ausgestattet mit den notwendigen Program-men, können Sie sich getrost den Grundlagen zuwenden, bevor Sie anschließendIhre Kenntnisse vertiefen.


353

Index

:active 206, 211, 327:after 204, 327:before 204, 327:first-child 328:first-letter 204, 327:first-line 204, 327:focus 206, 211, 300, 328:hover 206, 328:link 206, 211, 328:visited 206, 211, 328@import 74@media 74

A

a 312abbr 308Abstand

margin 334margin-RICHTUNG 334padding 334padding-RICHTUNG 334

acronym 309active 206, 211, 327address 309after 204, 327area 316Artikel 155Attribut

accept 132accesskey 301action 129alt 113border 120cellpadding 121cellspacing 121checked 131class 65cols 136colspan 119content 280disabled 138for 135height 113href 73, 103

Attribut (Forts.)http-equiv 280ID 66maxlength 130media 74method 129multiple 134name 130, 281onclick 241readonly 138rel 73rows 136rowspan 119rules 120size 130src 113, 137style 71tabindex 162, 300target 103, 104title 104type 73, 130value 131width 113

Attribute 120Außenabstand 190

B

b 312background 127, 193, 230, 336background-attachment 192, 335background-color 191, 335background-image 191, 336background-position 193, 336background-repeat 192, 336Barrierefreiheit 296base 307Basis-Stylesheet 76before 204, 327Beispiel 118, 122big 313Bild 112

Alternativtext 113Attribute 113Gestaltung 115


354

Index

Bilder und Objektearea 316img 315map 315object 316param 317

Bildformat 114GIF 114JPG 114PNG 114

Bildgröße 114Blockelement 44, 228blockquote 158, 215, 309body 55, 306border 189, 333border-bottom 126border-color 126, 188, 331border-RICHTUNG 333border-RICHTUNG-color 332border-RICHTUNG-style 332border-RICHTUNG-width 332border-style 188, 332border-width 188, 332bottom 337Box-Modell 174

Beispiel 174im Internet Explorer 175

br 95, 311button 137, 321

C

caption 126, 318cite 102, 158, 215, 309Classitis 100, 101clear 152, 337clip 203, 338code 310col 319colgroup 319color 106, 127, 184, 335Conditional Comments 292content 203, 340CSS

Aufbau 63Eigenschaften (Definition) 64Eigenschaften überschreiben 212Grundlagen 62ID 66

CSS (Forts.)Kaskade 216, 220Klasse 65Kommentar 64mehrere Werte pro Eigenschaft 177Pseudoklassen 106Schrift und Textbild 178Selektor (Definition) 64Text formatieren 95Vererbung 69

CSS-Eigenschaft@import 74@media 74background 127, 193, 230, 336background-attachment 192, 335background-color 191, 335background-image 191, 336background-position 193, 336background-repeat 192, 336border 189, 333border-bottom 126border-color 126, 188, 331border-style 188, 332border-width 188, 332bottom 337clear 152, 337clip 203, 338color 106, 127, 184, 335content 203, 340direction 330display 144, 196, 228, 298, 338float 197, 337font 183, 329font-family 179, 328font-size 96, 181, 329font-style 181, 329font-variant 182, 329font-weight 99, 183, 329height 199, 339left 337letter-spacing 330line-height 96, 184, 329list-style 187, 335list-style-image 187, 334list-style-position 185, 334list-style-type 111, 186, 335margin 190, 334max-height 199, 339max-width 199, 339


355

Index

CSS-Eigenschaft (Forts.)min-height 199, 339min-width 199, 339orphans 340overflow 201, 217, 338padding 111, 127, 190, 334padding-left 166page-break-after 340page-break-before 340page-break-inside 340position 147, 194, 222, 298, 337right 337text-align 121, 184, 330text-decoration 108, 151, 185text-direction 330text-indent 330text-transform 185, 331top 337vertical-align 127, 331visibility 203, 338white-space 331widows 341width 167, 199, 339word-spacing 331z-index 200, 337

CSS-Hack 290!important-Hack 290Attribut-Selektor-Hack 291Kind-Selektor-Hack 290Stern-HTML-Hack 291Tan-Hack 292

D

Dateibenennung 55dd 110, 315del 310dfn 310direction 330display 144, 196, 228, 298, 338div 306Divitis 100dl 110, 314Dokumenttyp 48

Frameset 51Strict 49Transitional 50Varianten 49

Doorway-Seiten 276

Druckorphans 340page-break-after 340page-break-before 340page-break-inside 340widows 341

dt 110, 315

E

Ein-/Ausblendenclip 338display 338overflow 338visibility 338

Elternelement 264em 94, 308

F

Farbangaben 169, 171Farbnamen 173RGB-Farbmodell 171

Farbe/Hintergrundbildbackground 336background-attachment 335background-color 335background-image 336background-position 336background-repeat 336color 335

Filtern/Finden 348first-child 328first-letter 204, 327first-line 204, 327float 197, 337float beenden 152focus 206, 211, 300, 328font 183, 329font-family 179, 328font-size 96, 181, 329font-style 181, 329font-variant 182, 329font-weight 99, 183, 329form 128, 160, 319Formular 128

Attribute 128, 138Auswahlliste 133Beispiel 160


356

Index

Formular (Forts.)Beschriftung 135Button 136, 321Checkbox 130Datei-Upload 132Eingabebereich 135form 319gestalten 228Größe des Eingabefelds 130input 320label 321legend 321option 320Radio-Button 130select 320Sendebutton 162textarea 320vorselektieren 131

Frames 51Framework 239

G

Generische Schriftart 180Gestaltung 126Google-Bomben 276Grundformatierung 207

H

h1 97, 150, 308h2 97, 308h3 97, 308h4 97, 308h5 97, 308h6 97, 308head 52, 305

base 307link 307meta 307style 307title 306

height 199, 339Hilfsklasse 215Hintergrund

mit %-Angabe platzieren 229transparent 220wiederholen 217

Hintergrundbild 191

Hintergrundfarbe 191Höhe/Breite

height 339max-height 339max-width 339min-height 339min-width 339width 339

hover 206, 328Hover-Effekt 206hr 95, 314HTML

Attribut 42CSS einbinden 71Definition 39Element 41Kommentare 45Leerzeichen 95Tag 41Text einfügen 94Überschrift 97Verschachtelung 43

html 305, 317HTML-Elemente

a 312abbr 308acronym 309address 309area 316b 312base 307big 313blockquote 158, 215, 309body 55, 306br 95, 311button 137, 321caption 126, 318cite 102, 158, 215, 309code 310col 319colgroup 319dd 110, 315del 310dfn 310div 306dl 110, 314dt 110, 315em 94, 308form 128, 160, 319


357

Index

HTML-Elemente (Forts.)h1 97, 150, 308h2 97, 308h3 97, 308h4 97, 308h5 97, 308h6 97, 308head 52, 305hr 95, 314html 305, 317i 312img 112, 315input 129, 160, 320input (button) 137input (checkbox) 132input (file) 132input (image) 137input (radio) 131input (reset) 137input (submit) 137input (text) 130ins 310kbd 310label 135, 228, 321legend 321li 110, 314link 73, 307map 315meta 307noscript 321object 316ol 110, 314option 134, 320p 94, 308pre 311q 158, 309samp 311script 238, 321select 134, 320small 313span 102, 306strong 94, 308style 72, 307sub 313sup 313table 118, 317tbody 123, 318td 118, 318textarea 135, 161, 229, 320

HTML-Elemente (Forts.)tfoot 123, 318th 122, 318thead 122, 318title 282, 306tr 118, 317tt 313ul 109, 314var 311

Hypertext 40

I

i 312Icon 226Iditis 100img 112, 315Informationsboxen 222Inline-Element 44Innenabstand 190input 129, 160, 320input (button) 137input (checkbox) 132input (file) 132input (image) 137input (radio) 131input (reset) 137input (submit) 137input (text) 130ins 310

J

JavaScript 237jQuery 241

Artikel ein- und ausblenden 266Attribute 251Attribute entfernen 253Attribute hinzufügen 252Attribute manipulieren 347Attributfilter 346Aufbau 243CSS 351CSS manipulieren 256Dateien mit .load() importieren 271Effekte 352Element ausblenden 268Elemente ausblenden 263Ereignisse 351


358

Index

jQuery (Forts.)Filter 344Funktionen abwechseln lassen 263Geschwindigkeit von Effekten 259HTML manipulieren 347Klasse hinzufügen 245Klassen manipulieren 347Manipulation 253, 350Objekt 244, 247Script einbinden 242Selektor 248Selektoren 343Sichtbarkeitsfilter 346Text manipulieren 348Text verändern 245, 265

jQuery-Funktion.hover() 258add() 349addClass() 245, 347after() 255, 350andSelf() 349append() 253, 350appendTo() 253, 350attr() 252, 347before() 255, 350children() 349click() 243, 257, 352css() 246, 256, 267, 351dblclick() 352empty() 351end() 247, 349fadeIn() 352fadeOut() 352filter() 247, 348find() 259, 349focus() 268, 352hasClass() 348height() 351hide() 244, 260, 352hover() 351html() 245, 253, 347insertAfter() 255, 350insertBefore() 350load() 272next() 264, 349nextAll() 349not() 348parent() 349parents() 264

jQuery-Funktion (Forts.)prepend() 255, 350prependTo() 255, 350prev() 349prevAll() 349ready() 243, 351remove() 259removeAttr() 267, 347removeClass() 347replaceAll() 351replaceWidth() 350select() 352show() 261, 352slideDown() 352slideToggle() 352slideUp() 352submit() 352text() 253, 265, 348toggle() 261, 351, 352toggleClass() 347width() 351wrap() 255, 350wrapAll() 256, 350wrapInner() 256, 350

jQueryFunktioninsertBefore() 255

jQuery-Selektor+ 250> 249~ 250Element 248Kaskade 249Klasse 248kombinieren 248this 245

K

kbd 310Kommentar

CSS 64HTML 45jQuery 261

L

label 135, 228, 321left 337legend 321


359

Index

letter-spacing 330li 110, 314line-height 96, 184, 329Link 103

andere Seiten verlinken 103Anker 105Aufbau 103Gestaltung 106Hovereffekt 106Titel 104Unterstreichung entfernen 151Zielfenster 104

link 73, 206, 211, 307, 328Links

a 312Liste 108

Definitionsliste 110Gestaltung 111, 152Listensymbol ändern 186Listensymbole 111Navigation 141sortiert 109unsortiert 109

Listen 185dd 315dl 314dt 315li 314ol 314ul 314

Listenformatierunglist-style 335list-style-image 334list-style-position 334list-style-type 335

Listensymbol entfernen 218list-style 187, 335list-style-image 187, 334list-style-position 185, 334list-style-type 111, 186, 335

M

map 315margin 190, 334Markup 40Maßeinheiten 169

Absolute Angaben 170cm 171

Maßeinheiten (Forts.)em 170ex 170Inch 171mm 171Pica 171Pixel 170Point 171Prozentuale Angaben 171Relative Angaben 170

max-height 199, 339max-width 199, 339Medientyp 74, 322meta 307Meta-Angabe

author 281copyright 281email 281keywords 276, 281robots 281, 282

Meta-Angaben 52min-height 199, 339min-width 199, 339

N

Navigation 105, 141, 216eine Ebene 141horizontal 143mehrere Ebenen 145verschachtelte Listen 146vertikal 147

noscript 321

O

object 316ol 110, 314option 134, 320orphans 340overflow 201, 217, 338

P

p 94, 308padding 111, 127, 190, 334padding-left 166page-break-after 340page-break-before 340


360

Index

page-break-inside 340Pfadangaben 55

absolut 56Beispiele 58relativ 57relativ zur Basis 57

position 147, 194, 222, 298, 337Positionieren

Mitte 233nebeneinander 224

Positionierung mit CSS 194bottom 337clear 337float 337left 337position 337right 337top 337z-index 337

Präsentationb 312big 313hr 314i 312small 313sub 313sup 313tt 313

pre 311Pseudoelement 204, 327

:after 204, 327:before 204, 327:first-letter 204, 327:first-line 204, 327

Pseudoklasse 204, 327:active 206, 211, 327:first-child 328:focus 206, 211, 300, 328:hover 206, 328:link 206, 211, 328:visited 206, 211, 328Reihenfolge 207

Q

q 158, 309

R

Rahmenborder 333border-color 331border-RICHTUNG 333border-RICHTUNG-color 332border-RICHTUNG-style 332border-RICHTUNG-width 332border-style 332border-width 332

Rahmenfarbe 188Reihenfolge 207right 337

S

samp 311Schlüsselwörter 276Schrift 179Schriftbild 208

direction 330font 329font-family 328font-size 329font-style 329font-variant 329font-weight 329letter-spacing 330line-height 329text-align 330text-decoration 330text-indent 330text-transform 331vertical-align 331white-space 331word-spacing 331

Schriftgröße 181Script

noscript 321script 321

script 238, 321Seitentitel 220select 134, 320


361

Index

Selektor* 323> 209Attributselektor 324ID-Selektor 324Klassen-Selektor 323kombinieren 67Selektorkombinationen 325Typ-Selektor 323Typselektor 65Universalselektor * 64, 207

Semantik 153small 313Sonderzeichen 54span 102, 306strong 94, 308Struktur

body 306div 306head 305html 305span 306

style 72, 307sub 313Suchmaschinenmanipulation 275Suchmaschinenoptimierung 97, 275

Indexierung 279robots.txt 284Standardkonformer Code 279Verlinkung 278

sup 313

T

Tabelle 115Attribute 120Beispiel 118, 122caption 318col 319colgroup 319Gestaltung 126Tabellenbeschriftung 126Tabellenfußzeile 123Tabellenkopf 122Tabellenkörper 123table 317tbody 318td 318tfoot 318

Tabelle (Forts.)th 318thead 318tr 317Überschriftenzelle 122Zellen verbinden 119

Tabellenbeschriftung 126Tabellenfußzeile 123Tabellenkopf 122Tabellenkörper 123Tabellenlayout 115table 118, 317tbody 123, 318td 118, 318Text

abbr 308acronym 309address 309blockquote 309br 311cite 309code 310del 310dfn 310em 308ins 310kbd 310p 308pre 311q 309samp 311strong 308Überschriften 308var 311

Text ausrichten 184text-align 121, 184, 330textarea 135, 161, 229, 320text-decoration 108, 151, 185, 330text-direction 330Texthervorhebung 158text-indent 330text-transform 185, 331tfoot 123, 318th 122, 318thead 122, 318title 282, 306Tool

Firebug 72Lynx 279


362

Index

Tool (Forts.)MultipleIE 288Web Accessibility Toolbar 297

top 337tr 118, 317Trennlinie 95tt 313

U

ÜberschriftGestaltung 99positionieren 150richtige Reihenfolge 97

Überschriftenhierarchie 97Überschriftenzelle 122ul 109, 314Unterstreichung bei Links 185

V

var 311Variablen in JavaScript 251vertical-align 127, 331

visibility 203, 338visited 206, 211, 328

W

Webcrawler 278, 282white-space 331widows 341width 167, 199, 339word-spacing 331

X

XHTML 51

Z

Zahlenbereiche 170Zeichensatz 53Zeilenhöhe 96, 184Zeilenumbruch 95Zellen verbinden 119z-index 200, 337Zitat 158, 309

formatieren 215


Documents

Webseiten erstellen für Einsteiger - Amazon S3...7 Inhalt Vorbemerkungen ..... 15 t r a t S m e d r o 1V..... 21 1.1 Wie kommt die Seite aus dem Internet auf meinen