HTML-Befehle, die Skipper / WebMagick verstehen
Zur Startseite     Tipps & Tricks     HTML-Befehle, die Skipper / WebMagick verstehen

Die GEOS-Browser verstehen leider nicht alle Befehle (sie werden in HTML "Tags" genannt), die zum Erstellen von Internetseiten zur Verfügung stehen. Ab NDO 3 / NDO 98 kann der Browser mit Tabellen umgehen, in NDO 2000 / BBX Ensemble auch mit JPGs und dem "mail to"-Tag.

Das GEOS-Programm zum Bearbeiten von Webseiten ist unter den Namen HTML Editor, Web Editor und Webbox erschienen.

Dateinamen sollten grundsätzlich immer komplett in Kleinbuchstaben oder Grossbuchstaben geschrieben werden, da viele Server auf denen Homepages gespeichert werden, mit Unix/Linux laufen und diese Betriebssysteme (anders als DOS/Windows) zwischen Gross-/Kleinschreibung unterscheiden. So vermeiden Sie, dass Links auf Ihrem Rechner beim Testen zwar prima funktionieren, später nach dem Upload auf einen Server aber nicht mehr. Wenn Sie das Programm FileTransfer zum Hochladen benutzen, schreiben Sie Dateinamen immer in Grossbuchstaben, da nur dies von FileTransfer unterstützt wird.

Tags, die von WebMagick 1.0 erkannt werden, haben keinen vorangestellten Stern. Zusätzliche Tags / Attribute mit einem Stern (*) werden von Skipper (NDO 98) erkannt. Zusätzliche Tags / Attribute mit zwei Sternen (**) werden von Skipper / WebMagick (NDO 2000 / BBX Ensemble) erkannt.

Springe zum Abschnitt :


GRUNDSÄTZLICHER AUFBAU EINES HTML-DOKUMENTS

Die folgenden Befehle stellen das Grundgerüst für eine "sauber" erstellte HTML-Seite dar.

<HTML> - Leitet jedes Dokument ein
<HEAD> - Beginn des Kopfbereichs. Reserviert für Steuerfunktionen.
<TITLE>Überschrift</TITLE> - Anzeige eines Titels in der Kopfzeile des Browsers.
</HEAD> - Ende des Kopfbereichs.
<BODY> - Beginn des sichtbaren Teils Dokuments. Hier werden Text / Bilder usw. eingetragen.
...
</BODY> - Ende des Bodybereichs.
</HTML> - Schließt jedes Dokument ab.

 Zurück zum Anfang der Seite  


TEXT FORMATIEREN

  • <BODY TEXT="Farbe" BGCOLOR="Farbe" LINK="Farbe" BACKGROUND="datei.gif"> ... </BODY> - Farben für gesamtes Dokument ändern.
  • <H1 ALIGN=LEFT | CENTER | RIGHT> ... </H1> - Überschrift. Text wird in einer definierten Größe zwischen 1 ( Größte ) und 6 ( Kleinste ) und in Fettschrift dargestellt. Es wird eine Leerzeile angefügt.

    ALIGN=LEFT | CENTER | RIGHT - Die Überschrift linksbündig (Voreinstellung), zentriert, rechtsbündig ausrichten.

  • <FONT SIZE=Zahl SIZE=+Zahl COLOR=Farbe> ... </FONT> - Größe und Farbe der Schrift.
  • <BR> - Zeilenumbruch. Nachfolgender Text wird in der nächsten Zeile fortgesetzt.
  • <P ALIGN=CENTER | RIGHT | LEFT> - Beginnt einen neuen Absatz, d. h. es wird eine Leerzeile eingefügt.

    ALIGN=LEFT | CENTER | RIGHT - Linksbündig (Voreinstellung), zentriert, rechtsbündig ausrichten.

  • * <DIV ALIGN=CENTER | RIGHT | LEFT | justify> ... </DIV> - Absätze oder ganze Seite ausrichten. Attribute siehe "P".

    ALIGN=LEFT | CENTER | RIGHT | justify - Linksbündig (Voreinstellung), zentriert, rechtsbündig, als Blocksatz ausrichten.

  • <B> ... </B> - Fettschrift.
  • <STRONG> ... </STRONG> - Fettschrift. Text ist als "wichtig" markiert.
  • <I> ... </I> - Kursiv.
  • <EM> ... </EM> - Kursiv. Text ist als "wichtig" markiert.
  • <CITE> ... </CITE> - Kursiv. Text ist als "Zitat" markiert.
  • <ADDRESS> ... </ADDRESS> - Kursiv. Text ist als "Adresse" markiert.
  • <BLOCKQUOTE> ... </BLOCKQUOTE> - Zeile oder Absatz einrücken. Text ist als "Zitat" markiert.
  • <VAR> ... </VAR> - Kursiv. Text ist als "Variable" markiert.
  • <U> ... </U> - Text unterstrichen.
  • <CENTER> ... </CENTER> - Zentriert Text und Grafik.
  • <STRIKE> ... </STRIKE> - Text durchgestrichen.
  • <SUP> ... </SUP> - Text tiefgestellt.
  • <SUB> ... </SUB> - Text hochgestellt.
  • <SMALL> ... </SMALL> - Text kleiner.
  • <BIG> ... </BIG> - Text größer.
  • <CODE> ... </CODE> - Schriftart MONO.
  • <SAMP> ... </SAMP> - Schriftart MONO. Text als "Beispiel" markiert.
  • <KBD> ... </KBD> - Schriftart MONO. Text ist für "Tastatureingaben" markiert.
  • <TT> ... </TT> - Schriftart MONO.
  • <PRE> ... </PRE> - Schriftart MONO. Zeigt Text so, wie er in einem Editor eingegeben wurde, also mit Zeilenumbrüchen und mehreren Leerzeichen.
  • <HR SIZE="Zahl"> - Fügt eine horizontale Linie in den Text ein.

    SIZE="Zahl" - Gibt die Linienstärke in Pixel an.

 Zum Anfang der Seite  


