Institut für Wissenschaftliches Rechnen Prof. Dr. H. Hinterberger Praxismodul 1 Publizieren über Internet mit MS Frontpage Express
Praxis 1 Publizieren über Internet 2 Copyright 2003 Institut für Wissenschaftliches Rechnen, ETH Zürich. Prof. Dr. Hans Hinterberger Autoren: Lukas Fässler, Nenad Milosevic, Daniel Theis Die Entwicklung der Anwendungsführer für die Praxismodule wurde vom Fonds Filep des Rektorats der ETH Zürich unterstützt. http://www.filep.ethz.ch Trotz sorgfältiger Arbeit schleichen sich manchmal Fehler ein. Die Autoren sind Ihnen für Anregungen und Hinweise dankbar! E-Mail: hinterberger@inf.ethz.ch http://www.evim.ethz.ch Der Inhalt der einzelnen Module von "Einsatz von Informatikmitteln" sowie der Anwendungsführer unterliegt dem Urheberrecht. Die Dokumente dürfen nur im Internet und ausschliesslich in der im Internet vorliegenden Form und Fassung kopiert weitergegeben und verwendet werden. Veränderungen, Kürzungen, Erweiterungen sind untersagt. Ausdrucken und jede andere Vervielfältigung ist nur zum persönlichen Gebrauch gestattet und nur unter der Bedingung, dass der Urheberrechtsvermerk mit dem Dokument selbst mit ausgedruckt wird, resp. beim Vervielfältigen auf dem Dokument selbst erhalten bleibt. Jede Veröffentlichung in anderen Medien als dem Internet oder jede Übersetzung bedarf der schriftlichen Einwilligung durch das In stitut für Wissenschaftliches Rechnen der ETH Zürich. Gewerbliche Nutzung oder Nutzung zu Schulungszwecken durch Dritte bedarf ebenfalls der schriftlichen Einwilligung durch das Institut für Wissenschaftliches Rechnen der ETH Zürich. Die in diesem Buch behandelten Hard- und Software-Bezeichnungen sind zugleich eingetragene Warenzeichen und sollten als solche behandelt werden.
Praxis 1 Publizieren über Internet 3 Wie bearbeite ich dieses Modul? Dieses Praxismodul bearbeiten Sie am effizientesten, wenn Sie die folgenden drei Teile in angegebener Reihenfolge angehen: Teil A: Einführung...Seite 5 Dieses Praxismodul zum Thema Publizieren über Internet ist eine Anwendung von Abschnitt 4.2 und Kapitel 6 des Vorlesungstextes. Hier finden Sie eine kurze Einführung zum Thema aus der Sicht der Anwender. Teil B: Anwendungsführer...Seite 7 Der Anwendungsführer Praxis 1 ist ein computergestützter Lehrgang, der Ihnen in 9 Lektionen zeigt, w ie Sie Internetseiten erstellen und verwalten. In diesem Anwendungsführer werden Sie eine Beispiel-Internetseite... mit Text, Grafiken und Tabellen erstellen. mit anderen Seiten verlinken. auf das WWW laden. Zeitaufwand: 1 bis 2 Stunden Teil C: Testataufgabe...Seite 9 Bei der Testataufgabe werden Sie mit Hilfe der im Anwendungsführer angeeigneten Fähigkeiten eine eigene Homepage gestalten. Zeitaufwand: 1 bis 2 Stunden Begriffe: In diesem Praxisteil werden folgenden Begriffe behandelt: Homepage WWW HTML Tag Quellcode Browser Hyperlink Website Grafikformat URL IP-Adresse Provider Host Domain Spam HTTP FTP
Praxis 1 Publizieren über Internet 4
Praxis 1 Publizieren über Internet 5 Fig. 1 Wie kann Information über das Internet ausgetauscht werden? Um Information auszutauschen, setzen Computer unterschiedliche Kommunikationsprotokolle ein (siehe Begleittext Abschnitt 4.2). Zur Übertragung von Webseiten über das Internet wird beispielsweise das Hypertext Transfer Protocol (HTTP) verwendet. Es definiert eine bestimmte Form, in der Texte, Grafiken etc. zwischen Computern übermittelt werden sollen. Ist die Kommunikation ein Austausch im World Wide Web (WWW), dann interpretiert ein Browser (z.b. Internet Explorer) die ankommenden Hypertext-Dokumente (z.b. Webseiten) und stellt sie auf dem Bildschirm dar. Neben HTTP "verstehen" Webbrowser auch FTP, das File Transfer Protocol (FTP). Dieses Protokoll ist vor allem zum schnellen Download und Austausch von Dateien geeignet. Mehr dazu finden Sie in der Broschüre "Einführung in E-Dienste" der ETH Zürich. HTML die Sprache zur Darstellung von Webseiten Hypertext ist eine Methodik, die es erlaubt, über Querverweise in einem Dokument an beliebige Stellen innerhalb oder ausserhalb des Dokuments zu "springen". Diese Technik wurde durch ihre Anwendung in Webseiten zu einem de facto Standard in der Darstellung von Information im Internet. HTML ist die Abkürzung für HyperText Markup Language, ein Dateiformat zur Erstellung von Webseiten. HTML-Dateien tragen die Dateiendung ".html" oder ".htm" (um Computer zu berücksichtigen, die nicht mehr als drei Buchstaben lange Erweiterungen verarbeiten) und bestehen aus unformatiertem Text (siehe Abb. 1). Spezielle Steuercodes erlauben komplexe Layouts, Grafikeinbindung und Verweise auf andere Webseiten, sogenannte Links. Web-Browser lesen die HTML-Codes, interpretieren sie und setzen sie ins grafische Erscheinungsbild um. In den meisten Browsern können Sie den HTML-Code oder in diesem Zusammenhang auch "Quellcode" genannt (engl. source-code) einer Webseite anschauen.
Praxis 1 Publizieren über Internet 6 Abb. 1: Der HTML-Code und seine Darstellung im Browser-Fenster. Alles was zwischen <Klammern> steht, ist HTML-Code und wird in der Browser-Ansicht nicht angezeigt. Solche "Tags" bestehen jeweils aus einem öffnenden und ein schliessenden Teil. Der Schliessende enthält zusätzlich ein /-Zeichen. Der Bereich zwischen <html> und </html> weist auf ein HTML-Dokument hin, <head> bis </head> definiert einen Kopfzeilenbereich, der z.b. den Titel der Webseiten enthält und zwischen <body> und </body> steht der darzustellende Text. Ein HTML-Tag kann mit Attributen erweitert werden. Mit <body bgcolor="black"> wird beispielsweise der Hintergrund schwarz dargestellt. HTML-Editoren Prinzipiell würde ein Text-Editor ausreichen, um HTML-Seiten zu erstellen. Da aber kaum jemand alle Tags auswendig kennt, gibt es HTML-Editoren, die das Programmieren von HTML-Webseiten erleichtern. Dabei können Sie die Seiten grafisch durch direkte Manipulation bearbeiten, als würden Sie z. B. in der Textverarbeitung Word ein Dokument erstellen. Der HTML-Code wird dann im Hintergrund geschrieben. Den Code selber verändern Sie nur noch, um spezielle Anpassungen vorzunehmen. Vorgehen Sie werden sich zunächst im Anwendungsführer das Basiswissen rund um einen HTML-Editor (Frontpage Express) aneignen, um dann damit in der Testataufgabe Ihre eigene Homepage zu erstellen.
Praxis 1 Publizieren über Internet 7 Fig. 2 Arbeiten Sie den Anwendungsführer Praxis 1 durch! Sie finden den Anwendungsfrüher auf Ihrer CD-ROM oder über http://www.evim.ethz.ch. Im Anwendungsführer Praxis 1 lernen Sie......die grundlegenden Seitenparameter einer Webseite festlegen (Lektion 1)...Text formatieren (Lektionen 2, 4 und 7)...Grafiken integrieren (Lektion 3)...Tabellen erstellen (Lektionen 5 und 6)...Hyperlinks und Sprungziele setzen (Lektion 8)...Homepage ins WWW laden (Lektion 9) System-Voraussetzungen PC mit Internetverbindung. Hinweis zur Verwendung von MS Frontpage: In diesem Anwendungsführer verwenden wir den frei erhältlichen HTML-Editor Frontpage Express. Falls Sie eine Lizenz für die Vollversion von MS Frontpage besitzen, können Sie diese auch verwenden. Es treten dann allerdings einige Abweichungen in den Menüs und Abbildungen auf. Weitere Hinweise finden Sie auf dem Blatt "Informationen zum Aufbau der Praxisteile"!
Praxis 1 Publizieren über Internet 8
Praxis 1 Publizieren über Internet 9 Fig. 3 1. Einleitung Wozu eine eigene Homepage? Die eigene Homepage dient dem Informationsaustausch, um beispielsweise Ihre Daten auf dem Internet (Abk. Interconnected network) für andere Interessierte zugänglich machen. Die Idee dazu stammt aus dem Forschungsbereich, weil dort oft die Notwendigkeit besteht, Informationen mit Arbeitsgruppen auf der ganzen Welt auszutauschen. Sie können Ihre Webseite (bzw. Ihren Speicherplatz) auch dazu benutzen, um Daten und Dokumente abzulegen, die Ihnen dann an jedem Computer mit Internetanschluss zur Verfügung stehen. Eine Homepage erlaubt es Ihnen also auch, Ihren Informationsarbeitsplatz ortsunabhängig zu gestalten. Wie ist eine Homepage aufgebaut? Die Homepage ist die Start- oder Hauptseite eines Informationsanbieters im Internet. Diese ist oft Ausgangspunkt zu einem Verbund von HTML-Seiten eines Web-Auftrittes, was dann als "Web-Site" bezeichnet wird (Abbildung 2). Abb.2: Mögliche Struktur eine Website. Die Startseite wird standardmässig mit index.html benannt. Damit wird sie später im Internet automatisch geladen. Weitere HTML-Seiten sind über Links mit der Startseite verbunden. Bilder werden häufig in einem zentralen Ordner gespeichert.
Praxis 1 Publizieren über Internet 10 Was muss ich bei der Gestaltung meiner Homepage beachten? Eine Webseite sollte übersichtlich und ansprechend gestaltet sein. Es muss insbesondere auf gute Zugänglichkeit zu den einzelnen Informationen geachtet werden: Sprungmenüs oder das Aufteilen der Information auf mehrere Seiten ermöglicht ein schnelles Auffinden. Weiter sollten Sie beachten, dass beim Betrachten Ihrer Homepage nicht allen die selbe Bildschirmfläche zur Verfügung steht. Die Bildschirmauflösung wird in Anzahl Bildpunkte (Pixel) in der Höhe x Breite angegeben (Tabelle 1). Damit auch auf Bildschirmen mit kleinerer Auflösung alles dargestellt wird, sollten Sie Ihre Homepage auflösungsunabhängig entwerfen. Anzahl Bildpunkte Höhe x Breite in Pixel Auflösung 600 x 800 klein 1024 x 768 mittel 1280 x 1024 gross Tab. 1: Die am häufigsten gebrauchten Bildschirmauflösungen Normaler Fliesstext wird in HTML automatisch umgebrochen, wenn sich die Fenstergrösse ändert, nicht aber in Tabellen mit fester Breite. Denken Sie also auch an die Bildschirmbreite, wenn Sie Tabellen zur Position von Text und Bild einsetzten. Abhilfe dabei schafft das Verwenden von Tabellen mit relativen Angaben (in % der Bildschirmbreite). Ein wichtiger Teil jeder Website ist eine Sammlung von Links zu anderen Seiten im Netz. Dabei sollten Sie darauf achten, dass diese Linksammlung stets aktuell bleibt und dass die meisten Betrachter Ihrer Webseite davon ausgehen, dass Sie die Auffassungen der Webseiten teilen, auf die Sie verweisen. Schlussendlich gehört zu jeder Homepage die Möglichkeit, mit dem Inhaber über E-Mail in Kontakt zu treten und die Angabe über die Aktualität der Seite. Vorsicht, Spam... Als Spam wird die unerwünschte Werbung per E-Mail bezeichnet. Deshalb sollten Sie sich gut überlegen, ob Sie Ihre E-Mail-Adresse auf Ihrer Webseite publizieren wollen. Spammer grasen mit Such-Robotern Webseiten nach brauchbaren E-Mail-Adressen ab und speichern sie, um später flächendeckend und unaufgefordert Werbebotschaften zu versenden. Eine Möglichkeit, sich davor zu schützen, ist, die Mailadresse in eine Grafik zu verpacken, statt einen Link mit Ihrer Mailadresse zu erzeugen. So muss allerdings jemand, der Ihnen eine E-Mail zukommen lassen will, die Adresse abtippen. Hier nochmals zusammenfassend die Punkte, die beim Entwurf einer Webseite wichtig sind: Übersichtlichkeit des Inhalts Seitenbreite (Bildschirmauflösung) E-Mail und andere Adressen Aktuelle und bedeutungsvolle Links Datum der letzten Bearbeitung
Wie lautet meine WWW-Adresse? Praxis 1 Publizieren über Internet 11 Wenn Sie Ihre Homepage fertig haben, müssen Sie sie noch ins Netz stellen, damit sie ortsunabhängig abgerufen werden kann. Dafür benötigen Sie einen Internet-Service-Provider (ISP), der Ihnen auf einem Webserver den notwendigen Speicherplatz bereitstellt. Diese Dienstleistung wird Web-Hosting genannt. In Ihrem Fall ist dies der n.ethz-server der ETH Zürich. Jeder Computer braucht im Internet eine eindeutige IP- Adresse ("Internet Protocol"-Adresse). Diese besteht aus Zahlenkombinationen, wie z.b. 129.132.97.10 für den n.ethz-server der ETH Zürich. Die ersten beiden Zahlenblöcke 129.132 sind dabei für alle Server der ETH Zürich identisch. Da man sich diese Adresse nur schlecht merken könnte, werden diese IP-Adressen in einprägsamere Host-Adressen umgewandelt, wie z.b.: http://www.n.ethz.ch. Unter einer Domain werden Computer organisatorisch unter einem Namen zusammengefasst. Schweizer Internetrechner gehören in der Regel zur Top-level-Domain.ch, jene der ETH Zürich zur secondlevel-domain ethz.ch. Ihre Homepage ist also unter folgender URL (Uniform Resource Locator =eindeutig identifizierbare Adresse eines Webservers) erreichbar: http://www.n.ethz.ch/student/nethz-benutzername Wenn diese Adresse gewählt wird, wird automatisch Ihre Datei index.html gestartet. Die Struktur der URL nochmals zusammengefasst: 2. Aufgaben Vorgehen im Überblick: A) Eine Homepage mit einem HTML-Editor erstellen. B) Die Homepage mittels FTP aufs Internet laden. Teil A: Homepage erstellen Erstellen Sie mit einem HTML-Editor (Frontpage Express) Ihre persönliche Homepage mit den in Abbildung 3 gezeigten Elementen. Dazu gehört: Eine Übersicht mit Links zu den einzelnen Kapiteln. Informationen in Text und Bild über Sie, Ihren Studiengang und sonstige Interessen. Links zur Vorlesungsseite, zu einer oder einem Assistierenden Ihrer Wahl (Auswahl unter www.evim.ethz.ch), zu einer Studienkollegin oder einem Studienkollegen. Ein Extra -"Dienst" z.b. Gästebuch, Zugriffszähler oder Memory -Spiel (Details siehe nächster Abschnitt).
Praxis 1 Publizieren über Internet 12 Links mit Sprungziel innerhalb der Webseite Grafik mit Direkt- Bezug aus dem WWW E-Mail-Link Grafik mit Link auf URL Tabelle Link auf weitere HTML-Seite in Ihrem Web-Ordner Link mit URL als Sprungziel Aufzählung Datum Abb. 3: Vorschlag einer einfachen Homepage. Diese Elemente sollte Ihre Homepage enthalten.
Praxis 1 Publizieren über Internet 13 Extra-"Dienst" in Ihre Homepage einbinden Im Folgenden finden Sie Vorschläge für das Einbinden eines Extra-Dienstes in Ihre Homepage aufgeteilt in drei Schwierigkeitsgrade: Ein Gästebuch, ein Zugriffszähler oder ein Memory -Spiel. Das Ziel soll dabei sein, dass Sie HTML-Codes aus dem Internet beziehen und in Ihre Seite einbauen. Beim Gästebuch brauchen Sie lediglich einen Link am richtigen Ort einzufügen, beim Zugriffszähler müssen Sie den HTML-Code mit einer Zeile ergänzen und beim Memory-Spiel brauchen Sie gar einige Änderungen im Code vorzunehmen. Die drei Vorschläge im Überblick: Gästebuch: In einem Gästebuch können Besucher eine für andere Besucher sichtbare Nachricht hinterlassen. Melden Sie sich beim Gästebuchanbieter an, und in wenigen Minuten ist Ihre Homepage mit einem funktionierenden Gästebuch ausgestattet. Wie Sie dieses in Ihre Homepage einbetten, erfahren Sie ebenfalls unter dieser Adresse. http://freegb.ch/ Zugriffszähler: Ein Zugriffszähler zeigt Ihnen auf einen Blick an, wie viele Besucher Ihre Website angeklickt haben. http://support.swiss-web.com/doc/counter Memory-Spiel: Das Memory-Spiel ist ein Beispiel einer dynamischen HTML-Seite, d.h. dass sich die Seite auf Grund von Benutzereingaben verändern kann. http://evim.ethz.ch/tipps/memory Teil B: Homepage via FTP auf den Web-Server laden Kopieren Sie Ihre Homepage in Ihr n.ethz Home-Verzeichnis auf dem zentralen File-Server (z.b. via FTP). Hinweis: Damit die Homepage später automatisch geladen wird, müssen Sie die dort vorhandene Datei index.html mit Ihrer Homepage-Datei ersetzten. 3. Form und Bedingungen Führen Sie einer Assistentin oder einem Assistenten Ihre funktionierende Homepage vor. Diese sollte über das WWW auf Ihren Computer geladen werden können. Die Begriffe dieses Praxisteils sollten Sie mit einfachen Worten erklären können. 4. FAQ's zur Testataufgabe Wie erstelle ich eine Tabelle, die aussieht, wie in Abbildung 3? Die Tabelle besteht aus 3 Zellen und 3 Spalten, wobei einige Zellen miteinander verschmolzen wurden. In Frontpage Express können Sie nur ganze Spalten anwählen. Daher müssen Sie zuerst eine 2x3 Tabelle erstellen, die beiden Zellen in Spalte 1 verbinden und dann eine weitere Zeile einfügen.