1. HTML Basis

1
1. HTML Basis

• Markus Mählmann
• Dipl.-Betriebswirt (BA)

2
1. HTML Basis

• 1.1 Vorbemerkungen
• 1.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 einzelnen
• 1.3.1 Dokumentenstrukturierung
• 1.3.1.1 Header
• 1.3.1.2 Body

3
1. HTML Basis

• 1.3.2 Elemente des Body
• 1.3.2.1 Schriftdarstellung
• 1.3.2.2 Textstrukturierung
• 1.3.2.3 Listen
• 1.3.2.4 Bilder
• 1.3.2.5 Anker
• 1.3.2.6 Sonderzeichen
• 1.4 Tabellen
• 1.4.1 Einfache Tabellen
• 1.4.2 Tabellenerweiterungen
• 1.5 URLs (Uniform Resource Locators)
• 1.5.1 Vollständige URLs
• 1.5.2 Relative URLs
• 1.5.3 URL Erweiterungen
• 1.5.4 URLs auf andere Server

4
1. HTML Basis

• 1.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 Frames
• 1.6.1 Übersicht
• 1.6.2 SET-Definition
• 1.6.3 Rahmenpläne
• 1.6.4 Links
• 1.6.5 eingebettete Rahmen
• 1.7 Formulare
• 1.7.1 Was ist ein Formular im WWW?

5
1. HTML Basis

• 1.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 Bilder
• 1.8.1 Die Dia-Show
• 1.8.2 Animated GIFs
• 1.8.2.1 Bildformate allgemein
• 1.8.2.2 Einbau von Animated GIFs

6
1.1 Vorbemerkungen

• 1.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

7
1.1 Vorbemerkungen

• 1.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.

8
1.1 Vorbemerkungen
1.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.
9
1.1 Vorbemerkungen
1.1.3 HTML (HyperText Markup Language) 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-Programmier
er 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.
10
1.1 Vorbemerkungen
1.1.3 HTML (HyperText Markup Language) 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.
11
1.1 Vorbemerkungen

• 1.1.3 HTML (HyperText Markup Language)
• Literatur
• Selfhtml
• HTML 4.0 Referenz.  Stefan Münz, Wolfgang
  Nefzger
• Gebundene Ausgabe - 893 Seiten Franzis Verlag
  GmbH ISBN 3772374034

12
1.2 Die Art der Sprachelemente (Tags)

