Meine erste Webseite

            Lutz.Donnerhacke@Jena.Thur.De
              Rene.Scholz@Jena.Thur.De

15. Februar 2000

Zusammenfassung

Schulungsunterlage für Einsteigerkurse im Internetraum des Jugendzentrums Trend in Jena durchgeführt vom Thüringen Netz e.V. mit freundlicher Unterstützung des Jugendzentrums Trend, der Stadt Jena und vieler fleißiger Helfer. Dieser Kurs dient dazu, die Beschreibungssprache html soweit kennenzulernen, dass man selbständig eine einfache html-Seite erstellen und verstehen kann.

1 Worum geht’s?

Im Internet^{1} kann man auf viele Weisen Informationen austauschen. Eine besonders typische Art der Informationsverbreitung besteht darin, dass die Information an einer Stelle bereitgestellt und von vielen anderen Stellen aus abgerufen werden kann.

Dieses sogenannte Client^{2}-Server^{3}-Prinzip ist mit dem WWW^{4} nur teilweise umgesetzt. Statt einem zentralen Server, der alle Informationen über alles bereithält, kann jeder teilnehmende Rechner als Server fungieren.

Aufgabe 1.1 Warum spricht man immer noch von einem Server, wenn doch die verschiedenen Informationen an vielen verschiedenen Stellen abgelegt sein können?

Die Vielzahl der Datenquellen verkompliziert die Informationssuche. So wie die Literatur zu einem bestimmten Thema oft unüberschaubar ist, so

1 Weltweiter Verbund von Rechentechnik 2 Datensenke 3 Datenquelle 4 World-Wide-Web – Weltweites Geflecht.

verweist doch jedes ernstzunehmende Werk auf Andere. Diesen Hinweisen kann man folgen und so Schritt für Schritt die Informationen aus vielen Büchern destillieren.

Aufgabe 1.2 Wie kann man vorab erkennen, welche Buchtipps sinnvoll sind und welche nicht weiterhelfen?

Während es mit Papier einfach ist, immer ein ansprechendes Erscheinungsbild zu erzeugen, setzt der Einsatz von Rechentechnik dem ungeahnte Schwierigkeiten gegenüber. Man kann bei der Informationsaufbereitung also nicht davon ausgehen, dass die Darstellung am eigenen Schirm irgend etwas mit den Darstellungsmöglichkeiten am Zielsystem zu tun hat.

So muß html^{5} mehrere Aufgaben lösen:

• Informationen inhaltlich strukturieren,

• Verweise auf andere Informationsquellen leicht nutzbar machen,

• Maschinell in verschiedene Darstellungen umwandelbar sein.

2 Strukturierung

Dokumente in html sind in erster Linie reine Textdokumente, in denen die besonderen inhaltlichen Strukturelemente durch besondere Markierungen (deswegen auch »Markup«) eingebettet sind.

Ein Tag^{6} »name« beginnt mit <name ...> und endet mit </name>. Dort, wo die Auslassungspunkte stehen, kann nähere Zusatzinformation zu dieser Struktur stehen. Zwischen Anfangs- und Endtag befindet sich die Information, die zu dieser Struktur gehört.

Aufgabe 2.1 Welche Struktur ist das: <Satz Modus="Frage">Welche

Struktur ist das:  <Code><Tag Option="Modus, Frage">Satz</Tag>
Welche ...  </Code><Satz>

Ein html-Dokument besteht aus folgender Grundstruktur:

<HTML> <HEAD> ...  </HEAD> <BODY> ...  </BODY> </HTML>

Die Einträge im <BODY> werden auf dem Zielsystem dargestellt, wogegen die Einträge im <HEAD> diese Darstellung genauer steuern. So findet sich im <HEAD> die Information über Kopfzeilen und Verfasser, während im <BODY> die gesamten eigentlichen Informationen Platz finden. Eingerahmt wird das Ganze von <HTML>.

