Vom Kopf ins Web

Eine Einführung in die Seitenbeschreibungssprache HTML

Voraussetzungen | Was ist HTML? | Woran erkenne ich HTML Seiten?
Grundgerüst | Grafikeinbindung | Tabellen | Verweise | Wie bekomme ich meine Seite ins Netz? | Und was dann? | Literatur


1. Was brauche ich? - Voraussetzungen

Vor jeder Veröffentlichung steht die Idee, ein erster Entwurf, die Auswahl von Grafiken, Abbildungen und Tabellen, aus denen irgendwann einmal der fertige Text oder ein Arbeitsblatt entsteht.

Doch damit nicht genug. Eine Publikation im Internet ist mit einigen Voraussetzungen verknüpft:

  1. Wichtig für die Präsentation im WWW ist es, den fertigen Text, wie auch die Grafiken, Karten usw. in digitaler Form als Text- oder Grafikdatei zu besitzen!
  2. HTML Konvertor / Texteditor

 

Vorteile

Nachteile

HTML-Konverter keine Kenntnis über HTML notwendig z.T. schlechtes Layout, insbesondere bei der Integration von Grafiken
wenig Zeitbedarf zur Erstellung notwendig Eingeschrängter Funktionsumfang z. B. bei der Einbindung von Java-Applets, Diskussionsforen, Datenbanken usw.
"von Hand" Erstellung Ansprechendes Layout möglich HTML-Kenntnisse notwendig
Nutzung des vollen Funktionsumfangs inklusive aller Erweiterungen (Java, CGI usw.) höherer Zeitaufwand bei der Erstellung notwendig


  1. Browser (z.B. Netscape Navigator oder Microsoft Internet Explorer) zur Kontrolle der Entwürfe
  2. Internet-Provider (z.B. Universität, T-Online, AOL usw.) mit Festplattenplatz. (Zugriffsrechte) zur Integration ins Web.

Da im Geo-Pool keines der oben erwähnten Konverter-Programme frei zugänglich ist, möchte ich die Erstellung einer HTML-Seiten anhand eines Beispiels und unter Verwendung eines Texteditors vorstellen.

 

2. Was ist HTML?

HTML steht für Hypertext Markup Language und ist die Seitenbeschreibungssprache des Internet. Seit kurzem liegt sie in der neuen Version 4.0 vor. Für die Standardisierung und Vereinheitlichung der Sprache zwischen den beiden großen Konkurrenten Microsoft und Netscape ist das W3-Konsortium zuständig.

 

3. Woran erkenne ich HTML Seiten ?

HTML-Seiten sind prinzipiell an der Dateiendung *.htm bzw. *.html zu erkennen. Bei selbst erstellten Seiten sollte man sich an diese Konvention halten, da Browser diesen Dateityp als Standardvorgaben beim Öffnen und Durchsuchen von Verzeichnissen verwenden.

 

4. Wie sieht das Grundgerüst einer HTML-Datei aus?

Das Grundgerüste einer HTML-Datei besteht aus zwei Teilen:

Zur Abgrenzung dieser beiden Bereiche wie auch zur Integration von Formatierungen, Hyper-Links, Grafiken, Tabellen usw. in die Seiten werden sogenannte Metazeichen oder Tags verwendet.
Diese stehen innerhalb der Größer- und Kleinerzeichen ( < > ). Zusammengehörende Tags werden mit einem Slash (/) beendet.

Beispiel:

<b>fett</b> normal

