Internet-Seiten - selbst gemacht
Transcription
Internet-Seiten - selbst gemacht
Internet INFORMATIONSMATERIALIEN - SKRIPT Fach Informatik Internet-Seiten selbst gemacht FACH INFORMATIK Internet-Seiten - selbst gemacht Tino Hempel Die in diesem Skript wiedergegebenen Verfahren und Programme werden ohne Rücksicht auf die Patentlage mitgeteilt. Sie sind für Amateur- und Lehrzwecke bestimmt. Es wird hingewiesen, daß weder eine Garantie noch die juristische Verantwortung oder irgendeine Haftung für Folgen, die auf fehlerhafte Angaben zurückgehen, übernommen werden kann. Außerdem wird darauf hingewiesen, daß die im Skript verwendeten Soft- und Hardwarebezeichnungen und Marken der jeweiligen Firmen im allgemeinen warenzeichen-, marken- oder patentrechtlichem Schutz unterliegen. Für die verwendeten Cliparts gilt: © by Broderbund Software Print Shop Deluxe i Inhaltsverzeichnis GRUNDLAGEN ................................................................................................................................... 1 DAS GRUNDGERÜST........................................................................................................................ 3 EINIGE BESONDERHEITEN ........................................................................................................... 4 DER DOKUMENTENKOPF .............................................................................................................. 4 DER HAUPTTEXT.............................................................................................................................. 6 TEXTEIGENSCHAFTEN .................................................................................................................. 7 LOGISCHE TEXTEIGENSCHAFTEN ......................................................................................................... 7 PHYSISCHE TEXTEIGENSCHAFTEN ...................................................................................................... 11 ANKER UND VERWEISE ............................................................................................................... 12 VERWEISE INNERHALB EINES DOKUMENTS ........................................................................................ 13 VERWEISE AUF ANDERE HTML-DOKUMENTE ................................................................................... 13 VERWEISE AUF TEXTSTELLEN IN ANDEREN HTML-DOKUMENTEN.................................................... 13 VERWEISE AUF ANDERE INTERNET-DIENSTE ...................................................................................... 14 BILDER, FARBE, VIDEO UND SOUND ....................................................................................... 15 DER VERWEIS AUF GRAFIKEN, BILDER, VIDEO UND SOUND.............................................................. 15 INLINE-GRAFIKEN .............................................................................................................................. 15 TEXTFARBE UND HINTERGRUNDBILDER............................................................................................. 17 KLICKBARE BILDER ........................................................................................................................... 18 TABELLEN ........................................................................................................................................ 19 FRAMES ............................................................................................................................................. 23 FORMULARE.................................................................................................................................... 25 DAS INPUT - ELEMENT .................................................................................................................... 26 DAS SELECT - ELEMENT ................................................................................................................. 27 DAS TEXTAREA - ELEMENT .......................................................................................................... 28 CGI-SKRIPTS.................................................................................................................................... 29 DIE AUSGABEN .................................................................................................................................. 29 DIE EINGABEN ................................................................................................................................... 30 JAVA ................................................................................................................................................... 32 ABSCHLIEßENDE GESTALTUNGSHINWEISE......................................................................... 33 LITERATURHINWEISE.................................................................................................................. 35 ii Internet Internet-Seiten selbst gemacht Die Nutzung des Internet speziell des WWW (Word Wide Web) wird immer populärer. Fast täglich findet man neue Internetadressen in Zeitungen und Zeitschriften. Selbst das Medium Fernsehen veröffentlicht mittlerweile die bekannten „http://www.irgendwer.wo“1. Nachdem man das Internet über einen Online-Dienst, eine Universität, die Schule oder über Online-Cafés kennenlernt hat, kommt schnell der Wunsch auf, eigene Seiten ins Netz der Netze zu stellen. Falls Sie Nutzer von CompuServe, AOL oder einer Uni sind, so dürfen Sie kostenlos eine Homepage2 erstellen. Grundlagen F ür die Erstellung von WWW-Seiten benötigen Sie weder spezielle noch teure Programme. Es genügen ein einfacher Texteditor (z. B. NotePad, Write, Edit oder WordPad) und Kenntnisse in der HTML-Sprache. HTML steht für HyperText Markup Language und ist eine Dokumentbeschreibungssprache. Sie beschreibt immer die Struktur einer Seite und weniger das Aussehen! HTML wurde im europäischen Kernforschungsinstitut CERN mit Sitz in Genf entwickelt, um wissenschaftliche Daten einfach, schnell und übersichtlich übermitteln zu können und ist eine Untersprache von SGML (Structred General Markup Language). HyperText besitzt im Gegensatz zu einem „normalen“ Text auch Querverweise innerhalb des Textes und zu anderen Textdokumenten, ja sogar auf fremde Rechner des Internet. Solche Querverweise, Links genannt, sind i. allg. farbig markiert und werden bei Mausklick ausgeführt. Übrigens gehen Windows-Anwender sehr häufig mit einer speziellen Form von Hypertext um, nämlich jedesmal, wenn sie die Hilfe benutzen. Um Internet-Seiten betrachten zu können, benötigen Sie einen sogenannten Client, auch Browser genannt. Der bekannteste unter den Browsern ist zweifelsfrei Netscape, aber auch der Microsoft Internet Explorer ist neben NCSA Mosaic ein populärer Vertreter. Leider stellen die verschiedenen Browser 1 Diese Adresse bezeichnet man auch aus URL (Uniform Resource Locator). 2 Als Homepage bezeichnet man die Anfangsseite eines Nutzers. INTERNET-SEITEN - SELBST GEMACHT SEITE 2 den HTML-Text zum Teil unterschiedlich dar. Sie sollten daher Ihre Seiten immer mit verschiedenen Browsern kontrollieren. Wie bei einer Programmiersprache ist HTML nicht gleich HTML. Die Sprache wurde und wird ständig verbessert. Mittlerweile existieren verschiedene Versionen des HTML (HTML 2, HTML 3.2 und HTML 4). HTML 4 ist als Standard verabschiedet worden. Die meisten Browser unterstützen mittlerweile auch alle 4er Befehle wie etwa Tabellen und Frames. Die Firmen Netscape und Microsoft haben jedoch auch HTML-Erweiterungen entwickelt, die nur der hauseigene Browser wiedergeben kann. Der Internet-Nutzer wird auf diese Weise gezwungen, immer die neuste Version der Browser einzusetzen. Andere Browser können diese Seiten nur teilweise korrekt wiedergeben. Unbekannte Eintagungen übergehen die Browser einfach. Die Sprache HTML selbst besteht lediglich aus einer Ansammlung von Tags (Markierungen), die sich auf den folgenden Text beziehen und dessen Aussehen bestimmen bzw. Querverbindungen anlegen und Grafiken einbinden. HTML-Dokumente tragen die Endungen .htm oder .html. Ihnen stehen drei Möglichkeiten zur Erstellung von HTML-Seiten offen: 1. Sie Schreiben den HTML-Code unmittelbar in eine Textdatei. Dies ist die flexibelste Methode, erfordert allerdings genaue Kenntnisse der Sprache. 2. Sie verwenden HTML-Editoren. Diese i. d. R. Shareware-Programme erzeugen auf Mausklick die nötigen Tags und führen eine SyntaxÜberprüfung durch. Allerdings werden oft nicht alle HTML-Befehle unterstützt. 3. Sie greifen Konverter zurück. Diese wandeln das Text-Dokument (z. B. Word-Datei) in HTML um. Auch hier sind die Gestaltungsmöglichkeiten durch die Konverter und Textverarbeitungssysteme begrenzt. Für alle drei Methoden benötigen Sie allerdings HTML-Grundkenntnisse, um selbst schnell in die Seitengestaltung eingreifen und kleine Fehler beseitigen zu können. Hinweis Bevor Sie so richtig loslegen, überlegen Sie bitte, welche Informationen Sie in das Internet stellen wollen. Das Netz enthält jetzt schon viel Schwachsinn und ist in der letzten Zeit sehr langsam geworden. Füttern Sie es also bitte nur mit relevanten Daten und keinem Schnickschnack (unnötige Grafiken oder Multimediaanwendungen), der die Leitungen nur belastet. INTERNET-SEITEN - SELBST GEMACHT SEITE 3 Das Grundgerüst Alle HTML-Seiten haben ein gemeinsames Grundgerüst, das so aussieht: <HTML> <HEAD <TITLE> Hier den Seiten-Titel einfuegen </TITLE> </HEAD> <BODY> Hier kommt das eigentliche Dokument! </BODY> </HTML> Gespeichert als Textdokument (MS-DOS- oder ASCII-Text) mit der Endung .html oder .htm ergibt sich folgende Browseransicht. Sie erkennen im Quelltext leicht, das jeder Tag in spitze Klammern eingeschlossen wird. Diese Zeichen < > und </ > werden Begrenzer genannt. Jeweils zwei Tags - ein Start- und ein End-Tag - markieren i. d. R. einen Bereich, für den der Befehl angewendet werden soll. Die Tags <HTML> und </HTML> schließen das gesamte Dokument ein. Es schließt sich der Kopf des Dokumentes an, welcher zwischen <HEAD> und </HEAD> steht. Im Dokumentenkopf wird eine Titelzeile festgelegt, die die meisten Browser in ihrer Titel- oder Statuszeile auch anzeigen. Die Eingabe des Titels erfolgt zwischen den Tags <TITLE> und </TITLE>. Im Kopf können auch noch Bemerkungen eingetragen werden, welche die Browser nicht anzeigen. Zwischen den <BODY>-Tags wird schließlich das gesamte Dokument eingebettet. INTERNET-SEITEN - SELBST GEMACHT SEITE 4 Einige Besonderheiten Ä Ö Ü ß < © Syntax Auml Ouml Uuml szlig lt copy ä ö ü & > " Syntax auml ouml uuml amp gt quot Sie sind sicherlich mit der Tatsache vertraut, das es für die verschiedenen Länder unterschiedliche Tastaturen mit diversen Sonderzeichen gibt. Diese länderspezifischen Zeichen sind bis dato ein großes Problem. Zwar erlaubt der heute übliche ANSI-Standard die Darstellung von 256 Zeichen und HTML ist auch in der Lage diese darzustellen, aber um eine Kompatibilität zum alten Sieben-Bit-Codes zu ermöglichen, wurden sog. Entries für die Zeichen, deren Code größer als 127 ist, eingeführt. Die Sonderzeichen werden im HTML-Text immer mit einem Und-Symbol (&) eingeleitet und mit einem Semikolon (;) abgeschlossen. Eine Auswahl der wichtigsten Sonderzeichen finden Sie auf dieser Seite. In HTML 4 sollten auch alle griechischen Buchstaben enthalten sein (α, β usw.) sowie für Leerzeichen , für schmale Leerzeichen   und für breite Leerzeichen  . Ferner soll mit der Syntax &#xxx; mit xxx einer Zahl zwischen 0 und 255 jedes Zeichen aus dem ISO 8859/1-Zeichensatz dargestellt werden können. Leides funktioniert dies aber noch nicht so richtig! Wie in jeder Programmiersprache, so können Sie auch mit HTML Kommentare anbringen. Dazu werden die Bregenzer <!-- und - -> verwendet. Der Kommentar wird zwischen diese beiden Bregenzer eingeschlossen und vom Browser ignoriert. Also kann eine Bemerkung so aussehen: <!-- Dies hier ist ein Kommentar --> Eine völlig neue Funktion erhielt der Kommentar mit der Einführung der Internet-Programmiersprache JavaScipt. Bei JavaScript wird der Programmcode im Dokumentenkopf zwischen dem Anfangs- und dem EndTag des Kommentars eingeschoben. Der Dokumentenkopf Wie Sie bereits wissen, wird der Kopf eines HTML-Dokumentes durch die Tags <HEAD> und </HEAD> begrenzt. Innerhalb des Kopfes können für das gesamte Dokument geltende Informationen abgelegt werden. Ihnen stehen dafür zur Verfügung: <TITLE> und </TITLE> Ordnet dem Dokument einen Titel zu und wird von Suchmaschinen zur Erstellung von Datenbanken genutzt. <TITLE> Hier den Seiten-Titel einfuegen </TITLE> <BASE> Gibt die Basis (Pfad) zu einem Ordner an, so daß später nur noch relative Angaben zu anderen Dokumenten erforderlich sind, d. h., alle Dokumente werden relativ zu dieser Adresse gesucht. <BASE HREF="http://www.irgendwer.ort/Ordner"> INTERNET-SEITEN - SELBST GEMACHT SEITE 5 <ISINDEX> Ein mit <ISINDEX> versehene Seite ist ein besonderes Dokument, dessen Inhalt von einem Suchbegriff abhängt, den man an das Ende der URL durch ein Fragezeichen abgetrennt angibt. Hierfür notwendig ist ein CGI-Skript (siehe auch CGI-Skripts Seite 29). Dabei erfolgt i. d. R. der erste Aufruf ohne Suchbegriff und Fragezeichen. Der Browser jedoch erkennt durch den Tag, daß es erlaubt ist, den gleichen URL mit einem Suchbegriff zu versehen. Der Benutzer kann einen Suchbegriff angeben, und der Browser fordert nun die um den Begriff und Fragezeichen erweiterte Adresse wieder vom Server an. Der Server beginnt nun ein CGI-Skript zu laden und den Suchvorgang auszulösen. <META> Der <META>-Tag wird benutzt, um zusätzliche Informationen über das Dokument zu speichern. Diese Informationen werden, mit Ausnahme des HTTP-EQUIV-Attributs vom Browser ignoriert. Häufig wird dieser Tag verwendet, um mit eigenen Programmen eine Verwaltung der HTML-Seiten zu ermöglichen. Die Informationen werden in Form von Paaren gespeichert. Ein Paar besteht immer aus dem Attribut NAME und CONTENT, wobei letzteres die eigentliche Information enthält. <META NAME="autor" CONTENT="Brian"> <META NAME="pruefsumme" CONTENT="1234567"> Das Attribut HTTP-EQUIV wird anstelle von NAME verwendet und liefert dem Browser eine zusätzliche Kopfzeile. Normalerweise sendet der WWW-Server als Antwort auf eine Anfrage erst einen Header (Kopf) mit einigen Informationen über die Seite, dann eine Leerzeile und dann die eigentliche Seite. Findet der Server allerdings dieses Attribut, so fügt er eine weitere Kopfzeile mit den Informationen, die das Attribut CONTENT enthält, ein. Zum Beispiel wird bei <META HTTP-EQUIV="date" CONTENT="Mar 28 1995"> dem Kopf die Variable date hinzugefügt. Sie hat die Bedeutung, das „Verfallsdatum“ des Dokumentes zu vermerken. Denn oftmals werden Dokumente lokal gespeichert. Die Variable meldet jedoch dem Browser (oder Server), ob das Dokument neu geholt werden soll. <LINK> Hiermit wird eine Beziehung eines Dokumentes zu einem anderen Dokument aufgezeigt. Das Element erhält das Attribut HREF, welches auf das andere Dokument verweisen kann. Der Tag wird zwar von allen Browsern unterstützt, die wenigsten werten diesen Tag jedoch aus! <LINK HREF="http://www.irgendwer.ort/Ordner/seite.html"> INTERNET-SEITEN - SELBST GEMACHT SEITE 6 Der Haupttext Der Text kann zunächst ganz normal in den BODY-Tag geschrieben werden. Beachten Sie allerdings, das gewisse Sonderzeichen ersetzt werden müssen. Dazu gehören (leider) auch die deutschen Umlaute. TIP Schreiben Sie Ihren Text zunächst mit Umlauten und verwenden Sie abschließend die Funktion „Suchen und Ersetzen“ Ihres Editors. Beginnen Sie mit einem einfachen Beispiel. <HTML> <HEAD> <TITLE> Brians Homepage </TITLE> </HEAD> <BODY> Brians Homepage Hallo und willkommen auf Brians Ich präsentiere Ihnen hier zur Steinigung, zur Volksfront die letzten Neuigkeiten aus dem </BODY> Seite im Internet. aktuelle Informationen von Judäa und Palast von Pilatus. </HTML> Betrachten Sie diese Seite mit einem Browser! Das Ergebnis ist eher schwach. Der Browser zeigt also Absätze und Zeilenumbrüche nicht mit an. Sie müssen dem Browser demnach mitteilen, an welchen Stellen Absätze zu setzen sind. INTERNET-SEITEN - SELBST GEMACHT SEITE 7 Absätze erzeugen Sie mit dem Tag <P> (für Paragraph). Um einen definierten Zeilenumbruch zu erreichen, verwenden Sie den Tag <BR> für Break. Ändern Sie also Brians Homepage ab, und betrachten Sie diese Seite mit einem Browser. <BODY> Brians Homepage <P> Hallo und willkommen auf Brians Seite im Internet. <P> Ich präsentiere Ihnen hier aktuelle Informationen zur Steinigung,<BR> zur Volksfront von Judäa und die letzten Neuigkeiten aus dem Palast von Pilatus. </BODY> Es existiert noch eine Möglichkeit, den Text genauso zu übernehmen, wie ihn Ihr Text-Editor anzeigt. Dazu setzen Sie den Text nur zwischen die Tags <PRE> und </PRE> für preformatted (vorformatiert). Texteigenschaften Anders als bei einem Textverarbeitungssystem können Sie nicht bis ins kleinste Detail die Darstellung Ihres Textes festlegen. Dies liegt darin begründet, daß der Text auf möglichst vielen Plattformen darstellbar sein soll. Dennoch ist es möglich, sowohl logische als auch physische Texteigenschaften zu benutzen. Logische Eigenschaften werden von jedem Browser anders dargestellt. Physische Eigenschaften hingegen sind fest definiert und werden von allen Browsern gleich gezeigt. Logische Texteigenschaften Zu den wichtigsten logischen Tags gehören Überschriften und Listen. Überschriften werden mit dem Tag <Hx> und </Hx> für Headline markiert . Setzen Sie anstelle des „x“ eine Zahl zwischen eins und sechs, um die Rangordnung der Überschrift zu bestimmen. Je größer die Zahl, desto kleiner die Überschrift. Zur Übersicht erstellen Sie folgende Seite! <BODY> <H1> Überschrift <H2> Überschrift <H3> Überschrift <H4> Überschrift <H5> Überschrift <H6> Überschrift </BODY> 1 2 3 4 5 6 </H1> </H2> </H3> </H4> </H5> </H6> Ab HTML 3 darf an den Überschriften-Tag das Attribut ALIGN angefügt werden. Dieses legt die Ausrichtung der Überschrift fest und kann die Werte INTERNET-SEITEN - SELBST GEMACHT SEITE 8 LEFT, RIGHT oder CENTER annehmen. Eine zentrierte Überschrift hat also folgende Gestalt: <H1 ALIGN=CENTER>Hallo erst mal!!!</H1> Eine WWW-Seite sollte so übersichtlich und anziehend wie nur irgend möglich sein. Ein wichtiges Element um dies zu erreichen, ist der Einsatz von Listen. Sie haben die Auswahl zwischen drei Listenarten: • nichtnumerierte Listen (unordered list) <UL> </UL> • numerierten Listen (ordered list) <OL> </OL> • Gliederungen (definition list) <DL> </DL> Die Listen sind in ihrer Verwendung sehr ähnlich. Eine Liste wird mit den obigen Tags begonnen bzw. abgeschlossen. Jedes Listenelement erhält den Tag <LI>, welches den nachfolgenden Text als Listenelement deklariert. Zur Demonstration führen Sie Brians Seite fort. <BODY> <H1> Brians Homepage </H1> <H2> Hallo und willkommen auf Brians Seite im Internet. </H2> Ich präsentiere Ihnen hier aktuelle Informationen <UL> <LI> zur Steinigung, <LI> zur Volksfront von Judäa <LI> aus dem Palast von Pilatus. </UL> außerdem erhalten Sie hier <OL> <LI> das Programm der Volksfront von Judäa <LI> einen Plan des Palasts <LI> eine Sandale </OL> </BODY> Als Ergebnis erhalten Sie: INTERNET-SEITEN - SELBST GEMACHT SEITE 9 Sie können Listen auch verschachtelt werden. Hierbei kann zwischen numerierten und nichtnumerierten Listen gewechselt werden. Das sieht dann so aus: Ich präsentiere Ihnen hier aktuelle Informationen <UL> <LI> zur Steinigung, <OL> <LI> von heute <LI> von morgen <LI> im kommenden Monat </OL> <LI> zur Volksfront von Judäa <LI> aus dem Palast von Pilatus. </UL> Die numerierte Liste kann einige Attribute zur Festlegung der Numerierung enthalten. Ein Anfügen des Attributes TYPE bewirkt eine andere Numerierungsart als mit Zahlen, also TYPE=A - Großbuchstaben (A, B, C ...) TYPE=a - Kleinbuchstaben(a, b, c ...) TYPE=I - römische Großbuchstaben (I, II, III ...) TYPE=i - römische Kleinbuchstaben (i, ii, iii ...) TYPE=1 - Voreinstellung (1, 2, 3 ...) Das Attribut START gibt die Zahl an, mit der die Numerierung starten soll, also z. B.: <OL TYPE=a START=4> liefert eine mit d beginnende numerierte Liste. Bei einer Gliederung wird zusätzlich noch ein Wort oder eine Wortgruppe als Aufzählungszeichen benötigt. Deshalb muß im Text zunächst diese Wort mit dem Tag <DT> für definition term markiert werden. Der eigentliche Aufzählungstext wird mit dem Tag <DD> für definition data eingeleitet. Um lange Erklärungen zu vermeiden, schauen Sie sich doch folgendes Beispiel an. Ich präsentiere Ihnen hier aktuelle Informationen <DL> <DT> zur Steinigung <DD> dem Hinrichtungsritual schlecht hin <P> <DT> zur Volksfront von Judäa <DD> und nicht der Judäischen Volksfront <P> <DT> zur Kreuzigung <DD> Kreuzigung ist doch Firlefanz </DL> INTERNET-SEITEN - SELBST GEMACHT SEITE 10 Vier weitere wichtige logische Elemente sollen besonders hervorgehoben werden. Zum einen der Tag <HR> für horizontal rule. Er bedarf keines EndTags, hat eigentlich nichts mit dem Text zu tun, sondern fügt lediglich eine horizontale Linie ein. Der zweite nicht uninteressante, aber wohl längste Tag lautet <BLOCKQUOTE> bzw. </BLOCKQUOTE>. Der dazwischen eingeschlossene Text wird als längeres Zitat interpretiert und i. d. R. als eigenständiger Absatz etwas eingerückt dargestellt. Als drittes soll auf den Tag <ADRESS> und </ADRESS> eingegangen werden. Diesen Tag finden Sie häufig am Ende des Dokumentes. Er dient zur Kennzeichnung der Adresse des Autors. In der Regel wird dieser Text dann kursiv dargestellt. Innerhalb des Adreßbereichs sind alle anderen Eigenschaftstags erlaubt. Und viertens der bereits erwähnte Tag <PRE> und </PRE>. Der zwischen ihm enthaltenen Text wird mit einer Nicht-Proportionalschrift (Schreibmaschinenschrift) so dargestellt, wie im Quelltext angegeben. Hier ein einfaches Beispiel zu den eben beschriebenen ersten drei Tags. <BODY> <H1> Brians Homepage </H1> <H2> Hallo und willkommen auf Brians Seite im Internet. </H2> Ich präsentiere Ihnen hier einen Ausschnitt aus dem Programm der Volksfront von Judäa <BLOCKQUOTE> Die Römer haben uns alles genommen. Und nicht nur von uns, sondern auch von unseren Vätern, <BR> ... und von unseren Vätern Vätern, <BR> ... und von unseren Vätern Vätern Vätern! </BLOCKQUOTE> <PRE> Wichtigstes Ziel der VVJ: Erringung der Weltherrschaft ========================= innerhalb der nächsten 14 Tage. </PRE> <HR> INTERNET-SEITEN - SELBST GEMACHT SEITE 11 <ADRESS> Brian Kohn genannt Brian von Nazareth <BR> 33 n. Chr. </ADRESS> </BODY> Weitere logische Textelemente dienen insbesondere der Formatierung von Worten. Folgende Tags stehen Ihnen zur Verfügung: − Hervorhebungen: <EM> und </EM> für emphaized allg. kursiv − Fettdruck: <STRONG> und </STRONG> − Zitate: <CITE> und </CITE> allg. kursiv − Tastatureingaben: <KBD> und </KBD> für Text, der eine Tastatureingabe darstellt soll, i. allg. nichtproportionale Schrift − Buchstabenmuster: <SAMP> und </SAMP> für Zusammenstellungen von Buchstabenmustern, i. allg. Schreibmaschinenschrift − Variablen: <VAR> und </VAR> für Text, der eine Variable darstellt soll, i. allg. kursiv − Code: <CODE> und </CODE> für Text, der einen Code darstellt soll, i. allg. nichtproportionale Schrift − Blinkende Schrift: <BLINK> und </BLINK> Physische Texteigenschaften Physische Eigenschaften werden von allen Browsern gleich dargestellt. Sie haben die Wahl zwischen − Fettdruck: <B> und </B> für bold face − kursive Schrift: <I> und </I> für italic − Schreibmaschinenschrift: <TT> und </TT> für tele type − zentrierte Schrift: <CENTER> und </CENTER> INTERNET-SEITEN - SELBST GEMACHT SEITE 12 − Schriftgröße: <FONT> und </FONT> Sie benötigen das Attribut SIZE für die Angabe der Schriftgröße. Dabei können Sie entweder eine Zahl zwischen 1 und 7 verwenden oder durch Voranstellen von + oder - zur Zahl eine relative Änderung der Größe erreichen. Innerhalb des HTML 3.0 Standard gibt es einige interessante Erweiterungen, die aber nicht von allen Browsern unterstützt werden. Dazu gehören: − <BIG> und </BIG> für etwas größere Schrift − <SMALL> und </SMALL> für etwas kleinere Schrift − <SUB> und </SUB> für verkleinerte, tiefgestellte Schrift − <SUP> und </SUP> für verkleinerte, hochgestellte Schrift Folgendes Beispiele zeigt eine mögliche (nicht unbedingt sinnvolle) Anwendung: <BODY> <FONT SIZE=6> <CENTER> Eine Einführung in physikalische Formeln </CENTER> </FONT> <P> Ich präsentiere Ihnen <I>exklusiv</I> einige <BIG>naturwissenschaftliche</BIG> Formeln und deren Bedeutung. <P> <B>Grundgesetze:</B> <BR> <TT> Newtonsches Grundgesetz. <I>F = m <SUP>.</SUP> a</I> </TT> <BR> <TT> Energieerhaltungssatz... <I>E<SUB>kin</SUB> + E<SUB>pot</SUB> = const</I> </TT> </BODY> Anker und Verweise Die Besonderheit von Hypertext ist, auf andere Textstellen oder Texte verweisen zu können. Um in Ihren Text solche Verweis zu erzeugen und aufzunehmen, benötigen Sie Anker. Das Ankerelement besteht aus den Tags <A> und </A>. Der Anfangs-Tag benötigt immer ein Attribut. INTERNET-SEITEN - SELBST GEMACHT SEITE 13 Verweise innerhalb eines Dokuments Um innerhalb eines Dokuments auf eine Textstelle einen Verweise zu erzeugen, müssen Sie diese Textstelle natürlich besonders markieren. Das Markieren erfolgt dabei mit dem Attribut NAME. Das Attribut NAME benennt den Zielpunktes eines Verweises innerhalb eines Dokumentes, also z. B.: Das ist ein <A NAME="ziel"> Zielpunkt </A> In diesem Beispiel heißt der (interne) Verweisname „ziel“. Der Betrachter der Seite würde beim Ausführen des (noch nicht vorhandenen) Verweises zu der Zeichenkette „Zielpunkt“ gelangen. Der eigentliche Verweis zu einem Zielpunkt erfolgt mit HREF. Für den Verweis innerhalb eines Dokumentes müssen Sie dem Namen des Zielpunktes ein Doppelkreuz voranstellen. Also lautet ein Verweis auf den obigen Zielpunkt: Hier gehts zum <A HREF="#ziel"> Zielpunkt </A> Verweise auf andere HTML-Dokumente Möchten Sie einen Verweis auf ein andere Internet-Seite, dann schreiben Sie anstelle des Zielpunktes einfach die Adresse der Seite hin, also z. B.: Hier gehts zu <A HREF="http://www.yahoo.com/">Yahoo</A> Befindet sich die Seite im gleichen Verzeichnis, wie die aktuelle, so brauchen Sie nur den Namen der Seite anzugeben. Muß vorher ein Verzeichnis gewechselt werden, so können Sie dies ganz normal über die Pfadangabe erreichen, also z. B.: So kommt man auf die <A HREF="page.htm"> Seite </A>, so in den <A HREF="clip\page.htm"> Unterordner </A>, und so in den anderen <A HREF="\ort\page.htm">Ordner </A> Verweise auf Textstellen in anderen HTML-Dokumenten Hierfür gelten die gleichen Gesetze wie für den „normalen“ Verweis, nur daß Sie zusätzlich noch die Textstelle mit einer Raute (#) angeben müssen, also z. B.: Hier gehts zum <A HREF="ordner\page.htm#ziel">Ziel </A> Die Darstellung eines Verweises erfolgt vom Browser abhängig, i. allg. wird der Verweistext in einer andere Farbe und Unterstrichen dargestellt. Im InternetJargon sagt man statt Verweis auch Link. Ich präsentiere Ihnen hier <A HREF="#info"> Informationen </A> und <A HREF="http://www.uni-stuttgart.de/Wetter/wetter.html"> aktuelle Meteosat-Wetterbilder </A> <P> <A NAME="info"> <B>Informationen </B></A> <P> Pilatus alter Freund S. Longus ist heute eingetroffen! <P> <H4>Hinweis</H4> Die Volksfront von Judäa plant demnächst einen Überfall auf Pilatus Palast. INTERNET-SEITEN - SELBST GEMACHT SEITE 14 Verweise auf andere Internet-Dienste Sie können mit den meisten Browsern auch andere Internet-Dienste nutzbar machen. Im HTML-Dokument muß dafür nur die Stelle „http://“ durch die Referenz des entsprechenden Dienstes ausgetauschte werden. Sie können auf folgende Dienste zugreifen: • Gopher: <A HREF="gopher://www.irgendwer.ort/"> Gopher </A> • FTP: <A HREF="ftp://ftp.irgendwer.ort/"> FTP </A> Verwenden Sie anstelle eines WWW-Browser besser ein FTP-Programm, da diese schneller sind. ) • News: <A HREF="news:gruppe.rubrik.thema"> News </A> • Telnet: <A HREF="telnet://ich@server.ort"> Telnet </A> Vor dem Klammeraffen muß Ihre Kennung (Login) stehen! • Mail: <A HREF="mailto:ich@server.ort"> Mail </A> INTERNET-SEITEN - SELBST GEMACHT SEITE 15 Bilder, Farbe, Video und Sound Das WWW wurde gerade aufgrund seiner Grafik- und multimedialen Fähigkeiten berühmt. Wir wollen nun die Tür zu diesem Bereich des HTML aufreißen, nicht aber ohne eine Warnung. Große und hochauflösende Bilder und Grafiken, sowie Video-, Sound- und Multimediadateien beanspruchen viel Platz und sind sehr groß. Bei der Übermittlung der Daten über das Internet verstopfen gerade diese immer wieder die Leitungen. Der Aufbau der InternetSeite geht bei großen Grafiken nur sehr langsam von statten, das schreckt dann viele Internet-Server ab. Der Verweis auf Grafiken, Bilder, Video und Sound Die meisten Browser sind heute in der Lage, Bilder und Videos anzeigen und Sound abspielen zu können. Dabei wird entweder auf einen internen Viewer/Player oder einen externen, nachladbaren zurückgegriffen. Falls der Browser über keinen Viewer verfügt, so bietet er an, die Datei auf der Festplatte zu speichern. Als Grafik-Formate, die sofort angezeigt werden können, haben sich im Internet Dateien vom Typ .gif, .jpg und .xbm durchgesetzt. Videos liegen entweder im MPEG (.mpg), AVI (.avi) oder Quicktime-Format (.mov) vor. Soundformate sind typischerweise .au, .midi und .wav. Wenn Sie auf ein Objekt verweisen möchten, dann gehen Sie wie bei einem Textverweis vor. Allerdings müssen Sie anstelle des Dokumentennamen nun den der entsprechenden Datei angeben, also z. B.: Hier gibts ein <A HREF="bild.gif"> Bild. </A> Inline-Grafiken Inline-Grafiken sind Bilder, die im Dokument enthalten sind und vom Browser auch angezeigt werden. Sie können auf die Formate .gif, .jpg und .xbm zurückgreifen. Der Tag zum Einbinden der Bilder lautet: <IMG SRC="bild.typ"> Erstellen Sie eine Seite mit folgenden BODY! (Sie brauchen dazu ein Bild!) <H1> Bilder auf der Seite </H1> Hier kommt ein Bild <IMG SRC="Fernsehe.gif"> ... und hier wieder Text! Betrachten Sie diese Seite mit einem Browser! INTERNET-SEITEN - SELBST GEMACHT SEITE 16 Sie sehen, das Bild wird nicht auf einer separaten Zeile aufgebaut, sondern es steht mitten im Text. Es wird also wie normaler Text behandelt und bedarf eines <P> für einen eigenen Absatz. GIF-Bilder können einer besonderen Behandlung unterliegen. Es ist nämlich möglich, sie transparent bezüglich der Hintergrundfarbe zu machen und sie geschachtelt zu speichern, d. h. das Bild wird beim Laden erst grob und dann immer feiner dargestellt. Um Bilder so zu behandeln, können Sie das SharewareProgramm Paint Shop Pro benutzen. Die Transparenz stellen Sie im Punkt „Option“ des Menüs speichern ein. Die Verschachtelung erreichen Sie durch Abspeichern des Bildes im GIF-89a-Interlaced-Format. Es existieren einige sehr nützliche Attribute für die Beziehung zwischen Bild und Text. • ALT="blablabla" Falls das Anzeigen der Grafik im Browser deaktiviert wurde, erscheint anstelle der Grafik alternative der angegebene Text, also z. B.: <IMG SRC="Fernsehe.gif" ALT="Bild eines Fernsehers"> • ALIGN=TOP Steht das Bild inmitten einer Textzeile, so wird dieser an der oberen Bildkante erscheinen. • ALIGN=MIDDLE Steht das Bild inmitten einer Textzeile, so wird dieser in der Mitte der Bildkante erscheinen. • ALIGN=BOTTOM Steht das Bild inmitten einer Textzeile, so wird dieser an der unteren Bildkante erscheinen. • ALIGN=LEFT Soll der Text rechts am Bild vorbei fließen, so verwenden Sie diese Einstellung. INTERNET-SEITEN - SELBST GEMACHT SEITE 17 • ALIGN=RIGHT Soll der Text links am Bild vorbei fließen (Bild ist dann am rechten Bildschirmrand), so verwenden Sie diese Einstellung. • HSPACE=pixel Dieser neue Tag definiert den horizontalen Abstand der Grafik zu den umgebenden Objekten. • VSPACE=pixel Dieser neue Tag definiert den vertikalen Abstand der Grafik zu den umgebenden Objekten. • WIDTH=pixel Dieser neue Tag definiert den Breite der Grafik. • HEIGHT=pixel Dieser neue Tag definiert den Höhe der Grafik. Textfarbe und Hintergrundbilder Obwohl nicht Bestandteil von HTML 2.0 kann mittlerweile fast jeder Browser den Text farbig oder den Hintergrund mit einem Bild ausfüllend gestalten. Dazu müssen Sie im <BODY>-Tag ein Attribut einfügen, welches die Farbe oder den Pfad zum Bild angibt. Wenden wir uns zunächst der Farbe zu. Das Attribut BGCOLOR="farbe" legt die Hintergrundfarbe fest. Dabei muß „farbe“ in der Form #rrggbb eingegeben werden, wobei rr, gg und bb die hexadezimal codierten Rot-, Grün- und Blauwerte des Farbtons sind. So liefert z. B. der Tag <BODY BGCOLOR="#ffffff"> einen weißen Hintergrund. Falls Sie für eine bestimmte Farbe die entsprechende Farbcodierung suchen, helfen meist Grafikprogramme wie etwa COREL Draw oder Paint Shop Pro. Die Veränderung der Hintergrundfarbe zieht häufig auch die Veränderung der Textfarbe nach sich. Hierfür können Sie die Attribute TEXT, LINK, VLINK und ALINK ebenso wie BGCOLOR verwenden. Dabei ändern diese Attribute die Text, die Hyperlink-, die benutzte Hyperlink- und die gerade aktive Hyperlinkfarbe. Das Einbinden einer Hintergrundgrafik ist sehr einfach. Sie müssen den BODYTag nur um das Attribut BACKGROUND="bild.gif" erweitern. Verwenden Sie bitte kleine Bilder, da diese sowieso gekachelt dargestellt werden. Außerdem sollten Sie überprüfen, ob das Bild nicht vielleicht den Text „unterdrückt“. Greifen Sie deshalb auf Hintergrundbilder zurück, die nicht stark vielfarbig oder aggressiv sind. Die beiden folgenden Screenshots zeigen eine Seite mit Hintergrundfarbe und eine mit Hintergrundbild. INTERNET-SEITEN - SELBST GEMACHT SEITE 18 Klickbare Bilder Es gibt zwei unterschiedliche Arten von „Clickable Images“. In der einfacheren Variante wird anstelle des Ankers ein Bild eingefügt. Sie schreiben also nicht Das ist ein <A HREF="test.html">Verweis</A> sondern klicken Sie <A HREF="test.html"><IMG SRC="bild.gif"></A> Somit ist es möglich kleine Schaltflächen auf einer Seite einzurichten, etwa um eine andere zu erreichen. In der zweiten Möglichkeit werden beim Anklicken verschiedener Bereiche eines Bildes unterschiedliche Aktionen ausgeführt. Um eine solche Seite zu erstellen benötigen Sie zum einem das Attribut ISMAP und zum anderen ein CGI-Skript. Diese Skripts sind kleine plattformspezifische Programme, die sowohl Ein- als auch Ausgaben steuern können. In obigen Fall benötigt man ein Skript, welches die Koordinaten der Anklickposition im Bild liefert. Auf CGI-Skripts wird weiter unten eingegangen! Die Befehlszeile für ein klickbares Bild lautet: <A HREF="cgi-bin/map"> <IMG SRC="bild.gif" ISMAP> </A> Aufruf des CGI-Skripts angezeigtes Bild notwendiges Attribut Falls Sie keinen Zugang zu CGI-Skripts haben, so können Sie die neuen Tags <MAP> und <AREA> verwenden. Allerdings unterstützten bislang nur Netscape und Microsoft diese Tags! Um ein klickbares Bild in Ihr HTMLDokument einzufügen, müssen Sie per <MAP> die Karte mit Namen definieren. Anschließend unterteilen Sie das Bild mit <AREA> in die anklickbaren Zonen. Dabei haben Sie die Wahlmöglichkeit zwischen den Formen (SHAPE) Rechteck (RECT), Vieleck (POLY) und Kreis (CIRCLE). Dieser Angabe folgen die Koordinaten der Form. Letztlich wird das Bild via <IMG> geladen. Dabei sollten Sie die neuen Attribute ALIGN (Ausrichtung), WIDTH (Bildbreite), HEIGHT (Bildhöhe) und BORDER (Rahmen) verwenden. Außerdem muß das INTERNET-SEITEN - SELBST GEMACHT SEITE 19 Attribut USEMAP gesetzt werden. Als Beispiel sei ein farbig segmentierter Kreis zu erzeugen: <HTML> <HEAD> <TITLE> Klickbares Bild </TITLE> </HEAD> <BODY BGCOLOR="#ffffff"> <MAP NAME="kreis"> <AREA SHAPE=POLY COORDS="34,28,96,1,97,94" HREF="dok1.htm"> <AREA SHAPE=POLY COORDS="104,3,162,29,104,92" HREF="dok2.htm"> <AREA SHAPE=POLY COORDS="168,32,197,99,105,99" HREF="dok3.htm"> <AREA SHAPE=POLY COORDS="195,106,173,169,106,106" HREF="dok4.htm"> <AREA SHAPE=POLY COORDS="103,108,167,176,101,207" HREF="dok5.htm"> <AREA SHAPE=POLY COORDS="99,106,96,205,34,177" HREF="dok6.htm"> <AREA SHAPE=POLY COORDS="2,103,93,103,29,172" HREF="dok7.htm"> <AREA SHAPE=POLY COORDS="29,34,89,97,3,96" HREF="dok8.htm"> </MAP> <IMG SRC="kreis.gif" ALIGN=LEFT WIDTH=200 HEIGHT=208 BORDER=0 USEMAP="#kreis"> </BODY> </HTML> Tabellen Tabellen sind eigentlich Teil des 3er Standards, werden aber von den meisten Browsern korrekt unterstützt. Eine Tabelle liegt zwischen den Tags <TABLE> und </TABLE>. Innerhalb dieser Tags dürfen Sie • eine Tabellenüberschrift mit <CAPTION> und </CAPTION> • beliebig viele Tabellenzeilen mit <TR> und </TR> und innerhalb der Zeilen • beliebig viele Zellen, die in <TH> und </TH> für Überschriftszellen oder <TD> und </TD> für normale Zellen aufgeteilt sind, einfügen. Die Tabelle hat so viele Zeilen, wie es <TR>-Einträge gibt. Die Spaltenzahl ergibt sich aus der maximalen Anzahl von <TH>- bzw. <TD>-Elementen einer Zeile. Die Breite der Tabelle und Zellen wird automatisch vom Browser bestimmt. Diese können Sie aber auch mit dem Attribut WIDTH festlegen. INTERNET-SEITEN - SELBST GEMACHT SEITE 20 Möchten Sie eine gerahmte Tabelle, so fügen Sie das Attribut BORDER an den <TABLE>-Tag an. Schauen Sie sich doch einfach folgendes Beispiel an. <TABLE BORDER> <CAPTION> Pilatus Strafregister </CAPTION> <TR> <TH> Vergehen </TH> <TH> Täter ohne Vorstrafen </TH> <TH> Täter mit Vorstrafen </TH> </TR> <TR> <TD> Belästigung </TD> <TD> Erdolchung </TD> <TD> Steinigung</TD> </TR> <TR> <TD> Überfälle </TD> <TD> Kreuzigung </TD> <TD> Kreuzigung </TD> </TR> </TABLE> Die Browser-Darstellung ist dann folgende: Innerhalb des Tabellentextes sind alle HTML-Formatierungen erlaubt, also auch <P> und <BR>. Der Browser akzeptiert die Tabelle übrigens auch, wenn die Zellen-End-Tags </TD> fehlen. Für komplexe Tabellen bieten sich die Attribute COLSPAN und ROWSPAN an. Mit ihnen ist es möglich, einzelne Zellen über mehrere Spalte oder Zeilen auszudehnen. Außerdem kann das ALIGN-Attribut (LEFT, CENTER, RIGHT) zur Ausrichtung des Zeilentextes genutzt werden. Und so lautet der etwas verbesserte HTML-Text INTERNET-SEITEN - SELBST GEMACHT SEITE 21 <TABLE BORDER> <CAPTION> <B> Pilatus Strafregister <B> </CAPTION> <TR> <TH ROWSPAN=2> Vergehen </TH> <TH COLSPAN=3> Strafe </TH> </TR> <TR> <TH> Täter ohne Vorstrafen </TH> <TH> Täter mit Vorstrafen </TH> </TR> <TR ALIGN=RIGHT> <TD> Belästigung </TD> <TD> Erdolchung </TD> <TD> Steinigung</TD> </TR> <TR ALIGN=RIGHT> <TD> Überfälle </TD> <TD> Kreuzigung </TD> <TD> Kreuzigung </TD> </TR> </TABLE> Einige ganz interessante optische Gestaltungstricks sind mit Tabellen möglich. Betrachten Sie doch mal folgenden Screenshot und den zugehörigen Quelltext. In ihm finden Sie eine vierspaltige Tabelle, die den Text in den Spaltensatz bringt. INTERNET-SEITEN - SELBST GEMACHT SEITE 22 <BODY BACKGROUND="yellow_w.gif" TEXT="#800000"> <CENTER> <FONT SIZE=6> Wissenswertes zum Betriebssystem MS-DOS </FONT> <BR> <FONT SIZE=5> Die Entwicklung des berühmten Betriebssystems </FONT> <P> </CENTER> <TABLE> <TR> <TD WIDTH=25% VALIGN=TOP ALIGN=LEFT> <IMG SRC="finanzen.gif" ALIGN=LEFT> </TD> <TD WIDTH=25% VALIGN=TOP ALIGN=LEFT> <FONT SIZE=3> MS-DOS hat eine bewegte [...] verraten. </FONT> </TD> <TD WIDTH=25% VALIGN=TOP ALIGN=LEFT> <FONT SIZE=3> Die Konkurrenten von Bill Gates [...] gesetzt. </FONT> </TD> <TD WIDTH=25% VALIGN=TOP ALIGN=LEFT> <FONT SIZE=3> Dieser Computer [...] MS-DOS-kompatibel sind. </FONT> </TD> </TR> </TABLE> </BODY> INTERNET-SEITEN - SELBST GEMACHT SEITE 23 Sie sehen, hier wurde eine vierspaltige Tabelle angelegt. Die erste Spalte enthält eine Grafik, die restlichen drei den Spaltentext. Frames Frames sind „der letzte Schrei“ in der HTML-Welt und eine Entwicklung von Netscape. Deshalb kann z. Z. auch nur der Netscape-Browser Frames darstellen. Da aber einige Anbieter bereits mit Frames arbeiten (z. B.: Homepage der TU Dresden), sollen diese neuen Tags vorgestellt werden. Frames teilen ein Fenster in mehrere unabhängige Bereiche auf, in denen jeweils eigene HTML-Dokumente angezeigt werden können. Sie benötigen dazu eine Frame-Startseite. Diese enthält anstelle des <BODY>-Tags einen FRAMESETBereich, in welchem die eigentlichen FRAME-Tags stehen. Um eine Vorstellung zu erhalten, schauen Sie sich bitte folgende Frame-Startseite und deren Netscape-Darstellung an. <HTML> <HEAD> <TITLE> Eine Frame-Test-Seite </TITLE> </HEAD> <FRAMESET ROWS="60,*"> <FRAME SRC="titel.htm" NAME="titel" NORESIZE SCROLLING=NO> <FRAMESET COLS="100,*"> <FRAME SRC="steuer.htm" NAME="steuermodul" NORESIZE SCROLLING=NO> <FRAME SRC="text.htm" NAME="mainframe"> </FRAMESET> </FRAMESET> </HTML> Mit dem Tag <FRAMESET> legen Sie fest, wieviele Frames einrichten wollen. Dabei dürfen Sie entweder das Attribut ROWS, welches die Anzahl der Zeilen in Pixel bestimmt, oder das Attribut COLS, für die Anzahl der Pixelspalten, INTERNET-SEITEN - SELBST GEMACHT SEITE 24 benutzen. Wenn Sie drei horizontale Frames anlegen wollen, so lautet Ihr HTML-Befehl: <FRAMESET ROWS="100,60,*"> D.h., der erste Frame ist 100 Pixel hoch, der zweite 60 und der dritte nimmt den restlichen Platz ein, gekennzeichnet durch das Stern-Symbol „*“. Nachdem dem Browser die Frame-Aufteilung bekannt ist, wird durch den Tag <FRAME> die anzuzeigende Seite und weitere Fenstereigenschaften festgelegt. Folgende Attribute können bzw. müssen vergeben werden: Attribut Erläuterung SRC="quelle.htm" • notwendig • bezeichnet die anzuzeigende Seite NAME="hauptframe " • notwendig NORESIZE • optional • gibt dem Frame einen Namen • legt fest, daß der Rahmen nicht verschoben werden darf SCROLLING=YES • optional • legt fest, ob im Frame Scrollbars erscheinen • kann die Werte NO, YES oder AUTO haben MARGINWIDTH=5 • optional • legt die Dicke des linken und rechten Rahmens fest MARGINHEIGHT=7 • optional • legt die Dicke des oberen und unteren Rahmens fest Betrachten Sie nochmals das Eingangsbeispiel. Hier wurde eine Verschachtelung vorgenommen, so daß die zweite Framezeile nochmals eine Unterteilung in zwei Spaltenframes erfährt. Interessanteste Anwendung für Frames ist die Steuerleiste, wie im Beispiel im linken Frame zu erkennen. Damit bei Ausführung des Links in diesem Fenster sich nicht der Inhalt des Steuer- sondern der des Hauptfensters ändert, muß der Linkbefehl erweitert werden. Sie ergänzen den Link jeweils um das Attribut TARGET, welcher das Ziel für die Anzeige der Linkseite nennt, also: <A HREF="filme.htm" TARGET="mainframe">Die Filme</A> Somit wird die Seite filme.htm im Fenster mit dem Name mainframe angezeigt. Wie bereits erwähnt, unterstützen noch sehr wenige Browser das FrameKonzept. Das Problem ist: da Browser ihnen unbekannte Tags ignorieren, bleiben Frame-Seiten für Nicht-Frame-Browser leer. Um dies zu vermeiden hat Netscape den Tag <NOFRAMES> und </NOFRAMES> eingeführt. Alles was zwischen diesen beiden Tags steht, ignoriert ein framefähiger Browser. Somit INTERNET-SEITEN - SELBST GEMACHT SEITE 25 läßt sich leicht ein Hinweis auf eine andere Seite oder gar eine andere Startseite einfügen. Wird von einer Frame-Seite auf eine Nicht-Frame-Seite gelinkt, so muß dem Browser mitgeteilt werden, daß ob sofort keine Frames mehr anzuzeigen sind. Dies erfolgt mittels Attribut TARGET="_top" in der Anker-Anweisung <A>. Formulare Formular sind ein wichtiger Bestandteil von HTML 2.0. Damit ist es nun möglich, interaktiv auf Dokumente zu reagieren. Einfache Formulare finden sich häufig im eMail-Bereich, aber auch Bestellungen und Umfragen lassen sich einfach mit Formularen gestalten. Wichtig ist, daß für die Auswertung von Formularen ein CGI-Skript vorhanden sein muß. So ein Skript ist Ihnen ja bereits bei den klickbaren Bildern begegnet. An dieser Stelle sollen nur die Formular-Elemente im Mittelpunkt stehen, nicht aber die Auswertung! Ein Formular-Bereich wird immer zwischen den Tags <FORM> und </FORM> eingeschlossen. Innerhalb des Bereichs werden nun verschiedene Elemente, wie etwa Auswahllisten, Optionsfelder u. ä. gestellt. Zum Tag <FORM> existiert das notwendige Attribut ACTION. Es zeigt auf das CGI-Skript, welches die Auswertung der Daten vornimmt. Ein weiters Attribut lautet METHOD. Ihm kann entweder der Wert GET oder POST zugeordnet sein. Die GET-Methode ist für kurze Formular-Mitteilungen geeignet, POST hingegen für längere. Betrachten Sie zunächst folgendes Dokument und seine Browseransicht. <HTML> <HEAD> <TITLE> Beispielformular </TITLE> </HEAD> <BODY> <H1> Einkaufsformular </H1> Füllen Sie dieses Formular bitte vollständig aus. <FORM METHOD=POST ACTION="test.sh"> <P> Vorname:<INPUT NAME="vname" SIZE=20> Nachname:<INPUT NAME="nname" SIZE=20> <P> Adresse:<BR> <TEXTAREA NAME="adresse" ROWS=5 COLS=60> </TEXTAREA> <HR> Wüschen Sie die Zusendung des Katalogs per: <SELECT NAME="zusendung"> <OPTION>Post <OPTION>DPD <OPTION>UPS <OPTION>selbstabholen INTERNET-SEITEN - SELBST GEMACHT SEITE 26 </SELECT> <BR> Senden Sie mir Ihren Katalog <INPUT TYPE=SUBMIT VALUE="abschicken"> <BR> Nein! Ich will keinen Katalog mehr. <INPUT TYPE=RESET VALUE="nimmermehr"> </FORM> </BODY> </HTML> Sie sehen, daß sich mit diesen wenigen Elementen ein doch ganz umfangreiches Formular erstellen läßt. Doch wenden wir uns den einzelnen Befehlen zu. Das INPUT - Element Das wohl wichtigste Element eines Formulars ist INPUT. Jedem INPUTElement muß mit NAME ein Variablenname zugeordnet werden. Dieser ist für die Verarbeitung durch das CGI-Skript wichtig. Je nach Attribut lassen sich Textflächen, Auswahllisten, Kontrollboxen, Schaltflächen oder Optionsfelder erstellen. Die Auswahl dieser Möglichkeiten erfolgt über das Attribut TYPE. Es kann folgende Werte annehmen: TEXT Anzeige eines einfachen Textfeldes. Mögliche Attribute sind: SIZE bestimmt die Feldbreite MAXLENGTH bestimmt die maximale Eingabelänge VALUE bestimmt den voreingestellten Text Name: <INPUT TYPE=TEXT NAME="name"> Alter: <INPUT TYPE=TEXT NAME="alter" SIZE=2 MAXLENGTH=2> PASSWORD INTERNET-SEITEN - SELBST GEMACHT SEITE 27 Anzeige eines einfachen Textfeldes mit der Einschränkung, das statt Text nur Sternchen geschrieben werden. (Hinweis: Die Übertragung kann leicht abgefangen werden. Deshalb keine geheimen Dinge übermitteln!) Mögliche Attribute sind: SIZE bestimmt die Feldbreite MAXLENGTH bestimmt die maximale Eingabelänge VALUE bestimmt den voreingestellten Text <INPUT TYPE=PASSWORD NAME="geheim" SIZE=8> CHECKBOX Erzeugt ein Kontrollkästchen. Es existiert ein Attribut. CHECKED Kontrollkästchen wird bereits aktiviert angezeigt <INPUT TYPE=CHECKBOX NAME="katalog" CHECKED> Katalog <INPUT TYPE=CHECKBOX NAME="angebot"> Angebot RADIO erzeugt Optionsschalter (genau eins aus vielen!). Um eine Gruppe von Schaltern zu erzeugen, müssen Sie immer den gleichen Namen und unterschiedliche VALUE-Wete verwenden. CHECKED für genau ein Optionsfeld aus der Gruppe erlaubt VALUE bestimmt den Wert der Variable Wähle aus <INPUT TYPE=RADIO VALUE="kreuz" NAME="op" CHECKED> Kreuzigung oder <INPUT TYPE=RADIO VALUE="stein" NAME="op"> Steinigung IMAGE verwendet ein klickbares Bild zum Absender der Information SRC bestimmt die Bildquelle und muß angegeben werden <INPUT TYPE=IMAGE SRC="bild.gif"> SUBMIT erzeugt das Button zum Absenden der Informationen, es wird kein NAME-Attribut benötigt VALUE bestimmt den Text auf dem Button RESET erzeugt das Button zum Löschen aller Informationen des Formulars, es wird kein NAMEAttribut benötigt VALUE bestimmt den Text auf dem Button Das SELECT - Element Eine erweiterte Möglichkeit der Auswahl von Elementen aus einer Liste bietet das SELECT-Element. Es werden zwischen den SELECT-Elementen die Auswahlelemente durch den Bezeichner <OPTION> gekennzeichnet. Schauen Sie sich dazu auch noch einmal das einführende Beispiel an. An das SELECTElement können bzw. müssen folgende Attribute angehängt werden. INTERNET-SEITEN - SELBST GEMACHT Attribut NAME MULTIPLE SIZE Erläuterung − notwendig − bezeichnet die Selektgruppe − optional − ermöglicht das Markieren mehrerer Objekte − optional − gibt die Anzahl der darstellbaren Punkte wieder HTML-Code SEITE 28 Browser-Darstellung <SELECT NAME="Strafen"> <OPTION> Kreuzigung <OPTION> Steinigung <OPTION> Erdolchung <OPTION> Haft </SELECT> <SELECT NAME="Strafe" MULTIPLE> <OPTION> Kreuzigung <OPTION> Steinigung <OPTION> Erdolchung <OPTION> Haft </SELECT> <SELECT NAME="Strafe" SIZE=4> <OPTION> Kreuzigung <OPTION> Steinigung <OPTION> Erdolchung <OPTION> Haft </SELECT> Auch das Element OPTION kann zwei weiter Attribute besitzen. Durch die zusätzliche Angabe SELECTED wird der nachfolgende Wert zum voreingestellten. Das Attribut VALUE weißt der Option einen neuen Namen zu, welcher dann durch das CGI-Skript verarbeitet wird. Also z. B.: Bitte wählen Sie eine Ermäßigung aus: <SELECT NAME="ermaessigung"> <OPTION> BahnCard <OPTION VALUE="mf"> Mitfahrer sparen 50% <OPTION VALUE="gat"> Guten-Abend-Ticket <OPTION SELECTED VALUE="sw"> Schönes Wochenende </SELECT> Das TEXTAREA - Element Um den Nutzer die Möglichkeit zu geben, auch längere Textpassagen einzugeben, verwenden Sie das Element TEXTAREA. In dem dadurch aufgemachten Eingabefeld darf der Nutzer mehr als 1024 Zeichen schreiben. Alle Zeilenumbrüche werden übrigens mit übernommen und dem CGI-Skript zur Verfügung gestellt. Zwischen dem Anfangs- und End-Tag darf Text platziert werden, welches als Vorgabe verwendet wird. Attribute des Elements sind neben NAME auch COLS, für die Angabe der Anzahl der Spalten und ROWS für die Angabe der Zeilenzahl. Die untenstehende HTML-Zeile bewirkt dann folgende Anzeige. <TEXTAREA NAME="meinung" COLS=40 ROWS=4> Hiermit erkläre ich den Eintritt INTERNET-SEITEN - SELBST GEMACHT SEITE 29 in die Volksfront von Judäa. Mein Name soll sein Brian, was soviel heißt wie Brian! </TEXTAREA> CGI-Skripts Ein CGI-Skript ist ein Programm, welches auf einem Server installiert ist (i. d. R. im Verzeichnis cgi-bin) und von jedem WWW-Nutzer aufgerufen werden kann. Ein solcher Aufruf unterscheidet sich nicht von dem einer HTML-Seite, er kann z. B. für ein Skript namens test so aussehen: http://www.irgendwer.ort/cgi-bin/test http://www.irgendwer.ort/cgi-bin/test/beispiel http://www.irgendwer.ort/cgi-bin/test?anfrage Dem Server muß in einer Konfigurationsdatei mitgeteilt werden, wo diese speziellen Programme stehen, so daß der Browser den Ruf eines Skripts nicht als Laden einer Seite interpretiert. Dem CGI-Skript werden von außen, z. B. aus einem Formular, Daten zugeführte, welches es dann verarbeitet. Das Skript gibt entweder andere Daten aus oder weist den Weg zu einer HTML-Seite. CGI steht übrigens für Common Gateway Interface und repräsentiert den Standard, der die Parameter und Systemumgebung definiert, in der der Aufruf des Programms stattfindet und nicht das Programm selbst. CGI-Skript können mit den unterschiedlichsten Programmiersprachen erstellt werden. Typischerweise wird dazu PERL verwendet, aber auch BASIC und PASCAL sind geeignet, selbst eine DOS-Batch-Datei kann ein mögliches Programm sein. Die Ausgaben Ein CGI-Skript kann zwei verschiedene Arten von Ausgaben produzieren: „Richtige“ Daten oder sog. Redirection. Diese Ausgabe wird unter UNIX einfach auf die „Standardausgabe“ geschrieben; unter DOS oder Windows setzt der WWW-Server, bevor er das Skript aufruft, die OUTPUT_FILE, und das Skript muß seine Ausgabe dann in die dort genannte Datei schreiben. Bei Redirection erzeugt das Skript selbst keine Daten. Es entscheidet nur, wohin der Nutzer verwiesen wird. Dieser Verweis kann entweder eine lokale Seite oder eine vollständige URL sein. Bei einer lokalen Seite sucht der Server sofort die gewünschte Seite heraus und sendet sie dem Browser zum laden. Solche lokalen Redirections werden z. B. für klickbare Bilder eingesetzt. Wird aber eine vollständige URL zurückgegeben, so schickt er diese nur an den Browser. Ein Skript, das eine Redirection erzeugen will, muß genau zwei Zeilen ausgaben: Die erste Zeile muß „LOCATION:“, gefolgt von einem Leerzeichen und der neuen URL bzw. Pfadangabe enthalten, und die zweite muß leer sein. Die folgenden Beispiele sind Skripts in DOS (Batch) und PERL, die den Benutzer, der es das jeweilige Skript aufruft, automatisch auf die Hauptseite der TU Chemnitz weiterschicken: INTERNET-SEITEN - SELBST GEMACHT PERL-Skript: Batch-Skript: Typ text Subtyp plain html image gif jpeg x-bitmap audio wav, x-wav au x-midi video mpeg quicktime application octet-stream x-zipcompressed SEITE 30 #!/usr/local/bin/perl print ("LOCATION: http://www.tu-chemnitz.de/\n\n"); echo LOCATION: http://www.tu-chemnitz.de/ >%OUTPUT_FILE% echo. >> %OUTPUT_FILE% Wollen Sie beliebige Daten ausgeben, so verkompliziert sich die Ausgabe etwas. Zunächst müssen Sie in der ersten Zeile festlegen, welchem Datentyp die Ausgabe entspricht. Sie haben die Möglichkeit, aus verschiedenen Datentypen zu wählen, je nachdem, um welche Sorte Daten es sich handelt. Die zweite Zeile bleibt wiederum frei und die dritte enthält die eigentlichen Daten. Die Angabe des Datentyps erfolgt in der Form CONTENT-TYPE: typ/subtyp wobei für typ/subtyp eine Bezeichnung aus dem MIME-Standard einzusetzen ist. Für eine HTML-Seite ist „text/html“ zu verwenden. Das folgende Beispiel in UNIX-Shellskript erzeugt eine Seite mit dem aktuellen Datum. #!/bin/sh echo CONTENT_TYPE: text/html echo echo "<HTML><HEAD>" echo "<TITLE>CGI-Beispiel</TITLE>" echo "</HEAD><BODY>" echo "<H1>Aktuelles Datum</H1>" echo "Das aktuelle Datum ist: " date echo "</BODY></HTML>" Die Eingaben Natürlich müssen sich auch Daten in das Skript einlesen lassen, sonst hätten ja die schon besprochenen Formulare keinen Sinn. Für die Eingaben gibt es unterschiedliche Methoden: Wenn man eine URL, die ein Skript ruft, einfach weitere Wörter anhängt, so erhält man einen über das Skript „hinauszeigenden“ Pfad, z. B. für das Skript test die URL http://www.irgendwer.ort/cgi-bin/test/beispiel Die „überschüssigen“ Informationen – in diesem Fall „/beispiel“ – werden vom Server vor Aufruf des Skripts in die Umgebungsvariable PATH_INFO eingetragen. Die so gespeicherten Daten kann nun das Skript auswerten. Folgendes Beispiel realisiert je nach Eingabe eine spezielle Internet-Seite. Zunächst der HTML-Text: Das Begrüßungsskript können Sie auf <A HREF="/cgi-bin/begruess.exe/german">deutsch</A> oder auf <A HREF="/cgi-bin/begruess.exe/english">englisch</A> abrufen. Das zugehörige Skript begruess.exe diesmal als noch zu kompilierendes BASICProgramm: INTERNET-SEITEN - SELBST GEMACHT SEITE 31 ausgabe$ = ENVIRON$("OUTPUT_FILE") pathinfo$ = ENVIRON$("PATH_INFO") OPEN ausgabe$ FOR OUTPUT("PATH_INFO") PRINT #1, "CONTENT-TYPE: text/html" PRINT #1, "" PRINT #1, "<HTML><HEAD><TITLE>"; SELECT CASE pathinfo$ CASE "/german" Print #1, "Begrüßungsskript"; text$ = "Willkommen zur großen CGI-Schau." CASE "/english" Print #1, " Greeting Script"; text$ = "Welcome to our great CGI fair." CASE ELSE Print #1, " Error"; text$ = "Please use /german or /english." END SELECT PRINT #1, "</TITLE></HEAD><BODY>"; PRINT #1, text$; "</BODY></HTML>" CLOSE #1 Neben der Verlängerung der URL durch Anfügen von Text mit einem Slash (/) können Sie auch der Adresse ein Fragezeichen gefolgt von Text verwenden. Der so überschüssige Text wird in die Variable QUERY_STRING geschrieben. Eine feste URL mit dieser Erweiterung kann z. B. so aussehen: Sie könnan in der Datenbank nach "Froschkönig" <A HREF="/cgi-bin/suchprogramm?froschkönig"> suchen lassen.</A> Allerdings macht eine solche Verwendung wenig Sinn. Das FragezeichenVerfahren findet vielmehr in drei anderen Fällen Anwendung, in denen der WWW-Browser von sich aus an einen gegebenen URL ein Fragezeichen und einen Text anhängt: Bei Dokumenten, in deren Kopfabschnitt der Tag <ISINDEX> vorkommt, erlaubt der Browser dem Benutzer die Eingabe eines Suchbegriffs und fordert danach den gleichen URL, gefolgt von Fragezeichen und Suchbegriff, erneut an. Bei <IMG>-Bildern mit dem Attribut ISMAP ruft der Browser den im umgebenden Ankerelement genannten URL mit angehängter Koordinatenangabe auf, sobald der Benutzer mit der Maus an eine Stelle im Bild klickt. Bei HTML-Formularen mit der Methode GET werden die vom Benutzer eingegebenen Daten hinter dem Fragezeichen an den im <FORM>-Tag enthaltenen URL angefügt. Zu CGI-Skript gibt es sicherlich noch eine Menge zu sagen, denn neben den hier beschriebenen Umgebungsvariablen existiert noch eine ganze Liste weiterer. Falls Sie tiefer in die CGI-Programmierung einsteigen wollen, so schlagen Sie doch mal bei F. Ramm: Recherchieren und Publizieren im WWW, S. 209ff. nach! INTERNET-SEITEN - SELBST GEMACHT SEITE 32 Java „Java“ ist ein amerikanischer Slang-Ausdruck für heißen Kaffee und zugleich der Name der Internet-Programmiersprache. Java wurde ab 1990 von der Firma Sun entwickelt, um WWW-Seiten interaktiv gestalten zu können und lehnt sich stark an der Sprache C++ an. Java funktioniert so: 1. Sie schreiben den plattformunabhängigen Java-Quelltext, der vom Typ .java ist. 2. Sie kompilieren diesen Quelltext mit einem plattformabhängigen Compiler und erhalten einen Bytecode, welcher unabhängig von der Plattform und vom Typ .class ist. 3. Sie erstellen eine HTML-Seite mit einem Verweis auf den Bytecode. Dieser Verweis hat folgende Struktur: <APPLET CODE="animation.class" WIDTH=pixel HEIGHT=pixel> </APPLET> Lädt ein Anwender eine solche Internet-Seite, liest der Browser die durch APPLET CODE gekennzeichnete Referenz auf ein Applet mit dem Namen „animation“. Die Ausführung des Programms wiederum obliegt dem plattformabhängigen Interpreter, welcher i. d. R. im Browser integriert ist. JavaScript ist identisch mit Java, wobei der Quelltext jedoch direkt in der HTML-Seite eingebunden und nicht referenziert wird. Damit ist die Bedienung wesentlich einfacher. Allerdings hat die Sache auch einen Haken: Momentan unterstützt nur die neusten Versionen des Netscape Nacigators und des Microsoft Internet Explorers JavaScript! Dennoch sollen Sie hier ein Beispiel kennenlernen, um die Einfachheit zu sehen. Eine Laufschrift in der Statuszeile ist das typisches Beispiel für JavaScript. Betrachten Sie zunächst den Quelltext! <HEAD> <TITLE>Brians Hompage</TITLE> <SCRIPT> <!-nowDate = new Date(); message = " - Willkommen bei Brian!"; version = "Kennen Sie eigentlich schon Pilatus' Freund?"; msec = 300; n = 3; w = self; ctime = 0; head = ""; tail = ""; function scroll_disp() { ctime++; if (ctime < message.length * n) { setTimeout('scroll_disp()', msec); head = message.substring(1, message.length); tail = message.substring(0, 1); message = head + tail; INTERNET-SEITEN - SELBST GEMACHT SEITE 33 w.defaultStatus = message; } else { w.defaultStatus = version; } } function finish() { w.defaultStatus = ""; } --> </SCRIPT> </HEAD> <BODY onLoad="scroll_disp()" onUnload="finish()"> Der JavaScript Quelltext wird zwischen den Tags <SCRIPT> und </SCRIPT> im Kopf des HTML-Dokumentes plaziert. Der Quelltext selbst beginnt mit dem Anfangs-Tag des Kommentars und endet mit dessen End-Tag. Die Schreibweise des Codes in diesem Beispiel mag eingefleischten C++Programmierern nicht gefallen, legt aber die Struktur besser zu Tage. Im Quelltext selbst werden zunächst Variablen und anschließend die beiden Funktionen scroll_disp und finish definiert. Damit diese Funktionen auch ausgeführt werden können, müssen Sie im <BODY>-Tag geladen werden. Dazu stehen Ihnen die Attribute ONLOAD und ONUNLOAD zur Verfügung. Das erste Attribut legt fest, welche Funktion beim Aufrufen der Seite aktiviert wird und das zweite, welche Funktion beim Beenden der Seite aktiviert wird. Letzere Funktion ist in diesem Fall unbedingt notwendig, da sonst die Laufschrift oder die Informationszeile erhalten bleiben würde. Abschließende Gestaltungshinweise Sie haben nun die meisten HTML-Elemente kennengelernt. Natürlich existieren noch weitere, die zum 3er Standard gehören oder firmenspezifisch sind. Diese Tags werden aber noch nicht von einer Großzahl der Browser dargestellt. Als Beispiel seien hier nur die mathematischen Tags oder Frames genannt. Mit ihnen soll es möglich sein, komplexe mathematische Formeln zu schreiben bzw. den Fensterinhalt in mehrere unabhängige Bereiche mit eigenen Scrollbars zu teilen. Da das Internet voll von interessanten und uninteressanten Seiten ist, müssen Sie einiges Tun, um Ihre Seite „zu verkaufen“. Die meisten Internet-Nutzer sind Surfer, die einfach aufs Geratewohl von einer URL zur nächsten kommen. Damit dieser auf Ihrer Seite „stecken bleibt“, sollten Sie folgendes beachten: • Ihrer erste Seite (Homepage) sollte kurz und aussagekräftig sein. • Dokumente, welche den eigentlichen Inhalt enthalten, können ruhig etwas größer, aber gut strukturiert sein. • Nutzen Sie insbesondere bei langen Texten die Möglichkeit der Verwendung von Verweisen. INTERNET-SEITEN - SELBST GEMACHT SEITE 34 • Falls Sie auf ein Nicht-HTML-Dokument verweisen, so geben Sie immer die Größe oder einen Sceenshot des Dokumentes an, da solche Dokument ja „gedownloaded“ werden. • Große Bilder sollte man nicht in der Originalgröße, sondern nur als verkleinertes Bild mit einem Link auf das Original in das Dokument einbinden. • Verwenden Sie immer einen aussagekräftigen, nicht zu lange Titel innerhalb der Tags <TITLE> und </TITLE>, da einige Suchroboter diesen zur Registrierung verwenden. • Halten Sie sich an die HTML-Standards. Nur so können Sie sicher sein, daß Ihre Seiten auch korrekt angezeigt werden. Verwenden Sie keinen Netscape Schnickschnack, da dieser nur vom Netscape-Browser dargestellt werden kann - alle anderen Nutzer sehen nur Kauderwelsch. • Beachten Sie die Anführungszeichen für die Wertzuweisungen an Attribute. Anführungszeichen werden nicht gesetzt, wenn es sich um in HTML fest definiert Werte handelt. • Betrachten Sie Ihre Seiten mit möglichst vielen Browsern, nur so sehen Sie Ungereimtheiten. • Verwenden Sie Links immer so, daß der Text immer einen Sinn ergibt, wenn man alle HTML-Tags entfernt. Ein schlechtes Beispiel ist: Klicken Sie <A HREF="tech.html">hier</A> für eine Beschreibung der technischen Einzelheiten. • Vermeiden Sie die Formulierung „Klicken Sie hier“, besser ist z. B.: Eine <A HREF="tech.html">Beschreibung der technischen Einzelheiten</A> ist ebenfalls verfügbar. • Eine von Hyperlinks übersäte Seite ist unangenehm zu lesen, da die meisten Browser diese Links farbig und unterstrichen darstellen. • Steht hinter dem hervorgehobenen Wort ein Satzzeichen, so ist die in die Hervorhebung mit einzubeziehen. Die gilt auch für Links! • Bei aufeinander aufbauenden HTML-Seiten sollten diese mit Navigationselementen versehen sein, um schnell eine Seite vor oder zurück zu blättern. • Falls Sie Bilder einbinden, so geben Sie immer einen Alternativtext mit ein. Mittlerweile haben viele Nutzer die AutoLoad-Funktion für Bilder abgeschaltet, da es einfach zu lange dauert. • Regelmäßige Aktualisierungen sollten separat kenntlich gemacht werden. • Wenn Sie in Zukunft im Internet surfen und auf eine interessante Seite stoßen, so schauen Sie sich doch mal den Quelltext an. Man kann nur dazulernen. INTERNET-SEITEN - SELBST GEMACHT SEITE 35 Literaturhinweise Internet-Bücher und speziell Bücher zur HTML-Sprache gibt es mittlerweile wie Sand am Meer. Auch das Internet selbst liefert eine Fülle von Informationen zu HTML. Für diese Skript fanden folgende Informationsquellen Verwendung: • Die HTML-Sprache - Eigene WWW-Dokumente erstellen; aus CHIP spezial Anwenderpraxis: Internet für alle, S. 47ff. • Mischa Dippelhofer: Wie schreibe ich ein HTML-Dokument?; aus dem Internet (Email: midi@rz.uni-sb.de). • Andreas Wilhelm, Kai Brauer: Strickmuster - Homepage mit Pfiff; aus c't 1996, Heft 7 S. 198ff. • Martin Goldmann: Homepage mit Bordmitteln - Eigene Homepage mit Wordpad; aus win 6/96 S. 52ff. • Frederik Ramm: Recherchieren und Publizieren in Word Wide Web; Friedr. Vieweg Sohn Verlagsgesellschaft, 1995 • Bernhard Stappan: Java-Applets; aus DOS 7/96 S. 200ff. • Internet-Publishing, PC pro Praxis 7/96 • Boris Theodoroff: Herstellung von Frames; In’side Multimedia 9/96 Index <HEAD> 3 <TITLE> 3 36