Back to LionNet Annotated HTML guide

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 -->

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 -->

This is what the code above produces.

Federation City Lions Club
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 -->

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.

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.

    • When: 2nd & 4th Wednesday - 18:30

    • Where: Starfleet Academy Lounge

<!-- section on officers and contact information -->

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.

    • King Lion: James T. Kirk home: xxx-xxxx; office: xxx-xxxx; e-mail:
    • 1st Vice President: Spock home: xxx-xxxx; office: xxx-xxxx; e-mail:
    • Secretary: Nyota Uhura home: xxx-xxxx; office: xxx-xxxx; e-mail:
    • Treasurer: Montgomery Scott home: xxx-xxxx; office: xxx-xxxx; e-mail:
    • Membership Chairman:Hikaru Sulu home: xxx-xxxx; office: xxx-xxxx; e-mail:

<!-- section on links -->

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 -->

<!-- link to LionNet International - OPTIONAL -->

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 -->

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.

<!--- 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 -->

<!--- end of page --->

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

B a c k  t o