How to Choose a Free Shopping Cart

There are 100′s and 1000′s of free not so free shopping carts out there which make it very difficult to choose and decide what would work best for your business model.

You can spend countless hours just looking for the right solution and then end up even more lost and confused. But the best way is not by research but by trying it out yourself. So to save you some time, I’ve put a list of the best 4 carts here at the end of this page.

This list comes from my experience as a developer and setting up, installing, configuring and showing clients how to use the system. I also get a good amount of feedback from clients.

So here is my suggestion and this is the one I make to all of my clients. If you have just a few items to sell, let’s say 10 or less and you don’t plan on adding any new inventory, then the best and easiest solution would be Paypal.

Now Paypal has a few different option. The easiest one would be Paypal Standard. You can create “Buy Now” buttons and “Add to Cart” Buttons for each of your products directly in your Paypal account. Then you simply copy and past the code they provide to your current website. You need a Paypal Business account and a website to do this.

Make sure you customize your web pages to give your visitors easy access to your Paypal buttons. Display the price and any pricing details like shipping etc. prominently so there are no surprises. You can also ask an expert to help you customize your page for the best response.

Now lets say you have more than 10 products and you will be adding to your inventory on a regular basis. In this case you need a shopping cart software that will give you some flexibility and control.

Below are some of the top open-source e-Commerce solutions that give you features to help you manage your inventory, orders and shipping all without any technical knowledge. They are all almost too good to be free. You’ll need an hosting service and domain.

The reviews here are based on my own experience and feedback from my clients. These are all fairly easy to install and setup.

  1. CubeCart. This is by far one of the most user friendly in a technical and not technical sense. Clients who I’ve set up CubeCart for find it very easy to manage and use. It’s just intuitive. I spend less time teaching them how to use it because they can easily figure things out. Customizing the look and feel is also pretty easy to do. It’s full featured and is very flexible.

    Cubecart has a paid and free version. The paid version does offer some additional features and depending on your needs the license fee can be well worth it.

    The only downside to the free version is that you have to leave the Cubecart logo on the footer and you can’t disable the login requirement.

  2. Magento is also a good one. It looks great and has some excellent features. The downside is that many people report that it is slow in performance, even on dedicated servers. It’s not easy to manage and customize like some other carts out there. Beginners find it difficult to use. It’s just not very intuitive.

  3. Zen Cart has all the features you need to manage inventory, but it’s a little lacking in customizing. And it just doesn’t have a very user friendly layout. It’s easy to use and manage though.
  4. OSCommerce is a great one with full functionality in managing and also customizing but it is one of the harder ones to use. It really requires some good technical know how to set things up and configure the thing. Once it’s all setup though it’s easier to use and manage. It’s probably one of the best free carts out there.

How to Create Thumbnail Image Viewer

A thumbnail image viewer can add a nice touch to your website when you have a gallery of photos or images that you’d like to display on one page. Your users will be able to view larger versions of the photos or images. This way you can display many more image on just one page.

Vegetables

You need two files to do this, the Javascript code and the CSS code.

  1. First thing you need is the Javascript for the popup of the image. Right click here to download the Javascript. Select “save link as” to save the file to your computer.

  2. You’ll also need some CSS code for the styling. Right click here to get the CSS code.

You also need images. You only need the larger size of the image, not the thumbnail. The thumbnail is taken care of in the code with CSS code. Just make sure the image is the size you’d like to display in the pop up.

Both files will need to go on your server somewhere. Make not of the path where you upload the files to. Then you’ll need to include them in your HTML code. Below is a simple example of how the HTML code will look.

The following two lines of code go in the <head></head> tags of your HTML file.  Make sure you change the path to point to right location on your website.  Replace “yourdomain” with your own domain name.

<link rel=”stylesheet” href=”http://www.yourdomain.com/thumbnailviewer.css” type=”text/css” />

<script src=”http://www.yourdomain.com/scripts/thumbnailviewer.js” type=”text/javascript” ></script>

Then add the code to the body of HTML code. Make sure to replace “yourdomain” with your domainname and “name-of-your-image” with the actual name and extention of your own image.

<a title=”This is a picture of vegetables” rel=”thumbnail” href=”http://yourdomain.com/images/name-of-your-image.jpg”>Vegetables</a>

<a title=”This is a picture of vegetables” rel=”thumbnail” href=”http://yourdomain.com/images/name-of-your-image.jpg”><img style=”width: 50px; height: 50px;” src=”http://yourdomain.com/images/name-of-your-image.jpg” alt=”" /></a>

Thats it. You can add as many images as you like to one page. This code may have some issues in older versions of IE. It hasn’t been tested in all of them. But it works in most major browsers.

How to CSS?

How to CSS? Learning how to use CSS in your websites is one of the best things you can do to build a better website.  CSS is a powerful styling language used to format and style a website’s look and feel.  It has capabilities beyond in-line HTML formatting and is much more flexible.

CSS allows you to separate the content of your website from the way you present it.  Colors, font sizes, layout details can be inserted into an external document called a stylesheet.  This contains the CSS code which formats your html documents.

Making formatting changes to your webpages becomes much more maintainable.  You only need to modify a stylesheet, which is one file versus all of your html files.  As a site grows and you increase the number of html pages this separation becomes crucial in maintainability.

So how to CSS?  How do we separate formatting and styling exactly.  Let’s look at some examples.

Let’s say that the title of your pages are all within an <h1> tag.  And you want a specific font size, color, bold etc for that heading or <h1> tag.  So your HTML code looks like the code below.

<h1><font size=2 color=blue><b>This is the title of my page.</b></font></h1>

This is the title of my page.

So the above is my h1 look.  Now this is the title on all of my HTML pages.  Now lets’ say you have 50 pages on your site with the above code and you want to modify the color on your page titles.  You have to now go modify and re-upload 50 pages.

The better way is strip out the style and put it into an external stylesheet.  For example the above code would look like this with the styling stripped out.

<h1>This is the title of my page.</h1>

Then you create a stlye.css file which contains the code to style the above h1 tag like this.  You’ll have to include the file into the html page.  To do this you’ll add a line of code between your <head></head> tags in your HTML files.

<link href="style.css" rel="stylesheet" type="text/css" />

h1 {

font-size=28px;

color=blue;

font-weight: bold;

}

So now when you want to change this across multiple pages you modify just one file and it takes effect across all of you HTML pages.

If you have alot of styling in your HTML files, take the time to strip it out and create a stylesheet instead.  It will be worth your time in the long run.  It’s good to learn some basic CSS before you start and then use it and learn as you go.  The more you use it the more you’ll learn.

How to Format CSS Links

Question:
Is there a way to have different looks for different links?

For example, can some have a blue underline, some a different color underline, some no underline until someone hovers their mouse over them?

I was thinking about h1, h2, h3, etc. Is this kind of variety possible using a stylesheet, too?

Answer:
You can define different styles for each link. See the examples below. You’ll notice that the html portion of the code all look the same on the examples. But the CSS code for each one is different.

This is the flexibility of the CSS. You can modify the CSS file and the change will effect every document that uses it.

This is a blue underlined Link. When you hover over this link its color changes and the underline is still there.

The following is the HTML code.

<a class=”underlineLink” href=”http://www.example-link.com/example.html”>This is a blue underlined link </a>

The <a> is the HTML tag for creating a link. The class inside this tag defines the style element in your stylesheet. The href points to a document or webpage you want to link to.

This is the CSS code which goes in your style sheet.

a.underlineLink {
text-decoration: underline;
color: blue;
}
a.underlineLink:hover {
text-decoration: underline;
color: red;
}

This is a blue link but not underlined. When you hover over this link its color changes and it’s underlined.

The following is the HTML code.

<a class=”underlineLink” href=”http://www.example.com/example.html”>This is a red not underlined link</a>

This is the CSS code which goes in your style sheet.

a.no-underlineLink {
text-decoration: none;
color: blue;
}
a.no-underlineLink:hover {
text-decoration: underline;
color: red;
}

