Firebug Web Development Addon: The Ultimate Firefox Addon

FirebugFirebug is quite possibly the ultimate web developers tool when it comes to “on the fly” inspection of code. I have been using this amazing Firefox addon for well over a year and during that time, it has not just saved me time, but has helped me become a much better developer.

So what “is” Firebug?

Simply put, it’s an on-the-fly code inspector for CSS, Javascript etc that allows you to view and edit code directly from your Firefox (or Chrome) web browser. See what your code changes do in real-time before going and actually touching the code.

See below for an example of the Firebug interface:

Firebug Interface

Install Firebug

There are a few ways you can get Firebug. The first is direct from the Firebug Website, where you can select from a number of different versions. You can also get it direct from the Firefox or Google Chrome addon depositories. Simply search for Firebug and install as required.

Firebug Walkthru Video

Please leave feedback below if you have any questions about Firebug. I am always willing to answer any question you might have.

Share This:

CSS Tutorial: Captioned Images

In todays Web2.0 world, images are as vital to a good Website as the content itself. But how do you take a regular image and turn it into something “more”? A great way to use images within your content is to make them captioned, giving the reader not just the visual, but also a short text description.

In this article I hope to show you the basics of adding captioned images to your Website, including these CSS styling attributes; float, border, margin, padding, and background.

Note: In this example I am going to be using CSS styling in the content directly. If you are familiar with <style> tags or the use of CSS files please feel free to use them accordingly.

Step 1: Image inside a DIV

The key to creating a captioned image is to wrap your image inside a DIV tag. The DIV is used to hold the image and also to align and style the captioned area.

The basic code is as follows:

<div>
<img src=”http://www.succeed2k.com/pics/ds.jpg”>
</div>

This would not look any different than just dropping an image on your page, so you need to add the necessary styling.

Step 2: Style the DIV

To make this image look right, you need add styling to the DIV. In this example we’re needing to make sure the image is aligned to the right of the page, so we need to use the “float: right” command. We also want to add a small frame around the image and caption. Changes to the code are in red.

<div style=”float: right; border: thin solid silver; text-align: center; margin: 2px; padding: 5px;”>
<img src=”http://www.succeed2k.com/pics/ds.jpg”>
</div>

As you can see, the result is the image surrounded by the silver frame.

Step 3: Add the caption

Dallas Stars Logo

Now we just need to add the caption to the image. We’re going to use a styled paragraph <p> tag to do this and will have our text centered and in italics.

<div style=”float: right; border: thin solid silver; text-align: center; margin: 2px; padding: 5px;”>
<img src=”http://www.succeed2k.com/pics/ds.jpg”>
<p style=”text-align: center; font-style: italic; font-size: smaller; text-indent: 0;”>Dallas Stars Logo</p>

</div>

By adding the text, we have extended the frame and created the captioned image look

Step 4: Advanced Styling

Dallas Stars Logo

One last small step that you can do to make your captioned image look even better is to add a background colour to the text part of the caption. This can really enhance the look and feel of the caption and is great for making the text stand our from the rest of the page. To do this, you could either add a 2nd DIV and wrap the <p> text part inside it, or as I am doing below, simply use a styled DIV instead of the <p>.

<div style=”float: right; border: thin solid silver; text-align: center; margin: 2px; padding: 5px;”>
<img src=”http://www.succeed2k.com/pics/ds.jpg”>
<div style=”border: thin solid silver; background: #ffffcc; padding: 2px; text-align: center; font-style: italic; font-size: smaller; text-indent: 0;”>Dallas Stars Logo</div>

</div>

The wonderful thing about styling a captioned image is that you can make it do virtually anything you want. If you wanted the caption at the top of the image rather than the bottom you would simply take that 2nd DIV section and put it at the top above the image code. Want a different background, simply change the code. Need the whole thing left aligned instead of right? Simple, just change float: right to float: left in the main DIV.

Likewhys, if you wanted to use an object rather than an image, you could do that using the same technique as listed above. Try creating a captioned, right aligned YouTube video and see how it works. Just replace the image code with your YoutTube video embed link.

Lastly, don’t forget to have fun while trying new designs.

If you’re wanting to learn more, we strongly recommend the Web Design Mastery Course.

Web Design Mastery is a complete Internet Marketers Reference Guide. Not only will you learn how to design a professional website, but you’ll also learn in the easiest possible fashion.

It is a fantastic product that will teach you all you need to know about Web Design.

Share This:

