Support the troops!

Dedicated to the members of the United States Armed Forces,

past, present and future

The left-side menu column contains buttons linking to United States Armed Forces websites and to Soldiers' Angels, an organisation dedicated to supporting our troops. This page will show how to add these buttons or banners to your website.

All of the examples shown will be explained in detail; even a "newbie" website builder will be able to include these banners on his or her website. Experienced website developers, of course, can skip the explanations and just copy the code and graphics to their own systems.

First, we need to define a few basics.

For our purposes, the terms "banner" and "button" are used interchangeably. A button is simply a banner enclosed in a link; the list of standard links is shown at the bottom of this page.
All code examples will be presented in a scrollable box. You can highlight this text, copy it (and the graphics files) to your own system, and use it as is, replacing the [Your directory here] tag with the appropriate path on your system.
All banners are based on the HTML TABLE element. This was done to make these banners compatible with as many systems as possible. No Javascript is used, nor are external CSS stylesheets. Where styles are required, they are included using the style="" parameter in the HTML element specification.
Table cellspacing (the gap between table cells) is zero. Cellpadding (the gap within the cell between the edges and the contents) is five pixels. Cell borders are eliminated by using the style="border: none" parameter.
All banners are 250 pixels wide overall, with 3 pixel wide borders. The height of the banner is variable, depending on the size of images or the amount of text.
The font used on this site is Ariel san-serif, with a nominal font size of 10 pixels. Default line spacing is 150%. To emulate this on your system, add the following parameter within the TABLE element specification: <table style="font-family: arial, sans-serif; line-height: 150%">
Note that all font size changes in the banners are given in terms relative to the size of the basic font on the page. For example, font size=small specifies an 8-point font, while font size="-1" means "one step smaller than the current font".
Please download graphics files to your own system. Grande might become annoyed if their system starts having to deal with too many offsite calls for these images. You can download these graphics by right-clicking on the image, then following your browser's instructions to save the file to your system. A complete list of images is shown below.
Many of the graphics are in GIF format, with "transparent" backgrounds. If you load the image into a graphics program, the background will appear in a bright color, usually lime green. This is normal.
Most of the graphics are actually larger than shown. The size is controlled by the width specification of the IMG element.
The specifications and parameters shown are not meant to be restrictive. Feel free to experiment to adjust these banners to your own site's style.

Let's get down to it, shall we? The first banner we will examine is what I call the Proud Supporter Banner. This first example includes an extensive discussion of the HTML used. For those who want to "skip ahead", here is a short menu to the other sections of this page:

Proud Supporter Banner

This banner highlights the flag of the United States, the official POW/MIA flag, and the flags of all five of the United States Armed Forces. Each flag is a link to an appropriate website.


	Proud supporter of our Armed Forces
Click on flag to go to the service home page


	Proud supporter of our Armed Forces
Click on flag to go to the service home page

<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#cccccc" bgcolor="#cccccc" background="[Your directory here]/gray.jpg" style="font-weight: bold; color: black"><tr align=center>
<td style="border: none" colspan=3>
<a style="background: transparent" href="http://www.firstgov.gov/" target=_parent><img src="[Your directory here]/us-an.gif" alt="Animated United States flag" width=75 border=0 title="United States Official Web Portal"></a></td></tr>
<tr align=center><td style="border: none" width="25%">
<a style="background: transparent" href="http://www.dtic.mil/dpmo/" target=_parent><img src="[Your directory here]/us-powmia-an.gif" alt="animated POW/MIA flag" width=50 border=0 title="Defense Prisoner of War/Missing Personnel Office"></a><br>
<a style="background: transparent" href="http://www.af.mil/" target=_parent><img src="[Your directory here]/us-af-an.gif" alt="animated United States Air Force flag" width=50 border=0 title="United States Air Force Official home page"></a><br>
<a style="background: transparent" href="http://www.army.mil/" target=_parent><img src="[Your directory here]/us-army-an.gif" alt="animated United States Army flag" width=50 border=0 title="United States Army Official home page"></a><br>
</td>
<td style="border: none" width="50%"><font size="+1">Proud supporter of our Armed Forces</font></td>
<td style="border: none" width="25%">
<a style="background: transparent" href="http://www.uscg.mil/" target=_parent><img src="[Your directory here]/us-cg-an.gif" alt="animated United States Coast Guard flag" width=50 border=0 title="United States Coast Guard Official home page"></a><br>
<a style="background: transparent" href="http://www.usmc.mil/" target=_parent><img src="[Your directory here]/us-mc-an.gif" alt="animated United States Marine Corps flag" width=50 border=0 title="United States Marine Corps Official home page"></a><br>
<a style="background: transparent" href="http://www.navy.mil/" target=_parent><img src="[Your directory here]/us-navy-an.gif" alt="animated United States Navy flag" width=50 border=0 title="United States Navy Official home page"></a>
</td></tr>
<tr><td colspan=3 style="font-size: x-small; text-align: center; border: none">Click on flag to go to the service home page</td></tr></table>

Now, let's examine this code line by line. Note that these explanations will also apply to subsequent examples, and will not be repeated. For more detailed explanations, the Web Design Group on-line tutorial site is recommended, as is Big Nose Bird. (Note: This section is in a scrollable window.)

