Html-Mini-Kurs Einsteigerhilfe Ihre erste eigene Homepage programmieren Anleitung Beschreibung Schritt für Schritt zur eigenen Internetseite

Home
Verkaufsservice
Klassentreffen
Ihr Chatraum
Leichtes Geld
Gewinnspiele
Hinterzimmer
SuMaeintrag
Geld sparen
Zeitbanner
Html-Kurs
Otrkeys
Urlaub
Cheats
A-W

Kontakt
Disclaimer
Impressum
Datenschutz
Partnerseiten
Verzeichnisse
Toplisten

Hier finden Sie eine Schritt für Schritt Anleitung, die Ihnen zu Ihrer eigenen Homepage verhelfen soll.

Legen Sie bitte einen neuen Ordner an in dem Sie dann alle Bilder und Dateien die mit Ihrer Homepage in Verbindung stehen ablegen koennen.
Klicken Sie dazu mit der rechten Maustaste auf eine freie Stelle auf Ihrem Startbildschirm, im sich oeffnenden Fenster waehlen Sie "Neu" dann "Ordner", es erscheint nun ein Ordner den Sie bitte mit Homepage benennen.
Rufen Sie bitte Ihr Notepad auf.(Start--> Zubehoer --> Editor oder Notepad)
Jetzt geben Sie dem Editor an was er spaeter auf dem Browser (z.B.Internet Explorer) darstellen
soll naemlich Html:
Fuegen Sie bitte folgenden TAG (so heissen die Befehle, sie stehen allesamt in spitzen Klammern) in den Editor ein:
<html>
Da fast alle Tags (Befehle) auch wieder beendet werden muessen geben Sie bitte am unteren Ende des Editors gleich folgendes ein:
</html>
Ihr Editor sollte jetzt folgenden Inhalt haben:
<html> </html>
Damit allein ist noch nichts zu erreichen aber es sind trotzdem die wichtigsten Angaben fuer Ihren Editor er weiss jetzt es handelt sich um eine Html-Datei die hier enstehen soll und wird alles was zwischen den beiden Tags (Befehlen) steht entsprechend behandeln.
Als naechstes widmen wir uns dem Hintergrund.
Hier haben Sie die Wahl zwischen einem Hintergrundbild oder einer Farbe.
Wir nehmen erst die Farbe:
Fuegen Sie jetzt zwischen den schon vorhandenen Befehlen folgendes ein:
<body bgcolor="red">
da auch dieser Tag (Befehl) beendet werden muß fuegen Sie am unteren Ende ueber dem /html Tag folgendes ein:
</body bgcolor="red"> <p>
Der Inhalt Ihres Editors sollte nun folgendes Aussehen haben:
<html> <body bgcolor="red"> </body bgcolor="red"> </html>
Wichtig:
Achten Sie immer darauf zuoberst muß immer der <html> Tag stehen und zuunterst der </html> Tag, also egal wie viele Tags (Befehle) Sie auch immer einfuegen werden zuerst steht <html> zuletzt </html>
Jetzt koennen Sie sich Ihre ersten Programmierschritte anschauen klicken Sie am oberen Rand Ihres Editors auf Datei dann "Speichern unter" suchen Sie jetzt Ihren am Anfang erstellten Ordner und speichern Sie diese Datei dort wie folgt ab:
Dateiname :
index.html
dann auf Speichern
Jetzt oeffnen Sie bitte den Ordner in dem Sie gerade Ihre Datei gespeichert haben klicken Sie jetzt auf die Datei "index.html" und Ihre Seite wird im Browser(Internet Explorer) geoeffnet.
Nun sollten Sie den roten Hintergrund sehen koennen.
Falls Sie Ihr Editorfenster weggeklickt haben sollten, klicken Sie einfach Ihre rechte Maustaste, der Cursor befindet sich auf der Homepage,im folgenden Fenster waehlen Sie "Quelltext anzeigen" und erhalten wieder Ihr Editorfenster.
Jetzt koennen Sie etwas mit den Farben spielen wechseln Sie einfach die angegebene Farbe "red" aus Sie koennen dazu verschiedene Farben benutzen also waehlen Sie "blue", "yellow" , "green", oder eine andere Farbe Ihrer Wahl aus, aber es gehen laengst nicht alle, nach jeder Aenderung muessen Sie die Datei wieder neu Speichern waehlen Sie dazu diesmal die Option "Speichern" nicht "Speichern unter". Aktualisieren (Reload) Sie Ihren Browser(Internet Explorer) und er sollte die neue Hintergrundfarbe anzeigen.
Wichtig:
Beachten Sie bitte wenn Sie eine neue Farbe waehlen beide Tags (Befehle) dementsprechend zu aendern.
Also wenn
<body bgcolor="red"> <p>
dann auch
</body bgcolor="red"> <p>
Sie koennen Ihre Hintergrundfarbe auch selbst mischen. dazu aendern Sie die Tags wie folgt um
<body bgcolor="#225588">
auch hier gilt wieder den Tag (Befehl) beenden.
</body bgcolor="#225588">
Probieren Sie auch hier was passiert wenn Sie jeweils 2 zusammenhaegende Werte veraendern, also entweder die ersten zwei Zahlen oder die beiden mittleren oder eben die letzten zwei.
Zusammenfassung:
Fast alle Tags (Befehle) muessen beendet werden.
Der einzige Unterschied zwischen Anfangs- und Beendigungs-Tag ist dieser Schraegstrich / am Anfang des Beendigung-Tags (Befehl).