FARBEN

  • <BODY TEXT="Farbe" BGCOLOR="Farbe" LINK="Farbe" BACKGROUND="datei.gif"> ... </BODY>

    TEXT="Farbe" - Legt die Textfarbe für das ganze Dokument fest.
    BGCOLOR="Farbe" - Legt die Hintergrundfarbe für das ganze Dokument fest.
    LINK="Farbe" - Legt die Farbe für alle Links (Verweise) im Dokument fest.
    BACKGROUND="datei.gif" - Lädt eine GIF-Datei als Hintergrundbild. Siehe auch GRAFIK

    Die 16 Grundfarben können mit ihrem Namen eingegeben werden.

    Beispiel: <BODY TEXT="RED">

    16,7 Millionen Farben sind maximal möglich, müssen aber in hexadezimaler Schreibweise und mit einem vorangestellten Doppelkreuz ( # ) eingegeben werden.

    Beispiel: <BODY TEXT="#C0FFC0">

  • <FONT COLOR="Farbe" SIZE=2> SIZE=+2> ... </FONT>
    Text in Farbe und Größe verändern.

    COLOR - Legt die Textfarbe fest.
    SIZE - Legt die Textgröße fest.

    Die Ausgangsschriftgröße ist 3. Es kann eine Größenangabe zwischen 1 ( kleiner ) und 7 (größer ) gemacht werden.
    Relativ zur Ausgangsgröße vergrößert ( Zahl +1 bis +4 ) oder verkleinert ( Zahl -1 bis -2 ) das Attribut SIZE den Text.

    Beispiel: <FONT SIZE=+2> - Schriftgröße +2
    Beispiel: <FONT SIZE=2> - Schriftgröße 2

 Zum Anfang der Seite  

Die 16 Grundfarben

  • WHITE - Es war einmal ein Elefant, der ...
  • YELLOW - Es war einmal ein Elefant, der ...
  • RED - Es war einmal ein Elefant, der ...
  • MAROON - Es war einmal ein Elefant, der ...
  • FUCHSIA - Es war einmal ein Elefant, der ...
  • PURPLE - Es war einmal ein Elefant, der ...
  • LIME - Es war einmal ein Elefant, der ...
  • GREEN - Es war einmal ein Elefant, der ...
  • TEAL - Es war einmal ein Elefant, der ...
  • AQUA - Es war einmal ein Elefant, der ...
  • BLUE - Es war einmal ein Elefant, der ...
  • NAVY - Es war einmal ein Elefant, der ...
  • OLIVE - Es war einmal ein Elefant, der ...
  • GRAY - Es war einmal ein Elefant, der ...
  • SILVER - Es war einmal ein Elefant, der ...
  • BLACK - Es war einmal ein Elefant, der ...

 Zum Anfang der Seite  


LISTEN

  • <UL><LI> ... </LI></UL> - Text wird als Liste mit einem vorangestellten Punkt angezeigt.

    Beispiel:
    <UL>
    <LI>Affen</LI>
    <LI>Hamster</LI>
    </UL>

  • <OL><LI> ... </OL> - Text wird als numerierte Liste angezeigt. Siehe UL.
  • <DL><DT> Einleitung <DD> Textabsatz </DL> - Mit dem Tag DT eingeleitete Textzeile wird eingerückt dargestellt, dem Tag DD folgender Text wird etwas weiter eingerückt dargestellt.
  • <DIR> ... </DIR> - Wie UL, aber ohne vorangestellten Punkt.
  • <MENU> ... </MENU> - Wie UL, aber ohne vorangestellten Punkt.

 Zum Anfang der Seite  


LINKS

  • <A HREF="#ANFANG">Anfang</A> - Text zwischen den beiden Tags erscheint als Link. Beim Anklicken des Links springt der Browser zur Zeile "Anfang" im gleichen Dokument. Siehe nächsten Punkt.
  • <A NAME="ANFANG">Text</A> - Markiert ein Sprungziel (Anker) innerhalb eines Dokuments. Siehe vorigen Punkt. "Text" muss enthalten sein (oder ein beliebiges Zeichen).
  • <A HREF="beispiel.htm">Text</A> - Zum Dokument "beispiel.htm" im gleichen Verzeichnis springen.
  • <A HREF="FILE:///D|/beispiel.htm">Text</A> - Wie vor, allerdings befindet sich die Datei "beispiel.htm" in einem anderen Verzeichnis.
  • <A HREF="HTTP://www.geos-infobase.de">Text</A> - Einen Link zu einer Adresse im Internet setzen.
  • <A HREF="index.htm"><IMG SRC="logo.gif" ALT="Hallo User!" BORDER="0"></A> - Eine Grafik als anklickbaren Link verwenden.
  • ** <A HREF="mailto:f.feuerstein@neandertal.de">Text</A> - Eine eMail schreiben und an die "gelinkte" Adresse schicken.

 Zum Anfang der Seite  


GRAFIKEN EINBINDEN

  • <BODY BACKGROUND="beispiel.gif">
    Hintergrundbild für das gesamte Dokument laden. Bild muß als GIF-Grafik gespeichert sein.
    * Skipper kann auch JPG-Grafik darstellen. - beispiel.jpg
  • <IMG SRC="beispiel.gif" ALT=" Text " WIDTH="Zahl" HEIGHT="Zahl" BORDER="Zahl"> - Grafik anzeigen. Bild muß als GIF-Grafik gespeichert sein.
    * Skipper kann auch JPG-Grafik darstellen. - beispiel.jpg

    SRC="beispiel.gif" - Lädt die Datei beispiel.gif, die sich im gleichen Verzeichnis befindet.
    ALT="Text" - Zeigt einen Text an, falls das Laden von Grafiken im Browser abgeschaltet ist.
    WIDTH="Zahl" - Verändert die Breite einer Grafik.
    HEIGHT="Zahl" - Verändert die Höhe einer Grafik.
    BORDER="Zahl" - Legt die Rahmendicke des Bildes fest, wenn es als Link benutzt wird. BORDER="0" - kein Rahmen.

    Der Bitmap Viewer / Media Viewer kann Höhe und Breite einer Grafik anzeigen. Menü "Optionen / Grafik Info".

 Zum Anfang der Seite  


TABELLEN

  • * <TABLE BORDER=Zahl HEIGHT=Zahl WIDTH=Zahl% CELLPADDING=Zahl CELLSPACING=Zahl>...</TABLE> - Eine Tabelle definieren. Innerhalb der TABLE-Tags werden die Tags CAPTION, TR, TH, TD, eingesetzt, um die Gestaltung der Tabelle zu steuern.

    BORDER=Zahl - Zeichnet einen Rahmen um die Tabelle. 0 = kein sichtbarer Rahmen.
    HEIGHT=Zahl - Verändert die Gesamthöhe der Tabelle.
    WIDTH=Zahl% - Verändert die Gesamtbreite der Tabelle.
    CELLPADDING=Zahl - Den Abstand zwischen Text und Zellenrahmen einstellen.
    CELLSPACING=Zahl - Die Breite des Zellenrahmens zwischen den Zellen einstellen.

  • * <CAPTION >Text</CAPTION > - Eine Überschrift einfügen.
  • * <TR>...</TR> - Eine Tabellenzeile definieren. Innerhalb des TR-Tags folgen die Tags TH und TD.
  • * <TH ALIGN=LEFT | CENTER | RIGHT COLSPAN=Zahl ROWSPAN=Zahl>Text</TH> - Zelleninhalte in Fettdruck. Vorgabe ist zentriert.

    ALIGN=LEFT | CENTER | RIGHT - Zelleninhalt linksbündig, zentriert, rechtsbündig ausrichten.
    COLSPAN=Zahl - Die Zelle um mehrere Spalten verbreitern. 2 = Eine Spalte breiter.
    ROWSPAN=Zahl - Die Zelle um mehrere Zeilen nach unten erweitern. 2 = Eine Zeile tiefer.

  • * <TD ALIGN=LEFT | CENTER | RIGHT COLSPAN=Zahl ROWSPAN=Zahl>Text<TD> - Normaler Zelleninhalt. Vorgabe ist linksbündig. Attribute siehe "TH".

 Zum Anfang der Seite  


FORMULARE

Um ein Formular benutzen zu können, muss auf dem Server des Providers ein entsprechendes CGI-Script bereitstehen, das die Daten entgegennehmen und eine Antwort schicken kann. Meistens bieten die Provider vorgefertigte CGI-Scripts.

  • <FORM ACTION=HTTP METHOD=GET | POST>...</FORM> - Ein Formular definieren.

    ACTION=HTTP - Die Formular-Eingaben werden an einen HTTP-Server geschickt.
    METHOD=GET - Die Formular-Eingaben werden in einer Variablen an den CGI-Interpreter geschickt. Max. 256 Zeichen.
    METHOD=POST - Die Formular-Eingaben werden an die Standardeingabe des CGI-Interpreters geschickt. Keine Größenbegrenzung der Daten.

  • <INPUT TYPE=TEXT | CHECKBOX | RADIO | PASSWORT | SUBMIT | RESET VALUE="Text" CHECKED NAME="Text" MAXLENGTH=Zahl SIZE=Zahl> - Einzeilige Eingabefelder / Kontrollkästchen / Schaltflächen erzeugen.

    TYPE=TEXT - Einzeiliges Eingabefeld.
    TYPE=CHECKBOX - Anklickbares Kontrollkästen. Kann mit CHECKED voreingestellt werden.
    TYPE=RADIO - Anklickbarer Schalter. Kann mit CHECKED voreingestellt werden.
    TYPE=PASSWORT - Einzeiliges Textfeld zur Eingabe von Passwörtern. Zeichen werden NICHT als Sternchen angezeigt.
    TYPE=SUBMIT - Knopf zum Absenden eines Formulars.
    TYPE=RESET - Knopf zum Löschen der gemachten Formulareingaben.
    VALUE="Text" - Vorgabe-Text eines Objekts.
    CHECKED - Schaltet anklickbare Kontrollkästchen und Schalter auf ON.
    NAME="Text" - Beschriftung eines Objekts.
    MAXLENGTH="Zahl" - Maximal mögliche Anzahl Zeichen in einem Text-/ Passwortfeld.
    SIZE="Zahl" - Größe eine Textfeldes.

  • <TEXTAREA COLS=Zahl ROWS=Zahl NAME="Text">Text</TEXTAREA> - Ein mehrzeiliges Eingabefeld.

    COLS=Zahl - Breite des Textfeldes in Spalten.
    ROWS=Zahl - Höhe des Textfeldes in Zeilen.
    NAME="Text" - Name des Textfeldes.

  • <SELECT NAME="Text" SIZE=Zahl MULTIPLE> <OPTION SELECTED>...</OPTION> </SELECT> - PopUp-Menü zur Auswahl eines oder mehrerer Optionen.

    NAME="Text" - Name des PopUp-Menüs.
    SIZE=Zahl - Einzeiliges PopUp-Menü wenn SIZE=Zahl nicht angegeben ist.
    MULTIPLE - Auswahl mehrerer Optionen zulassen.
    SELECTED - Eine Option vorauswählen.

 Zum Anfang der Seite  


FRAMES

Mit FRAMES wird das Browser-Fenster in mehrere Bereiche eingeteilt, in denen verschiedene Dokumente gleichzeitig angezeigt werden können. Die Definition der Frames wird in einem separaten Dokument vorgenommen.

  • <FRAMESET COLS=Zahl,Zahl%,*,[*] ROWS=Zahl,Zahl%,*,[*] FRAMEBORDER=YES | NO> ... </FRAMESET> - Anzahl und Größe der Frames festlegen.

    COLS=Zahl,Zahl%,*,[*] - Breite der Frames. Entweder Breite in Pixel angeben (z.B. für eine Grafik mit bekannten Maßen) und / oder in Prozent der Gesamtbreite des Browserfensters und / oder als Stern (*) für den Rest des vorhandenen Browserfensters.
    ROWS=Zahl,Zahl%,*,[*] - Höhe der Frames. Sonst wie vor.
    FRAMEBORDER=YES | NO - Rahmen um alle Frames an-/abschalten.

  • <FRAME SCR="Text" NAME="Text" FRAMEBORDER=YES | NO SCROLLING=AUTO | YES | NO> - Den einzelnen Frames Dokumente / Grafiken zuordnen.

    SCR="Text" - Einem Frame ein Dokument zuordnen.
    Name="Text" - Dem Frame einen Namen zuordnen.
    FRAMEBORDER=YES | NO - Einen Rahmen um einen Frame an-/abschalten.
    SCROLLING=AUTO | YES | NO - Einen Scrollbalken automatisch (vom Browser, wenn notwendig) anzeigen, oder immer Scrollbalken anzeigen, oder nie Scrollbalken anzeigen.


SONSTIGE BEFEHLE

  • <!--Hier steht ein Kommentar--> - Kommentarzeile in Text einfügen.
html html html html html html html html html html
Zum Anfang der Seite     Zuletzt geändert 18.03.15 Mütze