HTML4 - Grundlagen der Erstellung von Webseiten - HERDT

HTML4
Autorinnen: Tina Wegener, Linda York
Inhaltliches Lektorat: Andrea Weikert
5. Ausgabe, 2. Aktualisierung, Juli 2011
© 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