HTML4 HTML4. Autorinnen: Tina Wegener, Linda York. Inhaltliches Lektorat: Andrea Weikert. 5. Ausgabe, 2. Aktualisierung, Juli 2011

Transkript

1 HTML4 Autorinnen: Tina Wegener, Linda York Inhaltliches Lektorat: Andrea Weikert 5. Ausgabe, 2. Aktualisierung, Juli 2011 HERDT-Verlag für Bildungsmedien GmbH, Bodenheim Internet: Alle Rechte vorbehalten. Kein Teil des Werkes darf in irgendeiner Form (Druck, Fotokopie, Mikrofilm oder einem anderen Verfahren) ohne schriftliche Genehmigung des Herausgebers reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden. Dieses Buch wurde mit großer Sorgfalt erstellt und geprüft. Trotzdem können Fehler nicht vollkommen ausgeschlossen werden. Verlag, Herausgeber und Autoren können für fehlerhafte Angaben und deren Folgen weder eine juristische Verantwortung noch irgendeine Haftung übernehmen. HTML4 Grundlagen der Erstellung von Webseiten HTML4 Sollte es uns trotz intensiver Recherchen nicht gelungen sein, alle Rechteinhaber der verwendeten Quellen und Abbildungen zu finden, bitten wir um kurze Nachricht an die Redaktion. Die in diesem Buch und in den abgebildeten bzw. zum Download angebotenen Dateien genannten Personen und Organisationen, Adress- und Telekommunikationsangaben, Bankverbindungen etc. sind frei erfunden. Übereinstimmungen oder Ähnlichkeiten mit lebenden oder toten Personen sowie tatsächlich existierenden Organisationen oder Informationen sind unbeabsichtigt und rein zufällig. Die Bildungsmedien des HERDT-Verlags enthalten Links bzw. Verweise auf Internetseiten anderer Anbieter. Auf Inhalt und Gestaltung dieser Angebote hat der HERDT- Verlag keinerlei Einfluss. Hierfür sind alleine die jeweiligen Anbieter verantwortlich.

2 I HTML4 - Grundlagen der Erstellung von Webseiten Erste Schritte mit HTML und CSS 1 Was Sie wissen sollten Bevor Sie beginnen Was sind HTML, CSS und XHTML? Schnellübersicht Die erste Webseite mit HTML erstellen Erste Schritte mit HTML Webseiten erstellen, speichern und testen Webseiten strukturieren Webseiten mit Bildern und Hyperlinks versehen Schnellübersicht Übung Erste optische Formatierungen mit CSS Erste Schritte mit CSS Interne Stylesheets erstellen Mit Vererbung richtig arbeiten Externe Stylesheets verwenden Farbwerte definieren Maßeinheiten in CSS festlegen Schnellübersicht Übung Organisation und Struktur Ordner erstellen Relative und absolute Pfade definieren Mit Inline- und Blockelementen arbeiten Elemente richtig verschachteln Logische Textauszeichnung verwenden Sonderzeichen und Kommentare Code- bzw. optische Editoren benutzen Schnellübersicht Übung Webseitenstruktur mit HTML ausbauen 5 Verweise erstellen Wie werden Verweise eingesetzt? Hyperlinks zu Seiten innerhalb einer Website erstellen Hyperlinks zu Seiten im Web erstellen Hyperlinks innerhalb einer Webseite Ziele von Hyperlinks Grafiken als Hyperlinks Hyperlinks zu erstellen Verweis auf andere Dokumenttypen Übung Bilder in Webseiten integrieren Mit Grafiken arbeiten Grafiken formatieren Grundwissen über Grafikformate Übung Listen Mit Listen arbeiten Unsortierte Listen nutzen Sortierte (nummerierte) Listen Definitionslisten Listen verschachteln und kombinieren Übung Tabellen erstellen Grundlagen zu Tabellen Spalten- und Tabellenüberschriften Bereiche einer Tabelle organisieren Spalten organisieren Spalten und Zeilen verbinden Übung...79 Webstandards und Veröffentlichung 9 Webstandards und Umstieg auf XHTML Standardisiertes HTML 4 schreiben Code validieren XHTML schreiben Schnellübersicht Übung Seiten ins Web stellen Einen Domainnamen registrieren Einen geeigneten Provider finden Webseiten für Suchmaschinen vorbereiten Webspace reservieren Eine Website veröffentlichen Schnellübersicht Übung...97 Optische Gestaltung mit CSS 11 Text mit CSS stylen Das Aussehen von Text mit CSS gestalten Schriftfamilien bzw. -listen definieren Schriftgrößen mit Schlüsselwörtern definieren Kurzform für Texteigenschaften verwenden Schnellübersicht Übung HERDT-Verlag

