Das World-Wide-Web (WWW), HTML-Dokumente und Links im Internet

Transkript

1 Eckart Modrow Kurzübersicht HTML S. 1 Das World-Wide-Web (WWW), HTML-Dokumente und Links im Internet 1. Das Internet Das Internet besteht aus sehr vielen Computern, die untereinander durch unterschiedliche Techniken (Telefonleitungen, Satelliten, Glasfaserkabel, Überseekabel, Funkstrecken,...) verbunden sind. Alle zusammen bilden ein weltweites Netz. Computer, die Informationen für das Netz ein lokales Netz ein Server bereitstellen und weiterleiten, nennt man Server. Oft laufen Server gleichzeitig in einem lokalen Netz, bei dem mehrere Computer ein Intranet bilden. Die transportierten Daten müssen so verpackt werden, dass die unterschiedlichen Computer sie problemlos weiterleiten und ggf. verarbeiten können. Z. B. müssen sich zwei technisch vielleicht ganz unterschiedliche Computer darüber verständigen, ob die abgesandten Daten vollständig und unverändert beim Partner angekommen sind. Zu diesem Zweck wird das TCP/IP-Protokoll benutzt, mit dessen Hilfe die Daten in gleich großen Teilstücken von Rechner zu Rechner transportiert werden. Alle im Internet laufenden Computer müssen eine eindeutige Bezeichnung, eine Adresse, haben. Dazu werden IP-Nummern vergeben, die z.b. aus vier Zahlen zwischen 0 und 255 bestehen, die durch Punkte getrennt sind. Ein Beispiel dafür ist die Adresse , die interne Anschrift von Server_A. Weil solche IP-Nummern ziemlich unhandlich sind, benutzt man lieber Namen, die von Name-Servern bei Bedarf in IP-Nummern umgesetzt werden. Diese Namen werden ebenfalls zu Gruppen zusammengefasst, die Internet-Domains bilden. In den Namen stehen die übergeordneten Domains weiter rechts. Hauptdomains sind z.b. die Staatennamen (de, us,...) oder andere Großgruppen (org, com, edu,...). Danach folgen Unterdomains usw., bis man schließlich bei einem Servernamen landet. Unser Internetserver MAX hat den Internetnamen MAX.MPG.GOE.NI.SCHULE.DE. Ein Benutzer, der auf einem Rechner ein Postfach besitzt, kann dann seine an diesen Rechner schicken lassen. Benutzername und Rechnername werden dabei durch den getrennt, der als at zu lesen ist. Damit verfügt z.b. Petra Meier, die als PMEIER am Rechner MAX eingetragen wurde, über eine eigene -Adresse PMEIER@MAX.MPG.GOE.NI.SCHULE.DE. Mit Hilfe der Adressen und Daten-Transportmöglichkeiten stellt das Internet verschiedene Dienste zur Verfügung: FTP ( file-transport-protocol ) für Dateiübermittlung, TELNET, falls man auf entfernten Rechnern arbeiten will, NEWS für die schwarzen Bretter des Internets, MAILTO für und HTTP für das World- Wide-Web.

