Basic lessons in HTML, CGI, SEO, domain registration, hosting - build an on line business!

Color Tools

AdminP — Tue, 27 Jul 2010 16:48:06 +0000

There are many elements to consider when building a website or blog. One of which is color. We live in a very visual world and color can be a real attention-grabber or it can be a real turn-off.

If you are one of the lucky ones that can ‘visualize’ and see how a page might look before it is written you may not need the tools we’ve put together. However, if you have trouble deciding what colors to use for text and links, if . . . say you want a blue background, then you may find these new pages helpful.

Color Table

…..makes it easy to find any code for any hexadecimal color. Use these grid tables to select the color you want and the code will display in the box below the grid.

Color Changer

….. makes it easy to darken or lighten a hexadecimal color. You can take the original color and using numbers ranging from .1 (yes, use a decimal number for darker) to 5 to get a range of colors.

Once you’ve input a number and clicked on ‘Output’, a ‘color bar’ will display. You can then click anywhere on the bar to get the exact color you want . . . and the hexadecimal code for that color will appear next to the ‘Output’ box.

Color-Cube

……ever wonder what your page would look like with all the colors assigned before you published it? This handy page lets you assign colors for

Background
Background Image
Text
Links
Bold
Italic
Font Size

Once you’ve decided on the colors you want, you will see the HTML codes to use on your web page or blog for those colors.

All of these tools will be available from the ‘Pages’ - left sidebar – under ‘Tools’.

10 Basic HTML Actions, Pt. 2

AdminP — Thu, 22 Jul 2010 15:50:57 +0000

Continuing our discussion on basic HTML with items ’6 through 10′ of our ’10 Basic’ HTML actions - what they do and what to call them should you want to look them up either online or in a reference book. [Part 1 ]

6. Want to have ‘scrolling’ text on the page without using JAVA?

You can use ‘Marquee’ tags to accomplish this. When using a marquee tag you can define the following attributes:

Type (scroll - continues across the page and disappears; slide – starts at one side of the screen and stops when it reaches the other side; alternate – text starts at one side and bounces back when it reaches the other side. )
Direction – which side the text starts from
Loop – number of times the text will pass across
Scrollmount – amount of space left between each pass
Scrolldelay – how much time before text scrolls again
Height
Width
Horizontal space
Vertical Space
Align
Background color

Sample Scroll

Note: I’ve used this method for small graphics but do not recommend it for large images as it would take too long to load.

7. Want to make an image change when a visitor points at it?

This is called a ‘rollover’. To accomplish this you can use a tag to show the alternate image and a to return them to the original image. To use this code, you would replace the location and name of the image with your own image location and name.

8. Want to keep a string of text or numbers together . . . all on the same line?

This is easily done by placing a ‘no return’ tag at the beginning of the text string and a tag at the end.

Example: 202-123-4567, PO Box 123, NY, NY 11229

All of the information above between the ’nobr’ tags will stay on one line. This is effective for telephone number, long URL’s, item numbers or anything else you don’t want split.

9. Want to change how your website displays?

This can be accomplished through the ‘sytle’ tag –

10. Want to display information to the visitor via a text link?

This is accomplished through the use of a ‘title‘ tag. If you are using an image for a link it’s easy to add the “ALT= ” tag to give information either about the image or the link to the visitor. The information in the ”ALT= “ tag will be displayed when the cursor is over the image. However, if you are using text links, you will need to use the ‘title‘ tag within the anchor link code to get your message across.

For example,

Link Text Here

. . . lets the visitor know that when they click on the link “This link will open in a new window ”. You can use the ‘title‘ tag for any message you want your visitor to see.

Conclusion

Most of the time, finding information on how to perform actions in HTML is easy. If you want information about tables you look under tables, information about links – look under links…. but sometimes finding how to do a specific action that doesn’t seem related to anything can be confusing.

If you’re dead serious about learning HTML, the Quick Start Guides by Elizabeth Castro are a quick, easy learn and a much needed addition to your reference library.

10 Basic HTML Actions, Part 1

AdminP — Mon, 19 Jul 2010 23:05:19 +0000

When first beginning to write and use HTML for building websites and in some cases setting-up WP blogs, there are things you may want to do but perhaps find it hard to look up because you don’t know the ‘correct’ name to use for searching. However, knowing the name of the function (or action) so you can look it up to get instructions can make things a lot easier. [ Part 2 ]

Listed below are ten (10) of the more common HTML tasks you may want more information on . . . along with the name to use when looking them up either online or in a book. (Actual HTML code is shown in blue.)

1. Don’t want your links underlined?

There may be times when you want a clean looking page. One where your links are not underlined. The underlining of a link is part of ‘Text Decoration’ and can be addressed from an individual style sheet on the page.

2. Want the color of a text link to change when the cursor is placed on it?

You’ve seen pages where the links change color when the cursor is passed over them. This is called ‘Hover’ and can also be defined from the individual style sheet. You can assign any color to the hover color using a hexadecimal color definition.

For example,

In our sample above, we’ve defined text-decoration as ’none’ (no underlining of links) and our text link as changing color when hovered over by defining a ‘hover’ color using hexadecimal colors.

The hover color will be #FF0000 (red). [Our regular text will be black based on the color assigned in the tag. ]

When using