1 Ein eigener Webauftritt in fünf Minuten

17

1.1 Die Visitenkarte des Zauberers

18

1.1.1 Editor oder Baukasten?

18

1.1.2 Einen Website-Baukasten auswählen

19

1.1.3 Die Site im Website-Baukasten anlegen

19

1.1.4 Einen Webseiten-Editor auswählen

23

1.1.5 Mit dem visuellen Webseiten-Editor arbeiten

23

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?

34

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.2 Den Seitenaufbau festlegen

45

3.3 Die Bilder festlegen

47

3.4 Das Layout umsetzen

47

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

57

4.4 Woher kommt die Gestaltung?

66

4.4.1 Das style-Attribut

66

4.4.2 Das style-Element

68

4.4.3 Die externe CSS-Datei

71

4.5 Das richtige Werkzeug - der HTML-Editor

76

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

76

4.5.2 Empfehlenswerte HTML-Editoren

78

4.6 Besser lesbares HTML für Browser und Mensch

81

4.6.1 Woher kommen HTML und CSS?

81

4.6.2 HTML5 - was bedeutet das?

82

4.6.3 Der doctype

83

4.6.4 Das charset

84

4.6.5 Schaffen Sie Platz für mehr Übersicht

85

4.6.6 Notizen für Sie selbst: Kommentare

86

4.6.7 Validieren Sie Ihre Seiten

88

4.7 Fazit

89

5 Die eigene Website erstellen

91

5.1 Das Konzept

92

5.1.1 Die Ziele formulieren

92

5.1.2 Den Inhalt konzipieren

93

5.1.3 Die Gestaltung konzipieren

93

5.2 Den Inhalt mit HTML anlegen

95

5.2.1 Die Startseite

98

5.2.2 Die Praxisseite

104

5.2.3 Die Teamseite

108

5.2.4 Die Kontaktseite

110

5.3 Die Gestaltung mit CSS

112

5.3.1 Die Layoutelemente und ihre Darstellung im Browser

113

5.3.2 Feste oder flexible Abmessungen?

120

5.3.3 Die Abmessungen der Layoutelemente

121

5.3.4 Die Position der Layoutelemente

124

5.3.5 Die Gestaltung verfeinern

142

5.4 Fazit

165

6 Die eigene Website im Internet

167

6.1 Die Website ins Internet bringen

167

6.1.1 Speicherplatz auf einem Webserver

167

6.1.2 Das SSL-Zertifikat für sichere Verbindungen

170

6.1.3 FTP - Dateien auf den Webserver kopieren

171

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

173

6.1.5 Eine eigene Domain - Ihre Adresse im Web

176

6.1.6 Das Favicon

177

6.2 Browser ist nicht gleich Browser

179

6.2.1 Die Unterschiede in der Darstellung herausfinden

179

6.2.2 Die Unterschiede in der Darstellung ausgleichen

183

6.3 Bildschirm ist nicht gleich Bildschirm

191

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

192

6.3.2 Relative Angaben statt pixelgenauer Werte

194

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

198

6.3.4 Ein separates Stylesheet für schmale Bildschirme

202

6.4 Gerät ist nicht gleich Gerät

215

6.4.1 Die Seiten an Touchbedienung anpassen

216

6.4.2 Ein separates Stylesheet für Drucker

218

6.5 Mit Neugier zu immer besseren Websites

223

6.6 Fazit

225

7 Ein Kontaktformular anlegen

227

7.1 Kontaktformular oder E-Mail-Adresse?

227

7.2 Pflichtangaben zum Kontakt

228

7.3 Die Standardlösung

229

7.4 Ein einfaches Kontaktformular

229

7.5 Planung und Gestaltung

233

7.5.1 Planung

233

7.5.2 Gestaltung

234

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

234

7.7 Das Skript auf dem Server

237

7.8 Fazit

241

8 Mehr Interaktivität mit JavaScript

243

8.1 Das erste JavaScript

244

8.2 Ein schnelles Skript für die Beispiel-Website

246

8.3 JavaScript und HTML trennen

250

8.4 Funktionen

252

8.5 Variablen

255

8.6 Arrays

258

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

266

8.9 Text auf der Seite einfügen

269

8.10 Text auf der Seite elegant ändern

271

8.11 Auf Fehlersuche - Debugging

274

8.11.1 Debuggen mit Firefox

275

8.11.2 Debuggen mit Safari

279

8.12 Fazit

280

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

281

