HTML Workshop


 

Home
Nach oben
Häufige Fehler
Checkliste
HTML Workshop

HTML-Anleitungen
Wie richte ich einen Zugriffszähler ein?
Welches Grafikformat verwende ich?
Wie verwende ich meta-tags?
Was sollte ich beim Seiten-Layout beachten?
Kurzüberblick der wichtigsten stilistischen Richtlinien
 

HTML-Anleitungen

HTML-Anleitung von Stefan Münz

Ausführliche und auch für Anfänger geeignete Anleitung
zum Erstellen von HTML-Dateien mit allen Tags und Attributen
und vielen Beispielen.
Die Anleitungs ist selbst in HTML erstellt und kann online
gelesen werden oder komplett heruntergeladen werden.

Wie richte ich einen Zugriffszähler ein?

Der Web-Server von EBE-Online bietet eine Möglichkeit, die Zugriffe auf eine beliebige Webseite mitzuzählen und den aktuellen Zählerstand auf der Webseite als kleine Graphik auszugeben.

Um auf einer eigenen Webseiten einen solchen Zähler auszugeben, muß die folgende Zeile in den HTML-Code der Seite eingebaut werden:

<IMG SRC="http://www2.ebe-online.de/cgi-bin/counter/counter.exe
?link=http://www.ebe-online.de/home/XXXXXXX
&style=odometer
&width=4">

Zeilenschaltungen wurden hier nur zur besseren Lesbarkeit eingefügt.
Der Counter-Aufruf darf eigentlich keine Zeilenschaltungen enthalten und sollte genau genommen so aussehen:

<IMG SRC="http://www2.ebe-online.de/cgi-bin/counter/counter.exe?link=http://www.ebe-online.de/home/XXXXXXX&style=odometer&width=4">

Die einzelnen Zeilen und Parameter bedeuten dabei:

Der Counter-Aufruf ist in einen normalen IMG-Tag eingebunden.
Dieser IMG-Tag kann behandelt werden wie jeder andere IMG-Tag auch und auch die gleichen Attribute tragen.

Innerhalb der " " des SRC ist insbesondere auf das ? hinter dem counter.exe zu achten (?link=; damit werden die einzelnen Argumente für das Programm eingeleitet) und auf die &-Zeichen vor den einzelnen Argumenten (&style= und &width=; damit werden die Argumente voneinander abgetrennt).

Programm-Aufruf

<IMG SRC="http://www2.ebe-online.de/cgi-bin/counter/counter.exe

Das ist der eigentliche Programmaufruf (counter.exe). Hier sollte nichts geändert werden!

Überwachte Webseite

?link=http://www.ebe-online.de/home/XXXXXXX

Hier wird der vollständige URL der Webseite angegeben, die gezählt werden soll.
Statt der XXXXXXX wird hier also etwa
kobermay/index.htm angegeben, um die Zugriffe auf meine Webseite zu zaehlen.

Anzeige-Stil

&style=odometer

Hier wird das Aussehen der Anzeige festgelegt.
Dabei kann statt
odometer aus folgenden Möglichkeiten ausgewählt werden:

beach chalk curly cyan ebeonline eggs electric fancy frozen lcd led neat noisy odometer oldstyle orange red schrift scorebrd sf speckled timex

(Auf der Titelseite des EBE-Online-Servers wird "ebeonline" verwendet, ansonsten erfreut sich "odometer" großer Beliebtheit.)

Stellenzahl der Anzeige

&width=4">

So viele Stellen werden angezeigt!
(In den meisten Fällen dürften hier 4 Stellen ausreichen - womit ich jedoch niemand die Hoffnung auf viele zehntausend Zugriffe nehmen will.)

... noch Fragen?

Wenn es nicht funktioniert, prüfen Sie bitte, ob Sie alle " ", alle ? und alle &-Zeichen an den richtigen Stellen plaziert haben und ob der Aufruf der zu zählenden Seite korrekt eingetragen ist!

 

Welches Grafikformat verwende ich?

Im WWW werden zwei Grafik-Formate verwendet, wobei jedes seine speziellen Vorteile und Nachteile hat. Diese Formate, nämlich gif und jpg werden kurz und prägnant beschrieben im Rahmen des in HTML-Tip 1 vorgestellten HTML-Tutorials. Wer mehr darüber erfahren möchte, gehe zu Grafik-Formate.

 