5 HyperText Markup Language – Verweis- und Auszeichnungssprache 6 Strukturelement

html ignoriert die Anzahl der Leerzeichen und Leerzeilen, da dies von System zu System unterschiedlich interpretiert werden kann. Statt dessen wird auch die Absatzstruktur durch Tags dargestellt. Jeder neue Absatz beginnt mit <P>.

Aufgabe 2.2 Wie sieht ein html-Dokument aus, das aus zwei Absätzen besteht?

3 Erste Schritte

Zum Bearbeiten und Ansehen von html-Dokumenten benötigen Sie einen Editor, mit dem sie umgehen können und einen Webbrowser^{7}.

Eine mögliche Kombination besteht aus dem Netscape Navigator (oder dem Internet Explorer von Microsoft) und dem Windows-Editor »notepad«. Das entsprechende Dokument kann auf dem Desktop^{8} angelegt werden. Die Datei sollte die Endung html haben. Nach dem Speichern jeder Änderung muß man im Navigator Reload anwählen.

Eine andere Alternative ist der Einsatz von Lynx und einem beliebigen Unix-Texteditor. Aus Lynx kann man mit E direkt in den Editor für die aktuelle Seite springen. Beim Verlassen des Editors lädt Lynx automatisch die aktualisierte Seite neu. |vi datei.html| und |lynx datei.html|.

Aufgabe 3.1 Erstellen Sie die kleine html-Datei aus Aufgabe 2.2 und zeigen Sie diese an.

Aufgabe 3.2 Tragen Sie im <HEAD> zusätzlich <TITLE> Meine erste Webseite </TITLE> ein. Fügen Sie anschließend vor dem ersten Absatz <H1> Überschrift </H1> ein. Interpretieren Sie das Ergebnis.

4 Gestaltung

Die Gliederung des Textes erfolgt durch Überschriften. Dafür stehen die Tags <H1>, <H2>, … zur Verfügung.

Aufgabe 4.1 Welches ist die niedrigste Überschrift, die noch als solche erkannt wird?

Andere Strukturelemente, die den Text aufgliedern, sind Aufzählungen, Auflistungen und Beschreibungslisten:

7 Clientprogramm zur Anzeige der Daten 8 Virtueller Arbeitsplatz

Auflistung:^{9} <UL> <LI>Anstrich <LI>Anstrich </UL>
Aufzählung:^{10} <OL> <LI>Anstrich 1 <LI>Anstrich 2 </OL>
Beschreibung:^{11} <DL> <DD>Begriff <DT>Erklärung </DL>

Aufgabe 4.2 Erstellen Sie eine Liste Ihrer Hobbies unter der passenden Überschrift.

Will man Text im laufenden Text auszeichnen, so bieten sich die logischen Formen an. So schreibt man <EM> hervorgehoben </EM> – hervorgehoben

und <STRONG> auffallend </STRONG> – auffallend.

Aufgabe 4.3 Wie wirkt <EM> und <STRONG> aus der Ferne betrachtet?

5 Ablage und Aufruf von Webseiten

Liegt das Dokument datei.html im Pfad^{12} /dir/zur/dat/ei/ auf dem Rechner mit dem Hostname^{13} host.dom.ain, so kann diese html-Datei unter der

url^{14} http://host.dom.ain/dir/zur/dat/ei/datei.html abgerufen wer-

den. Das setzt voraus, dass auf diesem Rechner auch ein Webserver läuft, der Zugriff auf den angegebenen Pfad und die Datei hat.

Um auf eine fremde Webseite zu verlinken, kann man im laufenden Text

<A HREF="URL"> sichtbarer Hinweistext </A> einfügen.

Aufgabe 5.1 Fügen Sie in ihrer Datei den Hinweis auf die url dieses Scripts

ein: http://www.iks-jena.de/mitarb/lutz/vortrag/

Viel Erfolg für die nächsten Projekte.

