Internet

Transcription

Internet

Internet
Definition
Dienste im Internet
Domain-Adressierung
Homepage an der HS Karlsruhe
HTML
Protokolle im Internet
Sicherheitsrelevante Einstellungen
Historie, Internetnutzer, Browseranteile
Betriebssysteme
Studiengang Kartographie und Geomatik
Dr. W. Jakob
Internet.ppt
1
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 Rechnerhersteller
Fehlende Standards
Heterogenität
…
des Signalverkehrs
der Stecker
der Datenrepräsentation
Betriebssysteme
Dr. W. Jakob
Internet.ppt
2
1
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. Jakob
Internet.ppt
3
Dienste im Internet
Übersicht über die wichtigsten Dienste Im Internet:
Betriebssysteme
Dr. W. Jakob
Internet.ppt
4
2
Dienste im Internet
Email:
Elektronische Post. Adressierung:
<user>@<domain-address>
MIME –Protokoll (multipurpose internet mail extension):
Texte
HTML
Binä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. Jakob
Internet.ppt
5
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 Mailclient
Verwaltung lokal durch den Mailclient
IMAP: Ein Postfach mit Unterordnern
Gestaffeltes Herunterladen möglich (Kopf, Mail, Anhang)
Verwaltung durch den Mailserver
Zentrale 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, ...
Betriebssysteme
Dr. W. Jakob
Internet.ppt
6
3
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-Dateien
Sound-Dateien
formatierte Texte wie WinWord-Dokumente
Files können komprimiert sein (z.B. zip, winzip).
Betriebssysteme
Dr. W. Jakob
Internet.ppt
7
Dienste im Internet
FTP-Verwaltungsfunktionen:
Datei löschen und umbenennen
Verzeichnisse 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)
…
Betriebssysteme
Dr. W. Jakob
Internet.ppt
8
4
Dienste im Internet
gFTP:
Datei-Logging
Lokaler Rechner
remote host
KommunikationsLogging
Betriebssysteme
Dr. W. Jakob
Internet.ppt
9
Dienste im Internet
Lokaler Rechner
WS-FTP Lite
Betriebssysteme
remote host
KommunikationsLogging
Dr. W. Jakob
Internet.ppt
10
5
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-UX
OpenSSH (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. Jakob
Internet.ppt
11
Dienste im Internet
ssh:
Profiles:
Gespeicherte
Zugangsdaten
Betriebssysteme
Dr. W. Jakob
Internet.ppt
12
6
Dienste im Internet
ssh bietet auch Filetransfer an:
Betriebssysteme
Dr. W. Jakob
Internet.ppt
13
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.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
14
7
Domain-Adressierung
Beispiel:
http://www.HS-Karlsruhe.de/[<Pfad>/[<File>]]
SubDomain
Domain Haupt-Domain
(Länderkennung)
Domain-Adresse
Seperator
Seperator
Zugriffsart
Domainadresse:
Meist 3 oder 4 Komponenten, selten 5
Rechte Komponente bezeichnet den Rechner (Alias-Name)
Bei fehlender Dateiangabe: Zugriff auf eine serverabhängige Defaultdatei
z.B.: Welcome.html oder index.htm
Betriebssysteme
Dr. W. Jakob
Internet.ppt
15
Domain-Adressierung
Zugriff 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-Server
kennt die Adresse
Teil der eigenen Domain
kennt die Adresse
wegen kürzlichem Zugriff
kennt die Adresse nicht und befragt den nächst übergeordneten
Rechner in der Domain-Hierarchie.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
16
8
Domain-Adressierung
Hinter den symbolischen Domain-Adressen stehen numerische IP-Adressen.
Nach IPv4 (Internet Protocol Version 4):
nnn.nnn.nnn.nnn
HostNetzAdresse
nnn < 256
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 Schreibweise
Unterteilung in 8 Blöcke zu je 16 Bit getrennt durch Doppelpunkte
Beispiel einer IPv6-Adresse:
2a01:0db8:85a3:08d3:1319:8a2e:0370:7344
Betriebssysteme
Dr. W. Jakob
Internet.ppt
17
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)
Betriebssysteme
Dr. W. Jakob
Internet.ppt
18
9
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 URL
http://www.home.hs-Karlsruhe.de/~<user>
4. Der Zugriff auf eine andere Datei <filename>.html erfolgt über
http://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. Jakob
Internet.ppt
19
Beispiel 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?
Betriebssysteme
Dr. W. Jakob
Internet.ppt
20
10
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
Überschriften
Textabsä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. Jakob
Internet.ppt
21
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.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
22
11
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 notwendig
Erstellung der Default-Datei mit dem Editor pico oder
mit einem Editor von MS Windows. Dazu Netzlaufwerk einrichten: \\ads\dfs\HS\Homes\
Lösungsbeispiel:
Weitere HTML-Beispiele auf der Homepage im Vorlesungsplan!
Betriebssysteme
Dr. W. Jakob
Internet.ppt
23
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>
Betriebssysteme
(line break)
Dr. W. Jakob
Internet.ppt
24
12
HTML, Zeichenformatierung
Beispiel:
Erweitern Sie Ihre Datei
entsprechend!
Betriebssysteme
Dr. W. Jakob
Internet.ppt
25
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
Betriebssysteme
Dr. W. Jakob
Internet.ppt
26
13
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. Jakob
Internet.ppt
27
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 Datei
andere HTML-Datei der gleichen Site (der gleichen URL)
eine HTML-Datei einer anderen Site (allgemeine WWW-Adresse)
Email-, FTP- oder Newsgroup-Adresse
Datei zum Download
...
Betriebssysteme
Dr. W. Jakob
Internet.ppt
28
14
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 Einsprungstelle
Der 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. Jakob
Internet.ppt
29
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.htm
im Unterverzeichnis uvz
Sprungziele innerhalb einer anderen Datei werden immer mit # angehängt.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
30
15
HTML, Hyperlinks
Hyperlink zu einer anderen Site:
<A HREF="http://www.bmw.de/">Zu BMW</A>
Verweis auf die Defaultdatei der Site
Bei 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. Jakob
Internet.ppt
31
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:
anzeigen
runterladen
ausführen
Bei den meisten Browser erfolgt aus Sicherheitsgründen eine Nachfrage.
Was für Sicherheitsgründe?
Betriebssysteme
Dr. W. Jakob
Internet.ppt
32
16
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. Jakob
Internet.ppt
33
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
Adressat
cc
Adressat einer Kopie (carbon copy)
bcc
Die Adressaten sehen diese Adresse nicht (blind carbon copy)
reply-to Antwort-Adresse
subject Betreff
...
Welches Risiko bergen solche Links?
Übung 4:
Erweitern Sie eine Ihrer Dateien um einen Email-Link und testen Sie ihn.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
34
17
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. Jakob
Internet.ppt
35
HTML, Grafikeinbindung
Einbindung von Grafiken:
Anzeige von Fotos oder Grafiken innerhalb einer Seite
Anzeige durch den Browser oder ein Plug-in
Nicht auflösbare Referenzen ergeben ein Ersatzbild:
Gängige Formate für das Web:
Firefox MSIE
JPG oder JPEG: Für Fotos
GIF:
Für (animierte) Grafiken
PNG:
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.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
36
18
Alternativer Text, Tooltip-Anzeige:
Zweck des Attributs für alternativen Text ALT="text":
Information während des Bildladens
Information bei abgeschaltetem Bildladen
Information 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. Jakob
Internet.ppt
37
Festlegung der Bildgröße:
Vorgabe der Bildgröße durch die Attribute
WIDTH=wert und HEIGHT=wert
wert in Pixel oder als %-Angabe des verfügbaren Platzes
Effekte:
Schnellerer Seitenaufbau, da der Browser den Platz für die Grafik
reservieren kann
Bildskalierung. Besser mit einem Grafiktool! Warum?
Bildverzerrungen
Beispiel:
<IMG SRC="bild.gif" WIDTH=100 HEIGHT=60>
Einbindung eines Bildes im Format 100 x 60 Pixel.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
38
19
Ü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üs
des Bildes.
4. Ergänzen Sie Ihr Bild durch die Größenangaben.
5. Verzerren Sie das Bild durch „falsche“ Größenangaben.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
39
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:
Betriebssysteme
Dr. W. Jakob
Internet.ppt
40
20
HTML, Grafik als Hyperlink
Unterdrückung des Rahmens durch das Attribut border=0
(deprecated)
Beispiel:
Die hier verwendeten
Attribute HSPACE,
VSPACE und ALIGN
sind ebenfalls
deprecated.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
41
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:
einstellbar
je nach Komprimierungsgrad (bis auf ca. 2 % der ursprünglichen Größe) erhebliche
Qualitätsverluste möglich
Bild nach Komprimierung kontrollieren!
Vorteile:
hohe Kompressionsraten
hohe Verbreitung (Bildbearbeitungsprogramme)
Nachteile:
Komprimierungsbedingte Schärfe- u. Farbverluste
Betriebssysteme
Dr. W. Jakob
Internet.ppt
42
21
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 Zeichnungen
animierte Grafiken
Grafiken mit transparentem Hintergrund
Komprimierung:
LZW, verlustfrei, nicht einstellbar
Kompressionsrate vom Bildinhalt abhängig (mittlere Kompressionsraten)
Vorteile:
keine Kompressionsverluste
hohe Verbreitung (Bildbearbeitungsprogramme)
Nachteile:
nur maximal 256 Farben darstellbar
Betriebssysteme
Dr. W. Jakob
Internet.ppt
43
HTML, Grafikformate
PNG-Format:
Bildtiefe: Truecolor (16,7 Mio Farben) oder Farbpalette mit max. 256 Einträgen
Anwendungsbereich:
geeignet für kleine bis mittelgroße Bilddateien.
bestens geeignet zur Darstellung von Grafiken und Zeichnungen
gut geeignet für Fotos
Grafiken mit transparentem Hintergrund
Komprimierung:
verlustfrei, nicht einstellbar
Kompressionsrate vom Bildinhalt abhängig (mittlere Kompressionsrate)
Vorteile:
keine Kompressionsverluste
gute Verbreitung (Bildbearbeitungsprogramme)
Nachteile:
bei fotorealistischen Bildern geringere Kompression als JPG
keine Animation
Betriebssysteme
Dr. W. Jakob
Internet.ppt
44
22
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 Image
Zuordnung 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. Jakob
Internet.ppt
45
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-Tag
Das TITLE-Attribut liefert wie zuvor ein kleines Infofenster ( Tooltip).
Betriebssysteme
Dr. W. Jakob
Internet.ppt
46
23
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. Jakob
Internet.ppt
47
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>
Betriebssysteme
Dr. W. Jakob
Internet.ppt
48
24
HTML, Stylesheets
Stylesheets (Cascading Style Sheets, CSS):
Formatfestlegungen in separaten Dateien
Einheitliches Layout
Auch als lokale Definition allein oder ergänzend zu externen Stylesheets
Diverse 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. Jakob
Internet.ppt
49
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 9
Safari (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; }
Betriebssysteme
Dr. W. Jakob
Internet.ppt
50
25
HTML, Stylesheets
Lokale Einbindung von Stylesheets in den Kopf einer HTML-Datei:
<style type="text/css">

