draft faq on html

17 years ago

OK, I finished wrapping and mailing the presents, the cards are sent, and the lights are up. I fed the birds, oiled the soapstone counters and did laundry. I considered cleaning the house but decided that writing an FAQ was better than that.

This is a draft and can be easily changed. All comments are welcome. I don't know much more than I've included here, so there may be gross errors. If so, please correct me.

The important thing is to get a FAQ that is easy to follow and will be useful to people who don't know code and probably aren't really interested in it.

Claire

Question - how do I jump from the contents list directly to a specific section?

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

HOW DO I CHANGE THE FONTS AND INSERT STUFF IN MY POSTS?

*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

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

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 "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 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:

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:

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:

This sentence is red and 24pt type. .

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:

This sentence is bold, italic,
orange and 16pt! > /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.

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

*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:

bold

underline

italic

small text

red

16 pt

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

*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 world by ctrl-clicking on a web page (Mac) or right-clicking on the page (PC). A box will appear; click on View Page 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-hearted.

Thanks to bob414 for showing me how to type 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, for example:

http://forums.gardenweb.com/forums/

use the following command and give a name to the link:

Garden Web Forums

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 it's not necessary if you're careful. The only spaces here should be between a and href, and between the words in the name Garden Web Forums. It may look like there is a space between "Garden Web Forums"

Garden Web Forums

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

*HOW DO I INSERT A PHOTO?

There's an excellent description in the FAQ for the Hot Peppers Forum

How Do I Add Pictures to My Posted Messages?

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

*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

Comments (24)

mad_gallica (z5 Eastern NY)
17 years ago
last modified: 9 years ago
This is old. By Internet standards, this is really, really old. It's about as old as dirt. It's older than Garden Web. It's probably only still around because it is quite good, and most of the commands haven't changed. Everything I've wanted to do in HTML is in there, somewhere, though a table of shadow boxes almost drove me crazy once.

Here is a link that might be useful: HTML Tutorial
diggingthedirt
17 years ago
last modified: 9 years ago
Nice work Claire, I think this is a good idea and well done! Here are a few suggestions:

I'd leave out the font size info, because nobody really wants to read posts written that way and nobody really needs to write that way either. Bold and italic seem like reasonable styles to include, but are the rest really going to enhance the GW experience?

Second, 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. Not sure if that's covered in the Hot Peppers forum link...

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. I'd suggest adding some recommendations on size - i.e., max 450 pixels wide, how to make a small image out of a large one, and as a last resort, how to scale an image within your post by adding the "size" parameter to the img tag.

Last, when you are composing a post, there is no "Optional Link URL" form; you might tell people that they will find that after they hit the preview button.

My 2 cents, always freely available! Thanks for doing this, I think it will be useful to lots of people.

Cheers - Nan
Related Discussions
addressing newbie and newer member issues-first draft.
Q
Comments (78)
Newbies: Ldylahla, Firecandle, parishumphrey, hdibikerchick, mwood4d... ****The Adopt-A-Newbie list is elsewhere.**** Follow the link below. If you would like to be put on an adoption list, post on the Adopt-A-Newbie thread (link is below) not here. On that thread, you can be found and adopted. Sign up! (This thread right here is a newbie issues thread, how to change your member details, how to set your email, how to make a 'have list', etc.) Here is a link that might be useful: The Adopt-A-Newbie list
...See More
Welcome Message draft
Q
Comments (31)
I also just want to call out a thanks to the hard work WC8 has put into this - I think sweetcicely put it really nicely. Cj - that's a really good point. I really do try, but I sometimes forget to append "I think that..." or "From my limited experience..." to the beginnings of my post, which I think is important in ensuring that the reader knows that any advice being given is a guess or at least from limited experience. Even if it's neither these two things, anyone not growing in my conditions should take any information I give with a grain of salt, and so that little "I'm not sure, but this is what I think" really serves as a nice reminder to the reader. Sometimes I see it as a liability waiver! Re the nature of people visiting the forum - with the invention of the internet, people tend to 'ask' more than research. It's gone from going to the library to checking out a book, to going to google and searching for a key word, to just posting questions on forums and waiting for answers. I think the welcome draft is fantastically detailed and has so much great advice and information, but as others have said, may not be efficient, keeping in mind the mentality of the people who come here asking for questions. Is it possible to have a single line at the top of the page in a very prominent place saying: "Thanks for visiting the forum! If you have some time before posting your question, please READ THIS" and link to the page you've drafted? That way people who do click on the link will expect to be presented with something they need to read - if they do read all of it, they'll be that much wiser and if they don't, then there's no hurt feelings since it's not the first thing that jumps into their face when they visit the site, so it's less....foreboding.
...See More
final faq on html
Q
Comments (4)
DTD: Thanks for the kind words. This was a major learning experience for me. About the font size, I agree we'll have to wait and see, but I have an underlying faith in the basic common sense of Garden Webbers. I think most people will hesitate to blast our eyeballs with a lot of giant purple letters in their posts. And even if they do, the forum will gently (or maybe not so gently), instruct them to stop. I'm a hopeless believer in giving people a little more information than they probably asked for, and letting them pick out what they want. Claire
...See More
Revised draft html FAQ
Q
Comments (1)
Time to get this moved down since it's been superseded by the final FAQ. How do I use HTML Code to change fonts and insert stuff in posts? There's still a few bugs in the FAQ but they can fester for a while. Claire
...See More
claireplymouth z6b coastal MA
Original Author
17 years ago
last modified: 9 years ago
mad_gallica:

