Tips & Tricks für gutes HTML

Vorwort

Immer mehr versuchen sich auch Hobbywebmaster an der Erstellung von eigenen Internetseiten. Leider schleichen sich immer wieder gravierende Fehler im Layout und im Quelltext solcher Webprojekte ein. Das vorliegende Dokument soll helfen häufige Fehler im Umgang mit HTML und Homepagedesign zu erkennen und zu verbessern. Gleichzeitig möchte ich Sie zwingen sich ein wenig mit HTML zu beschäftigen(siehe Tipp 2), da dieses Dokument einige grundlegende Kenntnisse voraussetzt. Dieses Dokument versteht sich allerdings nicht als eine Einführung in die HTML Programmierung, da es auf diesem Gebiet viele Leute gibt die das deutlich besser können als ich!!!! In diesem Sinne hoffe ich, daß Sie diesem Dokument einige nützliche Tipps, Tricks und Links entnehmen können.

Tipp 1

Eine Internetseite sollte Sinn machen!!!

Bevor Sie anfangen ihre eigene Internetseite zu programmieren sollten Sie sich fragen mit welchem Inhalt die Seite später gefüllt werden soll. Die 1230ste Seite zum Thema Ü-Eier sollte es möglichst nicht sein. Nutzen Sie Suchmaschinen um herauszufinden wie groß das Angebot auf dem angestrebten Gebiet ist. Sie sollten auf jeden Fall Ahnung von dem haben, was sie später auf Ihrer Seite publizieren. Ein ganz besonderes Hobby, fundierte Kenntnisse auf einem bestimmten Gebiet oder eine sehr ausgefallene Sammelleidenschaft sind meist gute Grundlagen für einen Internetseite.

Tipp 2	Lernen Sie etwas über HTML
	Wenn Sie Auto fahren wollen, dann müssen Sie einen Führerschein machen. Wer seine eigene Homepage bauen will, der sollte sich mit dem Thema HTML beschäftigen. Keiner verlangt, daß Sie die komplette Befehlsreferenz im Kopf haben. Trotzdem ist für eine saubere Programmierung ein Grundstein an HTML Kenntnissen erforderlich. Gerade wenn Sie ihre Seite mit einem Hilfsprogramm wie zum Beispiel Microsoft Frontpage erstellen ist es gut, wenn man von Hand ein wenig nacharbeiten kann. Nachfolgend finden Sie Internetseiten und Buchtipps zum Thema HTML:

	Internetseiten:
	http://www.html-seminar.de
	http://selfhtml.teamone.de

	Bücher:
	HTML - Von der Baustelle bis JavaScript(Helmut Erlenkötter): 10,17EUR
	HTML 4.0 Handbuch - Sonderausgabe(S. Münz, W. Nefzger): 25,00EUR
	Eigene Homepage erstellen(Peter Müller): 15,31EUR
	Achtung: Alle Seiten werden in einem neuen Browserfenster geöffnet!

Tipp 3	Homepagebaukästen und Co...
	Viele Webhoster bieten einen sogenannten Homepagebaukasten an. Mit diesem können Sie meist online die eigene Homepage zusammenbasteln. Ich halte diese Baukästen selbst für einfache Seite als ungeeignet, da die Gestaltungsmöglichkeiten und auch die Nachbearbeitung des HTML Quelltextes eingeschränkt bzw. nicht möglich ist. Alternativ können Sie auf Programme wie zum Beispiel Microsoft Frontpage oder HotMetall zurückgreifen. Hier ist neben dem Drag und Drop Modus auch das manuelle Nachbearbeiten des Quelltextes m&puml;glich.

Tipp 4

Layout richtig planen

Bevor Sie anfangen Ihre Internetseite zu gestallten, sollten Sie sich kurz Gedanken zum Layout machen. Bewährt hat sich eine kleine Skizze auf einem DIN A4 Blatt. Hier sollten Sie das grobe Layout aufzeichnen. Eventuell können Sie hier auch schon eine Übersicht der Menüpunkte mit den geplanten Dateinamen anlegen. Gerade bei einer Frameseite ist es wichtig zu wissen, in welcher Seite die Framedarstellung definiert wird und wie die Dateinamen der einzelnen Frameseiten lauten.

