Wie erstelle ich eine Homepage?

Dies ist kein umfassender HTML-Kurs (= an sich keine "Programmier-", sondern eine "Seitenbeschreibungssprache") zur Gestaltung von WWW-Seiten - dafür ist die sehr detaillierte Dokumentation SELFHTML unter http://de.selfhtml.org/ empfehlenswert. Vielmehr ist dies eine Sammlung meiner eigenen Erfahrungen bzw. eine Übersicht über einige besonders häufige Elemente, die auch nicht in allen Punkten den aktuellen Richtlinien entsprechen muss.

Wie fange ich überhaupt an?

Statistiken, Interaktives, Scripts

Werbung machen

Eine grundsätzliche HTML-Datei

Farben

Textgestaltung

Verknüpfungen (Links)

Grafiken

Umlaut-Codierung

Frames

Tabellen, Überschrift mit Farbbalken

Automatische Weiterleitung/selbstständiges neu laden nach ...Sekunden

Wie fange ich überhaupt an?

Die Startdatei, die beim Aufrufen einer bestimmten URL (Uniform Resource Locator, eindeutige Adresse) ohne Angabe einer .html-Datei automatisch aufgerufen wird, muss meist wahlweise index.html oder index.htm heißen (d.h. http://www.example.net/member99/index.html wird bei Eingabe von www.example.net/member99 in einem gängigen Web-Browser wie Firefox, Internet Explorer, Opera, Safari etc. aufgerufen). Eine Datei, die PHP-Code enthält (siehe Selfhtml bzw. Selfphp) muss die Endung .php haben damit der Code ausgeführt wird. Der Webserver muss aber dann die Ausführung von PHP unterstützten, was bei den wenigsten Gratis-Angeboten der Fall ist. Eine Beschränkung auf Dateinamen mit 8+3 Zeichen (also zum Beispiel DOKUMENT.HTM) ist nicht wirklich nötig, da die allermeisten Betriebssysteme außer DOS längere Dateinamen unterstützten.

Es wird auch häufig der Begriff URI (Uniform Resource Identifier) für eine Adresse verwendet, was aber an sich das Gleiche ist (siehe auch www.w3c.org - WWW-Konsortium). Eine Adresse muss auch nicht unbedingt "www" enthalten, es ist zwar oftmals üblich dass Web-Server diesen "Third Level"-Domainnamen haben, oft funktioniert die Adresse aber auch ohne www oder der Server heißt überhaupt anders, z.B. members.example.net und nicht www.example.net

Die Begriffe "Homepage", "Website", "Webseite" oder "Internet-Seite" werden zwar oft synonym verwendet, bedeuten aber eigentlich jeweils ein bisschen etwas Anderes:

Homepage: Startseite, Einstiegsseite
Website: Bezeichnet das gesamte Projekt (engl. "Site" = Platz, Stelle, Ort...)
Webseite: einzelnes Dokument bzw. Datei einer Website (problematisch ist, dass "Site" und "Seite" ähnlich klingen)

Ein korrekter Ausdruck wäre also "Website", oder auch "Web-Präsenz" oder allgemein "Internet-Angebot" (womit aber viele Dinge gemeint sein können).

Kostenlosen Webspace gibt es zum Beispiel bei (ohne Gewähr)

www.a1.net (werbefrei, Handy-Nummer zur Registierung erforderlich)
heim.at (werbefrei, derzeit einmalige Freischaltgebühr)
piranho (werbefrei)
lima-city (werbefrei)
www.geocities.com (Werbung kann störend sein, in der Gratis-Version nur Upload über Web-Oberfläche)

Daneben gibt es noch unzählige andere Angebote, wo man aber (da eben kaum etwas wirklich gratis sein kann) oft mit recht störender Werbung rechnen muss. Diese Gratisangebote dürfen teilweise auch für geschäftliche bzw. kommerzielle Seiten verwendet werden, pornografische Inhalte zum Beispiel sind aber fast überall unerwünscht wo es nicht ausdrücklich erlaubt ist. Auch das "Hotlinking" (Links auf einzelne Bilder oder andere Dateien von anderen Seiten aus) ist oftmals unerwünscht und wird zum Teil auch technisch unterbunden. Der bei vielen Internetzugängen enthaltene Webspace ist nur bedingt empfehlenswert (wenn, dann eher für temporäre Sachen, zum Auslagern einzelner Teile oder wenn man sich sicher ist, diesen Provider längere Zeit zu benutzen) da er bei einem Providerwechsel üblicherweise weg ist. Weiters gibt es ebenso unzählige kostenpflichtige Angebote, wo Kosten und Qualität auch sehr unterschiedlich sein können, auch ein Webhoster in den USA kann brauchbar sein wenn die Anbindung nach Europa schnell genug ist, für z.B. ab 100 MB Speicherplatz aufwärts sind oft einige Euro pro Monat üblich.

Die erstellten html- und sonstigen Dateien wie etwa Bilder werden zwecks Veröffentlichung im Internet meist mittels FTP an den Server übertragen, wofür es mehrere und oft auch kostenlose FTP-Programme gibt. An Einstellungen sind grundsätzlich nur Hostname, User-Name und Passwort nötig, es wird dann automatisch auf dem Server das richtige Verzeichnis geöffnet. Da viele Webserver unter Unix/Linux laufen, spielt Groß- und Kleinschreibung bei Dateinamen eine Rolle. Leerzeichen, Umlaute und Sonderzeichen sollten in Dateinamen auch nicht vorkommen.

Wer eine www . meinname . at-Adresse haben will, muss kostenpflichtig einen Domainnamen registrieren. Bisher ist mir hier in Österreich kein kostenloses Angebot bekannt, außerdem sollte es einem auch nicht stören, dass dann Name, Adresse, Telefonnummer usw. unter www.nic.at für alle abrufbar sind, was auch bei nicht unbedingt illegalen Inhalten Tür und Tor für Abmahnungen oder unerwünschte (Spam-)Mails öffnet.

In Bezug auf ein schon früher etwa bei Zeitschriften übliches Impressum geht die Rechtsprechung bzw. -meinung in Österreich im Gegensatz zu Deutschland dahin, dass bei privaten Websites ein Name und ein Wohnort (bzw. "Medien-Standort") prinzipiell ausreicht. Bisher sind mir hier auch keine Abmahnungen wegen eines mangelhaften oder fehlenden Impressums bekannt. Zur Vermeidung von rechtlichen Schwierigkeiten empfiehlt es sich ansonsten, keine nicht ausdrücklich freigegebenen fremden Inhalte zu verwenden (insbesondere Musikdateien und Fotos) und auch nichts, das als direkte Aufforderung zu im eigenen Land verbotenen Dingen aufgefasst werden könnte. Ein typischer Problembereich sind hier Themen wie die Umgehung von Kopierschutzverfahren oder die Einbindung von Landkarten. Die Stadt Wien erlaubt z.B. die freie Verwendung ihrer Landkarten unter gewissen Bedingungen, ansonsten empfiehlt sich etwa OpenStreetMap, wo die Karten frei verwendet werden dürfen (unter einer Creative Commons-Lizenz).

Eine Adresse wie etwa start.at / wunschname, www. wunschname . start.at oder wunschname . start . at gibt es kostenlos bei V3, allerdings mit Werbung. Weiters auch z.B. bei www.nfo.at, bei www.dot.tk gibts sogar einen eigenen (2nd Level) Domainnamen wie www . meineseite . tk. Viele derartige Dienste haben aber den Nachteil, dass sie üblicherweise Werbeeinblendungen enthalten. Es kann einem auch passieren, dass eine Weiterleitungsadresse (Redirector) plötzlich aus unerfindlichen Gründen weg ist, weil z.B. eine bestimte Mindestanzahl von Seitenaufrufen gefordert oder der Dienst eingestellt wird, somit ist es nach Möglichkeit besser, sich eine halbwegs schöne Originaladresse zu suchen. Bei diesen Diensten gibt es jedenfalls keinen Webspace, sondern sie leiten auf eine bereits vorhandene, nicht so "schöne" Adresse weiter. Man kann auch die tatsächliche Adresse in der URL-Leiste des Browsers verbergen, die Seite wird dann automatisch in einem Frame angezeigt.

Auch wenn es Editoren gibt (der in Mozilla enthaltene (Mozilla Composer, vormals Netscape Composer und in der neuesten Version Nvu) ist für eine frei downloadbare Software jedenfalls recht gut und auch nicht zu "überladen"), kann das Folgende hier als Ergänzung nützlich sein. Der HTML-Code kann direkt mit einfachen Texteditoren wie Windows Notepad (Editor), Notepad+ oder conTEXT bearbeitet werden, da er kein kompilierter Programmcode ist, sondern direkt im Browser "gerendert" wird. Eine mögliche Strategie ist auch, zuerst einen grafischen Editor zu verwenden und dann den Code nachträglich zu editieren.

Statistiken, Interaktives, Scripts

Der Zählerstand von Webcountern (bestehen aus etwas HTML-Code, der eingebunden werden muss) mag für Besucher und -innen mäßig interessant sein und die Ladezeit kann sich minimal verlängern, man kommt aber so zu interessanten Besuchsstatistiken. Der Zähler kann zum Teil auch unsichtbar eingebunden werden. Das Angebot (meist kostenlos) ist ziemlich unüberschaubar, am besten eine Suchmaschine probieren oder schauen, was andere Leute so verwenden. Ein guter Dienst ist scheinbar Statcounter, nachdem das ebenfalls von vielen Leuten verwendete Motigo (vormals Nedstat) jetzt anscheinend Werbung einblendet. Neben den reinen Seitenaufrufen wird hier auch erfasst, über welchen Link jemand gekommen ist (Referrer), mit welchem Webbrower usw.Je nach Dienst kann es sein, dass die Daten ohne Passwortschutz für alle sichtbar sind.

Bei Gästebüchern (ebenfalls unüberschaubar viele, oft kostenlose Angebote, am besten ebenfalls schauen was andere Leute so verwenden und den eigenen Bedürfnissen entspricht) bekommt man nach der Anmeldung einen Link, der eingebunden werden muss. Die Einträge werden üblicherweise auf dem Server des Gästebuchanbieters gespeichert. Ein scheinbar guter Anbieter ist CGIPool.de / Abrakadabra, hier ist die Oberfläche nach Belieben anpassbar und es gibt lediglich einen Werbebanner, der auch verschoben werden kann.

Ebenso ist es mit web-basierten Diskussionsforen (z.B. Forum Romanum, ev. etwas störende Werbung) oder etwa Umfragen.

Alle diese Dinge haben jedenfalls gemeinsam, dass sie meist nur mittels eines externen Dienstes funktionieren, da viele Webserver das Ausführen von serverseitigen Scripts (wie etwa PHP), besonders bei Gratis-Angeboten, nicht erlauben. Sollte dies aber möglich sein, dann gibt es auch -zig frei verfügbare Scripts, ein beliebtes Diskussionsforen-System ist z.B. phpbb, PHP-Code kann auch direkt innerhalb einer "normalen" HTML-Datei stehen.

Weiters gibt es auch Dinge, die "client-seitig" direkt im Webbrowser ablaufen und daher mit jedem Webspace funktionieren, wie etwa Javascript (Details siehe SEFLHTML), auch dieser Code kann direkt innerhalb von HTML stehen. Hiermit lassen sich Spielereien oder auch nützliche Dinge wie z.B. tageszeitabhängige Begrüßungen, die Festsetzung der Fenstergröße auf einen bestimmten Wert, die Anzeige eines zufälligen Bildes oder die Veränderung eines "Buttons" realisieren sobald man mit der Maus drüberfährt, jegliche ausgelesene Daten können aber nicht gespeichert werden. Was auch direkt im Browser abläuft sind Java-Applets (nicht zu verwechseln mit Javascript, z.B. für kleine Spiele oder sonstige Programme) oder Flash-Animationen, eine gute Seite sollte aber möglichst auch ohne diese Dinge halbwegs benutzbar sein.

Werbung machen

Um die Bewerbung der eigenen Seite drehen sich natürlich viele mehr oder weniger seriöse Angebote im Internet. Die schlechteste Möglichkeit ist jedenfalls die Werbung per unerwünschter Massenmails an irgendwo gesammelte Adressen (Spam), da das die meisten Leute nervt, gegen die Nutzungsbedingungen jedes seriösen Providers verstößt und in vielen Ländern zumindest mit einer Geldstrafe bedroht ist. Wieviel Aufwand man treibt, hängt letztlich auch davon ab, ob man sich und einige private Interessen einfach nur so öffentlich präsentieren will, oder ob man ein bestimmtes Ziel verfolgt und gezielt bestimmte Personengruppen ansprechen will.

Eine wichtige Rolle spielen Suchmaschinen, alle außer Google und vielleicht noch Dienste wie Yahoo oder MSN spielen dabei heutzutage nur noch eine untergeordnete Rolle, weshalb die diversen "Wir tragen Sie (womöglich noch kostenpflichtig) in 200 Suchmaschinen ein"-Dienste nicht wirklich was bringen. Für ein gutes Auftauchen in den Suchergebnissen ist im head-Bereich (siehe "Eine grundsätzliche HTML-Datei") ein gute gewählter nicht zu kurzer und nicht zu langer Titel (zB "ESH - Erster Segelclub in Hintertupfing") sowie aussagekräftige Keywords (mit , getrennt) und auch eine Beschreibung wichtig. Bei Framesets sollte dies auf der index.html-Seite noch einmal unterhalb der Frameset-Definition wiederholt werden, da Suchmaschinen diesen Text auslesen können und ansonsten eventuell die Kurzbeschreibung in der Übersicht der Suchergebnisse fehlt.

Mit Bannertausch-Systemen zwecks kostenloser Werbung für eine Homepage habe ich bis jetzt nur teilweise gute Erfahrungen gemacht. Man muss sich die Startseite mit einem (automatisch immer wechselnden) Werbebanner "verbauen", und die erreichten Klickraten des eigenen Werbebanners liegen typischerweise nur im Bereich von 2%. Selbst bei einem teilweise angebotenen Tauschverhältnis von 1:1 muss man also zB 1000 verschiedene fremde Banner auf seiner eigenen Seite anzeigen lassen, um typischerweise nur 20 neue Besucher/-innen zu gewinnen. Auch Klickraten von 0,5 % sind keine Seltenheit. Zwar gibt es da und dort diverse Tipps wie man die Banner interessanter gestalten kann, aber schon 4-5% wären eine sehr gute Klickrate und allerspätestens bei 10% wird üblicherweise von Betrug ausgegangen. Kostet ja nichts, bei sehr schlechtem Erfolg einfach wieder den Code entfernen. Bei "allgemeinen" Bannertauschsystemen kann außerdem nicht selten ein Großteil der Banner aus Werbung für wenig seriös anmutende Seiten wie "Geld für Surfen" bestehen. Ähnlich mäßig erfolgreich sind oft diverse Toplisten.

Wer entsprechend interessante Inhalte hat (können eventuell auch jugendfreie sein ;-) wird sowieso früher oder später einige Leute anlocken. Auch ein privat organisierter Textlink- oder Bannertausch kann etwas bringen. Es ist auch sinnvoll, die eigene Adresse an verschiedenen Stellen wo dies ausdrücklich vorgesehen bzw. erwünscht ist zu hinterlassen, zB in der Signatur bei Newsgroup-Beiträgen, bei Web-Foren oder in Gästebüchern (solche Einträge sollten aber keinen Spam-Charakter haben).

Auch verlockende "Geld für Klicks"-Angebote (die zB einige Cent pro Klick auf einen Werbebanner oder Textlink zahlen und natürlich so schlau sind, Betrugsversuche durch Eigenklicks zu registrieren) zahlen sich frühestens ab ein paar 100 Seitenaufrufen pro Tag aus, da es meist einen Mindestauszahlungsbetrag gibt. Ein wirklich halbwegs ansehnlicher (Neben-)Verdienst lässt sich mit sowas aber ohnehin erst ab mindestens einigen 1000 Seitenaufrufen pro Tag erwirtschaften (zB 8 Cent pro Klick, bei 1000 angezeigten Bannern und 2% Klickrate 20 Klicks am Tag, man hätte so zumindest die Kosten für den Internetzugang herinnen). Es gibt auch hier sicher den einen oder anderen Anbieter, der vielleicht nicht ganz so seriös ist. Bei einer nicht-pornografischen, privaten Seite ist also typischerweise kaum was drin ;-)

