Startseite  >>>  10 Schritte zum Bau der eigenen Homepage  >>>  3. Schritt
 
3. Arbeiten mit HTML
 
Inhalt
 
Allgemeine Einführung
Kurze Einführung in die HTML-Sprache
Die Funktionen des Netscape-Composers
    a) Das Arbeiten mit Hyperlinks
    b) Das Arbeiten mit Zielen
    c) Das Arbeiten mit Grafiken
    d) Das Arbeiten mit Tabellen
    e) Spezielle Tips und Tricks
 
 
Allgemeine Einführung

Das Dateiformat für die abgespeicherte Datei jeder Webseite einer Homepage wird als HTML-Format bezeichnet (Hypertext Markup Language). Für das Erstellen einer solchen Seite existieren verschiedene Möglichkeiten:

Netscape 7.0 (und aufwärts) besitzt einen eigenen Editor. Er öffnet sich durch die Befehle   Anzeigen  >>  HTML-Quelle   im Composer. Zum Erstellen von einer Homepage wird eine alte 4er-Version wie Netscape 4.78 empfohlen. Die neuen Versionen besitzen zwar viele Extras und eignen sich als moderne Browser, sie sind aber bei weitem nicht so übersichtlich und bewältigen manche Aufgaben nicht. Daher orientieren sich die Beschreibungen an der alten Version 4xx. Eine Download-Möglichkeit des alten Netscape-Browsers ist bei Schritt 10 angeben.
 

 
 
Kurze Einführung in die HTML-Auszeichnungssprache
 
Jede Webseite besteht in der HTML-Sprache aus einem Kopf, dem HEAD, und einem Körper, dem BODY. Alle Eingaben, die im HEAD geschrieben werden, erscheinen mit Ausnahme des Titels auf der Webseite nicht, sobald sie im Browser angezeigt wird. Der Grundaufbau einer HTML-Seite in der HTML-Sprache sieht etwa folgendermaßen aus:
 
 
<HTML> <HEAD> <TITLE> 3. Das Arbeiten mit dem Netscape-Composer </TITLE> </HEAD>
<BODY> Hier steht der sichtbare Inhalt dieser Seite </BODY> </HTML>
 
 
Der auf dieser Seite hier sichtbare Text steht zwischen  <BODY> und </BODY> . Der HTML-Originaltext dieser Seite lässt sich ansehen, wenn im Browser   Ansicht  >>  Seitenquellentext   ausgewählt wird.
 
Eine Marke, also ein Element in HTML, wird als Tag bezeichnet. Ein Tag beginnt immer mit der Marke in einer Klammer der Zeichen größer und kleiner  <HEAD>  und endet mit der selben Marke und dem kleinen Schrägstrich-Zusatz  </HEAD>.
 
 

Tag Ausführende Aktion im Browser
<HTML> </HTML> Öffnet und beendet ein HTML-Dokument 
<HEAD> </HEAD> Kopf der Seite mit Inhaltsangaben zur Datei (Name des Autors, Seitentitel, Schriftsatz, Betriebssystem) 
<BODY> </BODY> Im Browser sichtbarer Teil des Dokuments
<A HREF="datei.html">Datei</A> Fügt einen Link ein
<CENTER> </CENTER> Zentriert einen Text oder eine Grafik in die Mitte
<FONT SIZE=+1> </FONT> Die Schriftgröße des nachfolgenden Textes wird um eine Stufe vergrößert
<IMG SRC="dateiname.jpg HEIGHT=204 WIDTH=185> Einfügen einer Grafik mit einer Größe von 204x185 Pixel 
<TABLE BORDER COLS=2 WIDTH="100%"> Einfügen einer Tabelle mit 2 Spalten und 100% Bildbreite
 
 
Für das Vergeben von Dateinamen gelten diese Empfehlungen: Um den Seitenquelltext dieser Seite mit allen HTML-Befehlen anzuschauen wird   Datei  >>  Seite bearbeiten   ausgewählt. Es öffnet sich der Composer. Die Seite lässt sich nun im Editor mit   Bearbeiten oder Anzeigen  >>  HTML-Quelle   verändern. Das folgende Kapitel zeigt auf, wie man durch das Benutzen des Netscape-Composers das umständliche Schreiben im Editor umgehen kann:
 
 
Die Funktionen des Netscape-Composers
 