Tipp 5

Frames richtig einsetzen

Überlegen Sie sich genau, ob Sie wirklich eine Framedarstellung brauchen. %Auml;ltere Browser unterstützen Frames nämlich nicht. Ab dem Microsoft Internet Explorer 3.0 und dem Netscape Navigator 2.0 (bzw. allen anderen Browsern die den HTML 4 Standard beherrschen) können Frames dargestellt werden. Frames sind zum Beispiel sinnvoll wenn Sie ein zentrales Navigationselement, welches ständig dargestellt werden soll, einsetzen. Hüten Sie sich allerdings vor einer zu großen Verschachtelung der Seite. Mehr als 3 Framebereiche sind auf jeden Fall zu viel. Bieten Sie wenn möglich auch eine alternative Version ohne Frames an.

Tipp 6	Frames ständig aktualisieren
	Wenn in einem Frame der Inhalt in kurzen Abständen aktualisiert wird ist das nicht nur zeitraubend, da ständig der Frameinhalt nachgeladen werden muß, sondern auch einfach nervend. Verzichten Sie daher auf diese Spielerei.

Tipp 7	auf die Darstellung der Bildlaufleisten achten
	Verwenden Sie einen Framebereich zum Beispiel als Menü, dann sollten Sie darauf achten das die Bildlaufleisten nicht unterdrückt sind. Verwendet der Betrachter eine kleinere Auflösung ist bei ihm unter Umständen nicht mehr das komplette Menü darstellbar. Haben Sie zudem noch die Bildlaufleisten unterdrückt kann der Betrachter nicht mehr das ganze Menü nutzen.

	Bildlaufleisten aktivieren:
	<frame src="seite1.htm" name="seite1" scrolling=yes>

Tipp 8

für alle Browser programmieren

Auch wenn Microsoft mit seinem Internet Explorer bereits über 80 Prozent des Browsermarktes beherrscht, sollten Sie bei der Erstellung Ihrer Seite Netscape und Co nicht unter den Tisch fallen lassen. Wenn Sie nach dem gängigen HTML 4 Standard programmieren sind Sie meist auf der sicheren Seite. Testen Sie Ihre Homepage auch während der Erstellung in verschiedenen Browsern(min. Internet Explorer, Netscape Navigator und Opera). Sollten Sie ihre Seiten nur für einen Browser programmiert haben, dann schließen Sie womöglich einen Teil der potentiellen Besucher von vornherein aus. Sprüche wie "Diese Seiten sind für Microsoft Internet Explorer optimiert!" sind zwar gut für Microsoft, kommen im Netz aber meist nicht so toll an.

Tipp 9	auf die Browserversion kommt es an
	Nutzen Sie zum Testen Ihrer Seite nicht die aktuellsten Browserversionen. Erstellen Sie ihre Seite nicht mit den neusten Plug Ins, da Sie nicht davon ausgehen können das alle Besucher schon mit dem neusten Browser und den aktuellen Plug Ins arbeiten. Haben Sie ihre Seit schon online, dann werten Sie die Logfiles bzw. Statistiken aus. Hier sehen Sie welche Browser am häufigsten genutzt werden.

Tipp 10	Downloadbuttons für Browser sind überflüssig
	Buttons der Marke "Download Netscape Now" oder "Get Internet Explorer" sind einfach nur out. Wenn Sie also die Tipps 8 und 9 gelesen und beherzigt haben, dann brauchen Sie für die Browserhersteller nicht auch noch kostenlos Werbung machen.

Tipp 11	einen Titel für die Seite definieren
	Im Kopfteil einer HTML Datei(zwischen den <head> - Tags) sollten Sie Ihrer Seite einen Titel geben. Dieser wird oben links in der Kopfzeile des Browserfensters dargestellt. Gib man diesen Titel nicht an, dann stehen dort in der Regel Begriffe wie "Untitled Document" oder "Neue Seite". Und das passt garantiert nicht zum Inhalt der Homepage. Negativ wirkt sich ein vergessener Titel auch auf Einträge in Suchmaschinen auf. Einige Suchmaschinen nutzen die Titelbezeichnung für den Eintag der Seite.

	<title>Meine tolle Homepage...</title>

