Shop Products
Houzz Logo Print
claireplymouth

draft faq on html

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.

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.

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

  • 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