Für alle weiteren Schritte wird ein alte Version Netscape 4.78 (oder ähnlich) benötigt, die das Programm Composer beinhaltet. Zum Öffnen des Programms gibt es zwei Möglichkeiten: In beiden Fällen wird ein neues Fenster geöffnet, in das sich Text schreiben lässt. Der Composer ist ein vollwertiges Textvearbeitungsprogramm. Im Menü Format (oder Absatz) kann ähnlich wie bei Word der Text und das Format aller Text- und Bildelemente bearbeitet werden. Es besitzt im Vergleich zu Word aber bestimmte Vorzüge: Zum Abspeichern der Seite wählt man einfach im Menü   Datei  >>  Speichern   und vergibt einen Dateinamen mit dem Zusatz  .htm  oder  .html . Die Startseite einer Homepage lautet immer  index.htm  oder  index.html . Es wird empfohlen, sich generell auf einen Zusatz festzulegen und nur Kleinbuchstaben einzusetzen mit maximal acht Zeichen. Sonderzeichen und Leerstellen sollten nicht verwendet werden.
 
 
a) Das Arbeiten mit Hyperlinks (verkürzt "Links")
 
Fast jede Internetseite verweist mit Hyperlinks zu anderen Seiten, wo erläuternde, tiefergehende oder zusätzliche Informationen abrufbar sind. Dies stellt auch die Grundlage des wissenschaftlichen Arbeitens dar und ist der wesentliche Kern des vernetzten Systems Internet. Das Beschränken dieser Möglichkeiten stellt generell einen wesentlichen Eingriff in dieses moderne und offene Kommunikationssystem dar. Ob man durch das Setzen eines Hyperlinks für den Inhalt der fremden Seite haftbar gemacht werden kann, ist sehr umstritten.

Rechtliches zur Einführung: Im Internet findet man im Impressum immer wieder die typische Formulierung, die eigentlich gar nicht notwendig wäre: "Der Autor distanziert sich ausdrücklich von allen Inhalten gelinkter Seiten und macht sich deren Inhalte nicht zu eigen." Nach Ansicht mancher Juristen genügt wohl der Satz: "Die weiterführenden Links wurden zum Zeitpunkt der Linksetzung überprüft." Man könnte ergänzen: "und waren frei von illegalen oder jugendgefährdenden Inhalten." Vorsicht ist auf jeden Fall geraten, denn ein Hyperlink zu einer illegalen oder jugendgefährdenden Seite kann auch dann problematisch sein, wenn diese Inhalte ursprünglich nicht dort waren, denn mit dem Anlegen von Links und insbesondere dann, wenn eine fremde Seite ausdrücklich empfohlen oder genannt wird, identifiziert man sich - nach Auslegung mancher Gerichtsurteile - mit dieser Seite.
 
Beim Anlegen eines Links kann man den Adressaten um Erlaubnis fragen. Rechtlich ist dies nicht unbedingt notwendig, denn wer im Internet auftritt, hat eine Veröffentlichung getätigt und muss gemäß den Grundlagen der  wissenschaftlichen Arbeitsmethode keine Erlaubnis mehr geben, ob er als Quelle angegeben wird oder nicht. Diese Regelung gilt allgemein für den deutschsprachigen Raum. Daher sind Formulierungen im Impressum wie "Das Setzen von Hyperlinks auf unsere Seiten sind nur nach Genehmigung zulässig", rechtlich unwirksam. Es ist lediglich freundlich, wenn man einen solchen Anbieter trotzdem fragt. Es ist aber zu unterscheiden:

Hotlinks sind verboten, da sie suggerieren, dass die Inhalte auf der aufgerufenen Seite liegen, sie stellen einen Verstoß gegen das Urheberrecht dar. Beim Setzen von Deep Links ist Vorsicht geboten. Man darf nicht einfach einen Link auf eine downloadbare Datei setzen oder eine fremde Grafik per Verlinkung in eine eigene Seite einbinden (ohne dass die Grafik auf dem eigenen Server liegt). Wenn man einen Deep Link setzt, dann sollte man nur auf eine HTML-Seite den Link legen und zwar so, dass die verlinkten Seiten in einem eigenen Browser-Fenster erscheinen (vgl. unten TARGET-Befehle). Vor allem dürfen sie nicht in einem fremden Frame eingebaut sein. Um sich selbst vor Missbrauch zu schützen, wird dringend empfohlen, auf jeder einzelnen HTML-Internetseite einen Link zur Startseite und einen Copyrightvermerk anzulegen.
 
