Homepage
(Seitenübersicht/
Sitemap)
Downloads
Impressum
Gästebuch
www.wissenschaft-technik-ethik.de/internetseiten-in-html-1.html

Erstellen von Internetseiten (Webseiten, Homepage) in HTML
Anleitung für Anfänger Teil 1: Grundlagen, Aufbau, Text, Grafik, Links

Seiteninhalt:

Links zu verwandten Seiten:




1.1 Allgemeines

HTML (HyperText Markup Language) ist eine beschreibende Sprache, die für die Übermittlung von Informationen im Internet entwickelt worden ist. Dabei bedeutet der Ausdruck "Beschreibende Sprache", dass zusätzlich zu den reinen Inhalten eines Dokuments, wie Text und Grafiken, das Dokument auch Angaben darüber enthält, wie Text, Grafiken etc. an verschiedenen Stellen darzustellen (zu "formatieren") sind. Dies lässt sich zum Beispiel mit einem Phonodiktat vergleichen. Auch hierbei wird beim Diktieren nicht einfach nur der zu tippende Text auf das Band gesprochen bzw. auf die Textvorlage geschrieben, sondern an den betreffenden Stellen auch Informationen zur Gestaltung des Dokuments, wie z. B. die Angaben "hier Absatz", "um 3 Anschläge einrücken", "Einrücken Ende", "der nächste Satz in rot", "unterstreichen", "unterstreichen Ende", "2 Leerzeilen" oder "an dieser Stelle Bild Nr. 3 einkleben". Während jedoch die Phonotypistin aufgrund ihrer Intelligenz und Lebenserfahrung mühelos in der Lage ist, den eigentlichen Inhalt des Dokuments, also das, was zu Papier gebracht werden soll, von den zusätzlichen Formatierungsangaben zu unterscheiden, muss einem "dummen" Computerprogramm stets extra mitgeteilt werden, ob es sich bei einem bestimmten Ausdruck um einen Teil des Textes oder eine nur für das Computerprogramm bestimmte Anweisung handelt. Dazu werden in der Regel zwei bestimmte Zeichen, die praktischerweise in normalen Texten nur selten verwendet werden, für das betreffende Computerprogramm als Signale eingesetzt, die diesem Programm eindeutig anzeigen, dass an einer bestimmten Stelle eine Anweisung zur Formatierung etc. beginnt und an einer bestimmten anderen Stelle wieder endet. Im Falle der HTML-Sprache sind diese Zeichen das "kleiner-als"- und das "größer-als"-Zeichen, also die Zeichen < bzw. >.

Wie im Falle der Phonotypistin, die eine Textvorlage (Tonband oder Schmierpapier) mit Formatierungsanweisungen bekommt, die in dieser Form nicht für den Adressaten bestimmt ist, und daraus das eigentliche, für den Empfänger bestimmte formatierte Dokument erstellt, gibt es auch bei der Verwendung von HTML einen sogenannten "Quelltext" als Vorlage für das Computerprogramm und das am Bildschirm angezeigte oder mit dem Drucker zu Papier gebrachte, für den Empfänger aufbereitete Dokument.

Eine HTML-Seite zu schreiben bedeutet demnach nichts Anderes, als den betreffenden Quelltext, einschließlich der in < und > eingeklammerten Anweisungen, den sogenannten "HTML-Tags" zu verfassen. Dies ist nicht weiter kompliziert, man muss dafür lediglich die zu den verschiedenen Formatierungsanweisungen gehörenden HTML-Tags kennen, von denen weiter unten die wichtigsten genannt und beschrieben werden.




1.2 Benötigte Software

Eine Reihe unterschiedlicher Computerprogramme ("Anwendungen"), die für den Umgang mit HTML-Dokumenten herangezogen werden können, sollen im Folgenden kurz beschrieben werden.

Der wichtigste Typ dieser Programme sind die sogenannten "Internet-Browser". Bekannte Vertreter dieser Gruppe sind der Microsoft-Internet-Explorer, der Netscape Navigator und der Mozilla Firefox. Internetbrowser ermöglichen es dem Benutzer, die im Internet in Form von HTML-Quelltext zur Verfügung gehaltenen Internetseiten in den Arbeitsspeicher des eigenen Computers zu laden, gemäß der enthaltenen HTML-Tags zu formatieren und die fertig formatierte Seite auf dem Bildschirm anzuzeigen. Die meisten Internetbrowser bieten die Möglichkeit, normalerweise unter dem Menüpunkt "Ansicht", bei Bedarf auch den Quelltext anzuzeigen. Einige Internetbrowser enthalten zusätzlich einen Editor, mit dem sich HTML-Quelltext schreiben oder verändern lässt.

