Das Word-Wide-Web (WWW), HTML-Dokumente und Links

Virtuelle Lehrerweiterbildung Informatik in Niedersachsen
Kurzübersicht HTML
Eckart Modrow
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 (Teein Server
lefonleitungen, Satelliten,
Glasfaserkabel, Überseekabel, Funkstrecken, ...)
verbunden sind. Alle zuein lokales
sammen bilden ein weltNetz
weites Netz. Computer, die
Informationen für das Netz
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 192.168.202.3, 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 E-Mail an
diesen Rechner schicken lassen. Benutzername und Rechnername werden dabei
durch den „Klammeraffen“ @ 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
E-Mail-Adresse [email protected].
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 E-Mail und HTTP für das WorldWide-Web.
Virtuelle Lehrerweiterbildung Informatik in Niedersachsen
Kurzübersicht HTML
Eckart Modrow
2.
S. 2
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 httpProtokoll (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
http://www.mpg.goe.ni.schule.de
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>
Virtuelle Lehrerweiterbildung Informatik in Niedersachsen
Kurzübersicht HTML
Eckart Modrow
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:
<html>
<head>
<title> .......</title>
</head>
<body>
...................
</body>
</html>
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 SEITE1.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.
.............
.............
..........
.............
.............
..........
Seite2
.............
.............
..........
Seite1
Link auf
Seite1
Link auf einen
Anker der
selben Seite
Seite3
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
Virtuelle Lehrerweiterbildung Informatik in Niedersachsen
Kurzübersicht HTML
Eckart Modrow
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-
Virtuelle Lehrerweiterbildung Informatik in Niedersachsen
Kurzübersicht HTML
Eckart Modrow
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.
<html>
<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>
</body>
</noframes>
</frameset>
</html>
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:
<html>
<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>
</body>
</html>
Virtuelle Lehrerweiterbildung Informatik in Niedersachsen
Kurzübersicht HTML
Eckart Modrow
6.
Einige weitere HTML-Tags
Tag
<!-- Kommentartext -->
&auml;
&Ouml;
&lt;
&gt;
&amp;
&quot;
<p>
<p align=center>
<center>...</center>
<br>
<hn>....</hn>
<hn align=center>
...</hn>
<ul>....</ul>
<li>
<ul type=square>
<ul type=circle>
<ul type=disk>
<ol>....</ol>
<b>....</b>
<i>....</i>
<blink>....</blink>
<marquee>..</marquee>
7.
S. 6
Beschreibung
Kommentare, die nicht angezeigt werden
ä (andere Umlaute entsprechend)
Ö (andere Umlaute entsprechend)
< (Sonderzeichen, die von HTML benutzt werden)
>
„
&
„
„
„
neuer Absatz
folgender Absatz zentriert
mehrere Elemente zentriert ausrichten
Zeilenumbruch an dieser Stelle
Überschrift n-ter Ordung, n=1..6
Überschrift zentriert
Bullet-Liste
ein Listeneintrag der Liste
Liste mit rechteckigen Bullets
„
runden
„
„
Datei„
numerierte Liste
Fettdruck
Kursivdruck
blinkende Schrift
Laufschrift
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 JavaScript 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 e-Mail-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:
Virtuelle Lehrerweiterbildung Informatik in Niedersachsen
Kurzübersicht HTML
Eckart Modrow
S. 7
<html>
<head><Title>Formular 1</title></head>
<body>
Senden Sie mir Ihren Namen!
<form action="mailto:[email protected]" method = "post">
<input type = "text" name = "Name">
<input type ="submit">
</form>
</body>
</html>
Die e-Mail 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″
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
name = ″...″
der Name, unter dem das Element z.B. von Jaca-Script
angesprochen werden kann
value = ″...″
ggf. die Aufschrift des Elements
size =
″zahl″
maxlength = ″zahl″
ggf. die Länge des Elements
maximale Länge
Virtuelle Lehrerweiterbildung Informatik in Niedersachsen
Kurzübersicht HTML
Eckart Modrow
S. 8
Der folgende HTML-Code erzeugt das abgebildete Fenster:
<html>
<head><Title>Formular 2</title></head>
<body>
Geben Sie bitte Daten ein:
<form action="mailto:[email protected]" 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&uuml;ler
<input type = "radio" name = "knopf"> Lehrer<br>
<input type = "reset">
<input type ="submit">
</form>
</body>
</html>
Die e-Mail 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&uuml;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.
Virtuelle Lehrerweiterbildung Informatik in Niedersachsen
Kurzübersicht HTML
Eckart Modrow
S. 9
Der folgende HTML-Code erzeugt das abgebildete Fenster:
<html>
<head><Title>Formular 3</title></head>
<body>
Was sind Sie?
<form action="mailto:[email protected]" method = "post">
<select>
<option value = "Lehrer"> Ich bin Lehrer!
<option value = "Schueler"> Ich bin Sch&uuml;ler!
<option value = "Hausmeister" selected> Ich bin Hausmeister!
</select>
<br>
<input type = "checkbox" name = "Abbo"> Ich abboniere die Schülerzeitung.
</form>
</body>
</html>
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.
Virtuelle Lehrerweiterbildung Informatik in Niedersachsen
Kurzübersicht HTML
Eckart Modrow
S. 10
Der folgende HTML-Code erzeugt das abgebildete Fenster:
<html>
<head><Title>Formular 4</title></head>
<body>
Geben Sie bitte Daten ein:
<form action="mailto:[email protected]" 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>
</body>
</html>
Die e-Mail enthält als Inhalt:
Name=Meier&Vorname=Peter&Alter=33&Name=Göttingen