10 Reasons (Benefits) to Create Small Business websites

If you own a small brick and mortar company you are probably considering creating a website if you don’t already have one. The benefits for a small business are crucial, and having a website is a great way stay ahead of your competitors. Listed below are 10 reasons why every small business entrepreneur needs to create small business website.

  1. Changing buying habits – Already a good number of people buy things online, pay for services online and do many financial transactions online. Even those who shop at the normal brick and mortar store will often check online to see if what they need is available online, compare prices and make a tentative decision. Having a website will at least ensure that if someone needs to buy something online that you sell, they will find you.
  2. So simple you can do it yourself – It does not have to be flashy and have complex features. Just a simple and informational website will do and you can then develop it from there as the business itself grows. The internet itself provides a wide range of templates that you can choose from and use. Troubleshooting is simple. If you have technical difficulties your hosting company should have a support center that can help. If they can’t fix your problem from their end they can usually walk you through it with easy directions.
  3. Inexpensive – You can not only do it yourself, but the tools you need to create small business website are available either free or at a relatively low cost. Even maintaining a small business website is less expensive than you might think. You can find a website host for as little as $5 per month, and an exclusive domain name, or URL for a small annual fee. You can update your website from the comfort of your own home, at any hour, without the need to hire additional personnel.
  4. Go national and global – Traditionally, small businesses reach was limited to their locale. When you create a website for your small business, you increase your audience not only nationally but globally.
  5. Image – A web presence is one way to drive your credibility a notch higher. Another thing to note when you create small business website is that it usually comes with an email address under the same domain name which cuts a more professional image than using an internet email account.
  6. Avenue for feedback – You can create a website that includes a functionality for clients to get back to you. This may be both in terms of enquiries or even complaints on the quality of product or service the client received.
  7. 24 hour access – You no longer need to keep your brick and mortar office open in order to qualify as a 24 hour establishment. With a website, someone can communicate with you any time of day from wherever they are on the planet.
  8. Information Portal - One way you can establish your business is by becoming a trusted source of information not only which relates to your business but to your industry as a whole. Create small business website with this angle and people will not only come to read substantive information but a number will end up buying your product.
  9. The competition – In the early and mid 90s, creating a website was considered the forte of Fortune 500 or similar sized companies. Times have since changed and it is very likely that your competitors are on the web too. Create small business website to make sure you are not at a disadvantage online.
  10. The future is on the Internet - Almost everything we do today has a digital component. Increasingly, more things we do have an Internet component. Any business that does not plan to take advantage of the internet risks extinction.

Javascript and CSS Dropdown Menu

Creating an interactive css dropdown menu for you site is a great way to add some interactive element to your site and also to user’s can get to a place in just one click.

The nice thing about a javascript or css dropdown menu is that you can have many more links in your navigation and it’s a great way to organize your menus. Horizontal dropdown menus are more accessible than the vertical or flyout type menus.

People with arthritis or other type of mobility problems can have difficulty moving the mouse to the desired menu item. Sideways ones are even more difficult. It’s important that the menu incorporates some method of delay before it disappears.

If you have just a few links or pages on your site then a dropdown navigation may not be a sensible or choice. But if your site is large and filled with 100′s of pages a dropdown navigation is a great way to offer more links upfront in your menus.

Below is an example of a javascript and css dropdown menu that has some delay and is horizontal. It can easily be customized and re-styled to you basic needs.

Click here to download the files. Or right click and select “Save Link As”

How to Add HTML Special Characters To A Webpage

Adding special characters to your website can sometimes become tricky.  Some editors interpret the code correctly and some don’t.  And sometimes everything looks fine on your computer then when you upload the page to your website, the characters are all wrong.

So the best way to insert them is to use the entity numbers or entity names in your codes directly.  Don’t rely on your editor especially if you’re having problems.

Here is a handy list of special characters and the entity codes needed to display special characters properly in browsers.

Characters such as Á and Õ need the entity number or entity name in your html code.

HTML Special Characters (Uppercase)

HTML Special Characters Entity Number Entity Name Description
À &#192; &Agrave; capital a, grave accent
Á &#193; &Aacute; capital a, acute accent
 &#194; &Acirc; capital a, circumflex accent
à &#195; &Atilde; capital a, tilde
Ä &#196; &Auml; capital a, umlaut mark
Å &#197; &Aring; capital a, ring
Æ &#198; &AElig; capital ae
Ç &#199; &Ccedil; capital c, cedilla
È &#200; &Egrave; capital e, grave accent
É &#201; &Eacute; capital e, acute accent
Ê &#202; &Ecirc; capital e, circumflex accent
Ë &#203; &Euml; capital e, umlaut mark
Ì &#204; &Igrave; capital i, grave accent
Í &#205; &Iacute; capital i, acute accent
Î &#206; &Icirc; capital i, circumflex accent
Ï &#207; &Iuml; capital i, umlaut mark
Ð &#208; &ETH; capital eth, Icelandic
Ñ &#209; &Ntilde; capital n, tilde
Ò &#210; &Ograve; capital o, grave accent
Ó &#211; &Oacute; capital o, acute accent
Ô &#212; &Ocirc; capital o, circumflex accent
Õ &#213; &Otilde; capital o, tilde
Ö &#214; &Ouml; capital o, umlaut mark
Ø &#216; &Oslash; capital o, slash
√ô &#217; &Ugrave; capital u, grave accent
√ö &#218; &Uacute; capital u, acute accent
√õ &#219; &Ucirc; capital u, circumflex accent
√ú &#220; &Uuml; capital u, umlaut mark
√ù &#221; &Yacute; capital y, acute accent
√û &#222; &THORN; capital THORN, Icelandic

HTML Special Characters (Lowercase)

HTML Special Characters Entity Number Entity Name Description
ß &#223; &szlig; small sharp s, German
à &#224; &agrave; small a, grave accent
√° &#225; &aacute; small a, acute accent
√¢ &#226; &acirc; small a, circumflex accent
√£ &#227; &atilde; small a, tilde
√§ &#228; &auml; small a, umlaut mark
å &#229; &aring; small a, ring
√¶ &#230; &aelig; small ae
ç &#231; &ccedil; small c, cedilla
è &#232; &egrave; small e, grave accent
é &#233; &eacute; small e, acute accent
ê &#234; &ecirc; small e, circumflex accent
ë &#235; &euml; small e, umlaut mark
ì &#236; &igrave; small i, grave accent
í &#237; &iacute; small i, acute accent
î &#238; &icirc; small i, circumflex accent
ï &#239; &iuml; small i, umlaut mark
√∞ &#240; &eth; small eth, Icelandic
ñ &#241; &ntilde; small n, tilde
ò &#242; &ograve; small o, grave accent
ó &#243; &oacute; small o, acute accent
ô &#244; &ocirc; small o, circumflex accent
õ &#245; &otilde; small o, tilde
ö &#246; &ouml; small o, umlaut mark
√∏ &#248; &oslash; small o, slash
√π &#249; &ugrave; small u, grave accent
√∫ &#250; &uacute; small u, acute accent
û &#251; &ucirc; small u, circumflex accent
ü &#252; &uuml; small u, umlaut mark
√Ω &#253; &yacute; small y, acute accent
þ &#254; &thorn; small thorn, Icelandic
ÿ &#255; &yuml; small y, umlaut mark

How To Create HTML Links That are Page Jumps


HTML links that are page jump are links that take you to specific part on the same page. They are used on long pages to make it easier for the user to click on a link rather than scroll down the page.

These links will automatically scroll down to a part of the page or link to a specific part of another page. Normal links take users to the top of a new page.

So how do you create an HTML link that’s a page jump?

They use the same <a> element as any link, but links that point to a certain part of a document. The part of the page that you want to link to will need be assigned a name.

So let’s say you want to point to the bottom of a page, assign a name to the bottom of the page by using the name element like this …

<a name=”bottom”></a>

Nothing goes in between the opening and closing tags.

