Hallo, dies ist ein Test.
PWD: /www/data-lst1/unixsoft/unixsoft/kaempfer/.public_html
Running in File Mode
Relative path: ./../../../../../server/data/WWW/Themen/www/selfmade.html
Real path: /www/server/data/WWW/Themen/www/selfmade.html
Zurück
<html> <head> <title> WWW - Hypertexte selber schreiben </title> </head> <body> <h1> Hypertexte selber schreiben </h1> Jeder, der Zugang zu einem WWW Browser (wie z.B. Mosaic) hat, kann selbst Hypertextdokumente für den eigenen Bedarf schreiben.<p> Hypertexte werden als HTML-Dokumente geschrieben. Ein HTML-Dokument ist eine normale Textdatei, in die spezielle Kommandos (z.B. für Überschriften oder Hypertextlinks) eingefügt sind. Mosaic (und andere WWW-Browser) werten die Kommandos aus und stellen den Text dann entsprechend dar. <dl> <dt><strong>TIP:</strong> <dd> Mit dem Befehl <em>View | Document Source...</em> (unter Netscape) können Sie jederzeit das einer angezeigten Seite zugrundeliegende HTML-Dokument ansehen. So kann man feststellen wie ein bestimmter Effekt erreicht wird. </dl> Im folgenden werden Sie schrittweise in das Schreiben von HTML-Dokumenten eingeführt.<p> Übersicht: <ol> <li><a href=#kap1>Das erste HTML-Dokument</a> <li><a href=#kap2>Weitere M�glichkeiten der Textformatierung</a> <li><a href=#kap3>Hypertext-Links und eingebundene Bilder</a> </ol> <hr> <a name=kap1> <h2>1. Das erste HTML-Dokument</h2> Öffnen Sie dazu ein neues Fenster des WWW-Browsers und einen Texteditor (unter X Windows z.B. <code>xedit</code>).<br> Kopieren Sie die nachfolgende Vorlage mit der Maus in den Texteditor <hr> <pre> <HTML> <TITLE> HTML-Dokument, Nr. 1 </TITLE> <H1>Mein erstes HTML-Dokument</H1> Hier kommt normaler Text.<p> Dieser Text steht in einem neuen Absatz. </PRE> <hr> Speichern Sie den Text unter dem Namen <code>test1.html</code> ab.<p> Wir wollen nun das HTML-Dokument mit Mosaic darstellen. Wählen Sie dazu aus dem <em>File</em>-Menü den Punkt <em>Open Local...</em>. In der erscheinenden Dialog-Box wählen Sie die Datei <code>test1.html</code> aus.<p> Sie sehen, daß der Text, der in Mosaic hinter <strong>Document Title</strong> steht, im HTML-Dokument von <code><TITLE></code> und <code></TITLE></code> eingerahmt ist.<p> Die große Überschrift ist von <code><H1></code> und <code></H1></code> umgeben.<p> HTML-Kommands sind immer von <code>< ></code> begrenzt und erscheinen fast immer paarweise. Das schließende Kommando beginnt dabei mit <code></</code>. Es spielt übrigens keine Rolle, ob Groß- oder Kleinschreibung verwendet wird.<p> <hr> <a name=kap2> <h2>Weitere Möglichkeiten der Textformatierung</h2> Wie Sie an dieser Einführung sehen können, gibt es mit HTML eine Fülle von Gestaltungsmöglichkeiten.<p> Als nächstes wollen wir ein HTML-Dokument erzeugen, daß nachher so aussieht: <hr> <a href="http:test2.html">Hier steht das Beispiel</a> <hr> Und so werden die einzelnen Effekte erzeugt: <ul> <li>die horizontale Linie mit <code><hr></code> <li>die kleinere Überschrift mit <code><h2></code> und <code></h2></code> <li>die Umlaute werden entweder <ul> <li>auf einer entsprechenden Tastatur direkt eingegeben <li>oder folgendermaßen erzeugt: ü mit &uuml;, der erste Buchstabe nach dem & ist der zu erzeugende Umlaut. (&Ouml; erzeugt also ein Ö). Das ß wird durch &szlig; dargestellt. Hier eine Liste der erzeugbaren <a href="http://www/topics/www/ISOlat1.html">Sonderzeichen</a>. </ul> <li>Text kann fett gedruckt werden mit <code><strong></code> und <code></strong></code> <li>und kursiv mit <code><em></code> und <code></em></code> (für emphasize) <li>Die Listen: <ul> <li>Der gesamte, einzurückende Bereich wird von <code><ul></code> und <code></ul></code> umgeben (für unnumbered list) <li>jeder Listenpunkt wird mit <code><li></code> begonnen (für list item). Dieses Kommando ist NICHT paarig. <li>Wird innerhalb einer Liste eine weitere begonnen, so wird das Listensymbol automatisch gewechselt. <li>Soll die Liste nummeriert sein, so wird statt <code>ul</code> <code>ol</code> verwendet. <li>Hinweis: Für glossarartige Listen steht eine besondere Kombination zur Verfügung: <code><dl> </dl> </code> umrahmt die definition list. Der <em>definition term</em> wird mit <code><dt></code>, die definition description mit <code><dd></code> eingeleitet. Verwendet wird dieser Effekt z.B. im <a href="http:/intro/glossar/index.html">Glossar</a>. </ul> </ul> <hr> <a name=kap3> <h2>Hypertext-Links und eingebundene Bilder</h2> Zu einem Hypertext wird ein Text erst, wenn man er Querverweise auf andere Texte oder besser Objekte enthält. Solche Objekte können z.B. sein: <ul> <li>ein weiterer Hypertext <li>ein Directory <li>eine Bild-, Film- oder Sounddatei <li>eine Newsgroup <li>eine telnet-Sitzung <li>eine ftp-Verbindung <li>das Ergebnis einer Suche </ul> Um eine solche Vielfalt verschiedener Objekte bezeichnen zu können, wurde das Konzept der Uniform Resource Locators (URL) eingeführt. Ein Hypertext-Link enthält als wichtigsten Bestandteil eine solche URL.<p> Eine URL besteht aus zwei durch einen Doppelpunkt getrennten Teilen. Der erste Teil gibt den Typ an, der zweite ist typenabhängig.<p> Hier einige Beispiele für URLs:<p> <code>http://www.informatik.hu-berlin.de/topics/www/selfmade2.html</code><br> Die URL dieses Textes.<p> <code>news:alt.hypertext</code><br> Die URL der Newsgroup alt.hypertext des lokalen News-Servers<p> <code>gopher://gopher.zrz.tu-berlin.de/1</code><br> Die URL des Gophers des zentralen Rechenzentrums der TU Berlin<p> Im Allgemeinen wird ein Maschinenname durch zwei einleitende <code>//</code>, ein Pfad durch ein ein einleitendes <code>/</code> gekennzeichnet. Wird der Maschinenname weggelassen, so wird der aktuelle Server angenommen. Genauso muß beim Verweis auf einen Text im gleichen Verzeichnis nicht der komplette Pfad angegeben werden. So führen alle folgenden Links zum Beispiel aus Kapitel 2:<p> <code> <a href="http://www.informatik.hu-berlin.de/topics/www/test2.html"> http://www.informatik.hu-berlin.de/topics/www/test2.html</a><br> <a href="http:/topics/www/test2.html">http:/topics/www/test2.html</a><br> <a href="http:test2.html">http:test2.html</a><p> </code> Ein Link sieht damit folgendermaßen aus:<p> <code> <a href="<em>Eine URL</em>"><em>Der Text des Links</em></a>.<p></code> Ein Beispiel:<br> <code><a href="http:/topics/www/test2.html">Das Beispiel</a><br></code> Man kann auch an eine bestimmte Stelle in einem Dokument verweisen (davon wird z.B. beim Überblick am Anfang dieser Einführung Gebrauch gemacht). Dazu wird die Stelle mit einer Marke versehen:<br> <code><a name=<em>Sprungmarke</em>></code><br> Im selben Text kann auf diese Stelle mit<br> <code><a href=#<em>Sprungmarke</em>>Zur Sprungmarke</a></code> verwiesen werden.<p> Und so werden Bilder eingebunden:<br> <code><img align=top src="<em>URL des Bildes</em>"></code><p> Hinweis: align kann ganz weggelassen werden. Statt top sind auch middle und bottom gültige Werte. Bei top schließt die Oberkante des Bildes bündig mit dem oberen Rand des Rests der Zeile, in der das Bild steht, ab; bei bottom schließt die Unterkante des Bildes bündig mit dem unteren Rand des Rests der Zeile ab. middle zentriert das Bild vertikal in der Zeile.<p> <hr> <address> <!-- <a href=//www.informatik.hu-berlin.de~muellerg/>PMG</a> (muellerg@informatik.hu-berlin.de) <br> --> Erstellt am 02-06-94, zuletzt geändert am 18-07-97 </address> </body> </html>