Fuer die naechste Lektion benoetigen Sie eine Grafik

Um die obige Grafik zu speichern bringen Sie den Cursor auf das Bild, klicken Sie mit der rechten Taste, waehlen Sie im sich oeffnenden Fenster "Bild speichern unter" und legen Sie es in Ihrem Homepageordner ab.
Klicken Sie bitte die Datei "index.html" in Ihrem Ordner "Homepage" Sie sehen nun den letzten Stand Ihrer Bemuehungen, druecken Sie nun die rechte Maustaste um wieder Ihren Editor zu erhalten klicken Sie auf Quelltext.
Um eine Grafik als Hintergrund einzufuegen tauschen Sie bitte den folgenden Tag mit dem alten Tag fuer die Hintergrundfarbe aus.
<body background="1.jpg">

beenden nicht vergessen.
</body background="1.jpg">
Inhalt Ihres Editors:
<html> <body background="1.jpg"> </body background="1.jpg"> </html>
Speichern Sie bitte die Aenderung und aktualisieren Sie Ihren Browser, Sie sehen Ihren ausgewaehlten Hintergrund.
Beachten Sie bitte das der Name der Grafik, die Sie in Ihren Ordner "Homepage" abgelegt haben muessen, exakt wiedergegeben wird.
Also:
Heisst die Grafik 1B.jpg muss sie auch in Ihrem Editor 1B.jpg benannt werden, 1b.jpg wuerde nicht angezeigt werden.
Versuchen Sie nun verschiedene eigene Hintergruende einzufuegen.
Wenn sie sich die Grafiken, durch anklicken, ansehen werden Sie feststellen das ihre Groesse unterschiedlich ist und keinesfalls ausreicht um den gesamten Hintergrund auszufuellen. Die jeweiligen Grafiken werden naemlich, automatisch, immer wieder aneinandergesetzt bis sie den gesamten Hintergrund ausfuellen.
Zusammenfassung:
Alle Dateien und Grafiken die zu einer Homepage gehoeren muessen sich in ein und demselben Ordner befinden. Die Namen der Grafiken muessen genau in den Editor uebernommen werden.
Wenn Sie demnaechst eigene Hintergruende verwenden wollen achten Sie bitte darauf, wegen der Ladezeiten, moeglichst nur .jpg oder .gif Grafiken zu verwenden.

Fuer die naechste Lektion benoetigen Sie wieder eine Grafik

