মঙ্গলবার, ১০ এপ্রিল, ২০১২

05 Basic SEO Tips Every Web Developer Should Follow.....

5 Basic SEO Tips Every Web Developer Should Implement 
Search Engine Optimization (SEO) is one of the most important ingredients for getting large amounts of traffic to your website besides high-quality content. Because once your articles are a few weeks old, the majority of the traffic to those articles will come from search engines. That's why it's important to rank high in search engines.
In this article I'm going to show you 10 basic SEO tips that you should keep in mind when writing a new article or developing a new website to make sure your blog ranks high in the search engines.

1. Place Your Keywords In the Title Tag

The title tag is one of the most important things for ranking high for particular keywords. That's why it's very important to think of a title that contains important keywords and grabs the attention of people. Because when people search on search engines like Google, the title of your page will be displayed in the results and people will click on links that are the most attractive to them first. Remember that it's also very important and rewarding to have a unique title, so before you use the title, Google it and see if the title already appears in the top 10 results.
Please keep in mind that Google only displays the first 70 characters(about 8 words) of your page's title. Google does not even index the keywords in your page's title after the 12th or so word. Yahoo and MSN don't even index pages that have a page title that's too long. Source: Google – How Many Words In A Page Title Tag?
Note: WordPress users should use the All in One SEO Pack plugin for WordPress. This plugin gives you the ability to easily place the title of your post in the beginning of your <title> tag.

2. Optimize Your Robots.txt

Having an optimized robots.txt is important because this file can control which pages of your websites get crawled by the search engine spiders. For those of you who use WordPress, I recommend preventing search engine spiders from crawling wp-admin and plugin folders.
Take a look at my my Robots.txt to get an idea of how it works. Its code is pretty much self explanatory but if you want a better understand of it take a look a the links mentioned below.
Here are some more resources about the robots.txt file:

3. Proper Use of the ALT Attribute

The <alt> attribute should be used to describe an image, not to spammed with keywords that have nothing to do with the image.
Why? Because while it's true that search engine spiders cannot read images, they can however read the <alt> attribute, and having it spammed with keywords that are totally irrelevant to the image will make Google aware of what to derank you for.
Here's some more information about the alt attribute:

4. Anchor Text of Links

The anchor text is the text inside your <a> tags that links to other pages. Wether they're incoming or outgoing links, it's important for the anchor text to contain a description of where the link is taking the visitor. This is even more important for search engines because it tells its crawlers where the link is going.
So avoid using words like "Click Here" as an anchor text as it can hurt both your website and the website you're linking to. One more thing to keep in mind is to keep the characters in your anchor text under 55.

5. Quality of Inbound and Outbound Links

While most web developers know that having many web sites link to your can boost your rankings, a lot of them don't know that the quality of the websites linking to your websites plays a vital role in your website's page rank. Getting links for random dofollow blogs has a way smaller impact than if a website with a high pagerank links to your website in an article.
Who you link to matters, as Google warned webmasters that they can be penalized if they link to spam websites. Linking to really bad websites (malware injecting websites etc.) can easily get your site removed from Google's search engine results pages(SERPs). One thing to keep in mind is that Google's spiders might not follow all of your links if you have over 100 unique outbound links on a single page.
More articles about linking:

সোমবার, ২৬ মার্চ, ২০১২

Link Building Guide: Step By Step

Link building – can’t live with it, can’t live without it. It takes time, effort, massive amounts of patience and creativity – but it is the stuff of which high rankings are made. So where do you start?
where to start link building
We’ve put together a long list of ideas culled from blog writers all over the SEO industry. Not every idea will work for every site, but you should be able to find a good number that you can put into practice. The first half of this guide has ideas for general linkbuilding, appropriate to any industry and topic, and the second half has particular ideas for products, blogs, videos, contests, etc.
(Note: this list was made a while ago for internal use, and so we didn’t keep track of the sources. Now that we’re sharing it for the public benefit of all the linkbuilders out there, we’d like to give attribution, so if you see any tip that came from a blog post of yours, please contact us and let us know.)
Happy link building!

Leveraging Existing Relationships

If your site has a list of “partner” sites, add their URLs to their listings and ask them to specify yours on their “partners” page.
link building guide partners
For ecommerce/service sites, ask customers/clients to give links – especially if they write to say they are satisfied.
Who are your brand evangelists? Ask them for a link. How do you find them? One hint: use Google Alerts for your brand name to see if people are talking about you anyway on the web. If you see someone speaking glowingly about your brand, cultivate a relationship with them. Show them that you appreciate their appreciation. Eventually you can ask them for a link.
Create a widget of the following sort that customers can put on their site:
“Show off your YourCompany.com pride by posting this badge on your Facebook page, blog, or personal web site.  Plus… you’ll receive a 5% off your next purchase voucher for every purchase your friends make via your badge (Terms).  It’s our way of saying thank you for introducing us to your friends.”
This takes work to create the widget that would enable tracking of referral orders and someone to be on top of making sure the vouchers are sent to the correct people, but it might be worth the effort in links and the boost in sales.
What are the most important industry related websites and blogs  in your niche? Look in your LinkedIn connections and Twitter followers and those of some of your colleagues, and look for the owners of/writers on these websites. If you find a match, use that connection and turn it into a link.
Check referring sites in Analytics and ask them to update anchor text.
link building guide referring sites
Check referring sites in Analytics and send them a thank-you note for referrals (good PR for future).
Search for your website URL and see if there are sites that mention you without linking to you. Thank them for mentioning you and ask them to add a link for the benefit of their visitors. Use search queries:
  • http://www.sitename.com
  • www.sitename.com
  • sitename.com
  • sitename