<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#cccccc" bgcolor="#cccccc" background="[Your directory here]/gray.jpg" style="font-weight: bold; color: black">

This line indicates that the element is an HTML TABLE, or grid, 250 pixels wide (width=250). There is no gap between the cells (cellspacing=0), but there is five pixels of "padding" inside each cell (cellpadding=5). The medium gray (bordercolor="#cccccc") border is three pixels wide (border=3). The background of the table is a pebbled gray texture (background="[Your directory here]/gray.jpg"), or an even medium gray (bgcolor="#cccccc") in the event that the image does not load (The second example above shows this). Any text within the table will be bold black (style="font-weight: bold; color: black").

<tr align=center>

This indicates that the contents of each cell in the first row (tr, for table row) should be centered horizontally.

<td style="border: none" colspan=3>

The first row of cells is actually a single cell extending the entire width of the table (colspan=3). There are no borders on this cell (style="border: none").

<a style="background: transparent" href="http://www.firstgov.gov/" target=_parent><img src="[Your directory here]/us-an.gif" alt="Animated United States flag" width=75 border=0 title="United States Official Web Portal"></a>

This first row/cell contains an animated United States flag (img src="[Your directory here]/us-an.gif") that is 75 pixels wide (width=75) with no border around the image (border=0 - the HTML default is to put a two-pixel border around an image used as a link). The image serves as a link (a href=) to the United States Official Web Portal ("http://www.firstgov.gov/"), which will open in the current full browser window (target=_parent) rather than within the current frame (if any) or in a new tab or new window. The link will not be highlighted when selected (style="background: transparent"). The ALT string will be displayed if the image does not load; the TITLE string appears as a "tool-tip" when the image is selected.

</td></tr>

These tags close the cell (/td) and the row (/tr). Every HTML element that is opened must have a corresponding closing tag.

<tr align=center>

The second row will also contain centered content in each cell.

<td style="border: none" width="25%">

The first cell of the second row will be one-quarter the width of the table, and will not have borders.

<a style="background: transparent" href="http://www.dtic.mil/dpmo/" target=_parent><img src="[Your directory here]/us-powmia-an.gif" alt="animated POW/MIA flag" width=50 border=0 title="Defense Prisoner of War/Missing Personnel Office"></a><br>

Like the United States flag above, the POW/MIA flag is a link to the Department of Defense Prisoner of War/Missing Personnel Office. The line break (br) acts like a word processor's or typewriter's carriage return, beginning another line of content.

<a style="background: transparent" href="http://www.af.mil/" target=_parent><img src="[Your directory here]/us-af-an.gif" alt="animated United States Air Force flag" width=50 border=0 title="United States Air Force Official home page"></a><br>

The U. S. Air Force flag links to the Air Force's official home page.

<a style="background: transparent" href="http://www.army.mil/" target=_parent><img src="[Your directory here]/us-army-an.gif" alt="animated United States Army flag" width=50 border=0 title="United States Army Official home page"></a><br></td>

The U. S. Army flag links to the Army's official home page. The table cell is closed.

<td style="border: none" width="50%">

The middle cell on this row is one-half the width of the table.

<font size="+1">Proud supporter of our Armed Forces</font></td>

The text in this cell is larger than normal (<font size="+1">). Note that the FONT tag, like all other element tags, is closed after the content affected.

<td style="border: none" width="25%">

Another one-quarter-width cell.

<a style="background: transparent" href="http://www.uscg.mil/" target=_parent><img src="[Your directory here]/us-cg-an.gif" alt="animated United States Coast Guard flag" width=50 border=0 title="United States Coast Guard Official home page"></a></td></tr>

<a style="background: transparent" href="http://www.usmc.mil/" target=_parent><img src="[Your directory here]/us-mc-an.gif" alt="animated United States Marine Corps flag" width=50 border=0 title="United States Marine Corps Official home page"></a><br>

<a style="background: transparent" href="http://www.navy.mil/" target=_parent><img src="[Your directory here]/us-navy-an.gif" alt="animated United States Navy flag" width=50 border=0 title="United States Navy Official home page"></a></td></tr>

These three lines link, in turn, to the official home pages of the U. S. Coast Guard, the U. S. Marine Corps and the U. S. Navy. The cell and the row are then closed.

<tr><td colspan=3 style="font-size: x-small; text-align: center; border: none">Click on flag to go to the service home page

The third row, consisting of a single cell, advises the visitor that the flags above are links. The text is smaller than normal (font-size: x-small). In this case, the centering is handled within the table cell element (text-align: center), rather than the table row (tr).

</td></tr></table>

The last cell, the last row, and the table itself are closed.

There, that wasn't so hard, was it? Variations could include replacing the animated flags with service seals or logos, for example, or - by some reworking of the TABLE code, placing each image in an individual table cell and using appropriate images or colors for background. Additional images - seals, logos, etc. - are available at the bottom of this page.

Individual Service Banners

Alternatively, a separate banner could be used for each service, or if only one service is to be displayed. These individial banners enclose an animated service flag, a graphic background indicative of the service, and complementary color selections for borders and text. They will be presented without notes, since all of the elements and specifications have been described above.