Wie verwende ich meta-tags?

Das folgende Beispiel sollte die (richtige) Verwendung dieser tags näher erläutern. Es ist aus dem Buch "HTML - The Definitive Guide" von Chuck Musciano und Bill Kennedy entnommen, das bei O'Reilly erschienen ist.

Fügt man in den Kopf eines HTML-Dokuments folgende Zeilen ein

<meta http-equiv="keywords" content="kumquats, cooking, peeling ,eating">
<meta http-equiv="expires" content="31 Dec 2008">

so wird neben dem eigentlichen Inhalt der HTML-Datei noch folgende Information an den Browser übermmittelt:

content-type: text/html
keywords: kumquats, cooking, peeling ,eating
expires: 31 Dec 2008

Dabei wird die Zeile

content-type: text/html

natürlich stets, d.h. auch ohne Verwendung von meta-tags, an den Browser übertragen, der daran erkennt, um welche Art von Datei es sich handelt. Die beiden folgenden Zeilen

keywords: kumquats, cooking, peeling ,eating
expires: 31 Dec 2008

können nun zusätzlich von Suchmaschinen für den Eintrag in Suchmaschinen benutzt werden.

Neben der Verwendung des Attributes http-equiv kann man auch das Attribut name verwenden, wobei dann jedoch nur der Eintrag in Suchmaschinen möglich ist, die Übermittlung der Information an den Browser jedoch unterbleibt.

 

Was sollte ich beim Seiten-Layout beachten?

Ein erster wichtiger Gesichtspunkt ist, dass Seiten im Web nicht zu lang sein sollten. Dies betrifft einerseits die Dateigröße (um zu lange Übertragungszeiten zu vermeiden), andererseits die Größe auf dem Bildschirm (um unnötiges Scrollen zu vermeiden). Aus diesem Grund sind auch diese HTML-Tips jetzt auf mehrere Seiten aufgeteilt worden.

Seiten sollten auf verschiedenen Bildschirmgrößen gut vom Browser dargestellt werden können. In diesem Zusammenhang sollte man bei der Verwendung von Frames möglichst dynamische Fensteraufteilungen vorsehen.

Um die Navigation zu erleichtern, sollte man Steuerleisten verwenden. Damit diese auch sichtbar sind (ohne großes Scrollen!) ist es wieder wichtig, dass die Seiten nicht zu lang sind. Es empfiehlt sich auch, diese Steuerleisten nicht unbedingt rechts anzubringen, um sie bei verschiedenen Bildschirmgrößen auch stets benutzen zu können.

Generell ist zu sagen, dass man dem Browser einige Freiheit lassen sollte, da in jedem Fall der Benutzer eigene Einstellungen vornehmen kann und ein zu starres Konzept dann eher zu negativen Effekten führt. Wenn möglich sollte man auch seine Homepage mit verschiedenen Browsern testen. Obwohl der Internet Explorer von Microsoft heute mit weit über 80% der am häufigsten verwendete Browser ist,  sollte man andere Browser wie Netscape und Opera nicht vernachlässigen.

 

Kurzüberblick der wichtigsten stilistischen Richtlinien

Sowohl die Verfasser als auch die Leser von HTML-Dokumenten sollten sich einiger stilistischer Richtlinien für HTML bewusst sein. Es gibt gute Gründe dafür, dass viele HTML-Dokumente über ein ähnliches Layout verfügen. Wenn Sie sich dieser Gründe bewusst sind, hilft Ihnen dies dabei, sich bestens innerhalb dieser Seiten zurechtzufinden.

