Gegen Bilderklau - Das Original | Druckvorschau: Einen vRH mit Html erstellen, Teil 1

Geschrieben von Lottalein am 26.01.2012 um 08:12:

Einen vRH mit Html erstellen, Teil 1

Einen vRH mit Html erstellen, Teil 1

In diesem Tutorial möchte ich euch erklären, wie ihr euch einen virtuellen Hof mit Html erstellen könnt. Da man ja nicht von jetzt auf gleich Html kann, ist dieses Tutorial vpr allem für Html-Einsteiger gedacht, die gerade damit angefangen haben sich mit Html zu beschäftigen.

Anleitung

Als erstes braucht ihr natürlich einen Htmlfähigen Server. Ich würde euch einen der folgenden Empfehlen, da man dort später auch eventuell mit Php arbeiten kann (wenn man das denn möchte): Bplaced, Square7, Pytal & Kilu.

Wie ihr eure Seiten dann auf den Server laden könnt, habe ich euch hier bereits erklärt smile

_______________________________________________________________

Beginnen wir nun mit der Enterseite. Diese Seite solltest du index.htm nennen, da die Indexseite automatisch von deinem Server als Startseite erkannt wird.
Um dein Enter einzubauen, brauchst du natürlich die Entergrafik (die bei dir vielleicht Enter.jpg heißt). Diese lädst du zunächst auf deinen Server in den Grafikordner (den du dir eventuell vorher erstellt hast). Als nächstes geht es an das Coden.

Zunächst brauchst du eine leere Html-Seite. Diese sieht wie folgt aus:

code:
1: 2: 3: 4: 5: 6: 7:	<html> <head> <title>Name der Seite</title> </head> <body> </body> </html>

Dort fügst du nun in den Bodybereich (zwischen <body> und </body>) nun folgendes ein:

code:
1:	<a href="deineseite.htm"><img src="Grafiken/Enter.jpg"></a>

Nun hast du deine Entergrafik auf der Indexseite verlinkt. Nun musst du nur noch "deineseite.htm" anpassen. Dort fügst du die Adresse zu deinem gecodeten Design ein (also z.B. design.htm).

_______________________________________________________________

Als nächstes erstellen wir die Mainseite. Diese nennen wir am besten main.htm. Dort fügen wir wieder den Htmlcode für eine leere Seite ein. Dann kannst du dort ebenso ein Bild einfügen und natürlich auch Text nach deinen Vorstellungen. Meistens wird dort ein kleiner Einleitungstext und eine Willkommensgrafik angezeigt. Der Code, um eine unverlinkte Grafik anzeigen zu lassen ist folgender:

code:
1:	<img src="Grafik.jpg">

_______________________________________________________________

Nun folgt das Menü. Diese Seite nennen wir ganz einfach menue.htm. Auf der Menüseite werden alle Seiten deines Hofes verlinkt. Okay, nicht alle. Pferdesteckbriefe und andere Unterseiten natürlich nicht.
Fügen wir also als erstes wieder den Code für eine leere Html-Seite ein. Als nächstes fügen wir eine Überschrift ein, unter welche wir die ersten Links setzen:

code:
1:	<h1>Überschrift1</h1>

Statt "Überschrift1" solltest du natürlich etwas anderes nehmen - z.B. "Allgemeines" oder "Start".

Nun fügen wir den ersten Link ein. Dazu nehmen wir folgenden Code:

code:
1:	<a href="link.htm" target=main>Link Eins</a>

link.htm solltest du natürlich durch deinen gewünschten Link ersetzen (z.B. impressum.htm oder main.htm). Das target=main steht dafür, dass sich der Link in deinem Main-Frame öffnet (wenn der Main-Frame denn main genannt wurde. Ansonsten musst du dies natürlich auch noch anpassen). Link Eins solltest du natürlich auch ändern Augenzwinkern

Natürlich kannst du im Menü so viele Links wie du möchtest untereinander setzen. Dazu setze einfach hinter jeden Link im Html noch ein <br>.

_______________________________________________________________

Und das war es auch schon mit dem ersten Teil smile

Sollten Fragen oder Probleme auftreten, dann wendet euch einfach an mich.

Liebste Grüße, Lottalein