• 1.2.1 Tags allgemein
• Ein TAG ist wie folgt aufgebaut
• einleitende spitze Klammer lt
• Element
• schließende spitze Klammer gt
• Ein gültiges TAG wäre z.B. ltBRgt(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 ltBLOCKQUOTEgt und ltblockquotegt und
  selbst ltbLoCKquoTEgt
• (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.
• ltIMG SRC "bildchen.gif"gt
• 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.

13
1.2 Die Art der Sprachelemente (Tags)
1.2.2 Elemententypen Die Bezeichnung
Containertyp eines Elementes wird genutzt, wenn
es aus einem Start- und einem Ende-Tag gebildet
wird. Ein Beispiel ltH4gt dies ist die
viertgrößte Schriftlt/H4gt 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. ltH2gt
..... lt/H2gt
14
1.2 Die Art der Sprachelemente (Tags)

• 1.2.2.1 Containertags
• Containerelemente können ineinander geschachtelt
  sein
• ltBgtltIgt .......... lt/Igtlt/Bgt (Fett und Italic)
• nicht jedoch so
• ltBgtltIgt .......... lt/Bgtlt/Igt
• oder so ltH1gtltH2gt .......... lt/H2gtlt/H1gt
  (Widerspruch !)

15
1.2 Die Art der Sprachelemente (Tags)
1.2.2.2 Leere Elemente Ein leeres Element liegt
vor, wenn es allein ein Start-, nicht jedoch ein
Ende-TAG gibt ltHRgt 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.
16
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
ltHTMLgt ltHEADgt ..... lt/HEADgt
ltBODYgt .......... ..........
lt/BODYgt lt/HTMLgt
17
1.3 Die Tags im Einzelnen

• 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.
• ltTITLEgt .......... lt/TITLEgt 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.
• ltISINDEXgtVeranlasst 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.
• ltBASE HREF"http//...URL..."gtEnthält die
  Adresse der Einstiegsseite für eine aus mehreren
  Dateien zusammengestellte WWW-Seite

18
1.3 Die Tags im Einzelnen
1.3.1.1 Header Weitere mögliche Informationen
werden im Header mit dem ltMETAgt-Tag
abgelegt. lthtmlgt ltheadgt ltmeta name"robots"
content"noindex,nofollow"gt ltmeta
name"description" content"This page
...."gt lttitlegt...lt/titlegt lt/headgt ltbodygt ...
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.)
19
1.3 Die Tags im Einzelnen

• 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
• NOINDEX
• Die INDEX-Direktive veranlasst einen
  Indexing-Robot zur Indexierung der Seite.
• NOFOLLOW
• Die FOLLOW-Direktive veranlasst einen Robot zur
  Verfolgung aller auf der Seite vorhandenen Links.
• Die Standardeinstellungen sind
• INDEX
• FOLLOW

20
1.3 Die Tags im Einzelnen

• 1.3.1.1 Header
• Die Werte ALL und NONE schalten alle Direktiven
  an bzw. aus.
• ALLINDEX,FOLLOW
• NONENOINDEX,NOFOLLOW
• Beispiele
• ltmeta name"robots" content"index,follow"gt
• ltmeta name"robots" content"noindex,follow"gt
• ltmeta name"robots" content"index,nofollow"gt
• ltmeta name"robots" content"noindex,nofollow"gt
• ltmeta name"robots" content"all"gt
• ltmeta name"robots" content"none"gt

21
1.3 Die Tags im Einzelnen

• 1.3.1.1 Header
• Wichtig
• Der name robots und der content sind
  case-insensitive
• Die Angabe widersprüchlicher Werte muss vermieden
  werden
• ltmeta name"robots" content"INDEX,NOINDEX,NOFOLL
  OW,FOLLOW,FOLLOW"gt

22
1.3 Die Tags im Einzelnen
1.3.1.1 Header Die formale Syntax des robots
META-Tags content all none
directives all "ALL None "NONE directives
directive "," directives directive index
follow index "INDEX" "NOINDEX follow "FOLLO
W" "NOFOLLOW"
23
1.3 Die Tags im Einzelnen

• 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 - CompressionMehrere 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.

24
1.3 Die Tags im Einzelnen

• 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.
• ltBODY BACKGROUND"dreinull.gif"gt

25
1.3 Die Tags im Einzelnen

• 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
• ltBODY BGCOLOR"F08080"gt
• 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)

26
1.3 Die Tags im Einzelnen
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.
27
1.3 Die Tags im Einzelnen

• 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.

28
1.3 Die Tags im Einzelnen

• 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

29
1.3 Die Tags im Einzelnen

• 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 ltBgt
  ...... lt/Bgt. Damit wird der Browser angewiesen,
  die markierte Stelle immer in Fettschrift
  darzustellen.
• Zwar bewirkt die logische Hervorhebung durch
  ltSTRONGgt ...... lt/STRONGgt 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).

30
1.3 Die Tags im Einzelnen

• 1.3.2.1 Schriftdarstellung
• Jede nicht besonders markierte Textstelle wird
  vom Browser in Normalschrift dargestellt. Es
  bedeuten
• ltH1gtSo wird Überschriftsgröße eins erzeugt.lt/H1gt
• ltH2gtSo wird Überschriftsgröße zwei erzeugt.lt/H2gt
• ltH3gtSo wird Überschriftsgröße drei erzeugt.lt/H3gt
• ltH4gtSo wird Überschriftsgröße vier erzeugt.lt/H4gt
• ltH5gtSo wird Überschriftsgröße fünf erzeugt.lt/H5gt
• ltH6gtSo wird Überschriftsgröße sechs erzeugt.lt/H6gt
  