Check for crawl errors in Google Webmaster Tools and see if any sites are linking to pages of yours that return a 404 error. Write to them to give them an updated URL for that content.
link building guide broken links
Ask your client who all of his suppliers are, then research suppliers’ websites to see if they have place for testimonials/link to clients. Possible suppliers are:
  • IT support
  • web design / hosting
  • telephony
  • email service provider / email marketing company
  • legal advice
  • HR / recruitment
  • coaching / business advice
  • property services (including landlords / tenants)
  • PR
  • advertising
  • software provider(s) – particularly industry software
  • accountancy / audit
  • training (again, particularly industry training)
  • printing / graphic design
  • food / drink / hospitality
  • hardware / office furniture / computer equipment suppliers
  • cleaning company
  • industry suppliers (depending on the client’s industry)
  • conference organizers (either for their own seminars etc. or whose conferences you attend)
  • artwork providers (local artists or galleries), florists etc.
This isn’t exactly a relationship you would want to have, but if it exists anyway… Make sure that blog scrapers link back via method outlined here: http://www.wolf-howl.com/seo/use-scrapers-to-build-links/.

Creating Relationships

If you want to make free website to click Here

Connect to influencers in your niche and connect. Use WeFollow.com to get a list of influential people in your niche. Follow these people. Keep track of the subjects they tweet about and retweet them. Check their websites to learn more about them and their interests. Start interacting with these influencers – slowly – don’t come on too strong. Eventually, create and tweet content that after all your research you are pretty sure they’ll be interested in. If they are, they will likely tweet and link to your content.
Pitch a story about your industry with quotes from you/your CEO to make it easy for a reporter to use. Use www.helpareporter.com site to get daily updates of reporters looking for sources for their stories.
link building guide reporter source
If you have actual location(s), get links from your local chamber of commerce and area information sites (even large chains can build locations pages).
If there is a site you would like to get a link from, and you see there is a piece of content – blog post, research report, infographic – that they would want on their site, create that content for them and offer it to them (with a link to yourself as creator of the content).

Using Directories

Keep a list of directories, separated into free and paid directories, niches, ordered by whatever system you prefer of ranking page strength (Page Rank, SEOMoz Page Authority and Domain Authority, etc.). When you are link building, go through your list of directories – register in all applicable.

Using Forums

Search for keyword+forum. If the forum enables signatures, add links to your signature. Post regularly. If it does not allow signatures, post regularly and on occasion throw in a relevant link from your website. (You can even get ideas for content from these forums.)
link building guide forum signature
Find “footprints” of do-follow blogs and forums you run across (text on their template which would appear on other blogs using the same template – e.g. “Most users ever online was”, which finds forums powered by vBulletin) and search for that text + keyword.
To find do-follow blogs on your topic, use:
keyword inurl:ifollow*.gif
(This finds a “U Comment – I Follow” banner.)
As you look for forums, make sure to keep a running list of all forums you come across with relevant details: topic, whether the links are follow or no-follow, whether it enables signature links. Also keep track of any usernames and passwords for forums and the signature link for each. Then, when you need to link build for a new site, you can go over your list, pick out forums that are relevant to the new site’s niche, and start building on them.
In your travels across the web, you will run across “abandoned” forums and message boards (read: no one is moderating them). Keep a running list and when you are link building for a particular site, pick a few forums and throw some “ads” up. (Note: once more people discover any particular forum and hundreds of links start coming out of it, it most likely becomes less effective.)

Using Articles

Write articles and put them on article sites. Put links with relevant anchor text in the body of article and in the author bio.
link building guide articles

Getting Links to Others That are Broken

Search “website no longer available”, “website closed” and “page no longer updated” + keyword and tell linking sites that their link goes to site that is no longer available but they could link to you.
Find resource pages for your topic and see if there are errors (broken links, etc. – you can use Xenu). Inform webmaster, and eventually ask for link in return for help.

Using Embeddable Links

Create a widget which will give a link when embedded.
Create a quiz with a badge displaying the visitor’s results that gives a link when displayed.
link building with badges

Using Search Operators