Speichern Sie bitte die Grafik in Ihrem Ordner ab.
Weiter geht es mit dem Einbau von Bildern.
Der Tag fuer dass Einfuegen von Bildern in eine Html-Datei:
<img src="welcome.gif">
Diesen Tag muessen Sie nicht beenden.Dort wo Sie diesen Befehl in Ihrem Editor einsetzen,wird in der Browseransicht die Grafik angezeigt.
Bitte aendern Sie den Editorinhalt wie folgt:
<html> <body background="1.jpg"> <img src="welcome.gif"> </body background="1.jpg"> </html>
In der Browseransicht sehen Sie jetzt am linken Bildschirmrand eine Grafik, mittig wuerde es allerdings besser aussehen.Vom unpassenden Hintergrund ganz zu schweigen *g*.
Mit dem Befehl
<center>
werden Grafiken sowie auch Text mittig gesetzt, ohne den
<center>
Tag, linksbuendig.
Hier bitte wieder den Befehl beenden um festzulegen was alles mittig angezeigt werden soll.
</center>
Der Editor muss jetzt dieses Aussehen haben:
<html> <center> <body background="1.jpg"> <img src="welcome.gif"> </body background="1.jpg"> </center> </html>
In dieser Anordnung der Tags wird alles was Sie zwischen den Anfangs und Beendigungstags eingeben, Grafik oder Text, in der Browseransicht mittig angezeigt.
Waehlen Sie sich einen passenden Hintergund zu der angezeigten Grafik,versuchen Sie eine passende Farbe zu mischen.
Waehlen Sie eigene Bilder aus, legen Sie diese in Ihren Ordner "Homepage" ab, uebertragen Sie die Dateinamen in Ihren Editor, sehen Sie sich Ihre Bilder in der Browseransicht an.
Auch hier gilt am besten, wegen der Ladezeiten, nur .jpg oder .gif Dateien zu verwenden.
Mit den Tags die jetzt an die Reihe kommen, werden Texte formatiert. Geben Sie Ihrem Editor bitte folgendes Aussehen:
<html> <center> <body bgcolor="white"> <img src="welcome.gif"> </body bgcolor="white"> </center> </html>
Fuegen Sie bitte diesen Tag hinzu
<hr>

Er bewirkt dass eine klare Begrenzung in Form einer Linie erstellt wird, dieser Befehl muss nicht beendet werden da er nur an der Stelle wo er gesetzt wird Wirkung zeigt.
<html> <center> <body bgcolor="white"> <img src="welcome.gif"> <hr> </body bgcolor="white"> </center> </html>
Da im oberen Bereich eine Grafik gesetzt ist, ist es dringend erforderlich dort einen Umbruch zu schaffen.
Schreiben Sie jetzt bitte in Ihren Editor einen kurzen beliebigen Text.
<html> <center> <body bgcolor="white"> <img src="welcome.gif"> <hr> bla bla bla bla </body bgcolor="white"> </center> </html>
Speichern Sie bitte die Aenderung und sehen Sie sich die Browseransicht an.
Loeschen Sie jetzt bitte wieder den
<hr>
Tag heraus und sehen Sie in der Browseransicht was sich veraendert hat.
<html> <center> <body bgcolor="white"> <img src="welcome.gif"> bla bla bla bla </body bgcolor="white"> </center> </html>
Sie werden erkennen dass der Text sich neben die eingefuegte Grafik setzt, um dies zu vermeiden muss ein Umbruch erzeugt werden.
Verwenden Sie jetzt diesen Tag
<br>
um den Text wieder wie vorgesehen in einer neuen Zeile anzuzeigen.
Auch dieser Tag muss nicht beendet werden.
<html> <center> <body bgcolor="white"> <img src="welcome.gif"> <br> bla bla bla bla </body bgcolor="white"> </center> </html>
Sehen Sie sich bei jeder Aenderung den Browserinhalt an, um zu sehen was sich im einzelnen veraendert hat.
Verwenden Sie nun den naechsten Tag fuer das Formatieren von Text naemlich:
<p>
auch dieser Tag wird nicht beendet. Er hat nur Wirkung an der Stelle wo er gesetzt wird.
<html> <center> <body bgcolor="white"> <img src="welcome.gif"> <p> bla bla bla bla </body bgcolor="white"> </center> </html>
Sie sehen nun, in der Browseransicht,dass bei der Verwendung dieses Befehls der Abstand groesser wurde. Schreiben Sie nun einen etwas laengeren Text.
<html> <center> <body bgcolor="white"> <img src="welcome.gif"> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </body bgcolor="white"> </center> </html>
Ohne Verwendung von Zeilenumbruechen sieht sowas recht wild aus und wird viele, je nach laenge des Textes, eher zum wegklicken als zum weiterlesen verleiten.
Verwenden Sie nun die eben gelernten Tags um den Text aufzugliedern.
<html> <center> <body bgcolor="white"> <img src="welcome.gif"> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla b <br> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </body bgcolor="white"> </center> </html>
Sehen Sie sich die Unterschiede der Wirkung von den Tags
<p>
und
<br>
an.
Versuchen Sie nun einen Text nach Ihren Vorstellungen zu gestalten, versuchen Sie mehrere Variationen.

Bestimmen Sie jetzt die anzuzeigende Schriftart, mit diesem Befehl:
<font face="Times New Roman">
dieser Tag ist wieder zu beenden.
</font face="Times New Roman">
Sie muessen nicht unbedingt eine Schriftart vorgeben, die jeweiligen Browser werden die fuer sie gueltigen Grundeinstellung verwenden falls keine anderen Vorgaben gemacht werden.
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <img src="welcome.gif"> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
Wenn die Schriftart "Times New Roman" nicht als Ihre "Grundschriftart" eingestellt ist, konnten Sie jetzt eine Veraenderung bemerken,ansonsten hat sich nichts geaendert.
Verwenden Sie nach Moeglichkeit keine zu exotischen Schriftarten, denn der Rechner der Ihre Seite besucht muss diese Schriftart auf seiner Festplatte haben um sie darstellen zu koennen, findet er sie nicht greift er auf seine Grundeinstellung zurueck.
Probieren Sie jetzt einige Schriftarten aus, Sie koennen auch mehrere unterschiedliche in einem Text waehlen, beachten Sie alles was zwischen dem Tag
<font face="Times New Roman">
und
</font face="Times New Roman">
steht wird in der Schriftart "Times New Roman" angezeigt, soweit sich diese auf dem jeweiligen Pc befindet.
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <img src="welcome.gif"> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</font face="Times New Roman"> <br> <font face="Arial"> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </font face="Arial"> <p> <font face="Courier"> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </font face="Courier"> </body bgcolor="white"> </center> </html>
Ihr Browser sollte jetzt drei verschiedene Schriften anzeigen, ansonsten fehlt die eine oder andere, der angegebenen Schriften, auf Ihrem System.
Unter C:\Windows\Fonts finden Sie alle auf Ihrem Rechner installierten Schriften, probieren Sie verschiedene Arten aus.
Jetzt wird es bunt.
Mit dem Befehl
<font color="red">
legen Sie die Schriftfarbe fest die solange verwendet wird bis Sie mit
</font color="red">
wieder beendet wird.
Wenn Dieser Befehl nicht verwendet wird ist die Schriftfarbe Schwarz.
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="red"> <img src="welcome.gif"> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </font color="red"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
In der Browseransicht sehen Sie nun einen roten Text den Sie jetzt bitte farblich veraendern, nehmen Sie dazu wie schon bei der Wahl der Hintergrundfarbe auch die Moeglichkeit wahr die Farben selbst zu mischen.
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
Mit dem Befehl
<b>
legen Sie fest das Fett geschrieben wird beenden Sie mit
</b>
und die Schrift wird wieder normal angezeigt.
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
Sie koennen diesen Tag auch verwenden um einzelne Woerter hervorzuheben.
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> bla bla bla bla bla bla bla bla bla <b>bla</b> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <b>bla</b> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
Probieren Sie nun ganze Saetze und Passagen Fett anzuzeigen.