DIV Tags: Styling and Finishing the 2 Column Template

In my last article titled DIV Tags: 2 Column Template Tutorial I covered the basic steps needed to create a simple 2 column website template frame. Today I want to take that one step further and add a few extra stylings to the code.

In particular, we’re going to add an image background to the header and footer, add a border to the container, hide the borders on the main content and sidebar areas and introduce Heading tags and simple UL and LI tags.

The main DIV styles that will be used are:

  • Border
  • Background
  • list-style
  • text-align

And also introducing these basic HTML/CSS tags:

  • H1
  • H2
  • P
Please note: that while this article does show specific CSS styling, you can and should be encouraged to attempt new things and try different styles.

We will begin with the same basic code that we ended with in the last article. Let’s get started.

Step 1: The Header & Footer Background

When adding a background image to a div, you use the same background styling we used to add the blue background. What we now want to do is modify that background code to include the new image details. You will need to have already created an image to use for the header prior to doing this. You need to add the image section in the main header DIV, not the inner padding div we added later. I am also going to change the padding on all the inner padding DIVs to 5px instead of 10px, and adjust the width as necessary.

Note: The easiest way to work out the widths of padding is to remember that this formula: Width + Padding = full width of DIV. So in the case of the header which is 480px wide, if we have 5px padding on each side, then the width would need to be 470px (5 + 470 + 5 = 480).

The change to the code is highlighted in red.

<div style=”background: #000066 url(http://www.succeed2k.com/images/divheaderbg.jpg); width: 480px; height: 80px; border: 0px solid #000000; margin: 0pt auto;”>
<div style=”width: 470px; padding: 5px;”>
<strong>HEADER</strong>
</div>
</div>
<div style=”width: 480px; margin: 2px auto 2px;”>
<div style=”width: 373px; height: 100px; float: left; border: 1px solid #000000;”>
<div style=”width: 363px; padding: 5px;”>
<strong>MAIN CONTENT AREA</strong>
</div>
</div>
<div style=”background: #FFFF99; width: 100px; height: 100px; float: right; border: 1px solid #000000;”>
<div style=”width: 90px; padding: 5px;”>
<strong>SIDEBAR</strong>
</div>
</div>
<div style=”clear: both;”>
</div>
</div>
<div style=”background: #000066 url(http://www.succeed2k.com/images/divfooterbg.jpg); width: 480px; height: 30px; border: 0px solid #000000; margin: 2px auto;”>
<div style=”width: 470px; padding: 5px;”>
<strong>FOOTER</strong>
</div>
</div>

Note: When using an image as the background, it is recommended that you use a path relative to your current page. ie. “url(/images/image.jpg). I used the full domain URL in this example for display purposes only.

You will notice I also changed the height of the Header and Footer DIVs to match the images I used for each. I also removed the border, as it was no longer needed as the images I used include their own border. You can simply just delete the border style altogether instead of changing it to 0 like I did.

The result:

HEADER

MAIN CONTENT AREA

SIDEBAR

FOOTER

Step 2: Container, Content and Sidebar Borders

The next step is to change the borders of the container, main content and sidebar. We want to remove the current border on the main content, change the sidebar so only the left border shows and add a new border to the container, that we had previously hidden. While at it, we’re also going to change the background color of the sidebar to match that of the new footer image.

<div style=”background: #000066 url(http://www.succeed2k.com/images/divheaderbg.jpg); width: 480px; height: 80px; border: 0px solid #000000; margin: 0pt auto;”>
<div style=”width: 470px; padding: 5px;”>
<strong>HEADER</strong>
</div>
</div>
<div style=”width: 480px; margin: 2px auto 2px; border: 1px dashed #000000;“>
<div style=”width: 373px; height: 100px; float: left;”>
<div style=”width: 463px; padding: 5px;”>
<strong>MAIN CONTENT AREA</strong>
</div>
</div>
<div style=”background: #FFFFCC; width: 100px; height: 100px; float: right; border-left: 1px dashed #000000;“>
<div style=”width: 90px; padding: 5px;”>
<strong>SIDEBAR</strong>
</div>
</div>
<div style=”clear: both;”>
</div>
</div>
<div style=”background: #000066 url(http://www.succeed2k.com/images/divfooterbg.jpg); width: 480px; height: 30px; border: 0px solid #000000; margin: 2px auto;”>
<div style=”width: 470px; padding: 5px;”>
<strong>FOOTER</strong>
</div>
</div>

The result:

HEADER

