Einführung in HTML - ainf.weebly.com · von Dokumenten aus dem Netz, und zum anderen formatieren sie das HTML-Dokument am Bildschirm. Wenn Sie ein HTML-Dokument mit einem WWW Browser

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


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


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">

<html>

<head>

<title>Meine Heimatseite</title>

</head>

<body>Hier steht der eigentliche Text für meine Heimatseite ...

</body>

</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


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


Erkennbar ist folgende allgemeine Struktur:



<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.



<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


Ü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


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


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


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


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 = &ensp; Leerzeichen von der Beite m = &emsp; 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


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


ääÄöÖüÜß

äÄöÖüÜ ß

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


<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


<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


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:


<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


<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


<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


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


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


<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


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


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


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



<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


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


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


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


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


<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


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


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


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


<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


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


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


<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


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


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


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


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


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


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:

<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


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


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


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


<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


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


<!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


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


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


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


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"> </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



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



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



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



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

Documents

Einführung in HTML - ainf.weebly.com · von Dokumenten aus dem Netz, und zum anderen formatieren sie das HTML-Dokument am Bildschirm. Wenn Sie ein HTML-Dokument mit einem WWW Browser