Copyright: Editor 3.0 light Hilfe ® 1996 by Dirk M. Bruederle


Inhalt
HTML-Text Editor 3.0 light- Inhalt

1. Allgemeine Hinweise

2. Autor & Copyright

3. Update & Lizenz

4. Grundfunktionen des Texteditors, Programmoberfläche

5. Menübefehle

6. Speedpanel

7. Dialoge

8. Eine kleine Einführung in HTML

9. Tastaturbelegung


Allgemeines
HTML-Text Editor 3.0 light- Allgemeine Hinweise

Inhalt

1. Die Entwicklung des Texteditor

Eigentlich war der Texteditor nur ein Übungsprogramm, um mich in Delphi einzuarbeiten. Bis zum 01.01.1996 habe ich noch nie in PASCAL programmiert (Bis zu diesem Zeitpunkt hatte ich nur Programmiererfahrung in »BASIC, Profan², Paradox ObjectPAL und dem Multimedia Autorensystem RSE-Author«).

Texteditor v 1.0

Diese Version war ein einfacher Texteditor ohne besonderen Leistungsumfang.

Leistungsmerkmale:

•	MDI Technologie

•	Suchen und Ersetzen Funktionen

•	Einstellung der Schriftart der Editors

•	Eingebaute Uhr

•	Automatische Erstellung einer Sicherheitskopie (.bak) einer geöffneten Datei

•	Große Auswahl an Dateifiltern

•	Automatischer Wortumbruch

Texteditor v 1.1 bis 1.9

Interne Arbeitsversionen die nie erhältlich waren.

Texteditor v 2.0 beta r0.0

Dies war die erste Version die erhältlich war, diese Betaversion enthielt noch keine Hilfe und hatte noch einige kleine Fehler z. B. wurde die Größe der Schrift noch nicht richtig gespeichert.

Leistungsmerkmale:

•	MDI Technologie

•	Suchen und Ersetzen Funktionen

•	Einstellung der Schriftart der Editors

•	Eingebaute Uhr ist weggefallen

•	Automatische Erstellung einer Sicherheitskopie (.bak) einer geöffneten Datei

•	Große Auswahl an Dateifiltern

•	Automatischer Wortumbruch

•	Automatisch Umlautfunktion

•	OEM zu ANSI zu OEM Konvertierung

•	Drag And Drop

•	HTML-Funktionen wie

Helfer zur Tabellenerstellung

Helfer zur Listenerstellung

Auswahl ein HTML-Viewers

HTML-Text Editor 3.0 light

Dies ist die Aktuelle vorliegende Version des Texteditors.


Autor und Copyright
HTML-Text Editor 3.0 light- Autor & Copyright

Inhalt

Dirk M. Brüderle

Datenbank- Softwareentwicklung, Grafik und Design

Anschrift siehe untenstehende Adresse!

Wenn Sie ein Angepaßtes Programm, einen Katalog oder HTML-Seiten programmiert haben möchten, schreiben Sie mir doch einfach eine E-Mail.

Anschrift:

Dirk M. Brüderle Softwareentwicklung

Turmstr. 9

71032 Böblingen

Tel.:   07031-228213

FAX : 07052-920936

E-Mail: Dirk_Bruederle@compuserve.com

E-Mail: Dirk MB@aol.com

Compuserve: 106252,126

Homepage: http://ourworld.compuserve.com/homepages/Dirk_Bruederle

(hier bekommen Sie aktuelle Informationen zu meinen Programmen.)

Copyright:

© 1997 by Dirk M. Brüderle Softwareentwicklung

Dieses Programm, ist durch nationale und internationale Gesetze urheberrechtlich geschützt.

Dieses Programm und dazugehörige Dateien, dürfen nicht verändert, decompiliert oder sonstwie manipuliert werden. Sind in diesem Programm oder Softwarepaket Dateien enthalten, die verändert, oder für privaten oder kommerzielle Bedarf verwendet werden dürfen, so wird darauf gesondert hingewiesen!

Händleranfragen erwünscht!


Lizensvereinbarung
HTML-Text Editor 3.0 light- Update & Lizenz

Inhalt

Lizenzbestimmungen

Bitte lesen Sie die folgenden Punkte aufmerksam durch, bevor Sie Gebrauch von dieser Software machen. Sie erklären sich mit den

folgenden Bestimmungen einverstanden wenn Sie die Software benutzen.

HTML-Text Editor 3.0 light

Der HTML-Text Editor 3.0 light ist eine Vollversion!

Vollversion

Diese Software ist Freeware. Die Freeware berechtigt Sie, die Software unverbindlich und ohne Einschränkungen zu benutzen und weiterzugeben!

Weitergabe der Freeware Version

Sie dürfen diese Version weitergeben, wenn Sie alle Programmteile und Daten mit weitergeben.

Die Programmteile und Daten, die mit weitergegeben werden müssen, finden Sie in der Textdatei: FILELIST.TXT

Registrierte Version

Die Registrierung, können Sie über das Bestellformular absenden!

Vorteile der Registrierten Version.

Ausschluss von Garantieansprüchen

Es wird keinerlei Haftung für Schäden, die direkt oder indirekt aus dem Gebrauch dieser Software entstehen übernommen. Ebenso werden

jegliche Ansprüche bezüglich Funktionalität, Eignung für einen bestimmten Zweck, Datenintegrität oder Datenschutz abgelehnt.

Update

Nur als registrierter Benutzer haben Sie ein Anrecht auf das Update auf die HTML-Text Editor 3.0 plus Version


Grundfunktionen des Texteditors
HTML-Text Editor 3.0 light- Grundfunktionen, Programmoberfläche

Inhalt

Klicken Sie einfach in dem Bild den Bereich an, der Sie Interessiert!

Vorgehensweise zum Erstellen einer Textdatei

Gehen Sie über entweder über den Menüpunkt »Datei|Neu« oder klicken Sie den Button [image] in dem Speedpanel an oder benutzen Sie die Tastenkombination »STRG+N« um eine neues Dokument zu erstellen.

Achten Sie darauf, das die Funktion Automatische Umlaute abgeschaltete ist. Sie erkennen das daran, das der Schalter [image] sich nicht im gedrückten Zustand [image] befindet oder das der Menüpunkt »Editoroptionen|Auto Umlaute« nicht abgehakt ist.

Sie können diese Funktion über die »F6-Taste« ein- und ausschalten.

Wenn Sie Ihren Text fertig geschrieben haben Speichern Sie Ihren Text mit einer entsprechenden Endung.

Vorgehensweise zum Erstellen eines HTML Dokumentes

Gehen Sie über entweder über den Menüpunkt »Datei|Neu« oder klicken Sie den Button [image] in dem Speedpanel an oder benutzen Sie die Tastenkombination »STRG+N« um eine neues Dokument zu erstellen.

Nun können Sie die Funktion Automatische Umlaute verwenden.

Dies Funktion konvertiert beim Eingeben die deutschen Umlaute in die entsprechende HTML Zeichenfolge z. B. Ä zu &Auml;, ß zu &szlig;.

Als nächstes wählen Sie das Grundgerüst eines HTML Dokumentes aus.

Das machen Sie über das Speedpanel Grundgerüst

Verwendung von Tabulatoren

Verwenden Sie Tabulatoren am besten zur Optischen Aufgliederung des Textes.

Beispiel:

<ol type=A>

<li>Dies ist die erste Zeile</li>

 	<li>Dies ist die zweite Zeile</li>

 	<li>Dies ist die dritte Zeile</li>

</ol>

In HTML-Dokumenten tauchen die Tabulatoren nicht auf!

obiges Beispiel sieht in einem Browser so aus:

A.	Dies ist die erste Zeile

B.	Dies ist die zweite Zeile

C.	Dies ist die dritte Zeile

Hinweise zum markiertem Text

Wenn Sie einen Textbereich oder den ganzen Text markiert haben, können Sie diesen markierten Bereich in Tags einfassen.

Z. B.

Leistungsmerkmale des HTML-Text Editor 3.0 light

•	MDI Technologie

•	Suchen und Ersetzen Funktionen

•	Einstellung der Schriftart der Editors

•	Automatische Erstellung einer Sicherheitskopie (.bak) einer geöffneten Datei

•	Große Auswahl an Dateifiltern

•	Automatischer Wortumbruch

•	Automatische Umlautfunktion (für HTML-Dokumente)

•	Verwendung von Tabulatoren

•	OEM zu ANSI zu OEM Konvertierung

•	Drag And Drop

•	HTML-Funktionen wie

Helfer zur Tabellenerstellung

Helfer zur Listenerstellung

Auswahl ein HTML-Browsers

Starten des ausgewählten Browsers über einen Schalter (Mit Übergabe der Datei, die betrachtet werden soll)


Dateifilter
Was ist ein Dateifilter?

Über einen Dateifilter können Sie die Eigenschaften festlegen welche Dateien in der Dateiliste erscheinen sollen. Das ermöglicht Ihnen eine gezieltere Suche nach einer bestimmten Datei

z. B. der Dateifilter= HTML Seiten(*.htm) zeigt Ihnen alle Dateien mit der Endung htm an.


Was heißt Browser?

Kommt aus dem Englischen von "to browse" und bedeutet »blättern«.

Ein Browser ist also ein Programm um Dokumente im HTML-Format darzustellen und die Befehle des HTML-Standards umzusetzen z.B. Netscape Navigator, Spry Mosaic u.v.a.


Menü Datei

Menü Bearbeiten

Menü Optionen

Menü Weitere Tags

Menü Tags

Menü Helfer

Menü Tools

Menü Fenster

Menü Hilfe


Menü Datei
HTML-Text Editor 3.0 light Menü Datei

Inhalt	Grundfunktionen des Texteditors

Neues Dokument

Dokument Öffnen

Dokument Speichern

Dokument Speichern unter

Drucken

Drucker Setup

Fenster Schließen

Beenden


Menü Bearbeiten
HTML-Text Editor 3.0 light Menü Bearbeiten

Inhalt	Grundfunktionen des Texteditors

Rückgängig

Ausschneiden

Kopieren

Einfügen

Löschen

Alles auswählen

Suchen

Weitersuchen

Ersetzen

ANSI zu OEM

OEM zu ANSI

Umlaute zu HTML

HTML zu Umlauten


Menü Optionen
HTML-Text Editor 3.0 light Menü Optionen

Inhalt	Grundfunktionen des Texteditors

Wortumbruch

Auto Umlaute

Tabulatoren verwenden

Tabulatorposition

Nur Lesen

Symbolleiste

Einstellungen


Menü Weitere tags
HTML-Text Editor 3.0 light Menü Weitere tags

Inhalt	Grundfunktionen des Texteditors

tags zeigen

Dialog Plugin Tags


Menü Tags
HTML-Text Editor 3.0 light Menü Tags

Inhalt	Grundfunktionen des Texteditors

Unter diesem Menüpunkt finden Sie alle Tags, die Sie auch über die Speedbuttons eingeben können.

Weiterhin finden Sie hier die Tags, für die keine Speedbuttons vorhanden sind.

Für folgende Menüpunkte sind noch keine Speedbuttons vorhanden:

Meta Information

Basereferenz

Glossar-Anfang

zu definierender Ausdruck

Definition

Glossar-Ende

Schriftart

Alle Schrifteinstellungen

Frameset

Frame

Noframe

Basetarget

Target

Embed

Marquee


Menü Helfer
HTML-Text Editor 3.0 light Menü Helfer

Inhalt	Grundfunktionen des Texteditors

E-Mail an Name einfügen

E-Mail an Firma einfügen

Verweis zur eigenen Homepage einfügen

Adresse einfügen (Name)

Adresse einfügen (Firma)

Updatedatum einfügen

Meta Informationen

Zeit


Fügt automatisch folgende Meta-Informationen in das Dokument ein:

<meta name="GENERATOR" content="HTML-TextEditor 3.0r6b light">

<meta name="author" content="">

<meta name="description" content="Schreiben Sie hier eine Beschreibung">

<meta name="keywords" content="Schreiben Sie hier Stichworte">

<meta http-equiv="Erstellt" content="Montag, 31 März 1997, um 15:46">

<!-- Diese Seite wurde mit dem HTML-TextEditor 3.0 light erstellt! -->


Über das Untermenü können Sie eine Zeit-, Datums- und Zeit+Datumsangabe in Ihr Dokument einfügen.


Menü Optionen
HTML-Text Editor 3.0 light Menü Tools

Inhalt	Grundfunktionen des Texteditors

Unter diesem Menüpunkt werden die von Ihnen, in den Einstellungen auf der Seite Tools, eingetragene Programme zur Verfügung gestellt.


Menü Fenster
HTML-Text Editor 3.0 light Menü Fenster

Inhalt	Grundfunktionen des Texteditors

Nebeneinander

Überlappend

Symbole anordnen

Vorheriges

Nächstes

Ganzes Fenster


Menü Hilfe
HTML-Text Editor 3.0 light Menü Hilfe

Inhalt	Grundfunktionen des Texteditors

Inhalt

Index

Tastatur

Tips zeigen

Info


Ruft den Index (alt Stichwortverzeichnis) der Hilfedatei auf.


Ruft die Seite mit allen Befehlen des und Tags des Editors auf.


Ruft die Tastaturbelegung des Editors auf.


Blendet die Tips in einer Speedbar ein.


Standard

Grundgerüst

Text und Absatz

Weitere Textfunktionen

Tabellen und Listen

Verweise und Referenzen

Formulare

Sonderzeichen 1 - 4


Standard Panel
HTML-Text Editor 3.0 light- Speedpanel Standard

Inhalt	Grundfunktionen des Texteditors


Grundgerüst
HTML-Text Editor 3.0 light- Speedpanel Grundgerüst HTML

Inhalt	Grundfunktionen des Texteditors

Auf dieser Seite der Speedpanels, finden die Grundstruktur eines HTML-Dokumentes.


Text und Absatz
HTML-Text Editor 3.0 light- Speedpanel Text und Absatz

Inhalt	Grundfunktionen des Texteditors

Auf dieser Seite der Speedpanels, finden Sie die wichtigsten HTML-Funktionen.


Weitere Texfunktionen
HTML-Text Editor 3.0 light- Speedpanel Weitere Textfunktionen

Inhalt	Grundfunktionen des Texteditors

Auf dieser Seite der Speedpanels, finden Sie weitere Textfunktionen.

Der Text der Schalter ist auch gleichzeitig das Tag das eingefügt wird!


Tabellen und Listen
HTML-Text Editor 3.0 light- Speedpanel Tabellen und Listen

Inhalt	Grundfunktionen des Texteditors

Auf dieser Seite der Speedpanels, finden alle Listen- und Tabellenhelfer


Verweise und Referenzen
HTML-Text Editor 3.0 light- Speedpanel Verweise und Referenzen

Inhalt	Grundfunktionen des Texteditors

Auf dieser Seite der Speedpanels, finden Sie alle Helfer für Verweise und Referenzen.


Formulare
HTML-Text Editor 3.0 light- Speedpanel Formulare

Inhalt	Grundfunktionen des Texteditors

Auf dieser Seite der Speedpanels, finden alle Helfer zum Erstellen von Formularen


Sonderzeichen
HTML-Text Editor 3.0 light- Speedpanel Sonderzeichen 1 - 4

Inhalt	Grundfunktionen des Texteditors

Mit diesen Speedpanels, können Sie Sonderzeichen auf Ihrer Seite verwenden. Klicken Sie einfach das Zeichen an, das Sie verwenden möchten.


Anker setzen

Ausführungsbutton

Auswahlliste

Benutzerangaben

Browser wählen

Check Button

Einstellungen

Einzeiliges Editierfeld

Formular

Grundgerüst

Hintergrundbild

Hintergrundfarbe

Hintergrundmusik

Info

Inline Image

Listen

Mailadresse

Mehrzeiliges Editierfeld

PlugIn Tags

Tabellen

Tabulatoren setzen

Textfarbe

Trennlinien

Urls

Radio Button

Verweis zu anderen Dateien

Verweis zu Anker

Neue Dialoge:

Alle Schrifteinstellungen

Basereferenz

Basetarget

Embed

Frame

Frameset

Marquee

Meta Information

Schriftart

Target


Dialog Anker setzen
HTML-Text Editor 3.0 light Dialog Anker setzen

Inhalt	Grundfunktionen des Texteditors	Speedpanel Verweise und Referenzen

Mit diesem Dialog, setzen Sie einen Anker in Ihrem Dokument. Markieren Sie hierzu das Wort das Sie als Anker verwenden wollen (Es kann auch ein Anker ohne Markierung gesetzt werden) und klicken Sie dann den Schalter "Anker setzen" an. In dem Dialog geben Sie dann den Namen des Ankers an. Wenn Sie später dann von einer anderen Stelle des Dokumentes zu diesem Anker springen wollen, dann setzen Sie einen Verweis zu dem Anker ein.


Dialog Ausführungsbutton
HTML-Text Editor 3.0 light Dialog Ausführungsbutton

Inhalt	Grundfunktionen des Texteditors	Speedpanel Formular

Mit diesem Dialog, setzen Sie in einem Formular einen Ausführungsschalter. Die Ausführungsschalter werden für Zwei Zwecke verwendet:

1. Der reset-Schalter wird verwendet um die gemachten Eingaben zu löschen.

2. Der submit-Schalter wird verwendet um das Formular abzusenden.


Dialog Auswahlliste
HTML-Text Editor 3.0 light Dialog Auswahlliste

Inhalt	Grundfunktionen des Texteditors	Speedpanel Formular

Die Auswahlliste wird in einem Formular dazu verwendet um einem Anwender eine Auswahl aus vorgegebenen Werten zu treffen.


Geben Sie hier den Namen der Auswahlliste ein. Unter diesem Namen erscheint in der Rückantwort die getroffene Auswahl.


Geben Sie hier die sichtbare Größe der Auswahlliste ein.


Wenn Sie hier abhaken, erlauben Sie die Mehrfachauswahl von Listeneinträgen.


Hier stellen Sie den von Ihnen verwendeten Browser ein. Diese ausgewählte Browser wird dann verwendet um Ihre Seite zu testen. Um Ihre Seite zu testen, müssen Sie wenn Ihre Seite eine neu erstellte Seite ist, dies erst  einmal speichern, klicken Sie dann auf den Schalter HTML-Seite testen es wird dann der ausgewählte Browser geladen und Ihre Seite angezeigt.

Mit dem Speedbutton, können Sie einen Dialog zum suchen nach dem Browser öffnen.


Hier geben Sie Ihre persönlichen Daten ein, diese Daten werden von den Helfern verwendet.

Z. B. wird Ihre Adresse von dem Helfer Adresse einfügen (Name) verwendet.


Dialog Check Button & Radio Button;
HTML-Text Editor 3.0 light Dialog Check Button & Radio Button

Inhalt	Grundfunktionen des Texteditors	Speedpanel Formular

Radio- und Checkbuttons werden in Formularen dazu verwendet eine Auswahl zu treffen.


