Jacobsen / Gidda Webseiten erstellen für Einsteiger

Schritt für Schritt zur eigenen Website
3. Auflage 2019
ISBN: 978-3-8362-7437-1
Verlag: Rheinwerk
Format: EPUB
Kopierschutz: 0 - No protection

E-Book, Deutsch, 423 Seiten

Reihe: Rheinwerk Computing

Sie haben noch keine Erfahrung mit Websites, möchten aber einen Webauftritt haben, den Sie frei gestalten können, ohne durch eine Plattform oder Technik eingeschränkt zu sein? Keine Sorge, das ist machbar. Und auch gar nicht so schwer. Dieses Buch zeigt Ihnen, wie's geht: In lockerer und verständlicher Sprache werden die Techniken HTML, CSS, JavaScript und Suchmaschinenoptimierung für Google beschrieben. Vorkenntnisse werden nicht vorausgesetzt, vielmehr wird bereits zu Beginn an einem praktischen Beispiel erklärt, was sich aus technischer Sicht hinter den Begriffen Browser, Website und Co. überhaupt verbirgt.Nach der Lektüre können Sie eine technisch sauber umgesetzte und visuell ansprechende Beispielwebsite erstellen. Außerdem wissen Sie, wie Sie das Layout an iPhone, PC, Laptop und andere Geräte anpassen. So erhalten Sie eine Website, die den Kriterien des Responsive Webdesign genügt. Das ist aber nur das halbe Ziel: Sie lernen auch wichtige, kostenlose Hilfsmittel kennen, mit denen Sie bspw. Ihre Website für Google optimieren, Dienste wie Google Maps nutzen Sie oder einen Online-Shop erstellen.

Aus dem Inhalt:

Beispiele, Ziele, Zielgruppen
Blogs erstellen und gestalten
HTML5 und CSS3
Responsive Webdesign
JavaScript einsetzen
Videos, Fotos, Karten
Soziale Netzwerke einbinden
Suchmaschinenoptimierung (SEO)
Usability und Barrierefreiheit
Website bewerben
Webshop einbinden

Autoren/Hrsg.

Jacobsen, Jens

Gidda, Matthias

Inhaltsverzeichnis

Für wen ist dieses Buch? ... 13

  1.  Ein eigener Webauftritt in fünf Minuten ... 17
       1.1 ... Die Visitenkarte des Zauberers ... 18
       1.2 ... Welche Technik lässt das Web ticken? ... 26
       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.4 ... Umsetzung planen ... 38
       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.5 ... Das richtige Werkzeug - der HTML-Editor ... 76
       4.6 ... Besser lesbares HTML für Browser und Mensch ... 81
       4.7 ... Fazit ... 89

  5.  Die eigene Website erstellen ... 91
       5.1 ... Das Konzept ... 92
       5.2 ... Den Inhalt mit HTML anlegen ... 95
       5.3 ... Die Gestaltung mit CSS ... 112
       5.4 ... Fazit ... 165

  6.  Die eigene Website im Internet ... 167
       6.1 ... Die Website ins Internet bringen ... 167
       6.2 ... Browser ist nicht gleich Browser ... 179
       6.3 ... Bildschirm ist nicht gleich Bildschirm ... 191
       6.4 ... Gerät ist nicht gleich Gerät ... 215
       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.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.9 ... Text auf der Seite einfügen ... 269
       8.10 ... Text auf der Seite elegant ändern ... 271
       8.11 ... Auf Fehlersuche - Debugging ... 274
       8.12 ... Fazit ... 280

  9.  Die Site spielend finden und benutzen - Suchmaschinenoptimierung, Usability, Accessibility ... 281
       9.1 ... Suchmaschinenoptimierung ... 282
       9.2 ... User Experience & Usability /Benutzerfreundlichkeit ... 306
       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.3 ... Fotodienste - Flickr und Google Photos ... 316
       10.4 ... Slideshare ... 319
       10.5 ... Soziale Netzwerke - Facebook und Twitter ... 320
       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.3 ... Marketing im Internet ... 338
       11.4 ... Fazit ... 351

12.  Mit der eigenen Website Geld verdienen ... 353
       12.1 ... Welche Möglichkeiten gibt es? ... 353
       12.2 ... Ein Beispielwebshop - Aro Argentinos Fanshop ... 358
       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.3 ... Werkzeuge für Fortgeschrittene ... 374
       13.4 ... Werkzeuge für Profis ... 383
       13.5 ... Fazit ... 399

Anhang A.  Übersicht der wichtigsten HTML5-Elemente, CSS3-Eigenschaften und -Selektoren ... 401
       A.1 ... HTML5-Elemente ... 401
       A.2 ... CSS3-Eigenschaften ... 405
       A.3 ... CSS3-Selektoren ... 411

Anhang B.  Glossar ... 413

  Index ... 419

Leseproben

