Internet. Definition. des Signalverkehrs der Stecker der Datenrepräsentation. Betriebssysteme Studiengang Kartographie und Geomatik

Transkript

1 Internet Definition Dienste im Internet Domain-Adressierung Homepage an der HS Karlsruhe HTML Protokolle im Internet Sicherheitsrelevante Einstellungen Historie, Internetnutzer, Browseranteile 1 Definition Das Internet dient dem freien weltweiten Informationsverkehr seiner Nutzer durch vielfältigen Datenaustausch zwischen Rechnern aller Größenklassen, 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 2

2 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?? 3 Dienste im Internet Übersicht über die wichtigsten Dienste Im Internet: 4

3 Dienste im Internet Elektronische Post. Adressierung: MIME Protokoll (multipurpose internet mail extension): Texte HTML Binärdateien als Anhänge, z.b. Bilder, Programme usw. Vorsicht: Unverschlüsselte s 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 verschicken. 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,... 6

4 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 -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). 7 Dienste im Internet FTP-Verwaltungsfunktionen: Datei löschen und umbenennen Verzeichnisse anlegen, löschen und umbenennen Viele (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) 8

5 Dienste im Internet gftp: Datei-Logging Lokaler Rechner remote host Kommunikations- Logging 9 Dienste im Internet Lokaler Rechner remote host WS-FTP Lite Kommunikations- Logging 10

6 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!!) 11 Dienste im Internet ssh: Profiles: Gespeicherte Zugangsdaten 12

7 Dienste im Internet ssh bietet auch Filetransfer an: 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. 14

8 Domain-Adressierung Beispiel: Sub- Domain 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 15 Domain-Adressierung Zugriff auf den Web-Bereich eines Benutzers: <Zugriffsmethode>://<Domainadresse>/~<user-name> Weitere Verwendung der Domainadressierung, z.b. für die -Adressierung: <user-name>@<domainadresse> Adressauflösung: Der lokale Internet-Server kennt die Adresse kennt die Adresse kennt die Adresse nicht Teil der eigenen Domain wegen kürzlichem Zugriff und befragt den nächst übergeordneten Rechner in der Domain-Hierarchie. 16

9 Domain-Adressierung Hinter den symbolischen Domain-Adressen stehen numerische IP-Adressen. Nach IPv4 (Internet Protocol Version 4): nnn.nnn.nnn.nnn Netz- Host- Adresse 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, 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: 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) 18

10 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 URL 4. Der Zugriff auf eine andere Datei <filename>.html erfolgt über ~<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. 19 Homepage an der HS Karlsruhe 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 -Adresse an der Hochschule? 20

11 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: 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. 22

12 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! 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> <CODE>...</CODE> <EM>...</EM> <STRONG>...</STRONG> Zitate, typisch in italic. Auszüge von Programm-Code, typisch in monospaced font. Heraushebungen, typisch in italic. besondere Heraushebungen, typisch in fett. Zeilenwechsel: <BR> (line break) 24

13 HTML, Zeichenformatierung Beispiel: Erweitern Sie Ihre Datei entsprechend! 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> Zentrierung des Containerinhalts wie Text, Bilder, Tabellen usw. (deprecated) deprecated = missbilligt. Von weiterer Verwendung wird abgeraten. Alternative: Stylesheets 26

14 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. 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) -, FTP- oder Newsgroup-Adresse Datei zum Download... 28

15 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. 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. 30

16 HTML, Hyperlinks Hyperlink zu einer anderen Site: <A HREF=" 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=" 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 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? 32

17 HTML, Hyperlinks -Hyperlink: <a Voraussetzung: Der Browser unterstützt selbst s (z.b. SeaMonkey von Mozilla) Der Browser kennt einen -Client (z.b. Firefox den Thunderbird oder MS Internet Explorer den Outlook bzw. Outlook-Express) Mehrere Adressaten: <a Vorgabe des Betreffs: <a Das kann man auch kombinieren (allgemein: cgi (common gateway interface)): <a 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 -Link und testen Sie ihn. 34

18 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. 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. 36

19 HTML, Grafikeinbindung 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, ) 37 HTML, Grafikeinbindung 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. 38

20 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üs des Bildes. 4. Ergänzen Sie Ihr Bild durch die Größenangaben. 5. Verzerren Sie das Bild durch falsche Größenangaben. 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: 40

21 HTML, Grafik als Hyperlink Unterdrückung des Rahmens durch das Attribut border=0 Beispiel: (deprecated) Die hier verwendeten Attribute HSPACE, VSPACE und ALIGN sind ebenfalls deprecated. 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 42

22 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 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 44

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

24 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. 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> 48

25 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. 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; } 50

26 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> 51 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 Beispiele: #ffff00 rgb(255,255,0) rgb(90%,0%,90%) 52

27 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önnen Bereiche (<span> </span>) 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>) 54

28 HTML Trennlinien: Einfachste Form: <hr> Einige beispielhafte Vorgaben für Breite Farbe Dicke Rand Ausrichtung (horizontal rule) 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"> 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 (deprecated) oder CSS-konform: <style type="text/css"> table { border:none } /* das gilt dann für alle Tabellen */ </style> 56

29 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> <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> 57 HTML, Tabellen Einige Attribute des TABLE-Tags: BORDER=wert Dicke des Außenrahmens in Pixel. CELLSPACING=wert Dicke der Gitternetzlinien innerhalb einer Tabelle. CELLPADDING=wert Abstand zwischen Zelleninhalt und Rändern. (deprecated) 58

30 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 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 hätte ein einfaches Leerzeichen nicht genügt! 60

31 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. 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. 62

32 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). 63 HTML, Entities Einige Entities in memotechnischer Angabe: Beschreibung Ampersand kleiner als größer als Leerzeichen kleine ä, ü, ö große Ä, Ü, Ö scharfes s Grad Entity & < > (non blocking space) ä ü ö Ä Ü Ö ß Zeichen & < > äüö ÄÜÖ ß Ü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 Euro Copyright Paragraph Malzeichen x 64

33 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: 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. -Adresse. Dann METHOD="post" und enctype="text/plain Letzteres sorgt für bessere Lesbarkeit. Für Übungen und Studienarbeiten immer: Formularauswertung als <FORM METHOD="post enctype="text/plain"> 66

34 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 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. Der Name kann als ein Variablenname angesehen werden. Er sollte daher keine Umlaute, Leerzeichen und kaum Sonderzeichen enthalten. 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. 68