HTML-Tutorial von Teach-Soft, Ulrich Hirschmann: info@teach-soft.com

HTML - Tutorial
Fortgeschrittene

2


 

Formulare Frames Javascript
Button Links Tabelle
Meta / iframe VB-Script  Seiten in Seiten einbinden

 

Formulare
FORMULARE werden zur Eingabe von Daten verwendet. Dafür stehen dann verschiedene Eingabeobjekte wir Textfelder, Auswahlkästchen, Schalter, usw. zur Verfügung. Eine detaillierte Erklärung dazu finden Sie im Javascript-Tutorial

Allgemeine Struktur eines Formulares:

<form name="form1" action="cgiprogramm.pl" method="post">
<input type="text" name="texteingabe">
</form>

Diese Objekte können in Formularen eingesetzt werden. Kurzübersicht:

Objekt Bedeutung
button Schalter
<input type="button" name="s1" value="Klick!"> 
checkbox Auswahlkasten
<input type="checkbox" name="cb1">
hidden Versteckter Datenspeicher
<input type="hidden" name="hd" value="Das ist eine geheime Information!">
text Textfeld
<input type="text" name="texteingabe" size="30">
radio Radioschalter. Immer nur ein Schalter aus einer Gruppe kann aktiviert sein.
<input type="radio" name="r1"> 
reset Schalter zum Zurücksetzen des Formulars.
<input type="reset" value="Zurück setzen">
submit Schalter zum Versenden des Formular.
<input type="submit" value="Versenden">
textarea mehrzeiliges Textfeld 
<textarea name="ta" cols="70" rows="4"></textarea>
select Auswahlliste
<select><option>1.Eintrag<option>2.Eintrag</select>
password Textbox zur Eingabe von Kennworten.
<input type="password" name="pw" size="20">
file Dateiauswahlbox
image Grafischer Schalter

 

Button
Wird nur ein Schalter benötigt kann dieser ohne zugehöriges Formular mit dem Befehl <button> erstellt werden. Beispiel:

<button name="b1">Klick mich!</button>
 

 

 Frames

HTML-Dokumente können in mehrere Bereiche FRAMES unterteilt werden, die jeweils wieder aus einem HTML-Dokument bestehen. In diesem Beispiel ist links eine Seite Liste.htm für die Navigation und rechts die eigentliche Hauptseite die den jeweiligen Inhalt anzeigt. Dazu wird eine HTML-Seite als Startseite benötigt die die Framedefinition beinhaltet. HTML-Referenz zu Frames


Das Grundgerüst für ein Frame-Dokument index.htm
Erklärung
<html>
<head>
<title>Framebeispiel</title>
</head>
<frameset cols="170,*" border=0 frameborder=0 framespacing=0>
     <frame src="liste.htm" name="liste" scrolling="no" noresize>
      <frame src="start.htm" name="Hauptfenster" border=0>
  </frameset>
<body bgcolor=#ffffff>
</body>
</html> 
siehe unten
 

 

Der Befehl <frameset...> legt fest welche Fenster in welcher Größe verwendet werden sollen. cols teilt in Spalten, rows in Zeilen. Das Zeichen * steht als Platzhalter für den Rest des Bildschirmes. <frame...> bestimmt welche Seiten in den jeweiligen Teilfenstern geladen werden sollen. Durch name="Hauptfenster" wird festgelegt wie die Seite dann angesprochen werden kann. scrolling="no" und noresize verhindern die Darstellung von Scrollbars. frameborder=0 legt die Rahmenbreite auf 0 fest. framespacing=0 bestimmt den Abstand zwischen den Rahmen.
 
Eine einfache Version einer Liste: liste.htm
Erklärung
<html><head>
<title>Liste</title>
</head><body BGCOLOR="#cccccc">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td><a href="start.htm" target="Hauptfenster"> Start </a></td><tr>
    <td><a href="seite1.htm" target="Hauptfenster"> Seite1 </a></td><tr>
    <td><a href="seite2.htm" target="Hauptfenster"> Seite2 </a></td><tr>
</tr></table>
</body></html>
Durch den Zusatz target="Hauptfenster" wird bei den Links festgelegt in welchem Frame die HTML-Seite erscheinen soll.

 

 

 
Übung 2.1
Kopiere die Beispiele in eigene HTML-Dateien und erstelle ein funktionierendes Frame-Dokument wie in der Vorlage. Dazu müssen zwei neues Seiten seite1.htm und seite2.htm erstellt werden. In diesen braucht nur der Seitenname stehen.

 

Übung 2.2
Ändere die Frames so, dass die Liste rechts angeordnet ist.

Kurze Zusammenfassung der wichtigsten Frame-Eigenschaften. HTML-Referenz zu Frames
frameset Startbefehl für einen Frame. <frameset rows="50,*" cols="100,*">
scrolling Scrollbars. <frame src="p1.htm" name="f1" scrolling=yes|no|auto> 
marginwidth Abstand zum Rahmen. 
marginheight Abstand zum Rahmen.
noresize Fenstergröße unveränderbar.
framespacing Freiraum zum Rand.
frameborder Rahmenbreite
bordercolor Rahmenfarbe
target Zielframe festlegen.    <a href="start.htm" target="f1">Zur Startseite.</a>
target="_blank"  (Neues Fenster)
target="_parent" (Neue Seite erscheint im aktuellen Fenster.)
target="_top" (Neue Seite erscheint im gesamten Browserbereich.)

 

 

 Javascript
