HTML Leitfaden
mit Erläuterungen
Sie finden hier, wie Hyper Text Markup Language (HTML) für den Prototyp einer Lions Club Webseite verwendet wird, wobei zu jedem Absatz die nötigen Erläuterungen in roter, kursiver Schrift sowie Beispiele hiezu gegeben werden.
<!-- Struktur der Seite und Formatierung -->
<HTML>
<HEAD>
<TITLE>Lions Club
Prototyp Webseite</TITLE>
</HEAD>
<BODY TEXT="#000099"
BGCOLOR="#FFFFFF" LINK="#0000FF" VLINK="#800080" ALINK="#FF0000">
Schriftart und Schriftfarbe wurden mittels des verwendeten HTML editors, mit dem die Seite gestaltet wurde, festgelegt. Die software "Front Page" von Microsoft und Netscape Gold fügen diese Codes automatisch ein, sobald Sie Schriftart und Farbe visuell aus den angebotenen Möglichkeiten auswählen. Sie können aber auch eine bereits existierende Homepage, die Ihnen in der Gestaltung gut gefällt, auswählen, auf Ihren Computer herunterladen und dann aus dem Menu "Ansicht" mit der Funktion "Quelltext" die gewünschte Gestaltung kopieren und in Ihre neu zu gestaltende Homepage einfügen
<!-- Übeschrift mit Lions Logo und der Graphik "under construction"
-->
<IMG SRC="we_serve1.gif" HEIGHT=202 WIDTH=221 ALIGN=LEFT><BR>
<CENTER>
<B><FONT SIZE=+4> Lions
Club Zweikirchen</FONT></B>
<BR>
<B><FONT
SIZE=-1>Bitte um Verständnis ... <IMG SRC="undercon.gif" HEIGHT=38
WIDTH=38>
an der Gestaltung dieser Seite wird noch gearbeitet!
</FONT></B></P>
</CENTER>
| Und hier sehen Sie, was wir mit den oben angegebenen Befehlen gestaltet haben. |
Bitte um Verständnis ...  an der Gestaltung dieser
Seite wird noch gearbeitet!
|
Graphiken können an die von Ihnen gewünschte Grösse angepasst werden. Falls Sie Graphiken von Clipart Dateien oder von anderen Lions Clubs verwenden, so kann es erforderlich sein, dass Sie die Grösse so verändern, dass diese auf Ihrer Seite Platz finden.
<!-- Information zu den Clubzusammenkünften -->
<P> <HR WIDTH="500"></P>
Damit wird ein standardisierte horizontale Linie mit einer Breite von 500 pixel eingefügt. Es ist sowohl für Sie als auch die Besucher Ihrer Webseite hilfreich, wenn die einzelnen Abschnitte grafisch auf einfache Art getrennt werden. Üblicherweise verwendet man dann die gleiche grafische Trennung für alle Abschnitte. Auf dieser Seite haben wir uns entschieden, immer die gleiche horizontale Trennlinie zu verwenden .
<UL> <DT><B><U><FONT
SIZE=+1>Clubzusammenkünfte:</FONT></U></B></DT>
</UL><UL> <UL>
<LI><FONT
SIZE=+1><B><FONT COLOR="#C86400">Wann:</FONT></B>
Jeden 2. und 4. Mittwoch - 18:30</FONT>
<BR></LI>
<LI><FONT SIZE=+1><B><FONT
COLOR="#C86400">Wo:</FONT></B> im Hotel Ambassador,
Höhenstrasse, Salzburg</FONT></LI> </UL> </UL>
Soferne nicht eine aussergewöhnlich lange Download Zeit erforderlich ist, so ist es sehr praktisch, eine einfache Anfahrtskizze zu Ihrem Clublokal hinzuzufügen.
| Und hier sehen Sie, was wir mit den obigen Eingaben gestaltet haben. |
|
<!-- Information zu Vorstand und Kontaktaufnahme -->
<P> <HR WIDTH="500"></P>
<UL>
<DT><B><FONT
SIZE=+1>Vorstand:</FONT></B></DT>
</UL><UL> <UL>
<LI><B><FONT
COLOR="#C86400">Präsident:</FONT><FONT COLOR="#800080"> Vorname
Name <FONT SIZE=-1>Tel. Privat: xxx-xxxx; Tel. Büro: xxx-xxxx; Mobil Tel.: xxx-xxxx;
e-mail: adresse@provider.at</FONT></FONT></B></LI>
<LI><B><FONT
z COLOR="#C86400">1st Vice Präsident: </FONT><FONT
COLOR="#800080">Richard Reiniger <FONT SIZE=-1>Tel. Privat: xxx-xxxx;
Tel. Büro: xxx-xxxx; Mobil Tel.: xxx-xxxx; e-mail:
rr@vulcan.at</FONT></FONT></B></LI>
<LI><B><FONT
COLOR="#C86400">Sekretär: </FONT><FONT COLOR="#800080">Karl
Meier <FONT SIZE=-1>Tel. Privat: xxx-xxxx; Tel. Büro: xxx-xxxx; Mobil Tel.: xxx-xxxx;
e-mail: k.meier@frequency.net</FONT></FONT></B></LI>
<LI><B><FONT
COLOR="#C86400">Schatzmeister: </FONT><FONT
COLOR="#800080">Josef Gold <FONT SIZE=-1>Tel. Privat: xxx-xxxx;
Tel. Büro: xxx-xxxx; Mobil Tel.: xxx-xxxx; e-mail:
josef.gold@engines.com</FONT></FONT></B></LI>
<LI><B><FONT
COLOR="#C86400">Clubaufbau:</FONT><FONT
COLOR="#800080">Erich Meister <FONT SIZE=-1>Tel. Privat: xxx-xxxx;
Tel. Büro: xxx-xxxx; Mobil Tel.: xxx-xxxx; e-mail:
office@excelsior.net</FONT></FONT></B></LI>
</UL>
Wenn Sie den Prototy dazu verwenden, Ihre eigene Club Homepage daraus zu gestalten, so werden sie hier die Vorgaben durch die richtigen Namen und Kontaktmöglichkeiten Ihrer Vorstandsmitglieder je nach Erfordernis ersetzen. Wenn Sie weitere Mitglieder hinzufügen möchten, so kopieren Sie eine Eingabe und fügen sie diese nachher ein und ersetzen die kopierten Einträge durch die von Ihnen gewünschen Angaben. .
| Und hier sehen Sie, was wir mit den obigen Eingaben gestaltet haben. |
|
<!-- Abschnitt mit den Links -->
<P><HR WIDTH="500"></P> <DT><B><FONT
SIZE=+1>Links:</FONT></B></DT> <UL>
<!--LionNet link erster Ebene - zu Staat/Provinz/Distrikt Verknüpfungen - für
jeden Canadischen oder U.S. Club, der von einer LionNet Verknüpfung aus erfasst werden
kann -- (diese Funktion wird für europäische Clubs kaum anwendbar sein)>
<P><IMG SRC="lionnet_logo-small.gif" HEIGHT=22 WIDTH=102
ALIGN=ABSBOTTOM><B> <U>Staat/Provinz/Distrikt</U></B>
<B><FONT COLOR="#FF0000"><FONT
SIZE=-1>(für links zu Xxxxxxxxx Lions Clubs
on-line)</FONT></FONT></B></P>
| Und hier sehen Sie, was wir mit den obigen Eingaben gestaltet haben. |
|
Diesen Link finden Sie wahrscheinlich bei jedem Club im Bereich der Canadischen oder U.S. LionNet Verknüpfungen. Hier sollten Sie anstelle von "Staat/Provinz/Distrikt" die LionNet Verknüpfung Ihrer Region einsetzen . Die in Klammern befindliche Angabe ist optional, aber auch hier müssten Sie die Angabe "Xxxxxxxxx" durch den Namen Ihrer Region ersetzen. Wenn Sie ein canadischer oder US Club sind, der sich nicht in einer LionNet Verknüpfungs- Region befindet,dann lesen Sie bitte Was ist LionNet? und überlegen Sie, ob Sie nicht selbst eine Verknüpfung werden wollen! Nochmaliger Hinweis: Diese Funktion ist primär für Nordamerika - also Canada und USA gedacht - und kommt für europäische Clubs wohl nicht in Frage
<P><IMG SRC="lionnet_logo-small.gif" HEIGHT=28 WIDTH=128
ALIGN=ABSBOTTOM><B><FONT
SIZE=+1> <U>National</U></FONT></B>
<B><FONT COLOR="#FF0000"><FONT
SIZE=-1>(für LionNet Verknüpfungen in Ihrem Land)
</FONT></FONT></B></P>
<!-- Link zu LionNet International - OPTIONAL -->
<P><A HREF="http://www.LionNet.com"><IMG SRC="lionnet_logo-small.gif" BORDER=0 HEIGHT=37 WIDTH=170 ALIGN=ABSBOTTOM></A><B><FONT SIZE=+2> <A HREF="http://www.LionNet.com">International</A> </FONT><FONT COLOR="#FF0000"><FONT SIZE=-1>(Links zu on-line Lions Clubs weltweit!)</FONT></FONT></B></P>
Oft führen lokale Clubs andere on-line Clubs ihrer Zone an und dazu einen Link zur LionNet Verknüpfung der ersten Ebene. Diese Verknüpfung wiederum führt zur LioNet Verknüpfung der nächst höheren Eben und so weiter. Beachtet man diese Vorgehensweise, so wird ein Durcheinander oder ein Wirrwarr hinsichtlich aller anderen Webseiten vermieden. Wenn Sie also alle LionNet Verknüpfungen hier einbauen wollen, so sollten Sie diese stufenförmige Struktur wählen, um Klarheit und Übersichtlichkeit sicherzustellen. Nochmaliger Hinweis: Diese Funktion ist primär für Nordamerika - also Canada und USA gedacht - und kommt für europäische Clubs wohl nicht in Frage
<!-- Link zu LCI - auf Ihrer Hauptseite oder der Seite mit den Links zu allen Clubs -->
<P><A HREF="http://www.LionsClubs.org"><IMG
SRC="lci_button.jpg" BORDER=0 HEIGHT=40 WIDTH=212
ALIGN=ABSCENTER></A> <B><FONT SIZE=+1><A
HREF="http://www.LionsClubs.org">Lions Clubs International</A>
</FONT><FONT COLOR="#FF0000"><FONT
SIZE=-1>(Lions
Zentrale)</FONT></FONT></B></P>
</UL>
</UL>
Eine Vielzahl an Lions Logos steht Ihnen zur Verfügung. Da Ihr Club eine offizielle Lions Organisation darstellt, sind Sie automatisch berechtigt diese herunterzuladen und auch all diejenigen zu verwenden, die Sie auf anderen Lions Seiten sehen. Sehen Sie auch in das LionNet Bildarchiv rein, wo Sie eine representative Auswahl an Lions Logos vorfinden.
| Und hier sehen Sie, was wir mit den obigen Eingaben gestaltet haben. |
|
<!--- Schlussabsatz mit e-mail zum Webmaster --->
<P><HR WIDTH="500"></P>
- <CENTER><P><IMG SRC="flag_array.gif" HEIGHT=168
WIDTH=350></P></CENTER>
<!-- vor dem Text kann auch eine Grafik eingefügt werden - beides würde über einen "mailto" Link verfügen-->
<CENTER><P><B><U><FONT SIZE=-1>Bitte mailen Sie uns
Ihre Fragen oder Anregungen!
</FONT></U></B></P></CENTER>
<P><HR WIDTH="500"></P>
</BODY>
</HTML>
Grafiken und Symbole für e-mail Links finden Sie auf zahlreichen Clipart Webseite und sind üblicherweise für persönliche oder gemeinnützige Zwecke kostenlos verwendbar. Ihr E-mail Link sollte wie folgt aufgebaut sein <A HREF="mailto:name@server.ext">.
| Und hier sehen Sie, was wir mit den obigen Eingaben gestaltet haben. |
Bitte mailen Sie uns Ihre Fragen oder Anregungen!
|