HTML-Autoren sollten drei generelle Richtlinien beim Entwurf ihrer World Wide Web-Seiten in Betracht ziehen:

  • Wartungsfreundlichkeit: Ein HTML-Dokument kann im Internet für Monate oder gar Jahre verfügbar sein. Während dieser Zeit werden Änderungen am Dokument nötig, um Fehler zu berichtigen, neue Informationen hinzuzufügen und um mit den Änderungen des Systems, des Internet oder des HTML-Standards selbst Schritt zu halten.
  • Zugriffsmöglichkeit: Nicht alle verwenden den gleichen Browser, und die heute populären Browser gibt es morgen vielleicht nicht mehr. Aus diesem Grund vermeiden umsichtige Designer Merkmale, die lediglich in bestimmten Browsern zur Verfügung stehen. Denken Sie daran, dass sich vielfach noch textorientierte Browser im Einsatz befinden. Tatsächlich ziehen viele Leute textorientierte Browser vor, weil diese sehr viel schneller sind und werden sie möglicherweise auch dann noch weiterverwenden, wenn grafische Browser verfügbar sind.
  • Geschwindigkeit: Die Teilnehmer verfügen über unterschiedliche Anschlüsse. Jemand, der über ein langsames Modem zugreift, wird es nicht besonders schätzen, wenn er bis zu fünf Minuten auf den Empfang einer großen Abbildung warten muss.