Mittels JAVASCRIPT kann im HTML-Text ein Programm geschrieben werden welches dann durch den Browser ausgeführt wird. JAVA-APPLETS können von HTML-Dokumenten geladen und gestartet werden. Siehe dazu das JavaScript-Tutorial für den Unterricht. JavaScript wird von beiden Browsern unterstützt. Jedoch ist die modernere Variante bei Microsoft zu finden und heißt dort JScript.
 

 

 VB-Script

Eine eigene Scriptsprache hat die Firma Microsoft in ihren Browser eingebaut. Dieser entspricht der hauseigenen Programmiersprache Visual Basic und ist natürlich im Netscape-Browser nicht zu verwenden.

 

 

Tabelle 

Kurze Zusammenfassung der wichtigsten Tabelleneigenschaften. HTML-Referenz zu Tabellen
align Ausrichten der Tabelle. <table border align=left|center|right>
hspace Horizontaler Abstand zum umgebenden Text. <table border hspac=20 vspace=30>
vspace Vertikaler Abstand zum umgebenden Text. 
cellspacing Breite der Zellumrandungen <table border=x cellspacing=2 cellpadding=5>
cellpadding Freiraum zwischen Zelle und Zellumrandung.
frame Einstellen der Zellumrandung. <table border frame=box|void|above|below|hsides|vsides|lhs|rhs>
rules Einstellen der Zellumrandung zwischen Zeilen (rows) und Spalten (cols). <table border rules=none|rows|cols|groups|all>
width Breite.<table border width=60% height=200>
height Höhe. <td height=40>
nowrap Kein Zeilenumbruch. <td nowrap>
align Zellen horizontal  ausrichten. <td align=left|center|right>
valign Zellen vertikal  ausrichten. <td valign=top|middle|bottom>
bgcolor Hintergrundfarbe. <th bgcolor=#00ff00>
colspan Verbindet mehrere Spalten. <td colspan=2>
rowspan Verbindet mehrere Zeilen. <td rowpan=2>
bordercolor Rahmenfarbe
bordercolordark dunkle Schattenfarbe
bordercolorlight helle Schattenfarbe
background Hintergrundgrafik. <td background="dot.gif">
caption Tabellenüberschrift.    <caption align=top|bottom|left|right>Überschrift</caption>

 

 

Meta 

Mit dem Meta-Befehl können zusätzliche Befehle an den Browser oder z.B. Inhaltsangaben für Suchmaschinen gegeben werden. HTML-Referenz zu META
<META   NAME="name"  HTTP-EQUIV="FieldName"
  CONTENT="value">
Syntax: Entweder NAME oder HTTP-EQUIV verwenden.
<META NAME="description" CONTENT="HTM-Tutorial für die Schule."> Kurzbeschreibung für Suchmaschinen.
<META NAME="keywords"  CONTENT="HTML, Schule, Unterrichtsmaterial"> Stichworte für Suchmaschinen.
<META NAME="author"  CONTENT="Ulrich Hirschman"> Autor
<META HTTP-EQUIV="expires" CONTENT="Sun, 28 Dec 1997 09:32:45 GMT"> Ablaufdatum der Seite.  0 bedeutet: sofortiges Neuladen.
<META HTTP-EQUIV="Refresh" CONTENT="2;URL=http:nextdoc.html"> 2 Sekunden Wartezeit bis zum Neuladen. Durch die URL wird dann automatisch ein anderes Dokument geladen.
<META HTTP-EQUIV="Set-Cookie"  CONTENT="cookievalue=abc;expires=Friday, 31-Dec-99 23:59:59 GMT; path=/">  Setzt einen Cookie.

Cookies sind kleine Dateien die bis zu 3 Monaten auf dem Rechner des Users gespeichert werden können. Dadurch kann z.B. überprüft werden wann der User zuletzt eine Seite aufgerufen hat. Cookies können im Browser ausgeschaltet werden.

 

 

Links 
Die wichtigsten Infos finden sich bei msdn.microsoft.com.

Netscape-Dokumentation
Netscape-HTML
Gutes HTML- und JAVASCRIPT-Tutorial: http://www.netzwelt.com/selfhtml/
The official HTML specification: http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html
How to Write HTML Files: http://www.ucc.ie/info/net/htmldoc.html

 

 

Seiten in Seiten einbinden

HTML-Dokumente können in anderen HTML-Dokumenten eingebunden werden. Dieses ist praktisch um Navigationsmenüs auf allen Seiten einer Homepage einzubinden und in nur einer Datei verwalten zu können. Das Web muss dazu natürlich auf einem Microsoft-Server gehostet werden. 

Folgender Code wird dann eingefügt:
<!--webbot bot="Include"
U-Include="liste.htm" TAG="BODY" -->

Unabhängig vom Server ist folgender Code:
<object type="text/x-scriptlet" width=100% height="250" data="data.htm">
</object>

 

 iframe
Durch iframes ist es möglich ein anderes HTML-Dokument in ein bestehendes einzubinden. Dabei kann u.a. die Größe des Frames und der Rahmen verändert werden.
 
iframe
<html><head></head><body>
<center>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="600">
<tr>
<td width="100%"><font size="6">Beispiel zu iframe</font></td>
</tr>
<tr>
<td width="100%">&nbsp;<p>
<IFRAME FRAMEBORDER=1 SRC="http://www.teach-soft.com" width=598 height=200></IFRAME>
</td></tr></table>
</center>
</body></html>
 

Näheres dazu unter msdn.microsoft.com.