Internet-Seiten - selbst gemacht

Transcription

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.
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.
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 &ensp; und für breite Leerzeichen &emsp;. 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 
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">
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">
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.
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
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>
</H2>
<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:
SEITE 9
Sie können Listen auch verschachtelt werden. Hierbei kann zwischen
numerierten und nichtnumerierten Listen gewechselt werden. Das sieht dann so
aus:
<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.
<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>
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>
</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>
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>
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.
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.
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://[email protected]"> Telnet </A>
Vor dem Klammeraffen muß Ihre Kennung (Login) stehen!
• Mail:
<A HREF="mailto:[email protected]"> Mail </A>
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!
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.
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.
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
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">
</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.
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>
</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
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>
</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.
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>
<FONT SIZE=3>
MS-DOS hat eine bewegte [...] verraten.
</FONT>
</TD>
<FONT SIZE=3>
Die Konkurrenten von Bill Gates [...] gesetzt.
</FONT>
</TD>
<FONT SIZE=3>
Dieser Computer [...] MS-DOS-kompatibel sind.
</FONT>
</TD>
</TR>
</TABLE>
</BODY>
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,
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
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
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
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.
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
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:
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:
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!
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;
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.
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.
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: [email protected]).
• 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

Internet-Seiten - selbst gemacht

Transcription

Similar documents

Lessing: Emilia Galotti Gh

Anmeldeformular Bad Dürkheim AK 1

Die 4 Dimensionen – Quaternionen in der Kinematik

Skript zum LaTeX-Kurs

und Personenregister

LaTeX - Tipps und Tricks

Weltwärts in der Dominikanischen Republik

2016-05 Neuzugaenge Film Mai 2016 - Zentral

Informationssysteme - Sommersemester 2016