Title:

Eine frei verwendbare Unix-Grundlagenschulung mit muLinux

Home
deutsch

ISBN: 3938151579 ISBN: 3938151579 ISBN: 3938151579 ISBN: 3938151579

Wir empfehlen:

Eine frei verwendbare Unix-Grundlagenschulung mit muLinux

Erstellen einer einfachen Website

In diesem Kapitel werden wir eine kleine Website erstellen. Dies hat nicht direkt etwas mit Unix zu tun. Wir trainieren dadurch aber dessen Handhabung. Wir schreiben die notwendigen HTML-Befehle von Hand mit dem Texteditor vi und testen auf einer anderen Konsole mit dem WWW-Browser das Ergebnis. Dies ist sehr spartanisch. Der erzeugte HTML-Code ist aber optimierter als bei vielen HTML-Editoren. Und ist auf allen WWW-Browsern darstellbar.

Wir loggen uns dafür auf der ersten Konsole ein. Um unsere Website dauerhaft speichern zu können sollte unsere Arbeitsdiskette nach /a gemountet sein. Wir mounten daher unsere Arbeitsdiskette und erzeugen auf der Diskette ein Verzeichnis "mywebsite".

/# mount /dev/fd0 /a
/# mkdir /a/mywebsite

Auf der zweiten Konsole starten wir quark.

/# quark http://localhost

