HTML5. Grundlagen der Erstellung von Webseiten. Marc Haunschild, Linda York, Tina Wegener. 3. Ausgabe, Januar 2015 ISBN: HTML5

Transkript

1 HTML5 Marc Haunschild, Linda York, Tina Wegener 3. Ausgabe, Januar 2015 Grundlagen der Erstellung von Webseiten ISBN: HTML5

2 2 HTML5 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem Kapitel erfahren Sie wie Sie HTML-Dokumente erstellen und im Browser testen wie Sie Webseiten speichern und testen wie Sie Absätze, Zeilenumbrüche und Überschriften erstellen wie Sie Webseiten mit Bildern und Hyperlinks versehen Voraussetzungen Mit einem Texteditor arbeiten Einen Browser verwenden 2.1 Webseiten erstellen, speichern und testen Ordner für Ihre Webseiten und Dateien erstellen Erstellen Sie einen Ordner auf Ihrem System, in dem Sie alle Dateien (z. B. HTML-, CSS- und Bilddateien) für Ihren Webauftritt ablegen werden. Dieser Ordner wird Stammordner oder Wurzelverzeichnis (engl.: root directory) genannt. Für die Arbeit mit diesem Buch nennen Sie Ihren Ordner hotel. Mit Texteditoren arbeiten Wenn Sie sich noch nicht für einen Texteditor entschieden haben, können Sie auch einen auf Ihrem System bereits installierten Editor verwenden. Jedes Betriebssystem bringt einen einfachen Editor mit. Schauen Sie sich immer wieder im Web nach neuen Editoren um es kommen ständig neue auf den Markt. Windows-Anwendern steht beispielsweise der im Lieferumfang enthaltene Windows Editor (notepad.exe) zur Verfügung. Klicken Sie auf die -Schaltfläche von Windows und dann nacheinander auf die Einträge Alle Programme - Zubehör - Editor. Ein leeres Editorfenster wird geöffnet, in dem Sie Ihren HTML-Code eingeben können. Wenn Sie mit einem Macintosh arbeiten, können Sie die Macintosh-Anwendung TextEdit verwenden. Das Grundgerüst einer Webseite Jedes HTML-Dokument beginnt mit der Angabe der HTML-Version (der Dokumenttyp- Definition bzw. DOCTYPE). Mit <!DOCTYPE html> teilen Sie dem Browser mit, dass Sie den Standard HTML5 verwenden. 14 HERDT-Verlag

3 Die erste Webseite mit HTML erstellen 2 Das HTML-Dokument selbst wird von dem Tagpaar <html> und </html> umschlossen. Weil dieses Element der Ausgang für alle weiteren ist, nennt man es auch Wurzel- oder Root- Element. Jedes HTML-Dokument wird in zwei Bereiche unterteilt: Dokumentkopf Dokumentrumpf Der Bereich zwischen den Tags <head>- und </head> (engl.: Kopf) enthält Informationen über das HTML-Dokument. Seine Inhalte werden nicht vom Browser dargestellt. Eine Ausnahme bildet der Titel des Dokumentes, der zwar nicht auf der eigentlichen Webseite erscheint, aber an vielen weiteren Stellen: Titelleiste des Browsers und/oder Tab, Windows-Taskbar, Google- Suchergebnis usw. Außerdem dient der Titel den meisten Browsern als Vorschlag für die Benennung von Lesezeichen (Favoriten). Zwischen den <body>- und </body>-tags (engl.: Körper, Rumpf) befindet sich der eigentlich darzustellende Inhalt. Webseite erstellen Geben Sie im Texteditor den folgenden HTML-Code ein: <!DOCTYPE html> HTML-Version <html> HTML-Starttag <head> <meta charset="utf-8"> <title>hotel Vallora, Nordseeküste</title> </head> <body> Hotel Vallora Dokumentkopf Dokumentrumpf </body> </html> HTML-Endtag Diese DOCTYPE-Definition gibt an, dass HTML5 verwendet wird. Zeigt den Beginn des HTML-Dokuments an. Bestimmt den Beginn des Dokumentkopfs. Hier wird der verwendete Zeichensatz mitgeteilt (sofern nicht vom Server per httpheader gesendet). Hier wird der Titel des Dokumentes angegeben. Während andere Angaben im Dokumentenkopf optional sind, ist das title-element für jede Webseite vorgeschrieben. Dieses Tag zeigt das Ende des Dokumentenkopfes an. Bestimmt den Beginn des Dokumentenrumpfs. Inhalte, die Sie innerhalb des body-elementes notieren, erscheinen auf Ihrer Webseite. Der Dokumentenrumpf wird beendet. Zeigt das Ende des HTML-Dokuments an. Jede Webseite müssen Sie als Datei abspeichern. Verwenden Sie aussagekräftige Namen, um sich in Ihrem Webauftritt zurecht zu finden, ohne alle Seiten öffnen zu müssen. HERDT-Verlag 15

