Download ppt - 1. HTML Basis Markus Mählmann Dipl.-Betriebswirt (BA)

1. HTML Basis

Markus Mählmann

Dipl.-Betriebswirt (BA)

1. HTML Basis

1.1 Vorbemerkungen1.1.1 WorldWideWeb

1.1.2 Hypertext

1.1.3 HTML (Hypertext Markup Language)

1.2 Die Art der Sprachelemente (Tags)1.2.1 Tags allgemein

1.2.2 Elementtypen

1.2.2.1 Conteinertags

1.2.2.2 Leere Elemente

1.3 Die Tags im einzelnen1.3.1 Dokumentenstrukturierung

1.3.1.1 Header

1.3.1.2 Body

1. HTML Basis1.3.2 Elemente des Body

1.3.2.1 Schriftdarstellung1.3.2.2 Textstrukturierung1.3.2.3 Listen1.3.2.4 Bilder1.3.2.5 Anker1.3.2.6 Sonderzeichen

1.4 Tabellen1.4.1 Einfache Tabellen1.4.2 Tabellenerweiterungen

1.5 URLs (Uniform Resource Locators)1.5.1 Vollständige URLs1.5.2 Relative URLs1.5.3 URL – Erweiterungen1.5.4 URLs auf andere Server

1. HTML Basis1.5.4.1 ftp

1.5.4.2 gopher

1.5.4.3 mail

1.5.4.4 news

1.5.4.5 telnet/ssl

1.5.4.6 wais

1.6 Frames1.6.1 Übersicht

1.6.2 SET-Definition

1.6.3 „Rahmenpläne“

1.6.4 Links

1.6.5 eingebettete Rahmen

1.7 Formulare1.7.1 Was ist ein Formular im WWW?

1. HTML Basis1.7.2 Struktur

1.7.3 Formularelemente

1.7.3.1 INPUT

1.7.3.2 TEXTAREA

1.7.3.3 SELECT

1.7.3.4 OPTION

1.8 Bewegt – Bilder1.8.1 Die Dia-Show

1.8.2 Animated GIFs

1.8.2.1 Bildformate allgemein

1.8.2.2 Einbau von Animated GIFs

1.1 Vorbemerkungen1.1.1 WorldWideWeb (WWW, W3)

Das WWW ist die z.Zt. am weitesten fortgeschrittene Entwicklung zur weltweiten Erschließung von verschiedenartigen Resourcen (z.B. Texte, Bilder, Sounds, Videos) sowohl im Internet, als auch in den "internen" Intranets. W3 arbeitet nach dem Client-Server-Prinzip. D.h., auf Servern werden Dokumente bereit gehalten, die von den Clients angefordert und auf dem Bildschirm mittels spezieller Software (Browser) aufbereitet werden.

Die bekanntesten und damit am weitesten verbreiteten Browser für PCs sind: • Netscape Communicator (Navigator)• Microsoft Internet Explorer

Es ist quasi auf allen Betriebssystemplattformen Browser-Software verfügbar, allerdings mit unterschiedlichem Leistungsvermögen. Es existieren sogar für blinde Web-Surfer Browser mit Sprachausgabe.

Browser bearbeiten nicht allein die für das WorldWideWeb charakteristischen Hypertext-Dokumente, sondern auch Dokumente anderer Server-Typen, z.B. von:

• FTP-Servern • Gopher-Servern • News-Servern

1.1 Vorbemerkungen1.1.2 Hypertext

Was sich hinter dem Begriff verbirgt, lässt sich am besten an einem Beispiel erklären: Wird in einem herkömmlichen Text, z.B. einem Zeitschriftenartikel, auf einen anderen verwiesen, so geschieht dies i.d.R. durch eine Fußnote und darunter entsprechende Zitate unten auf der Seite oder in einem Anhang.

In einem Hypertext-Dokument wird statt dessen der zu erklärende Begriff markiert (farbig angelegt, unterstrichen). Klickt man (bei Graphik-orientierten Browsern) mit der Maus die markierte Stelle an, so wird das sich dahinter verbergende Dokument vom Browser dem Server abgefordert und auf den Bildschirm gebracht.

"Hypertext" is a term created by visionary Ted Nelson to describe non-linear writing in which you follow associative paths through a world of textual documents. The most common use of hypertext these days is found in the links on World Wide Web pages.

1.1 Vorbemerkungen1.1.3 HTML (HyperText Markup Language)

Die Hypertext-Beschreibungssprache HTML besteht aus Elementen (TAGS), die der Browsersoftware mitteilen, wie ein Dokument zu gestalten ist. Allerdings bestimmt letztlich der Browser das Aussehen des Dokumentes maßgeblich dadurch, wie er die Steuerungsinformationen auswertet. So teilt beispielsweise der Autor in einem Dokument durch Steuerungsinformation lediglich mit, dass für eine Überschrift der drittgrößte zur Verfügung stehende Schrifttyp benutzt werden soll. Welche Schriftgröße daraus letztendlich wird, ergibt sich oftmals allein aus den Voreinstellungen des Browsers.

Die Qualität eines Browsers ist für die Aufbereitung eines Dokumentes entscheidend. Es kann durchaus sein, dass Sprachelemente von Browsern mangels Programmierung der entsprechenden Features gar nicht ausgewertet sondern ignoriert werden. Andererseits kennen einige Browser spezielle, nur von ihnen auswertbare Sprachelemente, woraus sich leicht die Frage ergibt, wer denn den Sprachumfang definiert.


Es gibt Vorschläge (drafts), die entweder als Entwurf oder abgestimmt (standards) als sogenanntes RFC (Request for comment) veröffentlich werden und an die sich dann alle Server- und Browser-Programmierer halten sollen. Die ursprüngliche Sprachdefinition HTML wurde zunächst ersetzt durch HTML 2.0. Diese Version können alle Browser verarbeiten. Die dann folgende Version 3 (HTML 3.2 ) ist derzeit von allen Browserherstellern realisiert. Parallel dazu führten Browser-Hersteller zusätzlich neue Sprachelemente ein, in der Hoffnung damit bessere Verkaufschancen zu erlangen. Einige dieser Sprachelemente waren dabei so dominant, dass sie an jeder Standards-Diskussion vorbei Verbreitung fanden.

Seit Juli 97 existiert der Vorschlag zur Version 4.0 vom seit einiger Zeit existierenden W3-Konsortium. Die in diesem Gremium unter Beteiligung von Entwicklern und allen auf diesem Sektor wichtigen Firmen geschaffenen Vorgaben stellen i.d.R. einen Konsens dar, der jeweils große Chancen hat, allgemeinverbindlich zu werden.

In HTML 4.0 sind einige neue, mächtige Konzepte eingeflossen, die dazu führen, dass existierende Elemente überflüssig geworden sind. Das ist noch nicht im Kurs berücksichtigt, da auch die weggefallenen Sprachelemente von den Browsern weiterhin ausgewertet werden, alle neuen Konzepte aber noch nicht in den marktbeherrschenden Browsern realisiert sind. HTML 4.0 versucht mit besonderen Konzepten in den Dokumenten die eigentliche Beschreibungssprache HTML und die im Laufe der Sprachentwicklung hinzugefügten Gestaltungselemente wieder zu trennen. So werden beispielsweise mittels des CSS-Konzeptes (Cascading Style Sheets) Layout-Informationen in gesonderten, den Dokumenten per Link zugefügten Dateien abgelegt.

Schließlich erfolgte am 24.12.1999 die vorläufig letzte Ausgabe eines Vorschlages zu HTML unter der Versionsnummer 4.01.