MAIN CONTENT AREA

SIDEBAR

FOOTER

Step 3: Adding Sidebar Bullets, Formatting & Adding Content

The last thing we need to do is add content to the different DIVs. We are going to use the H1 tag in the header, as H Tags (header Tags) show search engines that the phrase within this tag is a headline. Then, we need to use the H2 tag in the main content and sidebar as headings, add bullets to the sidebar formatting to look square rather than round and lastly, change the footer text so that it is smaller (H4) and centered within that DIV. We also need to remove the HEIGHT styling from the main content and sidebar DIVs as the current height restrictions will not work once content scrolls further than the height restriction.

In the code below I have used 4 different colors to explain the 4 different areas:

  • Header: Red
  • Main Content: Blue
  • Sidebar: Green
  • Footer: Pale Blue

<div style=”background: #000066 url(http://www.succeed2k.com/images/divheaderbg.jpg); width: 480px; height: 80px; border: 0px solid #000000; margin: 0pt auto;”>
<div style=”width: 470px; padding: 5px;”>
<h1>PPM Site</h1>
</div>
</div>
<div style=”width: 480px; margin: 2px auto 2px; border: 1px dashed #000000;”>
<div style=”width: 373px; float: left;”>
<div style=”width: 363px; padding: 5px;”>
<h2>Welcome To My Web Site</h2>
<p>This is a paragraph of text</p>
<p>Paragraph #2</p>
<p>Etc</p>

</div>
</div>
<div style=”background: #FFFFCC; width: 100px; float: right; border-left: 1px dashed #000000;”>
<div style=”width: 90px; padding: 5px;”>
<h2>Menu</h2>
<ul style=”list-style:square outside; margin-left:0; padding-left:1em;”>
<li>Bullet #1</li>
<li>Bullet #2</li>
<li>Bullet #3</li>
<li>Bullet #4</li>
<li>Bullet #5</li>
<li>Bullet #6</li>
</ul>

</div>
</div>
<div style=”clear: both;”>
</div>
</div>
<div style=”background: #000066 url(http://www.succeed2k.com/images/divfooterbg.jpg); width: 480px; height: 30px; border: 0px solid #000000; margin: 2px auto;”>
<div style=”width: 470px; padding: 5px; text-align: center;“>
&copy; 2010 succeed2k.com
</div>
</div>

The end result:

PPM Site

Welcome To My Web Site

This is a paragraph of text

Paragraph #2

Etc

Menu

  • Bullet #1
  • Bullet #2
  • Bullet #3
  • Bullet #4
  • Bullet #5
  • Bullet #6

© 2010 succeed2k.com

That’s it, you’re very own CSS website built around a series of styled DIV Tags.

If you’re wanting to learn more, we strongly recommend the Web Design Mastery Course.

Web Design Mastery is a complete Internet Marketers Reference Guide. Not only will you learn how to design a professional website, but you’ll also learn in the easiest possible fashion.

It is a fantastic product that will teach you all you need to know about Web Design.

Share This:

How To Create Websites That Search Engines Love

There is no black magic or knowledge of rocket science required to building websites that are easy for search engines to navigate round and give you the best possible ranking.

Get the fundamentals right and you will be ahead of the vast majority of websites created.

Originally there was SGML (Standard General Markup Language). This was the standard to which all information was displayed on the Internet. It is still the basis to which HTML and XML adhere. The Algorithms that Search Engine Spiders use to analyze sites are designed to recognize this standard and very little has changed! It is therefore imperative that you design your WebPages with this in mind. If you use it, not only will you produce WebPages that Search engines will love but will vastly improve the chances of your site being ranked highly for your desired keywords and phrases.

TEXT FORMATING TAGS

OK here are the three most important tags used for formatting your text:

[H1] the Main Heading Tag, tells the SE the pages main topic

[H2] a Second Heading and slightly smaller (e.g. subheading)

[p] paragraph and the body of text and content

A typical layout of your HTML code, and therefore your text, should look like this.

[HTML] [HEAD]///////I’ll explain what need to go in this bit later on //////// [/HEAD] [BODY] [H2]Title of Your Page Starting with you Keyword Phrase[/H2] [H3]Subtitle Including Some other Keywords/Phrase[/H3] [p] Lots of useful information with the odd keyword thrown in but good useful information is what really makes a site successful, after all, Content is King – I’m now starting to waffle on. [/p][H3]Next Subtitle Including Some other Keywords/Phrase[/H3] [p] Lots ore useful information with the odd keyword thrown in but good useful information is what really makes a site successful after all Content is King – and again I seem to be waffling on. [/p] [/BODY] [/HTML]

