Erste Schritte :

Bei kostenpflichtigem Webspace kann man, falls noch nicht von anderen registriert, selbst den Namen wählen
 http://www.wunschname.de/  (statt .de geht dann auch .com oder zukünftig .eu)

Die Frage ist jetzt nur, wie anfangen. Das Wichtigste ist eine gute Organisation der Seiten. Dabei gibt es drei Methoden
1. jede Webseite oder jedes Thema erhält einen eigenen Ordner (häufig bei kommerziellen Seiten)
    Vorteil: man sieht genau was für die Seite oder das Thema gebraucht wird und das
    Löschen einer Seite oder des Themas hinterlässt keinen Datenmüll.
    Nachteil: Bilder und andere Inhalte, die in anderen Seiten auch enthalten
    sind müssen mehrfach hochgeladen werden
2. Sortierung nach Dateien (von mir bevorzugt)
    Dabei wird für jeden Dateityp ein eigener Ordner angelegt,
    Z.B.: /html/ für die Textseiten, /bilder/ für alle Bilder, /sounds/ für alle Sounds u.s.w.
    Nachteil: man muss beim Löschen einer Seite genau wissen,
    was noch von anderen Seiten benötigt wird.
    Da ich meine Seite in zwei Sprachen anbiete verwende ich nicht /html/ sondern
    /deutsch/ und /english/ zur sauberen Trennung.
    Ggf. kann man auch beide Varianten benutzen für spezielle Seiten. (wie z.B. diese hier)
3. Unsortiert bei Chaoten :-)
    Hier landet alles im Hauptverzeichnis ohne Sortierung, sehr unübersichtlich!

Wichtigste Grundregeln :

Vorsicht vor dem Hochladen von z.B. bild1.jpg und Bild1.jpg, es funktioniert zwar aber dabei kann es passieren, dass Windows dann das Löschen einer oder beider Dateien im Netz verweigert.
(Diesen Fall hatte ich am Anfang mal mit einem Ordnernamen, der mit einem Grossbuchstaben anfing.)

Des weiteren sollten keinerlei Sonderzeichen und Leerzeichen in den Datei-. und Ordnernamen verwendet werden.
Auch mit dem Punkt muss sparsam umgegangen werden, er dient hauptsächlich zur Trennung von Dateinamen und Erweiterung (einmalige Verwendung im Ordnernamen ist erlaubt). Als Beispiel hat ein Bekannter einmal ein Bild mit dem Namen: Bild vom 12.Juni.2000.jpg hochgeladen und mich gefragt, warum es nicht angezeigt wird. Ein Aufruf aus einer html-Seite ist damit nicht mehr möglich!
Auch nicht, wenn der Link sich auf eine Verweisadresse auf der eigenen Festplatte bezieht!

Die Startseite einer Homepage ist immer die index.html im ROOT, das ist das Hauptverzeichnis des Administrators (Users) auf dem Server, von dem aus auch alle angelegten Ordner (beim Hochladen) zu sehen sind.
Man kann diese Seite als Begrüssungsseite, von der aus die Hauptseite aufgerufen wird, oder gleich als Hauptseite anlegen.

Noch ein Hinweis der mir bei Freunden aufgefallen ist. Wer seine Homepage ausprobiert, d.h. im Internetexplorer oder anderem Browser, sollte unbedingt die Schriftgrösse im Browser auf "mittel" bzw. "normal" einstellen. Es gibt nämlich Leute, die einen hoch auflösenden 19 oder gar 21 Zoll Bildschirm haben und ihre Schriftgrössen nicht angepasst haben und dann, um viele Seiten mit kleiner Schrift besser ansehen zu können, die Schriftgrösse im Browser einfach auf "sehr gross" einstellen.
Sie basteln dann an ihrer Seite und bauen Schriften mit Schriftgrösse Arial 1 (8 pt) bei dunklem Hintergrund und heller Schrift ein und ein anderer User kann dann mit normaler Schriftgrösse und schlechter auflösendem oder kleinerem Bildschirm nichts mehr erkennen.

Auch bei den Formatierungsbefehlen sollte man darauf achten, dass alle Befehle und Tags in Kleinbuchstaben geschrieben werden. Diese Festlegung besteht in der HTML 4.01-. und XHTML-Festlegung des World Wide Web Konsortium oder auch W3C, damit alle Betriebssysteme und alle Browser diese Seite anzeigen können. (siehe hierzu auch: html - Seitenaufbau).
Gerade dies wird beim Speichern von Seiten mit dem Internetexplorer missachtet und alle Tags in Grossbuchstaben umgewandelt, was beim Korrigieren viel Arbeit macht, will man diese Seite eventuell teilweise wieder hoch laden. (Achtung Urheberrechte beachten!). Besser dafür geeignet ist der Browser Mozilla FireFox, der alles richtig abspeichert.

