1 Ein eigener Webauftritt in drei Minuten

17

1.1 Die Visitenkarte des Zauberers

18

1.1.1 Auswahl des Anbieters

18

1.1.2 Anmeldung

19

1.2 Welche Technik lässt das Web ticken?

26

1.2.1 Seite oder Site?

29

1.2.2 Domain

29

1.3 Fazit

30

2 Wer braucht was – die eigene Website planen

31

2.1 Wie sieht eine gute Website aus?

31

2.2 Warum wollen Sie eine Website?

33

2.3 Was? Wen? Wie? Womit?

33

2.3.1 Was wollen Sie erreichen?

34

2.3.2 Wen wollen Sie ansprechen?

35

2.3.3 Wie wollen Sie Ihr Ziel erreichen?

35

2.3.4 Womit wollen Sie arbeiten?

35

2.3.5 Beispiel: Tangoschule »Aro Argentino«

36

2.4 Umsetzung planen

38

2.4.1 Sitemap – Seitenübersicht

38

2.4.2 Zeitplan

40

2.5 Fazit

41

3 Ein besserer Webauftritt in drei Stunden

43

3.1 Für den Dienst anmelden und die Site einrichten

44

3.1.1 Nutzerkonto und Blog anlegen

45

3.2 Den Seitenaufbau festlegen

47

3.3 Die Bilder festlegen

48

3.4 Das Layout umsetzen

49

3.5 Fazit

51

4 Die ersten Schritte mit HTML und CSS

53

4.1 Die Vorteile einer eigenen Website

53

4.2 Alle Webseiten bestehen aus HTML

54

4.3 Sie schreiben selbst HTML

58

4.4 Woher kommt die Gestaltung?

67

4.4.1 Das style-Attribut

67

4.4.2 Das style-Element

69

4.4.3 Die externe CSS-Datei

72

4.5 Das richtige Werkzeug – der HTML-Editor

77

4.5.1 Was sollte ein HTML-Editor für Einsteiger können?

77

4.5.2 Empfehlenswerte HTML-Editoren

79

4.6 Besser lesbares HTML für Browser und Mensch

82

4.6.1 Woher kommen HTML und CSS?

83

4.6.2 HTML5 – was bedeutet das?

84

4.6.3 Der doctype

85

4.6.4 Das charset

86

4.6.5 Schaffen Sie Platz für mehr Übersicht

87

4.6.6 Notizen für Sie selbst: Kommentare

88

4.6.7 Validieren Sie Ihre Seiten

90

4.7 Fazit

91

5 Die eigene Website erstellen

93

5.1 Das Konzept

94

5.1.1 Die Ziele formulieren

94

5.1.2 Den Inhalt konzipieren

95

5.1.3 Die Gestaltung konzipieren

95

5.2 Den Inhalt mit HTML anlegen

97

5.2.1 Die Startseite

100

5.2.2 Die Praxisseite

106

5.2.3 Die Teamseite

110

5.2.4 Die Kontaktseite

112

5.3 Die Gestaltung mit CSS

114

5.3.1 Die Layoutelemente und ihre Darstellung im Browser

115

5.3.2 Feste oder flexible Abmessungen?

122

5.3.3 Die Abmessungen der Layoutelemente

123

5.3.4 Die Position der Layoutelemente

126

5.3.5 Die Gestaltung verfeinern

143

5.4 Fazit

167

6 Die eigene Website im Internet

169

6.1 Die Website ins Internet bringen

169

6.1.1 Speicherplatz auf einem Webserver

170

6.1.2 FTP – Dateien auf den Webserver kopieren

172

6.1.3 Berechtigungen und die .htaccess-Datei – so konfigurieren Sie, was Besucher sehen können

175

6.1.4 Eine eigene Domain – Ihre Adresse im Web

177

6.1.5 Das Favicon

178

6.2 Browser ist nicht gleich Browser

180

6.2.1 Die Unterschiede in der Darstellung herausfinden

181

6.2.2 Die Unterschiede in der Darstellung ausgleichen

185

6.3 Bildschirm ist nicht gleich Bildschirm

193

6.3.1 Was passiert bei veränderter Fenstergröße?

194

6.3.2 Relative Angaben statt pixelgenauer Werte

196

6.3.3 Mehrere Layouts mit festen Werten oder ein Layout mit flexiblen Werten?

200

6.3.4 Ein separates Stylesheet für schmale Bildschirme

204

6.4 Gerät ist nicht gleich Gerät

218

6.4.1 Was muss man bei Touchbedienung beachten?

218

6.4.2 Ein separates Stylesheet für Drucker

220

6.5 Mit Neugier zu immer besseren Websites

225

6.6 Fazit

227

7 Ein Kontaktformular anlegen

229

7.1 Kontaktformular oder E-Mail-Adresse?

229

7.2 Pflichtangaben zum Kontakt

230

7.3 Die Standardlösung

230

7.4 Ein einfaches Kontaktformular

231

7.5 Planung und Gestaltung

235

7.5.1 Planung

235

7.5.2 Gestaltung

235

7.6 Der HTML-Code für unsere Arzt-Beispielsite

236

7.7 Das Script auf dem Server

239

7.8 Fazit

242

8 Mehr Interaktivität mit JavaScript

243

8.1 Das erste JavaScript