There are other basic HTML tags that you can use of course but these three are so obvious that it makes it an absolute breeze for Search Engines to look at your web page and instantly know what your site is all about and how to rank its content. OK, there is one slight problem though. If you used these tags as they are on your pages and in particular the text on them isn’t going to look that good on the eye and certainly won’t win any design awards. This is where Custom Style Sheets come into play in a major way.

ALT TAGS

These provide the Search Engine Robots with a description for any images you have on your page. They look as follows:

[img src=”” alt=”blue beach ball ” width=”50″ height=”50″ /]

Place in good descriptive key words here without going over board i.e. no spamming the same words in every images alt tag 3 times each.

META TAGS – TITLE, DESCRIPTION AND ROBOTS

The Meta Tags and Title go in the Head section of your HTML and let Search Engines know what was important on a Webpage and so how to rank its importance. They can also tell the Search Engine what language it is written in and other files it needs to take into account. Typically it will look something like this:

[HEADER] [TITLE]Greek Holidays Idyllic and Very Cheap[/TITLE] [META name=”description” content=”Very Cheap Prices for Idyllic Greek Holidays and Vacations in Greece”] [META name=”keywords” content=”budget cheap greek holidays vacations europe Greece sunshine”] [/HEADER]

The Title Meta Tag is extremely important and is widely used by the SE’s most importantly Google. Make it between 5-10 words and put your best Keyword/Phrase at the beginning e.g. ‘Greek Holidays’.

The Description Meta Tag should be less than 150 characters in order to suit all Search Engines. Anything more than this will simply be missed out with some SE’s. The “description” is what most SE’s use to describe your site when listed in its results. Make sure it is ENTICING for potential customers. It should include at least 5 of your best keywords but DO NOT simply repeat all of them in your “description”.

The Keywords Meta Tag should be a string of keywords and 2-or-3 word phrases that people surfing the net might use to find pages like yours. It is a very common opinion amongst many experts that the “keywords” Meta Tag is used very little if at all by SE’s these days. This is very true but since some SE’s do still use them to some degree DO NOT repeat your keywords more than 3 times in either your “keywords” Meta Tag or your “description” Meta Tag. Some SE’s will consider this as ‘Keyword Spamming’ and your site could be seriously penalised.

The Robots Meta Tag is a simple instruction that goes in between the [HEAD] and [/HEAD] tags of your web page and tells any visiting Search Engine Robots whether than can index that page (INDEX, NO INDEX) or follow the links leaving that page (FOLLOW, NO FOLLOW). There are basically 4 variations of these instructions:

1. [META NAME=”ROBOTS” CONTENT=”INDEX,FOLLOW”] 2. [META NAME=”ROBOTS” CONTENT=”NOINDEX,FOLLOW”] 3. [META NAME=”ROBOTS” CONTENT=”INDEX,NOFOLLOW”] 4. [META NAME=”ROBOTS” CONTENT=”NOINDEX,NOFOLLOW”]

The simplest way of using the tags is to use example 1. above on every page of your website that you want the search engine seeing and then put example 4. above on every page that you do not wish the Search Engine to see yet alone index for the world to see.

ROBOTS.TXT FILE

The Robots.txt file is actually the first thing Search Engine Robots will see when they visit your site. With the use of a Robots.txt file we can tell Search Engines what areas of your site are out of bounds. There are also many other uses for the Robots.txt file but I won’t talk about it here.

Using a text editor (notepad, BBedit etc) create a new file and name it, yes you guessed it: robots.txt. Place in it the following syntax:

User-agent: * Disallow: /cgi-bin/ Disallow: /pictures/ Disallow: style.css

This syntax tells Search Engine that it may not look in to the folders “cgi-bin” or “pictures” (these could actually be any directories you name). Save the file, upload it to the root of your website i.e.: http://www.yourdomain.com/robots.txt and that’s it.

The SEO benefit to you is not so much to give you a higher ranking but to make your site more Search Engine friendly… Think Kudos!

SITE LAYOUT – THEMED BASED WEBSITES – THE ULTIMATE SEO TECHNIQUE