9 \underline{u}nordered \underline{l}ist 10 \underline{o}rdered \underline{l}ist 11 \underline{d}escription \underline{l}ist 12 Abfolge von Verzeichnisordnern – Directories –, die zu der Datei führen. Die Trennstriche werden grundsätzlich durch / beschrieben, auch wenn im aktuellen Betriebssystem ein anderer Trenner eingestellt wurde. Windows verwendet hier oft \ . 13 Es handelt sich hier um einen Internetnamen, der die generelle Form host.dom.ain hat. 14 Unified Resource Locator – Eindeutige Angabe der Informationsquelle

6 Lösungen zu den Aufgaben

1.1 Für eine konkrete Information existiert nur eine kleine Menge von Datenquellen. Oft ist es nur genau eine solche Datenquelle – ein Server eben. 1.2 Die Verweise in der Literatur sind nicht platt, sondern beziehen sich auf einen bestimmten Kontext. Anhand dieser Zusatzinformation erkennt man, ob der Verweis für einen selbst brauchbar ist. 2.1 Ein Satz, der eine Frage darstellt, enthält etwas Text gefolgt von einem Code-Stück. Dieser Code besteht aus einem Tag, das das Wort »Satz« enthält und wieder Text. Abschließend beenden sich alle offenen Strukturen.

2.2 <HTML> <HEAD> </HEAD> <BODY> <P> Erster Absatz <P> Zweiter Absatz
</BODY> </HEAD>

3.1 Man kann die Datei noch etwas besser formatieren. So sollten z. B. zueinander passende Tags untereinander stehen. 3.2 Der Text in <TITLE> erscheint in der Kopfzeile des Browsers, die <H1>- Überschrift dagegen hervorgehoben im Text.

4.1 <H6>

4.2 Es tut mir leid, aber ich habe die Kristallkugel verlegt. Grundsätzlich sollte man nach einem passenden <H?> auf die Auflistung <UL> zurückgreifen können. 4.3 <EM> paßt sich in den laufenden Text ein und fällt so erst beim Durchlesen auf. <STRONG> dagegen zieht das Auge an und unterbricht so den Lesefluß. <STRONG> kennzeichnet somit Dinge, die man schnell wiederfinden soll.

5.1 <A HREF="http://www.iks-jena.de/mitarb/lutz/vortrag/">Vorträ-
ge</A> von <A HREF="mailto:Lutz.Donnerhacke@jena.thur.de">Lutz</A>

7 Beispiel-Webseite

Dies ist eine kleine Beispiel-Seite (demo.html):

<HTML>
  <HEAD>
    <TITLE>Meine 1. Homepage</TITLE>
    <META name="description"  content="Meine Homepage über ...">
    <META name="author"       content="Hans Maulwurf">
  </HEAD>
  <BODY>
  <H1 align="center">Willkommen auf meiner Homepage!</H1>

<P>
 Hier findest du viele <EM>interessante Dinge</EM>, zB. ...

<HR>
<P>
 Hier kannst du mir eine
 <A HREF="mailto:ICH@Jena.Thur.de">Mail schicken</A>.
</BODY>
</HTML>

8 Weiterführende Litaratur

• HTML-Einführungen von H. Partl:

  http://www.boku.ac.at/htmleinf/

• HTML-Einführung, von Dierk Lucyga:

  http://www.uni-konstanz.de/org/provider/html.html

• Deutsche HTML-FAQ:

  http://www.franken.de/users/tychen/faq/htmlfaq.html

• Englischsprachige Original-Spezifikationen (W3-Consortium):

  http://www.w3.org/

• HTML und das World Wide Web (Buch):

  http://www.oreilly.de/german/freebooks/Html_buch/inhalt.html

• »Self-HTML« von Stefan Münz:

  http://www.teamone.de/selfhtml/

• Die Goldenen Regeln fuer schlechtes HTML:

  http://www.karzauninkat.com/Goldhtml/