Auch die heute gängigen Office-Programme (wie Word, OpenOffice, StarOffice, ...) sind fast alle in der Lage, HTML-Quelltexte zu interpretieren oder umgekehrt ein gegebenes Textdokument selbsttätig in einen HTML-Quelltext umzuwandeln und auf der Festplatte zu speichern.

Programme wie z. B. Frontpage sind eigens dafür konzipiert, Internetseiten zu erstellen, ohne dass vom Benutzer irgendwelche Kenntnisse in HTML erwartet werden. Auch normale Office-Dokumente setzen solche Programme in HTML-Quelltext um.

Beim Erlernen von HTML sind die bis hierher genannten Programme zum Editieren von HTML-Quelltexten allerdings weniger bzw. gar nicht geeignet, da viele von ihnen den geschriebenen HTML-Quelltext beim Abspeichern auf die Festplatte automatisch noch einmal in Quelltext umwandeln, so dass ein Quelltext vom Quelltext resultiert. Dies passiert bei den Quelltexteditoren der Internetbrowser zwar nicht, doch beim Speichern eines von einem Menschen verfassten und nach dessen Vorstellungen übersichtlich strukturierten Quelltextes wird dieser meist vom Quelltexteditor nach dessen internen Vorgaben neu strukturiert, so dass der Autor sich in der Folge mit einer ihm ungewohnten Anordnung seiner Anweisungen etc. herumplagen muss.

Wer als Anfänger HTML lernen und somit eigenen HTML-Quelltext selbst verfassen will, ist zunächst mit dem ganz gewöhnlichen Texteditor Notepad gut beraten. Dieser ist unter Windows-Betriebssystemen praktisch immer automatisch vorhanden ([Start]-[Programme]-[Zubehör]-[Editor]). Auch andere reine Texteditoren sind geeignet. Die Textlänge ist allerdings bei den meisten Texteditoren auf ca. 65000 Zeichen begrenzt, so dass man für umfangreichere Quelltexte besser das alte Programm Word Pad verwendet, das ebenfalls standardmäßig unter Windows enthalten ist. (Die vorliegende Seite, beispielsweise, musste am Ende bereits mit Word Pad weiter bearbeitet werden, da sie für den Editor zu groß geworden war.) Zur Ansicht und Prüfung der betreffenden Internetseiten wird dann fürs Erste einfach der jeweils verwendete Internetbrowser verwendet. Besser ist es allerdings, sich einen Quelltext jeweils von mehreren verschiedenen Internetbrowsern anzeigen zu lassen. Denn ähnlich wie eine Sekretärin hat auch jeder Browser-Typ seine eigene "Vorstellung" davon, wie manche Anweisungen in den Tags genau umzusetzen sind. Die Anweisung "Text hervorheben" z.B. könnte bei verschiedenen Schreibkräften unterschiedlich umgesetzt werden: durch Unterstreichung, Fettdruck, größere Schrift, rote Schrift, etc. Dies ist bei der entsprechenden HTML-Anweisung nicht anders.

Und so wird der HTML-Quelltext mit dem Texteditor erstellt:
  1. Texteditor öffnen.
  2. HTML-Quelltext schreiben (s. Kap.1.2 "Grundsätzlicher Aufbau einer HTML-Seite" und die folgenden Kapitel)
  3. Mit [Speichern unter ...] auf der Festplatte unter einem beliebigen Dateinamen speichern, wobei dieser mit .htm oder .html enden muss (z. B. ErsterVersuch.html).
Danach sollte sich die betreffende Datei mit dem Internetbrowser öffnen und ansehen lassen. Falls der Quelltext erhebliche Fehler enthält, sollte dies im Ergebnis erkennbar sein. Viele Browser sind allerdings gegenüber kleinen Fehlern recht tolerant, so dass stets auch der Quelltext nach Tippfehlern etc. durchsucht werden sollte.

