Praxismodul 1 - ETH E-Collection

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: [email protected]
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
Hyperlink
Host
WWW
Website
Domain
HTML
Grafikformat
Spam
Tag
URL
HTTP
Quellcode
IP-Adresse
FTP
Browser
Provider
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
Abb. 1:
6
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
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"!
7
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
1024 x 768
klein
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
Praxis 1 – Publizieren über Internet
11
Wie lautet meine WWW-Adresse?
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 IPAdresse ("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
Links mit Sprungziel
innerhalb der
Webseite
Grafik mit DirektBezug 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.
12
13
Praxis 1 – Publizieren über Internet
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.