Use SEO Solo link finder tool: http://www.soloseo.com/tools/linkSearch.html
Use SEOMoz Juicy Link Finder Tool: http://www.seomoz.org/link-finder
Use the following search queries (read: put this into a Google search and see what comes up – note: some of these were included in the link tools above) to find potential link targets:
  • keyword “add url” / “add * url”
  • keyword “add site” / “add * site”
  • keyword “add website” / “add *website”
  • keyword “submit url” / “submit * url”
  • keyword “submit site” / “submit *site”
  • keyword “submit website” / “submit * website”
  • keyword “suggest url” / “suggest * url”
  • keyword “suggest site” / “suggest site”
  • keyword “suggest website” / “suggest * website”
  • keyword “recommended links”
  • keyword “recommended sites”
  • keyword “favorite links”
  • keyword “favorite sites”
  • keyword bookmarks
  • “list * keyword * sites”
  • “add comment” keyword / “add * comment”
  • “post comment” keyword / “post * comment”
  • keyword “leave a comment” / “leave * comment”
  • keyword “no comments”
  • keyword “powered by wordpress”
  • keyword “notify me of follow-up comments”
  • keyword “wiki” (site:.edu)
  • keyword forum / keyword forums
  • keyword discussion boards
  • keyword members
  • keyword join
  • keyword “advertiser testimonials”
  • keyword “related URLs” / “* related URLs”
  • keyword “related sites” / “* related sites”
  • “public library” “useful links” keyword site:.gov
  • “favorite keyword sites” library –clientwebsite site:.edu
  • “best keyword” site:.edu OR site:.org
  • keyword resources public library site:.us
  • keyword site:.edu
Use the inurl: search operator to make the search more targeted:
  • inurl:tag / inurl:tags
  • inurl:blog / inurl:blogs
  • inurl:forum / inurl:forums
  • inurl:add-link / inurl:submit-link

By Sponsoring/Donating

link building by being a sponsor
Use:
  • keyword sponsors
  • keyword sponsorship
  • keyword sponsor charity
  • keyword benefactors
  • keyword donate
  • keyword donations
  • keyword donors
  • keyword inurl:sponsors/advertise
  • keyword inurl:sponsor/advertise
  • keyword intitle:sponsors/advertise
  • “in kind donations” list
  • “in kind donors” list
Or use a topic that is not your keyword but is relevant to your keywords/products:
  • marathon inurl:sponsors (if you sell running shoes)

Through Job Vacancies and Student Discounts

link building through job sites
If you have job vacancies in your business, use:
  • jobs degree site:.edu+ variations (ac.uk, ac.il)
  • careers degree site:.edu
  • careers advice site:.edu
  • career opportunities site:.edu
  • job finding site
  • job placement site
  • employment site
If you offer student discounts in your business, use:
  • student discount partners site:.edu + variations
  • student discounts site:.edu

By Guest Blogging

Use MyBlogGuest.com to find opportunities for guest posting. Put your links in your bio first (don’t be spammy) and then when you develop relationship, you can drop one or two in text also.
Other helpful search queries:
  • keyword “guest blogger” OR “guest post” OR “guest article” OR “guest column”
  • keyword “become a contributor” OR “contribute to this site”
  • keyword “write for us” OR “write for me”
  • keyword inurl:category/guest

Using Competitive Intelligence

To find email addresses for link contacts, use:
  • site:[companywebsite.com] + [name] + email
  • site:[companywebsite.com] + [name] + contact
  • site:[personalblog.com] + [name] + email
  • site:[personalblog.com] + [name] + contact
Check competitor backlinks for potential links. Use process detailed in http://www.seomoz.org/blog/an-inside-look-at-competitors-backlinks-with-open-site-explorer and/or in http://www.seomoz.org/blog/using-seomoz-linkscape-to-troll-for-terrific-link-prospects.
Check the backlink profiles of link-building companies (using a tool like Open Site Explorer).

For Products to Sell or Give Away:

  • submit * review
  • get * reviewed
  • allintitle:get * reviewed
  • reviews inurl:submit
  • review keyword
  • reviews keyword
  • reviews blog keyword
  • intitle:potential places that would advertise it
  • intitle:keyword tools
  • intitle:free keyword tools
  • intitle:list of free keyword tools
  • intitle:list of keyword tools
  • pr welcome
  • pr friendly
  • pr contact
  • pr info
If you have good deals:
  • “cyber Monday” keyword
  • “black Friday” keyword
  • “best/good deals” keyword
If you have a hard to find item:
  • find your hard to find item
  • how to find your hard to find item
  • locate your hard to find item
If you have gift guides:
  • gifts for your target market
  • keyword gift guide

SEO Tags

Tags, Meta-Tags and How To Use Them

Tags on webpages are exactly what they sound like: little snippets of code that “tag” elements of text to tell a computer/search engine/other non-human readers of your webpage what that text is about to tell them. Tags are your way of communicating with the search engines about your page. You can tell them about your page’s keywords, and you can give them instructions about what to take into consideration on your page.

The Title Tag

The title of the page is found in this tag. This title appears to the user in the blue, topmost portion of the browser (in the standard Internet Explorer browser). Every page on your site should have a unique title, otherwise Google may index less pages from the site. It should contain your keyword, and preferably at the beginning. Do not, however, use this as a place to stuff dozens of keywords. When optimizing for Google, the title should preferably be no longer than 69 characters, as that is the maximum number of characters Google will display for the title in the search results.
The tag looks like this: <title> insert title </title>

The Meta Description Tag