Eine grundsätzliche HTML-Datei

<Anfang html-Tag>....</Ende html Tag>, die meisten HTML-Tags müssen geöffnet und wieder geschlossen werden.

Bei "sauberem" HTML-Code sollte ganz am Anfang auch der Dokumententyp (Doctype...) definiert sein, Editoren fügen dies oft automatisch ein. Üblicherweise ist dies "Transititional" das auch "schmutzigen" Code erlaubt.

<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

<title>Browserfenster-Titelzeile</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Keywords" content="Stichwort1, Stichwort2, Stichwort3, Stichwort4">
<meta name="Description" content="Eine Beschreibung in 1-2 kurzen Sätzen worum es geht">

head enthält verschieden allgemeine Informationen zB für Suchmaschinen, möglich sind auch zB Informationen über Autor-/in oder Zeichensatz (oft ISO 8859-1, diese Informationen werden oft auch von Editoren eingefügt). Unbedingt nötig ist aber nichts davon, ohne Zeichensatz-Definition können aber Umlaute und Sonderzeichen falsch angezeigt werden.

</head>

body ist der sichtbare Hauptbereich, darin befindet sich der im Browser lesbare Text, Grafiken, Tabellen.... Näheres zum Body-Tag unter Farben.

Ende einer HTML-Datei:

</body>
</html>

Die HTML-Tags können groß oder klein geschrieben, beliebig eingerückt und es können beliebig viele Leerzeilen und Absätze eingefügt werden. Das Vergessen von Anführungszeichen und spitzen Klammern ist nicht selten eine Fehlerursache.

Farben

#RRGGBB - jeweils Rot, Grün, Blau-Anteil hexadezimal von 00-FF. Stattdessen können auch englische Farbwörter wie red, green, blue, white, black... verwendet werden. Eine andere Schreibweise ist auch color: rgb(255, 0, 0); im Dezimalsystem von 0 bis 255.

Im Body-Tag können die Standardfarben für das ganze HTML-Dokument definiert werden (wenn keine Farben angegeben werden, werden die Standardwerte (oft Schwarz auf Weiß, blaue Links) angenommen):

text normaler Text (Standard oft schwarz)

bgcolor Seitenhintergrundfarbe (Standard oft weiß, wird von einer Hintergrundgrafik (background), die einfach "gekachelt" wird, überdeckt)

link noch nicht angeklickter Link (Standard oft blau)

vlink schon besuchter Link (Standard oft dunkelblau)

alink gerade aktiver Link (Standard oft rot)

Die Farbgestaltung ist natürlich Geschmackssache, jedoch sollte der Kontrast zwischen Textfarbe und Hintergrund immer ausreichend groß sein - dukelblau auf schwarz ist also nicht unbedingt eine gute Idee. Für längere Texte ist die klassische "Schwarz auf Weiß"-Darstellung durchaus empfehlenswert.

