Erstellen von Web-Seiten HTML und mehr... SS 2002 Duffner: Interaktive Web-Seiten 1
Themen! Was ist das WWW?! Client-Server-Konzept! URL! Protokolle und Dienste! HTML! HTML-Editoren! Ergänzungen und Alternativen zu HTML! Vorgehensweise beim Erstellen von Web-Seiten! Gestaltungsempfehlungen SS 2002 Duffner: Interaktive Web-Seiten 2
Was ist das WWW? Das WWW (World Wide Web)! ist ein Dienst im Internet! dient der Informationsbeschaffung und -bereitstellung! ist ein interaktives verteiltes Hypermedia-System " Hypermedia-System: # Text, Graphik, Sound, Video,... # Verweise auf andere Seiten (Dokumente) " verteilt : Dokumente auf verschiedenen Computern gespeichert " einheitliches Format für die Darstellung der Daten (HTML)! unterstützt graphische Benutzeroberflächen für die Informationssuche " Browser (z.b. Microsoft Internet Explorer, Netscape Navigator,...) SS 2002 Duffner: Interaktive Web-Seiten 3
Client-Server-Konzept! Im WWW gibt es Dienstanbieter (Server) und Dienstabnehmer (Clients) " Web-Server: Programm, das Daten für das WWW anbietet " Browser (Client): Programm, das Daten vom Server anfordert! Kommunikation zwischen Client (Browser) und Server: " Server wartet auf Verbindungswunsch eines entfernten Clients " Anfrage des Client an den Server " Server bearbeitet die Anfrage und schickt die gewünschten Daten zurück $Anfrage über URL SS 2002 Duffner: Interaktive Web-Seiten 4
Uniform Resource Locator (URL)! Ein URL erlaubt eine einheitliche und eindeutige Beschreibung von Internet-Quellen.! Um eine bestimmte Information im Internet finden zu können, muss man drei Dinge wissen:! um welche Art von Information es sich handelt (Protokoll/Dienst),! auf welchem Rechner die Information zu finden ist (Name des Servers) und! wo auf diesem Rechner sich die Information befindet (Pfad, Dateiname, eventuell Textmarke). Beispiel für einen URL: http:// www.ph-freiburg.de/ zik/mitarbeiter.htm/#mueller Protokoll/ Dienst Name des Servers Pfad Dateiname Textmarke SS 2002 Duffner: Interaktive Web-Seiten 5
Protokolle und Dienste! TCP/IP: Transmission Control Protocol/Internet Protocol # liegt der Kommunikation im Internet zugrunde # WWW-Protokoll, Mail-Protokolle,... setzen auf TCP/IP auf. " http: Übertragungsprotokoll des WWW (Hypertext Transfer Protocol) # http://www.ph-freiburg.de/zik " mailto: E-Mail-Dienst (Protokoll: smtp, sendmail, pop...) # duffner@ph-freiburg.de " ftp: Dateitransfer (File Transfer Protocol) # ftp://ftp.ruf.uni-freiburg.de/pub/pc/windows/mailer/eudor152.exe "... SS 2002 Duffner: Interaktive Web-Seiten 6
HTML HyperText Markup Language! HTML ist eine Auszeichnungssprache (HyperText Markup Language).! Grundlegende Idee: Inhalt und Darstellung eines Textdokumentes werden getrennt.! HTML beschreibt die logischen Bestandteile eines Dokuments: " Überschriften, Textabsätze, Tabellen oder Grafikreferenzen.! Dabei geht HTML von einer hierarchischen Gliederung aus. " Dokumente mit Eigenschaften wie Titel, Hintergrundfarbe... # Elemente, wie z.b. eine Überschrift 1. Ordnung. - Einige Elemente haben wiederum Unterelemente: Ein Textabsatz enthält z.b. eine fett markierte Textstelle, eine Tabelle enthält einzelne Tabellenzellen,...! Auszeichnungen (tags) " Bsp.: [Überschrift] Text der Überschrift [Ende Überschrift] # <h1>eine Überschrift </h1>! WWW-Browser lösen die Auszeichnungsbefehle einer HTML-Datei auf und stellen die Elemente am Bildschirm dar. SS 2002 Duffner: Interaktive Web-Seiten 7
HTML II! Namensgebende und wichtigste Eigenschaft von HTML ist die Hypertextfähikeit. " Verweise ("Hyperlinks") können zu anderen Stellen im eigenen Web- Angebot (interne Links) führen, aber auch zu beliebigen anderen Internet-Adressen (externe Links).! Aktuelle Version: HTML 4.01 (Spezifikation: http://www.w3.org/tr/rec-html40/)! HTML ist ein Klartext-Format (ASCII-Text).! SELFHTML: Umfangreiche Einführung in HTML und verwandte Themen von Stefan Münz: http://www.teamone.de/selfaktuell/ \\Server01\schwarzes_brett$\Mathematik und Informatik\Duffner\selfhtml\index.htm (hier auch als gepackte Datei: selfhtml80.zip) SS 2002 Duffner: Interaktive Web-Seiten 8
HTML-Editoren! Zwei Typen: " Textbasierten Editoren " WYSIWYG-Editoren (WYSIWYG = What You See Is What You Get)! Einige Editoren für Windows: " Arachnophilia (HTML-Editor) " Composer (Wysiwyg-Editor von Netscape Communicator; kostenlos) " Frontpage Express (kostenlos) " Dreamweaver (Wysiwyg-Editor von Macromedia) " Frontpage (Wysiwyg-Editor von Microsoft)! Textverarbeitungsprogramme! Präsentationsprogramme! Autorensysteme!... SS 2002 Duffner: Interaktive Web-Seiten 9
Ergänzungen und Alternativen zu HTML! client-seitig " CSS (Cascading Style Sheets) Layoutvorlagen für eine Web-Site " JavaScript (auch server-seitig) Skriptsprache, die zusammen mit HTML die Erstellung von interaktiven Dokumenten ermöglicht. " Java-Applets programmiert mit Java (plattformunabhängige Programmiersprache von Sun Microsystems) " ActiveX Microsofts Antwort auf Java, funktioniert nur für MS Windows " XML (Extensible Markup Language) mögliche Nachfolgerin für HTML " Plugins Browser-Erweiterungen zur Interpretation bestimmter Dateiformate " Flash animierte Vektorgrafiken fürs Web; erfordert Plugin Shockwave SS 2002 Duffner: Interaktive Web-Seiten 10
Ergänzungen u. Alternativen zu HTML II server-seitig Im Unterschied zu statischen normalen HTML-Seiten werden hier HTML- Seiten dynamisch auf dem Server erzeugt und an den Client gesendet. CGI (Common Gateway Interface) Mit CGI können Skripte geschrieben werden, die interaktive, vom Nutzer gesteuerte Anwendungen erzeugen. PHP (Hypertext Preprocessor) In HTML eingebettete Skriptsprache für die dynamische Erzeugung von Web-Seiten. Java-Servlets Pendant zu Applets auf Server-Seite. Server Side JavaScript... SS 2002 Duffner: Interaktive Web-Seiten 11
CGI aus: Münz, Stefan: Die Energie des Verstehens: HTML-Dateien selbst erstellen. Version 7.0 vom 27.04.1998. http://www.teamone.de/selfaktuell/ SS 2002 Duffner: Interaktive Web-Seiten 12
Erstellen eines Web-Angebotes! Zielgruppe definieren! Struktur der Web-Site festlegen Homepage! Seiten-Layout festlegen Seite1 Seite2! Seiten mit Inhalt (Text, Grafiken,...) füllen! Links einfügen Seite2a! interne und externe Links überprüfen! Fertige Seiten mit verschiedenen Browsern sowie mit unterschiedlichen Auflösungen überprüfen! Test mit verschiedenen Nutzern! WWW-Seiten auf Web-Server kopieren Seite3 http://www... SS 2002 Duffner: Interaktive Web-Seiten 13
Gestaltungsempfehlungen Style Guide for online hypertext http://www.w3.org/provider/style/overview.html Ergonomie neuer Medien und des World-Wide-Webs http://www.kommdesign.de/ 10 Leitlinien für die Gestaltung eines ergonomischen WWW-Informationssystems http://vsys-www.informatik.uni-hamburg.de/ergonomie/ Die Goldenen Regeln für schlechtes HTML http://www.karzauninkat.com/goldhtml/goldhtml.htm SS 2002 Duffner: Interaktive Web-Seiten 14