• So entsteht Normalschrift
• ltBgtSo entsteht eine fette Schrift (Bold).lt/Bgt
• ltIgtSo entsteht eine kursive Schrift.lt/Igt
• ltTTgtSo entsteht eine äquidistante
  (Schreibmaschinen-)Schrift.lt/TTgt
• Dazu nun die vorstehenden Beispiele im Bild.
  Sollten die Schriftgrößen nicht abgestuft oder
  wie genannt dargestellt werden, ist Ihr Browser
  nicht passend konfiguriert.

31
1.3 Die Tags im Einzelnen
1.3.2.1 Schriftdarstellung 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 ltFONT
SIZE4gt ..... lt/FONTgt für eine absolute Angabe
der Schriftgröße ltFONT SIZE2gt ..... lt/FONTgt
für eine Erhöhung der Schriftgröße um zwei
Stufen ltBASEFONT SIZE2gt ändert die
"Normalgröße" auf den Fonttyp Nr. 2
32
1.3 Die Tags im Einzelnen

• 1.3.2.1 Schriftdarstellung
• Ü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
• ltH3 ALIGN"center"gtDiese Überschrift wird
  zentriertlt/H3gt

33
1.3 Die Tags im Einzelnen

• 1.3.2.1 Schriftdarstellung
• Es wurde die Einführung weiterer TAGs zur
  Textgestaltung geplant und bei einigen Browsern
  dann auch realisiert. Dazu einige wenige
  Beispiele
• ltUgt ..... lt/Ugt unterstrichen (Underline)
• ltSgt ..... lt/Sgt durchgestrichen (Strike through)
• ltSUBgt ..... lt/SUBgt als Index (SUBscript)
• ltSUPgt ..... lt/SUPgt als Exponenten (SUPerscript)
• ltBLINKgt ..... lt/BLINKgt 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
• ltfont color"FF0000gt"Dieser Text wird knallrot
  dargestellt.lt/fontgt
• wird zu Dieser Text wird knallrot dargestellt.

34
1.3 Die Tags im Einzelnen
1.3.2.1 Schriftdarstellung Letztlich können auch
die Schriftarten gewählt werden. Voraussetzung
ist allerdings, dass das jeweilige Betriebssystem
die gewünschten Schriftarten auch kennt!. ltfont
face"Arial,Helvetica"gt 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.
35
1.3 Die Tags im Einzelnen
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.
36
1.3 Die Tags im Einzelnen

• 1.3.2.2 Textstrukturierung
• Der AbsatzAbsätze werden erzeugt durch ltPgtEin
  Absatz kann abgeschlossen werden durch lt/Pgt, was
  jedoch nicht erforderlich ist.Absätze werden im
  Text automatisch erzeugt, sobald
  Schriftgrößendefinitionen (ltH1gt bis ltH6gt) folgen
  oder (im folgenden besprochene)
  Listelemente.Mehrere ltPgt ltPgt ltPgt werden
  ignoriert und zu einem Absatz zusammengezogen.
• Das Zeilenende-TAGDie Textzeile wird beendet
  durch ltBRgt, es wird in der folgenden
  Bildschirmzeile (ohne Zwischenraum wie beim
  Absatz) weiter geschrieben.
• Die Horizontale LinieDas TAG ltHRgt erzeugt eine
  horizontale Linie.
• Der BlockEin (auch längerer) Text eingeschlossen
  in ltBLOCKQUOTEgt .......... lt/BLOCKQUOTEgt wird als
  ein Block mit einer Einrückung am linken und
  rechten Rand dargestellt.
• Die "Adresse"Auf eine besondere Art (kursiv,
  blockquote - Browser-abhängig) werden
  Informationen dargestellt die mittels Container -
  Element ltADDRESSgt ..... lt/ADDRESSgt eingeschlossen
  sind. Üblicherweise werden auf diese Art Texte am
  Dokumentenende, vorzugsweise Adressen,
  dargestellt bzw. Überschriften (siehe oben).