2 Eckart Modrow Kurzübersicht HTML S Das World-Wide Web Das WWW ist ein Teil des Internets, mit dessen Hilfe unterschiedliche Informationen (Texte, Bilder, Sounds, Videos,...), die sich auf unterschiedlichen Rechnern befinden können, miteinander verknüpft werden. Die Verknüpfungen entsprechen den Querverweisen z.b. in einem Lexikon oder den Literaturangaben in einem Buch. Sie erfolgen über sogenannte Links, das sind Internetadressen, unter denen die angegebenen weiterführenden Informationen zu finden sind. Enthält z.b. ein Text über Göttingen den Begriff Gänseliesel, dann kann dieses Wort zu einem Link gemacht werden, der zu einem erläuternden Text über das Gänseliesel, mit Bild und weiteren Links zu Märchendichtern führt. Neu an diesen Links ist, dass durch Mausklick direkt zur nächsten Information gesprungen werden kann. Das Surfen im Internet geht (falls die Verbindung entsprechend gut ist) sehr viel schneller als das Suchen in einer Bibliothek. Vernetzte Informationen dieser Art bezeichnet man als ein Hypertext-System. Das WWW bildet damit eine Art weltweites Lexikon, dessen Inhalte als Hypertext organisiert sind. Das technisch organisierte Rechnernetz des Internets bildet so die Basis eines logisch ganz anders organisierten Informationssystems. Es benutzt das http- Protokoll (hypertext transport protocol) des Internets. Eine Homepage-Adresse im WWW ergibt sich aus diesem Protokoll, einem Doppelpunkt als Trennzeichen und einer Internetadresse, die durch zwei Querstriche eingeleitet wird. Die Homepage des MPGs erreicht man von außen unter Weil im Internet von der Technik und den Betriebssystemen her sehr unterschiedliche Computer verbunden sind, werden die Informationen auf Basis des technisch kleinsten gemeinsamen Nenners dargestellt: dem ASCII-Code (american standard code for information interchange), den schon die ersten Fernschreiber benutzten. In diesen Code werden besondere Zeichenfolgen (Tags) eingestreut, die Hinweise zur Textformatierung, Links,... enthalten. Auf einem konkreten Rechner laufen dann Programme (Browser), die versuchen, Dokumente mit Hilfe der Tags so darzustellen, dass sie auf allen Rechnern ähnlich aussehen. Beispiele für Browser sind der Internet-Explorer von Microsoft, der Netscape-Navigator, Mosaic,... Browser interpretieren den HTML-Code. 3. HTML-Dokumente Die Syntax der Tags wird durch die Hypertext Markup Language HTML festgelegt. Tags stehen zwischen spitzen Klammern. Meist gibt es ein einleitendes Tag <...>, zu dem ein schließendes gehört, das nach der öffnenden Klammer einen Schrägstrich hat </...>. Der Text zwischen diesen Tags wird dann vom Browser entsprechend formatiert (z.b. fett gezeigt oder unterstrichen). Kennt ein Browser ein bestimmtes Tag nicht, z.b. weil er die neueste HTML-Version nicht versteht oder weil es sich um ein falsches Tag handelt, dann ignoriert er es einfach. Fehler führen also nicht zum Absturz des Programms. Eine Überschrift erster Ordnung (sehr groß!), könnte so dargestellt werden: <H1>Kapitel 1: Einleitung</H1>

3 Eckart Modrow Kurzübersicht HTML S. 3 HTML-Dokumente beginnen mit dem Tag <HTML> und enden mit </HTML>. (Groß- und Kleinschreibung wird nicht unterschieden!) Dazwischen befindet sich ein Kopf (head) für den Titel des Dokuments, der in der Kopfleiste des Browserfensters erscheint, und ggf. weitere Informationen und ein Rumpf (body) mit dem eigentlichen Inhalt der HTML-Seite. Ein HTML-Dokument hat damit den folgenden Minimalaufbau: <head> <title>...</title> </head> <body>... Da der Browser in Fenstern unterschiedlicher Breite und Bildschirmauflösung ( Bildpunkte pro cm ) arbeitet, muss er Texte selbständig diesen Verhältnissen anpassen, also bei Bedarf den Text auf mehrere Zeilen verteilen etc. Aus diesem Grund ignoriert das Programm z.b. mehrere aufeinanderfolgende Leerzeichen. Es interpretiert sie als Lücke im Text und fügt selbst meist nur ein einzelnes Leerzeichen in den Text ein. Will man einen Zeilenumbruch ( Beginn einer neuen Zeile ), mehrere Leerzeichen oder Leerzeilen erzwingen, dann muss man entsprechende Tags in das Dokument einfügen (s.u.). HTML-Dokumente werden wie andere Dateien auch abgespeichert und mit der Endung (dem Suffix) HTML bzw. HTM bei älteren Systemen versehen. Die HTML-Datei mit dem Namen Seite1 wird also als SEI- TE1.HTML gespeichert. 4. (Hyper)-Links Die eigentliche Fähigkeit als Hypertext-System gewinnt das WWW durch die Möglichkeit, Verweise (Links) in HTML-Dokumente einzubinden. Ein Link ist eine Internetadresse, die unsichtbar hinter einem Textteil oder einem Bild(-Teil) liegt. Klickt der Benutzer diesen Teil des HTML-Dokuments mit der Maus an, dann wird statt der aktuellen Seite eine andere geladen, die sich (hoffentlich) unter der angegebenen Adresse findet.... Seite1 Link auf Seite1... Seite3 Seite2... Link auf einen Anker der selben Seite Sinnvolle Anwendungen für Hyperlinks sind z.b. die Einträge des Inhaltsverzeichnisses eines Buches, die auf die einzelnen Kapitel verweisen, oder ein Stadtplan, bei dem einzelne Teile als Hyperlinks auf HTML-Seiten dienen, die spezielle Informationen, Bilder,... über diese Stadtteile enthalten. Meist befinden sich die Adressen im

