Schaele: 2015

Friday, May 22, 2015

Die Zeile der Tabelle

Ohne das Attribut align findet kein Textfluss um die Tabelle statt. Die gesamte Tabelle kann man im Browserfenster linksbündig, rechtsbündig oder zentriert ausrichten, z.B. mit <table align = "right">

Das Attribut align kann die Werte "left", "center" und "right" annehmen. Analog kann man fast alle Tabellenattribute auch nur für eine einzelne Zelle festlegen. Beispiel: <td height = "250" bgcolor = "red">.

Gibt man etwa die Höhe für eine einzige Zelle an, so gilt derselbe Höhenwert für alle Zellen in dieser Zeile. Analog: die Definition der Spaltenbreite in einer Zelle hat zur Folge, dass alle Zellen in dieser Spalte diese Breite besitzen. Deshalb sollte man die Spaltenbreite immer in der ersten Zeile der Tabelle vornehmen.

Analog zur Horizontalausrichtung (links, mitte, rechts) gibt es auch ein Attribut namens valign (= vertical align, oben, mitte, unten). Dieses Attribut kann die Werte "top", "middle" und "bottom" annehmen. Betrachte dazu folgendes.

Möchte man, dass rechts neben der Tabelle der Text weiterfließt, so schreibt man noch zusätzlich in den TABLE-tag: <table align = "left"> Schreibt man Text neben einer Tabelle, so ist oft das Attribut clear im Zeilenumbruchtag hilfreich. Dieser Zusatz verschiebt den Zeilenumbruch soweit

nach unten, bis entweder ein Rand frei ist, <br clear = "left" /> oder

<br clear = "right" />, oder beide Ränder frei sind:

Beispiel: <table border align = "right" width="50%">

Eine normale, nicht durchnummerierte Liste

Eine normale, nicht durchnummerierte (also ungeordnete) Liste wird durch <ul> eingeleitet und mit </ul> beendet. Den einzelnen Aufzählungspunkten wird automatisch ein Symbol vorangestellt. Als Symbol kann man wählen <ul type = circle | square | disc> . Jedem Listenpunkt muss im

Quelltext das Zeichen <li> vorangestellt sein, wobei li für list item steht.

<ul>

<li> dieses ist der erste Eintrag </li>

<li> jetzt kommt der nächste </li>

<li> und nun der letzte Eintrag </li>

</ul>

Hinweis: Leider ist die Darstellung in Firefox etwas anders als im Internet Explorer. Geordnete Listen werden vom Browser automatisch durchnummeriert. Sie stehen zwischen <ol> und </ol> (englisch: ordered list).

<ol>

<li> Dieser Zeile wird automatisch die Ziffer 1

vorangestellt </li>

<li> zweite Zeile </li>

<li> diese Zeile hat als Präfix automatisch die

Ziffer 3 </li>

In einer HTML-Tabelle dürfen einzelne Tabellenzellen im Prinzip leer sein. Dabei gibt es jedoch ein Problem: viele Browser stellen dann die Tabelle nicht mehr richtig dar. Aus diesem Grunde sollte jede Tabellenzelle einen Inhalt haben. Als Inhalt für leere Zellen setzt man das nicht umbrechende Leerzeichen   oder das normale Leerzeichen   selbst ein. <table> und </table> legen eine Tabelle fest. Wenn die Tabelle sichtbare Trennlinien enthalten soll, gibt man zusätzlich border an, also

<table border>. Damit sind sowohl der äußere Rahmen als auch die inneren Gitternetzlinien gemeint. Dabei ist die Strichdicke für die Trennlinien auf 1 voreingestellt.

Automatische Weiterleitung

Mit Hilfe eines Tricks im Head-teil einer HTML-Datei kann man dafür sorgen, dass die aufgerufene HTML-Datei nach einstellbarer Zeit automatisch eine andere HTML-Datei aufruft. Natürlich kann man beliebig viele Dateien derart miteinander verketten. Insbesondere mit Hilfe von Frames kann man so auch eine Dia-Show organisieren.