Thanks for the tutorial link.

I've found several others, one nice one is
HTML Code Tutorial

I can't link to them on the FAQ, it's Garden Web policy not to allow links that are likely to change. I'm hoping they'll allow me to link to sites within the Garden Web site just for informational purposes.

Nan:

You make a good point about font size - if no-one objects I'll delete that part.

I was hoping not to go deeply into inserting photos. The Hot Peppers FAQ states a reason not to use GW galleries to upload photos, i.e.

Option 4: Use the GardenWeb galleries available on other forums.
You can post images to other GardenWeb forum galleries, but these images are not stored for long, so this is not always the best option. For example, your posted message on Hot Peppers forum may stick around for a couple of months, but the image on the Garden Photo Gallery may disappear after two weeks so youre left with a "broken" image link in your forum message.

Thanks both for commenting. I'll wait for others before revising the draft.

Claire
prairiemoon2 z6b MA
17 years ago
last modified: 9 years ago
Hi Claire...

Good timing. I have been wanting to figure this out recently and didn't have the time to research it for myself. Thanks for doing this and for putting everything I need to know all in one place. I can't comment on the content as I haven't read the whole thing yet. This is very nice of you to do.

You sound so efficient! I hope your family appreciates you.

:-)
pm2
claireplymouth z6b coastal MA
Original Author
17 years ago
last modified: 9 years ago
pm2:

I wasn't going through that list of tasks I'd done just to show how efficient I am.

My point (not well made) was that I'd run out of excuses to avoid writing this FAQ! I've been thinking about it for a couple of years, and gathering information here and there.

I posted on the "projects I never got around to doing..." thread to force myself to do it. When I'm close to starting something, I go through a flurry of housekeeping type tasks first just to postpone action. When I get to the point of cleaning the house (a task I really dislike), I usually give up and start my project. Once I've started, I get into it and don't want to stop.

I've done this enough times in my life that I now laugh at myself when I suddenly start cleaning.

Claire
prairiemoon2 z6b MA
17 years ago
last modified: 9 years ago
Claire, I WISH...I could procastinate the way you do!! lol
Most people procastinate by avoiding work. You get more done when you are procastinating then most people when they are not.

Seriously though. I really admire your energetic, productive ways, even if the motivation is to avoid something else. I didn't see that post about the 'projects never get around to doing'. I saw the title, but I wouldn't even read it because I didn't want to find out how long my list would be. [g]

Thanks very much for creating this post instead of cleaning your house. You really did help me if that makes you feel any better.

:-)
prairiemoon2 z6b MA
17 years ago
last modified: 9 years ago
Claire, I just started reading the post and trying out the instructions. I tried copy/pasting your 'tagged' sentences into the message window on this thread and hitting preview message, but the preview just shows the same typed sentence and not the effect wanted.

For instance...I pasted from your post:

This is 14pt type.

And this is the result.

Am I doing something wrong? I was expecting the sentence to show up as 'This is 14pt type.' in larger letters.

Thanks :-)
diggingthedirt
17 years ago
last modified: 9 years ago
It's because you have a space after the
claireplymouth z6b coastal MA
Original Author
17 years ago
last modified: 9 years ago
pm2:

I was off getting my car serviced so I didn't see your post until now.

Nan is correct, you need to take out the spaces after . I have to make this clearer when I revise the draft.

