HTML - Einführung Teil 3

  • In den Teilen 1 und 2 habe ich die html-Einführung begonnen, mit der heutigen Fortsetzung ergibt sich dann schon ein ganz gutes Grundwissen, um eine Webseite zu erstellen: Zur Textgestaltung und zur besseren Übersichtlichkeit können sogenannte Trennlinien eingesetzt werden. Hierzu gibt es den <hr>-Tag, der nicht beendet wird. Generell ist eine Trennlinie immer zentriert ausgerichtet und geht über die gesamte Breite, natürlich lässt sich das aber auch wieder mit dem bekannten Attribut 'align' ändern, wobei nur bei einer veränderten Breite der Linie ein entsprechender Effekt erzielt wird. Hierzu gibt es das zusätzliche Attribut 'width', mit dem die Breite sowohl absolut als auch relativ (%-Wert) abgeändert werden kann: <hr> = normale Trennline <hr width="300"> = zentrierte Trennlinie (Standard), 300 Pixel breit <hr align="right" width="400"> = nach rechts verschobene Trennlinie, 400 Pixel breit <hr width="66%"> = zentrierte Trennlinie, 66% des sichtbaren Browserfensters breit (verändert sich also in der Breite, wenn das Fenster verändert wird). Das Attribut 'align' kann also den Wert 'left' oder 'right' annehmen. Ein weiteres interessantes Gestaltungsmittel ist die Laufschrift, die allerdings - und das sollte man wissen - nur vom Internet Explorer interpretiert wird. Da dieser aber wohl von ca. 70% aller Surfer verwandt wird, kann man unter Umständen durchaus einen Einsatz der Laufschrift erwägen. Bei Netscape wird der Text dann als statischer Text abgebildet. Der Lauftext wird durch den <marquee>-Tag geklammert: <marquee>Lauftext</marquee> Die Laufrichtung des Textes ist hierbei logischerweise von rechts nach links, denn sonst würde der Satz ja von hinten hinein ins Bild laufen! Soll aus bestimmten Gründen die Laufrichtung dennoch geändert werden (z. B. bei wenig Text oder einem Datum), dann wird der Tag entsprechend erweitert: <marquee direction="right">Lauftext</marquee> Der Text läuft bei beiden Möglichkeiten immer ganz aus dem Bild, bis er dann erneut neu erscheint. Soll der Text nicht aus dem Bild verschwinden, dann gibt es das Attribut 'behavior' mit dem Wert 'alternate': <marquee behavior="alternate">Lauftext</marquee> Hierbei läuft der Text dann immer von rechts nach links und zurück - und ist permanent sichtbar. Ein alternierender Text als. Soll das Laufband einen anderen Hintergrund haben, wird der <marquee>-Tag entsprechend erweitert: <marquee bgcolor="red">Lauftext</marquee> Die Farbe kann wieder als englisches Wort oder als RGB-Wert mit # angegeben werden (z.B.: "#c0c0c0" = "silver"). Soll der Text eine bestimmte Farbe annehmen, dann wird dieser - wie bereits bekannt - in den entsprechenden <font>-Tag geklammert: <marquee bgcolor="red"><font color="gold">Lauftext</font></marquee> Also: rotes Laufband mit goldenem Text. Die Geschwindigkeit der Laufschrift kann mit dem Attribut 'scrollamount' variiert werden: <marquee scrollamount="2" direction="right">Lauftext</marquee> Je höher der Wert, um so schneller flitzt die Schrift durchs Bild. Vorwegbemerkung: Im Laufband kann natürlich auch ein Verweis (Link) oder ein Bild integriert werden, diese Dinge werden in Folge vorgestellt und können dann mit dem <marquee>-Tag kombiniert werden. Wie wird nun so ein Verweis erstellt? Für den Verweis gibt es den Befehl <a href="zieldatei.htm">Linktext</a>, wobei zwei Dinge unterschieden werden: Der Verweis im eigenen Projekt und der weltweite/externe Verweis auf eine andere Website. Der Verweis im eigenen Projekt: <a href="zieldatei.htm">Linktext</a> Auf diese Art und Weise kann man all seine Seiten miteinander verbinden, denn sonst käme ja niemand auf die Folgeseiten (so man welche hat). Eine Verlinkung sollte dann auf jeder Seite - möglichst immer an einer einheitlichen Position (wegen der besseren Orientierung) - erfolgen. Somit kann man immer hin und her springen. Die Seiten (Dateien) müssen (zumindest im Moment wegen der einfacherern Erklärung notwendig) im gleichen Ordner gespeichert sein! Ein externer Verweis benötigt natürlich die komplette URL (Webadresse), denn sonst kann die Website ja nicht gefunden werden: <a href="http://www.pc-special.net">PC-Special</a> Im Beispiel wird die Seite von PC-Special verlinkt (Ziel), um dorthin zu gelangen klickt man auf den Linktext, der hier - welch Wunder - "PC-Special" heißt. Anstelle des Linktextes kann auch ein Foto oder eine Grafik eingebaut werden, dazu später aber mehr. Die Möglichkeit, von der Website (jeder Einzelseite) gleich einen entsprechenden eMail-Kontakt herzustellen, kennt jeder und sollte auch gegeben sein. Dann kann schnell Kontakt aufgenommen werden und man muss nicht lange suchen. Der Befehl wird dabei etwas abgewandelt: <a href="mailto:wk@pc-special.net">wk von PC-Special</a> Klickt man auf den Linktext, öffnet sich bei richtiger Einstellung des PCs das Mailprogramm und die Empfängeranschrift ist bereits eingetragen. Im Beispiel würde man mir problemlos eine Mail senden können, man trägt natürlich seine eigene Mail-Adresse ein, denn man selbst will ja die Post erhalten. Eine weitere ganz nützliche Verweismöglichkeit ist das Springen auf einer Seite zu bestimmten Stellen, um die Navigation zu erleichtern. Jeder kennt es von vielen Seiten, wo man oft "top" oder "nach oben" anklicken kann und dann an den Seitenanfang springt. Zielmarke (wo hingesprungen werden soll): <a name="top"></a> Link, um an die gewünschte Stelle zu springen: <a href="#top">nach oben</a> Wichtig ist, dass die Bezeichnungen identisch sind (hier: top), denn sonst kann die Zielmarke natürlich nicht gefunden werden. Es kann ein beliebiger Begriff oder eine Zahl sein, nur gleich muss es eben sein! So. Wieder 'ne ganze Menge an neuen Details, die jetzt erstmal verdaut und verarbeitet werden wollen. Wichtig ist immer: ALLES MAL AUSTESTEN. Nach dem neudeutschen Motto: Learning by doing.