A description of the page is provided in this meta-tag. Again, this is not the place to put a hundred keywords separated by commas, but rather a description of the page in one to two sentences. The description itself does not influence ranking, but it can influence the viewer to click. So make it engaging and do use your keyword, because the description will only show as the snippet on the search results page if the term searched for shows up in the description. Otherwise Google will just take a text excerpt off the page. When optimizing for Google, the title should preferably be no longer than 156 characters, as that is the maximum number of characters Google will display for the description in the search results.
The meta-tag looks like this: <meta name=”description” content=”insert description”>

The Meta Keywords Tag

The keywords in the keyword tag used to be quite important to search engines. Over the last few years, this tag has become relatively insignificant to Google and most other search engines. If you’re only concerned about Google, who has said outright that they don’t use it for ranking, it’s actually better not to have keywords in the keyword tag, because you are then effectively telling your competition what your keywords are. (Although if you’re very altruistic you’re more than welcome to let us know.) Some other search engines might take it into consideration, so you can make the decision whether to have it or not. But definitely don’t “keyword-stuff” it, as that has the chance (although small) of impacting negatively on rankings.
The meta-tag looks like this: <meta name=”keywords” content=”insert keywords separated by commas”>

The Canonical Tag

This tag helps if you have several pages on your website with the same content (often happens with different ways of ordering products on category pages on ecommerce websites, or tags on blogs that create multiple pages with different URLs but the same content), by having all the duplicate pages tell search engines “OVER HERE is the real page.” That way, Google won’t penalize you for duplicate content, and any links going to the duplicate URLs will send their link juice to your real page.
The tag looks like this: <link rel=”canonical” href=”http://www.mysite.com/mypage”/>
Put that tag on http://www.mysite.com/mypage itself, and then any time any parameters cause the page to be duplicated (e.g. http://www.mysite.com/mypage&order=az or http://www.mysite.com/tag/topicabc/mypage) the tag will point the search engine back to the original.

The Meta Content Type and Content Language Tags

These meta-tags tell the spider and the browser in which language and in which coding standard the site is written. These tags are important because they enable the spider to understand the contents of the site.
The meta-tags look like this:
<meta http-equiv=”Content-Language” content=”insert language code”>
<meta http-equiv=”Content-Type” content=”insert coding type and character set”>

The Meta Robots Tag

This meta-tag is intended specifically for the robot -  the search engine spider – which scans the site. The meta-tag is written in the following format:
<meta name=”robots” content=”insert parameters”/>
In the “content” section must be one or more of the following parameters:
INDEX – tells the spider to index the page
NOINDEX – tells the spider not to index the page, but to continue and follow the links to other pages
FOLLOW- tells the spider to continue and follow all links
NOFOLLOW – tells the spider not to follow the links on the page
This meta-tag is useful for different circumstances, such as when you create test pages on the site and does not want the spider to access them.
The name portion of the meta-tag contains the name of the spider to which the command is being directed. Every search engine has its own spider. When the parameter is just “robots”, it refers to all spiders.
Note: the default action for all spiders is to index the page and to follow the links.  It’s not necessary to include a robots tag if all you’re going to tell it is INDEX, FOLLOW.

The Heading Tags

These tags identify headings and sub-headings within the text on the page, sometimes changing the visual aspect of the text (e.g. font size) and also identifying which text the spider should pay particular attention to. The top level heading is referred to as h1, the next as h2, and so on.
The tag looks like this: <h1> text </h1>

The Alternate Text Tags

These tags assign (invisible) text to images. They provide accessibility to people with visual disabilities who use audio aids to view websites, for people who use the internet with images off and to let the search engines know about your images (and what keywords to associate with them).
This tag is added into the image parameters as: alt=”text”

Clean Code 

If you want to free web template to click Here

Well, this is a catch-all for the rest of all those tags that brighten up – or clutter up – your HTML. Clean code can raise your site in the eyes of the search engines, primarily because the page will load faster (a big factor for Google).
· Text to Code Ratio – the higher the ratio of text to code, the better.
· Empty Tags – if you’re erasing text, make sure to remove the tags also.
· Use of CSS – using cascading style sheets usually saves lines of code on the page by moving all of the style code onto special pages designated for such.
· Wise Placement of JavaScript – if your page uses JavaScript, store the code on other pages (e.g. an include file) and not on the page itself, because JavaScript can block other parts of the page from loading until it finishes loading.
· Frames – it is not recommended to use frames at all.
· Iframe – this is a tag that effectively displays one webpage within the context of another. You can use this tag in order to set apart parts of a page that include long programming code, for example, and then tell Google not to index what is within the Iframe. Ordinarily you can’t block parts of a page, but with an Iframe, the spider sees it as a separate page.

শনিবার, ৭ জানুয়ারী, ২০১২

জুমলাঃ আয় করুন মাসে হাজার ডলার পর্ব - ৪


