Writers' Community!
Home Page Two Columnists Q&A Submit an Article FAQs Contact Author Login

Sandee-Lembke blog

Sandee Lembke (1,715)
Sandee Lembke

Theme Party Queen.com

How To Wrap Text Around Image

Posted Tuesday, November 17, 2009 (7 days 19 hours ago.) Viewed 4 times.

One of the most challenging things that a new webmaster has to learn when building webpages is how to wrap an image around text.

The most common problems include text creeping too close to images and images not being aligned properly both horizontally and vertically when placed next to text.

Always Start With The Same Image Code

Get in the habit of using the same HTML image code every single time you place an image. That way all you have to do is alter it for the page that you are working on. The code should include:

  • The image location (Example--"http://www.your-domain-name.com/images/your-image-name.jpg")
  • Alignment (Example--left, right, center)
  • Hspace (For horizontal alignment)
  • Vspace (For vertical alignment)
  • Alt Tag (To help search engines find your image/site)
  • Image Height and Width (To ensure proper display of your image without distortion)
  • Title Tag (So visitors will see an image description when they hover over an image)
  • Border HTML Code (In case you want a border around your image)
  • How to Wrap Image Around Text

When you want to wrap an image around text, decide which side of the page the image or ad should appear. If you want it on the right side use ALIGN="right". Other choices are "left" or "center".

Next, adjust Hspace to gain space between the text and the image. Start with Hspace="10" and adjust as needed. Vspace is not as commonly used as Hspace but it comes in handy when you want to move an image up or down vertically. Start with "10" and adjust as needed.

Using ALIGN, HSPACE and VSPACE are the primary wrap text code needed when you want to wrap an image around text.

Using The Break Tag

Occasionally you will want to create space between the bottom of your image and where the text begins again. Using the break tag will accomplish this task. The most common break tag for this purpose is clear="all."

Other Parts of HTML Image Code

The Alt tag is extremely important. Using a keyword-rich alt tag will help search engines find your images and also your site. The Title tag is only needed if you want your visitors to see an image description when they hover over your images.

Specifying an image height and width will ensure that your images display properly, without distortion, in all browsers.

Lastly, adjust the border tag depending on what type of border you would like around your images. You can adjust weight (1 px is thin, 3 px is thicker), color and type (solid, dotted...). If you want no border, change border code to 0px.

Summary

  • Use the same HTML Image code repeatedly and adjust as needed.
  • To wrap text around an image use ALIGN, HSPACE and VSPACE.
  • To gain space between the bottom of an image and more text, use the break tag
  • Although they do not affect alignment, always use an Alt Tag and specify height and width
  • Optional--use Title Tag and Border as needed
Visit Free-Website-Tutorials.com where you can watch a Video Tutorial showing all of the steps above on How to Wrap Text Around Images.

Get the exact HTML wrap code needed to get it right the first time.



        Comments (0)


How To Create An HTML Image Background For Your Webpage

Posted Saturday, October 03, 2009 (52 days 18 hours ago.) Viewed 221 times.

You can easily build an HTML image background for your webpages using everyday images, the Photoshop Slice Tool, an image background table and repeating HTML code. The beauty of this type of layout is that you do not need CSS and it expands with the length of your web page.

High Level Process:

  • Find and fix images to use for header, content holder and footer
  • Open a new document in Photoshop the width of your web site.
  • Drag the images onto the template and position them so that the finished template resembles a web page (header at top, content area in middle surrounded by a border and footer at bottom)
  • Add a background color if desired
  • Slice the template into 3 sections.
  • Save each section as a gif image and upload as usual
  • Build a 3-row table in the body section of your HTML document to hold each of the 3 gif images. Top row holds top gif image, middle row holds middle gif image and bottom row holds bottom gif image.
  • Use repeating HTML code in the middle row so that the HTML image background expands vertically with the length of the page

Finding the Images

If you do not have images that are suitable for this purpose, search photo websites like IStockPhoto.

For the header and footer images, there are several combinations that will work, but if you want to keep it simple, use the same image(s) along the top that you use along the bottom.

One image can be copied and pasted repeatedly so that it fits the entire width of your template. An image of wood moulding, for example, can serve as the header across the top and can be flipped to be used along the bottom.

For the content holder, there are also several options. You can simply use a colored rectangle and add a shadow to it or you can use something like a picture frame to get a more ornate looking content holder.

Creating The Template For Your HTML Image Background

The template that you create in Photoshop is fully functional on it's own. All you have to do is add content to the middle section of the table.

