Informationen für eigene Internetaktivitäten.  
Ein HTML-Kurs
Lernen Sie die Grundlagen der Seitenerstellung kennen. Schritt für Schritt zur eigenen Homepage.
 
  • Überblick
  • Grundgerüst
  • Farbe
  • Textauszeichnungen
  • Textgestaltung
  • Aufzählungen
  • Verknüpfungen
  • Bilder
  • GIF-Animationen
  • Tabellen
  • Werkzeuge
  • Internetnamen
  • Weitere Quellen
     
  • Internetname
    Reservieren Sie Ihren eigenen Internetnamen. Meiner jüngsten Tochter gehört zum Beispiel der Name lea-becker.de.
    Der eigene Internetname kann ein schönes Geschenk von bleibendem Wert für die Kinder und Enkelkinder sein.

     
    Referenzen
    Besuchen Sie Seiten unserer Internetkunden.

     
    Auszeichnungen
    Klappern gehört zum Handwerk.

     
    Impressum
    Hier finden Sie unsere Kontaktdaten sowie etwas zum Lesen für die Juristen.

     
    Weitere Sites
  • helpmaster.com
  • cbtmaster.org
  • paintmaster.de
  • appletmaster.de
  • hypermaster.de
     
  •  
    HTML - Schritt für Schritt
     
    Eine der entscheidenden Stärken von HTML ist die Möglichkeit der Verknüpfung von HTML-Seiten mit anderen HTML-Seiten. Sie klicken auf ein farblich markiertes und meistens unterstrichenes Wort - und schon wird die mit diesem Wort verknüpfte Seite angezeigt.
     
    In dieser Folge geht es um das Einfügen solcher Verknüpfungen in eigene HTML-Seiten. Auch wenn Sie nicht vorhaben Seiten in aller Welt in Ihren Internetauftritt einzubinden benötigen Sie Verknüpfungen. Oder wie soll der Besucher Ihrer Seiten von der Hauptseite aus auf Ihre anderen Seiten verzweigen können?
     

    Einfügen von Verknüpfungen (Links)
     
    In den Beispielen wird gezeigt, wie Sie mit Hilfe von Verknüpfungen ein Menüsystem realisieren können. Gezeigt werden auch die verschiedenen Optionen des Seitenaufrufs.
     
     
    Die Standardform eines Links
     
    Die Standardform eines Links sieht so aus:
     
    Zum Inhaltsverzeichnis - blau, bevor der Link benutzt wurde
    Zum Inhaltsverzeichnis - rot, während der Link benutzt wird
    Zum Inhaltsverzeichnis - violett, nachdem der Link benutzt wurde
     
    Wenn keine besonderen Textattribute gesetzt werden, sieht der Besucher Ihrer Seite unterstrichenen Text in blauer Farbe. Wenn Sie auf den Link klicken, wird das Inhaltsverzeichnis angezeigt. Im gezeigten Beispiel wird nicht wirklich zum Inhaltsverzeichnis verzweigt - Sie wollen ja noch weiterlesen. In HTML wird der Link so codiert:
     
    <a href="index.htm">Zum Inhaltsverzeichnis</a>
     
    Mit diesen Informationen können Sie bereits eine Einstiegsseite schreiben, von der aus auf verschiedene andere Seiten verzweigt wird (auch hier sind die Links nicht hinterlegt):
     
    Mein Haus
    Mein Auto
    Meine Yacht
    Mein Swimmingpool
     
    So sieht das in HTML aus:
     
    <a href="haus.htm">Mein Haus</a><br>
    <a href="auto.htm">Mein Auto</a><br>
    <a href="yacht.htm">Meine Yacht</a><br>
    <a href="swimmingpool.htm">Mein Swimmingpool</a>
     
    Diese Linkliste kann natürlich optisch hervorgehoben und vom übrigen Text abgesetzt werden. Beispielsweise indem die Links als ungeordnete Liste ausgezeichnet werden: So sieht das in HTML aus:
     
    <ul>
      <li><a href="haus.htm">Mein Haus</a>
      <li><a href="auto.htm">Mein Auto</a>
      <li><a href="yacht.htm">Meine Yacht</a>
      <li><a href="swimmingpool.htm">Mein Swimmingpool</a>
    </ul>
     
     
    Achtung: Fehlerfalle bei Dateinamen
     
    Die am häufigsten an mich gerichtete Frage lautet:
     
    Frage:
    Ich habe eine Linkliste angelegt und es funktioniert auch alles ganz wunderbar, solange ich die Links auf meiner Festplatte teste. Wenn ich dann die Seiten auf meinen Internetserver kopiert habe funktioniert gar nichts mehr. Der Server gibt immer eine Fehlermeldung aus und behauptet, die Seiten sind nicht vorhanden. Dabei sind sie ganz bestimmt da!
     
    Antwort:
    Windows unterscheidet bei Dateinamen nicht zwischen Groß- und Kleinschreibung. Die meisten Server im Internet sind jedoch UNIX-Maschinen. Für UNIX sind index.htm und INdex.Htm und INDEX.HTM drei unterschiedliche Dateien. Sie haben wahrscheinlich bei den Dateibezeichnungen nicht auf die Schreibweise geachtet. Benutzen Sie immer Kleinbuchstaben. Dann kommen Sie nicht durcheinander.
     
     
     
    Relative und absolute Pfadangaben
     
    Der vollständige Name dieser Seite im Internet lautet
     
    http://www.htmlmaster.de/html-kurs/06html.htm
     
    Wenn Sie von Ihrer Seite aus einen Link auf diese Seite legen, dann müssen Sie diese Adresse vollständig angeben. Dieser absolute Link sieht dann so aus:
     
    <a href="http://www.htmlmaster.de/html-kurs/06html.htm">So wird gelinkt</a>
     
    Absolute Links enthalten vollständige Pfadangaben einschließlich des Domainnamens. Absolute Links werden hauptsächlich von Leuten benutzt, die keine eigenen Inhalte sondern Listen mit Überschriften wie "HOT HOT *** Die coolsten Seiten im Web *** HOT HOT" ins Internet stellen.
     
    Wenn Sie Ihre eigenen Seiten verknüpfen, dann benutzen Sie besser relative Links. Der relative Link enthält keine vollständige Adresse. Enthalten sind nur die Angaben, welche von der aufrufenden Datei mindestens benötigt werden, damit die andere Datei eindeutig gefunden wird. Im Beispiel soll die Datei index.htm die Datei start.htm aufrufen.
     
    http://www.htmlmaster.de/index.htm
    http://www.htmlmaster.de/start.htm
     
    Beide Dateien liegen am gleichen Ort. Für eine eindeutige Adressierung wird lediglich der Dateiname benötigt. Pfadangaben sind hier überflüssig.
     
    <a href="start.htm">Los gehts!</a>
     
    Solange beide Dateien im gleichen Verzeichnis liegen, findet index.htm die Datei start.htm. Auch wenn sie sich auf Ihrer lokalen Festplatte befinden.
     
    C:\hmaster\html\index.htm
    C:\hmaster\html\start.htm
     
    Mit der relativen Adressierung <a href="start.htm">Los gehts!</a> können Sie die Links bereits testen, bevor die Seiten im Internet stehen. Sie können Ihre Seiten sogar auf eine CD brennen und weitergeben. Die Links funktionieren!
     
     
    Komplexere relative Pfadangaben
     
    Solange alle Seiten in einem gemeinsamen Verzeichnis stehen sind Links mit relativer Adressierung problemlos. Sie geben lediglich den Dateinamen an. Bei kleinen Sites reicht das auch aus. Größere Sites werden Sie strukturieren. Sie werden bereits während der Entwicklung auf Ihrer lokalen Festplatte eine Verzeichnisstruktur anlegen. Im Internet selbst werden Sie die Dateien dann später mit identischer Verzeichnistruktur ablegen. Die Angabe des Dateinamens reicht dann nicht mehr aus.
     
    http://www.htmlmaster.de/index.htm
    http://www.htmlmaster.de/html-kurs/06html.htm
     
    Wenn die Datei index.htm die Datei 06html.htm aufrufen soll, dann geben Sie einfach den relativen Pfad zusätzlich zum Dateinamen an. Das sieht dann so aus:
     
    <a href="html-kurs/06html.htm">HTML Schritt 6</a>
     
    Im Beispiel wurde eine Datei verknüpft, die eine Verzeichnisebene tiefer liegt. Genau diese Verzeichnisnamen wurden in die Adressierung aufgenommen. Auch nicht so schwer. Aber wie sieht es aus, wenn ein Rücksprung realisiert werden soll? Nun wenn Sie es wissen, ist es ebenfalls ganz einfach. Die Zeichenfolge für den Rücksprung um eine Verzeichnisebene lautet ../. Von der Datei 06html.htm aus soll ein Link zur index.htm führen.
     
    http://www.htmlmaster.de/html-kurs/06html.htm
    http://www.htmlmaster.de/index.htm
     
    Es soll um eine Verzeichnisebene zurückgesprungen werden. In HTML sieht das dann so aus:
     
    <a href="../index.htm">Inhaltsverzeichnis</a>
     
    Nun fehlt nur noch ein Beispiel dass zeigt, wie eine Datei in einem ganz anderen Verzeichnispfad aufgerufen wird.
     
    C:\hmaster\tests\komplex\neu\index.htm
    C:\hmaster\tests\fullscreen\beispiel.htm
     
    Die Datei index.htm soll die Datei beispiel.htm aufrufen. Der Weg dorthin führt zunächst zwei Verzeichnisebenen zurück und dann vorwärts in das Verzeichnis fullscreen.
     
    <a href="../../fullscreen/beispiel.htm">Fullscreen Beispiel</a>
     
    Als Beispiel wurde bewußt die Verzeichnisstruktur einer lokalen Festplatte gewählt. Verzeichnisse werden unter DOS und Windows durch das Backslash genannte Zeichen \ voneinander getrennt. HTML erwartet immer Slash / (auf der Tastatur über der 7). Auch dann, wenn Sie lokal arbeiten!
     
     
    Linkattribute
     
    Ein Link kann mit einem Titel versehen werden. Wenn der Mauszeiger über dem Link steht, wird dieser Titel dann nach kurzer Verzögerung in einem kleinen, hellgelben Fenster angezeicht. Allerdings nicht von allen Browsern.
     
    HTML Kurs, 6. Teil
     
    In HTML sieht das dann so aus:
     
    <a href="02html.htm" title="Verknüpfungen (Links)">
    HTML Kurs, 6. Teil
    </a>
     
    Standardmäßig wird die neue Seite im Browserfenster der aufrufenden Seite angezeigt. Die neue Seite ersetzt also die aufrufende Seite. Es kann jedoch gewünscht werden, dass die neue Seite in einem eigenen Browserfenster erscheint. Die wird durch das Attribut target="_blank" erreicht.
     
    Diese Seite in einem zweiten Fenster öffnen
     
    In HTML sieht das dann so aus:
     
    <a href="06html.htm" target="_blank">Diese Seite in einem zweiten Fenster öffnen</a>
     
     
    Andere Dateitypen in Links einbinden
     
    Üblicherweise werden mit Verknüpfungen andere HTML-Seiten aufgerufen. Hier geht es nun um andere wichtige Verknüpfungen:
    • Senden einer eMail
    • Download einer Datei
    Häufig finden Sie auf Webseiten einen Link, der beispielsweise mit eMail an HTML Master beschriftet ist. Wird der Link angeklickt öffnet sich das Mail-Programm.
     
    <a href="mailto:">eMail</a>
     
    Die Empfängeradresse ist schon eingetragen
    <a href="mailto:jb@htmlmaster.de">eMail an HTML Master</a>
     
    Außerdem kann die Betreffzeile schon eingetragen werden
    <a href="mailto:jb@htmlmaster.de?subject=Ihre Seite">eMail an HTML Master</a>
     
    Und hier wurde zusätzlich schon mit dem Text der Mail begonnen
    <a href="mailto:jb@htmlmaster.de?subject=Ihrer Seite&body=Hallo Meister">eMail an HTML Master</a>
     
    Sie bieten eine Datei zum Downlad an, indem Sie statt einer HTML Seite einfach den Namen der Datei angeben, die übertragen werden soll. Wird der Link angeklickt, stellt der Browser die Frage, ob die Datei auf der Festplatte gespeichert oder angezeigt werden soll. Wenn Sie den folgenden Link benutzen, dann können Sie das meiner Meinung nach beste kostenlose deutschsprachige Programm zur Erstellung von HTML Seiten laden:
     
    Download: HTML Editor Phase 5² (ca. 900kb)
     
    <a href="http://www.helpmaster.com/zip/hesetup.exe">
    Download: HTML Editor Phase 5²
    </a> (ca. 900kb)
     
    Die Angabe einer Dateigröße wird von HTML nicht benötigt. Sie sollten diesen Wert auf jeden Fall mit angeben. So kann der Besucher Ihrer Seiten in etwa abschätzen, wie lange der Ladevorgang dauern wird.

     
     
    htmlmaster.de © 2002 helpmaster.de GmbH, Usastraße 46, 61267 Neu-Anspach, Tel. 06081-94080