4 2 HTML5 - Grundlagen der Erstellung von Webseiten Die Bedeutung der Startseite Wenn Sie Ihre Webseiten im Web veröffentlichen, wird Ihr Webauftritt über eine Adresse wie abrufbar sein. Wenn jemand diese Adresse in seinen Browser eingibt, geschieht folgendes: Der Browser (auch Webclient genannt) fordert ein Webserver genanntes Programm auf, diese Datei zu liefern. Sie möchten sicher eine bestimmte Webseite Ihres Webauftritts als Startseite festlegen, die ausgeliefert wird, wenn nicht eine ganz spezielle Seite wie angefordert wird. Die Startseite bzw. Einstiegsseite ist dasjenige HTML-Dokument, das standardmäßig ausgeliefert wird, wenn ein Besucher Ihren Webauftritt ohne Angabe einer bestimmten Seite aufruft. Wie Sie die Startseite benennen müssen, sodass sie vom Webserver als solche erkannt wird, schreibt Ihr Webspace-Provider vor. Meistens ist der Name index.html, index.htm, default.html oder default.htm. Bei manchen Providern können Sie einen beliebigen Namen definieren. Code übersichtlich schreiben Um die Lesbarkeit Ihres Codes zu erhöhen, sollten Sie Zeilenumbrüche mit der Ü-Taste und Einzüge mit der T-Taste erzeugen oder Leerzeichen einfügen. So entstehen Leerräume (sogenannte Whitespace). Whitespace wird von Browsern ignoriert bzw. zu einem einzigen Leerzeichen zusammengefasst, inklusive Leerräume, die durch mehrmaliges Betätigen der Leertaste entstehen. <!DOCTYPE html> <html> <head> Ü-Taste betätigen Ü-Taste betätigen T-Taste betätigen In der folgenden Abbildung sehen Sie den Code aus dem vorigen Beispiel ohne Leerräume. Der Code wird vom Browser identisch dargestellt; er ist jedoch für Menschen nicht gut zu lesen. <!DOCTYPE html> <html><head><meta charset="utf-8"><title>hotel Vallora, Nordseeküste </title></head><body>hotel Vallora</body></html> Webseite speichern Speichern Sie die Datei als HTML-Dokument unter dem Namen index.html und legen Sie beim Speichern die Codierung UTF-8 fest. Alle Webseiten müssen mit der Dateinamenserweiterung.htm oder.html versehen werden, sodass Browser diese als HTML-Dateien erkennen. Welche der beiden Schreibweisen Sie benutzen, bleibt Ihnen überlassen. 16 HERDT-Verlag

5 Die erste Webseite mit HTML erstellen 2 Der meisterwendete Zeichensatz ist UTF- 8, der Sonderzeichen und fremde Schriftzeichen bereitstellt, z. B. russische, arabische und chinesische. Öffnen Sie die Webseite im Browser, indem Sie in Ihrem Dateimanager (z. B. Windows- Explorer) mit der rechten Maustaste auf die gespeicherte Datei klicken und den Kontextmenüpunkt Öffnen mit - Browsername (z. B. Firefox) wählen. Der Quelltext wird vom Browser interpretiert und angezeigt. Das Element title wird als Titel Ihres Dokumentes erkannt und als Tab-Titel dargestellt. Der Text, der sich zwischen den <body>-tags befindet, stellt den Dokumentinhalt dar. Der Text wird in der Standardgröße und -schriftart angezeigt. Sie lernen im nächsten Kapitel, wie Sie den Text mithilfe von CSS formatieren. Titel der Webseite Inhalt der Webseite Webseite im Browser anzeigen (Mozilla Firefox 6) Webseiten schnell im Browser anzeigen Bei der Erstellung der HTML-Dokumente in diesem Buch ist es wichtig, die Dokumente in einem beliebigen Browser zu betrachten, um Fehler zu erkennen und zu korrigieren. Lassen Sie das Browserfenster mit der geladenen Webseite geöffnet. Nehmen Sie die gewünschten Änderungen im Editor vor und speichern Sie das Dokument. Wechseln Sie zum geöffneten Browserfenster und aktualisieren Sie die Ansicht, indem Sie je nach Browser auf das Symbol klicken. Mit der Funktionstaste % bzw. der Tastenkombination S r können Sie Webseiten in Ihrem Browser schnell aktualisieren. HERDT-Verlag 17