NOTE: If you use a cascading stylesheet (CSS) on the same web page, it will interfere with the effectiveness of the template. In some cases your middle gif will repeat horizontally instead of vertically.

As an example, let's create a white document that is 950 pixels wide (this will be the width of your web page) by 600 pixels high (height isn't critical but pick something big enough so you can see what you're doing in Photoshop).

Before dragging your images onto the template, you may have to fiddle with them so that they match the width of your template. For example, if you choose an image of wood moulding that is only 250 pixels wide, you will need to duplicate the layer repeatedly and position them side by side to get a longer piece of moulding that is 950 pixels wide.

Sometimes when you copy and paste layers side by side like this, the seams will be visible. Use the Smudge Tool to blend the seams and then choose Layer-Flatten Layers so that you can easily drag the finished image onto the template and get it into position.

If you want to use this exact image along the bottom, duplicate the layer and move it to the bottom. If you want to flip it, choose Edit-Transform-Rotate.

After preparing the content holder image (the picture frame in the example above), drag it onto the template positioning it between the header and the footer and then use Edit-Transform-Scale to stretch it to size.

Add Header Text (Website Name...) and Footer Text (Copyright...).

If you want to fancy it up, use the Custom Shape Tool and pick small images to add interest to your template. The Spiral shape is a favorite. Use Edit-Transform and either Scale or Rotate to easily size and position them.

Find a complementary color in your images by using the Eyedropper Tool then fill the
white space on either side of the content holder using the Paint Bucket Tool.

Use Slice Tool to Divide Template into 3 Images

Slice the document into 3 smaller images horizontally. Grab the Photoshop Slice Tool from the Tool Palette. In the top toolbar, set the Style to "Fixed Size" to ensure exact proportions. Using the 950px X 600px example, input width and height as follows:

  • Top slice equals 950px X 250px
  • Middle slice equals 950px X 100px
  • Bottom slice equals 950px X 250px

CAUTION:  Make sure that your top and bottom slices are large enough to completely contain the header and footer respectively.

Now you have one document sliced horizontally into 3 smaller images. The next step is to "Save For Web" and upload each image as a separate gif. In the "Save For Web" dialog box, save each slice separately by clicking on the slice and naming it. Upload the 3 gif images as usual.

Create a table in the body section of your HTML document to hold the background image url for each gif and your content.

  • The first row in your table contains the top gif
  • The middle row contains your middle gif, the repeating HTML code and the content
  • The last row in your table contains the bottom gif

These 3 gif images when displayed on a page will result in a one-of-a-kind, professional looking HTML image background, perfect for a simple web page or sales letter. The possibilities are only limited by your creativity.

Sandee Lembke invites you to visit Free-Website-Tutorials.com where you can watch a Video Tutorial showing step by step instructions on How to Create an HTML Image Background. All of the steps above are demonstrated in this Video Tutorial.

Also download a Free PDF Supplement showing Photoshop Slice Tool screen prints and copy the exact HTML Repeating Code required to create this web page effect.


        Comments (0)


Analyze Keywords Using Adwords Keyword Tool and Excel Macro Function

Posted Friday, September 25, 2009 (60 days 18 hours ago.) Viewed 75 times.

If you are looking for a free keyword analyzer, read this article and learn how to analyze keywords using the Google Adwords Keyword Tool and the Macro Function in Microsoft Excel.

Identifying what keywords to use for your web site or blog can mean the difference between success and failure so it's important to get it right. The problem that most new business owners face is that they do not have extra money to spend on a fancy research keyword tool, like Wordtracker.

So what to do? Use what you already have at your disposal and maximize your free resources of course!

Google Adwords Keyword Tool

If you are not familiar with this tool, simply do a search and you will find it. Its only purpose is to help you identify a list of potential keywords.

You will still have to analyze them to determine their worth. We will do that later in Microsoft Excel.

Start by inputting your general keyword idea into the white box under "Enter one keyword or phrase per line." Fill in the security code and hit "Get Keyword Ideas."

By default, four columns of data will appear. To add additional columns, select them from the drop down menu under "Choose columns to display." If you plan on using Google Adsense to monetize your site or blog, add "Estimate Avg. CPC."

You should now have five columns of data. For definitions of each, click on the question marks next to the column heading. The five columns are:

  • Keywords
  • Estimated Avg. CPC
  • Advertiser Competition
  • Local Search Volume: Month
  • Global Monthly Search Volume

Normally you will get two lists of keywords. The top list is where you will find "Keywords related to term(s) entered." The bottom list is the "Additional keywords to consider."