37
1.3 Die Tags im Einzelnen

• 1.3.2.2 Textstrukturierung
• 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
• ltP ALIGN"left"gt voreingestellt nötig für
  Rückstellung auf "Normalfall"
• ltP ALIGN"right"gt Ausrichtung am rechten
  Zeilenrand
• ltP ALIGN"center"gt Ausrichtung zentriert
• ltP ALIGN"justify"gt 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
• ltCENTERgt
• Diese Zeilen ltBRgt
• sollen zentriert dargestellt werden.
• ltIMG SRC"dynamit.gif"gt
• lt/CENTERgt

Beispiel
38
1.3 Die Tags im Einzelnen
1.3.2.2 Textstrukturierung Horizontale Linien
können hinsichtlich Weite und Dicke variiert
werden. Die Attribute lauten z.B. WIDTH80 und
SIZE2, 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.
39
1.3 Die Tags im Einzelnen

• 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
  ltLIgt. Eine Listenposition wird abgeschlossen
  durch die nächste Listenposition (ltLIgt) oder das
  Listen - Ende - TAG.
• Innerhalb einer Listenposition sind TAGs wie ltBRgt
  oder ltBLOCKQUOTEgt 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.

40
1.3 Die Tags im Einzelnen
1.3.2.3 Listen Numerierte Listen Das
Containerelement für die numerierte Liste
(ordered list) lautet ltOLgt ltLIgt
............... ltLIgt .................... lt/OLgt
Ein Beispiel ltOLgt ltLIgt Dispatching, Beratung
ltLIgt Hardware - Bereitstellung und Wartung ltLIgt
Pflege der Betriebssystemsoftware ltLIgt Betreuung
von Anwendersoftware lt/OLgt .
41
1.3 Die Tags im Einzelnen
1.3.2.3 Listen Nicht nummerierte Listen
(Bullet-Listen) Das Containerelement für die
nicht - numerierte Liste (unordered list) lautet
ltULgt ltLIgt ............... ltLIgt
.................... lt/ULgt Das Beispiel ltULgt
ltLIgt Dispatching, Beratung ltLIgt Hardware -
Bereitstellung und Wartung ltLIgt Pflege der
Betriebssystemsoftware ltLIgt Betreuung von
Anwendersoftware lt/ULgt .
42
1.3 Die Tags im Einzelnen
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 ltLIgt -
Element zwei TAGs mit einer Zusatzfunktion
genutzt, ltDTgt und ltDDgt. Das Element ltDTgt markiert
dabei das Stichwort durch gesonderte Hervorhebung
wie beispielsweise Wege zur Weisheit Oder Wege
zum Glück
43
1.3 Die Tags im Einzelnen
1.3.2.3 Listen Definitionslisten /
Stichwortverzeichnisse Das Element ltDDgt rückt
die zugehörige Erklärung dann rechts ein.
ltDLgt ltDTgt ....... ltDDgt ........... ltDTgt
....... ltDDgt ........... ltDDgt ...........
lt/DLgt
Das Beispiel ltDLgt ltDTgt Dispatching, Beratung
ltDDgt User - Anmeldungen können von 8.oo bis
12.oo Uhr vorgenommen werden. ltDDgt Zahlungen auf
Druckkontigente von 14.oo bis 16.oo Uhr ltDTgt
Hardware und Maschinensaal ltDDgt Alle Fragen zur
Hardware sind an die Abteilung Wesenberg zu
richten. lt/DLgt
44
1.3 Die Tags im Einzelnen
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 ltIMG ...attribut...
...attribut... gt Zu dem TAG ltIMGgt ist
mindestens ein Attribut zwingend erforderlich,
nämlich die Angabe, welches Bild dargestellt
werden soll. Das Attribut hat den Namen SRC.
Dazu ein Beispiel ltIMG SRC"sailer.gif" gt
führt zu
45
1.3 Die Tags im Einzelnen
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 ALIGNTOP oder ALIGNMIDDLE oder
ALIGNBOTTOM, wobei letzteres der Voreinstellung
entspricht. ltIMG ALIGN"top" SRC"thermome.gif"gt
ltIMG ALIGN"middle" SRC"thermome.gif"gt ltIMG
ALIGN"bottom" SRC"thermome.gif"gt 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
46
1.3 Die Tags im Einzelnen