</style>
Stylesheets in HTML-Kommentar (), damit CSS-unkundige Browser die
Deklarationen nicht als anzuzeigenden Text missinterpretieren.
Beispiel:
<head>
...

</style>
</head>
oder:
<head>
...
img { border:none; }
</style>
</head>
Betriebssysteme
Dr. W. Jakob
51
Internet.ppt
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, white
RGB-Farbe:
Variante 1: #rrggbb mit r=rot, g=grün b=blau als Hexadezimalzahlen
Variante 2: rgb(rrr,ggg,bbb) Absolutwerte (0..255) oder Prozent
Betriebssysteme
Beispiele:
#ffff00
rgb(255,255,0)
rgb(90%,0%,90%)
Dr. W. Jakob
Internet.ppt
52
26
HTML, Formatierung und Farben
Hintergrundfarben und -bilder:
<head>
<title>background-color</title>
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önnen
Bereiche (<span> … </span>)
Betriebssysteme
Dr. W. Jakob
Internet.ppt
53
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>)
Betriebssysteme
Dr. W. Jakob
Internet.ppt
54
27
HTML
Trennlinien:
Einfachste Form: <hr>
(horizontal rule)
Einige beispielhafte Vorgaben für
Breite
Farbe
Dicke
Rand
Ausrichtung
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. Jakob
Internet.ppt
55
HTML, Tabellen
Tabellen:
Zwei Funktionen:
1. Tabelle
2. Mittel zur Gestaltung des Webseiten-Layouts (blinde Tabellen)
(problematisch wegen Barrierefreiheit)
Blinde Tabellen haben keinen Rand:
Attribut border=0
oder CSS-konform:
table { border:none }
</style>
Betriebssysteme
(deprecated)
/* das gilt dann für alle Tabellen */
Dr. W. Jakob
Internet.ppt
56
28
HTML, Tabellen
Allgemeiner 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>
</TR>
<TR>
<TD>Datenzelle: 2. Zeile, 1. Spalte</TD>
</TR>
<TR>
</TR>
</TABLE>
Betriebssysteme
Dr. W. Jakob
Internet.ppt
57
HTML, Tabellen
Einige Attribute des TABLE-Tags:
BORDER=wert
Dicke des Außenrahmens in Pixel.
(deprecated)
CELLSPACING=wert
Dicke der Gitternetzlinien innerhalb einer Tabelle.
CELLPADDING=wert
Abstand zwischen Zelleninhalt und Rändern.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
58
29
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=farbe
Hintergrundfarbe für die Tabelle. farbe: VGA-Farbe oder RGB-Angabe
FRAME=wert
Bestimmt den Tabellenrahmen.
wert=void:
kein Rahmen
box, border: vollständiger Rahmen
above:
obere Randlinie
below:
untere Randlinie
hsides:
obere und untere Randlinie
vsides:
rechte und linke Randlinie
rhs, lhs:
rechte bzw. linke Randlinie
Betriebssysteme
Dr. W. Jakob
Internet.ppt
59
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">
Ein Fehler!
Für ein leeres Feld …
Betriebssysteme
… hätte ein einfaches
Leerzeichen nicht
genügt!
Dr. W. Jakob
Internet.ppt
60
30
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. Jakob
Internet.ppt
61
HTML, Tabellenbeispiel
Deklaration des Dokumententyps:
HTML PUBLIC: Bezug auf eine
öffentlich verfügbare HTML-DTD
(Dokumententypdefinition)
W3C: des W3-Konsortiums
HTML 4.01: HTML-Versionsangabe
Spezifikation der loose.dtd:
Variante Transitional. Erlaubt
einige deprecated Elemente.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
62
31
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. Jakob
63
Internet.ppt
HTML, Entities
Einige Entities in memotechnischer Angabe:
Beschreibung
Entity
Zeichen
Ampersand
&
&
kleiner als
<
<
größer als
>
>
Leerzeichen
  (non blocking space)