সুপ্রিয় পাঠক, অনলাইনে আয়ের ক্ষেত্রে ঢাকার অবস্থান পৃথিবীতে তৃতীয়। একটা বিষয় খুব ভালো লাগে যখন কোন প্রজেক্টে বিড করতে যাই, দেখি প্রায় ৬০% বিডার বাংলাদেশী। অর্থ্যাৎ ধীরে ধীরে বাংলাদেশী যুবকদের অংশগ্রহণ যে বাড়ছে অনলাইন আর্ণিংয়ে তা সুস্পষ্ট। বিভিন্ন অনলাইন মার্কেট প্লেসগুলি ঘাটলে দেখা যায় বাংলাদেশী প্রোগামাররা সোৎসাহে আয় করছে লক্ষ লক্ষ টাকা। এমনকি গত ঈদের দিনে কয়েকজনকে পাওয়া গেল অনলাইনে কাজ করছে। এই বিপুল উৎসাহকে স্বাগত জানাই। এই রকম ডেডিকেশন একদিন এই দেশের যুব সমাজকে বেকারত্বমুক্ত করে ছাড়বে আশা করি। তবে তার জন্য সঠিক প্রশিক্ষণও জরুরী। আর এই উদ্দেশ্যেই এই ধারাবাহিক রচনাটি প্রকাশ করা। আউটসোর্সিং এর খুব ব্যাপকভাবে পাওয়া যায় PSD2 HTML এর কাজ এবং Joomla Tempeting । কাজটি একটু কঠিন হলেও আয় খুব ভাল। মাসে কমপক্ষে ৫০০/৬০০ ডলার। তাই নিয়মিত এই পাঠটি পড়ুন ও শিখতে থাকুন নানান প্রফেশনাল কাজ। আপনিও ক্রমান্বয়ে হয়ে উঠবেন দক্ষ আউটসোর্সার

আগের ৩টি পর্বে আমরা Div base HTML file ও CSS file তৈরী করে Link করা শিখেছিলাম। আমরা এই পর্বে খুব গুরুত্বপূর্ণ কাজ শিখব যা হল MENU তৈরী করা। এই কাজটি করতে হলে আগের পর্বের ধারনাগুলো নেয়া জরুরী। আগের পর্বগুলো সংগ্রহ করে নিবেন।

MENU একটা Website এর খুব গুরত্বপূর্ণ অংশ। একে Navigation নামেও ডাকা হয়। Menu তৈরীর জন্য আমরা যে Sample Website টি ব্যবহার করব তার জন্য আপনাকে Download করতে হবেwww.icdbd.com/part4.zip এই লিংক হতে। Uinzip করার পর index.html file টিOpen করলেই আপনি দেখতে পারবেন একটি Sample Website তবে তার মাঝে Main menuসবহঁ টি নেই। আমরা Banner Image টির উপর Main manu তৈরী করব প্রদর্শিত ছবির মত। এর জন্য আমাদের MainNav নামে একটি Div তৈরী করতে হবে। এবার আমরা Practical কাজ শুরু করব। লক্ষ্য করুন আপনার Folder এর মাঝে CSS নামে একটি Folder আছে। আপনার Computer এAdobe Dreamweaver software টি Install  করা থাকতে হবে। এবার আপনি index.htmlএবং Styles.CSS file এর উপর Right Click করে Open with দিয়ে Dreamweaverদিয়ে ঋরষব দুটো খুলুন। যদি Dreamweaver না থাকে তবে Open with দিয়ে Notepad দিয়ে দুটো খুলুন। এরপর index file এর TOP Div  এর পর MainNav  নামে একটি উরা আমরা বানাবো। তাই TOP Div এর পর নিচের কোডটুকু Type করুনঃ

<div class="mainNav">
<ul>
<li><a href="#">Home Staging</a></li>
<li><a href="#">Why Footsteps?</a></li>
<li><a href="#">Schedule a Consultation</a></li>
<li class="last"><a href="#">Home</a></li>
</ul>
<div class="clear"></div>
</div>
কোডটুকু Type করার পর আপনি ব্যানার ইমেজ এর উপর Manu Item গুলো এরকম দেখবেনঃ

Home Staging
Why Footsteps?
Schedule a Consultation
Home

এখন আপনার প্রয়োজন Menu Item গুলোকে নিচের মত করে সাজানো।
এর জন্য আপনার প্রয়োজন Style.CSS file টির মাঝে প্রয়োজনীয় কোড Type করা। তাইStyle.CSS file টির মাঝে নিচের কোডটুকু Type করুনঃ
.mainNav{
width:100%;
height:44px;
background:url(../images/nav_bg.png) repeat-x;
}
.mainNav ul{
margin-left:135px;
}
.mainNav ul li{
float:left;
text-align:center;
padding:0 30px;
background:url(../images/nav_separator.png) no-repeat right 15px;
}
.mainNav ul li.last{
background:none;
}
.mainNav ul li a{
font-size:17px;
line-height:42px;
font-weight:bold;
color:#000;
}
.mainNav ul li a:hover{
color:#ffffff;
}
.mainNav ul li.active a{
color:#462418;
}

কোডটুকু আপনি যে কোন স্থানে Type করতে পারেন। তবেঃ
.logo{
width:491px;
height:92px;
padding-top:184px;
}

এরপর Type করুন। এবার আমরা একটু ব্যাখ্যা