Welche Seiteneditoren sollte man verwenden ?

Eine weitere Möglichkeit eine Seite zu Erstellen ist mit Microsoft Word und Excel gegeben, bei ersterem gut, wenn man ein bestehendes Dokument in eine html-Seite umwandeln will. Mit Excel habe ich es noch nicht probiert.

Man sollte sich daher schon sehr frühzeitig daran gewöhnen die Seiten mit einem guten Texteditor (Notepad ist ungeeignet) zu erstellen und zu bearbeiten. Ein sehr guter freier Editor ist Proton.
Ich bevorzuge allerdings Ultraedit32, der mehr Funktionen bietet, u.a. frei wählbare Bildschirmschriftart und -grösse, zur besseren Übersichtlichkeit die aktive Zeile farbig hinterlegt und eine Textbausteinverwaltung, sowie markierte Textpassagen in Kleinbuchstaben oder Grossbuchstaben umwandeln kann. Leider ist er Shareware und ohne Registrierung auf 30 Tage begrenzt.

Ein grosser Vorteil der Texteditoren ist, man kann auch Javascripts und css-stylesheet einbinden, was mit Frontpage und CO. nicht möglich ist
Ein weiteren Vorteil ist, man kann andere Seiten, die bestimmte Features enthalten, die man brauchen kann, auf der Festplatte speichern und mit dem Texteditor danach suchen. Meistens handelt es sich dabei um Javascripts, die Frontpage gar nicht anzeigt und, wenn man diese Seiten damit bearbeitet, zerstört.

Der Seitenaufbau, das html - Seitengrundgerüst :

Auf diese Weise hat man schon eine funktionierende Webseite, wenn auch eine mehr als einfache. Ob diese Seite jetzt im Texteditor als ...htm oder ...html abgespeichert wird hat auf die Anzeige im Browser keinen Einfluss. Ich habe mir aber angewöhnt einzelne Seiten als .htm abzuspeichern und übergeordnete Seiten, die andere Seiten aufrufen als .html.

Allerdings sollte sich in jedem Ordner auf der HP eine index.html befinden, die angezeigt wird, wenn ein Besucher mutwillig in diesen Ordner wechselt. Ansonsten wird der Ordnerinhalt im Browser als Verzeichnisbaum mit Inhalt angezeigt.

Seitencodierung :

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

Mit diesem Meta-Tag wird die Codierung auf Westeuropäisch (ISO) gesetzt oder mit

<head profile="http://www.******.**/****/profil.dat">
bzw.
<head profile="profil.dat">.

Im letzten Fall muss dieser so genannte Meta-Tag für die Codierung in einer gesonderten Datei namens profil.dat (eine reine Textdatei) abgespeichert werden, wo auch noch diverse andere Einträge aus dem Dateikopf abgelegt werden können, die sich in allen Seiten wiederholen. Das spart Downloadzeit, weil die profil.dat nur einmal vom Browser geladen wird und danach für alle Seiten zur Verfügung steht.
Statt der **** muss natürlich die exakte Adresse angegeben werden, oder die Datei muss im gleichen Ordner liegen wie die html-Seiten. (siehe dazu auch: das Seitenprofil (dat))

Trotz dieser Massnahme kann es zu Abbildungsfehlern kommen. Um das auf alle Fälle zu vermeiden sollten keine Umlaute und kein ß im Quelltext verwendet werden. Statt dessen verwendet man:

Ansicht in Deutschland und Westeuropa:

und anderen Regionen:

ftp - Upload der Seiten :

Manche Anbieter wollen aber unbedingt, dass man ein von ihnen angebotenes Programm mit teils undurchschaubaren Einstellmöglichkeiten benutzt, das wenig Komfort bietet und die Verwaltung der Seite im Netz sehr erschwert, ein ftp-Upload ist in diesem Fall nicht möglich.

Noch ein Tipp: Nach dem Hochladen der Dateien auf den Server lösche ich immer das Archivbit der Dateien. Wenn ich dann an einer Datei oder Seite etwas ändere wird dieses Archivbit automatisch wieder gesetzt. Dadurch weiss ich immer welche Dateien ich noch im Netz aktualisieren muss.

Der Seitenkopf (head) :

Der wichtigste Eintrag ist hier: <title>Titel der Seite</title>,
der im Browser in der Statuszeile ausgegeben wird, falls das nicht ein entsprechendes javascript übernimmt.