6 2 HTML5 - Grundlagen der Erstellung von Webseiten Mitunter wirken die Standardschriftgrößen bzw. die Abstände von sinnvoll verwendeten Überschriften unpassend. Setzen Sie Überschriften dennoch so ein, dass eine nachvollziehbare Hierarchie entsteht. Sie können die Formatierung mit CSS genau festlegen. Überschriften wie h1 und h2 werden von Suchmaschinen stark gewichtet und haben deshalb einen großen Einfluss darauf, wie weit oben Ihre Webseiten in der Ergebnisliste von Suchmaschinen auftauchen (Ranking). Durch die Verwendung von Überschriften können Bildschirmlesegeräte für Sehbehinderte den Aufbau der Webseite genauer ermitteln und besser zusammenfassen. 2.5 Elemente verschachteln Ihre Webseite besteht aus Elementen, die einander folgen oder ineinander verschachtelt sind. Auf Ihrer ersten Beispiel-Webseite befindet sich ein Element html, darin head und body (nacheinander) und im body wiederum Überschriften und Absätze. Absätze befinden sich nicht innerhalb von Überschriften aber innerhalb der unsichtbaren Elemente body und html. Beachten Sie, dass es nur innere und äußere Elemente gibt (auch Eltern-Element bzw. Kind-Element genannt). Stellen Sie sich HTML-Elemente wie Boxen bzw. Kartons vor: viele kleine Boxen können sich in einer großen Box befinden, sie können aber nicht herausragen. In Ihrem Beispiel sehen Sie, dass alle Elemente (Überschriften wie Absätze) innerhalb des Dokumentrumpfes nicht nur geöffnet, sondern auch geschlossen werden. Wenn Sie nicht korrekt öffnen und schließen, erzeugen Sie einen sogenannten Verschachtelungsfehler (engl.: nesting error). Verschachtelungsfehler führen oft zu Fehldarstellungen im Browser. 2.6 Schnellübersicht Syntax <body> </body> <br /> <h1> </h1>, <h2> </h2>, <h6> </h6> <head> </head> <html> </html> Beschreibung Der Bodybereich beinhaltet die Information, die im Hauptbereich des Browserfensters (Viewport) angezeigt werden soll. Dieses Tag teilt dem Browser mit, wo eine Zeile enden soll. Mit Überschriften werden Webseiten sinnvoll untergliedert. So erleichtern Sie Nutzern und Software (z. B. Vorleseprogramme und Suchmaschinen) die Analyse Ihrer Seite. Der Dokumentkopf beinhaltet Informationen für Browser und Suchmaschinen. Die Informationen in diesem Bereich werden nicht im Browserfenster angezeigt. Diese Tags kennzeichnen Anfang und Ende des HTML-Dokumentes. Das html-element enthält alle anderen Elemente und wird daher auch Wurzel-Element (engl.: root element) genannt. 24 HERDT-Verlag

7 Die erste Webseite mit HTML erstellen 2 Syntax <p> </p> Beschreibung Anfang und Ende von Absätzen werden mit diesen Tags ausgezeichnet. <title> </title> Das Titel-Element enthält den Namen Ihres HTML-Dokumentes. Dieser wird unter anderem in der Titelleiste des Browsers angezeigt und als Lesezeichen verwendet. Attribute Dokumenttyp- Definition Kleinschreibung Wurzelverzeichnis (engl.: root directory) oder Stammordner Startseite Tags Texteditor Mithilfe von Attributen können HTML-Elemente näher beschrieben werden. Angabe der HTML-Version (auch DOCTYPE genannt), zu Beginn des HTML-Dokumentes Die etablierte und empfohlene Schreibweise für den HTML-Code Der Ordner, in dem alle Dateien eines Webauftritts abgespeichert werden Die Webseite, die standardmäßig vom Webserver ausgeliefert wird, wenn keine andere Datei explizit angefordert wird. Marker, die dem Browser Anfang und Ende von Elementen anzeigen. Mit Elementen legen Sie die Struktur Ihrer Dokumente fest. Programm, mit dem Sie Nur-Text-Dokumente (wie HTML) erstellen und bearbeiten können. 2.7 Übung Eine weitere Webseite für den Webauftritt erstellen Level Zeit ca. 15 min Übungsinhalte Übungsordner Ergebnisdatei HTML-Dokument erstellen und Grundgerüst festlegen Seitentitel definieren Text mit Absätzen und Überschriften strukturieren Bild einbinden Hyperlink erstellen hotel02 hotel02-e Erstellen Sie eine neue Webseite für das Hotel Vallora mit dem Seitentitel Hotel Vallora - Ausflüge. Geben Sie eine beliebige Beschreibung von Ausflugszielen ein und strukturieren Sie den Text mit Absätzen und Überschriften. Speichern Sie die Webseite mit dem Namen ausfluege.html und testen Sie diese im Browser. HERDT-Verlag 25