Dialog Einstellung des Editors
HTML-Text Editor 3.0 light Dialog Einstellung

Inhalt	Grundfunktionen des Texteditors	Menü Optionen

Hier können Sie die Einstellungen des Editors ändern.

Beim ersten Start des Editors, werden einige Grundeinstellungen automatisch erledigt!

Weiterhin wird dieser Dialog automatisch beim ersten Start aufgerufen.


Hier können Sie die Schriftart des Editor ändern. Die von Ihnen ausgewählte Schriftart wird gespeichert, so das bei dem nächsten Aufruf des Editors diese wieder verwendet wird.


Hier werden die Zusatz Programme in der Reihenfolge angezeigt, wie Sie unter dem Menüpunkt Tools erscheinen.

Um ein Programm zu ändern, verschieben oder zu löschen, müssen Sie es auswählen.


Mit diesen Speedbuttons können Sie die Programme in der Reihenfolge ändern.


Hier erfolgen die Einstellungen der verwendeten Zusatzprogramme.

Wenn Sie einen Menüteiler erstellen wollen, geben Sie einfach als Titel ein minus ein.

Ein vorangestelltes & vor einem Buchstaben erzeugt einen direkt anwählbaren Menüpunkt.

Mit dem Schalter Durchsuchen können Sie nach einem Programm suchen, es werden dann der ausgewählte Programmname und Pfad übernommen.


HTML-Text Editor 3.0 light Dialog Einzeiliges Editierfeld

Inhalt	Grundfunktionen des Texteditors	Speedpanel Formular

Einzeilige Editierfelder werden in Formularen zur Eingabe von einfachen Daten verwendet. Z. B. Adresseingaben, Suchbegriffe u. s. w.


Dialog Grundgerüst Formular
HTML-Text Editor 3.0 light Dialog Formular

Inhalt	Grundfunktionen des Texteditors	Speedpanel Grundgerüst

Mit diesem Dialog erstellen Sie das Grundgerüst eines Formulars.


Dialog Grundgerüst
HTML-Text Editor 3.0 light Dialog Grundgerüst

Inhalt	Grundfunktionen des Texteditors	Speedpanel Grundgerüst

Mit diesem Dialog, erstellen Sie das Grundgerüst einer HTML-Seite.

Wenn Sie eine Textdatei in eine HTML-Datei umwandeln möchten, können Sie das ebenfalls über diesen Dialog erledigen. Öffnen Sie dazu die Textdatei die Sie verwenden möchten, und Klicken Sie dann den Schalter "WWW Seiten Grundgerüst" an, in die Textdatei wird dann das Grundgerüst einer HTML-Seite eingefügt.


Dialog Hintergrundeinstellungen
HTML-Text Editor 3.0 light Dialog Hintergrundeinstellungen

Inhalt	Grundfunktionen des Texteditors	Speedpanel Grundgerüst

Mit diesem Dialog, fügen Sie Ihrer Seite ein Hintergrundbild ein.

Um diesen Dialog zu verwenden, muß ein Grundgerüst vorhanden sein!


Mit diesen beiden Radiobuttons, können Sie bestimmen ob Sie einen internen oder externen Link erstellen wollen.


Hier können Sie ein vorgefertigtes Protokoll auswählen. Sie können aber auch ein neues Protokoll erstellen.


Geben Sie hier den Namen des Servers an, zu dem der Link führen soll.


Wenn Sie diesen Button abhaken, so wird nach dem Suchen einer Datei der lokale Pfad der Datei verwendet. Diese Funktion sollten Sie nur verwenden, wenn Sie eine Intranethomepage gestalten.


Wählen Sie aus dieser Liste den Typ des Verweises aus. Alternativ können Sie auch einen neuen Typ angeben.


Geben Sie hier den Namen der Datei an, auf die verwiesen wird.


Gebe Sie hier den Anker der Datei auf die Verwiesen wird ein.


Geben Sie hier den Namen des Frames an in dem die Datei Angezeigt werden soll.


Geben Sie hier den Namen des Frames an in dem die Datei Angezeigt werden soll.


Hiermit bestimmen Sie den Mindestabstand zwischen dem linken bzw. rechten Fensterrand.


Hiermit bestimmen Sie den Mindestabstand zwischen dem oberen bzw. unteren Fensterrand.


Mit dieser Funktion erzwingen (scrolling=yes) oder unterdrücken (scrolling=no) Sie eine Bildlaufleiste in einem Frame.


Hiermit erzeugen Sie einen nicht änderbaren Frame.


Musteranzeige. Hier sehen Sie verschiedene Auswirkungen der von Ihnen vorgenommenen Änderungen.


Öffnet den Farbdialog zum festlegen einer Hintergrundfarbe.


Öffnet den Farbdialog zum festlegen einer Textfarbe.


Öffnet den Farbdialog zum festlegen einer Linkfarbe (noch nicht besuchter Link).


Öffnet den Farbdialog zum festlegen einer Linkfarbe (besuchter Link).


Öffnet den Farbdialog zum festlegen einer aktiver Link (beim anklicken des Links).


Dialog Hintergrundfarbe
HTML-Text Editor 3.0 light Dialog Hintergrundfarbe

Inhalt	Grundfunktionen des Texteditors	Speedpanel Grundgerüst

Mit diesem Dialog, Stellen Sie die Hintergrundfarbe Ihrer HTML-Seite ein.

Um diesen Dialog zu verwenden, muß ein Grundgerüst vorhanden sein!


Dialog Hintergrundmusik
HTML-Text Editor 3.0 light Dialog Hintergrundmusik

Inhalt	Grundfunktionen des Texteditors	Speedpanel Grundgerüst

Mit diesem Dialog, fügen Sie Ihrer Seite eine Hintergrundmusik ein.

Diese Funktion wird momentan nur vom Microsoft Internet Explorer unterstützt!


Dialog Info
HTML-Text Editor 3.0 light Dialog Info

Inhalt	Grundfunktionen des Texteditors	Menü Hilfe

Hier werden allgemeine Infos zum System und Ihre Registriernummer angezeigt.


Dialog Inline Image
HTML-Text Editor 3.0 light Dialog Inline Image

Inhalt	Grundfunktionen des Texteditors	Speedpanel Text und Absatz

Mit diesem Dialog fügen Sie auf Ihrer Seite ein Bild ein.


Hiermit wird der vertikale Abstand zwischen zwei Elementen bestimmt.


Hiermit wird der horizontale Abstand zwischen zwei Elementen bestimmt.


Breite des Elementes.


Höhe des Elementes


Nur Netscape

Lädt zuerst die hier angegebene niedrigauflösende Grafikdatei.


Dialog Listen
HTML-Text Editor 3.0 light Dialog Listen

Inhalt	Grundfunktionen des Texteditors	Speedpanel Tabellen und Listen

Mit diesem Dialog können Sie eine List auf Ihrer Seite einfügen.

Je nach verwendetem Schalter hat die Liste ein anderes Aussehen.


Dialog Mailadresse
HTML-Text Editor 3.0 light Dialog Mailadresse

Inhalt	Grundfunktionen des Texteditors	Speedpanel Verweise und Referenzen

Mit diesem Dialog fügen Sie Ihrer Seite einen Verweis auf eine E-Mail Adresse ein.

Bei diese Funktion können Sie auch eine Wort oder Textabschnitt markieren und dann diesen Dialog verwenden. Der markierte Teil wird innerhalb der Referenz eingefügt!


Dialog Mehrzeiliges Editierfeld
HTML-Text Editor 3.0 light Dialog Mehrzeiliges Editierfeld

Inhalt	Grundfunktionen des Texteditors	Speedpanel Formular

Mehrzeilige Editierfelder werden von Formularen zur Eingabe größerer Texte verwendet.

Z. B. Eingabe einer Kritik oder einer Meinung zu einem Thema.


Dialog PlugIns
HTML-Text Editor 3.0 light Fenster Plugin tags

Inhalt	Grundfunktionen des Texteditors

Diese PlugIns ermöglichen es Ihnen auf einfache Weise weitere <TAGS> zu laden, und zu benutzen. Es lassen sich auch andere Anwendungszwecke für die PlugIns finden, denkbar wäre z. B. Textstellen die sich häufiger wiederholen als PlugIns zu speichern. Um eine PlugIn Zeile in Ihren Text einzufügen, klicken Sie die entsprechende Zeile an, halten dann Ihre Maustaste gedrückt, und ziehen Sie dann einfach auf das Editorfeld (Drag and Drop). Der Text der Zeile wird dann an der Stelle eingefügt, an der der Cursor sich befindet. Haben Sie einen Textabschnitt markiert können folgende zwei Fälle auftreten:

1. Sie haben einen PlugInText ohne Pipe "|" ausgewählt- dann wird der markierte Text durch den PlugInText ersetzt.

2. Sie haben einen PlugInText mit Pipe "|" ausgewählt- dann wird der markierte Text anstelle des Pipe eingesetzt.

 Um PlugIns zu bearbeiten,  können Sie diese mit dem Editor öffnen.


Dialog Tabelle
HTML-Text Editor 3.0 light Dialog Tabellen

Inhalt	Grundfunktionen des Texteditors	Speedpanel Tabellen und Listen

Der Tabellen Helfer soll Ihnen helfen eine Tabelle auf möglichst einfache Weise zu erstellen. Eine einmal erstellte Tabelle kann auch für den weiteren Gebrauch gespeichert werden.


Dialog Tabulator Position
HTML-Text Editor 3.0 light Dialog Tabulatorposition

Inhalt	Grundfunktionen des Texteditors	Menü Editoroptionen

 In diesem Dialog Fenster geben Sie den Abstand zwischen den Tabulator Stops ein.

Tip! Am besten sind Werte zwischen 10 und 30


Dialog Textfarbe
HTML-Text Editor 3.0 light Dialog Farbe

Inhalt	Grundfunktionen des Texteditors	Speedpanel Text und Absatz

Der Farbdialog wird von verschiedenen Funktionen benutzt. Eine Ausgewählte Farbe wir als Hexadezimalwert in die HTML-Seite eingefügt.


Dialog Trennlinie
HTML-Text Editor 3.0 light Dialog Trennlinien

Inhalt	Grundfunktionen des Texteditors	Speedpanel Text und Absatz

Mit diesem Dialog erstellen Sie verschiedene Trennlinien.

1. 	noshade 	erzeugt eine nicht schattierte Trennlinie

2. 	width	Hier stellen Sie die Breite der Trennlinie ein. Sie können die Angaben in Pixel 	oder Prozentwerten machen.

3. 	size	Hier stellen Sie die Dicke der Trennlinie in Pixel ein

4. 	align	Hier bestimmen Sie die Ausrichtung der Trennlinie

5. 	Farbe	Neu nur MSIE Hier können Sie die Farbe der Trennlinie einstellen.


Dialog Url Liste
HTML-Text Editor 3.0 light Fenster Url Liste

Inhalt	Grundfunktionen des Texteditors

In diesem Fenster haben Sie die Möglichkeit verschiedene URLs auf Ihrer Seite per Drag and Drop einzufügen.


Dialog Verweis
HTML-Text Editor 3.0 light Dialog Verweise und Referenzen

Inhalt	Grundfunktionen des Texteditors	Speedpanel Verweise und Referenzen

Mit diesem Dialog erstellen Sie Verweise und Referenzen auf andere HTML-Seiten bzw. Dateien.

Bei diese Funktion können Sie auch eine Wort oder Textabschnitt markieren und dann diesen Dialog verwenden. Der markierte Teil wird innerhalb der Referenz eingefügt!


Dialog Verweis zu Anker
HTML-Text Editor 3.0 light Dialog Verweis zu Anker

Inhalt	Grundfunktionen des Texteditors	Speedpanel Verweise und Referenzen

Mit diesem Dialog setzen Sie einen Verweis zu einem Anker.

Bei diese Funktion können Sie auch eine Wort oder Textabschnitt markieren und dann diesen Dialog verwenden. Der markierte Teil wird innerhalb der Referenz eingefügt!


Dialog Alle Schrifteinstellungen
HTML-Text Editor 3.0 light Dialog Alle Schrifteinstellungen

Inhalt	Grundfunktionen des Texteditors  	Menü Tags

Mit diesem Dialog können Sie alle Schrifteinstellungen auf einmal vornehmen.

Sie können die Schriftart, die Schriftgröße und die Schriftfarbe über diesen Dialog einstellen.

Um einen vorhandenen Text anzupassen, können Sie wie folgt vorgehen:

1. 	Markieren Sie den Textbereich, den Sie anpassen möchten

2. 	Klicken Sie im Menü TAGS|SCHRIFTEINSTELLUNG|ALLE SCHRIFTEINSTELLUNGEN an

3. 	Wählen Sie die Einstellungen aus die Sie verändern möchten z.B. Schriftart Arial Schriftfarbe azure

4. 	Klicken Sie auf OK

Als Ergebnis erhalten Sie den von Ihnen Markierten Text in die Schrifttags eingefaßt.

z.B.

Dies ist ein Schriftdemo	markierter Text

<font face="Arial" color="azure">Dies ist eine Schriftdemo</font>	Ergebnis

Hinweis zum Verwenden von Schriftarten:

Da Sie nicht wissen können welche Schriftarten jemand verwendet, wenn er Ihr Dokument betrachtet, können Sie zwei Alternative Schriftarten auswählen.

Falls dann alle drei ausgewählten Schriften nicht übereinstimmen, wird der Text in der Standardschriftart angezeigt.


Dialog Basereferenz
HTML-Text Editor 3.0 light Dialog Basereferenz

Inhalt	Grundfunktionen des Texteditors  	Menü Tags

Über diesen Dialog können Sie die Basis des Dokumentes festlegen.

Die Basis eines Dokumentes dient dazu dem Browser anzugeben unter welcher Referenz er fehlende Informationen suchen soll.


Dialog Basetarget
HTML-Text Editor 3.0 light Dialog Basetarget

Inhalt	Grundfunktionen des Texteditors  	Menü Tags

Dieser Dialog dient dazu das Hauptanzeigefenster in einem Frame festzulegen. In diesem Fenster werden dann alle Links einer Seite angezeigt.


Dialog Embed
HTML-Text Editor 3.0 light Dialog Embed

Inhalt	Grundfunktionen des Texteditors  	Menü Tags

Mit diesem Dialog können Sie Multimedia Dateien in Ihre Seite einbinden.

z.B.

MIDI-Files, WAV-Files usw.


Wenn Sie diese Funktion auf True setzen, wird bei Aufruf der Seite in der das EMBED Element vorhanden ist, die eingetragene Datei automatisch gestartet.

Voraussetzung ist das der benutzte Browser ein PlugIn zum abspielen oder anzeigen der Datei besitzt.


Anzahl der Wiederholungen einer Datei.

z.B. loop=10 bedeutet das die Datei zehnmal wiederholt wird.


Geben Sie hier den Dateinamen an, oder klicken Sie auf den nebenstehenden Schalter um den Datei öffnen Dialog zu starten.


Dialog Frame
HTML-Text Editor 3.0 light Dialog Frame

Inhalt	Grundfunktionen des Texteditors 	Menü Tags

Dieser Dialog dient dazu in einem FRAMESET einen Frame zu erzeugen.

Sie können in diesem Dialog auch alle Angaben weglassen, dann wird ein leerer Frame erzeugt.


Dialog Frameset
HTML-Text Editor 3.0 light Dialog Frameset

Inhalt	Grundfunktionen des Texteditors  	Menü Tags

Mit Diesem Dialog erzeugen Sie ein Frameset.

Beispiel:

<frameset rows="20%,*,20%">

  Inhalt des Framesets

</frameset>

Ergebnis:


Dieser Bereich dient dazu die Grundeinstellung des Framesets auf Spalten oder Zeilen festzulegen


Wählen Sie in diesem Bereich die Aufteilung des Framesets. Diese Angaben, können in Pixel oder in Prozentwerten erfolgen.


Dialog Marquee
HTML-Text Editor 3.0 light Dialog Marquee

Inhalt	Grundfunktionen des Texteditors  	Menü Tags

Wird nur von MSIE Unterstützt

Dieser Dialog dient zum erstellen von Lauftext.


Hier können Sie die Laufrichtung des Textes bestimmen


Hier stellen Sie die Pixelanzahl ein, die zwischen zwei Scrollzuständen verwendet wird


Hier stellen Sie die Verzögerung zwischen Zwei Scrollzuständen ein.


Hiermit können Sie z.B. bestimmen, das der Lauftext hin und her wechselt.


Hiermit können Sie die Hintergrundfarbe für den Lauftextbereich bestimmen.


Hiermit können Sie die Farbe des Lauftextes bestimmen.


Hiermit können Sie die Schriftgröße des Lauftextes bestimmen.


Hiermit können Sie die Anzahl der Schleifen einstellen.


Hier erfolgen weitere Angaben zum Lauftext.


Dialog Meta Information
HTML-Text Editor 3.0 light Dialog Meta Information

Inhalt	Grundfunktionen des Texteditors  	Menü Tags

Meta-Informationen werden für verschiedene nützliche Anweisungen für WWW-Server,

WWW-Browser und automatische Suchprogramme im Internet verwendet.

z.B. Können Sie über die Anweisung

<meta name="keywords" content="Texteditor,HTML">

Stichwörter für Suchprogramme festlegen.


Name der Information


Inhalt der Information


Wird z.B. benutzt um Befehle an den Browser zu senden.


Dialog Schriftart
HTML-Text Editor 3.0 light Dialog Schriftart

Inhalt	Grundfunktionen des Texteditors  	Menü Tags

Mit diesem Dialog können Sie die Schriftart einstellen.

Um einen vorhandenen Text anzupassen, können Sie wie folgt vorgehen:

1. 	Markieren Sie den Textbereich, den Sie anpassen möchten

2. 	Klicken Sie im Menü TAGS|SCHRIFTEINSTELLUNG|SCHRIFTART an

3. 	Wählen Sie die Einstellungen aus die Sie verändern möchten z.B. Schriftart Arial

4. 	Klicken Sie auf OK

Als Ergebnis erhalten Sie den von Ihnen Markierten Text in die Schrifttags eingefaßt.

z.B.

Dies ist ein Schriftdemo	markierter Text

<font face="Arial">Dies ist eine Schriftdemo</font>	Ergebnis

Hinweis zum Verwenden von Schriftarten:

Da Sie nicht wissen können welche Schriftarten jemand verwendet, wenn er Ihr Dokument betrachtet, können Sie zwei Alternative Schriftarten auswählen.

Falls dann alle drei ausgewählten Schriften nicht übereinstimmen, wird der Text in der Standardschriftart angezeigt.


Dialog Target
HTML-Text Editor 3.0 light Dialog Target

Inhalt	Grundfunktionen des Texteditors  	Menü Tags

Dieser Dialog dient dazu das tag target=bsp nachträglich in Verweisen einzufügen.


Das ist der Eingabebereich des Texteditors, hier geben Sie Ihren Text ein.


Hiermit löschen Sie ein Programm aus der Toolliste.


