Guide HTML Annoté
Voici maintenant le HTML (Hyper Text Markup Language), langage dans lequel a été écrite la page prototype du Lions Club . Sa syntaxe est expliquée section par section, avec des annotations en rouge italique et des exemples.
<!-- page set-up and formatting -->
<HTML>
<HEAD>
<TITLE>Prototype Lions Club Homepage</TITLE>
</HEAD>
<BODY TEXT="#000099" BGCOLOR="#FFFFFF" LINK="#0000FF"
VLINK="#800080" ALINK="#FF0000">
Les informations sur le texte et la couleur ont été entrées par l’éditeur HTML utilisé pour créer la page. Front Page de Microsoft et Netscape Gold entreront automatiquement les codes alors que vous visualiserez la couleur et la police. Vous pouvez également trouver une page qui vous plaît, la télécharger, l’éditer avec le presse-papiers (Notepad.exe) et copier/coller pour dupliquer certains effets.
<!-- title with Lions logo
and under construction graphic -->
<IMG SRC="we_serve1.gif" HEIGHT=202 WIDTH=221 ALIGN=LEFT><BR>
<CENTER>
<B><FONT SIZE=+4>Federation City Lions Club</FONT></B>
<BR>
<B><FONT SIZE=-1>Pardon our appearance ... <IMG SRC="undercon.gif" HEIGHT=38 WIDTH=38>
we're still building this site !</FONT></B></P>
</CENTER>
| This is what the code above produces. |
Pardon our appearance ...  we're still building this site !
|
Les graphiques peuvent avoir les dimensions que vous voulez. Si vous téléchargez des graphiques clipart ou depuis d’autres Lions Clubs, vous pourrez les ajuster pour qu’ils aillent sur votre page.
<!-- section on meeting information
-->
<P> <HR WIDTH="500"></P>
En dessous, vous trouverez la règle horizontale ajustée à 500 pixels. Elle est très utile, car elle permet de séparer les sections par un simple graphique, toujours le même en principe entre chaque section (comme sur cette page par exemple)
<UL> <DT><B><U><FONT
SIZE=+1>Meetings:</FONT></U></B></DT>
</UL><UL> <UL>
<LI><FONT SIZE=+1><B><FONT COLOR="#C86400">When:</FONT></B>
2nd & 4th Wednesday - 18:30</FONT> <BR></LI>
<LI><FONT SIZE=+1><B><FONT COLOR="#C86400">Where:</FONT></B>
Starfleet Academy Lounge</FONT></LI> </UL> </UL>
Si cela ne demande pas trop de temps de chargement, vous pouez inclure un « map » dans votre site.
| C’est ce que fait le listing précédent. |
|
<!-- section on officers and contact information -->
<P> <HR WIDTH="500"></P>
<UL> <DT><B><FONT SIZE=+1>Officers:</FONT></B></DT>
</UL><UL> <UL>
<LI><B><FONT COLOR="#C86400">King Lion:</FONT><FONT
COLOR="#800080"> James T. Kirk <FONT SIZE=-1>home: xxx-xxxx; office:
xxx-xxxx; e-mail: tiberius@roddenbury.com</FONT></FONT></B></LI>
<LI><B><FONT COLOR="#C86400">1st Vice President:
</FONT><FONT COLOR="#800080">Spock <FONT SIZE=-1>home:
xxx-xxxx; office: xxx-xxxx; e-mail: fascinating@vulcan.org</FONT></FONT></B></LI>
<LI><B><FONT COLOR="#C86400">Secretary: </FONT><FONT
COLOR="#800080">Nyota Uhura <FONT SIZE=-1>home: xxx-xxxx;
office: xxx-xxxx; e-mail: hailing@frequency.net</FONT></FONT></B></LI>
<LI><B><FONT COLOR="#C86400">Treasurer: </FONT><FONT
COLOR="#800080">Montgomery Scott <FONT SIZE=-1>home:
xxx-xxxx; office: xxx-xxxx; e-mail: scotty@engines.com</FONT></FONT></B></LI>
<LI><B><FONT COLOR="#C86400">Membership Chairman:</FONT><FONT
COLOR="#800080">Hikaru Sulu <FONT SIZE=-1>home: xxx-xxxx;
office: xxx-xxxx; e-mail: helm@excelsior.net</FONT></FONT></B></LI>
</UL>
Si vous utilisez ce prototype pour faire votre page, vous substituerez les noms et les contacts par ceux de vos membres, en enlevant le titre si nécessaire. Utilisez Copier/Coller pour ajouter des lignes et des données.
| C’est ce que le code précédent fait |
|
|
<!-- section on links
-->
<P><HR WIDTH="500"></P>
<DT><B><FONT SIZE=+1>Links:</FONT></B></DT>
<UL>
<!-- first level LionNet link
- to State/Province/District nodes - for any Canadian or U.S. club served by a LionNet node
-->
<P><IMG SRC="lionnet_logo-small.gif"
HEIGHT=22 WIDTH=102 ALIGN=ABSBOTTOM><B> <U>State/Province/District</U></B>
<B><FONT COLOR="#FF0000"><FONT
SIZE=-1>(for links to Xxxxxxxxx Lions Clubs on-line)</FONT></FONT></B></P>
| C’est ce que fait le code précédent |
|
Ce lien apparaîtrait sûrement sur chaque node Lionnet des USA ou du Canada. Vous remplacerez le « state/province/district) par le nom de votre node et de votre zone. La secription entre parenthèses est optionnelle mais vous pouvez remplacer les « xxx.. » par le nom de votre zone. . Si vous êtes dans un club qui ne possede pas de node associé , lisez Qu'est ce que LionNet? Et pourquoi pas lancez vous !
<!-- intermediate LionNet link
if appropriate - OPTIONAL -->
<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>(for national LionNet nodes)</FONT></FONT></B></P>
<!-- link to 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>(linking on-line Lions Clubs world-wide)</FONT></FONT></B></P>
Les pages d’un club local listent souvent des liens vers les clubs voisin et vers le node de Lionnet directement au dessus de lui. Cela permet de garder une hiérarchie compréhensible et une organisation dans laquelle il est facile de naviguer. Si vous préférez lister tous les liens LionNet utilisez une présentation arborescente pour clarifier votre page.
<!-- link to LCI - on main page
or links page for all 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 headquarters)</FONT></FONT></B></P>
</UL> </UL>
Il y a beaucoup de logos Lions disponibles. Du moment que vous faites partie d’une organisation Lions, vous pouvez les télécharger et les utiliser. Vous trouverez quelques exemples ici : Images d'archive LionNet
| C’est ce que le code précédent fait. |
|
<!--- closing section with e-mail to webmaster --->
<P><HR WIDTH="500"></P>
-
<CENTER><P><IMG
SRC="flag_array.gif" HEIGHT=168 WIDTH=350></P></CENTER>
<!-- a graphic might be placed before the text - both would include a mailto link -->
<CENTER><P><B><U><FONT
SIZE=-1>We welcome your questions and comments</FONT></U></B></P></CENTER>
<P><HR WIDTH="500"></P>
</BODY>
</HTML>
Des graphiques e-mail peuvent être trouvés dans de nombreux sites gratuits sur le web. Pour créer un lien e-mail, utilisez la syntaxe suivante : <A HREF="mailto:name@server.ext">.
| C’est ce que le code précédent fait |
|
We welcome your questions and comments |