• 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 ltAgt .......... lt/Agt. 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 LinksDas Attribut trägt den
  Namen HREF und hat als Wert die Angabe der Datei,
  in der sich das Zieldokument befindet.

47
1.3 Die Tags im Einzelnen
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 ltA NAME"Marke5"gtDie
Irokesenlt/Agt 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 ltA HREF"Indianer.html"gt
...Absprungstelle ...lt/Agt wird zu ltA
HREF"Indianer.htmlMarke5" ... Absprungstelle
... lt/Agt Im Link wird hinter den Dateinamen
mittels Nummernkreuz abgetrennt, der gewählte
Name des Ankers angegeben.
48
1.3 Die Tags im Einzelnen

• 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
• ä auml oder 228
• Ä Auml oder 196
• ö ouml oder 246
• Ö Ouml oder 214
• ü uuml oder 252
• Ü Uuml oder 220
• ß szlig oder 223

49
1.4 Tabellen
1.4.1 Einfache Tabellen Erläuterung und Beispiele
50
1.4 Tabellen
1.4.2 Tabellenerweiterungen Erläuterung und
Beispiele
51
1.5 URLs
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 / DateinameAnker
52
1.5 URLs

• 1.5.1 Vollständige URLs
• Die Bestandteile im einzelnen
• Art des DokumentesBrowser 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.)
• //
• RechneradresseSie 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)

53
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. ltA HREF"http//wi.ba-loerrach.de/cms
2/html/index.php"gt wird bei Datei im gleichen
Directory zu ltA HREF"links.php"gt oder bei
Datei im Paralleldirectory zu ltA
HREF"../vorlesungsplaene/wwi00a/index.htm"gt 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.
54
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?typ1
55
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

56
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

57
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.baloerrach.de/pub/mirrors/ftp.unifrei
  burg.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
• ltA HREF" ftp//lxl1.baloerrach.de/pub/mirrors/ft
  p.unifreiburg.de/pub/linux/suse/7.0/i386.de/READM
  E "gtFTPlt/Agt
• 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).

58
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)

59
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/Selected20Gopher
  20servers09092B
• 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
• ltA HREF" gopher//info.psu.edu 70"gt ..........
  lt/Agt

60
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
• mailtohd.markus_at_maehlmann.org
• Der gesamte Link in einem Text
• ltA HREF"mailtomarkus_at_maehlmann.org"gt Senden Sie
  mir eine Mail lt/Agt
• Beispiel

61
1.5 URLs

• 1.5.4.4 news
• Der Aufruf einer News - Group erfordert einen URL
  der Form
• newsrec.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 ltA HREF"newsrec.boats.bu
  ilding"gt Bootsbau lt/Agt 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)
• newsnews.belwue.de

62
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
• ltA HREF"telnet//gate2.ub.uni-bielefeld.de"gt
  Remotehost lt/Agt
• Beispiel 1
• Beispiel 2

63
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

64
1.6 Frames
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.
65
1.6 Frames
1.6.1 Frames - Übersicht Der Aufbau einer Frames
erzeugenden Seite weicht von der bisher genutzten
Struktur wie folgt ab ltHTMLgt ltHEADgtltTITLEgtSe
ite mit Frameslt/TITLEgtlt/HEADgt ltFRAMESET
......gt..... Frame - Definitionen
.....lt/FRAMESETgt lt/HTMLgt 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.
66
1.6 Frames
1.6.1 Frames - Übersicht 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 ltNOFRAMESgt ...... Inhalt der
framelosen Seite ...... .................... ..
................lt/NOFRAMESgt 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.
67
1.6 Frames

