Power to Earn Money

Floating Images – Part II

We’ve seen how to use the align tag to make images ‘float’ to one side or the other of your page. We’ve also seen how the text will wrap around these images. But what if you don’t want the text to wrap?

Since a floated image will affect all the elements that follow it, you will need to insert a special line break: clear to control the text. Using the clear attribute along with the regular br tag indicates that the text should not start until the specified margin is cleared. This ‘specified margin’ would be at the end of the image or images.

How to Stop Text from Wrapping

To stop the text from wrapping you would place the cursor at the place where you want to stop wrapping text and elements to the side of the image. In most cases this will follow the image. The code used would look like:

  – to stop flowing content until there are no more floating images aligned to the left margin

  – to stop flowing content until there are no more floating images aligned to the right margin

You can use   – to stop flowing content until there are no more floating images on either margin

To see how this might look, we’ve taken the same HTML code we used for our last sample, but this time we’ve included the clear attribute to see how the text is affected.

Begin HTML Code Sample (Using clear Attribute):

<table width=”400″><tr><td>

<center>SAMPLE PAGE WITH FLOATING IMAGES & CLEAR ATTRIBUTE</center>

<img src=”/leftfloatimage.jpg” align=”left” width=”150″ height=”75″ />

 

Floating Image . . . Left Side This image has been coded to float to the left of the page using a clear attribute. Notice how the heading and text now display below the image around the image.

<img src=”/rightfloatimage.jpg” width=”150″ height=”75″ align=”right” />

 

Floating Image . . . Right Side Notice how the image floats to the right side of the page… but since we’ve used a clear attribute, the text and heading appear below the image. </td></tr></table>

How to Add Space Around an Image

If you look at the sample above, you’ll see that the text and heading associated with the second image are butted right up next to the images. However, you can use the vspace and hspace attributes to add a margin of space around the images. Both of these are included in the same line of code you would use for the image. For example, to add space around an image you would use the following:

hspace=”x” for horizontal space where x is the number of pixels you want to add on both the right and left sides of the image

vspace=”x” for vertical space where x is the number of pixels you want to add on both the top and bottom sides of the image

Your code might look like …

<img src=”image_name.jpg” align=”left” width=”150″ height=”100″ hspace=”10″ vspace=”5″ />

… where we’ve placed 10 pixels on the left and right side; and 5 pixels on the top and bottom.

Note that you do not have to add both horizontal and vertical space at the same time. However, using this attribute does not allow for adding space to only one side of the image. If you want to have space on only one side of the image or if the space needs to be uneven, you would do better to use a graphics program to add in the blank space.

Don’t miss our post next week, we’ve got a super new FREE program to tell you about.

How to Make Images Float

We’ve seen how an image can be placed in a specific area of a page by using tables. However, you can also include images by using the ‘align’ attribute to make images float along one side or other of the page. If you’re familiar with using Word Press, this ‘align’ process is much the same as inserting images in your post. When you align an image on a page – left or right, you have the image display with the text and other elements wrapping around. The code used to accomplish this is within the page’s HTML code.

Floating a Image on One-side

Sample line of code:

<img src=”image_name.jpg” align=”left” width=”150″ height=”100″ />

Type <img src=”image_name.jpg” [ image_name.jpg is the image name and location of the image on the server ]
Type either align=”left” or align=”right” depending on which side you want the image to float to. Remember, any text associated will flow to the opposite side of the page.
Add other image attributes, i.e., width, height, border, etc. before you….
Type the final /> to close the line
Create the elements, text that should flow next to the image

Floating an Image on Both-sides

To float both left and right side images on one page you put in two (2) lines of code; one for the left image and one for the right image. The screen capture below shows the results when having two (2) images float on one page.

To force the text to wrap for our sample, we’ve put our images inside of a table with a width of 400 pixels. We’ve placed the code used below for reference.

Note: we’ve use the paragraph tag  to begin a new paragraph and have the text align with the new image. Use the  tag to close paragraphs, text, etc. associated with any image.

HTML Code:

<table width=”400″><tr><td>

<center>SAMPLE PAGE WITH FLOATING IMAGES</center>

<img src=”/leftfloatimage.jpg” align=”left” width=”150″ height=”75″ />Floating Image . . .

Left Side This image has been coded to float to the left of the page. Notice how the heading and text wrap around the image.  <img src=”/rightfloatimage.jpg” width=”150″ height=”75″ align=”right” /> Floating Image . . . Right Side Notice how the image floats to the right side of the page, while the text and heading appear to the left. More text will continue to wrap around the image filling in the blank space. </td></tr></table>