kleine ä, ü, ö
ä ü ö
äüö
große Ä, Ü, Ö
Ä Ü Ö
ÄÜÖ
scharfes s
ß
ß
Grad
°
°
Euro
€
€
Copyright
©
©
Paragraph
§
§
Malzeichen
×
x
Betriebssysteme
Übung 8:
1. Ergänzen Sie eine Ihrer
Webseiten mit einigen
Entities aus der Tabelle der
nächsten Folie.
Z.B.:
€ 7°C
©
7x8
Ä ß
2. Experimentieren Sie mit dem
Leerzeichen  
Dr. W. Jakob
Internet.ppt
64
32
HTML, Formulare
Formulare:
Formulare erlauben eine Interaktion des Benutzers mit dem Server.
Anwendungsbeispiele:
Benutzung einer Suchmaschine
Routenplaner
Anmeldung bei einem Reiseportal
Reisebuchung
Angebotserstellung bei Ebay
…
Art der Datenübertragung:
Datenabfrage:
Daten zum Server übertragen:
Betriebssysteme
Dr. W. Jakob
Internet.ppt
65
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">
Betriebssysteme
Dr. W. Jakob
Internet.ppt
66
33
HTML, Formulare
Wichtige Eingabefelder (immer innerhalb des FORM-Containers):
Einzeilige Textfelder
Eingabefeld für Passwörter
Mehrzeilige Textfelder
Auswahllisten
Radiobuttons
Checkboxes
Versteckte Felder
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.
Dateibuttons (Upload)
Absende- und Abbruch-Button
Der Name kann als ein Variablenname angesehen werden. Er sollte daher
keine Umlaute, Leerzeichen und kaum Sonderzeichen enthalten.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
67
HTML, Formulare
Einzeilige Textfelder:
<INPUT NAME="xyz" TYPE="TEXT" SIZE=swert MAXLENGTH=mwert>
SIZE:
Größe des angezeigten Eingabefeldes
MAXLENGTH: 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.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
68
34
HTML, Formulare
Mehrzeilige Textfelder:
<TEXTAREA NAME="kommentar" COLS=cwert ROWS=rwert>
Bitte geben Sie hier was ein!

