Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Einführung in HTML
Erstellen einfacher Webseiten mit Text, Bildern undmehr ...
Version 2.0
01.03.04
Universität Osnabrück
- Rechenzentrum -
Dipl.-Math Frank Elsner
Albrechtstrasse 28 (AVZ)
49076 Osnabrück
eMail:[email protected]
Internet: http://www.home.uni-osnabrueck.de/elsner
Inhaltsverzeichnis
1 Einleitung........................................................................................................................... 51.1 Voraussetzungen....................................................................................................... 51.2 Selbststudium oder Teilnahme am Kurs.................................................................... 51.3 Überblick über die behandelten Themen................................................................... 51.4 Software..................................................................................................................... 61.5 Download................................................................................................................... 71.6 Weiterführende Literatur............................................................................................ 7
2 Aufbau eines HTML Dokuments....................................................................................... 82.1 Gerüst........................................................................................................................ 82.2 Beispiele für Elemente............................................................................................... 92.3 Funktion eines WWW Browsers.............................................................................. 102.4 Text und Markierung (Markup)................................................................................. 11
3 Erfassen von HTML Quelltext......................................................................................... 123.1 Auswahl eines HTML Editors................................................................................... 123.2 Grundlegende Bedienung von Phase 5................................................................... 123.3 Übungen................................................................................................................... 153.4 Lösungen................................................................................................................. 16
4 Formatieren von Text...................................................................................................... 174.1 Überblick.................................................................................................................. 174.2 Beispiele: Textformatierungen................................................................................. 184.3 Übungen................................................................................................................... 214.4 Lösungen................................................................................................................. 22
5 Formatieren von Absätzen.............................................................................................. 235.1 Beispiele Absatzformatierung.................................................................................. 235.2 Beispiele Überschriften und Linien.......................................................................... 245.3 Beispiele Einrückung und vorformatierter Text........................................................ 265.4 Übungen................................................................................................................... 265.5 Lösungen................................................................................................................. 27
6 Einfügen von Listen und Glossaren................................................................................ 296.1 Beispiele Listen........................................................................................................ 306.2 Übungen................................................................................................................... 326.3 Lösungen................................................................................................................. 32
7 Einfügen von Hyperlinks und Ankern.............................................................................. 347.1 Beispiele: Springen innerhalb eines Dokuments...................................................... 357.2 Beispiele: Aktives Inhaltsverzeichnis....................................................................... 367.3 Beispiele: Verweis auf eine Internet Seite............................................................... 37
7.4 Übungen................................................................................................................... 377.5 Lösungen................................................................................................................. 38
8 Einfügen von Tabellen.................................................................................................... 408.1 Bezeichnungen........................................................................................................ 408.2 Aufbau einer Tabelle ............................................................................................... 408.3 Elemente einer Tabelle............................................................................................ 418.4 Beispiele: einfache Tabellen mit Überschriften........................................................ 438.5 Beispiele: komplexe Tabelle.................................................................................... 448.6 Übungen................................................................................................................... 458.7 Lösungen................................................................................................................. 46
9 Einfügen von Bildern....................................................................................................... 489.1 Elemente.................................................................................................................. 489.2 Formate.................................................................................................................... 489.3 JPEG........................................................................................................................ 499.4 Beispiele: Icons........................................................................................................ 509.5 Beispiele: Navigation in einem Dokument................................................................ 509.6 Quellen fürBilder...................................................................................................... 529.7 Übungen................................................................................................................... 529.8 Lösungen................................................................................................................. 52
10 Einfügen von sensitive Bildern (image maps)............................................................... 5310.1 Vorgehensweise..................................................................................................... 5310.2 Elemente................................................................................................................ 5410.3 Erstellen einer sensitiven Karte mit GeoHTML...................................................... 5410.4 Übungen................................................................................................................. 5610.5 Lösungen............................................................................................................... 56
11 Verwenden von Rahmen (Frames)............................................................................... 5711.1 Beispiele: Einteilung des Fensters in 3 Rahmendicke........................................... 5811.2 Beispiele: Aktives Inhaltsverzeichnis..................................................................... 5911.3 Übungen................................................................................................................. 6011.4 Lösungen............................................................................................................... 61
12 Gestalten der Seite........................................................................................................ 6212.1 Überblick................................................................................................................ 6212.2 Beispiel: Farbiger Hintergrund............................................................................... 6212.3 Beispiel: Hintergrund-Bild....................................................................................... 6312.4 Übungen................................................................................................................. 6412.5 Lösungen............................................................................................................... 64
13 Einbinden von Formularen............................................................................................ 65
13.1 Überblick................................................................................................................ 6513.2 Beispiel: Versenden eines Formulars per E-Mail................................................... 6713.3 Übungen................................................................................................................. 67
14 Hinzufügen von Meta-Informationen............................................................................. 6914.1 Überblick................................................................................................................ 69
15 Verarbeiten von Formularen mit CGI Skripten.............................................................. 7116 Gestalten mit Cascading Style Sheets (CSS)............................................................... 7217 Ausblick......................................................................................................................... 7318 Anhang 1: Farben.......................................................................................................... 74
Einführung in HTML Einleitung
1 EinleitungIn diesem Skript lernen Sie, einfache Webseiten mit Text, Bildern und weiteren Elementenwie z.B. Listen oder Tabellen zu erstellen.
Zur Bearbeitung umfangreicherer Web-Projekte steht im Rechenzen-trum weiterführende Literatur zur Verfügung.
1.1 VoraussetzungenIn diesem Skript werden grundlegende Kenntnisse in Windows (Dateisystem, Starten undBeenden von Programmen, Maus, Tastatur, ...) sowie gute Kenntnisse beim "Surfen"(Starten und Bedienen von Internet Explorer, Netscape Communicator oder ähnlicherBrowser) vorausgesetzt.
1.2 Selbststudium oder Teilnahme am KursSie können dieses Skript im Selbststudium durcharbeiten und dabei insbesondere dieÜbungen bearbeiten. Wir empfehlen Ihnen zum besseren Verständnis, an einem Kurs desRechenzentrums zu diesem Thema teilzunehmen.
1.3 Überblick über die behandelten ThemenIn diesem Skript werden folgende Themen einführend behandelt:
1. Aufbau einer Webseite (Gerüst)2. Textformatierung 3. Absatzformatierung 4. Listen und Glossare5. Verweise (Hyperlinks) und Anker 6. Bilder und sensitive Bilder (Image Maps)7. Tabellen8. Rahmen
5
Einführung in HTML Einleitung
Aufgrund des einführenden Charakters dieses Kurses können nicht alle (HTML-) Syntax-elemente vollständig behandelt werden. Sie können sich in der weiterführenden Literaturinformieren, welche weiteren Möglichkeiten bestehen.
1.4 SoftwareZum Bearbeiten der Übungen benötigen Sie für jede der 4 wesentlichen Kategorien eingeeignetes Programm:
1. Erstellen von Webseiten:HTML Editor[z.B. Phase 5, Macromedia Dreamweaver, StarOffice]
2. Bearbeiten von Bildern:Bildbearbeitungsprogramm[z.B. Paintshop Pro, Adobe Photoshop]
3. Erstellen sensitiver Bilder:Image Map Editor[z.B. GeoHTML]
4. Anzeigen von Webseiten:Web Browser[z.B. Netscape Communicator, Mozilla, Internet Explorer, Opera]
Empfehlenswert als Ergänzung für fortgeschrittene Web Designer, aber NICHT zwingenderforderlich für das Verständnis und die Bearbeitung dieses Kurses, sind folgende Katego-rien von Programmen:
1. Verwenden eines eigenen Web ServersWWW Server[z.B. Apache Web Server für Windows]
2. Einfügen von Perl SkriptenPerl Interpreter[z.B. ActiveState Perl für Windows]
3. Einfügen von PHP SkriptenPHP Interpreter[z.B. PHP Triad mit einem Kombi-Paket aus Apache, MySQL und PHP für Windows]
4. Aufbauen eines Medien-ArchivsBildbetrachungsprogramm[z.B. XnView, ACDSee, ThumbsPlus, iMatch]
5. Überprüfen der Verzeigerung (tote Links, ...)Link Checker[z.B. Xenu Link Checker]
6
Einführung in HTML Einleitung
Linux und Mac Benutzern stehen im Funktionsumfang ähnliche Programme zur Verfü-gung, die z.T. zum Lieferumfang der Distributionen (Debian, SuSE Linux, Red Hat Linux,Mac X) gehören.
1.5 DownloadIm Hochschulnetz steht auf dem Softdist FTP Server ein „Webdesign Pack“ mit einer klei-nen, aber feinen Auswahl der genannten Programme zur Verfügung. Die dort befindlichenProgramme werden NICHT auf dem neuesten Stand gehalten, die neuesten Versionenbefinden sich jeweils auf den Heimatseiten der Hersteller im Bereich Download.„WebdesignPack“ Download (nur im im Hochschulnetz):
ftp://softdist.rz.uni-osnabrueck.de/WebdesignPack(Stand: März 2004)
1.6 Weiterführende Literatur1. SelfHTML
http://selfaktuell.teamone.de/Hier finden Sie das Standardwerk im Internet für HTML; oft kopiert, aber in der Qualitätnicht erreicht.
2. World Wide Web Konsortiumhttp://www.w3.org/Hier werden alle das Web betreffenden Aktivitäten koordiniert und verbindliche Regelnvereinbart.
3. SelfHTML HTML Kurzreferenzhttp://selfhtml.teamone.de/navigation/html.htmHTML Kurzreferenz
7
Einführung in HTML Aufbau eines HTML Dokuments
2 Aufbau eines HTML Dokuments
2.1 GerüstJede Webseite oder Internet Seite (im folgenden als HTML Dokument bezeichnet) besitzteinen HTML Quelltext. HTML Quelltext besitzt folgenden prinzipiellen Aufbau aus Kom-mentar (kursiv), Text und HTML Markierungen (fett):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!--Start des Dokuments--><html>
<!--Start des Header Bereiches mit Metainformationenwie Titel, Autor, Schlüsselwörter --><head>
<!--Titel--><title>Meine Heimatseite</title>
<!--Ende des Header Bereiches--></head>
<!--Start des Text Bereiches--><body>Hier steht der eigentliche Text für meine Heimatseite ...
<!--Ende des Text Bereiches--></body>
<!--Ende des Dokuments--></html>
Kommentare helfen dem Autor bei der Gliederung seines HTML Dokumentes, werdenaber nicht im WWW Browser dargestellt.
HTML Quelltext kann beliebig formatiert werden. Die Einrückung soll die Struktur verdeut-lichen:
<html> <head> <title>Meine Heimatseite</title> </head> <body>Hier steht der eigentliche Text für meine Heimatseite ... </body></html>
8
Einführung in HTML Aufbau eines HTML Dokuments
Obwohl ein "vollständiges" HTML Dokument alle genannten Bereiche enthalten sollte, zei-gen die meisten WWW Browser auch ein HTML Dokument an, dessen HTML Quelltextnur den Text-Bereich enthält.
Hier steht der eigentliche Text für meine Heimatseite ...
Innerhalb des Text-Bereiches können Sie Elemente wie Überschriften, Bilder, Tabellen,Listen usw. eingefügen.
2.2 Beispiele für ElementeHTML steht für Hypertext Markup Language (in etwa: Hypertext-Auszeichnungsspra-che oder Hypertext Markierungssprache). Eine wesentliche Eigenschaft von HTML be-steht darin, daß sie die generelle Struktur des Inhalts innerhalb eines Dokuments be-schrieben wird, nicht jedoch die endgültige Darstellungsweise des Inhalts auf der (ge-druckten) Seite oder auf dem Bildschirm.
HTML ist eine Sprache, welche die Struktur eines Dokuments beschreibt und nicht seinetatsächliche Gestaltung. Die Theorie dahinter ist, daß die meisten Dokumente ge-meinsame Elemente besitzen wie zum Beispiel Titel, Absätze oder Listen, die konsequentin einheitlicher Form dargestellt werden sollten.
Das folgende Beispiel zeigt ein HTML Dokument mit einigen Elementen:
1. Überschrift der Ebene 1 (h1 wie heading 1)2. Textauszeichnung für „fette Schrift“ (b wie bold)3. Textauszeichnung für kursive Schrift (i wie italic)4. Absatzformatierungen für Absätze mit oder ohne Leerzeile (p wie paragraph und br wie
break)
Der HTML Quelltext enthält folgenden Text-Bereich:
<h1>Einleitung</h1><p><b>HTML</b> ist die wesentliche Sprache im <b>World Wide Web</b>.Ein HTML Syntax Element (<i>HTML tag</i>) ...</p>
Dieses HTML Dokument wird folgendermaßen in einem WWW Browser (hier als Beispielder integrierte WWW Browser von Dreamweaver) angezeigt:
9
Einführung in HTML Aufbau eines HTML Dokuments
Erkennbar ist folgende allgemeine Struktur:
<!--<start-tag>Inhalt</end-tag>-->
<h1>Einleitung</h1><b>HTML</b><i>HTML tag</i><p>Absatztrennung mit Leerzeile</p><br>Absatztrennung ohne Leerzeile
Abhängig von der verwendeten Markierung (tag) wird der Inhalt im Beispiel als Überschriftder Ebene 1, fett oder kursiv dargestellt. Absätze werden mit oder ohne Leerzeile vonei-nander getrennt. Die HTML Markierung <br> besitzt übrigens weder Inhalt noch Ende-Markierung.Eine Markierung kann durch Attribute erweitert werden, die die Darstellung eines Elemen-tes genauer festlegen. Im folgenden Beispiel wird ein Absatz durch das Attribut „align“ mit-tig ausgerichtet.
<!--<start-tag attribute_1=value_1 ...>Inhalt</end-tag>-->
<p align=“center“>Absatztrennung mit Leerzeile</p>
2.3 Funktion eines WWW BrowsersWWW Browser dienen zum einen zur Abwicklung der Netzwerkfunktionen wie dem Ladenvon Dokumenten aus dem Netz, und zum anderen formatieren sie das HTML-Dokumentam Bildschirm.
Wenn Sie ein HTML-Dokument mit einem WWW Browser (wie z.B. Internet Explorer oderNetscape Communicator) laden, zergliedert der WWW Browser die HTML Elemente undstellt den Text und die Abbildungen auf dem Bildschirm formatiert dar. Der WWW Browsererstellt aus den Namen der Elemente die tatsächlichen Formate auf dem Bildschirm;
10
Einführung in HTML Aufbau eines HTML Dokuments
Überschriften könnten dann z.B. in einer größeren Schrift als der restliche Text auf derSeite erscheinen.
Verschiedene WWW Browser, die auf verschiedenen Plattformen operieren, können fürdieselben Elemente unterschiedliche Formatkonvertierungen benutzen. Einige WWWBrowser verwenden vielleicht andere Schriftarten als die übrigen. So könnte ein WWWBrowser z.B. Kursivschrift auch kursiv darstellen, während ein anderer sie als invertiertenoder unterstrichenen Text auf Systemen darstellt, die keine kursive Darstellung unterstüt-zen. Oder er könnte eine Überschrift mit Großbuchstaben darstellen, anstatt eine größereSchrift einzusetzen.
Für Sie als Webseiten-Designer bedeutet das, daß die Seiten, die Sie mit HTML gestal-ten, auf unterschiedlichen Systemen und mit unterschiedlichen WWW Browsern ganz an-ders aussehen können. Die tatsächlichen Informationen und Verknüpfungen innerhalb derSeiten werden noch vorhanden sein, aber ihre Darstellung auf dem Bildschirm wird sichändern. Sie können eine Webseite so entwerfen, daß sie auf Ihrem Computersystem per-fekt aussieht, wenn man sie jedoch auf einem anderem System betrachtet, kann sie voll-kommen anders aussehen (vielleicht sogar unlesbar sein).
2.4 Text und Markierung (Markup)HTML ist eine Markierungs- oder Auszeichnungs-Sprache (»markup language«). In einerMarkierungssprache zu schreiben bedeutet, daß Sie mit dem Text Ihrer Seite anfangenund dann spezielle Markierungen um Worte bzw. Absätze setzen. Wenn Sie bereits mitanderen Markierungssprache wie LaTeX gearbeitet haben, bei denen Sie spezielle Codesfür solche Befehle wie »Fettdruck« einsetzen mußten, dann wird Ihnen dies nicht fremdvorkommen. Die Markierungen bestimmen die verschiedenen Teile der Seite und führenzu unterschiedlichen Effekten im WWW Browser.
HTML arbeitet mit einem festen Vorrat an Markierungen (tags), die Sie benutzen können.Sie können allerdings KEINE EIGENEN Markierungen (tags) erfinden, um neue Darstel-lungsweisen oder Merkmale zu erschaffen. Sie können sich allerdings mit XML beschäfti-gen, um dieses Problem anzugehen ;:).
11
Einführung in HTML Erfassen von HTML Quelltext
3 Erfassen von HTML Quelltext
3.1 Auswahl eines HTML EditorsIn diesem Kurs wollen wir den vollständigen HTML Quelltext selbst erfassen. Sie denkenvielleicht, daß das Eintippen der HTML Markierungen und des Inhalts recht aufwändig ist. Zugegeben, aber:Nur wenn Sie die Bedeutung und den richtigen Einsatz der Markierungen (Tags) beurtei-len können, werden Sie in der Lage sein, "guten" und "effektiven" HTML Quelltext zu pro-duzieren bzw. bestehenden HTML Quelltext zu analysieren, für eigenen Projekte zu modi-fizieren und ggf. auch zu verbessern.
Es gibt eine Menge Freeware- und Shareware-Programme zum Editieren von HTML Do-kumenten. Die meisten dieser Programme sind im wesentlichen Texteditoren mit zusätzli-chen Menü-Einträgen oder Auswahl-Buttons, welche die gewünschten HTML Markierun-gen in Ihren Text einfügen.
Im professionellen Bereich werden häufig HTML Editoren verwendet, die sowohl eineQuelltext-Ansicht (code) wie auch eine Darstellungs-Ansicht (layout) präsentieren, diewichtigsten Beispiele sind Macromedia Dreamweaver, Adobe GoLive und Microsoft Front-page.
In diesem Kurs werden wir den freien HTML Editor Phase 5 verwenden.
3.2 Grundlegende Bedienung von Phase 5Starten Sie Phase 5:
12
Einführung in HTML Erfassen von HTML Quelltext
Erstellen Sie über „Datei > Neues HTML Dokument“ ein leeres HTML Dokument und tra-gen Sie passende Werte ein (hier den Titel „Textmarkierung“):
Klicken Sie dann auf „Erstellen“, um das leere Dokument zu laden. Phase 5 erstellt einHTML Gerüst mit sämtlichen erforderlichen Markierungen (tags) und Inhalten:
13
Einführung in HTML Erfassen von HTML Quelltext
Fügen Sie im Textbereich folgenden Text ein:
Verwenden Sie ggf. die Werkzeugleiste, um Markierungen in den den HTML Quellcodeeinzufügen. Markieren Sie hierzu den Inhalt und klicken Sie dann auf die gewünschteMarkierung (wie z.B. H1 für Überschrift der Ebene 1).
14
Einführung in HTML Erfassen von HTML Quelltext
Speichern Sie das Dokument über „Datei > Speichern“ unter dem Dateinamen „textmar-kierungen.htm“.Klicken Sie nun auf das Browser Symbol, um den integrierten WWW Browser zu starten(Darstellungs-Modus):
Das Dokument wird nun im Darstellungs-Modus angezeigt:
Klicken Sie auf das Editor Symbol, um wieder in den Quelltext-Modus zu wechseln:
Beenden Sie Ihre Sitzung über „Datei > Programm“ beenden“.
3.3 Übungen1. Schreiben Sie ein HTML Dokument mit Titel „Die Erde“ und Quelltext „Text1“.2. Speichern Sie das Dokument unter dem Dateinamen „erde.htm“ ab.3. Laden Sie diese Datei „erde.htm“ in einen WWW Browser.4. Ergänzen Sie im HTML Dokument den Text „Text2“ mit geeigneten Absatzformatierun-
gen. Verwenden Sie „Cut&Paste“, um den Text zu markieren und in Ihr HTML Doku-ment einzufügen.
Text1:Überschrift Ebene 1 (h1):Erde: Der Wasserplanet
15
Einführung in HTML Erfassen von HTML Quelltext
Text zu dieser Überschrift: 70% der Erdoberfläche besteht aus Wasser. Die restlichen 30% sind Gebirge, Vulkane,Wüsten, Ebenen, und Täler.
Text2:Die Erde ist der drittnächste Planet zur Sonne. Sie hat hat eine Atmosphäre, die aus vie-len verschiedenen Gasen besteht. Aber der Hauptteil sind Stickstoff und Sauerstoff. DieAtmosphäre gibt uns Luft zum Atmen. Wir leben auf dem Planeten Erde. Die Erde umkreist die Sonne. Sie braucht ein Jahr für einen kompletten Umlauf. Außer-dem dreht sich die Erde um ihre Achse. Eine Umdrehung dauert einen Tag. Die Erdachsesteht nicht gerade, sondern ist ein weinig geneigt. Durch diese Neigung entstehen dieJahreszeiten. Ohne diese Neigung hätten wir das ganze Jahr hindurch ungefähr die glei-chen Temperaturen.
3.4 Lösungenzu 1:<html>
<head>
<title>erde</title>
<meta name="author" content="Administrator">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
</head>
<body text="#000000" bgcolor="#FFFFFF"link="#FF0000" alink="#FF0000" vlink="#FF0000">
<h1>Erde: Der Wasserplanet</h1>
70% der Erdoberfläche besteht aus Wasser.
Die restlichen 30% sind Gebirge, Vulkane, Wüsten, Ebenen, und Täler.
</body>
</html>
16
Einführung in HTML Formatieren von Text
4 Formatieren von Text
4.1 ÜberblickIn diesem Kapitel werden folgende Markierungen (Tags) zur Formatierung von Text sowieMöglichkeiten zur Darstellung von Sonderzeichen behandelt:
Umlaute u. scharfes S ä = ä Ä = Ä ö = ö Ö = Ö ü = ü Ü = Ü ß = ß
Platzhalter Leerzeichen von der Beite n =   Leerzeichen von der Beite m =   Bindestrich von der Beite n = &endash; Bindestrich von der Beite m = &emdash; Leerzeichen ohne Umbruchmöglichkeit dahinter =
HTML-Sonderzeichen und deren Maskierung
Zeichen < = < Zeichen > = > Zeichen & = & Zeichen " = "
Umlaute u. scharfes S ä = ä Ä = Ä ö = ö Ö = Ö ü = ü Ü = Ü ß = ß
17
Einführung in HTML Formatieren von Text
Logische Textformatierung
<strong> ... </strong> = wichtig <em> ... </em> = emphatisch <tt> ... </tt> = dicktengleich <cite> ... </cite> = Zitat <code> ... </code> = Quellcode <kbd> ... </kbd> = Terminal <var> ... </var> = Variable <samp> ... </samp> = Beispiel <dfn> ... </dfn> = Definition
Physische Textformatierung
<b> ... </b> = fett <i> ... </i> = kursiv <u> ... </u> = unterstrichen <s> ... </s> = durchgestrichen <big> ... </big> = große Schrift <small> ... </small> = kleine Schrift <sub> ... </sub> = tiefgestellt <sup> ... </sup> = hochgestellt
Schriftart, Schriftgrößeund Schriftfarbe
<basefont size=“n“> ... </basefont> = Default-Schriftgröße(1: sehr klein bis 7: sehr groß)<font size=“n“> ... </font> = Schriftgröße
<font color=“#rgb“> ... </font> = Schriftfarbe (r = Rotwert, hexadezimal 00 bis FF g = Grünwert, hexadezimal 00 bis FF b = Blauwert, hexadezimal 00 bis FF)
<font color=“color_name“> ... </font> = Schriftfarbe (color_name: red, green, blue, ...)
<font face=“font_name“> ... </font> = Schriftart(font_name: Arial, Courier, ...)
4.2 Beispiele: TextformatierungenDie folgenden Beispiele zeigen einige Textformatierungen im HTML Quelltext (violett) undanschließend die Darstellung in einem Browser:
18
Einführung in HTML Formatieren von Text
ääÄöÖüÜß
äÄöÖüÜ ß
Dieser Satzdarf nicht getrennt werden, egal wie lang er ist.
Dieser Satzdarf nicht getrennt werden, egal wie lang er ist.
<br>&<br>><br><<br>"
& > < "
19
Einführung in HTML Formatieren von Text
<strong>wichtig</strong><br><em>emphatisch</em><br><tt>dicktengleich</tt><br><cite>Zitat</cite><br><code>Quellcode</code><br><kbd>Terminal</kbd><br><samp>Beispiel</samp><br><dfn>Definition</dfn></td><b>fett</b><br><i>kursiv</i><br><u>unterstrichen</u><br><blink>blinkend</blink><br><s>durchgestrichen</s><br><big>große Schrift</big><br><small>kleine Schrift</small><br>normal<sub>tiefgestellt</sub><br>normal<sup>hochgestellt</sup>
wichtig emphatisch dicktengleich Zitat Quellcode Terminal Beispiel Definition fett kursiv unterstrichen blinkend durchgestrichen große Schrift kleine Schrift normaltiefgestellt normalhochgestellt
20
Einführung in HTML Formatieren von Text
<br><font face="" size="1">Schriftgröße absolut 1</font><br><font face="" size="2">Schriftgröße absolut 2</font><br><font face="" size="3">Schriftgröße absolut 3</font><br><font face="" size="4">Schriftgröße absolut 4</font><br><font face="" size="5">Schriftgröße absolut 5</font><br><font face="" size="6">Schriftgröße absolut 6</font><br><font face="" size="7">Schriftgröße absolut 7</font><p>Standard-Schrift ab hier neu definieren(Courier, blau, 3):<p><basefont face="Courier"size="3"color="blue">Schrift <p><font size="+1">Schriftgröße relativ +1</font><br><font size="-2">Schriftgröße relativ -2</font><p><font color="Red">Schriftfarbe rot</font><p><font face="Times">Schriftart Times</font>
Schriftgröße absolut 1 Schriftgröße absolut 2 Schriftgröße absolut 3 Schriftgröße absolut 4 Schriftgröße absolut 5
Schriftgröße absolut 6
Schriftgröße absolut 7
Standard-Schrift ab hier neu definieren (Courier, blau, 3): Schrift
Schriftgröße relativ +1 Schriftgröße relativ -2 Schriftfarbe rot Schriftart Times
4.3 Übungen1. Formatieren Sie die Datei „erde-2.htm“ so, daß Sie wie vorgegeben aussieht. Ver-
gessen Sie nicht, die Datei abzuspeichern.
Erde: Der Wasserplanet
21
Einführung in HTML Formatieren von Text
70% der Erdoberfläche besteht aus Wasser (b). Die restlichen 30% sind Gebirge (sup),Vulkane (i), Wüsten (u), Ebenen (big), und Täler (sub).
Die Erde (size=+2, color=Blue) ist der drittnächste Planet zur Sonne(size=+4, color=Yellow). Sie hat hat eine Atmosphäre, die aus vielen verschiedenen Ga-sen besteht. Aber der Hauptteil sind Stickstoff und Sauerstoff.
4.4 Lösungenzu 1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Erde</title></head><body ><h1>Erde: Der Wasserplanet </h1>
70% der Erdoberfläche besteht aus <b>Wasser</b>. Die restlichen 30% sind<sup>Gebirge</sup>, <i>Vulkane</i>, <u>Wüsten</u>, <big>Ebenen</big>,und <sub>Täler</sub>. <p>Die <font face="Arial" size="+2" color="Blue">Erde</font> ist derdrittnächste Planet zur <font face="Arial" size="+4" color="Yellow">Son-ne</font>. Sie hat hat eine Atmosphäre, die aus vielen verschiedenen Ga-sen besteht. Aber der Hauptteil sind Stickstoff und Sauerstoff. </body></html>
22
Einführung in HTML Formatieren von Absätzen
5 Formatieren von AbsätzenIn diesem Kapitel werden folgende Markierungen (Tags) zur Formatierung von Absätzenbehandelt:
Absatzschaltung und Absatzausrichtung
<p>...<p> = neuer Absatz mit Leerzeile dahinter<p align=“left“> = folgender Absatz linksbündig <p align=“center“> = folgender Absatz zentriert <p align=“right“> = folgender Absatz rechtsbündig
Mehrere Elemente zentriert ausrichten: <div align=“center“> ... beliebige Elemente ... </div>
Mehrere Elemente rechtsbündig ausrichten: <div align=“right“> ... beliebige Elemente ... </div>
<br> = Zeilenumbruch an dieser Stelle
<nobr> ... </nobr> = kein Zeilenumbruch im Bereich <wbr> ... </wbr> = Zeilenumbruch NOBR-Bereich
Überschriften <h1> ... </h1> = Überschrift 1. Ordnung <h2> ... </h2> = Überschrift 2. Ordnung <h3> ... </h3> = Überschrift 3. Ordnung <h4> ... </h4> = Überschrift 4. Ordnung <h5> ... </h5> = Überschrift 5. Ordnung <h6> ... </h6> = Überschrift 6. Ordnung <h# align=“left“> ... </h#> = Überschrift links <h# align=“center“> ... </h#> = Überschrift zentriert <h# align=“right“> ... </h#> = Überschrift rechts (# = 1-6)
Andere Absatztypen <pre> ... </pre> = Bereits formatierter Text <address> ... </address> = Internet-Adresse <blockquote> ... </blockquote> = Zitat
Linie <hr ...> = (Trenn-) Linie
5.1 Beispiele AbsatzformatierungDie folgenden Beispiele demonstrieren die links-bündige, mittige und rechts-bündige Aus-richtung von Text:
23
Einführung in HTML Formatieren von Absätzen
<b><i>Merkur:</i></b> <p>Wegen seiner großen Sonnennähe ist Merkurnur in der Abend- oder Morgendämmerung beobachtbar. ... </p>
Merkur: Wegen seiner großen Sonnennähe ist Merkur nur in der Abend- oder Morgendämme-rung beobachtbar. Sein Abstand von der Erde schwankt zwischen 80 und 220 Mil-lionen Kilometern. Seine Rotationsperiode beträgt 58,65 Tage, seine sider. Um-laufzeit beträgt 87,97 Tage. Da der Planet keine nennenswerte Atmosphäre be-sitzt, herrschen große Temperaturgegensätze zwischen Tag- und Nachtseite, etwa585K (rund 310°C) und 150K (-120°C). Die Oberfläche des Merkur besitzt erdmond-ähnliche Formationen.
<p align="center"><b><i>Venus:</i></b><p align="center">Bezüglich Masse, Dichte und Radius sind ichVenus und Erde sehr ähnlich. ... </p>
Venus:Bezüglich Masse, Dichte und Radius sind ich Venus und Erde sehr ähnlich. In denanderen physikalischen Parametern treten jedoch kaum Gemeinsamkeiten auf. EineBesonderheit gegenüber allen anderen Planeten ist die langsame Venusrotation
von 243 Erdtagen, die entgegengesetzt (retrograd) zur Bahnbewegung um die Sonnegerichtet ist. Die Länge eines Sonnentages auf der Venus entspricht 117 Erdta-
gen.
<p align="right"><b><i>Jupiter:</i></b><p align="right">Der Planet Jupiter ist der größte und massereichstePlanet des Sonnensystems; er gehört zu den hellsten Objekten des Himmels. ...</p>
JupiterDer Planet Jupiter ist der größte und massereichste Planet des Sonnensystems;er gehört zu den hellsten Objekten des Himmels. Je nach der Stellung von Jupi-
ter und Erde ändert sich der Abstand des Planeten von der Erde zwischen 588Mill. und 967 Mill. km. Schon bei Betrachtung des Jupiters mit kleinen Fernroh-ren fällt seine starke Abplattung auf, die er infolge seiner schnellen Rotationbesitzt. Jupiter rotiert in weniger als 10h um seine Achse, die fast senkrecht
auf seiner Bahnebene steht
5.2 Beispiele Überschriften und LinienDie folgenden Beispiele demonstrieren verschiedene Typen von Überschriften, mittigeAusrichtung und horizontale Linien.<h1>Die Körper des Sonnensystems</h1><h2>Die Körper des Sonnensystems</h2><h3>Die Körper des Sonnensystems</h3><h4>Die Körper des Sonnensystems</h4><h5>Die Körper des Sonnensystems</h5><h6>Die Körper des Sonnensystems</h6>
24
Einführung in HTML Formatieren von Absätzen
<h1 align="CENTER">Die Körper des Sonnensystems</h1><h1 align="RIGHT">Die Körper des Sonnensystems</h1>
<hralign="LEFT"size="1"width="100%"noshade>
<hralign="LEFT"size="1"width="50%"noshade>
<hralign="LEFT"size="1"width="100"noshade>
<hralign="RIGHT"size="5"width="100"noshade>
<hralign="RIGHT"size="1"width="50%"noshade>
<hr size="10"width="100%"color="Red">
25
Einführung in HTML Formatieren von Absätzen
5.3 Beispiele Einrückung und vorformatierter TextDie folgenden Beispiele demonstrieren die Übernahme von bereits formatiertem Text undEinrückung:
<pre>1 2 3 4 5 6a b c d e f</pre>
1 2 3 4 5 6a b c d e f
<blockquote>1 2 3 4 5 6 a b c d e f</blockquote>
1 2 3 4 5 6 a b c d e f
<listing>int main(void){...}</listing>
int main(void){...}
5.4 Übungen1. Formatieren Sie die Datei „erde-3“.htm so wie im folgenden vorgegeben.2. Trennen Sie die Absätze in der Datei „erde-3.htm“ mit einer Linie der Dicke 1 ohne
Schatten, der Länge 75% (relativ zum Fenster) mit zentrierter Ausrichtung (hralign="CENTER" size="1" width="75%" noshade). Speichern Sie als Datei „erde-4.htm“.
26
Einführung in HTML Formatieren von Absätzen
Ab hier: Überschrift der Ebene 1 (h1), rechtsbündig: Erde: Der Wasserplanet Ab hier mit <pre> formatiert: 70% der Erdoberfläche besteht aus Wasser.Die restlichen 30% sind Gebirge, Vulkane, Wüsten, Ebenen, und Täler. Ab hier mit <p align="center"> formatiert: Die Erde ist der drittnächste Planet zur Sonne. Sie hat hat eine Atmosphäre, die aus vie-len verschiedenen Gasen besteht. Aber der Hauptteil sind Stickstoff und Sauerstoff. DieAtmosphäre gibt uns Luft zum Atmen. Wir leben auf dem Planeten Erde. Ab hier mit <p align="right"> formatiert: Die Erde umkreist die Sonne. Sie braucht ein Jahr für einen kompletten Umlauf. Außer-dem dreht sich die Erde um ihre Achse. Eine Umdrehung dauert einen Tag. Die Erdachsesteht nicht gerade, sondern ist ein weinig geneigt. Durch diese Neigung entstehen dieJahreszeiten. Ohne diese Neigung hätten wir das ganze Jahr hindurch ungefähr die glei-chen Temperaturen.
5.5 Lösungenzu 1 und 2:
27
Einführung in HTML Formatieren von Absätzen
<h1 align=“right“>Erde: Der Wasserplanet </h1>
<pre>70% der Erdoberfläche besteht aus Wasser.Die restlichen 30% sind Gebirge, Vulkane,Wüsten, Ebenen, und Täler.</pre>
<hralign="MIDDLE"size="1"width="75%"noshade>
<p align="center">Die Erde ist der drittnächste Planet zur Sonne. Sie hat hat eineAtmosphäre, die aus vielen verschiedenen Gasen besteht. Aber der Hauptteilsind Stickstoff und Sauerstoff. Die Atmosphäre gibt uns Luft zum Atmen.Wir leben auf dem Planeten Erde.</p>
<hralign="MIDDLE"size="1"width="75%"noshade>
<p align="right"> Die Erde umkreist die Sonne. Sie braucht ein Jahr füreinen kompletten Umlauf. Außerdem dreht sich die Erde um ihre Achse. EineUmdrehung dauert einen Tag. Die Erdachse steht nicht gerade, sondern ist einweinig geneigt. Durch diese Neigung entstehen die Jahreszeiten. Ohne diese Nei-gung hätten wir das ganze Jahr hindurch ungefähr die gleichen Tempe-raturen. </p>
28
Einführung in HTML Einfügen von Listen und Glossaren
6 Einfügen von Listen und GlossarenIn diesem Kapitel werden folgende Markierungen (Tags) zur Formatierung von Listen undGlossaren behandelt:
Listen <ul> = ungeordnete Liste (bullet list)<li> = Listeneintrag </ul> = Ende der Bullet-Liste <ul type=square> = Bullet-Liste mit eckigen Bullets <ul type=circle> = Bullet-Liste mit runden Bullets <ul type=disc> = Bullet-Liste mit Datei-Bullets
<ol> = numerierte Liste <li> = Listeneintrag </ol> = Ende der numerierten Liste> <ol type=A> = numerierte Liste A,B,C... <ol type=a> = numerierte Liste a,b,c... <ol type=I> = numerierte Liste I,II,III... <ol type=i> = numerierte Liste i,ii,iii <ol start=(Zahl)> = numerierte Liste mit Startwert
<dir> = Verzeichnis-Liste <li> = Listeneintrag </dir> = Ende der Verzeichnis-Liste
Glossare <dl> = Glossar-Anfang <dt> ... </dl> = zu definierender Ausdruck <dd> ... </dd> = Definition </dl> = Glossar-Ende
29
Einführung in HTML Einfügen von Listen und Glossaren
6.1 Beispiele Listen
Unsortierte Listen
<ul><li>Merkur<li>Erde<li>Venus<li>Mars</ul>
• Merkur • Erde • Venus • Mars
<ul type="square"><li>Merkur<li>Erde<li>Venus<li>Mars</ul>
Merkur Erde Venus Mars
<ul type="circle"><li>Merkur<li>Erde<li>Venus<li>Mars</ul>
Merkur Erde Venus Mars
30
Einführung in HTML Einfügen von Listen und Glossaren
Sortierte Listen
<ol><li>Merkur<li>Erde<li>Venus<li>Mars</ol>
1. Merkur 2. Erde 3. Venus 4. Mars
<ol type="a"><li>Merkur<li>Erde<li>Venus<li>Mars</ol>
a. Merkur b. Erde c. Venus d. Mars
<ol type="I"><li>Merkur<li>Erde<li>Venus<li>Mars</ol>
I. Merkur I. Erde II.Venus III.Mars
31
Einführung in HTML Einfügen von Listen und Glossaren
Verschachtelte Listen
<ol type=I> <li>Innere Planeten <ol type=i> <li>Merkur <li>... </ol> <li>Äußere Planeten <ol type=i start=5> <li >Jupiter <li>... </ol></ol>
I. Innere Planeten i. Merkur ii....
II.Äußere Planeten v. Jupiter vi....
6.2 Übungen1. Formatieren Sie die Datei „planeten-1.htm“ so wie im folgenden vorgegeben.
Überschrift der Ebene 1 (h1), mittig: Die PlanetenNeun Planeten hat man in unserem Sonnensystem entdeckt:
I. Innere Planeten i. Merkur ii. Venus iii. Erde iv. Mars
II. Äußere Planeten v. Jupiter vi. Saturn vii.Uranus viii.Neptun ix. Pluto
6.3 Lösungenzu 1:
32
Einführung in HTML Einfügen von Listen und Glossaren
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<title>Die Planeten</title></head>
<body><h1 align=“center“>Die Planeten</h1>Neun Planeten hat man in unserem Sonnensystementdeckt:<p><ol type="I"><li>Innere Planeten<ol type="i">
<li>Merkur<li>Venus<li>Erde<li>Mars
</ol><li>Äußere Planeten<ol type="i" start=5>
<li> Jupiter<li>Saturn<li>Uranus<li>Neptun<li>Pluto
</ol></ol></body></html>
33
Einführung in HTML Einfügen von Hyperlinks und Ankern
7 Einfügen von Hyperlinks und AnkernIn diesem Kapitel werden Markierungen (Tags) zur Definition von Ankern (Sprungziele)und Verweisen (häufig auch als Hyperlinks oder kurz Links bezeichnet) behandelt. Die Markierung <a ...> (A steht hierbei für Anker oder Anchor) definiert Hyperlinks – alsodie Essenz von HTML als Hypertext-Anwendung. Die Markierung <a> besitzt zwei wesentliche Attribute, nämlich das NAME- und dasHREF-Attribut.
Hyperlink:
<a href="Ziel">Text</a>
Anker:
<a name="Bezeichner">Text</a>
Das folgende Beispiel zeigt einen typischen Verweis auf eine Heimatseite:
Sie finden viele Informationen auf der<a href="http://www.rz.uni-osnabrueck.de/index.htm">Heimatseite desRechenzentrums</a>.
Das HREF Attribut (für Hypertext REFerence) definiert einen Verweis auf ein anderesHTML Dokument, das entweder "irgendwo" auf einem WWW Server liegen kann, oderauf dem selben WWW Server in einer anderen Datei oder einen Verweis auf eine be-stimmte Position (Anker) im selben HTML Dokument. Wenn ein Hyperlink von einem Leser ausgewählt (angeklickt) wird, wird er zu einem ande-ren Dokument oder zu einer anderen Stelle im aktuellen Dokument bewegt, dessen Netz-werkadresse durch den Wert des HREF-Attributs definiert wird.Typischerweise werden Hyperlinks, die durch dieses Tag festgelegt wurden, durch unter-strichenen blauen Text dargestellt Der Wert des NAME Attributs ist ein Identifizierung für eine Position im Dokument, die als(Sprung-) Ziel für einen Verweis verwendet werden kann.
34
Einführung in HTML Einfügen von Hyperlinks und Ankern
Lokale Verweise(innerhalb eines WWW Ser-vers oder auf einer Festplatte)
Innerhalb einer Datei:
Vorher: Anker in Datei setzen:<a name="Bezeichner"> Text </a> Dann: Verweis zu diesem Anker definieren:<a href="#Bezeichner">Verweistext</a>
Zwischen Dateien:
Verweis zu Datei im gleichen Verzeichnis: <a href="datei.htm">Verweistext</a> Verweis zu Datei in anderem Verzeichnis (relativ): <a href="../[pfad]/datei.htm">Verweistext</a> Verweis zu Anker innerhalb einer anderen Datei: <a href="datei.htm#Bezeichner">Verweistext</a>
Weltweite Verweise Schema: <a href="http://Server/Verzeichnis/Datei">Ver-weistext</a>
Weitere URL-Typen Häufig benutzt: mailto: = Adressierung von Email-Adressen ftp:// = Adressierung von Dateien auf FTP-Servern
Selten benutzt: telnet:// = Adressierung von Telnet-Servern news: = Adressierung von Newsgroups im Usenet
Die sich hieraus ergebenden Möglichkeiten sollen an den folgenden Beispielen illustriertwerden.
7.1 Beispiele: Springen innerhalb eines DokumentsIm folgenden HTML Dokument werden 2 Anker („oben“ und „unten)“ und 2 Hyperlinks„Gehe nach oben“ und „Gehe nach unten“) definiert, um jeweils innerhalb des Dokumentsvon oben nach unten bzw. zurück zu springen.
Zur allgemeinen Verwirrung trägt meiner Erfahrung nach bei, daß der Nameeines Ankers kein # enthalten darf, während der Name als Ziel eines Hyper-links im selben Dokument zusätzlich mit # gekennzeichnet werden muß!
35
Einführung in HTML Einfügen von Hyperlinks und Ankern
Definieren eines Hyperlinks mit Ziel "#unten" (mit #):<br><a href="#unten">Gehe nach unten!</a><br>Definieren eines Ankers mit Bezeichner "oben" (ohne #):<br><a name="oben">Hier ist oben!<br></a> Text ... <br>Definieren eines Ankers mit Bezeichner "unten" (ohne #): <br><a name="unten">Hier ist unten!</a><br>Definieren eines Hyperlinks mit Ziel "#oben" (mit #):<br><a href="#oben">Gehe nach oben!</a><br>
Dieser HTML Quellcode wird im WWW Browser folgendermaßen dargestellt:
7.2 Beispiele: Aktives InhaltsverzeichnisIm folgenden HTML Quelltext ist ein „aktives“ Inhaltsverzeichnis eingebaut:
<h2>Planeten</h2><p><a name="oben">Inhaltsverzeichnis</a><ul> <li><a href="#merkur">Merkur</a> ...</ul><p><b><i><a name="merkur">Merkur</a>:</i></b><br>Wegen seiner großen Sonnennähe ist Merkurnur in der Abend- oder Morgendämmerung beobachtbar. Sein Abstand vonder Erde schwankt zwischen 80 und 220 Millionen Kilometern. ...<p><a href="#oben">Zurück zum Inhaltsverzeichnis</a>
36
Einführung in HTML Einfügen von Hyperlinks und Ankern
7.3 Beispiele: Verweis auf eine Internet SeiteIm folgenden HTML Quelltext wird ein Verweis (Link) auf eine andere Internet Seite einge-baut.
Sie finden viele Informationen auf der<a href="http://www.rz.uni-osnabrueck.de/index.htm">Heimatseite desRechenzentrums</a>.
7.4 Übungen1. Schreiben Sie ein Inhaltsverzeichnis für die Datei „sonne.htm“ (siehe unten) mit den
Einträgen "allgemeine Informationen" und "Sonnenflecken" als Verweis auf die ent-sprechenden Abschnitte.Definieren Sie hierzu zunächst die beiden Überschriften der Ebene 2 als Anker. Er-stellen Sie dann eine ungeordnete Liste mit Verweisen auf diese beiden Anker.Speichern Sie das Ergebnis als Datei „sonne-1.htm“.
2. Erstellen Sie zwei Dateien a.htm und b.htm, die wechselseitig aufeinander verwei-sen.
3. Ergänzen Sie in a.htm einen Anker a1 und in b.htm einen Anker b1, auf den vonder jeweils anderen Datei verwiesen wird.Die Struktur von a.htm und b.htm finden Sie am Ende der Seite.
4. Zusatzaufgabe: Suchen Sie im Web nach weiteren Informationen zum Thema"Sonne" und fügen Sie entsprechende Hyperlinks als weitere Einträge im Inhalts-verzeichnis ein. Speichern Sie das Ergebnis als Datei „sonne-info.htm“.
37
Einführung in HTML Einfügen von Hyperlinks und Ankern
Hinweis: Ein möglicher Einstiegspunkt ist http://www.astronomie.de (dort: Galerien).
H1: Die Sonne
H2: allgemeine Informationen
Die Sonne ist unser nächster Stern. Sie ist ein Mitglied unserer Galaxie, derMilchstraße. Die Sonne ist ein gelber Zwergstern, das heißt ein Sterndurchschnittlicher Größe. Vermutlich ist sie mehr als 4 Milliarden Jahre alt.Die Sonne dreht sich langsam um ihre Achse. Außerdem kreist sie um das Zentrumder Milchstraße. Der Kern oder das Zentrum der Sonne ist sehr heiß. Dort findetein Prozeß statt, den man "Kernfusion" nennt. Die Kernfusion produziert eineMenge Energie. Ein Teil dieser Energie wird als Licht und Wärme in den Weltraumabgestrahlt. Ein kleiner Teil davon erreicht die Erde! Ströme aus Gaspartikel,auch Sonnenwind genannt, verlassen ebenfalls die Sonne.
h2: Sonnenflecken
Auf der Sonnenoberfläche gibt es Gebiete, die etwa 1500 Grad kälter als ihreUmgebung sind. Wir nennen diese Gebiete "Sonnenflecken", weil sie im Vergleichzur normalen Sonnenoberfläche dunkel aussehen. Die Sonnenflecken werden durchdas aus dem Sonneninneren aufsteigende starke Magnetfeld erzeugt. Die Sonneproduziert auch große Energieausbrüche, die Flares genannt werden. Diese Flaresschießen einen Strom schneller Teilchen von der Sonnenoberfläche in denWeltraum. Treffen diese Teilchen die Erdatmosphäre so erzeugen sie einLeuchten, das wir Polarlicht nennen.
a.htm: ...<a name="a1">Anker a1</a>...<a href="b.htm">Verweis auf b.htm</a><a href="b.htm#b1">Verweis auf Anker b1 in b.htm</a>...
b.htm: ...<a name="b1">Anker b1</a>...<a href="a.htm">Verweis auf a.htm</a><a href="a.htm#a1">Verweis auf Anker a1 in a.htm</a
An diesen Beispiel-Dateien wird deutlich, daß # als Trenner zwischen dem Verweis aufeine Internet Seite und einem Anker auf dieser Internet Seite dient.
7.5 Lösungenzu 1:
38
Einführung in HTML Einfügen von Hyperlinks und Ankern
<ul><li><a href="#a1">allgemeine Informationen</a><li><a href="#a2">Sonnenflecken</a></ul><hr><p><a name="a1"><h2>allgemeine Informationen</h2></a>Die Sonne ist unser nächster Stern. Sie ist ein Mitglied unserer Galaxie, derMilchstraße....<p><a name="a2"><h2>Sonnenflecken</h2></a>Auf der Sonnenoberfläche gibt es Gebiete, die etwa 1500 Grad kälter als ihreUmgebung sind. Wir nennen diese Gebiete "Sonnenflecken", weil sie im Vergleichzur normalen Sonnenoberfläche dunkel aussehen....
39
Einführung in HTML Einfügen von Tabellen
8 Einfügen von Tabellen
8.1 BezeichnungenEine Tabelle hat folgenden prinzipiellen Aufbau aus Zeilen und Spalten, hier als Beispieleine Tabelle mit 3 Spalten und 2 Zeilen:
Spalte 1 Spalte 2 Spalte 3
Zeile 1 Zelle (1,1) Zelle (1,2) Zelle (1,3)
Zeile 2 Zelle (2,1) Zelle (2,2) Zelle (2,3)
Verwenden Sie folgenden HTML Code, um ein Tabelle mit 2 Zeilen und 3 Spalten zu er-zeugen:
<table border=1> <tr> <td>1,1</td> <td>1,2</td> <td>1,3</td> </tr> <tr> <td>2,1</td> <td>2,2</td> <td>2,3</td> </tr></table>
1,1 1,2 1,3
2,1 2,2 2,3
8.2 Aufbau einer Tabelle Die Markierung <table> leitet eine Tabelle ein. Wenn die Tabelle sichtbare Gitternetzlinienenthalten soll, muß das Attribut border=“n“ ( n=1,2,3,...) verwendet werden. Das Ende ei-ner Tabelle wird durch </table> markiert. <tr> leitet jeweils eine neue Tabellenzeile ein. Im Anschluß daran werden die Zellen derbetreffenden Zeile durch <th> oder <td> definiert. Eine Tabellenzeile wird durch </tr> be-endet.
40
Einführung in HTML Einfügen von Tabellen
Eine Zeile kann Kopfzellen und gewöhnliche Datenzellen enthalten. Text in Kopfzellenwird hervorgehoben. <th> definiert eine Kopfzelle, <td> eine normale Datenzelle. Der In-halt der Zelle wird jeweils dahinter notiert. In einer Tabellenzelle können beliebige Elemen-te stehen, d.h. außer normalem Text z.B. auch Verweise, Bilder oder auch wieder (Sub-)Tabellen. Das Layout einer Tabelle kann vielfältig variiert werden, z.B. durch:
• Hinzufügen von Rahmen • Zusammenfassen von Zellen in horizontaler und vertikaler Richtung • Definieren von Hintergrundfarben • Definieren von Rändern
Tabellen werden z.B. verwendet zur:
• Positionierung von Bildern und zugehörigem Text • Verbesserung des Layouts von Formularen
8.3 Elemente einer Tabelle
Tabelle definie-ren
<table> = Tabellen-Anfang <caption>...</caption> = Titel der Tabelle <tr> = neue Tabellenzeile <th> ... </th> = Kopfzelle <td> ... </td> = Datenzelle </tr> = Ende der Tabellenzeile <tr> = neue Tabellenzeile <th> ... </th> = Kopfzelle <td> ... </td> = Datenzelle </tr> = Ende der Tabellenzeile... </table> = Tabellen-Ende
41
Einführung in HTML Einfügen von Tabellen
Tabellengestal-tung (tabellenglobal)
<table border> = Gitternetzlinien anzeigen <table border=(Zahl)> = Außenrahmendicke in Pixel <table width=(Zahl)%> = Gesamtbreite prozentual zum Anzeige-fenster <table width=(Zahl)> = Gesamtbreite in Pixel <table height=(Zahl)%> = Gesamthöhe prozentual zum Anzeige-fenster <table height=(Zahl)> = Gesamthöhe in Pixel <table cellspacing=(Zahl)> = Gitternetzdicke in Pixel <table cellpadding=(Zahl)> = Abstand Zelleninhalt von Rand in Pi-xel <table bgcolor=#rgb> = tabellenweite Hintergrundfarbe <table bordercolor=#rgb> = Rahmen- und Gitternetzfarbe <table bordercolordark=#rgb> = dunkler Teil der Rahmen- und Git-ternetzfarbe <table bordercolorlight=#rgb> = heller Teil der Rahmen- und Git-ternetzfarbe (r = Rotwert, hexadezimal 00 bis FF g = Grünwert, hexadezimal 00 bis FF b = Blauwert, hexadezimal 00 bis FF)
Tabellenzellen-gestaltung,Kopfzelle
<th align=left> = Kopfzelle links ausrichten <th align=center> = Kopfzelle zentriert ausrichten <th align=right> = Kopfzelle rechts ausrichten <th width=(Zahl)%> = Spaltenbreite proz. zum Anzeigefenster <th width=(Zahl)> = Spaltenbreite in Pixel <th height=(Zahl)%> = Zeilenhöhe proz. zum Anzeigefenster <th height=(Zahl)> = Zeilenhöhe in Pixel <th valign=top> = Kopfzelle oben ausrichten <th valign=middle> = Kopfzelle mittig ausrichten <th valign=bottom> = Kopfzelle unten ausrichten <th bgcolor=#rgb> = Hintergrundfarbe der Kopfzelle (r = Rotwert, hexadezimal 00 bis FF g = Grünwert, hexadezimal 00 bis FF b = Blauwert, hexadezimal 00 bis FF)
Tabellenzellen-gestaltung,Datenzelle
<td align=left> = Datenzelle links ausrichten <td align=center> = Datenzelle zentriert ausrichten <td align=right> = Datenzelle rechts ausrichten <td width=(Zahl)%> = Spaltenbreite proz. zum Anzeigefenster <td width=(Zahl)> = Spaltenbreite in Pixel <td height=(Zahl)%> = Zeilenhöhe proz. zum Anzeigefenster <td height=(Zahl)> = Zeilenhöhe in Pixel <td valign=top> = Datenzelle oben ausrichten <td valign=middle> = Datenzelle mittig ausrichten <td valign=bottom> = Datenzelle unten ausrichten <td bgcolor=#rgb> = Hintergrundfarbe der Datenzelle (r = Rotwert, hexadezimal 00 bis FF g = Grünwert, hexadezimal 00 bis FF b = Blauwert, hexadezimal 00 bis FF
42
Einführung in HTML Einfügen von Tabellen
Tabellenzellenverbinden
<th rowspan=(Zahl)> = (Zahl) Zeilen zu einer verbinden <th colspan=(Zahl)> = (Zahl) Spalten zu einer verbinden
<td rowspan=(Zahl)> = (Zahl) Zeilen zu einer verbinden <td colspan=(Zahl)> = (Zahl) Spalten zu einer verbinden
Tabellenüber-schriften Tabellenunter-schriften
<caption valign=top>Tabellenüberschrift</caption> <caption valign=bottom>Tabellenunterschrift</caption> <caption valign=top align=center>Tabellenüberschrift zen-triert</caption> <caption valign=top align=center>Tabellenüberschrift rechtsbün-dig</caption>
8.4 Beispiele: einfache Tabellen mit ÜberschriftenDie folgenden Beispiele demonstrieren Möglichkeiten der Tabellengestaltung.
<table align="center" bgcolor="Teal" width="100%" cellspacing="2"cellpadding="2" border="1" frame="hsides" rules="rows"><caption align="CENTER"valign="TOP">Tabelle : Überschrift zentriert, oben, diverse Farben fürZellen</caption><tr><th bgcolor="Aqua">1</th><th bgcolor="Red">2</th></tr><tr><td bgcolor="Lime" bordercolor="Aqua">3</td><td bgcolor="Fuchsia">4</td></tr></table>
In der folgenden Tabelle erstreckt sich Zelle(1,1) über insgesamt 3 untereinanderliegendeZellen (Attribut: rowspan). In den folgenden Zeilen verschiebt sich der Index um einennach oben, weil die erste Zelle jeweils "fehlt":
43
Einführung in HTML Einfügen von Tabellen
<table border="1"><tr><td rowspan="3">1-3,1</td><td>1,2</td><td>1,3</td></tr><tr><td>2,2</td><td>2,3</td></tr><tr><td>3,2</td><td>3,3</td></tr></table>
8.5 Beispiele: komplexe TabelleDie folgenden Beispiele demonstrieren komplexe Möglichkeiten der Tabellengestaltung.
<table BORDER=1 ><tr><th colspan="10" align="center"><font face="Arial" color="teal">Planeten</font></th></tr><tr><th> </th><th>Merkur </th><th>Venus </th>...</tr><tr><th>mittlerer Abstand von der Sonne in 10<sup>6</sup> km </th><td>57,9 </td><td>108,2 </td>...</tr></table>
44
Einführung in HTML Einfügen von Tabellen
8.6 Übungen1. Erstellen Sie eine 2x2 Tabelle mit mittiger Überschrift über der Tabelle und speichern
Sie in die Datei „tabellen-1.htm.2. Erstellen Sie eine 3x3 Tabelle, bei der sich die 2. Zeile über alle 3 Spalten erstreckt und
speichern Sie in die Datei „tabellen-2.htm“.3. Erstellen Sie eine (unsichtbare) Tabelle (border=0, cellspacing=5) mit 4 Zeilen und 2
gleichbreiten Spalten. Schreiben Sie die Name des Planeten fett und den zugehörigenText für die Planeten Venus, Mars, Merkur und Jupiter jeweils alternierend in die linkeund die rechte Spalte. Ziehen Sie dabei jeweils die Überschrift an den Text heran undfluchten Sie den Text gegen die Überschrift. Den benötigten Text über die genanntenPlaneten finden Sie am Ende dieser Seite Speichern Sie die Tabelle in der Datei „ta-bellen-3..htm“.
Die Ausrichtung soll schematisch gesehen folgendermaßen aussehen:
45
Einführung in HTML Einfügen von Tabellen
Mars | Text linksbündig Text rechtsbündig | Venus
Merkur: Wegen seiner großen Sonnennähe ist Merkur nur in der Abend- oder Morgen-dämmerung beobachtbar. Sein Abstand von der Erde schwankt zwischen 80 und 220 Mil-lionen Kilometern. Seine Rotationsperiode beträgt 58,65 Tage, seine sider. Umlaufzeit be-trägt 87,97 Tage. Da der Planet keine nennenswerte Atmosphäre besitzt, herrschen großeTemperaturgegensätze zwischen Tag- und Nachtseite, etwa 585K (rund 310°C) und 150K(-120°C). Die Oberfläche des Merkur besitzt erdmondähnliche Formationen. Venus: Bezüglich Masse, Dichte und Radius sind ich Venus und Erde sehr ähnlich. Inden anderen physikalischen Parametern treten jedoch kaum Gemeinsamkeiten auf. EineBesonderheit gegenüber allen anderen Planeten ist die langsame Venusrotation von 243Erdtagen, die entgegengesetzt (retrograd) zur Bahnbewegung um die Sonne gerichtet ist.Die Länge eines Sonnentages auf der Venus entspricht 117 Erdtagen. Mars: Außer der Erde ist der Mars der einzige Planet, bei dem es möglich ist, durch seineAtmosphäre auf die feste Oberfläche zu blicken. Seine Entfernung zur Erde schwankt jenach Stellung der beiden Planeten auf ihren Bahnen zwischen rund 400 Mill. km und 56Mill. km. Der Marstag ist nur wenig länger als ein Erdentag (24h 37min). Jupiter: Der Planet Jupiter ist der größte und massereichste Planet des Sonnensystems;er gehört zu den hellsten Objekten des Himmels. Je nach der Stellung von Jupiter undErde ändert sich der Abstand des Planeten von der Erde zwischen 588 Mill. und 967 Mill.km. Schon bei Betrachtung des Jupiters mit kleinen Fernrohren fällt seine starke Abplat-tung auf, die er infolge seiner schnellen Rotation besitzt.
8.7 Lösungenzu 1:<table border="1"><caption align="center"valign="top">Tabelle 1: Überschrift zentriert,oben</caption><tr><td>1</td><td>2</td></tr><tr><td>3</td><td>4</td></tr></table>
zu 2:
46
Einführung in HTML Einfügen von Tabellen
<table border="1"><tr><td rowspan="3">1-3,1</td><td>1,2</td><td>1,3</td></tr><tr><td>2,2</td><td>2,3</td></tr><tr><td>3,2</td><td>3,3</td></tr></table>
zu 3:<table width="100%" border="0" align="center" valign="top">
<tr><td width="50%" align="right" valign="top"><b><i>Merkur:</i></b> </td><td width="50%">Wegen seiner großen Sonnennähe ist Merkur...</tr>
<tr><td align="right">Bezüglich Masse, Dichte und Radius sind ichVenus und Erde sehr ähnlich....<p></td><td align="left" valign="top"><b><i>Venus:</i></b></td></tr>...
47
Einführung in HTML Einfügen von Bildern
9 Einfügen von Bildern
9.1 ElementeEin Bild kann (vergleichbar zu einem Zeichen) an jeder Stelle im HTML Dokument einge-fügt werden.
Bilder Grafik liegt im gleichen Verzeichnis wie HTML Dokument: <img src="datei.gif"> Grafik liegt in einem anderem Verzeichnis (relativ): <img src="../[pfad]/datei.gif">
Alternativer Text bei Nichtanzeige der Grafik: <img src="datei.gif" alt="anzuzeigender Text">
Rahmen um Grafiken: <img src="datei.gif" border=(Zahl)> = Breite in Pixel
Grafiken ausrichten (Text fließt um die Grafik): <img src="datei.gif" align=left> = links ausrichten <img src="datei.gif" align=right> = rechts ausrichten
Abstand zwischen Grafik und Umgebung: <img src="datei.gif" vspace=(Zahl)> = Abstand oben/unten <img src="datei.gif" hspace=(Zahl)> = Abstand links/rechts
Grafikbeschriftung (ein Textabsatz!) links neben der Grafik: <img src="datei.gif" align=top> = Beschriftung oben <img src="datei.gif" align=middle> = Beschriftung mittig <img src="datei.gif" align=bottom> = Beschriftung unten
Grafiken skalieren (nicht empfehlenswert, zeitaufwendig): <img src="datei.gif" width=(Zahl oder %)> = in Breite dehnen <img src="datei.gif" height=(Zahl oder %)> = in Höhe dehnen
9.2 FormateIn einem HTML Dokument können Sie die Bildformate GIF, Animated GIF, JPEG und, beineueren Browsern, auch PNG verwenden. Bilder sind typischerweise maximal 600x600 Pixel groß; typische Größen sind 640x480,320x240 und 120x80.
48
Einführung in HTML Einfügen von Bildern
GIF und Animated GIF
Das GIF Format umfaßt zwei sehr ähnliche Bildformate: GIF87, das Original, und GIF89a,das Erweiterungen für Transparenz und Interlacing sowie für GIF-Bilder mit mehrerenEinzelbildern (Annimated GIF) enthält, die für einfache Animationen verwendet werdenkönnen. GIF-Dateien eignen sich ausgezeichnet für Logos, Icons, Strichzeichnungen und ande-re einfache Bilder. Weniger gut sind sie für Bilder mit vielen Details zu gebrauchen, weildas GIF-Format auf 256 Farben begrenzt ist. Fotos im GIF Format sehen grobkörnig undfleckig aus. Transparente GIF-Bilder haben einen unsichtbaren Hintergrund, so daß die Farbe (oderdas Muster) des Seitenhintergrundes durchscheinen und dem Bild die Erscheinung ge-ben, auf der Seite zu schweben. Interlacing sorgt dafür, daß das GIF Bild anders abgespeichert wird. Statt die einzelnenZeilen hintereinander zu speichern, wird eine GIF Datei schrittweise gespeichert, wobei je-weils jede achte Zeile gespeichert wird, beginnend bei der ersten, gefolgt von jeder achtenbeginnend bei der vierten, gefolgt von jeder vierten, beginnend bei der dritten und danndie restlichen Zeilen. Bei der Anzeige dieser GIF-Datei werden die Zeilen so geladen, wie sie gespeichert wur-den: die erste Zeilenmenge, dann die zweite Menge usw. Abhängig vom verwendetenWWW Browser kann das einen »Jalousie«-Effekt erzeugen.
Bildgröße: 152x152 Pixel
Bildgröße: 108x52, Animated GIF
9.3 JPEGJPEG wurde für das Speichern von Fotos ausgelegt. Anders als GIF Bilder können JPEGBilder eine beliebige Anzahl Farben haben, und der Algorithmus für die Komprimierung istinsbesondere für die Muster geeignet, die man häufig auf Fotografien findet. Deshalb istder Umfang der erzeugten Fotodateien wesentlich geringer als bei GIF. Andererseits ist dieser Komprimierungsalgorithmus nicht besonders gut für Strichzeich-nungen oder Bilder mit großen Blöcken gleicher Farbe geeignet. Darüber hinaus wird hierdie Komprimierung mit Verlust durchgeführt, das bedeutet, daß Teile des Bildes ignoriertwerden, um es insgesamt kleiner zu machen.
49
Einführung in HTML Einfügen von Bildern
Das Konzept von progressivem JPEG ähnelt dem von GIF Interlacing. ProgressiveJPEG Dateien werden auf spezielle Weise gespeichert, so daß sie in fortschreitend detail-lierter Weise dargestellt werden, wenn sie geladen werden.
Bildgröße: 180x135
Bildgröße: 320x240
9.4 Beispiele: Icons
<img src="icons2/movie.gif" width=13 height=11 alt="" border="0"><img src="icons2/sound.gif" width=10 height=11 alt="" border="0">...
9.5 Beispiele: Navigation in einem DokumentDas folgende Beispiel demonstriert ein icon-basiertes Navigationssystem innerhalb einesHTML Dokuments, das analog auf verknüpfte Dokumente übertragen werden kann. Mit Hilfe eines Inhaltsverzeichnisses und Navigationsleisten können Sie Verknüpfungenzwischen Informationseinheiten (Kapiteln) eines Dokumentes realisieren.
50
Einführung in HTML Einfügen von Bildern
Als Beispiel soll ein Dokument mit Inhaltsverzeichnis, Navigationssystem und Kapiteln 1-2dienen. Das Inhaltsverzeichnis enthält Verweise auf die Kapitel 1-2, jedes Kapitel ist mitdem vorhergehenden und dem folgenden verzeigert. Das Erstellen derartiger Inhaltsverzeichnisse und Navigationshilfen per Hand ist mühsamund fehleranfällig. Es bleibt zu hoffen, daß HTML Editoren und Filter diese Aufgaben inZukunft automatisch erledigen.
<html><head><title>Navigation</title></head><body><p><ol><li><a href="#kap1">Video <img src="icons2/movie.gif" alt="movie"border="0"></a><li><a href="#kap2">Sound <img src="icons2/sound.gif" alt="movie"border="0"></a></ol><p><h2><a name="kap1">Video</a></h2><p>...<p><a href="#kap2">Nächstes Kapitel <img src="icons2/scrolldo.gif" alt=""border="0"></a><a name="kap2"><h2>Sound</h2></a><p>...<p><a href="#kap1">Vorheriges Kapitel <img src="icons2/scrollup.gif" alt=""border="0"></a></body></html>
51
Einführung in HTML Einfügen von Bildern
9.6 Quellen fürBilderIn diesem Kapitel werden die Themen "Bildsuche, -erzeugung, -bearbeitung, -konvertie-rung" nicht behandelt. Typische Fragestellungen in diesem Zusammenhang lauten:
1. Wo finde ich interessante Bilder? 2. Wie erzeuge ich selbst Bilder? 3. Wie verändere ich z.B. die Hintergrundfarbe eines Bildes? 4. Wie erzeuge ich z.B. aus einer Photoshop Datei eine Web-optimierte JPEG Datei? 5. Wie erzeuge ich aus einer Sequenz von Bildern eine Animation (wie z.B. eine Animated
GIF Datei)?
Auf Wunsch können diese Themen zusätzlich behandelt werden.
9.7 Übungen1. Speichern Sie zunächst die benötigten Dateien „erde.gif“ und „mond.gif“ durch Ankli-
cken mit der rechten (!) Maustaste und durch Auswählen von "Save As" (Speichern un-ter) im Kontextmenü.
2. Erstellen Sie ein HTML Dokument mit diesen beiden Bildern. Speichern Sie das HTMLDokument in der Datei „bilder-1.htm“
3. Verwenden Sie ein Vorschaubild (Thumbnail) „sonnensystem-thumb.jpg“ als Verweisauf das Originalbild „sonnensystem.jpg“.
9.8 Lösungenzu 1+2:Bilder von Mond und Erde:<p><img src="erde.gif" alt="Erde" border="0"><img src="mond.gif" alt="Mond" border="0"></p>
zu 3:<a href="sonnensystem.jpg"><img src="sonnensystem-thumb.jpg" alt="system"></a>
52
Einführung in HTML Einfügen von sensitive Bildern (image maps)
10 Einfügen von sensitive Bildern (image maps)Das Einbinden von sensitiven Bildern (clickable images, sensitive map) in HTML Doku-menten erhöht die Interaktivität, indem die visuellen Komponente des Dokumentes betontwird.Sie können als Leser bei einem sensitiven Bild auf bestimmte Bereiche (hot spots) kli-cken, um eine Aktion (Laden einer Datei) anzustoßen - die natürlich mit dem gewähltenBereich in Zusammenhang stehen muß.Eine denkbare Anwendung wäre das Bild eines Skeletts, bei dem einzelne Knochen ange-klickt werden können, worauf eine Erklärung zu diesem Knochen eingeblendet wird.
10.1 VorgehensweiseEin sensitives Bild umfaßt folgende Elemente: 1. Bild-Datei (hier: sonnensystem.jpg) 2. IMG Tag mit USEMAP Attribut3. MAP Tag mit sensitiven Bereichen (hier: Saturn und Neptun) 4. Ziel-Dateien bzw. Ziel-Anker (hier: Anker #saturn und #neptun im selben Dokument)
<img src="sonnensystem.jpg" alt="" border=0 usemap="#sonnensystem"><MAP NAME="sonnensystem"><AREA SHAPE=RECT COORDS="135,7,236,218" HREF=#saturn ALT="Saturn"><AREA SHAPE=RECT COORDS="27,77,80,140" HREF=#neptun ALT="Neptun"><AREA SHAPE=default HREF=#default></MAP>
53
Einführung in HTML Einfügen von sensitive Bildern (image maps)
10.2 Elemente
ImageMaps
<map name="map_name"> <area shape="rect" coords="ol,or,ul,ur"href="datei_1.html"> <area shape="circle" coords="x,y,r"href="datei_2.html"> <area shape="polygon" coords="x1,y2,x2,x2,..."href="datei_3.html"> </map> <img src="image.gif" usemap="#map_name" border=0>
rect = viereckige verweis-sensitive Fläche cirle = runde verweis-sensitive Fläche polygon = beliebige vieleckige verweis-sensitive Fläche
ol = Pixel von links für linke obere Ecke or = Pixel von oben für linke obere Ecke ul = Pixel von links für rechte untere Ecke ur = Pixel von oben für rechte untere Ecke x(1,2).. = Pixel von links y(1,2).. = Pixel von oben r = Radius
datei_n.html = Verweisziele
Für die Erzeugung von sensitiven Bildern sollten Sie tunlichst auf ein gutes Programm zu-rückgreifen. Im folgenden wird das Freeware Programm GeoHTML verwendet.
10.3 Erstellen einer sensitiven Karte mit GeoHTMLStarten Sie GeoHTML:
54
Einführung in HTML Einfügen von sensitive Bildern (image maps)
Erstelen Sie über „File > New Map“ eine neues sensitives Bild. Laden Sie die Bilddatei„sonnenystem.jpg“ als Quelle.Wählen Sie das Polygon-Werkzeug:
Zeichnen Sie die Umrisse eines Objektes, hier: Jupiter, möglichst genau mit Polygonzü-gen nach.
Klicken Sie auf „HTML Source“ um sich den HTML Quelltext anzeigen zu lassen, hier: Pla-net Uranos als sensitiver Bereich:
<!-- This document was created with GeoHTML 2.1 (http://www.fegi.ru/geohtml/)--><HTML><HEAD> <TITLE>untitled</TITLE></HEAD><BODY><IMG SRC="sonnensystem.jpg" USEMAP="#sonnensystem" WIDTH=575 HEIGHT=221 BORDER="0">
<MAP NAME="sonnensystem"> <AREA SHAPE="POLY" HREF="#" COORDS="322,60, 365,93, 362,138, 329,168, 271,167, 251,122, 261,78, 299,61, 323,61, 323,63, 322,60"></MAP></BODY></HTML>
55
Einführung in HTML Einfügen von sensitive Bildern (image maps)
10.4 Übungen1. Erstellen Sie ein sensitives Bild auf Grundlage der Bilddatei „sonnensystem.jpg“. Spei-
chern Sie das HTML Dokument als „map-1.htm“. Erstellen Sie für mindestens 2 Plane-ten Dateien „planetname.htm“, die als Sprungziel für den entsprechenden sensitivenBereich verwendet werden.
2. Zusatzaufgabe: Erstellen Sie ein sensitives Bild für eine Weltkarte, die z.B. die Erdteileals sensitive Bereiche enthält. (Bilddattei map.gif“).
10.5 Lösungenzu 1:GeoHTML
zu 2:GeoHTML
56
Einführung in HTML Verwenden von Rahmen (Frames)
11 Verwenden von Rahmen (Frames)Mit Hilfe des FRAMESET Tags können Sie den Anzeigebereich des WWW Browsers inverschiedene, frei definierbare und voneinander unabhängige Segmente (frames) auftei-len. Jedes Segment kann eigene Inhalte enthalten. Die einzelnen Anzeigesegmente (alsodie Frames) können wahlweise einen statischen Inhalt oder einen wechselnden Inhalt ha-ben. Verweise in einem Frame können z.B. Dateien aufrufen, die dann in einem anderenFrame angezeigt werden. Rahmen (Frames) sind kein weiteres Element, um typische Aufgaben der Textverarbei-tung zu bewältigen, sondern nutzen konsequent die spezifischen Eigenschaften der Bild-schirmanzeige. Frames eröffnen neue Möglichkeiten, um Information hypertextuell (d.h.nicht-linear) aufzubereiten. Beim Definieren von Frame-Sets bestimmen Sie, wie das Anzeigefenster aufgeteilt wer-den soll. Dabei müssen Sie sich das Anzeigefenster wie den leeren Rahmen einer Tabellevorstellen. Damit die Tabelle Gestalt annimmt, müssen Sie zunächst Reihen und Spaltendefinieren.
Frame-Sets definie-ren
Nebeneinander (Beispiel): <frameset cols="200,*"> <frame ... > <frame ... > </frameset> (Angaben in Prozent oder in Pixeln, "*" für Wildcard)
Untereinander (Beispiel): <frameset rows="30%,*"> <frame ... > <frame ... > </frameset> (Angaben in Prozent oder in Pixeln, "*" für Wildcard)
Verschachtelt (Beispiel): <frameset cols="200,*"> <frame ... > <frameset rows="30%,*"> <frame ... > <frame ... > </frameset> </frameset> (Angaben in Prozent oder in Pixeln, "*" für Wildcard)
Frames definieren <frame src="datei.htm" name="FrameName"> Reservierte Namen: "_blank" "_self" "_parent" "_top"
57
Einführung in HTML Verwenden von Rahmen (Frames)
Eigenschaften vonFrames
Frame-Fenster mit/ohne Scroll-Leiste <frame src="datei.htm" name="FrameName" scrolling=yes/no> Abstand Fensterrand zu Fensterinhalt <frame src="datei.htm" name="FrameName" marginwidth= mar-ginheight=> (marginwidth für Abstand links und rechts, marginheight für Ab-stand oben und unten) Rahmendicke bzw. keine Rahmen - für gesamtes Frame-Set: <frameset cols="50%,*" frameborder=> (0 für "keine Rahmen", ansonsten Zahl für Breite in Pixeln) - für einzelnes Frame-Fenster: <frame src="datei.htm" name="FrameName" frameborder=> (0 für "keine Rahmen", ansonsten Zahl für Breite in Pixeln) Farbige Fensterrahmen: <frame src="datei.htm" name="FrameName" bordercolor=>
Verweise beiFrames
Dokument in benannten Frame laden:<a href="datei.htm" target="FrameName">
11.1 Beispiele: Einteilung des Fensters in 3 RahmendickeEin Rahmen-Set (frame set), hier: 3 übereinanderliegende Frames, setzt sich aus folgen-den HTML-Dokumenten zusammen: Rahmendefinition (index.htm): <html><head><title>Rahmen</title></head><frameset rows="20%,60%,20%"><frame name="f1" src="frame1.htm"FRAMEBORDER="No"><frame name="f2" src="frame2.htm"FRAMEBORDER="No"><frame name="f3" src="frame3.htm"FRAMEBORDER="No"> </frameset><body> Dieser Text wird angezeigt, wenn der WWW Browser keine Rahmen darstellen kann.</body></html>
Zusätzlich werden drei HTML Dokumente frame1.htm, frame2.htm und frame3.htm benö-tigt, die in den jeweiligen Rahmen geladen werden.
58
Einführung in HTML Verwenden von Rahmen (Frames)
11.2 Beispiele: Aktives InhaltsverzeichnisDie folgenden Dateien definieren ein Rahmen-Set (Frameset) mit 2 nebeneinanderliegen-den Rahmen, wobei der linke Rahmen permanent ein Inhaltsverzeichnis anzeigt, währendim rechten Rahmen das ausgewählte Kapitel angezeigt wird. Frameset Definition (index.htm) <html><head><title>Aktives Inhaltsverzeichnis</title></head><frameset cols="30%,70%" frameborder="Yes" border="yes"> <frame name="ihv" src="ihv.htm" frameborder="Yes"> <frame name="view" src="titel.htm" frameborder="Yes"></frameset><body>Dieser Text wird angezeigt, wenn der Browser keine Frames kennt</body></html>
Start-Dokument für Frame 1 (Dokument: ihv.htm, Ziel-Frame: ihv) <html><head><title>Frame-Beispiel 2</title></head>
<body>Inhaltsverzeichnis<p><ol><li><a href="titel.htm" target="view">Titel</a><li><a href="kap1.htm" target="view">Kapitel 1</a><li><a href="kap2.htm" target="view">Kapitel 2</a></ol></body></html>
Start-Dokument für Frame 2 (Name: titel.htm, Ziel-Frame: <html><head><title>Titel</title></head>
<body>Titel</body></html>
Weitere Dokumente können durch Anklicken im Inhaltsverzeichnis in Frame 2 geladenwerden, hier als Beispiel die Datei „kap1.htm“.
59
Einführung in HTML Verwenden von Rahmen (Frames)
<html><head><title>Frame-Beispiel 2</title></head>
<body>Kapitel 1</body></html>
Nach dem Laden der Datei „index.htm“ im WWW Browser wird zunächst im rechten Rah-men die Voreinstellung, hier: Datei „titel.htm“ mit Textbereich „Titel“, angezeigt.
Klicken Sie auf den Verweis „Kapitel 1“, um das 1. Kapitel (Datei kap1.htm) in den rechtenRahmen zu laden:
11.3 Übungen1. Erstellen Sie ein Rahmen-Set (Frameset) mit 3 nebeneinanderliegenden Frames der
relativen Breiten 10%, 80% und 10%. Laden Sie die Dateien links.htm, mitte.htm undrechts.htm in dieser Reihenfolge in den Rahmen-Set (Frameset).
2. Erstellen Sie ein aktives Inhaltsverzeichnis (wie im Beispiel oben) mit mindestens 2 Ka-piteln und einer Titelseite.
3. Zusatzaufgabe: (Erweiterung zu sensitiven Bildern)Erstellen Sie ein Frameset mit einem oberen und einem unteren Rahmen. Blenden Siein den oberen Rahmen das sensitive Bild sonnensystem.jpg ein. Blenden Sie in den un-teren Rahmen jeweils die im sensitiven Bild angeklickten Verweise ein. Durch Klickenauf die Erde sollte z.B. die Datei „erde.htm“ in den unteren Rahmen geladen werden.
60
Einführung in HTML Verwenden von Rahmen (Frames)
11.4 Lösungenzu 1:siehe Beispiele
zu 2:siehe Beispiele
61
Einführung in HTML Gestalten der Seite
12 Gestalten der Seite
12.1 Überblick
Dokumentfarbe,Dokument-Hinter-grundgrafiken
Dokument mit farbigem Hintergrund:<bodybgcolor=“color“text=“color“link=“color“vlink=“color“alink=“color“>
bgcolor = Bildschirmhintergrund text = Textfarbe link = Farbe von Verweisen vlink = Farbe von Verweisen zu besuchten Zielen alink = Farbe von Verweisen beim Anklickencolor: red, green, ...Dokument mit farbigem Hintergrund:<bodybgcolor=#rgbtext=#rgblink=#rgbvlink=#rgbalink=#rgb> wie zuvor, aber mit Hex-Tripeln für RGB-Farbwerte:r = Rotwert, hexadezimal 00 bis FF (entspricht 0-255) g = Grünwert, hexadezimal 00 bis FF b = Blauwert, hexadezimal 00 bis FF
Hintergrundgrafik: <body background="datei.gif"> Hintergrundgrafik mit Wasserzeicheneffekt: <body background="datei.gif" bgproperties=fixed>
Hintergrundmusik Hintergrundmusik (zwischen <head> und </head>): <bgsound src="datei.mid" loop=infinite> loop= Anzahl Wiederholungen, "infinite" oder Zahl
12.2 Beispiel: Farbiger Hintergrund
62
Einführung in HTML Gestalten der Seite
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>Das Sonnensystem</title></head><body bgcolor="Aqua"><h1>Das Sonnensystem</h1><h2>Definition</h2> Planeten sind kugelähnliche Himmelskörper. Sie umlaufen die Sonne inkreisähnlichen Bahnen (Ellipsen) in fast einer Ebene (Ekliptik) undreflektieren deren Licht.<p>Die Sonne ist das Gravitationszentrum. Man unterscheidet die inneren undäußeren Planeten auf Grund ihrer Distanz zur Sonne. </body></html>
12.3 Beispiel: Hintergrund-Bild
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>Das Sonnensystem</title></head><body background="sonnensystem.jpg"> <h1>Das Sonnensystem</h1><h2>Definition</h2> Planeten sind kugelähnliche Himmelskörper. Sie umlaufen die Sonne inkreisähnlichen Bahnen (Ellipsen) in fast einer Ebene (Ekliptik) undreflektieren deren Licht.<p>Die Sonne ist das Gravitationszentrum. Manunterscheidet die inneren und äußeren Planeten auf Grund ihrer Distanz zurSonne.
</body></html>
63
Einführung in HTML Gestalten der Seite
12.4 Übungen1.Erweitern Sie Ihre Datei „erde.htm“ so, daß Sie eine hellblaue Hintergrundfarbe erhält.
Speichern Sie die veränderte Datei unter dem Namen „erde-003.htm“ ab. Hinweis: Verwenden Sie als Farbe z.B. „LIGHTSKYBLUE“.
2.Kopieren Sie die Datei erde.gif in Ihr Heimatverzeichnis und verwenden Sie diese Dateials Hintergrundbild für die Datei „erde.htm“. Speichern Sie die veränderte Datei unterdem Namen „erde3-004.htm“ ab.
3.Zusatzaufgabe:Versuchen Sie (mit einem Bildbearbeitungsprogramm Ihrer Wahl), das Bild der Erde"etwas aufzuhellen", damit es besser als Hintergrundbild geeignet ist.(mögliche Programme: Adobe Photoshop, Adobe Photoshop Elements, PaintshopPro, ...)
12.5 LösungenTODO
64
Einführung in HTML Einbinden von Formularen
13 Einbinden von Formularen
13.1 ÜberblickFormulare dienen der Kommunikation zwischen Autor und Leser. Eine typische Anwen-dungen von Formularen sind Gästebücher.In Formularen kann der Leser Eingabefelder ausfüllen, in mehrzeiligen Textfeldern Texteingeben, aus Listen Einträge auswählen und Schaltflächen (Buttons) anklicken. Abschließend kann der Leser auf eine Schaltfläche „Absenden“ klicken, um das Formularan ein CGI Script (oder ggf. auch per E-Mail) abzusenden.
Formular definieren <form action="(URL-Adresse)" method=[get od. post]> ... Formular-Elemente und beliebige andere Elemente ...</form>
Texteingabe-Felder Einzeilige Eingabefelder: <input name="(Bezeichner)" size=#(Zeichen) maxlength=#(Zeichen)">
Extras: <input ... type=int> = für ganzzahlige Eingaben <input ... type=float> = für Kommazahlen-Eingaben <input ... type=date> = für Datums-Eingaben <input ... type=url> = für URL-Adreßeingaben
Mehrzeilige Eingabefelder: <textarea="Bezeichner" rows=#(Zeilen) cols=#(Zeichen)> evtl.: vorbelegter Text ...</textarea>
Zeilenumbruch erzwingen: textarea="Bezeichner" wrap=virtual> (wrap=virtual: Zeilenumbrüche werden nicht übertragen) (wrap=physical: Zeilenumbrüche werden übertragen)
Auswahllisten <select name="(Bezeichner)" size=#(Anzahl)> [multiple] <option> angezeigter Text ... </select>
Extras: <select ... multiple> = Mehrfachauswahl möglich <option selected> = per Voreinstellung ausgewählter Ein-trag
65
Einführung in HTML Einbinden von Formularen
Radio- und Checkbox-Buttons
Radio: <input type=radio name="(Bezeichner)" value="(Daten)">Beschriftung (mehrere Radio-Buttons mit gleichem Namen bilden eineGruppe, aus der genau ein Wert ausgewählt werden kann)
Checkbox: <input type=checkbox name="(Bezeichner)" value="(Da-ten)"> Beschriftung (mehrere Check-Boxes mit gleichem Namen bilden eineGruppe, aus der beliebig viele Werte - oder auch keiner -ausgewählt werden kann)
Ausführungsbuttons <input type=submit value="(Beschriftung)"> = Abschicken
<input type=reset value="(Beschriftung)"> = VerwerfenFrei definierbare Buttons
<input type=button value="(Beschriftung)" onClick=>(JavaScript)
Versteckte Elemente <input hidden value="(Daten)"> (wird vom HTTP-Protokoll mit übertragen)
Erläuterungen:Mit dem FORM-Tag definieren Sie ein Formular (form = englisch für Formular). Alles, waszwischen diesem einleitenden Tag und dem abschließenden Tag steht, gehört zum For-mular. Das sind im wesentlichen Elemente des Formulars wie Eingabefelder, Auswahllisten oderSchaltfläche (Buttons). Für die genaue Positionierung der Elemente (Layout) sind Tabel-len zu empfehlen. Darüber hinaus können Sie zwischen <form...> und </form> auch Text eingeben und die-sen Text wie üblich mit HTML-Befehlen formatieren. Auch Grafiken, Verweise, Tabellen,Multimedia-Elemente sind im Formular erlaubt. So können Sie Ihr Formular optisch auf-werten und mit erklärendem Text usw. versehen. Im einleitenden FORM-Tag geben Sie mit dem Attribut action=“URL“ an, was mit den aus-gefüllten Formular-Daten passieren soll, wenn der Anwender das Formular abschickt. DieAngabe des CGI Scripts bzw. der E-Mail Adresse sollte in Anführungszeichen stehen. Inder Regele wird hier ein CGI Script auf dem Server-Rechner aufgerufen, das die Datenweiterverarbeitet. Für den Namen eines CGI Scripts gelten die gleichen Regeln wie beiVerweisen. Die Angabe bei action=“URL“ kann auch eine E-Mail-Adresse (normalerweise Ihre eigene)mit vorangestelltem mailto: (mailto für: Mail an). Dann werden die ausgefüllten Formular-daten an diese E-Mail-Adresse geschickt.
66
Einführung in HTML Einbinden von Formularen
13.2 Beispiel: Versenden eines Formulars per E-MailDas folgende Beispiel demonstriert das Versenden einer E-Mail per Formular. In diesemFall werden die Paare Absender=xxx, Qualitaet=n an die vorgegebene E-Mail Adresse(ACTION-Attribut) versendet.Ich gebe dem Kurs die folgende Note:
<form action="mailto:[email protected]"method=post enctype="text/plain">
<table>
<tr><td width="20%"><input type="Radio" name="Qualitaet" value="6" checked></td><td width="20%"><input type="Radio" name="Qualitaet" value="5"></td>
... </tr>
<tr><td>sehr gut</td><td>gut</td>
... </tr><tr><td><input type="Submit" name="Absenden" value="Absenden"></tr></table></form>
13.3 Übungen1.Erstellen Sie das folgende - nicht ganz erst gemeinte ;:) - Formular. Speichern Sie es
unter „formular-1.htm..2.Zusatzaufgabe:
Erweitern Sie das Formular z.B. um Angaben des Buchers (Name, Adresse, Alter), Bil-der der Planeten, Logos für Raucher und Nichtraucher und Logos der Fluggesellschaf-ten. Speichern Sie es unter „formular-2.htm.
67
Einführung in HTML Einbinden von Formularen
form action="..."><table width="100%" border="1" ><tr><td width="30%">Zu welchem Planeten möchten Sie?</td><td width="70%"><input type="Text" name="Planet" value="<Name>" size="20"maxlength="50"></td></tr><tr><td>Raucher oder Nichtraucher?</td><td><input type="Radio"name="Raucher"value="1"checked> (Raucher) <input type="Radio"name="Raucher"value="2"> (Nichtraucher)</td></tr><tr><td>Fluggesellschaft?</td><td><select name="Fluggesellschaft"size="3"><option value="" selected>ESA</option><option value="">NASA</option><option value="">NeverComeBack Airlines</option></select></td></tr><tr><td>Besondere Wünsche?</td><td><textarea name="Wuensche"cols="50"rows="3">Tragen Sie hier weitere Wünsche ein!</textarea></td></tr><tr><td><input type="Submit"name="Absenden"value="Absenden"></td><td><input type="Reset" value="Abbrechen"></td></tr></table></form>
68
Einführung in HTML Hinzufügen von Meta-Informationen
14 Hinzufügen von Meta-Informationen
14.1 Überblick
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Titel des HTML Dokumentes</title></head><body>...</body></html>
Jedes HTML Dokument sollte einen Titel erhalten. Das ist aus folgenden Gründen beson-ders wichtig:
• Der Titel wird bei der Anzeige im Web-Browser in der Titelzeile des Anzeigefens-ters angezeigt.
• Der Titel wird vom Web-Browser beim Setzen von Lesezeichen (Bookmarks, Favo-riten) auf die Datei verwendet.
• Der Titel wird im Web-Browser in der Liste der bereits besuchten Seiten angezeigt. • Der Titel dient im Web vielen automatischen Suchprogrammen als wichtiger Input.
Wenn die Datei zu den Suchtreffern einer Suche gehört, bieten viele Suchmaschi-nen den Titel als anklickbaren Verweis an.
<head><meta name="description" content="Dieser Beschreibungstext soll einemAnwender im Suchdienst bei Auffinden dieser Datei erscheinen."><meta name="author" content="Rainer Wahnsinn"><meta name="keywords" content="HTML, Meta-Informationen,Suchprogramme, HTTP-Protokoll"><meta name="date" content="2001-12-15T08:49:37+00:00"> <!-- ... andere Angaben im Dateikopf ... --></head>
Die vorherigen Angaben werden von vielen Suchdiensten ausgewertet.
<head><meta http-equiv="expires" content="0"></head>
69
Einführung in HTML Hinzufügen von Meta-Informationen
Mit <meta http-equiv="expires" content="0"> veranlassen Sie, dass dieseHTML-Datei in jedem Fall von der Original-Adresse geladen wird (expires = fällig werden).
<head><meta http-equiv="refresh" content="5; URL=2.htm"></head>
Mit <meta http-equiv="refresh" content="..."> veranlassen Sie die Weiterlei-tung zu einer anderen Adresse. Mit content="5; bestimmen Sie, nach wie viel Sekun-den die Weiterleitung starten soll. Die 5 im Beispiel bedeutet also, dass die aktuelle Seite,nachdem sie geladen ist, 5 Sekunden lang angezeigt wird. Danach wird die Adresse auf-gerufen, die mit url=..." angegeben wird. Notieren Sie den gesamten Befehl inclusiveder etwas ungewohnten Stellung der Anführungszeichen so wie im Beispiel oben angege-ben. Setzen Sie Ihre gewünschte Anzeigedauer und den Namen der aufzurufendenAdresse ein. Bei lokalen Adressen auf dem gleichen Server können Sie absolute oder re-lative Pfadangaben ohne Angabe von http:// und Domain notieren. Bei Weiterleitungzu Dateien im gleichen Verzeichnis genügt der Dateiname. Bei einem Timeout von 0 wirddie angegebene nächste Datei sofort geladen.
Eine mögliche Anwendung ist eine Diashow auf einem Kiosk-Rechner.
70
Einführung in HTML Verarbeiten von Formularen mit CGI Skripten
15 Verarbeiten von Formularen mit CGI SkriptenTODO
71
Einführung in HTML Gestalten mit Cascading Style Sheets (CSS)
16 Gestalten mit Cascading Style Sheets (CSS)TODO
72
Einführung in HTML Ausblick
17 AusblickWir sind nun am Ende dieses einführenden Skriptes angelangt - Gratulation! Sie werden sich sicherlich die Frage stellen, wie Sie das Gelernte nun in eigenen Projek-ten umsetzen können und wohl auch die Frage, ob Sie nun alles über HTML wissen.
Sie könnten z.B. folgende HTML Projekte in Angriff nehmen:
• Eigene Homepage• Semester-/Diplom-Arbeit als HTML Dokument• Themenseiten wie StarWars, Gute Zeiten - Schlechte Zeiten ;:), ...• ...
Achten Sie immer auf ein klares, durchgängig verwendetes Design und setzen Sie Bildernur sparsam ein. Orientieren Sie sich an gelungenen Web-Auftritten.
In diesem Skript sind folgende wichtigen Themen nicht (vielleicht in der nächstenVersion ...) behandelt worden:
• Einbinden von Multimedia• Wirbelwindtour PHP
Für Anregungen, Kritik und natürlich auch für Lob sind wir dankbar.
73
Einführung in HTML Anhang 1: Farben
18 Anhang 1: FarbenDie folgende Tabelle enthält die möglichen Farbnamen mit den zugehörigen RGB-Werten(Hex-Tripel):
Farbname HEX-Tripel dt. Übersetzung Beispiel
ALICEBLUE #A0CE00 Aliceblau
ANTIQUEWHITE #FAEBD7 antikes Weiß
AQUA #00FFFF Blaugrün
AQUAMARINE #7FFFD4 Aquamarinblau
AZURE #F0FFFF Himmelblau
BEIGE #F5F5DC Beige
BISQUE #FFE4C4 Tomatencreme
BLACK #000000 Schwarz
BLANCHEDALMOND #FFEBCD Mandelweiß
BLUE #0000FF Blau
BLUEVIOLET #8A2BE2 Blauviolett
BROWN #A52A2A Braun
BURLYWOOD #DEB887 grobes Braun
CADETBLUE #5F9EA0 Kadettblau
CHARTREUSE #7FFF00 Hellgrün
CHOCOLATE #D2691E Schokolade
CORAL #FF7F50 Koralle
CORNFLOWERBLUE #6495ED Kornblumenblau
CORNSILK #FFF8DC Mais
CRIMSON #DC143C Karmesinrot
CYAN #00FFFF Zyanblau
DARKBLUE #00008B Dunkelblau
DARKCYAN #008B8B dunkles Zyanblau
DARKGOLDENROD #B8860B dunkle Goldrutenfarbe
DARKGRAY #A9A9A9 Dunkelgrau
DARKGREEN #006400 Dunkelgrün
DARKKHAKI #BDB76B dunkles Khaki
DARKMAGENTA #8B008B dunkles Magentarot
DARKOLIVEGREEN #556B2F dunkles Olivgrün
DARKORANGE #FF8C00 dunkles Orange
74
Einführung in HTML Anhang 1: Farben
Farbname HEX-Tripel dt. Übersetzung Beispiel
DARKORCHID #9932CC dunkle Orchideenfarbe
DARKRED #8B0000 Dunkelrot
DARKSALMON #E9967A dunkle Lachsfarbe
DARKSEAGREEN #8FBC8F dunkles Seegrün
DARKSLATEBLUE #483D8B dunkles Schieferblau
DARKSLATEGRAY #2F4F4F dunkles Schiefergrau
DARKTURQUOISE #00CED1 dunkles Türkis
DARKVIOLET #9400D3 dunkles Violett
DEEPPINK #FF1493 Tiefrosa
DEEPSKYBLUE #00BFFF tiefes Himmelblau
DIMGRAY #696969 mattes Grau
DODGERBLUE #1E90FF Dodger-Blau
FIREBRICK #B22222 Ziegelfarbe
FLORALWHITE #FFFAF0 Blütenweiß
FORESTGREEN #228B22 Waldgrün
FUCHSIA #FF00FF Fuchsie
GAINSBORO #DCDCDC Gainsboro (diese Farbehat keinen deutschennamen)
GHOSTWHITE #F8F8FF Geisterweiß
GOLD #FFD700 Gold
GOLDENROD #DAA520 Goldrute
GRAY #808080 Grau
GREEN #008000 Grün
GREENYELLOW #ADFF2F Grüngelb
HONEYDEW #F0FFF0 Honigmelone
HOTPINK #FF69B4 leuchtendes Rosa
INDIANRED #CD5C5C Indischrot
INDIGO #4B0082 Indigo
IVORY #FFFFF0 Elfenbein
KHAKI #F0E68C Khaki
LAVENDER #E6E6FA Lavendelfarbe
LAVENDERBLUSH #FFF0F5 rosige Lavendelfarbe
LEMONCHIFFON #FFFACD Chiffongelb
LIGHTBLUE #ADD8E6 Hellblau
75
Einführung in HTML Anhang 1: Farben
Farbname HEX-Tripel dt. Übersetzung Beispiel
LIGHTCORAL #F08080 helles Korallenrot
LIGHTCYAN #E0FFFF helles Zyanblau
LIGHTGOLDENRODYELLOW #FAFAD2 helles Goldrutengelb
LIGHTGREEN #90EE90 Hellgrün
LIGHTGREY #D3D3D3 Hellgrau
LIGHTPINK #FFB6C1 Hellrosa
LIGHTSALMON #FFA07A helle Lachsfarbe
LIGHTSEAGREEN #20B2AA helles Seegrün
LIGHTSKYBLUE #87CEFA helles Himmelblau
LIGHTSLATEGRAY #778899 helles Schiefergrau
LIGHTSTEELBLUE #B0C4DE helles Stahlblau
LIGHTYELLOW #FFFFE0 Hellgelb
LIME #00FF00 Zitronengelb
LIMEGREEN #32CD32 Gelbgrün
LINEN #FAF0E6 Leinenfarbe
MAGENTA #FF00FF Magentarot
MAROON #800000 Kastanienbraun
MEDIUMAQUAMARINE #66CDAA mittleresAquamarinblau
MEDIUMBLUE #0000CD Mittelblau
MEDIUMORCHID #BA55D3 mittlere Orchideenfarbe
MEDIUMPURPLE #9370DB mittleres Violett
MEDIUMSEAGREEN #3CB371 mittleres Seegrün
MEDIUMSLATEBLUE #7B68EE mittleres Schieferblau
MEDIUMSPRINGGREEN #00FA9A mittleres Frühlingsgrün
MEDIUMTURQUOISE #48D1CC mittleres Türkis
MEDIUMVIOLETRED #C71585 mittleres Violett-Rot
MIDNIGHTBLUE #191970 Mitternachtsblau
MINTCREAM #F5FFFA cremigePfefferminzfarbe
MISTYROSE #FFE4E1 Altrosa
NAVAJOWHITE #FFDEAD Navajoweiß
NAVY #000080 Marineblau
OLDLACE #FDF5E6 Altgold
OLIVE #808000 Olivgrün
76
Einführung in HTML Anhang 1: Farben
Farbname HEX-Tripel dt. Übersetzung Beispiel
OLIVEDRAB #6B8E23 olivfarbiges Graubraun
ORANGE #FFA500 Orange
ORANGERED #FF4500 Orangerot
ORCHID #DA70D6 Orchidee
PALEGOLDENROD #EEE8AA blasse Goldrutenfarbe
PALEGREEN #98FB98 Blassgrün
PALETURQUOISE #AFEEEE blasses Türkis
PALEVIOLETRED #DB7093b blasses Violettrot
PAPAYAWHIP #FFEFD5 cremiges Papaya
PEACHPUFF #FFDAB9 Pfirsich
PERU #CD853F Peru
PINK #FFC0CB Rosa
PLUM #DDA0DD Pflaume
POWDERBLUE #B0E0E6 Taubenblau
PURPLE #800080 Violett
RED #FF0000 Rot
ROSYBROWN #BC8F8F rosiges Braun
ROYALBLUE #4169E1 Königsblau
SADDLEBROWN #8B4513 Sattelbraun
SALMON #FA8072 Lachs
SANDYBROWN #F4A460 Sandbraun
SEAGREEN #2E8B57 Seegrün
SEASHELL #FFF5EE Muschel
SIENNA #A0522D Ocker
SILVER #C0C0C0 Silber
SKYBLUE #87CEEB Himmelblau
SLATEBLUE #6A5ACD Schieferblau
SLATEGRAY #708090 Schiefergrau
SNOW #FFFAFA Schneeweiß
SPRINGGREEN #00FF7F Frühlingsgrün
STEELBLUE #4682B4 Stahlblau
TAN #D2B48C Gelbbraun
TEAL #008080 Entenbraun
THISTLE #D8BFD8 Diestel
77
Einführung in HTML Anhang 1: Farben
Farbname HEX-Tripel dt. Übersetzung Beispiel
TOMATO #FF6347 Tomatenrot
TURQUOISE #40E0D0 Türkis
VIOLET #EE82EE Violett
WHEAT #F5DEB3 Weizen
WHITE #FFFFFF Weiß
WHITESMOKE #F5F5F5 rauchiges Weiß
YELLOW #FFFF00 Gelb
YELLOWGREEN #9ACD32 Gelbgrün
78