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.