9.1 Suchmaschinenoptimierung

282

9.1.1 Wie sucht eine Suchmaschine?

283

9.1.2 PageRank und Page Authority

284

9.1.3 Suchmaschinen wollen auch nur Menschen sein

287

9.1.4 Schwarze Magie hilft nicht

288

9.1.5 Bezahlte Suchergebnisse?

289

9.1.6 SEO für die eigene Website

290

9.2 User Experience & Usability /Benutzerfreundlichkeit

306

9.2.1 Der wichtigste Grundsatz: Nachdenken

307

9.2.2 Usability von Anfang an

307

9.2.3 Die häufigsten Fehler vermeiden

308

9.3 Accessibility - Barrierefreiheit

309

9.4 Fazit

310

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

311

10.1 Google Maps & Bing Maps

311

10.2 YouTube & Vimeo

314

10.2.1 Ein Video einbinden

314

10.2.2 Ein Video hochladen

316

10.3 Fotodienste - Flickr und Google Photos

316

10.4 Slideshare

319

10.5 Soziale Netzwerke - Facebook und Twitter

320

10.5.1 Facebook-Buttons

320

10.5.2 Datenschutz bei Facebook

322

10.5.3 Twitter

324

10.6 Fazit

326

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

327

11.1 Klassische Werbung

328

11.2 Werbung im Internet

329

11.2.1 Google AdWords

330

11.2.2 Facebook-Anzeigen

337

11.3 Marketing im Internet

338

11.3.1 Organische Links

339

11.3.2 Linktausch

339

11.3.3 Verzeichnisse

340

11.3.4 Facebook

341

11.3.5 Instagram

343

11.3.6 Twitter

343

11.3.7 Zeitungen, Zeitschriften, Blogs

345

11.3.8 Kommentare in Blogs und Foren

345

11.3.9 XING und LinkedIn

346

11.3.10 Podcasts

347

11.3.11 Google My Business

349

11.3.12 Wikipedia

350

11.3.13 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 Verkaufen über einen externen Webshop

354

12.1.2 Verkaufen auf der eigenen Website

355

12.1.3 Spenden ohne direkte Gegenleistung

356

12.2 Ein Beispielwebshop - Aro Argentinos Fanshop

358

12.2.1 Die Situation

358

12.2.2 Die Lösung

359

12.2.3 Die Umsetzung

359

12.3 Fazit

363

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

365

13.1 Was Ihnen Ihr neues Wissen ermöglicht

365

13.2 Werkzeuge für Einsteiger

367

13.2.1 HTML Color Codes

367

13.2.2 ColorZilla-Farbpipette

368

13.2.3 Adobe Color

368

13.2.4 Ultimate CSS Gradient Generator

370

13.2.5 CSSmatic

371

13.2.6 Can I use…

372

13.2.7 HTML5 Please

373

13.3 Werkzeuge für Fortgeschrittene

374

13.3.1 Simple Grid

375

13.3.2 Flexbox Grid

376

13.3.3 Individuelle Schriftarten mit @font-face

377

13.3.4 Font Awesome

379

13.3.5 Adobe Topcoat

380

13.3.6 JSLint

381

13.3.7 normalize.css

382

13.3.8 HTML5 Shiv

383

13.4 Werkzeuge für Profis

383

13.4.1 HTML5 Boilerplate

384

13.4.2 Emmet

385

13.4.3 jQuery

386

13.4.4 FitText

388

13.4.5 Nivo Slider

389

13.4.6 jQuery UI

390

13.4.7 jQuery Mobile

392

13.4.8 Bootstrap

395

13.4.9 Modernizr

397

13.4.10 CSS3 PIE

398

13.5 Fazit

399

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

401

A.1 HTML5-Elemente

401

A.1.1 Hauptelement und Metadaten

401

A.1.2 JavaScript

401

A.1.3 Seitenabschnitte und Layoutstrukturierung

402

A.1.4 Textelemente

402

A.1.5 Listen

403

A.1.6 Tabellen

404

A.1.7 Eingebettete Medien

404

A.1.8 Formulare

405

A.2 CSS3-Eigenschaften

405

A.2.1 Position und Sichtbarkeit

406

A.2.2 Abmessungen und Rand

406

A.2.3 Flexbox

407

A.2.4 Hintergrund

408

A.2.5 Animation und Veränderung

409

A.2.6 Text

409

A.2.7 Listen

410

A.2.8 Tabellen

410

A.3 CSS3-Selektoren

411