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:
-
Mit speziellen Editierprogrammen
kann man die Seiten durch Eingabe von Marken in der HTML-Sprache erstellen.
Dieses Verfahren ermöglicht zwar eine große Vielfalt an Gestaltung,
es ist aber sehr zeitaufwändig und kompliziert. Aus diesem Grund sollen
hier nur elementare HTML-Befehle behandelt werden.
-
Als
externes Editierprogramm zum Schreiben von Marken ist für unsere Zwecke
der Windows-Editor empfehlenswert. Den externen Editor stellt man im Netscape-Communicator
(alte Netscape-Versionen) durch Wahl der Menüs Bearbeiten
>> Einstellungen >> Composer ein. Als
externer Editor wird die Datei NOTEPAD.EXE aus dem Windows-Stammverzeichnis
angegeben.
-
Der Netscape Composer ist
ein in den Netscape-Communicator (>Download)
integriertes Programm, das auf einfache Art und Weise das Erstellen einer
HTML-Seite ermöglicht. Texte werden einfach über den Zwischenspeicher
aus einem Textverarbeitungsprogramm geladen, auch Grafiken können
über die Befehle Einfügen >> Grafik
auf einer HTML-Seite plaziert werden.
-
Darüber hinaus existieren
eine Vielzahl an käuflichen Programmen, die das automatische Erstellen
einer Internetseite erleichtern und moderne Grafiklayouts erstellen. Selbst
neuere Wordversionen besitzen die Möglichkeit, eine Webseite in HTML
zu erstellen. Allerdings besitzen all diese Programme den Nachteil, dass
der Überblick über die einzelnen Komponenten verloren geht und
das nachträgliche Editieren extrem kompliziert wird.
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:
-
Die Startdateien einer Domain
oder innerhalb eines Ordners heißen immer index.htm oder index.html.
Diese beiden Namen erkennt ein Browser automatisch, wenn der Dateiname
beim Surfen auf eine Seite nicht angegeben wird.
-
Die Namen enthalten (ohne
die html-Endung) nur Kleinbuchstaben bis zu 8 Zeichen und keine Zahlen
oder Sonderzeichen (diese Regeln wurden auf dieser Seite leider nicht von
Anfang an konsequent eingehalten).
-
Dateiendungen, sowie Groß-
und Kleinschreibung machen einen Unterschied, es benötigt immer den
kompletten Namen mit dem Zusatz und die exakte Schreibweise. Abweichungen
davon sind die häufigsten Ursachen für Fehler.
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:
-
1. Möglichkeit: Menüleiste
Communicator >> Composer oder
Fenster >> Composer wählen
-
2. Möglichkeit: Menüleiste
Datei >> Neu >> Leere Seite
wählen oder direkt aus der Menüleiste Neu.
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:
-
Verbrauch von sehr wenig
Speicherplatz
-
Optimale Möglichkeiten
beim Anlegen von Links
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:
-
Surface Link: verweist auf
die Startseite einer Homepage (erlaubt)
-
Deep Link: verweist auf eine
spezielle Datei innerhalb der Webseite (bedingt erlaubt)
-
Hotlink: Integrieren fremder
Inhalte per Verlinkung in die eigene Seite (verboten)
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:
-
Link zu einer anderen Seite
der eigenen Homepage
-
Link zu einer Grafik, die
sich beim Anklicken öffnet
-
Link zu einem Lexikon, wo
ein Stichwort erklärt wird
-
Link mit einer nachfolgenden
Aktion (z.B. Abspielen eines Musikstücks oder eines Videos)
-
Link zu einer Datei, die
dann zum Download auf der Festplatte gespeichert wird
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:
-
Verknüpfung zu einer
fremden Webseite: Komplette URL-Adresse angeben http://www.homepage.com
-
Verknüpfung zu einer
eigenen Datei: Kompletter DOS-Dateiname angeben datei.html
-
Verknüpfung zu einer
Grafik: grafik.jpg
-
Verknüpfung zu einer
zip-Datei: datei.zip
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: