|
|
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.

…..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.

….. 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.

……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’.

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
<marquee width=”100%” height=”15″ scrolldelay=”175″ behavior=”scroll” direction=”left” loop=”infinite”>Sample Scroll </marquee>
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 <onmouseover=document.imagename.scr= “> tag to show the alternate image and a <onmouseout=”document.imagename.scr= “> 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 <nobr> at the beginning of the text string and a </nobr> tag at the end.
Example: <nobr>202-123-4567, PO Box 123, NY, NY 11229</nobr>
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 – <style>. If you are using one single table to enclose the whole of the information displayed on the web page, this code will affect the location of that table.
If the first tag is not a table, but say is an image, i.e., banner - then the image will display based on the <style> definitions.
For example, the code below sets the font face and size (10px) used within the body, table column (td) and table headings (th). It also sets the body margins for left, top, right and bottom as well as the background image. In our example, all margins are 0.
If you want some ‘padding’ space to the left and/or to the top of the table/website contents, then you would change the 0px to reflect the amount of space you want there.
<style type=”text/css”>
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(gradient.jpg);
}
</style>
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,
<a href=”http://www.yourdomain.com” title=”This link will open in a new window”>Link Text Here </a>
. . . 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.
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,
<style type=”text/css”>
a {text-decoration: none}
a:hover {color: #FF0000}
</style>
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 <body> tag. ]
When using <style> code to assign link colors, note that it will override the link information in the <body> tag. You should also remember if you make any of the link colors (visited or active) the same color as the rest of the page’s textual content, i.e, black, your visitor most likely will not be able to tell which words are links or which link they’ve visited. If you decide to have any of the links the same color as the rest of the text on the page, it is a good idea to leave in the underlining.
3. Want to separate a paragraph from the rest of the text and have it stand out?
You can accomplish this by using a ‘Blockquote’ tag – <blockquote>. This is not the same as using an indent. Using this tag will not only indent the block of text but also will drop it a line below the text above. Ending the blockquote – </blockquote>- will place an empty line below the blockquote text before resuming the normal content. The image below is a sample of how a blockquote might look.

Notice how the message “This link will open is a new window” displays when you place your cursor over the image. (This is discussed in Item 10, Part 2)
4. Want to include a straight line on the page without having to use a graphic?
Do this by using a ‘Horizontal Rule’. It can be defined by
- Alignment
- Color
- Size
- Width
- and more
You should know that the width can be designated either as a percentage of the total space available or in pixels.
For example, you want a horizontal rule (HR) within a table that has a width of 500 pixels. The maximum width (100%) that the HR could be would be the defined table width of 500 pixels. If you wanted a HR that was 50% of the table width, it would result in your HR being 250 pixels wide. However, if the HR is outside the table in a ‘stand-alone’ situation and is assigned a 100% width – then it would span the entire screen.
<hr align=”center” noshade width=”100%” size=”5″ color=”#FF0000″>
5. Want to make various parts of an image link to multiple pages?
This is called an ‘Image Map’ . Images can be used for multiple links by making different areas of the image active links. The areas of the image can be defined in different shapes including:
- Rectangular
- Circle
- Irregular
This is accomplished by giving the image a ‘map’ name within the <img src= >tag and then creating a ‘map’ on the same page with the same name that defines the clickable areas and names the pages they link to. Want to learn how to create an image map?
To maximize the value of the Word Press XML sitemap, you’ll want to install a traditional sitemap for your visitors. Not only will this traditional sitemap make it easy for them to navigate your blog but also will direct the search engine spiders to your XML sitemap which is in a language they love.
Dagon Sitemap
We’ll be using the Dagon Sitemap plug-in for our discussion. This plug-in is easily customizable from its own options page. Some of its features are:
- Support for multi-level categories and pages
- Ability to exclude categories or pages
- Multiple page geneartion with navigation
- Permalink support
- You can choose what to display, the order, whether to display comments and/or post dates plus more
Once you have the plug-in installed and activated* go to the ‘settings’. Again the settings may be accessible from the Plug-in page or under the Settings category on the WP Dashboard depending on your WP theme.
Once you are in the settings you can change options if you choose. As before, most of the time the default options will work. However, to get the maximum benefit from having both an XML sitemap and a regular sitemap you will need to input the location of your XML sitemap so a link will display on the pages of the Dagon sitemap. This is very good for search engine optimization because once the robots find your Dagon sitemap it will lead them to your XML sitemap.
You will also have the option for the XML sitemap to be displayed at the bottom of every page (of the Dagon sitemap) or at the end of the last page of the Dagon sitemap. I would opt for every page to maximize search engine exposure.
To have the XML sitemap display you will need to get the location from the settings page on the Google XML Sitemap settings.

All you need to do is copy the code shown and paste it into the “Full path for XML sitemap” on the Dagon settings/options page.

Once you’ve made your changes, update options by clicking on ‘Update’ at the bottom of the page.
How to Display your Sitemap
Great . . . you’ve got your Dagon sitemap options set – including the link to your Google XML sitemap… but how will people see it? Well – really they can’t, that is until you create a page to display it. To do this, go to your WP Dashboard and under ‘Pages’ select ‘Add New’.

Here you will give the page a name, ie., Sitemap – and insert a bit of HTML code. You get this short code from the Dagon website. Once inserted into the body of the new page, your new sitemap can be seen by anyone clicking on that page.
To get the code, go to the top of the Dagon plug-in Settings page where you’ll see ‘For information and updates, please visit:” – click on the link below. This will take you to the Dagon website. Scroll down until you see ‘Installation’. You don’t need to follow any of the instructions but just copy the bit of code shown: <!– ddsitemapgen –>