Es gibt verschiedene Moeglichkeiten Schriftgroessen festzulegen, ich stelle hier die einfachste vor:
<h1> -<h6>
Dieser Befehl muss beendet werden.Sie wissen ja wie das geht.
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> <h1>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</h1> <h2>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</h2> <br> <h3>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h3> <h4>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h4> <h5>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h5> <p> <h6>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h6> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
Sie sehen in der Browseransicht die verschiedenen Schriftgroessen. Teilen Sie Ihren Text neu auf versuchen Sie optisch dass Beste herauszuholen.
Ein neues Hilsmittel folgt jetzt.
<u>
Auch dieser Befehl muss beendet werden.
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> <h1><u>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</u> bla bla bla bla bla bla bla bla bla</h1> <h2>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</h2> <br> <h3>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h3> <h4>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h4> <h5>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h5> <p> <h6>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h6> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
Ideal fuer Ueberschriften, aber auch einzelne Woerter koennen optimal hevorgehoben werden.
Formatieren Sie nun einen Text lassen Sie Ihrer Fantasie freien Lauf, probieren Sie was moeglich ist, finden Sie heraus ob Sie noch irgendwo Probleme haben. Gehen Sie die einzelnen Lektionen noch einmal durch. Viel fehlt nun nicht mehr, und es ist geschafft. :-)
Erinnern Sie sich noch wie Sie Ihre "index.html" Datei angelegt haben ?
Legen Sie bitte so auch Ihre 1. Unterseite an, benennen Sie sie aber diesmal .htm also z.B. "hobbies.htm", gestalten Sie nach Ihren Vorstellungen.
Auch bei spaeteren Projekten sollten Sie die Startseite immer "index.html" benennen,weil die meisten Server diese Datei als Startseite fuer die einzelnen Homepages festlegen.
Setzen Sie Links:
<a href="hobbies.htm">
Zur Beendung des Links verwenden Sie bitte
</a>
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> <h1><u>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</u> bla bla bla bla bla bla bla bla bla</h1> <h2>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</h2> <br> <h3>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h3> <h4>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h4> <h5>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h5> <p> <h6>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h6> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <p> <a href="hobbies.htm">Hier geht es zu meinen Hobbies</a> <p> </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
Geben Sie zwischen
<a href="hobbies.htm"> und </a>
eine kurze Erklaerung zu dem was den Besucher Ihrer Seite dort erwartet.
Wenn Sie jetzt in der Browseransicht Ihrer "index.html" Datei auf den Link klicken sollte sich die neue Seite oeffnen.
Beachten Sie, besonders wenn Sie viele Links setzen, die einzelnen Dateinamen immer richtig zu uebertragen.
Sie koennen Die Verweise beliebig anordnen nur ist es jetzt besonders wichtig die Tags zu beenden, ueberpruefen Sie jeden Link auf seine richtige Funktion, hier schleichen sich gerne Fluechtigkeitsfehler ein und die richtige Seite wird nicht erreicht.
Wenn Sie viele Links auf Ihrer Homepage haben empfiehlt es sich eine kleine Navigation anzulegen.
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> <h1><u>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</u> bla bla bla bla bla bla bla bla bla</h1> <h2>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</h2> <br> <h3>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h3> <h4>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h4> <h5>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h5> <p> <h6>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h6> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <p> <a href="hobbies.htm">Hier geht es zu meinen Hobbies</a> | <a href="3.htm">zur dritten</a> | <a href="4.htm">zur vierten</a> | <a href="5.htm">zur fuenften</a> | <a href="6.htm">zur sechsten</a> | <a href="index.html">Startseite</a> | <p> </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
Diese Navigation koennen Sie auf allen Seiten Ihrer Homepage einbauen, so kann kreuz und quer gesprungen werden.
Den Strich zwischen den einzelnen Links koennen Sie durch druecken von "Alt Gr" und der Taste links neben dem "Y" erstellen.
Selbstverstaendlich koennen Sie Ihre Links auch untereinander darstellen.
Grafiklinks:
<a href="hobbies.htm"><img src="compgirl.gif"></a>
Anstelle des Textes koennen Sie auch Grafiken verwenden.

