So führt der folgende Code zu dem, was Sie darunter als Beispiel sehen:

Transkript

1 8.1 Tabellenzellen teilen Wenn Sie eine Tabelle in der Art erstellen wollen, dass sich zwei Zellen unter einer größeren befinden, dann benötigen Sie zusätzlich zum bisher Gelernten das tag <th colspan=n </th> n steht für die Anzahl Zellen nebeneinander So führt der folgende Code zu dem, was Sie darunter als Beispiel sehen: <table border> <th colspan=2>inhalt einer Zelle, die sich über 2 Spalten erstreckt</th> <td>inhalt der ersten Zelle unter der erstreckten Zelle</td> <td>inhalt der zweiten Zelle unter der erstreckten Zelle</td> </table> 8.2 Tabellen färben Zur Wiederholung: Eine kleine Tabelle ohne Linien führt mit dem folgenden HTML-Code zu folgendem Aufbau: <table > <td width = 200>1. Reihe links </td> <td width =300> 1. Reihe rechts</td> <td> 2. Reihe links</td> <td> 2. Reihe rechts</td> </table> Wenn die Tabelle komplett eingefärbt werden soll, dann muss nur im einleitenden table-tag die Farbe definiert werden (bgcolor= background color=hintergrundfarbe): <table bgcolor =yellow>... (auf dem Bildschirm gelb statt grau!) wenn jede Zelle der Tabelle anders gefärbt werden soll, dann wird die Farbe im td-tag (table data= Zelle der Tabelle) aufgeführt: <table > <td bgcolor="yellow">1. Zelle gelb</td> </td> <td bgcolor="green">2. Zelle grün</td> <td bgcolor="pink">3. Zelle pink</td> <td bgcolor="red">4. Zelle rot</td>

2 </table> so ist allerdings ein schmaler Steifen weiß zwischen den Zellen. Um das zu verhindern, können Sie das Attribut cellspacing=0 in das einleitende table-tag setzen: <table cellspacing = 0>... Oft ist es erwünscht, dass eine HTML-Seite zweigeteilt erscheint, z. B. so: Dies ist dann ebenfalls über eine Tabelle realisiert; der Code dazu: <table cellspacing=0> <td bgcolor="#ccffff" width=150 height=200> 1. Zelle hellblau</td> <td bgcolor="#08aaff" width=650> 2. Zelle himmelblau</td> </table> Auch beim nächsten Kapitel, mit dem wir uns mit Frames beschäftigen, ist es oft erwünscht, dass sich der Bildschirmteil, der als Navigationselement immer unverändert stehen bleibt, farblich vom Rest abhebt. Das kann dann ähnlich realisiert werden, nicht durch Tabellen, sondern durch die Farbgebung der einzelnen Frames. 9 Frames Mit der folgenden Abbildung aus SELFHTML wird klar, was mit dem Ausdruck Frames gemeint ist: Der Bildschirm ist in mehrere Bereiche geteilt, die unabhängig voneinander zu bedienen sind. Zum Beispiel kann der Frame links in der Abb. nur Hyperlinks enthalten, also Verweise auf Dateien, die dann rechts im größeren Fenster angezeigt werden. Jeder Frame kann über separate Bildlaufleisten verfügen. Wenn z. B. ein fester Teil in einem HTML-Projekt immer sichtbar sein soll, damit der Nutzer die Übersicht nicht verliert und gewissermaßen immer wieder zurückfindet, dann wäre es sinnvoll, in einem solchen Bereich nicht scrollen zu können: Wenn eine solche Zusammenstellung von Links auf die eigenen Seiten immer unten (oder o- ben) sichtbar ist, findet der Nutzer sich immer gut zurecht

3 Gute Hinweise dazu, wann Frames sinnvoll sind und wann man besser ohne arbeitet, findet man in SELFHTML. Hier zunächst die grundsätzliche Art des HTML-Codes in Bezug auf das Programmieren von Frames: Angenommen, Sie wollen eine HTML-Datei mit Frames in folgender Form erstellen: linker Frame Hauptfenster Dann werden dazu 5 Dateien benötigt. Zunächst einmal in völlig konventioneller Form die drei Dateien mit den Namen seite_1.html, seite_2.html, seite_3.html (der Name ist natürlich beliebig) seite_1.html seite_2.html Seite_3.html <title>seite 1</title> <h1>das ist die erste Seite</h1> <title>seite 2</title> <h1>das ist die zweite Seite</h1> <title>seite 3</title> <h1>das ist die dritte Seite</h1> Aufgabe: Erstellen Sie einen Ordner namens Frames und legen Sie in diesem Ordner die drei Dateien an. Weiter benötigen Sie ein HTML-Dokument zum Navigieren. Es enthält die Hyperlinks, die erforderlich sind, um von Seite zu Seite zu springen. Datei linker_frame.html Die Leerzeilen habe ich nur aus optischen Gründen eingefügt! Der Aufbau dieser Seite ist ebenfalls völlig normal, bis auf target="hauptfenster"