Vielfach werden diese Aspekte weitgehend vernachlässigt und HTML-Dokumente lediglich für einige gute Freunde mit schnellem Zugang zum Internet entworfen, die alle den gleichen Browser verwenden. Viele Geschäftsleute beschäftigen aber auch professionelle Gestaltungskünstler, die hart arbeiten, um Dokumente zu erzeugen, die diese Belange berücksichtigen. Es folgen einige besonders zu berücksichtigende Gedanken:

  • Halten Sie es einfach: Professionelle Designer brauchen Jahre, um die wirkungsvolle Kombination verschiedener Effekte zu erlernen. Sie lernen das Ausbalancieren der Effekte, so dass unwichtige Teile des Entwurfs (wie ein einzelnes hervorgehobenes Wort) nicht den Rest des Dokuments »erschlagen«. Das Erreichen dieser Balance wird dadurch erschwert, das jeder Browser die Dinge etwas anders handhabt. (Beispielsweise weicht die Ausrichtung von Bildern und Text zwischen verschiedenen Browsern voneinander ab.) Der wohl am häufigsten von Schöpfern neuer World Wide Web-Dokumente begangene Fehler liegt im Einsatz zu vieler Spezialeffekte.
  • Verwenden Sie keine verworfenen Eigenschaften: Bestimmte HTML-Tags (zum Beispiel XMP, LISTING oder PLAINTEXT) werden in den Referenzen als verworfen gekennzeichnet. Diese Kennzeichnung bedeutet, dass sich diese Tags bei intensiver Nutzung von HTML als wenig sinnvoll erwiesen haben. Neue Browser unterstützen diese Tags möglicherweise gar nicht mehr.
  • Verwenden Sie Grafiken mit Interlace: Die GIF-Grafiken in den meisten World Wide Web-Dokumenten verwenden das Zeilenspringverfahren, bei dem zunächst jede achte, dann jede vierte Zeile usw. übertragen wird. Einige Browser zeigen das Bild während der Übertragung nach und nach an, wodurch man bereits lange vor dem vollständigen Empfang einen recht guten Eindruck vom Bild erhält.
  • Verwenden Sie Bilder sparsam: Bilder benötigen viel mehr Übertragungszeit als Text, und Anwender mit langsamen Verbindungen werden eine Seite kaum mehrmals aufsuchen, wenn deren Anzeige zu viel Zeit beansprucht. Wenn Sie ein wenig sorgfältig vorgehen, können Sie mit einigen kleinen Abbildungen den gleichen Effekt wie mit einer wesentlich größeren Abbildung erzielen; diese lassen sich aber schneller laden und anzeigen.
  • Verwenden Sie Skizzen: Grafiken werden in komprimierter Form übertragen. Je besser sich die Grafiken komprimieren lassen, desto schneller werden sie übertragen. Grafiken mit wenigen Farben lassen sich wesentlich besser komprimieren. Holzschnitte oder Art-Deko-Bilder können sehr modern aussehen und lassen sich gleichzeitig gut komprimieren. Grafiken mit weichen Farbübergängen lassen sich andererseits nur sehr schlecht komprimieren.
  • Lagern Sie große Bilder aus: Statt ein großes Bild oder Imagemap in die Mitte der Seite zu stellen, setzen umsichtige Designer kleine Versionen der Bilder als Verknüpfung zur größeren Version ein. Auf diese Weise können die Leser Ihrer Seite entscheiden, ob sie auf das große Bild warten wollen oder nicht.
  • Verwenden Sie Bilder mehrmals: Die meisten HTML-Browser erkennen die Mehrfachnutzung einzelner Bilder und laden sie nur einmal, auch wenn das Bild auf vielen verschiedenen Seiten erscheint. Dieses Verfahren sorgt für farbigere Seiten ohne größeren Geschwindigkeitsverlust.
  • Wählen Sie angemessene Größen: Verschiedene Arten von Informationen passen auf verschieden umfangreiche Seiten. Wenn Sie erwarten, dass ein Text komplett gelesen oder herunter geladen und später gelesen wird, setzen Sie alle Informationen auf eine einzige Seite. Wenn Sie erwarten, dass nur kleinere Abschnitte gelesen werden, verteilen Sie den Text auf mehrere Seiten, so dass der Leser die interessanten Teile leicht finden und direkt zu ihnen verzweigen kann. Vermeiden Sie sehr umfangreiche Seiten, die für manche Leser ungewohnt sind.
  • Verwenden Sie keine Browser-spezifischen Eigenarten: Wenn eine bestimmte Eigenart nur in einigen Browsern verfügbar sind, verwenden Sie diese Eigenart in Ihren Seiten nur vorsichtig. Das Resultat kann in anderen Browsern seltsam aussehen. Bedenken Sie auch, dass diese Eigenart in anderen Browsern möglicherweise bewusst nicht implementiert wurde.
  • Vorsicht bei ungewöhnlichen Symbolen: Der HTML-Standard verwendet gegenwärtig 150 Latin 1, aber nicht alle Browser haben Zugriff auf diesen Zeichensatz. Vorsicht bei Nicht-ASCII-Zeichen. Ein verbreiteter Fehler in HTML-Referenzen ist die Behauptung, dass Microsoft Windows den ISO Latin 1-Zeichensatz verwenden würde. Diese Aussage ist nicht richtig. Microsoft Windows unterstützt einige Zeichen, die in ISO Latin 1 fehlen, unter anderem An- und Abführungszeichen (» und »), en-Striche und em-Striche (- und -).
  • Verwenden Sie Trennlinien: Insbesondere in umfangreicheren Dokumenten stellen Trennlinien (horizontale Linien quer über die Seite) ein einfaches und effektives Mittel zur Trennung wichtiger Teile dar. Einige HTML-Autoren haben ersatzweise eine breite horizontale Grafik verwendet. Wenn Sie dies ebenfalls machen wollen, seien Sie vorsichtig. Derartige Bilder verändern ihre Größe nicht mit dem Fenster; Anwender könnten bei der Änderung der Fenstergröße Überraschungen erleben.
  • Verwenden Sie logische Auszeichnungen: Auch wenn HTML über Tags verfügt, mit denen Sie bestimmte Schriftauszeichnungen (fett, kursiv, unterstrichen) veranlassen können, unterstützen nicht alle Browser diese spezifischen Effekte. Alle Browser beherrschen aber irgendeine Form der Hervorhebung.
  • Verwenden Sie wenige Schriftarten: Einer der häufigsten Fehler der Amateur-Grafikdesigner ist die Verwendung zu vieler Schriftarten. Im allgemeinen sind Fließtext und Hervorhebungen unter gelegentlichem Einsatz von CODE- oder SAMP-Tags ausreichend.
  • Verwenden Sie für Verknüpfungen mit anderen Dokumenten einen Ort: Die schlimmsten Kopfschmerzen hinsichtlich der Dokumentwartung verursacht bei HTML-Autoren die Kontrolle, ob ihre Verbindungen zu anderen Dokumenten weiterhin gültig sind. Ein Weg zur Vereinfachung dieser Aufgabe besteht darin, der Versuchung zu widerstehen, eine Fülle von Links über die gesamten Seiten zu verteilen. Wenn Sie die externen Verknüpfungen auf Seiten mit den Titeln Literaturverzeichnis, Weiterführende Informationen oder Andere coole Quellen sammeln, brauchen Sie lediglich eine Seite zu überprüfen, um sicherzustellen, dass alle externen Links weiterhin gültig sind.
  • Verwenden Sie relative Adressen: Links zwischen nahe verwandten Seiten müssen keine absoluten URLs verwenden. Wenn Sie lediglich den letzten Teil der URL angeben und den Browser die korrekte vollständige Adresse zusammenstellen lassen, sind die Seiten besser gegen bestimmte Formen allgemeiner Änderung isoliert.
  • Links zur eigenen Home Page: Von Zeit zu Zeit befindet man sich auf merkwürdigen Seiten und will wieder zur zugehörigen Home Page zurück. Diese Situation kann entstehen, wenn jemand anderes eine direkte Verbindung zu der Seite hergestellt hat oder wenn jemand eine Seite herunter geladen hat, um sie sorgfältig zu überarbeiten. In beiden Fällen sorgen Links zur Home Page auf allen Ihren Seiten dafür; dass die Leser wieder zurückfinden.
  • Verweise auf andere Home Pages: Home Pages bleiben üblicherweise verfügbar, auch wenn oft Zweifel hinsichtlich des Arrangements der übrigen Seiten bestehen. Soweit möglich bzw. sinnvoll, verwenden Sie die Home Pages anderer Autoren als Ziel Ihrer Verweise anstelle der spezifischen interessierenden Seite. Wenn Sie eine Verbindung zu einer speziellen Seite herstellen müssen, versetzt einen ein zusätzlicher nahe gelegener Verweis auf die zugehörige Home Page in die Lage, die Informationen selbst dann aufzufinden, wenn die spezielle Seite verschoben wurde.
  • Unterzeichnen Sie Ihre Seiten: Mittlerweile ist es Tradition, dass jede Seite einen Querverweis mit dem Namen des Autors und seiner Mail-Adresse enthält. Das Ziel dieses Verweises ist eine Seite mit Informationen über den Autor, manchmal mit Foto, Rücksprung und anderen Informationen.
  • Lesen Sie Ihre Seiten Korrektur: Ein gewichtiger Umstand, der die wenigen guten lnternet-Quellen ans der erdrückenden Menge schlechter Quellen unterscheidet, ist der, dass die guten sorgfältig geprüft und bearbeitet werden. Die Zeit, die für das Korrekturlesen, Sammeln von Kommentaren von Freunden und bewusste doppelte Prüfung aufgewendet wird, kann den Hauch von Professionalität verleihen, der Ihren Seiten das Überleben sichert. Derartige Nachbearbeitungen kosten Zeit, worin genau der Grund liegt, warum so viele Leute diese Arbeiten vernachlässigen.

