WE CERTIFIED WEB DESIGNER I
Webdesign
mit XHTML & CSS
Offizielles Curriculum des Europ채ischen Webmasterverbandes
WE CERTIFIED WEB DESIGNER I
Webdesign
mit XHTML & CSS
Art.-Nr. 01122733 Version 1.1.1 vom 10.04.2009 Autor: Frank Schad © webmasters akademie Nürnberg GmbH, Nürnberg, Germany Das vorliegende Schulungsskript ist urheberrechtlich geschützt. Alle Rechte vorbehalten. Die Verwendung der Texte und Abbildungen, auch auszugsweise, ist ohne schriftliche Genehmigung der webmasters akademie Nürnberg GmbH urheberrechtswidrig und daher strafbar. Dies gilt insbesondere für die Vervielfältigung, Übersetzung oder Verwendung in elektronischen Systemen sowie für die Verwendung in Schulungsveranstaltungen. Die Informationen in diesem Schulungsskript wurden mit größter Sorgfalt erarbeitet. Trotzdem können Fehler nicht vollständig ausgeschlossen werden. Autoren und Herausgeber übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene fehlerhafte Angaben und deren Folgen.
Inhalt
5
Inhalt Einführung. .............................................................................................................................................................................. 11 1
2
Was ist HTML?....................................................................................................................................................12 1.1
Das World Wide Web: einer der beliebtesten Internet-Dienste.......................................12
1.2
Was ist Hypertext?..............................................................................................................................12
1.3
Das Prinzip von Auszeichnungssprachen................................................................................ 14
1.4
Die Philosophie von HTML..............................................................................................................15
1.5
HTML: Entwicklung und Standards............................................................................................ 16 Die Ursprünge des World Wide Web........................................................................... 16
1.5.2
Das World Wide Web Consortium (W3C) .................................................................. 16
1.5.3
XHTML.................................................................................................................................... 16
1.5.4
Die Webbrowser...................................................................................................................17
Grundlagen.........................................................................................................................................................21 2.1
Womit werden HTML-Seiten erstellt?.........................................................................................21
2.2
Woraus bestehen HTML-Dateien?............................................................................................... 23
2.3
3
1.5.1
2.2.1
Das HTML-Grundgerüst.................................................................................................... 25
2.2.2
Verschachtelte Tags...........................................................................................................26
2.2.3
Block- und Inline-Elemente............................................................................................ 27
2.2.4
»Missbilligte« Tags.............................................................................................................. 27
2.2.5
Attribute................................................................................................................................28
Zeichenkodierung..............................................................................................................................29 2.3.1
Sonderzeichen.....................................................................................................................30
2.3.2
Maskierung reservierter Zeichen..................................................................................30
2.4
Kommentare..........................................................................................................................................31
2.5
Weitere wichtige Prinzipien............................................................................................................31
2.6
Struktur Ihrer Website auf dem Webserver..............................................................................31
Einfache Textformatierung...................................................................................................................... 33 3.1
Besonderheiten bei der Textformatierung mit HTML........................................................ 33
3.2
Blockelemente..................................................................................................................................... 34
3.3
3.2.1
Absätze................................................................................................................................... 34
3.2.2
Überschriften....................................................................................................................... 34
3.2.3
Trennlinien............................................................................................................................ 35
Inline-Elemente................................................................................................................................... 35 3.3.1
Fettschrift.............................................................................................................................. 35
6
Inhalt
3.4
4
5
6
7
3.3.2
Kursivschnitt......................................................................................................................... 35
3.3.3
Weitere physische Tags zur Textauszeichnung........................................................ 36
3.3.4
Weitere logische Tags zur Textauszeichnung........................................................... 36
Zeilenumbrüche................................................................................................................................. 36
XHTML-spezifische Erweiterungen....................................................................................................40 4.1
Fakultative XML-Deklaration.........................................................................................................40
4.2
Dokumenttypdefinition.................................................................................................................. 41
4.3
Namensraum........................................................................................................................................ 42
Listen und Aufzählungen......................................................................................................................... 43 5.1
Punktlisten............................................................................................................................................ 43
5.2
Nummerierte Listen..........................................................................................................................44
5.3
Definitionslisten................................................................................................................................. 45
5.4
Verschachtelte Listen....................................................................................................................... 45
Einbinden von Bildern................................................................................................................................ 47 6.1
Funktionsweise und Dateiformate............................................................................................. 47
6.2
Referenzierung....................................................................................................................................48 6.2.1
Relative Pfadangaben.......................................................................................................49
6.2.2
Absolute Pfadangaben......................................................................................................51
6.3
Größenangaben.................................................................................................................................. 52
6.4
Ränder..................................................................................................................................................... 52
6.5
Alternativtext und Tooltips............................................................................................................ 52
6.6
Hintergrundgrafiken......................................................................................................................... 53
Hyperlinks........................................................................................................................................................... 54 7.1
7.2
Einen Hyperlink definieren............................................................................................................ 54 7.1.1
Relative Pfadangaben....................................................................................................... 55
7.1.2
Absolute Pfadangaben.....................................................................................................56
7.1.3
Zielfenster definieren........................................................................................................ 57
7.1.4
Downloads............................................................................................................................ 57
7.1.5
Links mit anderen Protokollen....................................................................................... 58
Links zu bestimmten Stellen einer Webseite.......................................................................... 58 7.2.1
Links zu einer Textstelle auf einer anderen Seite....................................................59
7.2.2
Links zu einer Textstelle auf derselben Seite............................................................60
Inhalt
7 7.3
8
9
Die Verwendung von Farben..................................................................................................................64 8.1
Das RGB-Farbmodell.........................................................................................................................64
8.2
Hexadezimale Farbkodierung......................................................................................................65
8.3
Websichere Farben............................................................................................................................66
Tabellen. ...............................................................................................................................................................68 9.1
Was ist das Besondere an Tabellen in HTML?.........................................................................68
9.2
Das Grundprinzip...............................................................................................................................68
9.3
Formatierung von Tabellen............................................................................................................70
9.4
9.5
10
Imagemaps...........................................................................................................................................60
9.3.1
Außenrahmen, Gitternetzlinien, Abstände...............................................................70
9.3.2
Höhe und Breite der Tabelle............................................................................................71
9.3.3
Tabellenbeschriftung.........................................................................................................71
Formatierung einzelner Zellen..................................................................................................... 72 9.4.1
Spaltenbreite und Zeilenhöhe....................................................................................... 72
9.4.2
Verhinderung von Zeilenumbruch und Ausrichtung von Zellinhalten.......... 73
9.4.3
Verbinden von Zellen........................................................................................................ 73
Einfärben von Tabellen und Zellen............................................................................................. 76
Formulare............................................................................................................................................................ 78 10.1
Grundlagen........................................................................................................................................... 78
10.2
Konfiguration eines Formulars..................................................................................................... 79 10.2.1
Festlegen des Empfängers.............................................................................................. 79
10.2.2
Festlegung der Versandmethode.................................................................................80
10.2.3
Festlegen der Kodierungsmethode.............................................................................80
10.3
Erzeugen einzelner Formularelemente....................................................................................80
10.4
Einzeilige Texteingabefelder......................................................................................................... 81
10.5
Eindeutige Identifikation von Formularfeldern....................................................................82
10.6
Beschriftung von Formularfeldern.............................................................................................82
10.7
Mehrzeilige Eingabefelder............................................................................................................. 83
10.8
Auswahllisten.......................................................................................................................................84
10.9
Kontrollfelder....................................................................................................................................... 87
10.10
10.9.1
Checkboxen..........................................................................................................................88
10.9.2
Radiobuttons.......................................................................................................................88
Buttons...................................................................................................................................................89 10.10.1 Standard-Buttons...............................................................................................................89 10.10.2 Datei-Buttons.......................................................................................................................90 10.10.3 Reset-Button......................................................................................................................... 91 10.10.4 Submit-Button.....................................................................................................................92 10.10.5 Moderne Buttons................................................................................................................92
8
11
12
13
14
Inhalt 10.11
Versteckte Felder in Formularen.................................................................................................. 93
10.12
Mac-spezifische Suchfelder........................................................................................................... 93
10.13
Tastatursteuerung von Formularen...........................................................................................94
Frames. ..................................................................................................................................................................96 11.1
Probleme mit Frames........................................................................................................................96
11.2
Grundgerüst......................................................................................................................................... 97 11.2.1
Definition der Art und Anzahl der Frames................................................................98
11.2.2
Definition der einzelnen Frame-Inhalte.....................................................................99
11.3
Eigenschaften von Frames...........................................................................................................100
11.4
Verschachtelte Frames....................................................................................................................101
11.5
Hyperlinks in Framesets................................................................................................................ 102
11.6
Alternativer Inhalt............................................................................................................................ 103
Einbinden von Objekten......................................................................................................................... 105 12.1
Plug-ins................................................................................................................................................. 105
12.2
Der object-Tag................................................................................................................................... 105
12.3
Steuerung von Plug-ins.................................................................................................................106
12.4
Anzeige von Alternativ-Inhalten............................................................................................... 107
12.5
Microsoft-spezifische Erweiterungen...................................................................................... 107
12.6
Java-Applets.......................................................................................................................................109
Meta-Tags...........................................................................................................................................................110 13.1
Allgemeine Syntax............................................................................................................................110
13.2
Angaben für Suchmaschinen.......................................................................................................110
13.3
Angaben für Browser....................................................................................................................... 111
Cascading Style Sheets (CSS)................................................................................................................ 113 14.1
Allgemeines......................................................................................................................................... 113
14.2
Verwendung von CSS......................................................................................................................114
14.3
Allgemeine Syntax............................................................................................................................115
14.4
Farbzuweisung................................................................................................................................... 117
14.5
Allgemeine Vorgaben für Ihr Dokument................................................................................. 117
14.6
Pseudoformate.................................................................................................................................. 120 14.6.1
14.Verschiedene Zustände für Hyperlinks definieren.......................................... 120
14.6.2
Verschiedene Zustände für andere Elemente definieren...................................121
14.6.3
Initialen und andere typographische Effekte..........................................................121
14.7
Exkurs: Spezielle HTML-Elemente für CSS..............................................................................122
14.8
Klassen...................................................................................................................................................123
14.9
Individualformate............................................................................................................................ 124
14.10
Hintergründe, Konturen und Abstände..................................................................................125 14.10.1 Einbinden von Hintergrundbildern............................................................................125
Inhalt
9 14.10.2 Festlegen von Konturen................................................................................................. 126 14.10.3 Festlegen von Außen- und Innenabständen.......................................................... 128 14.11
Größenangaben und Positionierung von Elementen...................................................... 129 14.11.1 Größenangaben................................................................................................................ 129 14.11.2 Positionierung................................................................................................................... 130 14.11.3 Ändern der Anzeigeart eines Elements.................................................................... 134
14.12
Bedingte Formatierungen............................................................................................................ 134
14.13
Auslagerung der CSS-Vorgaben in eine externe Datei.................................................... 136
14.14
Inline-Formatierungen.................................................................................................................. 136
14.15
Kommentare........................................................................................................................................137
14.16
Maßangaben.......................................................................................................................................137
Lösungen................................................................................................................................................................................140 Index.......................................................................................................................................................................................... 154
Einführung
11
Einführung Das World Wide Web ist ein weiterer Meilenstein in der Entwicklung menschlicher Kommunikati onsstrukturen. Es hat am Ende des 20. Jahrunderts eine ähnliche Revolution ausgelöst wie vor rund 500 Jahren die Gutenbergpresse: Praktisch jeder kann beliebige Informationen in Form von Texten, Bildern, Animationen, Ton- und Videosequenzen im Web publizieren und damit die Tür zu Millionen Menschen rund um den Globus öffnen. Auf Webseiten lassen sich Dienstleistungen oder Produkte anbieten und verkaufen, Einzelpersonen können hier ihre Ideen präsentieren oder Geschichten erzählen. Die Grundlage dafür ist die Hypertext Markup Language (kurz HTML). HTML ist jedoch weit mehr als nur eine weitere Technik zur Erstellung eindrucksvoller Dokumente. Die wesentliche Bedeutung wird bereits im ersten Teil des Namens deutlich: Hypertext. HTML-Dokumente lassen sich mit anderen HTML-Dokumenten oder praktisch jeder Information im Internet verknüpfen. Dadurch entsteht ein weltweites Kommunikationsnetz, in dem nahezu jede Information jederzeit abrufbar (und jedes Produkt erhältlich) ist. Ziel dieses Lernhefts ist es, Ihnen die grundlegenden Konzepte und Elemente von HTML in seiner neuen Form XHTML zu vermitteln, und Ihnen Möglichkeiten zu zeigen, wie Sie diese Elemente für ein effektives Webdesign einsetzen können. Sie lernen, Texte übersichtlich zu strukturieren, Tabellen, Formulare und Listen zu programmieren, Hyperlinks zu setzen sowie Bilder und Multimedia-Elemente einzubinden. Im zweiten Teil werden wir uns dann mit Cascading Style Sheets (CSS) beschäftigen, einer äußerst flexi blen Erweiterung zur Formatierung von HTML-Dokumenten, die es überhaupt erst möglich macht, Webseiten effektiv und professionell zu gestalten. Mit diesen Stilvorlagen ist es beispielsweise auch möglich, eine Website für verschiedene Ausgabemedien zu optimieren. Nach der Durcharbeitung dieses Lernhefts sollten Sie die »Philosophie« von XHTML und CSS sowie die Werkzeuge für den täglichen Gebrauch beherrschen. Sie sollten dann auch in der Lage sein, sich nach Bedarf zusätzliche Anwendungsmöglichkeiten selbst zu erarbeiten. Das sollten Sie auch tun, denn XHTML entwickelt sich beständig weiter.
12
Was ist HTML?
Was ist HTML? In dieser Lektion lernen Sie: hh hh hh hh hh hh
wie der WWW-Dienst funktioniert. was Hypertext ist. Näheres über Seitenbeschreibungs- und Auszeichnungssprachen. die Philosophie von HTML kennen. wie HTML entstand und sich weiterentwickelt hat. welche Webbrowser es gibt.
1.1
Das World Wide Web: einer der beliebtesten Inter net-Dienste
Das World Wide Web (WWW) ist heute einer der beliebtesten und am häufigsten genutzten InternetDienste. Wie die meisten anderen Dienste auch (z. B. E-Mail, FTP oder Newsgroups) basiert das WWW auf dem Client-Server-Modell: Webserver stellen Informationen zur Verfügung, auf die Benutzer mit Hilfe eines sogenannten Client-Programms (das ist in diesem Fall der Webbrowser) über das Netzwerk zugreifen können. Das World Wide Web nutzt für die Übertragung der Informationen (Texte, Bilder etc.) das Hypertext Transfer Protokoll (HTTP), was Sie u. a. daran erkennen, dass jede im Webrowser eingetragene Webadresse mit dem HTTP-Präfix beginnt (z. B. http://www.webmasters-europe.org). HTTP dient also zur Übertragung von »Hypertext«. Was aber ist Hypertext?
1.2
Was ist Hypertext?
Der Begriff Hypertext wurde im Jahr 1965 von dem Soziologen Ted Nelson im Zusammenhang mit dem Projekt Xanadu, das eine universale Bibliothek mit zahllosen miteinander vernetzten Dokumenten vor sah, geprägt. Hypertext ist weniger eine bestimmte Technologie als vielmehr ein Konzept oder eine Idee. Gemeinhin versteht man unter Hypertext die nonlineare Organisation von Informationen, die durch logische Verbindungen (Verweise, Links) eine netzartige Struktur erhält. Der Begriff Hypertext ist eng verwandt mit dem neueren Begriff Hypermedia, bei dem der Schwerpunkt jedoch eher auf der mul timedialen Natur der Informationen liegt. Hypertexte bieten gegenüber der linearen Informationsaufbereitung den Vorteil, auch sehr komplexe Inhalte nahezu redundanzfrei darstellen zu können. Die assoziative Struktur von Hypertext kommt der Funktionsweise des menschlichen Denkens näher als linear aufbereitete Texte: »Structured networks, like hypermedia, are composed of nodes and ordered, labelled relationships (links) connecting them. These networks describe what a learner knows, which provides the foundations for learning new ideas, that is, expanding the learner’s semantic network.«1
1 D. H. Jonassen, R. S. Grabinger, Problems and Issues in Designing Hypertext/Hypermedia for Learning, in: D. H. Jonassen, H. Mandl (Hrsg.), Designing Hypermedia for Learning. Berlin, Heidelberg 1990, S. 10
Was ist Hypertext?
13
Hypertextuelle Strukturen sind jedoch keine Erfindung der Neuzeit. Bereits Agostino Ramellis »Bücherrad« aus dem 16. Jahrhundert und Roussels »Lesemaschine« verfolgten dieses Konzept. In der Literatur sind z. B. James Joyce’ Finnegan’s Wake oder Michael Endes Der Spiegel im Spiegel erwähnenswert, die ebenfalls an semantische Assoziationen erinnern.
Abb. 1: Agostino Ramellis Bücherrad (16. Jahrhundert)
Auch die uns seit Jahrhunderten vertrauten Orientierungshilfen für lineare Texte, wie etwa Inhaltsverzeichnisse, Indizes, Querverweise oder Fußnoten, entsprechen konzeptionell ebenfalls sämtlich dem Hypertext-Prinzip, der Unterschied besteht lediglich darin, dass das Verfolgen der Verweise nicht automatisch vonstatten geht. Das moderne Hypertext-Konzept wurde erstmals von Vannevar Bush im Jahr 1945 in seinem Artikel As We May Think im Journal The Atlantic Monthly formuliert. Er entwarf darin ein System namens Memex (für Memory Extender), das elektronisch aufbereitete Bücher und Filme aus einer Bibliothek leicht zugänglich darstellen sollte. Die Idee von Hypertext ist also von Anfang an mit dem alten Menschheitstraum von der »universalen Bibliothek« verbunden. Eines der ersten digitalen Hypertextsysteme, das einem breiteren Publikum zugänglich war, war die Autorenumgebung HyperCard der Firma Apple, die zusammen mit den Macintosh-Computern ausgeliefert wurde. Auch viele Softwaredokumentationen, Hilfesysteme und Nachschlagewerke wie die elektronischen Ausgaben des Brockhaus und der Encyclopædia Britannica sind als Hypertext konzipiert. Das heute am weitesten verbreitete Hypertext-System ist sicherlich das World Wide Web, obwohl ihm einige wichtige Funktionen früherer Hypertextsysteme fehlen. So ist zum Beispiel das Problem der so genannten »toten Links« im WWW ungelöst. Auf der anderen Seite erlaubt das WWW aber auch das Ein binden nichtsprachlicher Datentypen. Dadurch ist es, obwohl auf Hypertext beruhend, strenggenom men ein Hypermedia-System.
Probleme von Hypertext Ein Problem aller Hypertexte ist das gezielte Auffinden von Informationen. Damit verbunden ist das Problem der Navigation in Hypertexten, da eine vorgegebene Lesestruktur naturgemäß fehlt. Dadurch kann sich beim Leser leicht eine Informationsüberflutung oder Desorientierung einstellen (»Lost in Hyperspace«). Dies liegt aber auch an unseren althergebrachten Lesegewohnheiten: Während wir im Lesen von linearen Texten jahrhundertelang geschult worden sind, beginnen wir den Umgang mit komple-
14
Was ist HTML?
xen Hypertexten erst nach und nach zu erlernen. Jüngere Generationen haben hier weitaus weniger Schwierigkeiten. Erst in Ansätzen gelöst ist das Problem der Visualisierung von Hypertexten, also die grafisch aufberei tete Darstellung der typischerweise netzwerkförmigen und daher nicht hierarchisch präsentierbaren Struktur eines Hypertextes.
1.3
Das Prinzip von Auszeichnungssprachen
Die Technologie, in der Hypertexte im Web publiziert werden, ist eine Auszeichnungssprache namens Hypertext Markup Language (Hypertext-Auszeichnungssprache), kurz HTML. HTML wurde vielleicht nicht von ungefähr in der Schweiz entwickelt, einem Land mit vier Amtssprachen. Vielleicht hat das Bewußtsein über die Schwierigkeiten bei der Verständigung mit unterschiedlichen Sprachen dazu geführt, daß die Entwickler im Forschungslabor von CERN eine Art Esperanto für Computer erfanden, denn HTML ist plattformunabhängig, wird also von jedem Computersystem verstanden. Neben HTML gibt es eine Reihe weiterer Auszeichnungssprachen für die unterschiedlichsten Zwecke (z. B. DocBook, SVG, LaTeX oder PostScript). Die Haupteigenschaft von Auszeichnungssprachen im all gemeinen und HTML im besonderen ist die Tatsache, dass sie in Form reiner Textdateien (meist ASCII oder Unicode) vorliegen, bei denen die Strukturierungs- und Formatierungsinformationen mit Hilfe sogenannter Tags (engl. »Etiketten«) direkt in den Text integriert sind. Ursprünglich dienten solche Auszeichnungen im Text als Anweisungen für die Setzer aus der Druckindustrie. Heute übernimmt ein sogenannter Interpreter (Hard- oder Software) die Umsetzung dieser Anweisungen in visuelle Informa tionen. Die nachfolgende Tabelle veranschaulicht das Prinzip der Tags am Beispiel von HTML und einer weiteren, von Leslie Lamport für den Textsatz konzipierten Auszeichnungssprache namens LaTeX (sprich: Latech). Beispiel
HTML
LaTeX
mögliche Darstellung in der Ausgabe
Überschrift
<h1>Text</h1>
\section{Text}
Text
Aufzählungsliste
<ul> <li>Punkt 1</li> <li>Punkt 2</li> <li>Punkt 3</li> </ul>
\begin{itemize} \item Punkt 1 \item Punkt 2 \item Punkt 3 \end{itemize}
• Punkt 1
fetter Text
<b>Text</b>
\bf{Text}
Text
kursiver Text
<i>Text</i>
\i{Text}
Text
• Punkt 2 • Punkt 3
Tabelle 1: Beispiele für die Auszeichnung von Text mit Hilfe von Tags
Auszeichnungssprachen werden heute in vielen Bereichen zur Erstellung von Dokumenten genutzt: In der Druckindustrie etwa wird die von Adobe entwickelte Auszeichnungssprache PostScript verwendet, um Seitenlayouts auf unterschiedlichen Ausgabegeräten in variabler Größe verlustfrei zu drucken. Mit PostScript werden etwa Schriftart, Schriftgröße, Einzug, Seitenränder, Größe und Position von Bildern usw. definiert. PostScript-fähige Drucker und Druckmaschinen sind mit einem speziellen Interpreter ausgestattet, der die PostScript-Anweisungen in visuelle Informationen umsetzt. PostScript hat sich über die Jahre zu einem Standard in der Druckindustrie entwickelt, wird aber immer mehr von PDF ver drängt, das ebenfalls von Adobe entwickelt wurde. Die aktuelle Version ist PostScript Level 3 von 1998.
Die Philosophie von HTML
1.4
15
Die Philosophie von HTML
Bei HTML-Dokumenten dient normalerweise der Webbrowser – genauer gesagt die im Browser inte grierte Rendering Engine (vgl. Seite 17) – als Interpreter des HTML-Quelltextes. Sobald Sie eine HTML-Seite mit einem Browser öffnen, werden die Anweisungen in den HTML-Tags in visuelle Informationen »übersetzt« und erscheinen als formatiertes Dokument auf dem Bildschirm. Allerdings kommen hier völlig unterschiedliche Ausgabegeräte zum Einsatz. Je nach Benutzer kann dies ein kleiner Monochrom-Bildschirm, ein 21” Farbmonitor oder gar ein völlig anderes Ausgabegerät sein, das nicht auf der optischen Wahrnehmung basiert (z. B. Sprachausgabe oder ein Braille-Lesegerät für Sehbehinderte). Das Aussehen eines Dokuments variiert bereits erheblich von Bildschirm zu Bildschirm und ist von zahlreichen weiteren Faktoren abhängig, so z. B. von der Anzahl der darstellbaren Farben, dem Betriebssystem, den installierten Schriftarten und dem verwendeten Webbrowser. Zudem lassen viele Browser den Benutzer festlegen, wie bestimmte Elemente auf einer Webseite dargestellt werden sollen. Es lassen sich zum Beispiel Text- und Hintergrundfarbe ändern, Schriftarten festlegen oder Grafiken ein- und ausblenden. Die tatsächliche Darstellung von Web-Dokumenten ist daher sehr stark abhängig vom jeweiligen Ausgabegerät.
f
Die Philosophie von HTML berücksichtigt diesen Umstand, indem nicht das exakte Aussehen des Dokuments beschrieben wird, sondern lediglich dessen logische Struktur. So werden z. B. bestimmte Textbereiche zwar als Überschrift, andere als Absätze oder Aufzählungen etc. definiert. Es ist jedoch dem jeweiligen Ausgabemedium überlassen, auf welche Weise genau diese Elemente dargestellt werden. Eine Überschrift könnte z. B. in einer größeren Schrift, unterstrichen oder fett erscheinen, oder auch mit einer bestimmten Betonung vorgelesen werden, je nach den technischen Möglichkeiten des Ausgabemediums. Dies ermöglicht, dass ein Dokument im Web auf möglichst vielen verschiedenen Systemen dargestellt werden kann. Es ist also immens wichtig zu wissen, daß jede Person, die eine Webseite besucht, diese in unterschied licher Form wahrnimmt. Als Gestalter einer HTML-Seite haben Sie also nur beschränkte Kontrolle über das tatsächliche Erscheinungsbild einer solchen Seite. Der primäre Zweck von HTML ist es, dass die Struktur der Seite von allen Computern verstanden wird. Die jeweilige grafische Aufbereitung steht nicht im Mittelpunkt. Viele Webdesigner sind mit diesem Mangel an Einflußnahme unzufrieden. Sie fügen spezielle Effekte in ihre Seiten ein, die nicht dem HTML-Standard entsprechen und von vielen Browsern nicht dargestellt werden können. Auf diese Weise wird der Zugriff auf wenige Internetbenutzer beschränkt, die die ent sprechenden Voraussetzungen erfüllen. Einen Ausweg aus diesem Dilemma bieten Cascading Style Sheets (CSS). Mit Hilfe dieser Ergänzung zu HTML läßt sich die Darstellung von HTML-Dokumenten an verschiedene Ausgabegeräte anpassen. Mit CSS ist es möglich, ein- und dasselbe HTML-Dokument sowohl für die Darstellung am Bildschirm als auch für den Druck und die Sprachausgabe zu optimieren. Aus diesem Grund gewinnen CSS in der modernen Webseitengestaltung immer mehr an Bedeutung. Mit HTML wird nur mehr die logische Struktur des Dokuments erstellt, während Layout und Design mit CSS realisiert werden. Beachten Sie bei der Erstellung Ihrer HTML-Seiten von Anfang an diese Trennung in Strukturierung und Formatierung. Erstellen Sie in HTML lediglich die logische Struktur Ihrer Dokumente und verwenden Sie keine HTML-Anweisungen, die die Formatierung beeinflussen, wie etwa Farben, Größenangaben oder Schriftarten.
f
16
Was ist HTML?
1.5
HTML: Entwicklung und Standards
1.5.1
Die Ursprünge des World Wide Web
Die grundlegenden Konzepte des WWW gehen zurück auf eine Gruppe von Wissenschaftlern am Europäischen Zentrum für Teilchenphysik CERN in Genf. 1989 schlug Tim Berners-Lee ein Kommunikati onsnetzwerk vor, das es Wissenschaftlern ermöglichen sollte, auf einfache Weise Informationen via Computer auch über die Grenzen verschiedener Betriebssysteme hinweg auszutauschen. Berners-Lee entwickelte den ersten Webserver und Webbrowser auf dem Nextstep-Betriebssystem, einer Unix-Vari ante des Apple-Mitbegründers Steve Jobs. Das Nextstep-Betriebssystem war allerdings nicht sehr weit verbreitet (und wurde später von Apple aufgekauft2). Ein entscheidender Schritt in Richtung breiter Nutzung des WWW kam 1993 vom National Center for Supercomputing Applications (NCSA) an der Universität von Illinois, USA. Ein junger Student namens Marc Andreessen entwickelte den ersten Webbrowser für Standard-PCs: Mosaic. Mosaic wurde kostenlos verteilt und verbreitete sich sehr schnell. Andreessen verließ das NCSA und gründete zusammen mit Jim Clark (ehemals Angestellter von Silicon Graphics) die Firma Netscape Communications und entwik kelte den Netscape Navigator.
1.5.2
Das World Wide Web Consortium (W3C)
1994 bildete sich ein Gremium aus Spezialisten einiger internationaler Universitäten und Unternehmen unter Vorsitz von Tim Berners-Lee mit dem Ziel, Standards für die Web-Kommunikation zu entwickeln. Diese Gruppe wurde später als das World Wide Web Consortium (W3C) bekannt. Sie bestimmt und definiert heute die Standards und die weitere Entwicklung von HTML. Bisherige Meilensteine in der HTML-Entwicklung waren HTML 2.0, HTML 3.2 (der sog. Wilbur-Standard) und HTML 4.01. Der zur Zeit aktuelle Standard ist XHTML 1.0. Auf der Website www.w3.org veröffentlicht das Konsortium die Spezifikationen. Bei der Entwicklung neuer Standards hat sich das W3C verpflichtet, nur noch patentfreie Technologien zu verwenden.
1.5.3
XHTML
HTML wurde mit Hilfe der Standard Generalized Markup Language (SGML) definiert, einer Metaspra che, die ihre Herkunft im Bibliothekensystem hat. Da bald abzusehen war, dass HTML den wachsenden Anforderungen professioneller Webdesigner und -entwickler nicht mehr gerecht werden würde, wurde mit der Entwicklung von XHTML begonnen. XHTML steht für Extensible Hypertext Markup Lan guage und ist eine Neuformulierung von HTML auf der Basis von XML (Extensible Markup Language), einer reduzierten Variante von SGML, deren Bedeutung für immer mehr Einsatzgebiete in den letzten Jahren rapide zugenommen hat. HTML wurde also nach den Regeln von XML neu definiert.
2
Nextstep diente später als Basis für das aktuelle Apple-Betriebssystem Mac OS X
HTML: Entwicklung und Standards
17
Abb. 2: Schematische Darstellung des inneren Zusammenhangs verschiedener Auszeichnungssprachen.
Alle Möglichkeiten von HTML 4.01 wurden in XHTML übernommen, aber es gibt einige Unterschiede, auf die jeweils in den verschiedenen Kapiteln eingegangen wird. Sie sind im folgenden mit nebenstehendem Symbol gekennzeichnet.
1.5.4
Die Webbrowser
Die zunehmende Kommerzialisierung des Webs hatte das Aufkommen kommerzieller Browser wie Netscape und später Microsoft Internet Explorer zur Folge. Ende der 1990er Jahre entwickelte sich ein erbarmungsloser Kampf um Marktanteile, der sogenannte Browserkrieg: Beide Firmen entwickelten proprietäre Erweiterungen zu HTML, um einen technologischen Vorsprung zu erzielen. Es gibt bis heute HTML-Anweisungen, die nur der Internet Explorer versteht. Auf der anderen Seite werden viele offizielle HTML-Anweisungen in den jeweiligen Browser-Versionen nicht oder nur unvollständig unterstützt. Als Folge des verlorenen Browserkrieges legte Netscape zunächst den Quellcode seines Browsers offen, später wurde die Firma von AOL übernommen. Heute wird der Netscape-Browser unter seinem ehema ligen Codenamen Mozilla (www.mozilla.org) als Open-Source-Projekt weiterentwickelt und unter der GPL (Gnu Public License) kostenfrei vertrieben. Inzwischen haben sich die Wogen etwas geglättet. Aktuelle Browser sind bemüht, sich an die (neuen) Standards zu halten, während die zunehmende Beliebtheit alternativer Browser wie Firefox, Opera, Safari, WebKit, Google Chrome, Konqueror, Camino, OmniWeb oder Shiira den Markt belebt. Lediglich Microsoft geht nach wie vor eigene Wege. Auch der neue Internet Explorer 8 unterstützt die aktuellen Standards nicht vollständig, wodurch das alte Problem für Webdesigner bestehen bleibt: Um zu gewährleisten, dass eine Website in jedem Browser sauber dargestellt wird, müssen Kompromisse eingegangen und die Seiten in allen Browsern getestet werden.
Rendering Engines Jeder Webbrowser verfügt über eine Softwarekomponente, die man als Rendering Engine bezeichnet. Diese Komponente ist verantwortlich für die Interpretation und formatierte Darstellung von HTML- und CSS-Code (diesen Vorgang bezeichnet man als rendern oder auch parsen). Die verwendete Rendering Engine ist für Webdesigner von größerer Bedeutung als der Browser selbst, da unterschiedliche Browser durchaus dieselbe Rendering Engine benutzen können, während unter schiedliche Versionen desselben Browsers u. U. verschiedene Rendering Engines einsetzen. Der Internet Explorer für Windows etwa verwendet eine Rendering Engine namens Trident, während der IE für Mac Tasman einsetzt. Das bedeutet, dass es sich hier trotz der Namensgleichheit »Internet Explorer« de facto
X
18
Was ist HTML?
um zwei verschiedene Browser handelt (die auch separat getestet werden müssen)3. Mozilla-Produkte wie Firefox oder Camino setzen sämtlich Gecko als Rendering Engine ein, Safari, Google Chrome und Konqueror nutzen WebKit. Browser, die dieselbe Rendering Engine (mit derselben Versionsnummer) einsetzen, sollten HTML-Sei ten also (zumindest theoretisch) auch identisch darstellen. Browser
Hersteller
Rendering Engine
Microsoft www.microsoft.com/ie
Besonderhei ten/Lizenz
Markt anteil
Trident (MSHTML)
Bestandteil des WindowsBetriebs systems
65,8%
Mozilla Foundation www.mozilla.com
Gecko
Ableger von Mozilla, Open Source
24,7%
Apple www.apple.com/de/safari
WebKit
Bestandteil des MacBetriebs systems, basiert auf Konqueror
3,1%
Internet Explorer
Firefox
Safari
The WebKit Open Source Project webkit.org
fortschrittli cherer Open-SourcePrototyp von Safari mit mehr Funktionen
WebKit
Netscape
Netscape Communications browser.netscape.com
Gecko
Freeware
2,8%
Mozilla Foundation www.mozilla.org/projects
Gecko
Nachfolger von Netscape, integrierter E-Mail-Client, Open Source
1,1%
Opera Software www.opera.com
Presto (ab Version 7, vorher Elektra)
Freeware
1,2%
Mozilla
Opera
Plattformen
Tabelle 2: Die wichtigsten Webbrowser und ihre Rendering Engines nach Marktanteilen (Stand Jan. 2009). Quelle: www.webhits.de
3 Allerdings stellte Microsoft die Weiterentwicklung des Internet Explorers für Mac am 31.12.2005 zugunsten von Apples Safari ein. Seit 31.01.2006 steht der Browser auch nicht mehr zum Download zur Verfügung, sodass die Anzahl der Benutzer mittlerweile verschwindend gering sein dürfte.
HTML: Entwicklung und Standards
Browser
19
Hersteller
Rendering Engine
Google www.google.com/chrome
Plattformen
Besonderhei ten/Lizenz
Markt anteil
WebKit
Freeware
0,2%
SeaMonkey Council www.mozilla.org/ projects/seamonkey
Gecko
Nachfolger von Mozilla, integrierter E-Mail-Client, Open Source
0,2%
Microsoft www.microsoft.com/ mac/ie
Tasman
Freeware, wird nicht mehr weiterentwickelt
–
KDE e.V. konqueror.kde.org
WebKit
Open Source
0,9%
The Camino Project www.caminobrowser.org
Gecko
Ableger von Mozilla, Open Source
The Omni Group www.omnigroup.com/ applications/omniweb
WebKit
kommerziell
The Shiira Project shiira.jp/en.php
WebKit
Open Source
iCab Company www.icab.de
CAB
kommerziell
University of Kansas lynx.isc.org
Lynx
rein textbasierter, nicht-grafi scher Browser, Open Source
Chrome
Sea Monkey
Internet Explorer Mac
Konqueror
Camino
OmniWeb
Shiira
iCab
Lynx
Tabelle 2: Die wichtigsten Webbrowser und ihre Rendering Engines nach Marktanteilen (Stand Jan. 2009). Quelle: www.webhits.de
20
Was ist HTML?
Zielgruppenorientiertes Webdesign Sie sollten immer die zukünftigen Besucher Ihrer Site im Auge haben, wenn Sie eine Website entwickeln. Idealerweise gestalten Sie Ihre Seiten so, dass sie in allen gängigen Browsern (Internet Explorer, Mozilla/ Firefox, Opera, Safari/Konqueror) vertretbar dargestellt werden und auch noch bei einer langsamen Verbindung einigermaßen zügig laden. Gehen Sie nicht davon aus, dass Ihre Besucher die jeweils neueste Version der Browser benutzen! Als Faustregel gilt, dass die Mehrheit der Internet-Nutzer eine bis zwei Versionen hinter der aktuellen Version »herhinken«. Das bedeutet: Testen Sie Ihre Webseiten auf so vielen unterschiedlichen Browsern wie möglich!
f
Die Mozilla- und WebKit-Browser halten sich sehr genau an die vom W3C definierten Standards. Bei der Entwicklung von XHTML-Dateien empfiehlt es sich daher, die Seiten zunächst mit einem dieser Browser zu testen. Auch wenn heute vielerorts 21" Flachbildschirme und 24-Bit-Grafikkarten üblich sind, ist es sinnvoll, Dokumente möglichst abwärtskompatibel zu halten, sodass sie auch auf kleineren Monitoren und bestenfalls sogar mit einem nicht-grafischen Webbrowser wie Lynx (auf nahezu jedem Linux-System zu finden) oder mit alternativen Ausgabegeräten wie Screenreadern dargestellt werden können.
Aufgaben zur Selbstkontrolle 1. 2. 3. 4. 5. 6. 7.
Was versteht man unter Hypertext? Wozu dienen Auszeichnungssprachen, und was ist Ihr Grundprinzip? Von wem wurde das WWW »erfunden«, und wo? Was ist das W3C, und was sind seine Aufgaben? Was ist XHTML im Vergleich zu HTML? Was versteht man unter einer Rendering Engine? Welche Web-Browser kennen Sie, und welche Rendering Engines nutzen diese?
Womit werden HTML-Seiten erstellt?
21
Grundlagen In dieser Lektion lernen Sie: hh womit man HTML-Seiten erstellt. hh aus welchen Elementen eine HTML-Datei besteht und wie sie aufgebaut ist. hh einige Besonderheiten von XHTML kennen.
2.1
Womit werden HTML-Seiten erstellt?
Prinzipiell eignet sich jeder beliebige Texteditor, der Dateien mit der Endung .txt speichern kann, zur Erstellung von HTML-Seiten (.rtf oder .doc funktionieren nicht). Solche einfachen Texteditoren sind heute auf nahezu jedem Betriebssystem vorinstalliert. Unter Windows sind das etwa Notepad oder WordPad, unter Macintosh TextEdit und unter Unix Emacs oder vi. Es gibt aber auch Texteditoren mit größerem Funktionsumfang, die auf die Erstellung von HTML-Code und dem anderer Programmiersprachen spezialisiert sind und Ihnen die Arbeit erheblich erleichtern können. Solche Programme verwenden z. B. das sogenannte Syntax-Highlighting, das verschiedene Codebereiche in unterschiedlichen Farben darstellt und damit den Code erheblich lesbarer macht, oder sie versehen Ihre Codezeilen mit einer Zeilennummerierung, die Ihnen bei der Fehlersuche von Nutzen sein kann. Auch können Ihnen diese Editoren Tipparbeit sparen, indem sich häufig wiederkehrende Codefragmente automatisch einfügen lassen (Code Completion): Notepad++ (notepad-plus.sourceforge.net/de/site.htm) kostenloser Texteditor mit grundlegenden Funktionen HomeSite (www.adobe.com/products/homesite) bewährter, erweiterbarer Texteditor mit umfangreichen Funktionen (145,– €, eine angepasste Version ist Bestandteil der Dreamweaver-Installation) Eclipse (www.eclipse.org) kostenlose, erweiterbare Open-Source-Entwicklungsumgebung (IDE) mit riesigem Funktionsumfang zur Entwicklung von Software nahezu aller Art Coda (www.panic.com/coda) hervorragende, projektbezogene »One-Window«-Entwicklungsumgebung für HTML, CSS und andere Programmiersprachen mit integrierter Browservorschau, FTP-Client, Ren dezvous-Gruppenfunktion, integrierter W3C-Validierung und zahlreichen weiteren Fea tures speziell für Webdesigner (99,– $) TextMate (www.macromates.com) gilt als der flexibelste Texteditor für den Mac mit umfangreichen Funktionen für eine große Zahl an Programmiersprachen (39,– €) Tabelle 3: HTML-Editoren (Stand Aug. 2008)
22
Grundlagen
Smultron (tuppis.com/smultron) kostenloser Texteditor mit gutem Funktionsumfang
SubEthaEdit (www.codingmonkeys.de/subethaedit) Texteditor mit Rendezvous-Gruppenfunktion, d. h. es können mehrere Entwickler über ein Netzwerk gleichzeitig am selben Dokument arbeiten (35,– $) Tabelle 3: HTML-Editoren (Stand Aug. 2008)
Daneben gibt es jedoch auch eine Reihe von (meist teuren) grafisch orientierten WYSIWYG-Editoren4, die es erlauben, HTML-Seiten ähnlich wie in einem Layout- oder Satzprogramm auf visueller Basis zu erstellen. Der HTML-Quelltext wird hier automatisch im Hintergrund erzeugt: Dreamweaver (www.adobe.com/de/products/dreamweaver) im professionellen Bereich meistgenutzter WYSIWYG-Editor mit riesigem Funkti onsumfang (570,– €) GoLive (www.adobe.com/de/products/golive) v. a. im grafischen Bereich beliebter, umfangreicher Editor für professionelles Webdesign. Wird nicht mehr weiterentwickelt. NVU Composer (www.nvu-composer.de) ausgesprochen »N-view« für »new view«. Kostenloser, quelloffener Ableger der MozillaBrowser-Suite, der in direkter Konkurrenz zu den kommerziellen Marktführern Dreamweaver und GoLive steht. Freeway (www.softpress.com/products) WYSIWYG-Editor, der sich v. a. an Grafikdesigner und DTP-Profis ohne HTML-Kenntnisse richtet, verfügbar in einer »Express«- und einer »Pro«-Variante (69,– € / 195,– €) NetObjects Fusion (www.netobjects.de) flexibler, Template-basierter WYSIWYG-Editor für Amateure und semiprofessionelle Anwender mit großem Funktionsumfang (200,– €) Expression Web (www.microsoft.com/expression/products/overview.aspx?key=web) Nachfolger von FrontPage, insbesondere auch zur Erstellung von Webprojekten mit Microsofts ASP.NET-Technik. Nahezu identisch mit der MS-Office-Software Sharepoint Designer (380,– €) FrontPage WYSIWYG-Editor für Amateure ohne HTML-Kenntnisse, Bestandteil des MS-Office-Pakets und berüchtigt für seinen proprietären Quellcode, der meist nur im Internet Explorer funktioniert (230,– €) Tabelle 4: WYSIWYG-HTML-Editoren (Stand Aug. 2008)
Es gibt aber einen wichtigen Unterschied zwischen Satzdateien und HTML-Dokumenten: Während eine Satzdatei, auf verschiedenen Druckern ausgegeben, immer gleich aussieht, kann ein HTML-Dokument, mit unterschiedlichen Browsern betrachtet, ganz unterschiedlich aussehen oder wird im schlimmsten Fall überhaupt nicht dargestellt. Es gehört daher zu einer Ihrer wichtigsten Aufgaben, dafür zu sorgen, dass Ihre HTML-Seiten in verschiedenen Browsern akzeptabel aussehen, und dazu gehört die Anpas sung und Optimierung des HTML-Codes bzw. die Suche nach Fehlern im Code. Kenntnisse in HTML sind also absolut unabdingbar und unterscheiden Sie vom Amateur, der die Webseiten ohne HTMLKenntnisse mit einem grafischen Editor erstellt.
4
WYSIWYG = What You See Is What You Get
Woraus bestehen HTML-Dateien?
23
Doch auch wenn Sie solche WYSIWYG-HTML-Editoren nutzen, helfen Ihnen gute HTML-Kenntnisse enorm bei der Bedienung, da diese Editoren letztlich auch nur HTML-Code generieren. Ohne fundierte HTML-Kenntnisse ist es auch mit diesen Editoren schwierig, wirklich professionelle Websites zu erstel len. Darüber hinaus müssen Sie bei der Entwicklung dynamischer Webseiten bzw. Web-Applikationen ohnehin JavaScript- oder PHP-Code »von Hand« in die HTML-Datei einfügen und mit diversen HTMLElementen in eine Beziehung setzen können.
Browser-Erweiterungen für die Webseitenentwicklung Um Ihre Webseiten zu testen, sollten Sie natürlich möglichst viele verschiedene Browser auf Ihrem System installieren. Daneben bieten einige Browser jedoch auch zahlreiche Zusatzfunktionen, die Ihnen bei der Erstellung Ihrer HTML-Seiten enorm behilflich sein können. Allen voran sind hier die kostenlosen Add-ons für den Firefox-Browser zu nennen. Diese Add-ons sind betriebssystemunabhängig und erweitern Firefox um bestimmte Funktionen speziell für Webdesigner: hh Web Developer Toolbar fügt dem Browser eine Werkzeugleiste mit zahlreichen Funktionen hinzu, um z. B. CSS-Elemente anzuzeigen oder den HTML- oder CSS-Code nach dem W3C-Standard vali dieren zu lassen hh Firebug fügt dem Browser zahlreiche Entwicklertools hinzu. So lassen sich z. B. HTML-, CSS- und JavaScript-Code live auf jeder beliebigen Webseite ändern und debuggen hh View Source Chart zeigt den Quelltext einer Seite sauber formatiert und farbkodiert an hh Live HTTP Headers zeigt die HTTP-Kopfzeilen einer Webseite an Diese und viele weitere Add-ons lassen sich unter https://addons.mozilla.org/de/firefox kostenlos herun terladen und direkt über die Website installieren. Auch Safari bietet ein eigenes Menü speziell für Entwickler mit zahlreichen Werkzeugen. Dieses Menü ist standardmäßig deaktiviert, lässt sich aber leicht über die Voreinstellungen aktivieren (Bereich Erwei tert Menü »Develop« in der Menüleiste einblenden). Eines der besten deutschsprachigen Online-Nachschlagewerke zu (X)HTML, CSS und JavaScript, das Ihnen bei der täglichen Arbeit behilflich sein kann, ist das fast schon legendäre SelfHTML von Stefan Münz, das Sie unter der Webadresse de.selfhtml.org finden.
2.2
Woraus bestehen HTML-Dateien?
Die primäre Aufgabe eines Webbrowsers ist die Darstellung von (X)HTML-Dokumenten. Dabei ist es unerheblich, ob diese auf der lokalen Festplatte oder auf einem Computer am anderen Ende der Welt liegen5. (X)HTML-Seiten sind einfache Textdateien, die mit einem beliebigen Texteditor erstellt und bearbeitet werden können. Der Text enthält jedoch zusätzlich zur eigentlichen Information Steuerbefehle (»Auszeichnungen«), die dem Browser mitteilen, wie die Seite auszusehen hat. Die Interpretation dieser Befehle durch den Browser nennt man auch parsen (engl. »analysieren«) oder rendern (»übersetzen«, »wiedergeben«). Der Quelltext einer HTML-Datei kann also in zwei Kategorien unterteilt werden: hh den Inhalt: Dies ist ganz normaler Text, der die eigentliche Information der HTML-Seite enthält. hh die Auszeichnungen (Markup). Dies ist der Code, der beschreibt, wie der Inhalt strukturiert und angezeigt werden soll. Diese HTML-Steuerzeichen werden als Tags (dt. »Etiketten«) bezeichnet und sind für den Betrachter der Webseite unsichtbar. Sie werden in spitze Klammern < > einge schlossen, für die die Zeichen »kleiner als« bzw. »größer als« verwendet werden.
5 Hier unterscheidet sich lediglich das verwendete Protokoll. Für die Darstellung von HTML-Seiten im WWW verwenden die Browser das HTTP-Protokoll, während für Dateien auf dem lokalen System das Protokoll file:/// eingesetzt wird.
Q
24
Q
Grundlagen
Einfach ausgedrückt ersetzen HTML-Tags die Formatierungsbefehle, die Sie in Office-Programmen wie Word über das Menü vornehmen, und werden direkt in den Text geschrieben. Der Gültigkeitsbereich für eine HTML-Auszeichung wird in den meisten Fällen durch einen Start-Tag < > und einen End-Tag </ > (mit Schrägstrich) festgelegt. Die Auszeichung gilt für den Text bzw. das Objekt zwischen Start- und End-Tag. Beispiele <p>Dies ist ein Absatz.</p> <p>Dies ist ein weiterer Absatz.</p> Der <p>-Tag definiert einen Textbereich als Absatz (p = engl. paragraph). Im Browser wird automatisch eine Leerzeile erzeugt. Das sieht dann etwa so aus: Browserdarstellung: Dies ist ein Absatz. Dies ist ein weiterer Absatz. Der Tag <strong> hebt einen Textbereich fett hervor: <strong>Dieser Text</strong> soll hervorgehoben werden. Browserdarstellung: Dieser Text soll hervorgehoben werden.
Alles zusammen, d. h. <start-tag>Inhalt</end-tag>, bezeichnet man als ein HTML-Element oder einen HTML-Container. Es gibt aber auch alleinstehende, »inhaltsleere« HTML-Elemente, also Tags, die keinen End-Tag besitzen, da eine Ausweitung auf einen weiteren Gültigkeitsbereich keinen Sinn ergeben würde. Dazu gehört z. B. der Zeilenumbruch <br>. Beispiel Nach einem Zeilenumbruch<br>geht der Text in der n&auml;chsten Zeile weiter. Browserdarstellung: Nach einem Zeilenumbruch geht der Text in der nächsten Zeile weiter.
X
Diese Elemente müssen nach dem Standard XHTML 1.0 nun in sich selbst geschlossen werden. Dies geschieht durch ein Leerzeichen gefolgt von einem Schrägstrich: <br /> Das Leerzeichen vor dem Schrägstrich ist wichtig, um die Kompatibilität mit älteren Browsern zu gewährleisten.
Woraus bestehen HTML-Dateien?
2.2.1
25
Das HTML-Grundgerüst
Leider genügt es jedoch nicht, lediglich den Text mit Tags zu versehen, um eine gültige HTML-Datei zu erhalten. Damit eine Textdatei zu einer vollständigen HTML-Datei wird, benötigt Sie zuallererst grund legende Informationen zu Ihrem Aufbau, die ebenfalls mit Hilfe von speziellen Tags angegeben werden. Dieses Grundgerüst einer einfachen, leeren HTML-Seite ist immer gleich und sieht folgendermaßen aus: 1 2 3 4 5 6 7 8
<html> <head> <title>Einfache HTML-Seite</title> </head> <body> Inhalte (Texte, Bilder etc.) </body> </html>
Codebeispiel 1: Das HTML-Grundgerüst
Jede HTML-Seite muss auf diese Weise aufgebaut sein: hh Der äußere Container <html></html> teilt dem Browser mit, dass es sich überhaupt um eine HTML-Datei handelt. Auch XHTML-Dateien werden mit <html></html> umschrieben. hh Weiterhin gibt es den Kopfteil zwischen den Tags <head> und </head>. Dieser Teil enthält Infor mationen über das Dokument, die im Browser nicht angezeigt werden. hh Eine Ausnahme hiervon ist lediglich der <title>-Tag innerhalb des Kopfteils. Hier geben Sie den Titel des Dokuments an, der in der Titelleiste des Browserfensters angezeigt wird. Er sollte daher nicht zu lang sein, sondern den Inhalt der Datei kurz und prägnant beschreiben. Der Seitentitel wird außerdem für die Lesezeichen (Bookmarks) des Browsers verwendet und spielt auch bei der Indizierung durch Suchmaschinen eine wichtige Rolle. hh Weiterhin kann der Kopfteil sogenannte Meta-Tags enthalten. Das sind spezielle Informationen für Browser, Webserver und automatische Suchprogramme (»Robots«). Auf einzelne Meta-Tags wird weiter unten noch genauer eingegangen. Im Head können zudem Script-Code (z. B. JavaScript) sowie CSS-Definitionen stehen. hh Innerhalb des <body></body> Containers schließlich stehen die Informationen, die die Besucher Ihrer Website zu Gesicht bekommen, die also im Anzeigefenster des Browsers sichtbar sind. Mit der Strukturierung und Formatierung dieser Informationen mit Hilfe von HTML-Tags werden wir uns in den nächsten Lektionen beschäftigen.
26
Grundlagen
HTML-Container
HTML-Container
Head
Head
Title
Title
Body
Body Inhalt
Inhalt Inhalt
Abb. 3: Schematische Darstellung des Aufbaus einer HTML-Seite: Links das erforderliche Grundgerüst, rechts mit beliebigen Inhalten.
Wenn Ihr Textdokument das oben beschriebene Grundgerüst aufweist, handelt es sich um ein gültiges HTML-Dokument. Sie brauchen es nur noch mit der Endung .html oder .htm zu speichern, um es in jedem beliebigen Webbrowser öffnen zu können. Wenn Sie einen Texteditor verwenden, der standard mäßig die Endung .txt verwendet, können Sie diese bedenkenlos ändern.
Übung 1 Erstellen Sie im Texteditor Ihrer Wahl das Grundgerüst einer HTML-Seite und speichern Sie es als Vorlage für die nächsten Übungen ab.
2.2.2
Verschachtelte Tags
Wie Sie in obenstehender Grafik sehen, können HTML-Tags (und müssen teilweise) ineinander ver schachtelt werden. Sie können also z. B. auch einen Textbereich in mehr als einen Tag einbetten. Das Verschachteln von HTML-Tags geschieht nach dem »Tupperware-Prinzip«: Sie können eine Tupperdose verschließen und in eine größere Dose hineinpacken, diese ebenfalls verschließen und in eine noch größere Dose legen. Sie müssen jedoch jede Dose erst verschließen, sonst bleiben hinterher Deckel übrig. Genauso verhält es sich mit HTML-Tags: Ein Tag-Paar wird ins andere eingebettet, die Tags dürfen jedoch nicht »über Kreuz« stehen. Beispiel Um einen Text fett und gleichzeitig kursiv darzustellen, können Sie z. B. folgenden Code verwenden: <strong><em>Kennen Sie Tupperware?</em></strong> Die Reihenfolge der Tags spielt dabei keine Rolle. Es wäre also auch folgender Code möglich: <em><strong>Kennen Sie Tupperware?</strong></em> Im Browser sieht das etwa so aus:
Woraus bestehen HTML-Dateien?
27
Browserdarstellung: Kennen Sie Tupperware? Nicht gültig wäre dagegen folgender Code: <strong><em>Kennen Sie Tupperware?</strong></em>
2.2.3
Block- und Inline-Elemente
HTML-Tags lassen sich prinzipiell in zwei Gruppen unterteilen: Die Blockelemente und die Inline-Ele mente. hh Block-Elemente sind solche Tags, die im Browser automatisch einen Absatz erzeugen. Dazu gehört natürlich der p-Tag, aber z. B. auch die Tags zum Erzeugen von Listen <ul> und Tabellen <table>. Viele Block-Elemente – so auch der p-Tag – dürfen keine weiteren Block-Elemente enthalten. Gewöhnen Sie sich – auch im Hinblick auf die spätere Formatierung mit CSS – von vornherein an, alle Elemente Ihrer Seite immer in ein Block-Element zu setzen! hh Inline-Elemente sind Tags, die im laufenden Fließtext angewendet werden können und keinen Absatz erzeugen. Sie werden normalerweise auf Text oder andere Objekte innerhalb eines BlockElements angewendet und können i. d. R. beliebig ineinander verschachtelt werden. Inline-Ele mente sind z. B. der strong-Tag zur Hervorhebung von Text, der a-Tag zur Erzeugung von Hyperlinks oder der img-Tag zur Darstellung von Bildern. Beispiel <p>Dies ist Text in einem Absatz. Der Absatz ist ein Block-Element. Innerhalb des Absatzes können Textbereiche mit Hilfe von InlineElementen weiter formatiert werden: Man kann sie z. B. <strong>fett</strong> oder <em>kursiv</em> setzen, oder auch <strong><em>beides</em></strong>.</p>
2.2.4
»Missbilligte« Tags
Bei einigen Formatierungen kann zwischen logischen und physischen (»absoluten«) Tags unterschie den werden. Physische Tags – die noch von älteren HTML-Versionen herrühren – schreiben exakt vor, wie der Text optisch dargestellt werden soll, z. B. <i></i> für kursiv (engl. italic). Das logische Äquivalent dazu ist der Tag <em></em> (engl. to emphasize, betonen). Das Resultat ist in der Praxis meist dasselbe, der Text wird im Browser kursiv dargestellt. Der Unterschied besteht jedoch darin, dass logische Tags lediglich die Struktur vorgeben, die exakte Darstellung aber dem jeweiligen Ausgabegerät überlassen. Standard-Webbrowser stellen mit <em> ausgezeichneten Text zwar kursiv dar. Auf manchen Bildschirmen ist kursiver Text aber nur schwer les bar oder kann überhaupt nicht dargestellt werden, wie z. B. auf bestimmten Terminals. Deshalb wird der em-Tag hier anders interpretiert. Blinde Menschen benutzen Braille-Reader oder Sprachausgabe, die die logischen Tags wieder auf völlig andere, passende Weise interpretieren (z. B. durch Anhebung der Vorlesestimme). Da diese Trennung zwischen Strukturierung und Formatierung der Grundphilosophie von XHTML ent spricht, gelten viele physischen Tags spätestens seit dem Standard XHTML 1.0 als deprecated (»missbil ligt«), d. h. sie werden in absehbarer Zeit aus dem XHTML-Vokabular gestrichen und irgendwann von den Browsern nicht mehr interpretiert. Sie sollten daher die logischen Tags den absoluten Tags auf jeden Fall vorziehen.
28
f
Grundlagen
Nutzen Sie nur solche HTML-Auszeichnungen, die die logische Struktur des Dokuments beschreiben, wie z. B. Absätze, Überschriften, Listen, Tabellen etc. Das eigentliche Design der Seite, also alles, was die visuelle Formatierung betrifft (z. B. Schriftarten, Größenangaben, Farben, Randstile etc.), realisieren Sie anschließend mit Hilfe von CSS.
2.2.5
Attribute
Viele XHTML-Tags können, manche müssen sogar durch Attribute näher definiert werden. Beispiel <input type="text" /> Der Tag input erzeugt Formularelemente wie z. B. Text-, Ankreuz oder Passwortfelder, mit deren Hilfe Benutzer mit der Website interagieren können. Um jedoch zu definieren, um welche Art von Formular feld es sich handelt, müssen Sie das Attribut type verwenden und diesem einen Wert (hier text) zuweisen.
X
Wertzuweisungen zu Attributen müssen seit XHTML 1.0 immer in Anführungszeichen gesetzt und – wie die Tags und Attribute selbst – kleingeschrieben werden. Attribute stehen immer innerhalb des Start-Tags. Es können beliebig viele Attribute gleichzeitig ver wendet werden, die Reihenfolge spielt dabei keine Rolle, z. B: <table border="0" cellspacing="0" cellpadding="0">…</table> Mit obenstehendem Tag erzeugen Sie eine Tabelle. Die Wertzuweisungen zu den Attributen bewirken, dass die Tabelle weder eine Kontur noch einen Zellabstand oder einen inneren Versatz hat und demnach unsichtbar ist. Jedem Tag ist eine Anzahl bestimmter Attribute zugeordnet. Sie müssen also wissen, welche Attribute Sie mit welchem Tag zusammen verwenden können bzw. welcher Tag welche Attribute erwartet. Der img-Tag etwa, der der Anzeige von Grafiken dient, versteht u. a. die Attribute src (= source, Quellpfad), width (Breite), height (Höhe), alt (Alternativtext) und border (Kontur), das Attribut color (Textfarbe) ist jedoch nicht erlaubt (und auch nicht besonders sinnvoll J). Es gibt verschiedene Arten von Attributen: hh Attribute mit vordefinierten Begriffen als Wertzuweisungen: z. B. <input type="text" /> (erzeugt ein einzeiliges Textfeld). hh Attribute mit numerischer Wertzuweisung: z. B. <hr width="300" /> (erzeugt eine 300 Pixel breite horizontal rule, eine Trennlinie). hh Attribute mit prozentualer Wertzuweisung: z. B. <hr width="50%" /> (erzeugt eine Trennlinie mit 50% der Breite des Anzeigefensters). hh Attribute mit Dateipfaden als Wert: z. B. <img src="bilder/beispiel.gif" /> (zeigt die Grafik beispiel.gif aus dem Ordner bilder an). hh Attribute mit frei wählbaren Werten: z. B. <img id="firmenlogo" /> (gibt einer Grafik eine eindeutige, selbstdefinierte Identität, um sie z. B. später mit Hilfe von CSS auf der Seite zu positionieren). hh Alleinstehende Attribute ohne Wertzuweisung: <hr noshade> (erzeugt eine Trennlinie ohne Schattierung).
Zeichenkodierung
29
Nach den Regeln von XHTML 1.0 dürfen solche inhaltsleeren Attribute ohne Wertzuweisung jedoch nicht mehr allein stehen, wie das bei HTML 4.01 noch möglich war. Gibt es für ein Attribut keine Parameter, so muss das Attribut sich selbst als Wert zugewiesen werden: <hr noshade="noshade" />. Weitere alleinstehende Attribute sind noresize="noresize" (keine Größenänderung von Frames) oder multiple="multiple" (Mehrfachauswahl bei Auswahllisten in Formularen). Für Attribute gilt dieselbe Regel wie für Tags: Verwenden Sie nach Möglichkeit keine Attribute, die ein HTML-Element optisch auszeichnen! Insbesondere sollten Sie auf Attribute wie color (Textfarbe) oder bgcolor (Hintergrundfarbe) verzichten. CSS bieten Ihnen hier weit mehr Möglichkeiten.
2.3
Zeichenkodierung
Wenn Sie Ihr HTML-Dokument erstellen und in einem Webbrowser ansehen, wird sämtlicher Text – auch Sonderzeichen wie Umlaute etc. – in der Regel korrekt angezeigt. Das gilt jedoch nur für Compu tersysteme in Ihrem Sprachraum. Wenn Sie sich dieselbe Webseite auf einem Rechner in Russland, China oder Japan ansehen würden, sähen Sie nur Zeichensalat. Das liegt an der unterschiedlichen Zei chenkodierung dieser Systeme. Es existieren unterschiedliche Zeichenkodierungen z. B. für westeuropäische, griechische, kyrillische, asiatische oder arabische Zeichen. Abhängig von dem Zeichensatz, den Sie in Ihrem Dokument ver wenden, wendet Ihr Editor beim Speichern der Datei eine dieser Kodierungsmethoden an, um die Zei chen in Bytes – also letztlich in Einsen und Nullen – umzuwandeln. Zur Darstellung der Zeichen muss der Webbrowser dieselbe Methode in umgekehrter Richtung anwenden. Um sicherzustellen, dass Ihr Editor und die Webbrowser der Besucher Ihrer Website dieselbe Zeichen kodierung verwenden und damit eine korrekte Darstellung Ihrer Seiten überall auf der Welt gewährlei stet ist, müssen Sie zwei Dinge berücksichtigen: 1. 2.
Verwenden Sie einen Editor, in dem Sie beim Speichern des Dokuments die Kodierung wählen können. Geben Sie im head Ihrer HTML-Datei in einem so genannten Meta-Tag (vgl. Seite 110) die verwendete Zeichenkodierung an, um sicherzustellen, dass jeder Browser diese Dekodierungsmethode ver wendet.
Beispiel Wenn Sie Ihr Dokument in der Standardkodierung für Westeuropa (ISO 8859-1) gespeichert haben, fügen Sie folgenden Meta-Tag in den head Ihres Dokuments ein: 1 2 3 4 5 6 7 8 9
<html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>Meine HTML-Seite</title> </head> <body> Ihr Text… </body> </html>
Codebeispiel 2: Meta-Tag zur verwendeten Zeichenkodierung
X
30
Grundlagen
2.3.1
Sonderzeichen
Wenn Sie Sonderzeichen eingeben wollen, die nicht im Zeichenvorrat der von Ihnen verwendeten Kodierung enthalten sind, stehen Ihnen in HTML sogenannte benannte Zeichen zur Verfügung. Dies sind Umschreibungen von Sonderzeichen mit Hilfe von Kürzeln, die jeder Webbrowser versteht. Diese Kürzel werden nach dem immer gleichen Muster &kuerzel; notiert, also mit dem kaufmännischen Und gefolgt von einer bestimmten Zeichenfolge und einem abschließenden Semikolon. Für deutsche Umlate und andere gängige Sonderzeichen stehen z. B. folgende benannte Zeichen zur Verfügung: Zeichen
Umschreibung
ä
&auml; (= »a Umlaut«)
Ä
&Auml;
ö
&ouml;
Ö
&Ouml;
ü
&uuml;
Ü
&Uuml;
ß
&szlig; (= »sz Ligatur«)
€
&euro;
Tabelle 5: HTML-Umschreibung für gängige deutsche Sonderzeichen
f
Wenn Sie die Standardkodierung ISO 8859-1 verwenden, brauchen Sie die Sonderzeichen zwar theoretisch nicht mit Kürzeln zu umschreiben – sofern die oben genannte Meta-Angabe zur Zeichenkodierung im Kopf der HTML-Datei vorhanden ist, können die aktuellen Browser die Datei korrekt darstellen. Dennoch ist es prinzipiell sicherer, auch hier die Umschreibungen zu verwenden, um mögliche Probleme mit älteren Systemen zu vermeiden. Alternativ dazu können Sie Ihre Dokumente mit Unicode (UTF-8) kodieren. In diesem Fall müssen Sie für die Darstellung der Sonderzeichen keine Kürzel verwenden. Allerdings wird Unicode erst von neueren Betriebssystemen unterstützt.
2.3.2
Maskierung reservierter Zeichen
Genauso verhält es sich mit Zeichen, die von der HTML-Syntax bereits reserviert sind, also z. B. die spit zen Klammern < >, die Anführungszeichen „ und das kaufmännische &. Auch diese Zeichen müssen Sie umschreiben. Dies nennt man Maskieren. Reservierte Zeichen müssen Sie immer maskieren, unabhän gig davon, welche Zeichenkodierung Sie verwenden. Zeichen
Maskierung
<
&lt; (= less than, kleiner als)
>
&gt; (= greater than, größer als)
»
&quot; (= quotation)
&
&amp; (= ampersand)
Tabelle 6: Maskierung von in HTML reservierten Zeichen
Kommentare
2.4
31
Kommentare
Sie können an jeder beliebigen Stelle einer HTML-Datei (außer innerhalb eines Tags) Kommentare ein fügen. Diese werden vom Browser nicht angezeigt und dienen z. B. dazu, Merkhilfen, Beschreibungen, Hinweise oder Anmerkungen etwa für Teamkollegen in Ihren Code einzufügen, oder auch, um verwen dete Tags temporär zu »deaktivieren« (»auszukommentieren«, also auszublenden). Solche Kommentare werden vom Browser ignoriert und nicht dargestellt. Beispiele <!--Dies ist ein Kommentar--> <!--Dies ist ein Kommentar über mehrere Zeilen--> Im folgenden wurde ein Absatz auskommentiert: <!--p>Text in einem Absatz</p-->
2.5
Weitere wichtige Prinzipien
hh XHTML-Anweisungen sind case-sensitive, d. h. Sie dürfen nur Kleinbuchstaben für Tags, Attribute und Werte verwenden (bei HTML 4.01 war das noch nicht der Fall). hh XHTML-Tags basieren auf dem amerikanischen Englisch (nicht dem britischen). Dies spiegelt sich in Ausdrücken wider wie center (nicht centre), gray (nicht grey) oder color (nicht colour). hh XHTML-Dokumente müssen mit der Endung .html oder .htm abgespeichert werden, damit der Webbrowser weiß, dass es sich um ein HTML-Dokument handelt und die Tags richtig interpretiert. Für plattformunabhängige Kompatibilität sollten Sie sich zudem angewöhnen, bei Dateinamen keine Leer- und Sonderzeichen zu verwenden und auch hier auf Groß- und Kleinschreibung zu achten. Am besten Sie verwenden ausschließlich Kleinbuchstaben.
2.6
Struktur Ihrer Website auf dem Webserver
Wenn Sie Ihre Website auf einem Webserver veröffentlichen, steht Ihnen dort zu diesem Zweck i. d. R. ein eigenes Verzeichnis (Ordner) zur Verfügung. Dieses Verzeichnis wird Webserver-Root (Wurzel- oder Stammverzeichnis) genannt, und dorthin kopieren Sie – z. B. mit Hilfe eines FTP-Programms – sämtliche Dateien (HTML-Seiten und Bilder), die Bestandteil Ihrer Website sind (nicht jedoch die Rohdaten wie Textentwürfe aus Word oder Layoutentwürfe aus Photoshop). Die Startseite – also die Seite, die angezeigt wird, wenn ein Besucher die Adresse in seinen Browser eingibt – muss auf der obersten Ebene dieses Verzeichnisses liegen und trägt normalerweise den Namen index.html6. Alle anderen Dateien können Sie zur besseren Übersicht in beliebigen Unterverzeichnissen innerhalb des Stammverzeichnisses ablegen (z. B. ist meist ein Ordner bilder, images oder media zum Speichern aller Bild- und anderen Mediendateien sinnvoll). Hier das Beispiel einer Site-Struktur anhand des (fiktiven) Internetauftritts von www.getraenke-muster mann.de:
6 Webserver sind normalerweise so konfiguriert, dass sie automatisch die Datei index.html an den Browser schicken, wenn dieser eine Verbindungsanfrage an die URL des Servers richtet.
32
Grundlagen
Abb. 4: Stammverzeichnis auf dem Webserver von www.getraenke-mustermann.de: Auf der obersten Ebene befindet sich die Homepage »index.html« sowie die HTML-Seiten für das Bestellformular und das Impressum. Sämtliche Grafiken befinden sich im Unterordner »bilder«. Die HTML-Seiten für die Produktbeschreibungen wurden in entprechenden Unterordnern nach Kategorie sortiert.
f
Es ist für das fehlerfreie Funktionieren Ihres Internetauftritts unabdingbar, dass Sie bereits beim Erstellen der Website auf Ihrem lokalen System die Struktur vorgeben, die sie später auf dem Server haben soll. Ein nachträgliches Ändern der Seitenstruktur ist nur mit großem Aufwand möglich, da Sie in diesem Fall in allen HTML-Seiten sämtliche Verweise und Links auf andere Dateien anpassen müssten.
Aufgaben zur Selbstkontrolle 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13.
Mit welcher Software können Sie HTML-Seiten erstellen? Mit welchen Dateiendungen können HTML-Dokumente gespeichert werden? In welche zwei Kategorien lässt sich HTML-Quelltext unterteilen? Wie sieht das universelle Grundgerüst einer HTML-Seite aus? Was ist der Unterschied zwischen Block- und Inline-Elementen? Was ist der Unterschied zwischen logischen und physischen Tags, und warum sollte man die einen den anderen vorziehen? Was sind Tags, die als deprecated eingestuft wurden? Wie weisen Sie einem HTML-Tag ein Attribut zu? Welche Werte können Sie einem HTML-Attribut zuweisen? Was versteht man unter der Zeichenkodierung, und warum ist sie für HTML-Dokumente von Bedeutung? Mit welcher Syntax können Sie Zeichen in HTML »maskieren«, und warum? Wie können Sie ein HTML-Element für den Browser »unsichtbar« machen? Welchen Dateinamen muss die Homepage Ihrer Website normalerweise haben?
Besonderheiten bei der Textformatierung mit HTML
33
Einfache Textformatierung In dieser Lektion lernen Sie: hh die wichtigsten HTML-Tags zur Strukturierung von Text. hh verschiedene Block- und Inline-Elemente kennen.
3.1
Besonderheiten bei der Textformatierung mit HTML
Im folgenden werden wir uns mit ein paar grundlegenden Tags vertraut machen, die es uns erlauben, Text ein wenig ansprechender zu gestalten. Dazu müssen wir jedoch zuerst noch einige Eigenheiten von HTML kennenlernen:
Mehrere Leerzeichen werden ignoriert Sie können und sollten in Ihrem Texteditor zwar multiple Leerzeichen verwenden, um Ihren Code zu strukturieren und Codezeilen einzurücken. Im Browser wird jedoch immer nur das erste Leerzeichen dargestellt, alle zusätzlichen Leerzeichen werden ignoriert. Wenn Sie mehr als ein Leerzeichen erzwingen wollen, müssen Sie dafür ein benanntes HTML-Zeichen verwenden, den non breaking space &nbsp; (der eigentlich dafür da ist, dass eine durch Leerzeichen getrennte Wortgruppe nicht umbricht). Beispiel hallo hallo Browserdarstellung: hallo hallo aber hallo&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;hallo Browserdarstellung: hallo
hallo
Es gibt jedoch kaum einen vernünftigen Grund, warum Sie zur Formatierung einer Seite multi ple Leerzeichen verwenden sollten. Dies ist genauso wenig zu empfehlen wie in einem Text verarbeitungsprogramm.
f
34
Einfache Textformatierung
Zeilenumbrüche und Leerzeilen werden ignoriert Sie können im XHTML-Code Zeilenumbrüche und Leerzeilen nach Belieben verwenden, um den Code übersichtlich zu halten. Diese werden im Browser jedoch nicht angezeigt. Verwenden Sie zum Erzeugen einer Leerzeile den p-Tag, für einfache Zeilenumbrüche den br-Tag.
Keine Tabulatoren XHTML kennt keine Tabulatoren. Alle Tabulatoren, die Sie in Ihrem Editor setzen, werden ignoriert. In XHTML verwendet man stattdessen Listen, Tabellen u. ä. zur Formatierung. Tabulatoren werden aus schließlich dazu verwendet, Ihren Code sauber zu strukturieren.
f
Gewöhnen Sie sich jedoch gleich an, Ihren HTML-Code ordentlich zu strukturieren. Rücken Sie logisch zusammenhängende Elemente mit Leerzeichen oder Tabulatoren ein. So halten Sie Ihren Code lesbar.
3.2
Blockelemente
3.2.1
Absätze
Zur einfachen Formatierung Ihrer Texte bietet Ihnen HTML eine ganze Reihe von Möglichkeiten. Die einfachste und effektivste Methode zur Strukturierung von Fliesstexten – auch und gerade im Hinblick auf die Lesbarkeit – ist die Verwendung von Absätzen. Schließen Sie dazu jeden Absatz in das Tag-Paar <p></p> ein (p = engl. paragraph). Davor und danach erzeugt der Browser automatisch eine Leerzeile. Beispiel <p>Dies ist ein Absatz.</p> <p>Dies ist ein weiterer Absatz.</p> Browserdarstellung: Dies ist ein Absatz. Dies ist ein weiterer Absatz. Das Umschließen eines Textabsatzes mit dem p-Tag erleichtert auch das spätere Formatieren mit Style Sheets.
3.2.2
Überschriften
Die sechs h-Tags können für hierarchische Überschriften benutzt werden. Mit <h1></h1> ausgezeich neter Text wird am größten, mit <h6></h6> markierter Text am kleinsten dargestellt. Überschriften werden als eigener Absatz behandelt. Die genaue Darstellung hängt jedoch von der Browser-Einstel lung ab. Beispiel <h1>Ich bin der gr&ouml;&szlig;te</h1> <h3>Ich bin nicht ganz so gro&szlig;</h3> <h5>An Euch komme ich nicht ran</h5>
Inline-Elemente
35
Browserdarstellung:
Ich bin der Größte Ich bin nicht ganz so groß An Euch komme ich nicht ran
Sowohl Überschriften als auch Absätze dürfen keine weiteren Blockelemente enthalten. Insbe sondere dürfen Sie in eine Überschrift keinen Absatz verschachteln!
3.2.3
Trennlinien
Ein weiteres Gestaltungselement zur Abgrenzung von nicht zusammenhängenden Textbereichen oder einfach zur optischen Auflockerung ist die Trennlinie, die einen eigenen Absatz erzeugt und mit dem Tag <hr /> (engl. horizontal rule) definiert wird. Dieser Tag ist ein Standalone-Tag. Diese Trennlinien werden in allen Browsern standardmäßig »schattiert« (in 3D-Optik) und über die ganze Breite des Anzeigefensters dargestellt. XHTML bietet ein paar Optionen zur Formatierung dieser Linien: hh Mit dem Attribut noshade="noshade" erreichen Sie, dass die Trennlinie massiv dargestellt wird: <hr noshade="noshade" /> hh Höhe und Breite der Trennlinie legen Sie mit den Attributen width (Breite) und size (Höhe) fest. Die Werte geben Sie in Pixeln an, den Wert für width können Sie alternativ dazu auch in Prozent relativ zum Anzeigefenster angeben: <hr width="250" size="4" /> <hr width="60%" />
3.3
Inline-Elemente
3.3.1
Fettschrift
<b></b> ist ein physischer Tag für bold (fett). Benutzen Sie jedoch stattdessen besser das logische Äquivalent <strong></strong>. Beispiel Dies ist <strong>fetter</strong> Text. Browserdarstellung: Dies ist fetter Text.
3.3.2
Kursivschnitt
<i></i> steht für italic (kursiv). Die logische Alternative zum <i> Tag ist <em></em> und steht für emphasize (betonen).
f
36
Einfache Textformatierung
Beispiel Dies ist <em>kursiver</em> Text. Browserdarstellung: Dies ist kursiver Text.
3.3.3
Weitere physische Tags zur Textauszeichnung
hh <sup></sup> zeichnet einen Text als hochgestellt aus. hh <sub></sub> zeichnet einen Text als tiefgestellt aus. hh <u></u> zeichnet einen Text als unterstrichen aus (deprecated). Da Hyperlinks von allen Browsern generell unterstrichen dargestellt werden, sollten Sie diesen Tag für normalen Text auf jeden Fall vermeiden! hh <strike></strike> zeichnet einen Text als durchgestrichen aus (deprecated).
f
Erheblich differenziertere Formatierungsoptionen bieten Ihnen Cascading Style Sheets. Damit haben Sie auch die Möglichkeit, bestehenden XHTML-Tags weitere, selbstdefinierte Format-Eigenschaften zuzuweisen.
3.3.4
Weitere logische Tags zur Textauszeichnung
Die Darstellung dieser Tags ist abhängig vom jeweiligen Ausgabegerät und sollte mit CSS formatiert werden. hh <code></code> verleiht einem Textbereich die Bedeutung »dies ist Quelltext«. hh <samp></samp> verleiht einem Textbereich die Bedeutung »dies ist ein Beispiel«. hh <var></var> verleiht einem Textbereich die Bedeutung »dies ist eine Variable oder ein variabler Name«. hh <dfn></dfn> verleiht einem Textbereich die Bedeutung »dies ist eine Definition«. hh <abbr></abbr> verleiht einem Textbereich die Bedeutung »dies ist eine Abkürzung«. hh <acronym></acronym> verleiht einem Textbereich die Bedeutung »dies ist ein Akronym«. hh <q cite="Quellenangabe"></q> verleiht einem Textbereich die Bedeutung »dies ist ein Zitat mit Quellenangabe«.
3.4
Zeilenumbrüche
Wie Sie wahrscheinlich schon bemerkt haben, umbricht Text normalerweise automatisch am Ende des Browserfensters. Es gibt in XHTML zwei Möglichkeiten, unabhängig davon Zeilenumbrüche zu erzwin gen 1. 2.
Beim Tag <br /> (line break) beginnt der nachfolgende Text in der nächsten Zeile. Dieser Tag ist ein Standalone-Tag und muss in sich geschlossen werden. <br /> zählt zu den Inline-Elementen. Der Tag <p></p> erzeugt einen eigenen Absatz und fügt eine zusätzliche Leerzeile ein.
Beispiel 1 2 3 4 5
<p> Herr Thomas Mann<br /> Theodorstr. 11<br /> Berlin </p>
Zeilenumbrüche 6 7 8 9 10 11 12 13 14 15
37
<p> Herr Peter M&uuml;ller<br /> Etzelweg 3<br /> K&ouml;ln </p> <p> Frau Birgit Scholl<br /> Schlo&szlig;weg 7a<br /> Heidelberg </p>
Codebeispiel 3: Verwendung von Absätzen <p> und Zeilenumbrüchen <br />.
Browserdarstellung:
Abb. 5: Browseranzeige von Absätzen und Zeilenumbrüchen.
Es ist übrigens nicht zu empfehlen, Abstände durch das Hintereinandersetzen mehrerer <p> oder <br /> Tags zu erzeugen, da – ähnlich wie bei Leerzeichen – in manchen Browsern nur der erste ange zeigt wird, und obendrein die dadurch erzeugten Abstände in jedem Browser anders dargestellt wer den. Sollten Sie nicht umhin kommen, mehrere aufeinanderfolgende Leerzeilen zu benutzen, müssen Sie deshalb »Dummy«-Absätze mit Hilfe von non-breaking spaces erzeugen: <p>&nbsp;</p> <p>&nbsp;</p> <p>&nbsp;</p> In HTML existiert keine automatische Silbentrennung! Trennen Sie jedoch auch niemals von Hand mit Hilfe von <br />, da der Text in unterschiedlichen Browsern und auf unterschiedlichen Systemen jedesmal anders umbricht.
f
38
Einfache Textformatierung
Übung 2 Erstellen Sie eine XHTML-Seite, die im Browser folgende Ausgabe erzeugt. Den Text dazu – ein Auszug aus dem Wikipedia-Artikel zum Thema Nuraghen – finden Sie in der Datei nuraghen.txt.
f
1.
Schreiben Sie zuerst das HTML-Grundgerüst oder öffnen Sie eine zuvor erstellte Vorlage.
2.
Kopieren Sie dann den Text in den Body-Bereich und formatieren Sie ihn mit Hilfe von HTMLTags. Speichern Sie Ihr Dokument mit der Endung .html als reine Textdatei mit der Kodierung ISO 8859-1 oder Unicode und öffnen Sie sie von der Festplatte mit einem Browser.
3.
Wenn das Resultat noch nicht befriedigend ist, gehen Sie zurück in den Editor, verbessern den Code, speichern erneut und klicken im Browser auf Reload. Wiederholen Sie diesen Vorgang, bis alles perfekt ist. Viel Erfolg!
Beim Testen Ihrer Seiten sollten Sie dafür sorgen, dass der Browser Ihre Datei tatsächlich immer wieder neu lädt und sie nicht etwa aus dem Zwischenspeicher (frz. Cache) holt – nur so sehen Sie sofort jede Änderung, die sie am Code vorgenommen haben. Diese Einstellungen finden Sie in Firefox unter Bearbeiten Datenschutz Cache. Stellen Sie dort die Cache-Größe auf 0. Für den Internet Explorer: Extras Internet-Optionen Allgemein Temp oräre Internetdateien Einstellungen Bei jedem Zu griff auf die Seite.
Zeilenumbrüche
39
Aufgaben zur Selbstkontrolle 1. 2. 3. 4. 5.
Wozu dient ein geschütztes Leerzeichen, und wie wird es in HTML erzeugt? Was ist der Unterschied zwischen einem Absatz und einem Zeilenumbruch? Wie erzeugen Sie bei des in HTML? Wieviele Überschriften gibt es in HTML, und wie werden sie erzeugt? Welche Eigenschaften von Trennlinien kennen Sie? Welche Tags sollten Sie zur Auszeichnung von fettem und kursivem Text verwenden?
40
XHTML-spezifische Erweiterungen
XHTML-spezifische Erweiterungen In dieser Lektion lernen Sie: hh wie Sie Ihr HTML-Grundgerüst erweitern müssen, damit es dem XHTML-Standard entspricht. hh die Bedeutung der von Dokumenttypdefinition kennen.
Nach den Spezifikationen für XHTML-Dateien müssen Sie das Grundgerüst Ihrer HTML-Datei noch um einige Bestandteile erweitern. Nachstehender Code definiert das vollständige Gerüst einer XHTML-1.0konformen Seite:
1 2 3 4 5 6 7 8 9 10
<?xml version="1.0"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> </body> </html>
Codebeispiel 4: Das vollständige XHTML-Grundgerüst
4.1
Fakultative XML-Deklaration
Da es sich bei XHTML-Dateien um XML-Dokumente handelt, muss die Datei strengenommen mit der XML-Deklaration beginnen: <?xml version="1.0"?>. Diese Versionsangabe ist im allgemeinen notwendig, damit Programme erkennen, wie dieses Dokument zu bearbeiten ist. Neben der Versions angabe können noch weitere Angaben folgen, z. B. die Angabe der verwendeten Textkodierung.
f
Ältere Browser können allerdings durch die XML-Deklaration verwirrt werden und zeigen statt des gewünschten Seiteninhalts den Quelltext der Seite an. Da dieser XML-Prolog nicht zwingend vorgeschrieben ist, sollten Sie Ihn besser vorerst noch weglassen.
Dokumenttypdefinition
4.2
41
Dokumenttypdefinition
Die Dokumenttypdefinition (engl. Document Type Definition, DTD) ist fester Bestandteil von XMLbasierten Dokumenten und beschreibt, um welche Art von Dokument es sich handelt, z. B. (X)HTML für Webseiten, SVG für Vektorgrafiken, DocBook für technische Dokumentationen u. v. m. In der DTD wird definiert, welche Elemente und Attribute in einem Dokument verwendet werden können, und welche Bedeutung ihnen zukommt. Nach den Regeln von XML-basierten Auszeichnungssprachen ist eine Datei erst dann eine gültige XMLDatei, wenn eine solche DTD definiert ist und der Quelltext genau nach den in ihr vorgegebenen Regeln erstellt wurde. Die DTD wird zu Beginn eines XML-Dokuments in der Dokumenttypdeklaration – beginnend mit !DOC TYPE – angegeben und kann entweder innerhalb des XML-Dokuments stehen oder auf eine externe Datei verweisen. Für letzteres kann eine beliebige URL angegeben werden. Im Falle von XHTML wird auf eine externe Datei verwiesen, die sich auf dem Server des W3C befindet: http://www.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd. Für standardisierte DTDs wie XHTML gibt es zusätzlich allgemein bekannte Public Identifier, sodass der Browser die externe DTD nicht jedesmal neu laden muss, wenn ihm der Public Identifier bekannt ist. Ein Public Identifier für XHTML lautet //W3C// DTD XHTML 1.0 Transitional//EN. Eine vollständige Dokumenttypdeklaration, die auf die externe DTD für XHTML-Dokumente verweist, sieht folgendermaßen aus: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Eine solche Deklaration sollte von nun an am Beginn jedes Ihrer XHTML-Dokumente stehen. Allerdings können in XHTML drei verschiedene DTDs zum Einsatz kommen: Strict, Transitional und Frameset. Die DTDs werden wie folgt eingesetzt: hh XHTML Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.W3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Diese DTD definiert nur Elemente, die als XHTML-konform gelten, also keine Tags, die als deprecated (veraltet) erklärt wurden, wie z. B. der <font> oder <center> Tag. Verwenden Sie diese DTD also nur dann, wenn Sie sich absolut sicher sind, dass Sie keines dieser Elemente mehr verwenden. hh XHTML Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Diese DTD ist die Übergangsfassung von älteren HTML-Versionen zu XHTML. Falls Sie sich weitge hend an die für XHTML zugelassenen Tags halten, aber zusätzlch noch veraltete Tags verwenden müssen, dann benutzen Sie diese gemäßigte Version. hh XHTML Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.W3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Diese DTD benötigen Sie nur dann, wenn Sie mit Framesets (vgl. Seite 96) arbeiten. Tragen Sie diese DTD in die »Master-Datei« ein, in der Sie Ihr Frameset definieren.
42
XHTML-spezifische Erweiterungen
Standard-Modus und Quirks-Modus Ein gültiger Doctype ist deshalb so wichtig, weil dadurch die Browser erst in die Lage versetzt werden, Ihre Seiten im Standard-Modus darzustellen, also den (X)HTML- und CSS-Code so umzusetzen, wie es dem W3C-Standard entspricht. Fehlt hingegen der Doctype oder entspricht Ihr Code nicht dem dort festgelegten Standard, so schalten die Browser in den sogenannten Quirks-Modus. Der Quirks-Modus ist ein spezieller Darstellungsmodus von modernen Browsern, der die Abwärtskompatibilität zu Websites sicherstellen soll, die veralteten oder ungültigen HTML-Code verwenden. Dabei werden u. a. sogar bewusst Darstellungsfehler alter Browserversionen simuliert, um das Layout dieser Webseiten so darzustellen, wie es (vielleicht) der Intention des Webdesigners entsprach.
4.3
Namensraum
Nach der DTD wird mit dem einleitenden html-Tag das Dokument geöffnet und gleichzeitig der ver wendete Namensraum für XHTML-Dokumente mit einem Attribut namens xmlns (XML Namespace, XML-Namensraum) angegeben: <html xmlns="http://www.w3.org/1999/xhtml"> Die Angabe eines Namensraums in XML-Dokumenten dient der Identifikation und Zuordnung von Objekten (hier Tags und Attribute) zu einem bestimmten Kontext (hier XHTML) und soll Konflikte ver meiden, die entstehen können, wenn ein Name bereits in anderen Zusammenhängen benutzt wird.
Übung 3 Erweitern Sie Ihre HTML-Vorlage um die XHTML-spezifischen Zusätze.
Aufgaben zur Selbstkontrolle 1. 2. 3.
Was versteht man unter der XML-Deklaration, und was ist das Problem dabei? Was ist eine DTD, und warum sollten Sie sie immer angeben? Was ist der »Quirks-Modus«?
Punktlisten
43
Listen und Aufzählungen In dieser Lektion lernen Sie: hh wie Sie Listen in HTML definieren. hh welche Arten von Listen es gibt.
In HTML unterscheidet man zwischen drei verschiedenen Arten von Listen: hh Punktlisten (engl. unordered lists) hh Nummerierte Listen (engl. ordered lists) hh Definitionslisten (engl. definition lists) Eine vierte Gattung dieser Art, die Verzeichnislisten (engl. directory lists) mit den HTML-Tags DIRECTORY, DIR oder MENU werden kaum mehr unterstützt, und Sie können sie getrost ignorieren.
5.1
Punktlisten
Punktlisten sind ungeordnete Listen. Als Aufzählungszeichen dient ein Spiegelpunkt (engl. bullet). Fol gender Code erzeugt eine solche Liste: 1 2 3 4 5 6 7
<p>Folgende Orte w&uuml;rde ich gerne besuchen:</p> <ul> <li>London</li> <li>Paris</li> <li>Venedig</li> <li>Barcelona</li> </ul>
Codebeispiel 5: Eine Aufzählungsliste
Die Liste wird mit dem mit Start-Tag <ul> (für unordered list) eingeleitet. Dieser Tag ist ein Blockelement und erzeugt einen Absatz. Die einzelnen Listenelemente selbst werden mit <li> (list item) definiert. Der End-Tag </li> ist ebenfalls erforderlich. Die Listenelemente werden im Browser automatisch eingerückt dargestellt. Mit dem Attribut type können Sie das Erscheinungsbild des Listenpunkts verändern: <ul type="square"> Rechteck <ul type="circle"> Kreis <ul type="disc"> Spiegelpunkt (Standardeinstellung) Wenn type nicht definiert wird, wird automatisch disc benutzt.
44
Listen und Aufzählungen
Browserdarstellung:
5.2
Nummerierte Listen
Nummerierte Listen sind analog zu Aufzählungslisten aufgebaut, lediglich der Tag <ul> ändert sich in <ol> (ordered list): 1 2 3 4 5 6
<ol> <li>London</li> <li>Paris</li> <li>Venedig</li> <li>Barcelona</li> </ol>
Codebeispiel 6: Eine nummerierte Liste
Die Liste wird im Browser automatisch durchnummeriert. Die voreingestellte Nummerierung erfolgt mit mit arabischen Ziffern (1, 2, 3, 4 …). Sie kann jedoch mit dem type-Attribut geändert werden: <ol <ol <ol <ol
type="A"> A, B, C, D, E … type="a"> a, b, c, d, e … type="I"> römische Ziffern I, II, III, IV, V … type="i"> kleine römische Ziffern i, ii, iii, iv, v …
Mit dem Attribut start können Sie den Anfangswert für die Listennummerierung ändern: <ol start="6"> die Liste beginnt mit der Zahl 6. Sie können die Attribute type und start auch kombinieren: <ol start="6" type="a"> die Liste beginnt mit dem Buchstaben f. Sie können die Nummerierung auch innerhalb in der Liste wechseln. Notieren Sie dazu das Attribut value innerhalb des betreffenden li-Tags: 1 2 3 4 5
<ol> <li>Eintrag</li> <li>Eintrag</li> <li value="22">Eintrag</li> <li>Eintrag</li>
Definitionslisten 6 7
45
<li>Eintrag</li> </ol>
Codebeispiel 7: Ändern der Nummerierung innerhalb einer Liste
Verwechseln Sie nicht die Attribute start und value! start gehört in den ol-Tag und ändert den Anfangswert der Aufzählung, value gehört in den li-Tag und ändert den Wert innerhalb einer Liste. Listen und Listenelemente können mit Cascading Style Sheets weiter formatiert werden, sodass es z. B. möglich ist, damit Navigationsmenüs zu erstellen.
5.3
Definitionslisten
Definitionslisten gehen eine Stufe tiefer in der Hierarchie: Auf der ersten Ebene können Sie Hauptkate gorien aufzählen, denen Sie dann auf der zweiten Ebene Unterkategorien zuordnen können. Definiti onslisten verzichten auf Aufzählungszeichen, die Definitionen werden im Browser lediglich eingerückt dargestellt. Mit <dl> leiten Sie eine Definitionsliste ein. Danach folgt mit dem Tag <dt> der erste definition term, also die erste Hauptkategorie. Nun folgt eine beliebige Anzahl an definition data <dd>, bevor der näch ste <dt> genannt wird. 1 2 3 4 5 6 7 8 9 10 11 12
<dl> <dt>Musik</dt> <dd>Beethoven</dd> <dd>Mozart</dd> <dd>Debussy</dd> <dd>H&auml;ndel</dd> <dt>Filme</dt> <dd>Vom Winde verweht</dd> <dd>Der Herr der Ringe</dd> <dd>Der englische Patient</dd> <dd>Star Wars</dd> </dl>
Codebeispiel 8: Definitionsliste
5.4
Verschachtelte Listen
Alternativ zu Definitionslisten können Sie auch Punkt- oder nummerierte Listen ineinander verschach teln. Dazu erstellen Sie innerhalb eines li-Tags einfach eine komplette neue Liste. Denken Sie aber immer daran, jede Liste auch wieder zu schließen. 1 2 3 4 5 6 7 8 9 10
<ol> <li>Bücher</li> <li>Filme</li> <li>Musik <ol type="a"> <li>Beethoven</li> <li>Mozart</li> </ol> </li> </ol>
Codebeispiel 9: Verschachtelte Listen
f
46
Listen und Aufzählungen
Aufgaben zur Selbstkontrolle 1. 2. 3. 4.
Mit welchem Tag erzeugen Sie eine ungeordnete Liste? Wie können Sie den Anfangswert einer geordneten Liste ändern? Wie können Sie die Nummerierung innerhalb einer geordneten Liste ändern? Was bedeutet <ol type="a">?
Funktionsweise und Dateiformate
47
Einbinden von Bildern In dieser Lektion lernen Sie: hh wie Sie Pixelgrafiken in Ihr HTML-Dokument einbinden können. hh die Eigenschaften eingebundener Pixelbilder kennen.
6.1
Funktionsweise und Dateiformate
Kaum eine moderne Website kommt heute noch ohne Bilder aus. Wie aber können wir Bilder in Web seiten integrieren, wo wir doch wissen, dass eine HTML-Seite nur aus Text bestehen kann? Das Prinzip ist denkbar einfach: Die Bilddateien sind nicht integraler Bestandteil der HTML-Datei, wie Sie das vielleicht von Office-Programmen her kennen, sondern werden separat als eigenständige Dateien auf dem Webserver abgelegt. Die HTML-Seite selbst enthält lediglich einen Verweis auf den Speicherort der Bilddatei in Form eines HTML-Tags. Der Browser lädt dann die Bilddatei an der Stelle in die Seite, an der der Verweis im Quellcode steht. Auf ganz ähnliche Weise funktioniert übrigens die Einbindung von Grafiken in DTP- und Satzprogrammen für die Druckvorstufe. Sie können in HTML-Seiten standardmäßig ausschließlich Pixelbilder einbinden. Die Darstellung ande rer Formate, wie etwa Vektorgrafiken, funktioniert nach einem anderen Prinzip, da hier die Besucher Ihrer Website ein entsprechendes Browser-Plugin benötigen. Die Pixelbilder müssen im RGB-Farbraum, in Graustufen oder indizierten Farben vorliegen. Geeignete Dateiformate für das Einbinden von Pixelbildern in Webseiten sind JPEG, GIF und PNG. Andere Pixelformate, wie etwa TIFF, werden nicht unterstützt. Das PNG-Format hat hier allerdings eine Sonderstellung: Zwar eignet es sich hervorragend für die Darstellung von Transparenzen, jedoch wird dieses Feature vom Internet Explorer bis einschließlich Version 6.x nicht unterstützt, was dazu geführt hat, dass dieses Format in der Praxis nur sehr selten verwendet wird. Folgende Tabelle zeigt, für welchen Verwendungszweck sich welches der drei Dateiformate am ehesten eignet:
48
Einbinden von Bildern
Kompression
Farbe
JPEG
GIF
PNG
sehr hohe Kompression, daher sehr kleine Dateien möglich, allerdings auf Kosten der Bild qualität
gute Kompression durch Entfernen nicht benötigter Farbinformationen. Das Entfernen zuvieler Farben führt allerdings zu Qualitätsverlusten und unerwünschten optischen Effekten wie Dithering (Streuraster) bzw. Banding (Streifenbildung)
verlustfreie Kompres sion, daher nicht so effizient wie JPEG (größere Dateien), aber exzellente Bildqualität
unterstützt den vollen RGB-Farbraum, daher am besten geeignet für Fotos und andere Bilder mit vielen Farb übergängen
unterstützt nur eine Untermenge des RGBFarbraums von max. 256 Farben (indizierte Far ben), daher am ehesten geeignet für Grafiken mit wenigen, vollflächigen Farben wie etwa Firmen logos oder Diagramme
unterstützt wie JPEG den vollen RGB-Farbraum (PNG-24), daher gut geeignet für Fotos und andere Bilder mit vielen Farbübergängen. Es ist jedoch auch eine Farb reduktion wie bei GIF möglich (PNG-8) unterstützt volle 8-BitTransparenzen (AlphaTransparenzen), die jedoch vom IE 6 nicht dargestellt werden kön nen
Transparenzen
–
unterstützt 1-Bit-Transpa renzen
Weitere Beson derheiten
–
einziges Pixelformat, mit dem (einfache) Anima tionen möglich sind
–
Tabelle 7: Eigenschaften der drei Grafikformate für Webseiten.
Denken Sie bitte bei der Verwendung von Bildern daran, dass große Dateien lange Ladezeiten verursa chen. Binden Sie deshalb nicht zu viele Grafiken ein und optimieren Sie sie vorher in einen Bildbearbei tungsprogramm wie Photoshop, ImageReady, Fireworks o. ä. Die Standardauflösung für die Darstellung von Pixelbildern auf dem Bildschirm – und damit auch auf Webseiten – beträgt 72 dpi. Höhere Auflösungen führen hier zu keinerlei Qualitätsverbesserung.
6.2
Referenzierung
Eine Pixelgrafik wird auf folgende Weise eingebunden: <img src="url" /> Der img-Tag ist ein Standalone-Tag und muss mit dem Schrägstrich in sich selbst geschlossen werden. Das Attribut src (engl. source, Quelle) müssen Sie zwingend angeben, da der Browser ja sonst nicht weiß, welche Grafik angezeigt werden soll J.
Referenzierung
6.2.1
49
Relative Pfadangaben
Referenzierung von Grafiken im selben Verzeichnis Sofern die Bilddatei im selben Ordner wie die HTML-Seite liegt, notieren Sie für url einfach den Namen der Bilddatei inkl. Dateiendung, also z. B. <img src="meinBild.jpg" /> Der Browser platziert die Grafik an der Stelle auf der Seite, an der die Referenz im XHTML-Code steht. Beispiel 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.W3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Einbindung von Bildern</title> 5 </head> 6 <body> 7 <h1>Nicolas Poussin (1594 - 1665)</h1> 8 <p>Werke von Poussin:</p> 9 <img src="arcadia.jpg" /> 10 <p>&raquo;Et in Arcadia ego&laquo;, ca. 1640</p> 11 </body> 12 </html> Codebeispiel 10: Einbindung einer Grafik in den Fließtext einer HTML-Seite
Browserdarstellung:
Nicolas Poussin (1594 - 1665) Werke von Poussin:
»Et in Arcadia ego«, ca. 1640
Auch bei der Benennung von Grafiken gelten natürlich dieselben Regeln wie für HTML-Seiten: Keine Leer- und Sonderzeichen, und es wird zwischen Groß- und Kleinschreibung unterschieden.
f
50
Einbinden von Bildern
Referenzierung von Grafiken in Unterverzeichnissen Obiges Beispiel verweist auf eine Bilddatei, die sich auf dem Webserver im selben Verzeichnis wie die HTML-Seite befindet, in der sie angezeigt werden soll. Sie können natürlich auch Dateien aus anderen Verzeichnissen (oder sogar auf anderen Webservern) referenzieren. Wenn Sie eine Grafik einbinden wollen, die in einem Unterverzeichnis liegt, müssen Sie den Verzeichnisnamen mit angeben. Dies geschieht über Pfadangaben nach dem Unix-Standard (auch wenn es sich bei Ihrem Webserver nicht um einen Unix- sondern etwa um einen Windows-Server handelt): <img src="verzeichnisname/dateinname" /> Diese Art der Referenzierung bezeichnet man als relative Pfadangabe, da der Pfad immer ausgehend vom Speicherort der HTML-Datei angegeben wird, von der aus die Referenzierung erfolgt. Beispiel Auf der Startseite index.html soll ein Bild mit dem Namen grafik.jpg angezeigt werden, das sich im Ordner bilder befindet. Dieser Ordner liegt auf der gleichen Ebene wie die betreffende HTML-Seite:
Der Quellcode muss folgendermaßen aussehen: <img src="bilder/grafik.jpg" /> Befindet sich die Grafik in mehreren Unterordnern, so müssen Sie natürlich sämtliche Verzeichnisnamen angeben, z. B. <img src="bilder/fotos/urlaub/grafik.jpg" />
Referenzierung von Grafiken in höheren Verzeichnisebenen Liegt die Grafik jedoch im Ordner darüber, so lautet die Referenz: <img src="../dateinname" /> Mit dem Unix-Kürzel ../ wechseln Sie ein Verzeichnis nach oben. Beispiel Nun liegt die HTML-Seite, in der die Grafik erscheinen soll, ihrerseits in einem Ordner namens seiten. Das Bild grafik.jpg befindet sich eine Verzeichnisebene darüber neben dem Ordner seiten:
Im Quellcode der Datei seite.html muss folgendes notiert werden:
Referenzierung
51
<img src="../grafik.jpg" /> Der Name des Ordners seiten erscheint hier nicht im Quellcode! Liegt die Bilddatei mehrere Verzeichnisebenen über der HTML-Seite, müssen Sie auch hier das Kürzel so oft wiederholen, wie Sie Verzeichnisse wechseln wollen, also z. B.: <img src="../../../grafik.jpg" />
Übung 4 Wie muss der korrekte Quellcode für folgende Referenzieung aussehen?
6.2.2
Absolute Pfadangaben
Anstelle der o. g. relativen Pfadangaben können Sie auch absolute Pfadangaben verwenden. Diese gehen immer vom Stammverzeichnis Ihres Webservers aus (dort, wo auch Ihre index.html liegt), unab hängig davon, in welchem Unterverzeichnis sich die HTML-Datei befindet, von der aus die Referenzie rung erfolgt. Setzen Sie dazu einfach einen nach vorne gerichteten Schrägstrich / (engl. forward slash) vor die Pfadangabe: <img src="/bilder/grafik.jpg" /> <img src="/bilder/fotos/urlaub/grafik.jpg" /> In diesem Fall spielt der tatsächliche Speicherort der HTML-Datei, in der das Bild angezeigt werden soll, keine Rolle (sofern sie sich nur auf demselben Server befindet). Ausgangspunkt der Referenzierung ist immer das Stammverzeichnis des Webservers. Ein Nachteil dieser Methode ist jedoch, dass diese Art der Referenzierung nur im Web funktioniert, nicht aber beim Erstellen und Testen der Seiten auf Ihrem lokalen System, da hier das Stammverzeichnis Ihre lokale Festplatte ist (C:\\ unter Windows) und nicht der Ordner, in dem sich Ihr Projekt befindet.
Referenzierung von Grafiken auf anderen Webservern Bei der Referenzierung von Grafiken, die auf einem anderen WWW-Server liegen, müssen Sie natürlich absolute Pfade angeben, und zwar die komplette Internetadresse inklusive aller Verzeichnisnamen (die Sie natürlich kennen müssen), z. B. <img src="http://www.webmasters-europe.org/bilder/fotos/team.jpg" /> Bedenken Sie bei der Einbindung solcher externer Grafiken jedoch folgendes: hh Sie verursachen zusätzliche Netzlast. hh Das Benutzen der Grafik stellt u. U. eine Urheberrechtsverletzung dar. hh Der Link kann unerwartet brechen, wenn die Grafik umbenannt oder gelöscht wird.
f
52
Einbinden von Bildern
Die Referenzierung von Grafiken, die auf anderen Servern liegen, sollte daher die absolute Ausnahme bleiben!
6.3
Größenangaben
Wenn Sie bei der Einbindung einer Grafik keine Angaben zu ihrer Größe machen, wird sie in Original größe dargestellt. Allerdings erst dann, wenn Sie vollständig geladen wurde. Dies kann den unschönen Effekt nach sich ziehen, dass Text, der bereits angezeigt wurde, nach dem Laden der Grafik erneut umbricht und dadurch den Lesefluss des Besuchers unterbricht. Der Browser sollte daher immer von vornherein wissen, wie groß die Grafik ist, um bereits beim Laden der Seite den dafür notwendigen Raum zu reservieren. Geben Sie deshalb Breite und Höhe Ihrer Bilder mit Hilfe der Attribute width (Breite) und height (Höhe) im img-Tag an. (Die Reihenfolge der Attribute spielt wie immer keine Rolle.) Die Werte sind Pixelwerte. <img src="grafik.jpg" height="110" width="250" /> Mit diesen Attributen ist es natürlich auch möglich, die Darstellungsgröße der Grafik zu beeinflussen. Geben Sie aber nach Möglichkeit immer die tatsächliche Größe des Bildes an. In HTML »künstlich« ska lierte oder verzerrte Bilder wirken pixelig und äußest unprofessionell, zudem haben per HTML verklei nerte Grafiken natürlich immer noch dieselbe Dateigröße und benötigen viel mehr Ladezeit als nötig. Ändern Sie die Bildgröße daher immer physikalisch in Photoshop. Eine Ausnahme von dieser Regel müssen Sie allerdings dann machen, wenn Ihr Layout vorschreibt, dass Grafiken bei einer Größenänderung des Browserfensters mitskalieren sollen. Geben Sie in diesem Fall den entsprechenden Wert für width in Prozent an, den Wert für height lassen Sie weg, z. B. <img src="grafik.jpg" width="30%" />
6.4
Ränder
Sie können auch festlegen, ob Ihre Grafik eine sichtbare Kontur haben soll oder nicht. Dazu notieren Sie in der Grafikreferenz das Attribut border. Die Konturstärke geben Sie in Pixeln an. <img src="grafik.jpg" height="110" width="250" border="1" /> Im Normalfall werden Sie Ihren Bildern jedoch keine Kontur zuweisen. Das Attribut border sollten Sie aber dennoch benutzen und den Wert auf 0 setzen. Warum, werden Sie fragen, wo die Kontur doch ohnehin nicht angezeigt wird? Dies gilt jedoch nur, solange die Grafik nicht als Hyperlink fungiert. Sobald eine Grafik als anklickbarer Link definiert ist, wird sie von allen aktuellen Browsern umrandet dargestellt, sofern im img-Tag das Attribut für border fehlt, und das kann Ihr Design u. U. empfindlich stören.
6.5
Alternativtext und Tooltips
Es kann aus den unterschiedlichsten Gründen passieren, dass Ihre Bilder im Browser nicht angezeigt werden (z. B. wenn der Besucher Ihrer Seite die Darstellung von Bildern in seinem Browser deaktiviert hat). Für solche Fälle haben Sie die Möglichkeit, mit einem weiteren Attribut des img-Tags einen Alter nativtext anzugeben, der nur dann angezeigt wird, wenn die Grafik selbst nicht dargestellt wird. Der Alternativtext sollte eine kurze Beschreibung des Bildes beinhalten: <img src="grafik.jpg" alt="Kurzbeschreibung des Bildes" /> Bei größeren Grafiken, bei denen der Ladevorgang etwas länger dauert, wird auch während dieses Vor gangs der Alternativtext angezeigt. So kann sich der Anwender über den Inhalt informieren, schon bevor die Grafik erscheint.
Hintergrundgrafiken
53
Vor allem aber ist der Alternativtext wichtig im Zusammenhang mit der Barrierefreiheit Ihrer Website: Sehbehinderte Webseitenbesucher lassen sich den Inhalt der Seiten i. d. R. von sog. ScreenreaderSoftware vorlesen. Diese Screenreader erkennen den alt-Text der Grafiken und können dadurch dem Zuhörer mitteilen, was auf Ihrer Seite zu sehen ist. Deshalb ist das alt-Attribut vom W3C mittlerweile als Pflichtattribut eingestuft worden und darf in keinem img-Tag mehr fehlen. Ein weiterer Vorteil von Alternativtexten ist die Tatsache, dass sie – sinnvoll eingesetzt – das Ranking Ihrer Site in Suchmaschinen wie Google positiv beeinflussen können. Verwechseln Sie den alt-Text jedoch nicht mit den sog. Tooltips – den kleinen gelben Textfeldern, die angezeigt werden, wenn man die Maus über ein Objekt bewegt. Der Internet Explorer zeigt Alternativ texte von Bildern zwar als Tooltips an, dies entspricht jedoch nicht dem Standard und funktioniert daher in anderen Browsern nicht. Tooltips für Grafiken oder andere Elemente werden mit einem anderen Attribut erzeugt, nämlich dem Attribut title, das Sie bei Bildern zusätzlich zum alt-Text notieren können. alt- und title-Attribut müssen nicht zwingend identisch sein: <img src="grafik.jpg" alt="Kurzbeschreibung" title="Andere Beschreibung" /> Das title-Attribut ist ein Universalattribut und kann in nahezu allen Tags verwendet werden, hier z. B. in einem Hyperlink: <a href="http://www.google.de" title="Hier gehts zu Google!">Google</a>
6.6
Hintergrundgrafiken
Sie können Grafiken, anstatt sie im Fließtext anzuzeigen, auch als Rapportmuster (Hintergrundkachel, engl. tile, ähnlich dem »Desktop-Wallpaper« Ihres Betriebssystems) definieren. In diesem Fall liegt das Bild hinter allen anderen Elementen (Texten und Bildern) auf Ihrer Seite und wird automatisch wieder holt (gekachelt), sobald das Browserfenster größer ist als die Grafik (was normalerweise der Fall ist). Für Hintergrundbilder gibt es keinen eigenen Tag, sondern sie werden als Attribut background im bodyTag des Dokuments selbst notiert: <body background="hintergrundbild.gif"> Bedenken Sie jedoch, dass Hintergrundbilder sehr schnell die Lesbarkeit des Textes beeinträchtigen und in vielen Fällen unprofessionell wirken können. Wesentlich umfangreichere Optionen zu Hinter grundgrafiken erhalten Sie mit Hilfe von CSS.
Aufgaben zur Selbstkontrolle 1. 2. 3. 4. 5. 6. 7. 8. 9.
Welche Dateiformate eignen sich zur Einbindung von Bildern in HTML-Seiten? Wie referenzieren Sie eine Grafik, die im selben Ordner wie die HTML-Datei liegt? Wie referenzieren Sie eine Grafik, die in einem Unterordner namens media liegt? Was ist der Unterschied zwischen einer relativen und einer absoluten Pfadangabe? Wie erzeugen Sie eine Kontur um eine Grafik? Warum muss bei der Einbindung einer Grafik immer das Attribut alt verwendet werden? Was ist zu beachten, wenn Sie einer Grafik die Attribute height und width zuweisen? Wie binden Sie eine Hintergrundgrafik in Ihre HTML-Seite ein? Wie erzeugen Sie Tooltips für Grafiken?
54
Hyperlinks
Hyperlinks In dieser Lektion lernen Sie: hh hh hh hh
wie man Texte und Grafiken als Hyperlinks definiert. was relative und absolute Pfade sind. wie Sie zu bestimmten Stellen auf einer Seite verweisen können. wie man nur Teile von Grafiken verlinkt.
Nachdem Sie nun bereits mehrere XHTML-Dokumente erstellt haben, ist der nächste Schritt, diese untereinander und mit der großen weiten Welt zu verlinken. Die Möglichkeit, Text- oder Bildelemente mit einem Verweis auf beliebige andere Dokumente zu versehen, ist die eigentliche Stärke von HTML. Dabei ist es völlig unerheblich, ob die verlinkten Dokumente auf dem eigenen Webserver oder am anderen Ende der Welt liegen.
7.1
Einen Hyperlink definieren
Sie können sowohl einen Textbereich als auch eine Grafik als Hyperlink definieren. Die Vorgehensweise ist dabei völlig identisch. Sie verwenden dafür den Tag a (anchor, engl. Anker), mit dem Sie den Bereich oder das Element umschließen, das Sie als Link definieren möchten: <a>Textlink</a> <a><img src="buttongrafik.gif" /></a> Momentan passiert beim Klicken auf den Hyperlink allerdings noch herzlich wenig. Schließlich müssen Sie erst noch definieren, wohin Sie der Link bringen soll. Dafür gibt es das Attribut href (engl. hyper reference): <a href="url">Textlink</a> <a href="url"><img src="buttongrafik.gif" /></a> url steht dabei für jede gültige Internetadresse. Das Element innerhalb des Anchor-Tagpaares wird nun als Hyperlink dargestellt, d. h. hh Text erscheint standardmäßig unterstrichen und in blauer Farbe auf dem Bildschirm hh Bilder erhalten eine blaue Kontur (beides lässt sich natürlich ändern)
G
Bewegt der Anwender den Mauszeiger über das Element, verwandelt sich dieser in einen Finger . Beim Klicken auf den Link wird die im href-Attribut definierte Zielseite (normalerweise wieder eine HTML-Seite) im Browserfenster angezeigt. Das Prinzip der Referenzierung im href-Attribut ist dasselbe, das Sie auch bei der Referenzierung von Grafiken anwenden. Sie können also sowohl relative als auch absolute Pfadangaben verwenden. Dabei gilt grundsätzlich die Unix-Syntax für Verzeichniswechsel, unabhängig vom Betriebssystem, auf dem der Webserver läuft.
Einen Hyperlink definieren
55
Wenn Sie ein Bild als Hyperlink definieren, verwechseln Sie nicht die Grafikreferenz mit dem Link! Die Pfadangabe im src-Attribut des img-Tags dient zur Einbindung des Bildes auf der Seite, während die URL im href-Attribut des umschließenden a-Tags definiert, welche Adresse bei einem Klick auf das Bild aufgerufen werden soll.
7.1.1
Relative Pfadangaben
Wenn Sie die einzelnen Seiten Ihrer Website untereinander verlinken wollen (man spricht hier auch von internen Links), benutzen Sie normalerweise – wie bei der Referenzierung von Bildern – relative Pfadan gaben, ausgehend vom Speicherort des Quelldokuments. Im einfachsten Fall verweisen Sie auf ein wei teres HTML-Dokument, das sich im selben Ordner wie das Quelldokument befindet: Beispiel 1 <a href="index.html">Zur&uuml;ck zur Startseite</a> Befindet sich das Zieldokument in einem Unterordner (z. B. im Ordner produkte), sieht der Link folgen dermaßen aus: Beispiel 2 <a href="produkte/digitalkameras.html">Digitalkameras</a> Links auf Dokumente, die sich eine Verzeichnisebene über dem Quelldokument befinden, werden fol gendermaßen angegeben: Beispiel 3 <a href="../index.html">Zur&uuml;ck zur Startseite</a> Als allgemeine Regel für relative Pfadangaben gilt also: hh um eine Ebene nach unten zu gelangen, geben Sie einfach den Ordnernamen an. hh mit ../ springen Sie in der Ordnerhierarchie eine Ebene nach oben, mit ../../ zwei Ebenen usw. Lassen Sie uns das anhand der (imaginären) Website der (ebenso imaginären) Fa. Verstehnix GmbH & Co. KG ausprobieren, die u. a. Internet-Schulungen anbietet:
Übung 5 Folgende Abbildung zeigt die Verzeichnisstruktur der Website von Verstehnix GmbH & Co. KG:
f
56
Hyperlinks
Das Verzeichnis WWW-Server-Root ist das Stammverzeichnis des Webservers und enthält die Datei index.html. Im Root-Ordner befinden sich zwei weitere Ordner, broschueren und formulare. Im Ordner formulare liegt ein Ordner kurse, in dem es ein Dokument kurse_allgemein.html gibt, sowie einen weiteren Ordner HTML mit dem Dokument htmlanmeld.html. Definieren Sie folgende Links: 1.
einen Link von index.html auf kurse_allgemein.html
2.
einen Link von kurse_allgemein.html auf htmlanmeld.html
3.
einen Link von kurse_allgemein.html auf index.html
4. einen Link von htmlanmeld.html auf werbebrosch.html
7.1.2
Absolute Pfadangaben
Interne Links In manchen Situationen (z. B. beim Einsatz von Skriptsprachen oder lokalen Suchmaschinen) kann es nötig sein, absolute Pfadangaben zu verwenden.
f
Absolute Pfadangaben funktionieren nur, wenn Sie über den Webserver aufgerufen werden, nicht jedoch, wenn Sie die Dateien lokal von der Festplatte Ihres Computers betrachten. Wie unter Unix üblich, beginnen absolute Pfade stets mit dem nach vorne gerichteten Schrägstrich / (forward slash). Damit befinden Sie sich im Root-Verzeichnis des Webservers und rufen von dort einfach den vollständigen Pfad der Zieldatei auf. Sowohl für das obige Beispiel 1 als auch für Beispiel 3 würde der absolute Pfad also lauten: <a href="/index.html">Zur&uuml;ck zur Startseite</a> Für Beispiel 2 müssten Sie folgendes notieren: <a href="/produkte/digitalkameras.html">Digitalkameras</a>
Externe Links Natürlich sind Sie mit Ihren Verweisen nicht auf interne Links beschränkt, Sie können jede beliebige Webseite, die sich auf irgendeinem Webserver der Erde befindet, referenzieren. Dazu müssen Sie nur die richtige URL angeben, die eindeutige Adresse einer Datei im Internet. Beispiel <a href="http://www.webmasters-europe.org"> Link zu Webmasters Europe </a> Wichtig dabei ist, dass Sie das Protokoll angeben (meist http://). Beachten Sie, dass in diesem Beispiel kein Dateiname angegeben ist. Webserver sind im allgemeinen so konfiguriert, dass sie im Stammver zeichnis des angegebenen Webservers nach einer Datei index.html suchen, sofern nicht explizit ein Dateiname angegeben wurde. Wenn Sie jedoch auf eine bestimmte Unterseite eines fremden Webangebots verlinken möchten, benötigen Sie natürlich absolute Pfadangaben: den Namen der Zieldatei inklusive aller Verzeichnisnamen:
Einen Hyperlink definieren
57
<a href="http://info.med.yale.edu/caim/manual/contents.html">…</a> verweist auf die Datei contents.html in den Verzeichnissen /caim/manual auf der Website info.med.yale. edu.
7.1.3
Zielfenster definieren
Standardmäßig werden Links im selben Browserfenster geöffnet, von dem aus Sie aufgerufen wurden. Sie können jedoch mit Hilfe des Attributs target="_blank" vorgeben, dass die Zielseite in einem neuen, leeren Browserfenster geöffnet wird (beachten Sie den Unterstrich vor blank). Die ursprüngliche Seite bleibt in diesem Fall hinter dem neuen Fenster erhalten, sodass der Anwender jederzeit wieder zu ihr zurückkehren kann. Dies ist vor allem dann sinnvoll, wenn Sie externe Links auf andere Websites verwenden, dabei aber sicherstellen wollen, dass der Besucher Ihr Webangebot nicht dauerhaft verlässt: <a href="http://www.google.de" target="_blank">Google</a> Es gibt noch andere Werte außer _blank, die Sie im Attribut target verwenden können. Diese sind jedoch nur sinnvoll im Zusammenhang mit Framesets und spielen deshalb an dieser Stelle keine Rolle.
7.1.4
Downloads
Sie sind beim Verlinken von Dateien natürlich nicht auf HTML-Dokumente beschränkt, sondern Sie kön nen – mit jeder der o. g. Methoden – theoretisch auf jeden beliebigen Datentyp verweisen und dadurch z. B. Dateien zum Download anbieten. Beispiel <a href="downloads/daten.zip">ZIP-Archiv herunterladen</a> <a href="/pdfs/text.pdf">PDF herunterladen</a> <a href="http://www.xyz.com/apps/prog.exe">Programm herunterladen</a> <a href="bilder/zeichnungen/grafik.jpg">Bild anzeigen</a> Wenn nicht anders angegeben, wird dabei automatisch das HTTP-Protokoll verwendet. Dadurch ist es jedoch den Browser- und den Systemeinstellungen des Clientrechners überlassen, ob die Datei im Browserfenster angezeigt oder auf die lokale Festplatte zur weiteren Bearbeitung heruntergeladen wird (viele Browser überlassen auch dem Benutzer die Wahl, was mit der Datei geschehen soll). Zwar werden ZIP-Dateien standardmäßig heruntergeladen und JPEG-Bilder im Browser angezeigt. Bei PDF-Dateien hingegen gibt es beide Möglichkeiten, abhängig davon, ob der Benutzer das Browser-Plugin zur Anzeige von PDF-Dateien installiert hat oder nicht. Eine Möglichkeit, diesen Konflikt zu vermeiden, bietet die Verwendung eines anderen Protokolls, in die sem Fall FTP. Wenn Sie sicherstellen möchten, dass eine Datei, die Sie zum Download anbieten, auf jeden Fall lokal heruntergeladen und nicht im Browser angezeigt wird, verlinken Sie sie über das FTPProtokoll (Voraussetzung hierfür ist natürlich, dass ein entsprechend konfigurierter FTP-Server vorhan den ist). Alle gängigen Webbrowser beherrschen neben HTTP auch das FTP-Protokoll, sodass sie auch Dateien von FTP-Servern herunterladen können – eine Anzeige im Browserfenster ist mit diesem Proto koll nicht möglich. <a href="ftp://www.webmasters-europe.org/pdfs/text.pdf"> PDF herunterladen </a> Bei einem Protokollwechsel müssen Sie natürlich immer die komplette URL angeben.
58
7.1.5
Hyperlinks
Links mit anderen Protokollen
Der mailto-Link Wenn Sie den Besuchern Ihrer Website die Möglichkeit geben wollen, mit Ihnen per E-Mail in Kontakt zu treten, können Sie einen speziellen Verweis definieren, der das voreingestellte E-Mail-Programm des Anwenders öffnet und bereits die angegebene E-Mail-Adresse als Empfänger einträgt: Verantwortlich f&uuml;r diese Seiten ist der <a href="mailto:webmaster@webmasters-europe.org">Webmaster</a>. Beachten Sie, dass hier nach dem Doppelpunkt keine Schrägstriche folgen! Auch die Betreffzeile und sogar der E-Mail-Text selbst können vorgegeben werden: <a href="mailto:name@url.com?subject=Betreff&body=Text"> E-Mail senden </a>
f
Beachten Sie jedoch, dass der Anwender in diesem Fall über einen fertig konfigurierten E-Mail-Client verfügen muss. Ist dies nicht der Fall, erhält er eine Fehlermeldung und hat keine Möglichkeit, mit Ihnen in Kontakt zu treten. Vermeiden Sie deshalb den mailto-Link und benutzen stattdessen ein in Ihre Website integriertes Kontaktformular.
Link zu einer Newsgroup Sie können auch auf eine Newsgroup im USENET verweisen: <a href="news:rec.humor.funny">Zur Newsgroup rec.humor.funny</a> Auch News-Links funktionieren jedoch nur, wenn der Besucher Ihrer Site einen Newsreader installiert und konfiguriert hat.
7.2
Links zu bestimmten Stellen einer Webseite
Sie können mit dem a-Tag nicht nur Links auf andere Seiten definieren, sondern auch zu bestimmten Textstellen auf derselben oder einer anderen Seite springen. Dies ist z. B. dann sinnvoll, wenn Sie eine Liste häufig gestellter Fragen (FAQ) auf Ihrer Webseite anbieten: Beim Klick auf eine Frage springt der Browser direkt zu der Stelle auf der Seite, an der sich die entsprechende Antwort befindet. Auch die oft verwendeten Links zurück zum Seitenanfang werden auf diese Weise realisiert. Ein solcher Link besteht aus zwei Teilen: hh einer unsichtbaren Markierung an der Stelle, an die gesprungen werden soll hh einem (sichtbaren) Link, der zu dieser Markierung führt Auch die Zielmarkierung – der sogenannte Anker – wird mit dem a-Tag realisiert, lediglich das Attribut href wird durch das Attribut name ersetzt: <a name="meineMarkierung"></a> Als name benutzen Sie einen frei wählbaren Begriff. Dieser darf jedoch keine Leer- oder Sonderzeichen enthalten, und es ist ratsam, auf Groß- und Kleinschreibung zu achten. Beachten Sie, dass der Name eindeutig sein muß und nur einmal im Dokument vorkommen darf.
Links zu bestimmten Stellen einer Webseite
59
In XHTML soll das Attribut name mittelfristig durch id ersetzt werden. Deshalb sollten Sie aus Kompatibilitätsgründen momentan beide Attribute mit den identischen Werten benutzen. Ein Browser, der den Verweis nach XHTML-Syntax ausführen will, benötigt das id-Attribut, während ein Browser, der den Verweis nach HTML-Syntax ausführt, das name-Attribut zur Ermittlung des Ankers verwendet: <a name="meineMarkierung" id="meineMarkierung"></a> Da der Anwender diese Markierung im Normalfall nicht sehen soll, ist es im Prinzip nicht notwendig, einen bestimmten Bereich (Text oder Bilder) damit zu umschließen, sondern Sie können den Bereich zwischen <a> und </a> leer lassen. Nach der XHTML-Spezifikation muß allerdings zwischen <a> und </a> strenggenommen mindestens ein Zeichen stehen – dies kann auch ein Leerzeichen sein. Das Zei chen wird in diesem Fall natürlich nicht unterstrichen dargestellt.
7.2.1
Links zu einer Textstelle auf einer anderen Seite
Nehmen wir an, Sie wollen von der Seite fragen.html zu einer bestimmten Textstelle auf der Seite antworten.html verweisen. Dazu müssen Sie an der gewünschten Stelle auf der Seite antworten.html einen Anker setzen: <a name="antwort1" id="antwort1"> </a>Dies ist die erste Antwort. Auf fragen.html setzen Sie den Link wie folgt: <a href="antworten.html#antwort1">Dies ist Frage 1.</a>
Abb. 6: Setzen eines Links auf einen Anker, der sich auf einer anderen HTML-Seite befindet
Der Name der Zielmarkierung (Anker) wird also einfach an die URL angehängt. Wichtig dabei ist die Raute #, die den Namen von der URL trennt und ihn als solchen kennzeichnet. Zwischen URL und Raute dürfen allerdings keine Leerzeichen stehen! Die Raute wird uns noch in zahlreichen anderen Bereichen von XHTML zur Identifikation selbstdefinierter Namen begegnen. Bei einem Klick auf Frage 1 wird nun die Seite antworten.html im Browser aufgerufen und sofort die richtige Antwort angezeigt.
X
60
Hyperlinks
7.2.2
Links zu einer Textstelle auf derselben Seite
Wenn sich die Zielmarkierung auf der gleichen Seite wie der Link befindet, lassen Sie einfach die URL weg, z. B. <a href="#antwort1">Dies ist Frage 1.</a>
Abb. 7: Setzen eines Links auf einen Anker, der sich auf derselben HTML-Seite befindet
Übung 6 1.
Erstellen Sie lokal auf Ihrer Festplatte ein Verzeichnis mit dem Namen WWWRoot. Legen Sie in diesem Verzeichnis ein weiteres mit dem Namen Infos an. Erstellen Sie im Verzeichnis WWWRoot eine Datei mit dem Namen index.html und im Verzeichnis Infos eine Datei mit dem Namen info.html. Verlinken Sie diese Dateien miteinander, sodass Sie mit einem Klick von index.html auf info.html gelangen können und umgekehrt.
2.
Erstellen Sie in der Datei info.html einen externen Link zur Homepage des W3C (www.w3.org).
3.
Erstellen Sie in der Datei info.html einen Link an Ihre E-Mail-Adresse.
4. Erstellen Sie eine weitere Seite mit dem Namen linkseite.html im Ordner Infos und fügen dort mehrere Textzeilen ein. Setzen Sie nun einen Anker am Textende, den Sie mit der Seite info.html und index.html entsprechend verlinken.
7.3
Imagemaps
Stellen Sie sich vor, Ihr Auftrag ist es, auf der Website eines Unternehmens ein Gruppenfoto zu platzie ren, auf dem alle Kundenberater abgebildet sind. Jeder dieser Kundenberater soll einzeln anklickbar sein, um dessen persönliche Kontaktdaten angezeigt zu bekommen. Mit unserer bisherigen Methode, einen Hyperlink um den entsprechenden img-Tag zu legen, kommen wir hier nicht weiter, da damit nur das komplette Foto verlinkt werden kann. Eine weitere Möglichkeit wäre natürlich, das Foto in einem Bildbearbeitungsprogramm zu zerschneiden (slicing), die Einzelteile als separate Dateien zu speichern und in HTML wieder zusammenzusetzen. Dadurch könnte man jede Teilgrafik einzeln verlinken. Diese Methode erfordert allerdings den Einsatz von Tabellen, die wir uns erst später näher ansehen werden.
Imagemaps
61
Eine elegantere und exaktere Methode bieten sogenannte Imagemaps. Mit ihrer Hilfe können Sie meh reren – auch unförmigen – Bereichen innerhalb eines Bildes verschiedene Hyperlinks zuweisen, indem Sie eine (für den Anwender unsichtbare) »Landkarte« (engl. map) über das Bild legen, die die aktiven Bereiche kennzeichnet. Für die Definition dieser Bereiche in HTML müssen Sie die genauen Koordinaten innerhalb eines Bildes angeben, in denen der Verweis liegt (in der Praxis können Ihnen dabei Grafik programme und HTML-Editoren helfen). Die Definition einer Imagemap besteht aus einer Kombination zweier zusammengehöriger Tags: <map> und <area />. <map> leitet die Definition einer Imagemap ein. Sie kann an jeder beliebigen Stelle im Body des Dokuments stehen und ist im Browser nicht sichtbar. Hinter den Attributen name bzw. id (die Sie aufgrund der neuen Spezifikationen von XHTML 1.0 z. Z. simultan verwenden sollten) wird in Anführungszeichen ein frei wählbarer Name eingegeben, der die Imagemap eindeutig kennzeichnet: <map name="gruppenbild" id="gruppenbild"></map> Innerhalb des map-Tagpaares definieren Sie die einzelnen verweissensitiven Flächen Ihrer Grafik mit Hilfe des Standalone-Tags area. Für jeden Bereich, der anklickbar sein soll, benötigen Sie eine weitere area: <map name="gruppenbild" id="gruppenbild"> <area /> <area /> … </map> Bei der Definition der areas haben Sie die Wahl zwischen drei Grundformen, die Sie mit dem Pflichtattri but shape vorgeben: hh <area shape="rect" /> (Viereck) hh <area shape="circle" /> (Kreis) hh <area shape="poly" /> (Polygon, beliebiges Vieleck) Mit dem Attribut coords geben Sie die Koordinaten der verweissensitiven Flächen an. Die Angaben verstehen sich als absolute Pixelwerte innerhalb Ihrer Grafik und werden durch Kommata getrennt. Beim Ausmessen der Koordinaten kann Ihnen ein Bildbearbeitungsprogramm wie Photoshop behilflich sein, aber auch Bildschirmlineale wie z. B. Screen Ruler für Windows (www.microfox.com) oder Free Ruler für Mac (www.pascal.com/software/freeruler/), die es z. T. kostenlos zum Download gibt. Das Viereck (shape="rect") definieren Sie mit vier Koordinaten für x1, y1, x2, y2: x1 = linke obere Ecke, Anzahl Pixel von links y1 = linke obere Ecke, Anzahl Pixel von oben x2 = rechte untere Ecke, Anzahl Pixel von links y2 = rechte untere Ecke, Anzahl Pixel von oben Beispiel <area shape="rect" coords="10,12,120,80" /> Den Kreis (shape="circle") definieren Sie mit drei Koordinaten für x, y, r: x = Mittelpunkt des Kreises, Anzahl Pixel von links y = Mittelpunkt des Kreises, Anzahl Pixel von oben r = Radius des Kreises in Pixeln Beispiel <area shape="circle" coords="50,80,35" /> Das Polygon (shape="poly") definieren Sie mit der entsprechenden Anzahl Koordinaten für x1, y1, x2, y2 … xn, yn. Sie benötigen also für jede Ecke ein Koordinatenpaar x/y: x = Anzahl Pixel einer Ecke von links y = Anzahl Pixel einer Ecke von oben
62
Hyperlinks
Sie können beliebig viele Ecken definieren. Die Linie von der letzten zurück zur ersten Ecke, die das Polygon schließt, müssen Sie sich hinzudenken. Beispiel <area shape="poly" coords="147,285,148,250,125,246,83,244,78,241" /> Abschließend geben Sie in jeder area mit dem Attribut href an, auf welche Datei verwiesen werden soll. Wenn Sie alle Flächen definiert haben, schließen Sie die Definition mit </map> ab. <map name="gruppenbild" id="gruppenbild"> <area shape="rect" coords="10,12,120,80" href="meier.html" /> <area shape="circle" coords="50,80,35" href="mueller.html" /> <area shape="poly" coords="147,285,148, …" href="schmidt.html" /> </map> Wie bereits erwähnt kann die map-Definition an jeder beliebigen Stelle innerhalb des body-Bereiches Ihrer Datei stehen. Momentan steht sie noch in keinerlei Beziehung zur Grafik selbst, die Sie an anderer Stelle im Dokument mit Hilfe des img-Tags eingebunden haben: Wenn Sie Ihre Datei im Browser öffnen, sehen Sie noch keinerlei Veränderung an Ihrem Bild. Die Beziehung zwischen Grafik und Imagemap stellen Sie über ein Attribut im img-Tag her: <img src="gruppenfoto.jpg" alt="Gruppenfoto" usemap="#gruppenbild" /> Das Attribut usemap legt die an anderer Stelle definierte Imagemap gleichsam wie eine Schablone über das Bild. Als Wert geben Sie in Anführungszeichen den Namen Ihrer Imagemap ein. Vergessen Sie nicht die Raute, die hier wiederum kennzeichnet, dass es sich um einen selbstdefinierten Namen handelt. Im Browser ist nun zwar keine optische Veränderung an der Grafik sichtbar. Bewegen Sie jedoch den Mauszeiger darüber, erkennen Sie, dass die einzelnen Flächen anklickbar sind. Wenn Sie möchten, kön nen Sie nun noch Tooltips für die einzelnen Bereiche vergeben, um dem Anwender beim Überfahren mit der Maus anzuzeigen, wohin der Link ihn führt. Notieren Sie dazu in jeden area-Tag das Attribut title und vergeben Sie einen aussagekräftigen Text. Beispiel <area shape="rect" coords="10,12,120,80" href="meier.html" title="Kontaktdaten Herr Meier" /> Hier noch einmal die vollständige Definition einer Imagemap: 1 2 3 4 5 6 7 8 9
<!-- map-Definition – kann überall stehen --> <map name="gruppenbild" id="gruppenbild"> <area shape="rect" coords="10,12,120,80" href="meier.html" /> <area shape="circle" coords="50,80,35" href="mueller.html" /> <area shape="poly" coords="147,285,148,…" href="schmidt.html" /> </map> <!-- Hier kommt das Bild, von dem aus auf die imagemap verwiesen wird --> <img src="gruppenfoto.jpg" alt="Gruppenfoto" usemap="#gruppenbild" />
Codebeispiel 11: Vollständige Definition einer Imagemap und der dazugehörigen Grafik
Neben diesen »clientseitigen« Imagemaps gibt es auch »serverseitige« Imagemaps. Bei diesen ist eine Kommunikation zwischen Browser und Server notwendig (es werden Daten an den Server geschickt und dort von einem CGI-Programm verarbeitet). Da dies die Netzlast erhöht (und überdies eine recht umständliche Vorgehensweise ist), rät das W3C davon ab.
Imagemaps
63
Übung 7 Erzeugen Sie eine Imagemap für folgende Grafik (buttons.gif), sodass alle drei Buttons separat verlinkt werden können.
Aufgaben zur Selbstkontrolle 1. 2. 3. 4. 5.
Was ist ein interner Link? Warum funktionieren absolute Links nicht beim Testen auf der lokalen Festplatte? Wie können Sie bewirken, dass sich ein Link in einem neuen Browserfenster öffnet? Welche Tags benötigen Sie, wenn Sie auf eine bestimmte Textstelle einer anderen HTML-Seite ver weisen wollen, und wo werden diese Tags notiert? Welche area shape nutzen Sie in einer Imagemap, wenn Sie ein Dreieck erzeugen wollen?
64
Die Verwendung von Farben
Die Verwendung von Farben In dieser Lektion lernen Sie: hh Wissenswertes über Farbräume. hh wie man Farben in HTML mit der hexadezimalen Farbkodierung definiert. hh was websichere Farben sind.
Abgesehen von eingebundenen Grafiken waren unsere HTML-Dokumente bislang noch recht mono ton. Das soll sich nun ändern: HTML erlaubt es, Farben für Text, Hintergrund usw. frei zu definieren. Um es jedoch gleich vorweg zu sagen: Die Zuweisung von Farben in HTML entspricht nicht dem ein gangs erwähnten Konzept der Trennung zwischen Inhalt und Formatierung. Sie sollten es deshalb in der Praxis vermeiden, Farbdefinitionen in HTML vorzunehmen, sondern stattdessen auf die Möglichkeiten von CSS zurückgreifen. Wir wollen uns dieses Thema dennoch genauer ansehen, und zwar erstens, weil Sie natürlich trotzdem wissen müssen, wie Farbzuweisungen in HTML funktionieren, und zweitens, weil die HTML-typische Angabe der Farbwerte nach dem Hexadezimalsystem später in CSS nach demselben Prinzip funktioniert.
8.1
Das RGB-Farbmodell
Wenn Sie schon einmal mit einem Grafik- oder DTP-Programm gearbeitet haben, kennen Sie wahr scheinlich bereits das RGB-Farbmodell. Farben, die auf einem Bildschirm dargestellt werden, basieren allesamt auf diesem Farbmodell – gleich, ob es sich um einen Computermonitor oder einen Fernseher handelt: Alle Farbabstufungen werden durch die additive Mischung der drei Grundfarben Rot, Grün, und Blau (RGB) erzeugt. Durch Kombination unterschiedlicher Anteile dieser drei Farben (man spricht auch von drei »Farbkanä len«) lassen sich ca. 16,8 Mio. Farbabstufungen darstellen. Jeder Grundfarbe wird dabei ein Wert zwi schen 0 und 255 (seltener auch 100%) zugewiesen. Setzen Sie z. B. die Anteile für Rot und Grün jeweils auf 255 und für Blau auf 0, ergibt sich daraus die Farbe Gelb. Mischen Sie auf gleiche Weise Rot und Blau, ergibt sich Magenta. Alle drei Farben zusammen bei voller Deckkraft ergeben Weiß, das vollständige Fehlen aller drei Farben ergibt Schwarz. Alle Mischungsverhältnisse, bei denen alle drei Werte gleich sind, ergeben einen reinen Grauton mit dem entsprechenden Tonwert.
Abb. 8: RGB-Farben
Hexadezimale Farbkodierung
8.2
65
Hexadezimale Farbkodierung
Da auch Webseiten normalerweise am Computermonitor dargestellt werden, erfolgt die Definition der Farben ebenfalls im RGB-Farbraum – mit einem Unterschied: Die Farben werden nicht mit Dezimalwer ten zwischen 0 und 255 angegeben, sondern mit Hilfe der hexadezimalen Farbkodierung. Das Hexade zimalsystem verwendet die Zahlenbasis 16, die Werte werden mit Hilfe von Ziffern und Buchstaben definiert. Die folgende Tabelle zeigt, wie die Zahlen 0–25 des Dezimalsystems im Hexadezimalsystem repräsentiert werden: 0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
0
1
2
3
4
5
6
7
8
9
A
B
C
D
E
F
10
11
12
13
14
15
16
17
18
19
Statt der 10 geht es nach den ersten 9 Ziffern im Hexadezimalsystem also mit den Buchstaben A–F wei ter, dann folgen die Zahlen 10–19. Danach werden Ziffern und Buchstaben kombiniert (1A, 1B, 1C, 1D, 1E, 1F). Welchen Vorteil hat dieses System? Es spart Speicherplatz! Mit dem Dezimalsystem können mit zwei Ziffern nur maximal 100 mögliche Zustände (0–99) definiert werden, mit dem Hexadezimalsystem dagegen 256 – ein beträchtlicher Gewinn. 255 hat im Hexadezimalsystem den Wert FF, erst danach braucht man drei Stellen. Die Zuweisung von Farben nach dem Hexadezimalsystem geschieht in XHTML nach folgender allge meiner Syntax: #rrggbb Nach der Raute folgt der sechsstellige Hex-Wert der Farbe, wobei für jede der drei Grundfarben R, G und B zwei Stellen zur Verfügung stehen. Beispiele Um die Hintergrundfarbe eines Dokumentes gelb einzufärben, verwenden Sie im body-Tag das Attribut bgcolor mit dem entsprechenden Farbwert: <body bgcolor="#ffff00"> Dabei werden die Werte für Rot und Grün jeweils auf den Maximalwert 255 (= FF) gesetzt, der Wert für Blau auf 0 (= 00). Um die Hintergrundfarbe auf Weiß zu setzen notieren Sie <body bgcolor="#ffffff"> Alle drei Farben werden auf den maximalen Wert 255 eingestellt, also FF. Für Schwarz schreiben Sie <body bgcolor="#000000"> und für ein helles Grau z. B. <body bgcolor="#b4b4b4"> Es gibt in XHTML viele weitere Tags, die Farbattribute haben können. An passender Stelle wird darauf hingewiesen.
66
Die Verwendung von Farben
Benannte Farben Einige Farben können in HTML aber auch einfach mit ihrem Namen aufgerufen werden, z. B. <body bgcolor="red"> Insgesamt gibt es 16 solcher vordefinierter Farben (allerdings eignen sich diese eher selten für anspruchsvolle Designs, da die meisten von ihnen viel zu stark gesättigt sind – man fragt sich, wer diese Farben ausgesucht hat J): black = #000000, maroon = #800000, green = #008000, olive = #808000 navy = #000080, purple = #800080, teal = #008080, gray = #808080, silver = #c0c0c0, red = #ff0000, lime = #00ff00, yellow = #ffff00, blue = #0000ff, fuchsia = #ff00ff, aqua = #00ffff, white = #ffffff. Es ist jedoch generell besser, Farben nach dem Hexadezimalsystem zu definieren.
Dezimal-Hexadezimal-Konvertierung Wie aber gelangen Sie zu den gewünschten Hexadezimalwerten? In der Praxis helfen Ihnen natürlich Bildbearbeitungsprogramme und HTML-Editoren bei der Wahl des richtigen Farbwerts, sodass Sie sich um die Dezimal-Hexadezimal-Konvertierung nicht viel Gedanken zu machen brauchen. Es gibt jedoch Situationen, in denen Sie dennoch dezimale RGB-Werte in hexadezimale umrechnen müssen: Beispiel Sie haben in Ihrem bevorzugten Grafikprogramm ein Firmenlogo in einem dunklen Rot entwickelt, Sie kennen aber nur den dezimalen RGB-Wert dieser Farbe: R = 174, G = 0, B = 51. Sie wollen nun einige Textbereiche in Ihrem XHTML-Dokument ebenfalls in diesem Rot setzen. Wie lautet der entsprechende Hexadezimalwert? hh Dividieren Sie im ersten Schritt den Dezimalwert der ersten Grundfarbe R (im Beispiel 174) durch 16 (das ergibt im Beispiel 10,875). hh Die Ganzzahl vor dem Komma (10) entpricht im hexadezimalen System der Ziffer a und ist die erste Ziffer für den Hex-Code. hh Den Rest (also 0,875) multiplizieren Sie mit 16. Das ergibt 14 und entpricht im Hexadezimalsystem e. Dies ergibt die zweite Ziffer. hh Der Hex-Wert für R = 174 ist also ae. Mit den anderen beiden Werten verfahren Sie genauso und kommen auf das Ergebnis RGB 174, 0, 51 = Hex #ae0033
8.3
Websichere Farben
Wie viele Farben ein RGB-Monitor tatsächlich darstellen kann, hängt von der Grafikkarte des Computers ab. Alle heute erhältlichen Grafikkarten unterstützen eine Farbtiefe von 24 Bit. Noch vor wenigen Jahren waren dagegen 8-Bit-Grafikkarten gebräuchlich. Wie viele Farben lassen sich aber mit 8 Bit darstellen? Ganz einfach: Sie haben 8 Speicherplätze zur Ver fügung, die jeweils zwei Zustände annehmen können: 1 oder 0. 8 Bit können also 2 x 2 x 2 x 2 x 2 x 2 x 2 x 2 oder 28 verschiedene Zustände annehmen, was zusammen 256 ergibt. Mit einer 8-Bit-Grafikkarte sind also maximal 256 Farben darstellbar. 24 Bit hingegen entsprechen 224, also etwa 16,8 Millionen Farben. (Eine Farbtiefe von 24 Bit wird auch als True Color bezeichnet.) Mit der hexadezimalen Farbkodierung können Sie alle 16,8 Millionen Farben des RGB-Farbraums defi nieren. Zu Zeiten, als noch 8-Bit-Grafikkarten gebräuchlich waren, konnten Computermonitore jedoch nur 256 davon darstellen. Welche Farben das genau waren, war jedoch durch das Betriebssystem vor
Websichere Farben
67
gegeben, und war von System zu System unterschiedlich7. Eine Überschneidung zwischen diesen unterschiedlichen Systemfarben gab es de facto nur für 216 Farben. Was passierte nun, wenn Sie auf Ihren Webseiten eine Farbe benutzten, die auf einem solchen System nicht dargestellt werden konnte? Das System hat diese Farbe gerastert, d. h. es hat versucht, die Farbe zu simulieren, indem es aus den vorhandenen, darstellbaren Farben einzelne Punkte dicht nebeneinander setzte und hoffte, dass der Betrug nicht aufflog. Diesen Vorgang des Rasterns nennt man auch Dithering. Zur Vermeidung dieses unschönen Effekts ging man dazu über, auf Webseiten nur die 216 Farben zu verwenden, die auf allen Systemen ohne Dithering dargestellt werden konnten. Diese Farben bezeichnet man deshalb bis heute als Websichere Farben, Web Safe Colours, Browser Safe Palette oder WebFarbpalette. In den meisten Grafikprogrammen steht diese Farbpalette gesondert zur Verfügung. Es gibt eine einfache Regel, mit der man websichere Farben erkennen und definieren kann: Es sind alle Farben, die sich aus der Kombination der Hexadezimalwerte 00, 33, 66, 99, cc und ff ergeben. Als »Entdeckerin« dieser Farbpalette gilt bis heute die amerikanische Grafik- und Multimedia-Künstlerin Lynda Weinman. Auf ihrer Website www.lynda.com/hex.asp können Sie diese Palette nachschlagen. Da moderne Computersysteme jedoch alle über 24-Bit-Grafikkarten verfügen und deshalb mindestens 16,8 Millionen Farben darstellen können, spielen die Websicheren Farben heute keine Rolle mehr.
Übung 8 Erstellen Sie ein neues HTML-Dokument und versehen Sie es mit verschiedenen Hintergrundfar ben. Testen Sie deren Wirkung.
Aufgaben zur Selbstkontrolle 1. 2. 3.
7
Mit welchem Farbsystem arbeitet jeder Computermonitor? Welcher Hex-Code bestimmt die Farben Rot, Magenta, Gelb, Cyan? Wie wird die Hintergrundfarbe Blau im body-Tag definiert?
Das Set an Farben, die ein Betriebssystem darstellen konnte, nannte man auch Systemtabelle.
68
Tabellen
Tabellen In dieser Lektion lernen Sie: hh die Sonderstellung von Tabellen in HTML. hh welche Möglichkeiten der Gestaltung sie bieten.
9.1
Was ist das Besondere an Tabellen in HTML?
Bei der Entwicklung von HTML stand anfänglich nur der Austausch von wissenschaftlichen Dokumen ten im Vordergrund. Dabei kümmerte sich niemand sonderlich um Layout oder Design – der Inhalt war wichtig, nicht die äußere Form. Deshalb ist es bis heute nicht möglich, mit den Bordmitteln von HTML Objekte (Textboxen oder Bilder) exakt auf einer Seite zu positionieren. Es stehen lediglich Attribute wie align="center" oder align="right" zur Verfügung, die einzelne Elemente grob auf der Seite ausrichten. Als es im Zuge der Kommerzialisierung des Internets plötzlich notwendig wurde, HTML-Seiten an das Corporate Design von Unternehmen anzupassen, und Webseiten nach immer aufwändigeren Layouts verlangten, standen Grafiker und Webdesigner vor einem Problem: Wie lassen sich Layoutelemente exakt auf HTML-Seiten platzieren? Die Lösung lag in Tabellen. Ursprünglich schlicht für tabellarische Auflistungen konzipiert, kann eine in HTML erzeugte Tabelle praktisch jede Art von Elementen enthalten: Text, Bilder, Animationen, Flash, Java-Applets, Videos, und sogar weitere Tabellen – die Tabelle selbst bleibt dabei aber unsichtbar. Zusammen mit der einzigartigen Möglichkeit, die Höhe und Breite einzelner Spalten oder Zellen pixelgenau anzugeben, lässt sich mit Hilfe dieses Behelfs-Gestaltungsrasters fast jedes Layout umsetzen. Sehr schnell gehörten Tabellen also zum Standardwerkzeug jedes Webdesigners. Aus diesem Grund machen einige HTML-Editoren bis heute exzessiven Gebrauch von Tabellen – zu einem Ausmaß, dass der Quellcode oft kaum mehr lesbar ist. Der erhebliche Nachteil von Tabellen liegt allerdings darin, dass ihre Bearbeitung äußerst zeitaufwändig ist. Sollen die Seiten aktualisiert werden, müssen Sie u. U. die komplette Tabellenkonstruktion umbauen – und das auf jeder einzelnen Seite. Diese Zeiten sind zum Glück vorbei. Heutzutage können Sie mit Cascading Style Sheets jedes Element beliebig auf Ihrer Seite platzieren, vor allem aber gelten CSS-Vorgaben für sämtliche Seiten Ihres Pro jekts, d. h. ändern Sie die Stilvorlage für ein bestimmtes Element, werden dadurch alle entsprechenden Elemente auf jeder Ihrer Seiten automatisch geändert. Tabellen haben heute also wieder ihren ursprünglichen Daseinszweck – sie sind Tabellen, sonst nichts.
9.2
Das Grundprinzip
Eine Tabelle in HTML beginnt stets mit dem Tag <table> und endet mit </table>. Danach werden die einzelnen Zeilen der Zabelle notiert. Eine Zeile wird durch <tr> (engl. table row) definiert und mit </tr> abgeschlossen.
Das Grundprinzip
69
Innerhalb jeder Zeile notieren Sie dann die einzelnen Zellen dieser Zeile mit <td></td> (engl. table data). Dabei muss jede Zeile zwingend dieselbe Anzahl an Zellen haben! Erst zwischen diesen td-Tags steht die eigentliche Information (Text, Bilder u. ä.), die in dieser Zelle erscheinen soll. Für eine Tabelle mit zwei Reihen und zwei Spalten ergibt sich also folgender Code: 1 2 3 4 5 6 7 8 9 10
<table> <tr> <td>Inhalt</td> <td>Inhalt</td> </tr> <tr> <td>Inhalt</td> <td>Inhalt</td> </tr> </table>
<!--dies ist die erste Reihe der Tabelle--> <!--dies ist die erste Zelle in Reihe 1--> <!--dies ist die zweite Zelle in Reihe 1--> <!--hier beginnt die zweite Reihe --> <!--dies ist die erste Zelle der Reihe 2--> <!--dies ist die zweite Zelle der Reihe 2-->
Codebeispiel 12: Einfache Tabelle mit zwei Zeilen und zwei Spalten
Um diese Tabelle im Browser zu sehen, müssen Sie ihr allerdings noch eine sichtbare Kontur geben und beliebigen Inhalt in den Zellen platzieren, denn leere Zellen werden von vielen Browsern nicht ange zeigt. Es ergibt sich dann folgender Code: 1 2 3 4 5 6 7 8 9 10
<table border="1"> <!-- Tabellenrand 1 Pixel --> <tr> <td>erste Zelle in Reihe 1</td> <td>zweite Zelle in Reihe 1</td> </tr> <tr> <td>erste Zelle in Reihe 2</td> <td>zweite Zelle Reihe 2</td> </tr> </table>
Codebeispiel 13: Tabelle mit Rand
Browserdarstellung:
Die Tabelle wird mit einem einfachen Rand umgeben und linksbündig dargestellt. Wenn Sie keine Kontur haben wollen, sollten Sie das explizit durch border="0" angeben, da sonst in manchen Browserver sionen dennoch ein Rand dargestellt wird. Die Größe der Zellen orientiert sich standardmäßig an ihrem Inhalt. Diese Tabelle lässt sich durch Einfügen weiterer table rows einfach um weitere Zeilen erweitern.
70
Tabellen
Um die Tabelle hingegen um weitere Spalten zu erweitern, muss in jeder Reihe eine zusätzliche Zelle mit <td></td> definiert werden. Wie bereits erwähnt, muss die Anzahl der Zellen in jeder Zeile gleich sein. Überlegen Sie deshalb schon gleich zu Anfang, wie viele Spalten Sie insgesamt benötigen. Sie können in der ersten Zeile auch Kopfzeilen für die Spalten definieren. In einer Kopfzeile wird der enthaltene Text automatisch fett und zentriert dargestellt. Ersetzen Sie dazu den Tag <td> durch <th> (engl. table head): 1 2 3 4 5 6 7 8 9 10
<table border="1"> <tr> <th>Kopfzeile</th> <th>Kopfzeile</th> </tr> <tr> <td>Inhalt</td> <td>Inhalt</td> </tr> </table>
Codebeispiel 14: Erzeugen einer Kopfzeile mit <th>
Tabellenzellen können Texte, Grafiken und andere Objekte enthalten. Bei größeren Tabellen kann der Quellcode jedoch leicht unübersichtlich werden. Rücken Sie deshalb die einzelnen Tags wie in den Bei spielen gezeigt ein. Dies hat auf die Darstellung im Browser keinen Einfluss. Nicht jede Tabellenzelle hat einen Inhalt. Um aber bei der Darstellung im Browser Überraschungen zu vermeiden, sollten Sie in Zellen, die leer bleiben sollen, ein geschütztes Leerzeichen &nbsp; einfügen. Dies ist im Browser unsichtbar, wird aber dennoch als Inhalt gewertet. Das ist vor allem dann erforder lich, wenn Sie der Zelle eine Hintergrundfarbe zuweisen wollen, da diese ansonsten vielleicht nicht angezeigt werden würde. 1 2 3 4 5 6 7 8 9 10 11 12
<table border="1"> <tr> <td>Inhalt</td> <td>&nbsp;</td> <td>Inhalt</td> </tr> <tr> <td>&nbsp;</td> <td>Inhalt</td> <td>Inhalt</td> </tr> </table>
<!-- leere Zelle -->
<!-- leere Zelle -->
Codebeispiel 15: Schützen leerer Zellen vor Fehldarstellung mit Hilfe von &nbsp;
9.3
Formatierung von Tabellen
9.3.1
Außenrahmen, Gitternetzlinien, Abstände
Damit Ihre Tabelle mit einem Rahmen angezeigt wird, müssen Sie im table-Tag das Attribut border angeben. Zur Bestimmung der Konturstärke geben Sie einen Wert in Pixeln an. Wollen Sie keinen sicht baren Rahmen, empfiehlt es sich dennoch, das Attribut border mit dem Wert 0 anzugeben: <table border="0">
Formatierung von Tabellen
71
Auch die Stärke der Gitternetzlinien können Sie bestimmen. Dazu geben Sie das Attribut cellspacing (Abstand zwischen den einzelnen Zellen) und einen Wert in Pixeln an. Bei einem Wert von 0 werden keine Gitternetzlinien angezeigt: <table cellspacing="2"> Zur Definition des Abstandes zwischen dem Inhalt einer Zelle und ihrem Rand notieren Sie cellpadding. Wieder wird der Wert in Pixeln angegeben: <table cellpadding="4"> Wenn Sie also eine komplett unsichtbare Tabelle erzeugen möchten, die selbst auch keine physikalische Ausdehnung hat, müssen Sie folgendes notieren: <table border="0" cellspacing="0" cellpadding="0"> Diese Attribute werden sämtlich im Start-Tag <table> der Tabelle angegeben und gelten für die gesamte Tabelle.
9.3.2
Höhe und Breite der Tabelle
Wenn Sie keine Angaben machen, richtet sich die Breite einer Tabelle im Browser nach ihrem Inhalt. Mit dem Attribut width können Sie jedoch die Breite selbst bestimmen. Auch die Höhe der Tabelle können Sie theoretisch mit dem Attribut height definieren. Die Angabe der Höhe wird von den Browsern schon lange unterstützt und wird in der Praxis häufig benutzt, war jedoch nie Bestandteil des HTMLStandards. Verzichten Sie deshalb besser auf Höhenangaben. Beide Attribute stehen im table-Tag und erwarten Pixel- oder Prozentangaben. Die Prozentangaben beziehen sich auf die Größe des Elements, das die Tabelle umgibt (hier also das Browserfenster). Aller dings wird die Tabelle nur so weit verkleinert, wie es der Zellinhalt zulässt. <table width="300"> <table width="50%">
9.3.3
Tabellenbeschriftung
Sie können eine optisch von der Tabelle getrennte, aber mit ihr verbundene Über- oder Unterschrift definieren. Dazu benutzen Sie direkt nach dem einleitenden table-Tag den Tag <caption>, den Sie am Ende der Über- oder Unterschrift auch wieder mit </caption> schließen: Beispiel 1 2 3 4 5 6 7 8 9 10 11 12 13 14
<table border="1"> <caption>Assoziationen</caption> <tr> <th>London</th> <th>Paris</th> <th>Rom</th> </tr> <tr> <td>Doppeldeckerbus</td> <td>Cabrio</td> <td>Vespa</td> </tr> <tr> <td>Stew</td>
72 15 16 17 18
Tabellen <td>Baguette</td> <td>Gelato</td> </tr> </table>
Codebeispiel 16: Tabellenüberschrift
Wenn die Beschriftung unter der Tabelle erscheinen soll, geben Sie das im Attribut align an: <caption align="bottom"> Ferner sind die Angaben align="left" und align="right" für eine seitliche Beschriftung links bzw. rechts möglich, werden jedoch meist nicht korrekt unterstützt. Das Attribut align ist darüberhinaus als deprecated gekennzeichnet, soll also künftig aus dem HTML-Standard entfallen. Alternative Angaben zur Steuerung des caption-Elements mit Hilfe von CSS werden jedoch von den gängigen Browsern bislang nicht unterstützt.
9.4
Formatierung einzelner Zellen
9.4.1
Spaltenbreite und Zeilenhöhe
Wenn Sie in einer Tabelle keine Spaltenbreiten angeben, verteilt sie der Browser proportional zu ihrem Inhalt, d. h. Spalten mit mehr Inhalt werden breiter dargestellt als solche mit weniger Inhalt. Dies kann u. U. einen störenden Effekt auf Ihr Layout haben. Die Spaltenbreite geben Sie mit dem Attribut width im Tag <td> bzw. <th> an. Den Wert können Sie sowohl in Pixeln als auch in Prozent angeben. Die Pro zentangabe bezieht sich auf die Gesamtbreite der Tabelle. 1 2 3 4 5 6 7 8 9 10
<table> <tr> <td width="200">Inhalt</td> <td width="300">Inhalt</td> <tr> <tr> <td>Inhalt</td> <td>Inhalt</td> <tr> </table>
Codebeispiel 17: Festlegen der Spaltenbreiten
Die Angabe einer Spaltenbreite ist dann sinnvoll, wenn der Inhalt der einzelnen Spalten vom Umfang her sehr unterschiedlich ist. Angaben zur Spaltenbreite werden vom Browser natürlich nur umgesetzt, solange der Inhalt noch in die Spalte passt. Die Angaben müssen Sie in jeder Spalte nur einmal definie ren, also im td-Tag der ersten Reihe. Analog dazu lässt sich durch das Attribut height im td- oder th-Tag die Höhe der Zeile bestimmen, und zwar wiederum in Pixeln oder in Prozent. Diese Angaben gelten für die gesamte Zeile, sie müssen also nur einmal in jeder Zeile notiert werden. Das Attribut height für td und th ist allerdings als deprecated eingestuft und soll in Zukunft nicht mehr verwendet werden!
Formatierung einzelner Zellen
9.4.2
73
Verhinderung von Zeilenumbruch und Ausrichtung von Zellinhalten
Sie können innerhalb einer Zelle den automatischen Zeilenumbruch mit dem Attribut nowrap="no wrap" (Standalone-Attribut) im td- oder im th-Tag unterdrücken. Dies ist aber nur bei kurzen Zellinhalten sinnvoll. <td nowrap="nowrap">Inhalt der nicht umbricht</td> Auch kann der Inhalt der Zellen horizontal und vertikal ausgerichtet werden. Die horizontale Ausrich tung bestimmen Sie mit dem Attribut align im td- oder th-Tag. Als Werte haben Sie die Möglichkeiten left (Standardeinstellung), center, right und justify (Blocksatz, funktioniert nicht unter MSIE 6). <td align="center">Inhalt</td> Die vertikale Ausrichtung wird mit valign definiert. Hier können Sie zwischen top, middle, bottom und (seit HTML 4.0) baseline wählen, wobei baseline versucht, Text an seiner Grundlinie auszurichten. middle ist die Voreinstellung und deshalb überflüssig. <td valign="top">Inhalt</td> Natürlich können Sie diese beiden Attribute kombinieren: <td align="center" valign="top">Inhalt</td> Wird das Attribut align im Tag <td> oder <th> notiert, so gilt es für die betreffende Zelle. Wenn Sie alle Zellen einer Zeile gleich ausrichten wollen, notieren Sie align im Tag <tr> der betreffenden Zeile.
9.4.3
Verbinden von Zellen
Um eine Tabelle zu erzeugen, deren Zeilen und Spalten nicht die gleiche Anzahl an Zellen haben, müs sen Sie einzelne Zellen verbinden. Da man dabei sehr schnell die Orientierung verlieren kann, empfiehlt es sich, die Tabelle zuerst wie gewohnt mit allen Zellen zu erzeugen: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<table border="1"> <tr> <td>td 1</td> <td>td 2</td> <td>td 3</td> </tr> <tr> <td>td 4</td> <td>td 5</td> <td>td 6</td> </tr> <tr> <td>td 7</td> <td>td 8</td> <td>td 9</td> </tr> </table>
Codebeispiel 18: Standardtabelle
74
Tabellen
Browserdarstellung: td 1
td 2
td 3
td 4
td 5
td 6
td 7
td 8
td 9
Horizontale Verbindung von Zellen Um nun die ersten beiden Zellen in der ersten Reihe zu verbinden, löschen Sie im ersten Schritt das tdTagpaar für die zweite Zelle, danach notieren Sie im ersten td-Tag das Attribut colspan (= column span, Umfang der Spalten, über den sich eine Zelle erstreckt), wobei Sie als Wert die Anzahl der Zellen angeben, die Sie verbinden wollen, hier also colspan="2": 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<table border="1"> <tr> <td colspan="2">td 1</td> <td>td </tr> <tr> <td>td <td>td <td>td </tr> <tr> <td>td <td>td <td>td </tr> </table>
3</td> 4</td> 5</td> 6</td> 7</td> 8</td> 9</td>
Codebeispiel 19: Tabelle mit zwei horizontal verbundenen Zellen: die td in Codezeile 4 wurde gelöscht
Browserdarstellung: td 1
td 3
td 4
td 5
td 6
td 7
td 8
td 9
Vertikale Verbindung von Zellen Wenn Sie zwei oder mehr Zellen in einer Spalte verbinden wollen, gehen Sie analog vor. Löschen Sie zuerst die erste Zelle in Reihe 2, danach notieren Sie in der ersten Zelle in Reihe 1 das Attribut rowspan (= Zeilenspanne) und als Wert die Anzahl der Zellen, die verbundenen werden sollen. 1 2 3 4 5 6 7
<table border="1"> <tr> <td rowspan="2">td 1</td> <td>td 2</td> <td>td 3</td> </tr> <tr>
Formatierung einzelner Zellen 8 9 10 11 12 13 14 15 16 17
<td>td <td>td </tr> <tr> <td>td <td>td <td>td </tr> </table>
75
5</td> 6</td> 7</td> 8</td> 9</td>
Codebeispiel 20: Tabelle mit zwei vertikal verbundenen Zellen: die td in Codezeile 8 wurde gelöscht
Browserdarstellung: td 1
td 7
td 2
td 3
td 5
td 6
td 8
td 9
Mit dieser Methode ist es natürlich auch möglich, Zellen gleichzeitig über Zeilen und Spalten hinweg zu verbinden. Löschen Sie dazu zuerst alle Zellen in Ihrer Tabelle, die von der ersten Zelle »überlagert« werden sollen. In der verbliebenen Zelle werden die Attribute rowspan und colspan kombiniert: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
<table border="1"> <tr> <td colspan="2" rowspan="2">td 1</td> <td>td 3</td> </tr> <tr> <td>td </tr> <tr> <td>td <td>td <td>td </tr> </table>
6</td> 7</td> 8</td> 9</td>
Codebeispiel 21: Tabelle mit horizontal und vertikal verbundenen Zellen: die Zellen in Codezeile 4 sowie in Codezeile 8 und 9 wurden gelöscht
Browserdarstellung: td 1
td 3 td 6
td 7
td 8
td 9
76
9.5
Tabellen
Einfärben von Tabellen und Zellen
Sie können Tabellen auch farbig gestalten, indem Sie einer Tabelle eine Hintergrundfarbe geben oder einzelnen Zellen unterschiedliche Farben zuweisen. Bedenken Sie dabei jedoch wieder, dass dieses Vorgehen dem Konzept der Trennung zwischen Struktur und Formatierung widerspricht.
Hintergrundfarbe für die gesamte Tabelle Diese Farbe definieren Sie durch das Attribut bgcolor im einleitenden table-Tag der Tabelle: <table bgcolor="#cc0000">
Hintergrundfarbe für Zeilen und Zellen Hintergrundfarben für Zeilen und einzelne Zellen definieren Sie entsprechend im tr-Tag für die Zeile oder im td-Tag für die Zelle, ebenfalls mit dem Attribut bgcolor: <tr bgcolor="#ff0000"> <td bgcolor="#ffff00">
Hintergrundbilder für Tabellen und Zellen Auf die gleiche Weise, wie Sie einer ganzen HTML-Seite ein Hintergrundbild zuweisen, können Sie dies auch für eine Tabelle oder einzelne Zellen tun. Das geschieht mit Hilfe des Attributs background. Aller dings entspricht das Attribut background in Verbindung mit Tabellen nicht dem XHTML-Standard! <table background="hintergrundbild.gif"> <td background="hintergrundbild.gif">
Einfärben von Tabellen und Zellen
Übung 9 Erstellen Sie folgende Tabelle:
Aufgaben zur Selbstkontrolle 1. 2. 3. 4.
Was bedeutet <table border="0" cellpadding="12" cellspacing="12">? Was bedeutet colspan="2" Mit welchem HTML-Attribut können Sie Text in einer Tabellenzelle unten ausrichten? Was bewirkt der Tag <th>?
77
78
Formulare
Formulare In dieser Lektion lernen Sie: hh welche Möglichkeiten Formulare Ihnen bieten. hh wie man Formulare in HTML erstellt und verschickt. hh die einzelnen Elemente von Formularen kennen.
10.1
Grundlagen
Formulare sind eines der wichtigsten Elemente auf Webseiten. Sie ermöglichen erst, dass die Besucher mit der Website interagieren können. Letztlich sind Formulare die Grundlage jeder dynamischen Web site und erlauben Ihnen die Realisierung von Suchmasken, Kontakt- und Bestellformularen und ganzen Shopsystemen8. Ein Formular besteht aus verschiedenen Interface-Elementen wie Eingabefeldern, Auswahlboxen, Dropdown-Menüs, Ankreuzfeldern etc., mit deren Hilfe der Anwender Auswahlen treffen und Texte eingeben kann. Nach dem Klick auf einen Bestätigungsknopf werden die Eingaben an den Webserver geschickt und dort von einem Programm weiterverarbeitet, um z. B. eine Suchanfrage durchzuführen, Daten in einer Datenbank zu speichern oder eine Anfrage per E-Mail zu versenden. Ein Formular definieren Sie mit dem einleitenden Tag <form> und dem End-Tag </form>. Alle Elemente zwischen diesen beiden Tags sind Bestandteil des Formulars. Dabei muss es sich jedoch nicht zwangsläufig nur um Formularelemente wie Eingabefelder oder Buttons handeln, sondern Sie können innerhalb eines Formulars nahezu jeden beliebigen HTML-Tag verwenden, um z. B. das Formular mit Tabellen zu gliedern, mit Texten zu erläutern oder mit Bildern aufzulockern.
8 Die dynamischen Komponenten werden mit Hilfe von Programmiersprachen wie JavaScript oder PHP erzeugt. Die HTMLFormulare stellen die Oberfläche (Interface) zur Bedienung solcher Web-Applikationen zur Verfügung.
Konfiguration eines Formulars
79
Abb. 9: Grafisch ansprechend aufbereitetes Formular auf www.mac.com.
10.2
Konfiguration eines Formulars
10.2.1
Festlegen des Empfängers
Der einleitende form-Tag ist auch der Ort, an dem Sie angeben müssen, was mit den Formulardaten geschehen soll, nachdem der Anwender auf den Knopf zum Absenden geklickt hat. Dazu notieren Sie das Attribut action und geben als Wert die Empfängeradresse ein. Dabei kann es sich um ganz unterschiedliche Arten von Adressen handeln, je nachdem, um welche Art von Formular es sich handelt. Wenn es sich bei Ihrem Formular um ein Kontaktformular handelt, dessen Einträge per E-Mail verschickt werden sollen, haben Sie die Möglichkeit, eine E-Mail-Adresse als Empfänger anzugeben: <form action="mailto:webmaster@webmasters-europe.org"> Diese Methode ist jedoch äußerst unsicher, da sie erstens das Vorhandensein eines fertig konfigurierten E-Mail-Clients auf dem System des Benutzers voraussetzt und zweitens ohnehin nicht in allen Brow sern funktioniert. Besser ist deshalb die Variante, die Verarbeitung und den Versand der Formulardaten einem serverseitigen Programm zu überlassen. Das System des Benutzers ist in diesem Fall nicht mehr in den Versand involviert. In diesem Fall geben Sie im action-Attribut des form-Tags einfach den Pfad an, unter dem das Pro gramm auf Ihrem Webserver abgelegt ist, z. B.:
80
Formulare
<form action="/formularversand.php">
10.2.2
Festlegung der Versandmethode
Als nächstes können Sie angeben, auf welche Weise die Daten übertragen werden sollen. Hier gibt es grundsätzlich zwei Möglichkeiten: <form action="…" method="get"> <form action="…" method="post"> hh Bei der Verwendung von method="get” (Standardeinstellung) werden die Formulardaten als Parameter an die URL angehängt. Das Programm liest den Inhalt aus und verarbeitet ihn. hh Wenn method="post" eingetragen wird, werden die Formulardaten auf dem Server-Rechner durch die sogenannte stdin (= Standardeingabe) zur Verfügung gestellt – das Programm muss sie behandeln wie eine Benutzereingabe. Diese Methode müssen Sie auf jeden Fall dann verwenden, wenn die Formulardaten zu umfangreich für die get-Methode sind. Welche der beiden Methoden Sie verwenden müssen, ist abhängig davon, mit welchen Mitteln Ihre Formulardaten weiterverarbeitet werden. Wenn Sie sich z. B. Formulardaten über mailto per E-Mail zuschicken lassen wollen, müssen Sie method="post" benutzen.
10.2.3
Festlegen der Kodierungsmethode
Wenn Sie sich die Formulardaten über mailto per E-Mail zuschicken lassen, sollten Sie im form-Tag zusätzlich den encryption type (Kodierungsmethode) enctype="text/plain" angeben, da ansonsten die Formulardaten nach einem Schema kodiert werden, das für Menschen nicht besonders angenehm zu lesen ist. Mit der genannten Angabe hingegen erhalten Sie ordentlich formatierte E-Mails. <form action="mailto:webmaster@irgendwo.de" method="post" enctype="text/plain"> Browserdarstellung:
Abb. 10: Die Abbildung links zeigt, wie die Formatierung des Kontaktformulars ohne enctype dargestellt wird. Rechts wurde das Formular mit enctype="text/plain" kodiert.
10.3
Erzeugen einzelner Formularelemente
Nun wissen wir zwar, wie man den Rohbau eines Formulars erstellt. Aber ohne die eigentlichen Daten nützt uns unser Formular nicht viel. Der form-Tag alleine bewirkt noch keine Anzeige im Browser. Wir müssen uns nun also mit den verschiedenen Möglichkeiten befassen, Daten in unser Formular zu bekommen. Die meisten Formularelemente werden mit dem Tag <input> erzeugt. Um welche Art von Eingabefeld es sich dabei handelt, wird durch das Pflichtattribut type näher definiert. Der input-Tag ist ein Stand alone-Tag und muss in sich selbst geschlossen werden.
Einzeilige Texteingabefelder
81
Beispiel <input type="text" /> Einige Formularfelder bilden hier jedoch eine Ausnahme; sie werden durch einen eigenen Tag erzeugt. Einfache Formulare können Sie mit Hilfe von Zeilenumbrüchen strukturieren. Übersichtlicher und pro fessioneller ist jedoch die Verwendung von Tabellen. Platzieren Sie dazu jedes Formularelement in eine eigene Tabellenzelle. Dadurch haben Sie auch die Möglichkeit, mehrere Formularfelder auf einfache Weise nebeneinander zu setzen.
10.4
Einzeilige Texteingabefelder
Einzeilige Texteingabefelder sind wohl das am häufigsten benutzte Formularelement, und einige For mulare – wie etwa Suchfelder – bestehen ausschließlich aus einem solchen Textfeld. Erzeugt werden sie mit dem Tag <input> und dem Attribut type="text". <form action="…"> <input type="text" /> </form> Mit dem Attribut size können Sie eine Breite für das Textfeld vorgeben. size ist hier jedoch kein Pixelwert, sondern die Anzahl der sichtbaren Zeichen. Das bedeutet, dass es sich hier um eine relative Größe handelt, die abhängig von der voreingestellten Schriftgröße ist! <form action="…"> <input type="text" size="30" /> </form> Weiterhin können Sie mit maxlength (= maximale Zeichenlänge) bestimmen, wieviele Zeichen der Anwender maximal in das Textfeld eingeben kann. Dieser Wert ist unabhängig von der size. <form action="…"> <input type="text" size="30" maxlength="50" /> </form> Das Attribut maxlength ist jedoch mit äußerster Vorsicht zu genießen. Wenn Sie hier Fehler machen, hat der Anwender keine Möglichkeit, seine Daten vollständig einzugeben. Sie sollten es daher nur in Ausnahmefällen verwenden!
Passwortfelder Wenn in Ihr Formular Kennwörter, PINs oder ähnliches eingegeben werden sollen, steht Ihnen auch dafür ein entsprechendes Eingabefeld zur Verfügung. Es verhält sich identisch wie das Textfeld, die Texteingabe erfolgt jedoch »verdeckt«, also mit Platzhaltern wie Punkten oder Sternchen. Ändern Sie dazu einfach den type Ihres Textfelds in password: <input type="password" size="10" maxlength="10" /> Hier kann das Attribut maxlength sinnvoll sein, wenn Sie z. B. wissen, dass Ihre Passwörter eine bestimmte Zeichenlänge niemals überschreiten. Das Passwort ist zwar auf dem Bildschirm nicht lesbar, kann aber u. U. dennoch im Klartext übertragen werden!
f
82
Formulare
Browserdarstellung:
10.5
Eindeutige Identifikation von Formularfeldern
Damit Formularfelder später weiterverarbeitet werden können, benötigt jedes von ihnen ebenfalls zwingend einen eindeutigen Namen, der es von anderen Formularfeldern unterscheidet. Die Vergabe dieses Namens Erfolgt nach dem bekannten Schema Name/ID. Der Name ist für den Anwender nicht sichtbar, kann jedoch vom Browser sowie von den Programmen auf dem Webserver ausgelesen wer den. Er darf keine Leer- oder Sonderzeichen enthalten und nirgends sonst innerhalb des Dokuments vorkommen. Die Wahl des Namens ist Ihrer Phantasie überlassen, es sollte sich jedoch um eine sinnvolle Bezeichnung handeln, zumal der Name beim Empänger des Formulars – wenn es sich z. B. um ein Kontaktformular handelt – u. U. als Titel des Formulareintrags erscheinen kann. Beispiel <input type="text" name="Anschrift" id="Anschrift" /> Das Formularfeld erscheint im Browser als leeres Textfeld. Gibt der Anwender nun seine Anschrift ein (z. B. »Marienstraße 9«) und schickt das Kontaktformular ab, so erscheint seine Eingabe beim Empfänger der E-Mail etwa folgendermaßen: Anschrift: Marienstraße 9
10.6
Beschriftung von Formularfeldern
Da diese internen IDs von Formularfeldern – wie erwähnt – für den Anwender nicht sichtbar sind, müs sen Sie Ihre Formularfelder unbedingt anderweitig beschriften, damit der Anwender weiß, welche Ein gaben er hier machen soll. Dafür stehen Ihnen drei Möglichkeiten zur Verfügung: 1.
Normaler Text: Die einfachste Möglichkeit, Formularfelder zu beschriften, ist die Platzierung von Standardtext neben dem Formularfeld, z. B. Ihre Anschrift:<br /> <input type="text" name="Anschrift" id="Anschrift" />
2.
Beschriftung innerhalb des Formularfelds: Sie können in einem Formularfeld auch einen Stan dardtext vorgeben, der bereits vorhanden ist, wenn die Seite im Browser geladen wird. Dies geschieht mit Hilfe des Attributs value: <input type="text" name="Anschrift" id="Anschrift" value="Ihre Anschrift"/> Dies kann u. U. sinnvoll sein, um z. B. bestimmte Standardwerte vorzugeben, die die meisten Besu cher ohnehin eintragen würden. Zur Beschriftung von Formularfeldern ist das Attribut value je-
Mehrzeilige Eingabefelder
83
doch nur bedingt tauglich, da der Anwender zur Eingabe seines eigenen Eintrags den Standard wert jedesmal erst herauslöschen muss9. 3.
Beschriftung mit dem Tag label: Eine elegantere Variante, die seit HTML 4.01 zur Verfügung steht, bietet der Tag label (engl. »Etikett«) der im Grunde das gleiche bewirkt wie der normale Beschriftungstext in Variante 1, im Gegensatz dazu jedoch einen tatsächlichen logischen Bezug zwischen Formularelement und Beschriftungstext herstellt: <label for="Anschrift">Ihre Anschrift:</label><br /> <input type="text" name="Anschrift" id="Anschrift" /> Der label-Tag bewirkt keine sichtbare Veränderung des Textes, er dient lediglich dem Zweck, einen logischen Bezug zum Formularelement herzustellen (kann aber mit CSS formatiert werden). Diesen Bezug definieren Sie mit dem Attribut for. Als Wert geben Sie die ID des Formularelements an, auf das sich das Etikett beziehen soll. Beim Klick auf einen solchen Labeltext wird in neueren Browsern das zugehörige Formularelement automatisch fokussiert bzw. ausgewählt. Diese Funktion erleichtert unter anderem auch die Auswahl von Ankreuzfeldern.
10.7
Mehrzeilige Eingabefelder
Einzeilige Textfelder dienen der Übermittlung von kurzen Angaben wie z. B. Adressdaten oder Suchbe griffen. Wenn Sie die Besucher Ihrer Site um längere Nachrichten oder Kommentare bitten, können Sie mehrzeilige Eingabefelder verwenden. Mehrzeilige Eingabefelder sind ein Sonderfall unter den Formularfeldern: Sie werden nicht mit dem input-Tag erzeugt, sondern mit dem Tag <textarea>. Dieser Tag ist auch kein Standalone-Tag, sondern muss an entsprechender Stelle separat mit </textarea> wieder geschlossen werden. Dadurch ist es möglich, zwischen diesem Tagpaar auch längeren Platzhaltertext vorzugeben. Dieser Text kann aller dings nicht mit HTML-Tags wie etwa <strong> oder <em> weiterformatiert werden. Der Text kann vom Anwender natürlich überschrieben werden. Vergessen Sie nicht, auch für dieses Eingabefeld einen Namen und eine ID anzugeben. <textarea name="kommentar" id="kommentar" rows="10" cols="25"> Hier kann Platzhaltertext stehen. </textarea> Die Größe des Textfeldes definieren Sie mit den Attributen rows (Anzahl der sichtbaren Textzeilen) und cols (»Spalten«, eine etwas verwirrende Bezeichnung für die Anzahl der Zeichen in einer Zeile). Diese Angaben bestimmen nur die Anzeigegröße des Textfeldes. Es kann natürlich auch mehr Text eingege ben werden. In diesem Fall erscheint automatisch ein Rollbalken. Browserdarstellung:
9 Der Effekt, dass der Standardwert automatisch verschwindet, sobald in das Formularfeld geklickt wird, ist mit HTML-Mitteln nicht möglich. Sie benötigen dazu JavaScript.
84
Formulare
10.8
Auswahllisten
Auswahllisten bieten Ihnen die Möglichkeit, eine große Anzahl an Optionen auf kleinstem Raum unter zubringen, aus denen der Anwender eine oder mehrere auswählen kann. Diese Auswahllisten definie ren Sie mit dem einleitenden Tag <select>, der mit </select> auch wieder geschlossen werden muss. Auch jede Auswahlliste benötigt einen Namen und eine ID. <select name="Lieblingsfarbe" id="Lieblingsfarbe"></select> Die einzelnen Optionen der Auswahlliste definieren Sie mit der entsprechenden Anzahl an optionTags zwischen dem select-Paar: 1 2 3 4 5 6 7 8
<select name="Lieblingsfarbe" id="Lieblingsfarbe"> <option>Rot</option> <option>Blau</option> <option>Gelb</option> <option>Gr&uuml;n</option> <option>Grau</option> <option>Andere</option> </select>
Codebeispiel 22: Definieren der Optionen einer Auswahlliste
Wie die Auswahlliste im Browser dargestellt wird, hängt von einem weiteren Attribut ab, das Sie im select-Tag vergeben müssen: size. Dieses Attribut bestimmt, wie viele Einträge in der Liste sichtbar sein sollen. Vergeben Sie hier den Wert size="1", erhalten Sie ein Dropdown-Menü (Aufklappmenü), bei Werten größer als 1 bekommen Sie eine Selectbox mit Rollbalken (sofern die Liste mehr Einträge enthält als sichtbar sind). 1 2 3 4 5 6 7 8 9
Ihre Lieblingsfarbe:<br /> <select name="Lieblingsfarbe" id="Lieblingsfarbe" size="1"> <option>Rot</option> <option>Blau</option> <option>Gelb</option> <option>Gr&uuml;n</option> <option>Grau</option> <option>Andere</option> </select>
Codebeispiel 23: Festlegen der Anzeigegröße einer Auswahlliste
Die Breite der Listenanzeige richtet sich immer nach dem längsten Eintrag. Browserdarstellung:
Abb. 11: Auswahllisten: Links mit dem Attribut size="1", Mitte size="1" in aufgeklapptem Zustand, rechts size="4" (Darstellung Safari 2.0 Mac).
Auswahllisten
85
Mehrfachauswahlen Bei Dropdown-Menüs mit size="1" kann der Anwender immer nur eine Option auswählen. Bei Selectboxen mit einer Größe ab 2 haben Sie jedoch die Möglichkeit, dem Anwender die Auswahl mehrerer Optionen zu erlauben. Die Mehrfachauswahl erfolgt dann mit der Shift- bzw. der strg- (Windows) oder Befehlstaste (Mac). Geben Sie dazu im select-Tag das Standalone-Attribut multiple="multiple" an: <select name="Lieblingsfarbe" id="Lieblingsfarbe" size="4" multiple="multiple"> Browserdarstellung:
Diese Art der Auswahl erfordert jedoch vom Anwender ein gewisses Maß an Erfahrung im Umgang mit Computern. Weisen Sie deshalb auf Ihrer Webseite darauf hin, dass hier Mehrfachauswahlen möglich sind und wie sie funktionieren. Im folgenden werden wir uns auch noch mit einfacher zu bedienenden Alternativen zu solchen Selectboxen beschäftigen.
Vorselektion von Optionen In Dropdown-Menüs ist standardmäßig der erste Eintrag ausgewählt, in Selectboxen keiner. Diese Vor einstellung können Sie jedoch ändern, indem Sie bestimmte Einträge vorselektieren. Dazu geben Sie im option-Tag des entsprechenden Eintrags das Standalone-Attribut selected="selected" an: <option selected="selected">Gelb</option>
Vergabe von Werten für Optionen Normalerweise wird beim Versenden des Formulars der Text übermittelt, der zwischen <option> und </option> notiert ist. Sie können jedoch vorgeben, dass stattdessen ein anderer Text übertragen wird. Dies ist z. B. dann sinnvoll, wenn der Besucher eines Online-Shops die Möglichkeit bekommen soll, aus einer Liste von Produkten auszuwählen, beim Versenden des Formulars aber nicht die Produktbezeich nungen, sondern die Artikelnummern übertragen werden sollen. Notieren Sie dazu in jedem option-Tag das Attribut value und geben als Wert die zu übertragenden Parameter an: 1 2 3 4 5 6 7 8
<select name="reiselaender" id="reiselaender" size="6" multiple="multiple"> <option value="r1">USA</option> <option value="r2">Frankreich</option> <option value="r3">Spanien</option> <option value="r4">Italien</option> <option value="r5">China</option> <option value="r6">Thailand</option> </select>
Codebeispiel 24: Vergabe interner Werte für den option-Tag.
f
86
Formulare
Hierarchische Auswahllisten Seit HTML 4.0 können Sie Auswahllisten in Untergruppen unterteilen. Sofern ihnen size="1" zugewiesen wurde, sollten die Browser solche Auswahllisten als hierarchische Menüstruktur anzeigen, ähnlich wie etwa das Startmenü von Windows-Betriebssystemen. Folgendermaßen ist es gedacht (Abb. Internet Explorer Mac 5.2.3): Browserdarstellung:
Die meisten Browser beschränken sich bei der Darstellung jedoch auf eine optische Hervorhebung der Untergruppen (Abb. Safari 2.0): Browserdarstellung:
Um eine solche hierarchische Auswahlliste zu erzeugen, notieren Sie zwischen <select> und </select> für jedes gewünschte Themengebiet als erstes das Element <optgroup>. Im einleitenden optgroup-Tag vergeben Sie mit dem Attribut label eine Beschriftung für die Gruppe, die als Menüauswahl (wie in der ersten Abbildung) oder als selbst nicht auswählbare Überschrift (wie in der zweiten Abbildung) angezeigt werden soll. 1 2 3 4 5 6
Wählen Sie Ihr Lieblingsland:<br /> <select name="laender" id="laender" size="1"> <optgroup label="Länder mit A"></optgroup> <optgroup label="Länder mit B"></optgroup> <optgroup label="Länder mit C"></optgroup> </select>
Codebeispiel 25: Erzeugen einer hierarchischen Auswahlliste
Kontrollfelder
87
Für die Einträge innerhalb jeder Gruppe notieren Sie wie gewohnt Ihre option-Elemente. Allerdings sollten Sie hier den anzuzeigenden Menüeintrag ebenfalls mit dem Attribut label angeben. Die Werte zwischen <option> und </option> sind hier theoretisch ohne Belang. Sie sollten sie dennoch zusätzlich notieren, denn ältere Browser, die die hierarchische Menüdarstellung nicht beherrschen, ignorieren den optgroup-Tag und zeigen stattdessen eine gewöhnliche Auswahlliste mit den Einträgen zwischen den option-Tags an. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
Wählen Sie Ihr Lieblingsland:<br /> <select name="laender" id="laender" size="1"> <optgroup label="Länder mit A"> <option label="Algerien">Algerien</option> <option label="Andorra">Andorra</option> <option label="Argentinien">Argentinien</option> </optgroup> <optgroup label="Länder mit B"> <option label="Bahrain">Bahrain</option> <option label="Belgien">Belgien</option> <option label="Brasilien">Brasilien</option> </optgroup> <optgroup label="Länder mit C"> <option label="Chile">Chile</option> <option label="China">China</option> <option label="Costa Rica">Costa Rica</option> </optgroup> </select>
Codebeispiel 26: Definieren der Untermenüs einer hierarchischen Auswahlliste
Hierarchische Auswahllisten mit einer size größer als 1 werden in den meisten Browsern in etwa so dargestellt (Abb. Safari 2.0 mit size="6"): Browserdarstellung:
Sie können auf diese Weise nur eine einzige Hierarchieebene erzeugen. Innerhalb eines opt groupElements darf kein weiteres optgroup-Element vorkommen.
10.9
Kontrollfelder
Eine oft komfortablere Variante, dem Benutzer die Möglichkeit zu bieten, aus einer Reihe von Optionen eine oder mehrere auszuwählen, sind Ankreuzfelder (Checkboxen) und Radiobuttons. Das Funktionsprin zip dieser beiden Formularelemente ist ähnlich, sie unterscheiden sich jedoch darin, dass Checkboxen die gleichzeitige Auswahl mehrerer Optionen zulassen, während mit Radiobuttons immer nur eine Option ausgewählt werden kann.
f
88
Formulare
10.9.1
Checkboxen
Checkboxen sind Ankreuzfelder, von denen der Anwender eines oder mehrere markieren kann. Sie ent sprechen am ehesten den Ankreuzfeldern eines gedruckten Formulars. Sie definieren Checkboxen mit dem Tag <input type="checkbox" /> und vergeben für jede einen Namen und eine ID. Daneben notieren Sie mit normalem Text oder dem label-Tag die Beschriftung des Kästchens, die der Anwender sehen soll: 1 2 3
<input type="checkbox" name="hobby1" id="hobby1" />Lesen<br /> <input type="checkbox" name="hobby2" id="hobby2" />Reiten<br /> <input type="checkbox" name="hobby3" id="hobby3" />Tanzen
Codebeispiel 27: Definieren von Checkboxen
Diese Beschriftung wird beim Absenden des Formulars jedoch nicht mit übertragen! Checkboxen benötigen also zwingend das Attribut value, damit der Empfänger des Formulars sieht, was der Besucher der Website angekreuzt hat: 1 2 3
<input type="checkbox" name="hobby1" id="hobby1" value="lesen" />Lesen<br/> <input type="checkbox" name="hobby2" id="hobby2" value="reiten" />Reiten<br/> <input type="checkbox" name="hobby3" id="hobby3" value="tanzen" />Tanzen
Codebeispiel 28: Angeben eines values für jede Checkbox
Browserdarstellung:
10.9.2
Radiobuttons
Radiobuttons sind Buttons, die es dem Anwender ermöglichen, aus einer Gruppe von Optionen genau eine auszuwählen. Zur Definition von Radiobuttons geben Sie im input-Tag das Attribut type="radio" ein. Danach müssen Sie name und id festlegen, allerdings hier mit einer Besonderheit: Alle Radiobuttons, die zur selben Gruppe gehören, müssen denselben Namen tragen! Dadurch wird eine sogenannte Radio Group erzeugt, die sicherstellt, dass beim Anklicken eines Buttons andere, evtl. zuvor ausgewählte Buttons derselben Gruppe wieder deaktiviert werden. Wenn Sie zur Beschriftung der Radiobuttons den label-Tag verwenden, brauchen Sie jedoch eindeutige Bezeichner für Ihre Buttons. Vergeben Sie deshalb für eine Gruppe von Radiobuttons zwar einen gemeinsamen Namen, aber unterschiedliche IDs! Anschließend müssen Sie auch hier noch einen internen value eingeben, der mit dem Formular zum Server übertragen wird. Dieser Wert ist natürlich ebenfalls für jeden Button ein anderer.
Buttons 1 2 3 4 5 6 7 8
89
<input type="radio" name="anreise" id="anreise1" value="auto" /> <label for="anreise1">per Auto</label><br /> <input type="radio" name="anreise" id="anreise2" value="bahn" /> <label for="anreise2">per Bahn</label><br /> <input type="radio" name="anreise" id="anreise3" value="bus" /> <label for="anreise3">per Bus</label><br /> <input type="radio" name="anreise" id="anreise4" value="flugzeug" /> <label for="anreise4">per Flugzeug</label>
Codebeispiel 29: Definition einer Radio Group durch Vergabe identischer Namen, aber unterschiedlicher IDs
Browserdarstellung:
Auch Radiobuttons und Checkboxen können Sie vorselektieren. Hier allerdings nicht wie bei Auswahlli sten mit selected, sondern mit dem Attribut checked="checked": <input type="checkbox" name="hobby2" id="hobby2" value="reiten" checked="checked" /> <input type="radio" name="anreise" id="anreise3" value="bus" checked="checked" />
10.10 Buttons Sie können in HTML-Formularen eine ganze Reihe verschiedener Buttons (Schaltflächen) definieren, die jeweils einen ganz bestimmten Zweck erfüllen. Dazu gehören Standard-Buttons, Buttons zum Upload von Dateien und solche zum Absenden oder Löschen des Formulars. Äußerlich unterscheiden sich diese Buttons nicht voneinander. Browserdarstellung:
10.10.1 Standard-Buttons Standard-Buttons können in HTML zwar definiert werden, erfüllen jedoch keine spezielle Funktion. Sie sind deshalb nur in Verbindung mit Script- oder Programmiersprachen einsetzbar, die definieren, was bei einem Klick auf einen solchen Button geschehen soll. Die HTML-Syntax zur Erzeugung eines Stan dard-Buttons lautet:
90
Formulare
<input type="button" value="Dr&uuml;ck mich!" name="knopf" id="knopf" /> Das Attribut value definiert hier die Beschriftung des Buttons.
10.10.2 Datei-Buttons Datei-Buttons ermöglichen es dem Anwender, zusammen mit dem Formular eine Datei von seinem lokalen Rechner auf den Server zu laden (Datei-Upload). Diese Funktion wird z. B. bei Online-Auktions häusern wie eBay oder Immobilienmärkten eingesetzt, damit Verkäufer eine Abbildung des Objekts hochladen können, das sie verkaufen wollen. Auch diese Art von Button funktioniert nur im Zusammenhang mit Programmiersprachen, die die Rou tinen des Uploads übernehmen. Mit HTML können Sie lediglich das dazu notwendige Interface bereit stellen. Einen Upload-Button definieren Sie mit <input type="file" name="datei" id="datei" /> Dadurch werden gleich zwei zusammengehörige Elemente erzeugt: ein Eingabefeld, in das der Anwen der den Pfad zu seiner lokalen Datei eintragen kann, und einen Durchsuchen-Button, mit dem der Anwender die hochzuladende Datei stattdessen über den Standard-Auswahldialog seines Betriebssy stems auswählen kann. In diesem Fall wird der Dateipfad anschließend vom Browser automatisch in das Textfeld eingetragen.
Größe des Textfelds definieren Auch hier können Sie mit dem Attribut size wieder die Größe (= Anzahl der sichtbaren Zeichen) des Textfeldes bestimmen: <input type="file" name="datei" id="datei" size="35" >
Maximal erlaubte Dateigröße Mit dem Attribut maxlength können Sie theoretisch die maximal erlaubte Dateigröße in Bytes angeben, ansonsten könnte der Anwender beliebig große Dateien versenden und Ihren Server mit Gigabytes an Daten zumüllen. Allerdings ist diese Angabe mit Vorsicht zu genießen: Es ist nicht gewährleistet, dass alle Browser dieses Attribut interpretieren können! Sicherer ist es deshalb, die Dateigröße stattdessen mit Hilfe des weiterverarbeitenden Programms zu beschränken. <input type="file" name="datei" id="datei" size="35" maxlength="500000" />
Einschränkung der erlaubten Dateitypen Wenn Sie nur bestimmte Dateitypen (z. B. nur Bilddateien) für den Upload zulassen wollen, können Sie das mit dem Attribut accept vorgeben, in dem Sie als Wert den MIME-Typ10 der Datei angeben. Das Schema eines MIME-Typs besteht aus zwei Teilen: der Angabe eines Medientyps und der Angabe eines Subtyps. Beide Angaben werden durch einen einfachen Schrägstrich voneinander getrennt.
10 Ursprünglich für E-Mail-Anhänge konzipiert, stellen MIME-Typen (Multipurpose Internet Mail Extensions) eine gute Möglichkeit dar, Programmen, die im Internet miteinander kommunizieren (z. B. Webserver und Webbrowser), den Typ einer Datei mitzuteilen.
Buttons
91
Beispiele MIME-Typ
Dateiendung
Beschreibung
text/plain
.txt
reine Textdateien
text/html
.html, .htm
HTML-Dateien
image/gif
.gif
GIF-Bilder
image/jpeg
.jpg
JPEG-Bilder
application/zip
.zip
ZIP-Archive
application/pdf
PDF-Dateien
application/msword
.doc
MS-Word-Dateien
audio/x-wav
.wav
WAVE-Audiodateien
Tabelle 8: Verschiedene MIME-Typen
Um z. B. nur GIF-Bilder zum Upload zuzulassen, notieren Sie folgendes in Ihrem Datei-Button: <input type="file" name="datei" id="datei" size="35" accept="image/gif" /> Bei den Subtypen ist auch das Wildcard-Zeichen * für »alle« erlaubt. Um z. B. alle Arten von Bildern (GIF, JPEG, PNG, TIFF etc.) zum Upload zuzulassen, notieren Sie: <input type="file" name="datei" id="datei" size="35" accept="image/*" /> Verlassen Sie sich aber auch bei der Angabe von accept nicht darauf, dass alle Browser sie korrekt interpretieren.
10.10.3 Reset-Button Der Reset-Button (engl. »Zurücksetzen«) steht für gewöhnlich am Ende Ihres Formulars und ermöglicht es dem Anwender, sämtliche Formulareinträge in einem Rutsch zu löschen bzw. auf ihren voreinge stellten Wert zurückzusetzen: <input type="reset" name="weg" id="weg" /> Auch hier können Sie mit value die Beschriftung des Buttons ändern: <input type="reset" name="weg" id="weg" value="L&ouml;schen" /> Das Löschen des Formulars erfolgt jedoch ohne weitere Warnung! Es hat sich daher als sinnvoll erwiesen, z. B. mit Hilfe von JavaScript eine Abfrage nach dem Muster »Wollen Sie wirklich alle Ihre Formulareinträge löschen?« zwischenzuschalten, die der Anwender erst bestätigen muss.
f
92
Formulare
10.10.4 Submit-Button Eines der wichtigsten Elemente Ihres Formulars ist der Submit-Button (engl. »übertragen«, »absen den«). Ohne diesen Button hat der Anwender keine (erkennbare) Möglichkeit, das Formular abzusen den. Auch der Submit-Button steht gewöhnlich am Ende Ihres Formulars. <input type="submit" name="senden" id="senden" /> Mit value können Sie wieder die Beschriftung des Buttons ändern: <input type="submit" name="senden" id="senden" value="Ab damit!" /> Mit einem Klick auf den Submit-Button wird das Formular an die im action-Attribut des einleitenden form-Tags angegebene Adresse versandt.
Grafiken als Submit-Button Anstelle des Submit-Buttons können Sie auch eine selbstdefinierte Pixelgrafik einsetzen: <input type="image" src="absenden.gif" /> Die Referenzierung der Grafik erfolgt nach der bekannten Methode mit dem Pflichtattribut src. Obwohl es nicht ersichtlich ist, impliziert das Attribut type="image", dass es sich um einen SubmitButton handelt, der sich auch genauso verhält. Die anderen input-Buttons können nicht durch Bilder ersetzt werden. Anders verhält es sich jedoch mit der folgenden Alternative.
10.10.5 Moderne Buttons Seit HTML 4.0 können Sie die drei o. g. Button-Typen button, reset und submit anstatt mit dem input-Tag auch mit dem alternativen Tag button definieren: <button type="button"></button> <button type="reset"></button> <button type="submit"></button> Diese modernen Buttons haben einen enormen Vorteil: Sie haben einen Anfangs- und einen End-Tag und sind daher wesentlich flexibler als herkömmliche Buttons, denn zwischen den Tags kann nahezu beliebiger HTML-Inhalt stehen: Text, Bilder, ja sogar Tabellen. Alles was Sie zwischen die Tags <button> und </button> notieren, wird als Bestandteil des Buttons interpretiert und ist sozusagen seine »Beschriftung«. Einem ausgefeilten Button-Design steht somit nichts mehr im Wege.
f
Da diese Buttons bereits anklickbar sind, sind innerhalb des button-Tags sämtliche HTML-Elemente mit Verweis-Funktion verboten. Es sind also z. B. keine Hyperlinks erlaubt, und Grafiken dürfen nicht das Attribut usemap enthalten. Beachten Sie auch, dass der button-Tag nur von neueren Browsern interpretiert wird. Beispiel <button type="reset" name="weg" id="weg"> <img src="trash.png" height="128" width="128" border="0" /><br /> L&ouml;schen </button>
Versteckte Felder in Formularen
93
Browserdarstellung:
10.11 Versteckte Felder in Formularen Sie können in einem Formular spezielle Felder definieren, die im Browser nicht angezeigt werden, deren Daten aber dennoch mit übertragen werden. Damit können Sie z. B. Daten verarbeiten, die von einer JavaScript- oder PHP-Funktion benötigt werden. Der Tag dafür ist <input type="hidden" name="versteckt" id="versteckt" /> Die zu übergebenden Daten – hier z. B. den Empfänger eines Kontaktformulars – definieren Sie mit dem Attribut value: <input type="hidden" name="empfaenger" id="empfaenger" value="info@webmasters-europe.org" />
10.12 Mac-spezifische Suchfelder Eine äußerst schicke, jedoch ganz und gar nicht W3C-konforme Sache sind die speziellen Suchfelder, die man in letzter Zeit immer häufiger auf einschlägigen Websites findet. Diese Suchfelder übertragen das in das Macintosh-Betriebssystem integrierte Suchprinzip auf Webseiten und funktionieren daher nur in Browsern, die Apples Rendering Engine WebKit zur Darstellung von Webseiten nutzen. In anderen Browsern erscheinen sie als normale Textfelder. Solche Suchfelder bieten jedoch weit mehr Funktionen und ein eleganteres Erscheinungsbild als nor male Textfelder: Sie haben abgerundete Ecken, und es läßt sich ein Platzhaltertext vorgeben, der beim Klicken in das Textfeld auch ohne JavaScript automatisch verschwindet. Auch der eingegebene Such begriff läßt sich per Mausklick auf einen eingebauten Löschknopf wieder entfernen. Aber das interessanteste ist, dass sich Suchbegriffe, die der Anwender einmal in ein solches Feld einge geben hat, in einer Variablen speichern lassen, sodass zu jeder Zeit auf sie zurückgegriffen werden kann, und zwar für jede Website separat – es sei denn, zwei Websites verwenden denselben Namen für diese Variable. Dann gelten die Suchbegriffe für beide Websites. Ein solches Suchfeld definieren Sie folgendermaßen: <input type="search" name="suchfeld" id="suchfeld" placeholder="Website durchsuchen" autosave="Webmasters Europe" results="5" /> Mit type="search" definieren Sie das Eingabefeld als Mac-Suchfeld. Das Attribut placeholder erzeugt den Text, der standardmäßig in dem Suchfeld angezeigt werden soll. Mit autosave definieren Sie einen frei wählbaren Variablennamen, unter dem die bereits eingegebenen Suchbegriffe auf dem System des Anwenders gespeichert werden sollen. Die maximale Anzahl der gespeicherten Suchbegriffe geben Sie mit results vor.
94
Formulare
Abb. 12: Mac-Suchfeld. Links mit vorgegebenem Standardtext, rechts mit aufgeklappter »Search-History«
f
Bedenken Sie jedoch, dass diese Suchfelder nicht dem HTML-Standard entprechen, sondern von Apple erfunden wurden. Andere Browser zeigen sie zwar momentan als normale Textfelder an, es ist jedoch nicht gewährleistet, dass dies auch in zukünftigen Browser-Versionen so sein wird.
10.13 Tastatursteuerung von Formularen Viele Anwender nutzen beim Ausfüllen von Formularen auf Webseiten gerne die Tabulatortaste, um von einem Formularfeld zum nächsten zu springen. Die Reihenfolge, in der die Formularelemente dabei ausgewählt werden, können Sie mit dem Attribut tabindex steuern. Das ist z. B. dann sinnvoll, wenn Sie Ihr Formular mit Tabellen strukturiert haben und dadurch die physikalische Reihenfolge der Formularelemente nicht mehr der logischen entspricht. Notieren Sie dazu das Attribut im einleitenden Tag jedes einzelnen Ihrer Formularelemente. Dazu gehören die Tags <input>, <textarea>, <select> oder <button>. Die Zahl, die Sie als Wert angeben, bestimmt die Reihenfolge: 1 2 3 4
Vorname<br /><input type="text" tabindex="1" /> Nachname<br /><input type="text" tabindex="2" /> Kennwort<br /><input type="password" tabindex="3" /> Ihre Nachricht:<br /><textarea tabindex="4"></textarea>
Codebeispiel 30: Tastatursteuerung durch tabindex
Tastatursteuerung von Formularen
95
Übung 10 Erstellen Sie folgendes Formular:
Aufgaben zur Selbstkontrolle 1. 2. 3. 4. 5. 6.
Wo legen Sie fest, was mit einem Formular geschehen soll, nachdem der Anwender auf Absenden geklickt hat? Wie erzeugen Sie ein mehrzeiliges Textfeld? Wie können Sie Formularfelder beschriften? Wie erzeugen Sie ein Aufklappmenü? Wie stellen Sie sicher, dass von einer Gruppe von Radiobuttons immer nur einer ausgewählt wer den kann? Wie erzeugen Sie einen Submit-Button mit einer Pixelgrafik (zwei Möglichkeiten)?
96
Frames
Frames In dieser Lektion lernen Sie: hh was Frames sind. hh die Probleme von Frames kennen. hh wann Sie Frames dennoch sinnvoll einsetzen können und wie sie erstellt werden.
11.1
Probleme mit Frames
Im Grunde sind Frames eine äußerst nützliche Erfindung. Sie erlauben es, in einem einzigen Browser fenster mehrere HTML-Dokumente gleichzeitig darzustellen. Dazu wird das Browserfenster in mehrere sichtbare oder unsichtbare Bereiche, die als Frames (engl. »Rahmen«) bezeichnet werden, aufgeteilt, und in jedem dieser Bereiche wird eine andere HTML-Datei angezeigt. Zusammen ergeben diese Berei che ein sogenanntes Frameset (engl. set = »Satz«, »Sammlung«). Frames sind vor allem dann sinnvoll, wenn Ihr Projekt eine Hauptnavigation vorsieht, die auf allen Sei ten Ihrer Website angezeigt werden soll. In diesem Fall erstellen Sie einmal ein HTML-Dokument, das ausschließlich die Navigation enthält, und platzieren es in einem Frame oben oder links im Browserfen ster. Bei einem Klick auf einen Menüeintrag erscheinen dann in einem zweiten Frame unter oder neben der Navigation die HTML-Seiten, die den eigentlichen Inhalt darstellen. Das hat den Vorteil, dass Sie die Navigation nur einmal erstellen müssen, anstatt sie auf jeder Inhaltsseite wieder neu zu platzieren, vor allem aber bleibt die Navigation immer an Ort und Stelle, selbst wenn der eigentliche Inhalt gescrollt werden muss, denn jeder Frame hat einen eigenen, unabhängigen Rollbalken. Frames bieten aber auch eine einfache Möglichkeit, Inhalte unabhängig von der Fenstergröße im Browserfenster zu zentrieren. Und schließlich ermöglichen sie dem bequemen Webdesigner sogar die nahtlose Einbindung fremder Inhalte ins eigene Projekt. In letzter Zeit allerdings sind Framesets ziemlich in Verruf geraten, und dies gleich aus mehreren Grün den. Das Hauptproblem sind sicherlich die Suchmaschinen, doch auch unter Gesichtspunkten der Benutzerfreundlichkeit ist in modernen Layouts von der Verwendung von Framesets abzuraten: hh Das Quereinsteiger-Problem: Normalerweise indiziert eine Suchmaschine sämtliche Unterseiten einer Website. Wenn nun eine solche Unterseite Teil eines Framesets ist und ein Besucher diese Seite in der Trefferliste einer Suchmaschine anklickt, landet er auf einer einzelnen Inhaltsseite, der – ohne ihr umgebendes Frameset – die gesamte Navigation fehlt. Dem ungeübten Besucher bleibt nur der Zurück-Button oder das Schließfeld. Wird umgekehrt nur ein Navigationsframe als Einzel seite geladen, öffnet sich bei jedem Klick ein neues Browserfenster, da das angegebene Zielframe nicht vorhanden ist. hh Das Druckproblem: Viele Browser drucken von einem Frameset nur das jeweils aktive Frame aus, auf dem der aktuelle Fokus liegt. Dadurch kann es leicht passieren, dass der Besucher hinterher anstelle der gewünschten Information lediglich die Navigationsleiste in Händen hält. hh Das Bookmark-Problem: Genau umgekehrt verhält es sich, will der Besucher eine bestimmte Seite des Web-Angebots seinen Lesezeichen hinzufügen. Da sich die Adresszeile eines Framesets nie ändert, wird hier nicht die URL der tatsächlich angezeigten Seite gespeichert, sondern immer nur die der Homepage. Bei seinem nächsten Besuch findet der Anwender die gewünschten Informa tionen nicht mehr vor.
Grundgerüst
97
hh Das Seitentitel-Problem: Bei der Verwendung von Frames müssen Sie auf ein wichtiges Element, das auch zur Orientierung dienen kann, verzichten, nämlich den Titel Ihrer Seite. Es wird immer nur der Titel des Framesets selbst angezeigt. Alle anderen Seitentitel sind nicht sichtbar. Versuchen Sie also – zumindest bei der Entwicklung kommerzieller Websites – Frames zu vermeiden. Es gibt natürlich weiterhin Fälle, in denen Frames sinnvoll oder sogar erforderlich sind, wie z. B. HTMLbasierte Hilfesysteme und Nachschlagewerke zur Offline-Verwendung. Auch zur Einbindung von Dienstleistungen von Drittanbietern auf Websites ist in vielen Fällen nach wie vor die Frametechnologie nötig. Bedenken Sie in einem solchen Fall die o. g. Problematik und beschränken Sie die Verwendung von Frames auf einen bestimmten, abgegrenzten Unterbereich Ihrer Website.
11.2
Grundgerüst
Framesets werden in einer speziellen, separaten HTML-Datei definiert, die die Angaben zum Aufbau des Framesets enthält. Wenn Sie z. B. ein Frameset mit zwei Frames erstellen wollen, benötigen Sie also mindestens drei HTML-Dateien: Eine, die die Frameset-Definition enthält, und zwei, die in den jeweili gen Frames angezeigt werden. Der Anwender bekommt nur die beiden HTML-Dokumente innerhalb der Frames zu Gesicht, die Fra meset-Datei selbst enthält keine visuellen Informationen. Bei den beiden angezeigten Dateien handelt es sich um normale HTML-Dokumente, die auf die gleiche Weise erstellt werden, wie wir es bisher getan haben. Zur Anzeige des Framesets im Browser wird die URL der Frameset-Datei aufgerufen. Das Frameset lädt dann seinerseits die anzuzeigenden Dateien in die einzelnen Frames. Beispiel Sie möchten die Strartseite Ihrer Website in zwei Bereiche unterteilen. Im oberen Bereich soll eine horizontale Navigationsleiste angezeigt werden, darunter eine Begrüßungsseite. Beim Klick auf einen Menüeintrag in der Navigation soll die Begrüßungsseite durch die entsprechenden Inhaltsseiten ersetzt werden. Sie Benötigen dazu mindestens drei HTML-Seiten: 1. 2. 3.
Die index.html, die die Frameset-Definition enthält. Eine normale HTML-Datei für die Navigation, navi.html. Eine normale HTML-Datei für die Begrüßungsseite (home.html) sowie weitere HTML-Seiten, die beim Klick auf einen Menüeintrag anstelle der home.html angezeigt werden.
98
Frames
11.2.1
Definition der Art und Anzahl der Frames
In Ihrem XHTML-Dokument zur Definition des Framesets (im Beispiel index.html) benötigen Sie als erstes die Document Type Definition (DTD) speziell für Framesets (vgl. »Dokumenttypdefinition« auf Seite 41): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.W3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Danach folgt auf gewohnte Weise die Einleitung <html> sowie der <head> mit dem title-Tag. Dieser title-Tag ist bei Framesets universell, d. h. er wird dauerhaft angezeigt, unabhängig davon, welche Seiten gerade in den einzelnen Frames zu sehen sind. Die Frameset-Definition selbst erfolgt mit dem gleichnamigen Tag anstelle des body-Tags Ihres Doku ments: 1 2 3 4 5 6 7 8 9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.W3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mein erstes Frameset</title> </head> <frameset> … </frameset> </html>
Codebeispiel 31: Anlegen eines Framesets
Zusätzlich erfordert die Frameset-Definition genaue Angaben über die Art und Weise, wie das Anzeige fenster aufgeteilt werden soll. Dazu haben Sie zwei Möglichkeiten: Sie können die Aufteilung entweder zeilenweise oder spaltenweise vornehmen. Möchten Sie eine zeilenweise Aufteilung wie in unserem Beispiel am Anfang, so notieren Sie im einlei tenden frameset-Tag das Attribut rows. Für eine spaltenweise Aufteilung notieren Sie stattdessen cols.
Grundgerüst
99
Abb. 13: Zeilenweise Frame-Aufteilung mit rows (links), spaltenweise Aufteilung mit cols (rechts).
Die Größe der einzelnen Frames weisen Sie dem Attribut als Werte zu. Die einzelnen Werte werden durch Kommata getrennt. Aus der Anzahl der Werte ergibt sich implizit die Anzahl der gewünschten Frames: <frameset rows="wert1, wert2">…</frameset> oder <frameset cols="wert1, wert2">…</frameset> Bei rows bezieht sich die Größenangabe auf die Höhe der Frames, bei cols auf die Breite. Die Werte eines der beiden Frames im Beispiel können Sie in Pixeln oder in Prozent angeben, abhängig davon, ob das Frame eine feste Größe haben oder die Größe dynamisch dem Browserfenster angepasst werden soll. Im Beispiel ist das wahrscheinlich das obere Frame mit der Navigation. Die Größe des anderen Frames dürfen Sie nicht durch Pixel- oder Prozentwerte bestimmen, da es sich automatisch aus dem verbleibenden Rest des Browserfensters ergibt. Geben Sie stattdessen als Wert ein Sternchen * ein, z. B. <frameset rows="200, *">…</frameset> oder <frameset cols="25%, *">…</frameset> Auch wenn Sie mehr als zwei Frames definieren, sollten Sie immer ein Frame mit variabler Größe * übrig lassen. Dies stellt sicher, dass der Anwender weiterhin die Möglichkeit hat, die Größe des Brow serfensters zu verändern, und vermeidet Fehldarstellungen.
11.2.2
Definition der einzelnen Frame-Inhalte
Als nächstes müssen Sie die HTML-Dateien angeben, die in die einzelnen Frames geladen werden sollen. Dies geschieht mit Hilfe des Standalone-Tags <frame />, den Sie zwischen das Tagpaar <frameset></frameset> platzieren, und zwar exakt so oft, wie es der im frameset-Tag definierten Anzahl der Frames entspricht. Mit Hilfe des Pflichtattributs src referenzieren Sie die HTML-Dateien auf gewohnte Weise. Für unser Beispiel sähe das folgendermaßen aus: <frameset rows="200, *"> <frame src="navi.html" /> <frame src="home.html" /> </frameset>
100
Frames
Die Reihenfolge der einzelnen frame-Tags entspricht dabei der Reihenfolge der Framedefinitionen im frameset-Tag. Für das Attribut src können Sie jede beliebige URL angeben. Dadurch ist es natürlich auch problemlos möglich, Inhalte fremder Websites nahtlos ins eigene Projekt zu integrieren. Die fremden Inhalte sehen dann so aus, als wären sie Bestandteil Ihrer Website. Dies kann zur Einbindung von Dienstleistungen von Drittanbietern notwendig sein, ansonsten gibt es jedoch keinen vernünftigen Grund dafür, denn hh hh hh hh
Sie verursachen zusätzliche Netzlast. Sie begehen u. U. eine Urheberrechtsverletzung. der Link kann unerwartet brechen, wenn die eingebundene Seite umbenannt oder gelöscht wird. das Einbinden fremder Inhalte wirkt in den meisten Fällen äußerst unprofessionell.
Um später auf die einzelnen Frames zugreifen zu können, benötigen diese wieder eine eindeutige Zuweisung von Namen und ID: <frameset rows="200, *"> <frame src="navi.html" name="oben" id="oben" /> <frame src="home.html" name="unten" id="unten" /> </frameset>
11.3
Eigenschaften von Frames
Konturstärke von Frames Sie können die normalerweise sichtbaren Ränder zwischen den einzelnen Frames unterdrücken. Dadurch wirken die Frames am Bildschirm wie nahtlos aneinander gefügte Flächen. Allerdings gibt es dafür bis heute unterschiedliche, browserspezifische Methoden. Die offizielle Methode nach dem W3CStandard sieht vor, die Konturstärke im gewünschten frame-Tag mit Hilfe des Attributs frameborder zu definieren: Mit dem Wert 0 unterdrücken Sie die sichtbaren Ränder zwischen dem betroffenen Frame und seinen benachbarten Frames, mit frameborder="1" zeigen Sie die Ränder explizit an: <frameset rows="200, *"> <frame src="navi.html" name="oben" id="oben" frameborder="0" /> <frame src="home.html" name="unten" id="unten" /> </frameset> Diese Methode wird jedoch von den wenigsten Browsern unterstützt. Wenn Sie also ein Ergebnis sehen wollen, müssen Sie auf standardkonforme Syntax verzichten und stattdessen proprietären Code ver wenden. In diesem Fall notieren Sie gleich mehrere Attribute, und zwar nicht wie oben in den einzelnen Frames, sondern im einleitenden frameset-Tag. Die Einstellung betrifft also alle Frames innerhalb des Framesets: <frameset rows="200,*" frameborder="0" framespacing="0" border="0"> <frame src="navi.html" name="oben" id="oben" /> <frame src="home.html" name="unten" id="unten" /> </frameset> hh border ist Netscape-Syntax und bestimmt die Breite Pixeln. Erlaubt sind Zahlenwerte von 0 (= keine Ränder) und höher. hh frameborder mit den Werten 1 oder 0 bzw. yes oder no legt nach Microsoft-Syntax fest, ob Ränder angezeigt werden sollen oder nicht. Dieses Attribut ist also gleichlautend mit dem standardkonformen Attribut, bedeutet jedoch etwas anderes. hh framespacing ist ebenfalls Microsoft-Syntax und bestimmt den Abstand zwischen den einzelnen Frames, mithin also die Konturstärke in Pixeln.
Verschachtelte Frames
101
Versatz definieren Sie können einen Versatz zwischen Frame und Inhalt definieren. Dazu benutzen Sie die Attribute mar ginwidth und marginheight. Der Wert wird in Pixeln angegeben: <frame src="navi.html" name="oben" id="oben" marginwidth="0" marginheight="0"/>
Rollbalken deaktivieren Wenn die anzuzeigende Datei größer ist als das Frame, zeigt der Browser normalerweise automatisch Rollbalken an. Dieses Verhalten können Sie mit dem Attribut scrolling beeinflussen. Das Attribut scroll ing hat drei mögliche Werte: hh scrolling="yes": Es werden immer Rollbalken angezeigt, auch wenn sie gar nicht notwendig sind. hh scrolling="no": Es werden nie Rollbalken angezeigt, selbst dann nicht, wenn der Frameinhalt nur teilweise sichtbar ist. Diese Einstellung ist natürlich nur dann sinnvoll, wenn Sie sich absolut sicher sind, dass der Frameinhalt auf jedem System vollständig sichtbar ist. hh scrolling="auto": Standardeinstellung. Es ist besser, dieses Attribut komplett wegzulassen. Beispiel <frameset rows="200, *"> <frame src="navi.html" name="oben" id="oben" scrolling="no" /> <frame src="home.html" name="unten" id="unten" /> </frameset>
Skalierbarkeit verhindern Standardmäßig kann der Anwender die Größe einzelner Frames im Browserfenster mit der Maus verän dern. Falls dies Ihr Layout durcheinanderbringen würde, können Sie das verhindern. Notieren Sie dazu im entsprechenden frame-Tag das Attribut noresize="noresize": <frameset rows="200, *"> <frame src="navi.html" name="oben" id="oben" noresize="noresize" /> <frame src="home.html" name="unten" id="unten" /> </frameset>
11.4
Verschachtelte Frames
Um das Browserfenster in horizontale und vertikale Bereiche aufzuteilen und dadurch komplexere Lay outs zu erzielen, können Sie auch mehrere Framesets ineinander verschachteln. In diesem Fall ersetzen Sie den betreffenden frame-Tag durch ein weiteres komplettes Frameset. Beispiel Sie möchten ein Frameset erstellen, in dem oben eine horizontale Haupt navigation und links eine vertikale Subnavigation angezeigt wird. Im Hauptbereich sollen die Inhaltsseiten sichtbar sein. Definieren Sie das Frameset von außen nach innen: 1.
Legen Sie zuerst ein Frameset mit zwei Zeilen (rows) an:
102
Frames <frameset rows="200,*"> <frame name="oben" id="oben" /> <frame name="unten" id="unten" /> </frameset>
2.
Als nächstes löschen Sie das zweite Frame (mit dem Namen unten) und ersetzen es durch ein weiteres, komplettes Frameset, diesmal mit Spalten (cols): <frameset rows="200,*"> <frame name="oben" id="oben" /> <frameset cols="150,*"> <frame name="links" id="links" /> <frame name="rechts" id="rechts" /> </frameset> </frameset>
3.
Als letztes müssen Sie natürlich noch mit dem Attribut src die HTML-Dateien referenzieren, die in den einzelnen Frames angezeigt werden sollen.
Stellen Sie sich beim Erstellen verschachtelter Framesets also immer die Frage, ob Sie eine weitere Fen sterteilung vornehmen oder das Fenster mit Inhalt füllen wollen. Notieren Sie dann entsprechend ein weitertes Frameset oder stattdessen einen frame-Tag mit der Referenzierung einer HTML-Datei.
11.5
Hyperlinks in Framesets
Die einzelnen Frames eines Framesets werden vom Browser intern genauso behandelt, als wären sie separate Fenster. Wenn Sie also auf einer Seite, die in einem Frame angezeigt wird, einen Hyperlink anklicken, öffnet sich die Zielseite im selben Frame. Das ist aber in den meisten Fällen nicht gewünscht. In unseren obigen Beispielen hatten wir ja geplant, dass sich beim Klick auf einen Link im MenüleistenFrame die Zielseite im Inhaltsframe öffnet. Hier kommen die Namen und IDs der einzelnen Frames ins Spiel: Wenn Sie im Hyperlink als target (engl. Ziel) den Namen des Zielframes angeben, öffnet sich die neue Seite im gewünschten Frame. Beispiel Sie haben folgendes Frameset definiert: <frameset rows="200,*"> <frame src="navi.html" name="oben" id="oben" /> <frame src="home.html" name="unten" id="unten" /> </frameset> Die Seite navi.html, die sich im Frame oben befindet, enthält u. a. einen Link auf die Seite produkte.html. Sie möchten nun erreichen, dass sich bei einem Klick auf diesen Link die Seite produkte.html im Frame mit dem Namen unten öffnet. Dazu notieren Sie im Hyperlink auf der Seite navi.html folgendes Attribut: <a href="produkte.html" target="unten">Produkte</a> Es existieren aber auch vordefinierte Standard-Targets zur Steuerung von Links. Eines davon, target="_blank", haben wir schon kennengelernt (vgl. »Zielfenster definieren« auf Seite 57). Es öffnet einen Hyperlink in einem neuen, leeren Browserfenster. Weitere Targets sind:
Alternativer Inhalt
103
hh _parent: Die Zielseite löscht das aktuelle Frameset und wird im übergeordneten Frameset dargestellt, sofern mehrere, verschachtelte Framesets vorhanden sind. hh _top: Die Zielseite löscht sämtliche Framesets und wird im gesamten Browserfenster angezeigt. hh _self: Die Zielseite wird im gleichen Frame dargestellt (Standardeinstellung, daher überflüssig). Bedenken Sie: Diese Angaben stehen nicht in der Frameset-Datei, sondern in den HTML-Doku menten, aus denen der Link erfolgt.
Übung 11 Erstellen Sie eine Website auf der Basis eines Framesets entsprechend der nachfolgenden Defi nition. 1.
Die Aufteilung des Framesets erfolgt in 3 horizontale Fensterbereiche mit den Größen 60, *, 60.
2.
Verwenden Sie folgende Dateibezeichnungen: index.html für das Frameset sowie o.html, main.html, u.html für die Framedateien.
3.
Vergeben Sie folgende Framebezeichnungen: oben, main, unten.
4. Erstellen Sie in der Datei o.html eine Navigation mit den Menüpunkten Home, Seite 1, Seite 2 und Kontakt. 5.
Legen Sie die entsprechenden Webseiten s1.html, s2.html und kontakt.html an. Die Home-Seite entspricht der main.html, die im Frameset aufgerufen wird.
6. Die Darstellung der Webseiten s1.html, s2.html und kontakt.html erfolgt im main-Frame. 7.
Erzeugen Sie auf der Seite s1.html drei Links auf beliebige externe Seiten: Link 1 tauscht den Frameinhalt im Fenster unten aus. Link 2 ruft eine externe URL in einem neuen Browserfenster auf. Mit Link 3 tauschen Sie den Inhalt des kompletten Browserfensters aus.
11.6
Alternativer Inhalt
Zwar gibt es heutzutage keine Browser mehr, die Framesets überhaupt nicht darstellen können, wohl aber können z. B. Benutzer von Opera die Anzeige von Frames in den Browsereinstellungen deaktivie ren. Für einen solchen Fall sollten Sie in Ihrer Frameset-Datei einen alternativen Inhalt definieren, der nur dann angezeigt wird, wenn der Browser des Anwenders Frames nicht darstellen kann. Geben Sie dazu vor dem letzten End-Tag des Framesets das Tagpaar <noframes></noframes> ein. Zwischen diesen Tags notieren Sie einen normalen body-Bereich, der den alternativen Inhalt enthält. Dieser Inhalt kann aus beliebigen HTML-Elementen (Texte, Bilder etc.) bestehen. <frameset rows="200,*"> <frame src="navi.html" name="oben" id="oben" /> <frame src="home.html" name="unten" id="unten" /> <noframes> <body> <p>Leider kann Ihr Browser keine Frames darstellen.</p> </body> </noframes> </frameset>
f
104
Frames
Aufgaben zur Selbstkontrolle 1. 2. 3.
Was sind die Nachteile von Frames? Wie erzeugen Sie ein Frameset mit drei gleich groĂ&#x;en Spalten? Wie stellen Sie sicher, dass sich eine verlinkte Datei im richtigen Frame Ăśffnet?
Plug-ins
105
Einbinden von Objekten In dieser Lektion lernen Sie: hh was Plug-ins sind und wozu sie dienen. hh wie Sie Multimedia-Daten und Java-Applets in Ihr Dokument einbinden können.
12.1
Plug-ins
Sie können auf Ihren Webseiten neben Grafiken auch Musik, Videos, 3D-Objekte und beliebige andere Dateiformate einbinden. Dabei kann es sich auch um eine vom Browser ausführbare Datei handeln, also um ein Programm (z. B. Java-Applets oder ActiveX-Controls). Das einzige, was die Besucher Ihrer Website dazu benötigen, ist das passende Plug-in (oder, im Falle von Java-Applets, eine installierte Java-VM11). Plug-ins sind Softwarekomponenten, die auf dem System des Anwenders installiert werden müssen, um dem Browser die Darstellung bestimmter, zusätzlicher Dateiformate zu ermöglichen. Die meisten Plug-ins sind zwar kostenlos, Sie können aber dennoch niemals davon ausgehen, dass sich ein Besucher Ihrer Website ein bestimmtes Plug-in installiert, nur um Ihre Seiten betrachten zu können. Wenn Sie also ein bestimmtes Fremdformat auf Ihren Seiten verwenden wollen, dann sollten Sie einen triftigen Grund dafür haben. Weiterhin ist es natürlich vorteilhaft, Dateiformate zu verwenden, von denen Sie wissen, dass die dafür benötigten Plug-ins relativ weit verbreitet sind. Die bekanntesten Plug-ins sind: hh hh hh hh
Flash (interaktive Animationen, Audio, Video) für das Dateiformat SWF QuickTime (Audio & Video), u. a. für die Dateiformate MOV, MP4 Windows Media Audio & Video für die Dateiformate WMA, WMV, ASF Real Audio & Video, Dateiformate RM, RA, RV, RAM
Weisen Sie die Besucher Ihrer Seiten unbedingt darauf hin, dass sie ein Plug-in benötigen, und wo sie es herunterladen können.
12.2
Der object-Tag
Zur Einbindung aller möglicher Multimedia- und Fremdformate soll nach dem W3C-Standard ein einzi ges HTML-Element genügen: der object-Tag. Dieser Tag wird jedoch noch immer nicht vollständig von allen Browsern unterstützt – was zum Teil aber auch an der Vielzahl der unterschiedlichen, proprietären Multimediaformate liegt. Aus diesem Grund wird bis heute zusätzlich zum object-Tag eine alternative, nicht-standardkonforme Syntax zur Einbindung von Multimedia-Daten verwendet, die weiter unten besprochen wird. 11 VM = Virtual Machine. Java-VMs stellen eine virtuelle Laufzeitumgebung zur Ausführung von Java-Programmcode innerhalb eines Host-Systems zur Verfügung und sind auf nahezu jedem modernen Betriebssystem vorinstalliert.
f
106
Einbinden von Objekten
Mit dem Tag <object> leiten Sie die Referenz auf die einzubindende Datei ein, mit </object> wird das Element wieder beendet. Das object-Element hat keine Pflichtattribute. Welche Attribute Sie hier ange ben können oder müssen, ist vollkommen abhängig von der Art der Datei, die Sie einbinden wollen. Oft hilft ein Blick auf die Website des Plug-in-Herstellers weiter. Um eine Datendatei einzubinden, ist das Attribut data vorgesehen. Damit referenzieren Sie die gewünschte Datei auf die herkömmliche Weise: Wenn sich die Datei also im gleichen Verzeichnis wie die HTML-Datei befindet, dann genügt die Angabe des Dateinamens, ansonsten können Sie sie sowohl mit relativen als auch mit absoluten Pfadangaben oder mit einer vollständigen URL referenzieren. Beispiel Einbindung eines QuickTime-Films: <object data="video.mov"> </object> Zusätzlich sollten Sie den MIME-Typ der Datei angeben. Das kann den Browser beim Auffinden des korrekten Plug-ins unterstützen. Notieren Sie dazu im object-Tag das Attribut type. Als Wert weisen Sie einen gültigen MIME-Typ zu (vgl. Seite 90). <object data="video.mov" type="video/quicktime"> </object> Bei eingebundenen Objekten sollten Sie auch stets Größenangaben machen. Mit den Attributen width und height können Sie die Breite und Höhe des Objekts in Pixeln oder Prozent festlegen. Dies ist vor allem bei Dateien wie Videos u. ä. wichtig, um diese nicht skaliert oder verzerrt einzubinden: Geben Sie hier stets die Originalgröße an12. <object data="video.mov" type="video/quicktime" width="320" height="240"> </object> Allerdings erzeugen viele Plug-ins, vor allem solche zur Video-Wiedergabe, Steuerelemente unterhalb des eingebundenen Objekts. Diese müssen u. U. zur Größenangabe hinzugezählt werden. Beim QuickTime-Player beispielsweise sind die Steuerelemente 16 px hoch, was in unserem Beispiel zu fol gender Größenangabe führt: <object data="video.mov" type="video/quicktime" width="336" height="240"> </object> Mit den Angaben width="0" und height="0" können Sie die Objekte auch komplett unsichtbar machen. Das ist z. B. bei Hintergrundmusik sinnvoll.
12.3
Steuerung von Plug-ins
Viele Plug-ins erlauben es, die Darstellung der eingebundenen Inhalte weiter zu beeinflussen. So kön nen Sie z. B. bestimmen, ob ein eingebundener QuickTime-Film automatisch beim Laden der Seite abgespielt werden soll, oder ob der Anwender erst auf den Play-Button klicken muss. Solche Spezifikationen legen Sie mit Hilfe des Standalone-Tags <param /> (= Parameter) fest, den Sie zwischen <object> und </object> notieren, und zwar für jede Steueranweisung erneut. In jedem 12 Falls Sie die Videodateien nicht selbst erstellt haben, können Sie die Bildgröße leicht z. B. im QuickTime-Player ermitteln. Öffnen Sie dazu Ihre Videodatei im QuickTime-Player und wählen Sie im Menü Fenster Filminformationen einblenden (Tastenkombination Strg + i bzw. Befehl + i). Im Informationsfenster können Sie die Bildgröße unter Normale Größe in Pixeln ablesen.
Anzeige von Alternativ-Inhalten
107
param-Tag wird mit dem Attribut name definiert, welcher Parameter geändert werden soll, und diesem mit dem Attribut value ein Wert zugewiesen. Beachten Sie, dass die Parameter, die Sie hier festlegen können, nicht allgemeingültig, sondern vom jeweiligen Plug-in vorgegeben sind. Folgendes Beispiel bindet den QuickTime-Film video.mov ein und legt fest, dass dieser automatisch (autoplay) und in einer Endlosschleife (loop) abspielen und die Filmsteuerung (controller) nicht sichtbar sein soll (vergessen Sie dabei nicht, die Höhenangabe wieder um 16 px zu reduzieren): <object data="video.mov" type="video/quicktime" width="320" height="240"> <param name="autoplay" value="true" /> <param name="loop" value="true" /> <param name="controller" value="false" /> </object> Viele Plug-ins erwarten zusätzlich noch einmal die Angabe der Datenquelle als Paramter. Bei QuickTimeFilmen lautet der Name dieses Parameters src13: <object data="video.mov" type="video/quicktime" width="320" height="240"> <param name="src" value="video.mov" /> <param name="autoplay" value="true" /> <param name="loop" value="true" /> <param name="controller" value="false" /> </object>
12.4
Anzeige von Alternativ-Inhalten
Zwischen dem Tagpaar <object></object> kann beliebiger HTML-Code (Text oder Grafiken) stehen. Dieser wird nur dann angezeigt, wenn der Benutzer das benötigte Plug-in nicht installieret hat. Es ist sogar erlaubt, hier ein zweites object-Element zu notieren, um damit ein alternatives Objekt in einem anderen Dateiformat einzubinden: 1 2 3 4 5 6 7 8
<object data="video.mov" type="video/quicktime" width="320" height="240"> <param name="src" value="video.mov" /> <param name="autoplay" value="true" /> <param name="loop" value="true" /> <param name="controller" value="false" /> <p>An dieser Stelle sollte eigentlich ein QuickTime-Film abgespielt werden. Offensichtlich haben Sie das dafür nötige Plugin nicht installiert.</p>
9 10 </object>
12.5
Microsoft-spezifische Erweiterungen
Leider funktioniert oben beschriebener Code zwar wunderbar in Firefox, jedoch nicht im Internet Explorer. Der Microsoft-Browser erwartet die Einbindung einiger Fremdformate – so auch QuickTime – als ActiveX-Control. Dafür sind zwei weitere Attribute im object-Tag notwendig: classid und codebase. 13 Auch dieser Parameter ist nicht allgemeingültig. Zur Einbindung von Flash-Dateien etwa notieren Sie anstelle von <param name="src" value="…" /> das Attribut <param name="movie" value="…" />.
f
108
Einbinden von Objekten
<object data="video.mov" type="video/quicktime" width="320" height="240" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> Mit dem Attribut classid (= class identifier, Klassenbezeichner) geben Sie nach der festen Zeichenfolge clsid die eindeutige, Microsoft-spezifische ID für das verwendete Plug-in an. Für das QuickTimePlugin müssen Sie z. B. stets classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" notieren. Das Attribut codebase ist hier zweckentfremdet. Primär zur Referenzierung von Java-Applets gedacht, wird es hier zur Angabe der URL verwendet, von der das Plugin geladen werden kann, falls es beim Anwender nicht installiert ist.
f
Bei Verwendung dieser Syntax müssen IE-Anwender u. U. zuerst die Ausführung des ActiveX-Controls im Browser per Dialogfeld bestätigen, bevor der Film abgespielt werden kann. Doch nun haben wir ein anderes Problem: Der Film wird jetzt im Internet Explorer abgespielt, Firefox erkennt ihn jedoch nicht mehr. Hier kommt die bereits oben erwähnte alternative Syntax ins Spiel: Es handelt sich dabei um den embed-Tag, einen nicht standardkonformen Standalone-Tag, der seiner zeit von Netscape eingeführt wurde und alle Parameter zur Steuerung des Plug-ins als Werte in sich vereint. Dieser Tag wird immer dann verwendet, wenn der Browser des Anwenders den object-Tag bzw. – wie in unserem Beispiel – die Microsoft-spezifischen Erweiterungen darin nicht unterstützt. Mit dem embed-Tag notiert, würde die Einbindung unseres QuickTime-Films folgendermaßen ausse hen: <embed src="video.mov" type="video/quicktime" width="320" height="240" autoplay="true" loop="true" controller="false" /> Damit nun unser QuickTime-Film von allen Browsern erkannt wird, müssen wir beide Schreibweisen (object und embed) ineinander verschachteln. Dabei steht der embed-Tag an der Stelle innerhalb des object-Tags, an der normalerweise der Alternativtext (vgl. Abschnitt 12.4) stehen würde. Der gesamte Quellcode zur Einbindung unseres QuickTime-Films müsste folglich so aussehen: 1 2 3 4 5 6 7 8 9
<object data="video.mov" type="video/quicktime" width="320" height="240"> <param name="src" value="video.mov" /> <param name="autoplay" value="true" /> <param name="loop" value="true" /> <param name=“controller“ value=“false“ /> <embed src=“video.mov“ type=“video/quicktime“ width=“320“ height=“240“ autoplay=“true“ loop=“true“ controller=“false“ /> </object>
Codebeispiel 32: Kompletter Code zur Einbindung eines QuickTime-Films inkl. alternativer Syntax.
Nun sollte der Film in allen Browsern dargestellt werden. Dies geschieht jedoch auf Kosten der Stan dardkonformität des Quellcodes. Verwenden Sie diese umständliche doppelte Schreibweise mit object und embed also nur mit Dateiformaten, die nicht bereits mit dem object-Tag alleine und ohne die Microsoft-spezifischen ActiveX-Erweiterungen in allen Browsern dargestellt werden.
Java-Applets
12.6
109
Java-Applets
Java-Applets sind ausführbare Programme. Sie können z. B. Animationen enthalten oder Interaktion mit dem Besucher ermöglichen. Sie können hunderte fertiger Applets für zahlreiche Verwendungszwecke frei aus dem Netz herunterladen. Diese Programme müssen in kompilierter Form vorliegen, um ausgeführt werden zu können. Normalerweise haben sie die Dateiendung .class. Zur Ausführung von JavaApplets muss auf dem Clientsystem eine Java-VM (= Virtual Machine) installiert sein, was aber heutzutage auf den allermeisten Systemen der Fall ist (Windows und Mac OS werden standardmäßig mit einer Java-VM installiert). Auch Java-Applets sollen laut W3C mit dem object-Tag eingebunden werden. Als Alternativtag wird jedoch bis heute der Tag <applet> verwendet, der jedoch nie Bestandteil des HTML-Standards war. Dieser Tag erwartet neben den Attributen width und height zwei weitere Attribute: code und codebase. code definiert den Dateinamen des Applets, unabhängig davon, wo es sich auf dem Server berfindet. codebase referenziert den Pfad zu dem Applet, allerdings ohne den Dateinamen, und muss nur angegeben werden, wenn sich das Applet nicht im gleichen Verzeichnis wie die HTML-Datei befindet. Im applet-Tag ist die Referenzierung der Datei also in zwei Teile geteilt: <applet codebase="medien/applets/" code="mein_applet.class" width="320" height="240"></applet> Auch zwischen den beiden Tags <applet></applet> können Sie Parameter eingeben, die dem Applet übergeben werden, oder beliebigen Text, der angezeigt wird, wenn der Anwender die Java-VM nicht installiert hat. Beispiel <applet code="blinker.class" width="366" height="85"> <param name="fadesteps" value="6" /> <param name="delay" value="50" /> <param name="textdelay" value="0" /> <param name="blinks" value="8" /> <param name="fontsize" value="30" /> </applet>
Aufgaben zur Selbstkontrolle 1. 2. 3.
Wann benötigt der Besucher einer Website ein Plug-in? Wie sollen nach dem W3C-Standard sämtliche Fremdformate in HTML-Seiten eingebunden wer den? Welche inoffiziellen Möglichkeiten gibt es zur Einbindung von Multimedia-Dateien und Java-Applets?
110
Meta-Tags
Meta-Tags In dieser Lektion lernen Sie: hh was Meta-Tags sind. hh verschiedene Meta-Tags und deren Verwendung kennen.
Meta-Tags ermöglichen es Ihnen, zusätzliche Informationen über Ihr Dokument in Ihre Webseiten ein zufügen. Diese Informationen können z. B. von Suchmaschinen oder Webbrowsern ausgelesen werden, sind aber für die Besucher Ihrer Website unsichtbar. Sie werden im Kopfbereich <head> der HTML-Seite notiert. Für Meta-Tags gab es nie einen allgemeinverbindlichen Standard, was im Laufe der Zeit zu einem regel rechten Wildwuchs an Meta-Tags im Web geführt hat. Vor allem in der Vergangenheit glaubten viele Webentwickler, Sie würden über Nacht zum Superstar, wenn ihre Seiten nur genügend Meta-Tags ent hielten. Einige Meta-Tags können jedoch recht nützlich sein und werden von den meisten Browsern verstanden.
13.1
Allgemeine Syntax
Es gibt zwei verschiedene Schreibweisen, Meta-Tags zu notieren. Welche Alternative Sie benutzen müs sen, ist vom jeweiligen Meta-Tag abhängig: <meta name="…" content="…" /> <meta http-equiv="…" content="…" /> Das erste Attribut bestimmt, um welchen Meta-Tag es sich handelt. In vielen Fällen wird dafür das Attri but name verwendet. Einige Meta-Tags erwarten hier aber stattdessen http-equiv. Im zweiten Attribut content geben Sie den Wert an, den Sie diesem Meta-Tag zuweisen wollen.
13.2
Angaben für Suchmaschinen
Beschreibung des Seiteninhalts Die Angaben in diesem Meta-Tag werden in den Trefferlisten mancher Suchmaschinen angezeigt, wenn Ihr Eintrag gefunden wurde. Er sollte eine kurze, prägnante Beschreibung des Seiteninhaltes und nicht mehr als 256 Zeichen oder 25 Wörter beinhalten. <meta name="description" content="Beschreibung des Inhalts der Datei" /> Ein ähnlicher, weniger gebräuchlichen Meta-Tag für diesen Zweck lautet: <meta name="page-topic" content="Beschreibung des Themas der Seite" />
Angaben für Browser
111
Hier sollten Sie maximal 64 Zeichen verwenden.
Autor Hier können Sie sich als Autor der Seite verewigen. Oft wird hier auch der Name des Unternehmens platziert: <meta name="author" content="Name des Verantwortlichen" />
Suchbegriffe (Keywords) Dieser Meta-Tag wird – aufgrund häufigen Missbrauchs – heute von keiner Suchmaschine mehr beach tet. Er sollte die Suchbegriffe enthalten, unter denen Ihre Seite gefunden werden soll. <meta name="keywords" content="Stichworte zum Inhalt der Datei" />
Datum Ein Meta-Tag, in dem Sie das Erstellungsdatum der Datei angeben können: <meta name="date" content="Datum der Erstellung" />
Angaben für Robots Mit diesem Meta-Tag geben Sie dem »Robot« (oder auch »Spider«) einer Suchmaschine an, nach wie vielen Tagen er wiederkommen soll, um die Seite neu zu indizieren. Dies ist natürlich nur für solche Seiten sinnvoll, deren Inhalt sich häufig ändert. Zu kurze Zeiträume werden jedoch meist ignoriert. <meta name="revisit-after" content="20 days" /> Ein weiterer Meta-Tag, der die Indizierung einzelner Dateien beeinflussen soll, ist folgender: <meta name="robots" content="index, follow" /> Diese Anweisung soll dem Robot mitteilen, die aktuelle Seite zu indizieren und allen Links auf der Seite zu folgen, also auch alle Unterseiten zu indizieren. Andere Möglichkeiten sind: noindex: Indiziere diese Seite nicht. nofollow: Folge den Links auf der Seite nicht. Diese vier Werte lassen sich theoretisch beliebig kombinieren. In der Praxis wird sich jedoch kaum ein Robot an diese Angaben halten, Sie können sie also getrost weglassen!
13.3
Angaben für Browser
Zeichenkodierung Sie können angeben, mit welcher Zeichenkodierung Sie Ihr Dokument gespeichert haben (vgl. »Zeichenkodierung« auf Seite 29). Im Zweifelsfall kann der Browser dadurch die Datei besser interpretieren: <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
f
112
Meta-Tags
Dieser Meta-Tag muss die Angabe http-equiv="content-type" und das Attribut content enthalten. Hinter content wird der MIME-Typ eingegeben, bei HTML-Dateien immer text/html. Dahinter folgt, durch Semikolon getrennt, die Angabe des verwendeten Zeichensatzes.
Datei von Originaladresse laden Wenn man Dateien häufiger aufruft, werden diese vom Browser auf dem eigenen Rechner im soge nannten Cache gespeichert. Das hat den Vorteil, dass Leitungswege und Ressourcen gespart werden, aber auch den Nachteil, dass möglicherweise veraltete Daten angezeigt werden. Mit Hilfe eines MetaTags können Sie erzwingen, dass Ihre Dateien direkt vom Server geholt werden. Dies ist allerdings nur dann sinnvoll, wenn die Dateien häufig geändert werden: <meta http-equiv="expires" content="0" /> Im obigen Beispiel ist die Zeit in Sekunden angegeben. Anstelle der 0 können Sie auch eine beliebige andere Sekundenzahl angeben, nach deren Ablauf der Browser eine Datei, die er im Cache gespeichert hat, wieder neu vom Server lädt. Mit content="43200" stellen Sie beispielsweise einen Wert von 12 Stunden ein. Sie können aber auch ein bestimmtes Datum oder eine bestimmte Uhrzeit angeben. Diese muss im internationalen Format vorliegen: <meta http-equiv="expires" content="Sat, 16 Dec 2006 12:00:00 GMT" />
Weiterleitung Diesen Meta-Tag können Sie verwenden, wenn Sie die Besucher Ihrer Site nach einer gewissen Zeit spanne automatisch auf eine andere Seite weiterleiten wollen (z. B wenn Ihre Website eine neue Adresse hat). <meta http-equiv="refresh" content="5;url=http://www.webmasters-europe.org" /> Die Zahlenangabe im Attribut content bestimmt die Anzeigedauer in Sekunden, bevor die neue Datei aufgerufen wird.
Aufgaben zur Selbstkontrolle 1. 2.
Wie weisen sie einen Suchmaschinen-Robot an, Ihre Seite in einem Monat neu zu indizieren? Wie teilen Sie dem Browser mit, welche Zeichenkodierung Sie in Ihrem Dokument verwendet haben?
Allgemeines
113
Cascading Style Sheets (CSS) In dieser Lektion lernen Sie: hh was Cascading Style Sheets sind und warum sie für modernes Webdesign unerlässlich sind. hh wie Style Sheets verwendet werden und wie Sie effektiv damit arbeiten können.
14.1
Allgemeines
Wenn Sie schon einmal mit einem Layout- oder Textverarbeitungsprogramm gearbeitet haben, kennen Sie vielleicht das Konzept der Stilvorlagen oder Formatvorlagen: Für die verschiedenen Elemente Ihrer Seite wie Absätze, Überschriften Tabellen etc. werden verschiedene Eigenschaften (Schriftart, Schriftgröße, Einzug usw.) definiert und diesen Elementen einmal zugewiesen. Wenn Sie nun die Eigen schaften für eines dieser Elemente in der Stilvorlage ändern, ändern sich automatisch alle Elemente, denen diese Stilvorlage zugewiesen wurde. Mit dem Wunsch, Webseiten immer aufwändiger und präziser zu gestalten, wurde dieses Konzept in Form von Cascading Style Sheets (CSS) auf HTML-Seiten übertragen. Mit CSS ist es möglich, universelle Formatierungsvorgaben für jedes einzelne Element Ihrer HTML-Seiten zu machen und diese Vorgaben zentral zu verwalten und nach Belieben zu ändern. Sie können mit Hilfe von CSS HTML-Elemente exakt auf Ihrer Seite positionieren, Größen, Randstile, Schrift- und Hintergrundfarben festlegen und Objekte sogar auf verschiedenen Ebenen übereinander platzieren, wie es bisher nur in DTP-Programmen möglich war. Weiterhin erlauben CSS die Vergabe unterschiedlicher Stilvorlagen für verschiedene Ausgabegeräte. So ist es z. B. möglich, für die Darstellung einer Webseite im Browser eine andere CSS-Vorgabe zu definieren als für die Ausgabe auf einem Drucker – die Webseite sieht dann im Druck komplett anders aus als im Browser. Es lassen sich auch CSS-Vorgaben für die Sprachausgabe definieren, die festlegen, mit welcher Stimme oder Betonung eine Webseite vorgelesen wird. Mit Hilfe von CSS läßt sich also eine vollständige Trennung zwischen Form (Darstellung) und Inhalt (Information) einer Seite erreichen: Die Darstellung ist abhängig vom Ausgabemedium, der Inhalt ist stets derselbe und muss nicht verändert werden. Aus diesem Grund haben CSS die ohnehin spärlichen Formatierungsmöglichkeiten, die HTML bot, mitt lerweile vollständig ersetzt. Sie sollten daher in HTML nur noch strukturelle Tags verwenden, die das Dokument in logisch gegliederte Bereiche aufteilen. Die Vorgaben, wie diese Elemente genau auszusehen haben, werden mit Hilfe von CSS gemacht. Neben CSS gibt es noch eine ganze Reihe weiterer Stylesheet-Sprachen (z. B. XSL), für Webseiten haben sich jedoch CSS vollständig durchgesetzt. CSS sind selbst kein HTML, sondern können als Ergänzung des HTML-Standards betrachtet werden. Die Version 1.0 von 1996 wird von den aktuellen Browsern mittlerweile nahezu vollständig unterstützt, die momentan aktuelle Version ist CSS 2.0 von 1998. Die Version 2.0 wird bis heute nicht von allen Browsern vollständig umgesetzt. Firefox oder Safari setzen den größten Teil von CSS 2.0 korrekt um, der Internet Explorer 6 hingegen bietet nur eine mangelhafte
114
Cascading Style Sheets (CSS)
und teilweise fehlerhafte Unterstützung. Bei der Gestaltung von Webseiten ergeben sich dadurch oft unnötige Schwierigkeiten. Momentan arbeitet das W3C an einer Zwischenversion CSS 2.1, die die Erfahrungen mit CSS 2.0 berück sichtigt und Unstimmigkeiten korrigiert. Version 2.1 bringt selbst keine grundlegend neuen Features mit sich. Gleichzeitig ist bereits CSS 3.0 in der Entwicklung.
14.2
Verwendung von CSS
Sie haben prinzipiell drei Möglichkeiten, CSS-Vorgaben für Ihre HTML-Dokumente zu definieren: 1.
2. 3.
Sie notieren die CSS-Vorgaben in einer separaten Datei, die mit beliebig vielen HTML-Dokumenten verknüpft werden kann. Die Vorgaben gelten dann für alle verknüpften Seiten, und Änderungen in dieser Datei wirken sich auf alle verknüpften Seiten aus. Sie notieren Ihre CSS-Vorgaben im head einer HTML-Datei. In diesem Fall gelten die Vorgaben für diese eine Seite. Sie notieren den CSS-Code direkt im body Ihrer HTML-Datei nur für ein bestimmtes Element, z. B. einen Absatz.
Diese drei Möglichkeiten können Sie nach Belieben kombinieren. Es versteht sich von selbst, dass die erste Variante dem Grundgedanken von CSS am nächsten kommt und deshalb im Normalfall benutzt werden sollte. Allerdings haben die anderen Varianten einen Vorteil: Sie überschreiben die Vorgaben in der externen Datei, d. h. die Wertigkeit steigt vom Allgemeinen zum Besonderen. Dadurch können Sie Ihre allgemeinen Vorgaben für eine spezielle Datei (z.B. Ihre Startseite) oder ein Element (z. B. eine besondere Grafik auf Ihrer Seite) außer Kraft setzen.
Einbinden von CSS-Vorgaben in den Dateikopf Der Übersichtlichkeit halber wollen wir uns im folgenden als erstes Variante 2 näher ansehen: Wir notieren unsere CSS-Vorgaben in den head unserer HTML-Datei. 1. 2.
3. 1 2 3 4 5 6 7
Erstellen Sie sich dafür eine neue XHTML-Datei mit dem gewohnten Grundgerüst und füllen Sie den body mit etwas Text. Strukturieren Sie den Text mit HTML. Er sollte folgende Elemente enthalten: Mindestens eine Über schrift <h1>, einige Absätze <p>, einige fette <strong> und einige kursive Textbereiche <em> sowie ein paar Hyperlinks <a href="…">. Notieren Sie dann folgenden HTML-Code in den head Ihres Dokuments: <head> <title>Seite mit Stylesheets</title> <style type="text/css" media="screen"> </style> </head>
Codebeispiel 33: Einbinden von CSS in den head einer HTML-Datei
Mit <style> definieren Sie in normaler HTML-Syntax den Bereich, in dem Sie Ihre CSS-Vorgaben notieren. Dieser Tag teilt dem Browser mit, dass nun CSS-Vorgaben folgen. Das Attribut type gibt an, welche Stylesheet-Sprache Sie benutzen, als Wert weisen Sie den MIME-Typ der gewünschten Stylesheet-Sprache zu (normalerweise text/css). Mit dem Attribut media, das im Gegensatz zu type kein Pflichtattribut ist, können Sie das Ausgabeme dium bestimmen, für das Ihre Vorgaben gelten sollen. Neben der hier verwendeten Wertzuweisung screen (für die Bildschirmdarstellung) gibt es weitere mögliche Angaben, z. B.
Allgemeine Syntax
115
hh media="print" für den Druck (die Browser sollten diese CSS-Vorgaben verwenden, wenn der Anwender die Webseite ausdrucken möchte) hh media="aural" für die Sprachausgabe hh media="all" für alle Medien Durch die Definition mehrerer style-Bereiche mit jeweils unterschiedlichen media-Attributen können Sie CSS-Vorgaben für verschiedene Ausgabemedien definieren. Das könnte dann etwa so aussehen: 1 2 3 4 5 6 7 8 9 10 11 12 13
<head> <title>Seite mit Stylesheets</title> <style type="text/css" media="all"> </style> <style type="text/css" media="screen"> </style> <style type="text/css" media="print"> </style> </head>
Codebeispiel 34: Definition verschiedener CSS-Vorgaben für unterschiedliche Ausgabemedien
In diesem Fall würden Sie unter all diejenigen Vorgaben notieren, die für sämtliche Ausgabemedien gleichermaßen gelten. In den anderen style-Bereichen notieren Sie dann die speziellen Vorgaben nur für diese Ausgabegeräte. Für unser Beispiel bleiben wir jedoch erst einmal bei media="screen". 4.
Als nächstes müssen wir noch sicherstellen, dass ältere Browser, die CSS noch nicht verstehen, diese nicht fälschlicherweise als HTML zu interpretieren versuchen. Das geschieht mit Hilfe eines HTMLKommentars, den wir innerhalb des style-Elements platzieren: <style type="text/css" media="screen"><!---></style>
Dadurch ignorieren ältere Browser den nachfolgenden CSS-Code. Neuere Browser hingegen wissen, dass es sich nicht wirklich um einen Kommentar handelt, da er innerhalb einer style-Definition steht. Innerhalb dieses HTML-Kommentars stehen nun unsere CSS-Vorgaben. Zu diesem Zeitpunkt verlassen wir HTML. Alles, was zwischen diesen Kommentarzeichen steht, ist CSS-Syntax und folgt eigenen Regeln.
14.3
Allgemeine Syntax
Die einfachste Möglichkeit, mit CSS allgemeine Formatierungsvorgaben für Ihr Dokument zu definieren, ist die Zuweisung von Eigenschaften zu vorhandenen HTML-Tags. Sie können mit CSS jedem beliebigen HTML-Element, das Sie in Ihrem Dokument verwenden, beliebige Eigenschaften zuweisen. Dies geschieht über sogenannte Selektoren. Beispiel Sie möchten alle Absätze <p> in Ihrem Dokument mit der Schriftart Verdana formatieren. Dazu notieren Sie folgenden Code: <style type="text/css" media="screen"><!- p { font-family: Verdana; } --></style>
116
Cascading Style Sheets (CSS)
In diesem Fall benutzen Sie einen Selektor für den p-Tag. Das bedeutet, dass Sie sämtlichen p-Tags in Ihrem Dokument bestimmte Eigenschaften zuweisen. Notieren Sie dazu einfach p innerhalb Ihrer styleDefinition, allerdings ohne die aus HTML gewohnten spitzen Klammern. Diese haben in CSS nichts zu suchen. Die Eigenschaften, die Sie für den p-Tag vergeben wollen, notieren Sie dahinter in geschweifte Klammern { }. In diesen Klammern steht das Attribut, das Sie ändern wollen (hier font-family), und nach einem Doppelpunkt der Wert, den Sie diesem Attribut zuweisen wollen (hier Verdana). Danach folgt ein Semikolon, nach dem Sie weitere Attribute des p-Tags ändern können. Die allgemeine Syntax für CSS-Vorgaben sieht also folgendermaßen aus: selektor { attribut: wert; } Neben der Schriftart wollen wir nun noch die Schriftgröße ändern. Dazu notieren wir nach dem Semi kolon ein weiteres Attribut für den p-Selektor: <style type="text/css" media="screen"><!- p { font-family: Verdana; font-size: 12px; } --></style> Dabei spielt es theoretisch keine Rolle, ob Sie die Attribute untereinander oder nebeneinander schreiben. Auch die Verwendung von Leerzeichen ist fakultativ. Obiges Beispiel könnte also auch so aussehen: <style type="text/css" media="screen"><!- p { font-family:Verdana;font-size:12px; } --></style> Es empfiehlt sich jedoch dringend, Ihren CSS-Code mit Einrückungen und Leerzeichen übersichtlich zu strukturieren. Im Gegensatz zu HTML müssen Sie in CSS Maßeinheiten für die Werte angeben (hier Pixel px). Zwis chen dem Wert und der Maßangabe darf kein Leerzeichen stehen! Sie können in CSS verschiedene Maßeinheiten verwenden, je nach den Fähigkeiten des Ausgabemedi ums (px, pt, cm, em, % etc., mehr dazu auf Seite 137). Für die Bildschirmdarstellung in einem Browser empfiehlt sich natürlich die Verwendung von Pixeln oder Prozentangaben. Pixel sind hier übrigens die einzige absolute Größe; die Angabe von Punktgrößen pt würde zu untertschiedlichen Schriftgrößen auf Windows- und Mac-Systemen führen.
f
Die Schriftarten, die Sie auf Ihren Seiten verwenden, müssen auf dem System des Anwenders installiert sein! Deshalb müssen Sie bei der Definition von Schriften darauf achten, dass Sie nur solche verwenden, die auf allen gängigen Systemen (Windows, Mac, Unix) vorhanden sind. Es gibt z. Z. nur 4 Schriftarten, auf die das zutrifft: hh hh hh hh
Arial (Windows) bzw. Helvetica (Mac) als serifenlose Schrift Times bzw. Times New Roman als Serifenschrift Courier als dicktengleiche Schrift Verdana
Alle anderen Schriften können Sie demnach nicht verwenden. Es ist außerdem hilfreich, mehrere Schriftalternativen anzubieten. Der Browser verwendet dann die erste, die er auf dem System findet: font-family: Verdana, Helvetica, Arial;
Farbzuweisung
14.4
117
Farbzuweisung
Nun wollen wir noch die Textfarbe in rot ändern: <style type="text/css" media="screen"><!- p { font-family: Verdana, Helvetica, Arial; font-size: 12px; color: #ff0000; } --></style> Die Zuweisung von Farben geschieht nach demselben Prinzip wie in HTML: nach der Raute # folgt der RGB-Wert in hexadezimaler Form. Beachten Sie, dass sich das Attribut color immer auf die Textfarbe bezieht, nie auf etwas anderes! Obwohl der Text in den meisten Browsern ohnehin schwarz dargestellt wird, sollten Sie auch bei schwarzem Text dennoch die Textfarbe angeben: color: #000000; In CSS haben Sie die Möglichkeit, hexadezimale Farbangaben zu komprimieren, indem Sie zwei gleiche Ziffern zusammenfassen. Obige Beispiele können Sie also auch folgendermaßen notieren: color: #f00; (rot) color: #000; (schwarz) Daneben können Sie auch die 16 benannten Farben (red, yellow, green, blue, black, white etc.) verwenden, natürlich ohne die Raute: color: red; color: black;
14.5
Allgemeine Vorgaben für Ihr Dokument
Bis jetzt gelten unsere Vorgaben allerdings nur für Text, der zwischen dem HTML-Tagpaar <p></p> steht. Alle anderen Elemente auf unserer Seite (Überschriften etc.) bleiben davon unberührt, für sie gilt nach wie vor die Standardeinstellung des Browsers. Um den gesamten Text auf unserer Seite einheitlich zu formatieren, notieren wir uns einen neuen Selektor, und zwar für den body-Tag selbst. Diesen platzieren wir einfach vor oder nach dem p-Selektor innerhalb unseres style-Bereiches und weisen ihm ebenfalls Schriftart und -größe sowie eine Textfarbe zu: <style type="text/css" media="screen"><!- p { font-family: Verdana, Helvetica, Arial; font-size: 12px; color: #000; } body { font-family: Verdana, Helvetica, Arial; font-size: 12px; color: #000; } --></style> Theoretisch könnten wir nun die Vorgaben für den p-Selektor löschen, da CSS nach dem Vererbungsprinzip arbeitet: Eine CSS-Vorgabe für ein Element gilt für alle in ihm enthaltenen Elemente, es sei denn für eines dieser Elemente wurde etwas anderes definiert. In unserem Beispiel würden die Vorga ben im body-Selektor also auch für Absätze <p>, Überschriften <h1> usw. gelten, da diese allesamt im body-Element enthalten sind.
f
118
Cascading Style Sheets (CSS)
In der Praxis wird dieses Prinzip von den Browsern jedoch noch nicht vollständig unterstützt, weshalb Sie bei den allgemeinen Vorgaben für Ihr Dokument – wie hier gezeigt – redundant arbeiten, die Vorga ben also sowohl für den body- als auch für den p-Tag machen sollten. Im body-Selektor können wir natürlich zusätzliche Angaben machen, die nur für diesen gelten, so etwa die Hintergrundfarbe (background-color): <style type="text/css" media="screen"><!- p { font-family: Verdana, Helvetica, Arial; font-size: 12px; color: #000; } body { font-family: Verdana, Helvetica, Arial; font-size: 12px; color: #000; background-color: #fff; } --></style> Als nächstes vergeben wir die Eigenschaften für unsere Überschriften <h1>. Diese sollen etwas größer und fett dargestellt werden. Letzteres ändern wir über die Eigenschaft font-weight (= »Gewicht«): <style type="text/css" media="screen"><!- p { font-family: Verdana, Helvetica, Arial; font-size: 12px; color: #000; } body { font-family: Verdana, Helvetica, Arial; font-size: 12px; color: #000; background-color: #fff; } h1 { font-family: Verdana, Helvetica, Arial; font-size: 18px; font-weight: bold; color: #000; } --></style> Gerade für Elemente wie Überschriften oder Tabellenkopfzeilen, die in den meisten Browsern ohnehin fett angezeigt werden, besteht in CSS auch die Möglichkeit, dies abzuschalten: mit font-weight: normal können Sie bestimmen, dass der betreffende Text in einem regulären Schnitt angezeigt werden soll. Nun fehlen noch die Vorgaben für die Tags <strong> und <em>. Diese werden zwar in den meisten Browsern bereits fett bzw. kursiv dargestellt, das ist jedoch nicht selbstverständlich. Deshalb sollten wir es noch einmal dezidiert angeben: <style type="text/css" media="screen"><!- p { font-family: Verdana, Helvetica, Arial; font-size: 12px; color: #000; } body { font-family: Verdana, Helvetica, Arial; font-size: 12px; color: #000; background-color: #fff; } h1 { font-family: Verdana, Helvetica, Arial; font-size: 18px; font-weight: bold; color: #000; } strong { font-weight: bold; } em { font-style: italic; } --></style> Es wäre natürlich auch möglich, für diese Elemente zusätzliche oder gar vollkommen andere Eigen schaften zu definieren:
Allgemeine Vorgaben für Ihr Dokument
119
strong { font-weight: normal; color: red; } em { font-style: italic; font-weight: bold; } Jetzt würden mit <strong> ausgezeichnete Textbereiche nicht mehr fett, sondern rot angezeigt wer den. Mit <em> ausgezeichnete Textbereiche wären weiterhin kursiv, aber zusätzlich auch fett. Für die genannten Attribute sind folgende Eigenschaften möglich (es werden aber nicht alle Werte von allen Browsern unterstützt): font-weight:
bold (fett) bolder (extrafett) lighter (dünner) 100 (extra-dünn), 200, 300 ,400, 500, 600, 700, 800, 900 (extrafett) normal (normales Schriftgewicht)
font-style:
italic (kursiv) oblique (schräggestellt) normal (normaler Stil)
Weitere Eigenschaften zur Textformatierung: font-variant:
small-caps (Kapitälchen) normal (keine Schriftvariante)
word-spacing:
Wortabstand. Erwartet numerische Angaben, jedoch keine Prozentangaben.
letter-spacing:
Zeichenabstand. Erwartet numerische Angaben, jedoch keine Prozentangaben.
line-height:
Zeilenabstand. Erwartet numerische Angaben. Auch Prozentangaben sind erlaubt (bezogen auf die Schriftgröße).
text-align:
left (linksbündig, Standardeinstellung) center (zentriert) right (rechtsbündig) justify (Blocksatz)
text-indent:
Erstzeileneinzug. Erwartet numerische Angaben .
Als letztes wollen wir noch das Erscheinungsbild unserer Hyperlinks anpassen. Dazu notieren wir einen weiteren Selektor für den a-Tag: <style type="text/css" media="screen"><!- p { font-family: Verdana, Helvetica, Arial; font-size: 12px; color: #000; } body { font-family: Verdana, Helvetica, Arial; font-size: 12px; color: #000; background-color: #fff; } h1 { font-family: Verdana, Helvetica, Arial; font-size: 18px; font-weight: bold; color: #000; } strong { font-weight: bold; } em { font-style: italic; } a { color: #0f0; text-decoration: underline; } --></style>
120
Cascading Style Sheets (CSS)
Im obigen Beispiel werden alle Links auf unserer Seite grün dargestellt. Mit text-decoration geben wir zusätzlich an, dass sie unterstrichen werden sollen. Das Attribut text-decoration erlaubt folgende Werte: text-decoration:
underline (unterstrichen) overline (Linie darüber) line-through (durchgestrichen) blink (blinkend) none (keine Dekoration)
Diese Werte können auch kombiniert werden, indem sie nacheinander – durch Leerzeichen getrennt – notiert werden (sofern sie sich nicht widersprechen): text-decoration: underline overline;
f
Definieren Sie sich von nun an in all Ihren Dokumenten zuerst die oben genannten allgemeinen Vorgaben für body, p, h1–h6, strong, em, a und ggf. auch für weitere Selektoren (z. B. td und th). Sie legen damit fest, wie Ihr Dokument aussehen soll, wenn nichts anderes vorgegeben ist. Wie Sie für einzelne Elemente Abweichungen von den allgemeinen Vorgaben definieren, werden wir uns im folgenden ansehen.
14.6
Pseudoformate
14.6.1
14.Verschiedene Zustände für Hyperlinks definieren
Sie können für Hyperlinks verschiedene Darstellungen definieren, je nachdem, in welchem Zustand sie sich gerade befinden. Ein Hyperlink kann folgende Zustände annehmen: hh hh hh hh hh
normal (noch nicht besucht) besucht mit der Tabulatortaste fokussiert Maus darüber Maus gedrückt
Diese Zustände definieren Sie mit Hilfe sogenannter Pseudoformate. Pseudoformate werden mit einem Doppelpunkt einfach an den Selektor angehängt (ohne Leerzeichen). Für o. g. Zustände existieren folgende Pseudoformate: hh hh hh hh hh
a:link (noch nicht besuchte Seiten) a:visited (bereits besuchte Seiten) a:focus (mit der Tabulatortaste fokussiert) a:hover (Maus darüber) a:active (Maus gedrückt)
Bei der Definition solcher Pseudoformate sollten Sie o. g. Reihenfolge einhalten. Die Zuweisung ver schiedener Linkzustände könnte folgendermaßen aussehen: a:link { color: #0f0; text-decoration: none; } a:visited { color: #f00; text-decoration: none; } a:focus { color: #00f; text-decoration: underline; }
Pseudoformate
121
a:hover { color: #00f; text-decoration: underline; } a:active { color: #ff0; text-decoration: none; } Sie definieren also fünf separate Selektoren für den a-Tag, jedesmal für einen anderen Zustand.
14.6.2
Verschiedene Zustände für andere Elemente definieren
Die Pseudoformate :focus und :hover gelten nicht nur für Hyperlinks, Sie können sie jedem beliebigen Element zuweisen, z. B. td:hover { background-color: gray; } Dies funktioniert allerdings im Internet Explorer nicht.
14.6.3
Initialen und andere typographische Effekte
Pseudoformate für Absätze Es gibt Pseudoformate nicht nur für Mauszustände. Es lassen sich damit auch besondere typographische Effekte etwa für Absätze <p> erzeugen: hh p:first-line formatiert die erste Zeile des Textes anders hh p:first-letter formatiert das erste Zeichen des Textes als Initiale Beispiel p { font-family: Verdana, Helvetica, Arial; font-size: 12px; color: #000; } p:first-letter { font-size: xx-large; color: red; } Zuerst müssen Sie natürlich wie gewohnt Ihre allgemeinen Vorgaben für den p-Selektor definieren. Danach notieren Sie einen weiteren Selektor für p, diesmal mit dem Pseudoformat :first-letter. Dadurch wird der gesamte Absatz so formatiert wie in der ersten Regel für den p-Selektor definiert, der erste Buchstabe wird jedoch in maximaler Größe (xx-large) und rot dargestellt.
Pseudoformate für automatisch erzeugten Inhalt Sie können mit CSS an nahezu jedes beliebige Element automatisch Text oder Grafiken »anhängen« las sen. Diese Texte oder Bilder tauchen nirgends im HTML-Quelltext auf (und sind im Browser auch nicht auswählbar), sondern werden beim Laden der Seite automatisch generiert. Die Pseudoformate hierfür lauten hh :before (Inhalt, der vor dem betreffenden Element eingefügt wird) hh :after (Inhalt, der nach dem betreffenden Element eingefügt wird)
122
Cascading Style Sheets (CSS)
Beispiel Ihr HTML-Dokument enthält eine Preisliste in folgender Form: <ul> <li>Hemd: 59</li> <li>Hose: 105</li> <li>Jacke: 200</li> <li>Rock: 89</li> </ul> Bei den Preisen fehlt die Angabe »EUR«, weil die Werte z. B. aus einer Datenbank ausgelesen werden. Diese Angabe können Sie sich mit folgender CSS-Vorgabe automatisch erzeugen lassen: li:after { content: " EUR"; } Nach dem Attribut content definieren Sie den einzufügenden Inhalt. Text muss in Anführungszeichen stehen. Im Beispiel wurde vor »EUR« noch ein Leerzeichen eingefügt. Browserdarstellung: • Hemd: 59 EUR • Hose: 105 EUR • Jacke: 200 EUR • Rock: 89 EUR Möchten Sie stattdessen eine Grafik einfügen, notieren Sie folgendes: li:after { content: url(../../grafik.gif); } Die Referenzierung von Grafiken funktioniert nach dem gleichen Prinzip wie in HTML, nur dass Sie zuerst mit url angeben müssen, dass es sich überhaupt um einen Dateipfad handelt. Danach folgt in runden Klammern die Referenzierung. Sie können auch Text und Grafiken kombinieren, indem Sie nach content einfach beides hintereinander angeben: li:after { content: url(../../grafik.gif)"Text"; } Die Variante :before funktioniert nach demselben Prinzip. Die Pseudoformate :before und :after werden vom Internet Explorer 6.x noch nicht unterstützt.
14.7
Exkurs: Spezielle HTML-Elemente für CSS
Es gibt zwei HTML-Elemente, die für sich selbst keinerlei Bedeutung haben. Diese Elemente sind der HTML-Tag <div> und der HTML-Tag <span>. hh <div> (engl. division, Abschnitt> ist ein Blockelement und erzeugt – wie der p-Tag – einen Absatz. hh <span> (engl. Bereich, Spanne) ist ein Inline-Element und erzeugt im Browser keine visuelle Aus gabe. Diese Tags sind ausschließlich dafür gedacht, mit CSS weiterformatiert zu werden. <span> können Sie z. B. verwenden wie einen Textmarker: Der Text, der damit umschlossen wird, kann z. B. mit einer anderen Farbe oder Hintergrundfarbe versehen werden. Der HTML-Code dafür könnte so aussehen: <p>Hier kommt Text der <span>markierte Bereiche</span> enth&auml;lt.</p>
Klassen
123
Der zugehörige CSS-Selektor im head der Datei so: span { background-color: gray; } Browserdarstellung:
<div> hat gegenüber dem p-Tag einen entscheidenden Vorteil: Er kann weitere Blockelemente enthalten. Das div-Element läßt sich vielleicht am ehesten mit einem Textrahmen aus einem DTP-Programm vergleichen: Sie können damit einen gesonderten, in sich abgeschlossenen Bereich definieren, der selbst weitere Elemente wie Überschriften, Absätze, Listen, Tabellen, aber auch Bilder enthalten kann. Mit CSS formatiert und positioniert können Sie damit nahezu jedes Layout realisieren: Navigationsleisten, Textspalten, Teaserboxen etc. Die Verwendung des div-Tags werden wir uns im folgenden noch genauer ansehen.
14.8
Klassen
Bisher haben wir kennengelernt, wie wir bestehenden HTML-Tags mit Hilfe von Selektoren verschiedene Eigenschaften zuweisen können. Sehr häufig gibt es aber die Anforderung, identischen HTML-Elementen unterschiedliche Eigenschaften zuzuweisen. So möchten Sie z. B. einen Absatz erzeugen, der sich durch eine andere Textfarbe vom Rest abhebt, oder einen Link, der größer als die anderen ist. Eine Möglichkeit, solche Unterscheidungen zu treffen, sind Klassen. Klassen sind frei wählbare Namen, die Sie in einem ersten Schritt dem HTML-Element zuweisen, das Sie gesondert formatieren möchten. Beispiel Sie haben drei Absätze, von denen der erste und der letzte nach den allgemeinen Vorgaben formatiert werden sollen. Der mittlere jedoch soll in blauer Farbe und fett erscheinen. Der HTML-Quelltext sieht so aus: <p>Dies ist der erste Absatz.</p> <p class="hervorgehoben">Dies ist der zweite Absatz.</p> <p>Dies ist der dritte Absatz.</p> Im betreffenden p-Tag notieren Sie das HTML-Attribut class und vergeben dort einen aussagekräftigen Namen. In den CSS-Vorgaben im head Ihrer Datei notieren Sie folgendes: p { font-family: Verdana, Helvetica, Arial; color: black; font-size: 12px; } p.hervorgehoben { color: blue; font-weight: bold; } Der Klassenname wird mit einem Punkt an den betreffenden Selektor angehängt. Danach definieren Sie lediglich die Eigenschaften, die den Absatz von den anderen unterscheiden sollen. Es ist nicht not wendig, noch einmal Vorgaben für Schriftart und -größe zu machen, wenn Sie diese nicht ändern wol len. Sie können eine Klasse so oft und so vielen Elementen zuweisen, wie Sie wollen, im Beispiel können also auch mehrere Absätze die Klasse hervorgehoben tragen:
124
Cascading Style Sheets (CSS)
<p>Dies ist der erste Absatz.</p> <p class="hervorgehoben">Dies ist der zweite Absatz.</p> <p>Dies ist der dritte Absatz.</p> <p>Dies ist der vierte Absatz.</p> <p class="hervorgehoben">Dies ist der f&uuml;nfte Absatz.</p> <p class="hervorgehoben">Dies ist der sechste Absatz.</p> Mit der obigen CSS-Syntax ist es allerdings nur möglich, Absätze <p> zu formatieren. Wenn Sie die besonderen Eigenschaften hingegen verschiedenen Elementen in Ihrem Dokument (Überschriften, Listen etc.) zuweisen möchten, lassen Sie in Ihren CSS-Vorgaben den Tag-Selektor p vor dem Punkt einfach weg: .hervorgehoben { color: blue; font-weight: bold; } Jetzt ist auch folgender HTML-Code möglich: <h1>Dies ist eine normale &Uuml;berschrift</h1> <p>Dies ist ein normaler Absatz.</p> <h1 class="hervorgehoben">Dies ist eine hervorgehobene &Uuml;berschrift</h1> <p class="hervorgehoben">Dies ist ein hervorgehobener Absatz.</p>
f
Die Zuweisung von Klassen erfordert also zwei Schritte: Im ersten Schritt definieren Sie in Ihren CSSVorgaben den Klassennamen mit einem Punkt samt seinen Eigenschaften: .klassenname {eigenschaft: wert;} Im zweiten Schritt weisen Sie dann diese Klasse ohne den Punkt den gewünschten HTML-Elementen zu: <element class="klassenname">Inhalt</element>
14.9
Individualformate
Auf ganz ähnliche Weise wie Klassen funktionieren die sogenannten Individualformate: Sie vergeben einen selbstdefinierten Namen, den Sie den gewünschten HTML-Elementen zuweisen. In den CSS-Vor gaben ändert sich lediglich der Punkt in eine Raute, und das HTML-Attribut class wird durch id ersetzt. Beispiel CSS: p#grauebox { background-color: gray; } HTML: <p id="grauebox">Absatz mit grauem Hintergrund</p> Was ist nun aber der Unterschied zwischen Klassen und Individualformaten? Er liegt in der Logik: Wie wir gesehen haben, können Sie eine Klasse so oft und so vielen Elementen auf Ihrer Seite zuweisen, wie Sie möchten. IDs hingegen dürfen nur ein einziges Mal in einem HTML-Dokument vorkommen. Dadurch sind sie gegenüber anderen Elementen eindeutig identifizierbar. IDs verwenden Sie also immer dann, wenn Sie wissen, dass ein bestimmtes Element nur einmal auf jeder Ihrer Seiten vorkommt (z. B. die Navigationsleiste). Klassen hingegen nutzen Sie für Elemente, die in Ihrem Layout mehrfach vorkommen (z. B. Überschriften).
Hintergründe, Konturen und Abstände
125
Aus diesem Grund dienen IDs meist dazu, das Layout einer Seite vorzugeben und sie in verschiedene Bereiche aufzuteilen (Kopfbereich, Inhaltsbereich etc.), während der Inhalt der Seite mit Klassen formatiert wird. Dieses »Layoutraster« wird häufig im zusammenhang mit div-Tags erzeugt (ist aber keineswegs auf diese beschränkt). Beispiel Folgender HTML-Code teilt eine Seite in verschiedene Layoutbereiche auf, denen mit Hilfe von CSS unterschiedliche Eigenschaften zugewiesen werden können: <div <div <div <div
id="kopf">Hier wird die Navigation platziert</div> id="linkespalte">Hier erscheint die Subnavigation</div> id="inhaltsbereich">Hier ist der Platz f&uuml;r den Inhalt</div> id="rechtespalte">Hier werden Teaserboxen usw. platziert</div>
Die einzelnen div-Container können nun mit beliebigem Inhalt (Text, Bilder etc.) befüllt werden. Mit CSS werden ihnen dann die entsprechenden Eigenschaften (wie Position, Größe, Farbe usw.) zugewiesen: div#kopf { … } div#linkespalte { … } div#inhaltsbereich { … } div#rechtespalte { … } Auch bei IDs können Sie den Tag-Selektor vor der Raute weglassen: #kopf { … } #linkespalte { … } #inhaltsbereich { … } #rechtespalte { … } IDs werden auch häufig benötigt, wenn die betreffenden Elemente mit Hilfe von JavaScript manipuliert werden sollen.
14.10 Hintergründe, Konturen und Abstände 14.10.1 Einbinden von Hintergrundbildern Wie wir gesehen haben, können wir mit CSS für jedes beliebige HTML-Element (nicht nur für den body) eine Hintergrundfarbe definieren. Das funktioniert sowohl für Blockelemente als auch für Inline-Ele mente. Beispiele p { background-color: #d48e80; } a:hover { background-color: #3b8ed8; } Ebenso universell lässt sich eine Grafik als Hintergrund einbinden. Die Syntax dafür lautet background-image: url(../grafik.gif); wobei die Referenzierung wieder mit url eingeleitet werden muss. In den runden Klammern dahinter steht der Pfad zur Grafik.
126
Cascading Style Sheets (CSS)
Kachelmuster steuern Im Gegensatz zu HTML lässt sich mit CSS die Darstellung von Hintergrundbildern sehr flexibel steuern. So können Sie z. B. die automatische Wiederholung abschalten: p { background-image: url(../grafik.gif); background-repeat: no-repeat; } Weitere mögliche Werte für background-repeat sind: background-repeat:
repeat (wiederholen, Standardwert) repeat-x (nur waagrecht wiederholen) repeat-y (nur senkrecht wiederholen) no-repeat (nicht wiederholen)
Hintergrundbild positionieren Mit background-position können Sie die exakte Position des Hintergrundbilds numerisch festlegen. Geben Sie dazu zwei Werte durch Leerzeichen getrennt ein. Der erste Wert ist der horizontale Abstand von links, der zweite ist der vertikale Abstand von oben: p { background-image: url(../grafik.gif); background-repeat: no-repeat; background-position: 20px 50px; } Andere mögliche Werte anstelle numerischer Werte sind: background-position: top (oben bündig) bottom (unten bündig) center (horizontal oder vertikal zentriert) left (linksbündig) right (rechtsbündig)
Wasserzeicheneffekt Mit dem Attribut background-attachment können Sie festlegen, dass das Hintergrundbild beim Scrollen der Seite stehenbleibt. Der Text scrollt also über das Bild hinweg: p { background-image: url(../grafik.gif); background-repeat: no-repeat; background-position: 20px 50px; background-attachment: fixed; } Mögliche Werte sind: background-attachment: scroll (mitscrollen, Standardeinstellung) fixed (Hintergrundbild bleibt stehen)
14.10.2 Festlegen von Konturen Sie können jedem beliebigen Objekt auf Ihrer Seite eine Kontur verleihen. Dazu stehen Ihnen eine Reihe von Optionen zur Verfügung.
Konturstärke div.rand { border-width: 1px; }
Hintergründe, Konturen und Abstände
127
Mit border-width definieren Sie die Konturstärke z. B. in Pixeln. Sie können jedoch auch für jede der vier Seiten eines Objekts separate Konturstärken definieren. In diesem Fall notieren Sie die separaten Attribute border-top-width, border-left-width, border-right-width oder borderbottom-width, oder Sie geben für das Attribut border-width vier Werte – durch Leerzeichen getrennt – an: div.rand { border-top-width: 1px; border-right-width: 2px; border-bottom-width: 3px; border-left-width: 4px; } oder div.rand { border-width: 1px 2px 3px 4px; } Die Reihenfolge hierbei ist im Uhrzeigersinn: oben, rechts, unten, links.
Randstil div.rand { border-width: 1px; border-style: solid; } Mit border-style definieren Sie den Rahmentyp. Mögliche Werte sind border-style:
none (kein Rahmen) hidden (unsichtbarer Rahmen, gilt nur für Tabellenzellen) dotted (gepunktet) dashed (gestrichelt) solid (durchgezogen) double (doppelt) groove (3D-Effekt) ridge (3D-Effekt) inset (3D-Effekt) outset (3D-Effekt)
Alternativ können Sie mit border-top-style usw. auch jeder Kante einen eigenen Stil zuweisen.
Konturfarbe Die Rahmenfarbe definieren Sie mit border-color: div.rand { border-width: 1px; border-style: solid; border-color: red;} Die drei Werte border-width, border-style und border-color müssen Sie immer gemeinsam benutzen. Sie können diese Angaben, durch Leerzeichen getrennt, auch komprimiert in einem einzigen Attribut border angeben (die Reihenfolge spielt dabei keine Rolle): div.rand { border: 1px solid red; }
f
128
Cascading Style Sheets (CSS)
14.10.3 Festlegen von Außen- und Innenabständen Blockelemente erzeugen bekanntlich einen Außenabstand in der Browserdarstellung. Diesen Abstand können Sie mit dem Attribut margin und der Angabe von numerischen Werten beeinflussen (und ggf. deaktivieren): p { margin: 0px; } Sie können auch für jede Seite individuelle Abstände definieren. Notieren Sie dazu entweder die sepa raten Attribute margin-top, margin-bottom, margin-left und margin-right, oder Sie geben alle vier Werte im Attribut margin an (wieder oben beginnend im Uhrzeigersinn): p { margin: 0px 10px 5px 10px; } Damit nicht zu verwechseln ist der Innenabstand padding, der einen Abstand zu dem Element erzeugt, das innerhalb des betreffenden Objekts liegt: div#navigation { padding: 5px; } Es sind auch individuelle Innenabstände mit padding-top usw. möglich. Folgende Grafik verdeutlicht den Unterschied zwischen margin und padding:
Abb. 14: Schematische Darstellung der Attribute margin und padding.
Nach dem offiziellen Standard werden die Werte, die Sie für padding angeben, der Gesamtbreite des Elements hinzugezählt. Der Internet Explorer tut dies allerdings nicht immer, was eine Hauptursache für Darstellungsunterschiede in den verschiedenen Browsern ist. Dieses Fehlverhalten des IE ist als Box Model Bug bekannt.
Übung 12 Das Design Ihrer Website sieht vor, dass alle Hyperlinks dadurch gekennzeichnet werden, dass ihnen ein kleiner, nach rechts weisender Pfeil vorangestellt wird (s. Abb. links). Beim Überfahren der Links mit der Maus soll der Pfeil nach rechts unten weisen (s. Abb. rechts):
Größenangaben und Positionierung von Elementen
129
Es sollte Ihnen nicht in den Sinn kommen, diesen Pfeil in HTML manuell vor jeden einzelnen Hyperlink zu setzen J ! CSS bietet Ihnen theoretisch zwei Möglichkeiten, den Pfeil für jeden Link automatisch zu erzeugen: 1.
Sie fügen den Pfeil als Schriftzeichen mit Hilfe des Pseudoformats a:before ein.
2.
Sie fügen den Pfeil als Hintergrundgrafik für den Selektor a ein.
Da die erste Variante im Internet Explorer nicht funktioniert, entscheiden wir uns für Möglichkeit 2: 1.
Erstellen Sie eine neue HTML-Seite mit etwas Text und einigen beliebigen Links.
2.
Legen Sie einen style-Bereich im head der Datei an und definieren Sie als erstes Ihre allge meinen Vorgaben (Schriftarten, Schriftgröße usw.).
3.
Definieren Sie für die Selektoren a und a:hover die Pfeile als Hintergrundbilder (Dateien linkarrow.gif und linkarrow_over.gif). Welche Eigenschaften für Hintergrundbilder müssen Sie verwenden, damit die Grafik linksbündig angezeigt wird und nicht kachelt? Welche zusätzliche Eigenschaft müssen Sie dem a-Selektor zuweisen, damit der Linktext neben dem Pfeil steht?
14.11 Größenangaben und Positionierung von Elementen 14.11.1 Größenangaben Sie können für jedes Element in Ihrem Dokument exakte Größenangaben mit den Attributen width (Breite) und height (Höhe) in Verbindung mit numerischen Werten machen. Es sind auch Prozentang aben möglich. Beispiel #subnavi { width: 150px; height: 50%; } Wenn Sie jedoch möchten, dass sich die Höhe eines Elementes automatisch dem Inhalt anpasst, sollten Sie in der Praxis das Attribut height weglassen. Ansonsten können Sie mit dem Attribut overflow bestimmen, was mit dem Inhalt geschehen soll, wenn er nicht mehr in das Element passt: #subnavi { width: 150px; height: 50%; overflow: auto; } Mögliche Werte sind: overflow:
visible (der Inhalt ragt ggf. aus dem Element heraus) hidden (der Inhalt wird ggf. abgeschnitten) scroll (der Browser erzeugt Rollbalken für das Element, allerdings auch dann, wenn gar keine benötigt werden) auto (wenn nötig, erzeugt der Browser Rollbalken für das Element)
Vor allem mit overflow: auto können Sie interessante Effekte erzeugen. Die so ausgezeichneten Elemente erhalten eigene Rollbalken, ähnlich einem Frame-Fenster.
130
Cascading Style Sheets (CSS)
14.11.2 Positionierung Mit CSS können Sie jedes Element exakt auf Ihrer Seite platzieren. Dies ist eine der größten Stärken von CSS, die die althergebrachte Positionierung mittels Tabellen vollständig ablöst. Bei der Positionierung von Elementen haben Sie mehrere Möglichkeiten. Die beiden am häufigsten benutzten sind die abso lute und die statische Positionierung (oft fälschlich auch relative Positionierung genannt). Welche dieser Positionierungsmethoden Sie verwenden, müssen Sie im Attribut position angeben. Beachten Sie, dass Sie damit noch nicht bestimmen, wo genau sich Ihr Objekt auf der Seite befindet. Sie legen damit lediglich fest, auf welche Weise das Objekt positioniert werden soll. Beispiel div#navi { position: absolute; } oder div#navi { position: static; }
Absolute Positionierung Diese Methode erlaubt es Ihnen, Objekte mit Hilfe absoluter Werte auf Ihrer Seite zu positionieren. Nachdem Sie diese Methode mit Hilfe des Attributs position: absolute für ein Element festgelegt haben, können Sie es mit einem oder mehreren der vier Attribute top, left, right und bottom platzieren: div#navi { position: absolute; top: 10px; left: 20px; } Beachten Sie, dass sich die Eigenschaften top, left usw. am übergeordneten Element ausrichten. In der Praxis ist es am sichersten, als Bezugspunkt das Browserfenster zu benutzen, solche Elemente also nicht ineinander zu verschachteln. Zusammen mit Angaben zu width und height haben Sie nun ein exakt definiertes Element auf Ihrer Seite, das Sie mit Hintergrundfarben und Randstilen weiter formatieren können.
Übung 13 1.
Legen Sie eine XHTML-Datei mit folgendem Inhalt an: <ul id="menu"> <li>Punkt <li>Punkt <li>Punkt <li>Punkt </ul>
1</li> 2</li> 3</li> 4</li>
<div id="inhalt"> <p>Text…</p> <p>Mehr Text…</p> </div>
Größenangaben und Positionierung von Elementen
2.
Die Liste <ul> enthält die spätere Navigation. Füllen Sie die Inhaltsbox mit beliebigem Text. Mit dieser HTML-Struktur soll nun folgendes Seitenlayout erzeugt werden:
3.
Legen Sie im head der HTML-Datei einen style-Bereich an und definieren Sie im ersten Schritt die allgemeinen Formatoptionen für Text und Links (body, p, div, h1, a etc.).
131
4. Erstellen Sie dann die CSS-Vorgaben für obiges Layout. Vergeben Sie beiden Boxen mit dem Attribut width eine feste Breite. Nutzen Sie das Attribut position: absolute und positionieren Sie die Elemente mit top und left auf der Seite. Objekte, die auf diese Weise positioniert werden, können sich auch überlappen. Normalerweise gilt das Element als das vorderste, das im HTML-Quelltext an letzter Stelle steht. Diese Ebenenhierarchie können Sie jedoch mit dem Attribut z-index (= »Objekttiefe«) und einem numerischen Wert ändern. Je höher der Wert, desto weiter vorn liegt das Element. div#eins { position: absolute; top: 10px; left: 20px; z-index: 5; } div#zwei { position: absolute; top: 20px; left: 40px; z-index: 2; }
Übung 14 1.
Platzieren Sie im HTML-Quelltext von Übung 13 mit Hilfe des img-Tags eine beliebige Grafik oberhalb der <ul> und vergeben Sie auch ihr eine eindeutige ID: <img src="grafik.gif" id="bild" alt="Schwebendes Bild" />
132
Cascading Style Sheets (CSS)
<ul id="menu"> <li>Punkt <li>Punkt <li>Punkt <li>Punkt </ul> 2.
1</li> 2</li> 3</li> 4</li>
Positionieren Sie die Grafik mit CSS, sodass sie vor dem Spaltenlayout liegt, dieses also teil weise verdeckt.
Statische Positionierung Diese Positionierungsmethode wird mit position: static angegeben. In diesem Fall müssen Sie das Attribut jedoch nicht zwingend notieren, da dies die Standardmethode ist, die ohnehin verwendet wird. Wenn Sie diese Positionierungsmethode verwenden, sollten Sie auch nicht mit den Attributen top, left usw. arbeiten, sondern stattdessen die weiter oben besprochenen Attribute margin-top, margin-left etc. verwenden. Wie ist es mit dieser Methode aber möglich, Objekte nebeneinander zu platzieren, wo wir doch wissen, dass HTML-Elemente standardmäßig immer untereinander angeordnet werden? Dazu benötigen wir das Attribut float. Dieses Attribut kann die Werte left oder right annehmen. Wenn wir nun z. B. einem Element float: left (etwa »schwebe links«) zuweisen, dann wird dieses Element von allen nachfolgenden Elementen rechts umflossen, sofern der Platz dafür ausreicht (das Attrubut float ist daher nur sinnvoll in Verbindung mit Werten für width). Beispiel Sie haben zwei div-Boxen mit den IDs #navi und #inhalt, die standardmäßig untereinander dargestellt werden:
Wenn Sie nun dem Objekt #navi das Attribut float: left zuweisen, dann wird das Objekt #inhalt rechts daneben dargestellt, sofern dem Objekt #navi ein entsprechend kleiner Wert für die Breite zugewiesen wurde. Zusätzlich müssen Sie dem Objekt #inhalt ein margin-left zuweisen, das größer ist als die Breite der Navigation: div#navi { width: 200px; float: left; } div#inhalt { margin-left: 210px; }
Größenangaben und Positionierung von Elementen
133
Weisen Sie nun den einzelnen Elementen noch Werte für margin-top zu, damit die Oberkanten bündig abschließen. Das Attribut float wirkt sich auf alle nachfolgenden Elemente aus. Wenn Sie diese nachfolgenden Ele mente wieder über die gesamte Breite darstellen wollen, müssen Sie das erste dieser Elemente von der float-Anweisung ausnehmen. Dies geschieht über das Attribut clear. Beispiel Das Element #fuss soll unterhalb von #navi und #inhalt über die gesamte Seitenbreite dargestellt wer den:
Dazu notieren Sie folgenden Code: div#fuss { clear: both; } Das Attribut clear kann die Werte left (linken Umfluss löschen), right (rechten Umfluss löschen) und both (beide löschen) annehmen. Am sichersten ist immer both.
Übung 15 Versuchen Sie, das Layout aus Übung 13 mit Hilfe der statischen Positionierung zu realisieren (ohne die Grafik aus Übung 14). Nutzen Sie float:left für das Menü und einen entsprechend großen margin-left für den Inhalt. Die Breite der Inhaltsbox soll sich dynamisch dem Browserfenster anpassen.
134
Cascading Style Sheets (CSS)
Fixierte Positionierung Eine dritte Positionierungsmöglichkeit neben der absoluten und der statischen, die jedoch vom Internet Explorer bis heute nicht unterstützt wird, ist position: fixed. Diese Positionierungsart funktioniert ähnlich wie absolute, das Element bleibt jedoch an Ort und Stelle, selbst wenn der übrige Seiteninhalt gescrollt wird. Der Inhalt scrollt also hinter dem betreffenden Element hindurch.
14.11.3 Ändern der Anzeigeart eines Elements Wie wir wissen, gibt es in HTML zwei Arten von Elementen: Blockelemente, die einen Absatz erzeugen, und Inline-Elemente, die innerhalb des Fließtextes benutzt werden können. Mit CSS können Sie diese Darstellungsart eines Objekts ändern. Dazu benutzen Sie das Attribut display. Folgende Angaben sind möglich: display:
block (wandelt ein Inline-Element in ein Blockelement um – das Element erzeugt eine neue Zeile) inline (wandelt ein Blockelement in ein Inline-Element um – das Element wird im laufenden Textfluss angezeigt) list-item (wie block, jedoch mit einem Listenpunkt davor) none (das Element wird nicht angezeigt)
Beispiel Sie haben auf Ihrer Seite eine Reihe von Hyperlinks definiert. Der HTML-Quellcode dafür sieht folgen dermaßen aus: <a <a <a <a
class="navi" class="navi" class="navi" class="navi"
href="produkte.html">Produkte</a> href="service.html">Service</a> href="kontakt.html">Kontakt</a> href="profil.html">Profil</a>
Da es sich beim a-Tag um ein Inline-Element handelt, werden diese Links im Browser nebeneinander dargestellt. Sie möchten daraus jedoch eine vertikale Navigationsleiste erzeugen, in der die Links untereinander stehen. Dazu ist es nicht nötig, jeden Link einzeln in einen p- oder gar div-Tag zu packen. Notieren Sie einfach folgende CSS-Vorgabe (damit die Vorgabe nicht alle Links auf Ihrer Seite betrifft, geben Sie für die betreffenden Links die Klasse .navi vor): a.navi { display: block; } Nun werden die Links untereinander dargestellt und können z. B. mit einer Hintergrundfarbe und einer Kontur versehen werden, um ihnen das Erscheinungsbild von Buttons zu geben. Mit margin-top oder margin-bottom können Sie die Abstände zwischen den Links bestimmen.
Übung 16 Nutzen Sie erneut die HTML-Datei aus Übung 13 bzw. Übung 15. Nun soll das Menü horizontal oben auf der Seite platziert werden, und zwar so, daß die Listeneinträge nebeneinander stehen. Im HTML-Bereich muss nichts geändert werden!
14.12 Bedingte Formatierungen Es ist nicht unbedingt notwendig, für jedes Element auf Ihrer Seite, das gesondert formatiert werden soll, gleich eine eigene Klasse oder ID zu definieren, wie es im voranstehenden Beispiel mit den Hyper links gezeigt wurde. Sehr oft reicht es, Elemente abhängig von Ihrer Position zu formatieren.
Bedingte Formatierungen
135
Sie können Elementen unterschiedliche Eigenschaften zuweisen, abhängig davon, in welchem über geordneten Element sie enthalten sind. Diese übergeordneten Elemente werden auch als Parent-Ele mente (= Elternelemente) bezeichnet. Notieren Sie dazu einfach in einem neuen Selektor zuerst das Parent-Element und nach einem Leerze ichen das Element, das Sie formatieren möchten (auch Child-Element genannt). Beispiel Sie haben folgenden HTML-Code: <div id="navi"> <a href="produkte.html">Produkte</a> <a href="service.html">Service</a> <a href="kontakt.html">Kontakt</a> <a href="profil.html">Profil</a> </div> Wie Sie sehen, haben die Links aus dem vorangegangenen Beispiel jetzt keinen Klassennamen mehr, stehen aber in einem div-Block mit der ID navi. Diese Links sollen nun anders formatiert werden als die übrigen auf der Seite. Dazu machen Sie folgende CSS-Vorgabe: a { color: #00f; } #navi a { color: #fff; display: block; } Diese Vorgabe definiert in der ersten Zeile das allgemeine Aussehen von Hyperlinks. In einem zweiten Selektor werden diejenigen Links von der allgemeinen Vorgabe ausgenommen, die sich innerhalb des Objekts #navi befinden. Diese bedingten Formatierungen können mit allen Arten von CSS-Selektoren und in beliebiger Tiefe verwendet werden. Beispiele div p { … }
ändert alle Absätze <p>, die sich innerhalb eines beliebigen div-Tags befinden
.box h1 { … }
ändert alle Überschriften <h1>, die sich innerhalb von Objekten mit dem Klassennamen .box befinden
div#navi ul { … }
ändert alle Listen <ul>, die sich innerhalb des div-Containers mit der ID #navi befinden
div#menu ul.rot li { … } ändert alle Listeneinträge <li> in ul-Listen mit dem Klassennamen .rot, sofern sich diese in der div-Box mit der ID #menu befinden Diese Art der Selektion ist in vielen Fällen effizienter als die Vergabe unzähliger Klassennamen.
f
136
Cascading Style Sheets (CSS)
14.13 Auslagerung der CSS-Vorgaben in eine externe Datei Bislang haben wir unsere CSS-Vorgaben im Dateikopf zwischen <style> und </style> notiert. Diese Methode ist auf Dauer allerdings nicht sehr effektiv. Sobald Sie mehr als eine HTML-Seite mit denselben CSS-Vorgaben formatieren möchten, lohnt sich ihre Auslagerung in eine externe Datei. Änderungen, die Sie in dieser Datei vornehmen, wirken sich dann auf alle HTML-Dokumente aus, die mit dieser Datei verknüpft sind. Externe CSS-Dateien sind ebenfalls reine Textdateien, tragen jedoch die Endung .css. Diese Dateien enthalten ausschließlich Ihre CSS-Vorgaben (Selektoren, Attribute und Werte) und keinerlei HTML-Syntax. Auch das Element <style> und die Kommentarzeichen <!-- --> dürfen Sie hier nicht notieren. Im head all Ihrer HTML-Dateien, auf die Sie diese CSS-Vorgaben anwenden wollen, notieren Sie anstelle des <style>-Blocks nur noch folgende Codezeile: <link rel="stylesheet" href="meine_stile.css" type="text/css" media="screen" /> Mit <link> leiten Sie den Verweis auf die externe Datei ein. Mit rel (engl. relationship, Beziehung) geben Sie an, dass sich der Link auf ein Stylesheet bezieht. Das Attribut type definiert den MIME-Typ der CSS-Datei, und mit href schließlich geben Sie nach den üblichen Regeln den Pfad zu der externen Datei an. Sie sollten sich wegen der damit verbundenen Effizienz diese Methode zur Regel machen, wo immer es geht.
14.14 Inline-Formatierungen Die dritte Methode, CSS-Vorgaben zu definieren, ist die Inline-Formatierung. Diese Methode ist die ineffektivste und sollte nur in Ausnahmefällen verwendet werden. Mit dieser Methode gelten Ihre CSS-Vorgaben nur für ein einzelnes HTML-Element und werden direkt in den HTML-Code geschrieben. Sie eignen sich höchstens dafür, allgemeine CSS-Vorgaben für ein spezielles Element zu überschreiben. Dafür steht Ihnen das HTML-Attribut style zur Verfügung, das Sie auf jeden beliebigen HTML-Tag anwenden können. Als Wert werden diesem style-Attribut dann die CSS-Eigenschaften nach CSS-Syntax zugewiesen. Beispiele <h2 style="color:#ffcc00; font-weight:bold;">&Uuml;berschrift</h2> <p style="font-size:18px; margin-left:50px;">Text</p> Wie erwähnt können Sie die drei Möglichkeiten der Einbindung von CSS problemlos miteinander kombinieren. Es ist also möglich, die für die gesamte Website gültigen Vorgaben in eine externe Datei auszulagern, die zusätzlichen, für eine einzelne HTML-Seite benötigten Vorgaben im <head> der betreffenden Seite zu platzieren, und in einzelnen Elementen noch zusätzliche Inline-Formatierungen vorzunehmen. Die externen Formatierungen sind dann solange gültig, bis sie von den internen über schrieben werden. Es existiert hier also eine »kaskadierende« Hierarchie.
Kommentare
137
14.15 Kommentare Ebenso wie in HTML können Sie auch in Ihren CSS-Quelltext Kommentare einfügen, um z. B. Merkhilfen, Beschreibungen, Hinweise oder Anmerkungen zu notieren, oder auch um Codebereiche »auszukom mentieren«. Die Syntax ist allerdings eine andere als in HTML: /* Dies ist ein Kommentar in CSS */ Eingeleitet wird der Kommentar mit einem Schrägstrich und einem Sternchen /* (ohne Leerzeichen). Mit der umgekehrten Zeichenfolge */ beenden Sie den Kommentar wieder. Anfang und Ende des Kom mentars müssen nicht in der gleichen Zeile stehen, es sind auch beliebig viele Leerzeilen erlaubt. Kom mentare dürfen jedoch nicht ineinander verschachtelt werden.
14.16 Maßangaben Folgende Maßeinheiten können Sie in CSS verwenden: em
Größe des Großbuchstabens M in der verwendeten Schrift (Geviert)
ex
Größe des Kleinbuchstabens x in der verwendeten Schrift (Halbgeviert)
px
Pixel
%
Prozent
in
Zoll (Inch)
cm
Zentimeter
mm
Millimeter
pt
Punkt (= 1/72 Zoll)
pc
Pica (= 1/6 Zoll)
Übung 17: Ein komplettes Layout mit CSS Öffnen Sie die Datei nuraghen.html aus Übung 2. Sie sollte komplett mit HTML strukturiert sein, jedoch keinerlei Formatierungen enthalten.
138
Cascading Style Sheets (CSS)
Ihre Aufgabe ist es nun, die Seite so mit CSS zu formatieren, dass sie am Ende folgendermaßen aussieht:
Die Seite wird in zwei Bereiche aufgeteilt: die Navigation auf der linken und den Inhaltsbereich auf der rechten Seite. Als Hintergrundbild dient die Datei nuraghe.jpg. Die Navigation besteht aus einer Überschrift und drei Hyperlinks, die untereinander stehen. Beim Überfahren mit der Maus verändert sich das rote Quadrat vor jedem Link (Dateien square.gif und square_over.gif). Ansonsten benötigen Sie keine weiteren Pixelgrafiken! Die rote Akzentfarbe, die im Dokument verwendet werden soll, ist #a00. Lagern Sie Ihre CSS-Vorgaben in eine externe Datei aus und gestalten Sie sie möglichst war tungsfreundlich, sodass auch etwaige inhaltliche Änderungen in der HTML-Datei mit möglichst wenig Aufwand verbunden sind. Die einzige Änderung, die Sie am HTML-Quelltext noch vornehmen müssen, ist die Aufteilung des Inhalts in die verschiedenen Layoutbereiche (Navigation, Inhalt) mit Hilfe von div-Containern und die Vergabe von IDs oder Klassennamen. Ansonsten müssen Sie keinerlei HTML-Code mehr hinzufügen! Viel Erfolg!
Maßangaben
139
Aufgaben zur Selbstkontrolle 1. 2. 3. 4. 5. 6. 7. 8. 9.
Wie binden Sie ein externes Stylesheet in eine HTML-Seite ein? Wie werden interne Stylesheets in HTML-Seiten eingebettet? Wie lautet die CSS-Definition für folgende Eigenschaften: Schriftgröße 14 Pixel, Schriftfamilie Arial, Textfarbe blau? Welche Veränderung bewirkt der span-Tag in der Browserdarstellung? Was ist der Unterschied zwischen Klassen und IDs? Wie wird eine Klasse im HTML-Quelltext aufgerufen? Wie können Sie bewirken, dass Hyperlinks einen Absatz erzeugen? Welches CSS-Attribut dient der Zuweisung von Innenabständen? Welche Schriftarten können Sie auf Ihren Webseiten verwenden?
140
Lösungen
Lösungen 1 Was ist HTML? 1
Was versteht man unter Hypertext? Hypertext ist die nonlineare Organisation von Informationen, die durch logische Verbindungen (Verweise, Links) eine netzartige Struktur erhält.
2 Wozu dienen Auszeichnungssprachen, und was ist Ihr Grundprinzip? Auszeichnungssprachen werden in vielen Bereichen zur Strukturierung und Formatierung von Dokumenten genutzt. Die Haupteigenschaft von Auszeichnungssprachen ist die Tatsache, dass sie in Form reiner Textdateien vorliegen, bei denen die Strukturierungs- und Formatierungsinformationen mit Hilfe von Tags direkt in den Text integriert sind.
3 Von wem wurde das WWW »erfunden«, und wo? Die grundlegenden Konzepte des WWW gehen zurück auf eine Gruppe von Wissenschaftlern um Tim Berners-Lee am Europäischen Zentrum für Teilchenphysik CERN in Genf (1989).
4 Was ist das W3C, und was sind seine Aufgaben? Das World Wide Web Consortium bestimmt und definiert u. a. die Standards und die weitere Entwicklung von HTML und CSS.
5 Was ist XHTML im Vergleich zu HTML? XHTML ist eine Neudefinition von HTML auf der Basis von XML.
6 Was versteht man unter einer Rendering Engine? Die Softwarekomponente eines Webbrowsers, die verantwortlich ist für die Interpretation und formatierte Ausgabe von HTML- und CSS-Code.
7 Welche Web-Browser kennen Sie, und welche Rendering Engines nutzen diese? vgl. Tabelle 2 auf Seite 18
Lösungen
141
2 Grundlagen 1
Mit welcher Software können Sie HTML-Seiten erstellen? Im Prinzip mit jedem beliebigen Texteditor, der Dateien mit der Endung .txt speichern kann.
2 Mit welchen Dateiendungen können HTML-Dokumente gespeichert werden? .html oder .htm
3 In welche zwei Kategorien lässt sich HTML-Quelltext unterteilen? Den Inhalt (Information) und die Auszeichnungen (Markup).
4 Wie sieht das universelle Grundgerüst einer HTML-Seite aus? 1 2 3 4 5 6 7 8
<html> <head> <title>Einfache HTML-Seite</title> </head> <body> Inhalte (Texte, Bilder etc.) </body> </html>
5 Was ist der Unterschied zwischen Block- und Inline-Elementen? Block-Elemente sind Tags, die im Browser automatisch einen Absatz erzeugen. Inline-Elemente sind Tags, die im laufenden Fließtext angewendet werden können und keinen Absatz erzeugen.
6 Was ist der Unterschied zwischen logischen und physischen Tags, und warum sollte man die einen den anderen vorziehen? Physische Tags schreiben exakt vor, wie Elemente optisch dargestellt werden sollen. Logische Tags hingegen geben lediglich die Struktur vor, überlassen die exakte Darstellung aber dem jeweiligen Ausgabegerät. Diese Trennung zwischen Strukturierung und Formatierung entspricht der Grundphilosophie von XHTML.
7 Was sind Tags, die als deprecated eingestuft wurden? »Missbilligte«, veraltete Tags, die in absehbarer Zeit aus dem XHTML-Vokabular gestrichen werden sollen und irgendwann von den Browsern nicht mehr interpretiert werden.
8 Wie weisen Sie einem HTML-Tag ein Attribut zu? <tag attribut="wert">…</tag>
142
Lösungen
9 Welche Werte können Sie einem HTML-Attribut zuweisen? Attribute mit vordefinierten Begriffen als Wertzuweisungen, Attribute mit numerischer Wertzuweisung, Attribute mit prozentualer Wertzuweisung, Attribute mit Dateipfaden als Wert, Attribute mit frei wählbaren Werten und alleinstehende Attribute ohne Wertzuweisung.
10 Was versteht man unter der Zeichenkodierung, und warum ist sie für HTMLDokumente von Bedeutung? Für die unterschiedlichen Schriftsysteme der Welt existieren unterschiedliche Zeichenkodierungen. Abhängig von dem von Ihnen verwendeten Zeichensatz wendet Ihr Editor eine dieser Kodierungsmethoden an, die Zeichen in Bytes umzuwandeln. Eine Webseite kann im Browser nur dann korrekt dargestellt werden, wenn dieser die verwendete Zeichenkodierung kennt.
11 Mit welcher Syntax können Sie Zeichen in HTML »maskieren«, und warum? Zeichen müssen nach dem Prinzip &xyz; maskiert werden, wenn Sie für die HTML-Syntax bereits reserviert sind.
12 Wie können Sie ein HTML-Element für den Browser »unsichtbar« machen? Durch die Kommentarzeichen <!-- -->
13 Welchen Dateinamen muss die Homepage Ihrer Website normalerweise haben? index.html
3 Einfache Textformatierung 1
Wozu dient ein geschütztes Leerzeichen, und wie wird es in HTML erzeugt? Das geschützte Leerzeichen &nbsp; verhindert eine Trennung zweier Wörter.
2 Was ist der Unterschied zwischen einem Absatz und einem Zeilenumbruch? Wie erzeugen Sie beides in HTML? Beim Tag <br /> (line break) beginnt der nachfolgende Text in der nächsten Zeile. <br /> zählt zu den Inline-Elementen. Der Tag <p></p> erzeugt einen eigenen Absatz und fügt eine zusätzliche Leerzeile ein.
3 Wieviele Überschriften gibt es in HTML, und wie werden sie erzeugt? Es gibt 6 Überschriften, von <h1></h1> bis <h6></h6>.
4 Welche Eigenschaften von Trennlinien kennen Sie? hh <hr noshade="noshade" /> keine Schattierung hh <hr width="250" /> Breite in Pixeln oder Prozent
Lösungen
143
hh <hr size="4" /> Stärke (Höhe)
5 Welche Tags sollten Sie zur Auszeichnung von fettem und kursivem Text verwenden? Die logischen Tags <strong> und <em>
4 XHTML-spezifische Erweiterungen 1
Was versteht man unter der XML-Deklaration, und was ist das Problem dabei? Die XML-Deklaration <?xml version="…"?> ist im allgemeinen notwendig, damit Programme erkennen, wie ein XML-basiertes Dokument zu bearbeiten ist. Ältere Browser können allerdings durch die XML-Deklaration verwirrt werden und zeigen statt des gewünschten Seiteninhalts den Quelltext der Seite an.
2 Was ist eine DTD, und warum sollten Sie sie immer angeben? Nach den Regeln von XML-basierten Auszeichnungssprachen ist eine Datei erst dann eine gültige XML-Datei, wenn eine Dokumenttypdefinition (DTD) definiert ist und der Quelltext genau nach den in ihr vorgegebenen Regeln erstellt wird. Die DTD beschreibt, um welche Art von Dokument es sich handelt, und welche Elemente und Attribute in einem Dokument verwendet werden. Eine gültige DTD im Doctype ist deshalb so wichtig, weil dadurch die Browser erst in die Lage versetzt werden, HTML-Seiten im Standard-Modus darzustellen. Fehlt hingegen der Doctype, so schalten die Browser in den Quirks-Modus.
3 Was ist der »Quirks-Modus«? Der Quirks-Modus ist ein spezieller Darstellungsmodus von modernen Browsern, der die Abwärtskompatibilität zu Webseiten sicherstellen soll, die veralteten oder ungültigen HTML-Code verwenden.
5 Listen und Aufzählungen 1
Mit welchem Tag erzeugen Sie eine ungeordnete Liste? <ul>
2 Wie können Sie den Anfangswert einer geordneten Liste ändern? <ol start="…">
3 Wie können Sie die Nummerierung innerhalb einer geordneten Liste ändern? <li value="…">
144
Lösungen
4 Was bedeutet <ol type="a">? Die Liste wird alphanumerisch durchgezählt (a, b, c, …).
6 Einbinden von Bildern Übung 4 <img src="../bilder/grafik.jpg" />
1
Welche Dateiformate eignen sich zur Einbindung von Bildern in HTML-Seiten? JPEG, GIF und (mit Einschränkungen) PNG
2 Wie referenzieren Sie eine Grafik, die im selben Ordner wie die HTML-Datei liegt? <img src="grafik.gif" />
3 Wie referenzieren Sie eine Grafik, die in einem Unterordner namens media liegt? <img src="media/grafik.gif" />
4 Was ist der Unterschied zwischen einer relativen und einer absoluten Pfadangabe? Relative Pfadangaben gehen von der HTML-Datei aus, in der die Referenzierung erfolgt, absolute Pfadangaben gehen immer vom Stammverzeichnis des Webservers aus.
5 Wie erzeugen Sie eine Kontur um eine Grafik? <img src="grafik.gif" border="1" />
6 Warum muss bei der Einbindung einer Grafik immer das Attribut alt verwendet werden? Der alt-Text wird dann angezeigt, wenn Bilder im Browser nicht angezeigt werden können (z. B. wenn der Besucher ihre Darstellung in seinem Browser deaktiviert hat). Auch Screenreader erkennen den alt-Text der Grafiken und können dadurch dem Zuhörer mitteilen, was auf der Seite zu sehen ist. Ein weiterer Vorteil ist die Tatsache, dass sie das Ranking der Site in Suchmaschinen wie Google positiv beeinflussen können.
7 Was ist zu beachten, wenn Sie einer Grafik die Attribute height und width zuweisen? Sie sollten i. d. R. immer die Originalgröße der Grafik angeben.
Lösungen
145
8 Wie binden Sie eine Hintergrundgrafik in Ihre HTML-Seite ein? <body background="grafik.gif">
9 Wie erzeugen Sie Tooltips für Grafiken? <img src="grafik.gif" title="Kurzbeschreibung" />
7 Hyperlinks Übung 7 1 2 3 4 5 6
1
<img src="buttons.gif" alt="Buttons" height="200" width="200" usemap="#meinemap" border="0" /> <map id="meinemap" name="meinemap"> <area shape="rect" coords="11,13,87,89" href="#" /> <area shape="circle" coords="147,53,36" href="#" /> <area shape="poly" coords="99,96,153,185,51,185" href="#" /> </map>
Was ist ein interner Link? Ein Link auf eine Datei, die sich auf demselben Webserver befindet.
2 Warum funktionieren absolute Links nicht beim Testen auf der lokalen Festplatte? Weil hier das Stammverzeichnis nicht der Ordner ist, in dem die index.html liegt, sondern das Startvolume (unter Windows i. d. R. C:\\).
3 Wie können Sie bewirken, dass sich ein Link in einem neuen Browserfenster öffnet? Mit dem Attribut target="_blank" im a-Tag.
4 Welche Tags benötigen Sie, wenn Sie auf eine bestimmte Textstelle einer anderen HTML-Seite verweisen wollen, und wo werden diese Tags notiert? In der Zieldatei wird als Markierung der Anchor-Tag benötigt: <a name="markierung"></a>. In der Quelldatei benötigen Sie einen Hyperlink auf diese Markierung: <a href="datei name. html#markierung">…</a>.
5 Welche area shape nutzen Sie in einer Imagemap, wenn Sie ein Dreieck erzeugen wollen? <area shape="poly" /> mit drei Koordinatenpunkten.
146
Lösungen
8 Die Verwendung von Farben 1
Mit welchem Farbsystem arbeitet jeder Computermonitor? RGB
2 Welcher Hex-Code bestimmt die Farben Rot, Magenta, Gelb, Cyan? hh hh hh hh
Rot = #ff0000 Magenta = #ff00ff Gelb = #ffff00 Cyan = #00ffff
3 Wie wird die Hintergrundfarbe Blau im body-Tag definiert? <body bgcolor="#0000ff">
9 Tabellen Übung 9 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
1
<table width="50%" border="1" cellspacing="2" cellpadding="0" height="80%"> <tr bgcolor="aqua"> <td rowspan="2" align="center">Kein</td> <td valign="bottom">Problem</td> <td align="center">für</td> <td valign="top">einen</td> </tr> <tr bgcolor="lime"> <td>Webmaster</td> <td rowspan="3" colspan="2">wie</td> </tr> <tr bgcolor="#ffcc00"> <td colspan="2">Sie</td> </tr> <tr bgcolor="#ff6d6b"> <td>gleich</td> <td rowspan="2">feststellen</td> </tr> <tr bgcolor="#6699ff"> <td>werden</td> <td>nur</td> <td>Mut!</td> </tr> </table>
Was bedeutet <table border="0" cellpadding="12" cellspacing="12">? Es wird eine Tabelle erzeugt, die keinen sichtbaren Rand hat, jedoch einen Zellabstand (cellspacing) sowie einen Innenabstand (cellpadding) von jeweils 12 Pixeln.
Lösungen
147
2 Was bedeutet colspan="2" Zwei Tabellenzellen werden horizontal vereinigt.
3 Mit welchem HTML-Attribut können Sie Text in einer Tabellenzelle unten ausrichten? <td valign="bottom">
4 Was bewirkt der Tag <th>? Er erzeugt eine Kopfzeile (table head) für die Tabelle.
10 Formulare 1
Wo legen Sie fest, was mit einem Formular geschehen soll, nachdem der Anwender auf Absenden geklickt hat? Im Attribut action im einleitenden form-Tag.
2 Wie erzeugen Sie ein mehrzeiliges Textfeld? <textarea></textarea>
3 Wie können Sie Formularfelder beschriften? Mit normalem Text, mit einer Beschriftung innerhalb des Formularfelds oder mit dem label-Tag.
4 Wie erzeugen Sie ein Aufklappmenü? <select size="1">
5 Wie stellen Sie sicher, dass von einer Gruppe von Radiobuttons immer nur einer ausgewählt werden kann? Alle Radiobuttons erhalten denselben Namen.
6 Wie erzeugen Sie einen Submit-Button mit einer Pixelgrafik (zwei Möglichkeiten)? <input type="image" src="absenden.gif" /> <button type="submit"><img src="absenden.gif" /></button>
148
Lösungen
11 Frames 1
Was sind die Nachteile von Frames?
hh Wenn ein Besucher eine Frame-Seite in der Trefferliste einer Suchmaschine anklickt, landet er auf einer einzelnen Inhaltsseite ohne Navigation. hh Viele Browser drucken von einem Frameset nur das jeweils aktive Frame aus, auf dem der aktuelle Fokus liegt. hh Da sich die Adresszeile eines Framesets nie ändert, wird nicht die URL der tatsächlich angezeigten Seite als Bookmark gespeichert, sondern immer nur die der Homepage. hh Es wird immer nur der Titel des Framesets selbst angezeigt. Alle anderen Seitentitel sind nicht sichtbar.
2 Wie erzeugen Sie ein Frameset mit drei gleich großen Spalten? <frameset cols="33%,33%,*">
3 Wie stellen Sie sicher, dass sich eine verlinkte Datei im richtigen Frame öffnet? Mit Hilfe des Attributs target im a-Tag.
12 Einbinden von Objekten 1
Wann benötigt der Besucher einer Website ein Plug-in? Wenn in der Website Fremdformate mit Hilfe des object- oder des embed-Tags eingebunden sind, die der Browser von sich aus nicht darstellen kann.
2 Wie sollen nach dem W3C-Standard sämtliche Fremdformate in HTML-Seiten eingebunden werden? Mit Hilfe des object-Tags.
3 Welche inoffiziellen Möglichkeiten gibt es zur Einbindung von MultimediaDateien und Java-Applets? Den embed-Tag für Multimedia-Dateien und den applet-Tag für Java-Applets.
13 Meta-Tags 1
Wie weisen sie einen Suchmaschinen-Robot an, Ihre Seite in einem Monat neu zu indizieren? <meta name="revisit-after" content="30 days" />
Lösungen
149
2 Wie teilen Sie dem Browser mit, welche Zeichenkodierung Sie in Ihrem Dokument verwendet haben? <meta http-equiv="content-type" content="text/html;charset=utf-8" />
14 Cascading Style Sheets (CSS) Übung 12 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
<style type="text/css" media="screen"><!-body { font-size: 11px; font-family: Verdana, Helvetica, Arial, sans-serif; background-color: white; } p { font-size: 11px; font-family: Verdana, Helvetica, Arial, sans-serif; } a { color: black; text-decoration: none; background-image: url(linkarrow.gif); background-repeat: no-repeat; background-position: left center; padding-left: 11px; } a:hover { text-decoration: underline; background-image: url(linkarrow_over.gif); } --></style>
Übung 13 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<style type="text/css" media="screen"><!-body { color: black; font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; background-color: gray; } p { color: black; font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; } div { color: black; font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; } ul#menu { background-color: silver; position: absolute; top: 10px;
150 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
Lösungen left: 10px; width: 200px; margin: 0; padding: 5px; list-style-type: none; } #inhalt { background-color: white; position: absolute; top: 10px; left: 240px; margin: 0 20px 0 0; padding: 5px; } --></style>
Übung 14 1 2 3 4 5 6
img#bild { position: absolute; top: 50px; left: 100px; z-index: 3; }
Übung 15 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
<style type="text/css" media="screen"><!-body { color: black; font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; background-color: gray; margin: 10px; } p { color: black; font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; } div { color: black; font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; } ul#menu { background-color: silver; width: 200px; float: left; margin-top: 0; padding-left: 5px; list-style-type: none; } #inhalt { background-color: white; margin-top: 0; margin-left: 230px;
Lösungen 31 } 32 --></style>
Übung 16 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
<style type="text/css" media="screen"><!-body { color: black; font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; background-color: gray; margin: 10px; } p { color: black; font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; } div { color: black; font-size: 12px; font-family: Verdana, Helvetica, Arial, sans-serif; } ul#menu { background-color: silver; margin-bottom: 20px; margin-left: 0; padding: 5px; list-style-type: none; } #inhalt { background-color: white; padding: 5px; } li.navi { margin-right: 25px; display: inline; } --></style>
Übung 17 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
body { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 12px; color: black; background-image: url(nuraghe.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: left center; } p { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 12px; color: black; } div {
151
152 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74
Lรถsungen font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 12px; color: black; border: 1px solid black; padding: 0 5px 0 5px; } strong { font-weight: bold; } em { font-style: italic; } h1 { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 18px; color: black; font-weight: bold; } h2 { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 14px; color: black; font-weight: bold; border-top: 1px solid #a00; border-right: 19px solid #a00; } a { color: #a00; text-decoration: none; } a:hover { text-decoration: underline; } #navi { width: 200px; float: left; } #navi a { display: block; color: white; background-image: url(square.gif); background-repeat: no-repeat; background-position: left center; padding-left: 15px; padding-top: 3px; padding-bottom: 3px; margin-bottom: 12px; background-color: gray; margin-left: -5px; margin-right: -5px; } #navi a:hover { text-decoration: none; background-image: url(square_over.gif); } #navi h1 { font-size: 14px; color: white; background-color: #a00; margin: 0px -5px 12px -5px; padding: 3px; } #inhalt { margin-left: 230px; }
Lösungen
1
153
Wie binden Sie ein externes Stylesheet in eine HTML-Seite ein? <link rel="stylesheet" href="meine_stile.css" type="text/css" />
2 Wie werden interne Stylesheets in HTML-Seiten eingebettet? <style type="text/css" media="screen"><!- … --></style>
3 Wie lautet die CSS-Definition für folgende Eigenschaften: Schriftgröße 14 Pixel, Schriftfamilie Arial, Textfarbe blau? font-family: Arial; font-size: 14px; color: #0000ff;
4 Welche Veränderung bewirkt der span-Tag in der Browserdarstellung? Überhaupt keine.
5 Was ist der Unterschied zwischen Klassen und IDs? Klassen können mehrmals auf einer Seite verwendet werden, IDs nur einmal.
6 Wie wird eine Klasse im HTML-Quelltext aufgerufen? <tag class="klassenname">
7 Wie können Sie bewirken, dass Hyperlinks einen Absatz erzeugen? Durch folgende CSS-Vorgabe: a { display: block; }
8 Welches CSS-Attribut dient der Zuweisung von Innenabständen? padding
9 Welche Schriftarten können Sie auf Ihren Webseiten verwenden? Verdana, Helvetica/Arial, Times (New Roman), Courier.
154
Index
Add-ons (Firefox) 23 Andreessen, Mark 16 Anker 58 Attribute 28
Barrierefreiheit 53 bedingte Formatierung (CSS) 134 benannte Farben 66 Berners-Lee, Tim 16 Blockelemente 27, 34 Box Model Bug 128 Browser 18
Cascading Style Sheets (CSS) 113 Einbindung 114, 136 Syntax 115 Child-Elemente (CSS) 135 Coda Siehe HTML-Editoren
deprecated Tags 27 Dithering 67 Dokumenttypdefinition DTD 41 Frameset 41 Strict 41 Transitional 41 Dokumenttypdeklaration 41
Eclipse Siehe HTML-Editoren
Farbzuweisung (CSS) 117
Index Firefox Siehe Browser Formulare Auswahllisten 84 Beschriftung 82 Checkboxen 88 Datei-Buttons 90 mehrzeilige Textfelder 83 moderne Buttons 92 Passwortfelder 81 Radiobuttons 88 Reset-Buttons 91 Standard-Buttons 89 Submit-Buttons 92 Tastatursteuerung 94 Textfelder 81 Frames 96
Gecko Siehe Rendering Engines GIF Siehe Grafikformate Grafikformate 47
hexadezimale Farbkodierung 65 HomeSite Siehe HTML-Editoren HTML-Editoren 21 Hyperlinks 54 externe 56 interne 55
Imagemaps 60 Individualformate (CSS) 124 Initialen (CSS) 121 Inline-Elemente 27, 35 Internet Explorer Siehe Browser
Java-Applets 109 JPEG Siehe Grafikformate
Klassen (CSS) 123 Kommentare (CSS) 137 Kommentare (HTML) 31 Konqueror Siehe Browser
LaTeX 14 Listen 43 Definitionslisten 45 nummerierte 44 Punktlisten 43 verschachtelte 45 Lynx Siehe Browser
Maßangaben (CSS) 137 Meta-Tags 110 MIME-Typ 90 Mozilla Siehe Browser
Namensraum 42 NCSA 16 Netscape Communications 16 Notepad++ Siehe HTML-Editoren
Opera Siehe Browser
Parent-Elemente (CSS) 135 Pfadangaben absolute 51, 56 relative 49, 50, 55 Plug-ins 105 PNG Siehe Grafikformate Positionierung (CSS) 129, 130 absolut 130 fixiert 134 PostScript 14
Index Protokolle 58 FTP 57 mailto 58 news 58 Pseudoformate (CSS) 120
155
W3C 16 WebKit Siehe Rendering Engines websichere Farben 66 WYSIWYG-Editoren 22
Quirks-Modus 42
Referenzierung Grafiken 48 Hyperlinks 54 Rendering Engines 17, 18
XHTML 16, 24, 40, 59 XML 16 XML-Deklaration 40
Zeichenkodierung 29 Zielfenster 57 Safari Siehe Browser Safari-Debug-Menü 23 Selektoren (CSS) 115 SelfHTML 23 SGML 16 Smultron Siehe HTML-Editoren Sonderzeichen 30 benannte Zeichen 30 Maskierung 30 Standard-Modus 42 SubEthaEdit Siehe HTML-Editoren
Tabellen 68 Tags 14, 23 logische 27 physische 27 Tasman Siehe Rendering Engines TextMate Siehe HTML-Editoren Trennlinien 35 Trident Siehe Rendering Engines True Color 66
Vererbungsprinzip (CSS) 117