Links auf den eigenen Seiten erfüllen verschiedene Funktionen: Ein Link muss nicht unbedingt auf eine HTML-Seite verweisen. Verweist der Link auf eine Grafik-Datei mit dem Zusatz  .jpg  oder   .gif , dann wird die Grafik im selben oder in einem neuen Fenster geöffnet. Zum Erstellen eines Links wählt man im Menü   Einfügen  >>  Verknüpfung   und gibt dann den Text ein, der auf der Webseite für die Verknüpfung erscheinen soll.
 
 

 
Bei  Verknüpfung mit Seitenadresse oder lokaler Datei  wird der korrekte Pfad zu einer Webseite oder einer Datei  datei.html angegeben. Für Verknüpfungen gibt es mehrere Möglichkeiten:

Mit dem Befehl "Datei wählen" können auch Verknüpfungen zu Ordnern der eigenen Festplatte hergestellt werden. Es wird empfohlen, keine absoluten Pfade verwenden, es sollte also nicht der Pfad der Dateiordner angegeben  werden. Gibt man einen absoluten Pfad wie   C:/verzeichnis/datei.html   an, dann kann die datei.htm im Internet nicht gelesen werden, da die Verknüpfung auf die eigene Festplatte verweist. Im HTML-Code sieht ein Link so aus:
 
 
<A HREF="datei.html">Datei</A>
 
 
Dieser Link ist ein relativer Link, er führt zur datei.html, die sich auf dem selben Server befindet, und ist mit dem Text "Datei" unterlegt. Statt einer Datei-Zieladresse kann auch eine komplette URL-Adresse angeben (http://www...) werden, dann handelt es sich um einen absoluten Link.
  
Soll beim Betätigen eines Links die Seite in einem neuen Fenster geöffnet werden, dann klickt man im Composer mit der rechten Maustaste auf den Link und wählt   Verknüpfungseigenschaften  >>  HTML Spezial   . In dem sich öffnenden Fenster wird ein TARGET-Befehl ergänzt:
 
 
TARGET="_blank"
 
 
Der Link würde jetzt im HTML-Code lauten:
 
 
<A HREF="datei.html" TARGET="_blank">Datei</A>
 
 
Will man, dass sich sämtliche Links einer Seite in einem neuen Fenster öffnen, dann muss die Seite im Windows-Editor geöffnet werden (siehe oben), in den HEAD der Seite erfolgt ein Eintrag dieses Tags:

 
<BASE TARGET="_blank">
 
 
Weitere TARGET-Befehle finden sich im Kapitel zu den Frames. Soll die Zieladresse nicht oder ein Ersatztext in der unteren Leiste angezeigt werden (Bsp.: Link zur Startseite), dann klickt man im Composer mit der rechten Maustaste auf den Link und trägt unter HTML-Spezial einen ONMOUSEOVER-Code ein. Beim Betätigen des Links erscheint dann der Ersatztext in der unteren Leiste.
 
 
ONMOUSEOVER="window.status='Ersatztext'; return true "
 

Hyperlink in über- oder untergeordneten Ordner
 
Bei einer großen Homepage ist es aus Übersichtsgründen ratsam, die Dateien in verschiedene Ordner abzulegen. Zunächst wird ein Text markiert, auf den der Link gelegt werden soll, dann klickt man mit der rechten Maustaste auf die Markierung und wählt   Verknüpfung erstellen  und trägt bei  Verknüpfung mit Seitenadresse oder lokaler Datei  eine dieser Adressen ein:
 
 

Link zu Datei im gleichen Ordner datei.html
Link zu Datei in übergeordnetem Ordner ordner/datei.html
Link zu Datei in untergeordnetem Ordner ../datei.html
Link zu parallelem Ordner ../ordner/datei.html
 
 
Der Hyperlink aus einer Aktionstaste
 
Soll vermieden werden, dass in der unteren Leiste des Browsers die Zieladresse angegeben wird, dann benötigt es einen Link aus einer Aktionstaste. Durch einen Klick auf die grau markierten Tasten gelangt man zu der gewählten Seite:
 
 
Der Code für die erste Aktionstaste lautet:
 
 
<FORM action=Homepage.htm>
<INPUT type="submit" value="10 Schritte zur Homepage" >
</FORM>
 
 
Mit dem "Form action"-Eröffnungstag wird das Ziel des Links definiert, der "INPUT type"-Tag legt den anzuzeigenden Text fest. Mit Hilfe dieses Codes lässt sich auch ein einfaches Quiz für Web-Benutzer erstellen. Bei einer richtigen Antwort wird der Link auf die Seite der nächsten Frage gelegt. Bei falschen Antworten erscheint eine Seite mit einem entsprechenden Text. Um Aktionstasten nebeneinander zu legen, benötigt es Tabellen.
 
 
Der Hyperlink aus einem Textfeld
 
Oft findet man auf einer Homepage aus Platzersparnisgründen ein Textfeld in Kombination mit einer Aktionstaste. Beim Wählen einer Adresse und dem Betätigen der GO-Taste, gelangt man zu der entsprechenden Seite:
 
 
Der HTML-Code für diesen speziellen Link wird mit einem "Form"-Tag eröffnet und benutzt einen speziellen Java-Script. Der Tag zur Auswahl eines angegebenen Textes beginnt immer mit dem "Option"-Tag. Der gesamte Code für die Aktionen lautet:
 
 
<FORM name="myForm"><SCRIPT language="JavaScript">
function loadPage(list) {location.href = list.options[list.selectedIndex].value}
// -->
</SCRIPT>
<SELECT name="directory" size="1">
<OPTION value="Homepage.htm">10 Schritte zur Homepage</OPTION>
<OPTION value="Homep2.htm">Grundbegriffe</OPTION>
<OPTION value="Homedown.htm">Download von Freeware</OPTION>
</SELECT><INPUT type="button" value="Go" onclick="loadPage(this.form.elements[0])">
 
 
Die hier rot markierten Adressen sind die Ziele der jeweiligen Links, die grün markierten Texte erscheinen im Textfeld. size=1 gibt an, dass nur ein Textfeld im Browser angezeigt wird. Wird dort eine 3 eingetragen, dann sind drei Zeilen gleichzeitig sichtbar.
 
 
Der Hyperlink aus einem vormarkierten Bereich einer Grafik (Imagemap)
 
Bei der Grafik unten sind Links auf bestimmte Bereiche der Grafik gelegt. Beim Fahren mit der Maus über das Periodensystem gelangt man zu der entsprechenden Seite. Beim Reagenzglasständer öffnet sich das virtuelle Labor:
 
 
 
 
Der Quell-Code dafür sieht so aus:
 
 
<MAP name="frmap">
<AREA shape="RECT" COORDS="1,1,176,124" HREF="../Lexikon/psframe.htm">
<AREA shape="RECT" COORDS="75,171,183,236" HREF="../Chemie.htm">
</MAP>
<IMG SRC="labor.JPG" WIDTH=302 HEIGHT=236 USEMAP="#frmap">
 
 
Mit dem ersten Tag ("MAP name"="frmap") kann der Name der Grafikmappe angegeben werden. Mit "AREA shape" wird der Bereich auf der Grafik festgelegt, wo der Link liegen soll. Die Zahlenangaben beziehen sich auf die Pixelgröße der gesamten Grafik (Die Beispielgrafik besitzt eine Breite von 302 Pixeln und eine Höhe von 236 Pixeln):

1. Zahl: Beginn des Hyperlinks vom linken Rand aus (in Pixel)
2. Zahl: Beginn des Links vom oberen Rand aus
3. Zahl: Ende des Links vom linken Rand aus
4. Zahl: Ende des Links vom oberen Rand aus
 
Die rot markierte URL-Adresse gibt das Ziel des Links an. Zum Schluss muss die Grafikmappe der Grafik zugeordnet werden. Es wird empfohlen, zuerst die Grafik (im Beispiel "labor.jpg") über "Einfügen Grafik" in den Netscape Composer zu holen und dann unter "Grafikeigenschaften" (rechter Mausklick auf die Grafik) und "HTML Spezial" diesen Befehl einzufügen:
 
 
USEMAP="#frmap"
 
 
Damit entfällt der letzte Tag (IMG SRC...) und man kann die Mappe im externen Editor (z. B. im Windows-Editor "Notepad.exe") definieren.
 
Auf dem Sharewaremarkt sind Programme erhältlich, die das Erstellen von Imagemaps wesentlich erleichtern. Geeignet ist beispielsweise "Map This" (Suchbegriff bei ZDNet eingeben). Das Programm fügt Imagemaps automatisch in bestehende HTML-Seiten ein, die Zuordnung zu den Grafiken (USEMAP="#Mapname") wird nachträglich vorgenommen.
 
 
b) Das Arbeiten mit Zielen
 