If the spaces weren't there, then I couldn't show this command without the tags disappearing and the type getting large. The alternative was to keep saying something like "type the command and then surround it with ", which I thought would be more confusing.

...................................................................................................................
Maybe I should change it to:

This is 14pt type. Note, take out the spaces after and you'll get
This is 14pt type.

Did you try it again? Don't get discouraged! Once you get it the first time, the rest is easy.

It's good you're sharing your problems with the FAQ; that way I can get some of the bugs out.

Thanks,
Claire
prairiemoon2 z6b MA
17 years ago
last modified: 9 years ago
This is 14pt type.

Thanks for the help both of you. :-)
I was away from my computer all afternoon. So I did as you suggested, by copy/pasting what was in your post again, but this time taking out the spaces, and this is my result. Of course I didn't want the /font to show up...so I am trying it again, as I think I see another space right before the forward slash... and this is the second try taking out the other space....

This is 14pt type.

Ooops! Now what happened, it is all 14 pt type?

LOL
prairiemoon2 z6b MA
17 years ago
last modified: 9 years ago
OK, now my try at turning the font red.

red

Nothing. I took out all the spaces except between font and color. Hmmm...

:-)
prairiemoon2 z6b MA
17 years ago
last modified: 9 years ago
This is 14pt type.

Another try after I noticed that you mention needing a double forward slash with font at the end in order to end a command. See if that works.

Aha! I think I have it now! At least for the font size. I don't have time this minute, but I will come back and work on it some more and try all the other commands and putting them together.

Thanks for the help.
:-)
claireplymouth z6b coastal MA
Original Author
17 years ago
last modified: 9 years ago
Congratulations!

The red worked perfectly. The problem with the font size is you didn't turn it off correctly by taking out the space between Try the font size again.

Claire
claireplymouth z6b coastal MA
Original Author
17 years ago
last modified: 9 years ago
You figured it out and posted before I could answer.

Well done!

Claire
prairiemoon2 z6b MA
17 years ago
last modified: 9 years ago
Claire and cady are great teachers!
prairiemoon2 z6b MA
17 years ago
last modified: 9 years ago
I'll have a blue Christmas without you.

Tiny Pic

{{gwi:191092}}
claireplymouth z6b coastal MA
Original Author
17 years ago
last modified: 9 years ago
Wow, give her a little information and she goes berserk!

And that's a very funny collection of outraged babies - how DARE you put these ugly hats on our heads!

Claire

I've been thinking about trying that tiny pic site - it was recommended by an architect on the Building a Home Forum.
prairiemoon2 z6b MA
17 years ago
last modified: 9 years ago
So I seem to have been able to do all that I wanted to know how to do. Now for some comments...

I like knowing how to change the font, but I agree, I would use it rarely. What I find myself wishing I could do on a fairly regular basis, is putting something in italics, underlining a book title, putting a word in bold.

As for the color, something else I would rarely go to the trouble of using, but again, I would like to know how to for that rare occasion when I might. Such as in a Christmas greetings thread or something like that. Most of the time I would not take the time to do that. As a matter of fact, I use the firefox browser and if you notice when I tried to use the color tags, I thought it didn't work. That is because firefox limits html commands when using their browser and I didn't see any red words. I realized that you did and I went and used Internet Explorer and sure enough, I saw the word red in red ink. Strangely, I didn't see the other effects. That was confusing and I have no idea why. BUT, in the browser that I use every day, the commands I wanted to use work fine with the directions you gave me. So I am all set.

The thing I wanted most to do and will probably use more frequently than the others, is posting a photo inside the post. I used to use Tinypic, but at some point something changed and I was pasting the command they were providing and it still wasn't working. So these directions worked for me. I compared the command you were suggesting to the command Tinypic provided and they were different. But I think I would still use the Tinypic site to upload the photo and then just change the command where needed.

Finally, on Nan's concern about resizing the photos. I assume that the concern is the time it takes to open a thread for someone on dial up when one of the photos is oversized. So the photo I posted above, is oversized?

If that is a problem, I will go back and review the directions for resizing.

Hope that helps. :-)
claireplymouth z6b coastal MA
Original Author
17 years ago
last modified: 9 years ago
Thanks for the comments. That's what I need for the next round when I revise the draft and re-post.

The issue of resizing photos has two aspects; firstly the time it takes to download, and secondly the width of the photo so it may exceed the width of the screen, causing you to have to scroll right and left to read the following text.