Then create the link pointing to it by setting the href to the name above but with a pound sign in front of it. The pound is what distinguishes a page jump from a regular link that goes to a different part of the page.

<a href=”#top” href=”#top”>Click here to return to the top of this page</a>

The link below is an example that will take you back to the top of the page.

Click here to return to the top of this page

You can also place this type of link on another page on your website. Let’s say for example I want to link to the middle of a specific page from another page on your website. First you’ll need to assign a name to the middle of the page. For example: <a name=”middle”> <a>
The link will then need to point to the page name or the full URL with a #middle at the end like the example below. Make sure to change the URL to your own.

<a href=”http://www.yourdomain.com/yourpagename.html#middle”>Link to middle of the page</a>

Notice the link is the full URL to the page and then added at the end is the # and middle.
This link will work from anywhere even from another website.

The proper way to use links is to use them to link to another page. But if you must, use them wisely and don’t overdo it. Page jumps should only be used if a page is extremely long and it’s hard to break up the page into multiple pages.

One example would be to use them in Table of Contents as in PDF files.  Another one may be in long lists like that of FAQ’s.  You can list the questions up at the top of the page and then link them to the detailed answers lower down on the page. This way a user can see all the FAQ’s up at the top of the page without scrolling down.

HTML Cheat Sheet

This is a HTML cheat sheet for the most commonly used tags and
attributes.

Most tags have an opening and closing tag.

Basic Tags

<html></html>

Defines the html document

<head></head>

This defines the information about the html document such as the title
and meta tag information.

<body></body>

This is the main content of the document

Header Tags

<title></title>

This is the title of the document and goes between the <head>
tags.

Body Attributes

<body
bgcolor=?>

Sets the background color.  Use the name or hex value of the
color.

<body text=?>

Sets the text color. Use the name or hex value of the color.

<body link=?>

Sets the color of links. Use the name or hex value of the color.

<body vlink=?>

Sets the color of followed links. Use the name or hex value of the
color.

<body alink=?>

Sets the color of links on click. Use the name or hex value of the
color.

Text Tags

<pre></pre>

Preformatted text

<h1></h1>

The largest headline

<h6></h6>

The smallest headline

<b></b>

Bold Text

<i></i>

Italic text

<tt></tt>

Teletype or typewriter-style text

<cite></cite>

Citation which is usually italic

<em></em>

Emphasizes a word

<strong></strong>

Emphasizes a word

<font
size=?></font>

Sets font size, from 1 to 7

<font
color=?></font>

Sets font color. Use the name or hex value of the color.

Links

<a
href=”URL”></a>

Defines a hyperlink

<a
href=”mailto:EMAIL”></a>

Defines a mailto link

<a
name=”NAME”></a>

Defines a target location within a document

<a
href=”#NAME”></a>

Links to that target location on the same page.  Also referred to
as Page Jumps.

HTML Cheat Sheet for Formatting

Formatting

<p>

Defines a new paragraph

<p align=?>

Aligns a paragraph to the left, right, or center

<br>

Inserts a line break

<br /> (xhtml
version)

<blockquote></blockquote>

Indents text from both sides

<dl></dl>

Defines a definition list

<dt>

Precedes each definition term

<dd>

Precedes each definition

<ol></ol>

Defines a numbered list

<li>

Precedes each list item and adds a number

<ul></ul>

Defines a bulleted list

<li>

Precedes each list item and adds the bullet

<div align=?>

A generic tag used to format large blocks of HTML; also used for
stylesheets

HTML Cheat Sheet for Images

Image and Graphical Elements

<img
src=”name”>

Adds an image

<img src=”name”
align=?>

Aligns an image: left, right, center, bottom, top, middle

<img src=”name”
border=?>

Sets size of border around an image

<hr>

Inserts a horizontal rule

<hr size=?>

Sets size (height) of rule

<hr width=?>

Sets width of rule in percentage or absolute value

<hr noshade>

Defines a rule without a shadow

HTML Cheat Sheet for Tables and Table Attributes

Tables