করে বুঝবো কোডের কোন অংশে কি কাজ হচ্ছে। আসলে MainNav নামের Div টি সম্পূর্ণ Menu কে ধারণ করছে। একটি Menu তৈরীর জন্য আমাদের প্রয়োজন অনেকগুলো Item. এগুলোকে আমরা বলবো li বা list item যেমন Home Staging, why Footsteps?, Home ইত্যাদি হল এক একটি item. তবেitem. রঃবস. বা li. গুলোকে বেধে রাখার জন্য আমাদের <ul> ব্যবহার করতে হবে।

লক্ষ্য করুন একটি Div Class declare করা হয়েছে last নামে (<li class="last"><a href="#">Home</a></li>) । কারণ Manu item গুলোর পর একটা Separator ( | ) দেখা যায়। কিনতৃ সবশেষে কোন Separator দরকার নাই। তাই last Class এর জন্য Style.CSS fileটির মাঝে নিচের কোডটুকু Type করা হয়েছ
.mainNav ul li.last{
background:none; }

Menu item
 গুলোর উপর মাউস নিলে Menu item গুলো সাদা রংয়ের হচ্ছে Style.CSS file টির মাঝেঃ
 .mainNav ul li a:hover{
color:#ffffff;
}


- কোডটুকু থাকায়। আপনি color:#ffffff; এর ffffff এর পরিবর্তন করে ২২২২২২ দিয়ে বা অন্য কোড দিয়ে দেখতে পারেন।
আগামী পর্বে খুব গুরুত্বপূর্ণ একটি কাজ শিখব। তাহল Textbox, list item, radio button ইত্যাদি তৈরী করা। এই কাজটির জন্য আজকে পর্যন্ত যে বিষয়গুলি শেখানো হল তা বার বার চর্চা করে কোন অসুবিধা থাকলে তা দূর করে ফেলুন। আপনি ধীরে ধীরে প্রবেশ করছেন প্রোগ্রামিং এর গভীরে। নিজেকে তার জন্য প্রস্তুত করতে থাকুন। যদি এই পর্বেই আটকে যান তবে সামনে এগোনোর পথ হারিয়ে যাবে। একটা চক্রে ঘুরতে থাকবেন। কাজেই কোন সমস্যায় যোগাযোগ করার দরকার হলে  
icdjamil@gmail.com এই ঠিকানায়।

সবাইকে অনেক অনেক শুভেচ্ছা জানিয়ে আজকের পর্ব এখানেই শেষ করছি। সবাই ভালো সুস্থ থাকুন।
Feedback: combarta@gmail.com
 

জুমলাঃ আয় করন মাসে হাজার ডলার পর্ব - ৩

সুপ্রিয় পাঠক, আনলাইনে আয়ে ঢাকার অবস্থান পৃথিবীতে তৃতীয়। ভারতের চেন্নাই ও ফিলিপাইনের ম্যানিলার পর ঢাকার প্রোগ্রামাররা অবস্থান করে নিয়েছে। অসংখ্য মানুষ অনলাইনে কাজকরে আয় করছে মাসে লক্ষ্য লক্ষ্য টাকা। সমপ্রতি বেসিস এর উদ্যোগে পুরস্কার ও সম্মানিত করা হল বাংলাদেশে আউটসোর্সিং কাজের শীর্ষে আছে এ রকম ১০ জনকে। নানা উপায়ে আয় করতে পারেন আপনি । তবে অনেকেই না বুঝে মূল্যবান সময় নষ্ট করে PTC নামের জালে। কেউ বা ব্লগিং করেও আয় করছেন কিছু কিছু। কিন্তু আমরা আপনাকে উপযোগী করে তুলতে চাই সবচেয়ে নির্ভরযোগ্য ও সম্মানজনক কাজের জন্য। আর এ জন্যই PSD To HTML এবংJoomla TEMPLATING কাজে দক্ষ করে তোলার জন্য এই আয়োজন। ২ টি পর্ব যারা পাননি তারা অবশ্যই সংগ্রহ করে নিবেন ধারাবাহিক এই আয়োজনে আমাদের সাথে থাকুন। আপনিও ক্রমান্বয়ে হয়ে উঠবেন দক্ষ আউটসোর্সার

সুপ্রিয় পাঠক, সবাইকে অসংখ্য শুভেচ্ছা জানাচ্ছি । ফাল্গুনের শুরুতে বিশ্ব ভালবাসা দিবসের মধূর ভালবাসার ছোয়া লাগুক সবার। ভালবাসার জন্য মাঝে মাঝে খরচ ও তো দরকার। ঘরে বসে যদি বেশ কিছু টাকা আয় করা যায় তো মন্দ কি? 
আগের পর্বে আমরা শিখেছিলাম, কিভাবে একটা HTML File এবং CSS তৈরী করে Link করা যায়। আজ আমরা শিখব একটা Index তৈরী করার জন্য কিভাবে শুরু করবেন। Index Page হল একটা ওয়েব সাইটের প্রথম Page . কেউ একজন একটা ওয়েব এড্রেস এ ঢুকলে প্রথমেই এই Pageটি আসবে। এখন আমরা জানবDiv base HTML ও CSS দিয়ে কাজ করার সময় কিভাবে Plan করা হবে। 

