Grundlagen der HTML-Programmierung. Arbeitsunterlagen. Fortsetzungskurs HTF

Transkript

1 Internet Club Zürich Die Plattform für Internet-Nutzer und -Einsteiger Fachgruppe HTML Workshop: Grundlagen der HTML-Programmierung Arbeitsunterlagen 1998 by Christoph Janser Fortsetzungskurs HTF Christoph Janser Internet Club Zürich Technischer Leiter HTML Sekretariat Löwenstrasse 24 Michèle Basappa 8400 Winterthur Kartausstrasse / Zürich Telefax 01/ by Internet Club Zürich, Christoph Janser, Technischer Leiter Fachgruppe HTML

2 HTML-Fortsetzungskurs, Einleitung Seite II Inhalt 1 FORMULARE EINLEITUNG EINLEITUNG DES FORMULARS EINGABEFELDER TEXTEINGABE PULL-DOWN-MENUE UND AUSWAHLLISTE EMPFANG BROWSERUNSTIMMIGKEITEN 3 2 FRAMES EINLEITUNG GRUNDLAGE FRAME-PROGRAMMIERUNG FRAME-BEISPIEL 5 3 IMAGEMAP EINLEITUNG IMAGEMAP-PRAXIS IMAGEMAP-PROGRAMMIERUNG 6 4 EINBAUTEN FÜR DEINE WEBSEITE JAVA/JAVA-SCRIPTS BEISPIELE VON JAVA-APPLETS GÄSTEBUCH ZÄHLER WEBNOTIFIER MAILINGLISTE LISTBOT 12 5 WEBDESIGN ALLGEMEINES TIPS KLASSISCHE FEHLER BEIM WEBDESIGN 15 6 INTERNETADRESSEN ALLGEMEINE ADRESSEN FORM2MAIL-ANBIETERN JAVA-SCRIPTS ZÄHLER GRAFIKEN GÄSTEBÜCHER DIVERSES 16 7 AUFGABEN UND LÖSUNGEN 17

3 HTML-Fortsetzungskurs, Einleitung Seite III Vorwort In diesem Fortsetzungskurs werden die folgenden Themen behandelt: Formulare Frames Imagemap Einbauten für Deine Webseite Webdesign Der Kurs ist als Fortsetzungskurs zum Grundkurs HTE gedacht. Die Kenntnisse, welche im ersten Grundkurs erlernt wurden, werden hier nicht mehr behandelt und sollten deshalb von den Kursteilnehmern beherrscht werden. Im Grundkurs wurden die folgenden Themen behandelt: Seitenaufbau Links Einbinden von Linien, Grafiken und Bildern Tabellen Mit den Kenntnissen der Kurse Grundkurs und diesem Fortsetzungskurs, können die Teilnehmer anspruchsvollere Internetseiten erstellen. Die Ausführungen beruhen auf dem HTML-Standard 3.2. Quellenverweise HTML 3.2 Schnellübersicht, Markt und Technik, ISBN HTML 4 Schnellübersicht, Markt und Technik, ISBN HTML 4, Addison-Wesley, ISBN Diverse Internetadressen Webdesign: PC-Online 8/97 Zähler, Gästebuch: INFO 4/98, CBB Computer-Briefkasten Das Copyright für diese Kursunterlagen, inkl. dazugehörende Dateien, liegt beim Autor.

4 HTML-Fortsetzungskurs, Formulare Seite 1 1 Formulare 1.1 Einleitung Durch Formulare wird das World Wide Web erst so richtig interaktiv. Formulare sind eine einfache Möglichkeit, innerhalb von HTML Feedback zu bekommen. Bei Formularen handelt es sich um eine Ansammlung von Schaltflächen und Texteingabefeldern, deren Inhalt in einem Paket zurück an den Server geschickt wird. Dieser verarbeitet die Informationen dann und gibt entsprechende Antworten zurück. Die Informationsverarbeitung hat nichts mit HTML zu tun und reicht ins Arbeitsfeld des Server-Systemadministrator. Beachte bitte auch Browserunstimmigkeiten auf Seite Einleitung des Formulars Ein Formular wird mit den Tags <form> und </form> in die bestehende HTML-Seite eingefügt. Innerhalb dieser Tags gelten alle im übrigen Dokument gültigen HTML-Befehle (Textformatierungen, Grafikeinbindungen, Tabellen). <FORM ACTION=URL> Formulare sind nur funktionsfähig, wenn das Action -Attribut angegeben ist. Action zeigt auf die Internet-URL-Adresse der Anwendung (meist ein UNIX-Skript). Da die Meisten keinen eigenen Server zur Verfügung haben, kann das mailto -Tag eingegeben werden. In diesem Fall werden die eingegebenen Daten per Mail verschickt. <form action= mailto:tl_html@internetclub.ch > <FORM METHOD=GET POST> Dieses Tag muss angegeben werden. Im dem Falle, das die Daten per verschickt werden sollen, muss hier Post angegeben werden. <ENCTYPE="TEXT/PLAIN"> Die im Formular angegebenen Daten müssen vom Browser auf eine bestimmte Weise kodiert werden, damit eine fehlerfreie Übertragung möglich ist. Voreingestellt ist <ENCTYPE="application/x-www-form-urlencoded">. Dies wandelt Leertasten in Pluszeichen und Sonderzeichen in ihren hexadezimalen Wert, dem ein Prozentzeichen vorangestellt wird. Beispiel für die richtige Formulareinleitung: <FORM ACTION="MAILTO: TL_HTML@INTERNETCLUB.CH" METHOD=POST ENCTYPE="TEXT/PLAIN"> 1.3 Eingabefelder <INPUT NAME=BEZEICHNER> Mit Name gibst Du den Parametername jedes Feldes an, z. B. Lieblingsessen <INPUT VALUE=ERKLÄRUNG> Mit Value gibst Du einen voreingestellten Wert an. Bei Schaltflächen handelt es sich um den Text, der in den Feldern erscheint. <INPUT TYPE=CHECKBOX> Ankreuzfeld; es können beliebig viele Ankreuzfelder im Formular angeklickt werden. <INPUT TYPE=RADIO NAME= GRUPPE > Auswahlfelder, die sich ähnlich wie Ankreuzfelder verhalten. Der Unterschied besteht darin, dass nur ein Feld aus einer Gruppe angekreuzt werden kann. Klickt der Benutzer auf ein anderes Feld, wird das vorherige jeweils deaktiviert. Name definiert die Gruppe (überall gleicher Name).