Zwei HTML-Dateien sollen sich gegenseitig aufrufen. Die erste sei Test1.htm, die zweite sei Test2.htm . Die Abkürzung url bedeutet Uniform Ressource Locator und gibt die genaue Adresse einer Datei an.
Der Inhalt von Test1.html sei
<html>
<head>
<title> erste Seite </title>
<meta http-equiv = "refresh" content="3;
url = test2.html">
</head>
<body bgcolor = #FF0000>
Dies ist Seite 1
</body>
</html>

Der Inhalt von Test2.html sei
<html>
<head>
<title> zweite Seite </title>
<meta http-equiv = "refresh" content = "6;
url = test1.html">
</head>
<body bgcolor = #00FF00>
Dies ist Seite 2
</body>
</html>

Natürlich kann man auch auf eine Seite im Internet weiterleiten, zum Beispiel mit der Anweisung
<meta http-equiv = "refresh" content = "6; url = http://stern.de">

Die Implementierung des gewünschten ActiveX-Controls

Mit dem Attribut classid referenziert man die Implementierung des gewünschten ActiveX-Controls (classid = class identifier = Klassenbezeichner). Die Angabe besteht aus der festen Zeichenfolge clsid: - gefolgt von der Bezeichner-ID. Diese ID muss man kennen. Im obigen Beispiel wird ein recht bekanntes ActiveXControl referenziert, nämlich dasjenige, das unter Windows zum Abspielen von

Multimedia-Dateien zuständig ist. Es bindet den Media-Player von Windows in den Bereich des definierten Objekts ein. Mit classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A" bindet man also ein ActiveX-Control ein, das es erlaubt, Sound- und Videodateien aller bekannten Formate wie WAV, AU, MID, MP3, AVI, MPEG usw. abzuspielen.

Dies funktioniert allerdings nur im Internet-Explorer.

Im object-Tag kann man auch noch bestimmen, wie oft z.B. ein Musikstück wiederholt werden soll:

Es lassen sich auch Verweise auf alle derartigen Multimediadateien anlegen. Diese werden von allen Browsern richtig erkannt. Beispiel:

<a href="Musikdateititel.mid"> Musik ? </A>

Hierbei öffnet sich automatisch die vollständige Rekorder-Tastatur.

Multimedia

Mithilfe des Einbettungstags <object> kann man Multimedia-Dateien in die eigene HTML-Seite integrieren. Bei Verwendung dieses Tags laufen die für die Multimedia-Datei benötigten, zusätzlichen Programme (die sog. PlugIns) grundsätzlich im Hintergrund ab und die erzeugten Musik- oder Videoausgaben werden direkt in das HTML-Dokument integriert.

Leider kann man nicht davon ausgehen, dass auf dem Rechner des Surfers immer alle notwendigen PlugIns installiert sind. So kann es durchaus vorkommen, dass das Abspielen von Multimedia-Dateien z.B. in Firefox funktioniert, im Internet-Explorer aber nicht oder umgekehrt. Dateien, welche Video-clips für Homepages enthalten, werden mit dem Anhängsel "*.avi" bezeichnet. Es gibt unterschiedliche Audio-Datei-Formate. Die bekanntesten haben die Datei-Anhängsel "*.mid*", "*.wav" oder "*.mp3" .

Kopiere nun eine Multimediadatei in dein Homepageverzeichnis! Gib anschließend sinngemäß eine der beiden folgenden Anweisungen:

"200" autostart = "false"> </object><br />

width = "200" autostart = "false"> </object>

Bei dem Besucher deiner Homepage wird daraufhin jeweils ein Hilfsprogramm zum Öffnen dieser Datei gestartet. Voraussetzung dafür, dass es klappt, ist also, dass der Browser des Besuchers überhaupt solche Multimediadateien lesen kann. Je nach PlugIn erscheint dann z.B. eine Recorder-Tastatur. Anklicken mit der rechten Maustaste eröffnet weitere Möglichkeiten.