HTML ist derzeit längst nicht mehr allein die Sprache des WorldWideWeb. Immer mehr Dokumentationen werden bereits auch inhouse beispielsweise für Präsentationen eingesetzt oder sind auf CD's zu finden bei Publikationen von Firmen- oder sonstigen Informationen. Als "Nachfolger" für HTML steht XML zur Verfügung, so jedenfalls hatten es sich maßgebliche Entwickler gedacht. Allerdings spielten die Browser-Hersteller vielleicht auch wegen der Komplexität des Konzeptes nicht so richtig mit, und somit tritt XML ein wenig auf der Stelle. Schon tritt erneut ein "Kandidat" auf mit Namen XHTML. Schon der Name deutet darauf hin, dass es sich um eine Mischung aus XML und HTML handelt. Ob es sich durchsetzt, ist noch offen.


Literatur:

• Selfhtml

• HTML 4.0 Referenz. Stefan Münz, Wolfgang Nefzger

Gebundene Ausgabe - 893 Seiten Franzis Verlag GmbH; ISBN: 3772374034

1.2 Die Art der Sprachelemente (Tags)

1.2.1 Tags allgemein

Ein TAG ist wie folgt aufgebaut: • einleitende spitze Klammer: < • Element • schließende spitze Klammer: >

Ein gültiges TAG wäre z.B.: <BR>(Die Erklärung der Bedeutung des TAG erfolgt später.) Die Elemente können in Groß- oder Kleinbuchstaben beschrieben werden (case-insensitive).Es sind gleichwertig <BLOCKQUOTE> und <blockquote> und selbst <bLoCKquoTE>

(In den Darstellungen späterer Beispiele werden die Elemente zwecks besserer Übersichtlichkeit generell in Großbuchstaben wiedergegeben.)

Elementen eines TAG können Attribute beigeordnet sein, z.B.:

<IMG SRC = "bildchen.gif">

Zu dem Element IMG gehört das Attribut SRC.

Attribute • - haben einen Attributnamen (case-insensitive), • - besitzen einen zugeordneten Wert (bei Text case-sensitive), • - trennen Namen und Wert mittels Gleichheitszeichen.


1.2.2 Elemententypen

Die Bezeichnung Containertyp eines Elementes wird genutzt, wenn es aus einem Start- und einem Ende-Tag

gebildet wird.

Ein Beispiel:

<H4> dies ist die viertgrößte Schrift</H4>

wird auf dem Bildschirm zu:

dies ist die viertgrößte Schrift

Merke: Das Ende-TAG unterscheidet sich vom Start-Tag allein durch den Schrägstrich. <H2> ..... </H2>


1.2.2.1 Containertags

Containerelemente können ineinander geschachtelt sein: • <B><I> .......... </I></B> (Fett und Italic)

nicht jedoch so:

• <B><I> .......... </B></I> • oder so: <H1><H2> .......... </H2></H1> (Widerspruch !)


1.2.2.2 Leere Elemente

Ein leeres Element liegt vor, wenn es allein ein Start-, nicht jedoch ein Ende-TAG gibt:

<HR> beispielsweise ergibt eine horizontale Linie auf dem Bildschirm.

Sie wird im Source-Code zwischen den Textpassagen an der Stelle eingesetzt, an der sie erscheinen soll. Eine Ende-Position gibt es dabei nicht.

1.3 Die Tags im Einzelnen

1.3.1 Dokumentenstrukturierung

Der Source-Code eines HTML-Dokumentes besteht aus einem Kopf (Header) und einem Körper (Body). Es wird mit zugehörigen Containertags strukturiert:

<HTML>

<HEAD>

.....

</HEAD>

<BODY>

..........

..........

</BODY>

</HTML>


1.3.1.1 Header

Header-Informationen finden sich nicht in der Ausgabe des Dokumentes auf dem Bildschirm wieder, sondern dienen allein zum Informationsaustausch über die Behandlung zwischen Server und Browser. Für einen Einführungskurs ist die Kenntnis von 3 Header - TAGs ausreichend.

• <TITLE> .......... </TITLE> In diesem Containerelement wird ein möglichst aussagekräftiger Titel für das Dokument eingetragen. Dieser wird vom Browser ggf. für die Eintragung in Bookmarks oder Hotlist verwandt.

• <ISINDEX>Veranlasst den Server, das Dokument für die Indexierung in eigenen Suchmaschinen vorzusehen. Das macht jedoch nur Sinn, wenn zu dem eigenen WWW-Server zur Speicherung der WWW-Seiten auch ein eigener Index geführt wird.

• <BASE HREF="http://...URL...">Enthält die Adresse der Einstiegsseite für eine aus mehreren Dateien zusammengestellte WWW-Seite


1.3.1.1 Header

Weitere mögliche Informationen werden im Header mit dem <META>-Tag abgelegt.

<html><head>

<meta name="robots" content="noindex,nofollow"><meta name="description" content="This page ...."><title>...</title>

</head><body>...

So kann es beispielsweise wichtig sein, das Datum festzuhalten, an dem das Dokument zuletzt geändert wurde. Dadurch kann ein Browser bei einer wiederholten Anfrage für das gleiche Dokument verkürzt arbeiten, wenn er vor dem Holen eines kompletten Dokumentes zuerst allein per Datumsvergleich überprüft, ob er die aktuelle Version vielleicht nicht schon vorliegen hat.

(Durch trickreichen Einsatz von Meta-Tags ist es sogar möglich, in einem Dokument so etwas wie eine Dia-Show ablaufen zu lassen - Informationen darüber finden sich in einem späteren Kapitel oder in den Literaturhinweisen.)


1.3.1.1 Header

Der Inhalt der Robot META-Tags beinhaltet durch Komma getrennte Direktiven für die Robots interner wie auch externer Suchmaschinen.

Momentan definierte Direktiven sind:

• [NO]INDEX

Die INDEX-Direktive veranlasst einen Indexing-Robot zur Indexierung der Seite.

• [NO]FOLLOW

Die FOLLOW-Direktive veranlasst einen Robot zur Verfolgung aller auf der Seite vorhandenen Links.

Die Standardeinstellungen sind:

• INDEX• FOLLOW


1.3.1.1 Header

Die Werte ALL und NONE schalten alle Direktiven an bzw. aus.

• ALL=INDEX,FOLLOW• NONE=NOINDEX,NOFOLLOW

Beispiele:

<meta name="robots" content="index,follow"><meta name="robots" content="noindex,follow"><meta name="robots" content="index,nofollow"><meta name="robots" content="noindex,nofollow"><meta name="robots" content="all"><meta name="robots" content="none">


1.3.1.1 Header

Wichtig:• Der name „robots“ und der content sind case-insensitive• Die Angabe widersprüchlicher Werte muss vermieden werden

<meta name="robots" content="INDEX,NOINDEX,NOFOLLOW,FOLLOW,FOLLOW">


1.3.1.1 Header

Die formale Syntax des robots META-Tags:

content = all | none | directivesall = "ALL“None = "NONE“directives = directive ["," directives]directive = index | followindex = "INDEX" | "NOINDEX„follow = "FOLLOW" | "NOFOLLOW"


1.3.1.2 Body

Es sei hier noch einmal erwähnt, dass die Darstellung von TAGs im Dokumentenbody oftmals von den Voreinstellungen des Browsers abhängt. Sollte beispielsweise eine Überschriftszeile kleiner dargestellt werden als normaler Text, so kann dies allein durch Änderung der Voreinstellungen des Browsers umgestellt werden. Vier Dinge sind jedoch in allen Browsern durch sprachbedingte Vorgaben verbindlich:

• Blank - Compression

Mehrere Blanks in einem Text werden immer zu einem zusammengezogen (komprimiert).

• CR - IgnoreIm Editor erzeugte Wagenrücklauf und Zeilenvorschub - Kommandos werden ignoriert.

• Leerzeilen - Unterdrückung

• Tabulatoren ohne Funktion

Dadurch können die übrigens reinen ASCII - Sourcecodes übersichtlich aufgebaut werden, ohne daß diese Hilfsstruktur in dem Bildschirmdokument dargestellt wird.


1.3.1.2 Body