5 HTML-Fortsetzungskurs, Formulare Seite 2 <INPUT CHECKED> Wird beim Typ Checkbox und Radio benützt, um das Feld als angekreuzt zu definieren. <INPUT TYPE=RESET> Schaltfläche, die das Formular sofort auf den anfänglichen Stand zurücksetzt. Mit Value kann der Text geändert werden, z. B. value= Angaben löschen. <INPUT TYPE=SUBMIT> Schaltfläche, die die Formulardaten an den Server sendet. Mit Value kann der Text geändert werden, z. B. value= Ab die Post! INPUT TYPE=PASSWORD Dies definiert eine Texteingabezeile, die entsprechend type=text funktioniert. Der Unterschied ist, dass die Zeichen, die eingegeben werden, auf dem Monitor nicht angezeigt werden. Es erscheinen statt dessen *. <INPUT TYPE="HIDDEN" NAME="TITEL" VALUE="ADRESSAENDERUNG"> type=hidden übergibt Parameter, die vom Benutzer nicht verändert werden können. Das dient der Erleichterung einer weiteren Verarbeitung des Formulars. Du kannst beispielsweise so am Anfang des Formulars für Dich einen Titel (wie in obigem Beispiel Adressaenderung) angeben. 1.4 Texteingabe Mit type=text besteht die Möglichkeit, einzeilige Textfelder in das Formular einzubauen. Beispiel für ein Textfeld: <INPUT TYPE=TEXT NAME= TEXT1 SIZE=20 MAXLENGTH=40 VALUE= HIER TEXT EINGEBEN > Definiert eine einzeilige Texteingabezeile. Size ist die Anzahl der sichtbaren Zeichen, Maxlength legt die Anzahl der maximal einzugebenden Zeichen fest. Die in Value angegebene Zeichenfolge wird vorab bereits in die Eingabezeile geschrieben, bevor der Benutzer etwas eingibt. Mit dem Tag <TEXTAREA> ist der verfügbare Platz nicht so begrenzt. Das mehrzeilige Texteingabefeld wird mit <TEXTAREA> eingeleitet und mit </TEXTAREA> beendet. <TEXTAREA NAME="FEEDBACK" COLS=60 ROWS=2 WRAP=PHYSICAL> </TEXTAREA> Cols Spaltenanzahl des Textfeldes Name Bezeichner des Parameters Rows Zeilenanzahl des Textfeldes Wrap Zeilenumbruch (Standard : OFF )

6 HTML-Fortsetzungskurs, Formulare Seite Pull-down-Menue und Auswahlliste Das <SELECT>-Tag fügt ein Pull-down-Menue oder eine Auswahlliste in das Formular ein. Beispiel: DEINE LIEBLINGSGETRÄNKE <SELECT NAME= LIEBLINGSGETRAENK SIZE=2 MULTIPLE> <OPTION SELECTED VALUE= BIER >BIER </OPTION> <OPTION VALUE= EISTEE >EISTEE </OPTION> <OPTION VALUE= ROTWEIN >ROTWEIN </OPTION> <OPTION VALUE= WEISSWEIN >WEISSWEIN </OPTION> </SELECT> Multiple Name Size Selected Value Mehr als eine Option ist erlaubt Name des Parameters Gleichzeitig dargestellte Punkte (Optionen) Wählt im Vorfeld Einträge in der Auswahlliste (Voreinstellung) Übermittelter Parametername Empfang Wenn Benützer Dein Formular ausfüllen und abschicken, erhältst Du eine mit den Daten. 1.7 Browserunstimmigkeiten Es hat sich gezeigt, dass Benutzer, welche einen Browser der 4. Generation benützen, die Formulare nur ausfüllen können, wenn sie mit Netscape Communicator arbeiten. Mit dem Internet Explorer Version 4 von Microsoft können die Formulare zwar ausgefüllt werden, beim Klicken auf den Absenden-Knopf wird allerdings das Mailprogramm gestartet. Dieses Problem konnte bis heute von Microsoft nicht gelöst werden Abhilfe Wer seine Formulare für beide Browser zugänglich machen möchte, dem bietet sich die Möglichkeit, die Dienste eines Form2Mail-Anbieters zu beanspruchen. Hier muss dann bei der Formulareinleitung die URL dieses Anbieters angegeben werden. Der Anbieter wertet die eingegebenen Daten aus und sendet diese dann als Mail zu Dir. (Adressen siehe im Anhang Internetadressen ) Eigene Notizen:

7 HTML-Fortsetzungskurs, Frames Seite 4 2 Frames 2.1 Einleitung Frames unterteilen das Browser-Fenster in beliebig viele Unterfenster (Frames), von denen jedes eine autonome HTML-Seite darstellt. So lässt sich der Bildschirm in mehrere logische Einheiten, wie z. B. Navigationsleiste (Index), Daten, Zusatzinformationen etc. unterteilen. 2.2 Grundlage Als Basis für einen Frame-Bildschirm steht ein spezielles Rahmendokument, das anhand eines initialen sogenannten Framesets den Bildschirm optisch in mehrere HTML-Dokumente unterteilt. Dies geschieht mit eigenen Tags, die von Browsern ignoriert werden, die Frames nicht unterstützen. Die in Frames dargestellten HTML-Dokumente agieren prinzipiell völlig unabhängig voneinander, d. h. theoretisch kann man in einem einzelnen Frame durch das gesamte Internet surfen, während die anderen Bildschirmteile unverändert bleiben. Es ist allerdings von einer guten Frame-Strukturierung und Beherrschung der Frame-Programmierung abhängig, wie gut Frames untereinander kommunizieren können. Die Wurzel einer aus Frames bestehenden Webseite ist eine HTML-Datei, die alle Definitionen der Frame-Strukturen enthält. Diese Datei enthält ebenfalls Verweise auf die tatsächlich dargestellten HTML- Seiten innerhalb der Frames. 2.3 Frame-Programmierung <FRAMESET COLS=N N% *, N N% *,...> Die Anzahl der durch Kommata getrennten Spaltenbreiten bestimmt die Anzahl der Spalten. Cols=n Bestimmt eine Spalte mit n Bildpunkten Breite. Cols=n% Gibt dieser Frame-Spalte den n%-anteil des gesamten Fensters. Bei einer rechnerisch falschen Prozentaufteilung rechnet der Browser neu nach: cols=30%,30% entspricht demnach cols=50%,50% Cols=* Vergibt für diese Frame-Spalte den übrigen Freiraum, den die vorher reservierten Spalten noch nicht eingenommen haben. cols=*,*,* entspricht cols=33%,33%,33%. Als Beispiel kann auch eingegeben werden: cols=34%,* <FRAMESET ROWS=N N% *, N N% *,...> (Wie oben, Einteilung jedoch in Zeilen.) <FRAME SRC= URL SRC zeigt auf das HTML-Dokument, das in diesem Frame dargestellt werden soll. <FRAME MARGINHEIGHT=N> Anzahl der Bildpunkte zwischen dem Frame-Inhalt und dem oberen bzw. unteren Rand. <FRAME MARGINWIDTH=N> Anzahl der Bildpunkte zwischen dem Frame-Inhalt und dem linken bzw. rechten Rand. <FRAME NAME= BEZEICHNER > Zur weiteren Verwendung ist die Zuweisung eines eindeutigen Namens der Frameteile unerlässlich. name= _blank Stellt das Dokument in einem neuen Fenster dar (oder _new ) name= _self Stellt das Dokument im gleichen Fenster dar, in dem sich auch das aktuelle befindet (Standardeinstellung). name= _top Löscht, deaktiviert alle Frames. (Diesen Bezeichner sollte man zu jedem Hyperlink schreiben, der auf eine andere Seite im WWW zeigt.)

8 HTML-Fortsetzungskurs, Frames Seite 5 <FRAME SCROLLING=YES NO AUTO> Wenn der Frame-Inhalt grösser als der zugewiesene Frame ist, wird ein Rollbalken eingeblendet. Standard: Auto. <A TARGET= FRAME > Die Webseite, auf die ein Hyperlink-Anker <A> verweist, wird in der Regel im gleichen Frame dargestellt, in dem der Link aktiviert wurde. Durch Nennung des Attributs Target lässt sich dem Hyperlink jedoch ein Frame zuweisen, in dem das HTML-Dokument erscheinen soll. <NOFRAMES> </NOFRAMES> Web-Browser, die mit dem Tag <FRAMESET> nichts anfangen können, ignorieren sie einfach. Der Text zwischen diesen Tags wird aber angezeigt. Hier kann ein Verweis angebracht werden, wohin sich der Surfer wenden kann. 2.4 Frame-Beispiel <FRAMESET ROWS= 50,* > <FRAME SRC= BANNER.HTM NAME= BANNER SCROLLING=NO> <FRAMESET COLS= 120,* > <FRAME SRC= INDEX.HTM NAME= INDEX > <FRAME SRC= INHALT.HTM NAME= INHALT > </FRAMESET> </FRAMESET> Dieses Frame würde so aussehen: Banner, kein Rollbalken, BANNER.HTM, Höhe 50 Bildpunkte Index, Breite 120 Bildpunkte, INDEX.HTM mit Rollbalken Inhalt Breite * INHALT.HTM mit Rollbalken (wenn nichts vermerkt: Standard = Yes) Dies ist eine simple Navigationsfläche. Am oberen Rand erstreckt sich ein Banner über die gesamte Fensterbreite, das vielleicht ein Logo enthalten könnte. In der zweiten Frame-Struktur steht auf der linken Seite ein Frame mit Hyperlinks und menueähnlichen Verweisen, während der Grossteil des Bildschirms das Datenfenster ausmacht. Dieses Layout besteht aus lediglich drei Frames innerhalb von zwei Frame-Strukturen: Zuerst schneiden wir den Banner-Frame ab, in dem wir das Fenster vertikal teilen. Den Rest teilen wir schliesslich nochmals in einen horizontal fixen Navigationsframe und ein grosses, flexibles Datenfenster. Link aus dem Index -Frame, welcher das Dokument im Inhalt -Frame anzeigt: <A HREF= VERKAUF.HTM TARGET= INHALT >VERKAUFSANALYSE</A> Eigene Notizen:

9 HTML-Fortsetzungskurs, Imagemap Seite 6 3 Imagemap 3.1 Einleitung Mit Hilfe von Imagemaps werden auf einem Bild kleinere begrenzte Regionen definiert, die bei Aktivierung durch den Benutzer (bespielsweise durch einen Mausklick) eine vorbestimmte Aktion ausführen. Diese Regionen werden durch geometrische Angaben durch den HTML-Programmierer bestimmt. 3.2 Imagemap-Praxis Sobald Du Imagemaps verwendest, schliesst Du Surfer ohne grafikfähigen Browser aus. Auf vielen Internetseiten sieht man deshalb am Rand des Bildschirmes noch eine zusätzliche Textleiste, in der alle in der Imagemap enthaltenen Optionen aufgelistet sind. Benütze Imagemaps, wann immer sie sinnvoll erscheinen, z.b. eine Landkarte, wenn Du Reiseführer veröffentlichst oder Filialen an unterschiedlichen Orten betreibst. Das Erstellen von Maps per Hand ist eine mitunter recht mühsame Angelegenheit. Darum sollte man sich dabei von Programmen helfen lassen, mit denen man per Maus die geometrischen Formen auf dem Bild verteilt. Die Software liest dann die Koordinaten ab und erstellt daraus automatisch den in das Dokument einzufügenden HTML-Teil. 3.3 Imagemap-Programmierung Kenntlichmachung eines Bildes Zuerst muss auf der Seite ein entsprechendes Bild sein. Nachdem Du dieses eingefügt hast, musst Du den IMG-Tag wie folgt ergänzen: <IMG USEMAP= VERWEIS > Ein Verweis ist dabei wie ein dokumentinterner Anker zu verwenden, also z. B. <usemap= #koordinaten > Beispiel: Der HTML-Code, der auf den Definitionsteil des HTML-Dokuments verweist, könnte so aussehen: <IMG SRC= GRAFIK.GIF USEMAP= #KOORDINATEN > Beachte, dass keine Verschachtelung durch den Anker <A> notwendig ist! Imagemap-Definitionsteil In dem Dokument, in dem die Imagemap-Grafik in die Webseiteeingebunden wird, muss sich auch ein Definitionsteil für die mausklick-sensitiven Bereich der Grafik befinden. Der Definitionsteil kann sich an jeder beliebigen Stelle im Dokument befinden und wird mit den Tags <map> und </map> eingeklammert. Innerhalb der Tags werden die einzelnen Bereiche mit dem neuen Tag <area> und den dazugehörenden Attributen definiert. <MAP NAME= BEZEICHNER > Hier beginnt der Container für alle über das Area-Element herbeigeführten Anklickdefinitionen. Ähnlich wie das name-attribut des Ankers <a> bestimmt dieses Attribut einen Anlaufpunkt innerhalb eines HTML-Dokuments. In obigem Beispiel müsste es nun folgendermassen heissen: <MAP NAME= KOORDINATEN> AREA Pro Anklickregion wird innerhalb des MAP-Containers ein AREA-Element definiert

10 HTML-Fortsetzungskurs, Imagemap Seite 7 <AREA SHAPE=DEFAULT RECT CIRCLE POLY> Default: Die gesamte Region Rect: Rechteck mit oberem linken und unterem rechten Punkt Circle: Kreis mit Mittelpunkt und Radius Poly: Polygon mit Angabe von beliebig vielen aufeinanderfolgenden Koordinatenpaaren. <AREA COORDS=KOORDINATEN> Abhängig von der unter SHAPE festgelegten Regionform erwartet der Browser verschiedene Koordinatenangaben: Rect: Links-X, Oben-Y, Rechts-X, Unten-Y Circle: Mittelpunkt-X, Mittelpunkt-Y, Radius Poly: X1, Y1, X2, Y2,..., Xn, Yn <AREA NOHREF> Der in diesem AREA-Tag definierte Bereich aktiviert keine andere URL. Anzuwenden bei Default. <ALT= TEXT > Auch hier kann ein Alternativtext ausgegeben werden, wenn der Surfer auf die entsprechende Region gelangt. <HREF= URL > Verweis auf ein anderes Dokument. Beispiel: <IMG SRC= GRAFIK.GIF USEMAP= #KOORDINATEN > <MAP NAME= KOORDINATEN > <AREA SHAPE=RECT COORDS= 15,30,115,80 HREF= ENDE.HTML ALT= HIER GEHT S RAUS > <AREA SHAPE=CIRCLE COORDS= 200,50,30 HREF= KAPITEL1.HTML ALT= ZUM KAPITEL 1 > <AREA SHAPE=POLY COORDS= 0,0,99,49,49,99 HREF= NEU.HTML ALT= ZURÜCK > </MAP> Y Eigene Notizen: X