In HTML werden die Zusatzanweisungen, die so genannten "Tags", in < > eingeschlossen und so für den Browser als Anweisungen erkennbar. Ob die Tags in Groß- oder Kleinbuchstaben geschrieben werden, ist gleichgültig /1,3,5/. Die meisten Anweisungen gelten nur für einen bestimmten Bereich (z.B. Unterstreichungen, farbliche Hervorhebungen, etc.) und müssen folglich durch einen Anfangs- und einen Endtag begrenzt werden. Der gesamte Text einschließlich der Tags wird als Quelltext bezeichnet.

Beispiel: Im Satz "Das ist ja wohl der Hammer!" soll das "der" fett dargestellt werden. Im HTML-Quelltext sieht das dann so aus (der Tag für Fettdruck ist ein einfaches b (von engl.: bold)). Der Endtag unterscheidet sich vom Anfangstag durch einen voran gestellten Schr&azuml;gstrich:

Das ist ja wohl <B>der</B> Hammer!

Manche Tags können ohne End-Tag benutzt werden, weil ein solcher sinnlos wäre, z.B. <BR> (Zeilenumbruch) oder <P> (Absatz).

Damit eine HTML-Seite beim Öffnen automatisch mit einem Browser zusammen geöffnet wird, sollte sie unter einem Dateinamen mit der Endung .html (oder .htm) abgespeichert werden, z.B. MyHomepage.html.




1.2 Grundsätzlicher Aufbau einer HTML-Seite /1,3,5/

Damit eine HTML-Seite überhaupt vom Browser-Programm als solche erkannt wird, muss ganz am Anfang der Seite <HTML> und ganz am Ende </HTML> stehen. Der Raum dazwischen wird grundsätzlich in zwei Bereiche aufgeteilt, den Kopf (Header) und den Körper (Body). Der Kopf enthält nähere Informationen zur Seite, die für den Browser bestimmt sind und nicht auf dem Bildschirm angezeigt werden (z.B. Seitenbezeichnung, Schlüsselwörter für Internet-Suchmaschinen, Autor, etc.). So lange die Seite noch nicht ins Internet gestellt wird, kann der Header erst einmal weggelassen werden. Die Seite kann zunächst offline editiert und getestet werden.

So sieht eine HTML-Seite (ihr Quelltext) vom Aufbau her aus:

<HTML>
<HEAD>
Hier stehen (üblicherweise in speziellen Tags eingebunden) verschiedene Informationen für die Suchmaschinen, die bei der Anzeige der Seite nicht auf dem Bildschirm erscheinen. (Siehe Teil 3)
</HEAD>
<BODY>
Hier steht alles, was auf dem Bildschirm sichtbar dargestellt werden soll: Text, Hintergrund, Grafiken, Tabellen, Links usw. Zum Ausprobieren einfach einen kurzen Text (z.B. Das ist ja wohl <B>der</B> Hammer!) an dieser Stelle einfügen. Der Text selbst ist kein Tag und darf deshalb nicht mit < und > eingeklammert werden!
</BODY>
</HTML>




1.3 Erstellung und Ansicht einer HTML-Seite /6/