Noch ein wichtiger Eintrag:
<meta name="description" content="Titel der Seite" />,
mit dem den Suchmaschinen mitgeteilt wird, wie der Name der Seite lautet.

Auch ein wichtiger Eintrag:
<meta name="keywords" content="stichwort1, stichwort2, stichwort3, u.s.w." />,
mit dem den Suchmaschinen mitgeteilt wird, mit welchen Schlüsselworten sie auf diese Seite verlinken sollen.

Mit folgendem Eintrag:
<base target="_blank"> kann man den Browser anweisen alle Links auf dieser Seite in einem neuen Fenster zu öffnen.

Der Hauptverwendungszweck sind die Meta-Tags, die hier seitenspezifisch abgelegt sind oder für alle Seiten mit einer Umleitung (siehe das Seitenprofil (dat)) in eine separate Datei geschrieben werden sollten. Das selbe gilt auch für Formatierungsbefehle, die sich auf alle Seiten beziehen. Hier erfolgt die Umleitung mit folgendem Eintrag:
<link rel="stylesheet" type="text/css" href="style.css">,
statt "style.css" kann auch ein "eigenername.css" vergeben werden und die Datei muss in diesem Fall im gleichen Ordner liegen wie die Seiten (siehe hierzu auch stylesheet (css))

Seitenspezifische Formatierungsbefehle werden wie folgt eingebunden:
 <style type="text/css"><!--
hier stehen dann die Befehle, die hier zu erklären zu weit führen würde
 --></style>
Wichtig ist nur, dass nach dem <!-- ein Zeilenumbruch erfolgt, wie auch vor dem -->.

Das Auslagern von Daten, die sich auf alle Seiten einer Homepage beziehen, ist besonders empfehlenswert, um den Kopf so klein wie möglich zu halten und damit die Downloadzeit zu reduzieren.

Suchmaschinen und anderes :

Einige wichtige will ich hier zeigen:
<meta name="DC.Coverage" content="Land, +Ort ohne Umlaute"> Region.
<meta name="author" content="Name ohne Umlaute"> Autor der Seite.
<meta name="publisher" content="Name ohne Umlaute"> Herausgeber der Seite.
<meta name="copyright" content="none"> kein Kopierschutz.
<meta name="page-topic" content="Computer/Internet/Privat"> Themen der Seite.
<meta name="page-type" content="Pers&ouml;nliche Homepage"> Typ der Seite.
<meta name="audience" content="all"> wer darf die Seite besuchen=alle. (Kinderschutz)
<meta name="expires" content="never"> Verfallsdatum nie.
<meta name="robots" content="index,follow"> suche auch auf Folgeseiten.
<meta name="revisit-after" content="21 days"> suche alle 21 Tage neu.
<meta name="keywords" content="stichwort1, stichwort2, u.s.w."> die Suchbegriffe.
Da diese Daten bis auf die letzte Zeile für alle Seiten gleich sind sollte man sie in eine profil.dat auslagern, und nicht in jeder Seite neu eintragen.

Noch ganz wichtig, wozu ist die Datei robots.txt da:

Die Datei robots.txt im ROOT (also Hauptverzeichnis) ist eine reine Textdatei und steuert die Suchmaschinen. Sie wird bei jedem Seitenscan eingelesen und gibt den Suchmaschinen Anweisungen, was sie nicht dürfen. Der Inhalt könnte so aussehen:

# robots.txt for http://www.mein-name.de/ Adresse der Homepage für die diese Datei gilt

User-agent: * der Stern bezieht alle Suchmaschinen ein
Disallow: /geheim/ Ordner /geheim/ gesperrt
Disallow: /besonderes/ Ordner /besonderes/ gesperrt
Disallow: /html/passwort.txt Datei passwort.txt im Ordner /html/ gesperrt

Auch hier wieder eine Leerzeile zwischen 1. und 2. Zeile. Wie man sieht kann man ganze Ordner verbieten oder auch einzelne Dateien. Die Liste ist beliebig erweiterbar.

Seiteninhalt (body) :

Im Eröffnungstag können die Eigenschaften der Seite festgelegt werden. Mit den Zusätzen:
bgcolor="" wird die Hintergrundfarbe der Seite festgelegt und mit
background="" das Hintergrundbild
topmargin="0" leftmargin="0" gibt den oberen Anzeigeabstand im Browserfenster mit 0 Pixel, und den linken Abstand mit 0 Pixel an.

Wie man seine Seite nun gestaltet, kann jeder für sich selbst entscheiden. Ob mit Tabellen oder auf andere Weise ist dabei egal. Was zählt ist nur das Ergebnis, sprich das Aussehen.

