HTML Basis

Werbung
1. HTML Basis
Markus Mählmann
Dipl.-Betriebswirt (BA)
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
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
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?
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
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
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.
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.
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-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 CSSKonzeptes (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.
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 BrowserHersteller 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.
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
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 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:
<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 Die Art der Sprachelemente
(Tags)
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 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:
<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 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.
•
<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 Die Tags im Einzelnen
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 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:
•
[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 Die Tags im Einzelnen
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 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
<meta name="robots" content="INDEX,NOINDEX,NOFOLLOW,FOLLOW,FOLLOW">
1.3 Die Tags im Einzelnen
1.3.1.1 Header
Die formale Syntax des robots META-Tags:
content
all
None
directives
directive
index
follow
=
=
=
=
=
=
=
all | none | directives
"ALL“
"NONE“
directive ["," directives]
index | follow
"INDEX" | "NOINDEX„
"FOLLOW" | "NOFOLLOW"
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 - Compression
Mehrere Blanks in einem Text werden immer zu einem zusammengezogen (komprimiert).
•
CR - Ignore
Im 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 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 anund untereinander gereiht, bis der Bildschirm gefüllt ist. An einem Beispiel soll dies demonstriert werden.
•
<BODY BACKGROUND="dreinull.gif">
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:
•
<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 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 RGBSystem). 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 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.
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
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 <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).
1.3 Die Tags im Einzelnen
1.3.2.1 Schriftdarstellung
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.
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:
<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
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:
<H3 ALIGN="center">Diese Überschrift wird zentriert</H3>
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:
•
•
•
•
•
<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 zu
Dieser Text wird knallrot dargestellt.
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!.
<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 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.
1.3 Die Tags im Einzelnen
1.3.2.2 Textstrukturierung
1.
2.
3.
4.
5.
Der Absatz
Absä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.
Das Zeilenende-TAG
Die Textzeile wird beendet durch <BR>, es wird in der folgenden Bildschirmzeile (ohne Zwischenraum wie
beim Absatz) weiter geschrieben.
Die Horizontale Linie
Das TAG <HR> erzeugt eine horizontale Linie.
Der Block
Ein (auch längerer) Text eingeschlossen in <BLOCKQUOTE> .......... </BLOCKQUOTE> 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 <ADDRESS> ..... </ADDRESS> eingeschlossen sind. Üblicherweise werden
auf diese Art Texte am Dokumentenende, vorzugsweise Adressen, dargestellt bzw. Überschriften (siehe
oben).
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:
•
•
•
•
<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
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.
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 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 <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 Die Tags im Einzelnen
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 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:
<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 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 <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 Die Tags im Einzelnen
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 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 GIFFormate 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 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: 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 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 <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 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: <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 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;
1.4 Tabellen
1.4.1 Einfache Tabellen
Erläuterung und Beispiele
1.4 Tabellen
1.4.2 Tabellenerweiterungen
Erläuterung und Beispiele
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 / 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.baloerrach.de/pub/mirrors/ftp.unifreiburg.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.baloerrach.de/pub/mirrors/ftp.unifreiburg.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-BitVerfahren (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.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.
1.6 Frames
1.6.1 Frames - Übersicht
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
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-EndeTAG 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
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).
FRAMEBORDER=3 macht die Rahmenränder 3 Pixel dick.
1.6 Frames
1.6.2 SET-Definition
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
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.
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
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:
<IFRAME SRC="extradatei.html" NAME="fenster" WIDTH=300 HEIGHT=400
ALIGN=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
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.
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!
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 "cgibin" 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.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
<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.
Herunterladen
Explore flashcards