Ansonsten wird der #RRGGBB-Code oft zusammen mit Textgestaltung oder Tabellen verwendet.

Textgestaltung

<i>Kursiv</i>
<b>Fett</b>
<u>unterstrichen</u>

<br> Zeilenumbruch erzwingen, braucht keinen Abschluss, ein </br> gibt es nicht
<p> Absatz... (braucht nicht unbedingt einen Abschluss, ist aber empfehlenswert)</p>

<h1>Überschrift mit HTML-Standardformatierung</h1>

bis

<h6>Unterste Standard-Überschriftenebene in HTML</h6>

1. Überschrift

2. Überschrift

3. Überschrift

4. Überschrift

5. Überschrift

6. Überschrift

Bei Verwendung dieser Überschriften-Hierachie kann dann auch (etwa im Mozilla Composer) automatisch ein Inhaltsverzeichnis der Seite erstellt werden. Die Schriftart und -farbe richtet sich danach, was zuvor angegeben wurde.

Wenn der erste angegebene Font-Name im System nicht gefunden wird, wird der nächste genommen, sonst bzw. wird überhaupt keiner angegeben der Standard-Zeichensatz (oft Times New Roman oder ähnliches).

Font Size von 0 bis 7 oder -2 bis +4. Anmerkung: Font gehört zu den "überholten" HTML-Tags und es wird oft empfohlen diese nicht mehr zu verwenden, es funktioniert mit den gängigen Browsern aber nach wie vor. Die modernere Version im CSS-Stil ist