4 Eckart Modrow Kurzübersicht HTML S. 4 gleichen Verzeichnis wie die aktuelle Seite. Es genügt dann, den gewünschten Dateinamen als Link anzugeben. Statt dessen können aber auch vollständige URLs (Internet-Adressen) angegeben werden, die sich auf einem beliebigen anderen Rechner beziehen. Innerhalb eines Dokuments können Sprungmarken (Anker) gesetzt werden, die ebenfalls als Ziele von Links angegeben werden. Damit kann die Navigation in längeren Texten erleichtert werden. Links werden innerhalb einer Datei durch das a-tag verwaltet. Anker werden gesetzt, indem man einen Text... mit a-tags unter Angabe des Ankernamens klammert. <a name= bezeichner >... </a> Ein Link auf diesen Anker erfolgt durch <a href= bezeichner >...</a> Ein Link auf eine Datei erfolgt entsprechend: <a href= datei.html>...</a> Soll eine Grafik eingefügt werden, dann lautet der Befehl <img src= datei.gif > Sollen die Bilder ausgerichtet werden, dann wird eine align-anweisung hinzugefügt: <img src= datei.gif align=left> Statt left kann u.a. auch center und right benutzt werden. Benutzt man Grafikteile als Links, dann erstellt man die entsprechenden Verweise am besten mit einem HTML-Editor wie Frontpage. 5. Framesets Umfangreichere Informationen lassen sich zwar auf mehrere Dokumente verteilen, die Navigation zwischen ihnen allein über Hyperlinks ist aber dann etwas mühsam, wenn die einzelnen Texte über eine Bildschirmseite hinausgehen. Oft ist es deshalb übersichtlicher, den Bildschirm in mehrere Bereiche (Frames) aufzuteilen, die teilweise der Darstellung der Informationen, teilweise der Navigation dienen. Im obigen Beispiel dient der obere Bereich als eine Art Überschrift, während sich im linken Frame die Links zu den einzelnen Textseiten befinden. Die eigentlichen In-

5 Eckart Modrow Kurzübersicht HTML S. 5 formationen werden im Hauptframe angezeigt, der den größten Teil des Bildschirms einnimmt. Der Code einer HTML-Seite mit einem Frameset enthält keine Informationen über den Inhalt der Frames, sondern nur Daten über die Aufteilung des Bildschirms und die Adressen der HTML-Seiten, die in den einzelnen Frames angezeigt werden. <head> <title>hauptseite</title> </head> <frameset rows="64,*"> <frame name="inhalt" scrolling="no" noresize... target="inhalt" src="kopfseite.htm"> <frameset cols="150,*"> <frame name="inhalt" target="hauptframe" src="inhalt.htm" scrolling="no"> <frame name="hauptframe" src="seite1.htm" target="hauptframe"> </frameset> <noframes> <body background="hintergrund1.gif"> <p>diese Seite verwendet Frames, die Ihr Browser aber nicht unterstützt.</p> </noframes> </frameset> Der Inhalt der in den Frames dargestellten Seiten besteht dann aus den schon bekannten HTML-Tags. Z.B. lautet der Code der zur Navigation benutzten Seite mit den Links: <head> <base target="hauptframe"> <title>inhalt</title> </head> <body background="hintergrund1.gif" bgproperties="fixed"> Inhalt: <p><p> <a href="seite1.htm" >Seite 1</a> <p> <a href="seite2.htm">seite 2</a>

6 Eckart Modrow Kurzübersicht HTML S Einige weitere HTML-Tags Tag Beschreibung <!-- Kommentartext --> Kommentare, die nicht angezeigt werden ä ä (andere Umlaute entsprechend) Ö Ö (andere Umlaute entsprechend) < < (Sonderzeichen, die von HTML benutzt werden) > > & & " <p> neuer Absatz <p align=center> folgender Absatz zentriert <center>...</center> mehrere Elemente zentriert ausrichten <br> Zeilenumbruch an dieser Stelle <hn>...</hn> Überschrift n-ter Ordung, n=1..6 <hn align=center> Überschrift zentriert...</hn> <ul>...</ul> Bullet-Liste <li> ein Listeneintrag der Liste <ul type=square> Liste mit rechteckigen Bullets <ul type=circle> runden <ul type=disk> Datei- <ol>...</ol> numerierte Liste <b>...</b> Fettdruck <i>...</i> Kursivdruck <blink>...</blink> blinkende Schrift <marquee>..</marquee> Laufschrift 7. Formulare In Formularen können die Benutzer einer HTML-Seite Eingaben vornehmen: sie können Texte schreiben (z.b. ihren Namen und Vornamen), einen von mehreren Radio-Buttons auswählen (z.b. bei einer Umfrage) oder Listenfelder anklicken (z.b. bei der Auswahl einer Zahlungsart im e-commerce). Buttons für vorgegebene Zwecke (z.b. zum Löschen des Formulars) oder besondere Aufgaben (die über ein Java- Script formuliert werden) gehören auch dazu. Formulare werden mit den Tags <form>... </form> geklammert. Alles dazwischen gehört zum Formular. Ein wichtiger Sonderfall ist die Ergänzung action=mailto:, mit der der Inhalt eines Formular an eine -adresse gesendet wird, sobald der submit-button gedrückt wird (der natürlich dann auch im Formular vorhanden sein muss). Der folgende Code schickt den Inhalt des Feldes Name an die angegebene Adresse:

7 Eckart Modrow Kurzübersicht HTML S. 7 <head><title>formular 1</title></head> <body> Senden Sie mir Ihren Namen! <form action="mailto:emodrow@mpg.goe.ni.schule.de" method = "post"> <input type = "text" name = "Name"> <input type ="submit"> </form> Die enthält als Inhalt: Name=Meier. Innerhalb des Formulars werden die einzelnen Felder mit Hilfe des <input>-tags eingefügt. Dieses Tag benötigt noch Attribute, um den Typ des Feldes festzulegen. Als Attribute stehen optional zur Verfügung: type = text checkbox radio submit reset button name =... value =... ein Eingabefeld für Text eine Option, die ausgewählt werden kann ein Radiobutton ein Button, um den Formularinhalt zu verschicken ein Button, um den Formularinhalt zu löschen ein Button für andere Zwecke der Name, unter dem das Element z.b. von Jaca-Script angesprochen werden kann ggf. die Aufschrift des Elements size = zahl ggf. die Länge des Elements maxlength = zahl maximale Länge

8 Eckart Modrow Kurzübersicht HTML S. 8 Der folgende HTML-Code erzeugt das abgebildete Fenster: <head><title>formular 2</title></head> <body> Geben Sie bitte Daten ein: <form action="mailto:emodrow@mpg.goe.ni.schule.de" method = "post"> Name: <input type = "text" name = "Name" size = "20"> Alter: <input type = "text" name = "Alter" size = "3"> <br><br> Ich bin...<br> <input type = "radio" name = "knopf"> Schüler <input type = "radio" name = "knopf"> Lehrer<br> <input type = "reset"> <input type ="submit"> </form> Die enthält als Inhalt: Name=Meier&Alter=33&knopf=on Eine Besonderheit sind Listenfelder, die eine Auswahl aus mehreren vorgegebenen Werten gestatten. Diese werden über das <select>-tag erzeugt, Werte werden mit Hilfe des <option>-tags eingetragen: <select> <option value = "Lehrer"> Ich bin Lehrer! <option value = "Schueler"> Ich bin Schüler! <option value = "Hausmeister" selected> Ich bin Hausmeister! </select> Das Attribut selected gestattet es, eine Option als Startwert zu bestimmen. Fehlt dieses Attribut, dann wird einfach der erste Eintrag genommen.

9 Eckart Modrow Kurzübersicht HTML S. 9 Der folgende HTML-Code erzeugt das abgebildete Fenster: <head><title>formular 3</title></head> <body> Was sind Sie? <form action="mailto:emodrow@mpg.goe.ni.schule.de" method = "post"> <select> <option value = "Lehrer"> Ich bin Lehrer! <option value = "Schueler"> Ich bin Schüler! <option value = "Hausmeister" selected> Ich bin Hausmeister! </select> <br> <input type = "checkbox" name = "Abbo"> Ich abboniere die Schülerzeitung. </form> 8. Formulare in Tabellenform Da der Browser die Elemente eines Formulars selbst anordnet, ergeben sich oft unübersichtliche Bilder. Man kann die Elemente aber auch in das Raster einer Tabelle einordnen, so dass z.b. Beschriftungen und Eingabefelder bündig angeordnet werden. Eine Tabelle wird durch die Tags <table>...</table> begrenzt. Im Table-Tag kann die Breite der Trennlinien mit angegeben werden: <table border = "2">. Tabellenzeilen werden durch die Tags <tr>...</tr> begrenzt, die Zellen der Tabelle durch <td>...</td>. Mit Hilfe des align-attributs kann die Ausrichtung der Zellen bestimmt werden.

10 Eckart Modrow Kurzübersicht HTML S. 10 Der folgende HTML-Code erzeugt das abgebildete Fenster: <head><title>formular 4</title></head> <body> Geben Sie bitte Daten ein: <form method = "post"> <table border = "2"> <tr> <td align = "right"> Name: </td> <td><input type="text" name="name" size = "20"></td> </tr> <tr> <td align = "right"> Vorname: </td> <td><input type="text" name="vorname" size = "20"></td> </tr> <tr> <td align = "right"> Alter: </td> <td><input type="text" name="alter" size = "3"></td> </tr> <tr> <td align = "right"> Ort: </td> <td><input type="text" name="name" size="20" value="göttingen"></td> </tr> <tr> <td align = "center"><input type="reset"></td> <td align = "center"><input type="submit"></td> </tr> </table> </form> Die enthält als Inhalt: Name=Meier&Vorname=Peter&Alter=33&Name=Göttingen