Der Autostart-Parameter sorgt dafür, dass die Multimediadatei automatisch gestartet wird. Das wirkt sehr effektvoll beim Aufruf einer HTML-Seite. Folgende beiden Anweisungen sorgen im Jahr 2013 dafür, dass sowohl im Internet-Explorer als auch in Firefox das entsprechende Musikstück abgespielt

wird:

Laden von HTML-Seiten in bestimmte Frames hinein

Man kann Frames auch verschachteln. Dafür müsste man die für einen Rahmen vorgesehene Html-Datei nur durch eine weitere Frameset-Datei ersetzen (zu welcher natürlich dann auch weitere Frame-Dateien gehören).

Normalerweise kann ein Betrachter die Ausmaße eines Frames (durch Ziehen mit der Maus) ändern. Möchte man dies verhindern, so fügt man im frame-tag noch den Befehl noresize hinzu. Beispiel:

Benachbarte Frames können dann allerdings auch nicht bewegt werden. Bei unsichtbaren Framerahmen (border = "0") ist dieses Attribut jedoch nicht nötig. Hier kann man sowieso nicht die Größe der Frames verändern. Normalerweise beginnt der Inhalt eines Fensters einige Pixel vom Rand des

Fensters entfernt. Diesen Abstand kann man im frame-tag einstellen:

Unter marginwidth ist damit der linke und rechte Abstand zum Fensterrahmen gemeint, mit marginheight wird der obere und untere Abstand bestimmt. Interessant ist dabei natürlich der Einstellungswert "0".

Man kann einen Frame benennen, sodass er als Zielort für andere Html-Dateien verfügbar ist. Zum Beispiel möchte man manchmal, dass nach einem Mausklick auf einen Link (Verweis) im oberen Rahmen die zugehörige Html-Seite im unteren Rahmen dargestellt wird. Die Benennung des Zielrahmes erfolgt schon im Frame-Tag (in der Frameset-Seite):

Nun kann man bei Verweisen zu anderen Html-Dateien festlegen, dass diese z.B. im unteren Frame angezeigt werden. Dies wird sofort bei der Angabe des Sprungzieles gemacht. Zwei Beispiele:

<a href = "Testseite.html" target ="Frame_unten">zur Testseite</a> <a href = "Klassenfoto.bmp"

target = "Frame_unten">zum Bild</a>

Fehlt die Zielangabe, so erscheint die Testseite in dem Rahmen, in dem sich auch der Link befindet. Der ursprüngliche Rahmen wird dabei natürlich überschrieben und kann nur mit dem [Zurück]-Pfeil des Browsers wiedergeholt werden.

Gibt man dem Attribut target den Wert _blank, also target = "_blank", so wird das Frameset verlassen und die Testseite bzw. das Klassenfoto in einem neuen, großen Browserfenster geöffnet und die alte Seite bleibt im Hintergrund erhalten.

Ein erstes Framebeispiel

Man kann den Bildschirm in mehrere Bereiche, sog. Frames einteilen. Jeder Frame entspricht einer ganz normalen Html-Datei. Zusätzlich benötigt man eine weitere Datei, in welcher festgelegt wird, wie die Frames auf dem Bildschirm verteilt werden sollen.

Um also ein Frameset mit zwei Frames aufzubauen, benötigt man drei Dateien. Die erste Datei definiert nur das Frameset. Beispiel:
<html>
<head>
<title> Ein erstes Framebeispiel </title>
</head>
<frameset rows = "20%, 80%" border = "5">
<frame src = "ObererRahmen.html" />
<frame src = "UntererRahmen.html" />
</frameset>
</html>
Wie man sieht, ist in dieser Datei kein body-tag nötig. Auf den head-Teil hätte man ebenso verzichten können. Auf dieser Seite wird festgelegt, dass zwei Rahmen untereinander (wie Zeilen, engl. rows) angelegt werden. Die Prozentangaben beziehen sich auf die Bildschirmgröße. Alternativ kann man statt der Prozentangaben auch absolute Werte in Pixel angeben:
<frameset rows = "100, *" border = "5" />