Im Beispiel wird der Text der sich innerhalb der beiden ‘b`s’ (bold) befindet, fett dargestellt. Hinter der Anweisung </b> erscheint der Text wieder normal.

Beide Bereiche einer HTML-Datei werden durch die Tags <html> bzw. </html> begrenzt und stellen somit den Rahmen jeder Datei dar.

Im Kopfteil der HTML-Datei wird der Titel, Angaben zum Inhalt und dem Autor der Seite sowie Java-Applets festgehalten.
Dieser Teil wird durch die Anweisungen <head> bzw. </head> begrenzt.

Im Textkörper der HTML-Datei findet sich dann der eigentliche Inhalt der Seite wieder, der wie bereits erwähnt aus Text, Grafiken, Tabellen, Hyperlinks, Musikdateien usw. bestehen kann.
Abgegrenzt wird dieser Teil durch die Tags <body> bzw. </body>.

 

Die folgende Zusammenstellung beinhaltet das Grundgerüst einer HTML-Datei, sowie deren wichtigsten Formatierungszeichen.

Grundgerüst einer HTML-Datei
<HTML>
 
<HEAD>
<TITLE>
Titel der Seite
</TITLE>
</HEAD>
 
<BODY>
 
Inhalt der Seite
(Text, Links, Grafiken)
 
</BODY>
</HTML>

Die Formatierungszeichen und deutschen Umlaute der folgenden Tabelle kommen innerhalb der Tags <BODY> </BODY> zur Formatierung der Seiteninhalte zum Einsatz.

Formatierungszeichen Deutsche Umlaute
fett <b> </b> bold ü = &uuml; Ü = &Uuml;
kursiv <i> </i> italic ä = &auml; Ä = &Auml;
unterstrichen <u> </u> underline ö = &ouml; Ö = &Ouml;
Zeilenumbruch <br> break    
Absatz <p> paragraph    

 

5. Grafikeinbindung in eine HTML-Seite
5.1 Was ist zu beachten ?
  1. Ladezeiten

Internet-Surfer sind ungeduldige Menschen, vor allem dann wenn sie dieses mit dem Modem von daheim aus tun. Daher sollte vor allem bei der Integration von Grafiken darauf geachtet werden, daß dieses bestimmte Dateigrößen nicht überschreiten, bzw. erst auf ausdrücklichen Wunsch des Benutzers in ihrer vollen Größe nachgeladen werden. Dieses Vorgehen verhindert unnötig lange Landezeiten, die nicht selten dazu führen, daß der Surfer die Seite verläßt, bevor diese ganz aufgebaut ist.

  1. Verwendetes Grafikformat

Im Internet haben sich die Grafikformate JPG und GIF durchgesetzt.
JPG Formate unterstützen eine Farbtiefe von 24 Bit (16 Millionen Farben) und erlauben es, Bilder über einen verlustbehafteten Alogrithmus zu komprimieren. Wie stark die Komprimierung und damit der Verlust ist, kann der Benutzer in den meisten Bildbearbeitungsprogrammen selbst bestimmen.
GIF-Grafiken unterstützen lediglich 256 Farben und sind daher für die Darstellung von Photos ungeeignet, erzielt aber bei der Verwendung für Grafiken und Schriftzügen hervorragende Ergebnisse.

  1. Alternativer Text zur Grafik

Jede eingebundene Grafik sollte mit einem erklärenden Text und der Dateigröße versehen werden, der Lange vor der eigentlichen Grafik zu sehen ist. Dazu bietet HTML bei der Grafikeinbindung die Option ‘alt’ an (vgl. Beispiel im Quelltext).

 

5.2 Wie bekomme ich meine Grafik in digitaler Form?

Folgende Möglichkeiten bieten sich an:

- Scanner
- Digitalisierer
- Digitale Kamera

Die wohl gängigste Variante Bilder und Abbildung in digitaler Form umzusetzen ist der Scanner. Der Geo-Pool stellt für solche Arbeiten einen HP-Farb-Scanner zur Verfügung. Eine weitere, insbesondere für Geographen interessante Möglichkeit bietet das Digitalisierbrett.
Digitale Kameras die in der letzten Zeit immer billiger werden, eröffnen die Möglichkeit Photos ohne den "Umweg" Scanner direkt in digitaler Form zu erhalten

Vor einer Einbindung in die HTML-Seite empfiehlt es sich, die Grafiken in einem Bildbearbeitungsprogramm (z. B. Photoshop, Corel Photo Paint usw.) nachzubearbeiten und danach in einem der oben erwähnten Grafik-Formate mit möglichst geringer Dateigröße aber maximaler Qualität abzuspeichern. Ein bißchen rumprobieren ist hier nötig.

Danach können Grafiken analog dem Beispiel eingebunden werden. Für Skalierungen bietet HTML innerhalb der Grafikeinbindung die Befehle ‘width’ und ‘height’ an, mit denen die exakte Pixelgröße der Grafik angegeben werden kann.

 

5.3 Syntax

Der Syntax für die Grafikeinbindung sieht wiefolgt aus:

<img src="foehn.jpg width=326 height=163 alt="Föhn">

6. Tabellen in einer HTML-Seite

Tabellen werden innerhalb des Textkörpers mit den Tags <table> bzw. </table> begrenzt. Einzelne Zeilen werden durch die Tags <tr> bzw. </tr> begrenzt. Innerhalb dieser finden sich beliebig viele Spalten die mit <td> bzw. </td> gegeneinander abgegrenzt werden (vgl. auch Beispielseite).

<table>

<tr>
<td>Spalte 1, Zeile 1</td>
<td>Spalte 2, Zeile 1</td>
</tr>

<tr>
<td>Spalte 1, Zeile 2</td>
<td>Spalte 2, Zeile 2</td>
</tr>

</table>

Die Anweisung ‘border’ innerhalb des einleitenden Tags veranlaßt den Browser einen Rahmen um alle Zeilen und Spalten zu machen.

Beispiel: <table border>

Ohne diesen Zusatz wird die Tabelle ohne Rahmen angezeigt.
Für die Gestaltung von Tabellen stehen noch eine ganze Reihe weiterer Befehle und Optionen zur Verfügung wie z.B. das Verbinden von Zeilen und Spalten, oder die Definition einer Kopfzeile, die unter der unten angegebenen Literatur nachgelesen werden kann.

 

7. Verweise in einer HTML-Seite

Hyper-Links in einer HTML-Seite dienen der Benutzerführung innerhalb der eigenen Seite und als Sprungbrett zu Homepages mit vergleichbaren Inhalten.
Hyper-Links verwenden den Befehl ‘<a href= "...">’ an den sich die Bezeichnung des Verweises/Links anschließt. Beendet wird der Link durch den Befehl </a>.
Das folgende Beispiel verweist auf die Homepage des Fachdidaktik-Seminars:

<a href="http://www.geo.uni-mainz.de/fdidakt/">Fachdidaktik Homepage</a>

Links innerhalb der eigenen Seiten benötigen lediglich die Angabe des Namens

<a href="index.htm">Startdatei der Fachdidaktik Homepage</a>

 

8. Wie bekomme ich meine Seite ins Netz?

Nach dem erfolgreichen Design einer oder mehrerer HTML-Seiten müssen diese über einen Internet-Provider ins Netz integriert werden.
Dazu müssen die Seiten auf einem Rechner plaziert werden, der über das Internet erreichbar ist. Der Aufruf dieser Seiten erfolgt dann entweder über die fest vergebene Adresse (URL = Universal Resource Locator) oder über Links von anderen Seiten.

Sowohl das Zentrum für Datenverarbeitung der Universität Mainz (ZDV) als auch der Fachbereich Geographie bieten diese Möglichkeit für Studenten kostenlos an!

9. Und was dann?

Prüfen der Links! Die wichtigste Tätigkeit nach dem Aufspielen ist die abermalige Kontrolle der Links innerhalb der neuen Umgebung. Oftmals spielen einem Groß- und Kleinschreibung, die Verzeichnisstrukturen des Rechners und kurzfristig geänderte Adressen noch am Schluß einen Streich.

10. Literatur

Wer jetzt noch Lust hat kann sich folgende zwei Literaturquellen zum Erlernen von HTML (Selfhtml, http://www.netzwelt.com/selfhtml/) und zum Design von HTML-Seiten (c`t 03/1997 "Die goldene Mitte - Tips, Tricks und Beachtenswertes zum WWW-Design", S. 150-164) anschauen.