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

Troubleshooting – HTML, Graphics, CGI, JAVA

AdminP — Tue, 16 Mar 2010 01:01:54 +0000

Murphy’s Law does not discriminate when it comes to writing pages for your website or blog. Regardless if it’s HTML, graphics, CGI, or JAVA , you’re bound to run into some ‘glitches’ along the way. While understanding and knowing how to use the program you’re working with is a big plus – you can track down and fix some problems by having just a basic understanding of how a program works and knowing what to look for. The following are some of the more common errors you might encounter when writing a document or using images . . . along with a few simple fixes to consider.

HTML

If the document displays everything as bold, italics, underlined, centered, etc. – check for beginning and ending tags for the code, i.e., bolding, underlining, centering, font characteristics, etc. You will find most of the time this will be a very quick fix to most problems. (I know . . . this one was a ‘no brainer’)

Tables give you a lot of control on how your information is displayed, however they can also be a real challenge. If you find your tables are out of alignment, columns are offset or the background images or colors you input do not display, try the following:

Make sure all tables (including nested tables) have open/close tags for rows , and columns , , and the table(s) have both beginning/ending table tags ,
.
Make use of ‘colspan’ tag when you want a single column in a table to span multiple columns, i.e., where ‘N’ is the number of columns you want to span.
If your colored background doesn’t display or is not the right color – check for the # before the hexadecimal color – leaving this symbol out will cause a problem. Also check for the double quotes ( “ ) before and after the hexadecimal color – this will also cause an off color to display.
If using a background image for the page or in a table, make sure the image has been uploaded and the path in the document BODY tag or the HTML ‘background’ tag for the table, row or column is correct.

Links help visitors navigate your website quickly, however, getting a 404 Error is definitely not cool. Always check links to make sure they are working once a new page has been uploaded. If they don’t and you get a 404 error, check for the following:

Verify the page file extension used in the link is the same as the extension for the page uploaded. For example, a page with an .htm extension is not seen as the same document as a page with an .html extension
Use absolute links in the document – the complete file name – and check for any typo’s in the name. While you can type in a www.domain name with mixed upper or lower case letters and have it work, a page name is case sensitive and must be exactly the same.
Verify the page you are linking to is available on line.

Graphics/Images

Images can be a real plus but if they don’t appear as planned – seeing an empty white box is not good, making the page look unprofessional. Some common fixes for missing images are:

Verify the image’s file extension is correct in the code, i.e., jpg, gif, png, etc.
Look for typo’s in the name. Like page names, the image name is case sensitive.
Are the double quotes where they should be? Not having the complete code correctly written for every aspect of the image name and it’s attributes can cause a problem.
Verify the folder where the image resides is same as the folder used in the document code

If your picture is in a folder named ‘images’, the following would be true:

Correct:

Incorrect:

Verify the image has been uploaded and is visible on line by typing the address of the image into the address bar. Sometimes there can be a problem during uploading and uploading the image again will take care of everything.

CGI/JAVA

CGI is a great way to get information from your visitors but it can be very frustrating trying to track down why a form may not be working correctly. These are some of the most common culprits:

Has the CGI script been configured to work with your domain’s unique IP address?
If you are using an email within the document, does the email reside within yourdomain.com? , i.e., inforequest@yourdomain.com
Has the CGI script been uploaded to the designated folder in yourdomain.com? (Typically CGI-Bin)
If using an email with a CGI script, have the email addresses been included in the script you uploaded to the CGI-Bin?
Do the ‘field names’ in the document correspond to the names used in the body of the document?
Are there spaces in the ‘field names’. If so, remove them and then change the corresponding NAME in the body of the document to match.
Check for typo’s – all field ‘names’ used must be exactly the same wherever they are used in the same document.

JAVA can add a new twist to a page and give your visitor many options, i.e, share, bookmark, email, and best part, you don’t need to know how to write JAVA. However, tracing problems can be difficult if you don’t have any basic knowledge of how JAVA is written so as to separate the ‘instructions’ from the ‘meat’ of the script. The JAVAScriptSource is a good start for learning the basics before you try your hand at using JAVA. And, if you run into any snags – try these solutions before you decide to ‘not use’ the script at all.

Has the script been configured, i.e., do you need to replace the image locations in the sample script you downloaded with the correct addresses for the images that you’ve uploaded to yourdomain.com? Are the images the correct size to work with the JAVA script?
Has the JAVA script (processing portion) been uploaded to the yourdomain.com?
If the JAVA script has been uploaded to yourdomain.com, has the correct processing script name been placed in the document’s HEAD Section?

HEAD Section Example:

If the JAVA script (processing portion) is not uploaded to yourdomain.com, has it been placed into the HEAD section of the document? (Cumbersome, but if you only have 1 page you may find doing this easier and less likely to have a problem .)
Verify there are no typo’s in the JAVA script name (processing portion) placed within the document HEAD section.
Have you included all of the variables inside the document body that are needed for the script to work?
If you are using images, are the paths to get to the images correct? and Do they show residing on yourdomain.com?

These are some of the more common things to look for when troubleshooting a page. Hopefully you’ll find some of them useful and maybe save you a few minutes of time.

6 Basic Uses for Images and Graphics

AdminP — Wed, 02 Dec 2009 19:24:36 +0000

Generally speaking, we think of having images and graphics on a website or blog as a good way to make it more attractive. However, images can be used in other ways to enhance your pages and highlight certain elements.

1. Image or Graphic Logo

The obvious use for an image is for the logo – or ‘brand’ – for that website or blog. You want to have an image that is always associated with your website and your business. You can use different variations and sizes of that ‘branded’ image, but you want to maintain the continuity of your ‘brand’ by using the same colors, fonts, and having one singular image that the visitor will always associate with your website.

