Google Earth TutorialsPart III – Layouts with Hard Rules and Tables

Hosts – Thomas Cooper, Alice Barr

Networked Learninghttp://www.thenetworkedlearner.com

Networked Learning 2009

Layouts with Hard Rules

• <hr> - places a line on the page• <hr width=“#”> - can be used to adjust it to

different widths.

Networked Learning 2009

Divide elements on page with a hard rule.

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 <img src=http://www.imagefile.jpg width=“#”>

ARKive Endangered Species Example

Basic Table Design

Create fancy layouts using tables.

Networked Learning 2009

Working with Tables

<table> <tr> table row <td> table cell <td> table cell in same row </tr> <td> table cell <td>table cell </tr></table>

Networked Learning 2009

Tables require the following tags: <table>, <tr>, and <td>.

What would this table look like if you drew it out?

Major Table Elements• <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

Not all HTML tags work in Google Earth, as it is based on KML.

Advanced Table 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> <tr colspan=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

Our more advanced table has the following structure.

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

Aligning Objects in a Table Cell

<table><tr><td valign=“type">

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

Networked Learning 2009

Text that does not fill a cell will centered vertically by default.However, you can ensure vertical centering by using the code below.

Vertical Alignment Types

•valign=“top”•valign=“middle”•valign=“bottom”

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

Where to Get Hexadecimal Color Codeshttp://html-color-codes.com/

Networked Learning 2009

Changing Cell Background Color

<table bgcolor=“#hexcode”>

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

Networked Learning 2009

Can be done for the entire table.

Changing Cell Background Color

<table><tr bgcolor=“#hexcode”><td>text </td></tr></table>

Networked Learning 2009

Can be done for one or more rows.

In ARKive example…•<table bgcolor="#color“>•The 2 cells in the first row contain images created in Photoshop and cover the background color that was set in the table tag. •In the second row the background color of the cell has been turned to a gray and overrides the table color.•In the other rows, the cells display the background color set in the table.

Changing Cell Background Color

<table><tr><td bgcolor=“#hexcode”>text

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

Networked Learning 2009

Can be done for a table cell.

Learn More by Viewing the CodeCopy and Paste1. Right click on the layer.2. Choose “Copy”.3. Open NotePad.4. Right click and paste in the code.

Networked Learning 2009

Changing Background and Text Color

<Style><BalloonStyle>

<bgColor>ff669999<bgColor><textColor>ff660000</

textColor></BalloonStyle>

</Style>

Networked Learning 2009

Can’t be done in Google Earth program; must be done in the code.

Directions1. Follow the procedures on

the previous slide for viewing the code.

2. Type CTRL-F to bring up the “Find” command in Notepad.

3. Search for <BalloonStyle>; its usually toward the bottom of the document.

4. Change the hexcode for <bgColor>

5. If its not there, add the tag under <BalloonStyle> as shown to the right.

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.

KML Color Conversionhttp://www.sgrillo.net/kml_color/

Networked Learning 2009