Zur Erstellung des HTML-Quelltextes benutzt man am besten einen einfachen Texteditor (z.B. Notepad.exe oder Wordpad.exe (beide bei Windows-Betriebssystemen automatisch dabei). Ein echtes Textverarbeitungsprogramm wie StarOffice oder Word zu verwenden empfiehlt sich erst einmal nicht, weil diese häufig beim Abspeichern als .html-Datei versuchen, den Quelltext noch einmal in einen HTML-Quelltext zu verwandeln. Dies ist zumindest beim Lernen nicht erwünscht.
Zum Editieren des Quelltextes verfährt man folgendermaßen:

1. Der Editor wird geöffnet.
2. Die Grundstruktur wird geschrieben (in der Testphase zunächst ruhig ohne Header):
<HTML>
<BODY>
</BODY>
</HTML>
3. Der Seiteninhalt wird zwischen <BODY> und </BODY> geschrieben.
4. Die Datei wird mit Datei / Speichern unter unter dem Namen Dateiname.html (oder Dateiname.htm) gespeichert.
5. Der Editor kann nun geschlossen oder zugeklappt werden.

Das Öffnen der Seite kann vom Browserprogramm aus erfolgen: mit Datei / Öffnen. Oder man sucht die Quelltext-Datei im Arbeitsplatzfenster auf und macht einen Doppelklick darauf. Normalerweise wird die Seite dann mit dem aktuellen Standardbrowser zusammen geöffnet.

Änderungen:
Der Quelltext kann jederzeit mit dem Texteditor wieder geöffnet und geändert werden. Danach muss gespeichert werden (Datei / Speichern). Damit der Browser die Änderung auch anzeigt, muss (je nach Browserprogramm) auf z.B. Aktualisieren oder Neu Laden geklickt werden.

Kommentare:
Innerhalb des Quelltextes können Kommentare eingefügt werden, die beim späteren Nacheditieren und Ändern als Gedächtnisstütze dienen können. Insbesondere wenn außer dem Verfasser auch Andere am Quelltext arbeiten, können aussagekräftige Kommentare deren Arbeit sehr erleichtern. Die Kommentare werden vom Browser vollkommen ignoriert, erscheinen also nicht auf der Webseite.
Kommentare werden ähnlich wie Tags eingeklammert, mit einem <!-- am Anfang und einem --> am Ende. Zwischen einem <!-- und dem abschließenden --> können auch mehrere Kommentarzeilen liegen.

<!-- Dies ist ein Kommentar -->



1.4 Einfache Textseiten /1,3,5/

Im einfachsten Fall besteht eine Webseite aus nichts als unformatiertem Text. Hierfür genügt es, den Text zwischen <BODY> und </BODY> einzufügen. Dabei ist zu beachten, dass der Browser die Zeilen wie ein Textverarbeitungsprogramm am rechten Fensterrand umbricht. Im Quelltext vorhandene Absatzendmarken (Returns) und sogar Leerzeilen ignoriert der Browser völlig. Im Quelltext müssen deshalb Absatzendmarken in Form von HTML-Tags extra gesetzt werden. Ein <BR> (= break) markiert ein Absatzende ohne, ein <P> (= paragraph) ein Absatzende mit Abstand zum nächsten Absatz. Andererseits kann durch <NOBR> ein automatischer Zeilenumbruch am rechten Bildschirmrand verhindert werden. Statt dessen wird dann eine horizontale Bildlaufleiste erzeugt.

Wenn im Quelltext mehrere Leerzeichen hintereinander stehen, wird vom Browser normalerweise nur eines davon dargestellt, die anderen werden ignoriert.

Wenn keine Angaben zu Schriftart, -farbe und -größe im Quelltext stehen, wird der Text vom Browser mit der vom Benutzer eingestellten Standardschriftart, -farbe und -größe, sowie auf der Standardhintergrundfarbe (meist grau) dargestellt. Wer grundsätzlich dem Benutzer die Wahl überlassen möchte, braucht hierzu also keine Angaben zu machen. Ansonsten gibt es folgende Möglichkeiten:

Der Tag für Schrifteigenschaften heißt <FONT>. Dazu muss im FONT-Tag näher bezeichnet werden, um welche Schrifteigenschaft es sich handelt:

<FONT FACE="Arial"> setzt die Schriftart auf Arial.

<FONT COLOR="#0000ff"> setzt die Schriftfarbe auf blau. (Farbcode. s.Unten)

<FONT SIZE="4"> setzt die Schriftgröße auf 4.

Oder, alles auf einmal:

<FONT FACE="Arial" COLOR="#0000ff" SIZE="4">

Der Endtag (für jeden Tag einen eigenen Endtag setzen) ist in jedem Fall einfach </FONT>.


Hier eine Liste der wichtigsten Schrifteigenschaften-Tags:
  • <H1> bis <H6>:Überschriften der Größe 1 (größte) bis 6 (kleinste)
  • <FONT SIZE=1> bis <FONT SIZE=7>: Schriftgröße 1 (kleinste) bis 7 (größte)
    (Normalgröße meist 3)
  • <FONT SIZE=+n>: Schrift n Stufen größer als normal
  • <FONT SIZE=-n>: Schrift n Stufen kleiner als normal
  • <EM> (= emphasis): hervorgehoben (vom Browser abhängig, wie)
  • <STRONG>: hervorgehoben (vom Browser abhängig, wie)
  • <B> (= bold): fett
  • <I> (= italic): kursiv
  • <U> (= underlined): unterstrichen
  • <SUB>: tiefgestellt und kleiner (für Indices)
  • <SUP>: hochgestellt und kleiner (für Exponenten)
  • <SMALL>: kleiner als normal
  • <BIG>: größer als normal
  • <PRE>: Text wird in Konsoleschrift, mit sämtlichen Leerzeichen und Zeilenumbrüchen im Quelltext (!) dargestellt.
    Damit kann man z.B. eine einfache Tabelle erzeugen, die auch nach dem Kopieren in einen Texteditor noch eine Tabelle ist.
    (Mancher Browser wechselt nicht automatisch bei <PRE> zu Konsoleschrift. Deshalb vorsichtshalber zusätzlich <FONT face="courier new"> und bei </PRE> zusätzlich </FONT> editieren.
  • <LEFT>: linksbündiger Text
  • <RIGHT>: rechtsbündiger Text
  • <CENTER>: zentrierter Text
  • <HR>: (= horizontal rule): waagerechte Trennlinie
  • <HR SIZE=n>: Trennlinie der Dicke n (normal = 2)
  • <HR WIDTH=n%>: Trennlinie der Breite n % der Seite
  • <HR WIDTH=n>: Trennlinie der Breite n (in Pixel)
  • <HR WIDTH=n% ALIGN=x COLOR=“#00FFFF“ NOSHADE>:
    • x: LEFT, RIGHT oder CENTER
    • #00FFFF: Farbcode
    • NOSHADE: nicht schattiert als Umriss, sondern als voller Balken dargestellt.

Farbcode:
Besteht aus drei zweiziffrigen Hexadezimalzahlen, die die Anteile für rot, grün und blau angeben. 000000 (alle Farben = 0) bedeutet schwarz, FFFFFF (alle Farben = max. = 255) bedeutet weiß, 111111 bis EEEEEE sind verschiedene Graustufen.

FF0000 = rot
00FF00 = grün
0000FF = blau
FFFF00 = gelb
FF00FF = purpur (rotviolett)
00FFFF = azurblau
Zwischentöne selbst ausprobieren.

Umlaute und Sonderzeichen:

Viele Browserprogramme verstehen heute auch Umlaute, ß und manche Sonderzeichen ohne Weiteres. Ältere Browser können dies z.T. nicht, so dass Umlaute und Sonderzeichen auf jeden Fall in für Browser verschlüsselter Form geschrieben werden sollten:

Hier die wichtigsten Schlüssel:

&auml; = ä
&Auml; = Ä
&ouml; = ö
&Ouml; = Ö
&uuml; = ü
&Uuml; = Ü
&szlig; = ß

&deg; = °
&copy; = ©
&sect; = §
&nbsp; = geschütztes Leerzeichen
&shy; = "weicher" Bindestrich
&lt; = <
&gt; = >
&amp; = &
&quot; = "

Ein Editor, mit dem in einem Text die wichtigsten Sonderzeichen auf Knopfdruck in die verschlüsselte Form umgewandelt werden können, steht zum Download bereit.


Auflistungen:

Auflistungen beginnen mit <UL> (unordered list), wenn nicht nummeriert werden soll, ansonsten mit <OL> (ordered list). Die einzelnen aufzulistenden Elemente müssen jeweils mit <LI> beginnen. Am Ende der Liste muss </UL> bzw. </OL> stehen.
Beispiel:

Es gibt in solch einem Fall folgende Alternativen:<BR>
<UL>
<LI>Kämpfen bis zum Umfallen
<LI>Flüchten
<LI>Verstecken
<LI>Mit dem großen Bruder drohen
<LI>Cool bleiben
</UL>




1.5 Bilder und Grafiken /1,5/

Um eine Grafik oder ein Bild einzufügen, verwendet man den Tag <IMG> (=Image). Im einfachsten Fall kopiert man die betreffende Bilddatei in das selbe Verzeichnis, in dem sich auch der HTML-Quelltext befindet. Im IMG-Tag muss dann als Bildquelle (=source =SRC) nur der Dateiname angegeben werden:

<IMG SRC="MeinPorsche.jpg">

Ein Abschluss des IMG-Tags mit </IMG> ist nicht notwendig.

(Wenn die Seite einmal ins Internet gestellt ist, geht es im Prinzip genauso. Nur dass jetzt Seite und Bild nicht mehr in ein und dem selben Verzeichnis auf der eigenen Festplatte, sondern in ein und dem selben Verzeichnis auf einem Server-Computer gespeichert sind. Natürlich kann das Bild auf dem eigenen PC wie auch auf dem Server in einem eigenen Unterverzeichnis gespeichert sein. Wenn dieses Unterverzeichnis z.B. Bilder heißt, hieße der entsprechende Image-Tag: <IMG SRC="Bilder/MeinPorsche.jpg">)

In den IMG-Tag können weitere Angaben zur Bilddarstellung eingefügt und ein Text angefügt werden, z.B.:

<IMG SRC="MeinPorsche.jpg" HEIGHT=60% ALIGN=x VALIGN=y HSPACE=hs VSPACE=vs ALT "Hier sollte ein Bild von meinem Flitzer stehen.">Dies ist mein erster Porsche<BR>

HEIGHT gibt die Höhe des Bildes in % der Bildschirmhöhe an. Alternativ kann man auch die Breite des Bildes mit WIDTH festlegen. Statt %-Angaben kann die Größe auch absolut in Pixel angegeben werden (%-Zeichen weglassen). Wird entweder HEIGHT oder WIDTH vorgegeben, berechnet der Browser automatisch die dazu gehörige Breite bzw. Höhe. Wenn HEIGHT und WIDTH beide vorgegeben werden, erscheint das Bild evtl. mehr oder weniger verzerrt.

ALIGN: Ausrichtung: x: LEFT, RIGHT oder CENTER
VALIGN: vertikale Ausrichtung: y: TOP, MIDDLE oder BOTTOM
HSPACE, VSPACE: vs und hs: vertikaler bzw. horizontaler Abstand des Bildtextes vom Bild
Wenn ALIGN=center nicht funktioniert: vor u. hinter dem Bild <CENTER> und </CENTER> setzen.

ALT bezeichnet einen Ersatztext, der an Stelle des Bildes angezeigt wird (sinnvollerweise eine kurze Bildbeschreibung), wenn z.B. die Seite auf einem Tastdisplay für Blinde dargestellt wird, das eine Wiedergabe von Bildern nicht leisten kann. Manch einer surft auch mit einem älteren, nicht grafikfähigen Browser, oder hat im Browser zwecks schnellerer Ladezeiten übers Modem die Grafikdarstellung deaktiviert.

Je nach Browser können verschiedene Grafikformate benutzt werden. Bitmaps (.bmp) sind wegen der Dateigröße selten empfehlenswert. Praktisch jeder Browser kann Grafiken in den Formaten .jpg und .gif anzeigen (Siehe auch Teil 3: Tipps zur Minimierung der Ladezeiten). Bei der Verwendung des .gif-Formates ist zu beachten, dass dieses Format patantiert ist, und dass der Patentinhaber möglicherweise eines Tages von den Benutzern "seines" Formates Lizenzgebühren einfordern wird. Dies ist zwar m. W. bislang nicht geschehen, wer jedoch ganz sicher gehen will, kann statt .gif das öffentliche Format .png verwenden, das mindestens ebenso gut ist wie das .gif-Format.

Wie wandelt man ein Bildformat in ein anderes um? Ganz einfach: Mit einem geeigneten Bildbearbeitungs- oder -anzeigeprogramm (z. B. die Freewareprogramme Photo Filtre, XnView, IrfanView, aber auch jedes andere Programm, das die betreffenden Bildformate beherrscht) die Grafik öffnen, dann mit "Speichern unter ..." im gewünschten Format speichern. Photo Filtre bietet zudem umfangreiche Möglichkeiten zur Bearbeitung von Fotos und Grafiken.




 1.6 Links /1,5/

Links ermöglichen Sprünge durch Klicken auf hervorgehobene (normalerweise farbig und unterstrichen) Textabschnitte zu:
  • a: einer bestimmten anderen HTML-Seite im selben Verzeichnis,
  • b: einer bestimmten anderen HTML-Seite in einem anderen Verzeichnis,
  • c: einer bestimmten anderen HTML-Seite im Internet,
  • d: einem bestimmten Abschnitt (Kapitel, etc.) auf derselben (oder einer anderen) HTML-Seite.

Alle Links sind im Prinzip gleich aufgebaut:

<A HREF="Zieladresse">Linktext</A>

Je nachdem, welche der Alternativen a bis d man gewählt hat, ist die Zieladresse:
  • a: Der Dateiname der zu öffnenden Datei auf der Festplatte, z.B.:

    <A HREF="mein-rennrad.html">Hier geht's zu meiner tollen Rennmaschine</A><BR>

  • b: Der Pfad und der Dateiname der zu öffnenden Datei auf der Festplatte, mit einem vorangestellten "file:///", z.B.:

    <A HREF="file:///C:/WEB/Eigene Webseiten/mein-rennrad.html">Hier geht's zu meiner tollen Rennmaschine</A><BR>

    (Beachte: In HTML-Dokumenten wird ein normaler Schrägstrich statt eines Backslash verwendet!)

  • c: Die Webadresse (URL), ggfs. der Dateipfad im Verzeichnis des Server-Computers und der Dateiname der zu öffnenden Datei, mit dem vorangestellten Protokoll, meist "http://", z.B.:

    <A HREF="http://www.alle-meine-fahrraeder.de/mein-rennrad.html">Hier geht's zu meiner tollen Rennmaschine</A><BR>

    oder, wenn man die Datei in einem Unterverzeichnis auf dem Server untergebracht hat:

    <A HREF="http://www.alle-meine-fahrraeder.de/Sportraeder/mein-rennrad.html">Hier geht's zu meiner tollen Rennmaschine</A><BR>

    Praktisch alle Browser beherrschen auch die relative Adressierung. Bei Sprüngen von einer Webseite zu einer anderen, die in demselben Verzeichnis (auch im selben Verzeichnis auf einem Server!) liegt, muss lediglich der Dateiname der Seite angegeben werden:

    <A HREF="mein-rennrad.html">Hier geht's zu meiner tollen Rennmaschine</A><BR>

    Es empfiehlt sich, zwischen eigenen Seiten immer per relativer Adressierung zu verlinken, dann können nämlich die Seiten einschließlich ihrer Verlinkung untereinander schon vor dem Upload zum Server offline getestet werden.

  • d: Hier verhält es sich etwas anders: Da es innerhalb einer Seite von Natur aus keinerlei Zieladresse gibt, muss erst an der gewünschten Stelle (z.B. am Anfang eines Kapitels) eine Zieladresse geschaffen werden. Dies geschieht mit:

    <A NAME="Zieltext"></A>

    Der Zieltext kann beliebig gewählt werden (Zumindest Buchstaben und Ziffern erlaubt). Auf der Webseite ist die Zielmarke nicht zu sehen. Wenn zwischen Zielmarke und Kapitel-Überschrift nichts mehr stehen soll, kann die Überschrift auch gleich mit einbezogen werden:

    <A NAME="Zieltext"><B>Meine Liebste: Die Rennmaschine</B></A>

    Der Link sieht nur insofern anders aus, als dass dem Browser durch ein # vor der Zieladresse angezeigt wird, dass er zu einer Zielmarke zu springen hat:

    <A HREF="#Zieltext">Hier geht's zu meiner tollen Rennmaschine</A>

    Der Sprung zu einer Webseite kann auch mit dem Sprung zu einer Zielmarke auf dieser Webseite verknüpft werden, indem der Zieltext mit dem # einfach angehängt wird:

    <A HREF="http://www.alle-meine-fahrraeder.de/mein-rennrad.html#Sattel">Hier geht's zum Sattel meiner tollen Rennmaschine</A><BR>

    lädt die Seite www.alle-meine-fahrraeder.de/mein-rennrad.html in den Browser und springt sofort zur Sprungmarke:

    <A NAME="Sattel">Der Sattel: Ein Prachtst&uuml;ck</A>

Das Beispiel zeigt eine Seite, die vom Inhaltsverzeichnis aus den Sprung zu jedem einzelnen Kapitel und zurück ermöglicht:


 <HTML>
<BODY>

<B>50 Jahre geschuftet - und nun ???</B><BR>
Die rührselige Geschichte meines Lebens<BR>
<BR>

<A NAME="Inhalt"></A>

Inhaltsverzeichnis:<BR>
<A HREF="#Kap01">Hoffnungsfroher Anfang</A><BR>
<A HREF="#Kap02">Frustrierender Alltag</A><BR>
<A HREF="#Kap03">Das bittere Ende</A><BR>
<BR>

<A NAME="Kap01"></A>

<A HREF="#Inhalt">Zum Inhaltsverzeichnis</A><BR>
<BR>
1. Kapitel: Hoffnungsfroher Anfang<BR>

Als ich geboren wurde, ... usw.<BR>
<!-- Hier folgen lange, bittere Jugenderlebnisse.>

<BR>
<BR>

<A NAME="Kap02"></A>

<A HREF="#Inhalt">Zum Inhaltsverzeichnis</A><BR>
<BR>
2. Kapitel: Frustrierender Alltag<BR>

Nur Kinder, K&uuml;che, Kirche: jeden verdammten Tag das selbe ... usw.<BR>
<!-- Hier folgen endlose, Herz zerreissende Ausfuehrungen.>

<BR>
<BR>

<A NAME="Kap03"></A>

<A HREF="#Inhalt">Zum Inhaltsverzeichnis</A><BR>
<BR>
3. Kapitel: Das bittere Ende<BR>

Die BfA machte all meinen Hoffnungen auf einen sch&ouml;nen Lebensabend ein j&auml;hes Ende. ... usw.<BR>
<!-- Hier wird ausfuehrlich das Deutsche Rentensystem verrissen.>

<BR>
<BR>
<!-- Am Ende nochmal, damit man auch nach dem letzten Kapitel gleich wieder hochspringen kann:>
<A HREF="#Inhalt">Zum Inhaltsverzeichnis</A><BR>
<BR>

</BODY>
</HTML>


Ein weiteres Beispiel: Eine HTML-Seite, die es ermöglicht, oft gebrauchte Webseiten mit einem Mausklick aufzurufen:


 <HTML>
<BODY>

<A HREF="http://www.google.de">Google-Suchmaschine</A><BR>
<A HREF="http://www.metager.de">MetaGer-Suchmaschine</A><BR>
<A HREF="http://www.spotlight.de">Spotlight-Forum</A><BR>
... usw.

</BODY>
</HTML>

Diese Seite kann ganz normal auf der Festplatte gespeichert werden, z. B. im Verzeichnis C:\Eigene Dateien\HTML unter dem Namen Linkliste.html und mit Pfad und Dateinamen wie eine Webseite als Startseite eingetragen werden. Ein Klick auf das Startseite-Symbol bringt einen dann immer wieder auf die Linkliste für den nächsten Klick auf einen Link.
(Eintrag als Startseite: Start - Einstellungen - Systemsteuerung - Internetoptionen - Allgemein, im Feld Startseite "C:/Eigene Dateien/HTML/Linkliste.html" eintragen.)


Die Linkfarbe wird über Angaben im BODY-Tag geregelt:
<BODY bgcolor="#004455" link="#ff0000" vlink="#ff0088" alink="#00ff00">
(link: normale Linkfarbe, vlink: bereits benutzter Link, alink: aktiver Link)

Außerdem können im HEAD durch STYLE-Angaben besondere Effekte hervor gerufen werden. Im Beispiel:
<HEAD>
<STYLE>
A: link {text-decoration: none}
A: visited {text-decoration: none}
A: active {text-decoration: none}
A: hover {text-decoration: none; color: "#ffdd66"}
</STYLE>
</HEAD>
wird die Unterstreichung der Links (Standard) aufgehoben und die Farbe der Links wechselt zu #ffdd66, wenn der Mauszeiger über den Link streicht ("hover") /3/.



1.7 Quellen

/1/ Hypertext Markup Language - Die Sprache des World Wide Web
Hubert Partl, Universität für Bodenkultur in Wien, Version 1.4, Aug. 1996

/2/ Internetseiten erstellen und publizieren
Tobias Prinz, tprinz@ix.urz.uni-heidelberg.de

/3/ Ninas Homepagebaukasten

/4/ Internetseite Schritt für Schritt
Oltmanns

/5/ Waberat Kumanuwong ("Moi"): mündliche Mitteilung

Weiterführende Literatur:
Eine sehr umfangreiche HTML-Anleitung auch für Fortgeschrittene findet man unter
www.teamone.de/selfhtml.html
Der Gesamtumfang steht zum Download bereit.

Tipps und Tricks kann man leicht durch suchen und fragen in einschlägigen Foren im Internet erhalten. Beispielsweise im Forum HTML von www.spotlight.de. Außerdem kann man Webseiten herunterladen und speichern, die etwas enthalten das den eigenen Vorstellungen und Wünschen entspricht und im Quelltext nachschauen, wie es die anderen Verfasser gemacht haben.




 (c) Heiner Grimm, Clausthal-Zellerfeld
Diese Anleitung zum Erstellen von Internetseiten in HTML darf zum Gebrauch im privaten Bereich und an nicht gewerblichen Schulen frei vervielfältigt und weitergegeben werden, sofern sie dabei vollständig und unverändert bleibt. Jedweder Gebrauch zu gewerblichen Zwecken bedarf einer Lizenzierung durch den Autor.
[ Homepage (Seitenübersicht/Sitemap) ] [ Downloads ] [ Impressum ] [ Gästebuch ]