United States Air Force

United States
Air Force

<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#0000dd" bgcolor="#99ccff" background="[Your directory here]/usaf.jpg" style="font-weight: bold"> <tr align=center><td style="border: none" width="25%"> <img src="[Your directory here]/us-af-an.gif" alt="animated United States Air Force flag" width=50 border=0> </td><td style="border: none"> <font color="#0000dd" size="+1">United States<br>Air Force</font> </td></tr></table>

United States Army

<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#ffd700" bgcolor="#78866b" background="[Your directory here]/army.jpg" style="font-weight: bold"> <tr align=center><td style="border: none" width="25%"> <img src="[Your directory here]/us-army-an.gif" alt="animated United States Army flag" width=50 border=0> </td><td style="border: none"> <font color="#ffd700" size="+1">United States Army</font> </td></tr></table>

United States Coast Guard

United States
Coast Guard

<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#000000" bgcolor="#e1e1ff" background="[Your directory here]/uscg.jpg" style="font-weight: bold"> <tr align=center><td style="border: none" width="25%"> <img src="[Your directory here]/us-cg-an.gif" alt="animated United States Coast Guard flag" width=50 border=0> </td><td style="border: none"> <font color="#000000" size="+1">United States<br>Coast Guard</font> </td></tr></table>

United States Marine Corps

United States
Marine Corps

<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#660000" bgcolor="#acb78e" background="[Your directory here]/usmc.jpg" style="font-weight: bold"> <tr align=center><td style="border: none" width="25%"> <img src="[Your directory here]/us-mc-an.gif" alt="animated United States Marine Corps flag" width=50 border=0> </td><td style="border: none"> <font color="#660000" size="+1">United States<br>Marine Corps</font> </td></tr></table>

United States Navy

<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#333333" bgcolor="#9999ff" background="[Your directory here]/navy.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="25%">
<img src="[Your directory here]/us-navy-an.gif" alt="animated United States Navy flag" width=50 border=0>
</td>
<td style="border: none">
<font color="#333333" size="+1">United States Navy</font>
</td>
</tr>
</table>

Variations on a theme

This group of banners shows the variations possible with the standard U. S. Navy banner. These examples can be modified for the other services by making the appropriate changes to the HTML code examples shown above. The additional graphics are listed below.

Banner without background graphic

United States Navy

<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#333333" bgcolor="#9999ff" style="font-weight: bold"> <tr align=center><td style="border: none" width="25%"> <img src="[Your directory here]/us-navy-an.gif" alt="animated United States Navy flag" width=50 border=0> </td><td style="border: none"> <font color="#333333" size="+1">United States Navy</font> </td></tr></table>

Basic banner with alternate images

Static service flag

United States Navy

<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#333333" bgcolor="#9999ff" background="[Your directory here]/navy.jpg" style="font-weight: bold"> <tr align=center><td style="border: none" width="25%"> <img src="[Your directory here]/Flag-Navy-100px.gif" alt="United States Navy flag" width=50 border=0> </td><td style="border: none"> <font color="#333333" size="+1">United States Navy</font> </td></tr></table>

Service logo

United States Navy

<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#333333" bgcolor="#9999ff" background="[Your directory here]/navy.jpg" style="font-weight: bold"> <tr align=center><td style="border: none" width="25%"> <img src="[Your directory here]/Logo-Navy-125px.gif" alt="United States Navy logo" width=50 border=0> </td><td style="border: none"> <font color="#333333" size="+1">United States Navy</font> </td></tr></table>

Service seal

United States Navy

<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#333333" bgcolor="#9999ff" background="[Your directory here]/navy.jpg" style="font-weight: bold"> <tr align=center><td style="border: none" width="25%"> <img src="[Your directory here]/Seal-Navy-030px.png" alt="United States Navy seal" border=0> </td><td style="border: none"> <font color="#333333" size="+1">United States Navy</font> </td></tr></table>

Adding a link

Adding a link is, as mentioned elsewhere, a simple matter of enclosing the banner with the appropriate link code. This example of the basic Navy banner has been linked to the U. S. Navy home page; note that this does not change the appearance of the banner at all.

United States Navy

<a href="http://www.navy.mil/" target=_parent>
<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#333333" bgcolor="#9999ff" background="[Your directory here]/navy.jpg" style="font-weight: bold"> <tr align=center><td style="border: none" width="25%"> <img src="[Your directory here]/us-navy-an.gif" alt="animated United States Navy flag" width=50 border=0> </td><td style="border: none"> <font color="#333333" size="+1">United States Navy</font> </td></tr></table></a>

Note: The borders of the buttons in the navigation column at left will turn gold when selected; this option does not apply to the examples on this page since it requires a modification of the banner code and the use of external style sheets.

Narrow version for sidebars

This narrow version is suitable for sidebars. The only changes are reducing the WIDTH specification of the TABLE element, moving the table cells from side-by-side to over-and-under, and adding some line breaks.

United
States
Navy