Speichern Sie obige Grafik wie gewohnt ab.
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> <h1><u>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</u> bla bla bla bla bla bla bla bla bla</h1> <h2>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</h2> <br> <h3>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h3> <h4>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h4> <h5>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h5> <p> <h6>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h6> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <p> <a href="hobbies.htm"><img src="compgirl.gif"></a> <p> </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
Die Grafik erscheint nun gerahmt, wenn Sie diesen Rahmen nicht wuenschen aendern Sie den Tag wie folgt:
<a href="hobbies.htm"><img src="compgirl.gif"border="0"></a>
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> <h1><u>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</u> bla bla bla bla bla bla bla bla bla</h1> <h2>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</h2> <br> <h3>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h3> <h4>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h4> <h5>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h5> <p> <h6>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </h6> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <p> <a href="hobbies.htm"><img src="compgirl.gif"border="0"></a> <p> </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
Erstellen Sie neue Unterseiten, verlinken Sie sie, achten Sie auf den richtigen uebertrag der Dateinamen.
Links zu anderen Seiten
Um auf fremde Seiten zu verweisen wird anstelle der Datei z.B. "hobbies.htm" die gesamte Adresse der Seite angegeben z.B. "http://www.barmann.org" <html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> <a href="http://www.barmann.org">Hier gehts nach www.Barmann.org</a> <p> </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
In Ihrem Fenster erscheint, nach klicken des Links unsere Homepage. Wenn Sie moechten das sich die verlinkte Seite in einem neuen Fenster oeffnet aendern Sie den Befehl ab.
<a href="http://www.barmann.org"target="_blank">Hier gehts nach www.barmann.org</a>
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> <a href="http://www.Barmann.org"target="_blank">Hier gehts nach Barmann.org</a> <p> </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
Nun oeffnet sich die Seite in einem neuen Fenster, so koennen Sie auch bei den Links auf der eigenen Seite verfahren.
Jetzt fehlt nur noch der Einbau Ihrer E-Mailadresse.
<a href="mailto:IhreMailadresse@web.de">xxxxxxx</a>
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> <a href="http://www.barmann.org"target="_blank">Hier gehts nach barmann.org</a> <p> <a href="mailto:xxxxxxxxx@web.de">Schreib mir</a> <p> </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
Nach anklicken oeffnet sich das Fenster des im jeweiligen System eingestellten E-Mailprogrammes.
Anstelle des Textes koennen Sie auch hier eine Grafik verwenden.
Wir benutzen hier ein bereits bekanntes Bild.
<html> <center> <body bgcolor="white"> <font face="Times New Roman"> <font color="#889933"> <img src="welcome.gif"> <p> <a href="http://www.barmann.org"target="_blank">Hier gehts nach barmann.org</a> <p> <a href="mailto:mailadresse@web.de"><img src="compgirl.gif"border="0"></a> <p> </font color="#889933"> </font face="Times New Roman"> </body bgcolor="white"> </center> </html>
<<<>>>
Sie sind nun einen gewaltigen Schritt weitergekommen, wenn Sie bis hierher alles umsetzen konnten sind Sie in der Lage Ihre einfache kleine Homepage zu erstellen.
Viel Spass
Wer es moechte kann, auf seiner erstellten Seite, gerne einen Link zu uns setzen.

Wie es geht ? Siehe oben.
Anschliessend werden Sie noch einige nuetzliche Links, zum Thema finden.
Sie brauchen ja schliesslich Speicherplatz fuer Ihre Homepage, vielleicht auch etwas Werbung usw.
Einfach mal nachsehen wenn Sie Ihre Seite fertig haben.

Domain-Check
Ist Ihr Wunschname noch frei?