WWW-Kurs: Surfen und einfache Seiten erstellen

Themenkurs Benutzung der EDV-Systeme
Uni Regensburg WS 2000/2001; SS 2001; WS 2001/2002

Homepage erstellen

Allgemeines

Jeder Student bzw. Mitarbeiter der Uni Regensburg kann ohne große Vorbereitungen eine eigene Homepage ins Netz stellen. Die Adresse lautet dann z.B. http://www-nw.uni-regensburg.de/~.kou11702.jura.uni-regensburg.de/, wobei jeweils der eigene volle Benutzername einzusetzen ist.

Vorbereitung

Erstellen des Ordners WWW und darin Erzeugen einer Datei index.html (Doku des RZ). Nur was in diesem Verzeichnis ist, könnt Ihr auf Eurer Homepage anzeigen.
Auswahl des Programmes. Es bietet sich Ulli Meybohms HTML-Editor an, der einfache Textbearbeitung mit der Unterstützung für die fortgeschrittenen Optionen von HTML kombiniert. Den HTML-Editor findet Ihr an der Universität Regensburg in den CIP-Pool-Rechnern auf dem Desktop, sonst zum Download über den Link.

Die eigentliche Seite erstellt Ihr mit einer einfachen Programmiersprache namens HTML. Die Standard-Dokumentation zu HTML, der Sprache der Internet-Seiten, ist selfhtml (nicht mehr ganz aktuell, aber noch immer ungeschlagen).

Die Sprache HTML

Ein paar Grundregeln:

Alle Befehle müssen mit Kleinbuchstaben geschrieben werden (dies gilt erst seit neuerer Zeit, deshalb finden sich in den Beispielen hier gelegentlich noch Großbuchstaben).
Alle Befehle stehen in spitzen Klammern: <Befehl>.
Fast alle Befehle (außer , <img> und <hr> sowie einige exotischeren) müssen wieder geschlossen werden. Dies geschieht durch </Befehl>, also wie das Öffnen, nur mit Schrägstrich davor.
Befehle dürfen sich nicht verhaken. Falsch: , richtig: .
Bei Dateinamen (auch Bildern) immer auf Groß- / Kleinschreibung achten!
Ein Link muß immer etwas enthalten, was auch angezeigt werden kann. <a href="xyz.html"> </a> ist zwar ein Link, aber auf der Seite kann man ihn nicht ansehen.
Man kann in HTML beliebig Zeilenumbrüche / Absätze einfügen, aber nicht innerhalb eines Befehls!
Probieren! Im Programm HTML-Editor gibt es viele Knöpfe - einmal drücken, die Änderungen abspeichern, ein Reload der Seite im Browser - schon kann man das Ergebnis seiner Experimente im Web bewundern.

Noch ein Tipp: Mit View --> Page Source (unter Netscape) könnt Ihr Euch den Quelltext einer jeder Seite anschauen, die Ihr gerade im Browser geladen habt. Dadurch kann man viel lernen, wenn die Seiten nicht allzu kompliziert sind.

Das absolute Minimalgerüst einer Seite sieht so aus (unten dann ein etwas ausführlicheres Beispiel; XHTML und die enstprechenden XML-Definitionen wurden hier weggelassen):

<html>

<head>
<title>Hier ein Titel</title>
</head>

<body>

Hallo Welt!

</body>
</html>

Es ist wichtig, daß Ihr die hier gezeigte Aufteilung einhaltet: Die äßerste Klammer bildet der Befehl <HTML>. Darin befinden sich zwei Klammern: <HEAD> und <BODY>. Im Head werden Informationen über die Datei (Stichwörter und ähnliches, auch der Titel) eingefügt. Im Body kann man dann den eigentlichen Text der Seite schreiben.

Bilder

Bilder könnt Ihr Euch immer im WWW herunterladen (rechte Maustaste --> save image as), beachtet dabei aber das Urheberrecht. Einige kostenlose Sammlungen gibt es z.B. bei kostenlos.de (dort gibt es auch Counter, Gästebücher etc.).
Nach dem Herunterladen müßt Ihr die Datei ebenfalls im Verzeichnis WWW auf Eurem G-Laufwerk speichern. Die Bilder müssen in einem der Formate GIF, JPEG oder PNG vorliegen (d.h., daß die Dateien die Endung .gif, .jpg oder .png haben müssen). Mithilfe einen Graphikprogrammes kann man die unterschiedlichen Formate umwandeln (z.B. mit Irfan-View, im CIP-Pool unter Programme / Tools).

Hier gleich mal ein Bild zum üben:

Uebungsbild (Feuerwerk)

letzte Schritte

Die fertige Homepage kann man dann über die Benutzerauskunft des RZ jeweils für sich eintragen.
Das RZ trägt die Angaben mit einer bestimmten Zeitverzögerung (ca. ein Tag) in der Homepageliste ein.

Zur Selbstkontrolle gibt es dann noch den Homepagebastler.

Grundgerüst einer HTML-Seite

<html>

<head>
<title>Meine Homepage</title>
</head>

<body>
<h1>Ueberschrift erster Ordnung</h1>

<p>Einfacher Absatz<br>mit Zeilensprung</p>

<p align="center">Zentrierter Absatz</p>

<P><FONT COLOR="RED">Dieser Absatz enthaelt roten Text.</FONT></P>
<P><FONT FACE="Book Antiqua">Dieser Absatz ist in der Schriftart Book Antiqua 
(wenn sie diese Schriftart auf Ihrem Rechner installiert haben).</FONT></P>

<P><B>Fetter Text.<B><P>

<P><U>Unterstrichener Text.<U><P>

<P><I>Kursiver Text.<I><P>


<p><a href="http://www.yahoo.de">Link auf Yahoo.de</A></p>

<p><a href="mailto:ulf@kortstock.de">Mail an Ulf Kortstock</A></p>

<p>Und jetzt noch ein Bildchen: <img src="firewk-grn.gif" border="0" alt="Feuerwerk"></p>

</body>
</html>

Das Ergebnis sieht so aus (anklicken).

nützliche Links

Homepage an der Uni Regensburg (auch Unix-Nutzer): Infostand-Doku

Weiter zu Tips für Fortgeschrittene

Zurück zur Kursseite.