Das ist der Bereich, in dem Hinweise zu dem Dokument das gerade das aktive Fenster ist, angezeigt werden.

In dem ersten Bereich wird die Zeilenanzahl des Dokumentes angezeigt.

In dem nachfolgendem Bereich wird der Name und der Pfad des Dokumentes angezeigt. Ist das Dokument »neu« erstellt worden und wurde noch nicht gespeichert, dann steht in diesem Bereich nur »Neu«.

In dem letztem Bereich wird angezeigt, ob der Text geändert wurde. Wenn das Dokument nach einer Änderung gespeichert wird, verschwindet dieser Hinweis.


Sie können das Verzeichnis auch ändern.


In einer der nächsten Versionen, wird ein Deinstallationsprogramm enthalten sein.


Der Vorteil der bestell.htm ist, das Sie die Bestellung auch per E-Mail abschicken können.


Die Versionsnummer erfahren Sie über das Infofenster des Texteditors.


Hiermit erstellen Sie ein neues Dokument.

(Tastatur Kürzel: »STRG+N«)


Hiermit öffnen Sie ein gespeichertes Dokument.

(Tastatur Kürzel: »STRG+O«)


Hiermit schließen Sie das aktuelle Dokument.

(Tastatur Kürzel: »STRG+F4«)


Hiermit speichern Sie das aktuelle Dokument.

(Tastatur Kürzel: »STRG+S«)


Hiermit speichern Sie das aktuelle Dokument unter einem anderem Namen.


Hiermit drucken Sie das aktuelle Dokument.

(Tastatur Kürzel: »STRG+D«)


Hiermit richten Sie ihren Drucker ein.


Hiermit beenden Sie den Texteditor.

(Tastatur Kürzel: »ALT+F4«)


Hiermit machen Sie die zuletztgemachte Eingabe rückgängig.

(Tastatur Kürzel: »ALT+Rück«)


Hiermit schneiden Sie markierten Text aus und übertragen den Text in die Zwischenablage.

(Tastatur Kürzel: »STRG+X«)


Hiermit kopieren Sie markierten Text in die Zwischenablage.

(Tastatur Kürzel: »STRG+A«)


Hiermit fügen Sie den Inhalt der Zwischenablage an der Einfügemarke in das Dokument ein.

(Tastatur Kürzel: »STRG+V«)


Hiermit löschen Sie markierten Text.

(Tastatur Kürzel: »STRG+Entf«)


Hiermit markieren Sie den gesamten Text des Dokumentes.


Hiermit können Sie nach einem bestimmten Wort oder Zeichen suchen lassen. Der Texteditor markiert dann das Wort oder Zeichen wenn es gefunden wurde.

(Tastatur Kürzel: »F2«)


Hiermit setzen Sie die Suche fort, wenn schon ein Wort oder Zeichen gefunden wurde.

(Tastatur Kürzel: »F3«)


Hiermit können Sie nach einem bestimmten Wort oder Zeichen suchen lassen. Der Texteditor ersetzt dann das Wort oder Zeichen, durch das von Ihnen vorgegebene Wort oder Zeichen, wenn es gefunden wurde.

(Tastatur Kürzel: »F4«)


Wandelt DOS Textdateien in das Windows-Format


Wandelt Windows-Textdateien in das DOS-Format


Wenn Sie diesen Menüpunkt anklicken, wird die Textausrichtung des Texteditors auf Links gesetzt.


Wenn Sie diesen Menüpunkt anklicken, wird die Textausrichtung des Texteditors auf Rechts gesetzt.


Wenn Sie diesen Menüpunkt anklicken, wird die Textausrichtung des Texteditors auf Zentriert gesetzt.


Automatischer Umbruch
Wenn Sie diesen Menüpunkt oder Schalter anklicken, wird der »Automatische Umbruch« des Editors Ein- bzw. Ausgeschaltet. Diese Funktion bewirkt, das wenn Sie beim eingeben des Textes an den rechten Rand des Eingabefeldes kommen, der Text automatisch Umbricht.

Ob die Funktion »Automatischer Umbruch« eingeschaltet ist, erkennen Sie daran, das der Menüpunkt abgehakt ist bzw. unten im Eingabebereich eine Scrollbar befindet.

(Tastatur Kürzel: »F5«)


Automatische Umlaute
Wenn Sie diesen Menüpunkt oder Schalter anklicken, wird die »Automatische Umlaute« Funktion des Editors Ein- bzw. Ausgeschaltet. Diese Funktion bewirkt, das die deutschen Umlaute (Ä,ä,Ö,ö,Ü,ü) und die Ligatur (ß) automatisch in das entsprechende HTML-Kürzel umgewandelt werden z. B. Ä zu &Auml;, ß zu &szlig;.

Ob die Funktion »Automatische Umlaute« eingeschaltet ist, erkennen Sie daran, das der Editor in seiner Statusleiste AUML oder UML anzeigt!

(Tastatur Kürzel: »F6«)


Was ist eine Ligatur?

Eine Ligatur ist ein zusammengefaßtes Zeichen das eigentlich aus zwei einzelnen Buchstaben besteht. In Deutschland wird hauptsächlich nur sz als Ligatur ß verwendet.


Tabulator Verwenden
Wenn Sie diesen Menüpunkt anklicken, wird die »Tabulator« Funktion des Editors Ein- bzw. Ausgeschaltet. Wichtig! Tabulatoren werden in dem Dokument gespeichert.

Ob die Funktion »Tabulator« eingeschaltet ist, erkennen Sie daran, das der Menüpunkt abgehakt ist.

(Tastatur Kürzel: »F7«)


Geben Sie hier den Abstand der Tabulatoren ein.


Wenn Sie diesen Menüpunkt anklicken, wird die »nur Lesen« Funktion des Editors Ein- bzw. Ausgeschaltet. Dies Funktion bewirkt, das das aktuelle Dokument nur noch gelesen und nicht mehr geändert werden kann.

Ob die Funktion »nur Lesen« eingeschaltet ist, erkennen Sie daran, das der Menüpunkt abgehakt ist.

(Tastatur Kürzel: »F9«)


Wenn Sie diesen Menüpunkt anklicken, werden die »HTML-Werkzeugleiste« des Editors Ein- bzw. Ausgeblendet.

(Tastatur Kürzel: »F10«)


Mit diesem Menüpunkt öffnen Sie den Bereich mit weiteren Tags, die Sie dann per Drag and Drop auf Ihr Dokument ziehen können.

(Tastatur Kürzel: »F11«)


Mit diesem Menüpunkt laden Sie z. B. eine selbsterstellte Liste mit Tags in den Anzeigebereich für weitere Tags.

(Tastatur Kürzel: »F12«)


Mit diesem Menüpunkt können Sie das Standard Speedpanel ausblenden.


Fügt das Listitem Tag ein.


Mit diesem Menüpunkt öffnen Sie einen einfachen Kalender.


Hiermit werden Fenster nebeneinander positioniert.


Hiermit werden Fenster überlappend positioniert.


Hiermit ordnen Sie die zum Symbol verkleinerten Fenster an.


Hiermit schalten Sie zum vorherigen Fenster um.


Hiermit schalten Sie zum nächsten Fenster um.


Hiermit schalten Sie den Texteditor und das aktuelle Dokument als Vollbild.


Hiermit rufen Sie ein Infofenster auf.


Hiermit können Sie das Hintergrundbild des Editors nach Ihrem persönlichen Geschmack anpassen.


Hier werden die Suchpfade des Editors eingegeben.

Bei dem ersten Start, werden die Suchpfade automatisch eingestellt!

Die Suchpfade dienen dem Editor dazu um seine PlugIn Tags und URL Listen zu finden.

Die anderen Pfade werden von der Light-Version nicht verwendet.


Mit diesem Schalter starten Sie Ihr Dokument in dem ausgewählten Browser.

Wichtig Sie müssen das Dokument erst speichern!


In diesem Bereich befinden sich weitere Tags, die Sie per Drag and Drop auf Ihr Dokument ziehen können.


Mit diesem Helfer fügen Sie einen Verweis auf Ihre Private E-Mail ein.

(Tastatur Kürzel: »STRG+E«)


Mit diesem Helfer fügen Sie einen Verweis auf Ihre Firmen E-Mail ein.

(Tastatur Kürzel: »STRG+F«)


Mit diesem Helfer fügen Sie Ihre Adresse ein.

(Tastatur Kürzel: »Umsch+STRG+F2«)


Mit diesem Helfer fügen Sie einen Verweis auf Ihre Homepage ein.

(Tastatur Kürzel: »Umsch+STRG+F1«)


Mit diesem Helfer  fügen Sie Ihre Firmenadresse ein.

(Tastatur Kürzel: »Umsch+STRG+F3«)


Mit diesem Helfer fügen Sie das aktuelle Datum als UpdateDatum auf Ihrer Seite ein.

(Tastatur Kürzel: »STRG+F5«)


Hiermit verriegeln Sie die Symbolleiste.

Wenn die Symbolleiste verriegelt ist, kann sie nicht mehr verschoben werden.


Hiermit schalten Sie die Hints aus. Hints sind die Hinweise auf den Schaltern, die erscheinen, wenn Sie mit dem Mauszeiger kurz auf einen Schalter oder Eingabefeld verweilen.


Was ist MDI?

MDI (Multidokumentanwendungen, Multiple Document Interface) ermöglicht einer Anwendungen, gleichzeitig zwei oder mehr Dateien zu öffnen, darzustellen, zu betrachten und zu bearbeiten.


Was ist Drag and Drop?

Drag and Drop bezeichnet die Fähigkeit ein Dokument (Datei) auf ein Programm zu ziehen (Drag) und dort fallen zu lassen (Drop), das Programm reagiert dann auf diese Dokument und öffnet z. B. ein Fenster mit dem Inhalt des Dokumentes.

Der Texteditor 2.0 ist Drag and Drop fähig, d. h. Sie können von dem Dateimanager aus Text,- HTML, INI, BAT, PAS, C, oder sonstige Textdateien auf den Texteditor ziehen und dort fallenlassen. Der Texteditor öffnet dann diese Datei in einem neuen Fenster.


Was ist OEM?

OEM ist der Zeichensatz, der von DOS verwendet wird.


Was ist ANSI?

ANSI ist der Zeichensatz der von WINDOWS für einfache unformatierte Texte verwendet wird.


Was ist HTML?

HTML (Hypertext Markup Language) ist eine Dokumentbeschreibungssprache die es ermöglicht, wie in einer Hilfedatei, mit sogenannten Verweisen zu anderen Dokumenten zu springen. Der Vorteil von HTML liegt darin das diese Dokumentbeschreibungssprache Plattformunabhängig arbeitet. Das heißt, das auch auf z. B. UNIX Rechnern diese Dokumente gelesen werden können.


Was sind Tags
Was sind Tags?

Tags bestimmen in einem HTML-Dokument den Anfang und das Ende von Titeln, Überschriften, Absätzen, Tabellen, Listen und Links. HTML Formatierungen beginnen mit einem Start Tag, das dem Befehl Namen und Attribute verleiht. Dann folgt der Inhalt und dann das Schlußtag.

Start Tags werden so <Befehl> angezeigt, End Tags werden so </Befehl> angezeigt.

Z. B.:

<h1>Titel</h1>

<hr> (eine Trennlinie)

<p>Ein Absatz und nachfolgender Text.

So könnte obiges Beispiel in einen Browser aussehen:

Titel

_______________________________________________

Ein Absatz und nachfolgender Text.

Einige Tags bestehen nur aus einem Start Tag ohne End Tag. Ein Zeilenumbruch z. B. ist einfach nur <br>.


Hiermit bestätigen Sie die gemachte Eingabe.


Hiermit brechen Sie die Eingabe ohne Ausführung ab.


Hiermit öffnen Sie die kontextabhängige Hilfe


In diesem Feld geben Sie die Bezeichnung des Ankers ein.


Hiermit bestimmen Sie die Anzahl der Spalten einer Tabelle.


Hiermit bestimmen Sie die Anzahl der Zeilen einer Tabelle.


Hier stellen Sie die dicke des Rahmens der Tabelle ein. Der Wert "0" bedeutet, das die Tabelle keinen Rahmen hat.


Mit cellspacing, bestimmen Sie die dicke des Gitternetzes einer Tabelle.


Mit cellpaddin, bestimmen Sie den Mindestabstand des Zelleninhalts vom Zellenrand.


Hiermit bestimmen Sie, das die erste Zeile der Tabelle, als Kopf der Tabelle genommen wird.


Hiermit bestimmen Sie, das die in der unteren Tabelle eingegebene Spaltenbreite, in der Tabelle übernommen wird. Diese Funktion schließt die Tabellenhöhe und -breite aus!


Hiermit bestimmen Sie, das die in der unteren Tabelle eingegebene Zeilenhöhe, in der Tabelle übernommen wird. Diese Funktion schließt die Tabellenhöhe und -breite aus!


Hier können Sie Ihrer Tabelle einen Titel geben.


Hiermit schalten Sie den Titel 1 an.


Hier können Sie Ihrer Tabelle einen zweiten Titel geben.


Hiermit schalten Sie den Titel 2 an.


Hiermit bestimmen Sie das der zweite Titel als Fußzeile verwendet wird.


Hier können Sie die Gesamthöhe der Tabelle bestimmen. Diese Funktion schließt die erzwungene Spaltenbreite und Zeilenhöhe aus!


Hier können Sie die Gesamtbreite der Tabelle bestimmen. Diese Funktion schließt die erzwungene Spaltenbreite und Zeilenhöhe aus!


Hier können Sie die einzelnen Spalten in der Breite einstellen. Weiterhin können Sie hier auch einzelne Spalten untereinander tauschen.


Hier können Sie die einzelnen Zeilen in der Höhe einstellen. Weiterhin können Sie hier auch einzelne Zeilen untereinander tauschen.


In diesen Bereich geben Sie die Daten, die später in Ihrem Dokument auftauchen sollen ein.


Hier wird die aktuell bearbeitete Zelle angezeigt.


In diesem Feld sehen Sie die aktuelle Spaltenbreite.


In diesem Feld sehen Sie die aktuelle Zeilenhöhe.


Hiermit öffnen Sie eine gespeicherte Tabelle.


Hiermit speichern Sie eine Tabelle.


Geben Sie hier den Namen des Eingabefeldes ein.


Geben Sie hier die Anzahl der anzuzeigenden Zeilen ein.


Geben Sie hier die Anzahl der anzuzeigenden Spalten ein.


Mit dieser Angabe können Sie den Zeilenumbruch steuern. Mit wrap=virtual bewirken Sie, daß der Text automatisch umgebrochen wird aber beim Versenden nicht mit übertragen wird. Mit wrap=physical bewirken Sie, daß der Text bei der Eingabe automatisch umgebrochen wird und beim Absenden des Formulars mit übertragen wird. Mit wrap=off schalten Sie den Zeilenumbruch aus (Voreinstellung).


Geben Sie hier eine EMail-Adresse ein.


Tragen Sie hier die Anzahl der Zeilen der Liste ein.


Hiermit öffnen Sie eine gespeicherte Liste.


Hiermit speichern Sie eine Liste.


Hier geben Sie die einzelnen Zeilen einer Liste ein.


In diesem Feld, können Sie den Namen eines GIF- oder JPEG Bildes eingeben. Sie können aber auch den nebenstehenden Schalter verwenden um einen Dateidialog zu öffnen.


Mit diesem Schalter öffnen Sie einen Dateidialog, mit dem Sie nach einer Datei suchen können. Dieses Datei wird dann in das nebenstehende Feld übertragen.


Geben Sie hier den absoluten oder relativen Pfad der verwendeten Datei (Bilder, HTML-Dokumente u. s. w.) ein.

Wenn Sie eine Datei gewählt haben, sollte diese sich in dem gleichen Verzeichnis wie Ihre Seite befinden. Soll die Datei aber in einem anderen Verzeichnis liegen, dann sollten Sie einen relativen oder absoluten Pfad zu der Datei angeben.

z.B. Ihre Seite liegt im Verzeichnis "c:\homepage"  und ein Bild liegt im Verzeichnis "c:\homepage\bild" dann würde die relative Grafikreferenz so aussehen:

<img src="bild/MeinBild.gif">

und so würde z. B. der absolute Pfad aussehen:

<img src="file://localhost/c:/homepage/bild/MeinBild.gif">


Geben Sie hier einen alternativen Text ein, dieser Text erscheint wenn das Bild noch geladen wird, oder wenn das Bild nicht gefunden wird.


Hier können Sie einen Rahmen um das Bild legen. Wenn kein Rahmen gewünscht wird, dann lassen Sie das Feld frei oder geben als Rahmenstärke eine 0 ein.


Hier können Sie die Ausrichtung des Bilds und des Textes an.


Geben Sie hier den Namen der Musikdatei an, die als Hintergrundmusik gespielt werden soll. Sie können die Musikdatei aber auch mit dem nebenstehenden Schalter über einen Dialog suchen.


Hier geben Sie an wie oft eine Musikdatei gespielt werden soll.

Wenn Sie Infinite wählen, heißt das , das die Musikdatei solange gespielt wird wie die Seite im Betrachter angezeigt wird.


Hier können Sie einen fertigen Farbwert auswählen.


Hier können Sie einen eigenen Farbwert auswählen.


Hier wählen Sie die Helligkeit der von Ihnen gewählten Farbe.


In diese Felder werden die von Ihnen ausgewählten Farben eingetragen und zur weiteren Verfügung gespeichert.


Hier wird die neue Farbe während der Bearbeitung angezeigt.


Mit diesem Schalter öffnen Sie die erweiterte Farbauswahl.


Hier mit können Sie die Farbwerte numerisch eingeben.


Mit diesem Schalter fügen Sie die von Ihnen gewählte Farbe in den Benutzerdefinierten Bereich.


In dieses Feld tragen Sie den Dateinamen des von Ihnen ausgewählten Hintergrundbildes ein.


Mit dieser Funktion Schalten Sie den Wasserzeicheneffekt ein. Diese Funktion wird momentan nur von dem Microsoft Internet Explorer unterstützt.


Geben Sie hier den Titel Ihrer Seite an. Dieser Titel wird in einem Betrachter angezeigt.


Hiermit können Sie die HTML-Version spezifizieren. Geben Sie die Angeben entweder selbst ein, oder wählen Sie eine Spezifikation aus der Liste aus.


Geben Sie hier die Zieladresse an, an die das Formular versendet werden soll.


Hiermit bestimmen Sie, das das Formular wie eine E-Mail behandelt wird.


Wenn Sie diese Funktion verwenden, dann müssen Sie Ihre Seiten auf einem Server ablegen, der einen CGI-Script verarbeiten kann.


Geben Sie hier den Namen des Eingabefeldes ein.


Geben Sie hier die Anzahl der sichtbaren Zeichen ein.


Geben Sie hier die maximale Anzahl der einzugebenden Zeichen an.


Wählen Sie hier die Art des Eingabefeldes aus.