1    Ein eigener Webauftritt in fünf Minuten
Wenn Sie so schnell wie möglich eine Website haben möchten, gibt es mehrere kostenlose Dienste, die Ihnen das ermöglichen. Und gut aussehen kann eine solche Site auch. Sie haben ein Thema, das Sie im Web präsentieren wollen – sei es Ihr Geschäft, Ihre Dienstleistung, Ihr Verein oder Ihre eigene Person oder Familie. Wir wollen Sie nicht mit langatmigen Erklärungen aufhalten, sondern Sie ermuntern, gleich einmal etwas auszuprobieren. Wir zeigen Ihnen, wie man mit einem einfachen und kostenlosen Dienst schnell eine sogenannte Web-Visitenkarte erstellt. Brennt es Ihnen unter den Nägeln, bringen Sie so in fünf Minuten Ihre erste einfache Präsenz ins Internet. Keine Platzhaltertexte Verzichten Sie auf die typischen Platzhalter- oder Baustellenseiten, auf denen steht: »Hier entsteht der Internetauftritt von XY. Schauen Sie doch später wieder vorbei!« Das wirkt sehr unprofessionell – und warum sollte man irgendwann später wieder unter dieser Adresse im Internet »vorbeischauen«? Man weiß weder, wann die Website fertig sein soll, noch, was man dann dort finden wird. Es macht nicht viel Arbeit, zumindest seine Kontaktdaten auf der Seite zu hinterlegen. Und dass sich Internetauftritte verändern, ist selbstverständlich, darauf brauchen Sie nicht extra hinzuweisen. Abbildung 1.1    Solche nichtssagenden Seiten zeigen viele Internetprovider, wenn Sie dort eine Internetadresse registrieren, aber noch keine Inhalte eingestellt haben. So eine Seite sollten Sie so schnell wie möglich loswerden. 1.1    Die Visitenkarte des Zauberers
Im ersten Beispielprojekt dieses Buchs erstellen wir die Web-Visitenkarte eines Zauberkünstlers. Auf ihr sollen sein Name, seine Kontaktdaten und ein Foto aus einer seiner Shows zu sehen sein. Mit der Visitenkarte will der Zauberkünstler dafür sorgen, dass Interessenten, die von ihm gehört haben, ihn im Internet finden und kontaktieren können. Ein-Seiten-Sites Web-Visitenkarte nennt man ganz einfache Internetauftritte, die nur aus einer einzigen Seite bestehen. Der Begriff ist nicht klar definiert, und manche Anbieter nennen auch kleinere Websites mit weiteren Unterseiten so. Unser Beispiel besteht aber nur aus einer Seite. Öfter liest man auch von One-Pagern – also »Einseitern«. Diese Bezeichnung ist nur ein modernerer Begriff für das Gleiche: ein Internetauftritt mit nur einer Seite. Bei One-Pagern ist diese eine Seite aber meist recht lang, oft fünf Mal so lang, wie ein normaler Bildschirm hoch ist, häufig sogar noch länger. Web-Visitenkarten dagegen sind, wie der Name erkennen lässt, sehr klein. Die Übergänge sind aber fließend. 1.1.1    Editor oder Baukasten?
Generell haben Sie zwei Wege, schnell und kostenlos eine Website online zu stellen: Webseiten-Editoren Website-Baukästen Das funktioniert genauso wie auch bei anderen Anwendungen: Sie können entweder ein Programm auf Ihrem Rechner installieren wie etwa Word oder Open Office – oder Sie nutzen einen Onlinedienst wie Google Docs und arbeiten nur in Ihrem Browser. Diese zwei Möglichkeiten haben Sie auch für einfache Websites: Sie installieren einen Editor, oder Sie nutzen einen Onlinedienst, Website-Baukasten genannt. Einfacher und schneller geht es mit einem Website-Baukasten. Daher lesen Sie im nächsten Abschnitt ein paar Tipps dafür. Aber wesentlich mehr Flexibilität haben Sie mit einem Editor. Und für uns ganz wichtig: Wenn Sie einen solchen Editor nutzen, lernen Sie viel mehr. Sie bekommen damit ein gutes Verständnis dafür, wie Webseiten aufgebaut sind, und dafür, wie das Internet funktioniert – eine hervorragende Grundlage für die weiteren Kapitel dieses Buchs. Jetzt aber erst mal zu den Baukästen. 1.1.2    Einen Website-Baukasten auswählen
Es gibt etliche Onlinedienste, bei denen Sie kostenlos eine Web-Visitenkarte erstellen können. Meist wird dafür Werbung auf Ihren Seiten eingeblendet. Wenn Sie bei diesen Diensten ein kostenpflichtiges Angebot buchen, erhalten Sie keine Werbung und haben langfristig viel mehr Möglichkeiten. Aber zum ersten Testen reichen die kostenlosen Pakete auf jeden Fall aus. Um Ihre Auswahl zu treffen, sehen Sie sich am besten ein paar Beispielsites an, die mit dem jeweiligen Dienst umgesetzt sind. Achten Sie vor allem auf die Werbung – bei manchen kostenlosen Diensten ist sie sehr aufdringlich. Recht beliebt sind www.jimdo.com/de/ und https://de.wix.com. Die Anbieter ändern aber häufig die Oberfläche und die Funktionen, daher finden Sie eine stets aktuelle Liste unserer persönlichen Favoriten unter bnfr.de/ql102. Quicklinks »bnfr.de« Im Verlauf dieses Buchs nennen wir Ihnen oft Internetadressen, etwa damit Sie den beschriebenen HTML-Code von unserer Website herunterladen und für Ihr Beispielprojekt verwenden können oder weil die Website eines Dritten nützliche Tipps bietet. Damit Sie erstens nicht so lange Adressen abtippen müssen und zweitens auch dann zum Ziel gelangen, wenn sich die Adresse einer Website nach dem Druck dieses Buchs ändert, verwenden wir ein Quicklink-System. Das sieht im Buch zum Beispiel so aus: »… unserer persönlichen Favoriten unter bnfr.de/ql102« Sie müssen nur noch die Adresse bnfr.de/ql102 in die Adresszeile oben in Ihrem Browser eingeben und werden dann automatisch auf die jeweils aktuelle Seite weitergeleitet. 1.1.3    Die Site im Website-Baukasten anlegen
Legen wir also los: Schritt 1 | Gehen Sie auf die Startseite des Website-Baukastens Ihrer Wahl. Legen Sie dort ein Konto an – dazu müssen Sie normalerweise Ihre E-Mail-Adresse eintragen und ein Passwort vergeben. Die Adresse verifizieren Sie dann durch einen Klick auf einen Link in einer Bestätigungsmail. Aber sicher – Passwortsicherheit Vergeben Sie für jeden Dienst ein eigenes Passwort. Immer wieder kommt es vor, dass selbst renommierten Unternehmen Tausende, manchmal Millionen von Zugangsdaten gestohlen werden. Sind Ihre Zugangsdaten einmal darunter und haben Sie sich mit dem gleichen Passwort noch auf anderen Sites angemeldet, dann haben Sie ein Problem. Verbrecher probieren automatisiert solche Zugangsdaten bei bekannten Diensten wie Google oder Facebook aus, aber auch bei Bank-Websites. So bekommen sie leicht Zugang zu vielen Kundenzugängen. Damit Sie sich nicht so viele Passwörter merken müssen, können Sie einen Passwortmanager nutzen, also ein Programm, das Ihre Passwörter speichert und mit einem einzigen Passwort sichert. Alternativ überlegen Sie sich einen Standardsatz, den Sie sich leicht merken können, zum Beispiel Mein Passwort ist wirklich sicher, vor allem im März. Von diesem Satz nehmen Sie die Anfangsbuchstaben und das Satzzeichen: MPiws,vaiM. Dann hängen Sie mit einem Sonderzeichen noch einen Teil für den jeweiligen Webdienst an, für Jimdo also etwa ji. Jetzt haben Sie MPiws,vaiM#ji. Und schließlich fügen Sie noch zwei Zahlen an, die auch wieder immer gleich sein können: MPiws,vaiM#ji66. Damit haben Sie zwar kein perfektes Passwort (näher dran wäre eine rein zufällige Zahlen-Buchstaben-Zeichen-Kette mit 18 Stellen), aber einen guten Kompromiss zwischen leichter Merkbarkeit und Sicherheit. Und Ihren Onlinebanking-Zugang können Sie ja immer noch mit einem besseren Passwort sichern. Schritt 2 | Legen Sie Ihre erste Website an. Dazu klicken Sie sich durch die Fragen, mit denen jeder der Website-Baukästen beginnt. Dabei werden Sie vermutlich nicht immer so genau wissen, wie sich Ihre Antworten auswirken werden – das geht fast jedem so. Denn die Anbieter versuchen, Ihnen mit der Gestaltung Ihrer Site so viel Arbeit wie möglich abzunehmen. Dazu versuchen sie, über einige Fragen herauszubekommen, was Sie mit Ihrer Site anfangen möchten und was Ihnen gefällt. Sie können aber eigentlich irgendetwas antworten – denn die Einstellungen können Sie später immer noch ändern, wenn Sie mit dem Ergebnis nicht zufrieden sind. Anmeldung und Bearbeitung sehen anders aus? Anbieter von Webdiensten ändern das Aussehen ihrer Seiten häufig. Sollten die Schritte bei Ihnen anders aussehen als hier im Buch, arbeiten Sie einfach die Fragen bei der Anmeldung nach und nach ab. Diese sind normalerweise leicht verständlich und sollten wenige Probleme bereiten. Und wie gesagt: Ändern können Sie danach immer noch alles. Abbildung 1.2    Solche Vorlagen wie diese bei Wix bieten praktisch alle Website-Baukästen. Sie ändern sich laufend – so...