Der Hintergrund eines Dokumentes wird vom Browser in der Regel grau dargestellt. Durch Zufügen von Attributen im Start-TAG des Body kann eine andere Darstellungsform gewählt werden:

Der komplette Hintergrund kann aus einem Bild gebildet, bzw. zusammengesetzt werden. Letzteres ist der Regelfall. Eine eher kleine (wg. der geringeren Übertragungszeit) Graphik wird auf dem solange an-und untereinander gereiht, bis der Bildschirm gefüllt ist. An einem Beispiel soll dies demonstriert werden.

• <BODY BACKGROUND="dreinull.gif">


1.3.1.2 Body

Abweichend vom Grau kann für den Hintergrund eine andere Farbe definiert werden. Mit dem Attribut BGCOLOR im Body-TAG wird diese Definition vorgenommen:

• <BODY BGCOLOR="#F08080">

Diese Angabe erzeugt einen roten Hintergrund.

Es liegt nahe, auch Möglichkeiten anzubieten, die Farbe der Texte einem geänderten Hintergrund angepaßt darzustellen. Dazu werden von Browsern dem Body-TAG 4 weitere mögliche Attribute zugestanden:

• TEXT="rrggbb" (Farbvorgabe normaler Text) • LINK="rrggbb" (Farbvorgabe für Links innerhalb des Standardtextes) • VLINK="rrggbb" (Farbvorgabe für bereits aufgerufene -visited- Links) • ALINK="rrggbb" (Farbvorgabe für gerade angewählte -active- Links)


1.3.1.2 Body

Farbcodes und hilfsmittel zur Farbwahl (ref. Prof. Staib / Zahlensysteme / 27.03.2001)

Alle auf einem Bildschirm darstellbaren Farben werden aus drei "Grundfarben" zusammengesetzt. Grundfarben sind im Falle der Farberzeugung am Bildschirm die Farben rot, grün und blau (das sogenannte RGB-System). Durch Variation der einzelnen Farbanteile zueinander entstehen über das menschliche Auge im Gehirn auch variierende Farbeindrücke, die von Mensch zu Mensch in gradueller Stufung unterschiedlich empfunden werden können. Man denke (als Extremfall) an das Problem der sogenannten Farbblindheit (Rot-Grün-Schwäche).

Für die Darstellung der Variation der Farbanteile untereinander und damit auch des daraus resultierenden Gesamtbildes wird in der EDV (u.a.) die Codierung durch Zahlen gewählt, was kaum verwundern kann. Jedem der drei Grundfarben wird für eine Kombination ein Farbwert zwischen hexa 00 (dezimal 0 = Minimalwert) und hexa FF (dezimal 255 = Maximalwert) zugewiesen. Die Darstellung im HTML-Dokument nutzt vorwiegend die hexadezimale Darstellung in der Form #rrggbb.


1.3.1.2 Body

Farbcodes und hilfsmittel zur Farbwahl (ref. Prof. Staib / Zahlensysteme / 27.03.2001)

Einige beispielhafte Werte zur Verdeutlichung des Systemes:

• #FF0000 = das intensivst mögliche Rot • #F08080 = fallender Rotanteil, ansteigende andere Farben• #FFFF00 = "knalliges" Gelb • #FFFFFF = reinstes weiß • #000000 = tiefstes Schwarz

Eine bestimmte Farbe mittels ihres Hexadezimalcodes ohne weitere Hilfsmittel angeben zu wollen, wird nur per Zufall das gewünschte Ergebnis bringen. Es werden im WorldWideWeb dazu jedoch verschiedene Hilfsmittel angeboten. Eine (unvollständige) Auswahl, wobei auch Kombinationen von Hintergrund und Schriftfarben ermittelt werden können. Wie solch ein Programm arbeitet, kann hier ausprobiert werden.


1.3.2 Elemente des Body

Die im Body eines Dokumentes verwendbaren TAGs sollen zwecks besserer Merkbarkeit in Gruppen eingeteilt behandelt werden. Die Gruppenbildung fasst TAGs zusammen nach dem Verwendungszweck, wie z.B.:

• Schriftdarstellung • Textstrukturierung • Listen • Bilder (Images) • Anker • Sonderzeichen


1.3.2.1 Schriftdarstellung

Wiederholung: Schriftgrößen und Schrifttypen werden in der Konfiguration des Browsers festgelegt! Der Dokumentenersteller kann allein festlegen, ob Textpassagen

• in Normalschrift • in einer von 6 Überschriftgrößen • fett • kursiv • in Schreibmaschinenschrift

oder bei einigen Browsern abweichend vom Standard dargestellt werden sollen. Dabei wird unterschieden in logischer oder physikalischer Hervorhebung einer Textpassage.

Physikalische Hervorhebung liegt vor beim Tag <B> ...... </B>. Damit wird der Browser angewiesen, die markierte Stelle immer in Fettschrift darzustellen.

Zwar bewirkt die logische Hervorhebung durch <STRONG> ...... </STRONG> in der Regel durch die Voreinstellungen des Browsern auch die Ausgabe in Fettschrift. Der Unterschied liegt jedoch darin, dass der Nutzer die Voreinstellungen des Browsers für das Tag STRONG ändern kann (z.B. stattdessen farbig).



Jede nicht besonders markierte Textstelle wird vom Browser in Normalschrift dargestellt. Es bedeuten:

• <H1>So wird Überschriftsgröße eins erzeugt.</H1> • <H2>So wird Überschriftsgröße zwei erzeugt.</H2> • <H3>So wird Überschriftsgröße drei erzeugt.</H3> • <H4>So wird Überschriftsgröße vier erzeugt.</H4> • <H5>So wird Überschriftsgröße fünf erzeugt.</H5> • <H6>So wird Überschriftsgröße sechs erzeugt.</H6> • So entsteht Normalschrift • <B>So entsteht eine fette Schrift (Bold).</B> • <I>So entsteht eine kursive Schrift.</I> • <TT>So entsteht eine äquidistante (Schreibmaschinen-)Schrift.</TT>

Dazu nun die vorstehenden Beispiele im Bild. Sollten die Schriftgrößen nicht abgestuft oder wie genannt dargestellt werden, ist Ihr Browser nicht passend konfiguriert.



Eine andere Art, Schriftgrößen zu beeinflussen, funktioniert wie folgt:

Es werden 7 Schriftarten / -größen im Browser definiert. Die "Normalschrift" entspricht dabei der Größe 3. Ein Umschalten zwischen diesen erfolgt im Browser dann durch das TAG:

<FONT SIZE=4> ..... </FONT> für eine absolute Angabe der Schriftgröße

<FONT SIZE=+2> ..... </FONT> für eine Erhöhung der Schriftgröße um zwei Stufen

<BASEFONT SIZE=2> ändert die "Normalgröße" auf den Fonttyp Nr. 2



Überschriften können durch das Attribut ALIGN in der Zeile ausgerichtet werden. Die Werte können sein:

• ALIGN="left" für linksbündig, • ALIGN="center" für zentriert, • ALIGN="right" für rechtsbündig.

Eine Überschrift der Größe 3 würde zentriert dargestellt durch:

<H3 ALIGN="center">Diese Überschrift wird zentriert</H3>



Es wurde die Einführung weiterer TAGs zur Textgestaltung geplant und bei einigen Browsern dann auch realisiert. Dazu einige wenige Beispiele:

• <U> ..... </U> unterstrichen (Underline) • <S> ..... </S> durchgestrichen (Strike through) • <SUB> ..... </SUB> als Index (SUBscript) • <SUP> ..... </SUP> als Exponenten (SUPerscript) • <BLINK> ..... </BLINK> blinkend (Achtung: gerne genutzter schlechter Stil)

Zwecks vollständiger Auflistung kann an dieser Stelle nur auf die einschlägige Literatur verwiesen werden. Soll ein dort aufgeführtes TAG eingesetzt werden, empfiehlt es sich jeweils vorher mit dem oder den gängigen Browsern Tests durchzuführen.