Weiterführende Informationen

Wenn Sie Zugang zum World Wide Web haben, stellt die Home Page von W3, die die Entwicklung vieler World Wide Web-Standards unterstützen, einen guten Startpunkt dar. Suchen Sie mit Ihrem Browser http://www.w3.org für nähere Einzelheiten auf. Selbst wenn Sie das Lesen eines guten Buchs zum Thema vorziehen, stellt diese Seite eine gute Quelle aktueller Informationen dar. Weil sich die Standards mit großer Geschwindigkeit entwickeln, werden Sie in jedem Buch veraltete Informationen finden.

Angesichts des schnell wachsenden Interesses am World Wide Web gibt es einige gute Bücher, die speziell dem Thema HTML gewidmet sind. lan Grahams HTML Sourcebook ist eine gute Referenz für HTML und HTTP.

HTML-Editoren und andere Werkzeuge für den Macintosh finden Sie in den Info-Mac-Archiven im text/_HTML-Verzeichnis.

Yahoo verfügt über ein wohl organisiertes Verzeichnis mit HTML-Werkzeugen für viele Plattformen, inklusive eigenständiger Editoren und Tools zur Konvertierung verschiedener Textverarbeitungsformate nach HTML. Im Hauptindex von Yahoo wählen Sie Computers and Internet, dann World Wide Web und schließlich HTML Editors.
 

Zurück • Home   Impressum  Datenschutzerklärung
Copyright © 1998-2017 EBE-Online. Alle Rechte vorbehalten.