Inhaltsverzeichnis

Unser HTML-Code
1
Inhaltsverzeichnis
1. Vorwort ................................................................................................................... 3
2. Einleitung ................................................................................................................ 4
2.1 Themeneingrenzung......................................................................................... 4
2.2 Fragestellung .................................................................................................... 4
2.3 Zielsetzung ....................................................................................................... 4
2.4 Vorgehensweise ............................................................................................... 5
3. Die Geschichte des Internets.................................................................................. 6
4. Das Funktionsprinzip des Internets ........................................................................ 6
5. Was wir für die Gestaltung einer Internetseite benötigen ....................................... 9
5.1 Editor oder Webdesignprogramm ..................................................................... 9
5.2 Domain reservieren ........................................................................................ 10
5.3 FTP-Programm ............................................................................................... 11
5.4 Konzept........................................................................................................... 11
5.5 Publikation ...................................................................................................... 12
6. Grundlagen von HTML ......................................................................................... 13
6.1 Was ist HTML ................................................................................................. 13
6.2 Das HTML – Grundgerüst............................................................................... 13
6.3 Der HTML –Tag .............................................................................................. 14
6.3.1 Attribute.................................................................................................... 15
6.4 Text- und Hintergrunddarstellung ................................................................... 16
6.4.1 Hintergrundfarbe ...................................................................................... 17
6.4.2 Textformatierung...................................................................................... 17
6.4.3 Sonderzeichen und Umlaute.................................................................... 20
6.4.4 Kommentare ............................................................................................ 20
6.5 Ein einheitliches Layout mit Hilfe von Tabellen .............................................. 20
6.5.1 Verschachtelte Tabellen .......................................................................... 21
6.5.2 Grundsätzliches zum Layout.................................................................... 23
6.6 Links ............................................................................................................... 23
6.7 Bilder, Videos und Töne ................................................................................. 24
6.7.1 Einbinden von Bildern .............................................................................. 24
6.7.2 Hintergrundbilder ..................................................................................... 25
6.7.3 Videos und Töne...................................................................................... 25
6.8 Formulare ....................................................................................................... 26
Unser HTML-Code
2
6.9 Cascading Style Sheets.................................................................................. 27
6.9.1 Die CSS-Anweisungen ............................................................................ 28
6.9.2 Das Einbinden im <head> Bereich .......................................................... 29
6.9.3 Das Einbinden von ausgelagerten CSS-Dateien ..................................... 30
7. Dynamic HTML ..................................................................................................... 30
7.1 JavaScript ....................................................................................................... 31
7.2 Einbinden von JavaScript in HTML................................................................. 32
8. Das Fallbeispiel .................................................................................................... 34
9. Fazit und Hinweise ............................................................................................... 35
10. Schlusswort ........................................................................................................ 36
11. Literatur- und Quellenverzeichnis ....................................................................... 37
12. Abbildungsverzeichnis ........................................................................................ 38
13. Deklaration zur Eigenständigkeit ........................................................................ 38
Anhang A: Fallbeispiel Formular............................................................................... 39
Anhang B: Fallbeispiel Taschenrechner ................................................................... 40
Anhang C: Thematische Übersicht der HTML-Tags ................................................. 42
Anhang D: Farbtafel.................................................................................................. 45
Anhang E: Homepage und Maturaarbeit auf CD ...................................................... 46
Unser HTML-Code
3
1. Vorwort
Die Digitalisierung des 21. Jahrhunderts schreitet voran und die virtuelle Welt
verschmilzt je länger je mehr mit der realen Welt. Das World Wide Web1 ist der
Inbegriff für unendliche Weiten, die unerschöpflich scheinen und welche stetig neue
Horizonte öffnen.
E-Mail, Online-Shopping, E-Banking oder einfach nur das Surfen im Netz ist innert
eines
Jahrzehnts
zur
Selbstverständlichkeit
geworden
und
ist
nicht
mehr
wegzudenken. Das Internet ist bis in die tiefsten Bereiche der Wirtschaft und
Gesellschaft verwurzelt und beeinflusst diese in höchstem Masse. Dieses Medium
ignoriert Distanzen und lässt die Welt HTML sprechen.
Diese Tatsache motivierte uns dieses Thema zu wählen und sich näher damit zu
befassen. Da diese Faszination ein enormes Spektrum an Bereichen beinhaltet,
spezialisieren wir uns auf die Auszeichnungssprache HTML. Anhand der selbst
gestalteten Internetseite werden die Grundstrukturen und Funktionsweisen des HTML
aufgezeigt.
1
Bibliothek aus Ressourcen, welche über das Internet abrufbar sind, Microsoft Encarta Enzyklopädie 2002
(Computerprogramm)
Unser HTML-Code
4
2. Einleitung
2.1 Themeneingrenzung
Eine Grundlage des Internets bildet die „Hypertext Markup Language“ Sprache. – kurz
HTML.
Es
ermöglicht
neben
einigen
wichtigen
Voraussetzungen
auch
die
Kommunikation im weltweiten Datennetz.
Die faszinierende Tatsache, dass HTML die neuste Form von Kommunikation
ermöglicht, hat uns dazu bewogen, die Vorgänge und Strukturen von HTML zu
erforschen und diese in unserer Maturaarbeit vorzustellen.
Die gewonnenen Erkenntnisse werden anhand der selbst gestalteten Internetseite an
praktischen Beispielen erläutert und vervollständigt. Unsere Internetseite ist daher ein
fester Bestandteil der Maturaarbeit, welche das Thema illustriert und abgrenzt.
2.2 Fragestellung
Aufgrund unserer Themeneingrenzung stellen sich folgende Fragen:
•
Wie ist das Internet mit HTML in Verbindung zu bringen und welche Rolle spielt
dabei eine Homepage2?
•
Was ist HTML und wo kommt es zum Einsatz?
•
Welche Schritte sind für das Erstellen einer Homepage notwendig?
•
Durch welche Massnahmen wird meine Homepage attraktiver?
2.3 Zielsetzung
Wir werden das Grundwissen für die Erstellung einer Internetseite vermitteln und die
Abläufe im Hintergrund erläutern.
HTML bildet dabei den Kernbereich und wird durch nützliche Erweiterungen ergänzt.
2
englischer Ausdruck für Internetseite
Unser HTML-Code
5
Auf diese Weise soll der Leser schrittweise an die Thematik herangeführt werden und
am Ende im Stande sein, seine eigene Internetseite zu gestalten und zu publizieren.
2.4 Vorgehensweise
Als Einstieg wird ein geschichtlicher Rückblick gemacht, um den Leser zu
sensibilisieren und an das Thema heranzuführen. Wir wollen somit ein Grundwissen
vermitteln, so dass die Maturaarbeit nicht zu kompliziert erscheint, und damit der Leser
die einzelnen Abschnitte in einem Gesamtzusammenhang sehen kann.
Anschliessend werden die wichtigsten Grundvoraussetzungen für die Arbeit mit HTML
beschrieben. Diese beinhalten die Bereitstellung der Arbeitswerkzeuge und einige
Grundgedanken zum Konzept.
Der Hauptteil beschäftigt sich mit dem Erstellen der Internetseite und zeigt nützliche
Erweiterungen. Wir konzentrieren uns dabei auf das Editieren mit HTML indem wir die
elementaren Bausteine der Internetsprache behandeln. Anhand von konkreten
Fallbeispielen
wird
der
behandelte
Anwendungsmöglichkeiten aufgezeigt.
Stoff
vertieft
und
konkrete
Unser HTML-Code
6
3. Die Geschichte des Internets
Der Ursprung des Internets geht in die sechziger Jahre zurück – in die Zeit des kalten
Krieges.
Um sich vor einem Erstschlag der UdSSR wirksam schützen zu können, baute das
amerikanische Militär ein Netzwerk mit vier angeschlossenen Rechnersystemen auf.
Das sogenannte ARPANET basierte auf der Grundidee eines Computernetzwerks, das
die Systeme durch zwei verschiedene Leitungen verbindet. Neben Standleitungen3 sah
das Konzept die Verbindung über das Telefonnetz vor. Auf diese Weise konnte
dieselbe Information auf verschiedenen Verbindungswegen übertragen werden. Somit
war eine krisensichere Verbindung geschaffen, welche beim Ausfall eines Teilstückes
dennoch
die
Kommunikation
zwischen
den
militärischen
Rechnersystemen
gewährleistete.
Ein militärischer Angriff der UdSSR blieb aus, trotzdem stieg die Zahl der
Rechnersysteme, welche am ARPANET angeschlossen wurden.
Da sich die Funktionalität des Netzes über die Jahre bewährte, schlossen sich Anfang
der 70-er Jahre die ersten Universitäten an. Später wurden die militärischen
Teilsysteme ausgegliedert und zu einem eigenständigen Netz, dem MILNET,
ausgebaut.
Die zivilen Teile wie die Forschung, die Bildung und das Gewerbe wurden seitdem als
Internet bezeichnet.
4. Das Funktionsprinzip des Internets
Die Bezeichnung Internet leitet sich von dem lateinischen Wort „inter“ ab, das
„zwischen“ heisst. Wörtlich bedeutet also Internet das Zwischennetz. Genau diese
Aufgabe erfüllt es, indem es voneinander unabhängige Netzwerke verbindet.
3
permanente Verbindung zwischen zwei Orten
Unser HTML-Code
7
Der Aufbau und die Funktionsweise eines Netzwerks ist auf einfache Weise in der
untenstehenden Abbildung dargestellt. Mehrere miteinander verbundene Computer
kommunizieren über eine zentrale Station,
welche Daten aufbereitet und bereitstellt. Die
einzelnen Arbeitsstationen haben Zugriff auf
die zentral gespeicherten Programme und
Daten. Die Leistung des Internets besteht
darin, alle weltweit bestehenden Netzwerke
miteinander
zu
Datenaustausch
Abb. 1: Netzwerk
verbinden
zwischen
und
den
diesen
zu
gewährleisten. Innerhalb des World Wide Web
werden die Internetseiten durch HTML dargestellt. Für E-Mail und weitere Dienste
werden andere Anwendungstechniken gewählt.
Server
•
•
•
Speicherort der HTML-Seiten
Datenverteiler
Internetdienstanbieter
•
•
•
Speicherort der HTML-Seiten
Datenverteiler
Internetdienstanbieter
Server
Telefonkabel, Glasfaserkabel, Satellitenverbindung, Netzwerkkabel, Stromsteckdose,
Fernsehkabel
Abb. 2: Funktionsprinzip des Internets
Unser HTML-Code
8
Die über das Internet abrufbaren Daten sind auf Recheneinheiten, den Servern4
gespeichert. Auf diese Weise werden Daten ohne eigene Festplattenbeanspruchung
abgelegt.
Die Server werden von Internetdienstanbietern, den sogenannten Providern betrieben.
Sie fungieren als Host5, der seinen Abonnenten einen Zugang zum Internet zur
Verfügung stellt. Als technische Ausrüstung benötigt man eine Telefonverbindung,
einen Computer mit Modem und ein Zugangsprogramm. Bevor Daten aus dem Internet
auf den Computer des Anwenders transferiert werden, müssen diese durch ein Modem
in digitale Zeichen umgewandelt werden. Auf diese Weise ermöglicht das Modem die
Kommunikation zwischen Provider und Anwender über das Telefonnetzwerk.
Neben dieser Zugangsmöglichkeit gibt es weitaus fortgeschrittenere Technologien, auf
die wir nicht weiter eingehen.
Jeder einzelne Computer, der an das weltweite Datennetzwerk angeschlossen ist,
besitzt eine eindeutig zugeordnete Adresse.
Wir sprechen dabei von IP-Adressen oder DNS-Adressen, was mit einem beschrifteten
Briefkasten verglichen werden kann. Das Modem verpackt dabei die zu übermittelnden
Daten in einzelne Datenpakete und sendet diese an die entsprechende Adresse.
IP Adresse
DNS-Adresse oder Domain
-Internet-Protocol-Adresse
-Domain Name System-Adresse
-besteht aus einem Zahlencode
-besteht aus Buchstabenkombinationen
-Bsp. 123.45.67.89
-Bsp. www.isme.ch
Die ankommenden Informationen werden vom Modem entpackt und auf der Festplatte
des Anwenders zwischengespeichert. HTML gewährleistet dabei die Darstellung der
Dokumente. Durch die einmalig festgelegte Grundstruktur von HTML wird jedes
Dokument nach demselben Prinzip dargestellt und dadurch plattformunabhängig.
4
5
zentraler Rechner im Netzwerk, der Ressourcen verwaltet und bereitstellt
englischer Ausdruck für Wirt
Unser HTML-Code
9
5. Was wir für die Gestaltung einer Internetseite benötigen
Der Texteditor ist die günstigste, aber nicht die einfachste Art um eine Internetseite zu
gestalten. Die meisten Betriebssysteme haben einen Texteditor bereits vorinstalliert.
Die andere Variante ist ein Gestaltungsprogramm für Internetseiten, welches keine
HTML-Kenntnisse voraussetzt. Auf einer benutzerfreundlichen Gestaltungsoberfläche
realisiert der Anwender seine Ideen. Dies macht die Darstellung um einiges leichter,
aber gibt dafür wenig Wissen weiter.
Die Internetseite wird mit einem speziellen Programm, dem FTP-Programm, auf den
Server geladen. Der Server übernimmt die Aufgabe des Speicherortes einer Seite und
gibt ihr eine einmalige Domain, zum Beispiel www.isme.ch.
Eine Homepage wird mit einem Browser6 betrachtet. Der Internet Explorer von
Microsoft oder der Browser von Netscape werden am häufigsten verwendet.
Programme wie diese, sowie der Editor oder das FTP-Programm, können kostenlos
vom Internet heruntergeladen werden.
Um die Seite zu publizieren ist ein Internetanschluss notwendig. Wir müssen vorrangig
einen Internetprovider organisieren, der uns eine DNS-Adresse und Platz auf einem
Server bereitstellt.
5.1 Editor oder Webdesignprogramm
Einem Einsteiger bieten sich zwei Möglichkeiten seinen Internetauftritt zu realisieren.
Eine kostenlose, aber zeitintensive Variante bietet der Editor. Der Einsatz dieser
Programme setzt HTML-Kenntnisse voraus, die vorrangig erworben werden müssen.
Gutes Vorstellungsvermögen, Kreativität und präzise Arbeitsweise sind unabdingbar,
da seitens des Editors keine Unterstützung bei Codierungsfehlern zu erwarten ist.
Hier zeigen sich die wesentlichen Unterschiede zu einem Webdesign Programm. Auf
einer Gestaltungsebene kann der Anwender mit einfachen Mausklicks seine Seite
erstellen.
6
Programm zum Verarbeiten und Anzeigen von Internetdaten
Unser HTML-Code
10
Vorgegebene Formatvorlagen und Schaltflächen erleichtern die Arbeit und zeigen dem
Anwender eine Fülle von Möglichkeiten auf.
Die HTML-Befehle generiert das Programm im Hintergrund. Dies erspart dem
Anwender ein mühsames Eintippen des Codes und das Erlernen der HTML-Befehle.
Dieser Komfort kann einige hundert Franken kosten.
Dreamweaver, Microsoft FrontPage oder Golive gehören zu den führenden Webdesign
Programmen, bei welchen Objekte und Eigenschaften über Menüs, Symbolleisten oder
Objektpaletten mit Leichtigkeit eingefügt und angepasst werden. Die Arbeit mit diesen
Werkzeugen ähnelt der Arbeit in Word oder Power Point. Jedes dieser Programme
besitzt spezifische Stärken.
5.2 Domain reservieren
Die Provider betreiben Server, die Speicherort für Internetseiten sind und die am
Internet angeschlossen werden. Den Servern sind eindeutige DNS-Adressen
zugeordnet. Wir registrieren die gewünschte Adresse über einen Provider.
Grundsätzlich sind zwei Varianten denkbar:
•
kostenpflichtige Domain mit Speicherplatz
•
gratis Domain mit beschränktem Speicherplatz
Bei kostenpflichtigen Adressen sind frei beliebige Namen wählbar, was bei den gratis
Domains nicht der Fall ist. Hier wird ein kleiner Festplattenbereich des Servers
bereitgestellt, was eine lange und umständliche Adresse zur Folge hat, da der
Domainname des Providers vorangestellt wird.
Unser HTML-Code
11
5.3 FTP-Programm
Das File Transfer Protocol Programm wurde speziell für den Internetdienst
geschrieben.
Es
erlaubt
den
Datentransfer
Rechnern.
zwischen
Man
kann
damit die Verzeichnisse
auf
dem
Rechner
entfernten
wechseln,
Dateien ansehen und auf
den PC übertragen.
Das
Programm
muss
wissen, wohin die Seiten
hochzuladen sind
Abb. 3: FTP-Programm im Dreamweaver
Die vom Provider erhaltenen Pfadangaben, werden in die vorgesehenen Kästchen
eingetragen.
5.4 Konzept
Wer eine Internetseite erstellen möchte, sollte seine Ideen zuerst einmal auf Papier
niederschreiben. Das verkürzt die Arbeitszeit ungemein und führt zielgerichteter zum
Ergebnis.
Von
einem
guten
Konzept
kann
gesprochen
werden,
wenn
die
Ablaufprozesse klar strukturiert sind. Folgende Überlegungen können uns dabei helfen:
1. Wer ist unsere Zielgruppe?
2. Welche Informationen sollen übermittelt werden?
Unser HTML-Code
12
3. Wie, wo und wann beschaffen wir uns die Inhalte?
4. Wie sieht das einheitliche Layout aus?
5. Wie bauen wir eine sinnvollen Navigationsstruktur auf?
6. Auf welche Art erstellen wir unsere HTML-Seiten?
7. Welche Medien benützen wir für die Bekanntmachung der Seite?
8. Wer pflegt in Zukunft die Internetseite?
Mit weiteren W-Fragen können wir das Thema unserer Homepage bis zum
gewünschten Umfang reduzieren. Sie können etwa lauten:
•
Wer nutzt idealerweise
•
wann und
•
wie und
•
wie lange und
•
warum unsere Seite?
Das ist eine ungeheuer spannende Phase bei der Arbeit. Hier versuchen wir möglichst
knappe und klare Antworten zu finden. Gut organisiert ist halb gearbeitet!
5.5 Publikation
Wer seine Homepage publiziert, sollte dafür Werbung im grossen Stile betreiben.
Mundpropaganda zieht immer, aber auch innerhalb des World Wide Web haben wir die
Möglichkeit uns bemerkbar zu machen.
Wir können uns kostenlos bei Suchmaschinen anmelden oder lassen uns einfach von
anderen Seiten referenzieren.
Unser HTML-Code
13
6. Grundlagen von HTML
6.1 Was ist HTML
HTML steht für Hypertext Markup Language. Es ist eine Sprache, welche die Struktur
der Internetdokumente definiert. Im Gegensatz zu echten Programmiersprachen
werden HTML-Dokumente als reiner ASCII-Text7 verfasst, der dann vom Browser
interpretiert
und
auf
dem
Bildschirm
dargestellt
wird.
Sie
ist
eine
Auszeichnungssprache, die durch die einzelnen Befehle die Formatierung des
darzustellenden Inhaltes definiert. Das Geniale an HTML ist, dass mehrere Dokumente
über Hyperlinks8 miteinander verbunden werden können. Somit kann der Anwender
von einem Dokument zum anderen springen und Dokumente aufrufen, die sich
irgendwo im weltweiten Datendschungel befinden.
Die Sprache entstammt der Idee mausklickgesteuerte Dokumente zu schaffen, die
miteinander vernetzt sind. Das weltweit verstreute Wissen sollte über eine einfache
plattformübergreifende Sprache gebündelt werden. 1990 waren die ersten Standards
soweit ausgearbeitet, dass ein erster Browser die übertragenen HTML-Daten für
jedermann verständlich auf dem Bildschirm darstellen konnte. Ein verblüffend
einfaches Prinzip wurde geschaffen, das heute nicht mehr aus unserem Alltag
wegzudenken ist.
6.2 Das HTML – Grundgerüst
Gemäss Abschnitt 5.1 genügt ein Texteditor, um eine HTML-Seite zu editieren. Dort
werden lediglich die Befehle und der dazugehörende Inhalt eingetippt und schon haben
wir eine erste Internetseite.
Eine HTML-Datei gliedert sich in die Bereiche <head> und <body>. Diese beiden
Bereiche sind zugleich zwei elementare Befehle, die eine HTML-Seite strukturieren.
7
8
amerikanischer Standardcode zum Informationsaustausch, Microsoft Encarta Enzyklopädie 2002
Querverweis zu einem anderen Dokument oder Server, siehe Abschnitt 6.6
Unser HTML-Code
14
Die beiden Bereiche und alle weiteren Befehle werden in einen <HTML>
Eröffnungstag und einen </HTML> Schlusstag eingebettet. Diese Befehle sind
unerlässlich und immer zu setzen, da sonst keine Internetseite entstehen kann.
Die
<HTML>
symmetrisch
gebaute
<head>
<title>Grundgerüst</title>
</head>
Struktur
HTML-Dokumentes
aufeines
er-
leichtert das Editieren und
<body>Der darzustellende Text im Browser</body>
verschafft
</HTML>
Übersicht.
eine
gute
Im Bereich <head> sind Informationen wie Titel der Seite, Autor oder Inhaltsangaben
enthalten. Sie definieren die Seite und machen Suchmaschinen auf sich aufmerksam.
Es können aber weit mehr Informationen darin enthalten sein. Kleine Programme
sowie Formatvorlagen werden in diesen Bereich geschrieben.
Der
<body>
Bereich
gibt
unserer
Internetseite ein Gesicht. Dort stehen alle
Informationen und Objekte, die vom Browser
auf den Bildschirm abgebildet werden.
Im folgenden werden wir sehen wie und auf
welche Weise die Befehle beziehungsweise
die
Tags
gesetzt
werden,
damit
eine
funktionsfähige Seite entsteht.
Abb. 4: Grundgerüst
6.3 Der HTML –Tag
Der Ausdruck Tag kommt aus dem Englischen und bedeutet „Kennung“. Wir aber
brauchen den Ausdruck für „Befehl“. Er wird zur Auszeichnung beziehungsweise zur
Formatierung des Inhaltes verwendet.
Unser HTML-Code
15
Jeder Tag beginnt mit einem Kleinerzeichen < und wird mit einem Grösserzeichen >
geschlossen. Zwischen den beiden Zeichen steht die entsprechende Anweisung. In der
Regel werden die HTML-Befehle eröffnet und geschlossen, damit der Browser weiss,
für welchen Bereich einer Seite der Befehl gilt. Dabei entspricht der schliessende Tag
dem öffnenden Tag, ihm wird lediglich noch ein Schrägstrich „ / “ vor den Text gestellt.
Es ist dabei für die richtige Übersetzung im Browser nicht wichtig, ob der Text des
Tags in durchgehend grossen oder kleinen Buchstaben geschrieben ist.
Wo wird nun der darzustellende Inhalt einer Internetseite hineingeschrieben ?
Text, Bilder, Grafiken,
<body>
<font color=#FF0000>
Der darzustellende Text im Browser
</font>
</body>
Links
oder
Tabellen-
inhalte kommen stets in
den <body> Bereich.
Mit dem <font> Tag
geben
Anweisung
wir
für
die
die
gewünschte Schrift. Dazu wird dem Tag ein bestimmtes Attribut mit einem Wert
zugeordnet.
6.3.1 Attribute
Für eine optimale Darstellung einer Internetseite stehen uns, wie wir im letzten
Abschnitt gelernt haben, Attribute zur Verfügung. Diese werden den Tags zugewiesen,
indem sie in den einleitenden Tag geschrieben und durch ein Leerzeichen vom Text
des Tags getrennt werden. Der dem Attribut zugewiesene Wert wird nach einem
Gleichheitszeichen gesetzt. Es ist darauf zu achten, dass keine Leerzeichen nach dem
Gleichheitszeichen stehen. Die untenstehende Aufstellung illustriert den Aufbau des
HTML-Befehls.
Tag
Attribut
Wert
Befehl für:
<font
color=
rot>
Schriftfarbe
<table
border=
0>
Rahmendicke
Unser HTML-Code
HTML-Elemente
16
können
Unterelemente
enthalten,
die
zum
Beispiel
einen
Textausschnitt genauer beschreiben, oder die als Untertag die Elemente einer Liste
definieren. Die Verschachtelung von Tags eröffnet eine grosse Darstellungsfreiheit und
führt zu einer strukturierten Arbeitsweise.
In den folgenden Abschnitten werden die nach unserem Befinden wichtigsten Befehle
und Elemente vorgestellt.
6.4 Text- und Hintergrunddarstellung
Nachdem ein HTML-Dokument eröffnet wurde, und die vorhin beschriebene
Grundstruktur steht, werden Text, Bilder oder Grafiken im <body> Bereich eingefügt
und das Layout für die Seiten bestimmt.
Dabei ist zu beachten, dass sich die Farbigkeit der Homepage nach den Einstellungen
im Browser richtet.
Im Browser ist ein Standard festgelegt:
•
Textfarbe, -art und –grösse:
schwarz, Times New Roman; 12 Punkt
•
Textausrichtung:
linksbündig
•
Hintergrund:
grau (25 % schwarz, 75 % weiss)
•
Links:
blau
•
aktive Links:
rot
•
besuchte Links:
violett (50 % blau, 50 % rot )
Diese Standardwerte kommen immer dann zur Anwendung, wenn keine Angaben im
HTML-Code stehen.
Aus den drei Grundfarben Rot, Grün, Blau kann jede gewünschte Farbe erzielt werden.
Selbstverständlich muss nicht jede gewünschte Farbe manuell gemixt werden. Es gibt
eine einfachere Variante.
Für jede Farbe steht ein Attributwert, der in den entsprechenden Tag eingebaut wird.
Dieser Wert beseht aus Hexadezimalzahlen beziehungsweise aus einer 6-stelligen
Unser HTML-Code
Ziffer,
die
eine
17
Kombination
aus
Zahlen-
und
Buchstabenwerten
ist.
Das
Gartenhagzeichen signalisiert einen Hexadezimalwert.
Wir nehmen das Beispiel aus Kapitel 6.3.1 und ersetzen den Wert für die Schriftfarbe
mit einem Hexadezimalwert.
<font color=#FF0000>
Der darzustellende Text im Browser
</font>
Im Anhang D ist eine Farbtafel
mit den geläufigsten Farben und
deren Hexadezimalwerten.
6.4.1 Hintergrundfarbe
Durch das Attribut „bgcolor“ wird die Hintergrundfarbe definiert. Das Attribut wird dabei
in den <body> Tag geschrieben.
<body bgcolor=#ffffff>
Der gesamte Hintergrundbereich des Browserfensters wird nun unabhängig von
Grösse, Programm oder Betriebssystem „weiss“ dargestellt. Es entstehen keine
Ränder.
6.4.2 Textformatierung
Die Textformatierung kann nach individuellem Geschmack auf verschiedene Arten
erfolgen.
Schriftfarbe
<body text=#ff0000>
Der Text erscheint rot
</body>
Hier wird die Textfärbung im
<body> Tag festgelegt und für
die ganze Seite angewendet.
Unser HTML-Code
<font color=#ff0000>
Ein Buchstabe oder Textabschnitt
</font>
18
Mit dem Fonttag kann jeder
beliebige
Buchstabe
indivi-
duell formatiert werden.
Wie wir sehen, steht hier das Attribut „color“ für die Farbgebung.
Nun zu den verschiedenen Möglichkeiten die Schriftart, die Schriftgrösse und die
Ausrichtung zu ändern.
Schriftart
<font face=Times New Roman>
Ein Buchstabe oder Textabschnitt
Das Attribut „face“ bestimmt
die Schriftart.
</font>
<font face=Arial, Helvetica, Times New Roman,
Verdana> </font>
Da ein Computersystem nicht
immer
alle
Schriftarten
installiert hat, macht es Sinn,
einige
Werte
einzusetzen.
Falls die Schriftart „Arial“ nicht installiert ist, wird „Helvetica“, „Times New Roman“ oder
„Verdana“ verwendet.
<b>
Fettung
</b>
Der <b> Tag steht für „bold“
und bedeutet übersetzt aus
dem Englischen „fett“.
Zwischen Anfangs- und Schlusstag werden somit alle Buchstaben fest umrissen.
<i>
Kursiv
</i>
Der <i> Tag steht für „italic“
und bedeutet übersetzt aus
dem Englischen „kursiv“.
Mit diesem Befehl werden einzelne Buchstaben oder ganze Textabschnitte kursiv
dargestellt.
Unser HTML-Code
<h>
Übereschrift
19
Der <h> Tag definiert die
Überschriften.
</h>
Er bewirkt folgendes:
•
Zeilenumbruch vor und nach dem Text
•
Grössere Schrift im Vergleich zum Fliesstext
•
Fettung
Schriftgrösse
Für
<font size=1>
kleinste Grösse
</font>
die
Schriftgröße
ver-
wenden wir wiederum den
<font>
lediglich
Tag
das
und
ändern
Attribut
mit
seinem Wert.
<basefont size=2>
dateiweite Formatdefinition
</font>
Oft bedient man sich einer
einheitlichen
Formatierung.
Hier steht dem Anwender der
<basefont>
Tag
zur
Verfügung. Er ist mit dem <font> Tag vergleichbar, ausser dass er die Einstellungen für
die gesamte Datei definiert.
Ausrichtung
<p align=right> </p>
<p align=center></p>
<p align=justify> </p>
Standardmässig wird der Text
vom
Browser
links
ausgerichtet.
Durch den Befehl <p align> wird die Ausrichtung verändert. Die Attributwerte „right“,
„center“ und „justify“ stehen für rechtsbündig, zentriert und Blocksatz.
Unser HTML-Code
20
6.4.3 Sonderzeichen und Umlaute
Da die englische Sprache keine Umlaute kennt und heute viele Sonderzeichen
existieren, musste der ASCII-Code ergänzt werden. Jedes der einsetzbaren
Sonderzeichen hat einen eigenen Code. Allerdings muss dem Browser vorher über ein
Zeichen deutlich gemacht werden, dass ein Sonderzeichen oder ein Umlaut folgt.
Der Zahlen- oder Buchstabencode steht nach einem „&“ Zeichen und vor einem
Semikolon.
Beispiel:
jürgen Groß (Jürgen Groß)
6.4.4 Kommentare
Kommentare werden zwischen die Zeichen <! -- und -- > gesetzt. Sie dienen zur
Beschreibung der unterschiedlichen HTML-Elemente und können das Arbeiten im
Code erleichtern.
Beispiel:
<! -- Text -- >
Der Kommentartext erscheint nicht in der Browseransicht.
6.5 Ein einheitliches Layout mit Hilfe von Tabellen
Tabellen werden nicht nur als Hilfe für die Darstellung einer Internetseite verwendet,
sie sind auch für die tabellarische Darstellung von Texten einsetzbar. Mit Tabellen lässt
sich die Seite gut aufbauen. Sogenannte blinde Tabellen, das heisst Tabellen ohne
Rahmen und Gitternetzlinien, kommen hier zum Einsatz. Wir werden die aus unserer
Sicht wichtigsten Befehle vorstellen.
Unser HTML-Code
21
<table border=1>
Tabelle mit sichtbarem Rand
</table>
Der <table> Tag eröffnet eine
Tabelle.
Mit
der
Angabe
weisen
„border“
wir
der
Tabelle einen sichtbaren Rand
von der Breite 1 Pixel zu. Zwischen diesem Anfangs- und Schlusstag muss die Anzahl
der Tabellenreihen und der Tabellenzellen definiert werden.
Zuerst wird eine Tabellenreihe
<tr>
eröffnet, die eine bestimmte
Tabellenreihe
</tr>
Anzahl von Zellen enthält.
Der <td> Tag steht für eine
<td>
Tabellenzelle, die immer in
Tabelleninhalt
einer
</td>
Tabellenreihe
sein
muss.
Durch die richtige Verschachtelung dieser drei Tags erzeugen wir eine einfache
Tabelle.
Der darzustellende Inhalt der
<table border=1>
<tr>
<td>
Tabelle beziehungsweise die
Tabellendaten werden immer
Tabelleninhalt
</td>
</tr>
zwischen den <td> Anfangsund Schlusstag geschrieben.
</table>
6.5.1 Verschachtelte Tabellen
Selbstverständlich können auch Tabellen in Tabellenzellen dargestellt werden. Dabei
werden die drei Befehle in den <td> Tag gesetzt.
Unser HTML-Code
Eine
weitere
Hilfe
22
für
die
optimale
Darstellung ist der <td colspan> und der
<td rowspan> Tag. Diese ermöglichen die
erste Reihe oder Spalte mit einer Zelle,
und die zweite Reihe oder Spalte mit zwei
Zellen zu bestücken.
Ohne den <td colspan> Tag würde die
erste
Reihe
die
Breite
annehmen.
<td colspan=x>
Zelleninhalt
</td>
<td rowspan=x>
Zelleninhalt
</td>
einer
Zelle
Abb. 5: Tabelle
Der <td colspan> Tag gibt an
über wieviele Spalten sich die
Zelle erstreckt.
Der <td rowspan> Tag gibt an
über wieviele Reihen sich die
Zelle erstreckt.
Der <td colspan=2>
Tag
bewirkt
Verdoppelung
die
der
Zellenbreite. Der
Browser
interpretiert
den Befehl gemäss
Abbildung 5.
Abb. 6: HTML-Code der Tabelle
Unser HTML-Code
23
6.5.2 Grundsätzliches zum Layout
Aufgrund der Ziele im Konzept für unsere Seite legen wir die Gestaltungsgrundlagen
fest. Hier stehen uns verschiedene Instrumente zur Verfügung. Wir empfehlen jedem,
der einfach und effizient arbeiten möchte, den Aufbau der Seite mit Tabellen zu
gestalten. Alle wissenswerten Informationen haben wir bereits in den vorangehenden
Kapiteln erwähnt.
Bevor wir überhaupt mit dem Editieren beginnen, müssen wir uns über die Grösse der
gestaltbaren Fläche auf dem Bildschirm im klaren sein. Wir müssen davon ausgehen,
dass
nicht
alle
Besucher
unserer
Seite
dieselbe
Bildschirmgrösse
und
Bildschirmauflösung haben, und daher unsere Seite je nach Arbeitsstation anders
dargestellt wird. Hier arbeiten wir vorzugsweise mit einem Mittelwert, welcher über die
Ansicht im Code verschiedener Internetseiten ermittelt werden kann. Nehmen wir uns
Zeit und studieren wir den Aufbau verschiedener Seiten. Die daraus gewonnenen
Erkenntnisse helfen uns bei der Gestaltung.
Eine leicht verständliche Navigation ist das A und O einer guten Homepage. Dem
Besucher sollte ein leichter und schneller Zugriff auf die Daten garantiert werden.
Wir erreichen das Optimum, indem wir eine gut lesbare Schrift, einen schlichten
Hindergrund mit wenigen Bildern und Graphiken wählen.
6.6 Links
Der Link ist das Verbindungsstück zwischen zwei Dokumenten, die ortsunabhängig
sein können. Voraussetzung für die Funktionsfähigkeit ist eine exakte Pfadangabe im
Linkbefehl.
Die Möglichkeit Seiten über Links miteinander zu verbinden, macht das World Wide
Web zudem was es heute ist.
Mit einem einzigen Mausklick gelangen wir an das andere Ende der Welt und kommen
so zu den gesuchten Informationen. Was früher stunden- oder tagelang gedauert hat,
wird heute in einigen Sekunden oder Minuten erledigt.
Unser HTML-Code
24
Interne Links
Interne Links dienen dazu, andere Seiten auf dem gleichen physikalischem Server per
Mausklick aufzurufen. Im Normalfall speichern wir alle Seiten einer Internetseite auf
demselben Server.
<a href=“Zieldokument“>
Text
</a>
Die
internen
HTML-Seiten
werden über den <a href>
Befehl miteinander verknüpft.
Nach dem Gleichzeichen wird auf das Zieldokument verwiesen.
Zwischen Anfangs- und Schlusstag erscheint der Text, welcher in der Browseransicht
auf den Link verweist. Wenn die Maus über eine Verknüpfung gezogen wird,
verwandelt sich der Cursor in eine „Hand“. Zudem können weitere Effekte entstehen.
Er macht den Benutzer darauf aufmerksam, dass sich hinter dem Text ein Link
verbirgt.
Externe Links
<a href=“www.google.ch“>
Suchmaschine
</a>
Externe Links unterscheiden
sich
lediglich
in
der
Pfadangabe. Dort wird eine
DNS Adresse angegeben.
6.7 Bilder, Videos und Töne
6.7.1 Einbinden von Bildern
<img src=“bild.gif“>
Das Einbinden von Bildern ist
denkbar
einfach.
Der
<img> sagt dem Browser,
Tag
Unser HTML-Code
25
dass ein Bild folgt. Das Attribut „src“9 verweist auf ein Verzeichnis, in dem sich das
entsprechende Bild befindet. Selbstverständlich können die Bilder und Graphiken
vergrössert, verkleinert oder ausgerichtet werden. Die wichtigsten Befehle sind
wiederum im Anhang C aufgeführt.
6.7.2 Hintergrundbilder
Hintergrundbilder
verleihen
der
Internetseite
ein
einheitliches,
persönliches
Erscheinungsbild.
<body background=”bild.gif”>
Der
Befehl
einzelne
kann
in
jede
HTML-Seite
ge-
schrieben werden. Falls sich
das Bild in einem externen Verzeichnis, auf einem externen Server oder sogar auf
einer externen Homepage befindet, muss der exakte Pfad angegeben werden. Nur auf
diese Weise wird es dem Browser möglich, das Bild anzuzeigen.
Ein privates Urlaubsfoto oder das Logo der Firma können hier eingefügt werden. Die
einzige Bedingung, die an das Foto gestellt wird, ist das digitale Bildformat „gif“ oder
„jpg“. Es ist stets ratsam, die gespeicherten „jpg“ Bilder zu komprimieren, um eine
verkürzte Ladezeit zu gewährleisten.
6.7.3 Videos und Töne
<embed src=video.mov>
<embed src=sound.wav>
Das
englische
Genauso lautet der Befehl um
oder
einzubauen.
src steht für source, ins Deutsche übersetz bedeutet es Quelle
für
„einbinden“ ist „to embed“.
Video-
9
Wort
Tonsequenzen
Unser HTML-Code
26
Das Attribut verweist wiederum auf eine Datei mit genauer Pfadangabe.
Das Video- oder Musikstück wird nach dem Öffnen der HTML-Datei abgespielt.
Voraussetzung dafür ist ein Hilfsprogramm, das bei neueren Browserversionen, wie
dem Internet Explorer 6.0 oder dem Netscape 4.6, bereits enthalten ist.
Video- oder Musiksequenzen verursachen möglicherweise langandauernde Ladezeiten
aufgrund ihrer Dateigrösse.
6.8 Formulare
Interaktive
Formulare
erlauben
den
Austausch
von
Informationen
zwischen
Internetbenutzern. Oft werden sie für kommerzielle Zwecke genutzt. Bestellungen über
Internet, das Erheben von Umfragen, Abstimmungen oder das Ausfüllen der
Steuererklärung sind nur wenige der unzähligen Einsatzmöglichkeiten.
Je nach Informationsbedarf werden verschiedene Dateneingabe- oder Optionsfelder
erstellt. Ein Formular besteht aus Text- oder Zahlenfeldern, Klickbuttons und der
Schaltfläche für das Senden der Daten.
Die Informationen werden hier per E-Mail
zugestellt. Mit dem <form> Tag sagen wir
dem Browser das ein Formular folgt.
Die
beiden
Attribute
„methode“
und
„action“ sind für das richtige Zusenden
der Informationen an die entsprechende
E-Mail
Adresse
verantwortlich.
Der
<form> Tag wird in den <body> Bereich
gesetzt.
Um
dem
Formular
ein
einheitliches
Abb. 7: Formular in der Explorer Ansicht
Erscheinungsbild zu geben, eröffnen wir
eine Tabelle. Die Spaltenbreite, die Höhe und die Ausrichtung definieren wir nach den
individuellen Bedürfnissen. Wir setzen in die linke Spalte der Tabelle die
Datenfeldnamen und in die rechte Spalte den Befehl für das Eingabefeld.
Unser HTML-Code
27
Dieses ist durch den <input> Tag definiert. Für die Eigenschaften der Eingabefelder
verwenden wir die Attribute „type“, „name“ und „size“.
Als letztes setzen wir in eine neu eröffnete Tabelle die „Senden“ und die“ Abbrechen“
Funktion. Selbstverständlich müssen die eröffneten Tags auch wieder geschlossen
werden.
Der gesamte HTML-Code für das in der Abbildung 7 gezeigte Formular steht für
interessierte Leser im Anhang A.
Hinweis: Achten Sie darauf, dass in Ihrem Browser eine Identifikation ihrer eigenen
E-Mail Adresse angegeben ist.
6.9 Cascading Style Sheets
Die Gestaltung einer Internetseite kann nervig und zeitraubend werden, wenn jeder
einzelne Textabschnitt und jedes Bild einzeln formatiert und mit den entsprechenden
Tags versehen werden muss. Wir werden jetzt ein Hilfsmittel betrachten, dass die
Arbeit im HTML-Code erheblich erleichtert.
Die Cascading Style Sheets Technologie basiert auf Formatdefinitionen, die auf HTMLElemente
angewendet
werden.
Sie
ist
eine
unmittelbare
Ergänzung
zur
Auszeichnungssprache HTML. Sie verleiht unserer Homepage ein einheitliches
Aussehen. Die Möglichkeiten zur Formatierung sind mit CSS-Anweisungen nahezu
grenzenlos.
Es gibt drei Varianten CSS-Anweisungen auf ein HTML-Dokument anzuwenden.
1. ausgelagerte CSS-Datei
überschreibt
2. CSS im Element <head>
überschreibt
3. CSS im HTML - Tag
Abb. 8: CSS Notation
überschreibt
Unser HTML-Code
28
Jede CSS-Anweisung, die direkt in einen HTML-Tag eingetragen wird, überschreibt
alle anderen Formatierungsbefehle. Falls sich die Anweisungen im <head> der Seite
befinden, werden nur die Befehle der ausgelagerten CSS-Datei überschrieben.
Wie man eine CSS-Anweisung in ein HTML-Dokument einbindet, hängt von
individuellen Bedürfnissen ab. Die sinnvollste Methode ist, alle Anweisungen in eine
ausgelagerte Datei zu schreiben. Den Formatierungsbefehl direkt in den HTML-Tag
niederzulegen, ist nicht empfehlenswert, da von Hand für jeden HTML-Tag die
Anweisung hinterlegt werden muss. Möchte man die Anweisungen modifizieren, muss
in jedem einzelnen Element die Änderung vorgenommen werden.
6.9.1 Die CSS-Anweisungen
Die CSS–Anweisungen werden in einer speziell dafür vorgesehenen Schreibweise
notiert.
HTML-Tag {Format1:“Wert“;Format2:“Wert“;}
Als erstes wird das HTMLElement notiert, für welches
die
CSS-Anweisung
gelten
soll. Die Formatanweisungen stehen immer in einer geschweiften Klammer. Nach der
Formatangabe wird ein Doppelpunkt gesetzt, nachdem ein Wert in Anführungs- und
Schlusszeichen folgt. Es können mehrere Angaben für ein Element definiert werden,
die immer mit einem Semikolon enden.
P{color:“red“;font-weight:”bold”;}
/* Formatiert Absätze in rot und fett */
Die /* Zeichen */ deuten auf
Kommentare hin. Sie dienen
zur Beschreibung der unter-
schiedlichen Formatierungsbefehle und erleichtern die Arbeit mit CSS. Die CSSKommentarzeichen unterscheiden sind von den HTML-Kommentarzeichen und dürfen
nicht verwechselt werden.
Unser HTML-Code
29
Falls gleichartige Formateigenschaften für unterschiedliche HTML-Elemente definiert
sind, werden diese zusammengefasst. Das erleichtert und verringert die Arbeit an
unserer Seite erheblich.
p{color:“red“;font-weight:”bold”;font-size:”10pt”;}
h1{color:“red“;font-weight:”bold”;font-size:”16pt”;}
Da die beiden HTMLElemente
<p>
und
<h1> dieselbe Formatierung
aufweisen,
schreiben wir die Anweisungen auf eine Zeile.
p,h1{color:“red“;font-weight:”bold”;font-size:”10pt”;}
<p> und <h1> stehen
vor den geschweiften
Klammern durch ein
Komma getrennt.
Nicht identische Formatanweisungen notiert man gesondert.
6.9.2 Das Einbinden im <head> Bereich
Die Hinterlegung der CSS-Anweisung im <head> Bereich, geschieht über den Befehl
<style> und das dazugehörende Attribut „type“. Die Formatanweisungen schreiben wir
zwischen Anfangs- und Schlusstag.
<HTML>
Die Formatanweisung
<head>
stellt
<title>CSS-Anweisung</title>
<STYLE type=“text/css“>
P{color:“red“;font-weight:”bold”;}
</STYLE>
</head>
<body>Absatz in rot und fett ausgezeichnet
</body>
</HTML>
die
Absätze
einzelnen
im
<body>
fett und rot dar.
Individuelle
An-
passungen
können
direkt
<body>
im
Bereich
vor
den
jeweiligen
Textab-
schnitten
vorge-
nommen werden.
Unser HTML-Code
30
6.9.3 Das Einbinden von ausgelagerten CSS-Dateien
Als erstes erstellen wir in einem Editorprogramm eine CSS-Datei mit allen
Formatangaben und speichern diese mit der Endung .css ab. Diese Datei wird über
einen Link in das HTML-Dokument unserer Internetseite eingebaut.
<head>
<link type=“text/css“ rel=“stylesheet“ href=“datei.css“>
</head>
Alle HTML-Seiten, die
mit
dieser
Datei
verbunden
weisen
Layout
sind,
dasselbe
auf.
Der
wesentliche Vorteil ist, dass Formatänderungen nur einmal in der CSS-Datei
vorgenommen werden müssen.
Manchmal kann es sinnvoll sein, für eine einzelne HTML-Seite andere CSSAnweisungen zu definieren. In einem solchen Fall können wir die ausgelagerte Datei in
gewohnter Weise einbinden, und im Kopf der HTML-Seite ein Element <style>
einfügen, das die abweichenden Formatanweisungen enthält.
7. Dynamic HTML
DHTML lässt sich als eine Kombination von Technologien beschreiben, die
zusammenarbeiten, um dynamische Effekte zu erzielen. Die beiden DHTML-Elemente
Cascading Style Sheets und Hypertext Markup Language haben wir schon vorgestellt.
JavaScript ist eine weitere Komponente, die bei DHTML zur Geltung kommt. Hierbei
handelt es sich um eine Programmiersprache.
Anhand eines Fallbeispiels und einer kurzen Einführung zeigen wir wie ein JavaScript
Programm in HTML eingebunden wird.
Unser HTML-Code
31
7.1 JavaScript
JavaScript wird auf Grund des ähnlichen Namens oft mit Java verwechselt. Die
Sprache ist jedoch nur sehr weitläufig mit Java verwandt. Mit JavaScript können
HTML-Seiten so erweitert werden, dass sich Elemente bewegen, Objekte verändern
und Interaktionen stattfinden.
Entwickelt wurde JavaScript von Netscape in einer Kooperation mit Sun Microsystems
sowie einigen weiteren Partnern. Der Quellcode von JavaScript ist öffentlich
zugänglich.
JavaScript basiert auf vordefinierten Objekten, daher spricht man auch von einer
objektorientierten Sprache. Es besteht eine ganze Reihe von Objekten, deren
Eigenschaften und Methoden in der Programmierung genutzt werden. Natürlich
besteht
die
Möglichkeit
eigene
Objekte
zu
bestimmen
und
diesen
eigene
Eigenschaften und Methoden zuzuordnen.
Vordefinierte Objekte
Am einfachsten lassen sich die abstrakten Objekte der Scriptsprache anhand von
Gegenständen aus dem täglichen Gebrauch erklären. Denn ein Objekt einer
Scriptsprache ist letzten Endes nichts anderes als ein Gegenstand, zum Beispiel ein
Buch.
Eigenschaften
Wie jeder alltägliche Gegenstand haben auch die Objekte in JavaScript Eigenschaften.
Diese sind Werte, die ein Objekt charakterisieren und durch welche sich ein Objekt von
einem anderen unterscheidet. Beim Buch ist die Grösse, der Titel oder die Farbe als
Eigenschaft zu sehen.
Methoden
Methoden sind die aktiven Algorithmen, die von einem Objekt bereitgestellt werden,
damit bei einem Aufruf bestimmte Dinge getan werden.
Unser HTML-Code
32
Methoden sind so etwas wie einem Objekt fest zugeordnete Funktionen. Diese werden
nur über das Objekt verwendet.
Wenn wir etwa ein Buch kaufen, dann möchten wir somit ein Objekt erwerben, das
über gewisse Eigenschaften (Titel, Seiten, Farbe) verfügt. Mit dem Buch können wir
verschiedene Dinge tun (lesen, aufschlagen, als Briefbeschwerer benutzen), was
anhand von Methoden umschrieben wird.
7.2 Einbinden von JavaScript in HTML
Die JavaScript Anweisung wird nach speziellen Regeln in den HTML-Code
eingebunden. Dabei stehen dem Webdesigner drei Möglichkeiten zur Verfügung.
als externe Datei
Die Auslagerung einer Scriptdatei macht vor allem dann Sinn, wenn wir Funktionen
haben, die wir in mehreren HTML-Dateien verwenden möchten. Solche Dateien
werden auch als ausgelagerte Funktions- oder Scriptbibliotheken bezeichnet.
Die externe JavaScriptdatei muss die Endung „js“ haben und mit einer Pfadangabe im
<head> oder <body> Bereich über den Scriptbefehl eingebunden werden.
<SCRIPT language=“JavaScript“ src=“Dateiname.js“>
Der
Vorteil
dieser
Einbindungsart
ist,
dass
die
wir
Funktionen nur noch in einer zentralen Datei verwalten und pflegen müssen.
als Scriptblock in der HTML-Seite
In HTML ist der Befehl <SCRIPT> vorgesehen, um JavaScript Anweisungen in den
Code einzubinden. Über das Attribut „language“ wird JavaScript als Scriptsprache
festgelegt. Die Verwendung von Scriptblöcken zur Implementierung von JavaScript ist
die gängigste Methode.
Unser HTML-Code
33
Abgesehen von der besseren Übersichtlichkeit eines Scriptblocks, liegt der wesentliche
Hauptunterschied darin, dass ein Scriptblock kein auslösendes Ereignis benötigt, um
ausgeführt zu werden.
<SCRIPT language=“JavaScript“>
<!—
JavaScript-Anweisung
//->
</SCRIPT>
Die
Anweisungen
werden gemäss der
linksstehenden
Ab-
bildung
//->
in
<!-
Kommentarzeichen
gesetzt.
werden
Somit
die
An-
weisungen nicht als Text vom Browser interpretiert. Wollen wir mehrere Scripte
einbinden, dann müssen wir diese mit einem Semikolon voneinander trennen.
Ein Scriptblock kann in den <head> oder <body> Bereich plaziert werden. Benötigt ein
Script Informationen aus dem HTML-Code der Seite, dann muss der Scriptblock am
Ende der Seite stehen. Soll aber das JavaScript vor dem Laden der Seite ausgeführt
werden, muss der Scriptblock im Kopfbereich der HTML-Seite stehen.
als Anweisung in einem HTML-Tag
Die einfachste Art JavaScript in HTML einzubinden, ist die direkte Zuweisung innerhalb
eines HTML-Tags. Diese Art der Einbindung eignet sich allerdings nur für einfache
Anweisungen. Das Ereignis wie zum Beispiel das Klicken mit der Maus auf ein Element
oder das Laden der Seite werden direkt in den <body> Tag implementiert.
<body onload=“Popup Fenster Meldung“>
Der
<body
onload>
Befehl benötigt keinen
<script> Befehl. Beim
Öffnen des Browsers geht ein zusätzliches Fenster mit einer Meldung auf.
Unser HTML-Code
34
8. Das Fallbeispiel
In unserem Beispiel wollen wir einen Taschenrechner erstellen, der über die drei
genannten Elemente HTML, CSS und
JavaScript verfügt. Zur besseren Übersicht
haben wir die Teile verschiedenfarbig
dargestellt.
Wir
unterlassen
es
die
Anweisungen detailliert zu erklären, und
möchten uns auf die Einbindung der
Elemente konzentrieren.
Wir haben den ausführlichen Code in den
Anhang B gesetzt und beschränken uns
an dieser Stelle nur auf die Erklärungen
Abb. 9: Taschenrechner
der Teilbereiche.
blaugefärbter Bereich
Die Standardtags für die Seitenstruktur sowie die Taschenrechnergestaltung werden in
HTML codiert.
Über das <form> Befehlszeichen und die dazugehörenden Attribute erkennt der
Browser den Taschenrechner. Zwischen dem <form> Eröffnungs- und Schlusstag ist
die Gestalt des Rechners, anhand von Tabellen, bestimmt. Die diversen Schaltflächen
für den Taschenrechner sind über <input> Tags eingefügt.
rotgefärbter Bereich
Die CSS-Anweisungen sind im <head> Bereich definiert. Alle Schaltflächen und das
Display sind gemäss den Angaben in den geschweiften Klammern formatiert.
grüngefärbter Bereich
Um die Funktionen des Taschenrechners zu gewährleisten, sind JavaScript
Anweisungen notwendig. Das gesamte Script wurde in unserem Fall in den <body>
Bereich eingefügt und bezieht sich auf die Schaltflächen des Taschenrechners.
Unser HTML-Code
35
9. Fazit und Hinweise
HTML-Kenntnisse sind für den Webdesigner nicht mehr zwingend, da es einige
Programme gibt, welche die Aufgabe der Codierung übernehmen. Diese Tatsache
muss jedoch nicht bedeuten, dass es sich um etwas unnötiges handelt. Wir durften
während unserer Arbeit mehrere Male erfahren, das HTML-Kenntnisse von höchstem
Nutzen sind. Wir denken da an die Fehlerbehebung oder an das kostenlose Erstellen
einer Homepage. Unsere Hauptmotivation bestand jedoch darin, hinter die Kulissen zu
schauen um sich bewusst zu werden, was der Computer im Hintergrund generiert.
Die HTML-Dokumente sind Bestandteile einer Homepage, die über das Internet
abrufbar sind. Wie wir gesehen haben, werden diese Seiten mit einem Programm
erstellt und über ein weiteres auf den Server des Providers hochgeladen. Die
Internetbesucher haben nun über eine Adresse den Zugriff auf unsere Seite.
Oft wirken reine HTML-Seiten unattraktiv, da keine Animationen oder Interaktionen
stattfinden. JavaScript ist eine wirkungsvolle Ergänzung zu HTML, das unsere
Internetseite dynamischer und interessanter erscheinen lässt.
Wer eine Internetseite gestalten möchte, sollte eine Vorstellung davon haben wie sein
Endprodukt aussieht. Mit einer klaren Strategie lässt sich viel Zeit einsparen, was aber
nicht heissen muss, dass man im Laufe der Zeit keine Änderungen mehr machen darf.
Wir empfehlen, das Internet bei Fragen aller Art zu nutzen und mit Hilfe einer
Suchmaschine (z.B.www.google.ch) zu arbeiten. Wer sich die Zeit nimmt, kann
unbeschränkte Möglichkeiten im Internet ausleben und seiner Kreativität freien Lauf
lassen.
Wir haben aus Zeitgründen Teile unserer Homepage mit dem Dreamweaver von
Macromedia erstellt und können diesen weiterempfehlen. Es braucht bestimmt etwas
Geduld bis man sich an das Arbeiten gewöhnt, aber im Grossen und Ganzen kann
man von einem benutzerfreundlichen Programm sprechen. Es besteht die Möglichkeit
innerhalb dieses Programms HTML selbst zu schreiben, oder die Codierung zu
betrachten.
Das Erlernte wird nun genügen, um eine Internetseite zu gestalten und zu publizieren.
Unser HTML-Code
36
10. Schlusswort
Die Berührungsängste sind abgeschüttelt und wir sind um mehr als eine Erfahrung
reicher. Natürlich sind viele Stunden in diese Arbeit investiert worden und die Zeit war
nicht immer schön. Es gab harte Stunden der Verzweiflung und Fragwürdigkeit, aber
was sich am Ende zeigt, ist ein persönlich beachtliches Resultat. Unsere Homepage ist
ein Produkt von Ideen aus der ganzen Welt des Internets und als praktisches Ergebnis
zu werten.
Unser entstandenes Wissen ist eine unbezahlbare Ware, die für unsere Zukunft
bestimmt hilfreich ist. Wir konnten erfahren, dass wir uns in einem noch längst nicht
abgeschlossenen Prozess befinden, und dass die HTML Zukunft ungewiss ist. Der
Informationstechnologie-Sektor ist so vielschichtig und rasant, dass es einfach
unmöglich ist alles zu wissen oder stets auf dem neuesten Stand zu bleiben.
Was in unserer Arbeit bestimmt auch als persönliche Bereicherung angesehen werden
kann, ist das Arbeiten im Team. Wir haben gelernt, mit Kompromissen zu arbeiten und
andere Ideen nicht nur zu akzeptieren, sondern auch zu schätzen.
An dieser Stelle möchten wir Herrn Guido Schöb danken, der uns als betreuende
Lehrperson stets zur Seite stand. Seine Kompetenz und sein Einfühlungsvermögen hat
uns sehr geholfen.
Aus Platzgründen haben wir nur ein praktisches Fallbeispiel von unserer Internetseite
vorgestellt. Die gesamte Homepage ist aber auf der beigelegten Compact Disc oder
über das Internet einsehbar.
Die Adresse der Homepage lautet: http://home.tiscalinet.ch/matura03/.
Unser HTML-Code
37
11. Literatur- und Quellenverzeichnis
Gedruckte Medien
•
•
•
•
•
•
•
•
HTML GE-PACKT. 1. Auflage. Bonn: MITPVerlag 2001
HTML 4. 1. Auflage. München:
Lemay, Laura; Tyler Denise.
Markt + Technik Verlag
Dreamweaver 3. Eine Einführung. Bonn:
Lowery Joseph W.
MITP-Verlag 2000
Nolden Mathias; Franke Thomas. Das Internet. 1. Auflage. Düsseldorf: Sybex1996
JavaScript. 1. Auflage. Poing: Franzis’ Verlag
Rotter Robert.
GmbH 2002
Jetzt lerne ich JavaScript und HTML.
Steyer Ralph.
1. Auflage. München: Markt + Technik Verlag
1999
Java Script. 1. Auflage. München:
Steyer Ralph.
Markt + Technik 2000
Jetzt lerne ich HTML. 1. Auflage. München:
Taglinger Harald.
Markt + Technik Verlag 2000
Chung Dirk; Agular Robert.
Elektronische Medien
•
http://access.tiscali.ch/acc-privhp-index.htm. Dezember 2002
•
http://home.nordwest.net/hgm/hp/hp-plan1.htm. September 2002
Anhang C
•
http://www.uni-ulm.de/schulen/bs/rbs/ea/inetinfo/htm_tag.htm. November 2002
•
http://www.html-seminar.de/befehlsuebersicht.htm#allgemeines. November 2002
•
http://ourworld.compuserve.com/homepages/Birgit_Bachmann/uebersi.htm.
November 2002
•
http://www.bildungsservice.at/gemeinde/workshop/html/tags.htm. November 2002
Anhang D
•
http://www.hak1.at/beispiele/webdesign/farbtafel.htm. November 2002
andere Quellen
•
JavaScript für Taschenrechner. Frei Jolanda. Webmasterin. Berglistrasse 9.
9302 Kronbühl
Unser HTML-Code
38
12. Abbildungsverzeichnis
Abbildung 1: Netzwerk. Microsoft Encarta Enzyklopädie 2002
Abbildung 2: Funktionsprinzip des Internets. Microsoft Encarta Enzyklopädie 2002
Abbildung 3: FTP Programm im Dreamweaver. Eigener Printscreen
Abbildung 4: Grundgerüst. Eigener Printscreen der Internet Explorer Ansicht
Abbildung 5: Tabelle. Eigener Printscreen der Internet Explorer Ansicht
Abbildung 6: HTML-Code der Tabelle. Eigener Printscreen der Editor Ansicht
Abbildung 7: Formular. Eigener Printscreen der Internet Explorer Ansicht
Abbildung 8: CSS Notation. Rotter Robert. JavaScript. Seite 34
Abbildung 9: Taschenrechner. Eigener Printscreen der Internet Explorer Ansicht
13. Deklaration zur Eigenständigkeit
Wir erklären hiermit, dass die vorliegende Arbeit selbstständig und ohne Verwendung
anderer Hilfsmittel, als im Verzeichnis angegeben, verfasst wurde.
St. Gallen, Januar 2003
Daniel Gradl
Robert Rekece
Unser HTML-Code
39
Anhang A: Fallbeispiel Formular
<HTML>
<head>
<title>Formular</title>
</head>
<body bgcolor=#ffffff text=#000000>
<form method=post action=“mailto:[email protected]“>
<table boarder=0 width=500>
<tr>
<td width=100 valign=top>
<font face=Arial, Helvetica size=4>
Name<P>
Vorname<P>
Firma<P>
Strasse/Nr.<P>
PLZ<P>
Ort<P>
Land<P>
</font>
</td>
<td width=400 valign=top>
<input type=text name=Name size=50><p>
<input type=text name=Vorname size=50><p>
<input type=text name=Firma size=50><p>
<input type=text name=Strasse size=50><p>
<input type=text name=PLZ size=50><p>
<input type=text name=Ort size=50><p>
<input type=text name=Land size=50><p>
</td>
</tr>
</table>
<table boarder=1 width=500>
<tr>
<td width 100 align=left></td>
<td width 200 align=center>
<input type=submit value=losschicken>
</td>
<td width=200 align=center>
<input type=reset value=abbrechen>
</td>
</tr>
</table>
</form>
</body>
</HTML>
Unser HTML-Code
Anhang B: Fallbeispiel Taschenrechner
<HTML>
<head>
<title>Taschenrechner</title>
<style type="text/css">
.button {width:50px; text-align:center; font-family:System,sans- serif;fontsize:100%;}
.display { width:100%; text-align:center; font-family:System,sans-serif; font-size:10%;}
.</style>
</head>
<body bgcolor="#FFFFE0" text="#000000" align="center">
<form name="Rechner" action="" onSubmit="Ergebnis();return false;">
<p align=center>
<table border="5" cellpadding="10" cellspacing="0">
<tr>
<td bgcolor="#C0C0C0">
<input type="text" name="Display" align="right" class="display"></td>
</tr><tr>
<td bgcolor="#E0E0E0">
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td>
<input type="button" width="60" class="button" value=" 7 "
onClick="Hinzufuegen('7')"></td>
<td><input type="button" width="60" class="button" value=" 8 "
onClick="Hinzufuegen('8')"></td>
<td><input type="button" width="60" class="button" value=" 9 "
onClick="Hinzufuegen('9')"></td>
<td><input type="button" width="60" class="button" value=" + "
onClick="Hinzufuegen('+')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value=" 4 "
onClick="Hinzufuegen('4')"></td>
<td><input type="button" width="60" class="button" value=" 5 "
onClick="Hinzufuegen('5')"></td>
<td><input type="button" width="60" class="button" value=" 6 "
onClick="Hinzufuegen('6')"></td>
<td><input type="button" width="60" class="button" value=" - "
onClick="Hinzufuegen('-')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value=" 1 "
onClick="Hinzufuegen('1')"></td>
<td><input type="button" width="60" class="button" value=" 2 "
onClick="Hinzufuegen('2')"></td>
<td><input type="button" width="60" class="button" value=" 3 "
onClick="Hinzufuegen('3')"></td>
<td><input type="button" width="60" class="button" value=" * "
onClick="Hinzufuegen('*')"></td>
</tr>
<tr>
40
Unser HTML-Code
<td><input type="button" width="60" class="button" value=" = "
onClick="Ergebnis()"></td>
<td><input type="button" width="60" class="button" value=" 0 "
onClick="Hinzufuegen('0')"></td>
<td><input type="button" width="60" class="button" value=" . "
onClick="Hinzufuegen('.')"></td>
<td><input type="button" width="60" class="button" value=" / "
onClick="Hinzufuegen('/')"></td>
</tr>
<tr>
<td><input type="button" width="60" class="button" value="sqrt "
onClick="Sonderfunktion('sqrt')"></td>
<td><input type="button" width="60" class="button" value=" pow "
onClick="Sonderfunktion('pow')"></td>
<td><input type="button" width="60" class="button" value=" log "
onClick="Sonderfunktion('log')"></td>
<td><input type="reset" width="60" class="button" value=" C "></td>
</tr>
</table>
</td></tr></table></p>
</form>
<script type="text/javascript">
<!-function Check(Eingabe) {
var nur_das ="0123456789[]()-+*%/";
for (var i = 0; i < Eingabe.length; i++)
if (nur_das.indexOf(Eingabe.charAt(i))<0 ) return false;
return true;}
function Ergebnis() {
var x = 0;
if (Check(window.document.Rechner.Display.value))
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = x;}
function Hinzufuegen(Zeichen) {
window.document.Rechner.Display.value =
window.document.Rechner.Display.value + Zeichen;}
function Sonderfunktion(Funktion) {
if (Check(window.document.Rechner.Display.value)) {
if(Funktion == "sqrt") {
var x = 0;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = Math.sqrt(x);}
if(Funktion == "pow") {
var x = 0;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = x * x;}
if(Funktion == "log") {
var x = 0;
x = eval(window.document.Rechner.Display.value);
window.document.Rechner.Display.value = Math.log(x);}
} else window.document.Rechner.Display.value = 0}
//-->
</script>
</body>
</html>
41
Unser HTML-Code
42
Anhang C: Thematische Übersicht der HTML-Tags
Allgemeines
<!-- Text-->
<HTML></HTML>
<head></head>
<body></body>
<title></title>
Vermerk von Kommentaren, die auf der im
Browser angezeigten Seite nicht sichtbar, aber
beim Erstellen und Erweitern hilfreich sind.
Anfang und Ende des HTML-Dokumentes.
Der Kopfbereich, in dem allgemeine Angaben
gemacht werden, die nicht im Browserfenster
angezeigt werden.
Der Inhalt der Internetseite wird zwischen den
Anfangs- und Schlusstag geschrieben, er wird
durch den Browser angezeigt
Funktion:
-Titelzeile des Anzeigefensters
-Namen von gesetzten Lesenzeichen
-Liste der bereits besuchten Seiten
-Eintragung bei Suchmaschinen
Textformatierung
<b></b>
<i></i>
<u></u>
<sup></sup>
<sub></sub>
<h1>grösster Wert </h1>
<h6>kleinster Wert</h6>
<h1 align=“Wert“></h1>
<font size=“Wert“></font>
<font color=“Wert“></font>
<font face=“Wert“, “Wert2“,>
</font>
<basefont=“Wert“></font>
Schriftstil fett
Schriftstil kursiv
Schriftstil unterstrichen
Schriftstil hochgestellt, z.B. 0C
Schriftstil tiefgestellt, z.B. H2O
Überschrift
Ausrichtung einer Überschrift
Wert: left (links), right (rechts), center (zentriert)
Schriftgröße von 1 – 7; 1 kleinster Wert, 7
grösster Wert
Schriftfarbe ⇒siehe Anhang
Einem Bereich wird eine bestimmte Schriftart
zugewiesen. Ist diese auf dem System des
Benutzers nicht installiert, benutzt er die
nächste angegeben Schriftart.
dateiweite Definition der Schriftgrösse oder der
Schriftfarbe
Sonderzeichen und Umlaute
ä Ä
ö Ö
ü Ü
ß
< >
"
©
®
&
ä, Ä
ö, Ö
ü, Ü
ß
<>
Anführungszeichen
© Copyright Symbol
® registered trademark
& Zeichen
Unser HTML-Code
43
Absatzaufbau
<p></p>
<p align=“Wert“></p>
<center></center>
<br></br>
Absatz: vor und nach dem Absatz wird
automatisch Platz gehalten
Absatzausrichtung
Wert: left(links), right(rechts), center(zentriert),
justify(Blocksatz)
zentrierte Ausrichtung (oft bei Gedichten)
erzwungener Zeilenumbruch
Aufzählungen
<li></li>
<ul></ul>
<ol>
start=“Wert“ type=“Wert“>
</ol>
Bei Aufzählungen müssen die Einzelpunkte
durch diesen Tag gekennzeichnet sein.
Aufzählugsliste
nummerierte Liste ⇒Attribut ist erforderlich
start=“1“ Starteinheit
type=“1“, numerische Liste
type=“I“, Liste mit römischen Ziffern
type=“i“, Liste mit kleinen römischen Ziffern
type=“A“, Liste mit Buchstaben
type=“a“, Liste mit kleinen Buchstaben
Hintergrundgestaltung
<body bgcolor=Wert></body>
<body background="Wert"></body>
Hintergrundfarbe
Hintergrundbild einbinden
Wert: Bilddatei
Linien
<hr></hr>
<hr width=Wert></hr>
<hr align=Wert></hr>
<hr size=Wert></hr>
<hr noshade></hr>
<hr shade></hr>
<hr color=Wert></hr>
Linie
Linienbreite
Linienausrichtung: left, right, center
Linienstärke
nicht-schattierte Linie
schattierte Linie
Linienfarbe
Tabellen
<table></table>
<tr></tr>
<td></td>
<table width=”Wert”></table>
<table height=”Wert”></table>
<table border=”0”></Table>
<table border=”Wert”></Table>
<table cellspacing=”Wert”></Table>
<table cellpadding=”Wert”></table>
<td align=left oder center oder right></td>
<td valign=top oder middle oder bottom>
<td rowspan=“Wert“></td>
<td colspan=“Wert“></td>
<table bordercolor=”Wert”></table>
<table bgcolor=”Wert”></table>
<td bgcolo=“Wert“></td>
Tabelle öffnen uns schliessen
Tabellenzeile öffnen und schliessen
Tabellenzelle öffnen und schliessen
Tabellenbreite
Tabellenhöhe
Tabelle ohne Gitternetzlinien
Stärke des äusseren Rahmens
Stärke der Gitternetzlinien
Abstand vom Zelleninhalt zum Rand
Zelleninhalt horizontal ausrichten
Zelleninhalt vertikal ausrichten
Tabellenzeilen verbinden
Wert= Anzahl der zu verbindenden Zeilen
Tabellenspalten verbinden
Wert= Anzahl der zu verbindenden Spalten
Tabellenrahmen-Farbe
Tabellenhintergrund-Farbe
Tabellenzellen-Farbe
Unser HTML-Code
44
Links
<a href="start.htm">Linktext</a>
<a href="www.isme.ch">Linktext</a>
<a href="#xy">Sprung nach xy</a>
<a name="xy">irgendwas</a>
<a href="mailto:[email protected]">
[email protected]</a>
interner Link
externer Link
Sprungmarke (wird durch # gekennzeichnet) zu
einem bestimmten Punkt
Definition wohin die Sprungmarke springen soll
Das E-Mail Programm öffnet sich und die E-MailAdresse ist bereits eingegeben.
Bilder und Grafiken einfügen
<img src="Bildname.Format"></img>
Grafik oder Bild einfügen
Bilder und Grafiken ausrichten
<img src="Bildname.Format align=left">
</img>
<img src="Bildname.Format align=center">
</img>
<img src="Bildname.Format align=right">
</img>
linksbündig
zentriert
rechtsbündig
Graphiken und Bilder mit Rahmen
<img src="Bildname.Format"
border=“Wert“></img>
<font color=“Wert><img src="
Bildname.Format " border=“Wert“></font>
<img src="Bildname.Format"
height=“Wert“>
<img src="Bildname.Format" width=“Wert“>
einfacher Rahmen
farbiger Rahmen
Bildhöhe dehnen oder stauchen
Bildbreite dehnen oder stauchen
Anklickbare Bilder oder Graphiken
<a href="Dateiangabe">
<img src="Bilddatei"></a>
anklickbares Bild oder Graphik
Videos und Töne
<embed src=video.mov>
<embed src=sound.wav>
Video einbinden, welcher nach einem Mausklick
abgespielt wird
Voraussetzung: Abspielprogramm auf PC
Musikdatei einbinden, welche nach einem
Mausklick abgespielt wird
Voraussetzung: Abspielprogramm auf PC
Formulare
<form></form>
<input type="checkbox" name="NAME">
<input type="radio" name="NAME"
value="x">
<input type="submit" value="NAME">
<input type="image" border=0
name="NAME" src="name.gif">
<input type="reset">
Formular
Auswahlkästchen
Runder Auswahlknopf
Senden Button
Senden Button unter Verwendung einer Grafik
zurücksetzen Button
Unser HTML-Code
45
Anhang D: Farbtafel
#000000
#000033
#000066
#000099
#0000cc
#0000ff
#003300
#003333
#003366
#003399
#0033cc
#0033ff
#006600
#006633
#006666
#006699
#0066cc
#0066ff
#009900
#009933
#009966
#009999
#0099cc
#0099ff
#00cc00
#00cc33
#00cc66
#00cc99
#00cccc
#00ccff
#00ff00
#00ff33
#00ff66
#00ff99
#00ffcc
#00ffff
#330000
#330033
#330066
#330099
#3300cc
#3300ff
#333300
#333333
#333366
#333399
#3333cc
#3333ff
#336600
#336633
#336666
#336699
#3366cc
#3366ff
#339900
#339933
#339966
#339999
#3399cc
#3399ff
#33cc00
#33cc33
#33cc66
#33cc99
#33cccc
#33ccff
#33ff00
#33ff33
#33ff66
#33ff99
#33ffcc
#33ffff
#660000
#660033
#660066
#660099
#6600cc
#6600ff
#663300
#663333
#663366
#663399
#6633cc
#6633ff
#666600
#666633
#666666
#666699
#6666cc
#6666ff
#669900
#669933
#669966
#669999
#6699cc
#6699ff
#66cc00
#66cc33
#66cc66
#66cc99
#66cccc
#66ccff
#66ff00
#66ff33
#66ff66
#66ff99
#66ffcc
#66ffff
#990000
#990033
#990066
#990099
#9900cc
#9900ff
#993300
#993333
#993366
#993399
#9933cc
#9933ff
#996600
#996633
#996666
#996699
#9966cc
#9966ff
#999900
#999933
#999966
#999999
#9999cc
#9999ff
#99cc00
#99cc33
#99cc66
#99cc99
#99cccc
#99ccff
#99ff00
#99ff33
#99ff66
#99ff99
#99ffcc
#99ffff
#cc0000
#cc0033
#cc0066
#cc0099
#cc00cc
#cc00ff
#cc3300
#cc3333
#cc3366
#cc3399
#cc33cc
#cc33ff
#cc6600
#cc6633
#cc6666
#cc6699
#cc66cc
#cc66ff
#cc9900
#cc9933
#cc9966
#cc99099
#cc99cc
#cc99ff
#cccc00
#cccc33
#cccc66
#cccc99
#cccccc
#ccccff
#ccff00
#ccff33
#ccff66
#ccff99
#ccffcc
#ccffff
#ff0000
#ff0033
#ff0066
#ff0099
#ff00cc
#ff00ff
#ff3300
#ff3333
#ff3366
#ff3399
#ff33cc
#ff33ff
#ff6600
#ff6633
#ff6666
#ff6699
#ff660cc
#ff66ff
#ff9900
#ff9933
#ff9966
#ff9999
#ff99cc
#ff99ff
#ffcc00
#ffcc33
#ffcc66
#ffcc99
#ffcccc
#ffccff
#ffff00
#ffff33
#ffff66
#ffff99
#ffffcc
#ffffff
Unser HTML-Code
Anhang E: Homepage und Maturaarbeit auf CD
46