Die Farbe der Schrift kann ebenfalls verändert werden. Dazu ein Beispiel:

<font color="#FF0000>"Dieser Text wird knallrot dargestellt.</font>

wird zuDieser Text wird knallrot dargestellt.



Letztlich können auch die Schriftarten gewählt werden. Voraussetzung ist allerdings, dass das jeweilige Betriebssystem die gewünschten Schriftarten auch kennt!.

<font face="Arial,Helvetica"> am Anfang eines Absatzes bewirkt, dass der folgende Text bis zum Ende-TAG in der Schriftart "Arial" dargestellt wird, wenn sie auf dem Rechner des Browsers verfügbar ist.

Alternativ wird der zweite Wert des Attributes ("Helvetica") genommen. Eine Zusammenstellung von Schriften -allerdings in Bildform und vielen eher auch skurrilen Entwicklungen wird auf einem Server in der Domain fontasy.de gespeichert.


1.3.2.2 Textstrukturierung

Auf Grund der Blank-Compression beim Bildaufbau aus dem Source-Code, des Ignorierens von Wagenrücklauf / Zeilenvorschub, wie sie beim Erstellen von Dokumenten mittels Editor erzeugt werden, sind TAGs erforderlich, die eine Strukturierung eines Textes ermöglichen.



1. Der AbsatzAbsätze werden erzeugt durch <P>Ein Absatz kann abgeschlossen werden durch </P>, was jedoch nicht erforderlich ist.Absätze werden im Text automatisch erzeugt, sobald Schriftgrößendefinitionen (<H1> bis <H6>) folgen oder (im folgenden besprochene) Listelemente.Mehrere <P> <P> <P> werden ignoriert und zu einem Absatz zusammengezogen.

2. Das Zeilenende-TAGDie Textzeile wird beendet durch <BR>, es wird in der folgenden Bildschirmzeile (ohne Zwischenraum wie beim Absatz) weiter geschrieben.

3. Die Horizontale LinieDas TAG <HR> erzeugt eine horizontale Linie.

4. Der BlockEin (auch längerer) Text eingeschlossen in <BLOCKQUOTE> .......... </BLOCKQUOTE> wird als ein Block mit einer Einrückung am linken und rechten Rand dargestellt.

5. Die "Adresse"Auf eine besondere Art (kursiv, blockquote - Browser-abhängig) werden Informationen dargestellt die mittels Container - Element <ADDRESS> ..... </ADDRESS> eingeschlossen sind. Üblicherweise werden auf diese Art Texte am Dokumentenende, vorzugsweise Adressen, dargestellt bzw. Überschriften (siehe oben).



Vorstehende Strukturierungs-TAGs erfahren in den Weiterentwicklungen leistungsverstärkende Ergänzungen.

So kann dem Absatz-TAG ein Attribut zugefügt werden, das die Ausrichtung des folgenden Textabsatzes bestimmt. Es existieren die Möglichkeiten:

• <P ALIGN="left"> voreingestellt; nötig für Rückstellung auf "Normalfall" • <P ALIGN="right"> Ausrichtung am rechten Zeilenrand • <P ALIGN="center"> Ausrichtung zentriert • <P ALIGN="justify"> mit linkem und rechten Randausgleich

Um Texte oder Bilder auszurichten werden die Bereiche mit Start- und Ende-TAG eingegrenzt, z.B. für die Zentrierung:

<CENTER>

Diese Zeilen <BR>

sollen zentriert dargestellt werden.

<IMG SRC="dynamit.gif">

</CENTER>

Beispiel



Horizontale Linien können hinsichtlich Weite und Dicke variiert werden. Die Attribute lauten z.B.

WIDTH=80 und SIZE=2,

was bedeutet, dass die horizontale Linie lediglich 80 Prozent der verfügbaren Bildschirmbreite einnimmt (zentriert) und so dick wie auch ohne Angabe ausgeführt wird. Angaben für SIZE von 1 ergeben eine "halbstarke", Angaben größer 2 dickere Linien.


1.3.2.3 Listen

Es existieren verschiedene Listenelemente, von denen hier 3 behandelt werden sollen:

• numerierte Liste • nicht numerierte Liste • Definitionsliste

Jede der Listen wird eingeleitet von einem speziellen Start - TAG.Es folgen die einzelnen Listenpositionen jeweils eingeleitet von dem TAG <LI>. Eine Listenposition wird abgeschlossen durch die nächste Listenposition (<LI>) oder das Listen - Ende - TAG.

Innerhalb einer Listenposition sind TAGs wie <BR> oder <BLOCKQUOTE> erlaubt. Weitere Listen, wie Directory - Listung oder Menue - Listung werden von zu wenigen Browsern ausgewerten, so daß sich eine Beschäftigung damit nicht lohnt.

Die Darstellung in Listenform bedeutet i.d.R. das Arbeiten mit Einrückungen. Das funktioniert nicht alleine für Textpassagen, sondern auch beispielsweise für Bilder.

Mehrfacheinrückungen erreicht man durch Verschachtelung von Listen ineinander, wie an den folgenden Beispielen verdeutlicht werden soll.


1.3.2.3 Listen

Numerierte Listen

Das Containerelement für die numerierte Liste (ordered list) lautet:

<OL>

<LI> ...............

<LI> ....................

</OL>

Ein Beispiel:

<OL>

<LI> Dispatching, Beratung

<LI> Hardware - Bereitstellung und Wartung

<LI> Pflege der Betriebssystemsoftware

<LI> Betreuung von Anwendersoftware

</OL>

.


1.3.2.3 Listen

Nicht nummerierte Listen (Bullet-Listen)

Das Containerelement für die nicht - numerierte Liste (unordered list) lautet:

<UL>

<LI> ...............

<LI> ....................

</UL>

Das Beispiel:

<UL>

<LI> Dispatching, Beratung

<LI> Hardware - Bereitstellung und Wartung

<LI> Pflege der Betriebssystemsoftware

<LI> Betreuung von Anwendersoftware

</UL>

.


1.3.2.3 Listen

Definitionslisten / Stichwortverzeichnisse

Die Definitionslisten können noch in einer Sonderform genutzt werden für die Unterstützung einer Art von Stichwortverzeichnissen. Innerhalb der Liste werden dabei statt des oder neben dem <LI> - Element zwei TAGs mit einer Zusatzfunktion genutzt, <DT> und <DD>. Das Element <DT> markiert dabei das Stichwort durch gesonderte Hervorhebung wie beispielsweise

Wege zur Weisheit

Oder

Wege zum Glück


1.3.2.3 Listen

Definitionslisten / Stichwortverzeichnisse

Das Element <DD> rückt die zugehörige Erklärung dann rechts ein.

<DL>

<DT> .......

<DD> ...........

<DT> .......

<DD> ...........

<DD> ...........

</DL>

Das Beispiel:

<DL>

<DT> Dispatching, Beratung

<DD> User - Anmeldungen können von 8.oo bis 12.oo Uhr vorgenommen werden.

<DD> Zahlungen auf Druckkontigente von 14.oo bis 16.oo Uhr

<DT> Hardware und Maschinensaal

<DD> Alle Fragen zur Hardware sind an die Abteilung Wesenberg zu richten.

</DL>


1.3.2.4 Bilder

Bilder (Images) werden in der EDV in den unterschiedlichsten Speicherformaten erzeugt. Nur wenige sind jedoch so weit verbreitet, daß sie von (nahezu) allen Browsern dargestellt werden können. Das GIF-Formate verstehen wohl alle graphikfähigen Browser.

Das TAG zum Einfügen lautet: <IMG ...attribut... [ ...attribut...] >

Zu dem TAG <IMG> ist mindestens ein Attribut zwingend erforderlich, nämlich die Angabe, welches Bild dargestellt werden soll.

