This document provides instructions for creating layouts and tables in Google Earth using HTML and KML tags. It explains how to divide elements with horizontal rules, create tables with specific widths and borders, add background colors, and style text. Advanced techniques covered include spanning columns and rows, centering content, and changing balloon background colors by editing the KML code directly.

1. Networked Learning http://www.thenetworkedlearner.com Google Earth TutorialsPart III – Layouts with Hard Rules and TablesHosts – Thomas Cooper, Alice Barr Networked Learning 2009

2. Layouts with Hard Rules Divide elements on page with a hard rule. <hr> - places a line on the page <hr width=“#”> - can be used to adjust it to different widths. Networked Learning 2009

3. Creating Hard Rulers in Photoshop Create an image with a width of your placemark and a height of 5 pixels Use the paint bucket to color it. You can also use the gradient tool to create hard rules that contain 2 colors. Upload your hard rule to a photosharing site. Copy and paste the URL Address into an image tag <imgsrc=http://www.imagefile.jpg width=“#”>

4. ARKive Endangered Species Example Create fancy layouts using tables. Basic Table Design Networked Learning 2009

5. Working with Tables Tables require the following tags: <table>, <tr>, and <td>. <table> <tr> table row <td> table cell <td> table cell in same row </tr> <td> table cell <td>table cell </tr> </table> What would this table look like if you drew it out? Networked Learning 2009

6. Major Table Elements Not all HTML tags work in Google Earth, as it is based on KML. <table> - starts and ends a table <width=“#”> determines the width of the table <border=“#”> adds a border around table <cellspacing=“#”> add space between cells <cellpadding=“#”> adds space between text and cell border <bgcolor=“#hexcodenumber”>add color to a table, row or cell <tr> - table row <td> - table cell <colspan=“#”> spans a number of columns <rowspan=“#”> spans a number of rows <valign=“top> foces text and images to the top of a cell Networked Learning 2009

7. Advanced Table Structure Our more advanced table has the following structure. <table width=“400”> <tr> table row <td width=“200”> table cell in first row contains a logo.</td> <td width=“200”> table cell in same row, contains an image of text.</td> <trcolspan=2> <td width=“400”> has text about the species that will span both cells from above row. Use <h2> and <p style=“color:#hexcolornumber”> </td></tr> <tr> <td width=“200”> has 2 paragraphs of text</td> <td width=“200”> has image of endangered species </td></tr> ….bottom half of table discussed on next slide </table> Networked Learning 2009

8. Advanced Table Structure (cont.) <table width=“400”> …top half of table discussed on previous slide <tr> table row <td width=“42”> table cell in first row contains a logo.</td> <td width=“158”> table cell in same row, contains an image of text.</td> <td width=“42”> table cell in first row contains a logo.</td> <td width=“158”> table cell in same row, contains an image of text.</td></tr> <tr> <td width=“42”> icon <td width=“158”>web link <td width=“200” rowspan=“2”>web link and text</td></tr> <tr> <td width=“42”> icon</td> <td width=“158”> weblink</td></tr> </table> Networked Learning 2009

10. valign=“middle”

11. valign=“bottom”Networked Learning 2009

12. Adding Style to Your Text <p> text </p> <p style=“color:#hexcode”> adds color to that text.</p> <font color=“#hexcode”>text </font> <a style=“color:#hexcode”> adds color to the web link text. Networked Learning 2009

13. Where to Get Hexadecimal Color Codeshttp://html-color-codes.com/ Networked Learning 2009

14. Changing Cell Background Color Can be done for the entire table. <table bgcolor=“#hexcode”> <tr> <td>text </td> </tr> </table> Networked Learning 2009

16. The 2 cells in the first row contain images created in Photoshop and cover the background color that was set in the table tag.

17. In the second row the background color of the cell has been turned to a gray and overrides the table color.

18. In the other rows, the cells display the background color set in the table.Networked Learning 2009

19. Changing Cell Background Color Can be done for a table cell. <table> <tr> <td bgcolor=“#hexcode”>text </td> </tr> </table> Networked Learning 2009

20. Learn More by Viewing the Code Copy and Paste Right click on the layer. Choose “Copy”. Open NotePad. Right click and paste in the code. Networked Learning 2009

21. Changing Background and Text Color Can’t be done in Google Earth program; must be done in the code. Directions Follow the procedures on the previous slide for viewing the code. Type CTRL-F to bring up the “Find” command in Notepad. Search for <BalloonStyle>; its usually toward the bottom of the document. Change the hexcode for <bgColor> If its not there, add the tag under <BalloonStyle> as shown to the right. <Style> <BalloonStyle> <bgColor>ff669999<bgColor> <textColor>ff660000</textColor> </BalloonStyle> </Style> NOTE: The balloons in GE uses KML color codes, which are 8 digits, rather than the HTML hexcodes used by tables and fonts, which are 6 digits. You will need to use a KML color converter to match the colors. Networked Learning 2009

22. KML Color Conversionhttp://www.sgrillo.net/kml_color/ Networked Learning 2009