Here's how the Hyper Text Markup Language (HTML) would look for the prototype Lions Club page, it is explained section by section with annotation in italicized red and with examples.
<!-- 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">
Text and color information were entered by the HTML editor used to create the page. Front Page from Microsoft and Netscape Gold will automatically enter codes as you visually select color and font. You can also find a page you like, download it so you can view it in Notepad and use copy and paste to duplicate the effects.
<!-- 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 ! |
Graphics can be sized to your preference. If you download graphics from clipart files or other Lions Clubs, you may adjust their size to fit your page.
<!-- section on meeting information
-->
<P> <HR WIDTH="500"></P>
The above is a standard horizontal rule adjusted to 500 pixels. It is helpful, both to you and to page visitors, if the sections are separated by a simple graphic. Usually you will use the same graphic between all sections. On this page we have chosen to use the same horizontal rule.
<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>
If it doesn't involve excessive download time, it is very nice to include a simple map to your meeting site.
This is what the code above produces. |
|
<!-- 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>
If you're using the prototype to make your page, you would here substitute the names and contact information of your officers, changing or deleting titles as necessary. If you need to add lines, use copy and paste and then substitute the pertinent data.
This is what the code above produces. |
|
<!-- 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>
This is what the code above produces. |
State/Province/District (for links to Xxxxxxxxx Lions Clubs on-line) |
This link would probably appear on every club in a Canadian or U.S. LionNet node area. You would substitute in the name of the node for your area instead of "State/Province/District". The parenthetical description is optional but again you would replace the "Xxxxxxxxx" with your region's name. If you're in a Canadian or U.S. club that's not in a LionNet node area, please read What Is LionNet? and consider becoming one yourself!
<!-- 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>
Local clubs often list other area clubs on-line and a link to the first level LionNet node. That node in turn lists the next level up and so on. Using this guidline helps keep pages from being cluttered or confusing. If you prefer to list all the LionNet links, it is suggested that you use the graduated sizes to clarify your structure.
<!-- 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>
There are a variety of Lions logos available. Since you are an official Lions organization, you are entitled to download and use any that you see on other Lions pages. See also LionNet's image archive for a representative sampling of Lions logos.
This is what the code above produces. |
National (for national LionNet nodes) International (linking on-line Lions Clubs world-wide) Lions Clubs International (Lions headquarters) |
<!--- closing section with e-mail to webmaster --->
<P><HR WIDTH="500"></P>
<!-- 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>
Graphics for e-mail links can be found at numerous clipart sites and are usually free for personal or non-profit use. Your link for e-mail would be set up like this <A HREF="mailto:name@server.ext">.
This is what the code above produces. |
We welcome your questions and comments |