Hierbei bedeutet das Sternchen, dass der zweite, untere Frame sich der restlichen Höhe des Bildschirms anpasst. Weiterhin gilt, dieser frame-tag muss intern abgeschlossen werden. Die beiden Html-Seiten für die beiden Frames brauchen übrigens keinen Titel in ihrem jeweiligen Head-Teil. Dieser würde sowieso nicht angezeigt. Hingegen wird der in der Frame-set-Datei angegebene Titel angezeigt. Natürlich kann man auch mehr als zwei Frames untereinander anordnen.
Zusätzlich kann man (im FrameSet-tag) die Dicke der Framebegrenzungen angeben. Möchte man die Frames nebeneinander haben, so ersetze man in dem Frameset-Tag die Angabe rows durch cols (engl. columns = Spalten).

E-Mail-Nachricht

Der Empfänger erhält dann eine entsprechende E-Mail-Nachricht. Dabei gibt es zwei Möglichkeiten: normalerweise erhält man den Formularinhalt als angehängte Datei in der E-Mail. Möchte man jedoch den Formularinhalt als Text direkt lesbar im Körper der E-Mail haben, so muss man im anfänglichen

form-tag zusätzlich das Attribut enctype = "text/plain" setzen, also:

<form action = "mailto:w.wacker@t-online.de"

method = "post" enctype="text/plain" >

In beiden Fällen erhält man beispielsweise eine E-Mail mit dem Inhalt "Lesername=Meier, VN=Katja, G=w".

Formulare müssen nicht unbedingt als E-Mail verschickt werden. Sie werden auch oft benutzt, um z.B. mithilfe von JavaScript direkt die Eingaben des Surfers auf dieser Html-Seite auszuwerten und die weitere Gestaltung dieser Html-Seite abhängig von den gemachten Eingaben zu gestalten. In diesem Fall fehlt natürlich die action-Angabe im form-tag.

Alle Eingabefelder werden durch den input-tag bestimmt. Beachte, dass alle input-tags als sog. stand-alone-tags intern geschlossen werden müssen. Das einzeilige Text-Eingabefeld im obigen Formular für den Lesernamen wird mit der sog. optischen Längenanweisung size auf eine Breite von 20 Zeichen

eingestellt. Allerdings kann der Benutzer auch mehr als 20 Zeichen eintragen, es sei denn, der input-tag enthält noch mit maxlength eine Begrenzung für die maximale Zeichenzahl. Mit value kann man schon sog. Default-Werte eingeben, die sich aber überschreiben lassen. Mit input type = "submit" wird

die Aktion durchgeführt, die im anfänglichen form-tag steht.

Formulare

Es besteht die Möglichkeit, dass der Leser auf deiner Homepage Daten in Formulare einträgt. Diese Formulare kann man später mit Hilfe von JavaScript auswerten. Für eine Auswertung einer großen Anzahl von Formularen gibt es (auch kostenlose) Hilfsprogramme, die oft in der Programmiersprache Perl geschrieben sind.

Es besteht allerdings auch die Möglichkeit, dass die ins Formular eingetragenen Daten automatisch als E-Mail zu deiner bzw. zu einer angegebenen Adresse geschickt werden. Natürlich funktioniert das nur, wenn der Besucher deiner Homepage in seinem eigenen Rechner ein funktionierendes E-Mail-Prog-ramm installiert hat.

Im Folgenden werden wir uns auf die Erstellung von Formularen beschränken.

Einzeilige Eingabefelder. Jedes Formular wird durch <form> eingeleitet und mit </form> geschlossen.

Diese Formulare müssen natürlich im Body-Teil der Html-Seite stehen.

Horizontal Menu

Friday, May 22, 2015

Die Zeile der Tabelle

Eine normale, nicht durchnummerierte Liste

Automatische Weiterleitung

Die Implementierung des gewünschten ActiveX-Controls

Multimedia

Laden von HTML-Seiten in bestimmte Frames hinein

Ein erstes Framebeispiel

E-Mail-Nachricht

Formulare

Total Pageviews

...