Weiters lässt sich der Text auch mit

<big>Eine Stufe größer</big> und mit

<small>eine Stufe kleiner</small> als der Standard setzen.

<font color="#wie oben beschrieben">Blabla</font>

bzw. besser

<span style="color:#FF0000">Roter Text</span>

kann auch alles kombiniert werden:

zB <font face="Arial,Helvetica" size=+2 color="#FF0000">BlaBlaBlaBla</font>

Ausrichten von Text (auch Grafiken, Tabellen...) mit:

<div align="center">Zentriert ausgerichtet</div>

<center>Funktioniert auch, wird aber nicht mehr empfohlen</center>

<div align="right">Rechts ausgerichtet</div>

Die Standardausrichtung ohne Definition ist ansonsten linksbündig.

Generell wird zur Formatierung bzw. Textauszeichnung heute CSS empfohlen (siehe SELFHTML), es sollte aber bis auf Weiteres auch die frühere Variante funktionieren.

Verknüpfungen (Links)

(Hyperlinks, die große Stärke von HTML)

<a href="URL" target="...">Beschreibung der Verknüpfung</a>

URL kann zB sein (jeweils unter Anführungszeichen)

http://www.example.net (/datei.html) (mit http:// eingeben!)
lokaledateiimselbenverzeichnis.html
mailto:eine.e-mailadresse@example.net
mailto:eine.e-mailadresse@example.net?Subject=EinBetreff
news:alt.test
#Sprungmarke (innerhalb einer HTML-Datei, diese muss zuvor mit <a name="#Sprungmarke"> definiert worden sein.

Bei E-Mail-Adressen empfiehlt es sich, zumindest das @ im HTML-Code als @ zu codieren (ASCII-Code bis 255, das @-Zeichen entspricht hier 64), weil dadurch das automatische Auslesen und anschließende Spammen erschwert wird (ist umstritten, aber einen Versuch wert). Beim manuellen Anklicken wird die Adresse aber immer noch ohne jede Zusatz-Software richtig angezeigt.

Es ist wichtig, dass Links entweder eine komplette absolute Adresse sind, oder aber korrekt auf eine lokale Datei zeigen. Ein häufiger Fehler kann zB ein Link wie file:///D:/Homepage/menu.htm sein der auf eine Datei auf dem eigenen Computer zeigt, die auf dem Webserver aber natürlich nicht gefunden wird.