<table></table>

Defines a table

<tr></tr>

Sets off each row in a table

<td></td>

Sets off each cell in a row

<th></th>

Sets off the table header (a normal cell with bold, centered text)

Table Attributes

<table
border=#>

Sets width of border around table cells

<table
cellspacing=#>

Sets amount of space between table cells

<table
cellpadding=#>

Sets amount of space between a cell’s border and its contents

<table width=# or
%>

Sets width of table in pixels or as a percentage of document width

<tr align=?>
or
<td align=?>

Sets alignment for cell(s) (left, center, or right)

<tr valign=?>
or
<td valign=?>

Sets vertical alignment for cell(s) (top, middle, or bottom)

<td colspan=#>

Sets number of columns a cell should span (default=1)

<td rowspan=#>

Sets number of rows a cell should span (default=1)

<td nowrap>

Prevents the lines within a cell from being broken to fit

HTML Cheat Sheet for Frames and Frame Attributes

Frames

<frameset></frameset>

Precedes the <body> tag in a frames document; can also be nested
in other framesets

<frameset
rows=”value,value”>

Defines the rows within a frameset, using number in pixels or
percentage of width

<frameset
cols=”value,value”>

Defines the columns within a frameset, using number in pixels or
percentage of width

<frame>

Defines a single frame within a frameset

<noframes></noframes>

Defines what will appear on browsers that don’t support frames

Frames Attributes

<frame
src=”URL”>

Specifies which HTML document should be displayed

<frame
name=”name”>

Names the frame so it may be targeted by other frames

<frame
marginwidth=#>

Defines the left and right margins for the frame; must be equal to or
greater than 1

<frame
marginheight=#>

Defines the top and bottom margins for the frame; must be equal to or
greater than 1

<frame
scrolling=VALUE>

Sets whether the frame has a scroll bar; value may equal “yes,” “no,”
or “auto.” (The default, as in ordinary documents, is auto.)

<frame
noresize>

Prevents the user from resizing a frame

HTML Cheat Sheet for Forms

Forms

For
functional forms, you’ll have to run a CGI script. The
HTML just Defines the appearance of a form.
<form></form>

Defines all forms

<select multiple
name=”NAME” size=?></select>

Defines a scrolling menu. Size sets the number of menu items visible
before you need to scroll.

<option>

Sets off each menu item

<select
name=”NAME”></select>

Defines a pulldown menu

<option>

Sets off each menu item

<textarea
name=”NAME”
cols=40 rows=8></textarea>

Defines a text box area – columns set the width; rows set the height.

<input
type=”checkbox”
name=”NAME”>

Defines a checkbox – text follows tag.

<input
type=”radio”
name=”NAME” value=”x”>

Defines a radio button – text follows tag

<input type=text
name=”foo” size=20>

Defines a one-line text area – size sets length in characters.

<input
type=”submit”
value=”NAME”>

Defines a Submit button

<input
type=”image”
border=0 name=”NAME” src=”name.gif”>

Defines a Submit button using an image

<input
type=”reset”>

Defines a Reset button

How to Embed MP3 Audio Files on Your Website

Do you need to embed MP3 audio files, such as podcasts or songs or other audio files on your website? There are several ways to do this and here you’ll learn how to do this without requiring an external player like QuickTime or Windows Media Player.

Steps to Embed Audio / mp3 Files on your Website

  1. Download the player Right Click here and select “Save Link As”. Save the file to your computer.
  2. Upload the player to your webserver.
  3. Upload your mp3 files to your webserver.
  4. Now all you need to do is add the following code to your html page.
  5. <embed src=”http://www.yoursite.com/media/jwmp.swf?file=http://www.yoursite.com/media/audiofile.mp3&usefullscreen=false&bufferlength=5&autoStart=false&repeat=false” width=”320″ height=”20″ quality=”high” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer”></embed>

  6. Make the appropriate changes to the code above.  Replace “yoursite.com” with your own domain name. Also make sure the path to the files is correct. Replace audiofile.mp3 above with your mp3 file name.