2. Background Images

You can create a wide variety of background images using graphics to draw attention. These backgrounds can be used on pages, as table backgrounds, or even in specific parts of a table, i.e., row or column. Since background images tile, the background will be covered with as many images as needed to fill the space. This means you only need to upload 1 relatively small file that when ’tiled’ will fill in the whole area .

Example: You have a background image that is 150 pixels x 150 pixels. You want to use it in a table that is 600 pixels x 300 pixels in size. On viewing the table, the background would display the image in a configuration of 4 columns x 2 rows – thus filling in the whole table area neatly. [ Click on the image to see how a tiled image would display in a table 600x300 pixels in size. ]

3. Image Maps

This allows you to take any image – and by using the ‘image map’ code within the HTML page – link from portions of the image to any other page or website simply by clicking on the image’s ‘mapped’ sections. This is a useful tool if you want to use a map, storefront-style image or navigation bar for creating hyperlinks.

Example: The ‘clean’ navigation bar would be the image the viewer would see. The ‘highlighted’ navigation bar shows the areas of the image that would be ‘mapped’ and clickable as links.

4. Single Hyperlink

Images can be displayed as a button or other unique graphic to be used as a link rather than a word or phrase. Having a graphic makes for a more attractive page and helps the visitor locate the link more quickly. While you probably wouldn’t want to use a graphic link in mid-sentence, they are particularly effective for forms or conversion pages.

5. Shim Pixel

A transparent shim pixel is most commonly thought of as being used for inserting blank space into HTML pages. For example, you may want more blank space to separate text or pictures; maybe you may want to move something to the end of the line to draw attention to it. Using pixel shims is one way to accomplish this.

To use pixel shims you create an image 1 pixel x 1 pixel in size and save it as a transparent image. Then when you want to insert blank space, you simply insert the transparent pixel image and assign the size of ‘empty space’ you want. Since the shim is only 1 x 1, it will virtually be unseen if left at that size, however, when you assign different height and width parameters – it will take up that area and still remain invisible.

6. Animations

Use animated graphics or images to showcase different aspects of one image, rotate banners, or create a ‘flashing’ effect with alternating colors of text or backgrounds. Animations can be an effective way to show more images in a limited space. However, if an animation is to be used for hyperlinking, you can only use one link per completed animation. You will not be able to link each individual picture to separate pages or websites. In order to link individual images, you will need to use a JAVA script.

Learning how to use graphic and image isn’t difficult and can be a lot of fun. Our graphics program of choice is Paint Shop Pro 7 . . . available through the Amazon link - Software Category. PSP has everything you need to create excellent graphics, it is easy to use and is very affordable . . . so get creative!

Images – JPG & GIF

AdminP — Wed, 14 Oct 2009 16:40:53 +0000

Graphics, images and colors never fail to attract attention – and you will want to use some form of images on your website. This might be your logo, pictures of your products, animations and/or symbols. There are many different types of graphic and image files but for our purposes today we will be talking about the two most widely used image formats – JPG and GIF.

JPG stands for Joint Photographic Group
GIF stands for Graphical Interchange Format.

The main difference between the two is the number of colors used in the image. A JPG image will use 16 million colors while a GIF image will use only 256 colors.

You can probably figure out for yourself that an image with 16 million colors will be a sharper image than a GIF image with 256 colors. And while this is true, the JPG image file will be larger in size. For example: An 800 x 800 pixel size JPG graphic might have a file size of 1.2 MBytes, where as the same image in the GIF format would have a file size of 812 KBytes. You can see there is a significant difference.

This becomes important if you have limited hosting space or if the image is very large and you want your page to load quickly. You will have to give some thought to which format to use depending on your need. The larger the file, the slower to load – particularly if the visitor to your page is on dial-up Internet service. I have found that in most cases there is very little difference to the eye between a JPG and a GIF. And, while you may notice a difference on your monitor, remember that you have no way of knowing what type of monitor the viewer will be using to view your website. This can effect the quality of the image dramatically. Therefore, my preference is to always opt for fast loading.

Animation

Whether or not you use animation is based on what message the graphic is trying to convey. Will the animation be of benefit or will it be an irritant? Some people do not like repeated movement and personally there are a few pages I won’t visit because of the irritating animations.

If you decide to use an animation:

Consider the size and number of graphics inside the animation
What message are you are trying convey

Do you want to grab attention with the word ‘FREE’ and then have the second graphic in the animation display the ‘free offer itself’? If so, how many times do you want this animation to display? Once? Twice? or Continuous? And at what speed. You must decide what best serves your purpose.

Yes, you want to get attention, but not at the expense of loosing your viewers. Also, you should consider how long will it take the animation to load. The larger the file – the longer the load time. Ask yourself . . . “Is it a good trade off to have an animation that takes 10-15 seconds to load vs. a single image that will load is less than 3- 5 seconds?”

If the animation is only meant to attract attention to a particular section of the page you can look at animating smaller images. In this case, the animation might simply be having an alternating ‘word/graphic – word/graphic’ theme or the same word on two different colored backgrounds.

Good graphics and images can make a page zing – look at how Bing uses different photos daily to get people to return to their site . Get a good graphics program and then learn to use it. Play around with different images and techniques. There are some free programs out there you can download and use, one of which is Gimp. However, if you are planning on building a business, you will need a good graphics program that offers a variety of tools and effects. A good, affordable graphics program is Jasc Paint Shop Pro 7.0. It gives you all the applications – including animation – that you will need.