3 Inhalt I 12 Weitere CSS-Eigenschaften definieren Elemente mit Hintergrundfarben und -bildern versehen Innenabstände, Rahmen und Außenabstände gestalten Hyperlinks formatieren Listen formatieren Tabellen formatieren Stylesheets validieren Schnellübersicht Übung Weitere Techniken 14 Formulare erstellen Formulare definieren Eingabefelder Auswahllisten Kontroll- und Optionsfelder Grafische Schaltflächen Übung Anhang A: TextEdit (Mac) verwenden Anhang B: Hexadezimalwerte berechnen Stichwortverzeichnis Webseiten mit Frames erstellen Frametechnik einsetzen Eine Website mit Frames erstellen Schnellübersicht HERDT-Verlag 3

4 1 HTML4 - Grundlagen der Erstellung von Webseiten 1 Was Sie wissen sollten In diesem Kapitel erfahren Sie wie Sie mit dem vorliegenden Buch effektiv arbeiten können was HTML, CSS und XHTML sind 1.1 Bevor Sie beginnen Das sollten Sie bereits können Dieses Buch lässt sich am besten nutzen, wenn Sie bereits über folgende Vorkenntnisse verfügen: Sie besitzen gute Betriebssystem-Kenntnisse (z. B. Windows bzw. OS X). Sie sind sicher im Umgang mit einem Webbrowser. Effektiv mit diesem Buch arbeiten Sie sehen immer am Kapitelanfang, welche Inhalte im Kapitel beschrieben werden. Sie lernen die Funktionen von HTML, CSS und XHTML anhand handlungsorientierter Arbeitsanleitungen, die Sie Schritt für Schritt direkt am Computer umsetzen können. In der Schnellübersicht am jeweiligen Kapitelende finden Sie eine kurze Zusammenfassung der vermittelten Kenntnisse. Mithilfe der Schnellübersicht können Sie Ihren Wissensstand prüfen oder das Erlernte zu einem späteren Zeitpunkt schnell nachschlagen. Festigen Sie Ihre Fähigkeiten und Kenntnisse. Nutzen Sie hierzu die praxisorientierten Übungen am Ende der Kapitel. Vollziehen Sie anhand der dortigen Aufgaben die Kapitelinhalte noch einmal nach. Hervorhebungen im Text Damit Sie bestimmte Elemente mit einem Blick erkennen und zuordnen können, werden diese im Text durch eine besondere Schreibweise hervorgehoben. Code wird in der Schriftart Courier New geschrieben. [ ] Bei Darstellungen der Syntax einer Programmiersprache kennzeichnen eckige Klammern optionale Angaben. Ordner- und Dateinamen sowie Text, der als Beispiel bzw. als Übung vom Benutzer eingegeben werden sollte, werden in Kursivschrift geschrieben. Arbeitsschritte Übungsschritte HTML-Elementnamen sind grau hinterlegt und beginnen mit einem Dreieck (). sind ebenfalls grau hinterlegt und beginnen mit der Nummer des jeweiligen Übungsschrittes (z. B. mit ). sowie HTML-Attributnamen und CSS-Eigenschaften werden fett hervorgehoben. 4 HERDT-Verlag

