It’s not that difficult to learn how code in HTML or even to hack PHP. It’ pretty simple as a matter of fact. I learned how because I had no money to pay a tech to do it for me. So I had to learn how to create something from nothing.

In this post I am going to show you how to wrap text around an advertisement. Many Internet marketers want to know how to do this on a web site. It’s a great effect and it looks very professional when done correctly. You’ve seen this I’m sure. The Adsense ad is located in the upper right or left hand corner of the article and the text fits naturally around the ad. You can see this in action on this blog. Just go to any of the “recent posts” and click on it. There will be an advertisement embedded within the post. The text is wrapped around the advertisement and the looks reminds you of a magazine layout.

Learning how to code in HTML, or at least knowing some HTML is helpful when you create your own Internet business. If I had to wait until I got the money to hire someone to help me place ads on my sites or change things around, I would not be able to earn any money at all. You don’t need to wait for someone else. You can do it yourself.

So, with no more delays…..let’s get to it.

First, take a look at this online education database website (CLICK HERE). This will show you how a normal wrap around is used. You can put your advertisement on the left or right side of the page. Whichever side you like. You see how it blends into the article naturally. The text just bends around the Adsense information and continues in a normal flow from side to side. You will also see another Adsense ad toward the bottom of the article. This is a normal 468 x 60 banner ad with no boards. For this lesson, we will not cover the bottom ad as it is just the Adsense code places “between” the article information like it was just a paragraph. To do this all you need to do is select where you want the ad to appear and you place the code between your text. What I want to teach you is how to ‘WRAP YOUR TEXT” around your Adsense code or other affiliate code.

You will need to get an HTML editor. I recommend a free editor called NVU (pronounced N-view). It’s the only HTML editor I use and it has a lot of features. You can download your free copy at www.nvu.com (CLICK HERE). Look for the Windows insignia and download the one that is zipped. It’s the one that say “nvu-1.0-win32-full.zip” When it is finished downloading, unzip it to your desktop and you will find now find a file called nvu-1.0. Double click on it to open the folder. Find the setup exe file. It will be called “NVU”. You won’t see the .exe extension. Double click on that executable file and let it install. Once your done you will see new icon on your desk top. It will be a round purple circle with the words NVU print on it. Double click on the icon and NVU will start up. You will then have a screen that looks like this (CLICK HERE).

You can then enter your your article information. You will also see down at the bottom, 4 tabs. “Normal”, “HTML Tags”, “Source” and “Preview”. You will be using the “NORMAL” tab to enter all your text in.

First make your headline. You will use the pull down menu in the upper left corner that says “Body Text”. Highlight and select “Heading 2″ and then type your text. It will look this this when you get done. (CLICK HERE). Once you get your header done, highlight the text and center it with the centering tool. Move your mouse over the icons in the upper portion and find the one that says “Align Center”. Your text is not centered on your page. Hit your enter key 2 times and then find and click on the “Align Left” icon. This will put your text back to the left hand side.

Write your article, or copy and paste it if you have it completed already. Here is my example (CLICK HERE).

Next, you will place a piece of HTML code into your “Source” Tab. This code is called a FLOAT. The html code for a float causes an image, or in our case a text ad, to be place on a page and anything that comes into contact with it will wrap around it. This is why the text in the education data base (link above) goes around the Adsense ad.

Let’s open your “Source” tab and see what it looks like (CLICK HERE). This is the actual HTML code that makes your web page. NVU takes care of inner workings for you so you don’t have to hand code everything. This is what each browser sees when it log onto your web site. It assembles the code and makes the web page that you see when you surf the net. You are now going to modify this code by placing some information into it so you can put in your Adsense code information.

First you need to make some space. Move your cursor to the first line of your text and hit your enter key about 4 or 5 times so it looks like my example (CLICK HERE). You will need to copy and past the following code into the blank space you just created right under the <BR> line:

<div style=”text-align: left;”>
<span style=”margin: 2pt 2pt 10px 10px; float: left;”>

The first line of the above code tells the browser to put all information on the “Left hand side” of the screen. The second line of the code tells the browser that the information, (whether it be Adsense code or image) is to be placed either to the right or left and all remaining text information will be wrapped around it. You can see the word “left” in both lines. You can actually leave the “left” in the first line and change the position to “right” on the second line. This will make your Adsense ad appear on the right side of the page instead of the left. It’s a matter of aesthetics. You pick which side looks better for you. Now, let’s see this next step looks (CLICK HERE).

Now for the Adsense. If you have not joined Google’s Adsense program I suggest you do so. I am not promising that you will make much money from it, but It may be possible source of additional income. I personally have not made much money from it, but that does not mean that you won’t. Go here to sign up for Adsense. I am not going to teach you how to create an Adsense account. You can learn that when you sign up. You will need to generate code for “Adsense for Content” and make sure you get the “Ad Unit” text ads and NOT the “Link Unit”. Make sure you choose the 468 x 60 banner so you ads are not so big. For you colors, I would suggest using “Open Air” Palette. This looks more normal and there is no border.

Once you have generated your Adsense code, copy and paste it into your “Source” tab like this (CLICK HERE). One last step. You have to close the “SPAN”. The code look like this </span>. You must place it one line after the end of your Adsense Java script. See it here (CLICK HERE).

Now you need to save your html file. Go to “File” and find the “save as” button. You will have to give you file a name and click enter. This puts a title on your web page and you will also be able to save it to your hard drive. Next you will have to upload it to you web site so you can see the Adsense ad on the page. Use the FTP program you are familiar with.

Let’s take a look at the finished product (CLICK HERE). It looks a little plain, but that is because normal websites have 2 or 3 columns of information. One for navigation, one for the main body of text etc…

I also have an alternate way for you to make affiliate income. Its called Shopping Ads. You can place Ebay ads into your articles instead of just Adsense. It will look like this (CLICK HERE). You can join Shopping Ads by clicking on this link: Shopping ads.

This concludes this lesson on Text Wrapping. In my next post I will cover how to set up the frame work of a web page. I will show you how to create tables so you can separate your navigation columns from your text area.

Until my next post……………………hope your making money!

Henry Michaels

Tags: textwrapping, ads, Adsense, how to wrap text around,