</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. Jakob
Internet.ppt
69
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-Liste
MULTIPLE: Mehrfachauswahl möglich (Hinweis an Benutzer, Ctrl+Click)
SELECTED: Vorauswahl
VALUE:
Übertragung des vorgegebenen Wertes an Stelle des Textes.
Seit HTML 4.0 gibt es auch verschachtelte Auswahllisten.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
70
35
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. Jakob
Internet.ppt
71
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!
Betriebssysteme
Dr. W. Jakob
Internet.ppt
72
36
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. Jakob
Internet.ppt
73
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)
Betriebssysteme
Dr. W. Jakob
Internet.ppt
74
37
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, *.html
Liste 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. Jakob
Internet.ppt
75
HTML, Formulare
Beispiel:
<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>
Klick öffnet ein
<INPUT TYPE=SUBMIT VALUE="Absenden">
Standardfenster des
BS zur File-Auswahl
</FORM>
Automatisch
erzeugter Button
Betriebssysteme
Dr. W. Jakob
Internet.ppt
76
38
HTML
Ausblick:
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 wurden
Frames (Einteilung des Bildschirms in getrennt verwaltbare Bereiche)
CSS, insbesondere Klassendefinitionen und separate Stylesheets
Multimedia-Objekte wie Sounds, Videos, usw.
JavaScript
Perl- oder PHP-Script (siehe Perl-Beispiel auf der Homepage)
Dynamisches HTML (siehe Beispiel auf der Homepage)
XHTML
Webserver und cgi
Betriebssysteme
Dr. W. Jakob
Internet.ppt
77
HTML
Regeln 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!
Betriebssysteme
Dr. W. Jakob
Internet.ppt
78
39
Protokolle im Internet:
Konventionen zur Regelung des Datenaustausch zwischen Rechnern
Wichtige Anforderungen an Internet-Protokolle:
Unabhängigkeit von der Netzwerk-Hardware
Unterschiedliche Übertragungsmedien (Kupferkabel, Lichtleiter, ...)
und Netzwerktypen (Ethernet, Token Ring, ...)
Erreichbarkeit aller Rechner weltweit
Fehlererkennung und -korrektur
Logische Adressierung
Logische Rechneradressen (Domain-Adressen) statt hardwareorientierte Adressierung
(Rechneraustausch!)
Auf- und Abbau von Verbindungen
Skalierbarkeit
Wachsende Hardware-Leistung, gesteigertes Datenvolumen, wachsender Netzumfang
Effizienz
Möglichst geringer Kommunikations-Overhead
Betriebssysteme
Dr. W. Jakob
Internet.ppt
79
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)
Betriebssysteme
Dr. W. Jakob
Internet.ppt
80
40
Übertragung von kleinen Datenpaketen (Frames) bestehend aus
Kopf mit Adressangaben
Rumpf (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. Jakob
Internet.ppt
81
Port-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
Betriebssysteme
mehreren Clients und Servern
Auf den FTP-Server 2 greifen z.B.
zwei Clients von einem Rechner zu
Dr. W. Jakob
Internet.ppt
82
41
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. Jakob
83
Internet.ppt
Proxys:
proxy (engl.) = der Bevollmächtigte
proximus (lat.) = der naheste, nächste
Client 1
Client 2
...
Server 1
Proxy
(für Clients)
Internet
Internet
Reverse
Proxy
Server 2
...
Client n
Funktionen:
Firewall
Zugriffsbeschränkung
Datenvorverarbeitung
Anonymisierung
Bandbreitenkontrolle
Tunnelung
(Durchschleusung protokollfremder Daten)
Caching (verliert an Bedeutung)
Betriebssysteme
Server m
Funktionen:
Firewall
Lastverteilung
Lastübernahme durch
Verschlüsselung
Datenvorverarbeitung
Protokoll- oder Formatanpassungen
(translating proxy)
Tunnelung
Caching (verliert an Bedeutung)
Dr. W. Jakob
Internet.ppt
84
42
HyperText Transfer Protocol (HTTP):
typ- und formatunabhängigen Datentransfer
kann Verweise und eingebettete Objekte enthalten
baut auf TCP/IP auf
zustandslose Datenübertragung:
Verbindungsaufbau
Request
Response
Verbindungsabbau
Fehlerbehandlung, Timeouts
Aufbau einer Request:
Request-Line
General-Header
Request-Header
Entity-Header
CRLF
Entity-Body
Zugriffsmethode und URL
optional und spezifizieren
den Request näher
Obligatorische Leerzeile. Trennt Kopf vom Rumpf.
Nutzdaten (optional)
Betriebssysteme
Dr. W. Jakob
Internet.ppt
85
Die Antwort (Response) auf einen Request hat einen ähnlichen Aufbau:
Status-Line
Ergebnis des Requests
General-Header
Response-Header
Entity-Header
CRLF
Entity-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, …
Betriebssysteme
Dr. W. Jakob
Internet.ppt
86
43
Browsereinstellungen
Sicherheitsrelevante Einstellungen für Browser und Mail-Clients:
Java und Javascript beim Firefox:
Betriebssysteme
Dr. W. Jakob
Internet.ppt
87
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
Betriebssysteme
Dr. W. Jakob
Internet.ppt
88
44
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 man
das Bild im Einzelfall laden
dieser Absenderadresse externe Bilder generell gestatten
Betriebssysteme
Dr. W. Jakob
Internet.ppt
89
Mail-Client: Maillisten
Verantwortungsbewusster 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.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
90
45
Historie
Entstehung 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 und
redundanten 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. Jakob
Internet.ppt
91
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 Protocol
IP Internet Protocol
1986:
NFSNET als neuer Backbone. Löst 1990 das ARPA-Net ab.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
92
46
Historie
1989-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 Protocol
HTML
Hypertext Markup Language
Browser Client zur Darstellung der Information und zum Navigieren im Netz
Server
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 1991
Die 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. Jakob
Internet.ppt
93
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.
Betriebssysteme
Dr. W. Jakob
Internet.ppt
94
47
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. Jakob
Internet.ppt
95
Historie
Entwicklung der Host-Rechner:
(Quellen: wikipedia.org, http://www.zakon.org/robert/internet/timeline/)
Betriebssysteme
Dr. W. Jakob
Internet.ppt
96
48
Historie, Entwicklung zwischen 1989 bis 1997
(Quelle: http://www.zakon.org/robert/internet/timeline)
Entwicklung
der Domains:
der Netzwerke:
Betriebssysteme
Dr. W. Jakob
Internet.ppt
97
Historie, Internetnutzer
Betriebssysteme
Dr. W. Jakob
Internet.ppt
98
49
Historie, Anteil der Internetnutzer an der Gesamtbevölkerung
(Quelle: wikipedia.org)
Betriebssysteme
Dr. W. Jakob
99
Internet.ppt
Historie, Verteilung der Internetnutzer
Anteil der Internetnutzer an der Gesamtbevölkerung nach Ländern (2007)
Betriebssysteme
Dr. W. Jakob
Internet.ppt
100
50
Historie, Verteilung der Internetnutzer
Anzahl der Internetnutzer nach Ländern (2007)
Betriebssysteme
Dr. W. Jakob
Internet.ppt
101
Historie, Weltmarktanteile der Browser
Anteile in 2005:
Anteile April 2010:
Entwicklung Juni 2008 – April 2010:
Quelle:
Net Applications
http://www.netapplications.com
Betriebssysteme
Dr. W. Jakob
Internet.ppt
102
51

Internet

Transcription

Similar documents

Kryptowährungen – Eine Alternative zu SWIFT - Informatik

Ausarbeitung - Goethe

DEMOKRIT 7.5.3 deutsch

Russland - Germanistisches Seminar

Automatisierung des Tests von Java-Swing-GUIs