Helpful Tips

When aligning images, remember it will be the image that appears left or right – not the text.
Place the image directly before the text it is to ‘disrupt’.
The text will continue to appear on the opposite side from the image until there is no more text or a break is encountered.

Conclusion

This is an easy way to include images and incorporate them with text without having to use tables. However, there may be times when you don’t want the text to wrap. Next week we’ll look at how to stop elements from wrapping and we’ll learn how to add space around a floating image.

More than Hosting – Host Gator

It’s encouraging to see companies moving forward, improving services, etc. and Host Gator – the hosting service we use and recommend – is no exception. For the non-Host Gator (HG) clients out there, thought you might find it interesting to read about some of the enhanced HG features and services we were notified of in a recent email.

Online Credit Card Payments

One of the most interesting was iPayment which is a method to receive credit card payments online. In the past if you wanted to take credit card payments via your web site, you either had to have your own credit card account – which can be pretty expensive if you’re not generating a lot of income – or sign up for and use PayPal. Now, you have another choice – iPayment – offered through Host Gator. The iPayment program has no application fee, no set-up fee, no contract term and instant approval.

Website Development

If you’re putting together your own web site, blog or perhaps doing either of these for others, then you may find that ‘Trendy Site Builder’ is just what you need.

“Trendy Site Builder is a stunning Flash Site Building tool that helps users build websites with a “Wow!” factor. The site builder includes features like image galleries, Mp3/Video player, Paypal integrated Online Store, Contact form, Online Greetings, and much more. One of the stand out features is an absolutely stunning iPhone optimized website that is generated automatically for easy accessibility on iPhone and other smart phones. Ranking on Google and other search engines becomes a breeze with the inbuilt SEO optimization. Install it now to experience the amazing ease with which you can build a stunning website and find out why it is the World’s Favorite Website Builder!”

Of all the available features offered by Trendy Site Builder, we found the one that allows you to create iPhone websites the ‘grabber’ here since everything is moving in the ‘mobile’ direction.

If you’re proficient or even semi-proficient in HTML, you may be interested in one of the following:

Over 800 Word Press themes
Over 5,000 web site templates

Both of the above can be purchased (at a nominal cost) through HG and downloaded. However, if you’re wanting a website but would rather have someone else to do the work for you, get a free web design quote from Host Gator and let them do all the work.

Is Your Site Safe?

Site security is the last element we want to bring to your attention. Security is available through Site Lock Security in three (3) reasonably priced, yearly plans – available at up to 80% off . . . only for Host Gator customers. Use this program to keep not only your website secure but also your customer’s information safe.

Conclusion

Keeping up with the times is important and we hope this brief overview of what’s new at Host Gator will help you make a decision if you’re in the market for an excellent hosting provider. Don’t forget Host Gator also has multiple programs and services – simple installations, stat programs, email, shopping carts, word press, and much more – that make having an online business, website or blog easy and efficient.

Final note: We want to stress that it is the responsibility of each individual to investigate these features beforehand to see if they might be of benefit to their overall business plan as well as fit their budget constraints. When making business decisions, due diligence is imperative – especially in these tough economic times.

HTML: Creating a Marquee

If you want to have a marquee on your page without using JAVA, try using the following HTML code to insert a scrolling marquee anywhere on your web page. Your marquee can be words, sentences, or even images. The information contained in your marquee code will start at one point (on the screen) and float across much like the advertising marquees you see at some businesses.

Marquee Code for our sample text:

<marquee width=”85%” height=”15″ scrolldelay=”175″ behavior=”scroll” direction=”left” loop=”infinite> This is a sample marquee scroll </marquee>

To see this code in action, visit this link…. Marquee

For our sample, we’ve coded our text to scroll across 85% of the screen with a height of 15 (pixels). We’ve set our delay at 175 milliseconds; our direction to scroll is ‘left‘ and we want our loop to be ‘infinite‘. Note: You can use marquee code inside of tables also.

Marquee Attributes

Width and Height – you can assign width and height to your marquee area as either a percentage of the area where the marquee is to display or in pixels. In our sample we’ve used a percentage for the width and a pixel designation for the height.

Scroll Delay – use this attribute to control the amount of time (in milliseconds) that passes before the text scrolls again.

Behavior – allows you to select the type of movement you want to use:

Scroll – use this for text that starts at one side of the screen and disappears off the other side.

Slide – use this for text that starts at one side and stops when it reaches the other side.