Ein "Ziel" ist eine Stelle innerhalb eines HTML-Dokuments auf die ein direkter Link angelegt wird. Beim Anlegen eines großen HTML-Dokuments mit vielen Unterpunkten macht das Springen aus einem Inhaltsverzeichnis zu bestimmten Stichwörtern innerhalb der Seite Sinn. So gelangt man beispielsweise zum Anfang der Seite und hier zum nächsten Kapitel.
 
Der Cursor wird an die Stelle gelegt, wo sich das Ziel befinden soll. Man wählt aus dem Menü   Einfügen  >>  Ziel   und vergibt einen Zielnamen. Auf diese Weise können viele Ziele innerhalb des Dokuments oder bei anderen Dateien angesprochen werden.
 
 
c) Das Arbeiten mit Grafiken
 
Zum Einfügen einer Grafik wählt man im Menü   Einfügen  >>  Grafik   . Gängig sind Dateien mit dem Zusatz  .jpg  oder  .gif  . Durch Klicken mit der rechten Maustaste auf eine Grafik im Composer erscheinen die Untermenüs Grafik, Verknüpfung und Absatz. Im Untermenü Grafik wird die Datei aus, die als Grafik erscheinen soll. Mit Hilfe der Befehle unter Abmessungen kann die Größe der Grafik bestimmt werden.
 
 

 
 