Das Attribut hat den Namen SRC. Dazu ein Beispiel:

<IMG SRC="sailer.gif" > führt zu:


1.3.2.4 Bilder

Ein weiteres Attribut legt fest, in welcher Position Schrift neben dem Bild positioniert wird. Es gibt dazu drei Möglichkeiten: ALIGN=TOP oder ALIGN=MIDDLE oder ALIGN=BOTTOM, wobei letzteres der Voreinstellung entspricht.

<IMG ALIGN="top" SRC="thermome.gif">

<IMG ALIGN="middle" SRC="thermome.gif">

<IMG ALIGN="bottom" SRC="thermome.gif">

Ein weiteres Attribut trägt den Namen ALT. Die Eingabe ALT="[Thermometer]" bewirkt, daß nicht graphikfähige Browser statt des Bildes den ALTernativen Text ausgeben.

Beispiel


1.3.2.5 Anker

Mit dem Begriff Anker wird in HTML einmal die Position innerhalb eines Dokumentes bezeichnet, von der aus ein Link (Verweis) auf ein anderes Dokument erfolgt. Mit Position sind in der Regel Worte, Textpassagen oder Bilder gemeint. Es gibt auch noch andersgeartete Bestandteile von Dokumenten, deren Erklärung an dieser Stelle aber für das Verständnis eher negativ sein dürfte.

Ein Anker wird bezeichnet durch das Containerelement <A> .......... </A>. Zwischen Start- und Ende-TAG befinden sich noch zwei Angaben:

• Der Text, (das Bild, das ....) von dem aus der Link erfolgt, • Angabe zum Ziel des Links

Das Attribut trägt den Namen HREF und hat als Wert die Angabe der Datei, in der sich das Zieldokument befindet.


1.3.2.5 Anker Beispiel

Man stelle sich vor, ein langer, in verschiedene Abschnitte gegliederter Text, läge als HTML - Dokument vor. Verweise auf dieses Dokument zu einem beispielsweise im vorletzten Abschnitt behandelten Thema würden vom Leser eine ziemliche Blätterei erfordern, bis er sich im Dokument nach hinten durchgearbeitet hat. Dazu gibt es ein besseres Verfahren:

Die Ziel - Textstelle wird markiert, d.h. mit einem Anker versehen. Das einzige Attribut dieses Ankers lautet NAME, z.B.

An eine Stelle im Text weit entfernt vom Anfang in einer Datei Indianer.html... lebten im Westen die meisten Indianerstämme. Die Irokesen waren der mächtigste ...soll ein Verweis auf die Irokesen ermöglicht werden.

Die Irokesen bekommen einen Anker: <A NAME="Marke5">Die Irokesen</A>

Im Ursprungstext bleibt diese Namenszuordnung des willkürlich gewählten Namens Marke5 ohne sichtbare Auswirkungen. Wenn der Link in einem anderen Dokument auf die Datei Indianer.html entsprechend modifiziert wird, kann direkt zur Textstelle Irokesen gesprungen werden.

Bisher: <A HREF="Indianer.html"> ...Absprungstelle ...</A>

wird zu: <A HREF="Indianer.html#Marke5" ... Absprungstelle ... </A>

Im Link wird hinter den Dateinamen mittels Nummernkreuz # abgetrennt, der gewählte Name des Ankers angegeben.


1.3.2.5 Sonderzeichen

Wie leider sehr oft in der EDV bedürfen auch im WorldWideWeb die Sonderzeichen des Deutschen Alphabetes einer Sonderbehandlung, da sie nicht im "normalen" Zeichenvorrat dieses Services (ASCII) enthalten sind. Es werden Ersatzdarstellungen vorgenommen, die wie folgt aufgebaut sind:

Eingeleitet werden sie mit einem & (kaufmännischen Und) und abgeschlossen mit einem Semikolon. Dazwischen angesiedelt wird entweder ein Kürzel, welches das darzustellende Zeichen beschreibt, z.B. Auml für das Ä (A Umlaut) oder (seltener) die Nummer innerhalb der Codetabelle hinter einem einleitenden Nummernkreuz (#228).

Die gängigen Ersatzdarstellungen der Deutschen Sprache: • ä = ä oder ä • Ä = Ä oder Ä • ö = ö oder ö • Ö = Ö oder Ö • ü = ü oder ü • Ü = Ü oder Ü • ß = ß oder ß

1.4 Tabellen

1.4.1 Einfache Tabellen

Erläuterung und Beispiele

1.4.2 Tabellenerweiterungen

Erläuterung und Beispiele

1.4 Tabellen

1.5.1 Vollständige URLs

URLs dienen in HTML dazu, die Adressen in einer vereinheitlichten Form (uniform) darzustellen, so wie sie z.B. für Links benötigt werden. Der prinzipielle Aufbau:

Art des Dokumentes :// kompletter Rechnername / Pfad / Dateiname#Anker

1.5 URLs

1.5.1 Vollständige URLs

Die Bestandteile im einzelnen: • Art des Dokumentes

Browser können nicht allein HTML-Dokumente auswerten, sondern auch solche anderer Informationssysteme. Die erste Angabe im URL gibt Hinweise, auf welche Art von Dokument gelinkt wird. (Diese Definition ist anschaulich aber nicht ganz korrekt. Genau genommen wird die Art des Übertragungsprotokolles bezeichnet.)

• :// • Rechneradresse

Sie ist komplett mit Rechnername und Domain anzugeben. • / (ein Schrägstrich) • Fundort des Dokumentes auf dem vorher angegebenen Rechner.

(Pfad + Dateiname, oder Dateiname allein, falls sich Dokument im Wurzelverzeichnis des Servers befindet.)

• (optional) # Anker (siehe Kapitel über Anker)

1.5 URLs

1.5.2 Relative URLs

Eine weitere Bezeichnung dafür ist partielle URLs. Ein URL auf eine Datei gleichen Typs auf dem gleichen Rechner, erlaubt das Weglassen der Rechneradresse, einer auf eine Datei im gleichen Directory auch den Fortfall der Pfadangabe.

<A HREF="http://wi.ba-loerrach.de/cms2/html/index.php">

wird bei Datei im gleichen Directory zu:

<A HREF="links.php">

oder bei Datei im Paralleldirectory zu:

<A HREF="../vorlesungsplaene/wwi00a/index.htm">

Zu den URLs noch einige allgemeine Bemerkungen: Achtung, nur ASCII - Zeichen bei den Namensangaben verwenden ! 8-Bit - Sonderzeichen werden u.U. verstümmelt.

Statt des vollständigen Rechnernamens kann auch die IP - Adresse eingesetzt werden. Man sollte diese Möglichkeit jedoch meiden. Es wird hier nur erwähnt, weil es einem beim Web - Surfen begegnen kann.

1.5 URLs

1.5.3 URL – Erweiterungen

URLs können erweitert werden um einige wenige "Anhängsel", die an dieser Stelle lediglich kurz erwähnt werden sollen. So ist es beispielsweise möglich, dass zwischen Server und Browser ein programmgesteuertes Frage- und Antwortspiel abgewickelt wird. Programmgesteuert insofern, dass der Browser veranlasst wird, eine Antwort an den Server zu liefern, die dort von einem Programm aufgenommen und ausgewertet wird.

Beispiel:

http://193.196.182.145/seiten/lst.asp?

Ein Seite namens lst.asp sendet eine Anfrage an den Browser, die nach Eingabe eines Kategoriebegriffs mit Rücksendung folgenden URLs beantwortet würde:

http://193.196.182.145/seiten/lst.asp?typ=1

1.5 URLs

1.5.4 URLs auf andere Server

Wie bereits erwähnt, können Browser auch Nicht - HTML - Dokumente bearbeiten. Zuerst eine Übersicht, um welche Dokumententypen es sich handelt, bevor Beispiele die Funktionsweisen aufzeigen. Unterstützte Protokolle (alphabetisch):

• ftp • gopher • http • mailto • news • telnet / rlogin / tn3270 • wais

1.5 URLs

1.5.4 URLs auf andere Server

Dokumente auf dem eigenen Rechner mit dem dort ebenfalls vorhandenen Browser abrufen geht mittels einem URL der Form:

• file:///laufwerk|/pfad/dateiname.html

1.5 URLs

1.5.4.1 ftp Beispiel

Der Zugrif auf Dokumente auf anonymen FTP - Servern wird wie in folgendem Beispiel dargestellt realisiert: • ftp://lxl1.ba loerrach.de/pub/mirrors/ftp.uni freiburg.de/pub/linux/suse/7.0/i386.de/README

Man findet die Angabe ftp für den Dokumententyp, die Rechneradressen, Pfad und Namen der zu holenden Datei.

Der Link ist dann wie folgt aufgebaut:

<A HREF=" ftp://lxl1.ba loerrach.de/pub/mirrors/ftp.uni freiburg.de/pub/linux/suse/7.0/i386.de/README ">FTP</A>

Eine Besonderheit gilt es noch zu erwähnen. Dateien können je nach Bedarf mittels FTP - Protokoll im 7-Bit-Verfahren (z.B. ASCII-Texte) wie auch als Binärdateien (8 Bit) übertragen werden.

Da dem Browser keine anderen Angaben über die Art des Dokumentes, und damit das erforderliche Übertragungsverfahren vorliegen, versucht er aus der Datei-Extension eine Entscheidung dazu abzuleiten (TXT = ASCII, GZ (gepackt) = binär).

1.5 URLs

1.5.4.2 gopher

Gopher ist ein Informationssystem, das vor dem Siegeszug des WWW weltweit verwendet wurde.

Gopher ermöglichte den Zugriff auf Informationen, die auf vielen verschiedenen Computern gespeichert waren, in einer hierarchischen Struktur von Directories (Menüs) und Files (Informationen).

Der Zugriff erfolgte nach dem Prinzip von Server und Client über das Internet mit dem Gopher-Protokoll.

Gopher wurde an der Universität von Minnesota entwickelt. Der Name kommt von der Beutelratte, dem "Nationaltier" und Spitznamen von Minnesota.

Gopher - Protokoll• eine Zeile mit gewünschten Dokument wird geschickt • Dokument oder Liste von Dokumenten kommt zurück • Bei Gopher+ auch weitere Attribute (Filetyp, Autor,...) (von WWW-Browsern praktisch nicht unterstützt ) • ASK Scripts für Eingaben (max 1 Schirm)

1.5 URLs

1.5.4.2 gopher

Der URL auf einen Gopher - Server entspricht in der Form dem auf WWW - Server:

• gopher://info.psu.edu/11/outside/Selected%20Gopher%20servers%09%09%2B

Es sei an dieser Stelle lediglich noch einmal daran erinnert, dass es nötig sein kann, hinter dem Rechnernamen abgetrennt durch Doppelpunkt eine Portadresse anzugeben, wenn sie vom Standardwert (bei Gopher 70) abweicht.

Das ergibt dann folgendes Bild für den Link:

• <A HREF=" gopher://info.psu.edu :70"> .......... </A>

1.5 URLs

1.5.4.3 mail

Es ist in einem Dokument möglich, einen Link zu generieren, der Erstellung und Versand von Electronic Mail bewirkt. Der URL sieht dabei wie folgt aus:

• mailto:[email protected]

Der gesamte Link in einem Text:

• <A HREF="mailto:[email protected]"> Senden Sie mir eine Mail </A>

Beispiel

1.5 URLs

1.5.4.4 news

Der Aufruf einer News - Group erfordert einen URL der Form: • news:rec.boats.paddle

Man beachte, dass hinter dem Doppelpunkt die üblicherweise vorhandenen beiden Schrägstriche entfallen (analog mailto).

Ein Beispiel für den Aufruf einer Newsgroup aus einem HTML - Dokument heraus:

... sofern Sie sich für <A HREF="news:rec.boats.building"> Bootsbau </A> interessieren.

Eine Auflistung aller am angewählten News - server verfügbaren Newsgroups erhält man durch einen Verweis wie folgt:

• news:*

Will man die Liste der Newsgroups auf einem "fremden" News - Server abrufen, geschieht das wie folgt (hier im Beispiel für den belwue):

• news:news.belwue.de:*

1.5 URLs

1.5.4.5 telnet/rlogin/ssl

Aus dem WWW heraus sind Remote - Login - Sitzungen zu entfernten Rechnern möglich. Das dazu verwendete Protokoll trägt die Bezeichnung telnet (oder rlogin). Exemplarisch soll das Verfahren mittels telnet hier behandelt werden. Der URL lautet:

• telnet://remote.host.de• rlogin://remote.host.de• ssl://remote.host.de

Dazu ein Beispiel: • <A HREF="telnet://gate2.ub.uni-bielefeld.de"> Remotehost </A>

Beispiel 1

Beispiel 2

1.5 URLs

1.5.4.6 wais

Wide Area Information Servers beinhalten i.d.R. Indices von Datenbeständen, an die Suchanfragen gestellt werden können. Diese Anfragen können als Verweise in HTML - Dokumente eingebettet werden. Der Aufbau des URL lautet:

• wais://waisserver.de/Datenbank

Der Browser öffnet dann ein separates Fenster mit einem Eingabefeld für einen Suchstring. Der URL wird dadurch erweitert zu

• wais://waisserver.de/Datenbank?Suchstring

1.5 URLs

1.6.1 Frames - Übersicht

Mittels Frames kann der vom Browser erzeugte Bildschirm in mehrere Segmente aufgeteilt werden, die wahlweise statisch oder mit veränderlichem Inhalt bestückt sind und aus denen heraus andere Seiten aufgerufen und in ein ausgewähltes Segment gestellt werden können.

Frames eröffnen damit ganz neue Möglichkeiten, Informationen aufzubereiten. So kann beispielsweise in einem Segment ein Text erscheinen, während in einem zweiten parallel dazu ein Video abläuft. Dazu ein Beipiel, allerdings nicht mit Video, sondern mit Bildabfolgen (Effekt Diashow). Es können für die Eingabe von Suchbegriffen zwecks Suche in Katalogen die Eingabefelder in einem Segment vorgegeben, die Suchergebnisse in einem anderen dazu angezeigt werden u.v.a.m.

1.6 Frames


Der Aufbau einer Frames erzeugenden Seite weicht von der bisher genutzten Struktur wie folgt ab:

<HTML>

<HEAD><TITLE>Seite mit Frames</TITLE></HEAD>

<FRAMESET ......>..... Frame - Definitionen .....</FRAMESET>

</HTML>

Die Seite enthält keinen BODY ! Die beim FRAMESET - TAG möglichen Attribute legen die einzelnen Rahmen fest. Bei den Frame-Definitionen wird bestimmt, welche Inhalte in die einzelnen Rahmen gelangen.

1.6 Frames


Was passiert aber mit dem Aufruf solch einer Seite durch einen Browser, der das FRAMES-Konzept nicht verarbeiten kann? Die TAGs innerhalb des/der FRAMESET-Rahmen werden ignoriert; die Seite bleibt leer. Diesem negativen Umstand werden Seitenanbieter dadurch gerecht, dass sie auf einer vorgeschalteten Seite fragen, ob der User einen Browser mit oder ohne entsprechende Fähigkeiten nutzt.

Aufgrund eines einfachen Tricks kann man diese Vorabfrage jedoch sparen, indem hinter das FRAME-Ende-TAG noch ein BODY gesetzt wird, der eine FRAME-lose Seite enthält. Diese wertet dann der einfache Browser aus, der den FRAMESET ignoriert hat.

Dasselbe wird erreicht, wenn in obigem Beispiel ein Bereich

<NOFRAMES> ...... Inhalt der framelosen Seite ...... ......................................

</NOFRAMES>

angefügt wird. Allerdings gibt es bei der Auswertung durch die Netscape-Browser unterhalb Versionen 4.x von den Standards abweichende Effekte, so dass derzeit die Möglichkeit vorzuziehen ist, eine rahmenlose Seite mittels BODY-TAG zu erzeugen.

1.6 Frames


Zum FRAMESET-TAG können die folgenden Attribute verwandt werden (Beispiele):

• COLS="25%, 75%" teilt die zur Verfügung stehende Fläche in zwei Spalten mit einer Breite von 25 Prozent (links) und 75 Prozent (rechts) der gesamten Bildschirmbreite.

• ROWS="30%, 70%" teilt die zur Verfügung stehende Fläche in zwei waagerechte Streifen mit einer Höhe von 30 Prozent (oben) und 70 Prozent (unten).

• FRAMEBORDER=3 macht die Rahmenränder 3 Pixel dick.

1.6 Frames


FRAMESETs können ineinander geschachtelt werden:

<FRAMESET COLS="25%, 75%"> (2 Spalten im Breitenverhältnis 1:3)...... FRAME-Definition der linken Spalte ......

<FRAMESET ROWS="30%, 70%"> (unterteilt rechte Spalte in zwei Felder)...... FRAME-Definition rechte Spalte oberes Feld...... FRAME-Definition rechte Spalte unteres Feld</FRAMESET> (schließt SET für die waagerechten Felder)

</FRAMESET> (schließt SET für die Spalten)

Daraus ergibt sich folgendes Bild, sofern für die drei Felder Definitionen vorgenommen wurden, die ohne Vorgabe allein den Hintergrund farbig unterlegen.

1.6 Frames


Die Angaben für die Aufteilung des Bildschirmes können auch in Pixel fest vorgegeben werden. Aber Achtung, die Festlegung mittels Pixel für die einzelnen Felder darf insgesamt den Rahmen des Bildschirmes nicht sprengen ! Um das zu vermeiden, gibt es jedoch einen Trick:

Soll beispielsweise am oberen und unteren Rand des Bildschirmes eine feste Leiste mit Hinweisen stehen, so kann die Rahmendefinition per Attribut zum FRAMESET-TAG wie folgt lauten. ROWS="100,*,80".

Die Verwendung des "Wildcard"-Zeichens bewirkt, dass von der zur Verfügung stehenden Bildschirmhöhe nach Abzug von 100 Pixel oben und 80 Pixel unten der Rest für das mittlere Feld genommen wird.

1.6 Frames

1.6.3 „Rahmenpläne“

Wenn die Aufteilung der Seite mittels FRAMESET-TAG erfolgt ist, müssen die verschiedenen Felder mit Inhalt gefüllt werden, wozu das TAG FRAMES verwendet wird. Es handelt sich bei diesem TAG um ein leeres Element; ein zugehöriges Ende-TAG ist möglich aber nicht erforderlich.

Per Attribut werden einem FRAMES-TAG Angaben zugeordnet wie:

• NAME="frei_wählbar" Die Information muss sein, um in einem Link angeben zu können, in welchem Rahmen das angeklickte Dokument geladen werden soll. Ein Link aus einem Rahmen heraus führt zu einem Aufruf in demselben Rahmen, wenn nicht explizit angegeben wird:TARGET="rahmenname", wobei der Name des Rahmens mit dem NAME-Attribut zugeordnet ist, wie oben dargestellt.

• SRC="... URL ..." gibt den Link auf das Dokument, das beim Öffnen der Seite mit den Frames zuerst in das Feld geladen werden soll. • SCROLLING="yes/no/auto" legt fest, ob in einem Rahmen das aufgerufene Dokument gescrollt werden soll/nicht darf/oder bei Bedarf

automatisch vorgesehen wird. • MARGINWIDTH=nn oder MARGINHEIGHT=nn legt fest, wie viel Abstand (in Pixel) zwischen der rechten und linken bzw. oberen und

unteren Rahmenbegrenzung und dem Rahmeninhalt freigehalten werden soll. • NORESIZE als Attribut ohne zugeordnetem Wert. Üblicherweise lassen sich Rahmen durch Ziehen mit der Maus in ihrer Form verändern,

was aber durchaus nicht immer wünschenswert ist und mit diesem Attribut verhindert werden kann. • BORDER=nn legt die Stärke der Rahmen in Pixel fest. • FRAMEBORDER=0 führt dazu, dass die Rahmenstärke auf Null Pixel reduziert wird, d.h. die Rahmen zwischen den Teilflächen nicht

erscheinen. Durch die Angabe einer Eins (default-Wert) wird ein Rahmen sichtbar. Achtung: Ältere Browser haben damit u.U. Schwierigkeiten. Zusätzlich ist daher (abweichend vom Standard) anzugeben: BORDER=0 Im Microsoft Explorer reicht das jedoch auch noch nicht aus. Es muß zusätzlich das Attribut FRAMESPACING=0 angegeben werden!

• BORDERCOLOR="#FF0000" gestattet es, bei einigen Browsern, farbige Rahmen zu erzeugen. Dies ist jedoch im Standard 4.0 nicht vorgesehen, also proprietär (Netscape und Microsoft sind dabei).

1.6 Frames

1.6.4 Links

Wie bereits erwähnt, muss aus einem Text heraus ein Link noch mit einer Zielangabe versehen werden, wenn das gerufene Dokument in einem bestimmten Rahmen landen soll. Das Attribut im Anker-TAG wird erweitert zu: <A HREF=" ...... URL ......" TARGET="main">, wobei "main" der dem Frame zugeordnete Name ist.

Nun gibt es noch einige besondere "Zielangaben", die als Attributwerte für das TARGET-TAG genommen werden können und dazu dienen, Rahmenaufteilungen des Bildschirmes zu beenden. Diese Werte beginnen mit einem Unterstrich.

• "_top" führt dazu, dass das aufgerufene Dokument den gesamten Platz einnimmt und die Vorseite ersetzt.

• "_blank" erzeugt ebenfalls den Aufbau einer neuen, aber zusätzlichen, Seite. Die bisherige (Rahmen-) Seite wird in den Hintergrund gestellt, bleibt dort aber (als eigene Browser-Instanz) komplett erhalten.

Das Verlassen eines Framesets ist immer erforderlich, wenn aus ihm heraus fremde Seiten aufgerufen werden, die ebenfalls aus Frames bestehen, Fenster im Fenster also. Da wird dann spätestens in der 3.Stufe die Grenze zur Unleserlichkeit überschritten.

1.6 Frames


Diese in HTML 4.0 neu definierte Methode wird erst von wenigen Browsern verstanden. Gleichwohl soll sie hier behandelt werden, da sie einige Vorteile bietet bzw. bieten wird. Der Name "Frame" ist in dem Zusammenhang eigentlich etwas irreführend. Es handelt sich vielmehr um fest umrissene Bereiche innerhalb eines Dokumentes, deren Inhalte durch Anklicken eines Links ausgetauscht werden können., am ehesten vergleichbar einem Fenster in einer Seite.

Ein Beispiel:

<IFRAME SRC="extradatei.html" NAME="fenster" WIDTH=300 HEIGHT=400ALIGN=left VSPACE=5 HSPACE=8 SCROLLING="yes"> Ersatztext, wenn Browser IFRAMES nicht kennt

</IFRAME>

Wird von einem Anker aus TARGET="fenster" angegeben, so wird das aufgerufene Dokument in den 300x400 Pixel großen Bereich auf der Seite eingefügt. Ist es größer als die zur Verfügung stehende Fläche, so werden Scrollbalken eingefügt, es sei denn dies wäre durch die Angabe SCROLLING="no" untersagt.

1.6 Frames


Die verbleibenden Attribute bedeuten:

• ALIGN legt fest, ob der Fensterbereich links- oder rechtsbündig ausgerichtet wird,der Text also links oder rechts vom Fenster verläuft,

• VSPACE, wie viel Platz in Pixel zwischen Fenster und Text links oder rechts frei bleibt, • HSPACE, wie viel Platz zwischen Fenster und Text oben und unten freigelassen wird.

1.6 Frames

1.7.1 Was ist ein Formular im WWW?

Formulare (engl. forms) sind Dokumente des WWW, die es gestatten, Felder in diesem Dokument mittels Browser mit Daten zu füllen und diese dann per Mausklick an den Server zurückzusenden.

Ein praktisches Beispiel:

Eine Zeitung publiziert einen Teil ihres Inhaltes elektronisch per WWW. Unter anderem werden auch gerne die Anzeigenteile elektronisch gehalten. Um aus der Vielzahl der Anzeigen zu den speziellen Wünschen zu gelangen, füllt der Nutzer ein "Formular" aus. Wird ein Button "Absenden " gedrückt, so wird der Inhalt des gesamten Formulars an den Browser abgeschickt.

Diese Art der Rückmeldung macht den großen Stellenwert des WWW auch für kommerzielle Anbieter von Waren oder Dienstleistungen aus. Lässt sich doch damit an jede Produktbeschreibung, an jedes Angebot gleich das Bestellformular anhängen!

1.7 Formulare

1.7.2 Struktur

Ein Formular wird begrenzt durch die TAGs:

<FORM> ..... </FORM>

Das TAG form kann Attribute aufweisen, die Aussagen zur Art des Versandes machen:

1.

<FORM ACTION="http://www-server.host.de/cgi-bin/rueckantwort">

bewirkt, dass die Antwort an ein Programm namens "rueckantwort" in dem Standard - Programmdirectory "cgi-bin" auf dem WWW - Server gesandt wird

1.7 Formulare

1.7.2 Struktur

2.

<FORM ACTION="mailto:[email protected]">

erzeugt aus dem Formular eine Mail, die an die im URL angegebene Adresse gesandt wird.

Sofern unter dem Attribut ACTION ein URL auf einen HTTP - Server eingetragen ist, kann ein weiteres Attribut auftauchen: METHOD="GET" oder METHOD="POST". Damit wird geregelt, in welcher Form die Daten des Formulars bei Absenden vom Browser an den Server "verpackt" werden, was letztlich von dem Programm bestimmt wird, das die Daten auf dem Server in Empfang nimmt und weiter verarbeitet. Eine Beschäftigung damit würde allerdings den Rahmen dieses Kurses sprengen. Die Voreinstellung liegt bei METHOD="GET" und bewirkt, dass die Eintragungen im Formular in der Form eines Search - Strings weitergegeben werden:

http://www-server.host.de/cgi-bin/rueckantwort?person=Mählmann&vorname=Markus&abteilung=WI

(Die Eintragungen des Formulars werden an den URL eines Suchstrings eine nach der anderen jeweils durch & getrennt angehängt.)

1.7 Formulare

1.7.3 Formularelemente

Es stehen in Formulare drei verschiedene Elemente zur Verfügung:

• INPUT erzeugt ein Eingabefeld • SELECT erzeugt ein Pull - Down - Menü • TEXTAREA erzeugt ein Feld für Fließtext

Diesen Elementen ist gemeinsam, dass sie alle zusätzlich unterschiedliche Attribute benötigen, die bei der Erklärung der Elemente selbst behandelt werden.

Ausnahme:Das Attribut NAME wird von allen genutzt. Damit werden den Eingabefeldern, die durch INPUT, SELECT oder TEXTAREA erzeugt werden, individuelle Namen zugeordnet. Unter diesen Namen kann dann die Weiterverarbeitung durch Browser und Serverprogramm erfolgen.

Ein Beispiel:

<INPUT NAME="Stundensatz" ....[weitere Attribute].... >

(Zur Erinnerung: Innerhalb des Namens wird Groß- und Kleinschreibung ausgewertet !)

1.7 Formulare

1.7.3 Formularelemente - Beispiele

Beispiel

1.7 Formulare

1.7.3.1 INPUT

Beispiel

1.7 Formulare

1.7.3.2 TEXTAREA

Beispiel

1.7 Formulare

1.7.3.3 SELECT

Beispiel

1.7 Formulare

1.7.3.4 OPTION

Beispiel

1.7 Formulare

1.8.1 Die Dia-Show

Ein kleiner Trick im Header einer HTML-Datei (ein META - TAG) gestattet es, eine Seite jeweils nur über einen gewünschten und definierten Zeitraum anzuzeigen und dann ein Folgeseite ablaufen zu lassen. Dazu hier ein Beispiel. Das dies bewirkende TAG lautet samt dreier Attribute

<META HTTP-EQUIV="Refresh" CONTENT="8; url=abs. oder rel. URL">

.Die Angabe "Refresh" bewirkt den Bildwechsel; der Wert zum CONTENT stellt die Zeit in Sekunden dar bis zum Bildwechsel und schließlich wird unter URL die Fundstelle des Folgebildes angegeben. Achtung: Man beachte die etwas "ungewöhnliche" Stellung der Anführungszeichen !

Bei einem Zyklus von 4 Dateien sähe des jeweilige META - TAG wie folgt aus: • Datei 1

<META HTTP-EQUIV="Refresh" CONTENT="5;url=datei2.html"> • Datei 2

<META HTTP-EQUIV="Refresh" CONTENT="5; url=datei3.html"> • Datei 3

<META HTTP-EQUIV="Refresh" CONTENT="5; url=datei4.html"> • Datei 4

<META HTTP-EQUIV="Refresh" CONTENT="5; url=datei1.html">

1.8 Bewegt - Bilder

1.8.2 Animated GIFs

Mit diesem Begriff werden Graphiken bezeichnet, die durch schnellen Wechsel den Eindruck von Bewegung erzeugen, wie im Beispiel zu sehen:

Zwecks besserer Verständlichkeit der Materie erfolgt zuerst ein Kapitel über die Bildverarbeitung im WWW allgemein.

Im Anschluss daran wird die Möglichkeit aufgezeigt, solche bewegten Bilder selbst zu erzeugen, aus Sammlungen zu übernehmen und in die WWW-Seiten einzubauen.

1.8 Bewegt - Bilder

1.8.2 Bildformate allgemein

Erläuterungen

1.8 Bewegt - Bilder

1.8.2 Einbau von Animated GIFs

Die einfachste Möglichkeit besteht darin, aus im Netz vorhandenen Sammlungen Animated GIFs zu kopieren und als Bild mit dem Image-TAG einzubauen. Eine gute Einstiegsadresse für das Auffinden von Sammlungen bietet die Firma "ZAMPANO"

Um eigene bewegte Bilder a la Daumenkino-Effekt einzusetzen benötigt man zuerst einmal die Einzelbilder der gesamten Bildserie. Dabei sollten die Einzelbilder alle gleich groß und aus denselben Farbtönen aufgebaut sein.

Dann allerdings benötigt der Anwender ein spezielles Programm, das in der Lage ist, die Einzelbilder einer Bildfolge in einer Datei zusammen zu fassen und mit den nötigen Steuerungsinformationen zu versehen.Unter Windows steht dafür ein Programm namens GIF Construction Set zur Verfügung. Für UNIX-Maschinen und MACs sind ähnliche Programme im Angebot.

Gesteuert werden können beispielsweise die Zeiten zwischen den Einzelbildaufrufen und ob die Bildfolge in einer immer wiederkehrenden Schleife ablaufen soll. Ferner kann man Texte einblenden oder auch den Ablauf stoppen und erst nach einer Betrachteraktion weiterlaufen lassen. Wie diese Funktionen jeweils ausgelöst werden, ist der Bedienungsanleitung des erzeugenden Programms zu entnehmen.

1.8 Bewegt - Bilder