Lektion 3 - Links, Bilder, Anker, ...
Links
Es kommt nicht selten vor, dass man etwas auf der HP hat, was andere vielleicht auch gerne für ihre Homepage haben möchten. Damit sie nicht so lange suchen müssen, wo es das gibt könnt ihr ihnen mit einem ganz einfachen Link zu der entsprechenden Seite weiterhelfen. Der Code dafür ist folgender.
Beispiellink: www.mainfranken-chat.de
Dies sieht dann so aus:
Mainfranken-Chat
Hinter dem a href=" müsst ihr die Internetadresse (Auch URL genannt) angeben, auf die der Besucher nach dem Klick auf diesen Link hingeleitet werden soll. Ganz wichtig dabei ist, dass ihr das http:// auf jeden Fall mit dazu schreibt, weil der Browser sonst nichtweis, auf welche Seite er leiten soll. Nachdem ihr die Internetadresse angegeben habt, kommt die Linkbezeichnung! Diese steht gleich hinter dem a href="URL". Gebt dem Link einen sinnvollen Namen, damit auch jeder sofort weiß, was sich hinter diesem Link verbirgt! Abschließend wird das ganze mit mit dem /a. wieder geschlossen. (Wenn ihr möchtet, dass sich der Link in einer neuen Seite (also einem neuen Browser-Fenster) öffnet, dann fügt nach der URL ein Leerzeichen und target="_blank" ein.) Diese Funktion muss immer geschlossen werden, weil ansonsten der restliche Text auf der ganzen HP den ihr noch schreibt ebenfalls als Link angesehen wird!
Beispiel für das öffnen in einem neuen Browserfenster
Dies sieht dann so aus:
Mainfranken-Chat
Bilder
Die Homepage lässt sich natürlich sehr gut mit Bildern ausschmücken. Man sollte es allerdings nicht übertreiben, denn für die Benutzer miteiner langsamen Internetleitung, ist eine Homepage mit vielen Bildern eine richtige Quelle zum aufhalten, die meisten klicken die Homepage alsogleich wieder zu, wenn diese zu lange lädt. Um Bilder einzufügen benutzt einfach folgenden Code:
Dieses Bild soll eingefügt werden:
Der Befehl für unser Beispiel-Bild sieht folgendermaßen aus
Damit ein Bild auf eurer HP dargestellt werden kann, muss es sich im Internet befinden. Das Bild darf sich also nicht auf eurem Computerbefinden, sondern es muss schon im Internet sein. Wie ihr Bilder von eurem PC in's Internet bekommt, erfahrt ihr hier (Link hinzufügen).
Damit die Ladezeit nicht so hoch ist, gibt man in der Regel noch an wie groß das Bild sein soll. Somit muss der Browser nicht erst die Größe des Bildes ermitteln. Der Bilderbefehl wird also ein bisschen erweitert.
Er lautet nun
Mit width="Zahl" wird die Länge des Bildes in Pixel angegeben.
und mit height="Zahl" wird die Höhe des Bildes in Pixel angegeben.
Anker
Textmarken, so genannte Anker, setzt man dann in einem Web-Dokument ein, wenn die Seite nach unten hin lang ist und man den Besucher über so genannte "Sprungmarken" navigieren lassen möchte. Die HTML-Ankersetzung ist eigentlich sehr unkompliziert, jedoch etwas schwer zu erklären. Und wie könnte man besser erklären, als mit einem Beispiel!
Man benötigt dazu 2 Befehle
Definiert an dieser Stelle eine Textmarke
Sprung zu einer Textmarke - nicht die Raute # vergessen!
Wir stellen also fest, der uns bereits bekannte HTML-Code "a href=" taucht hier wieder auf. In Verbindung mit einer Raute # und dem betreffenden Ankernamen wird er zum "Link" zur Sprungmarke.
Erklärung am Beispiel
Definiert die Textmarke "start", sie wird Ausgangspunkt, denn wir wollen ja aus den Unterkategorien, die später folgen, den Besucher wieder nach oben zum Hauptmenü "schiessen". Zwischen ">" und "<" muss dabei kein Text stehen.
Der Link mit "Sprung" zur Textmarke "aboutme", die wir erst weiter unten festlegen werden.
Der Link mit "Sprung" zur Textmarke "freunde", die wir erst weiter unten festlegen werden.
Nun beginnen wir, die Kategorien abzuarbeiten.
Hier definieren wir also die 1. Sprungmarke "aboutme" und beginnen uns vorzustellen. Würde man oben nun auf den Link "About me" klicken, würde die Seite automatisch an diese Sprungmarke "fliegen".
Name: xxx
Geb.: 11.11.1111
Haarfarbe: grün
Wohnort: Buxtehude
...und so weiter und so weiter....
Und mit diesem Ankerlink "schiessen" wir den Besucher wieder zurück zum Start, also zurück zum Menü.
Hier definieren die 2. Sprungmarke "freunde". Würde man oben nun auf den Link "Das sind meine Freunde" klicken, würde die Seite automatisch an diese Sprungmarke "fliegen".
Meine Freunde:
A B C D E F G
1 2 3 4 5 6 7
James...
Wer ist eigentlich Maff???
Und mit diesem Ankerlink "schiessen" wir den Besucher wieder zurück zum Start, also zurück zum Menü.
Beispiel-Demo
About me
Das sind meine Freunde
Name: xxx
Geb.: 11.11.1111
Haarfarbe: grün
Wohnort: Buxtehude
...und so weiter und so weiter....
zurück zum Start
Meine Freunde:
A B C D E F G
1 2 3 4 5 6 7
James...
Wer ist eigentlich Maff???
zurück zum Start