Unter Links und Bilder ist beschrieben, wie man Links und Bilder einfügt. Einige sehr wichtige Hinweise zur Verwendung von Schriftarten und Hintergrundsounds und deren Einbindung sollen dann das Thema abrunden.

Wer mehr als eine Webseite auf seiner HP einrichtet, muss sich mit dem Problem eines Navigationsmenüs befassen. Zu diesem Zweck gibt es viele Hilfsmittel wie Frames, IFrames, Javascripts oder einfach nur eine fortlaufende Verlinkung, wo eine Seite mit einem Link die nächste öffnet.
Welches Menü man dann verwenden will, sieht man sich am Besten auf anderen Internetseiten an und entscheidet dann, was man machen will.

Noch ein kleiner Tipp. Die Zeichenfolge <br />
bewirkt eine manuellen weichen Zeilenumbruch und mit <p />

wird, wie man hier sieht, ein harter Zeilenumbruch (oder Absatzumbruch) erzeugt. Dabei bewirkt <br /> das gleiche wie <br>&nbsp;</br> oder auch <p /> wie <p>&nbsp;</p>. Die Anordnung   / in dem Befehl bewirkt, dass der Befehl ausgeführt und gleichzeitig beendet wird.

Statt Leerzeichen, die von allen Browsern ignoriert werden, wenn mehr als eines hintereinander steht, kann man als Platzhalter &nbsp; (ein Zwangsleerzeichen) verwenden, auch mehrfach zur Platzierung, aber das bitte nur, wenn unbedingt notwendig und nicht anders möglich. Ich habe schon Webseiten gesehen, mit hunderten dieser Leerzeichen zur Platzierung. Jedes dieser Leerzeichen macht die Seite um 6 Byte grösser.

Viel Spass beim Basteln!

Tabellen zur Platzierung der Seiteninhalte verwenden :

Die einfachste Methode besteht jedoch darin die ganze Seite in einer Tabelle unterzubringen. Diese kann dann in Zeilen und Spalten unterteilt werden, mit deren Hilfe eine recht genaue Positionierung der Seiteninhalte möglich ist. Die ganze Tabelle befindet sich zwischen den Tags <table> und </table>. Wie üblich also einem Anfangs-. und einem End-Tag.
Eine neue Zeile befindet sich zwischen den Tags <tr> und </tr>.
Innerhalb dieser Zeile kann jetzt mit den Befehlen <td> und </td> eine oder mehrere Spalten erzeugt werden.

Fügt man jetzt in jeder Tabellenzeile zwischen <tr> und </tr> einen weiteren Bereich <td>.....</td> hinzu und ändert bei allen die Spaltenbreite in width="50%", erhält man eine Tabelle mit zwei Spalten zu 50% und je drei Zeilen.
Jeder weitere <td>.....</td> - Bereich erzeugt eine neue Spalte.

Wenn die ganze Seite in einer Tabelle dargestellt werden soll ist eine feste Breite und Höhe nicht empfehlenswert. Hier sollte mit "%" die Breite und ggf. die Höhe festgelegt werden, meist wird "100%" verwendet.

Wie man an dieser Seite sieht, ist auch der Einbau einer Tabelle in eine Tabellenzeile und auch noch eine tiefere Verschachtelung möglich.
Mehr und detailliertere Informationen bietet hier SelfHtml (siehe Vorwort).

Positionierung der Elemente eine Webseite :

Die einfachste Methode, um etwas zentriert auf der Seite anzuzeigen, ist:

Die eleganteste Methode ist die Positionierung mittels Tabelle(n). Siehe vorherigen Abschnitt.

Es gibt auch die Methode der absoluten Positionierung mittels z.B.
<div style="position: absolute; left:50px;top:80px;">absolut positionierter Inhalt</div>.
Ich will aber hier nicht näher darauf eingehen, denn das geht schon über das Grundwissen hinaus und wird in der SelfHtml ausführlicher erklärt. Ausserdem gibt es einen grundlegenden Nachteil: es ist nur in geringem Umfang mit anderen Methoden kombinierbar.

Tunlichst vermeiden sollte man die Platzierung mit der Leertaste, denn das erzeugt nur Datenmüll. Im Quelltext sieht man dann über viele Zeilen nur noch:
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;.usw.
Der Hauptnachteil besteht darin, dass bei geringerer Bildschirmauflösung die Seite anders aussieht. Mit Leerzeichen ganz rechts platziertes rutscht bei geringerer Auflösung in die nächste Zeile nach links.

Man kann das überprüfen, indem man das Browserfenster zur Kontrolle mal von rechts her etwas schmaler macht. Rücken die Elemente der Seite dabei etwas nach links zusammen, ist alles richtig gemacht. Springen einzelne Teile nach links in die nächste Zeile, wurde falsch positioniert!

