Internet - HS-KARLSRUHEjawi0001/BS-Vorlesung/K4_Internet_Ha… · Files können komprimiert sein (z.B. zip, winzip). Betriebssysteme Dr. W. Jakob Studiengang Kartographie und Geomatik

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


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


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?

?


4

Dienste im Internet

Übersicht über die wichtigsten Dienste Im Internet:

3


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.


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


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).


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


9

Dienste im InternetgFTP:

Kommunikations-Logging

Lokaler Rechner remote hostDatei-Logging


10

Dienste im Internet

WS-FTP Lite Kommunikations-Logging

Lokaler Rechner remote host

6


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!!)


12

Dienste im Internet

ssh:

Profiles:Gespeicherte Zugangsdaten

7


13

Dienste im Internetssh bietet auch Filetransfer an:


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


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


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


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


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


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.


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


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


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


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:


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


25

HTML, Zeichenformatierung

Beispiel:Erweitern Sie Ihre Datei entsprechend!


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


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.


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


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.


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


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


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


33

HTML, Hyperlinks

Email-Hyperlink:<a href="mailto:[email protected]">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:[email protected][email protected]">Mail</a>

Vorgabe des Betreffs:<a href="mailto:[email protected]?subject=Antwort">Mail</a>

Das kann man auch kombinieren (allgemein: cgi (common gateway interface)):<a href="mailto:[email protected][email protected]&subject=Antwort">Mail</a>


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


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.


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


37


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, …)


38


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


39


Ü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.


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


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.


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


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


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


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


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


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.


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


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.


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


51

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:oder:

<head> <head>... ...<style type="text/css"> <style type="text/css">

 img { border:none; }</style> </style>

</head> </head>


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


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>)


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


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">


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


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>


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


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


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


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.


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


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).


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


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:


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:[email protected]" METHOD="post“

enctype="text/plain">

34


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.


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


69

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.


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


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


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


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?


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


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.


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


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


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


79


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


80


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


81


Ü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.


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


83


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>]


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


85


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


86


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


87

BrowsereinstellungenSicherheitsrelevante Einstellungen für Browser und Mail-Clients:Java und Javascript beim Firefox:


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


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


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


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.


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


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)


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


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


96

Historie

Entwicklung der Host-Rechner:(Quellen: wikipedia.org, http://www.zakon.org/robert/internet/timeline/)

49


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)


98

Historie, Internetnutzer

50


99

Historie, Anteil der Internetnutzer an der Gesamtbevölkerung

(Quelle: wikipedia.org)


100

Historie, Verteilung der Internetnutzer

Anteil der Internetnutzer an der Gesamtbevölkerung nach Ländern (2007)


51


101

Historie, Verteilung der Internetnutzer

Anzahl der Internetnutzer nach Ländern (2007)



102

Historie, Weltmarktanteile der Browser

Anteile in 2005:

Anteile April 2010:

Entwicklung Juni 2008 – April 2010:

Quelle:Net Applicationshttp://www.netapplications.com

Documents

Internet - HS-KARLSRUHEjawi0001/BS-Vorlesung/K4_Internet_Ha… · Files können komprimiert sein (z.B. zip, winzip). Betriebssysteme Dr. W. Jakob Studiengang Kartographie und Geomatik