o How do I use HTML Code to change fonts and insert stuff in posts?

OK, so now you're comfortable with browsing the internet and posting on the Garden Web forums. But you feel your plain-Jane text is boring and lacking those nice, sophisticated flourishes like bold fonts, and underlines, and colors; and you'd like to post hyperlinks and pics like other people do.

You just have no idea how to do it. You've tried all the tricks that work fine in your word-processing programs, but nada, zilch, the web ignores your attempts.

The answer lies in knowing something about how web pages are actually constructed.
.................................................................................................................................................................................................

*INTRODUCTION TO HTML CODE
*ADDING COLORS
*CHANGING FONT SIZE
*MIXING UP THE COMMANDS
*WHAT COLORS CAN I USE?
*WHAT COMMANDS ARE THERE BESIDES COLOR AND SIZE?
*WHERE DID THE TAGS GO?
*HOW DO I INSERT A LINK?
*HOW DO I INSERT A PHOTO?
*REFERENCES

.................................................................................................................................................................................................

*INTRODUCTION TO HTML CODE

This is not brain surgery (although you can frazzle your brain if you try to leap into HTML (HyperText Markup Language) without an interpreter nearby.

The actual mechanics of setting up a web page is incredibly complicated, but you don't need to know the dirty little details of writing HTML code if all you want to do is underline a word. Just as you don't need to know how to wire your house if all you want to do is turn on a light.

Basically, you start out with some standard text of your choice and then you start adding "document tags" whenever you want to change the appearance of the text, or to determine how a line of words works, or to link up your text with a different site or image.

For example, you might start out with a sentence:
"Yawn, this is even more boring than mowing the lawn."

and then you decide to jazz it up a little by adding tags:
"tagYawnend tag, this is tageven more boringend tag than tagmowing the lawnend tag."

Depending on which tags you chose, you might get this;

"Yawn, this is even more boring than mowing the lawn."

In a post in 2005 cady gave an excellent description of how to change font colors and sizes. With some changes, this is how she explained the procedure:






.............................................................................................................................................................................................

*ADDING COLORS

To code for color, use the words font color= as the base code, then add the name of the color you want. If you want the color green, for example, type inside the keyboard characters < and > font color=green in front of the word, phrase or sentence you wish to make green. At the end of the line you want to make green, type /font inside the same keyboard characters.

Here is a color-coded sentence:

<font color=blue> This sentence has the blues.</font>

This sentence has the blues.

Note that there is a space between "font" and "color," but that there is no space separating "color," "=" and "blue."






.................................................................................................................................................................................................

*CHANGING FONT SIZE

Changing type size involves the same code structuring as for color, except that you use the words font size= instead. You end the size change command the same way as before, with /font as the closing command.

Also, type size is measured in points, as with actual typesetting. For example, when you use a word processing program, you can change the size of your font (type) by selecting a number: 8, 9, 10, 12, 14, etc. That's the point size.

Example of size change command:

<font size=14>This is 14pt type.</font>

This is 14pt type.

So, to change type size here, you have to pick a number size. You can experiment with different numbers and see what happens.






.................................................................................................................................................................................................

*MIXING UP THE COMMANDS

You can have fun mixing words up with changes in font sizes, colors, italics, bold face and other attributes - all at the same time. To do a color change and a font size change together, follow this example to change a sentence:

<font color=red> <font size=24> This sentence is red and 24pt type.</font> </font>.

It will look like this:

This sentence is red and 24pt type.

Note that to end each command, you must put a /font twice at the end of the sentence. You do the same thing to add italic or bold type to the fun:

<b> <i> <font color=orange> <font size=16> This sentence is bold, italic,
orange and 16pt! </font> </font> </i> </b>

It will look like this:

This sentence is bold, italic, orange and 16pt!

Note that you have to close the commands in the reverse order from that which you gave them -- that is, you commanded bold first, italic second, color third and size fourth. When you close the command, you start with the close-command for size, then color, then italic, then bold.

Keeping track is a bit of a challenge, so if you give a chain of code, and the words don't come out the way you wanted, it's probable that you reversed an order, forgot to close one of the commands, or something like that. If an entire block of text you typed has been turned italic, or yellow, or a different point size - when you wanted to change only one word or a phrase or sentence - it's because you forgot to put an end command in (such as /i or /font).

You can see your results in Preview Message, to make sure the type came out the way you want. < end of cady's description >






.................................................................................................................................................................................................

*WHAT COLORS CAN I USE?

Some common colors you can specify by name are:

AquaBlackBlueFuchsiaGrayGreenLime MaroonNavy OlivePurpleRedSilver TealYellow

There are many more and you can find lists by searching on the internet for HTML Color Tags. If you absolutely must have a specific color, there are six figure hex codes that you can use.






...............................................................................................................................................................................................

*WHAT COMMANDS ARE THERE BESIDES COLOR AND SIZE?

A few useful tags are:

<b> bold </b> <u> underline </u> <i> italic </i>
<small> small text </small>
<font color=red> red </font> <font size=16> 16 pt </font> This is <BR>
a command for <BR>
a line break






.................................................................................................................................................................................................

*WHERE DID THE TAGS GO?

When the tag is properly typed, it will disappear into the page source and the command will be executed.

You can see this hidden HTML code underworld by ctrl-clicking on a web page (Mac) or right-clicking on the page (PC). A box will appear; click on View Source. You should see more than you ever wanted to know about how Web pages work. Sort of like looking at your compost under a microscope. Not for the faint of heart.

Thanks to bob414 for showing me how to type < and > without making the command disappear.






.................................................................................................................................................................................................

*HOW DO I INSERT A LINK?

To insert a link you need to first visit the site you want to link to. The URL (Uniform Resource Locator) is the web address at the top of the page. Highlight and copy this URL - all of it, starting from the http and continuing to the end, no matter how long.

Paste the URL on your page, use the following command and give a name to the link:

<a href="URL"> "Name of URL"</a>

The name can be anything you want, but that's what will turn blue and indicate a link, so it should at least give a hint as to what you're linking to.

It's usually recommended to put the URL and the name in quotation marks. The quotes tell the machine these words belong together and not to worry about spaces before and after. Extra spaces can screw up the command, but sometimes you can get away with it if you're careful. The only spaces here should be between a and href, and between the words in the name.






.................................................................................................................................................................................................

*HOW DO I INSERT A PHOTO?

The nitty-gritty kernel of truth in inserting photos is the command:

<img src="URL of photo">

but the devil is in the details, i.e., how do you get the photo in a place that's accessible to the internet, and how do you get it in a reasonable size so as not to overwhelm the post.

There's an excellent, comprehensive, description in the Hot Peppers Forum FAQ written by taba, entitled "How Do I Add Pictures to My Posted Messages?"

diggingthedirt adds a few general comments:

"...the main questions I've seen on the forums are about posting photos, from people who don't have access to a server. The best advice for those people is to upload photos to the gallery - say, on the perennials forum, where you can post a photo by uploading it from your computer. You can then add a link to your photo, or embed it in your post, on this forum, using the url of the image on the perennials gallery. ..".

This works well but one potential problem here is that the photo may not stay on the gallery for more than a week or two, so it won't stay in your post for more than that time.

If you do use the gallery route, be aware that the "Optional Link URL" won't appear on the form at first if you're starting a new thread, but when you hit the "preview" button it will come up.

"The most important photo posting advice is about size control. New people have a hard time realizing how difficult it is to read a post (never mind downloading it before you read it, if you have dialup) when there's an oversized photo in it."

You've probably seen threads that suddenly get too wide for your browser window and you have to scroll back and forth and back and forth and back and forth .... to read the text or see the whole photo. A lot of people will give up and move on to another thread when that happens. The sudden expansion sideways is because the photo was oversized and just can't fit into the window. Think holiday overeating and the poor waistband trying to contain the belly.

450 pixels wide is plenty for a standard post. Depending on where your photo originates, you should be able to resize it, often by using the "edit" function.

If you have to, you can usually modify the

<img src="URL of photo"> command to add

<img src="URL of photo" width=450>






.................................................................................................................................................................................................

*REFERENCES

If you want to get deeper into the subject, it's best to do a web search using terms such as:
write HTML code
HTML Color Tags
HTML Tags/Codes
HTML Code Tutorial

Entered by claire

        FAQ Page


GardenWeb Home Page | Forums | Forum
 
 
Click here to learn more about in-text links on this page.