Geben Sie hier den Namen des Schalters an.


Geben Sie hier den Wert des Schalters an.


Geben Sie hier den Pfad und den Dateinamen des von Ihnen verwendeten Betrachters an.


Geben Sie hier die Beschriftung des Schalters an.


Geben Sie hier die Art des Schalters an.

submit bedeutet absenden, reset bedeutet das das Formular geleert werden soll.


Geben Sie hier den Namen des Ankers ein.


Hiermit wählen Sie eine der vorhandenen Listen aus.


Hiermit fügen Sie das Tag für Text linksbündig ein


Hiermit fügen Sie das Tag für Text zentriert ein


Hiermit fügen Sie das Tag für Text rechtsbündig ein


Hiermit fügen Sie das Tag für Text fett ein.


Hiermit fügen Sie das Tag kursiv ein.


Hiermit fügen Sie das Tag Text unterstrichen ein.


Hiermit fügen Sie das Tag Text preformartiert ein.


Hiermit öffnen Sie den Farbdialog zur Auswahl der Textfarbe.


Hiermit fügen Sie das Tag für einen Zeilenumbruch ein


Hiermit fügen Sie das Tag für einen Neuen Absatz ein


Hiermit fügen Sie das Tag Fontsize ein. Wählen Sie hierzu aus der Liste die Fontgröße.


Mit diesen Schaltern Wählen Sie die Größe und die Ausrichtung der einer Überschrift.

Die Ausrichtung müssen Sie vor der Größenauswahl einstellen.


Hiermit fügen Sie das Tag für ein Leerzeichen der Größe "n" ein.


Hiermit fügen Sie das Tag für ein Leerzeichen der Größe "m" ein.


Hiermit fügen Sie das Tag für ein erzwungenes Leerzeichen ein.


Hiermit fügen Sie das Tag für ein nicht umbrechbares Leerzeichen ein.


Hiermit fügen Sie das Tag für einen Bindestrich der Größe "n" ein.


Hiermit fügen Sie das Tag für einen Bindestrich der Größe "m" ein.


Hiermit fügen Sie das Tag für einen Bereich ohne Umbruchmöglichkeit ein.


Hiermit fügen Sie das Tag für einen Umbruch in einen Bereich ohne Umbruchmöglichkeit ein.


Hiermit fügen Sie das Tag für ein Kommentar ein.


Hiermit fügen Sie das Tag für Text blinkend ein.


Hiermit fügen Sie das Tag für eine Trennlinie ein. Mit der rechten Maustaste öffnen Sie ein Popup wo Sie eine weitere Auswahlmöglichkeit haben.


Hiermit öffnen Sie den Farbauswahldialog. Es wird dann der Hexadezimale Farbwert auf Ihrer Seite eingetragen. Diese Funktion dient dazu einen vorhandenen Farbwert auszutauschen.


Hiermit öffnen Sie den Dialog Inline Image.


Wandelt Umlaute in die HTML-Maskierung.


Wandelt HTML-Maskierung in Umlaute.


Hiermit schalten Sie das TabSet weiter.


Hier sehen Sie ob die Automatische Umlautfunktion eingeschaltet ist.

AUML bedeutet Automatische Umlaute sind eingeschaltet!

UML bedeutet es werden die Umlaute normal geschrieben!

Hinweis: Diese Funktion wirkt sich nicht auf schon vorhandene Umlaute oder HTML-Maskierung aus, dafür sind die beiden Funktionen im Bearbeiten-Menü vorhanden!


Hier wird die Zeilenanzahl des Dokumentes angezeigt.


Hier steht der Pfad und der Dateiname des aktuellen Dokumentes.


Hier sehen Sie ob das aktuelle Dokument geändert wurde.


Hier erscheinen allgemeine Hinweise zur Funktion des Editors.


 Definitionsliste für Glossar

Definitionslisten werden für Glossare verwendet. Glossare bestehen aus einer Liste mit Einträgen, die dann erklärt werden. Definitionslisten können auch verschachtelt werden um z.B. eine Baumstruktur zu erzeugen.

Beispiel:

<dl>	Einleitung Definitionsliste

  <dt>HTML</dt>	Der Ausdruck, der erklärt wird

  <dd>Hypertext Markup Language</dd>	Erklärung des Ausdruckes

  <dt>SGML</dt>	nächster Ausdruck

  <dd>Structured Generalized Markup Language</dd>	nächste Erklärung

</dl>	Ende der Definitionsliste

Ergebnis in einem Browser:

HTML

Hypertext Markup Language

SGML

Structured Generalized Markup Language


Noframe

Nur Netscape

Bereich für Browser, die keine Frames darstellen können.

In diesem Bereich können Sie Texte und Links eingeben die nur in Browsern angezeigt werden die keine Frames darstellen können.

Da dieser Befehl nur von Netscape verwendet wird, empfiehlt es sich diesen Befehl nicht zu verwenden. Alternativ können Sie einfach nach der Frame Definition das <body> </body> Tag verwenden. Dies bewirkt das selbe wie das NOFRAME Tag.


Tastaturbelegung

Inhalt

F1	Ruft die Hilfe auf

F2	Ruft den Suchen Dialog auf

F3	Weitersuchen (Wird nur nach dem Suchen-Dialog aktiviert)

F4	Ruft den Suchen und Ersetzen-Dialog auf

F5	Schaltet den Wortumbruch ein bzw. aus

F6	Schaltet die Automatische Umlautfunktion ein bzw. aus

F7	Schaltet die Tabulatorfunktion ein bzw. aus

F8	Ruft den Dialog zum einstellen der Tabulatorweite auf

F9	Schaltet die Funktion nur lesen ein bzw. aus

F10	Ruft die Editoreinstellungen auf

F11	Ruft die PlugIn Tag Liste auf

F12	Startet den in den Einstellungen angegebenen Browser

ALT+S 	Speichert das aktuelle Dokument unter einen neuen Namen

ALT+F4	Beendet den Editor

ALT+Rück	Macht die zuletzt gemachte Eingabe rückgängig

ALT+F1	Öffnet den Dialog zum erstellen einer Liste (numeriert)

ALT+F2	Öffnet den Dialog zum erstellen einer Liste (Buchstaben groß)

ALT+F3	Öffnet den Dialog zum erstellen einer Liste (Buchstaben klein)

ALT+F4	Öffnet den Dialog zum erstellen einer Liste (römisch groß)

ALT+F5	Öffnet den Dialog zum erstellen einer Liste (römisch klein)

ALT+F6	Öffnet den Dialog zum erstellen einer Liste (Bulletliste rund)

ALT+F7	Öffnet den Dialog zum erstellen einer Liste (Bulletliste rechteckig)

ALT+F8	Öffnet den Dialog zum erstellen einer Liste (Directory)

ALT+F9	Fügt ein List Item ein

ALT+F10	Fügt das Starttag für ein Glossar(Definitionsliste) ein

ALT+F11	Fügt das Tag für den zu definierender Ausdruck ein

ALT+F12	Fügt das Tag für die Definition ein

STRG+F1	Ruft den Dialog zum erstellen eines Framesets auf

STRG+F2	Ruft den Dialog zum erstellen eines Frames auf

STRG+F3	fügt das Tag für unterstrichen ein (<u></u>)

STRG+F4	Schließt das aktuelle Fenster

STRG+F5	Fügt das aktuelle Update Datum ein

STRG+F6	Ruft den Dialog Anker setzen auf

STRG+F7	Ruft den Dialog Verweis zum Anker auf

STRG+F8	Ruft den Dialog Mailadresse auf

STRG+F9	Ruft die URL-Liste auf

STRG+F10	Fügt das Tag noframe ein

STRG+F11	Ruft den Dialog zum einfügen eines Target auf

STRG+F12	Ruft den Dialog MetaInformation auf

STRG+A	Öffnet den Dialog für alle Schrifteinstellungen

STRG+B	Fügt das Tag für fett ein (<b></b>)

STRG+C	Kopiert den Markierten Text in die Zwischenablage

STRG+D	Ruft den Druckerdialog auf um das aktuelle Dokument zu drucken

STRG+E	Fügt Die E-Mail an den Namen ein

STRG+F	Fügt Die E-Mail an die Firma ein

STRG+G	Öffnet den Dialog zum einstellen der Schriftgröße (font size)

STRG+H	Öffnet den Dialog für Schriftart

STRG+I	Fügt das Tag für kursiv ein (<i></i>)

STRG+J	Ruft den Dialog zum erstellen des Grundgerüstes auf

STRG+K	Fügt das Tag für einen Kommentar ein

STRG+L	Fügt das Tag für einen links ausgerichteten Absatz ein

STRG+M	Ruft den Dialog zum erstellen eines Formulargundgerüstes auf

STRG+N	Erstellt ein neues Dokument

STRG+O	Ruft den Öffnen-Dialog auf

STRG+P	Fügt das Tag für einen Absatz ein (<p>)

STRG+Q	Ruft den Dialog zum erstellen eines Verweises auf

STRG+R	Fügt das Tag für einen rechts ausgerichteten Absatz ein

STRG+S	Speichert das aktuelle Dokument

STRG+T	Fügt eine einfache Trennlinie ein

STRG+U	Fügt das Tag für einen Zeilenumbruch ein (<br>)

STRG+V	Fügt den Inhalt der Zwischenablage in das Dokument ein

STRG+W	Fügt das Tag <center></center> ein

STRG+X	Schneidet den markierten Text aus und kopiert ihn in die Zwischenablage

STRG+Y	Ruft den Farbdialog zum erstellen einer Schriftfarbe auf

STRG+Z	Fügt das Tag für einen zentriert ausgerichteten Absatz ein

STRG+Entf	Löscht einen markierten Bereich

UMSCH+F1	Fügt das Tag für eine Überschrift Größe 1 ein

UMSCH+F2	Fügt das Tag für eine Überschrift Größe 2 ein

UMSCH+F3	Fügt das Tag für eine Überschrift Größe 3 ein

UMSCH+F4	Fügt das Tag für eine Überschrift Größe 4 ein

UMSCH+F5	Fügt das Tag für eine Überschrift Größe 5 ein

UMSCH+F6	Fügt das Tag für eine Überschrift Größe 6 ein

UMSCH+F7	Fügt das Endetag für ein Glossar(Definitionsliste) ein

UMSCH+F8	Öffnet den Dialog zum erstellen einer Tabelle

UMSCH+F9	Öffnet den Dialog zum einstellen der Standardschriftgröße

UMSCH+F10	Wandelt Umlaute in HTML-Maskierung

UMSCH+F11	Wandelt HTML-Maskierte Zeichen in Umlaute

UMSCH+F12	Öffnet den Dialog EMBED

UMSCH+STRG+F1	Fügt den Verweis zur eigenen Homepage ein

UMSCH+STRG+F2	Fügt die Adresse an den Namen ein

UMSCH+STRG+F3	Fügt die Adresse an die Firma ein

UMSCH+STRG+F4 	Fügt Metainformationen in das Dokument ein

UMSCH+STRG+F5	Öffnet den Dialog für die Hintergrundeinstellungen

UMSCH+STRG+F10	Öffnet den Farbdialog zum schnellen erstellen der Hintergrundfarbe

UMSCH+STRG+F11	Öffnet den Dialog zum einbinden einer Hintergrundmusik (nur MSIE)

UMSCH+STRG+L	Setzt die Voreinstellung Überschrift links

UMSCH+STRG+R	Setzt die Voreinstellung Überschrift rechts

UMSCH+STRG+T	Ruft den Dialog weitere Trennlinien auf

UMSCH+STRG+Z	Setzt die Voreinstellung Überschrift zentriert


Tipsdialog

In diesem Fenster sehen Sie verschiedene Tips zur Bedienung und zu HTML.


Vorteile der Registrierten Version

Wenn Sie diese Freeware Vollversion registrieren lassen, haben Sie den Vorteil zukünftige Updates auf die plus Version vergünstigt zu bekommen. Weiterhin erhalten Sie eine Benachrichtigung per E-Mail oder Post (je nach Angaben bei der Registrierung) wenn ein neues Update vorliegt.