244

8.1.1 Was tun, wenn JavaScript nicht aktiv ist?

246

8.2 Ein schnelles Skript für die Beispielwebsite

246

8.3 JavaScript und HTML trennen

250

8.4 Funktionen

252

8.5 Variablen

255

8.6 Arrays

258

8.6.1 Mehrdimensionale Arrays

259

8.7 Ereignisse

260

8.8 Beispiel: Ein schlaues Formular

260

8.8.1 Den Cursor versetzen

261

8.8.2 Kommentarfeld prüfen

262

8.8.3 Alternative zum Prüfen des Kommentarfelds

265

8.8.4 E-Mail-Adresse prüfen

267

8.9 Text auf der Seite einfügen

269

8.10 Text auf der Seite elegant ändern

271

8.11 Auf Fehlersuche – Debugging

275

8.11.1 Debuggen mit Firebug

275

8.11.2 Debuggen mit Safari

280

8.12 Fazit

280

9 Die Site spielend finden und benutzen – Suchmaschinenoptimierung, Usability, Accessibility

283

9.1 Suchmaschinenoptimierung

284

9.1.1 Wie sucht eine Suchmaschine?

285

9.1.2 PageRank

286

9.1.3 Suchmaschinen wollen auch nur Menschen sein

288

9.1.4 Schwarze Magie hilft nicht

290

9.1.5 Bezahlte Suchergebnisse?

290

9.1.6 SEO für die eigene Website

291

9.2 Usability – Benutzerfreundlichkeit

307

9.2.1 Der wichtigste Grundsatz: Nachdenken

308

9.2.2 Usability von Anfang an

308

9.2.3 Die häufigsten Fehler vermeiden

309

9.3 Accessibility – Barrierefreiheit

310

9.4 Fazit

311

10 Noch mehr Inhalt – Videos, Fotos, Karten und soziale Netze einbinden

313

10.1 Google Maps

313

10.2 YouTube

316

10.2.1 Ein Video einbinden

316

10.2.2 Ein Video hochladen

318

10.2.3 Alternativen zu YouTube

318

10.3 Fotodienste – Flickr und Google Photos

318

10.4 Slideshare

321

10.5 Soziale Netzwerke – Facebook und Twitter

322

10.5.1 Facebook-Buttons

322

10.5.2 Datenschutz bei Facebook

324

10.5.3 Twitter

325

10.6 Fazit

327

11 Marketing und Werbung – Gutes tun und darüber reden

329

11.1 Klassische Werbung

330

11.2 Werbung im Internet

331

11.2.1 Google AdWords

332

11.2.2 Facebook-Anzeigen

339

11.3 Marketing im Internet

340

11.3.1 Organische Links

340

11.3.2 Linktausch

341

11.3.3 Verzeichnisse

342

11.3.4 Facebook

342

11.3.5 Twitter

344

11.3.6 Zeitungen, Zeitschriften, Blogs

345

11.3.7 Kommentare in Blogs und Foren

346

11.3.8 XING

347

11.3.9 Podcasts

348

11.3.10 Google Places, Facebook-Angebote und Foursquare

349

11.3.11 Wikipedia

350

11.3.12 PR-Portale

350

11.4 Fazit

351

12 Mit der eigenen Website Geld verdienen

353

12.1 Welche Möglichkeiten gibt es?

353

12.1.1 Der Webshop

354

12.1.2 Produktunabhängige Zahlsysteme

355

12.1.3 Direkte Spenden und Abrechnung über Flattr

356

12.2 Ein Beispielwebshop – Aro Argentinos Fanshop

357

12.2.1 Die Situation

358

12.2.2 Die Lösung

358

12.2.3 Die Umsetzung

359

12.3 Fazit

362

13 Starke Werkzeuge – so nutzen Sie Ihr neues Wissen für noch bessere Websites

363

13.1 Was Ihnen Ihr neues Wissen ermöglicht

363

13.2 Werkzeuge für Einsteiger

365

13.2.1 Can I use…

365

13.2.2 HTML5 Please

366

13.2.3 HTML Color Codes

367

13.2.4 ColorZilla Farbpipette

368

13.2.5 Adobe Color

369

13.2.6 CSSmatic

371

13.3 Werkzeuge für Fortgeschrittene

372

13.3.1 normalize.css

372

13.3.2 Individuelle Schriftarten mit @font-face

374

13.3.3 Glyphicons FREE

375

13.3.4 Font Awesome

377

13.3.5 Adobe Topcoat

378

13.3.6 JSLint

379

13.3.7 HTML5 Shiv

380

13.4 Werkzeuge für Profis

380

13.4.1 HTML5 Boilerplate

381

13.4.2 CSS3 PIE

382

13.4.3 Modernizr

384

13.4.4 jQuery

385

13.4.5 FitText

386

13.4.6 Nivo Slider

388

13.4.7 jQuery UI

389

13.4.8 jQuery Mobile

391

13.4.9 Bootstrap

394

13.5 Fazit

396

Anhang

397

A Übersicht der wichtigsten HTML5-Elemente, CSS3-Eigenschaften und -Selektoren

397

A.1 HTML5-Elemente

397

A.2 CSS3-Eigenschaften

401

A.3 CSS3-Selektoren

406

B Glossar

409