একটা Page কে তিনটি ভাগে ভাগ করে ফেলতে হবে Program এর সুবিধার্থে। ভাগ তিনটি হল Top, Middle, Bottom সাধারনত Top ও Botton এ কোন পরিবর্তন হয় না। অর্থাৎ Middleঅংশের ছবি, লেখা মাঝে মাঝে আপডেট হতে পারে তবে অন্য দুটি অংশে খুব বেশি পরিবর্তন হয় না। Top অংশের মাঝে সাধারনত থাকে Logo, Small Menu, Main Menu Slogan, ইত্যাদি। আমরা MTA এরWeb টাতেলক্ষ্য করি।Top অংশের মাঝে আছে Logo Slogan Small Menu এবং Main Menu . আমরা Main Menu কে Nav নামে অভিহিত করব। যা Navigation বোঝায়। তাহলে তিনটি ভাগের জন্য আমাদের তিনটি উরা প্রয়োজন। আমরা index.html এর মাঝে নিচেরCode টুকু লিখব।

<html>
<head>
<title>MTA Home Page</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div class="top"> </div>
<div class="middle"> </div>
<div class="bottom"></div>
</div>
</body>
</html>

উপরের কোডটুকু html file অর্থাৎ index.html এর মাঝে লেখার পর Save করে রাখুন। এখন খুলুনStyle.css file টি এবং তার মাঝে থাকবে নিচের কোডটুকু।
#wrapper {
width:800px;
margin:0px auto;
min-height:800px;
}
.top {
width:100%;
margin-top:15px;
background:url(../images/top_bg.png) no-repeat top;
}

.middle {
width:775px;
margin:0 auto;
}

.bottom {
width:100%;
padding-bottom:10px;
}

এবার CSS File এর কোডটুকু লেখা শেষে ঝধাব করুন, তার পর index.html File টি Fire Fox দিয়ে খুলে দেখুন ফলাফল কি যদি Image না পায় তবে বুঝতে হবে Image Location পাচ্ছে না। Imageগুলো Download করে নিতে পারেন এই www.icdbd.com/images.htm থেকে। আপনারFolder এর মাঝে তাহলে থাকবে Images ও CSS নামে দুটি Folder ও Index.html File. CSS এর মাঝে Style.CSS ও Image এর মাঝে Image এর Slice গুলো। আগামী পর্বে খুব গুরুত্বপূর্ণ একটি কাজ শিখব। তাহল Menu তৈরী করা। এই কাজটির জন্য আজকে পর্যন্ত যে বিষয়গুলি শেখানো হল তা বার বার চর্চা করে কোন অসুবিধা থাকলে তা দূর করে ফেলুন। আপনি ধীরে ধীরে প্রবেশ করছেন প্রোগ্রামিং এর গভীরে। নিজেকে তার জন্য প্রস্তুত করতে থাকুন। যদি এই পর্বেই আটকে যান তবে সামনে এগোনোর পথ হারিয়ে যাবে। একটা চক্রে ঘুরতে থাকবেন। কাজেই কোন সমস্যায় যোগাযোগ করার দরকার হলেcombarta@gmail.com এই ঠিকানায়। 
সবাইকে অনেক অনেক শুভেচ্ছা জানিয়ে আজকের পর্ব এখানেই শেষ করছি। সবাই ভালো, সুস্থ থাকুন।

জুমলাঃ আয় করন মাসে হাজার ডলার পর্ব - ২

গতপর্বে আমরা শিখেছিলাম কিভাবে একটা HTML File কে জুমলা Template এ রুপান্তরিত করতে হয়। কাজটি ছিল Advanceকাজ । যারা গত পর্বটি পড়েন নি তারা অবশ্যই সংগ্রহ করে নিবেন। খুব Expertলোক ব্যতীত জুমলা Template তৈরী করার ধারনা আপনাকে কেউ চট করে দিতে পারবে না। সাধারনত আমরা নানা ডবনংরঃব থেকে ফ্রি টেমপ্লেট উড়হিষড়ধফ করে কাজ করি। কিন্তু ইন্টারনেট থেকে প্রচুর টাকা আয় করতে হলে আপনাকে অবশ্যই জানতে হবে জুমলা টেমপ্লেট বানানো। কিন্তু কান টানলে মাথা আসে। জুমলা টেমপ্লেট বানানোর জন্য তো শুধু জুমলা জানলে হবে না, জানতে হবে HTMLCSSPHP। তবে একসাথে সব শিখতে গেলে জট লেগে যাবে। একটা একটা করে শিখুন। কাজে লাগাতে পারবেন। সবচেয়ে বড়কথা, পরিষ্কার ধারনা থাকতে হবে যে কি শিখলে কি কাজ হবে। আমাদের মূললক্ষ্য অনলাইনে অর্থ ঊপার্জন। বিভিন্ন Market place   থেকে আপনি অনায়াসে মাসে হাজার হাজার ডলার কামাতে পারেন, যেমন Freelancer.com,Scriptlance.com ইত্যাদি হতে।