<a href="http://www.navy.mil/" target=_parent> <table width=100 cellspacing=0 cellpadding=5 border=3 bordercolor="#333333" bgcolor="#9999ff" background="[Your directory here]/navy.jpg" style="font-weight: bold"> <tr align=center><td style="border: none" width="100%"> <img src="[Your directory here]/us-navy-an.gif" alt="animated United States Navy flag" width=50 border=0> </td></tr> <tr align=center><td style="border: none"> <font color="#333333" size="+1">United<br>States<br>Navy</font> </td></tr></table></a>

Immediately to the left, below the regular navigation menu, you can see an two example sidebars using modifications of the basic banners. These sidebars are 125 pixels wide, consist of a "stack" of single-cell banners, and include every link listed below, as well as most of the graphics.

Code for the example sidebar

<a href="http://www.firstgov.gov/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor=red bgcolor=red style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/us-an.gif" alt="animated United States flag" width=75 border=0><br>
<font color="#ffffff"><font size="+2">United States<br>of America</font><br>
Official Web Portal</font>
</td></tr></table></a>

<a href="http://www.defenselink.mil/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor=white bgcolor=white style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Seal-Department_of_Defense-150px.png" alt="Department of Defense seal" width=75 border=0><br>
<font color="#000000"><font size="+1">United States<br>Department<br>of Defense</font><br>
Official Home Page</font>
</td></tr></table></a>

<a href="http://www.dtic.mil/dpmo/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor=blue bgcolor=blue style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/us-powmia-an.gif" alt="animated POW/MIA flag" width=50 border=0><br>
<font color="#ffffff">Defense Prisoner of War/Missing Personnel Office</font>
</td></tr></table></a>

<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#cccccc" bgcolor="#cccccc" background="[Your directory here]/gray.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Seal-Air_Force-030px.png" alt="United States Air Force seal">
<img src="[Your directory here]/Seal-Army-030px.png" alt="United States Army seal">
<img src="[Your directory here]/Seal-Coast_Guard-030px.png" alt="United States Coast Guard seal">
<br>
<font color="#000000" size="+1">Proud supporter of our Armed Forces</font><br>
<img src="[Your directory here]/Seal-Marine_Corps-030px.png" alt="United States Marine Corps seal">
<img src="[Your directory here]/Seal-Navy-030px.png" alt="United States Navy seal">
</td></tr></table>

<a href="http://www.af.mil/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#0000dd" bgcolor="#99ccff" background="[Your directory here]/usaf.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/us-af-an.gif" alt="animated United States Air Force flag" width=50 border=0><br>
<font color="#0000dd"><font size="+1">United States</font><br>
<font size="+2">Air Force</font></font>
</td></tr></table></a>

<a href="http://www.army.mil/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#ffd700" bgcolor="#78866b" background="[Your directory here]/army.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="25%">
<img src="[Your directory here]/us-army-an.gif" alt="animated United States Army flag" width=50 border=0><br>
<font color="#ffd700"><font size="+1">United States</font><br>
<font size="+2">Army</font></font>
</td></tr></table></a>

<a href="http://www.uscg.mil/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#000000" bgcolor="#e1e1ff" background="[Your directory here]/uscg.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/us-cg-an.gif" alt="animated United States Coast Guard flag" width=50 border=0><br>
<font color="#000000"><font size="+1">United States</font><br>
<font size="+2">Coast Guard</font></font>
</td></tr></table></a>

<a href="http://www.usmc.mil/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#660000" bgcolor="#acb78e" background="[Your directory here]/usmc.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/us-mc-an.gif" alt="animated United States Marine Corps flag" width=50 border=0><br>
<font color="#660000"><font size="+1">United States</font><br>
<font size="+2">Marine Corps</font></font>
</td></tr></table></a>

<a href="http://www.navy.mil/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#333333" bgcolor="#9999ff" background="[Your directory here]/navy.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/us-navy-an.gif" alt="animated United States Navy flag" width=50 border=0><br>
<font color="#333333"><font size="+1">United States</font><br>
<font size="+2">Navy</font></font>
</td></tr></table></a>

<a href="http://soldiersangels.org/heroes/index.php">
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#ffd700" bgcolor="#000066" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/sa-logo.gif" alt="Soldiers Angels logo" width=50 border=0><br>
<font color="#ffffff" size="+2">Soldiers' Angels</font><br>
<i><font color="#ffffff">"May No Soldier Go Unloved"</font></i>
</td></tr></table></a>

<a href="http://soldiersangels.org/index.php?page=project-valour-it">
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#0000aa" bgcolor="#cccccc" background="[Your directory here]/gray.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/sa-valour-logo.gif" alt="Project Valour-IT logo" width=60 border=0><br>
<font color="#0000aa" size="+2">Project Valour-IT</font><br>
<i><font color="#0000aa">Help us help our troops</font></i>
</td></tr></table></a>

<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#cccccc" bgcolor="#cccccc" background="[Your directory here]/gray.jpg" style="font-weight: bold; color: #000000">
<tr align=center>
<td style="border: none;" width="100%">
<img src="[Your directory here]/us-an.gif" alt="Animated United States flag" width=50><br>
<font size="+2">Uncle Sam<font><br>
<img src="[Your directory here]/image/unclesam.gif" alt="Uncle Sam Needs You image" width=100 border=0><br>
<font size="+2">Needs</font> <font size="+3"><i>You!</i></font>
</td></tr></table>