In Ausnahmefällen kann man mal mit der Leertaste zwei zentriert nebeneinander positionierte Bilder etwas auseinanderrücken. Eleganter geht das mit einem Platzhalter-Tag:
<span style="margin-left:50;margin-top:10;" /> hier in horizontalem Abstand von 50 Pixel (vertikal 10 Pixel).
Oder auch mit einem transparenten gif-Bild (1x1 Pixel), das man auf die benötigte Breite zieht:
<img src="../pics/1.gif" border="0" width="50" height="10" alt=" wie hier " align="absmiddle" /> ←wie hier zu sehen ..width="50".. im Beispiel ebenfalls 50 Pixel breit.

Frames und ihr Einsatz :

Ich möchte hier nur einmal kurz zeigen, wie es am Beispiel meiner Seite funktioniert. In der index.html werden zwei Seiten aufgemacht. Links die menue.htm und rechts die home0.htm, die wiederum zwei Seiten aufruft, oben die home1.htm und unten, der scrollbare Bereich, die eigentliche home.htm.

Da es sehr viel Arbeit macht die ganzen html-Sonderzeichen in html-Code zu übersetzen, habe ich mich entschlossen, die beiden Frameseiten als Bilder hochzuladen, dann muss ich nicht den ganzen Kram übersetzten. hier der Quelltext der index.html und der home0.htm als Bilder, wie oben beschrieben. Da die beiden Frameset-Seiten index.html und home0.htm nur etwa 395-440 Bytes gross sind, macht sich der Mehraufwand beim Laden der Seiten im Browser nicht bemerkbar.

Beim Seitenaufruf aus dem Menü heraus, muss man dann nur darauf achten, die Seite im richtigen Frame mit  ..target="hauptframe"> als Öffnungsmodus des Links zu startet.

iframes und ihre Verwendung :

Noch eine elegante Lösung sind iframes beim Einbau des Menüs in eine Homepage. Bei Änderungen im Menü muss dann nicht jede einzelne Seite verändert werden, da die Menüseite in allen Seiten aufgerufen wird.

Gemacht wird es folgendermassen (allerdings ohne Zeilenumbruch):
<iframe src="fenster.htm" width="100%" height="100%" align=left scrolling=no
            name="fenster" marginheight="0" marginwidth="0" frameborder="0"> für IE

<ilayer src="fenster.htm" width="100%" height="100%" align=left scrolling=no
            name="fenster" marginheight="0" marginwidth="0" layerborder="0"> für Netscape

Hier sind die Zeilenumbrüche echt (bei 1024x768 Pixel und mehr):
<b><font face="Arial" size="3" color="#ff0000">Hier sollte eigentlich eine Seite geöffnet werden !<br />
Leider kann Dein Browser kein iframe und kein ilayer anzeigen!<br />
Du musst also die Seite manuell aufrufen durch die Eingabe von</font><br />
<font face="Arial" size="3" color="#cc0000"><br />
<a href="fenster.htm" target="_blank">fenster</a> !</font>
</iframe></ilayer>
Der letzte Bereich ist nur dafür da Besuchern, deren Browser die fenster.htm nicht anzeigen kann, in diesem Feld die eingetragene Meldung auszugeben

stylesheet (css) :

Hier nur noch die Einbindungen im head-Bereich der Seiten. wenn die Seite im gleichen Ordner liegt wie die css-Datei:
<link rel="stylesheet" type="text/css" href="style.css"> Statt style.css ist auch beliebigername.css möglich.

Mit den Zusätzen ../ und ordner/ kann auch, wie im Seitenprofil beschrieben, zurück und vorgesprungen werden.

Hier nur noch der Grundaufbau der Datei, die wie die profil.dat eine reine Textdatei ist:

/* DATEI: style.css */ Name der css-Datei
/* Copyright : Ihr nane */ Kopierschutzzeile kann weggelassen oder ausgefüllt werden
/* www...ihre hp-adresse...de */ Adresse der Homepage, für die diese Datei gilt

/* Beschreibung */ dient nur zur besseren Übersichtlichkeit
geltungs.bereich {befehle;befehle;befehle;} steht schon vorne
  weitere Einträge

