HTML4 - Grundlagen der Erstellung von Webseiten
Werbung
HTML4 Autorinnen: Tina Wegener, Linda York Inhaltliches Lektorat: Andrea Weikert 5. Ausgabe, 1. Aktualisierung, März 2010 © HERDT-Verlag für Bildungsmedien GmbH, Bodenheim Internet: www.herdt.com 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. 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 HERDTVerlag keinerlei Einfluss. Hierfür sind alleine die jeweiligen Anbieter verantwortlich. HTML4 Grundlagen der Erstellung von Webseiten HTML4 I HTML4 - Grundlagen der Erstellung von Webseiten Erste Schritte mit HTML und CSS 1 Was Sie wissen sollten ............................4 1.1 1.2 1.3 Bevor Sie beginnen ........................................ 4 Was sind HTML, CSS und XHTML? ................. 6 Schnellübersicht ............................................. 7 6 Bilder in Webseiten integrieren........... 56 6.1 6.2 6.3 6.4 Mit Grafiken arbeiten ...................................56 Grafiken formatieren....................................58 Grundwissen über Grafikformate.................59 Übung............................................................63 7 Listen ...................................................... 64 2 Die erste Webseite mit HTML erstellen ....................................................8 2.1 2.2 2.3 2.4 2.5 2.6 Erste Schritte mit HTML ................................. 8 Webseiten erstellen, speichern und testen..................................................... 11 Webseiten strukturieren .............................. 14 Webseiten mit Bildern und Hyperlinks versehen ....................................................... 16 Schnellübersicht ........................................... 18 Übung ........................................................... 19 3 Erste optische Formatierungen mit CSS ....................................................20 3.1 3.2 3.3 3.4 3.5 3.6 3.7 3.8 Erste Schritte mit CSS ................................... 20 Interne Stylesheets erstellen ........................ 22 Mit Vererbung richtig arbeiten ................... 24 Externe Stylesheets verwenden ................... 25 Farbwerte definieren ................................... 26 Maßeinheiten in CSS festlegen.................... 28 Schnellübersicht ........................................... 30 Übung ........................................................... 31 4 Organisation und Struktur....................32 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8 4.9 Ordner erstellen ........................................... 32 Relative und absolute Pfade definieren...... 35 Mit Inline- und Blockelementen arbeiten ........................................................ 37 Elemente richtig verschachteln.................... 39 Logische Textauszeichnung verwenden ...... 40 Sonderzeichen und Kommentare ................ 41 Code- bzw. optische Editoren benutzen ..... 42 Schnellübersicht ........................................... 44 Übung ........................................................... 44 Webseitenstruktur mit HTML ausbauen 5 Verweise erstellen .................................46 5.1 5.2 5.3 5.4 5.5 5.6 5.7 5.8 5.9 2 Wie werden Verweise eingesetzt? .............. 46 Hyperlinks zu Seiten innerhalb einer Website erstellen.......................................... 46 Hyperlinks zu Seiten im Web erstellen........ 48 Hyperlinks innerhalb einer Webseite .......... 50 Ziele von Hyperlinks ..................................... 52 Grafiken als Hyperlinks ................................ 53 Hyperlinks zu E-Mail erstellen ..................... 54 Verweis auf andere Dokumenttypen .......... 55 Übung ........................................................... 55 7.1 7.2 7.3 7.4 7.5 7.6 Mit Listen arbeiten........................................64 Unsortierte Listen nutzen .............................64 Sortierte (nummerierte) Listen .....................66 Definitionslisten ............................................67 Listen verschachteln und kombinieren ........68 Übung............................................................69 8 Tabellen erstellen .................................. 70 8.1 8.2 8.3 8.4 8.5 8.6 Grundlagen zu Tabellen ...............................70 Spalten- und Tabellenüberschriften.............72 Bereiche einer Tabelle organisieren.............73 Spalten organisieren .....................................74 Spalten und Zeilen verbinden ......................76 Übung............................................................79 Webstandards und Veröffentlichung 9 Webstandards und Umstieg auf XHTML .............................................. 80 9.1 9.2 9.3 9.4 9.5 Standardisiertes HTML 4 schreiben ..............80 Code validieren .............................................84 XHTML schreiben ..........................................86 Schnellübersicht ............................................88 Übung............................................................88 10 Seiten ins Web stellen........................... 90 10.1 10.2 10.3 10.4 10.5 10.6 10.7 Einen Domainnamen registrieren ................90 Einen geeigneten Provider finden ...............91 Webseiten für Suchmaschinen vorbereiten....................................................92 Webspace reservieren ...................................94 Eine Website veröffentlichen .......................95 Schnellübersicht ............................................97 Übung ...........................................................97 Optische Gestaltung mit CSS 11 Text mit CSS stylen................................ 98 11.1 11.2 11.3 11.4 11.5 11.6 Das Aussehen von Text mit CSS gestalten....98 Schriftfamilien bzw. -listen definieren.......100 Schriftgrößen mit Schlüsselwörtern definieren ....................................................101 Kurzform für Texteigenschaften verwenden...................................................102 Schnellübersicht ..........................................103 Übung .........................................................104 © HERDT-Verlag I Inhalt 12 Weitere CSS-Eigenschaften definieren .............................................106 12.1 12.2 12.3 12.4 12.5 12.6 12.7 12.8 Elemente mit Hintergrundfarben und -bildern versehen................................. 106 Innenabstände, Rahmen und Außenabstände gestalten .......................... 108 Hyperlinks formatieren............................... 111 Listen formatieren ...................................... 113 Tabellen formatieren.................................. 114 Stylesheets validieren ................................. 116 Schnellübersicht .......................................... 116 Übung ......................................................... 116 Weitere Techniken 14 Formulare erstellen............................. 124 14.1 14.2 14.3 14.4 14.5 14.6 Formulare definieren.................................. 124 Eingabefelder ............................................. 126 Auswahllisten.............................................. 128 Kontroll- und Optionsfelder....................... 130 Grafische Schaltflächen .............................. 132 Übung ......................................................... 132 Anhang A: TextEdit (Mac) verwenden... 134 Anhang B: Hexadezimalwerte berechnen ............................................ 136 Stichwortverzeichnis ............................... 138 13 Webseiten mit Frames erstellen ........118 13.1 13.2 13.3 Frametechnik einsetzen.............................. 118 Eine Website mit Frames erstellen ............. 119 Schnellübersicht .......................................... 123 © HERDT-Verlag 3 2 HTML4 - Grundlagen der Erstellung von Webseiten 2 Die erste Webseite mit HTML erstellen In diesem Kapitel erfahren Sie f wie Sie HTML-Dokumente erstellen und im Browser testen f welche Elemente für HTML-Seiten erforderlich sind f wie Sie Webseiten speichern und testen f wie Sie Absätze, Zeilenumbrüche und Überschriften erstellen f wie Sie Webseiten mit Bildern und Hyperlinks versehen Voraussetzungen D Mit einem Texteditor arbeiten D 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" "http://www.w3.org/TR/html4/loose.dtd"> <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 2 Die erste Webseite mit HTML erstellen 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 - QUELLTEXT 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 2 HTML4 - Grundlagen der Erstellung von Webseiten f 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 2 Die erste Webseite mit HTML erstellen 2.2 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: D 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. D 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" "http://www.w3.org/TR/html4/loose.dtd"> HTML-Starttag <html> Anfang des Kopfteils <head> <title> Hotel Vallora </title> Ende des Kopfteils </head> Anfang des Seiteninhalts <body> Willkommen auf der Webseite vom Hotel Vallora! Ende des Seiteninhalts HTML-Endtag </body> </html> f Geben Sie in Ihrem Texteditor das Tag <html> ein . f Geben Sie das Starttag des head-Elements ein . f Geben Sie das Starttag des title-Elements ein . Geben Sie einen Text für den Titel der Seite ein, hier Hotel Vallora. f f Schließen Sie den Titel mit einem schließenden Tag ab. f Schließen Sie den <head>-Bereich gleichfalls mit seinem schließenden Tag ab. f Geben Sie das Starttag des body-Elements HTML-Tags mit <head>- und <body>-Bereichen ein. Geben Sie den Text Willkommen auf der Webseite vom Hotel Vallora! ein. f f Schließen Sie den <body>-Bereich mit einem schließenden Tag ab . f Geben Sie das schließende Tag </html> ein . f Speichern Sie die Datei unter dem Namen index.html. f Öffnen Sie die Datei in einem Browser. © HERDT-Verlag 11 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. Webseite im Browser anzeigen (Mozilla Firefox 3) Code übersichtlich schreiben Um die Lesbarkeit Ihres Codes zu erhöhen, sollten Sie, wie in der vorigen Abbildung ersichtlich, Zeilenumbrü) einfügen. Zeilenumbrüche und che (mit RETURN 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. f f f 12 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. f Geben Sie im Feld einen Namen für Ihre Webseite und die Endung .html ein. f Betätigen Sie die Schaltfläche SPEICHERN. Eine HTML-Datei speichern (Windows Editor unter Windows Vista) © HERDT-Verlag 2 Die erste Webseite mit HTML erstellen 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 WindowsBetriebssystem 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: www.microsoft.com/germany/windows/downloads/ie/getitnow.mspx 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: www.firefox-browser.de 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: www.apple.com/de/safari 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: http://de.opera.com 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 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). f <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 f Geben Sie den Text für den Absatz ein. f f Schließen Sie den Absatz mit einem schließenden Tag ab. Wiederholen Sie die vorherigen Schritte für alle Absätze der Webseite. f Speichern Sie die Webseite. f Testen Sie die Seite im Browser. D 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. D 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. f Geben Sie das Starttag des p-Elements ein. f Tragen Sie die erste Zeile Ihres Texts ein. f Geben Sie <br> ein. f f Wiederholen Sie gegebenenfalls die letzten zwei Schritte, um andere Textzeilen und Zeilenumbrüche festzulegen. Speichern und testen Sie die Seite. f Schließen Sie den Absatz mit </p>. Zeilenumbrüche im Texteditor und im Browser 14 © HERDT-Verlag 2 Die erste Webseite mit HTML erstellen Ü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. f Geben Sie im <body>-Bereich das öffnende Tag des h1-Elements ein. f Tragen Sie den Text der Überschrift ein. f Schließen Sie die Überschrift mit </h1> . f Geben Sie das öffnende Tag des h2Elements ein. f Tragen Sie den Text für diese Überschrift ein. f Schließen Sie die Überschrift mit </h2> . f Speichern Sie die Webseite, und testen Sie diese im Browser. Überschriften eingeben Überschriften mit Standardformatierung des Browsers D Da Überschriften Blockelemente sind, wird ein Abstand vor und nach der Überschrift im Browser angezeigt. D Oft wirken die Standardschriftgrößen bzw. die Abstände unpassend. Sie können die Formatierung jedoch später mit CSS genau festlegen. D Die Überschriften h1 und h2 werden von Suchmaschinen ausgewertet und haben deshalb einen Einfluss darauf, ob Ihre Webseiten gefunden werden. D Durch die Verwendung von Überschriften können Bildschirmlesegeräte für Sehbehinderte den Inhalt der Webseite gezielter vermitteln. © HERDT-Verlag 15 2 HTML4 - Grundlagen der Erstellung von Webseiten 2.4 Webseiten mit Bildern und Hyperlinks versehen Bilder in Webseiten einfügen Bilder werden nicht in das HTML-Dokument eingefügt, sondern getrennt gespeichert. Mithilfe des img-Elements (von englisch image) teilen Sie dem Browser mit, an welcher Stelle das Bild eingefügt werden soll. Zusätzlich muss der Browser wissen, wo die Bilddatei zu finden ist und wie sie heißt. Diese Informationen legen Sie mit dem src-Attribut (von englisch source) fest. <img src="Verzeichnis/Dateinamen"> Syntax des <img>-Tags Das img-Element ist ein leeres Element, da es keinen Inhalt, sondern einen Verweis auf den zu ladenden Inhalt aufweist. f Fügen Sie eine Bilddatei in den Stammordner Ihrer Webseite ein. Für dieses Beispiel kopieren Sie die Beispieldatei hotel.jpg in denselben Ordner wie die bereits erstellte Datei index.html. f Platzieren Sie den Cursor für dieses Beispiel direkt unter der ersten Überschrift. f Geben Sie das öffnende Tag des img-Elements ein. f Ergänzen Sie das img-Element mit dem src-Attributnamen und einem Gleichheitszeichen . f Legen Sie den Wert des src-Attributs in Anführungszeichen fest, hier den Wert hotel.jpg. f Schließen Sie das img-Element mit einer spitzen Endklammer ab . Speichern Sie die Webseite, und testen Sie sie im Browser. f Ein <img>-Tag eingeben Wenn Sie, wie in diesem Beispiel, den Dateinamen und keinen Pfad als Wert definieren, sucht der Browser standardmäßig in dem Ord- Das Bild im Browserfenster ner, in dem sich auch die HTML-Datei befindet. Wie Sie einen Pfad zu einem anderen Ordner angeben, wird im Kapitel 4 erläutert. Webseiten mit Hyperlinks verknüpfen Webseiten werden mithilfe des a-Elements (von englisch anchor) verknüpft. Das a-Element benötigt: <a href="Verzeichnis/Dateinamen">Linktext</a> Syntax des <a>-Tags D das Attribut href (von englisch hypertext reference; Hypertextbezug) Hiermit wird das Ziel des Links festgelegt. Das Attribut wird einfach h ref ausgesprochen. D einen Linktext Der Text, den Sie hier eingeben, wird standardmäßig auf der Webseite unterstrichen und mit blauer Farbe hervorgehoben. Wenn der Besucher auf diesen Text klickt, wird die Zielseite geladen. Das a-Element ist ein sogenanntes Inline-Element. Inline-Elemente werden grundsätzlich in Blockelementen verschachtelt. Für das folgende Beispiel werden Sie deshalb ein p-Element erstellen, in dem Sie einen Hyperlink verschachteln. Der Umgang mit Inline- und Blockelemente wird im Kapitel 4 behandelt. 16 © HERDT-Verlag 2 Die erste Webseite mit HTML erstellen Bevor Sie einen Hyperlink erstellen, benötigen Sie eine zweite Webseite, die als Ziel des Hyperlinks dienen kann: f Erstellen Sie eine Kopie der Datei index.html, indem Sie diese unter einem neuen Namen speichern, hier wegweiser.html. f Passen Sie den Titel wie in der Abbildung ersichtlich an. f Löschen Sie im <body>-Bereich mit Ausnahme der ersten Überschrift und des ersten Absatzes den bestehenden Code. Ersetzen Sie den Text der Überschrift und des Absatzes . f f Speichern Sie die Webseite erneut, und testen Sie diese im Browser. Erstellen Sie einen Hyperlink wie folgt: Neue Webseite erstellen f Öffnen Sie bzw. wechseln Sie zur Webseite, in der Sie den Hyperlink erstellen möchten, hier index.html. f Platzieren Sie den Cursor im <body>-Bereich an der Stelle, an der Sie den Link erstellen möchten, hier direkt unter der Überschrift. f Geben Sie ein Absatz-Starttag ein. f Geben Sie das Starttag des a-Elements ein. f Ergänzen Sie das Tag mit dem href-Attribut . f Legen Sie den Wert des href-Attributs in Anführungszeichen fest. f Geben Sie einen aussagekräftigen Text für den Hyperlink ein. f Schließen Sie das a-Element mit einem Endtag ab. f Geben Sie ein Absatz-Endtag ein. Code für den Hyperlink eingeben Wie beim <img>-Tag sucht der Browser die zu öffnende Webseite im gleichen Ordner, da Sie keinen Pfad angegeben haben. Mit einem Klick auf den Hyperlink wird die Zielseite im Browser geöffnet © HERDT-Verlag 17 2 HTML4 - Grundlagen der Erstellung von Webseiten 2.5 Schnellübersicht Was bedeutet …? Stammordner Der Ordner, in dem alle Dateien einer Website abgespeichert werden Texteditor Ein einfaches Programm, mit dem Sie Text- bzw. HTML-Dokumente erstellen und bearbeiten können Tags Anweisungen, die dem Browser die Struktur der Webseite mitteilen Attribute Bei manchen Tags ist es möglich, zusätzliche Informationen mithilfe tagspezifischer Attribute festzulegen. Einige Attribute zur Festlegung von Formatierungseigenschaften sind veraltet und wurden durch CSS ersetzt. Container-Elemente Ein Tagpaar, das aus einem öffnenden und einem schließenden Tag besteht und Textinhalt einschließt, z. B. <html>, <head>, <body>, <p>, <h1> bis <h6>, und <a> 18 Leere Elemente Elemente ohne Inhalte, die dem Browser lediglich eine Anweisung geben, z. B. <br>, und <img> Kleinschreibung Die etablierte und empfohlene Schreibweise für HTML DokumenttypDefinition Eine optionale Angabe der HTML-Version (auch DOCTYPE genannt), die ganz oben im HTML-Dokument eingegeben wird <html> </html> Dieses Tag legt fest, wo der HTML-Code anfängt und aufhört. <head> </head> Der Kopfbereich beinhaltet Informationen für Browser und Suchmaschinen. Die Informationen in diesem Bereich werden nicht im Browserfenster angezeigt. <body> </body> Der Bodybereich beinhaltet die Information, die im Browserfenster angezeigt werden soll. <title> </title> Mit diesem Tag legen Sie den Titel der Webseite fest, der in der Titelleiste des Browsers angezeigt und als Lesezeichen verwendet wird. Startseite Die Webseite, die standardmäßig nach der Eingabe der Webadresse im Browser angezeigt wird <p> </p> Absätze werden mithilfe dieses Tags definiert. Blockelemente Bei Blockelementen fügen Browser automatisch einen Abstand vor und nach dem Element ein. Beispiele für Blockelemente sind p und h1 bis h6. <br> Dieses Tag teilt dem Browser mit, wo eine Zeile umbrochen werden soll. <h1>…</h1>, <h2>…</h2>, … <h6>…</h6> Mit diesen Überschrifttags können Sie Ihre Webseite übersichtlicher darstellen. Wenn Sie <h1> und <h2> gezielt einsetzen, erhöhen Sie die Chancen, dass Ihre Webseite von Suchmaschinen gefunden wird. Die Standardformatierung von Überschriften können Sie mit CSS überschreiben. <img> Dieses Tag teilt dem Browser mit, wo ein Bild zu finden ist und an welcher Stelle es geladen werden soll. <a> </a> Hyperlinks werden mit diesem Tag zusammen mit dem erforderlichen href-Attribut erstellt. © HERDT-Verlag 2 Die erste Webseite mit HTML erstellen 2.6 Übung Webseiten erstellen Übungsordner: hotel02 Ergebnisdatei: 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. Binden Sie die im Übungsordner hotel02 zu findende Bilddatei strand.jpg in die Webseiten ein. Erstellen Sie einen Hyperlink zur Startseite (index.html). Speichern Sie die Webseite mit dem Namen ausfluege.html, und testen Sie diese im Browser. © HERDT-Verlag 19