• 1.6.2 SET-Definition
• 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).
• FRAMEBORDER3 macht die Rahmenränder 3 Pixel
  dick.

68
1.6 Frames
1.6.2 SET-Definition FRAMESETs können ineinander
geschachtelt werden ltFRAMESET COLS"25, 75"gt
(2 Spalten im Breitenverhältnis 13)......
FRAME-Definition der linken Spalte
...... ltFRAMESET ROWS"30, 70"gt (unterteilt
rechte Spalte in zwei Felder)......
FRAME-Definition rechte Spalte oberes Feld......
FRAME-Definition rechte Spalte unteres
Feldlt/FRAMESETgt (schließt SET für die
waagerechten Felder) lt/FRAMESETgt (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.
69
1.6 Frames
1.6.2 SET-Definition 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.
70
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 wirdTARGET"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.
• MARGINWIDTHnn oder MARGINHEIGHTnn 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.
• BORDERnn legt die Stärke der Rahmen in Pixel
  fest.
• FRAMEBORDER0 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 BORDER0 Im
  Microsoft Explorer reicht das jedoch auch noch
  nicht aus. Es muß zusätzlich das Attribut
  FRAMESPACING0 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).

71
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 ltA HREF" ...... URL
  ......" TARGET"main"gt, 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.

72
1.6 Frames
1.6.5 eingebettete Rahmen 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 ltIFRAME
SRC"extradatei.html" NAME"fenster" WIDTH300
HEIGHT400ALIGNleft VSPACE5 HSPACE8
SCROLLING"yes"gt Ersatztext, wenn Browser IFRAMES
nicht kennt lt/IFRAMEgt 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.
73
1.6 Frames

• 1.6.5 eingebettete Rahmen
• 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.

74
1.7 Formulare
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!
75
1.7 Formulare
1.7.2 Struktur Ein Formular wird begrenzt durch
die TAGs ltFORMgt ..... lt/FORMgt Das TAG form
kann Attribute aufweisen, die Aussagen zur Art
des Versandes machen 1. ltFORM
ACTION"http//www-server.host.de/cgi-bin/rueckant
wort"gt bewirkt, dass die Antwort an ein Programm
namens "rueckantwort" in dem Standard -
Programmdirectory "cgi-bin" auf dem WWW - Server
gesandt wird
76
1.7 Formulare

• 1.7.2 Struktur
• 2.
• ltFORM ACTION"mailtomarkus_at_maehlmann.org"gt
• 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?per
  sonMählmannvornameMarkusabteilungWI
• (Die Eintragungen des Formulars werden an den URL
  eines Suchstrings eine nach der anderen jeweils
  durch getrennt angehängt.)

77
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.
• AusnahmeDas 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
• ltINPUT NAME"Stundensatz" ....weitere
  Attribute.... gt
• (Zur Erinnerung Innerhalb des Namens wird Groß-
  und Kleinschreibung ausgewertet !)

78
1.7 Formulare
1.7.3 Formularelemente - Beispiele Beispiel
79
1.7 Formulare
1.7.3.1 INPUT Beispiel
80
1.7 Formulare
1.7.3.2 TEXTAREA Beispiel
81
1.7 Formulare
1.7.3.3 SELECT Beispiel
82
1.7 Formulare
1.7.3.4 OPTION Beispiel
83
1.8 Bewegt - Bilder

• 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
• ltMETA HTTP-EQUIV"Refresh" CONTENT"8 urlabs.
  oder rel. URL"gt
• .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 1ltMETA HTTP-EQUIV"Refresh"
  CONTENT"5urldatei2.html"gt
• Datei 2ltMETA HTTP-EQUIV"Refresh" CONTENT"5
  urldatei3.html"gt
• Datei 3ltMETA HTTP-EQUIV"Refresh" CONTENT"5
  urldatei4.html"gt
• Datei 4ltMETA HTTP-EQUIV"Refresh" CONTENT"5
  urldatei1.html"gt

84
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.
85
1.8 Bewegt - Bilder
1.8.2 Bildformate allgemein Erläuterungen
86
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.