<a href="http://www.airforce.com/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#0000dd" bgcolor="#99ccff" background="[Your directory here]/usaf.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Logo-Air_Force-125px.gif" alt="United States Air Force logo" width=50 border=0><br>
<font color="#0000dd"><font size="+1">Air Force</font><br>
<font size="-1">Opportunities</font></font>
</td></tr></table></a>

<a href="http://www.army.mil/recruiting/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#ffd700" bgcolor="#78866b" background="[Your directory here]/army.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Logo-Army-125px.gif" alt="United States Army logo" width=50 border=0><br>
<font color="#ffd700"><font size="+1">Army</font><br>
<font size="-1">Service Opportunities</font></font>
</td></tr></table></a>

<a href="http://www.uscg.mil/top/careers.asp" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#000000" bgcolor="#e1e1ff" background="[Your directory here]/uscg.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Logo-Coast_Guard-125px.gif" alt="United States Coast Guard logo" width=50 border=0><br>
<font color="#000000"><font size="+1">Coast Guard</font><br>
<font size="-1">Jobs That Matter</font></font>
</td></tr></table></a>

<a href="http://www.marines.com/page/usmc.jsp?flashRedirect=true" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#660000" bgcolor="#acb78e" background="[Your directory here]/usmc.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Logo-Marine_Corps_color-125px.gif" alt="United States Marine Corps logo" width=50 border=0><br>
<font color="#660000"><font size="+1">Marine Corps</font><br>
<font size="-1">The Few... The Proud...</font></font>
</td></tr></table></a>

<a href="http://www.navy.com/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#333333" bgcolor="#9999ff" background="[Your directory here]/navy.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Logo-Navy-125px.gif" alt="United States Navy logo" width=50 border=0><br>
<font color="#333333"><font size="+1">Navy</font><br>
<font size="-1">Accelerate Your Life</font></font>
</td></tr></table></a>

Code for smaller sidebar

<a href="http://www.firstgov.gov/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor=red bgcolor=red style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/us-an.gif" alt="animated United States flag" width=60 border=0><br>
<font color="#ffffff"><font size="+1">United States<br>of America</font><br>
<font size="-1">Official Web Portal</font></font>
</td></tr></table></a>

<a href="http://www.defenselink.mil/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor=white bgcolor=white style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Seal-Department_of_Defense-064px.png" alt="Department of Defense seal" border=0><br>
<font color="#000000">United States<br>Department<br>of Defense<br>
<font size="-1">Official Home Page</font></font>
</td></tr></table></a>

<a href="http://www.dtic.mil/dpmo/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor=blue bgcolor=blue style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/us-powmia-an.gif" alt="animated POW/MIA flag" width=40 border=0><br>
<font color="#ffffff" size="-1">Defense Prisoner of War/Missing Personnel Office</font>
</td></tr></table></a>

<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#cccccc" bgcolor="#cccccc" background="[Your directory here]/gray.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Seal-Air_Force-030px.png" alt="United States Air Force seal">
<img src="[Your directory here]/Seal-Army-030px.png" alt="United States Army seal">
<img src="[Your directory here]/Seal-Coast_Guard-030px.png" alt="United States Coast Guard seal">
<br>
<font color="#000000">Proud supporter of our Armed Forces</font><br>
<img src="[Your directory here]/Seal-Marine_Corps-030px.png" alt="United States Marine Corps seal">
<img src="[Your directory here]/Seal-Navy-030px.png" alt="United States Navy seal">
</td></tr></table>

<a href="http://www.af.mil/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#0000dd" bgcolor="#99ccff" background="[Your directory here]/usaf.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/us-af-an.gif" alt="animated United States Air Force flag" width=40 border=0><br>
<font color="#0000dd">United States<br>
<font size="+1">Air Force</font></font>
</td></tr></table></a>

<a href="http://www.army.mil/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#ffd700" bgcolor="#78866b" background="[Your directory here]/army.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="25%">
<img src="[Your directory here]/us-army-an.gif" alt="animated United States Army flag" width=40 border=0><br>
<font color="#ffd700">United States<br>
<font size="+1">Army</font></font>
</td></tr></table></a>

<a href="http://www.uscg.mil/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#000000" bgcolor="#e1e1ff" background="[Your directory here]/uscg.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/us-cg-an.gif" alt="animated United States Coast Guard flag" width=40 border=0><br>
<font color="#000000">United States<br>
<font size="+1">Coast Guard</font></font>
</td></tr></table></a>

<a href="http://www.usmc.mil/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#660000" bgcolor="#acb78e" background="[Your directory here]/usmc.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/us-mc-an.gif" alt="animated United States Marine Corps flag" width=40 border=0><br>
<font color="#660000">United States<br>
<font size="+1">Marine Corps</font></font>
</td></tr></table></a>

<a href="http://www.navy.mil/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#333333" bgcolor="#9999ff" background="[Your directory here]/navy.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/us-navy-an.gif" alt="animated United States Navy flag" width=40 border=0><br>
<font color="#333333">United States<br>
<font size="+1">Navy</font></font>
</td></tr></table></a>

