Click here to load reader

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

  • View
    103

  • Download
    0

Embed Size (px)

Text of 1. HTML Basis Markus Mählmann Dipl.-Betriebswirt (BA)

  • Folie 1
  • 1. HTML Basis Markus Mhlmann Dipl.-Betriebswirt (BA)
  • Folie 2
  • 1. HTML Basis 1.1 Vorbemerkungen 1.1.1 WorldWideWeb 1.1.2 Hypertext 1.1.3 HTML (Hypertext Markup Language) 1.2 Die Art der Sprachelemente (Tags) 1.2.1 Tags allgemein 1.2.2 Elementtypen 1.2.2.1 Conteinertags 1.2.2.2 Leere Elemente 1.3 Die Tags im einzelnen 1.3.1 Dokumentenstrukturierung 1.3.1.1 Header 1.3.1.2 Body
  • Folie 3
  • 1. HTML Basis 1.3.2 Elemente des Body 1.3.2.1 Schriftdarstellung 1.3.2.2 Textstrukturierung 1.3.2.3 Listen 1.3.2.4 Bilder 1.3.2.5 Anker 1.3.2.6 Sonderzeichen 1.4 Tabellen 1.4.1 Einfache Tabellen 1.4.2 Tabellenerweiterungen 1.5 URLs (Uniform Resource Locators) 1.5.1 Vollstndige URLs 1.5.2 Relative URLs 1.5.3 URL Erweiterungen 1.5.4 URLs auf andere Server
  • Folie 4
  • 1. HTML Basis 1.5.4.1 ftp 1.5.4.2 gopher 1.5.4.3 mail 1.5.4.4 news 1.5.4.5 telnet/ssl 1.5.4.6 wais 1.6 Frames 1.6.1 bersicht 1.6.2 SET-Definition 1.6.3 Rahmenplne 1.6.4 Links 1.6.5 eingebettete Rahmen 1.7 Formulare 1.7.1 Was ist ein Formular im WWW?
  • Folie 5
  • 1. HTML Basis 1.7.2 Struktur 1.7.3 Formularelemente 1.7.3.1 INPUT 1.7.3.2 TEXTAREA 1.7.3.3 SELECT 1.7.3.4 OPTION 1.8 Bewegt Bilder 1.8.1 Die Dia-Show 1.8.2 Animated GIFs 1.8.2.1 Bildformate allgemein 1.8.2.2 Einbau von Animated GIFs
  • Folie 6
  • 1.1 Vorbemerkungen 1.1.1 WorldWideWeb (WWW, W3) Das WWW ist die z.Zt. am weitesten fortgeschrittene Entwicklung zur weltweiten Erschlieung 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 fr PCs sind: Netscape Communicator (Navigator) Microsoft Internet Explorer Es ist quasi auf allen Betriebssystemplattformen Browser-Software verfgbar, allerdings mit unterschiedlichem Leistungsvermgen. Es existieren sogar fr blinde Web-Surfer Browser mit Sprachausgabe. Browser bearbeiten nicht allein die fr das WorldWideWeb charakteristischen Hypertext-Dokumente, sondern auch Dokumente anderer Server-Typen, z.B. von: FTP-Servern Gopher-Servern News-Servern
  • Folie 7
  • 1.1 Vorbemerkungen 1.1.2 Hypertext Was sich hinter dem Begriff verbirgt, lsst sich am besten an einem Beispiel erklren: Wird in einem herkmmlichen Text, z.B. einem Zeitschriftenartikel, auf einen anderen verwiesen, so geschieht dies i.d.R. durch eine Funote und darunter entsprechende Zitate unten auf der Seite oder in einem Anhang. In einem Hypertext-Dokument wird statt dessen der zu erklrende 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.
  • Folie 8
  • 1.1 Vorbemerkungen 1.1.3 HTML (HyperText Markup Language) Die Hypertext-Beschreibungssprache HTML besteht aus Elementen (TAGS), die der Browsersoftware mitteilen, wie ein Dokument zu gestalten ist. Allerdings bestimmt letztlich der Browser das Aussehen des Dokumentes mageblich dadurch, wie er die Steuerungsinformationen auswertet. So teilt beispielsweise der Autor in einem Dokument durch Steuerungsinformation lediglich mit, dass fr eine berschrift der drittgrte zur Verfgung stehende Schrifttyp benutzt werden soll. Welche Schriftgre daraus letztendlich wird, ergibt sich oftmals allein aus den Voreinstellungen des Browsers. Die Qualitt eines Browsers ist fr 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.
  • Folie 9
  • 1.1 Vorbemerkungen 1.1.3 HTML (HyperText Markup Language) Es gibt Vorschlge (drafts), die entweder als Entwurf oder abgestimmt (standards) als sogenanntes RFC (Request for comment) verffentlich werden und an die sich dann alle Server- und Browser-Programmierer halten sollen. Die ursprngliche Sprachdefinition HTML wurde zunchst ersetzt durch HTML 2.0. Diese Version knnen alle Browser verarbeiten. Die dann folgende Version 3 (HTML 3.2 ) ist derzeit von allen Browserherstellern realisiert. Parallel dazu fhrten Browser-Hersteller zustzlich 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 groe Chancen hat, allgemeinverbindlich zu werden.W3-Konsortium In HTML 4.0 sind einige neue, mchtige Konzepte eingeflossen, die dazu fhren, dass existierende Elemente berflssig geworden sind. Das ist noch nicht im Kurs bercksichtigt, 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 hinzugefgten Gestaltungselemente wieder zu trennen. So werden beispielsweise mittels des CSS- Konzeptes (Cascading Style Sheets) Layout-Informationen in gesonderten, den Dokumenten per Link zugefgten Dateien abgelegt. Schlielich erfolgte am 24.12.1999 die vorlufig letzte Ausgabe eines Vorschlages zu HTML unter der Versionsnummer 4.01.
  • Folie 10
  • 1.1 Vorbemerkungen 1.1.3 HTML (HyperText Markup Language) HTML ist derzeit lngst nicht mehr allein die Sprache des WorldWideWeb. Immer mehr Dokumentationen werden bereits auch inhouse beispielsweise fr Prsentationen eingesetzt oder sind auf CD's zu finden bei Publikationen von Firmen- oder sonstigen Informationen. Als "Nachfolger" fr HTML steht XML zur Verfgung, so jedenfalls hatten es sich magebliche Entwickler gedacht. Allerdings spielten die Browser- Hersteller vielleicht auch wegen der Komplexitt 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.
  • Folie 11
  • 1.1 Vorbemerkungen 1.1.3 HTML (HyperText Markup Language) Literatur: Selfhtml HTML 4.0 Referenz. Stefan Mnz, Wolfgang Nefzger Gebundene Ausgabe - 893 Seiten Franzis Verlag GmbH; ISBN: 3772374034
  • Folie 12
  • 1.2 Die Art der Sprachelemente (Tags) 1.2.1 Tags allgemein Ein TAG ist wie folgt aufgebaut: einleitende spitze Klammer: < Element schlieende spitze Klammer: > Ein gltiges TAG wre z.B.: (Die Erklrung der Bedeutung des TAG erfolgt spter.) Die Elemente knnen in Gro- oder Kleinbuchstaben beschrieben werden (case-insensitive). Es sind gleichwertig und und selbst (In den Darstellungen spterer Beispiele werden die Elemente zwecks besserer bersichtlichkeit generell in Grobuchstaben wiedergegeben.) Elementen eines TAG knnen Attribute beigeordnet sein, z.B.: Zu dem Element IMG gehrt das Attribut SRC. Attribute - haben einen Attributnamen (case-insensitive), - besitzen einen zugeordneten Wert (bei Text case-sensitive), - trennen Namen und Wert mittels Gleichheitszeichen.
  • Folie 13
  • 1.2 Die Art der Sprachelemente (Tags) 1.2.2 Elemententypen Die Bezeichnung Containertyp eines Elementes wird genutzt, wenn es aus einem Start- und einem Ende-Tag gebildet wird. Ein Beispiel: dies ist die viertgrte Schrift wird auf dem Bildschirm zu: dies ist die viertgrte Schrift Merke: Das Ende-TAG unterscheidet sich vom Start-Tag allein durch den Schrgstrich......
  • Folie 14
  • 1.2 Die Art der Sprachelemente (Tags) 1.2.2.1 Containertags Containerelemente knnen ineinander geschachtelt sein:.......... (Fett und Italic) nicht jedoch so:.......... oder so:.......... (Widerspruch !)
  • Folie 15
  • 1.2 Die Art der Sprachelemente (Tags) 1.2.2.2 Leere Elemente Ein leeres Element liegt vor, wenn es allein ein Start-, nicht jedoch ein Ende-TAG gibt: 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.
  • Folie 16
  • 1.3 Die Tags im Einzelnen 1.3.1 Dokumentenstrukturierung Der Source-Code eines HTML-Dokumentes besteht aus einem Kopf (Header) und einem Krper (Body). Es wird mit zugehrigen Containertags strukturiert:...............
  • Folie 17
  • 1.3 Die Tags im Einzelnen 1.3.1.1 Header Header-Informationen finden sich nicht in der Ausgabe des Dokumentes auf dem Bildschirm wieder, sondern dienen allein zum Informationsaustausch ber die Behandlung zwischen Server und Browser. Fr einen Einfhrungskurs ist die Kenntnis von 3 Header - TAGs ausreichend........... In diesem Containerelement wird ein mglichst aussagekrftiger Titel fr das Dokument eingetragen. Dieser wird vom Browser ggf. fr die Eintragung in Bookmarks oder Hotlist verwandt. Veranlasst den Server, das Dokument fr 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 gefhrt wird. Enthlt die Adresse der Einstiegsseite fr eine aus mehreren Dateien zusammengestellte WWW-Seite
  • Folie 18
  • 1.3 Die Tags im Einzelnen 1.3.1.1 Header Weitere mgliche Informationen werden im Header mit dem -Tag abgelegt....... So kann es beispielsweise wichtig sein, das Datum festzuhalten, an dem das Dokument zuletzt gendert wurde. Dadurch kann ein Browser bei einer wiederholten Anfrage fr das gleiche Dokument verkrzt arbeiten, wenn er vor dem Holen eines kompletten Dokumentes zuerst allein per Datumsvergleich berprft, ob er die aktuelle Version vielleicht nicht schon vorliegen hat. (Durch trickreichen Einsatz von Meta-Tags ist es sogar mglich, in einem Dokument so etwas wie eine Dia-Show ablaufen zu lassen - Informationen darber finden sich in einem spteren Kapitel oder in den Literaturhinweisen.)
  • Folie 19
  • 1.3 Die Tags im Einzelnen 1.3.1.1 Header Der Inhalt der Robot META-Tags beinhaltet durch Komma getrennte Direktiven fr 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
  • Folie 20
  • 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:
  • Folie 21
  • 1.3 Die Tags im Einzelnen 1.3.1.1 Header Wichtig: Der name robots und der content sind case-insensitive Die Angabe widersprchlicher Werte muss vermieden werden
  • Folie 22
  • 1.3 Die Tags im Einzelnen 1.3.1.1 Header Die formale Syntax des robots META-Tags: content=all | none | directives all="ALL None="NONE directives=directive ["," directives] directive=index | follow index="INDEX" | "NOINDEX follow="FOLLOW" | "NOFOLLOW"
  • Folie 23
  • 1.3 Die Tags im Einzelnen 1.3.1.2 Body Es sei hier noch einmal erwhnt, dass die Darstellung von TAGs im Dokumentenbody oftmals von den Voreinstellungen des Browsers abhngt. 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 Wagenrcklauf und Zeilenvorschub - Kommandos werden ignoriert. Leerzeilen - Unterdrckung Tabulatoren ohne Funktion Dadurch knnen die brigens reinen ASCII - Sourcecodes bersichtlich aufgebaut werden, ohne da diese Hilfsstruktur in dem Bildschirmdokument dargestellt wird.
  • Folie 24
  • 1.3 Die Tags im Einzelnen 1.3.1.2 Body Der Hintergrund eines Dokumentes wird vom Browser in der Regel grau dargestellt. Durch Zufgen von Attributen im Start-TAG des Body kann eine andere Darstellungsform gewhlt werden: Der komplette Hintergrund kann aus einem Bild gebildet, bzw. zusammengesetzt werden. Letzteres ist der Regelfall. Eine eher kleine (wg. der geringeren bertragungszeit) Graphik wird auf dem solange an- und untereinander gereiht, bis der Bildschirm gefllt ist. An einem Beispiel soll dies demonstriert werden.
  • Folie 25
  • 1.3 Die Tags im Einzelnen 1.3.1.2 Body Abweichend vom Grau kann fr den Hintergrund eine andere Farbe definiert werden. Mit dem Attribut BGCOLOR im Body-TAG wird diese Definition vorgenommen: Diese Angabe erzeugt einen roten Hintergrund. Es liegt nahe, auch Mglichkeiten anzubieten, die Farbe der Texte einem genderten Hintergrund angepat darzustellen. Dazu werden von Browsern dem Body-TAG 4 weitere mgliche Attribute zugestanden: TEXT="rrggbb" (Farbvorgabe normaler Text) LINK="rrggbb" (Farbvorgabe fr Links innerhalb des Standardtextes) VLINK="rrggbb" (Farbvorgabe fr bereits aufgerufene -visited- Links) ALINK="rrggbb" (Farbvorgabe fr gerade angewhlte -active- Links)
  • Folie 26
  • 1.3 Die Tags im Einzelnen 1.3.1.2 Body Farbcodes und hilfsmittel zur Farbwahl (ref. Prof. Staib / Zahlensysteme / 27.03.2001) Alle auf einem Bildschirm darstellbaren Farben werden aus drei "Grundfarben" zusammengesetzt. Grundfarben sind im Falle der Farberzeugung am Bildschirm die Farben rot, grn und blau (das sogenannte RGB- System). Durch Variation der einzelnen Farbanteile zueinander entstehen ber das menschliche Auge im Gehirn auch variierende Farbeindrcke, die von Mensch zu Mensch in gradueller Stufung unterschiedlich empfunden werden knnen. Man denke (als Extremfall) an das Problem der sogenannten Farbblindheit (Rot-Grn-Schwche). Fr die Darstellung der Variation der Farbanteile untereinander und damit auch des daraus resultierenden Gesamtbildes wird in der EDV (u.a.) die Codierung durch Zahlen gewhlt, was kaum verwundern kann. Jedem der drei Grundfarben wird fr 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.
  • Folie 27
  • 1.3 Die Tags im Einzelnen 1.3.1.2 Body Farbcodes und hilfsmittel zur Farbwahl (ref. Prof. Staib / Zahlensysteme / 27.03.2001) Einige beispielhafte Werte zur Verdeutlichung des Systemes: #FF0000 = das intensivst mgliche 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 gewnschte Ergebnis bringen. Es werden im WorldWideWeb dazu jedoch verschiedene Hilfsmittel angeboten. Eine (unvollstndige) Auswahl, wobei auch Kombinationen von Hintergrund und Schriftfarben ermittelt werden knnen. Wie solch ein Programm arbeitet, kann hier ausprobiert werden. Hilfsmittelausprobiert
  • Folie 28
  • 1.3 Die Tags im Einzelnen 1.3.2 Elemente des Body Die im Body eines Dokumentes verwendbaren TAGs sollen zwecks besserer Merkbarkeit in Gruppen eingeteilt behandelt werden. Die Gruppenbildung fasst TAGs zusammen nach dem Verwendungszweck, wie z.B.: Schriftdarstellung Textstrukturierung Listen Bilder (Images) Anker Sonderzeichen
  • Folie 29
  • 1.3 Die Tags im Einzelnen 1.3.2.1 Schriftdarstellung Wiederholung: Schriftgren und Schrifttypen werden in der Konfiguration des Browsers festgelegt! Der Dokumentenersteller kann allein festlegen, ob Textpassagen in Normalschrift in einer von 6 berschriftgren 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....... Damit wird der Browser angewiesen, die markierte Stelle immer in Fettschrift darzustellen. Zwar bewirkt die logische Hervorhebung durch...... 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 fr das Tag STRONG ndern kann (z.B. stattdessen farbig).
  • Folie 30
  • 1.3 Die Tags im Einzelnen 1.3.2.1 Schriftdarstellung Jede nicht besonders markierte Textstelle wird vom Browser in Normalschrift dargestellt. Es bedeuten: So wird berschriftsgre eins erzeugt. So wird berschriftsgre zwei erzeugt. So wird berschriftsgre drei erzeugt. So wird berschriftsgre vier erzeugt. So wird berschriftsgre fnf erzeugt. So wird berschriftsgre sechs erzeugt. So entsteht Normalschrift So entsteht eine fette Schrift (Bold). So entsteht eine kursive Schrift. So entsteht eine quidistante (Schreibmaschinen-)Schrift. Dazu nun die vorstehenden Beispiele im Bild. Sollten die Schriftgren nicht abgestuft oder wie genannt dargestellt werden, ist Ihr Browser nicht passend konfiguriert.Bild.
  • Folie 31
  • 1.3 Die Tags im Einzelnen 1.3.2.1 Schriftdarstellung Eine andere Art, Schriftgren zu beeinflussen, funktioniert wie folgt: Es werden 7 Schriftarten / -gren im Browser definiert. Die "Normalschrift" entspricht dabei der Gre 3. Ein Umschalten zwischen diesen erfolgt im Browser dann durch das TAG:..... fr eine absolute Angabe der Schriftgre..... fr eine Erhhung der Schriftgre um zwei Stufen ndert die "Normalgre" auf den Fonttyp Nr. 2
  • Folie 32
  • 1.3 Die Tags im Einzelnen 1.3.2.1 Schriftdarstellung berschriften knnen durch das Attribut ALIGN in der Zeile ausgerichtet werden. Die Werte knnen sein: ALIGN="left" fr linksbndig, ALIGN="center" fr zentriert, ALIGN="right" fr rechtsbndig. Eine berschrift der Gre 3 wrde zentriert dargestellt durch: Diese berschrift wird zentriert
  • Folie 33
  • 1.3 Die Tags im Einzelnen 1.3.2.1 Schriftdarstellung Es wurde die Einfhrung weiterer TAGs zur Textgestaltung geplant und bei einigen Browsern dann auch realisiert. Dazu einige wenige Beispiele:..... unterstrichen (Underline)..... durchgestrichen (Strike through)..... als Index (SUBscript)..... als Exponenten (SUPerscript)..... blinkend (Achtung: gerne genutzter schlechter Stil) Zwecks vollstndiger Auflistung kann an dieser Stelle nur auf die einschlgige Literatur verwiesen werden. Soll ein dort aufgefhrtes TAG eingesetzt werden, empfiehlt es sich jeweils vorher mit dem oder den gngigen Browsern Tests durchzufhren. Die Farbe der Schrift kann ebenfalls verndert werden. Dazu ein Beispiel: "Dieser Text wird knallrot dargestellt. wird zu Dieser Text wird knallrot dargestellt.
  • Folie 34
  • 1.3 Die Tags im Einzelnen 1.3.2.1 Schriftdarstellung Letztlich knnen auch die Schriftarten gewhlt werden. Voraussetzung ist allerdings, dass das jeweilige Betriebssystem die gewnschten Schriftarten auch kennt!. 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 verfgbar 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. fontasy.de
  • Folie 35
  • 1.3 Die Tags im Einzelnen 1.3.2.2 Textstrukturierung Auf Grund der Blank-Compression beim Bildaufbau aus dem Source-Code, des Ignorierens von Wagenrcklauf / Zeilenvorschub, wie sie beim Erstellen von Dokumenten mittels Editor erzeugt werden, sind TAGs erforderlich, die eine Strukturierung eines Textes ermglichen.
  • Folie 36
  • 1.3 Die Tags im Einzelnen 1.3.2.2 Textstrukturierung 1.Der Absatz Abstze werden erzeugt durch Ein Absatz kann abgeschlossen werden durch, was jedoch nicht erforderlich ist. Abstze werden im Text automatisch erzeugt, sobald Schriftgrendefinitionen ( bis ) folgen oder (im folgenden besprochene) Listelemente. Mehrere werden ignoriert und zu einem Absatz zusammengezogen. 2.Das Zeilenende-TAG Die Textzeile wird beendet durch, es wird in der folgenden Bildschirmzeile (ohne Zwischenraum wie beim Absatz) weiter geschrieben. 3.Die Horizontale Linie Das TAG erzeugt eine horizontale Linie. 4.Der Block Ein (auch lngerer) Text eingeschlossen in.......... wird als ein Block mit einer Einrckung am linken und rechten Rand dargestellt. 5.Die "Adresse" Auf eine besondere Art (kursiv, blockquote - Browser-abhngig) werden Informationen dargestellt die mittels Container - Element..... eingeschlossen sind. blicherweise werden auf diese Art Texte am Dokumentenende, vorzugsweise Adressen, dargestellt bzw. berschriften (siehe oben).
  • Folie 37
  • 1.3 Die Tags im Einzelnen 1.3.2.2 Textstrukturierung Vorstehende Strukturierungs-TAGs erfahren in den Weiterentwicklungen leistungsverstrkende Ergnzungen. So kann dem Absatz-TAG ein Attribut zugefgt werden, das die Ausrichtung des folgenden Textabsatzes bestimmt. Es existieren die Mglichkeiten: voreingestellt; ntig fr Rckstellung auf "Normalfall" Ausrichtung am rechten Zeilenrand Ausrichtung zentriert mit linkem und rechten Randausgleich Um Texte oder Bilder auszurichten werden die Bereiche mit Start- und Ende-TAG eingegrenzt, z.B. fr die Zentrierung: Diese Zeilen sollen zentriert dargestellt werden. Beispiel
  • Folie 38
  • 1.3 Die Tags im Einzelnen 1.3.2.2 Textstrukturierung Horizontale Linien knnen 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 verfgbaren Bildschirmbreite einnimmt (zentriert) und so dick wie auch ohne Angabe ausgefhrt wird. Angaben fr SIZE von 1 ergeben eine "halbstarke", Angaben grer 2 dickere Linien.
  • Folie 39
  • 1.3 Die Tags im Einzelnen 1.3.2.3 Listen Es existieren verschiedene Listenelemente, von denen hier 3 behandelt werden sollen: numerierte Liste nicht numerierte Liste Definitionsliste Jede der Listen wird eingeleitet von einem speziellen Start - TAG. Es folgen die einzelnen Listenpositionen jeweils eingeleitet von dem TAG. Eine Listenposition wird abgeschlossen durch die nchste Listenposition ( ) oder das Listen - Ende - TAG. Innerhalb einer Listenposition sind TAGs wie oder erlaubt. Weitere Listen, wie Directory - Listung oder Menue - Listung werden von zu wenigen Browsern ausgewerten, so da sich eine Beschftigung damit nicht lohnt. Die Darstellung in Listenform bedeutet i.d.R. das Arbeiten mit Einrckungen. Das funktioniert nicht alleine fr Textpassagen, sondern auch beispielsweise fr Bilder. Mehrfacheinrckungen erreicht man durch Verschachtelung von Listen ineinander, wie an den folgenden Beispielen verdeutlicht werden soll. Beispielen
  • Folie 40
  • 1.3 Die Tags im Einzelnen 1.3.2.3 Listen Numerierte Listen Das Containerelement fr die numerierte Liste (ordered list) lautet:................................... Ein Beispiel: Dispatching, Beratung Hardware - Bereitstellung und Wartung Pflege der Betriebssystemsoftware Betreuung von Anwendersoftware.
  • Folie 41
  • 1.3 Die Tags im Einzelnen 1.3.2.3 Listen Nicht nummerierte Listen (Bullet-Listen) Das Containerelement fr die nicht - numerierte Liste (unordered list) lautet:................................... Das Beispiel: Dispatching, Beratung Hardware - Bereitstellung und Wartung Pflege der Betriebssystemsoftware Betreuung von Anwendersoftware.
  • Folie 42
  • 1.3 Die Tags im Einzelnen 1.3.2.3 Listen Definitionslisten / Stichwortverzeichnisse Die Definitionslisten knnen noch in einer Sonderform genutzt werden fr die Untersttzung einer Art von Stichwortverzeichnissen. Innerhalb der Liste werden dabei statt des oder neben dem - Element zwei TAGs mit einer Zusatzfunktion genutzt, und. Das Element markiert dabei das Stichwort durch gesonderte Hervorhebung wie beispielsweise Wege zur Weisheit Oder Wege zum Glck
  • Folie 43
  • 1.3 Die Tags im Einzelnen 1.3.2.3 Listen Definitionslisten / Stichwortverzeichnisse Das Element rckt die zugehrige Erklrung dann rechts ein..................................... Das Beispiel: Dispatching, Beratung User - Anmeldungen knnen von 8.oo bis 12.oo Uhr vorgenommen werden. Zahlungen auf Druckkontigente von 14.oo bis 16.oo Uhr Hardware und Maschinensaal Alle Fragen zur Hardware sind an die Abteilung Wesenberg zu richten.
  • Folie 44
  • 1.3 Die Tags im Einzelnen 1.3.2.4 Bilder Bilder (Images) werden in der EDV in den unterschiedlichsten Speicherformaten erzeugt. Nur wenige sind jedoch so weit verbreitet, da sie von (nahezu) allen Browsern dargestellt werden knnen. Das GIF- Formate verstehen wohl alle graphikfhigen Browser. Das TAG zum Einfgen lautet: Zu dem TAG ist mindestens ein Attribut zwingend erforderlich, nmlich die Angabe, welches Bild dargestellt werden soll. Das Attribut hat den Namen SRC. Dazu ein Beispiel: fhrt zu:
  • Folie 45
  • 1.3 Die Tags im Einzelnen 1.3.2.4 Bilder Ein weiteres Attribut legt fest, in welcher Position Schrift neben dem Bild positioniert wird. Es gibt dazu drei Mglichkeiten: ALIGN=TOP oder ALIGN=MIDDLE oder ALIGN=BOTTOM, wobei letzteres der Voreinstellung entspricht. Ein weiteres Attribut trgt den Namen ALT. Die Eingabe ALT="[Thermometer]" bewirkt, da nicht graphikfhige Browser statt des Bildes den ALTernativen Text ausgeben. Beispiel
  • Folie 46
  • 1.3 Die Tags im Einzelnen 1.3.2.5 Anker Mit dem Begriff Anker wird in HTML einmal die Position innerhalb eines Dokumentes bezeichnet, von der aus ein Link (Verweis) auf ein anderes Dokument erfolgt. Mit Position sind in der Regel Worte, Textpassagen oder Bilder gemeint. Es gibt auch noch andersgeartete Bestandteile von Dokumenten, deren Erklrung an dieser Stelle aber fr das Verstndnis eher negativ sein drfte. Ein Anker wird bezeichnet durch das Containerelement........... 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 trgt den Namen HREF und hat als Wert die Angabe der Datei, in der sich das Zieldokument befindet.
  • Folie 47
  • 1.3 Die Tags im Einzelnen 1.3.2.5 AnkerBeispielBeispiel Man stelle sich vor, ein langer, in verschiedene Abschnitte gegliederter Text, lge als HTML - Dokument vor. Verweise auf dieses Dokument zu einem beispielsweise im vorletzten Abschnitt behandelten Thema wrden vom Leser eine ziemliche Bltterei 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 Indianerstmme. Die Irokesen waren der mchtigste... soll ein Verweis auf die Irokesen ermglicht werden. Die Irokesen bekommen einen Anker: Die Irokesen Im Ursprungstext bleibt diese Namenszuordnung des willkrlich gewhlten 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:...Absprungstelle... wird zu: Im Link wird hinter den Dateinamen mittels Nummernkreuz # abgetrennt, der gewhlte Name des Ankers angegeben.
  • Folie 48
  • 1.3 Die Tags im Einzelnen 1.3.2.5 Sonderzeichen Wie leider sehr oft in der EDV bedrfen 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 & (kaufmnnischen Und) und abgeschlossen mit einem Semikolon. Dazwischen angesiedelt wird entweder ein Krzel, welches das darzustellende Zeichen beschreibt, z.B. Auml fr das (A Umlaut) oder (seltener) die Nummer innerhalb der Codetabelle hinter einem einleitenden Nummernkreuz (#228). Die gngigen Ersatzdarstellungen der Deutschen Sprache: = oder = oder = oder = oder = oder = oder = oder
  • Folie 49
  • 1.4 Tabellen 1.4.1 Einfache Tabellen Erluterung und Beispiele
  • Folie 50
  • 1.4.2 Tabellenerweiterungen Erluterung und Beispiele 1.4 Tabellen
  • Folie 51
  • 1.5.1 Vollstndige URLs URLs dienen in HTML dazu, die Adressen in einer vereinheitlichten Form (uniform) darzustellen, so wie sie z.B. fr Links bentigt werden. Der prinzipielle Aufbau: Art des Dokumentes :// kompletter Rechnername / Pfad / Dateiname#Anker 1.5 URLs
  • Folie 52
  • 1.5.1 Vollstndige URLs Die Bestandteile im einzelnen: Art des Dokumentes Browser knnen 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 Schrgstrich) 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
  • Folie 53
  • 1.5.2 Relative URLs Eine weitere Bezeichnung dafr 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. wird bei Datei im gleichen Directory zu: oder bei Datei im Paralleldirectory zu: Zu den URLs noch einige allgemeine Bemerkungen: Achtung, nur ASCII - Zeichen bei den Namensangaben verwenden ! 8-Bit - Sonderzeichen werden u.U. verstmmelt. Statt des vollstndigen Rechnernamens kann auch die IP - Adresse eingesetzt werden. Man sollte diese Mglichkeit jedoch meiden. Es wird hier nur erwhnt, weil es einem beim Web - Surfen begegnen kann. 1.5 URLs
  • Folie 54
  • 1.5.3 URL Erweiterungen URLs knnen erweitert werden um einige wenige "Anhngsel", die an dieser Stelle lediglich kurz erwhnt werden sollen. So ist es beispielsweise mglich, 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.asphttp://193.196.182.145/seiten/lst.asp? Ein Seite namens lst.asp sendet eine Anfrage an den Browser, die nach Eingabe eines Kategoriebegriffs mit Rcksendung folgenden URLs beantwortet wrde: http://193.196.182.145/seiten/lst.asp?typ=1 1.5 URLs
  • Folie 55
  • 1.5.4 URLs auf andere Server Wie bereits erwhnt, knnen Browser auch Nicht - HTML - Dokumente bearbeiten. Zuerst eine bersicht, um welche Dokumententypen es sich handelt, bevor Beispiele die Funktionsweisen aufzeigen. Untersttzte Protokolle (alphabetisch): ftp gopher http mailto news telnet / rlogin / tn3270 wais 1.5 URLs
  • Folie 56
  • 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
  • Folie 57
  • 1.5.4.1 ftpBeispielBeispiel 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 fr den Dokumententyp, die Rechneradressen, Pfad und Namen der zu holenden Datei. Der Link ist dann wie folgt aufgebaut: FTP Eine Besonderheit gilt es noch zu erwhnen. Dateien knnen je nach Bedarf mittels FTP - Protokoll im 7-Bit- Verfahren (z.B. ASCII-Texte) wie auch als Binrdateien (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) = binr). 1.5 URLs
  • Folie 58
  • 1.5.4.2 gopher Gopher ist ein Informationssystem, das vor dem Siegeszug des WWW weltweit verwendet wurde. Gopher ermglichte den Zugriff auf Informationen, die auf vielen verschiedenen Computern gespeichert waren, in einer hierarchischen Struktur von Directories (Mens) und Files (Informationen). Der Zugriff erfolgte nach dem Prinzip von Server und Client ber das Internet mit dem Gopher-Protokoll. Gopher wurde an der Universitt von Minnesota entwickelt. Der Name kommt von der Beutelratte, dem "Nationaltier" und Spitznamen von Minnesota. Gopher - Protokoll eine Zeile mit gewnschten Dokument wird geschickt Dokument oder Liste von Dokumenten kommt zurck Bei Gopher+ auch weitere Attribute (Filetyp, Autor,...) (von WWW-Browsern praktisch nicht untersttzt ) ASK Scripts fr Eingaben (max 1 Schirm) 1.5 URLs
  • Folie 59
  • 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 ntig sein kann, hinter dem Rechnernamen abgetrennt durch Doppelpunkt eine Portadresse anzugeben, wenn sie vom Standardwert (bei Gopher 70) abweicht. Das ergibt dann folgendes Bild fr den Link:.......... 1.5 URLs
  • Folie 60
  • 1.5.4.3 mail Es ist in einem Dokument mglich, 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: Senden Sie mir eine Mail Beispiel 1.5 URLs
  • Folie 61
  • 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 Schrgstriche entfallen (analog mailto). Ein Beispiel fr den Aufruf einer Newsgroup aus einem HTML - Dokument heraus:... sofern Sie sich fr Bootsbau interessieren. Eine Auflistung aller am angewhlten News - server verfgbaren Newsgroups erhlt 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 fr den belwue): news:news.belwue.de:* 1.5 URLs
  • Folie 62
  • 1.5.4.5 telnet/rlogin/ssl Aus dem WWW heraus sind Remote - Login - Sitzungen zu entfernten Rechnern mglich. Das dazu verwendete Protokoll trgt 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: Remotehost Beispiel 1 Beispiel 2 1.5 URLs
  • Folie 63
  • 1.5.4.6 wais Wide Area Information Servers beinhalten i.d.R. Indices von Datenbestnden, an die Suchanfragen gestellt werden knnen. Diese Anfragen knnen 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 fr einen Suchstring. Der URL wird dadurch erweitert zu wais://waisserver.de/Datenbank?Suchstring 1.5 URLs
  • Folie 64
  • 1.6.1 Frames - bersicht Mittels Frames kann der vom Browser erzeugte Bildschirm in mehrere Segmente aufgeteilt werden, die wahlweise statisch oder mit vernderlichem Inhalt bestckt sind und aus denen heraus andere Seiten aufgerufen und in ein ausgewhltes Segment gestellt werden knnen. Frames erffnen damit ganz neue Mglichkeiten, Informationen aufzubereiten. So kann beispielsweise in einem Segment ein Text erscheinen, whrend in einem zweiten parallel dazu ein Video abluft. Dazu ein Beipiel, allerdings nicht mit Video, sondern mit Bildabfolgen (Effekt Diashow). Es knnen fr 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.Beipiel 1.6 Frames
  • Folie 65
  • 1.6.1 Frames - bersicht Der Aufbau einer Frames erzeugenden Seite weicht von der bisher genutzten Struktur wie folgt ab: Seite mit Frames..... Frame - Definitionen..... Die Seite enthlt keinen BODY ! Die beim FRAMESET - TAG mglichen Attribute legen die einzelnen Rahmen fest. Bei den Frame-Definitionen wird bestimmt, welche Inhalte in die einzelnen Rahmen gelangen. 1.6 Frames
  • Folie 66
  • 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 Fhigkeiten nutzt. Aufgrund eines einfachen Tricks kann man diese Vorabfrage jedoch sparen, indem hinter das FRAME-Ende- TAG noch ein BODY gesetzt wird, der eine FRAME-lose Seite enthlt. Diese wertet dann der einfache Browser aus, der den FRAMESET ignoriert hat. Dasselbe wird erreicht, wenn in obigem Beispiel ein Bereich...... Inhalt der framelosen Seite............................................ angefgt wird. Allerdings gibt es bei der Auswertung durch die Netscape-Browser unterhalb Versionen 4.x von den Standards abweichende Effekte, so dass derzeit die Mglichkeit vorzuziehen ist, eine rahmenlose Seite mittels BODY-TAG zu erzeugen. 1.6 Frames
  • Folie 67
  • 1.6.2 SET-Definition Zum FRAMESET-TAG knnen die folgenden Attribute verwandt werden (Beispiele): COLS="25%, 75%" teilt die zur Verfgung stehende Flche in zwei Spalten mit einer Breite von 25 Prozent (links) und 75 Prozent (rechts) der gesamten Bildschirmbreite. ROWS="30%, 70%" teilt die zur Verfgung stehende Flche in zwei waagerechte Streifen mit einer Hhe von 30 Prozent (oben) und 70 Prozent (unten). FRAMEBORDER=3 macht die Rahmenrnder 3 Pixel dick. 1.6 Frames
  • Folie 68
  • 1.6.2 SET-Definition FRAMESETs knnen ineinander geschachtelt werden: (2 Spalten im Breitenverhltnis 1:3)...... FRAME-Definition der linken Spalte...... (unterteilt rechte Spalte in zwei Felder)...... FRAME-Definition rechte Spalte oberes Feld...... FRAME-Definition rechte Spalte unteres Feld (schliet SET fr die waagerechten Felder) (schliet SET fr die Spalten) Daraus ergibt sich folgendes Bild, sofern fr die drei Felder Definitionen vorgenommen wurden, die ohne Vorgabe allein den Hintergrund farbig unterlegen.Bild 1.6 Frames
  • Folie 69
  • 1.6.2 SET-Definition Die Angaben fr die Aufteilung des Bildschirmes knnen auch in Pixel fest vorgegeben werden. Aber Achtung, die Festlegung mittels Pixel fr 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 Verfgung stehenden Bildschirmhhe nach Abzug von 100 Pixel oben und 80 Pixel unten der Rest fr das mittlere Feld genommen wird. 1.6 Frames
  • Folie 70
  • 1.6.3 Rahmenplne Wenn die Aufteilung der Seite mittels FRAMESET-TAG erfolgt ist, mssen die verschiedenen Felder mit Inhalt gefllt werden, wozu das TAG FRAMES verwendet wird. Es handelt sich bei diesem TAG um ein leeres Element; ein zugehriges Ende-TAG ist mglich aber nicht erforderlich. Per Attribut werden einem FRAMES-TAG Angaben zugeordnet wie: NAME="frei_whlbar" Die Information muss sein, um in einem Link angeben zu knnen, in welchem Rahmen das angeklickte Dokument geladen werden soll. Ein Link aus einem Rahmen heraus fhrt 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 verndern, was aber durchaus nicht immer wnschenswert ist und mit diesem Attribut verhindert werden kann. BORDER=nn legt die Strke der Rahmen in Pixel fest. FRAMEBORDER=0 fhrt dazu, dass die Rahmenstrke auf Null Pixel reduziert wird, d.h. die Rahmen zwischen den Teilflchen nicht erscheinen. Durch die Angabe einer Eins (default-Wert) wird ein Rahmen sichtbar. Achtung: ltere Browser haben damit u.U. Schwierigkeiten. Zustzlich ist daher (abweichend vom Standard) anzugeben: BORDER=0 Im Microsoft Explorer reicht das jedoch auch noch nicht aus. Es mu zustzlich 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 proprietr (Netscape und Microsoft sind dabei). 1.6 Frames
  • Folie 71
  • 1.6.4 Links Wie bereits erwhnt, 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:, wobei "main" der dem Frame zugeordnete Name ist. Nun gibt es noch einige besondere "Zielangaben", die als Attributwerte fr das TARGET-TAG genommen werden knnen und dazu dienen, Rahmenaufteilungen des Bildschirmes zu beenden. Diese Werte beginnen mit einem Unterstrich. "_top" fhrt dazu, dass das aufgerufene Dokument den gesamten Platz einnimmt und die Vorseite ersetzt. "_blank" erzeugt ebenfalls den Aufbau einer neuen, aber zustzlichen, 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 sptestens in der 3.Stufe die Grenze zur Unleserlichkeit berschritten. 1.6 Frames
  • Folie 72
  • 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 irrefhrend. Es handelt sich vielmehr um fest umrissene Bereiche innerhalb eines Dokumentes, deren Inhalte durch Anklicken eines Links ausgetauscht werden knnen., am ehesten vergleichbar einem Fenster in einer Seite. Ein Beispiel: Ersatztext, wenn Browser IFRAMES nicht kennt Wird von einem Anker aus TARGET="fenster" angegeben, so wird das aufgerufene Dokument in den 300x400 Pixel groen Bereich auf der Seite eingefgt. Ist es grer als die zur Verfgung stehende Flche, so werden Scrollbalken eingefgt, es sei denn dies wre durch die Angabe SCROLLING="no" untersagt. 1.6 Frames
  • Folie 73
  • 1.6.5 eingebettete Rahmen Die verbleibenden Attribute bedeuten: ALIGN legt fest, ob der Fensterbereich links- oder rechtsbndig ausgerichtet wird, der Text also links oder rechts vom Fenster verluft, VSPACE, wie viel Platz in Pixel zwischen Fenster und Text links oder rechts frei bleibt, HSPACE, wie viel Platz zwischen Fenster und Text oben und unten freigelassen wird. 1.6 Frames
  • Folie 74
  • 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 fllen und diese dann per Mausklick an den Server zurckzusenden. 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 Wnschen zu gelangen, fllt der Nutzer ein "Formular" aus. Wird ein Button "Absenden " gedrckt, so wird der Inhalt des gesamten Formulars an den Browser abgeschickt. Diese Art der Rckmeldung macht den groen Stellenwert des WWW auch fr kommerzielle Anbieter von Waren oder Dienstleistungen aus. Lsst sich doch damit an jede Produktbeschreibung, an jedes Angebot gleich das Bestellformular anhngen! 1.7 Formulare
  • Folie 75
  • 1.7.2 Struktur Ein Formular wird begrenzt durch die TAGs:..... Das TAG form kann Attribute aufweisen, die Aussagen zur Art des Versandes machen: 1. bewirkt, dass die Antwort an ein Programm namens "rueckantwort" in dem Standard - Programmdirectory "cgi- bin" auf dem WWW - Server gesandt wird 1.7 Formulare
  • Folie 76
  • 1.7.2 Struktur 2. 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 Beschftigung damit wrde 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=Mhlmann&vorname=Markus&abteilung=WI (Die Eintragungen des Formulars werden an den URL eines Suchstrings eine nach der anderen jeweils durch & getrennt angehngt.) 1.7 Formulare
  • Folie 77
  • 1.7.3 Formularelemente Es stehen in Formulare drei verschiedene Elemente zur Verfgung: INPUT erzeugt ein Eingabefeld SELECT erzeugt ein Pull - Down - Men TEXTAREA erzeugt ein Feld fr Flietext Diesen Elementen ist gemeinsam, dass sie alle zustzlich unterschiedliche Attribute bentigen, die bei der Erklrung 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: (Zur Erinnerung: Innerhalb des Namens wird Gro- und Kleinschreibung ausgewertet !) 1.7 Formulare
  • Folie 78
  • 1.7.3 Formularelemente - Beispiele Beispiel 1.7 Formulare
  • Folie 79
  • 1.7.3.1 INPUT Beispiel 1.7 Formulare
  • Folie 80
  • 1.7.3.2 TEXTAREA Beispiel 1.7 Formulare
  • Folie 81
  • 1.7.3.3 SELECT Beispiel 1.7 Formulare
  • Folie 82
  • 1.7.3.4 OPTION Beispiel 1.7 Formulare
  • Folie 83
  • 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 gewnschten und definierten Zeitraum anzuzeigen und dann ein Folgeseite ablaufen zu lassen. Dazu hier ein Beispiel. Das dies bewirkende TAG lautet samt dreier AttributeBeispiel.Die Angabe "Refresh" bewirkt den Bildwechsel; der Wert zum CONTENT stellt die Zeit in Sekunden dar bis zum Bildwechsel und schlielich wird unter URL die Fundstelle des Folgebildes angegeben. Achtung: Man beachte die etwas "ungewhnliche" Stellung der Anfhrungszeichen ! Bei einem Zyklus von 4 Dateien she des jeweilige META - TAG wie folgt aus: Datei 1 Datei 2 Datei 3 Datei 4 1.8 Bewegt - Bilder
  • Folie 84
  • 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 Verstndlichkeit der Materie erfolgt zuerst ein Kapitel ber die Bildverarbeitung im WWW allgemein. Im Anschluss daran wird die Mglichkeit aufgezeigt, solche bewegten Bilder selbst zu erzeugen, aus Sammlungen zu bernehmen und in die WWW-Seiten einzubauen. 1.8 Bewegt - Bilder
  • Folie 85
  • 1.8.2 Bildformate allgemein Erluterungen 1.8 Bewegt - Bilder
  • Folie 86
  • 1.8.2 Einbau von Animated GIFs Die einfachste Mglichkeit besteht darin, aus im Netz vorhandenen Sammlungen Animated GIFs zu kopieren und als Bild mit dem Image-TAG einzubauen. Eine gute Einstiegsadresse fr das Auffinden von Sammlungen bietet die Firma "ZAMPANO""ZAMPANO" Um eigene bewegte Bilder a la Daumenkino-Effekt einzusetzen bentigt man zuerst einmal die Einzelbilder der gesamten Bildserie. Dabei sollten die Einzelbilder alle gleich gro und aus denselben Farbtnen aufgebaut sein. Dann allerdings bentigt der Anwender ein spezielles Programm, das in der Lage ist, die Einzelbilder einer Bildfolge in einer Datei zusammen zu fassen und mit den ntigen Steuerungsinformationen zu versehen.Unter Windows steht dafr ein Programm namens GIF Construction Set zur Verfgung. Fr UNIX-Maschinen und MACs sind hnliche Programme im Angebot.GIF Construction Set Gesteuert werden knnen 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 ausgelst werden, ist der Bedienungsanleitung des erzeugenden Programms zu entnehmen. 1.8 Bewegt - Bilder