ঘরে বসে কাজগুলো করে Bayer কে দিবেন, টাকা এসে জমা হবে আপনার Master Card  এ কিংবাBank account এ। কথাগুলো খুব অবিশ্বাস্য মনে হয়। আসলে আয়ের টাকা হাতে না আসলে বোঝা যায় না। তবে আমি নিজে যেহেতু আয় করছি, আমার কাছে বিষয়টা ১১০% সত্যি। যাই হোক, কোন কোন ক্ষেত্রগুলো থেকে আয় করা যায়? অসংখ্য ক্ষেত্র, Data Entry , Article WritingWeb Development ইত্যাদি হাজারো প্রোগ্রাম দিয়ে আপনি আয় করতে পারেন। তবে ভাল Amount income  করতে হলে আপনাকে Web Design এ কাজ করতে হবে। একবার দক্ষতা অর্জন করতে পারলে আপনার নিশ্চিত মাসিক ঊপার্জন ১০০০ থেকে ১৫০০ ডলার। এ লক্ষ্যেই আমাদের যাত্রা। আপনি প্রথমে বিশ্বাস করুন। Computer  বার্তার এই ফিচারের সবকটা পর্বশেষে আপনিই আত্নবিশ্বাসের সাথে বলবেন, হ্যা আমি ইন্টারনেটে কাজ করে আয় করছি। এখানে কোন অসত্য নেই।

তো আসুন আমাদের এই দীর্ঘ যাত্রার জন্য প্রথম পদক্ষেপ ফেলি। প্রথমেই আমরা হাত দিব HTML এ। আয়ের জন্য খুব গুরুত্বপূর্ণ একটা কাজ হল PSD to HTML. ধরুন অষ্ট্রেলিয়ার একটা কোম্পানি তাদের WebsiteএরDesign Photoshop এ অর্থ্যাৎ PSD Design  করে রেখেছে। এখন তারা এটাকেWebsite এর Format  এ অর্থ্যাৎ HTML রুপে দাড় করাতে চায়। সে আপনাকে PSD File টা পাঠিয়ে দিবে। তারপর সেটাকে HTML (Div Base ) এ Convert করতে বলবে। এর জন্য প্রয়োজন হবে HTML (Div Base)এ CSS  । যদিও প্রথমে আপনাকে পরিকল্পনা মাফিক PSD File কেSlice করতে হবে । এই কাজটি আমরা পরে শিখব । ধরে নিন আপনার কাজের জন্য Bayer আপনাকেSlice করে পাঠিয়েছে। আমার এই lessonটির জন্য আপনি Slice file download করে নিতে পারবেন www.icdbd.com/psdslice/images.zip থেকে। download  করে এটিকেUnzipকরলে images নামে একটি Folder পাবেন। এবার কাজের প্রস্তুতি নিন।

আমাদের প্রথম কাজ Computer এর যেকোন Drive এ একটি Folder বানানো PSDHTMLনামে। তার পর তার মাঝে images এবং CSSনামে দুটি Folder বানান। এবার একটা HTML File  বানাবো । ফাকা জায়গায় Right click  করে New> Text document এclick করুন। একটি Text File তৈরী হবে । File টি Open করে নিচের কোর্ডগুলো লিখুনঃ 
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="wrapper">
<div class="name">My HTML</div>
</div>
</body> </html>


কোর্ডগুলো লিখে Text
 File  টিকে File>Save as click  করে Save করুন। Save as Type  দিবেন all files এবং File name দিবেন index.html  তারপর Save button click  এ পষরপশ করলে দেখবেন একটি HTML File  তৈরী হয়ে যাবে।

আর একটি কাজ আজকে করব। একটা CSS File  তৈরী করব CSS  নামে Folder  এর মধ্যে। লক্ষ্য করুন HTML Code  এর মাঝে আপনি লিখছেন href="css/styles.css"> অর্থ্যাৎCSS Folder  এর মাঝে style.css নামে একটা ফাইল থাকবে এবং এর সাথে HTML File  এরLink  থাকবে।

body {
background:#000000;
}
#wrapper {
width:800px;
height:400px;
background:#ffffff;
margin:0px auto;
}
.name {
color:green;
background:#cccccc;
font-size:30px;
}


পরিশেষে index.html File  টি Double click করে খুললে দেখবেন একটি কালোBackground এর মাঝে সাদা একটা Rectangle (Wrapper div) এবং তার মাঝে সবুজ কালিতে লেখা ছাই রংয়ের Background (name div)  এর উপর সবুজ লেখা My HTML

পাঠক এই পর্বে আপনি সফলভাবে HTML এবং CSS File  তৈরী করে Link করতে শিখলেন। যাদের এখন্ও সমস্যা আছে তাদের জন্য আমি পুরো কাজটি করে রেখেছি। download করে নিবেনwww.icdbd.com/psdslice/psdhtml.zip - Link থেকে। পরের পর্বে গুলোকে সাজিয়েWebpage রুপে তৈরী করতে শিখবেন। এবং পাশাপাশি ক্রমান্বয়ে আপনি হয়ে উঠবেন HTML, CSS   এর দক্ষ Programmer সবাই ভাল থাকবেন।