<a href="http://soldiersangels.org/heroes/index.php">
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#ffd700" bgcolor="#000066" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/sa-logo.gif" alt="Soldiers Angels logo" width=40 border=0><br>
<font color="#ffffff" size="+1">Soldiers' Angels</font><br>
<i><font color="#ffffff" size="-1">"May No Soldier Go Unloved"</font></i>
</td></tr></table></a>

<a href="http://soldiersangels.org/index.php?page=project-valour-it">
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#0000aa" bgcolor="#cccccc" background="[Your directory here]/gray.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/sa-valour-logo.gif" alt="Project Valour-IT logo" width=45 border=0><br>
<font color="#0000aa" size="+1">Project Valour-IT</font><br>
<i><font color="#0000aa" size="-1">Help us help our troops</font></i>
</td></tr></table></a>

<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#cccccc" bgcolor="#cccccc" background="[Your directory here]/gray.jpg" style="font-weight: bold; color: #000000">
<tr align=center>
<td style="border: none;" width="100%">
<img src="[Your directory here]/us-an.gif" alt="Animated United States flag" width=40><br>
<font size="+1">Uncle Sam<font><br>
<img src="[Your directory here]/image/unclesam.gif" alt="Uncle Sam Needs You image" width=80 border=0><br>
<font size="+1">Needs</font> <font size="+2"><i>You!</i></font>
</td></tr></table>

<a href="http://www.airforce.com/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#0000dd" bgcolor="#99ccff" background="[Your directory here]/usaf.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Logo-Air_Force-125px.gif" alt="United States Air Force logo" width=40 border=0><br>
<font color="#0000dd">Air Force<br>
<font size="-1">Opportunities</font></font>
</td></tr></table></a>

<a href="http://www.army.mil/recruiting/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#ffd700" bgcolor="#78866b" background="[Your directory here]/army.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Logo-Army-125px.gif" alt="United States Army logo" width=40 border=0><br>
<font color="#ffd700">Army<br>
<font size="-1">Service Opportunities</font></font>
</td></tr></table></a>

<a href="http://www.uscg.mil/top/careers.asp" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#000000" bgcolor="#e1e1ff" background="[Your directory here]/uscg.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Logo-Coast_Guard-125px.gif" alt="United States Coast Guard logo" width=40 border=0><br>
<font color="#000000">Coast Guard<br>
<font size="-1">Jobs That Matter</font></font>
</td></tr></table></a>

<a href="http://www.marines.com/page/usmc.jsp?flashRedirect=true" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#660000" bgcolor="#acb78e" background="[Your directory here]/usmc.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Logo-Marine_Corps_color-125px.gif" alt="United States Marine Corps logo" width=40 border=0><br>
<font color="#660000">Marine Corps<br>
<font size="-1">The Few... The Proud...</font></font>
</td></tr></table></a>

<a href="http://www.navy.com/" target=_parent>
<table width=125 cellspacing=0 cellpadding=5 border=3 bordercolor="#333333" bgcolor="#9999ff" background="[Your directory here]/navy.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="100%">
<img src="[Your directory here]/Logo-Navy-125px.gif" alt="United States Navy logo" width=40 border=0><br>
<font color="#333333">Navy<br>
<font size="-1">Accelerate Your Life</font></font>
</td></tr></table></a>

Recruiting Stack

This group of banners is intended for use by those contemplating a term of service or a military career. The included links are to the various services' official recruiting sites. The header block is a variation of the classic recruiting posters used during the First and Second World Wars; it contains no links. The "Uncle Sam" image is not included in the graphics list below; right-click on the image here and save it to your system. The code for this group is presented without comment.

Uncle Sam

Needs You!

Air Force
Opportunities

Army
Service Opportunities

Coast Guard
Jobs That Matter

Marine Corps
The Few... The Proud...

Navy
Accelerate Your Life

<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#cccccc" bgcolor="#cccccc" background="[Your directory here]/gray.jpg" style="font-weight: bold; color: #000000">
<tr align=center>
<td style="border: none;" width="25%">
<img src="[Your directory here]/us-an.gif" alt="Animated United States flag" width=50 hspace=5>
<img src="[Your directory here]/us-an.gif" alt="Animated United States flag" width=50 hspace=5>
<img src="[Your directory here]/us-an.gif" alt="Animated United States flag" width=50 hspace=5>
<br><font size="+2">Uncle Sam<font><br>
<img src="[Your directory here]/image/unclesam.gif" alt="Uncle Sam Needs You image" width=125 border=0><br>
<font size="+2">Needs</font>
<font size="+3"><i>You!</i></font>
</td>
</tr>
</table>

<a href="http://www.airforce.com/" target=_parent>
<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#0000dd" bgcolor="#99ccff" background="[Your directory here]/usaf.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="25%">
<img src="[Your directory here]/us-af-an.gif" alt="animated United States Air Force flag" width=50 border=0>
</td>
<td style="border: none">
<font color="#0000dd">
<font size="+1">Air Force</font><br>
<font size="-1">Opportunities</font>
</font>
</td>
</tr>
</table>
</a>

