Post on 30-Apr-2020
1
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
1
InternetDefinition
Dienste im Internet
Domain-Adressierung
Homepage an der HS Karlsruhe
HTML
Protokolle im Internet
Sicherheitsrelevante Einstellungen
Historie, Internetnutzer, Browseranteile
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
2
Definition
Das Internet dient dem freien weltweiten Informationsverkehr seiner Nutzer durch vielfältigen Datenaustausch zwischen Rechnern aller
Größenklassen, Betriebssysteme und Leistungsklassen.
Ein derartiger Datenaustausch war bis zur Etablierung des Internets,also in den 60-iger, 70-iger und 80-iger Jahren undenkbar.
Grund:Kein Interesse der RechnerherstellerFehlende StandardsHeterogenität
des Signalverkehrsder Steckerder Datenrepräsentation
…
2
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
3
Definition
Das Internet ist ein Medium zum Datenaustausch und NICHT z.B. das World Wide Web.
Das ist nur ein Dienst von vielen! Und es wird häufig damit verwechselt.
Was für Dienste gibt es?
?
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
4
Dienste im Internet
Übersicht über die wichtigsten Dienste Im Internet:
3
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
5
Dienste im Internet
Email:Elektronische Post. Adressierung:
<user>@<domain-address>
MIME –Protokoll (multipurpose internet mail extension): TexteHTMLBinärdateien als Anhänge, z.B. Bilder, Programme usw.
Vorsicht:Unverschlüsselte Emails sind für alle beteiligten Zwischen-Server lesbar!Es gibt entsprechende Filterprogramme. Die NSA liest sowieso mit.
Keine sensiblen Daten wie z.B. Kreditkarten-Nummer Bankverbindung, …
via unverschlüsselte Email verschicken.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
6
Dienste im Internet
Verwaltung der Mails durch Mailserver.Zugang auch remote möglich. Protokolle:
POP3: Ein Postfach und Herunterladen (mit und ohne Löschung) auf den MailclientVerwaltung lokal durch den Mailclient
IMAP: Ein Postfach mit Unterordnern Gestaffeltes Herunterladen möglich (Kopf, Mail, Anhang)Verwaltung durch den MailserverZentrale Datenhaltung erlaubt die Verwaltung durch mehrere Clients.
Mailclients: Thunderbird, Outlook-Express, Outlook, Pegasus Mail, Eudora, …
Alternative:Webbasierte Mailverwaltung (Webmail) eines Internetserviceproviders (ISP),
wie z.B. GMX, Web.de, ...
4
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
7
Dienste im Internet
FTP:FTP (file transfer protocol): systemunabhängiger Filetransfer und -verwaltung
Erfordert entweder Account und Einloggen oder der Host gestattet anonymous FTP unter dem User anonymous und der eigenen Email-Adresse als Passwort. Erledigen manche Browser.
Es gibt zwei Modi:ASCII-Mode: nur ASCII-Files (Default-Modus)Binary-Mode: beliebige Dateien, z.B.:
ausführbare Programme (SW download)Bild-DateienSound-Dateienformatierte Texte wie WinWord-Dokumente
Files können komprimiert sein (z.B. zip, winzip).
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
8
Dienste im Internet
FTP-Verwaltungsfunktionen:Datei löschen und umbenennenVerzeichnisse anlegen, löschen und umbenennen
Viele Betriebssysteme (alle hier behandelten) bieten einfache textuelle FTP-Clients an.
FTP-Tools mit grafischer Oberfläche:WS-FTP (Ipswitch Inc., MS Windows)gFTP (Gnu, Unix / Linux, OS X)…
5
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
9
Dienste im InternetgFTP:
Kommunikations-Logging
Lokaler Rechner remote hostDatei-Logging
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
10
Dienste im Internet
WS-FTP Lite Kommunikations-Logging
Lokaler Rechner remote host
6
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
11
Dienste im Internet
SSH:Remote Login auf einem anderen Rechner (Host). (Secure Shell)Aufbau einer sicheren authentifizierten und verschlüsselten Verbindung über
ein unsicheres Netzwerk
SSH-Clients:ssh der gleichnamigen Firma für MS Windows, Linux, AIX, Solaris, HP-UXOpenSSH (Unix/Linux, OS X)…
ssh löst Telnet ab, das wegen fehlender Verschlüsselung höchst unsicher ist.(Übertragung der Login-Information in Klartext!!)
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
12
Dienste im Internet
ssh:
Profiles:Gespeicherte Zugangsdaten
7
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
13
Dienste im Internetssh bietet auch Filetransfer an:
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
14
Domain-Adressierung
Die Adressierung für viele Dienste des Internets erfolgt mit dem
Uniform Resource Locator (URL)
Eine URL beseht aus drei Komponenten:<Zugriffsmethode>://<Domainadresse>/[<Dateiadresse>]
Zugriffsmethode:Das zur Datenübertragung verwendete Protokoll
Domainadresse:Name des gesuchten Servers.Groß- und Kleinschreibung ist unerheblich. Erlaubt sind Buchstaben, Ziffern und der Bindestrich (IPv4).
Dateiadresse:Pfad und Name des Dokuments. Pfade werden durch / getrennt.Da das verwendete Betriebssystem zwischen Groß- und Kleinschreibung unterscheiden kann (z.B. Unix), muss man diese als relevant ansehen.
8
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
15
Domain-AdressierungBeispiel:
http://www.HS-Karlsruhe.de/[<Pfad>/[<File>]]Domain Haupt-Domain
(Länderkennung)Sub-Domain
Zugriffsart
Seperator
Domain-AdresseSeperator
Domainadresse:Meist 3 oder 4 Komponenten, selten 5Rechte Komponente bezeichnet den Rechner (Alias-Name)Bei fehlender Dateiangabe: Zugriff auf eine serverabhängige Defaultdateiz.B.: Welcome.html oder index.htm
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
16
Domain-AdressierungZugriff auf den Web-Bereich eines Benutzers:
<Zugriffsmethode>://<Domainadresse>/~<user-name>
Weitere Verwendung der Domainadressierung, z.B. für die Email-Adressierung:
<user-name>@<Domainadresse>
Adressauflösung:
Der lokale Internet-Serverkennt die Adresse Teil der eigenen Domainkennt die Adresse wegen kürzlichem Zugriffkennt die Adresse nicht und befragt den nächst übergeordneten
Rechner in der Domain-Hierarchie.
9
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
17
Domain-AdressierungHinter den symbolischen Domain-Adressen stehen numerische IP-Adressen.
Nach IPv4 (Internet Protocol Version 4):
Wie viel Adressen sind damit möglich?Das reicht nicht mehr!
Daher IPv6:Adressierung mit 128 Bit (16 Bytes) statt 32 Bits (ergibt 3,4 × 1038 Adressen)hexadezimale SchreibweiseUnterteilung in 8 Blöcke zu je 16 Bit getrennt durch Doppelpunkte
Beispiel einer IPv6-Adresse:2a01:0db8:85a3:08d3:1319:8a2e:0370:7344
nnn.nnn.nnn.nnn
Netz- Host-Adresse
nnn < 256
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
18
Domain-Adressierung
Weitere Gründe für IPv6:Autokonfiguration (ähnlich DHCP)
Mobile IP
automatische Umnummerierung ("Renumbering")
Wichtige Sicherheitsfunktionen (IPSec)
Technische Vereinfachungen und Verbesserungen (wichtig unter anderem für das Routing)
10
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
19
Homepage an der HS Karlsruhe
Voraussetzung: Rechner-Account an der Hochschule
Gemäß der aktuellen Konfiguration des Web-Servers gilt:
1. Das Web-Verzeichnis heißt .public_html und muss sich im Homedirectory des Benutzers befinden.
2. Das Defaultfile heißt Welcome.html
3. Der Zugriff auf diese Datei erfolgt über die URLhttp://www.home.hs-Karlsruhe.de/~<user>
4. Der Zugriff auf eine andere Datei <filename>.html erfolgt überhttp://www.home.hs-Karlsruhe.de/~<user>/<filename>.html
~<user> steht also für den Pfad zum .public_html-Verzeichnis des Benutzers.
ACHTUNG:Schreibweise von Web-Verzeichnis und Defaultfile sind zwingend. Sie können bei anderen Web-Servern anders aussehen.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
20
Homepage an der HS KarlsruheBeispiel zur studentischen Homepage an der Hochschule:
Manuel Mustermann habe als Username: muma0011
Wie lautet der Pfad seines Internetverzeichnisses?
Wie lautet die URL zu seiner Defaultdatei?
Wie lautet die URL zu nochwas.html in seinem Web-Verzeichnis?
Wie lautet die URL zu abc.html im Unterverzeichnis xyz?
Wie lautet seine Email-Adresse an der Hochschule?
11
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
21
HTML, Allgemeines
HyperText Markup Language (HTML):HTML ist eine Auszeichnungssprache zur Beschreibung der
logischen Bestandteile eines textorientierten Dokuments.Zum Beispiel die typische Elemente eines Textdokuments, wie
ÜberschriftenTextabsätze Listen Tabellen Referenzen zu anderen Dateien, Grafiken, Sites, …
. . .
HTML Dokumente enthalten HTML-Befehle in Form von Tags:<befehl><befehl>Irgend ein Inhalt z.B. Text</befehl> (Container-Tag)<befehl attr=name>Irgend ein … </befehl> (Container-Tag mit Attribut)
Online-Referenz und Quelle: http://de.selfhtml.org
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
22
HTML, Allgemeines
Aufbau einer HTML-Datei:Eine HTML-Datei besteht grundsätzlich aus zwei Teilen:Header enthält Angaben zu Titel u. ä. (Kopf)Body enthält den eigentlichen Text mit Überschriften, Verweise usw. (Körper)
Beispiel:<HTML>
<HEAD><TITLE>Text in der Titelleiste</TITLE>
</HEAD><BODY>
Überschriften, Text, Verweise, Grafiken usw. </BODY>
</HTML>
Die Großschreibung der Tag-Befehle dient nur der besseren Unterscheidbarkeit.
12
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
23
HTML, Allgemeines
Übung 1:Erstellen Sie eine einfache Seite in Ihrem Web-Verzeichnis. Sie soll einen Titel haben und einen kurzen Text.Erste Schritte:
Erstellung des Internet-Verzeichnisses in Unix falls notwendigErstellung der Default-Datei mit dem Editor pico odermit einem Editor von MS Windows. Dazu Netzlaufwerk einrichten: \\ads\dfs\HS\Homes\
Weitere HTML-Beispiele auf der Homepage im Vorlesungsplan!
Lösungsbeispiel:
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
24
HTML, Zeichenformatierung
Tags zur Zeichenformatierung (physikalisch):<B>...</B> bold (fett)<I>...</I> italic (schräg)<U>...</U> underline (unterstrichen)<SUP>...</SUP> superscript (hochgestellter Text)<SUB>...</SUB> subscript (tiefgestellter Text)
Tags zur Zeichenformatierung (semantisch):<CITE>...</CITE> Zitate, typisch in italic.<CODE>...</CODE> Auszüge von Programm-Code, typisch in
monospaced font.<EM>...</EM> Heraushebungen, typisch in italic.<STRONG>...</STRONG> besondere Heraushebungen, typisch in fett.
Zeilenwechsel: <BR> (line break)
13
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
25
HTML, Zeichenformatierung
Beispiel:Erweitern Sie Ihre Datei entsprechend!
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
26
HTML, Formatierung
Absatz:<P>...</P>
Absatz (paragraph). Kann als Container-Tag auftreten und muss es bei Attributierung:
<P ALIGN=wert>...</P> (deprecated)wert kann die Werte left, center, right und justify annehmen.justify kann nicht jeder Browser.Empfohlen wird stattdessen die Formatierung mit Stylesheets und den zugehörigen Erweiterungen des Paragraph-Tags.
<center>...</center> (deprecated)Zentrierung des Containerinhalts wie Text, Bilder, Tabellen usw.
deprecated = missbilligt. Von weiterer Verwendung wird abgeraten.Alternative: Stylesheets
14
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
27
HTML, Formatierung
Überschriften:Es gibt Überschriften in 6 verschiedenen Größen (Hierarchieebenen):
<Hn>...</Hn>n = 1, ..., 6, wobei 1 die größte Überschrift ist.
Die tatsächlich angezeigte Größe hängt von den Font-Einstellungen des Browsers ab.
Die Überschrift wird als eigener Absatz fett und abgesetzt dargestellt.
Übung 2:Wenden Sie Paragraph, Zentrierung und Überschriften beispielhaft in Ihrer Seite an.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
28
HTML, Hyperlinks
Verweise, Hyperlinks:Hyperlinks zu
anderen HTML-Seiten zu Objekten mit anderen Zugriffsmethoden, z.B. ftp, mail, ...
Allgemeiner Aufbau:<A HREF="verweisziel">Verweistext</A> (anchor)
Der Containerinhalt wird „klickbar“ und von den Browsern hervorgehoben (Default: Blau und unterstrichen)
Das verweisziel kann unter anderem sein:eine Stelle innerhalb der gleichen Dateiandere HTML-Datei der gleichen Site (der gleichen URL)eine HTML-Datei einer anderen Site (allgemeine WWW-Adresse)Email-, FTP- oder Newsgroup-AdresseDatei zum Download
. . .
15
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
29
HTML, Hyperlinks
Hyperlink innerhalb der gleichen Datei:<A HREF="#ziel">lokaler Verweis innerhalb der Datei</A>
Verweis auf eine Stelle ziel innerhalb der gleichen Datei.
Vereinbarung des Sprungziels mit<A NAME="ziel">Einsprungstelle</A>
Keine besondere Darstellung des eingeschlossenen Texts EinsprungstelleDer Inhalt des Container-Tags darf nicht leer sein!
Hyperlink zu einer Datei im gleichen Verzeichnis (und Site):<A HREF="datei.htm">Verweis im gleichen Verzeichnis</A>
Die aktuelle Datei und datei.htm müssen im gleichen Verzeichnis stehen.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
30
HTML, Hyperlinks
Hyperlink zu einer beliebigen Datei der gleichen Site:<A HREF="uvz/datei.htm">Verweis nach unten</A>
Zieldatei im Unterverzeichnis uvz
<A HREF="uvz/tiefer/datei.htm">Verweis nach unten</A>Zieldatei im Unterunterverzeichnis uvz/tiefer
<A HREF="../datei.htm">Verweis nach oben</A>Zieldatei im Elternverzeichnis
<A HREF="../parallelVerz/datei.htm">Verweis wo anders hin</A>Zieldatei im Verzeichnis parallelVerz parallel zum aktuellen
<A HREF="uvz/datei.htm#ziel">Verweis nach unten und mitten rein</A>Sprungziel ziel innerhalb der Zieldatei datei.htmim Unterverzeichnis uvz
Sprungziele innerhalb einer anderen Datei werden immer mit # angehängt.
16
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
31
HTML, Hyperlinks
Hyperlink zu einer anderen Site:<A HREF="http://www.bmw.de/">Zu BMW</A>
Verweis auf die Defaultdatei der SiteBei vollständiger URL darf die Zugriffsart NICHT weggelassen werden!Bei fehlender Dateiangabe aus Performancegründen Abschluss mit /
Hyperlink zu einer anderen Site mit Fileangabe:<A HREF="http://www.kit.edu/lehre/index.php">Lehre am KIT</A>
Übung 3:1. Erstellen Sie eine weitere kleine HTML-Datei und verlinken Sie sie mit Ihrer
Defaultdatei.
2. Das gleiche mit einer Datei in einem neu anzulegenden Unterverzeichnis
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
32
HTML, Hyperlinks
Hyperlink zu einer FTP-Site:<A HREF="ftp://ftp.uni-augsburg.de/">FTP-Server, Uni Augsburg</A>
oder zu einer ladbaren Datei:<a href="ftp://ftp.uni-koeln.de/pc/win32/inet/ssh329.exe">
SSH2/SFTP-Client (free for non-commercial use)</a>Die Browser-Einstellungen legen fest, was mit der Datei geschehen soll:
anzeigenrunterladenausführen
Bei den meisten Browser erfolgt aus Sicherheitsgründen eine Nachfrage.
Was für Sicherheitsgründe?
17
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
33
HTML, Hyperlinks
Email-Hyperlink:<a href="mailto:muma0011@hs-karlsruhe.de">Mail-Kontakt</a>
Voraussetzung:Der Browser unterstützt selbst Emails (z.B. SeaMonkey von Mozilla)Der Browser kennt einen Email-Client (z.B. Firefox den Thunderbird oder MS Internet Explorer den Outlook bzw. Outlook-Express)
Mehrere Adressaten:<a href="mailto:muma0011@hs-karlsruhe.de?cc=susi.maier@gmx.de">Mail</a>
Vorgabe des Betreffs:<a href="mailto:muma0011@hs-karlsruhe.de?subject=Antwort">Mail</a>
Das kann man auch kombinieren (allgemein: cgi (common gateway interface)):<a href="mailto:muma0011@hs-karlsruhe.de?cc=susi.maier@gmx.de&subject=Antwort">Mail</a>
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
34
HTML, Hyperlinks
cgi:Einleitung der Parameterliste durch ein ?Weitere Parameter-Wert-Paare werden durch ein & angehängt.Alle genormten Felder des Mailkopfs sind möglich:
to Adressatcc Adressat einer Kopie (carbon copy)bcc Die Adressaten sehen diese Adresse nicht (blind carbon copy)reply-to Antwort-Adressesubject Betreff
. . .
Welches Risiko bergen solche Links?
Übung 4:Erweitern Sie eine Ihrer Dateien um einen Email-Link und testen Sie ihn.
18
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
35
HTML, Hyperlinks
Download-Hyperlink:Es gibt keinen speziellen Download-Befehl.
Download-Option bei unklarer Verwendung einer Datei durch den Browser(keine Plug-Ins, keine bekannte Anwendung für den Dateityp)
Verarbeitungsvorgabe durch Angabe eines MIME-Typs
Beispiel:<a href="billanz.xls" type="application/msexcel">Die Billanz als
Excel-Datei</a>
Eine Liste gültiger Mime-Types kann der Literatur entnommen werden.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
36
HTML, Grafikeinbindung
Einbindung von Grafiken:Anzeige von Fotos oder Grafiken innerhalb einer SeiteAnzeige durch den Browser oder ein Plug-inNicht auflösbare Referenzen ergeben ein Ersatzbild: Gängige Formate für das Web:
JPG oder JPEG: Für FotosGIF: Für (animierte) GrafikenPNG: Für Grafiken mit besserer Farbtiefe und Kompression
Allgemeiner Befehlsaufbau:<IMG SRC="verweisziel" attribute>
Für das verweisziel gelten die gleichen Regeln wie für Hyperlinks.Genauere Spezifikation der Dateieinbindung durch die attribute.
Firefox MSIE
19
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
37
HTML, Grafikeinbindung
Alternativer Text, Tooltip-Anzeige:Zweck des Attributs für alternativen Text ALT="text":
Information während des BildladensInformation bei abgeschaltetem BildladenInformation bei fehlerhafter oder fehlender Bilddatei
Gemäß Standard eine Pflichtangabe!Wird vom MSIE bei fehlendem TITLE-Attribut als Tooltip angezeigt.Tooltip: kleines Textfenster, das bei Mauskontakt erscheint. Z.B.:
Vorgabe des Tooltip-Texts durch das Attribut TITLE="text"Anzeige durch viele gängige Browser (Firefox, MSIE, …)
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
38
HTML, Grafikeinbindung
Festlegung der Bildgröße:Vorgabe der Bildgröße durch die Attribute
WIDTH=wert und HEIGHT=wertwert in Pixel oder als %-Angabe des verfügbaren Platzes
Effekte:Schnellerer Seitenaufbau, da der Browser den Platz für die Grafik reservieren kannBildskalierung. Besser mit einem Grafiktool! Warum?Bildverzerrungen
Beispiel:<IMG SRC="bild.gif" WIDTH=100 HEIGHT=60>
Einbindung eines Bildes im Format 100 x 60 Pixel.
20
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
39
HTML, Grafikeinbindung
Übung 5:
1. Laden Sie sich aus dem Web eine kleine oder mittelgroße Bilddatei herunter. Wegen Urheberrecht z.B. vom Webauftritt der FH, der Seite der Vorlesung oder aus Wikipedia.
2. Binden Sie die Grafik in eine Seite Ihrer Homepage mit ALT- und TITLE-Attribut ein.
3. Ermitteln Sie die Bildgröße durch das Eigenschaftsfeld des Kontextmenüsdes Bildes.
4. Ergänzen Sie Ihr Bild durch die Größenangaben.
5. Verzerren Sie das Bild durch „falsche“ Größenangaben.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
40
HTML, Grafik als Hyperlink
Grafik als Hyperlink:
Grafik als Containerinhalt eines Anchor-Tags (Hyperlink)Beispiel:
<A HREF="teufel.html"><IMG SRC="devil.gif" alt="Zum Teufel"></A>
Containerbereich des Anchor-Tags.
Anzeige der Grafik mit blauem Rahmen zur Kennzeichnung als Hyperlink:
Das sieht nicht schön aus und stört bei Menü-Buttons! Z.B.:anstelle von:
21
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
41
HTML, Grafik als Hyperlink
Unterdrückung des Rahmens durch das Attribut border=0 (deprecated)
Beispiel:
Die hier verwendetenAttribute HSPACE,VSPACE und ALIGNsind ebenfalls deprecated.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
42
HTML, Grafikformate
Grafikformate:
JPG-Format:Bildtiefe: 8 Bit Graustufen und 24 Bit Echtfarbe (True color)Anwendungsbereich:
geeignet auch für große Bilddateien bestens geeignet zur Darstellung von fotorealistischen Bildern
Komprimierung:einstellbarje nach Komprimierungsgrad (bis auf ca. 2 % der ursprünglichen Größe) erhebliche Qualitätsverluste möglich Bild nach Komprimierung kontrollieren!
Vorteile:hohe Kompressionsratenhohe Verbreitung (Bildbearbeitungsprogramme)
Nachteile:Komprimierungsbedingte Schärfe- u. Farbverluste
22
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
43
HTML, Grafikformate
GIF-Format:Bildtiefe: 1-8 Bit (2- 256 Farben einschließlich Graustufen)
Anwendungsbereich:geeignet für kleine bis mittelgroße Bilddateien bestens geeignet zur Darstellung von Grafiken und Zeichnungenanimierte GrafikenGrafiken mit transparentem Hintergrund
Komprimierung:LZW, verlustfrei, nicht einstellbarKompressionsrate vom Bildinhalt abhängig (mittlere Kompressionsraten)
Vorteile:keine Kompressionsverlustehohe Verbreitung (Bildbearbeitungsprogramme)
Nachteile:nur maximal 256 Farben darstellbar
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
44
HTML, Grafikformate
PNG-Format:Bildtiefe: Truecolor (16,7 Mio Farben) oder Farbpalette mit max. 256 EinträgenAnwendungsbereich:
geeignet für kleine bis mittelgroße Bilddateien. bestens geeignet zur Darstellung von Grafiken und Zeichnungengut geeignet für FotosGrafiken mit transparentem Hintergrund
Komprimierung:verlustfrei, nicht einstellbarKompressionsrate vom Bildinhalt abhängig (mittlere Kompressionsrate)
Vorteile:keine Kompressionsverlustegute Verbreitung (Bildbearbeitungsprogramme)
Nachteile:bei fotorealistischen Bildern geringere Kompression als JPGkeine Animation
23
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
45
HTML, Imagemaps
Verweissensitive Grafiken (Imagemaps):Imagemaps sind Grafiken mit klickbaren Bereichen.
2 Ausprägungen: server-sided maps: Server-gestützte Imagemaps benötigen ein cgi-Script zur Auswertung auf Seiten des Servers. Spielen zunehmend eine geringere Rolle. Daher hier nicht weiter behandelt.
client-sided maps:Definition und Auswertung in HTML beschreibbar
Beschreibung einer Imagemap durch 2 Tags: Das MAP-Tag:
Definition der sensitiven Bereiche im ImageZuordnung und Definition der Hyperlinks
Das bereits bekannte IMG-Tag:Laden des Bilds Herstellung des Bezugs zum MAP-Tag durch ein neues Attribut
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
46
HTML, Imagemaps
<MAP NAME="mapname"><AREA SHAPE=figur COORDS="werte" HREF="verweisziel" TITLE="Text">
. . .<AREA SHAPE=figur COORDS="werte" HREF="verweisziel">
</MAP>
Der mapname ist ein interner Name zur Bezeichnung der MAP-Definition.
Funktion der AREA-Tags:Festlegung der Geometrie eines sensitiven Bereichs (SHAPE)Zuordnung des Hyperlinks (HREF), siehe Anchor-TagDas TITLE-Attribut liefert wie zuvor ein kleines Infofenster ( Tooltip).
24
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
47
HTML, Imagemaps
Drei Geometrien:(Koordinatenursprung: Linke, obere Ecke des Bildes; alle Angaben in Pixel)
Rechteck:SHAPE=RECT COORDS="x1,y1, x2,y2"
x1,y1 sind die Koordinaten der linken oberen Ecke und x2,y2 die der rechten unteren.
Polygon:SHAPE=POLYGON COORDS=" x1,y1, xn,yn"
Die xi,yi definieren einen offenen Polygonzug, der durch die Verbindung des ersten und des letzten Punktes geschlossen wird.
Kreis:SHAPE=CIRCLE COORDS="x,y,r"
Der Kreis wird durch den Mittelpunk (x,y) und den Radius r festgelegt.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
48
HTML, Imagemaps
Erweiterung des IMG-Tags um das USEMAP-Attribut, das aus einer Grafik eine Imagemap macht:
USEMAP="#mapname"
Map-Definitionen können auch in einer anderen Datei erfolgen.Der Usemap-Verweis sieht dann folgendermaßen aus:
USEMAP="meine_maps.html#mapname"
Beispiel:<MAP NAME="Testbild">
<AREA SHAPE=RECT COORDS="191,170, 234,218“ HREF="deutschland.html"> <AREA SHAPE=POLYGON COORDS="101,219, 153,196, 195,213, 190,225,
187,263, 153,263, 150,272, 116,266, 123,235" HREF="frankreich.html"><AREA SHAPE=CIRCLE COORDS="36,61, 30" HREF="island.html">
</MAP><IMG SRC="euro_map.gif" USEMAP="#Testbild" BORDER=0>
25
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
49
HTML, Stylesheets
Stylesheets (Cascading Style Sheets, CSS):Formatfestlegungen in separaten DateienEinheitliches LayoutAuch als lokale Definition allein oder ergänzend zu externen StylesheetsDiverse Angaben zu Farben und Schriften Freie Positionierung der Elemente einer Webseite Hintergrundgestaltung (Farben, Bilder)Mehrere CSS-Files (Kaskadeneffekt, detaillierte Prioritätsregeln)
. . .
Einbindung eines externen Stylesheets in eine HTML-Datei (Kopf-Bereich):<link rel="stylesheet" type="text/css" href="beispiel.css" media="screen">
Das media-Attribut erlaubt unterschiedliche CSS für verschiedene Medien,z.B. für screen, projection, tv, und print.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
50
HTML, Stylesheets
Nicht alle Browser können den gesamten CSS-Umfang. Also unbedingt mit mehreren Browsern und Browserversionen testen!
Als gut gelten:Mozilla: Firefox, SeaMonkey, Camino (für Mac OS X)Opera ab Version 9Safari (Mac OS X)Konquerer (Linux)MSIE ab Version 7
Beispiel einer Formatdefinition:h1 { color:red; font-size:48px; }
Ordnet dem HTML-Tag einer Überschrift h1 die Farbe Rot und eine Größe von 48 Pixel zu. Pixel sind beim MSIE fest, bei anderen Browsern skalierbar!
Generelle Unterdrückung von Rahmen bei Bildern als Hyperlinks oder Imagemaps:
img { border:none; }
26
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
51
HTML, Stylesheets
Lokale Einbindung von Stylesheets in den Kopf einer HTML-Datei:<style type="text/css">
<!-- /* ... Hier werden die Formate definiert ... */ --> </style>
Stylesheets in HTML-Kommentar (<!-- … -->), damit CSS-unkundige Browser die Deklarationen nicht als anzuzeigenden Text missinterpretieren.
Beispiel:oder:
<head> <head>... ...<style type="text/css"> <style type="text/css">
<!-- img { border:none; } --> img { border:none; }</style> </style>
</head> </head>
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
52
HTML, Formatierung und Farben
Absatzformatierung gemäß CSS-Standard:Beispiel für eine Schriftformatierung (Vorgaben für Font, Fontstil, Größe und Farbe):
<p style="font-family:Arial,sans-serif; font-size:1.2em; color:blue">Absatz</p>
Beispiel für einen farbigen Hintergrund: <p style="background-color:yellow">Ein anderer formatierter Absatz.</p>
Beispiel für horizontale Ausrichtung: <p style="text-align:left; margin-left:50px; margin-right:50px">Ein Absatz</p>
Mögliche Vorgaben: left, right, center, justify
Farbvorgaben:VGA-Grundfarben: black, gray, maroon, red, green, lime, olive, yellow, navy,
blue, purple, fuchsia, teal, aqua, silver, whiteRGB-Farbe: Variante 1: #rrggbb mit r=rot, g=grün b=blau als HexadezimalzahlenVariante 2: rgb(rrr,ggg,bbb) Absolutwerte (0..255) oder Prozent
Beispiele:#ffff00
rgb(255,255,0)rgb(90%,0%,90%)
27
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
53
HTML, Formatierung und Farben
Hintergrundfarben und -bilder:<head>
<title>background-color</title> <style type="text/css">
body { background-color:#E0E0E0; font-weight:bold; font-family:Arial; font-size:120%; }
</style> </head><body>...Vorgabe einer Hintergrundfarbe, des Arial-Fonts, von Fettdruck und einer Zeichengröße von 120% der Basisgröße des im Browser eingestellten Fonts.
Diese und andere CSS-Vorgaben sind unter anderem auch möglich für Absätze (<p> … </p>) Blöcke (<div> … </div>), die andere Elemente enthalten könnenBereiche (<span> … </span>)
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
54
HTML
Übung 6:
1. Kopieren Sie eine früher erstellte Datei mit einigem Text.
2. Geben Sie der Datei eine Hintergrundfarbe, eine Default-Textfarbe und -größe.
3. Formatieren Sie einen Absatz rechtsbündig.
4. Formatieren Sie einen Absatz linksbündig mit Begrenzungen rechts und links.
5. Verändern Sie die Farbe zweier zusammenhängender Absätze (<div>)
6. Verändern Sie die Farbe eines Wortes in einem Absatz (<span>)
28
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
55
HTMLTrennlinien:Einfachste Form: <hr> (horizontal rule)
Einige beispielhafte Vorgaben für Breite FarbeDickeRandAusrichtung
Beispiele:Ein bisschen Text.<hr style="width:300px; background-color:blue; margin-left:10px; text-align:left">Noch ein bisschen Text.<hr style="width:80%; background-color:yellow; height:3px; text-align:center">Und noch ein bisschen Text.<hr style="background-color:green; height:8px; margin-left:5%; text-align:left">
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
56
HTML, Tabellen
Tabellen:Zwei Funktionen:
1. Tabelle2. Mittel zur Gestaltung des Webseiten-Layouts (blinde Tabellen)
(problematisch wegen Barrierefreiheit)
Blinde Tabellen haben keinen Rand:Attribut border=0 (deprecated)
oder CSS-konform:<style type="text/css">
table { border:none } /* das gilt dann für alle Tabellen */</style>
29
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
57
HTML, TabellenAllgemeiner Aufbau:TABLE-Container-Tag enthält Tags für
einen Tabellentitel (<CAPTION>)Tabellenzeilen (<TR>)Tabellenzellen (<TH>, <TD>)
Schema:
Beispiel:<TABLE BORDER=5><CAPTION>Beispieltabelle</CAPTION><TR>
<TH>Kopfzelle: 1. Zeile, 1. Spalte</TH> <TH>Kopfzelle: 1. Zeile, 2. Spalte</TH><TH>Kopfzelle: 1. Zeile, 3. Spalte</TH>
</TR><TR>
<TD>Datenzelle: 2. Zeile, 1. Spalte</TD><TD>Datenzelle: 2. Zeile, 2. Spalte</TD><TD>Datenzelle: 2. Zeile, 3. Spalte</TD>
</TR><TR>
<TD>Datenzelle: 3. Zeile, 1. Spalte</TD><TD>Datenzelle: 3. Zeile, 2. Spalte</TD><TD>Datenzelle: 3. Zeile, 3. Spalte</TD>
</TR></TABLE>
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
58
HTML, Tabellen
Einige Attribute des TABLE-Tags:BORDER=wert (deprecated)
Dicke des Außenrahmens in Pixel.
CELLSPACING=wertDicke der Gitternetzlinien innerhalb einer Tabelle.
CELLPADDING=wertAbstand zwischen Zelleninhalt und Rändern.
30
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
59
HTML, Tabellen
Einige Attribute des TABLE-Tags 2:WIDTH=wert HEIGHT=wert
wert: Absolutwert in Pixel oder Prozentwert der Fensterbreite bzw. -höhe.
Nur wirksam, wenn die Tabelle sonst kleiner dargestellt würde.
BGCOLOR=farbeHintergrundfarbe für die Tabelle. farbe: VGA-Farbe oder RGB-Angabe
FRAME=wertBestimmt den Tabellenrahmen. wert=void: kein Rahmen
box, border: vollständiger Rahmenabove: obere Randliniebelow: untere Randliniehsides: obere und untere Randlinievsides: rechte und linke Randlinierhs, lhs: rechte bzw. linke Randlinie
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
60
HTML, Tabellen
Breite einer Zelle und damit der Spalte:<th style="width:100px"> oder<td style="width:100px">
Höhe einer Zelle und damit der Zeile:<td style="height:80px">
Für ein leeres Feld …
Ein Fehler!
… hätte ein einfaches Leerzeichen nicht
genügt!
31
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
61
HTML, Tabellen
Übung 7:1. Erstellen Sie eine Tabelle wie auf der vorherigen Folie. 2. Ändern sie die Spaltenbreite.3. Entfernen Sie den Rahmen der Tabelle.
Horizontale Ausrichtung des Inhalts einer Zelle:<td align="right"> Gültige Werte: right, left, center
Vertikale Ausrichtung des Inhalts einer Zelle:<td valign="top"> Gültige Werte: top, middle, bottom
Zellen verbinden:<colspan=wert> Verbindet wert Zellen einer Zeile miteinander.<rowspan=wert> Verbindet wert Zellen einer Spalte miteinander.
Die Attribute wirken nur, wenn es genügend Spalten bzw. Zeilen gibt.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
62
HTML, Tabellenbeispiel
Deklaration des Dokumententyps:HTML PUBLIC: Bezug auf eine öffentlich verfügbare HTML-DTD(Dokumententypdefinition)W3C: des W3-KonsortiumsHTML 4.01: HTML-VersionsangabeSpezifikation der loose.dtd: Variante Transitional. Erlaubt einige deprecated Elemente.
32
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
63
HTML, Entities
Entities:Wie gibt man in HTML das "<"-Zeichen an? Z.B.: limit < 5
Ähnliche Probleme mit Sonderzeichen wie Grad ° oder Copyright ©.
Lösung:Beschreibungssprache für Zeichen:
&<beschr>; mit: <beschr> = #<Unicode><beschr> = <memoKürzel>
Beispiele:< oder < steht für das "<"-Zeichen.& oder & steht für das „&"-Zeichen (ampersand).
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
64
HTML, Entities
Einige Entities in memotechnischer Angabe:
x×Malzeichen
§§Paragraph
©©Copyright
€€Euro
°°Grad
ßßscharfes s
Ä Ü ÖÄ Ü Ögroße Ä, Ü, Ö
ä ü öä ü ökleine ä, ü, ö
(non blocking space)Leerzeichen
>>größer als
<<kleiner als
&&Ampersand
ZeichenEntityBeschreibungÜbung 8:1. Ergänzen Sie eine Ihrer
Webseiten mit einigen Entities aus der Tabelle der nächsten Folie.Z.B.: € 7°C © 7 x 8 Ä ß
2. Experimentieren Sie mit dem Leerzeichen
33
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
65
HTML, Formulare
Formulare:Formulare erlauben eine Interaktion des Benutzers mit dem Server.
Anwendungsbeispiele:Benutzung einer SuchmaschineRoutenplanerAnmeldung bei einem ReiseportalReisebuchungAngebotserstellung bei Ebay
…
Art der Datenübertragung:Datenabfrage:
Daten zum Server übertragen:
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
66
HTML, Formulare
Das FORM-Tag schließt das Formular ein:
<FORM ACTION="verweisziel" METHOD="[get|post]">Formular-Tags und beliebige andere HTML-Tags...
</FORM>
verweisziel:URL eines cgi-Scripts zur Auswertung der Formulardaten.Die Methode hängt vom auswertenden Script ab.Email-Adresse. Dann METHOD="post" und enctype="text/plain“Letzteres sorgt für bessere Lesbarkeit.
Für Übungen und Studienarbeiten immer: Formularauswertung als Email:<FORM ACTION="mailto:muma0011@hs-karlsruhe.de" METHOD="post“
enctype="text/plain">
34
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
67
HTML, Formulare
Wichtige Eingabefelder (immer innerhalb des FORM-Containers):Einzeilige Textfelder
Eingabefeld für Passwörter
Mehrzeilige Textfelder
Auswahllisten
Radiobuttons
Checkboxes
Versteckte Felder
Dateibuttons (Upload)
Absende- und Abbruch-Button
Der Name kann als ein Variablenname angesehen werden. Er sollte daher keine Umlaute, Leerzeichen und kaum Sonderzeichen enthalten.
Jedes Feld hat ein NAME-Attribut, das dem Feld einen Namen zuordnet.
z.B.: NAME="Wohnort"Unter diesem Namen kann die auswertende Software auf die eingegebenen Daten zugreifen.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
68
HTML, Formulare
Einzeilige Textfelder:<INPUT NAME="xyz" TYPE="TEXT" SIZE=swert MAXLENGTH=mwert>
SIZE: Größe des angezeigten EingabefeldesMAXLENGTH: Größe des internen Puffers des Eingabefeldes
Beispiel:Name: <INPUT NAME="nomen" SIZE=25 MAXLENGTH=30>
Eingabefeld für Passwörter:Statt TYPE="TEXT" wird TYPE="PASSWORD" angegeben.
Eingabeecho sind Sternchen statt Text (Schutz vor Mitlesen).Übertragung im Klartext.
35
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
69
HTML, Formulare
Mehrzeilige Textfelder:<TEXTAREA NAME="kommentar" COLS=cwert ROWS=rwert>
Bitte geben Sie hier was ein! <!-- optionaler Default-Text --></TEXTAREA>
COLS: Zeilenlänge (columns)
ROWS: Zeilenanzahl
WRAP=virtual: automatischer Zeilenumbruch bei der Anzeige. Wird nicht übertragen.
physical: automatischer Zeilenumbruch bei der Anzeige. Wird übertragen.
off: kein automatischer Zeilenumbruch
WRAP ist kein HTML-Standard, wird aber von vielen Browsern verstanden.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
70
HTML, Formulare
Auswahllisten:<SELECT NAME="name" SIZE=wert MULTIPLE><OPTION SELECTED> Text 1<OPTION> Text 2
. . .<OPTION VALUE="xyz"> Text n
</SELECT>
SIZE: Anzahl angezeigter Einträge. 1 = Drop-Down-ListeMULTIPLE: Mehrfachauswahl möglich (Hinweis an Benutzer, Ctrl+Click)SELECTED: VorauswahlVALUE: Übertragung des vorgegebenen Wertes an Stelle des Textes.
Seit HTML 4.0 gibt es auch verschachtelte Auswahllisten.
36
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
71
HTML, Formulare
Beispiel einer Auswahlliste:
Pizza-Bestellung per Drop-Down-Liste und mit Pizzanummern an Stelle von Pizzabezeichnungen.
Klick öffnet Drop-Down-Menü …
Übertragen werden diese Pizza-Nummern
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
72
HTML, Formulare
Radiobuttons:<INPUT TYPE=RADIO NAME="name" VALUE="wert">
Alle Radiobuttons mit gleichen Namen bilden eine Gruppe, von der genau ein Button ausgewählt werden kann.
Der Wert des VALUE-Attributs wird übertragen.
Checkboxes:<INPUT TYPE=CHECKBOX NAME="name" VALUE="wert">
Wie Radiobuttons mit dem Unterschied, dass Mehrfachauswahl erlaubt ist.
Bei beiden Buttons erlaubt das CHECKED-Attribut eine Vorauswahl.
Beispiele dazu können auf der Homepage im Vorlesungsplan gefunden werden!
37
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
73
HTML, Formulare
Absende- und Abbruch-Button:<INPUT TYPE=SUBMIT VALUE="Absenden">
<INPUT TYPE=RESET VALUE="Abbrechen">
VALUE: Beschriftung des Buttons
Übung 9:1. Erstellen Sie ein kleines Formular, das ein einzeiliges Textfeld und einige
Checkboxes anbietet. Das Ergebnis wird an ihre Mailadresse gesendet. Lassen Sie das enctype-Attribut weg.
2. Fügen Sie das enctype-Attribut wie empfohlen hinzu. Effekt?
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
74
HTML, Formulare
Versteckte Felder:<INPUT TYPE=hidden NAME="Sprache" VALUE="de">
Der Wert von VALUE wird mit übertragen. Dient der Übermittlung von Zusatzinformationen an das auswertende Script.
Im Beispiel die Sprache des Formulars für ein einheitliches Auswertescript.
Der Wert kann auch das Ergebnis eines Javascript-Aufrufs sein. Z.B.:
die Bildschirmauflösung für die generierte Antwort oder das verwendete Betriebssystem samt Browser:UserBrowser=Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.1.10) Gecko/20100504 SeaMonkey/2.0.5(siehe auch das Beispiel auf der Homepage)
38
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
75
HTML, Formulare
Dateibuttons (Upload):<INPUT TYPE=FILE SIZE=30 MAXLENGTH=8192 NAME="Datei" ACCEPT="text/*">
SIZE: Größe des Felds für Dateiname und Pfad
MAXLENGHT: Maximale Größe der Datei, hier 8kB. Keine Angabe: beliebige Größe
ACCEPT: Art der gesuchten Datei, hier insbesondere *.txt, *.htm, *.htmlListe der hier zulässigen MIME-Types in der Literatur
Im FORM-Tag müssen folgende Attribute stehen:
METHOD=POST und ENCTYPE="multipart/form-data"
Letzteres sorgt dafür, das der Dateiinhalt übertragen wird und nicht nur der ausgewählte Dateiname.
Das serverseitige Script muss den Upload geeignet verarbeiten können.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
76
HTML, FormulareBeispiel:<FORM ACTION="cgi-bin/upload.pl" METHOD=POST ENCTYPE="multipart/form-data">
Eine Text- oder HTML-Datei:<BR><INPUT TYPE=FILE SIZE=30 MAXLENGTH=10000 NAME="Datei" ACCEPT="text/*"><BR><BR><INPUT TYPE=SUBMIT VALUE="Absenden">
</FORM>
Automatisch erzeugter Button
Klick öffnet ein Standardfenster des BS zur File-Auswahl
39
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
77
HTMLAusblick:
Gemessen am Umfang und Bedeutung von HTML 4 und CSS wäre für beides je eine eigene Vorlesung notwendig!
HTML: Hier nur Vorstellung der wichtigsten Tags und Attribute
Stylesheets (CSS) wurden nur angerissen
Weggelassen wurdenFrames (Einteilung des Bildschirms in getrennt verwaltbare Bereiche)CSS, insbesondere Klassendefinitionen und separate StylesheetsMultimedia-Objekte wie Sounds, Videos, usw.JavaScriptPerl- oder PHP-Script (siehe Perl-Beispiel auf der Homepage)Dynamisches HTML (siehe Beispiel auf der Homepage)XHTMLWebserver und cgi
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
78
HTMLRegeln für den Aufbau einer Website:
Nur Informationen veröffentlichen, die erlaubt sind.Copyright beachten, keine Propaganda für Neonazis und andere Terroristen, Jugendschutzgesetze beachten, …
Impressum gemäß aktueller Rechtslage
Konzept für Inhalt und Struktur
Aufteilung der Informationen in einzelne Web-Seiten
Wahl eines einheitlichen Layouts (CSS einsetzen)
Links auf themenverwandte Seiten
Datum der letzten Aktualisierung z.B. am Seitenende
Zusammengehörige HTML-Files in ein Verzeichnis
Bei Verwendung neuer HTML-Befehle kurz nach deren Veröffentlichung Seiten mit alten Browsern testen!
40
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
79
Protokolle im Internet
Protokolle im Internet:Konventionen zur Regelung des Datenaustausch zwischen Rechnern
Wichtige Anforderungen an Internet-Protokolle:Unabhängigkeit von der Netzwerk-HardwareUnterschiedliche Übertragungsmedien (Kupferkabel, Lichtleiter, ...) und Netzwerktypen (Ethernet, Token Ring, ...)
Erreichbarkeit aller Rechner weltweit
Fehlererkennung und -korrektur
Logische AdressierungLogische Rechneradressen (Domain-Adressen) statt hardwareorientierte Adressierung (Rechneraustausch!)
Auf- und Abbau von Verbindungen
SkalierbarkeitWachsende Hardware-Leistung, gesteigertes Datenvolumen, wachsender Netzumfang
EffizienzMöglichst geringer Kommunikations-Overhead
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
80
Protokolle im Internet
Schichtenmodell als Konsequenz:Mehrere Protokolle mit genau abgegrenzten Zuständigkeiten
Sinn der Schichtung: Abstraktion und Trennung von Funktionalitäten.
Vorteil: Austauschbarkeit der verwendeten Standards und Protokolle
Allgemein gilt: Je tiefer die Schicht, desto hardwarenäher
Schichtenmodell (vereinfacht)
41
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
81
Protokolle im Internet
Übertragung von kleinen Datenpaketen (Frames) bestehend ausKopf mit AdressangabenRumpf (Nutzdaten, die wiederum aus Kopf und Rumpf bestehen können)
Mehrfach-Kapselung von Frames(je beteiligtem Protokoll ein Frame):
Wegen der Schachtelung auch IP-Stack genannt.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
82
Protokolle im InternetPort-Adressierung:
Für Host-to-Host-Verbindungen (UDP und TCP)Ports sind logische Unteradressen einer IP-Adresse zur Nutzung unterschiedlicher Dienste eines Rechners
Verbindungen zwischen Client und Server
Client X greift auf einen FTP-Server an Port 21 zu
mehreren Clients und ServernAuf den FTP-Server 2 greifen z.B.
zwei Clients von einem Rechner zu
42
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
83
Protokolle im Internet
Das Portkonzept erlaubt unterschiedlichen Clients auf einem oder mehreren Rechnern über verschiedene Ports die zugeordneten Dienste eines oder mehrer Server anzusprechen.
Server sind permanent aktiv (Demons) und warten auf Anfragen.
URL mit Portangabe:<Zugriffsmethode>://<Domainadresse>[:<port>]/[<Dateiadresse>]
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
84
InternetInternet
Protokolle im InternetProxys:proxy (engl.) = der Bevollmächtigte proximus (lat.) = der naheste, nächste
Client 1
Client 2
Client n
. . .
Proxy(für Clients)
ReverseProxy
Server 1
Server 2
Server m
. . .
Funktionen:FirewallZugriffsbeschränkungDatenvorverarbeitungAnonymisierungBandbreitenkontrolleTunnelung(Durchschleusung protokollfremder Daten)Caching (verliert an Bedeutung)
Funktionen:FirewallLastverteilungLastübernahme durch
VerschlüsselungDatenvorverarbeitung
Protokoll- oder Formatanpassungen(translating proxy)TunnelungCaching (verliert an Bedeutung)
43
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
85
Protokolle im Internet
HyperText Transfer Protocol (HTTP):typ- und formatunabhängigen Datentransferkann Verweise und eingebettete Objekte enthalten baut auf TCP/IP aufzustandslose Datenübertragung:Verbindungsaufbau Request Response Verbindungsabbau Fehlerbehandlung, Timeouts
Aufbau einer Request:Request-Line Zugriffsmethode und URL General-HeaderRequest-HeaderEntity-HeaderCRLF Obligatorische Leerzeile. Trennt Kopf vom Rumpf.Entity-Body Nutzdaten (optional)
optional und spezifizieren den Request näher
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
86
Protokolle im Internet
Die Antwort (Response) auf einen Request hat einen ähnlichen Aufbau:Status-Line Ergebnis des Requests General-HeaderResponse-HeaderEntity-HeaderCRLFEntity-Body Nutzdaten (optional)
Einige Request-Methoden:GET Dokumentanforderung. Eventuell mit Parameter.HEAD Wie GET, aber ohne Nutzdaten in der Response. Link-Überprüfung.POST Übergabe der Daten an die URL, z.B. die Daten eines Formulars.PUT Abspeicherung der Daten unter der angegebenen URL,
was entsprechende Rechte des Client voraussetzt.
Mögliche Header-Daten: Zeichensatz, Sprache, Codierung, Kompression, Aktualität, Autorisierung, …
44
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
87
BrowsereinstellungenSicherheitsrelevante Einstellungen für Browser und Mail-Clients:Java und Javascript beim Firefox:
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
88
Browsereinstellungen
Sicherheitsrelevante Einstellungen für Browser und Mail-Clients:Java und Javascript beim SeaMonkey:
Ausschalten!Einfallstor für
Malware
Detaillierte Einstellungsmöglichkeiten
wie beim Firefox
45
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
89
Mail-Client-Einstellungen
Sicherheitsrelevante Einstellungen für den Thunderbird:Blockade von Javascript und dem Laden externer Bilder ab Thunderbird 2
Externe Bilder (auch unsichtbare) dienen Spammern zur Verifizierung der Gültigkeit einer Mailadresse.
Bei geblockten Bildern erscheint:
Damit kann mandas Bild im Einzelfall ladendieser Absenderadresse externe Bilder generell gestatten
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
90
Mail-Client: MaillistenVerantwortungsbewusster Umgang mit Maillisten:Probleme bei Mails an mehrere Adressaten:
Die Mailadressen im An- oder CC-Feld sind für alle Empfänger sichtbar: Datenschutz!Die Maillisten sind für Spammer interessant! Abfangen der Listen auf gekaperten / unsicheren Mailservern
Bei Maillisten im BCC-Feld☺ enthält jede Mail nur ihren Adressaten ☺ und der Spammer zieht ein Gesicht:
An-Feld nicht leer lassen!Manche Spamfilter reagieren sonst.
46
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
91
HistorieEntstehung des Internets:Konzept:Entstand in den 60iger Jahren im Auftrag des US-Verteidigungsministeriums.
Ziel: Militärisches Kommunikationssystem, das auch bei teilweiser Zerstörung noch funktioniert.
==> Keine zentrale Leitung und Organisation,festen geschalteten Verbindungen
wie bei einem Telefonnetz.Statt dessen Netz aus Knoten (Rechnern) mit Selbstverwaltung undredundanten Verbindungen.
Nachricht = Pakete, die (auch) auf verschiedenen Wegen in beliebiger Reihenfolge zum Empfänger gelangen können. Die zusammengefügten Pakete ergeben die empfangene Nachricht.
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
92
Historie
Ab 1969:1. Realisierung als ARPA-Net (4 Unis)
1973:Vernetzung von 40 Großrechnern. Präsentation in der Öffentlichkeit.Gründung der INWG (InterNetwork Working Group):
Erweiterung, internationale Integration, Satellitenkommunikation.
1982:Entstehung der freiverfügbaren Spezifikationen:TCP Transmission Control ProtocolIP Internet Protocol
1986:NFSNET als neuer Backbone. Löst 1990 das ARPA-Net ab.
47
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
93
Historie1989-1990:
Am CERN (Europäisches Zentrum für Teilchenphysik, Genf) wurde die erste WWW-Architektur entwickelt (Tim Berners-Lee und Robert Cailliau):HTTP Hypertext Transfer ProtocolHTML Hypertext Markup LanguageBrowser Client zur Darstellung der Information und zum Navigieren im NetzServer Verwaltet und versendet angeforderte Seiten.
Ziel: Rechner- und ortsunabhängiger Zugriff auf Forschungsberichte.
Das Konzept basiert auf dem TCP/IP-Protokoll des Internets.Etablierung des Systems am CERN in 1991Die Standards und die am CERN entwickelte Software waren von Anfang an frei verfügbar.
Das World Wide Web ist eine europäische Erfindung und nicht etwa eine amerikanische!
Deutschland (ab 1989): Universitäten Dortmund und Karlsruhe (Prof. Zorn)
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
94
Historie
Dezember 1991: Veröffentlichung der WWW-Architektur und Erfahrungsbericht in den CERN-Newsletters
Geburtsstunde des World Wide Webs (WWW)
Juli 1992:Erstes freiverfügbares WWW-Paket im Internet bestehend aus Server-SW, einem zeilenorientierten und einem X11/Motif-basiertem Browser (Viola).
Anfang 1993:Mosaic-Browser vom NCSA (Nat. Center for Super Computing, USA). Vorbild für viele heutige Browser. Bis 1995 der am meisten verbreitete Browser.
1994:Der Siegeszug des WWW zeichnet sich im Verlauf des Jahres ab: Die Anzahl der Server stieg weltweit
von ca. 800 (davon 100 allein in Deutschland) am Anfang des Jahres auf über 11.000 am Jahresende.
48
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
95
Historie
Ende 1994:Microsoft gibt seinen Widerstand gegen das Internet auf und verzichtet darauf, ein eigenes Netz zu etablieren.
Microsoft bringt einen eigenen Internet-Browser heraus, der bis heute in wesentlichen Punkten vom Standard abweicht.
Dazu gehört insbesondere die Komponente Active-X, deren konzeptionelle Schwächen immer wieder zu Lücken führt, die Virenimport und Fremdzugriff auf den Rechner gestatten.
1994: Etablierung des WWW als internationaler Kommunikationsstandard
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
96
Historie
Entwicklung der Host-Rechner:(Quellen: wikipedia.org, http://www.zakon.org/robert/internet/timeline/)
49
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
97
Historie, Entwicklung zwischen 1989 bis 1997Entwicklung
der Domains:
der Netzwerke:
(Que
lle: h
ttp://
ww
w.z
akon
.org
/robe
rt/in
tern
et/ti
mel
ine)
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
98
Historie, Internetnutzer
50
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
99
Historie, Anteil der Internetnutzer an der Gesamtbevölkerung
(Quelle: wikipedia.org)
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
100
Historie, Verteilung der Internetnutzer
Anteil der Internetnutzer an der Gesamtbevölkerung nach Ländern (2007)
(Quelle: wikipedia.org)
51
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
101
Historie, Verteilung der Internetnutzer
Anzahl der Internetnutzer nach Ländern (2007)
(Quelle: wikipedia.org)
Betriebssysteme Dr. W. JakobStudiengang Kartographie und Geomatik Internet.ppt
102
Historie, Weltmarktanteile der Browser
Anteile in 2005:
Anteile April 2010:
Entwicklung Juni 2008 – April 2010:
Quelle:Net Applicationshttp://www.netapplications.com