5 Was Sie wissen sollten 1 Was bedeuten die Symbole? Hilfreiche Zusatzinformation Praxistipp Schnelle Alternative Warnhinweis Nachhaltig lernen mit Beispiel-, Übungs-, und Ergebnisdateien Für die meisten Kapitel stehen Ihnen Beispiel-, Übungs-, und Ergebnisdateien zur Verfügung. Mithilfe der Beispieldateien können Sie die erläuterten Programmfunktionen direkt nachvollziehen. Die Übungen am Ende der einzelnen Kapitel lassen sich ohne weitere Vorbereitungen mit den jeweiligen Übungsdateien durchführen. Anhand der Ergebnisdateien kontrollieren Sie schnell, ob Sie die entsprechenden Übungen korrekt ausgeführt haben. Sie können die Dateien im Internet auf der Website des HERDT-Verlages unter kostenlos herunterladen. Sie finden die entsprechenden Dateien, indem Sie in das obere Suchfeld den Suchbegriff HTML4 eingeben und in der Trefferliste den Titel des Buches wählen. Starten Sie den Download, indem Sie auf der anschließend angezeigten Webseite auf den Link Übungsdateien öffnen klicken. Wichtig: Einige Dateien sind untereinander verknüpft. Damit Sie die Dateien problemlos nutzen können, erstellen Sie auf dem Laufwerk Ihres Computers, z. B. dem Laufwerk C:, einen neuen Ordner Übung (C:\Übung). Entpacken Sie in diesem Ordner den heruntergeladenen komprimierten Ordner mit den Übungsdateien (html4_bu). Internetadressen in diesem Buch Die in diesem Buch aufgeführten Internetadressen waren zum Zeitpunkt der Bucherstellung gültige Adressen. Sollten Sie die Inhalte nicht mehr unter den angegebenen Adressen finden, kann dies daran liegen, dass die Inhalte inzwischen komplett aus dem Internet genommen wurden oder unter einer neuen Adresse zu finden sind. Was benötigen Sie zum Arbeiten mit diesem Buch? Um die Arbeitsschritte in diesem Buch durchzuführen, benötigen Sie einen Webbrowser, wie zum Beispiel Internet Explorer, Mozilla Firefox oder Apple Safari, einen Texteditor, wie zum Beispiel Windows Editor oder Macintosh TextEdit, für einige Beispiele einen aktiven Internetzugang. Möchten Sie Ihre HTML-Kenntnisse erweitern? Dann empfehlen wir Ihnen folgende HERDT-Bücher, die Sie auf der Website des HERDT-Verlages unter bestellen können: HTML4 - Zusatzwissen zur Gestaltung von Webseiten CSS - Cascading Style Sheets (Level 2.1) - Grundlagen JavaScript Grundlagen HERDT-Verlag 5