11 HTML-Fortsetzungskurs, Einbauten für Deine Webseite Seite 8 4 Einbauten für Deine Webseite In diesem Kapitel befassen wir uns mit Einbauten für Deine Webseite. Teilweise basieren diese Einbauten auf externe Dienste, die Du ganz einfach mit wenigen HTML-Befehlen in Deinen Seiten einbauen kannst. Durch diese externen Dienste wird Dir unter anderem viel Programmierarbeit abgenommen. 4.1 Java/Java-Scripts Einleitung Die Einführung von Java ist wahrscheinlich das bahnbrechendste Ereignis im World Wide Web. In diesem Kurs möchten wir die Internet-Programmiersprache kurz ansprechen und Dein Interesse dafür wecken. Wir möchten, anhand einiger Beispiele, zeigen, wie Du diese in Deinen HTML-Dokumenten einbauen kannst. Im Internet gibt es zahlreiche Adressen, wo Du lauffähige Applets herunterladen kannst. Die Adressen findest Du im Anhang auf Seite 16. Bist Du interessiert an der Java-Programmierung steht Dir umfassende Literatur zu Verfügung Java Java ist eine von Sun Microsystem geschaffene Programmiersprache. Warum der Name Java? Die Java-Entwickler mussten mit einem griffigen Namen auskommen, der noch nicht geschützt war und eine komplett neue Welt auf dem Internet eröffnen konnte. Java ist eine bestimmte Kaffemischung die bei einer Brainstorming-Sitzung per Zufall erwähnt wurde. Java ist keinesfalls als Ersatz der Websprache HTML zu sehen, sondern vielmehr als Aufsatz, der HTML um die Aspekte der Interaktivität erweitert. Die Basis von Java bildet die weit verbreitete und einfach zu erlernenden Programmiersprache C++. Java-Programme werden im Web-Browser auf jedem Computer abgespielt - unabhängig davon, auf welchem Betriebssystem dieser läuft. Lediglich der Browser muss javafähig sein. Die Einbindung von Java in einem HTML-Dokument ist denkbar einfach. Im Dokument wird das Java-Programm zwischen die beiden Tags eingebaut: <SCRIPT LANGUAGE="JAVASCRIPT"> JAVAPROGRAMM </SCRIPT> 4.2 Beispiele von Java-Applets (_ bedeutet: Zeile ohne Unterbruch weiterschreiben) Java-Beispiel 1 Script, das ein HTML-Dokument in einem neuen Fenster öffnet. <HEAD> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- // MIT DIESER FUNKTION WIRD DAS DATENFENSTER GEÖFFNET // DER STRING 'NAME' ÜBERGIBT DABEI DEN NAMEN DES ZU ÖFFNENDEN // FILES (RSP. DIE GANZE URL) FUNCTION DETAIL(NAME) {MSGWINDOW=OPEN(NAME,'DETAIL','HISTORY=YES,TOOLBAR=NO,SCROLLBARS=YES,WIDTH=550, HEIGHT=300') } // --> </SCRIPT> </HEAD> <BODY> <A HREF="JAVASCRIPT:DETAIL('NEWS.HTML')"> AKTUELLE NEWS ></A>

12 HTML-Fortsetzungskurs, Einbauten für Deine Webseite Seite Java-Beispiel 2 Script, das in der Statusleiste den entsprechenden Text ausgibt. <HEAD> <SCRIPT> DEFAULTSTATUS = "ICZ, DEIN INTERNETCLUB!"; </SCRIPT> </HEAD> Java-Beispiel 3 Ein Textticker, der in einem Fenster auf der Seite drei verschiedene Texte ablaufen lässt. <HTML> <HEAD> <SCRIPT LANGUAGE="JAVASCRIPT"> <!-- BEGIN// GLOBAL VARIABLES // 1996 VON CHRISTOPH BERGMANN... // ES WAERE NETT, WENN DIESER VERMERK DRIN BLIEBE... VAR MAX=0; FUNCTION TEXTLIST() { MAX=TEXTLIST.ARGUMENTS.LENGTH; FOR (I=0; I<MAX; I++) THIS[I]=TEXTLIST.ARGUMENTS[I]; } TL=NEW TEXTLIST ( "MELDE DICH FÜR DEN ANLASS 'ORBIT' AN!", "ICZ, DEIN INTERNETCLUB!", "LETZTER UPDATE DER SEITEN AM: " ); VAR X=0; POS=0; VAR L=TL[0].LENGTH; FUNCTION TEXTTICKER() { DOCUMENT.FORM1.TEXTFELD.VALUE=TL[X].SUBSTRING(0,POS)+"_"; IF(POS++==L) { POS=0; SETTIMEOUT("TEXTTICKER()",3000); X++; IF(X==MAX) X=0; L=TL[X].LENGTH; } ELSE SETTIMEOUT("TEXTTICKER()",50); } // END --> </SCRIPT> </HEAD> <BODY ONLOAD="TEXTTICKER()"> <CENTER> <TABLE CELLPADDING=0 CELLSPACING=0 WIDTH=100% BORDER=0> <TR> <TD ALIGN="CENTER" VALIGN="TOP"> <FORM NAME="FORM1"><INPUT TYPE=TEXTAREA NAME="TEXTFELD" SIZE="60"></FORM> </TD> </TR> </TABLE> </CENTER> </BODY> </HTML>

13 HTML-Fortsetzungskurs, Einbauten für Deine Webseite Seite Gästebuch Ein Gästebuch kannst Du ganz einfach bei Aussie oder Spin beantragen. Beide Dienste sind kostenlos Einrichtung Wir beschränken uns hier auf die Einrichtung bei Spin, da dieser Dienst für das Eintragen und Ansehen des Gästebuches nur einen Link verlangt. Bei Aussie sind für das Eintragen und Ansehen zwei Links erforderlich. Spin: Aussie: Aufrufen der Seite Get a free guestbook Get your own free guestbook Nun kommt eine Seite, wo Du Deine Eingaben machen musst: First Name: Vorname (Ist gleichzeitig der Titel des GB s [ Christoph s Gästebuch ]) Last Name: Nachname Deine Homepage URL: URL Deiner Homepage Set a Password: Gib hier ein Passwort ein und wiederhole es im Feld Password again Nun erhältst Du eine Infoseite mit Deinen Eingaben für den Einbau in Deiner Seite. Der Dienst ist ab sofort eingerichtet und kann sofort verwendet werden. Der Internet Club Zürich hat ein Versuchs-Gästebuch eingerichtet, welches wir in diesem Kurs verwenden. Die Angaben (welche Du für Deinen Account übrigens auch per erhältst) lauten: Guestbook number: Guestbook ID: ICZ Login: ICZ First Name: ICZ Last Name: Internet Club Zürich Hompage: Supervisor page: Guestbook: data has been found, but is not displayed (to protect the privat data) (tl_html@internetclub.ch) Password: data has been found, but is not displayed (to protect the privat data) ( ICZ ) Einbau in Deiner Seite Um dieses Gästebuch auf Deinen Seiten verwenden zu können, musst Du nun nur noch einen Link auf dieses Gästebuch legen. Die URL findest Du unter dem Punkt Guestbook. Achtung: Achte auf das grosse X! <A HREF=" Dies ist der Link auf das ICZ-Gästebuch. Um Einträge löschen zu können, musst Du Dich mit der URL, welche unter Supervisor page angegeben ist, einloggen. Anschliessend kannst Du Gästebuch-Einträge mutieren.