Alternate – use this for text that starts at one side and bounces back when it reaches the other side.

Direction – this determines the direction the text starts from (left or right).

Loop – allows you to select the number of times the marquee is to pass across the screen. You can also make the text appear continuously by using ‘infinite’ in place of a number.

Other – additional placement and attributes of the marquee can also be controlled by using the following attributes as well. This information is contained in the first <marquee> tag.

HSPACE (Horizontal space)

VSPACE (Vertical Space)

ALIGN (Align – left, right, center)

BGCOLOR (Background color)

Marquee Content

This code is placed between the beginning and ending marquee tags <marquee> HTML Code for Content Goes Here </marquee>

Images – If you want to use images inside the scroll, keep them as small and as few as possible.

Font – color, face and size: use the same code you would use anywhere else in your HTML docuement to control how the text displays.

A scrolling marquee can be used to highlight a specific section of a page, draw attention to a special offer or display a larger quantity of information that you might think you have space for. Hope you have fun using this bit of code.

Best Toll-Free Provider & Why You Need an ’800′ Number

While having a successful Internet business depends on your knowledge of

Site Layout
HTML
Graphic design
SEO (Search Engine Optimization)
ROI (Return on Investment)
Social Networking, etc . . .

there are also other aspects to consider that can make your business page stand out and give your company ‘implied’ size, value and authority as well as offering customer convenience.

One of these is to have an ’800′ or toll-free number from Kall 8 for your company. And before you say, “yes, but everyone has cell phones”, let’s look at some of the advantages when you have an ’800′ number.

Size – How big is your company?

Having an ’800′ number for your company that you can also display on your web page, implies your company is large enough to ‘afford’ such services. It also allows people to contact you from their home or from a ’click’ on your web page without incurring any phone charges. Most people when given a choice will call the ’800′ number before they will call a traditional number – even from their cell phone.

Value – Where can you use your toll-free number?

When you have an ’800′ or toll-free number not only can you can use it on your web page but also anywhere else you want to take advantage of advertising.

Business Cards
Invoices
Letterhead
Newspaper ads
Flyers
Brochures
Coupons

Included Features From Kall 8

In addition to being able to choose your toll-free number from Kall 8, there are 10 included features we think you’re going to like. *. (I might add that the basic service starts as low as $2.00 a month for basic service.)

For the small business owner, having access to these services are invaluable. The services available are:

1. Voice Mail & Fax – set your mailbox to receive both or either; record a personal message; set number of seconds before voice mail answers; set length of caller’s message; and more.

2. Web Call Button- receive calls directly from your web page with the click of a button.

3. Virtual Calling Card – make calls using your Kall8 number by dialing any one of the Voice Mail access numbers to make outbound calls. (Some fees apply)

4. Conference Calling – connect with up to 25 participants, any time, for as long as you like. (Some fees apply)

5. Call Blocking – customize the in-coming call area and block or allow calls by state, area code, area code + prefix or even specific phone numbers. Have the blocked calls directed to either a busy signal, continuous ringing, error message or directly to voice mail.

6. Custom Call Forwarding – schedule your calls to forward automatically to different numbers based on time of day, area code, specific number or state of origin.

7. Call Notification Emails – receive an instant email notice every time your ’800′ number is called.

8. Maximum Call Length - set the maximum time allowed that an answered call can stay connected; can also be used with Voice Mail if that feature is enabled.

9. Called ID - choose whether to display the caller’s number on incoming calls. This is useful if you have multiple ’800′ numbers ringing on the same phone as this will identify which ’800′ number was called and answer accordingly.

10. Online Management – Kall8 has online account management that includes a variety of tools to help you track your calls with regard to call detail and campaign analysis.

If getting a toll free telephone number is in your business plans, take a moment and review what Kall8 has to offer ….we think you’ll be surprised and pleased at all the features Kall8 has to offer – we were.

* These features were available when this post was uploaded. For more detailed information on Kall8, cost and services available please visit Kall8 website.

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

Categories

Pages

Search PTEM

Floating Images – Part II

How to Stop Text from Wrapping

How to Add Space Around an Image

How to Make Images Float

Floating a Image on One-side

Floating an Image on Both-sides

Helpful Tips

Conclusion

More than Hosting – Host Gator

Online Credit Card Payments

Website Development

Is Your Site Safe?

Conclusion

HTML: Creating a Marquee

Marquee Attributes

Marquee Content

Best Toll-Free Provider & Why You Need an ’800′ Number

Size – How big is your company?

Value – Where can you use your toll-free number?

Included Features From Kall 8