I use dialup, and your photo downloaded pretty quickly. However, it is too wide in that I can't see it all in one screen view, and it causes all of the following posts to also be too wide.

I've been thinking about adding another useful command to the FAQ; i.e. which makes an early line break.

You use it to shorten a line. For example, this line will probably run out of the view screen if I let it run on and on, but if I throw in a judicious or two

You use it to shorten a line. For example, this line will probably run out
of the view screen if I let it run on and on, but if I throw
in a judicious or two

you can correct the oversizing of the text. It's a PIA to do though.

Claire
prairiemoon2 z6b MA
17 years ago
last modified: 9 years ago
The photo I posted was very fast for me and the thread didn't slow down loading because I have high speed access, right? On my screen, it has at least an inch border on the left and about 2.5 inches on the right side. What causes it to be too wide for you but not for me? Well, I am sure I saw some directions for reducing the size somewhere today. I will have to work on that.

Thanks Claire, cady and DtD... :-)
claireplymouth z6b coastal MA
Original Author
17 years ago
last modified: 9 years ago
diggingthedirt
17 years ago
last modified: 9 years ago
A good rule of thumb for images is 450 pixels wide; PM2, your Anne Geddes image is 1024 px. I can't really read this thread now, because it requires scrolling left and right.
If your monitor is displaying the whole image and not making the posts widen out beyond the size of your browser window, it is either because you have a very high resolution monitor or your browser is resizing the image. Right clicking on the image and scrolling down to "properties" will tell you the image details.

You can (probably) replace the image on tinypix with a smaller one, and that will fix the problem. Otherwise, I think we might need a new thread!

Cheers - DtD
eden_in_me
17 years ago
last modified: 9 years ago
On the new IE7, there is a place at the lower right corner where you can zoom in or out or change the size of the page to preset %s of 400, 200, 150, 125, 100, 75 or 50 and a custom zoom you can use to get different sizes in between.

I find this most useful in forums with imbedded pictures and/or a wide left margin. 90% seems to work best for me.

Marie
claireplymouth z6b coastal MA
Original Author
17 years ago
last modified: 9 years ago
Marie:

That sounds like a very useful function for Internet Explorer users. I wish that my browser, Safari, had something similar.

Claire

draft faq on html

Comments (24)

mad_gallica (z5 Eastern NY)

diggingthedirt

Related Discussions

claireplymouth z6b coastal MA
Original Author

prairiemoon2 z6b MA

claireplymouth z6b coastal MA
Original Author

prairiemoon2 z6b MA

prairiemoon2 z6b MA

diggingthedirt

claireplymouth z6b coastal MA
Original Author

prairiemoon2 z6b MA

prairiemoon2 z6b MA

prairiemoon2 z6b MA

claireplymouth z6b coastal MA
Original Author

claireplymouth z6b coastal MA
Original Author

prairiemoon2 z6b MA

prairiemoon2 z6b MA

claireplymouth z6b coastal MA
Original Author

prairiemoon2 z6b MA

claireplymouth z6b coastal MA
Original Author

prairiemoon2 z6b MA

claireplymouth z6b coastal MA
Original Author

diggingthedirt

eden_in_me

claireplymouth z6b coastal MA
Original Author

COMPANY

BUSINESS SERVICES

GET HELP

CONNECT WITH US

draft faq on html

Comments (24)

Related Discussions

claireplymouth z6b coastal MAOriginal Author

claireplymouth z6b coastal MAOriginal Author

claireplymouth z6b coastal MAOriginal Author

claireplymouth z6b coastal MAOriginal Author

claireplymouth z6b coastal MAOriginal Author

claireplymouth z6b coastal MAOriginal Author

claireplymouth z6b coastal MAOriginal Author

claireplymouth z6b coastal MAOriginal Author

claireplymouth z6b coastal MAOriginal Author

COMPANY

BUSINESS SERVICES

GET HELP

CONNECT WITH US

claireplymouth z6b coastal MA
Original Author

claireplymouth z6b coastal MA
Original Author

claireplymouth z6b coastal MA
Original Author

claireplymouth z6b coastal MA
Original Author

claireplymouth z6b coastal MA
Original Author

claireplymouth z6b coastal MA
Original Author

claireplymouth z6b coastal MA
Original Author

claireplymouth z6b coastal MA
Original Author

claireplymouth z6b coastal MA
Original Author