6 1 HTML4 - Grundlagen der Erstellung von Webseiten 1.2 Was sind HTML, CSS und XHTML? Mit HTML kam das Web Die Entwicklung von HTML begann im Jahr 1990, als sein Erfinder, Tim Berners-Lee, am CERN (Forschungsinstitut für Kernphysik) in Genf tätig war. Der Informationsaustausch zwischen Computern, die mit unterschiedlichen Systemen und Programmen arbeiteten, war damals besonders schwierig. Berners-Lee suchte nach einer Möglichkeit, um verschiedene Computersysteme zu vernetzen und Daten auszutauschen. Zunächst kombinierte Berners-Lee zwei bereits existierende Technologien: Hypertext - ein System, mit dem Objekte wie Text und Bilder miteinander verknüpft werden können SGML (Standard Generalized Markup Language) - eine Auszeichnungssprache zur Beschreibung von elektronischen Dokumenten Das daraus entstandene HTML (Hypertext Markup Language) ist eine Auszeichnungssprache (Markup Language), mit der der Inhalt eines Dokumentes beschrieben werden kann. HTML ist keine Programmiersprache, da mit HTML keine Anwendungen geschrieben werden können. Um den Austausch von HTML-Dokumenten zwischen verschiedenen Computersystemen zu ermöglichen, entwickelten Berners-Lee und sein Team zwei neue Technologien: HTTP (Hypertext Transfer Protokol), das Protokoll zur Datenübertragung Browser, eine spezielle Software, um die HTML-Dokumente anzuzeigen Der erste Browser wurde WorldWideWeb genannt. Später wurde dieser Begriff für den weltweiten systemunabhängigen Austausch von Informationen übernommen, den diese neuen Entwicklungen hervorgerufen haben. Zu dieser Zeit gründete Berners-Lee auch das W3C (World Wide Web Consortium, - ein Gremium, das sich mit der Standardisierung von im Web eingesetzten Techniken beschäftigt, z. B. HTML. Die aktuellste Version von HTML ist HTML4.01. Im Jahr 1994 kam der Netscape Navigator und 1995 der Internet Explorer von Windows auf den Markt. Beide Firmen haben neue markeneigene HTML-Erweiterungen entwickelt, um ihre Marktanteile zu erhöhen. Während des sogenannten Browserkriegs wurden die Unterschiede in der Darstellung von HTML-Code zwischen den zwei Browsern so extrem, dass Webdesigner teilweise zwei auf den jeweiligen Browser angepasste Webseiten erstellen mussten. Als Antwort auf dieses Problem entwickelte das W3C die Formatierungssprache CSS (Cascading Style Sheets). CSS gilt mittlerweile als Standard und wird von allen gängigen Browsern unterstützt. Das Traumpaar HTML und CSS Mithilfe von CSS können Webseitenentwickler den Inhalt ihrer Webseiten von ihrer Darstellung trennen. Der Inhalt von Webseiten wird in HTML und die Formatierung in CSS geschrieben. CSS bietet nicht nur mehr Formatierungsmöglichkeiten als HTML, sondern auch andere wichtige Vorteile: Vorteil Webseiten werden schneller geladen. Die Formatierung kann zentral verwaltet werden. Der Formatierungscode kann einfacher gefunden bzw. übersprungen werden. Beschreibung Die HTML-Dateien sind kleiner, da sie nur den Code für den Inhalt enthalten. Sie können spätere Änderungen am Layout der Webseiten einmal in der CSS-Datei vornehmen. Diese Änderungen wirken sich auf alle damit verbundenen Webseiten aus. Da der Formatierungscode entweder als separate CSS-Datei oder aber im Kopfbereich des HTML-Dokuments eingegeben wird, ist die nachträgliche Bearbeitung der Webseiten einfacher. Zusätzlich wird das Vermitteln der Inhalte durch Bildschirmlesegeräte für Sehbehinderte erleichtert. Diese können den CSS-Code überspringen und sich direkt mit dem Inhalt der Webseite befassen. 6 HERDT-Verlag

7 Was Sie wissen sollten 1 Vorteil Der Inhalt von Webseiten bleibt übersichtlich. Der gleiche Inhalt kann unterschiedlich dargestellt werden. Beschreibung Formatierungscode wird nicht mehr direkt in den Code der Webseiten geschrieben, sodass der Inhalt der Webseite überschaubarer bleibt. Sie können die Inhalte der Webseite für die Anzeige auf Computerbildschirmen und tragbaren Geräten optimieren, ohne den HTML- Code zu ändern. Was ist XHTML? XHTML (Extensible Hypertext Markup Language) ist eine Weiterentwicklung von HTML gemäß XML. XML (Extensible Markup Language) ist eine vom W3C spezifizierte Auszeichnungssprache zur Erstellung von Dokumenten. In diesem Buch werden Sie sich mit XHTML 1.0 vertraut machen, da diese Version (im Gegensatz zur aktuellsten Version 1.1) auch von älteren Browsern unterstützt wird. Die Regeln der Sprache XHTML (die sogenannte Syntax) sind strenger als bei HTML. Grundsätzlich ist das Aufspüren von Fehlern in Sprachen mit strengeren Syntaxen viel einfacher als in Sprachen mit großzügigen Syntaxen. Das X in XHTML und XML steht für erweiterbar. Erweiterbar bedeutet, dass Entwickler bei Bedarf eigenen Code (Tags) festlegen können. Warum sollten Webseiten mit XHTML codiert werden? XHTML-Dokumente lassen sich besser warten, weil Fehler schneller gefunden werden können. XHTML ist erweiterbar. Zunehmende Webnutzung mittels tragbarer Geräte XHTML ist für die Wiedergabe von Webseiten auf mobilen Geräten ausgelegt. Die Nutzung des Webs mittels mobiler Geräte nimmt jedes Jahr zu und die Entwicklung von Webseiten bewegt sich auch in diese Richtung. Mit XHTML können Webentwickler ihre Inhalte für diese Geräte effektiver vorbereiten. 1.3 Schnellübersicht Was bedeutet? HTML HTTP Browser W3C CSS XHTML Hypertext Markup Language ist eine Auszeichnungssprache für Webseiten. Das Hypertext-Transfer-Protokoll ermöglicht die Übertragung von HTML-Dokumenten. Browser sind Software, die HTML-Dokumente wiedergibt. Das World Wide Web Consortium setzt die Standards für im Web eingesetzte Techniken. CSS (Cascading Style Sheets) ist eine standardisierte Formatierungssprache, die HTML ergänzt. Extensible Hypertext Markup Language ist eine Weiterentwicklung von HTML mit XML. HERDT-Verlag 7

8 2 HTML4 - 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 welche Elemente für HTML-Seiten erforderlich sind 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 Erste Schritte mit HTML HTML-Code einer Webseite anschauen Sie geben Code in einer HTML-Datei ein, um dem Browser mitzuteilen, wie Ihr Text aussehen soll. Diese Anweisungen für den Browser werden mithilfe von Auszeichnungen, sogenannten Tags, festgelegt. Im folgenden Beispiel sehen Sie den HTML-Code für eine einfache Webseite, auf der ein fiktives Hotel vorgestellt wird. Die Tags werden in der Abbildung fett hervorgehoben. Die meisten Tags treten in Paaren auf, mit einem öffnenden und einem schließendem Tag, auch Start- und Endtags genannt, die einen Text einschließen. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html> <head> <title>hotel Vallora</title> Titel </head> <body> <h1>willkommen auf der Webseite vom Hotel Vallora!</h1> Überschrift 1 <img src="hotel.jpg"> Bild <p> Bei Ihrem nächsten Aufenthalt in unserer Gegend würden wir Sie gern persönlich begrüßen und Absatz mit unserem freundlichen und kompetenten Service verwöhnen. </p> <h2>zimmerreservierungen:</h2> Überschrift 2 <p> Unsere Rezeption ist 24 Stunden besetzt. Sie können auch Absatz gern unser Online-Buchungsformular ausfüllen. </p> </body> </html> HTML-Code einer Webseite 8 HERDT-Verlag

9 Die erste Webseite mit HTML erstellen 2 Die Dokumenttyp-Definition (auch DOCTYPE genannt) am Anfang eines HTML-Dokumentes enthält Informationen über den verwendeten Code für den Browser. Welche Informationen der Code beinhaltet, wird in Kapitel 9 erklärt. Das Aussehen im Browser vergleichen Der Browser erkennt anhand der Tags, welcher Text als Titel der Seite, als Überschrift und als Absatz gilt sowie welches Bild eingefügt werden soll. Titel Überschrift 1 Bild Absatz Überschrift 2 Absatz Darstellung des HTML-Codes im Browser Quelltext von Seiten im Web anzeigen Sie können den HTML-Code von Webseiten anschauen, die sich im Web befinden. Alle gängigen Browser bieten diese Möglichkeit an. Den HTML-Code einer im Browser geladenen Seite zeigen Sie beispielsweise in Mozilla Firefox über den Menüpunkt ANSICHT - SEITENQUELLTEXT ANZEIGEN, in Internet Explorer über den Menüpunkt ANSICHT - QUELLTEXT oder in Macintosh Safari über den Menüpunkt DARSTELLUNG - QUELL- TEXT ANZEIGEN an. 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 Ihre Website ablegen werden. Dieser Ordner wird Stammordner genannt. Für die Arbeit mit diesem Buch nennen Sie Ihren Ordner hotel. Mit Texteditoren arbeiten Da HTML-Dateien nur aus Text bestehen, können Sie den Inhalt Ihrer Webseite in einem beliebigen Texteditor eingeben. In diesem Buch wird mit dem Windows Editor gearbeitet, der im Lieferumfang von Windows vorhanden ist. Wenn Sie mit einem Macintosh arbeiten, können Sie die Macintosh-Anwendung TextEdit verwenden. Im Anhang A dieses Buchs erfahren Sie, wie Sie TextEdit für die Eingabe von HTML-Code tauglich machen. HERDT-Verlag 9

10 2 HTML4 - Grundlagen der Erstellung von Webseiten Klicken Sie auf die START-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. HTML-Code schreiben Leeres Windows-Editor-Fenster HTML-Code besteht aus Text und Befehlen, die Tags genannt werden. Der Text kann auf der Webseite gelesen werden. Über die Tags teilen Sie dem Browser die Struktur Ihrer Seite und die Bedeutung Ihres Texts mit, z. B. ob es sich beim ausgezeichneten Text um eine Überschrift, einen Absatz oder einen Hyperlink handelt. Mit Tags teilen Sie dem Browser auch mit, welche Bilder er einfügen soll. Aus was bestehen Tags? Tags bestehen aus einem Element, das von spitzen Klammern umgeben ist. Beispielsweise wird über das Element title der Titel einer Webseite definiert. Ein Tag, das dieses Element verwendet, ist <title>. Manchmal müssen Tags durch Attribute ergänzt werden. Attribute setzen sich aus einem Attributnamen, gefolgt von einem Gleichheitszeichen, und einem Attributwert zusammen. Der Attributwert wird in Anführungszeichen eingeschlossen. Sie teilen beispielsweise dem Browser mit einem <img>-tag mit, dass ein Bild auf der Webseite eingefügt werden soll. Mit dem src-attribut legen Sie fest, wo sich die Bilddatei befindet. <img src="bilder/logo.gif"> <img>-tag mit dem erforderlichen src-attribut Manchmal wird ein Tag mit mehreren Attributen ergänzt. Die Attribute werden durch Leerzeichen voneinander getrennt. Die Reihenfolge der Attribute ist beliebig. Welche Elemente gibt es? Die meisten Elemente bestehen aus einem öffnenden und einem schließenden Tag, die einen Textbereich umschließen bzw. auszeichnen (auf Englisch markup, daher die Bezeichnung Hypertext Markup Language). Das schließende Tag beginnt mit der Zeichenfolge < und /. Elemente, die aus einem öffnenden und einem schließenden Tag bestehen, werden Container-Elemente genannt. Der Titel einer Webseite wird beispielsweise mit dem Container-Element title wie folgt festgelegt. <title>hotel Vallora</title> Öffnendes und schließendes Tag zeichnen den umschlossenen Text als Seitentitel aus Einige Elemente, die nur dazu verwendet werden, dem Browser eine Anweisung zu geben, bestehen nur aus einem Tag. Das schließende Tag entfällt. Diese Elemente haben keinen Textinhalt und werden auch leere Elemente genannt. <img src="bilder/logo.gif"> Das <img>-tag enthält keinen Text, sondern die Anweisung für den Browser, dass er ein Bild laden muss Groß- und Kleinschreibung In HTML müssen Sie bei Element- und Attributnamen nicht auf Groß- und Kleinschreibung achten. Ob Sie <title>, <TITLE> oder <Title> schreiben, stellt kein Problem für den Browser dar. Die Kleinschreibung hat sich jedoch durchgesetzt und ist für den Umstieg auf XHTML unentbehrlich. Eine einheitliche Schreibweise ist übersichtlicher und verringert die Fehlerquote beim Codeschreiben. Am besten gewöhnen Sie sich von vornherein an, alle Tags kleinzuschreiben. 10 HERDT-Verlag

11 Die erste Webseite mit HTML erstellen Webseiten erstellen, speichern und testen Das Grundgerüst einer Webseite eingeben Jedes HTML-Dokument beginnt mit der Angabe der HTML-Version (der Dokumenttyp-Definition bzw. DOCTYPE). Das HTML-Dokument selbst wird von den Tags <html> und </html> eingeschlossen. Dazwischen gibt es zwei Teilbereiche: den Dokumentkopf, der Informationen über das HTML-Dokument enthält und nicht vom Browser dargestellt wird. Er beinhaltet den Titel der Webseite, der in der Titelleiste des Browsers angezeigt und als Lesezeichen verwendet wird, falls Besucher Ihre Webseite zu ihren Lesezeichenlisten hinzufügen. den Dokumentrumpf, der den eigentlich darzustellenden Inhalt enthält. Diese beiden Bereiche werden im Englischen als head und body (Deutsch: Kopf und Rumpf) bezeichnet und entsprechend mit den Tags <head> und </head> bzw. <body> und </body> markiert. Beschreibung Code HTML-Version <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " HTML-Starttag Anfang des Kopfteils Ende des Kopfteils Anfang des Seiteninhalts Ende des Seiteninhalts HTML-Endtag <html> <head> <title> Hotel Vallora </title> </head> <body> Willkommen auf der Webseite vom Hotel Vallora! </body> </html> Geben Sie in Ihrem Texteditor das Tag <html> ein. Geben Sie das Starttag des head-elements ein. Geben Sie das Starttag des title-elements ein. Geben Sie einen Text für den Titel der Seite ein, hier Hotel Vallora. Schließen Sie den Titel mit einem schließenden Tag ab. Schließen Sie den <head>-bereich gleichfalls mit seinem schließenden Tag ab. Geben Sie das Starttag des body-elements ein. Geben Sie den Text Willkommen auf der Webseite vom Hotel Vallora! ein. Schließen Sie den <body>-bereich mit einem schließenden Tag ab. Geben Sie das schließende Tag </html> ein. Speichern Sie die Datei unter dem Namen index.html. Öffnen Sie die Datei in einem Browser. HTML-Tags mit <head>- und <body>-bereichen HERDT-Verlag 11

12 2 HTML4 - Grundlagen der Erstellung von Webseiten Der Quelltext wird vom Browser interpretiert und verarbeitet. Das Element title wird als Titel Ihres Dokumentes erkannt und als solcher dargestellt. Der Text, der sich zwischen den <body>-tags befindet, stellt den Dokumentinhalt dar. Da keine weiteren Formatierungen vorgenommen wurden, wird der Text in der Standardgröße und -schriftart angezeigt. Code übersichtlich schreiben Webseite im Browser anzeigen (Mozilla Firefox 3) Um die Lesbarkeit Ihres Codes zu erhöhen, sollten Sie, wie in der vorigen Abbildung ersichtlich, Zeilenumbrüche (mit RETURN ) einfügen. Zeilenumbrüche und Einzüge, die Sie im Texteditor erzeugen, werden von Browsern ignoriert. Der rechts abgebildete Code wird beispielsweise genau wie der Code aus der vorigen Abbildung dargestellt; er ist jedoch nicht besonders übersichtlich. Code ohne Zeilenumbrüche und Einzüge In der Praxis wird HTML-Code wie in der Tabelle auf der vorigen Seite und in der Abbildung auf Seite 8 eingerückt. In den weiteren Abbildungen in diesem Buch wurde auf das Einrücken von Code verzichtet, um die Eingabe in einem Texteditor zu erleichtern und Platz zu sparen. Startseiten benennen Handelt es sich um die Webseite, die standardmäßig angezeigt wird - die sogenannte Startseite - müssen Sie die Datei mit dem Namen versehen, den Ihr Webspace-Provider vorschreibt. In der Regel heißt die Startseite index.html, index.htm, default.html oder default.htm. Webseiten speichern Während der Eingabe oder Bearbeitung von HTML-Code sollten Sie immer wieder einmal speichern. Bei einem Stromausfall oder einem ungeplanten Programmabbruch können Sie damit größere Datenverluste vermeiden. 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. Im folgenden Beispiel wird die Startseite unter Windows Vista gespeichert. In anderen Betriebssystemen ist die Vorgehensweise analog. Speichern Sie Ihre Seite, beispielsweise im Windows Editor über den Menüpunkt DATEI - SPEICHERN. Klicken Sie im Dialogfenster SPEICHERN UNTER im Bereich LINKFAVORITEN auf den Link COMPUTER, und wechseln Sie zum Ordner, den Sie für Ihre Webseiten erstellt haben. Zeigen Sie alle Dateien in diesem Ordner an, indem Sie im Feld DATEITYP den Eintrag ALLE DATEIEN wählen. Geben Sie im Feld einen Namen für Ihre Webseite und die Endung.html ein. Betätigen Sie die Schaltfläche SPEICHERN. Eine HTML-Datei speichern (Windows Editor unter Windows Vista) 12 HERDT-Verlag

13 Die erste Webseite mit HTML erstellen 2 Webseiten im Browser zwischendurch testen Sie können Ihre Webseiten schnell zwischendurch testen, indem Sie Ihr Browserfenster mit der geladenen Webseite geöffnet lassen. Nachdem Sie eine Änderung in Ihrem Editor vorgenommen haben, speichern Sie die HTML-Datei. Wechseln Sie anschließend zum geöffneten Browserfenster und klicken Sie auf das entsprechende Symbol, zum Beispiel das Symbol im Mozilla Firefox 3 bzw. das Symbol im Internet Explorer 7, um die Webseite zu aktualisieren bzw. neu zu laden. Webseite neu laden Webseiten in verschiedenen Browsern testen Obwohl der Code auf dieser einfachen Webseite in jedem Browser gleich dargestellt wird, sollten Sie beachten, dass Browser sich manchmal in der Darstellung Ihrer Webseiten unterscheiden werden. Dies tritt besonders bei der Darstellung von CSS-Formatierungen auf. Deshalb ist es wichtig, Ihre Webseiten in verschiedenen Browsern zu testen. Browser Beschreibung Der Internet Explorer ist der am meisten verwendete Browser, da er mit dem Windows- Betriebssystem automatisch installiert wird. Weil viele Webnutzer den Internet Explorer verwenden, sollten Sie Ihren Code in diesem Browser testen. Internet Explorer Den Internet Explorer können Sie hier kostenlos herunterladen: Dieser Browser ist unter Webentwicklern sehr beliebt, weil er die Standards der W3C beachtet. Wenn Sie normgerechten Code schreiben, werden Ihre Webseiten in Firefox richtig dargestellt. Mozilla Firefox Mozilla Firefox wurde als Open-Source-Projekt entwickelt und kann für Windows, Macintosh sowie Unix-Systeme kostenlos heruntergeladen werden. Mozilla Firefox können Sie hier herunterladen: Die aktuelle Version von Apple Safari 3 geht mit Webseiten genauso normgerecht um wie der Mozilla Firefox. Safari wird mit dem Betriebssystem Mac OS X mitinstalliert. Eine Version für Windows steht auch als kostenloser Download zur Verfügung. Apple Safari Opera Apple Safari können Sie hier herunterladen: Dieser ursprünglich kostenpflichtige Browser wird mittlerweile für Windows und Macintosh kostenlos zum Herunterladen angeboten. Er ist gleichfalls ein auf Standards basierter Browser. Dieser Browser bietet eine Ansicht für kleinere Bildschirme und ist deshalb besonders geeignet für die Entwicklung von Webseiten für mobile Geräte. Opera können Sie hier herunterladen: Welche Browser benutzen Ihre Besucher? Der Browsertyp und die Browserversion jedes Besuchers Ihrer Webseiten werden auf Ihrem Webserver protokolliert. Mit einem Blick ins Webserver-Protokoll können Sie schnell feststellen, in welchen Browsern Sie Ihre Webseiten testen sollten. In der Regel bieten Webspace-Provider solche Statistiken als Zusatzleistung an. HERDT-Verlag 13

14 2 HTML4 - Grundlagen der Erstellung von Webseiten 2.3 Webseiten strukturieren Absätze erstellen Auf Webseiten werden Absätze voneinander durch leere Zeilen getrennt. Wie Sie bereits erfahren haben, werden leere Zeilen im Code vom Browser ignoriert. Absatzumbrüche, die auf der Webseite angezeigt werden, erstellen Sie mithilfe des p-elements (von englisch paragraph). <p>text</p> Syntax für Absätze Geben Sie im <body>-bereich Ihrer Webseite das öffnende Tag des p-elements ein. Absätze im Code und im Browser dargestellt Geben Sie den Text für den Absatz ein. Schließen Sie den Absatz mit einem schließenden Tag ab. Wiederholen Sie die vorherigen Schritte für alle Absätze der Webseite. Speichern Sie die Webseite. Testen Sie die Seite im Browser. Das p-element ist ein sogenanntes Blockelement. Bei Blockelementen wird automatisch vom Browser ein Abstand vor und nach dem Element angezeigt. Die Standardgröße des Abstands hängt vom jeweiligen Element ab. Mit HTML zeichnen Sie Textblöcke als Absätze aus. Die Formatierung von Text und Absätzen, wie zum Beispiel Schriftarten, Schriftgrößen oder den genauen Abstand vor und nach Absätzen, werden Sie später mithilfe von CSS festlegen. Text<br> Zeilenumbrüche erstellen Syntax für Zeilenumbrüche Einen Zeilenumbruch innerhalb eines Absatzes können Sie mit dem br-element (von englisch break) erzwingen. Das br-element ist ein leeres Element. Leere Elemente haben keinen Inhalt; sie dienen lediglich als Hinweise für den Browser. Das br-element teilt dem Browser mit, dass die Zeile an einer bestimmten Stelle umbrochen wird. Zeilenumbrüche sind beispielsweise für die Angaben von Kontaktinformationen nützlich. Geben Sie das Starttag des p-elements ein. Tragen Sie die erste Zeile Ihres Texts ein. Geben Sie <br> ein. Wiederholen Sie gegebenenfalls die letzten zwei Schritte, um andere Textzeilen und Zeilenumbrüche festzulegen. Speichern und testen Sie die Seite. Schließen Sie den Absatz mit </p>. Zeilenumbrüche im Texteditor und im Browser 14 HERDT-Verlag

15 Die erste Webseite mit HTML erstellen 2 Überschriften erstellen Die meisten Webnutzer wollen so schnell wie möglich an die richtigen Informationen gelangen und neigen dazu, Webseiten zu überfliegen. Mithilfe von Überschriften können Sie die Inhalte strukturieren und Besucher gezielt durch Ihr Webangebot führen. <h1>überschriftentext</h1> Syntax für Überschrift 1 Es gibt 6 verschiedene Überschriften: h1, h2, h3, h4, h5 und h6. Jedes h-element (von englisch heading) hat eine Standardschriftgröße. Die Darstellung der Überschriften unterscheidet sich je nach Browser, aber bei allen Browsern ist das h1-element am größten, und jede Überschrift danach ist jeweils etwas kleiner. Die wichtigsten Überschriften Ihrer Webseite sollten Sie mit dem h1-element versehen, die zweitwichtigsten mit dem h2-element und so weiter. Geben Sie im <body>-bereich das öffnende Tag des h1-elements ein. Tragen Sie den Text der Überschrift ein. Schließen Sie die Überschrift mit </h1>. Geben Sie das öffnende Tag des h2- Elements ein. Tragen Sie den Text für diese Überschrift ein. Schließen Sie die Überschrift mit </h2>. Speichern Sie die Webseite, und testen Sie diese im Browser. Überschriften eingeben Überschriften mit Standardformatierung des Browsers Da Überschriften Blockelemente sind, wird ein Abstand vor und nach der Überschrift im Browser angezeigt. Oft wirken die Standardschriftgrößen bzw. die Abstände unpassend. Sie können die Formatierung jedoch später mit CSS genau festlegen. Die Überschriften h1 und h2 werden von Suchmaschinen ausgewertet und haben deshalb einen Einfluss darauf, ob Ihre Webseiten gefunden werden. Durch die Verwendung von Überschriften können Bildschirmlesegeräte für Sehbehinderte den Inhalt der Webseite gezielter vermitteln. HERDT-Verlag 15