Ohne target...-Angabe wird der Link im selben Fenster bzw. Frame geöffnet (Vorsicht, bei externen Links ist das abgesehen von eigenen Gästebüchern usw. grundsätzlich nicht erwünscht und kann auch zur Androhung von Klagen führen weil der Eindruck enstehen könnte, dass der fremde Inhalt zum eigenen Angebot gehört). target kann zB sein:

_blank (Link wird in neuem Fenster geöffnet)
_top (Link wird in der vollen Größe des momentanen Browser-Fensters geöffnet, ein ev. angezeigtes Frameset wird gelöscht)
Name eines Frames, der im Frameset definiert wurde (genauso wie es dort geschrieben wurde, ohne zusätzliches _)

Auch ein Bild kann auch eine Verknüpfung zum Draufklicken sein (mit border=... kann ein ... Pixel breiter Rand (auch keiner = 0) um das Bild erzeugt werden, er erscheint in den in <body... > definierten Farben für Links.

Grafiken

Alternativtext zu einem Beispielbild

lädt ein Bild, meist können in Web-Browsern die Formate .gif ("Graphics Interchange Format") und .jp(e)g ("Joint Pictures/Photographic Expert Group") dargestellt werden. Auch hier gibt es keinen Abschluss-Tag wie "</img>.

ALT ist optional (das Weglassen jedoch ungern gesehen), dieser Alternativ-Text erscheint, wenn die Grafik noch nicht geladen ist oder nicht gefunden wird, das Laden von Grafiken abgestellt ist oder ein Textmodus-Browser wie Lynx verwendet wird. Es ist auch zwecks "Barrierefreiheit" wichtig.

Mit height und width kann die Grafik auch auf eine bestimmte Größe (in Pixel) skaliert werden, wenn dies weggelassen wird, wird sie in der tatsächlichen Größe dargestellt. Wesentlich größere Grafiken kleinzuskalieren ist natürlich grundsätzlich nicht sinnvoll. Es sollte auch die Ladezeit bzw. den Seitenaufbau verbessern, wenn hier die tatsächliche Größe angegeben ist, das Text-Layout kann dann schon vom Browser aufgebaut werden noch bevor das Bild geladen ist.

gif eignet sich für Bilder mit einem großen Anteil an einfärbigen Flächen (einfache Zeichnungen, Logos usw.) und lässt auch nur maximal 256 Farben zu. Auch Animationen sind möglich. Bei solchen Dateien entstehen dann bei sehr guter Bildqualität nur recht kleine Dateigrößen. Es ist allerdings teilweise unbeliebt, da es in der Vergangenheit plötzlich Lizenzgebührenforderungen von Compuserve/Unisys für Grafikprogramme, die dieses Format erzeugen können gab, und es daher bis heute in Freeware-Programmen mitunter nicht oder nur über Umwege verfügbar ist (das Patent ist allerdings 2004 ausgelaufen). Aus diesem Grund wurde auch die Alternative png ("Portable Network Graphics") entwickelt, die aber eventuell von manchen Programmen nicht angezeigt werden kann.

jpeg wird oft für Fotos oder sonstige detailreiche Bilder mit vielen Farben verwendet. Die Dateigröße kann sich je nach Komprimierung stark ändern, die Qualität sollte bei möglichst kleiner Dateigröße gerade noch ansehbar genug sein. Eine Qualitätsstufe von 85% ist ein guter Richtwert, bei wichtigen Details kann auch 95% nötig sein, während bei manchem Material bis etwa 30% hinunter akzeptabel ist). Für die direkte Online-Darstellung sollten Bilder wie sie mit 1600x1200 Pixel und mehr von Digitalkameras erzeugt werden auf zB 800x600 oder 640x480 verkleinert werden.

Empfehlenswerte Grafikprogramme für den "Hausgebrauch" sind Paint Shop Pro (allerdings kommerziell), eventuell The Gimp (umfangreich) und IrfanView (Bildanzeiger mit Zusatzfunktionen wie etwa Aussschneiden, Größe ändern, Farben anpassen, Grafikformate konvertieren...). Auch das bei Windows enthaltene "Paint" (vormals Paintbrush) ist als einfaches Zeichen- und Grafikbearbeitungsprogramm durchaus brauchbar, unterstützt in früheren Versionen allerdings kein .gif oder .jpg.