Tipp 12	Meta Tags - unsichtbar aber wichtig
	Wenn Sie Ihre Seite irgendwann einmal vernünftig gelistet in ein Suchmaschine wiederfinden wollen, dann sollten Sie auf Meta Tags auf keinen Fall verzichten. Die Meta Tags enthalten z.B. Informationen zum Thema, Autor, Schlüsselwörtern und der verwendeten Srache.

	Beispiel:
	<meta name="author" content="Ihr Name">

Tipp 13	Tags richtig einsetzen
	Notieren Sie zu jedem Anfangstag, wenn der Syntax dies verlangt, auch einen Endtag. Moderne Browser sind in dieser Beziehung nicht mehr so zimperlich. Doch Darstellungsfehler sind im ungünstigsten Fall immer noch möglich.

Tipp 14	Sonderzeichen / Umlaute kodieren
	Alle Umlaute und Sonderzeichen sollten nach folgendem Muster kodiert werden: ü ! Wichtig ist die richtige Kodierung vor allem für die Darstellung wenn der Surfer nicht den gleichen Zeichensatz verwendet.

Tipp 15	kommentieren Sie den Quelltext
	Gegen Kommentare im Quelltext ist eigentlich nichts einzuwenden. Aber nur so lange Kommentare in Maßen und nicht in Massen verwendet werden. Man sollte sich immer genau überlegen was kommentiert werden soll, da unnötige Kommentare nur den Quelltext aufblähen.

Tipp 16	Bildschirmauflösung beachten
	Wenn Sie eine Internetseite auf Ihrem Rechner erstellen, dann sieht diese auf Ihrem Monitor immer gut aus. Bedenken Sie, daß nicht jeder Besucher Ihrer Website die gleiche Auflösung nutzt. Testen Sie die Seite in verschiedenen Auflösungen. Empfangen Sie ihre Besucher nicht mit Sätzen wie "Beste Auflösung 800x600"!!!

Tipp 17	Counter verwenden
	Um Ihre Besucherzahlen zu erfassen ist ein Counter sehr nützlich. Fraglich ist jedoch, ob der Besucher zwingen wissen muss, daß er die Nr. 5476 ist. Bedenken Sie, daß ein Counter meist nicht vom eigenen Server geladen wird. Gibt es also Probleme beim Laden, dann verzögert sich auch die Ladezeit der gesamten Seite. Die meisten Counter lassen sich auch versteckt in die Seite einbinden.

Tipp 18	her mit den Auszeichnungen
	Wenn Sie viele Auszeichnungen für Ihre Homepage erhalten haben, dann können Sie sich freuen. Den Besucher interessieren die Auszeichnungen in der Regel überhaupt nicht. Dennoch findet man immer noch viele Seiten, die am Seitenende wie ein Museum aussehen. Die Homepage wird so wesentlich bunter und die Ladezeit verlängert sich. Sie sollten sich also genau überlegen, ob diese Grafiken wirklich sein müssen.

Tipp 19	einheitliche Gestaltung von Links
	Um dem Anwender die Navigation zu erleichtern, sollten Sie im <body> Tag die Farben für bereits besuchte Links, aktive Links und für noch nicht besuchte Links definieren.

	<body link="#0000FF" alink="#800080" vlink="#FF0000">

Tipp 20	Grafiken richtig in HTML einbinden
	Zwei Dinge sind beim Einbinden von Grafiken wichtig. Zum einen ist dies die Dateigröße und zum anderen die Angabe der Höhe und Breite eines Bildes. Mit Programmen, zum Beispiel Paint Shop Pro, lassen sich Ihre Grafikdateien gut für das Internet optimieren. Ziel sollte ein ausgewogenes Verhältnis von Qualität und Dateigröße sein. Wenn Sie Grafiken in den HTML Quellcode einbinden, dann achten Sie auf die Angabe von Höhe und Breite. Bei noch nicht vollständig geladenem Bild zeigt der Browser zumindest einen Rahmen in Originalgröße an der Bildposition an. Dies ermöglicht dem Benutzer schon während des Ladens der Seite eine grobe Orientierung.

	<img src="bild.gif" width="30" height="30">


	Home \| Sitemap \| Download \| Impressum \| Tipps 20-40 \| Tipps 40-60