Return to the new WP page you are creating for your sitemap and using the HTML tab (not the Visual), paste the code you just copied into the body of the page. Your page is now ready to publish.
If everything is working correctly, you should see a link on your blog’s home page to your new Sitemap. On viewing your newly created sitemap page, if you selected to show your XML site map either at the bottom of every page of the Dagon sitemap or at the end of its last page – you’ll see the link(s) to your XML sitemap as well.
Basic Word Press Account
Word Press is a user-friendly platform with hundreds of plug-ins and widgets available. Installing basic Word Press to your .com is easy as 1-2-3 . . . especially with a Host Gator account.
- Log in to your cPanel
- Go to Fantastico (Software/Services)
- Select WordPress, Install to your .com or domain folder
Having a stand-alone Word Press blog is recommended especially if you plan on using it for business purposes.
* To install a plug-in, simply click on ‘Install’ once you’ve located the plug-in you want. WP will automatically download, unzip and install the plug-in – and notify you on completion. Once you see ‘successfully installed’ on the screen, you can ‘activate’ the plug-in. This can be done from the same screen or you can activate (or deactivate) from the WP Dashboard Plug-in page.

We’ve talked about how having an XML sitemap as well as a ‘people-fiendly’ sitemap on your website is beneficial for search engine optimization. But did you know, that these also need to be part of your blog’s plug-in’s to super-charge your Word Press blog in the search engine department.
What’s the Difference?
An XML sitemap is ‘search engine spider’ friendly making it easy for the ‘spiders’ – aka robots – to follow all the links. Depending on which XML sitemap generator you use, you can see from the sample below ( using Google XML Sitemap) that it would be difficult for a human to use the information:
XML Sitemap Sample:
- <url> – identifies the start of the URL
<loc>http://powertoearnmoney.com/ptem-policy/</loc> – acutal URL
<lastmod>2010-04-22T19:56:40+00:00</lastmod> – when the page or post was last modified
<changefreq>weekly</changefreq> – identifies the frequency of change
<priority>0.6</priority> – assigns a priorty
</url> – closes the URL information
However, a traditional site map is people-friendly and allows humans to easily locate posts and/or topics. You’ll also notice that not only are the main categories of your blog shown, i.e, Domain Name, but also the sub-categories are displayed, i.e, Subdomain.

Which Sitemap Plug-in’s To Use
There are many different plug-in’s available and when in doubt, I find it typically best to use the one that has the highest ‘star’ rating. For my blogs I like to use these sitemap plug-ins:
- Google XML Sitemap
- Dagon Sitemap
They are both easy to use and install, and configure with minimal effort.
Google XML Sitemap (GXS)
To save a little time and keep from back-tracking, you’ll want to install the XML sitemap first. This will make sense later on when you install the Dagon sitemap. Once you have the GXS installed and activated*, you can access the settings through the ‘settings’ link on the plug-in page or from the ‘XML-Sitemap’ link under the ‘Settings’ heading in the WP Dashboard. Either way will get you to the same configuration page.

Once there you will need to build your sitemap for the first time. Simply click on the link to ‘build sitemap’. Once this is done, you may also want to configure the options. While most of the default options will work, you can change the settings if you choose – making sure to click the ‘Update Options’ button at the bottom of the page once the changes have been made.
On the Setting page some of the basic options that are important are:
- Rebuild sitemap if you change the content of your blog (will automatically do this if checked)
- Update notifications to Google, Bing, Ask and YAHOO (you’ll need to get an application ID for Yahoo, click the link and follow prompts to get ID)
- Add sitemap to the virtual robots.txt file (If you do not have a irobots.txt file plug-in installed , you may want to consider installing it as well. )
- Additional pages – allows you to include or exclude pages. These can be HTML pages that are uploaded to the same domain name as you blog but are not a post or part of the WP blog itself.
- Post Priority – uses blog comments to assign priority. If you do not allow comments or do not have a lot of comments, you may want to select ‘do not use automatic priority calculation’ – this will give all your posts the same priority.
- Set the ‘change frequency’ for each page, category, etc. based on how often you post or make changes.
- Location of your sitemap – you do not need to do anything here, but do take note of the location as you will need it for the ‘people-friendly’ sitemap plug-in to be installed next.

Once you have the XML sitemap installed you are ready to install the traditional site map.
Easy & Quick with Fantastico!
* To install a plug-in, simply click on ‘Install’ once you’ve located the plug-in you want. WP will automatically download, unzip and install the plug-in – and notify you on completion. After you see the ‘successfully installed’ notification on the screen, you can ‘activate’ the plug-in. This can be done from the same screen or you can activate (or deactivate) from the WP Dashboard Plug-in page.
|
Sponsored Ads

Recession Blues?

Join FREE Today!
www.affilorama.com
|
ROBOFORM Password Manager Remembers passwords for you

GoDaddy.com World's No. 1 Domain Registrar

|
Your life is your computer.

Can you afford to loose it? Get Your FREE Trial
|
Get the Un-fair Advantage Updated Monthly !
We've been with Planet Ocean since 1997 - they're the best!
Email Marketing made EASY!

Get a FREE Bonus when you sign up today . . .
Yes! I want the bonus! click here |
|