Es wird empohlen, immer die Originalgröße einzustellen, da minimierte Grafiken nicht schön aussehen. Die Längen- und Höhenangaben beziehen sich auf Pixel. Mit Verknüpfung lassen sich Links auf eine andere Datei (Musikdatei, Film, vergrößerte Grafik, etc.) oder auf eine andere Webseite angeben. Linkfähige Grafiken hat man früher mit einer Umrandung versehen, heute ist das nicht mehr so verbreitet. Um die Darstellung von Grafiken in Webseiten zu bearbeiten, klickt man mit der rechten Maustaste auf die Grafik und wählt  Grafikeigenschaften . Unter  Außenbereiche der Grafik  lassen sich die Umrandungen bearbeiten. Gibt man als durchgezogenen Rand "0 Pixel" ein, erscheint nur die Hand, wenn über die Grafik mit der Maus gefahren wird. Animierte GIF-Grafiken können wie eine normale Grafik eingefügt werden. Beim Abspeichern der Datei werden sämtliche Grafiken, die für die HTML-Seite benötigt werden, im gleichen Ordner gespeichert. Im HTML-Code erscheint eine eingefügte Grafik so:
 
 
<IMG SRC="Grafikdatei.gif" HEIGHT=150 WIDTH=234>
 
 
Zum Einstellen einer Grafik als Seitenhintergrund klickt man im Composer mit der rechten Maustaste auf eine leere Stelle des Dokuments (keine Tabelle) und erhält so eine Menüauswahl. Unter Seiteneigenschaften kann die Hintergrundgrafik ausgewählt werden. Das Häkchen wird automatisch gesetzt, sobald eine GIF- oder JPG-Datei angewählt wurde. Auf dieser Seite ist der Seitenhintergrund mit der Grafik  hhgrau.gif  gestaltet.
 
 
d) Das Arbeiten mit Tabellen
 
Viele Texte einer Webseite sind in einer Tabelle angelegt. Mit Hilfe von Tabellen können Texte und Bilder sehr übersichtlich angeordnet werden. Beim Netscape Composer wählt man im Menü  Einfügen  >> Tabelle  >> Tabelle. Es öffnet sich ein Fenster, in dem die Werte für die Tabelle eingegeben werden können. Von Bedeutung sind Zeilenzahl, Spaltenzahl, Tabellenausrichtung, Randbreite, Tabellenbreite und Tabellenhintergrund. In dem nachfolgenden Beispiel wurde eine zentrierte Tabelle mit 5 Spalten und zwei Zeilen angelegt. Die Randbreite beträgt 1 Pixel, die Tabellenbreite 90% des Fensters.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Will man den Tabellenhintergrund mit einer Farbe versehen, dann wird eine entsprechende Farbe oder eine Grafik ausgewählt. Wenn die Tabelle nur zum Anordnen von Texten und Bildern benutzt werden soll, dann ist bei der Randbreite 0 Pixel zu wählen. Die Tabelle erscheint dann nicht, aber die Inhalte können so nebeneinander angeordnet werden.
 
Das Arbeiten mit Tabellen ermöglicht die automatische Einstellung einer Seite auf verschiedene Monitorgrößen. Ist bei "Tabellenbreite" "100% des Fensters" gewählt, dann passt sich die Tabellenbreite automatisch an die Bildschirmbreite an. Zur exakten Festlegung der Tabellenbreite werden absolute Werte in Pixel angegeben. Dies kann aber von Nachteil sein, wenn die Internetseite in einer Auflösung von 1024x768 Pixel erstellt wurde und dem Betrachter ein Breitbildschirm mit höherer Auflösung zur Verfügung steht. Es ist zu beachten, dass die Standardauflösung des 4:3-Bildschirms 1024 x 768 Pixel beträgt und bei einem Breitbildschirm 1280 x 768 Pixel.
 
 
e) Spezielle Tipps und Tricks, Meta-Tags  
Copyright: T. Seilnacht