Die Leerzeile zwischen der 3. und 4. Zeile dient der besseren Übersichtlichkeit.
Die Einbindung der css-Anweisungen in der html-Seite erfolgt dann mit dem Eintrag class="geltungsbereich" wie z.B. hier bei dieser Hervorhebung:
<font class="faqtipp">Text für den die Anweisung gilt</font>.
In der css-Datei steht dann .faqtipp {background:#f9fff9;color:#000088;}.
Darin wird der Hintergrund auf die Farbe: f9fff9 und die Textfarbe: 000088 festgelegt.
Würde ich mich entschliessen die Textfarbe in der html-Seite zu verändern, müsste ich dies nur einmal in der css-Datei tun und alle entsprechenden Einträge hätten die neue Farbe.

Einbindung von Links und Bildern :

Mit den Tags <a> und </a> wird ein Link für den Browser definiert. Der Zusatz href="" teilt ihm die Zieladresse mit und target="" steuert dann, für jeden Link einzeln, wie der Browser diesen Link anzeigen soll. Mögliche Anweisungen sind:
"_blank" neues Browserfenster
"_top" gleiches Browserfenster
"_self" gleicher Frame
"_parent" übergeordneter Frame (bei iframes)
Wichtig ist hier der Unterstrich vor der Anweisung.
"framename" direkte Adressierung bei Frames ohne Unterstrich.
Mit einem Eintrag im Seitenkopf (head) kann man für alle Links auf einer Seite zentral festlegen, wie sie geöffnet werden sollen:
<base target="_Anweisung">

Einen schönen Effekt bietet der Zusatz title="Beschreibung", mit dem man dem Link eine Beschreibung hinzufügen kann, die im Browser in einer Quickinfobox angezeigt wird, wie bei Bildern mit dem Zusatz alt="Beschreibung" title="Beschreibung", wobei alt="Beschreibung" nur vom IE angezeigt wird, während title="Beschreibung" von allen anderen Browsern ausgegeben wird.

Bei Bildern funktioniert es auf ähnliche Weise, wie man am Beispiel meines kleinen Steuerungsbildes sieht:
<img border="0" src="../pics/up.gif" alt="hier ohne Funktion" title="hier ohne Funktion" width="15" height="15" align="absmiddle" />

Mit <img (image) erhält der Browser den Hinweis das ist ein Bild, mit border="0" wird die Bildrahmenbreite festgelegt, src="" ist die Adresse, alt="" ist die Beschreibung in der Quickinfobox, width="" ist die Breite in Pixel und height="" die Höhe in Pixel, mit align="absmiddle" wird die Bildlage gesteuert, hier mittig zum umgebenden Text, und der  /> beendet den Bildtag.

Noch ein Tipp zur Adressierung: ../pics/up.gif dabei weist ../ den Browser an aus dem aktuellen Ordner herauszugehen und in den Ordner pics/ zu wechseln

Noch ein wichtiger Hinweis Bildgrössen mit mehr als 800x600 Pixel sind wenig sinnvoll, denn die wenigsten User haben eine Bildschirmauflösung mit mehr als 1024x768 Pixel, ausserdem wird dadurch die Dateigrösse so gross, dass Besucher die noch mit 56k-Modem unterwegs sind resigniert aufgeben.
Des weiteren sollte man keine bmp-Bilder, sondern das jpg-. oder gif-Format benutzen, da hier die Bildinformationen komprimiert sind und dadurch der Bildaufbau schneller geht.
Ein gutes Programm zum Konvertieren der Bilder ist Irvan View.

Javascripts + Java-Applets :

Mit javascript kann man Fenster öffnen, Anzeigen steuern, Aktionen starten (nicht nur schädliche), MouseOverEffekte, wie bei folgendem Smilie einbauen u.s.w.u.s.f. Die Vorteile liegen auf der Hand. Dass irgendwelche subversiven Elemente dies missbrauchen, ändert nichts an den vielen Vorteilen, die javascript bietet. Leider ist der Browser FireFox nicht in der Lage Sounds wiederzugeben, also funktioniert dieser MouseOverEffekt damit auch nicht.
Besonders gefährlich sind in dieser Hinsicht Warez-. und Sex-Seiten, die man besser meiden sollte!

Die Einbindung erfolgt auf ganz unterschiedliche Weise, die von Script zu Script sehr verschieden ist. Das gleiche gilt auch für Java-Applets.

Java-Applets sind eigenständige Programme, die innerhalb von html-Seiten ausgeführt werden können.

In der SelfHtml steht sehr viel zur Verwendung beider Module. Alles mögliche über Javascripts und Applets findet man auch unter JaveFile.com

Das Seitenprofil, die profil.dat :

Liegt sie im gleichen Ordner wie die Seite, wird sie mit folgendem Eintrag im head-Bereich eingebunden:
<head profile="profil.dat">

Liegt sie im Ordner /html/ und die Seite im ROOT gilt folgender Eintrag:
<head profile="html/profil.dat"> dabei weist html/ den Browser an in den Ordner /html/ zu wechseln.

Liegt sie im ROOT und die Seite im Ordner /html/ gilt folgender Eintrag:
<head profile="../profil.dat"> dabei weist ../ den Browser an, einen Ebene zurückzuspringen

Es ist auch möglich die Datei absolut zu positionieren:
<head profile="http://www...ihreadresse.de/ordnername/profil.dat">

Man kann dabei auch beide Methoden kombinieren.

Zum Inhalt der Datei habe ich an anderer Stelle schon viel geschrieben, deshalb hier nur noch der Grundaufbau:

/* file: profil.dat */ der Dateiname für Browser und Suchmaschinen
/* for URL: http://www...ihreadresse.de/ordnername/ */ Adresse der profil.dat

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="Kategorie" content="A.1.B">
  weitere Einträge

Die Leerzeile zwischen der 2. und 3. Zeile dient der Übersichtlichkeit.

Farben und Hintergrundbilder :

Meist werden aber die Farben in Hexadezimalwerten im RGB-Code (Rot/Grün/Blau-Code) angegeben, da damit mehr Nuancen möglich sind. Der Zusatz erfolgt z.B. für die Farbe schwarz in der Form:
bgcolor="black"> beim Realnamen der Farbe oder
bgcolor="#000000"> das Zeichen # steht für die Anweisung "das ist ein Code"
Für jede Farbe stehen zwei Ziffern zur Verfügung. Dabei werden die Farben in jeder Ziffer folgendermassen differenziert 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f das sind 16 bit. Mit der 2. Ziffer werden noch mal 16 bit eingegeben. In der Potenz 16² sind das 256 bit also 256 Farben. Mehr Farben gibt es in der html-Sprache nicht.

Dem entsprechend sieht es bei weiss aus. #ffffff bedeutet alle Farben auf Maximum = weiss.

Wem das zu kompliziert war, der findet hier ein Javascript, dass das verdeutlicht.

Hintergrundbilder können für ganze Seiten oder auch nur bestimmte Bereiche in Tabellen oder Zeilen definiert werden.
Auch sie werden mit einem Zusatz angegeben:
background="Adresse des Bildes"

Man kann dafür sehr kleine Bilder (ich meine die Dateigrösse) verwenden, denn sie werden horizontal und vertikal aneinandergefügt. Um z.B. einen Farbverlauf einzubauen, muss das Bild nur 1 Pixel breit und so hoch wie das Fenster eines Betrachters mit maximaler Auflösung sein.

Schriftarten auf der Seite :

Zu den Standardschriftarten, die auf fast allen Rechnern vorhanden sind, gehören Arial, Verdana, Times New Roman und Courier new. Für welche Schriftart man sich entscheidet ist Geschmackssache. Ich bevorzuge Arial.

Hier ein Vergleich verschiedener Schriften in verschiedenen Grössen und auf verschiedenen Hintergründen (Grösse im Browser veränderbar):

Wie man sieht, ist eine zu kleine Schriftart bei dunklem Hintergrund fast nicht mehr lesbar. Am besten funktioniert es noch mit der Schriftart Verdana. Ausserdem sollte man für ausreichend Kontrast zwischen Hintergrund und Schrift sorgen, wie das folgende Beispiel zeigt:

 So etwas tut den Augen weh, und sollte tunlichst vermieden werden! 

Erst durch Markieren wird dieser Text gut sichtbar.

Wenn man die Schriften im css-Format definiert, muss man darauf achten, die Schriftgrössen nicht zu klein zu wählen, da der Besucher die Schriftgrösse im Browser nicht verändern kann.

Einbinden von Hintergrundsounds :

Das ist der Grund, dass auf einigen meiner Seiten zwar auch ein Sound zu hören ist, dann aber nur ein ganz kurzer und ohne Wiederholung.

Ausserdem unterstützen einige Browser, wie zum Beispiel FireFox unter Version 3.x, die Wiedergabe von Hintergrundsounds von Hause aus nicht.

Die Einbindung von Hintergrundsounds erfolgt auf sehr verschiedene Weise.

1. Die einfachste Form ist die Einbindung im Seitenkopf (head) mit folgender Anweisung:
<bgsound src="sound.datei" loop="0" volume="-500">
Als Sounds kann man viele Formate verwenden (*.wav,*.mid,*.au...), mit loop="" wird gesteuert, wie oft der Sound wiederholt werden soll. 0 ist klar, -1 ist unbegrenzt, volume="" steuert die Wiedegabelautstärke (wird nicht von allen Soundkarten unterstützt bzw.von jeder anders interpretiert).

2. Auch im body-Bereich kann man Sounds einbinden hier unsichtbar und nicht steuerbar:
<embed src="sound.datei" hidden="true" autostart="true" volume="-500" width="0" height="0" loop="0">
autostart="true"-true=automatisch.
Nachteil dieser Methode: sie funktioniert nur mit dem Internet Explorer, da sie auf dem Windows-Mediaplayer basiert, wie auch die nächste.

3. Hier ein Beispiel für einen Sound im body-Bereich mit unterschiedlicher Lautstärke, der nicht automatisch startet aber vom Besucher gestartet und beendet werden kann:
←volume="" (100%)  ←volume="-500" (50%)  ←volume="-1000" (10%)
Man kann hier für die verschiedenen Audioformate etwas experimentieren mit Werten zwischen -1000 und 100. Besser ist es dem User die Lautstärkeregelung selbst zu überlassen!

Und so habe ich es in diesem Beispiel gemacht:
<embed src="../sounds/gutelaune.wav" width="70" height="46" autostart="false" volume="30" loop="-1">
"false" schaltet den Autostart aus.

Man kann sogar dem Besucher selbst die Lautstärkeregelung überlassen, wenn man das Fenster gross genug macht:
←Fenstergrösse = width="300" height="46".

4. Eine weitere und, wie ich finde, die eleganteste Lösung des Soundsteuerungsproblems ist, den Sound in einer gesonderten html-Seite einzubauen und in einem iframe aufzurufen. Es werden 2 zusätzliche Seiten gebraucht, eine ohne Sound mit Link zu der Seite mit Sound, und die mit dem Sound mit Link zu der Seite ohne Sound. Dafür hier ein Beispiel:
Mit folgendem Icon  kann der Sound ein-. und ausgeschaltet werden. Das funktioniert, weil statt des Icons ein iframe eingefügt ist, in dem beim Seitenaufruf die Seite hpsoundaus.htm geladen wird und mit den Links auf den iframe-Seiten dann zwischen der hpsoundan.htm und der hpsoundaus.htm hin und her geschaltet wird.

Und so wird's gemacht:
1. der iframe-Eintrag an der Stelle, wo das Icon erscheinen soll:
&nbsp;<iframe src="hpsoundaus.htm" width="17" height="17" name="soundframe" frameborder="0" align="absmiddle">
<ilayer src="hpsoundaus.htm" width="17" height="17" name="soundframe" layerborder="0" align="absmiddle">
</iframe></ilayer>&nbsp; der html-Code: &nbsp; steht für ein Zwangsleerzeichen und die Grösse des iframe-Fensters ist mit 17x17 Pixel zur besseren Darstellung 2 Pixel grösser als das Icon. Die Optionen sind unter iframes und Links und Bilder beschrieben.

2. die Soundseite:
<html><head><bgsound src="../sounds/allesnurgeklaut.mid" loop="infinite"></head><body topmargin="0" leftmargin="0"><a href="hpsoundaus.htm" target="_self" title=" Sound ausschalten "><img border="0" src="../pics/sound.gif" align="absmiddle" /></a></body></html>
und die Seite ohne Sound:
<html><head></head><body topmargin="0" leftmargin="0"><a href="hpsoundan.htm" target="_self" title=" Sound einschalten "><img border="0" src="../pics/sound0.gif" align="absmiddle" /></a></body></html>

Diverses, wie eigenes Icon für die Seite ...

Was heisst eigenes Icon für die Seite?

Wenn man ein eigenes Icon (z.B. mit Microangelo) erzeugt und mit diesen Spezifikationen unter favicon.ico im Ordner der html-Seiten ablegt, zeigt jeder Browser beim Anzeigen der abgespeicherten Links im Favoritenfenster dieses Icon an.
Bei meiner Seite ist es auch so.

Wozu brauche ich einen Besucherzähler?

Ein sehr guter kostenloser Besucherzähler wird von WebCounter angeboten, der viele Sonderfunktionen enthält. Dazu gehören viele frei wählbare Layouts, einfache statistische Auswertungen, ein komfortables Gästebuch und mehr. Mein Counter und mein Gästebuch sind auch von WebCounter.

Wozu brauche ich Gästebuch?

Wozu brauche ich eine Seitenstatistik?

Eine sehr gute Auswertung all dieser Daten bietet WebStats4U. Hier kann man für jede Seite einen einzelnen Zähler einrichten um auch zu sehen, welche Seiten werden bevorzugt besucht. Wie weit dieser Anbieter verbreitet ist sieht man auf allen Webseiten mit dem Symbol über das man die Statistiken abrufen kann.

Rechtshinweis:

Zum Schluss noch eine interessante Seite in der aufgelistet ist, was man bei HTML so alles falsch machen kann: Golden HTML (lustig und informativ).