|
|
 This entire tutorial deserves 'one-nerd', so we'll place it here.
In this tutorial we will continue learning about more formating tags. These tags deal with fonts, there sizes, colors, and faces. We'll learn about 'headers', and how to size them. And last, we will learn about how to align text.
If you have questions or comments about this, or other tutorials go to our USER FORUMS and leave your questions.
1. How do we make fonts (text) have a number of different sizes?
2. How do we make fonts (text) that have different colors?
3. How do we change the font faces? As in 'Arial', or 'Times New Roman', ect.
4. So the <font> tag has the 'face', 'size', and 'color' attributes. But can you use more than one of them at a time?
5. In the previous question we altered the font of a whole line of text. Can that altered line be changed further?
6. Are there any 'special cases' involving fonts and the fonts tags? Yes, and they involve the HEADINGS tags.
7. The header tags have an align="" attribute that aligns the headers left, center, or right. Are there any other ways to set alignments?
8. But what if I have a lot of text 'left aligned', and now I need a portion of it to be 'centered' text. How do I do that?
9. A review of what we did, and a look at what is comming up in the NEXT tutorial.
1. How do we make fonts (text) have a number of different sizes.
| |
In Tutorial #6 we learned how to break lines, color items, draw horizontal lines, and add styles to text using FORMATTING RULES. Now we would like change the SIZE and/or the COLOR of text. How? More formatting rules and formatting tags, that's how.
The formatting tag we'll use this time is the
<font> ... </font>
set of tags. Yes, you MUST always use both the start <font> and stop </font> tags when dealing with fonts, or you may get results you don't desire. However, the <font> tag used this way will not actually do anything at all. We must add one, or more ATTRIBUTES to the <font> tag to preform actual formatting.
Lets say we want to set the SIZE of portion of text you have entered. You would do something similar to this...
"We would like to <font size="5">have this text</font> set to a different size".
Which would result in this...
"We would like to have this text set to a different size".
Notice the SIZE="" attribute. This is the one that determines the desired size of the font. Using size="5" sets an ABSOLUTE size. Using something like size="+5" (notice the 'plus' sign) would a RELATIVE size. What's the difference. All the major web browsers have a menu choice that allows you set SET the size the fonts on a web page appear when you view them. Internet Explorer, Netscape (V9), and Firefox all have a "Text Size' choice in the VIEW menu. The Opera browser has a ZOOM command which does the same thing. The point being they all set the RELATIVE font size. Soooo... if you use a <font size="+2"> tag to adjust your font, the result would be PLUS 2 times larger than whatever the 'normal' font size you have chosen.
If however use use a <font size="2"> tag, you have chosen an ABSOLUTE (fixed) font size, and anything you change in the browsers menus will NO EFFECT on your font tags font size. Relative, with a PLUS SIGN, your fonts will scale relative to other adjustments. Absolute, your font setting remain fixed.
But, you say, Google Earth has no such font adjustment setting in its menus. Your right. So witch size="" attribute should you use in GE? I would use the fixed choice (without the plus sign).
| <font size=""> Examples |
|
These tags...
|
Produces...
|
| |
| <font size="1">some text</font> |
some text |
| <font size="2">some text</font> |
some text |
| <font size="3">some text</font> |
some text |
| <font size="4">some text</font> |
some text |
| <font size="5">some text</font> |
some text |
| <font size="6">some text</font> |
some text |
| <font size="7">some text</font> |
some text |
| |
| <font size="+1">some text</font> |
some text |
| <font size="+2">some text</font> |
some text |
| <font size="+3">some text</font> |
some text |
| <font size="+4">some text</font> |
some text |
| <font size="+5">some text</font> |
some text |
| <font size="+6">some text</font> |
some text |
| <font size="+7">some text</font> |
some text |
|
TOP
2. How do we make fonts (text) that have different colors?
| |
We need to use another attribute to the <font>...</font> tags. In this case it is the
<font color=""> attribute.
The color="" attribute needs to filled in with either a color name, or a color number (in hex format). Like....
<font color="red">
or...
<font color="#FF0000">
for red colored text either by name or number.
If you perhaps you recall this is not the first time we have used the color attribute. It was also used in a similar like this in Tutorial 6's Question #8. And the use of color names and color numbers was discussed in Tutorial 6's Question #9.
You can use the exact names listed Tutorial 6's Question #9 as the names you would use in the font tags color attribute. And you can use the hexidecimal number corressponing to those colors, as well as the number equivelent for those colors listed in the W3C specification, also used in Tutorial 6, Question #9. You could also attempt to use the names listed in the W3C specification, as long as you recall that the NUMBERS ALWAYS work, the name MAY not.
| <font color=""> Examples |
|
These tags...
|
Produce...
|
| |
|
<font
color="aqua"
>
aqua text
</font>
|
<font
color="#00FFFF"
>
aqua text
</font>
|
aqua text
|
|
<font
color="black"
>
black text
</font>
|
<font
color="#000000"
>
black text
</font>
|
black text
|
|
<font
color="blue"
>
blue text
</font>
|
<font
color="#0000FF"
>
blue text
</font>
|
blue text
|
|
<font
color="fuscia"
>
fuscia text
</font>
|
<font
color="#FF00FF"
>
fuscia text
</font>
|
fuscia text
|
|
<font
color="grey"
>
gray text
</font>
|
<font
color="#808080"
>
gray text
</font>
|
grey text
|
|
<font
color="lime"
>
lime text
</font>
|
<font
color="#00FF00"
>
lime text
</font>
|
lime text
|
|
<font
color="maroon"
>
maroon text
</font>
|
<font
color="#800000"
>
maroon text
</font>
|
maroon text
|
|
<font
color="navy"
>
navy text
</font>
|
<font
color="#000080"
>
navy text
</font>
|
navy text
|
|
<font
color="olive"
>
olive text
</font>
|
<font
color="#808000"
>
olive text
</font>
|
olive text
|
|
<font
color="purple"
>
purple text
</font>
|
<font
color="#800080"
>
purple text
</font>
|
purple text
|
|
<font
color="red"
>
red text
</font>
|
<font
color="#FF0000"
>
red text
</font>
|
red text
|
|
<font
color="silver"
>
silver text
</font>
|
<font
color="#C0C0C0"
>
silver text
</font>
|
silver text
|
|
<font
color="teal"
>
teal text
</font>
|
<font
color="#008080"
>
teal text
</font>
|
teal text
|
|
<font
color="white"
>
white text
</font>
|
<font
color="#FFFFFF"
>
white text
</font>
|
white text
|
|
<font
color="yellow"
>
yellow text
</font>
|
<font
color="#FFFF00"
>
yellow text
</font>
|
yellow text
|
The table show only the sixteen 'primary' color named fonts. Observation shows you should make sure that setting the fonts color results in a font you can see against the background color of the text field.
|
TOP
3. How do we change the font faces? As in 'Arial', or 'Times New Roman', ect.
| |
Guess what? You need another attribute for the <font> tag. This time it's the...
<font face=""> attribute.
In the face="" attribute you specify the font face you desire. But you must be careful. Just because YOU have some specific font installed on YOUR computer does NOT mean that the same font is installed on every computer that your placemark file might be shown on. For example, lets say you like the 'old time' look of the 'Algerian' font, and you decide to use it in your placemarks. Then you 'share' your placemarks file to others. Some of the folks who receive your file DO NOT have the 'Algerian' font on THEIR system. What happens?
Your font choice, in this case for who do not have it, will be SUBSTITUTED FOR by the operating system running on the computer in question. Substituted with what? You cannot always be sure, but most likely with some OTHER font residing on the machine in question that belongs to same generic font FAMILY.
So what is a GENERIC font family?
- Generic font family defined
-
"Generic font families are a fallback mechanism, a means of preserving some of the author's intent in the worst case when none of the specified fonts can be selected".
This means that at best you may only get a substitution of some system generic serifed or non-serifed font, whichever 'seems' closer' to the one you intended.
So, is there a list of 'safe' font faces to use so these substitutions do not occur? Yes.
Here is a link to a website that shows the 12 'considered safe list of fonts'.
| The 12 'SAFE' FONTS |
| <font face=""> Examples |
|
These tags...
|
Produce...
|
| |
|
<font
face="Arial"
>
Arial font
</font>
|
Arial font
|
|
<font
face="Arial Black"
>
Arial Black font
</font>
|
Arial Black font
|
|
<font
face="=Comic Sans MS"
>
Comic Sans MS font
</font>
|
Comic Sans MS font
|
|
<font
face="=Courier"
>
Courier font
</font>
|
Courier font
|
|
<font
face="=Courier New"
>
Courier New font
</font>
|
Courier New font
|
|
<font
face="Georgia"
>
Georgia font
</font>
|
Georgia font
|
|
<font
face="Helvetica"
>
Helvetica font
</font>
|
Helvetica font
|
|
<font
face="Impact"
>
Impact font
</font>
|
Impact font
|
|
<font
face="Palatino"
>
Palatino font
</font>
|
Palatino font
|
|
<font
face="Times New Roman"
>
Times New Roman font
</font>
|
Times New Roman font
|
|
<font
face="Trebuchet MS"
>
Trebuchet MS font
</font>
|
Trebuchet MS font
|
|
<font
face="Verdana"
>
Verdana font
</font>
|
Verdana font
|
The table above illustrates the 12 'safe' fonts, meaning all PC's and Macs have these fonts, and no substitutions for them should take place. Note: Be careful of spelling font names when dealing with fonts.
|
TOP
4. So the <font> tag has the 'face', 'size', and 'color' attributes. But can you use more than one of them at a time?
| |
Yes. Lets say I want a sentance of a size '2', in the Verdana font, and of a red color. The set of tags would look something like this...
<font
face="Verdana" size="+2" color="red"
>This is a short sentance.
</font>
And these tags would produce...
This is a short sentance.
One, or more attibutes may be used in a formatting tag, as long as you separate each attribute with at least one space. The order in which you write the attributes in is NOT significant. Any attribute order is acceptable.
|
TOP
5. In the previous question we altered the font of a whole line of text. Can that altered line be changed further?
| |
Yes. The <font>
...
</font>
tags may be 'nested' within each other. While doing this nesting be careful to pay attention to completing each <font> tag with a corresponding </font> tag, otherwise what intended to perform may not be what you acheive.
Lets say your task is now in the all red line of text (in this tutorials Question #4), "This is a short sentance", to make the word 'short' become a black text, and the word 'sentance', to become italicized. Here's the new required tags to get this done.
<font
face="Verdana" size="+2" color="red"
>
This is a
<font
color="black">
short
</font>
<i>sentance</i>.
</font>
Which results in...
This is a short sentance.
This is exactly the result we desired. Notice extra set of 'font' tags surrounding the word 'short', which sets that text to the color black, and the <i>...</i> set of italics tags that surround the word 'sentance'.
You may have thought you could place a set of the original set of 'font' tags that turned the text red Verdana sized #2, aroung only the words 'This is a', and another set of the same around the word(s) 'sentance'. This would have left the word 'short' unaltered in color, and it would have show as black. Maybe, and then again, maybe NOT.
The 'unaltered' text color would be whatever the individual user has HIS computer set to. Most of the time this may be black, but you have NO assurance of that. If you desire a certain text to be a particular text color YOU (repeat YOU) should set it the way you want. Don't rely on some users settings to match yours, you will be dissappointed!
|
TOP
6. Are there any 'special cases' involving fonts and the fonts tags? Yes, and they involve the HEADINGS tags.
| |
The heading tags are
<h1>...</h1>
<h2>...</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>...</h6>
A text heading is a formatted section of text typically used to organize, or sectionalize a 'document'. Here's a typical heading...
<h1>This is a Heading of size 1</h1>
Which produces...
This is a Heading of size 1
Notice it has a defined size, and there is a 'built-in' line break, BEFORE and AFTER the text.
Here is another heading...
<h4>This is a Heading of size 4</h4>
This is a Heading of size 4
Notice it also has a size '4' associated with it, and the line breaks before and after. But the 'size numbers' used with HEADINGS are the numbers 1 through 6, with number 1, the largest, and number 6 the smallest. The headers DECREASE in size as the size number increases. This is exactly OPPOSITE to the way the numbers used with the <font> tags size="" attribute.
The heading tags have several attributes, only one of which, the align="" attribute, is partularly useful in our discussion related to GE placemark balloons.
The align attribute takes the form of align="left", align="center", or align="right". This will force the header to the left, center, or right of its CONTAINER.
We have not discussed 'containers' yet. In its simplest case it is the 'whole page' width, or in our case the whole width of the placemark balloon. We will deal more with 'containers' later in our future tutorial dealing with layout and alignment.
Here is how the align="" attribute is used...
<h1 align="center">This is a centered Heading of size 1</h1>
Which produces...
This is a Heading of size 1
and...
<h4 align="right">This is a right aligned Heading of size 4</h4>
Which produces...
This is a right aligned Heading of size 4
The header tags DO NOT have a color attribute. So if you want a color adjusted text you must ADD a set of font tags to the header tags, as in...
<h1 align="center">
<font color="red">
This is a Red centered Heading of size 1
</font>
</h1>
Which produces...
This is a Red centered Heading of size 1
Heres a table summarizing all the header tags
| The Header tags |
| <h1>...</h1> Examples |
|
These tags...
|
|
Produce...
|
| |
|
<h1>
Heading size 1
</h1>
|
Heading size 1
|
|
<h2>
Heading size 2
</h2>
|
Heading size 2
|
|
<h3>
Heading size 3
</h3>
|
Heading size 3
|
|
<h4>
Heading size 4
</h4>
|
Heading size 4
|
|
<h5>
Heading size 5
</h5>
|
Heading size 5
|
|
<h6>
Heading size 6
</h6>
|
Heading size 6
|
|
TOP
7. The header tags have an align="" attribute that aligns the headers left, center, or right. Are there any other ways to set alignments?
| |
Yes, there are several different ways to align text, and images, and container areas. Lets deal with pargraphs of text first.
First, another new formatting tag, the <p>...</p> paragraph tag. When you surround some text with the <p>...</p> paragraph tags a line break both BEFORE and AFTER the text is inserted, like this...
Heres a table summarizing all the paragraph tags
| The Paragraph tags |
| <p>...</p> Examples |
|
These tags...
|
|
Produce...
|
| |
|
<p align="left">
Lorem ipsum omnis (ect)...
</p>
|
Lorem ipsum omnis deleniti per ex. Ei wisi equidem interesset mel, eum an mandamus molestiae. Pri cu eros iusto feugiat, at vis integre fuisset vulputate, his corpora voluptatibus ut. Cum periculis corrumpit urbanitas et, nominati perpetua at sed.
|
| |
|
<p align="right">
Lorem ipsum omnis (ect)...
</p>
|
Lorem ipsum omnis deleniti per ex. Ei wisi equidem interesset mel, eum an mandamus molestiae. Pri cu eros iusto feugiat, at vis integre fuisset vulputate, his corpora voluptatibus ut. Cum periculis corrumpit urbanitas et, nominati perpetua at sed.
|
| |
|
<p align="center">
Lorem ipsum omnis (ect)...
</p>
|
Lorem ipsum omnis deleniti per ex. Ei wisi equidem interesset mel, eum an mandamus molestiae. Pri cu eros iusto feugiat, at vis integre fuisset vulputate, his corpora voluptatibus ut. Cum periculis corrumpit urbanitas et, nominati perpetua at sed.
|
| |
|
<p align="justify">
Lorem ipsum omnis (ect)...
</p>
|
Lorem ipsum omnis deleniti per ex. Ei wisi equidem interesset mel, eum an mandamus molestiae. Pri cu eros iusto feugiat, at vis integre fuisset vulputate, his corpora voluptatibus ut. Cum periculis corrumpit urbanitas et, nominati perpetua at sed.
|
| |
Next, there is older (depreciated) tag, the <center>...</center> tags.
There are no attribute tags that apply to our usage in a GE placemark balloon. The 'center' tag centers text or IMAGES (pictures) that are surrounded by its tags.
Heres a table summarizing the center tags
| The Center tags |
| <center>...</center> Examples |
|
These tags...
|
|
Produce...
|
| |
|
<center>
Lorem ipsum omnis (ect)...
</center>
|
Lorem ipsum omnis deleniti per ex. Ei wisi equidem interesset mel, eum an mandamus molestiae. Pri cu eros iusto feugiat, at vis integre fuisset vulputate, his corpora voluptatibus ut. Cum periculis corrumpit urbanitas et, nominati perpetua at sed.
|
And the last (until later when we introduce the 'table' tags) is the newer <div>...</div> 'division/section' tags. These tags, like the 'paragraph' tags have the align="" left, right, canter, and justify attributes. But in addition to the paragraph tags, these tags will align text OR images located between the tags (like the 'center' tags).
Heres a table summarizing all the 'div' tags
| The Div tags |
| <div>...</div> Examples |
|
These tags...
|
|
Produce...
|
| |
|
<div align="left">
Lorem ipsum omnis (ect)...
</div>
|
Lorem ipsum omnis deleniti per ex. Ei wisi equidem interesset mel, eum an mandamus molestiae. Pri cu eros iusto feugiat, at vis integre fuisset vulputate, his corpora voluptatibus ut. Cum periculis corrumpit urbanitas et, nominati perpetua at sed.
|
| |
|
<div align="right">
Lorem ipsum omnis (ect)...
</div>
|
Lorem ipsum omnis deleniti per ex. Ei wisi equidem interesset mel, eum an mandamus molestiae. Pri cu eros iusto feugiat, at vis integre fuisset vulputate, his corpora voluptatibus ut. Cum periculis corrumpit urbanitas et, nominati perpetua at sed.
|
| |
|
<div align="center">
Lorem ipsum omnis (ect)...
</div>
|
Lorem ipsum omnis deleniti per ex. Ei wisi equidem interesset mel, eum an mandamus molestiae. Pri cu eros iusto feugiat, at vis integre fuisset vulputate, his corpora voluptatibus ut. Cum periculis corrumpit urbanitas et, nominati perpetua at sed.
|
| |
|
<div align="justify">
Lorem ipsum omnis (ect)...
</div>
|
Lorem ipsum omnis deleniti per ex. Ei wisi equidem interesset mel, eum an mandamus molestiae. Pri cu eros iusto feugiat, at vis integre fuisset vulputate, his corpora voluptatibus ut. Cum periculis corrumpit urbanitas et, nominati perpetua at sed.
|
By the way, what the heck is all this "Lorem Ipsum..." stuff? Read all about it here.
|
TOP
8. But what if I have a lot of text 'left aligned', and now I need a portion of it to be 'centered' text. How do I do that?
| |
You can NEST any of the text formatting tags within each other. You can have a whole page (or more) left aligned (which is always the default), and then you imbed a nested 'center' set tags. or a div set of tags, or a set of paragraph tags.
Perhaps you getting the sense that all these mysterious 'tags' can be used 'within' each other. Well, you would be RIGHT. But, remember to pay attention to the END TAG of a set of tags. The 'starting' tag of a set says, "Start doing this kind of formatting HERE" and KEEP doing it until I tell you to STOP! And computers being computers, will continue very happily to do something until you tell it to stop. So, watch youe ENG TAGS!
Heres a table showing nested 'div' tags
| The Nested Div tags |
| Nested <div>...</div> Examples |
|
These tags...
|
|
Produce...
|
| |
<div align="left">
Lorem ipsum omnis (ect)...
<div align="center">
Centered Lorem ipsum omnis (ect)...
</div>
More Lorem ipsum omnis (ect)...
</div>
|
Lorem ipsum omnis deleniti per ex. Ei wisi equidem interesset mel, eum an mandamus molestiae. Pri cu eros iusto feugiat, at vis integre fuisset vulputate, his corpora voluptatibus ut. Cum periculis corrumpit urbanitas et, nominati perpetua at sed.
Centered Lorem ipsum omnis deleniti per ex. Ei wisi equidem interesset mel, eum an mandamus molestiae. Pri cu eros iusto feugiat, at vis integre fuisset vulputate, his corpora voluptatibus ut. Cum periculis corrumpit urbanitas et, nominati perpetua at sed.
More Lorem ipsum omnis deleniti per ex. Ei wisi equidem interesset mel, eum an mandamus molestiae. Pri cu eros iusto feugiat, at vis integre fuisset vulputate, his corpora voluptatibus ut. Cum periculis corrumpit urbanitas et, nominati perpetua at sed.
|
|
TOP
10. A review of what we did, and a look at what is comming up in the NEXT tutorial.
| |
We learned about...
- How to change a fonts size.
- How to change a fonts color.
- How to change the displayed 'face' of a font.
- How to alter font sizes, colors, and sizes at once by nesting.
- How to use the 'header' tags.
- How to perform text alignments
- How to perform multiple text alignments through nesting.
What is next...
- We will learn about lists, numbered, plain, and ordered
- We will learn about special case text formats, like block quotes
- We will START learning about LINKING, both internal, and external
|
TOP
These EAATC Google Earth Tutorials were created by:
D. B. Freedman, EAATC Webmaster
|
|