Die Registrierung können Sie per E-Mail (Dirk_Bruederle@compuserve.com) oder per FAX (regist.txt) oder über meine Homepage (http://ourworld.compuserve.com/homepages/Dirk_Bruederle) erledigen.

Unterschiede zwischen der light und der plus Version

Leistungsumfang der beiden Versionen:

INI wird nicht in das Windowsverzeichnis kopiert (light/plus)

MDI Technologie (light/plus)

Suchen und Ersetzen Funktionen(light/plus)

Einstellung der Schriftart der Editors (light/plus)

Automatische Erstellung einer Sicherheitskopie (.bak) einer geöffneten Datei (light/plus)

Große Auswahl an Dateifiltern (light/plus)

Automatischer Wortumbruch (light/plus)

Automatisch Umlautfunktion (light/plus)

OEM zu ANSI zu OEM Konvertierung (light/plus)

    	HTML zu Umlauten zu HTML (light/plus)

    	Drag And Drop (light/plus)

    	Wekzeugleisten verschiebbar (light/plus)

    	Andere Programme, können in die Menüleiste aufgenommen werden (light/plus)

   	HTML-Funktionen wie:

        	Helfer zur Tabellenerstellung (light/plus)

        	Helfer zur Listenerstellung (light/plus)

        	und weitere Helfer...

        	Auswahl eines HTML-Viewers (Browser) (light/plus)

Nur in der Version 3.0 Plus!

Schnellvorschau der Seite

    	HomepageMaster integriert

    	Integrierte Projektverwaltung

    	Frame Wizard

    	Bildbearbeitungsprogramm mit map-funktion

    	inkl. WWW-Grafikpack 1


Einführung in HTML

Eine kleine Einführung in HTML

Inhalt

1. 	Grundaufbau eines HTML-Dokumentes

2. 	Textelemente

3. 	Listen und Tabellen

4. 	Verweise

5. 	Frames und Formulare

6. 	Grafiken

7. 	Multimedia

8. 	Weiterführende Literatur

Hinweise zu diesem Dokument

Sie können dieses Dokument auch im HTML-Format Offline anschauen. Öffnen Sie dazu im Verzeichnis ..\beisp\lektionen die Datei start.htm mit einem Browser. Der Browser sollte Frames anzeigen können!

Um Arbeit zu sparen, können Sie den entsprechenden Quellcode der Beispiele kopieren und in ein leeres Dokument einfügen. Um das zu erleichtern, sind Erklärungen neben dem Quellcode in Kommentartags eingefaßt, das Heißt sie sind zwar in der Textdatei  sichtbar, werden aber vom Browser nicht angezeigt.

Tags und Quellcode werden innerhalb der Hilfe in Courier angezeigt.

Fette Wörter in Klammern sind Platzhalter für Werte, diese Platzhalter müssen in einem HTML-Dokument durch die beschriebenen Werte ausgetauscht werden.

Innerhalb des Dokumentes wird für den Microsoft™ Internet Explorer die Abkürzung MSIE verwendet.


Grundaufbau eines Dokumentetes

Grundaufbau eines HTML-Dokumentes

Zurück

Um ein neues HTML-Dokument zu erzeugen, erstellen Sie ersteinmal ein leeres Dokument.

Fügen Sie dann das Grundgerüst eines HTML-Dokumentes ein.

Ein Grundgerüst kann z.B. folgendermaßen aussehen:

<html>	<!-- Beginn des HTML-Dokumentes -->

<head>	<!-- Kopfbereich des Dokumentes -->

<!-- für verschiedene Angaben -->

</head>	<!-- Ende des Kopfbereiches -->

<body>	<!-- Hier beginnt der im Browser sichtbare Teil des Dokumentes -->

</body>	<!-- Hier endet dieser Bereich -->

</html>	<!-- Ende Des HTML-Dokumentes -->

Damit haben Sie ein neues HTML-Dokument erstellt.

In dieses Grundgerüst, können Sie nun einen Titel einfügen. Sie sollten immer einen Titel in das Grundgerüst eingeben, da der Titel von Vielen Browsern zum setzen eines Bookmarks (Lesezeichen) verwendet wird.

Also vervollständigen Sie Ihr Dokument z.B. um folgenden rot markierten Eintrag:

<html>

<head>

<title>Homepage</title>	<!-- Titel der Seite, erscheint bei den meisten Browser

auch in der Titelleiste -->

</head>

<body>

</body>

</html>

Dieses Beispiel finden Sie im Verzeichnis: beisp\Lektion\1\erstes.htm

Wenn Sie dieses Beispiel in einem Browser öffnen, sehen Sie nur einen leeren Anzeigebereich und in der Titelleiste den Text Homepage.

Damit der Browser auch was zum Anzeigen hat, fügen Sie nun eine Überschrift in das Dokument ein.

Beispiel:

<body>

<h1>Willkommen zur Einf&uuml;hrung in HTML</h1>

Wundern Sie sich nicht über die seltsame Schreibweise in dem Wort Einführung, die nennt man Maskieren von Umlauten. Ein Browser wandelt &uuml; bei der Anzeige des Dokumentes in ein ü um.

</body>

Der Browser zeigt nun eine Überschrift Größe 1 an. Sie können Überschriften von der Größe 1 (das ist die größte) bis zur Überschrift Größe 6 (das ist die kleinste) erzeugen.

Dieses Beispiel finden Sie im Verzeichnis: beisp\Lektion\1\zweite.htm

nun können Sie einen Text eingeben

Beispiel:

<h1>Willkommen zur Einf&uuml;hrung in HTML</h1>

<p>50 Millionen Menschen nutzen weltweit das Internet. Die meisten davon

sind erst seit kurzer Zeit dabei. Wir werden damit Zeuge einer

revolution&auml;ren Ver&auml;nderung der Informations-Verbreitung durch das

explosive Wachstum des Internet. Die Erfindungen des Rundfunks und

des Fernsehens bescherte den Menschen ein vorher undenkbares

Informationsangebot; immer hatte dies einen entscheidenden Einflu&szlig;

auf das gesellschaftliche und wirtschaftliche Leben einschlie&szlig;lich

des Marketings und der Werbung.</p>

Mit dem Tag <p> für Absatz beginnen Sie einen Textabschnitt und mit dem Tag </p> beenden Sie einen Textabschnitt. In dem Tag <p> sind auch folgende Zusatzangaben erlaubt:

<p align=left>	dies bewirkt das der Text links ausgerichtet wird

<p align=center>	dies bewirkt das der Text zentriert ausgerichtet wird

<p align=right>	dies bewirkt das der Text rechts ausgerichtet wird

Die align=xxxx Angabe ist auch in Überschriften und Trennlinien erlaubt!

Dieses Beispiel finden Sie im Verzeichnis: beisp\Lektion\1\dritte.htm

Sie haben nun ein HTML-Dokument erstellt, da dieses Dokument ziemlich einfarbig ist wollen wir nun farbig gestalten.

Fügen Sie in das <body> tag nun folgendes ein:

bgcolor="#000080" text="#FFFF00"

das tag sollte nun so aussehen:

<body bgcolor="#000080" text="#FFFF00">	Die Zeichenfolge die Sie nach bgcolor und text sehen ist ein hexadezimaler Farbwert.

Damit erzeugen wir einen dunkelblauen Hintergrund (bgcolor) und gelbe Schrift(text)

Dieses Beispiel finden Sie im Verzeichnis: beisp\Lektion\1\vierte.htm

Sie können aber auch ein GIF oder JPEG Bild als Hintergrund einstellen.

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\1\fuenfte.htm

Damit sind wir am Ende der ersten Lektion, Sie wissen nun wie man ein Grundgerüst erstellt dann eine Überschrift und Text einfügt.

Tip:

Sie können viel lernen, wenn Sie sich den Quelltext verschiedener HTML-Dokument einfach mal anschauen.

Weiter zu Textelemente in HTML


Mit den Bookmarks (Lesezeichen) verwaltet ein Browser Verweise. Sie können so auf den von Ihnen am häufigsten besuchten Seiten ein Bookmark setzen.


Textelemente in HTML-Dokumenten

Textelemente

Zurück

In dieser Lektion finden Sie die verschiedenen Textelemente von HTML.

1. 	Überschriften

2. 	Absatz und Umbruch

3. 	Physische Texthervorhebung

4. 	Logische Texthervorhebung

5. 	Schriftgröße

6. 	Schriftfarbe

7. 	Schriftart

8. 	Trennlinien

9. 	Maskierung von Sonderzeichen

Überschriften

Im der ersten Lektion habe ich Ihnen schon gezeigt, wie man Überschriften einfügt deshalb folgt hier nur eine Zusammenfassung.

Überschriften Tag:

<h1>Überschrift</h1>	Überschrift Größe 1

   :	    :	    :	bis

<h6>Überschrift</h6>	Überschrift Größe 6

<hx align=left>Überschrift<hx> 	Überschrift Größe x links ausgerichtet

<hx align=center>Überschrift<hx> 	Überschrift Größe x zentriert ausgerichtet

<hx align=right>Überschrift<hx> 	Überschrift Größe x rechts ausgerichtet

Überschriften können auch mit verschiedenen anderen Tags kombiniert werden z.B.

können Sie eine physische Texthervorhebung verwenden:

<h1><i>Überschrift</i></h1> 	Überschrift Größe 1 kursiv

<h1><b>Überschrift</b></h1> 	Überschrift Größe 1 fett

<h1><u>Überschrift</u></h1> 	Überschrift Größe 1 unterstrichen

oder Sie verwenden eine logische Texthervorhebung:

<h3><tt>Überschrift</tt></h3> 	Überschrift Größe 3 dicktengleich

<h3><dfn>Überschrift</dfn></h3> 	Überschrift Größe 3 Definition

oder Sie gestalten die Überschrift farbig mit den Schriftfarbe Tag

<h1><font color="#FF0000">Überschrift</font></h1>

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\2\erste.htm

Zurück zum Anfang

Absatz und Umbruch

Wie Sie schon in der ersten Lektion gesehen haben, wird für einen Absatz das Tag <p> verwendet.

<p>Hier folgt der Text.</p> 	In Start- und Endtag eingefaßter Text

In dem Absatz Tag können Sie wie in einer Überschrift den Zusatz align=xxxx einfügen.

Das Endtag </p> können Sie auch weglassen, da viele Browser nicht überprüfen ob es vorhanden ist. Ich empfehle Ihnen aber immer das Endtag mit einzufügen, da z.B. viele Editoren die eine WYSIWYG ähnliche Anzeige verwenden sich massiv beschweren das der Quelltext nicht korrekt ist. Als Ergebnis erhalten Sie dann in diesen Editoren den Quelltext angezeigt.

<p align=left>Dieser Text wird links ausgerichtet<p>

<p align=center>Dieser Text wird zentriert ausgerichtet<p>

<p align=right>Dieser Text wird rechts ausgerichtet<p>

Um innerhalb eines Textbereiches einen neuen Absatz einzufügen, verwenden Sie einfach das Starttag ohne Endtag.

<p>Hier folgt ein Text.<p>Dieser Text wird als neuer Absatz angezeigt.</p>

Da Browser Absätze, Umbrüche und Tabulatoren die Sie in dem reinen Quellcode verwenden nicht anzeigt, müssen Sie dem Browser mitteilen das nun z.B. ein Zeilenumbruch erfolgen soll. Dazu wird das Tag <br> verwendet. Das Tag <br> ist eines der Tags, die kein Endtag verwenden.

<p>Hier folgt ein Text.<br>Dieser Text wird immer in der nachfolgenden Zeile angezeigt</p>

Wie Sie aus diesen Beispielen erkennen können, können Sie in dem Quellcode eines HTML-Textes so viele normale Umbrüche, Absätze und Tabulatoren verwenden, wie Sie wollen. Ein Browser wird Ihnen das Dokument aber so anzeigen, wie Sie es mit den Tags festgelegt haben.

Beispiel

<p align=left>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.<br>Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.<br>Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi.</p>

wird von einem Browser genauso angezeigt, als hätten Sie den Text wie folgt eingegeben:

<p align=left>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.<br>

Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<p>

Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.<br>

Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat. Duis te feugifacilisi.

</p>

aber wie Sie unschwer erkennen werden, läßt sich das Zweite Beispiel viel besser Lesen als das erste.

Verwenden Sie deshalb in Ihren Dokument so viele normale Absätze, Umbrüche und Tabulatoren wie Sie möchten. Ein Beispiel wie man Tabulatoren zum Strukturieren eines Dokumentes einsetzen kann finden Sie im Abschnitt über Listen und Tabellen.

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\2\zweite.htm

Zurück zum Anfang

Physische Texthervorhebung

Im folgenden Abschnitt zeige ich Ihnen die verschiedenen physischen Texthervorhebungen.

Physische Texthervorhebungen werden verwendet um Text hervorzuheben. Der unterschied zur Logischen Texthervorhebung, besteht darin das Sie mit der physischen Texthervorhebung der Text egal welche Schriftart in einem Browser eingestellt ist oder welcher Browser verwendet wird die Hervorhebung immer gleich aussieht während logische Texthervorhebungen von Browsern unterschiedlich angezeigt werden können.

z.B. zeigt der MS-Internet-Explorer 3.0 einen Text der in das <dfn>(logisch) DefinitionsTag</dfn> eingefaßt ist kursiv an, während Netscape 3.0 dasselbe als normalen Text anzeigt.

Ein in das Tag für Fett eingefaßter Text <b>(physisch) Fett</b> in beiden Browsern als fetter Text angezeigt wird.

Zuerst die Tags für HTML-Standard 2.0 Diese Tags werden normalerweise von allen Browsern interpretiert.

Text fett (bold)

<b>Text</b>	Text

Text kursiv (italic)

<i>Text</i>	Text

Text dicktengleich (Schreibmaschine)

<tt>text</tt>	Text

Die Tags für den HTML-Standard 3.0 Diese Tags werden von den meisten Browsern angezeigt.

Text unterstrichen (underline)

<u>Text</u>	Text

Text durchgestrichen (strikeout)

<strike>Text</strike>	Text

Text etwas größer als normal (big)

<big>Text</big>	Text

Text etwas kleiner als normal (small)

<small>Text</small>	Text

Text tiefgestellt (subscript)

<sub>Text</sub>	Text

Text hochgestellt (superscript)

<sup>Text</sup>	Text

Das folgende Tag wird nur von Netscape verwendet

blinkender Text

<blink>Text</blink>

Das folgende Tag wird von MSIE und Netscape 3.0 verwendet

Text durchgestrichen (strikeout)

<s>Text</s>	Text

Die verschiedenen Tags, können auch verschachtelt werden.

z.B.

Text fett und kursiv

<b><i>Text</i></b>	Text

Text kursiv und unterstrichen

<i><u>Text</u></i>	Text

Die Anzeige in der Hilfedatei kann von der Anzeige in Browsern abweichen, deshalb dienen die Beispiele oben nur dazu ungefähr darzustellen wie der Text aussehen kann!

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\2\dritte.htm

Zurück zum Anfang

Logische Texthervorhebung

Es folgen nun die logischen Texthervorhebungen.

Zuerst die Tags für HTML-Standard 2.0 Diese Tags werden normalerweise von allen Browsern interpretiert.

Text als wichtig markieren (strong)

<strong>Der Text wird meistens fett dargestellt</strong>

Text gefühlsbetont dargestellt (emphatisch)

<em>Text wird meistens kursiv dargestellt</em>

Zitat (cite)

<cite>Nichts kann mehr zu einer Seelenruhe beitragen, als wenn man gar keine Meinung hat. (Lichtenberg)</cite>

Variable (variable)

<var>Variable</var>

Tastatur (keyboard)

<kbd>Text</kbd>

Beispiel (sample)

<samp>Beispiel</samp>

Quellcode (code)

<code>Wird z.B. verwendet um Quellcode anzuzeigen</code>

Die Tags für den HTML-Standard 3.0 Diese Tags werden von den meisten Browsern angezeigt.

Definition (definition)

<dfn>Definition</dfn>

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\2\vierte.htm

Zurück zum Anfang

Schriftgröße

Mit <font size=(Größe)>Textabschnitt</font>  können Sie die angezeigte Schriftgröße für einen Textabschnitt festlegen. Die Größe, ist dabei ein absoluter (1..7) oder ein relativer(-7 ..+7) Wert. Weiterhin ist die Schriftgröße abhängig von der im Browser eingestellten Schriftgröße, diese im Browser festgelegte Größe hat als Normalschriftgröße den Wert 3. Das bedeutet, das alle Werte sich auf diese Normalschriftgröße beziehen.

Beispiel

<font size=7>Ziemlich großer Text</font>

<font size=1>Ziemlich kleiner Text</font>

<font size=-2>Text kleiner als normal</font>

<font size=+2>Text größer als normal</font>

Sie können die Normalschriftgröße für einen Textabschnitt auch verändern, verwenden Sie dazu das

<basefont size=(Größe)> Tag.

Weiterhin können Sie das <font size=..> Tag auch mit den in den nächsten Abschnitten vorgestellten Tags für Schriftfarbe und Schriftart kombinieren.

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\2\schrift.htm

Zurück zum Anfang

Schriftfarbe

Mit dem <font color="Wert">Textabschnitt</font> können Sie die Schriftfarbe eines Textabschnittes festlegen.

Beispiel

<font color="red">roter Text</font>

<font color="#FF0000">ebenfalls roter Text</font>

Dazu können Sie entweder einen Farbnamen oder einen Hexadezimalen Farbwert verwenden.

Das <font color=..> Tag auch mit den Tags für Schriftgröße und Schriftart kombinierbar.

Beispiel

<font size=4 color=blue>Textabschnitt Größe 4 und in Blau.</font> Weiter mit normalen Text

Hinweis zu den Farbnamen

Nicht jeder Browser unterstützt die Farbnamen.

Diese Farbnamen werden vom MSIE und Netscape unterstützt.

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\2\schrift.htm

Zurück zum Anfang

Schriftart

Mit dem <font face=(Schriftname)>Textabschnitt</font>  können Sie die Schriftart für einen Textabschnitt festlegen. Sie können auch mehrere Schriftarten festlegen dazu trennen Sie einfach die verschiedenen Schriftnamen durch ein Komma. Der Browser wird dann versuchen die erste Schriftart zu verwenden, ist diese nicht vorhanden so wird er versuchen die nächste Schriftart zu verwenden, ist keine der eingetragenen Schriftarten vorhanden so wird die Schrift wie im Browser festgelegt angezeigt.

Das <font face=..> Tag auch mit den Tags für Schriftgröße und Schriftfarbe kombinierbar.

Beispiel

<font size=4 face=Wide Latin,Adelon,Arial color=blue>Textabschnitt Größe 4, in der Schriftart Wide Latin (wenn Wide Latin nicht vorhanden ist dann in Adelon, wenn Adelon auch nicht vorhanden ist dann in Arial) und in Blau.</font> Weiter mit normalen Text

Hinweis zum Verwenden von Schriftarten:

Da Sie nicht wissen können welche Schriftarten jemand verwendet, wenn er Ihr Dokument betrachtet, sollten Sie mit der Verwendung einer Schriftart als Gestaltungsmittel sparsam umgehen.

Außerdem müssen die Namen der Schriftarten exakt angegeben werden.

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\2\schrift.htm

Zurück zum Anfang

Trennlinien

Mit Trennlinien können Sie einen Text optisch auflockern.

Um eine Trennlinie zu erzeugen fügen Sie einfach das Tag <hr> ein.

Um einen nicht schattierte Trennlinie zu erzeugen fügen Sie in das <hr> Tag folgendes ein

noshade Ihr Tag sieht nun so aus <hr noshade>. Der Unterschied zwischen einer normalen Trennlinie und einer nicht schattierten Trennlinie besteht darin das die normale Trennlinie einen Dreidimensionalen Effekt hat und eine nicht schattierte Trennlinie massiv angezeigt wird.

Beispiel

einfache Trennlinie

<hr>

nichtschattierte Trennlinie

<hr noshade>

Sie können auch die Dicke einer Trennlinie bestimmen, verwenden Sie dazu size=(wert).

Beispiel

Trennlinie Dicke 5 Pixel

<hr size=5>

Trennlinie Dicke 20 Pixel

<hr size=20>

Weiterhin können Sie die Breite ein Trennlinie bestimmen. Diese Angaben können in Prozentwerten oder in Pixel erfolgen. Die Prozentwerte beziehen sich dabei auf die Breite des Anzeigebereiches eines Browsers.

Beispiel

Trennlinie Breite 100 Pixel

<hr width=100>

Trennlinie Breite 400 Pixel

<hr width=400>

Trennlinie Breite 50%

<hr width=50%>

Trennlinie Breite 80%

<hr width=80%>

Sie können auch die Ausrichtung einer Trennlinie festlegen. Dies ist aber nur sinnvoll bei Trennlinien mit einer Breitenangabe.

Beispiel

Trennlinie 100 Pixel links ausgerichtet

<hr width=100 align=left>

Trennlinie 50% Pixel rechts ausgerichtet

<hr width=50% align=right>

Zusätzlich können Sie eine Farbangabe in der Trennlinie angeben. Diese farbige Trennlinie werden aber momentan nur vom MSIE angezeigt!

Beispiel

Trennlinie rot

<hr color=red>

Trennlinie blau

<hr color=blue>

Trennlinie schwarz

<hr color=#000000>

Sie können auch die verschiedenen Angaben miteinander kombinieren.

Beispiel

Trennlinie Höhe 100 Pixel Breite 100 Pixel

<hr size=100 width=100>

nichtschattierte Trennlinie Höhe 50 Pixel Breite 50 Pixel

<hr noshade size=50 width=50>

rote Trennlinie Höhe 100 Pixel Breite 100 Pixel rechts ausgerichtet

<hr size=100 width=100 align=right color=red>

blaue Trennlinie Höhe 100 Pixel Breite 100 Pixel links ausgerichtet

<hr size=100 width=100 align=left color=blue>

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\2\linien.htm

Zurück zum Anfang

Maskierung von Sonderzeichen

Sie sollten darauf achten, das Sie Sonderzeichen wie Umlaute usw. immer HTML-Konform maskieren. Das ist deshalb wichtig, damit Ihre Seiten immer korrekt angezeigt werden da z.B. der Zeichensatz eines UNIX-Rechners von dem eines PC abweichen kann oder ein anderssprachiges Betriebssystems dann statt eines ä ein anderes Zeichen anzeigt.

Hier nun die wichtigsten Konvertierungen

Ä=&Auml;

a=&auml;

Ö=&Ouml;

ö=&ouml;

Ü=&Uuml;

ü=&uuml;

ß=&szlig;

©=&copy;

=&#132;

=&#147;

»=&#187;

«=&#171;

Diese hier sind besonders wichtig, da sie in HTML eine Sonderstellung einnehmen.

&=&amp;

<=&lt;

>=&gt;

Zurück zum Anfang

Weiter zu Listen und Tabellen in HTML


Als Quellcode oder Quelltext bezeichnet man den reinen Text, der nur die Angaben was nun folgen soll enthält. Bei HTML, sind das die Tags und der Text.

Beispiel

<html>

<head>

<title>Titel</title>

</head>

<body>

<p>Hier folgt der Text</p>

</body>

</html>

Ein Beispiel aus Pascal

FUNCTION isPipe(const s: String) : Boolean;

var

    s1 : String;

    isBool : Boolean;

begin

  s1:=s;

  if Pos('|', s1) = 0 then

    isBool:=false

  else

    isBool:=true;

  isPipe:=isBool;

end;

Diese Beiden Beispiele sind Quelltext. Das erste Beispiel, wird von einen Browser interpretiert und dann angezeigt während das zweite Beispiel von einem Compiler in einen Programmteil umgewandelt wird.


Grundfarben:

black

maroon

green

olive

navy

purple

teal

gray

silver

red

lime

yellow

blue

fuchsia

aqua

white

Erweiterte Farbnamen:

aliceblue

antiquewhite

aquamarine

azure

beige

bisque

blanchedalmond

blueviolet

brown

burlywood

cadetblue

chartreuse

chocolate

coral

cornflowerblue

cornsilk

crimson

darkblue

darkzyan

darkgoldenrod

darkgray

darkgreen

darkkhaki

darkmagenta

darkolivegreen

darkorange

darkorchid

darkred

darksalmon

darkseagreen

darkslateblue

darkslategray

darkturquoise

darkviolet

deeppink

deepskyblue

dimgray

dodgerblue

firebrick

floralwhite

forestgreen

gainsboro

ghostwhite

gold

goldenrod

greenyellow

honeydew

hotpink

indianred

indigo

ivory

khaki

lavender

lavenderblush

lawngreen

lemonchiffon

lightblue

lightcoral

lightcyan

lightgoldenrodyellow

lightgreen

lightgrey

lightpink

lightsalmon

lightseagreen

lightskyblue

lightslategray

lightsteelblue

lightyellow

limegreen

linen

magenta

mediumaquamarine

mediumblue

mediumorchid

mediumpurple

mediumseagreen

mediumslateblue

mediumspringgreen

mediumturquoise

mediumvioletred

midnightblue

mintcream

mistyrose

moccasin

navajowhite

oldlace

olivedrab

orange

orangered

orchid

palegoldenrod

palegreen

paleturquoise

palevioletred

papayawhip

peachpuff

pery

pink

plum

powderblue

rosybrown

royalblue

saddelbrown

salmon

sandybrown

seagreen

seashell

sienna

skyblue

slateblue

slategray

snow

springgreen

steelblue

tan

thistle

tomato

turquoise

violet

wheat

whitesmoke

yellowgreen


Listen und Tabellen in HTML-Dokumenten

Listen und Tabellen

Zurück

1. 	Aufzählungsliste

2. 	Numerierte Liste

3. 	Directory

4. 	Definitionsliste

5. 	Tabellen

Aufzählungsliste

Eine Aufzählungsliste können Sie z.B. für eine Aufstellung von Produktinformationen verwenden.

Eine Aufzählungsliste beginnen Sie mit dem Tag <ul> dann folgt der eigentliche Listeneintrag den Sie mit dem Tag <li> beginnen und mit dem Tag </li> abschließen. Am Ende der Liste folgt dann noch das Endtag </ul>.

Beispiel

<ul>	<!-- Start der Liste -->

<li>Erster Eintrag</li>	<!-- Listeneintrag -->

<li>Zweiter Eintrag</li>	<!-- Listeneintrag -->

</ul> 	<!-- Ende der Liste -->

sieht in einem Browser ungefähr wie folgt aus:

 Erster Eintrag

 Zweiter Eintrag

Unter Netscape können Sie auch die Anzeige des Bullettyp festlegen.

<ul type=circle>	Ergibt ein rundes Bullet ohne Füllung

<ul type=square>	Ergibt ein rechteckiges Bullet

<ul type=disc>	Ergibt ein rundes Bullet mit Füllung

Weiterhin Können Sie Listen verschachteln.

Beispiel

<ul>

<li>Erster Eintrag</li>

<ul>

<li>Erster Untereintrag</li>

<li>Zweiter Untereintrag</li>

</ul>

<li>Zweiter Eintrag</li>

</ul>

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\3\listen.htm

Zurück zum Anfang

Numerierte Liste

Eine numerierte  beginnen Sie mit dem Tag <ol> dann folgt der eigentliche Listeneintrag den Sie mit dem Tag <li> beginnen und mit dem Tag </li> abschließen. Am Ende der Liste folgt dann noch das Endtag </ol>.Die Listen werden automatisch durchnumeriert.

Beispiel

<ol>	<!-- Start der Liste -->

<li>Erster Eintrag</li>	<!-- Listeneintrag -->

<li>Zweiter Eintrag</li>	<!-- Listeneintrag -->

</ol> 	<!-- Ende der Liste -->

sieht in einem Browser ungefähr wie folgt aus:

1. Erster Eintrag

2. Zweiter Eintrag

Weitere Listenangaben:

<ol type=A>	Erzeugt eine Liste, die mit Großen Buchstaben numeriert wird.

<ol type=a>	Erzeugt eine Liste, die mit kleinen Buchstaben numeriert wird.

<ol type=I>	Erzeugt eine Liste, die mit Großen Römischen Zahlen numeriert wird.

<ol type=i>	Erzeugt eine Liste, die mit kleinen Römischen Zahlen numeriert wird.

Zusätzlich können Sie den Startwert einer Liste beeinflussen. Verwenden Sie dazu <ol start=(neuer Wert)> um den Anfangswert der Liste festzulegen. Um innerhalb der Liste den Wert zu ändern verwenden Sie <li value=(neuer Wert)>.

Beispiel

<ol start=4>

<li>Eintrag startet mit der Nummer 4</li>

<li>Eintrag bekommt die Nummer 5</li>

<li value=100>Eintrag bekommt den Neuen Startwert 100</li>

<li>Eintrag bekommt die Nummer 101</li>

</ol>

Ergebnis

4. 	Eintrag startet mit der Nummer 4

5. 	Eintrag bekommt die Nummer 5

100. Eintrag bekommt den neuen Startwert 100

101. Eintrag bekommt die Nummer 101

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\3\listen.htm

Zurück zum Anfang

Directory

Eine Directorylisten (Verzeichnislisten) beginnen Sie mit dem Tag <dir> dann folgt der eigentliche Listeneintrag den Sie mit dem Tag <li> beginnen und mit dem Tag </li> abschließen. Am Ende der Liste folgt dann noch das Endtag </dir>.

Beispiel

<dir>	<!-- Start der Liste -->

<li>Erster Eintrag</li>	<!-- Listeneintrag -->

<li>Zweiter Eintrag</li>	<!-- Listeneintrag -->

</dir> 	<!-- Ende der Liste -->

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\3\listen.htm

Zurück zum Anfang

Definitionsliste

Definitionslisten werden für Glossare verwendet. Glossare bestehen aus einer Liste mit Einträgen, die dann erklärt werden. Definitionslisten können auch verschachtelt werden um z.B. eine Baumstruktur zu erzeugen.

Beispiel:

<dl>	<!-- Einleitung Definitionsliste -->

  <dt>HTML</dt>	<!-- Der Ausdruck, der erklärt wird -->

  <dd>Hypertext Markup Language</dd>	<!-- Erklärung des Ausdruckes -->

  <dt>SGML</dt>	<!--nächster Ausdruck -->

  <dd>Structured Generalized Markup Language</dd>	<!--nächste Erklärung -->

</dl>	<!-- Ende der Definitionsliste -->

Ergebnis in einem Browser:

HTML

Hypertext Markup Language

SGML

Structured Generalized Markup Language

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\3\listen.htm

Zurück zum Anfang

Tabellen

Zurück zum Seitenanfang

1.1 	Tabelle Standard

1.2 	Tabelle mit verschiedenen Rahmen

1.3 	Weitere Tabellenangaben

1.4 	Tabelle mit farbigem Hintergrund

1.5 	Tabelle mit farbiger Schrift

1.6 	Umgebender Text

1.7 	MSIE Tabellenfunktionen

Tabelle Standard

Eine Tabelle, können Sie benützen um Daten tabellarisch anzuzeigen oder um Mehrspaltentext in HTML zu erzeugen. Für Mehrspaltentext verwendet man Tabellen ohne Rahmen. Eine Tabelle wird mit folgendem Tag eingeleitet:

<table border>	<!-- dann folgt das Tag für die Tabellenzeile: -->

<tr> 	<!-- nun folgen die Spalten -->

<td>Daten Zeile 1 Spalte 1</td>

<td>Daten Zeile 1 Spalte 2</td>

<td>Daten Zeile 1 Spalte 3</td>

</tr>	<!-- Ende der Tabellenzeile -->

<tr>	<!-- Beginn der nächsten Tabellenzeile -->

<td>Daten Zeile 2 Spalte 1</td>

<td>Daten Zeile 2 Spalte 2</td>

<td>Daten Zeile 2 Spalte 3</td>

</tr>  	<!-- Ende der Tabellenzeile -->

</table>	<!-- Ende der Tabelle -->

In einer Tabelle können Sie auch eine Kopfzeile festlegen

<table border>	<!-- Beginn der Tabelle -->

<tr> 	<!-- Tabellenzeile -->

<th>Kopf der Tabelle Zeile 1 Spalte 1</td>

<th>Kopf der Tabelle Zeile 1 Spalte 2</td>

<th>Kopf der Tabelle Zeile 1 Spalte 3</td>

</tr>	<!-- Ende der Tabellenzeile -->

<tr>	<!-- Beginn der nächsten Tabellenzeile -->

<td>Daten Zeile 2 Spalte 1</td>

<td>Daten Zeile 2 Spalte 2</td>

<td>Daten Zeile 2 Spalte 3</td>

</tr>  	<!-- Ende der Tabellenzeile -->

</table>	<!-- Ende der Tabelle -->

Eine blinde Tabelle erzeugen Sie indem Sie einfach die Angabe border im Tabellentag weglassen oder den Rahmen auf 0 setzen.

<table>	<!-- Beginn der Tabelle -->

<tr> 	<!-- Tabellenzeile -->

<th>Kopf der Tabelle Zeile 1 Spalte 1</td>

<th>Kopf der Tabelle Zeile 1 Spalte 2</td>

<th>Kopf der Tabelle Zeile 1 Spalte 3</td>

</tr>	<!-- Ende der Tabellenzeile -->

<tr>	<!-- Beginn der nächsten Tabellenzeile -->

<td>Daten Zeile 2 Spalte 1</td>

<td>Daten Zeile 2 Spalte 2</td>

<td>Daten Zeile 2 Spalte 3</td>

</tr>  	<!-- Ende der Tabellenzeile -->

</table>	<!-- Ende der Tabelle -->

<table border=0>	<!-- Beginn der Tabelle -->

<tr> 	<!-- Tabellenzeile -->

<th>Kopf der Tabelle Zeile 1 Spalte 1</td>

<th>Kopf der Tabelle Zeile 1 Spalte 2</td>

<th>Kopf der Tabelle Zeile 1 Spalte 3</td>

</tr>	<!-- Ende der Tabellenzeile -->

<tr>	<!-- Beginn der nächsten Tabellenzeile -->

<td>Daten Zeile 2 Spalte 1</td>

<td>Daten Zeile 2 Spalte 2</td>

<td>Daten Zeile 2 Spalte 3</td>

</tr>  	<!-- Ende der Tabellenzeile -->

</table>	<!-- Ende der Tabelle -->

Tip!

Um in einer Tabelle ein leeres Feld zu erzeugen fügen Sie einfach ein erzwungenes Leerzeichein (&#160;) ein.

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\3\tabelle1.htm

Zurück zum Anfang

Tabelle mit verschiedenen Rahmen

Um bei einer Tabelle die Dicke des Rahmens festzulegen, geben Sie einfach nach border=(Wert) die gewünschte Rahmendicke in Pixel ein.

<table border=6>	Beginn der Tabelle, dicke des Rahmens 6 Pixel

Tabelleninhalt …

</table>	Ende der Tabelle

In einer Tabelle können Sie auch die Dicke des Inneren Rahmens festlegen verwenden Sie dazu cellspacing=(wert)

<table cellspacing=6>	Beginn der Tabelle, dicke des inneren Rahmens 6 Pixel

Tabelleninhalt …

</table>	Ende der Tabelle

Durch die Angabe cellpadding=(Wert) legen Sie den Randabstand des Zelleninhaltes zum inneren Rahmen fest. Diese Angabe bezieht sich sowohl auf den rechten, linken, oberen und unteren Abstand.

<table cellpadding=10>	Beginn der Tabelle, Randabstand zum inneren Rahmen 10 Pixel

Tabelleninhalt …

</table>	Ende der Tabelle

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\3\tabelle2.htm

Zurück zum Anfang

Weitere Tabellenangaben

Tabellenhöhe und Breite festlegen

Mit folgenden Angaben könne Sie für eine Tabelle die Höhe und die Breite bestimmen. Diese Angaben können entweder in Pixel oder Prozentwerten erfolgen. Die Pixel sind dabei ein absoluter Wert währen die Angabe in Prozent sich auf den Ausgabebereich bezieht.

<table border width=80%>	Tabelle mit der Breite von 80% des Anzeigebereiches

Tabelleninhalt …

</table>

<table border height=200> 	Tabelle mit der Höhe von 200 Pixel

Tabelleninhalt …

</table>

Beispiel

<table border=1 width=80% height=200>

  <tr>

    <th>Daten Zeile 1 Spalte 1</th>

    <th>Daten Zeile 1 Spalte 2</th>

  </tr>

  <tr>

    <td>Daten Zeile 2 Spalte 1</td>

    <td>Daten Zeile 2 Spalte 2</td>

  </tr>

</table>

Höhe einer Zeile Festlegen

Um die Höhe einzelner Tabellenzeilen festzulegen, verwenden Sie in den Tags <th> oder <td> die Angabe height=(Wert).

<table border>

      <tr>

        <th height=300>

Weiterer Tabelleninhalt …

</table>

Beispiel

<table border=1>

  <tr>

    <th height=50>Daten Zeile 1 Spalte 1 Zeilenhöhe 50 Pixel</th>

    <th>Daten Zeile 1 Spalte 2</th>

  </tr>

  <tr>

    <td height=100>Daten Zeile 2 Spalte 1 Zeilenhöhe 100 Pixel</td>

    <td>Daten Zeile 2 Spalte 1</td>

  </tr>

</table>

Breite einer Spalte festlegen

Um die Breite einzelner Tabellenspalten festzulegen, verwenden Sie in den Tags <th> oder <td> die Angabe width=(Wert).

<table border>

      <tr>

        <th width=300>

Weiterer Tabelleninhalt …

</table>

Beispiel

<table border=1>

  <tr>

    <th width=300>Daten Zeile 1 Spalte 1 Breite 300 Pixel</th>

    <th width=140>Daten Zeile 1 Spalte 2 Breite 140 Pixel</th>

  </tr>

  <tr>

    <td>Daten Zeile 2 Spalte 1</td>

    <td>Daten Zeile 2 Spalte 2</td>

  </tr>

</table>

Zeilen als nicht umbrechbar kennzeichnen

Verwenden Sie dazu in einem Zellentag die Angabe nowrap

<table border>

      <tr>

        <td nowrap>

Weiterer Tabelleninhalt …

</table>

Beispiel

<table border=1>

  <tr>

    <th nowrap>Dies ist eine extralange Zeile, sie dient nur dazu Ihnen zu zeigen wie sich der Zusatz nowrap in einer Tabellenzeile Auswirken kann. Damit Sie sich nun endlich einen neuen 24" Monitor zulegen wurde der ganze Inhalt dieser Zeile so lang gemacht. </th>

  </tr>

  <tr>

    <td>Daten Zeile 2 Spalte 1</td>

  </tr>

</table>

Einzelne Zelleninhalte Ausrichten

Verwenden Sie dazu in den Zellentags die folgenden Angaben

für die horizontale Ausrichtung:

<th align=left|center|right>

oder

<td align=left|center|right> 	Ausrichtung links|zentriert|rechts

für die vertikale Ausrichtung:

<th valign=top|middle|bottom>

oder

<th valign=top|middle|bottom>	Ausrichtung oben|mitte|unten

Beispiel

<table border=1>

  	<tr>

    	<th height=100 width=140 align=left>align=left</th>

    	<th align=right>align=right</th>

    	<th valign=top>valign=top</th>

    	<th valign=bottom>valign=bottom</th>

<th>Standard</th>

  	</tr>

  	<tr>

    	<td height=100 align=center>align=center</td>

    	<td align=right valign=bottom>align=right valign=bottom</td>

    	<td align=center valign=top>align=center valign=top</td>

    	<td>Standard</td>

    	<td>Standard</td>

</tr>

</table>

Mehrere Zellen miteinander verbinden

Verwenden Sie in den Zellentags folgende Angabe wenn Sie innerhalb einen Zeile mehrere Zellen miteinander verbinden möchten <th colspan=(Wert)> oder <td colspan=(Wert)>. Für den Wert, geben Sie die Anzahl der Zellen ein, die Sie miteinander verbinden Möchten. Achten Sie darauf, das Sie für z.B. zwei miteinander verbundenen Zellen in einer Zeile nur ein Zellentag brauchen!

Zum besseren Verständnis sind die Zellentags die wegzulassen sind in den folgenden Beispielen in hellblau markiert.

Beispiel

<table border=1>

 	<tr>

<th colspan=2>Diese beiden Zellen sind verbunden</th></tr>

<th>Diesen Eintrag weglassen!</th>

 	<tr>

    	<td>Daten Zeile 1 Spalte 3</td>

    	<td>Daten Zeile 1 Spalte 3</td>

 	</tr>

  	<tr>

    	<td>Daten Zeile 1 Spalte 3</td>

    	<td>Daten Zeile 1 Spalte 3</td>

  	</tr>

</table>

Verwenden Sie in den Zellentags folgende Angabe wenn Sie innerhalb einen Spalte mehrere Zellen miteinander verbinden möchten <th rowspan=(Wert)> oder <td rowspan=(Wert)>. Für den Wert, geben Sie die Anzahl der Zellen ein, die Sie miteinander verbinden Möchten. Achten Sie darauf, das Sie für z.B. zwei miteinander verbundenen Zellen in einer Spalte nur ein Zellentag brauchen!

Beispiel

<th rowspan=2>

<table border=1>

  	<tr>

<th rowspan=3>Diese drei Zellen sind verbunden</th>

<th>Daten Zeile 1 Spalte 2</td>

  	</tr>

  	<tr>

<td>Diesen Eintrag weglassen!</td>

    	<td>Daten Zeile 2 Spalte 2</td>

  	</tr>

  	<tr>

<td>Diesen Eintrag weglassen!</td>

    	<td>Daten Zeile 3 Spalte 2</td>

  	</tr>

</table>

Um mehrere Zellen in den Zeilen und Spalten miteinander zu verbinden, können Sie die Angabe rowspan und colspan miteinander Kombinieren.

Beispiel

<table border>

<tr>

<th colspan=2 rowspan=2>Daten Zeile 1+2 Spalte 1+2</td>

<th>Diesen Eintrag weglassen!</th>

<th>Daten Zeile 1 Spalte 3</td>

<th>Daten Zeile 1 Spalte 4</td>

</tr>

<tr>

<td>Diesen Eintrag weglassen!</td>

<td>Diesen Eintrag weglassen!</td>

<td>Daten Zeile 2 Spalte 3</td>

<td>Daten Zeile 2 Spalte 4</td>

</tr>

<tr>

<td>Daten Zeile 3 Spalte 1</td>

<td>Daten Zeile 3 Spalte 2</td>

<td>Daten Zeile 3 Spalte 3</td>

<td>Daten Zeile 3 Spalte 4</td>

</tr>

</table>

Hinweis

Sie können in Tabellen auch Tabellen einfügen!

Dies ist nützlich, wenn Sie  z.B. Mehrspaltentext mit einer blinden Tabelle erzeugen und in dem Mehrspaltentext eine Tabelle vorkommen soll!

Die Beispiele dazu finden Sie im Verzeichnis: beisp\Lektion\3\tabelle3.htm

Zurück zum Anfang

Tabelle mit farbigem Hintergrund

Gesamter Hintergrund einer Tabelle farbig machen

Verwenden Sie dazu im Tabellen Tag die Angabe bgcolor=(Farbe) ein. Dabei steht Farbe für einen Farbnamen oder einen hexadezimalen Farbwert.

<table border bgcolor=Farbe>

Tabelleninhalt …

</table>

Beispiel

<table border=1 bgcolor="darkseagreen">

<tr><th nowrap colspan=3>Unser Angebot</th></tr>

  <tr>

    <th align=left>ArtikelNr</th>

    <th>Bezeichnung</th>

    <th align=right>Preis</th>

  </tr>

  <tr>

    <td>ABC1</td>

    <td>Besen</td>

    <td align=right>10,- DM</td>

  </tr>

  <tr>

    <td>F0815</td>

    <td>Dosenbier 08/15</td>

    <td align=right>5,- DM</td>

  </tr>

</table>

Einzelne Zeilen oder Zellen farbig

Um einzelne Zeilen oder Zellen farbig zu gestalten, geben Sie im Zeilentag oder im Zellentag bgcolor=(Farbe) ein. Dabei steht Farbe für einen Farbnamen oder einen hexadezimalen Farbwert.

<table border bgcolor=Farbe>

<tr bgcolor=Farbe>

<td bgcolor=Farbe>Daten</td>

</tr>

</table>

Beispiel

<table border=1>

<tr><th nowrap colspan=3>Unser Angebot</th></tr>

  <tr bgcolor="#8080FF">

    <th align=left>ArtikelNr</th>

    <th>Bezeichnung</th>

    <th align=right>Preis</th>

  </tr>

  <tr>

    <td bgcolor="#FF8080">ABC1</td>

    <td bgcolor="#FF8040">Besen</td>

    <td align=right bgcolor="#FF80C0">10,- DM</td>

  </tr>

  <tr>

    <td bgcolor="#FF8080">F0815</td>

    <td bgcolor="#FF8040">Dosenbier 08/15</td>

    <td align=right bgcolor="#FF80C0">5,- DM</td>

  </tr>

</table>

Die Beispiele dazu finden Sie im Verzeichnis: beisp\Lektion\3\tabelle4.htm

Zurück zum Anfang

Tabelle mit farbiger Schrift

Um die Farbe der Schrift in einer Tabelle zu ändern, verwenden Sie das Tag für die Schriftfarbe.

Beispiel

<table border=1>

<tr><th nowrap colspan=3><font color="#FF00FF">Unser Angebot</font></th></tr>

  <tr bgcolor="#8080FF">

    <th align=left>ArtikelNr</th>

    <th>Bezeichnung</th>

    <th align=right>Preis</th>

  </tr>

  <tr>

    <td bgcolor="#FF8080"><font color="#00FF00">ABC1</font></td>

    <td bgcolor="#FF8040"><font color="#80FF00">Besen</font></td>

    <td align=right bgcolor="#FF80C0"><font color="#80FF80">10,- DM</font></td>

  </tr>

  <tr>

    <td bgcolor="#FF8080">F0815</td>

    <td bgcolor="#FF8040">Dosenbier 08/15</td>

    <td align=right bgcolor="#FF80C0">5,- DM</td>

  </tr>

</table>

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\3\tabelle4.htm

Zurück zum Anfang

Umgebender Text

Tabellenüberschrift -unterschrift

Um eine Tabellenüberschrift -unterschrift zu erzeugen geben Sie nach dem <table border> Tag folgedes ein:

Überschrift

<table border>

<caption align=top>Überschrift der Tabelle</caption>

Tabelleninhalt …

</table>

Unterschrift

<table border>

<caption align=bottom>Unterschrift der Tabelle</caption>

Tabelleninhalt …

</table>

Beispiel

<table border=1>

<caption align=top>Unser Angebot</caption>

  <tr>

    <th align=left>ArtikelNr</th>

    <th>Bezeichnung</th>

    <th align=right>Preis</th>

  </tr>

  <tr>

    <td>ABC1</td>

    <td>Besen</td>

    <td align=right>10,- DM</td>

  </tr>

  <tr>

    <td>F0815</td>

    <td>Dosenbier 08/15</td>

    <td align=right>5,- DM</td>

  </tr>

</table>

Umfließender Text

Um Text um eine Tabelle herumfließen zu lassen, geben Sie einfach im Tabellen Tag die Angabe align=(Ausrichtung) an.

Text links um die Tabelle herumfließen lassen

<table border align=left>

Tabelleninhalt …

</table>

Text rechts um die Tabelle herumfließen lassen

<table border align=right>

Tabelleninhalt …

</table>

Textabstand (momentan nur Netscape 3.0)

Um einen horizontalen und vertikalen Abstand zwischen der Tabelle und dem umfließenden Text zu schaffen, verwenden Sie im Tabellen Tag die Angabe  hspace=(Wert) vspace=(Wert). Wert steht für die Pixelanzahl.

<table border=1 align=(Ausrichtung) hspace=(Wert) vspace=(Wert)>

Tabelleninhalt …

</table>

Die Beispiele dazu finden Sie im Verzeichnis: beisp\Lektion\3\tabelle5.htm

Zurück zum Anfang

MSIE Tabellenfunktionen

Die folgenden Tabellenfunktionen werden nur vom MS-Internet Explorer verwendet!

Regeln für Gitternetzlinien

<table border=1 rules=(Wert)>

Geben Sie für Wert einen der folgenden Werte ein.

Wert:

basic  	Linien zwischen Tabellenkopf, Tabellenkörper und Tabellenfuß nicht zwischen den 	Tabellenzeilen

none	Nur der äußere Tabellenrahmen wird angezeigt

rows	Es werden nur der äußere Tabellenrahmen und die Linien zwischen den Zeilen angezeigt

cols	Es werden nur der äußere Tabellenrahmen und die Linien zwischen den Spalten angezeigt

all	Alle Linien werden angezeigt (verhält sich wie eine Standardtabelle)

Rahmeneingenschaften

Mit den folgenden Angaben können Sie den Rahmen beeinflussen

<table border=1 frame=(Wert)>

Wert:

box	Alle Linien werden angezeigt (verhält sich wie eine Standardtabelle)

void	Es wird kein Tabellenrahmen angezeigt, Die inneren Gitternetzlinien werden angezeigt

above	Es wird am oberen Rand eine Linie angezeigt

below	Es wird am unteren Rand eine Linie angezeigt

hsides	Es wird am oberen und unteren Rand eine Linie angezeigt

vsides	Es wird nur am linken und rechten Rand eine Linie angezeigt

lhs	Es wird nur am linken Rand eine Linie angezeigt

rhs	Es wird nur am rechten Rand eine Linie angezeigt

Rahmenfarbe

Mit der folgenden Angabe, können Sie die Farbe des gesamten Tabellenrahmens einstellen. Die Tabelle wirkt dadurch nicht mehr dreidimensional.

<table border bordercolor="(Farbe)">

Geben Sie für Farbe einen Farbnamen oder einen hexadezimalen Farbwert ein.

Mit den folgenden Angaben, können Sie den Schattenlinie und die Lichtlinie des Rahmens festlegen. Die Tabelle wirkt dadurch dreidimensional.

<table border bordercolordark="(Farbe)" bordercolorlight="(Farbe)">

Geben Sie für Farbe einen Farbnamen oder einen hexadezimalen Farbwert ein.

Hintergrundbilder für eine Tabelle

Um für eine Tabelle das Hintergrundbild festzulegen verwenden Sie die folgenden Angaben.

<table border background="(Bild)> 	Hintergrund gesamte Tabelle

<th background="(Bild)">Daten</th>	Hintergrund Zelle

<td background="(Bild)">Daten</td>	Hintergrund Zelle

Geben Sie für Bild den Dateinamen der Grafik ein die Sie verwenden wollen.

Die Beispiele dazu finden Sie im Verzeichnis: beisp\Lektion\3\tabelle6.htm

Zurück zum Anfang

Weiter zu Verweise


Verweise und Referenzen in HTML-Dokumenten

Verweise

Zurück

1. 	interne Verweise

2. 	Verweis zu einer Url

3. 	Verweis auf eine Datei

4. 	Pfadangaben

5. 	Verweis zu einem Frame

6. 	Anker innerhalb eines Dokumentes

7. 	Verweis zu einem Anker in einem Anderen Dokument

Verweise werden immer auf die gleiche Art gesetzt. Das Grundschema eines Verweise sieht wie folgt aus:

<a href=(Verweisziel)>Verweistext</a>

Wohin der Verweis geht wird innerhalb des href=(Verweisziel) festgelegt. Verweise können sich auf andere Seiten, Anker innerhalb eines Dokumentes, Server, Dateien usw. beziehen.

Auf Beispiele habe ich in dieser Lektion verzichtet, da Sie ja nur diese Anleitung in HTML zu öffnen brauchen und Sie eine Auswahl an Verweisen haben.

Interne Verweise

Interner Verweise dienen dazu innerhalb eines HTML-Projektes auf andere Seiten zu wechseln.

Einfacher Verweis

<a href=datei.htm>Zur nächsten Seite</a>

Verweis mit Pfad

Verweis mit Anker

Zurück zum Anfang

Verweis zu einer URL

Verweise zu einer URL dienen Dazu um z.B. von einem HTML-Projekt zu weiterführender Literatur zu verweisen.

Beispiel

<a href=http://www.netzwelt.com/selfhtml/>Ausführliche Anleitung zu HTML</a>

Zurück zum Anfang

Verweis zu einer Datei

Sie können auch einen Verweis auf eine Datei setzen, das ist z.B. nützlich wenn Sie eine Datei zum downloaden anbieten.

Beispiel

<a href=Datei.zip>Pferderennen zum Downloaden</a>

Zurück zum Anfang

Pfadangaben

Wenn Sie ihr HTML-Projekt auf verschiedene Pfade verteilt haben, müssen Sie in einem Verweis auf eine Datei in einem anderen Verzeichnis eine Pfadangabe machen. Die Pfadangabe kann relativ oder absolut erfolgen.

Beispiel relative Pfadangabe

<a href=Pfad/Datei.htm>nächste Seite</a>

Damit wechselt der Browser ins nächte Unterverzeichnis in dem Aktuellen Pfad

Beispiel absolute Pfadangabe

<a href=file://localhost/c:/Windows/help.hlp>Hilfe zur Hilfe</a>

Damit wechselt der Browser auf den lokalen Rechner in das Windowsverzeichnis und öffnet oder speichert (je nach Einstellung des Benutzers) die Hilfe zur Hilfe Datei.

Zurück zum Anfang

Verweis zu einem Frame

Um ein Verweisziel in einem bestehenden Frame anzuzeigen wird der Zusatz target=(Name des Fensters) verwendet.

Beispiel

<a href=fuenf.htm target=Anzeigefenster>Verweise</a>

Zurück zum Anfang

Anker innerhalb eines Dokumentes

Um einen Anker innerhalb eines Dokumentes zu setzen wird Ausnahmsweise nicht href verwendet sondern dem Anker wird ein Name gegeben.

Beispiel

<a name="Index"></a>

Auf diesen Anker können Sie nun innerhalb Ihrer Seite oder Projektes verweisen.

Beispiel

<a href=#Index>Zurück zum Seitenanfang</a>

Zurück zum Anfang

Verweis zu einem Anker in einem anderen Dokument

Sie können auch auf einen Anker in einem anderen Dokument verweisen.

Beispiel

<a href=Start.htm#Index>Zurück zum Inhaltsverzeichnis</a>

Zurück zum Anfang

Weiter zu Frames und Formulare


Frames in HTML-Dokumenten

Frames und Formulare

Zurück

1. 	Frames

2. 	Formulare

Frames

1. 	Frameset definieren

2. 	Frameinhalt definieren

Frameset definieren

Mit Hilfe von Frames, können Sie einen Browser in mehrere Bildschirmbereiche aufteilen. Um Frames zu erstellen müssen Sie erstenmal einen Frameset definieren. Sie können einen Framset in Spalten oder Zeilen aufteilen. Für einen Frameset verwendet man das Tag <frameset rows=(Aufteilung)> für Zeilen oder <frameset cols=(Aufteilung)> für Spalten das Frameset wird dann mit </frameset> abgeschlossen. Innerhalb des Framesets werden dann die einzelnen Frames eingetragen. Weiterhin wird das Frameset nach dem Kopfbereich <head></head> und vor dem Körper <body></body> des Dokumentes definiert.

In der Aufteilung eines Framesets können Sie die Höhe oder Breite eines Frames in Pixel oder Prozentwerten einstellen. Ein Stern * steht für den Restwert eines Frames.

Beispiel

<html><head><title>Frames in HTML</title></head>

<frameset rows="20%,*,20%">	<!-- Ergibt eine Bildschirmaufteilung -->

  Inhalt des Framesets	<!-- von 20% für den ersten Frame, 60% für den zweiten -->

</frameset>	<!-- Frame und 20% für den dritten Frame -->

<body>In diesem Bereich können Sie Angaben für Browser die keinen Frames verwenden können machen. Ein Browser der Frames anzeigen kann wird diesen Bereich nicht anzeigen.</body></html>

Ergebnis

Frameset können auch untereinander verschachtelt werden.

Beispiel

Die Farben dienen dazu Ihnen zu zeigen wohin die untergeordneten Frameinhalte und Framset dazugehören. Gleiche Farbe bedeutet das der Frameinhalt und das Frameset zu der nächsthöheren Stufe in der Hierarchie gehören.

<frameset rows="80%,20%">	<!-- Hier wird das erste Framset definiert -->

<frameset cols="20%,80%">	<!-- Hier wird das zweite Framset definiert -->

<frame src="IN2.htm">	<!-- Inhalt des zweiten Frames -->

<frameset rows="35%,65%"><!-- Hier wird das dritte Framset definiert -->

<frame src="IN3.HTM">	<!-- Inhalt des dritten Frames -->

<frame src="IN4.HTM">	<!-- Inhalt des vierten Frames -->

</frameset>	<!-- Ende des dritten Framesets -->

</frameset>	<!-- Ende des zweiten Framesets -->

<frame src="IN1.HTM"> 	<!-- Inhalt des ersten Frames -->

</frameset>	<!-- Ende des ersten Framesets -->

Ergebnis

Für ein Framset können Sie noch folgende Angaben machen

<frameset cols(rows)=(Aufteilung) border=(Pixel) frameborder=(1/0 oder yes/no) framespacing=(Pixel)>

 border=(Pixel)

Wird von Netscape verwendet um die Rahmendicke einzustellen. Wenn Sie als Rahmendicke 0 eingeben wird kein Rahmen angezeigt.

 frameborder=(1/0 oder yes/no)

Wird vom MSIE verwendet um die Rahmenart einzustellen.

Wenn Sie 0 eingeben wird der Rahmen nicht mehr dreidimensional angezeigt.

 framespacing=(Pixel)

Wird vom MSIE verwendet um den Rahmenabstand zu bestimmen. Wenn Sie 0 eingeben beträgt der Rahmenabstand = 0 Pixel.

Inhalt eines Frames

Um den Inhalt eines Framebereiches zu definieren wird das Tag <frame> verwendet.

<frame>

Erzeugt einen leeren Frame

<frame src=Datei>

Zeigt in einem Frame ein Dokument an

<frame src=Datei name=Anzeigefenster>

Teilt dem Frame den Namen (Anzeigefenster) zu. Der Name wird verwendet um Verweiseeinem Frame anzuzeigen.

Reservierte Framenamen:

_self 	Verweis zum eingenen Frame

_new _blank	Erzeugt ein neues Browserfenster in dem der Inhalt des Verweises angezeigt wird.

_parent 	Das Verweisziel wird in dem Zustand angezeigt, in dem sich der Browser vor Start Ihres

Framsets befand.

_top	Das Verweisziel wird im Browserfenster ohne Frames angezeigt

<frame src=Datei noresize>

Die Angabe noresize bewirkt das der Frame in seiner Größe unveränderlich ist. Diese Angabe wirkt sich auch auf angrenzende Frames aus!

<frame src=Datei scrolling=(yes oder no)

Damit können Sie eine Bildlaufleiste erzwingen oder unterdrücken.

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\4\frame.htm

Zurück zum Anfang

Formulare

1. 	Formulare definieren

2. 	Einzeilige Eingabefelder

3. 	Mehrzeilige Eingabefelder

4. 	Auswahllisten

5. 	Radio- und Checkbutton

6. 	Buttons zum Abschicken

Mit Formularen können Sie Bestelllisten, Auswertungen usw. erstellen. Die Formulare werden dann entweder per E-Mail weitergeleitet oder per CGI-Script auf einem Server verarbeitet.

Ein Beispiel für die Verarbeitung von Formularen per CGI ist eine Suchanfrage bei einer Suchdatenbank.

Formulare definieren

Mit <form action="(Anweisung)" method=(Methode)> wird ein Formular eingeleitet und mit </form> endet ein Formularbereich. Als Anweisung können Sie z.B. bestimmen, das das Formular per E-Mail verschickt wird. Mit method legen Sie fest wie die Formulardaten auf einem Server gespeichert werden.

Dafür gibt es zwei Möglichkeiten:

get	Damit speichert ein Server die Daten in der Variable QUERY_STRING

post	Damit behandelt ein Server die Daten wie eine Benutzereingabe.

Wenn Sie sich ein Formular per E-Mail zukommen lassen wollen verwenden Sie die Methode post. Sie erhalten dann einen E-Mail mit angehängter Datei die dann die Daten des Formulares enthält.

Beispiel Formular als E-Mail versenden

<form action=MailTo:Dirk_Bruederle@compuserve.com method=post enctype="text/plain"> 	Die Angabe enctype=text/plain sorgt dafür das ein moderner Browser die Formulardaten  wie normaler Text verschickt. Wenn ein Browser diese Angabe nicht versteht erhalten Sie die Formulardaten URLKodiert z.B. Suche Hilfe für HTML sieht in der ankommenden E-Mail so aus: Suche+Hilfe+f%FCr+HTML%21

Hier folgen die Elemente des Formulares wie Buttons, Eingabefelder u.s.w. In einem Formular können Sie alle HTML-Tags verwenden.

</form>

Beispiel Formular CGI-Script

<form action=../cgi/suchen.pl method=get>

Hier folgen die Elemente des Formulares wie Buttons, Eingabefelder u.s.w.

</form>

Damit wir auf dem Server der CGI-Script SUCHEN.PL ausgeführt, als Rückmeldung könnte es sein das Sie dann eine dynamisch erstellte HTML-Seite mit dem Suchergebnis erhalten.

Hinweis

Der MSIE wertet die Angabe MailTo in einem Formular nicht richtig aus, als Ergebnis erhalten Sie dann eine leere E-Mail!

Zurück

Eingabefelder

Eingabefelder verwendet man für wenige Wörter z.B. Für Namen, E-Mail Adressen u.s.w.

Ein Eingabefeld wird mit <input name=(Bezeichnername) size=(Wert) maxlength=(Wert)> definiert.

Der Bezeichnername steht für den Namen des Eingabefeldes. Mit size=(Wert) bestimmen Sie die Angezeigte Größe des Eingabefeldes in Zeichen und mit maxlenght=(Wert) bestimmen Sie die maximal Anzahl von Zeichen die ein Eingabefeld haben soll.

Verwenden Sie für Bezeichnernamen keine Umlaute, Leerzeichen und Sonderzeichen. Das einzige Sonderzeichen das erlaubt ist, ist ein Unterstrich _

Beispiel

Geben Sie hier Ihren Namen ein: <input name=Vor_Nachname size=50 maxenght=80><br>

Weitere Angaben in Eingabefeldern:

Textvorbelegung in Eingabefeldern

Geben Sie hier Ihre URL an: <input name=URL size=50 maxenght=80 value=http://><br>

Eingabefeld für Passwort

Passwort: <input type=password name=Passwort size=8 maxenght=8><br>

Hinweis

Passwörter werden trotz verdeckter Eingabe im Internet unverschlüsselt übertragen!

Zurück

Mehrzeilige Eingabefelder

Um größere Eingaben ermöglichen zu können werde mehrzeilige Eingabefelder verwendet.

Ein mehrzeiliges Eingabefeld wird mit <textarea name="(Bezeichnername)" rows=(Wert) cols=(Wert)></textarea> definiert. Mit rows=(Wert) bestimmen Sie die Anzahl der Angezeigten Zeilen und mit cols=(Wert) die Anzahl der angezeigten Zeichen eines mehrzeiligen Eingabefeldes.

Beispiel

Wie finden Sie die Werbung von XYZ?<br>

<textarea name="Werbung rows=10 cols=50></textarea>

Weitere Angaben in mehrzeiligen Eingabefeldern:

Textvorbelegung

Schreiben Sie einfach den Text in den Bereich der Textarea.

<textarea name="Werbung rows=10 cols=50>Ich finde die Werbung xyz </textarea>

Umbruchkontrolle

Mit der Zusatzangabe wrap=(Umbruchart) können Sie festlegen das in einem mehrzeiligen Eingabefeld ein Umbruch erfolgen soll.

<textarea name="Werbung rows=10 cols=50 wrap=virtual></textarea>

Mit wrap=virtual bewirken Sie das der Text bei der Eingabe automatisch umgebrochen wird. Bei der Versendung des Formulares werden die Zeilenumbrüche nicht verwendet.

Mit wrab=physical bewirken Sie dasselbe wie mit wrap=virtual es werden die Zeilenumbrüche mitverschickt.

Mit wrap=off schalten Sie den Zeilenumbruch aus.

Zurück

Auswahllisten

In Formularen können Sie auch Auswahllisten definieren die feste Einträge zur Auswahl enthalten.

Eine Auswahlliste wird wie folgt definiert.

<select name="(Bezeichnername)" size=(Wert)>	Start der Auswahlliste

  	<option> Eintrag 	Es folgen die Einträge zur Auswahl

  	<option> Eintrag

...

</select>	Ende der Auswahlliste

Mit size=(Wert) bestimmen Sie die Anzahl der angezeigten Werte einer Auswahlliste. Wenn Sie z.B. den Wert 1 eingeben erhalten Sie eine DropDown Liste.

Weitere Angaben in Auswahllisten

Mehrfachauswahl

Mit der Angabe multiple in einer Auswahlliste erlauben Sie eine mehrfachauswahl in einer Auswahlliste. Das heißt das mehrere Einträge ausgewählt werden können,

<select name="(Bezeichnername)" size=(Wert) multiple >

Einträge vorauswählen

Mit <option selected>(Eintrag) wird der Eintrag markiert und ausgewählt. Wenn Sie die Angabe multiple verwenden, können Sie auch mehrere Einträge vorselektieren.

Andere Werte als Einträge abschicken

Mit <option value="(Wert)"> können Sie einen Wert eingeben der dann anstatt des Eintrages abgeschickt wird.

Zurück

Radio- und Checkbutton

Mit Radiobuttons können Sie eine Gruppe von Schaltern erstellen aus denen der Anwender nur einen Eintrag auswählen kann. Ein Radiobutton wird mit <input type=radio name=(Bezeichnername) value=(Wert)> definiert. Radiobutttons die den gleichen Bezeichnernamen tragen gehören zu einer Gruppe. Als value=(Wert) tragen Sie den Wert ein der bei Auswahl des Buttons verschickt werden soll.

Beispiel

<input type=radio name="Zahlmethode" value="Nachnahme"> per Nachnahme<br>

<input type=radio name="Zahlmethode" value="Vorkasse"> per Vorkasse<br>

Mit Checkbuttons können Sie eine Gruppe von Schaltern erstellen aus denen der Anwender einen oder mehrere Einträge auswählen kann. Ein Checkbutton wird mit <input type=checkbox name=(Bezeichnername) value=(Wert)> definiert. Checkbutton die den gleichen Bezeichnernamen tragen gehören zu einer Gruppe. Als value=(Wert) tragen Sie den Wert ein der bei Auswahl des Buttons verschickt werden soll.

Beispiel

Für welchen Bereich wünschen Sie mehr Info<br>

<input type=checkbox name="Info" value="Software"> Software<br>

<input type=checkbox name="Info" value="Hardware"> Hardware<br>

<input type=checkbox name="Info" value="Moebel"> Möbel

Einträge vorselektieren

Mit <input type=(Typ) name=(Bezeichnername) checked value=(Wert)>  können Sie  einen Radio- oder Checkbutton voerselektieren.

Zurück

Buttons zum Abschicken

Es werden zwei Bottons Standardmäßig von Formularen verwendet. Ein Button zum abschicken des Formulares und einer zum löschen des Formulares. Bei diesen Schaltern steht value=(Wert) für die Beschriftung des Schalters zu Verfügung.

<input type=submit value="Abschicken"> 	Schalter zum abschicken

<input type=reset value="Verwerfen">	Schalter zum löschen

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\4\formular.htm

Zurück

Zurück zum Anfang

Weiter zu Grafiken


Grafik in HTML-Dokumenten

Grafiken

Zurück

1. 	Grafiken einbinden

2. 	Grafiken und Text

3. 	Namen für Grafiken

4. 	Grafiken als Verweis

5. 	Grafiken mit Verweissensitiven Flächen (MAP)

Grafiken einbinden

1.1 	Grafik referenzieren

1.2 	Grafik aus einem anderen Verzeichnis referenzieren

1.3 	Grafik auf einem Server referenzieren

1.4 	Alternativer Text wenn Grafik nicht anzeigbar

1.5 	Rahmen um Grafik

1.6 	Größe der Grafik einstellen

Grafik referenzieren

Eine Grafik können Sie mit <img src=(Grafik-Datei)> in ein HTML-Dokument einbinden.

Verwendung finden im WWW die Grafikformate GIF und JPEG als neues Format wird noch PNG verwendet. Wenn Sie eine Grafik auf diese Weise referenzieren  muß sich die Grafik in dem selben Verzeichnis befinden wie das HTML-Dokument.

Zurück

Grafik aus einem anderen Verzeichnis referenzieren

Um einen Grafik in einem anderen Verzeichnis zu referenzieren können Sie vor den Namen der Grafik-Datei einen relativen oder absoluten Pfad angeben.

Beispiel

Ihre Seite liegt im Verzeichnis c:\homepage  und die Grafik liegt im Verzeichnis c:\homepage\bild" dann würde die relative Grafikreferenz so aussehen:

<img src="bild/MeinBild.gif">

und so würde z. B. der absolute Pfad aussehen:

<img src="file://localhost/c:/homepage/bild/MeinBild.gif">

Zurück

Grafik auf einem Server referenzieren

Um eine Grafik auf einem anderen Server zu referenzieren geben Sie einfach die URL und den Pfad der Grafik vor dem Namen der Grafik-Datei ein.

Beispiel

<img src=http://ourworld.compuserve.com/Homepages/Dirk_Brüderle/wasch.gif>

Zurück

Alternativer Text wenn Grafik nicht anzeigbar

Um einen Text anzuzeigen wenn die Grafik nicht vorhanden ist verwenden Sie die Angabe alt=(Alternativer Text) innerhalb der Grafikreferenz.

Beispiel

<img src=KeinBild.gif alt=Kein Bild vorhanden!>

Hinweis

Die Angabe alt wird von Netscape nur währen des Ladevorganges eines Bildes angezeigt. Wenn das Bild fehlt zeigt Netscape nur ein Icon an.

Der MSIE zeigt den alternativen Text an wenn das Bild fehlt, weiterhin zeigt der MSIE 3.0 den Text der in alt steht als Hint an wenn man den Mauszeiger auf dem Bild stehen läßt.

Zurück

Rahmen um Grafik

Sie können um einen Grafik einen Rahmen definieren.

<img src=(Grafik-Datei) border=(Wert)>

Geben Sie als Wert die dicke des Rahmens in Pixel an.

Zurück

Größe der Grafik einstellen

Durch die Angabe von height=(Wert) und width=(Wert) können Sie die Größe der Grafik festlegen. Dies hat den Vorteil das der Browser den Platz für eine Grafik freihält. Außerdem können Sie damit eine Grafik skalieren.

Height steht für die Höhe der Grafik und width steht für die Breite der Grafik.

Beispiel

Grafik in Originalgröße

<img src=platzda.jpg height=512 width=768>

Grafik verkleinert

<img src=platzda.jpg height=100 width=150>

Zurück

Die Beispiele dazu finden Sie im Verzeichnis: beisp\Lektion\5\eins.htm

Zurück zum Anfang

Grafiken und Text

2.1 	Grafiken beschriften

2.2 	Text um Grafik fließen lassen

2.3 	Textfortzetzung unterhalb der Grafik erzwingen

2.4 	Abstand Grafik  Text

Grafiken beschriften

Sie können eine Grafik beschriften, dazu wird das Element align=(Ausrichtung) verwendet.

Folgende Werte sind für align in Grafiken zulässig:

top	Der folgende Text wird am oberen Rand der Grafik ausgerichtet

middle	Der folgende Text wird mittig der Grafik ausgerichtet

bottom	Der folgende Text wird am unteren Rand der Grafik ausgerichtet

texttop	Der folgende Text wird am oberen Rand der Grafik ausgerichtet auch wenn im Text noch weitere Elemente vorkommen z.B. eine weitere Grafik

absmiddle	Der folgende Text wird mittig der Grafik ausgerichtet auch wenn im Text noch weitere Elemente vorkommen z.B. eine weitere Grafik

absbottom	Der folgende Text wird am wird am unteren Rand der Grafik ausgerichtet auch wenn im Text noch weitere Elemente vorkommen z.B. eine weitere Grafik

Beispiel

<img src=img0001.gif align=bottom> Böblinger Stadtkirche

Zurück

Text um Grafik fließen lassen

Sie können Text um eine Grafik herumfließen lassen, dazu wird das Element align=(Ausrichtung) verwendet.

Folgende Werte sind für align in Grafiken zulässig:

left	Der Text wird links der Grafik angezeigt

right	Der Text wird rechts der Grafik angezeigt

Zurück

Textfortsetzung unterhalb der Grafik erzwingen

Wenn Sie möchten das weiterer Text unterhalb einer Grafik fortgesetzt wird, können Sie das Zeilenumbruch-Tag mit der Zusatzangabe clear=all verwenden.

<br clear=all>

Erlaubt ist auch <br clear=left> und <br clear=right>.

Zurück

Abstand Grafik  Text

Mit den Angaben hspace=(Wert) und vspace=(Wert) können Sie den horizontalen und vertikalen Abstand zwischen dem Bildrand und dem Text festlegen.

Beispiel

<img src="park.jpg" border=0 align=left hspace=15 vspace=15>

Zurück

Die Beispiele dazu finden Sie im Verzeichnis: beisp\Lektion\5\zwei.htm

Zurück zum Anfang

Namen für Grafiken

Für eine Grafik kann man einen Namen festlegen, der Name einer Grafik kann dann für JAVA-Script verwendet werden um z.B. die Grafik direkt anzusprechen.

Beispiel

<img src="(Grafik-Datei)" name="Bild1">

Zurück zum Anfang

Grafiken als Verweis

Sie können auch Grafiken als Schaltflächen für Verweise einsetzen. Um dies zu ermöglichen setzen Sie einfach anstelle des Textes die Grafik als Hinweis ein.

Beispiel

<a href="drei1.htm"><img src="RECHTS1.GIF" alt="Weiter zur naechsten Seite"></a>

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\5\drei.htm

Zurück zum Anfang

Grafiken mit Verweissensitiven Flächen (MAP)

5.1 	Client Side Maps

5.2 	Server Side Maps

Grafiken mit Verweissensitiven Flächen, sind Grafiken in denen ein Anwender auf ein Detail einer Grafik klicken kann und er damit wie mit einem Verweis auf eine andere Seite wechseln kann. Diese Map-Grafiken können Sie z.B. für Navigationsleisten verwenden.

Client Side Maps

Bei Client Side Maps übernimmt der Browser die Verwaltung der anklickbaren Flächen. Dazu müssen Sie eine MAP in Ihrem Dokument definieren. Der Nachteil dieses Verfahrens ist das ältere Browser mit solch einer Client Side Map nichts anfangen können. Sie sollten also die verweise auch als normale Verweise in Ihrem Dokument anbieten.

Ein MAP-Bereich wird wie folgt definiert:

<map name="Bild"> 	<!-- Damit legen Sie den MAP-Namen fest -->

  <area shape=polygon coords="8,0,99,93,192,2,8,0" href="l1.htm"> <!-- Dies ist ein MAP-Bereich der bei der Anzeige verwendet wird -->

  <area shape=polygon coords="199,7,199,195 106,99,199,7" href="http://www.demo.de">

  <area shape=polygon coords="98,107,199,201,5,201,98,107" href="../l3.htm">

  <area shape=polygon coords="0,7,93,101,0,193,0,7" href="l4.htm" target=Fenster>

</map>	<!-- Hier endet der MAP-Bereich -->

In Map-Bereichen können Sie alle Arten von Verweisen notieren.

Nun müssen Sie nur noch die MAP dem Bild zuweisen. Dazu erweitern Sie das Grafik-Tag um folgendes.

<img src="map.gif" usemap="#Bild" border=0>

Die einzelnen anklickbaren Bereiche (area) können Sie folgendermaßen festlegen:

Ein Rechteck definieren Sie mit dem Koordinaten für die Eckpunkte

    <area shape=rect coords="x1,y1,x2,y2 ...

    x1 = linke obere Ecke, Pixel werden von links gezählt

    y1 = linke obere Ecke, Pixel werden von oben gezählt

    x2 = rechte untere Ecke, Pixel werden von links gezählt

    y2 = rechte untere Ecke, Pixel werden von oben gezählt

Einen Kreis definieren Sie mit den Koordinaten für den Mittelpunkt und den Radius

    <area shape=circle coords="x,y,r ...

    x = Mittelpunkt, Pixel werden von links gezählt

    y = Mittelpunkt, Pixel werden von oben gezählt

    r = Radius des Kreises in Pixel

Ein Polygon (Vieleck) definieren Sie mit den Koordinaten der einzelnen Eckpunkte

    <area shape=polygon coords="x1,y1,x2,y2 ... xn,yn ...

    x1..n = Pixel einer Ecke von links gezählt

    y1..n = Pixel einer Ecke von oben gezählt

    Sie können so viele Ecken definieren wie Sie wollen. Von der letzten definierten Ecke müssen Sie sich

    eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt dann das Polygon

Das Beispiel dazu finden Sie im Verzeichnis: beisp\Lektion\5\mapdemo.htm

Zurück

Server Side Maps

Server Side Maps werden auf dem Serverrechner abgelegt. Diese Maps sind nur Online verfügbar. Um eine Server Side Map abzulegen müssen Sie mit Ihrem Provider abklären welches Format die Map verwendet. Der Vorteil dieses Verfahren ist das ältere Browser dieses Verfaren anwenden können.

Zurück

Zurück zum Anfang

Weiter zu Multimedia


Als Hint bezeichnet man einen Hinweis der erscheint wenn der Mauszeiger auf einem Objekt kurze Zeit verharrt.


Multimedia in HTML-Dokumenten

Multimedia

Zurück

1. 	Hintergrundmusik (MSIE)

2. 	embed (Einbinden einer Multimediadatei)

3. 	Videos (MSIE)

Hintergrundmusik (nur MSIE)

Um eine Hintergrundmusik einzubinden wird das Tag <bgsound src="(Musik-Datei)" loop="(Wert)"> verwendet. Bei loop können Sie die Anzahl der Wiederholungen festlegen, wenn Sie eine Endloswiederholung wünschen dann geben Sie als Wert infinite ein.

Beispiel

<bgsound src="BALLADE.MID" loop="1">

Zurück zum Anfang

embed (Netscape und MSIE 3.0)

Mit dem Tag <embed src=(Datei)> können Sie verschiedenartigsten Dateien einbinden. Das ganze funktioniert ungefähr so ähnlich wie OLE. Vorausetzung das der Anwender eine solcherart eingebundene Datei ansehen kann ist ein PlugIn das die Datei anzeigt.

Folgende Angaben sind zusätzlich in embed erlaubt:

height	Höhe des Anzeigebereiches

width	Breite des Anzeigebereiches

autostart=true 	Wird bei Musik- und Videodateien verwendet. Damit startet eine Datei automatisch

loop=true	Damit wird eine Datei endlos wiederholt.

Beispiel

Hintergrundmusik im Netscape simulieren

<embed src="BALLADE.MID" width=0 height=0 loop=true>

Exceldatei einbinden

<embed src=test.xls height=300 width=400>

Zurück zum Anfang

Videos (nur MSIE)

Mit <img dynsrc=(Video-Datei)"> können Sie ein Video einbinden. Vorausetzung ist, das der Anwender einen Videotreiber installiert hat.

Folgende Angaben sind zusätzlich erlaubt:

height	Höhe des Anzeigebereiches

width	Breite des Anzeigebereiches

loop=infinite oder Zahl	Damit wird eine Datei endlos oder nach Anzahl wiederholt.

start=mouseover	Damit wird das Video gestartet wenn der Mauszeiger in das Video hineinfährt

start=fileopen	Damit wird das Video beim öffnen gestartet

src="(Grafik-Datei)"	Alternatives Bild falls das Video nicht abgespielt werden kann

controls	Damit wird eine Steuerung angezeigt

Beispiel

<img dynsrc="wasch.avi" width=45 height=60>

Die Beispiele dazu finden Sie im Verzeichnis: beisp\Lektion\7\eins.htm

Zurück zum Anfang


Weiterführende Literatur

Zurück

1. 	Eine Einführung in die Programmierung von HTML finden Sie unter:

1.1 	http://www.boku.ac.at/htmleinf/ Eine Einführung von Hubert Partl

1.2 	http://www.go-web.com/gismo/ Homepage von Gismo (absolut empfehlenswert, eine coole Seite aus der man viel lernen kann)

1.3 	http://www.nads.de/~klute/WWW-Buch/1/Inhalt/ Das WWW - Multimedialer Hypertext im Internet

2. 	Dokumente zum runterladen finden Sie unter:

2.1 	http://www.netzwelt.com/selfhtml/ Das aktuelle Kompendium zum Erstellen von Seiten, von Stefan Münz. Finden Sie auch in diversen Foren von Compuserve und AOL (Datei selfhtml.zip)

3. 	Eine Anleitung wie man Schlechtes HTML erzeugt, finden Sie unter:

3.1 	http://www.karzauninkat.com Stefan Karzauninkat Goldhtml oder wie Manns nicht macht

4. 	Folgend noch einige Bücher:

4.1 	Publizieren im Internet vom SYBEX Verlag ISBN 3-8155-7164-2

4.2 	Das Internet-Buch vom SYBEX Verlag ISBN 3-8155-0188-1

4.3 	Die eigene Homepage vom Data Becker Verlag ISBN 3-8158-1311-5


Danksagung
Danksagung an folgende Personen:

Stefan Münz für sein tolles Kompendium in Sachen HTML dieses Dokument hat mir bei der Entwicklung des Programmes sehr oft geholfen.

Elke Lötterle für die Faxnummer, die Sie mir bereitstellt.

Markus Kämmerer für den Tips-Dialog.

Craig Ward für das verschiebare Speedpanel.

Und der Firma Borland, für Delphi.