4 Es ist erforderlich, den Zielframe anzugeben (target=ziel), wenn Links in einem Frameset verwendet werden. "Hauptfenster" ist ein beliebiger, austauschbarer Name, der in der fünften Datei vergeben wird. Ansonsten werden hier nur die Hyperlinks definiert. Zur Datei index.html: Die Startseite enthält die Definition des Frameset. Beachten Sie, dass diese Datei kein body-tag enthält. Nach den einleitenden Zeilen wird sie vielmehr durch das tag <frameset> eröffnet. Die komplette Zeile <frameset cols="100,*" border="3"> bedeutet: cols Aufteilung in Spalten (=columns) die Alternative wäre rows = Zeilen cols="100,* bedeutet, dass der erste Frame links 100 Pixel breit ist, der zweite ist variabel (je nach Bildschirmgröße) border= 3 steht für den Abstand zwischen den beiden Frames. Die folgende Zeile ist die Angabe des linken Frames mit der Datei linker_frame.html <frame src="linker_frame.html" name="linkes Fenster"></frame> Mit der folgenden Zeile wird das Hauptfenster angegeben und darin die Datei seite1_html als Startseite: <frame src="seite_1.html" name="hauptfenster"/></frame> Aufgabe: Für die fiktive Gemeinde Püllen im Rheinland soll eine neue Homepage erstellt werden. Dabei sollen Frames zum Einsatz kommen. Die Seiten sollen ständig oben einen Frame zeigen, in dem beschriftete Grafiken sichtbar sind. Durch das Anklicken dieser Grafiken soll dann der Link zur gewünschten Seite erfolgen. Hier sehen Sie zunächst die Grafiken und die jeweiligen Dateinamen: freizeit_vereine.gif gemeindeverwaltung.gif gastronomie.gif gewerbe.gif kontakt.gif

5 Die kleinen gif-dateien finden Sie im Ordner Grafik: Zunächst sollen die einzelnen Seiten nur, wie in der folgenden Abbildung gezeigt wird, mit den passenden Wörtern gefüllt werden, z. B. dreimal untereinander Gemeindeverwaltung, wenn die Seite angeklickt wird: Später können die jeweiligen Seiten dann noch mit Inhalten gefüllt werden. Die ersten vier Symbole sollen zu Unterseiten führen, das Symbol wird mit einem -Link versehen <a src="grafik/kontakt.gif" Beim Erstellen müssen Sie also zunächst vier HTML-Dokumente für die Seiten haben, auf die ein Link erfolgen soll. Weiter brauchen Sie eine Datei index.html und eine, die die Hyperlinks an sich enthält, die an die vorher gezeigten Grafiken geknüpft sind. Diese Datei kann z. B. den Namen oben.html erhalten Der Aufbau z. B. der Datei Freizeit.html ist zunächst ganz simpel: HTML-Grundgerüst, innerhalb des Body-tags dreimal <title>freizeit</title> </head> Freizeit

6 das Wort Freizeit mit Zeilenwechseln. Freizeit Freizeit Die Datei index.html als Startseite enthält wieder die Definition des Frameset. Es erfolgt der Verweis auf die Datei oben.html (so soll die Datei heißen, die den oberen Frame mit den Grafiken als Verweis enthält). Als Standardseite soll die Datei gemeindeverwaltung.html im Hauptfenster erscheinen. index.html Bei der letzten Datei ist es wieder etwas schwieriger, die Grafiken als Verweis einzubauen. <a href="freizeit.html" target="hauptfenster"><img src="grafik/freizeit_vereine.gif" width="136" height="67" border="0" alt=""></a> (s. S. 11, Grafik als Link) Die Datei freizeit.html wird beim Klicken auf das Bild vereine.gif im Ordner Grafik erreicht. Die Datei oben.html muss im Grundaufbau so aussehen:

7 Es wird eine Tabelle mit einer Zeile und 5 Spalten definiert: in jeder der Zellen befindet sich die Grafik als Link: Dann ist es nur noch erforderlich, zwischen die table-data-tags den Grafikverweis zu setzen: <td> </td> hier zwischen kommt die Verweis-Zeile: <a href="freizeit.html" target="hauptfenster"><img src="grafik/freizeit_vereine.gif" width="136" height="67" border="0" alt=""></a> bitte erst selbst probieren: Datei oben.html <title>links</title> <table cellspacing=0 cellpadding=0> <tr > <td> <a href="freizeit.html" target="hauptfenster"><img src="grafik/freizeit_vereine.gif" width="136" height="67" border="0" alt=""></a></td> <td><a href="gemeindeverwaltung.html "target="hauptfenster"><img src="grafik/gemeindeverwaltung.gif" width="136" height="67" border="0" alt=""></a> </td> <td><a href="gastronomie.html" target="hauptfenster"><img src="grafik/gastronomie.gif" width="136" height="70" border="0" alt=""></a> </td> <td><a href="gewerbe.html" target="hauptfenster"><img src="grafik/gewerbe.gif" width="136" height="67" border="0" alt=""></a> </td> <td><a href="mailto:gemeinde@t-online.de"><img src="grafik/kontakt.gif" width="136" height="53" border="0" alt=""></a> </td> </table>

8 Aufgabe: Jetzt sollen die vier Dateien, die über das Frameset errechbar sind, noch komlettiert werden. Den Text finden Sie in der Textdatei Püllen.txt, die Fotos unter den angezeigten Namen. gemeindeverwaltung.html rathaus2.jpeg freizeit.html wanderweg.jpeg gastronomie.html Weinstube.jpeg

9 gewerbe.html wirtschaft.jpeg 10 Formulare Mit Formularen in HTML-Dokumenten ist es möglich, Eingaben des Benutzers bzw. Besuchers einer Internetsite zu erfassen und zunächst in der einfachen Form per zum Anbieter des HTML-Dokuments zu senden. In der Grundform handelt es sich dabei um Text- Formularfelder. Wenn sie ausgefüllt sind, werden sie über eine Absenden-Schaltfläche übertragen. Im Browser sieht dies z. B. so aus: Beim Absenden erfolgt eine Sicherheitswarnung durch den Internet Explorer: Bei OK werden die Daten abgeschickt. Wenn die Eingaben eines Formulars über zugesandt werden sollen, dann hat der einleitende Befehl die folgende Form: <form method=post enctype="text/plain">... Elemente des Formulars wie Eingabefelder, Auswahllisten, Buttons usw.... </form>

10 Wenn Firmen eigene Datenbanken auf dem Server des Providers betreiben, dann werden die Daten über ein CGI-Programm (common Gateway Interface) weitergeleitet und z. B. in der Skriptsprache Perl weiterverarbeitet. Dann sieht der einleitende tag anders aus, z. B. so: <form action="/cgi-bin/auswert.pl" method=get>... Elemente des Formulars wie Eingabefelder, Auswahllisten, Buttons usw.... </form> Nach dem einleitenden form action-tag werden dann die Formularfelder für Text so bestimmt: Name: <input name="name" size=20 maxlength=20> mit size=20 wird die Länge des Feldes festgelegt. Fehlt die Angabe maxlength, dann kann mehr Text eingegeben werden als das Feld groß ist (Text verschiebt sich). Für kleinere Formularfelder ist dies nicht sinnvoll, deshalb sollte die Angabe MAXLENGTH nicht fehlen. Zum Abschluss benötigen Sie folgenden Befehl: <input type=submit value="absenden"> <input type=reset value="abbrechen"> damit die beiden Schaltflächen zum Absenden bzw. Abbrechen gebildet werden. Der gesamte HTML-Code für das Formular lautet: <title>formular-test</title> </head> Vielen Dank für Ihr Interesse! Wenn Sie Informationsmaterial bekommen möchten, tragen Sie bitte Ihre Adresse hier ein: <form method=post enctype="text/plain"> Name: <input name="name" size=20maxlength=20> Vorname: <input type=text name="vorname" size=20 > Strasse: <input name="strasse" size=30 maxlength=30> Postleitzahl: <input name="plz" size=5 maxlength=5> Ort: <input name="ort" size=20 maxlength=20> <input type=submit value="absenden"> <input type=reset value="abbrechen"> </form> Dies führt allerdings zu der etwas verunglückten Anordnung: Deshalb ist es besser, wenn das Formular in Tabellenform aufgebaut wird. Hier wird eine 2*5- Tabelle benötigt, also mit 5 Zeilen und zwei Spalten. Das fertige Formular hat dann die folgende Codierung:

11 - 35 -