<a href="http://www.army.mil/recruiting/" target=_parent>
<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#ffd700" bgcolor="#78866b" background="[Your directory here]/army.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="25%">
<img src="[Your directory here]/us-army-an.gif" alt="animated United States Army flag" width=50 border=0>
</td>
<td style="border: none">
<font color="#ffd700">
<font size="+1">Army</font><br>
<font size="-1">Service Opportunities</font>
</font>
</td>
</tr>
</table>
</a>

<a href="http://www.uscg.mil/top/careers.asp" target=_parent>
<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#000000" bgcolor="#e1e1ff" background="[Your directory here]/uscg.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="25%">
<img src="[Your directory here]/us-cg-an.gif" alt="animated United States Coast Guard flag" width=50 border=0>
</td>
<td style="border: none">
<font color="#000000">
<font size="+1">Coast Guard</font><br>
<font size="-1">Jobs That Matter</font>
</font>
</td>
</tr>
</table>
</a>
<a href="http://www.marines.com/page/usmc.jsp?flashRedirect=true" target=_parent>
<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#660000" bgcolor="#acb78e" background="[Your directory here]/usmc.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="25%">
<img src="[Your directory here]/us-mc-an.gif" alt="animated United States Marine Corps flag" width=50 border=0>
</td>
<td style="border: none">
<font color="#660000">
<font size="+1">Marine Corps</font><br>
<font size="-1">The Few... The Proud...</font>
</font>
</td>
</tr>
</table>
</a>

<a href="http://www.navy.com/" target=_parent>
<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#333333" bgcolor="#9999ff" background="[Your directory here]/navy.jpg" style="font-weight: bold">
<tr align=center>
<td style="border: none" width="25%">
<img src="[Your directory here]/us-navy-an.gif" alt="animated United States Navy flag" width=50 border=0>
</td>
<td style="border: none">
<font color="#333333">
<font size="+1">Navy</font><br>
<font size="-1">Accelerate Your Life</font>
</font>
</td>
</tr>
</table>
</a>

The "Uncle Sam" image is a public-domain image I found that has been re-colored and enhanced by "Rigpa" from Gulf Coast Pundit.

Soldiers' Angels and Project Valour-IT

Soldiers' Angels is a volunteer group that raises funds to help our soldiers, sailors, airmen and marines who are deployed to combat areas. The funds raised are used to purchase items such as Kevlar armor for vehicles, body armor and individual equipment for troops, and personal care and morale items for individuals and units. One hundred percent of the funds raised go to the troops; all fundraising expenses are borne by the volunteers. Even if you do not decide to use the service banners already presented, please consider including Soldiers' Angels on your website or blog. A donation would also be appreciated...

	Soldiers' Angels
"May No Soldier Go Unloved"

<a href="http://soldiersangels.org/heroes/index.php">
<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#ffd700" bgcolor="#000066" style="font-weight: bold">
<tr align=center><td style="border: none" width="25%">
<img src="[Your directory here]/sa-logo.gif" alt="Soldiers Angels logo" width=50 border=0>
</td><td style="border: none">
<font color="#ffffff" size="+2">Soldiers' Angels</font>
<tr align=center><td style="border: none" colspan=2><i>
<font color="#ffffff">"May No Soldier Go Unloved"</font>
</i></td></tr></table></a>

One of the programs of Soldiers' Angels is Project Valour-IT; Voice-Activated Laptops for OUR Injured Troops. Project Valour-IT makes available laptop computers fitted with voice-recognition equipment and software to wounded troops whose injuries do not allow them to operate televisions, radios or even pen and paper. This allows these soldiers to keep up with news and entertainment, browse the web, and write letters to friends and loved ones during their treatment and convalescence. Such ability can be instrumental in aiding in their recovery. Again, please add Project Valour-IT to your website or blog, and, yes, I'm going to ask that you consider a donation. Both of the banners presented here include live links to Soldiers' Angels or Project Valour-IT. Check them out.

	Project Valour-IT
Help us help our troops

<a href="http://soldiersangels.org/index.php?page=project-valour-it">
<table width=250 cellspacing=0 cellpadding=5 border=3 bordercolor="#0000aa" bgcolor="#cccccc" background="[Your directory here]/gray.jpg" style="font-weight: bold">
<tr align=center><td style="border: none" width="25%">
<img src="[Your directory here]/sa-valour-logo.gif" alt="Project Valour-IT logo" width=60 border=0>
</td><td style="border: none">
<font color="#0000aa" size="+2">Project Valour-IT</font>
</td></tr><tr align=center><td style="border: none" colspan=2><i>
<font color="#0000aa">Help us help our troops</font>
</i></td></tr></table></a>

Images

These images were collected from various locations around the Web. This collection includes many that have not been used in the examples above, particularly images representing the Reserve and National Guard components. Right-click on either the image or the image description (30px png) and save to your own system. Unless otherwise specified, the images displayed have been reduced in size via the HTML width specification. Image descriptions will give only the width of the image.

Graphics