Beispiel-Bild für HTML-Code Grafiken können wie Text zentriert oder es kann ein Zeilenumbruch erzwungen werden. Bei der Illustrierung von Texten mit kleinen Bildern und Logos kann es auch gut aussehen, wenn ein Bild nicht allein in einer Zeile steht, sondern vom Text "umflossen" wird. Beim Mozilla Composer gibt es beispielsweise die Einstellung Text an Grafik ausrichten / rechts umbrechen, was dann so wie dieser Absatz aussieht. Auch ein bestimmter Abstand in Pixel oben und unten und links und rechts kann angegeben werden. Im HTML-Code sieht das etwa so aus:

<img alt="Beispiel-Bild" src="example.gif" style="width: 54px; height: 99px;" align="left" hspace="2" vspace="2">
Grafiken können wie Text zentriert oder es kann ein Zeilenumbruch erzwungen werden. Bei der Illustrierung...

Wichtig: Keine fremden Bilder und sonstige Grafiken verwenden, es sei denn, sie wurden ausdrücklich dafür freigegeben, wobei dann gegebenenfalls eine Quellen- oder Lizenzangabe nötig sein kann. Ansonsten sollten fremde Bilder (etwa Titelbilder oder Screenshots) höchstens im Rahmen von einzelnen "Bildzitaten" in einem entsprechenden Kontext und in einer kommerziell unbrauchbaren Auflösung verwendet werden - völlige Rechtssicherheit gibt es hier aber nicht. Eine Seite sollte auch nicht zu sehr mit Illustrationen überladen werden - auch bei einer Sammlung von eigenen Urlaubsfotos und dergleichen sollte etwas auf die Ladezeit und Übersichtlichkeit geachtet werden.

Umlaut-Codierung

Auch wenn auf den meisten Computern Windows läuft, garantieren diese Umschreibungen von bestimmten Sonderzeichen im Text einer HTML-Datei, dass unabhängig vom verwendeten Betriebsystem/Zeichensatz immer die richtigen Zeichen angezeigt werden.

ä - ä
ö - ö
ü - ü

Ä - Ä
Ö - Ö
Ü - Ü

ß - ß (nur noch nach langem Vokal wie zB Maß oder Zwielaut wie Gießen, aber nicht zB bei Kuss, in der .ch überhaupt nicht)
  - (geschütztes) Leerzeichen (erzwingen, auch außerhalb eines Satz-Zwischenraumes)

" - Anführungszeichen
& - & Und-Zeichen
€ - Euro-Währungssymbol € (generell ist aber der Standard-Währungscode EUR oder Euro ausgeschrieben besser)
° - Grad-Symbol °
© - Copyright-Symbol © (zur Not geht natürlich auch ein (c))
™ - Trademark-Symbol ™

Frames

Mittels Frames ("Rahmen") können mehrere html-Dokumente gleichzeitig in einem Browser-Fenster geöffnet werden, zB ein Menü und eine Hauptseite.Ein "Frameset" kann auch nur ein html-Dokument darstellen, etwa um die ursprüngliche URL/Titelzeile zu verbergen.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" >

sollte korrekterweise am Anfang des Dokuments stehen das das Frameset enthält

<html>

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Seitentitel</title>

Hier eventuell Schlüsselwörter/Beschreibung einfügen, siehe "Eine grundsätzliche HTML-Datei"

</head>

</frameset>

<body>

Dieser Bereich wird bei einem nicht framefähigen Browser sowie teilweise in den Suchergebnissen von Suchmaschinen angezeigt, hier also ev. die kurz zusammengefasste Beschreibung und/oder die Stichwörter wiederholen.

</body>

</noframes>
</html>

Pro frame src... (rows - horizontal, cols - vertikal) jeweils % Fensterbreite oder Pixel durch , getrennt angeben. Im obigen Beispiel wird zB links ein Menü mit 100 Pixel Breite angezeigt und in der restlichen Breite des Fensters (*) der Hauptbereich.

...scrolling="NO" ... fixiert, keinen Scrollbalken am Rand erlauben

Wichtig: richtiges <a href="..." target="Framename">, dies muss in den html-Dateien, die in den Frames dargestellt werden, angegeben werden, sonst werden Links im selben Frame geöffnet. Im Hauptfenster ist bei Links zu externen Seiten, die nicht wie zB Gästebücher "eingebaut" werden sollen, ein target="_blank" (dies öffnet die Seite in einem neuen Fenster) oder eine sonstige deutliche Kennzeichnung als externer Link empfehlenswert.

Noch ein Beispiel:

   <noframes>
   Dieser Browser unterstützt keine Frames!
       <a href="links.html">weiter ohne Frames</a>
   </noframes>

</frameset>