14 HTML-Fortsetzungskurs, Einbauten für Deine Webseite Seite Zähler Das ist wohl eines der wichtigsten Einbau-Elemente in Deinen Seiten. Mit Zählern kannst Du feststellen, wie viele Besucher Deine Seiten besucht haben. Es gibt mittlerweile Tausende von Zähleranbietern. Einige sind kostenlos, haben aber keine grossen Auswertungen. Bei anderen Anbietern bezahlt man einen kleinen Unkostenbeitrag und erhält recht aufschlussreiche Auswertungen (z.b. Wie viele Besucher pro Tag?, Mit welchem Browser eingeloggt?, Woher kommt der Besucher?). Für die private Homepage lohnt sich ein einfacher, kostenloser Zähler. Tip: Frage zuerst Deinen Provider, ob er Zähler anbiete. Einen einfachen Zähler habe ich bei ICOUNT gefunden ( Dieser ist einfach einzurichten und bietet eine Tagesstatistik, in der einzig die Anzahl Besucher aufgelistet sind. (Die Statistik reicht über mehrere Monate zurück.) Am Schluss der Statistik wird die durchschnittliche Anzahl der Besucher pro Tag angegeben. Meiner Meinung nach reicht dieser Zähler für die private, wie auch für kleinere Vereins-Homepages Einrichtung URL wählen Register - Create account Nun musst Du die folgenden Angaben machen: Name: Name/Vorname adresse Business Name: Geschäftsname Protected stats: geschützter Counter (Änderungen nur mit Passwort?) Hit count: Startzahl Change Password: Passwort ( icz ) Verify Password: Register Infoseite: Passwort noch einmal eingeben zu Identifizierung mit HTML-Code (ausdrucken, keine ). Markiere den HTML-Code und füge ihn in Deiner Seite ein. Config Counter (Wie soll der Counter dargestellt werden?) Counter Style Wie wird er angezeigt? Counter number color: Farbe der Zahlen Counter background color: Farbe des Hintergrundes Counter number border color: Rahmenfarbe Change Einbau in Deiner Seite Der Einbau dieses Zählers in Deiner Seite ist denkbar einfach. Nach Eingabe Deiner Angaben erscheint eine Infoseite mit dem HTML-Code. Markiere diesen und füge ihn auf Deiner Seite ein, an der Stelle, wo Du ihn haben möchtest. Da dieser Counter manchmal etwas lange hat, bis die Besucherzahl angezeigt wird, ist es besser, wenn Du den Counter etwas am Schluss Deiner Seite einfügst. <A HREF=" <IMG SRC=" So lautet der HTML-Code für den Einbau des ICZ-Zählers.

15 HTML-Fortsetzungskurs, Einbauten für Deine Webseite Seite Webnotifier Der Zweck dieses kostenlosen Dienstes ist, Deine Besucher auf Änderungen in Deinen Seiten aufmerksam zu machen. Trägt sich ein Besucher in diesen Dienst ein, wird er automatisch per informiert, wenn sich auf Deiner Seite etwas geändert hat. Webnotifier ist ein Dienst, in dem sich die Surfer selber eintragen können Einbau in Deiner Seite Der Einbau ist sehr einfach: Du musst einfach den nachfolgenden HTML-Code in Deiner Seite einfügen. An der Stelle "xxxxx.xx/xxx/xxx.html musst Du die URL der Seite angeben, die aktualisiert wird (z.b. Den Text Gib uns hier... kannst Du selbstverständlich ändern! GIB UNS HIER DEINE -ADRESSE AN, WENN DU BEI SEITENAKTUALISIERUNGEN AUTOMATISCH BENACHRICHTIGT WERDEN MÖCHTEST <FORM METHOD="GET" ACTION=" <INPUT TYPE=TEXT SIZE=20 NAME="REQUIRED- "><BR> <INPUT TYPE=HIDDEN VALUE=" NAME="URL"> <INPUT TYPE=SUBMIT VALUE=" REGISTRIERE MICH!"> </FORM> 4.6 Mailingliste ListBot Zweck und Einrichtung Zweck einer Mailingliste ist, Vereinsmitglieder oder interessierte Personen über das Vereinsleben zu informieren oder Neuigkeiten zu verbreiten. Dieses Tool greift allerdings nicht allzu sehr in die HTML-Programmierung ein. Ich möchte es deshalb erwähnen, weil Du damit interessierte Personen über Deine Webseiten per informieren kannst. Für Dich selber ist die Verwaltung der Adressen denkbar einfach: Du hast gar nichts damit zu tun. Die Personen oder Vereinsmitglieder müssen sich selber bei diesem Dienst eintragen oder löschen. Um diesen kostenlosen Dienst nutzen zu können, musst Du allerdings zuerst bei ListBot einen Account einrichten. Dies erreichst Du unter Punkt Click here to start your own FREE list!. Hast Du diesen Dienst eingerichtet und die entsprechenden Anpassungen vorgenommen, musst Du nur noch in Deinem Webangebot eine Seite einrichten, auf der sich die Personen in den Dienst eintragen können. Möchtest Du nun alle eingetragenen Personen mit einem Newsletter erreichen, sendest Du einfach eine Mail an Je nachdem, wie Du den Dienst konfiguriert hast, wird Dein Newsletter an alle Personen geschickt Einbau in Deiner Seite Bei ListBot erhältst Du den HTML-Code, den Du in Deiner Seite einbauen kannst. Nachfolgend eine angepasste Form des Codes, mit der sich Personen eintragen oder löschen können. Ebenfalls besteht hier die Möglichkeit, das Archiv der vergangenen Newsletters durchzusehen. Um hier die Übersichtlichkeit zu wahren, wurden alle Tabellen- und Zeichenformatierungen herausgenommen.

16 HTML-Fortsetzungskurs, Einbauten für Deine Webseite Seite 13 <!-- BEGIN LISTBOT CODE --> <FORM METHOD="POST" ACTION=" MAILINGLISTE "NAME" <INPUT TYPE=TEXT NAME="E_MAIL"> <INPUT TYPE=HIDDEN NAME="LIST_ID" VALUE="LISTENNAME"> <INPUT TYPE=IMAGE SRC=" BORDER=0 WIDTH=88 HEIGHT=31 ALT="KLICKE HIER UM DICH EIN- ODER AUSZUTRAGEN!"> <INPUT TYPE="RADIO" NAME="ACT" VALUE="SUBSCRIBE_LIST" CHECKED> EINTRAGEN <INPUT TYPE="RADIO" NAME="ACT" VALUE="UNSUBSCRIBE_LIST"> STREICHEN <A HREF=" " TARGET="_TOP">ARCHIV</A> </FORM> <!-- END LISTBOT CODE --> Eigene Notizen:

17 HTML-Fortsetzungskurs, Webdesign Seite 14 5 Webdesign 5.1 Allgemeines Web-Design ist mehr als das Zusammensetzen von Bildern und Texten. Ein Internet-Surfer, der beim Anklicken der Hyperlinks nicht verlorengeht, der sich nicht langweilt, wird Deine Homepage gerne wieder besuchen. Wenn Du einige strukturelle Regeln beachtest, lädt auch Dein Internetangebot zum Verweilen ein. 5.2 Tips Gut strukturiert ist halb gewonnen Achte auf eine gute Struktur Deines Angebots. Packe nicht alle Daten und Fakten in ein Dokument. Lange Webseiten reizen nicht gerade zum Lesen und erschweren die Orientierung. Wenn Du längere Texte hast, teile diese in mehrere Kapitel auf. Gehe nach dem Grundsatz Das Wichtigste zuerst vor. Kein Online-Leser nimmt sich Zeit für langwierige Einleitungen im Stil eines Schulaufsatzes. Reize den Surfer mit knackigen Überschriften und klaren Aussagen. Tageszeitungen sind das beste Beispiel Kontaktaufnahme Gib Deinen Besuchern die Gelegenheit, mit Dir in Kontakt zu treten. Am einfachsten geht das, wenn Du Deine adresse einbindest. Biete diese gut sichtbar an Index Übersteigt Dein Angebot vier Seiten muss ein Index her, der Querverweise auf alle weiteren Dokumente enthält. Meist eignet sich die Homepage hervorragend als Leitseite. Umgekehrt sollten alle Seiten auch wieder auf die Homepage zurückverzweigen. Diese Links sind am besten oben und unten auf der Seite aufgehoben. Soll die WWW-Site noch umfangreicher werden, ziehe mehrere Ebenen ein. Ein Hauptindex verweist auf untergeordnete Inhaltsverzeichnisse. Diese enthalten ihrerseits Verweise auf die einzelnen Seiten. So entfaltet sich eine Baumstruktur vor dem Leser. Hier ist ebenfalls wichtig, dass immer wieder Links auf die nächsthöhere Struktur verweisen Site Map Nicht jeder Leser will sich durch die gesamte Site wühlen, bis er an seine Informationen kommt. Für eilige Naturen bietet sich eine Site Map an. Sie besteht aus einer Datei, die man direkt von der Homepage erreicht. Viele dieser Wegweiser enthalten alle wichtigen Stichwörter alphabetisch aufgelistet Bilderreservat Eine Web-Site mit mehreren Verzeichnisebenen wird für Dich übersichtlicher, wenn Du alle Grafiken und Bilder in einem eigenen Directory unterbringst. Gängig ist der Ordner /images. Neben einem aufgeräumteren Erscheinungsbild Deines Servers bringt das Verzeichnis einen handfesten Vorteil beim Programmieren neuer Seiten. Wenn Du Grafiken mehrfach verwendest, weisst Du immer, wo sich die Grafiken befinden Lange Dokumente gepackt anbieten Umfangreiche Texte auf mehrere HTML-Dateien aufzuteilen bringt einen Nachteil mit sich: Der Leser kann den Text nicht in einem Stück speichern, um ihn offline zu lesen. Er muss sich durch alle Files klicken und sie separat auf die Platte speichern. Abhilfe schafft hier eine gepackte Datei, die alle Teile des Dokuments enthält. Biete dieses ZIP-File an exponierter Stelle zum Download an. Das spart Übertragungszeit und ist ein echter Service am Surfer.

18 HTML-Fortsetzungskurs, Webdesign Seite Klassische Fehler beim Webdesign Grafik-Overkill Die Grafik darf nicht vor der Information stehen. Statt mit üppigen, bandbreitenfressenden Bildern um sich zu werfen, solltest Du die graphischen Elemente wie Salz in der Suppe einsetzen: sparsam Framelast statt Framelust Übermässiger Gebrauch von Frames verscheucht Surfer mit kleinen Bildschirmen und nimmt jegliche Übersicht aus einer Homepage. Der Grenzwert für Frames ist DREI Zu lange Texte Ewig lange Texte kosten Ladezeit, sehen grausam aus und helfen niemandem weiter. Teile Texte ab ca Zeichen Länge in mehrere Dokumente auf Schlechte Navigation Wo bin ich? ist eine der meistgestellten Fragen von Online-Surfern. Biete auf jeder Seite eine Gelegenheit, zur Homepage zurückzukehren Langweilige Standardlinks Hier noch meine Lieblingslinks, freut sich der Homepage-Inhaber, und der Surfer gähnt herzlich. Yahoo, Web.de, whitehouse.gov Du hast doch mehr zu bieten als Standardlinks Links, die ins Nirwana führen Nichts ist ärgerlicher als Links, die nicht mehr stimmen. Überprüfe deshalb Deine angebotenen Links regelmässig und aktualisiere sie Zuviel Zappelkram und Flimmerzeug Für die einen ist es multimedial, für die anderen nervig: Animationen. Sicher, es sieht nett aus, wenn eine Laufschrift über den Bildschirm flimmert oder wenn sich ein ruckeliges Männchen beim Schaufeln abrackert. Aber unter uns: Diese Animationen sind stocklangweilig Baustelle 90 Prozent aller Neulinge haben das schaufelnde Männchen als Baustellensymbol auf ihren Homepages. Verzichte auf diesen Unsinn. Eine Webseite ist sowieso immer eine Baustelle. Es gibt ständig etwas ausoder umzubauen. Bringe statt dessen weniger, gut aufbereitete Daten ins Netz (Achtung: Nicht weniger gut aufbereitete Daten! ). Eigene Notizen:

19 HTML-Fortsetzungskurs, Anhang Seite 16 6 Internetadressen 6.1 Allgemeine Adressen Internet Club Zürich HTML-Dateien selbst erstellen; Das Kompendium für Entwickler von WWW-Seiten Hier wird die Webseitenerstellung so richtig aufs Korn genommen Listbot, Mailingliste Webnotifier, Seitenaktualisierungs-Service Online-Internet-Kurs Web Site Garage (One Stop Shop for Servicing Your Web Site) Private Homepage von Christoph Janser Private Homepage von Florian Walthard und Form2Mail-Anbietern Der bekannteste Anbieter 6.3 Java-Scripts The CGI Resource Index CGI leicht gemacht Matt's Script Archive Zähler ICOUNT LE FastCounter Webcounter Grafiken 2Cool Animations Main Page Gästebücher Spin Aussie Diverses Parsimony Forum

20 HTML-Fortsetzungskurs, Aufgaben/Lösungen Seite 17 7 Aufgaben und Lösungen Aufgabe 1 Anfertigen eines Formulars auf neuer Seite. Formular beinhaltet: Checkbox, Radiobox, Texteingabezeilen, Texteingabefläche, Pulldown- Menue <html> <head> <title>formular</title> </head> <body> <form action="mailto:janser@bigfoot.com" method=post enctype="text/plain"> <pre> Programm auf Disk <input type=checkbox name="diskette" checked> <br> Mitglied <input type=radio name="mitglied_ja" value="ja" > Ja <input type=radio name="mitglied_ja" value="nein" checked> Nein <br> <br> Welches Programm? <select name="disk" size=3> <option value="disk1">programm 1</option> <option value="disk2" selected>programm 2</option> <option value="disk3">programm 3</option> </select> <br> Dein Kommentar:<br> <textarea name="feedback" cols=60 rows=2> </textarea> <br> <H2>Adressangaben</H2> Name: <input type=text name="name" size=20 maxlength=40 VALUE=""> <br> Vorname: <input type=text name="vorname" size=20 maxlength=40 value=""> <br> <br> <input type=reset value="löschen"> <input type=submit value="ab die Post"> </form> </keyb> </body> </html> Aufgabe 2 Zweispaltiges Frame erstellen: Frame 1 (links): Index Frame 2 (rechts): hier werden die Seiten angezeigt; als erste Seite verwende leerseite.html Ergänze den Index mit Links so, dass die Seiten Agenda, Kontakte und Links im rechten Frameteil angezeigt werden. frame.html <frameset cols=17%,* border=0> <frame src="index.html" name="frame1"> <frame src="leerseite.html" name="frame2"> </frameset> index.html <HTML> <HEAD> <TITLE>Indexseite</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF"> Index<BR><BR> <a href="agenda.html" target="frame2">agenda</a><br> <a href="kontakte.html" target="frame2">kontakt</a><br> <a href="links.html" target="frame2">links</a><br> <BR> <BR> </BODY> </HTML> Aufgabe 3 Füge auf der Seite LEERSEITE.HTML das Bild NAVIGAT.GIF ein. Ergänze das Dokument mit den Imagemap-Tags so, dass die Regionen im Bild maussensitiv (anklickbar) werden und die Seiten im rechten Frameteil angezeigt werden. <html> <head> <title>leerseite</title> </head> <body bgcolor="white"> <font size=2 face="arial" color="black"> <center> <H1>Hallo Besucher</H1> <BR> Schön, dass Du meine Seiten besuchst!<br> Wähle im linken Bildschirmteil oder auf dem Bild aus, was Dich interessiert!<br> <BR><BR> <IMG SRC="navigat.gif" WIDTH=200 HEIGHT=200 BORDER=2 usemap="#koordinaten"> </center> </font> <map name="koordinaten"> <area shape=rect coords="10,20,190,50" href="agenda.html" alt="agenda"> <area shape=rect coords="10,70,190,90" href="kontakte.html" alt="kontakte"> <area shape=rect coords="10,120,190,150" href="links.html" alt="links"> </map> </body></html> Aufgabe 4 Baue das Java-Tool 1 auf der Seite Agenda.html ein. Wenn jemand auf den Link Hinweis klickt, wird die Datei Hinweis.html in einem neuen Fenster geöffnet. Lösung findest Du auf Seite 8 im Script