Under each list you will find links to download the data, including ".csv (for Excel)." Download both lists into an Excel Document, pasting one under the other.

Analyze Keywords in Microsoft Excel

You do not have to be a master at Excel to be able to use it for keyword processing. In addition to ease of use it really is the perfect tool for this job because it offers you the ability to:

  • Filter out keywords that have very little value
  • Sort keywords in the order that you prefer
  • Categorize and format keywords for easier consideration
  • Display subsets of keywords on individual spreadsheets
  • Save workbooks on your own computer for reference

You can sort through keywords in a number of ways but the goal is always the same: find keywords that are high in search volume and low in competition. In other words, lots of searches but very few people answering the call.

Those keywords are the keepers, the golden nuggets.

Let's get to work on our list of keywords from Adwords. You should have one spreadsheet with five columns. Our goal is to quickly eliminate less useful keywords and get pare down our list to only the top contenders. We'll do that by using filters.

First we'll go through the manual process and then the macro function which will cut processing time substantially.

Using Filters To Analyze Keywords

Start by selecting the top row with the headings. Choose Data-Filters-AutoFilters to turn them on. You should have drop down menus in each of the columns.

Using the drop down menus you can sort out whatever you do not want to see, such as, the keywords with high competition and/or those with virtually no search volume.

For each column decide what, if anything, you want to keep or eliminate. A high level sort might look something like this:

  • Keywords--keep all
  • Estimated Avg. CPC--keep only those with CPC of $1.00 or more
  • Advertiser Competition--keep only those with competition of less than .74
  • Local Search Volume: Month--keep all. Will use next column instead
  • Global Monthly Search Volume--keep only those with at least 200 searches

Now that you have determined acceptable thresholds for each column, set up your custom filters. In the CPC column click on the drop down menu and choose "Custom."

Here is where you will define exactly what you want to keep. There are 4 white boxes each with their own drop down menu. Typically you will only use the top two boxes to analyze keywords.

Using the suggestions above, in the first box choose "is greater than", type in "1.00" in the second box and click OK. Do the same for any other columns you want to set thresholds for (see suggestions for each column above).

At this point you should have eliminated all of the low quality keywords. Your list may still be quite long so a second round of filtering may be needed. Use Data-Sort and formatting, such as fill colors and bolding, to help simplify your list.

The final decision about what keywords to keep and get rid of can only be made by manually considering a combination of CPC, Competition and Search Volume. In addition to using these variables to help make your decision, keep in mind that the keyword or phrase must somehow be weaved into your content for maximum search engine friendliness.

Using Macros To Improve The Process

The process of using filters in Excel can be tedious especially if you have several columns of data and multiple spreadsheets of keywords that you are considering. That's where the Macro Function comes in.

A macro is defined as "a series of program commands or instructions which are stored in a file and can be recalled when necessary." Basically, we will record each of the steps that we did above and then save the macro and use it each time we process keywords.

Reading this brief macros tutorial will give you a high level view of how it's done so that in the future, you can analyze keywords in a couple of mouse clicks.

With your spreadsheet of keywords open, choose Tools-Macro-Record New Macro. Name the macro something you will remember when you need to recall it, like "KeywordResearch." Do not use dashes, slashes or spaces. Click okay. In Excel 2003, a small box will appear in your spreadsheet with a "Stop Recording" button visible.

Every step you take from this point forward will be recorded. Go through the exact steps above and any others that you might like to perform and then hit the "Stop Recording" button.

The next time you want to use the macro function, click anywhere in the spreadsheet and then choose Tools-Macro-Macros and find the named macro in the list. Hit "Run" and your steps will automatically be performed.

The process of analyzing keywords using the Google Adwords Keyword Tool and the Microsoft Excel Macro Function will not only save you money but a huge amount of time.

Sandee Lembke invites you to visit Free-Website-Tutorials.com where you can watch two Video Tutorials showing step by step instructions on How to Analyze Keywords Using Adwords and the Excel Macro Function. All of the steps above are demonstrated in these two Video Tutorials.


        Comments (0)


 


Archives:

November 2009
M T W T F S S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30          
« Oct
   


All Posts by Sandee Lembke

Home  |  Page Two  |  FAQ's  |  Contact  |  Terms of Service  |  Article Submission Guidelines  |  Questions & Answers  |  Privacy  |  Mission / About
Copyright © 1999-2009 SearchWarp.com, All Rights Reserved - SearchWarp.com is an IcoLogic, Inc. Company