Nicht alle sind mit Frames unbedingt glücklich, und einige speziell ältere Browser können diese möglicherweise nicht anzeigen. Mit den gängigsten Browsern wie MS IE, Netscape Communicator oder Opera jeweils spätestens in den 3er bis 4er Versionen und auch mit Firefox/Mozilla sollte dies aber kein Problem sein, auch wenn Frames heute als eher schlechter Stil gelten. Eine andere Möglichkeit ist, in jedes einzelne HTML-Dokument ein Navigationsmenü einzubauen, dadurch erscheint auch immer die Navigation (die mindestens einen Link zur Startseite enthalten sollte), wenn eine Unterseite über eine Suchmaschine gefunden oder direkt von jemand verlinkt wird.

Eine andere Möglichkeit ist ein IFRAME (Inline-Frame), wodurch ein Dokument praktisch "unmerklich" und ohne eigenen Scroll-Balken in ein Browser-Fenster eingebunden bzw. eingebettet werden kann, wie zum Beispiel bisher ein Bild. In der Vergangenheit gab es hiermit allerdings einige Sicherheitsprobleme, und es wurde nicht von allen gängigen Browsern unterstützt. Der nötige HTML-Tag heißt <iframe>.

Zwischen <body> und </body> an der gewünschten Stelle (die zusätzliche Link-Angabe mit a href= ... ist empfehlenswert, falls die Iframe-Funktion vom Browser nicht unterstützt wird)

  <iframe src="http://beispiel.example.net/dokument.html"
   height="400" width="500" frameborder="0" scrolling="no">
   <a href="http://beispiel.example.net/dokument.html">Hier gehts weiter!</a>
 </iframe>

Tabellen, Überschrift mit Farbbalken

Ein farbiger Balken (oder auch eine senkrechte, dicke Linie oder Farbfläche) ist in HTML eine Tabelle mit Hintergrundfarbe (...BGCOLOR=#......), sieht als Überschrift möglicherweise etwas billig aus, war aber vor Jahren das Erstbeste dass mir eingefallen ist und ist jetzt mein Markenzeichen ;-) Der Rand kann bei einer Tabelle beliebig dick sein und auch auf 0 gesetzt werden. Eine Tabelle besteht aus Zeilen (tr) die wiederum Zellen (td) enthalten, diese hier nur aus einer Zeile mit einer Zelle. Breiten-/Höhenangaben sind wieder in Pixel oder in % Fenster- oder Gesamttabellenbreite. Tabellen sind prinzipiell eher nicht für solche grafischen Effekte gedacht, können aber in gewissem Rahmen dafür "missbraucht" werden.

Ein Balken

Ohne Rand

<td>
    <div align="center"><i>
      <font face="Arial,Helvetica" color="#FFFFFF" size=+3>
       Text der Überschrift<br>
       Noch eine Zeile
      </font></i>
    </div>
</td>

</tr>
</table>
</div>

Tabulatoren wie in einigen Textverarbeitungen sind in HTML nicht möglich, "sauber" ausgerichtete Listen mit oder ohne Rand können aber auch mit Tabellen mit entsprechend vielen und entsprechend breiten Zeilen realisiert werden:

Zeile 1 / Zelle 1	Zeile 1 / Zelle 2	Zeile 1 / Zelle 3
Zeile 2 / Zelle 1	Zeile 2 / Zelle 2	Zeile 2 / Zelle 3
Zeile 3 / Zelle 1	Zeile 3 / Zelle 2	Zeile 3 / Zelle 3

Automatische Weiterleitung/selbstständiges neu laden nach ...Sekunden

"Refresh" content="0;url=... - die Zahl gibt die Anzahl der Sekunden an, nach denen das angegebene Dokument (neu) geladen wird (kann auch 0 sein was "sofort" enspricht). Dies kann dazu verwendet werden, auf einer nicht mehr verwendeten Seite automatisch auf die richtige Adresse weiterzuleiten oder ein bestimmtes html-Dokument in regelmäßigen Abständen automatisch neu zu laden (auch in einem Frame).

Ein Beispiel:

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
   <meta http-equiv="Refresh" content="0;url=http://neu.example.net">
   <title>Beispiel-Titel - Neue Seite!</title>
</head>

<body>

Hier kann auch noch stehen, dass nach soundsovielen Sekunden automatisch weitergeleitet wird, zusätzlich kann hier noch ein Link angegeben sein falls die Weiterleitung nicht funktioniert.

<a href="http://neu.example.net">Bitte hier klicken!</a>

</body>
</html>

(zuletzt geändert am 11.07.2008)

Startseite | Computer-Übersicht

text	normaler Text (Standard oft schwarz)
bgcolor	Seitenhintergrundfarbe (Standard oft weiß, wird von einer Hintergrundgrafik (background), die einfach "gekachelt" wird, überdeckt)
link	noch nicht angeklickter Link (Standard oft blau)
vlink	schon besuchter Link (Standard oft dunkelblau)
alink	gerade aktiver Link (Standard oft rot)