Service/ Organization	Animated Flag (actual size)	Static Flag	Seal or Shield	Logo	Medallion
United States
United States	68px gif	100px jpg	64px png 600px png	125px gif
Department of Defense		64px png 150px png 600px png
National Guard		120px png 180px png 600px png	64px png 150px png 600px png
POW/MIA	68px gif	95px jpg
United States Air Force
Air Force	68px gif	100px jpg	30px png 64px png 150px png 356px png	50px png 200px jpg 125px gif (no text)	377px gif
Air Force Reserve		25px png 120px png 200px png 608px png
Air National Guard		25px png 120px png 200px png 616px png	340px jpg 340px jpg (less text)
United States Army
Army	68px gif	100px gif	30px png 64px png 150px png 600px png	90px png 154px png 125px gif (no text)	370px gif
Army Reserve		25px png 150px png 600px png
Army National Guard		303px gif
United States Coast Guard
Coast Guard	68px gif	100px gif 500px png	30px png 150px png 436px png	75px png 125px gif 800px gif	377px gif
		75px png 800px png	Coast Guard Ensign Coast Guard ships fly the Coast Guard Ensign in place of or in addition to the United States flag.
Coast Guard Reserve		25px png 120px png 588px png
Coast Guard Auxiliary		100px png 576px png

Service/ Organization	Animated Flag (actual size)	Static Flag	Seal or Shield	Logo	Medallion
United States Marine Corps
Marine Corps	68px gif	100px gif	30px png 150px png 433px png	125px gif (color) 50px png (b/w) 109px png (b/w) 400px png (b/w)	377px gif
Marine Corps Reserve		25px jpg 150px jpg 602px jpg
United States Navy
Navy	68px gif	100px gif	30px png 150px png 600px png	125px gif (unofficial)	371px gif
		180px png 800px png	Jack of the United States The Jack of the United States is flown at the bow of all U. S. government ships (Navy, Coast Guard, NOAA, etc.) The national flag or service ensign is flown at the stern while anchored or tied up, and moved to the main mast when the ship gets under way.
		180px png 800px png	First Navy Jack Before the terrorist attacks of 9/11, only the ship with the longest active status in the Navy flew the First Navy Jack; all others flew the Jack of the United States. On 11 September 2001, that ship was CV-63 USS Kitty Hawk. On 31 May 2002, the Secretary of the Navy issued instructions that all Navy combat ships would fly the First Jack for the duration of the Global War on Terrorism. Non-combat Navy ships and non-Navy government ships continue to fly the Jack of the United States.
Navy Reserve		25px png 150px png 600px png	120px png 720px png
Flags, seals, shields and logos are trademarks of their respective services Medallions courtesy of Rigpa at Gulf Coast Pundit
Soldiers' Angels
Soldiers' Angels				83px gif
Project Valour-IT				125px gif
Logos are trademarks of Soldiers' Angels

Colors
Service/Organization	Background Image (Reduced size)	Background Color (Hex Code)	Border/text color (Hex code)
Air Force	400px jpg	Sky Blue (#99ccff)	Blue (#0000dd)
Army	400px jpg	Camouflage Green (#78866b)	Gold (#ffd700)
Coast Guard	400px jpg	Lake Blue (#e1e1ff)	Black (#000000)
Marine Corps	350px jpg	Swamp Green (#acb78e)	Rust Red (#660000)
Navy	400px jpg	Sea Blue (#9999ff)	Gray (#333333)
Soldiers' Angels		Dark Blue (#000066)	Border: Gold (#ffd700) Text: White (#ffffff)
Project Valour-IT	64px jpg (actual size)	Gray (#cccccc)	Medium Blue (#0000aa)

Links

Banners can be converted to buttons simply by enclosing the banner code in a link: <a href="[LINK]">[banner code]</a>. The entire banner will be active; clicking anywhere on the banner will activate the link. Simply replace the [LINK] in the code excerpt above with the appropriate URL; some examples are shown below. The [banner code], of course, is the HTML TABLE element.

The URLs in the table below are live; click on the URL to see the page.

Service/Organization		Official Home Page URL	Recruiting/Careers Site URL

	United States Official Web Portal	http://www.firstgov.gov/

	Department of Defense	http://www.defenselink.mil/
	National Guard Bureau	http://www.ngb.army.mil/default.aspx

	Defense Prisoner of War/Missing Personnel Office	http://www.dtic.mil/dpmo/

	United States Air Force	http://www.af.mil/	http://www.airforce.com/
	Air National Guard	http://www.ang.af.mil/
	Air Force Reserve	http://www.afrc.af.mil/

	United States Army	http://www.army.mil/	http://www.army.mil/recruiting/
	Army National Guard	http://www.arng.army.mil/default.aspx	http://www.nationalguard.com/
	United States Army Reserve	http://www.usar.army.mil/arweb/pages/default.aspx

	United States Coast Guard	http://www.uscg.mil/	http://www.uscg.mil/top/careers.asp
	Coast Guard Reserve	http://www.uscg.mil/reserve/

	United States Marine Corps	http://www.usmc.mil/	http://www.marines.com/page/usmc.jsp?flashRedirect=true
	Marine Forces Reserve	http://www.marforres.usmc.mil/	http://www.marforres.usmc.mil/join/Default.asp

	United States Navy	http://www.navy.mil/	http://www.navy.com/
	United States Navy Reserve	http://navyreserve.navy.mil/	http://www.navyreserve.com/

	Soldiers' Angels	http://soldiersangels.org/heroes/index.php
	Project Valour-IT	http://soldiersangels.org/index.php?page=project-valour-it