[r]eload [g]o [b]ack [v]iew [u]rls [s]ave [d]ownload [P]rint [q]uit [h]elp Welcome to PYGMY (pygmean) WWW server! ---------------------------------------------------------------------------- This is a placeholder page installed by the muLinux setup scripts, because no home page was installed on this host. You may want to replace this as soon as possible with your own web pages, of course.... PYGMY is a small HTTP server, implemented with a shell script (2174 bytes) and netcat port scanner. PYGMY run via /etc/inittab and support: images, download and directory browsing. Remember: images are fetched one by one, pressing RELOAD button in your browser. Ehmm: the image is on the X11 addon ... :( http://localhost Quark v.xx cursor up/down, pag up/down to move vxx, hyperlink mode

Nun zeigt die Adresse http://localhost hier auf das Verzeichnis /home/httpd. Wir wechseln in der ersten Konsole in dieses Verzeichnis.

/# cd /home/httpd
/home/httpd# _

Da wir ja unsere Website auf unsere Arbeitsdiskette im Verzeichnis "mywebsite" speichern wollen, erzeugen wir einen Link dorthin. Anschließend wechseln wir in das Verzeichnis "mws".

/home/httpd# ln -s /a/mywebsite mws
/home/httpd# cd mws
/a/mywebsite/mws# _

In der zweiten Konsole geben wir in quark die neue URL ein:

URL:http://localhost/mws

[r]eload [g]o [b]ack [v]iew [u]rls [s]ave [d]ownload [P]rint [q]uit [h]elp Index of /home/httpd/mws ---------------------------------------------------------------------------- [1] < Parent directory > ---------------------------------------------------------------------------- powered by PYGMY - muLinux rusric WWW server, on 'muLinux ' http://localhost/mws Quark v.xx

Da dieses Verzeichnis noch leer ist, serviert uns unser Webserver PYGMY nur die Verzeichnisansicht. Wir erstellen nun als erstes die Datei index.html. Diese Datei liefert ja der Webserver wenn nur das Verzeichnis angefordert wurde. In der ersten Konsole starten wir unseren Lieblingseditor auf der muLinux Diskette:

/a/mywebsite mws# vi index.html

HTML-Befehle (Tags) werden in spitzen Klammern eingeschlossen. Groß- und Kleinschreibung ist egal. Falsch geschriebene oder unbekannte Tags werden ignoriert. Viele Tags sind Paare aus öffnenden und schließenden Befehlen, um Bereiche zu definieren. Die schließenden Befehlen haben nach der öffnenden spitzen Klammer ein Slash. Die gesamte HTML-Datei wird mit <html> ... </html> eingeschlossen.

Im vi wechseln wir mit i in den Einfügemodus und tippen die Tags ein.

<html>


</html>

Nun speichern wir mit [Esc], Doppelpunkt und w. Danach wechseln wir zur zweiten Konsole.

In quark reloaden wir mit r die Ansicht.

Wir sehen nun nicht mehr sehr viel. Nun ja wir haben ja zwischen den HTML-Tags auch nichts zu stehen. Nur mit dem Befehl [v]iew (view, engl. für sehen) kann man sich den Quellcode anschauen.

Mit q kann man den Viewer wieder verlassen.

Zurück zur ersten Konsole und zu unserem lieben vi.

Wir werden jetzt ständig die Konsolen wechseln, den HTML-Code ändern, speichern und die Ansicht in quark auffrischen. Ich werden die Schritte dazu nicht mehr wiederholen.

Grundstruktur einer HTML-Datei

Ein HTML-Dokument ist in zwei Bereiche aufgeteilt. Den Kopf (engl. head) und den Körper (engl. body).

Der <body> ... </body> Teil ist der eigentliche Träger der Informationen. Hier werden alle Informationen untergebracht, welche im Internet veröffentlicht werden sollen. Wir tippen daher folgendes in den vi ein: "Hallo Welt" steht zwischen den body-Tags. Die Anordnung des Quelltextes ist normalerweise egal. Man kann also den Quelltext möglichst übersichtlich schreiben. Zeilenumbrüche ignorieren die normalen Browser. quark macht hier aber eine Ausnahme.

<html>
<head>

</head>

<body>

Hallo Welt

</body>
</html>

Wir speichern und schauen uns in quark nach dem Neuladen des Bildschirmes unser "Hallo Welt" an.

Im header stehen die <title> ... </title>-Tags. Zwischen diesen Tags wird der Titel des Dokuments beschrieben. Der Titel wird normalerweise in der Titelzeile des Browsers angezeigt. quark weicht hier ab. Der title-Tag ist sehr wichtig für die Suchmaschinen im Internet. Beachte die unterschiedliche Schreibweise von Titel und title.

<html>
<head>
 <title> Mein erstes HTML-Dokument </title>
</head>

<body>

Hallo Welt

</body>
</html>

Im Kopfteil (<head> ... </head>) können noch weitere Informationen untergebracht werden. Dazu können Schlüsselwörter, die Sprache des Dokumentes, der Namen des Verfassers oder ein Gültigkeitsdatum gehören. Speziell der Eintrag der Schlüsselwörter kann wichtig sein, da es Suchmaschinen gibt, die nur die Informationen im Kopfteil auswerten.

Alle nun folgenden Tags müssen zwischen den <body>-Tags stehen.

Absatzformatierungen

<p> ... </p> umschliessen einen Absatz.

<br> erzwingt eine neue Zeile.

Leider weicht der minimalistische WWW-Browser quark auch hier ab.

<html>
<head>

</head>

<body>

Hallo Welt

<p>
Dies ist ein Absatz.
</p>

So wird ein <br> Zeilenumbruch hervorgerufen.

</body>
</html>

Überschiften

Überschriften werden in 6 Wertigkeiten unterschieden.

<h1> Höchste Wertigkeit </h1>
...
<h6> Niedrigste Wertigkeit </h6>

Zeichenformatierungen

Zeichenformatierungen können z. B. <b>fett</b> oder <i>kursiv</i> sein. Leider kann quark auch dies nicht richtig darstellen.

Umlaute und Sonderzeichen

Die deutsche Umlaute und das ß sollten in HTML entsprechend codiert werden:

Ä    Ä

ä    ä

Ö    Ö

ö    ö

Ü    Ü

ü    ü

ß    ß

Leider hat auch quark hier Probleme.

Links

Ein Link wird folgendermaßen erzeugt:

<a href="Adresse"> Text mit Link </a>

Wenn wir z. B. einen Link zur Startseite des PYGMY-Servers einfügen wollen, müssen wir ein Verzeichnis höher auf die Datei index.html verweisen:

<a href="../index.html"> Startseite unseres PYGMY-Servers </a>

Wer sich mehr mit HTML beschäftigen will, sollte diesen Link folgen:

http://www.netzwelt.com/selfhtml

Natürlich kann man auch diesen Link in die eigene Website aufnehmen:

<a href="http://www.netzwelt.com/selfhtml"> http://www.netzwelt.com/selfhtml</a>

Übung

Erzeuge im Verzeichnis /a/mywebsite eine zweite HTML-Datei mit dem Namen test.html. Nutze dafür die dritte Konsole. Verlinke dann die HTML-Dateien index.html und test.html untereinander, so daß man von einer Datei zur jeweils anderen Datei mit Hilfe eines Links gelangen kann.

Um diese Übung zu beenden heben wir die mount-Zuordnung unserer Arbeitsdiskette auf.
/a# cd /
/# umount /a
/# _

Robert.Warnke@giso.de (copyleft) Robert Warnke, Berlin (Germany) | http://rowa.giso.de



Linux is like a Tent. Der Magnet. Fan-Magnet für Linux-User mit dem Linux-Maskottchen TUX (Unbekannter Einband)

Sonstige Artikel:

Der Neue Roman in Frankreich und Lateinamerika (Broschiert) von Leo Pollmann

Solange du da bist (Gebundene Ausgabe) von Marc Levy, Amelie Thoma

Bis zu jenem Tag (Gebundene Ausgabe) von Kressmann Taylor, Kathrine Kressmann Taylor

Back to the topic site:
StudyPaper.com/Startseite/Computer/Informatik

External Links to this site are permitted without prior consent.