Establishing a theme for your site and the contents’ structure can produce a dramatic increase in your sites ranking amongst Search Engines. All of the big search engines use a ‘Themed’ based algorithm in their ranking criterion. This is basically essential for them in order to return the most relevant results when a user enters certain ‘keywords/phrases’ into their search engine. Basically a Search Engine will spider every single page on your site and index it as one. It is therefore imperative to concentrate your sites content on the around the main theme and not to diversify too much.

SITE STRUCTURE

The structure of your site, i.e. how your content is categorized and linked together, is meant to support and strengthen the overall theme of your site. Let me explain how you achieve this.

There are 4 main types of pages you need to be concerned with:

* Index * Sitemap – (a.k.a. Table of Contents) * Hallway Pages * Doorway/Content Pages

View your site as a Shopping Complex. The theme is “Shopping”. It has an entrance (Index page). At the entrance there is a map showing you the different areas, stores, and the stores contents (Sitemap). From the entrance there are 3 possible hallways you may walk down one for “Sports”, one for “Home”, and one for “Toys”. Each has its own description of what specific shops you’ll find (Hallway Pages). As you walk down the Hallways you’ll pass the doorway to each shop on which is a very detailed explanation of what is inside the store (Doorway Pages). I’ll explain these pages in closer detail.

Index Page – Most Search Engine Optimization experts agree that your websites’ initial page of entry (index.htm default.htm etc) will never be the definitive page that Search Engines will rank highly. Make sure it looks good, introduces your visitors to your site, and lets them know what they can expect to find deeper within it. E.G. If your site was about Holidays in Spain, all you want to say here is “Come to Greece for your Holidays – its great!”

Sitemap – A single page that is linked only off your Index page and links to every single page on your site. It should be laid out like a Table of Contents but with one or two keyword specific sentences for each and every link. This should be linked off your main page but DO NOT call/name the text in the link as “Sitemap”. It’s often thought that Search Engines will penalize this. Instead simple call it “Table of Contents”.

Hallway Page – This is basically the first page of each Sub Category. It should give a brief summary/paragraph of each specific topic within that Sub Category. E.G. Staying with the Spanish Holidays theme Hallway1 would deal with “Accommodation” and Hallway2 “Excursions”. A rule of thumb would be to focus these pages on keyword phrases containing 1-3 words.

Doorway Page – This is an individual page that is only concerned with a specific Topic of that Sub Category as mentioned in the Hallway Page. These pages are full of very specific topic related content. They will also be keyword/phrase rich focusing on 3-4 keyword phrases. E.G. Following the Hallway Page of Accommodation, Doorway1 could be “Hotel Rooms” and Doorway2 “Apartment Flats”. How to Link your Pages

All linking should be done vertically throughout the site. The only exception to this rule is the Sitemap (which links to every page). Doorway Pages should be linked to the Hallway Pages above them and the Hallway Pages in turn should be linked to the Index Page.

E.g.

Click here for [a href=”http://www.website.com/beach-ball-photos.htm” title=”Page of Beach Ball Photos” target=”Target”] My Favourite Photos of Beach Balls[/a]

Please note the use of the Hyperlink Title tag. Its another great excuse to drop a few more keywords to describe the page you are leading the Search Engine Spider too.

e.g.

Search Engine Optimisation UK

LINK POPULARITY

Arguably the most important factor in getting a high search engine ranking. This has basically been Google’s little baby that most of the other Search Engines have also begun to adopt. OK the concept is simple: If Search Engines can see that other sites are linking to you, then they think that you’re popular. The more other sites link to you, the more popular you look. The more popular you look, the higher ranking the SE will give you.

Not all links are equal though. If the sites linking to you are about the same topic e.g. “Holidays in Greece” then Google is going see these as highly relevant links. Further more, the bigger the site that links to you, or the greater its Page Rank, the more weight Google will give to these links and so your Search Engine Positioning will benefit greater.

SEARCH ENGINE SITEMAP

Not to be confused with the traditional Site Map or Contents page, this page is designed specifically for the Search Engines and not for visitors to your site. Similar to the Robots.txt file, this file does not so much give your site higher rankings as it does make your site more easy to navigate for a Search Engine. Search Engine Sitemaps do require some basic knowledge of xml if you wish to build one by hand but do not fear, there are many tools available online to help you build automatically. If you are new to Google Sitemaps I would recommend reading their overview: www.google.com/webmasters/sitemaps/siteoverview.

CONCLUSION

If you can create a website that provides a clear understanding of the theme of its content with an easy to follow navigational system, you will have accomplished the fundamental basics of your onsite Search Engine Optimisation.

Continue reading

Share This: