Proffessional Web Design Part - One

In this tutorial, we’re going to design and code our first website in simple, easy steps. This tutorial was written for the beginner with the hope that it will give you the tools to write your own standards-compliant websites! It’s a brand new week; maybe it’s time to learn a new skill!

 

Step 1 - What We’re Making

We’re going to design and code this very simple website. Spectacular design, it’s not, but it’ll be very effective for teaching basic coding techniques.

---

Step 2 - Getting Ready

What you need

This tutorial was written assuming that you’ve never coded a website before, or have only done it a few times. Nevertheless, to complete this tutorial, you will need the following:

• Photoshop or a similar image editor
• A code editor (more on that later)
• Basic understanding of how html works, basic syntax and tags. To get up to speed, check out the official resource at w3 Schools, where you can learn all the basics needed for this tutorial.
• Ditto for css, you should understand how selectors work and be familiar with basic properties. Again, the best resource here is w3 Schools
• A browser, obviously. I’m using Firefox, and if you want your site to look just like my screenshots in each step, you should too

Layout

We’re making a very simple website here, with four basic elements: header, content, sidebar and footer, the layout is going to look something like this:

It’s a good idea to block out the layout of your design before you start, either on paper or in Photoshop, to streamline your workflow and organize your ideas.

---

Step 3 - Getting Started

Open up a shiny, new Photoshop document, say, 1000px by 1200px. We can always crop it later. I’m making it pretty narrow because I’m working on a laptop here, but feel free to go wider if you like more space to work.
Now, I’m not going to go into the debate about screen resolutions and optimal website width here. All you need to know is that the content of our page is going to be 800px wide, and that that’s okay. So, on our 1000px wide document, we’re going to drag in guides at the 100 and 900px marks to set the width. Our design has a sidebar, and I’ve decided to make it one third the width of the page. Two thirds of 800 is about 530, so let’s put in one more guide at 630px. We’ll also set a nice background color of #ebe8e8.

---

Step 4 - Header

Grab the rectangle tool and draw a big, blue box at the top of the document, mine is about 170px high and the color is #23b6eb. Next draw a skinny, dark grey bar at the very top of the page, I used #5d5a5a

---

Step 5 - Highlight

Now we’re going to add a bit of a lighting effect on the blue header area. Create a clipping mask above the blue layer, then Grab a big, soft brush (400px wide) and pick a color a bit lighter than the blue background.
Now lightly click the tip of the brush right below the bar, around the centre of the document. Keep it subtle, and try not to let the lighter color reach the edges of the page (this will be clear later). And set the blending mode to screen.

---

Step 6 - Navigation Bar

Now we’re going to add another bar to the bottom of the blue one, we can make it grey, but we’re going to add a gradient overlay so it doesn’t really matter.
In the layer styles panel, add a gradient from #e2e3e4 to #bebdbd at 90degrees.

---

Step 7 - Footer

Next, let’s draw a grey box at the bottom of the page, I picked a color a bit darker than the grey from the bar at the top.

---

Step 8 - Logo

Background

For the logo, we’re going to draw a rectangle and add another anchor point at the end, then drag it out to the side. To get rid of the rounding, option-click on the point.

Next, add some layer styles: a gradient overlay and a 1px stroke: Gradient from #aec457 to # cdf399

Text

Now for the text: big and bold.

• Font: Myriad Pro
• Style: Bold
• Size: 60px
• Color: #36809a

To give it some depth, add an inner shadow:

---

Step 9 - Tagline

Next I just added in a short tagline:

• Font: Arial
• Style: Bold
• Size: 30pt
• Color: #e4dfdf

---

Step 10 - Navigation

Write in the navigation links nice and big, spread them out and space them about evenly.

• Font: Arial
• Style: Bold
• Size: 30pt
• Color: #676666

---

Step 11 - Main Content

Time to paste in some dummy content. I used one bit header, which will be h2 and the smaller one will be h3 link to html ipsum.
Make the text boxes about The width of the first 2 thirds of the page. Text styles:
h2 Header:

• Font: Arial
• Style: Bold
• Size: 36pt
• Color: #0e5d7a

h3 Header:

• Font: Arial
• Style: Bold
• Size: 24pt
• Color: #444444

Paragraph:

• Font: Arial
• Style: Normal
• Size: 14pt
• Color: #595858

The dates under “latest updates” are going to be wrapped in a small tag, the font is the same as the paragraph, but 12pt. I copied the news item twice, cause I’m lazy.

---

Step 12 - Sidebar

Links

Next draw a skinny rectangle over our sidebar region, color #d4d6d3, with a 1 px stroke of #bebdbd
Fill up the sidebar with some more dummy content, you can get the free icons I used here. The fonts are:
h3 Headers:

• Font: Arial
• Style: Normal
• Size: 24pt
• Color: #044055

List items:

• Font: Arial
• Style: Normal
• Size: 18/14pt
• Color: #373737

Button

Next we’re going to add a “join our team” button beneath the contributors links. The button is just a rectangle with the same gradient as the logo, and a 1px stroke color c7c7c7. The text is:

• Font: Arial
• Style: Normal
• Size: 24pt
• Color: #434343

---

Step 13 - Footer

To finish off the mockup, just add a bit of dummy copyright text, or whatever you want, to the footer. The font is:

• Font: Arial
• Style: Normal
• Size: 14pt
• Color: #e0e2e2

And that’s it for the page design, it’s nothing special, but its simplicity will make it easier for you to follow the rest of the process.

---

Slicing the PSD

Now that we have our lovely completed psd, it’s time to chop it up into pieces we can use. The idea here is to use as few images as possible, and to make them as small as possible. Okay, so let’s start with the header. We want it to stretch out across the whole screen, no matter how wide it is. To do that, we’re going to grab a tiny little sliver of the header, and have it repeat across the screen again and again, no matter how wide.

---

Step 14 - The Slice Tool

Now you probably haven’t had to use the slice tool before, but it’s really very simple. It just lets you slice your file into teeny tiny pieces which can be exported for the web.

Header

So, let’s go ahead and grab a little slice of our header. Click and drag to create the slice, just like the rectangular marquee tool. Be careful to take the slice from the side of the image, so you don’t get any of the highlight.

Now that we have this little stripe, we can repeat it along the x-axis. The highlighted area, however, is non-repeating, so we have to cut out the whole thing. Slice the section of the header between the two guides that denote our 800px width.

Footer

We use the exact same process for slicing the footer, grab a skinny piece of the footer.

Everything Else

We just need a couple more images: the “subscribe” icons and the “join our team” button.
Because the icons and the logo are irregularly shaped, we’re going to save them as transparent .png files, so we’re going to come back and grab them separately.
Okay, so to slice the button, we can use the same technique as the header and footer, but this time we only need the one thin slice. When you make the slice, be sure to not include the 1px stroke, (we’re going to add that in later) you might need to zoom in really close for this.

---

Step 15 - Export for the Web

Now that we have our images all sliced up, let’s save them as optimized jpegs and put them someplace useful.
Go to File/Save for web and devices… In the popup window, hold down shift and click to select each of the slices (again, you might want to zoom in) Check that the “preset” drop-down menu is set to JPEG-High, uncheck the “convert to srgb” and click “save”

In the next window that pops up, pick a name and location for your images, I’m just going to save to the desktop for now.
Make sure it’s set to “images only”, “default settings”, and “selected slices only.”
Next, check out the location you saved your files to. Instead of seeing the individual images, you’ll just find a folder labeled “images” where all your pictures are located. The computer will give each image a number, which isn’t very useful. Check that you have the right images, then name them appropriately.
Now, back to those pesky icons and the logo. Be sure to hide all the background layers, then take out the slice tool again and cut out nice little boxes around each icon and the logo.

Now we go through the same process of exporting for the web as we did with the jpegs, only this time be sure to select PNG-24 from the “preset” dropdown menu, and that the “transparency” box is checkmarked. Rename these files too, and your images folder should look something like this:

Alright, that’s it, we’re done cutting up our psd, and we have all the images we need. Don’t close Photoshop just yet, though, we’ll still need to pick out colors, fonts, dimensions, etc.

---

Part 3 – HTML

Step 16 - Getting Started

Alright, time to dive into some html. The first thing you’re going to need is a code editor of some kind. This is often an area of personal preference,
but I recommend starting off with a free one. For mac and PC, I highly recommend Komodo edit as a first code editor. It has a lot of features that are ideal for beginners and advanced users.
One of the best features is the syntax-checker, which is like the spell-check in word processors, which will identify and explain little mistakes.
For PC, there are a lot more options, none of which I’m very familiar with, but check out Andrew Burgess’ article 22 Neat Code Editors for Windows
In this tutorial, we’re going to use Komodo edit, but the principles are the same in every editor.

---

Step 17 - Setting up our Folders

First things first, we need to set up a place to hold all the files related to our site. Create a folder for your website, mine is called “MySite”, inside this folder, create another folder containing the images we just sliced.
Name this folder “images”. Now we open up our code editor, this part will be a bit different depending on what software you’re using:
If you’re following along in Komodo, select “create new project” and save/move the .kpf file to the “MySite” folder. When you open up the file, the file browser at the side of Komodo should display the contents of the folder.
Next right-click on the project file, and scroll to “add” and select “new file”. In the window that pops up, select “html(xhtml)” and name the file “index.html”.

If you’re using another editor, the process should be similar, but the essentials are the same: you need to create an index.html file, and it needs to be in the “MySite” folder along with the images folder.

---

Step 18 - Setting up our index.html File

The first thing we need to do is declare the doc type, character encoding, and create the <html> tags. Many editors will do this for you, but if not, it should look something like this:

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
4. </html>   

between the html tags, we need a “head” section, which contains all sorts of important information about the site which isn’t displayed within the body of the site.
For us, at this point all it’s going to contain is the title of the page, like this:

1. <head>  
2.     <title>MySite</title>  
3. </head>  

below the head, logically, we add the body, also contained within the <html> tags. Okay, so far we have:

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  
4.    <head>  
5.       <title>MySite</title>  
6.   </head>  
7.   <body>  
8.      <!-- content goes here -->  
9.   </body>  
10. </html>  

This is a basic page setup, you might want to save this clip somewhere for future use.
So remember when we said we’d have header, content, sidebar, and footer sections?
Good, now each of these is going to be within its own <div>, and will be given an appropriate id.

view plaincopy to clipboardprint?

1. <body>  
2.     <div id="header">  
3.     </div><!--end header -->  
4.     <div id="content">  
5.     </div><!--end content-->  
6.     <div id="sidebar">  
7.     </div><!--end sidebar-->  
8.     <div id="footer">  
9.     </div><!--end footer-->  
10. </body>  

NOTE: it’s a good idea, especially when you first start, to add comments at every </div> so you can keep track of the hierarchy of divs.
Now let’s take another look at our psd – remember how we want the footer and header slices to repeat indefinitely out to the sides?
We’re going to need a way to let these elements stretch out, but at the same time, we need the main content (“content” “sidebar”)
to be contained within a specified width at the centre of the screen.
To handle this, we need a big div holding our expanding elements, and a div to contain the main content.
We should also notice that the footer text is centered too, so we need to repeat the same process for the footer.
To do this, we need to wrap some divs around the ones we already have. We have two basic sections, the main section, and the footer section.
Each is going to be contained within one big, unruly div with an unspecified width,
and the content of each will be wrapped in individual divs that specify width and centering.
We want to use the same rules for the main and footer content, so instead of (or in addition to) specific id’s, they will have specified classes,
which means you can create a set of rules to define all div’s with the same class.
So the main content is going to be wrapped inside a div with the id “main” and our footer will be wrapped in a div with the id “footer.” If it helps to visualize the structure, here’s a diagram:

And the markup looks like this:

1. <body>  
2.     <div id="main">  
3.         <div id="header">  
4.         </div><!--end header -->  
5.         <div id="content">  
6.         </div><!--end content-->  
7.         <div id="sidebar">  
8.         </div><!--end sidebar-->  
9.     </div><!--end main-->  
10.     <div id="footer">  
11.     </div><!--end footer-->  
12. </body>  

Now we wrap each section in a containing div, with the class of “container.”

1. <div id="main">  
2.     <div class="container">  
3.          <div id="header">  
4.          </div><!--end header -->  
5.          <div id="content">  
6.          </div><!--end content-->  
7.          <div id="sidebar">  
8.          </div><!--end sidebar-->  
9.     </div><!--end main container-->  
10. </div><!--end main-->  
11. <div id="footer">  
12.     <div class="container">  
13.     </div><!--end footer container-->  
14. </div><!--end footer-->  

I know all these wrapping divs seem redundant, but they will become relevant when we start styling the page.

---

Step 19 - Adding Content

Now that the structure of our page is set, we can start adding content, from top to bottom. Here’s an outline of the html elements that will make up our page:

Header

At the very top we have our header, and within the header we have 3 main elements: a logo, a tagline, and a navigation menu.
So let’s create a div for our header, and to keep things clean, we’ll put the logo and tagline in their own divs.

1. <div id="header">  
2.     <div id="logo">  
3.         </div>  
4.     <div id="tagline">  
5.         </div>  
6. </div><!--end header -->  

Because it’s the most important heading of the page, the Logo is going inside an <h1> tag. We have more options for the tagline, depending on how relevant it is to your site. In this case, I’m using an <h3> tag.
For the navigation, standard practice is to place menu items within an unordered list, with each list item containing an anchor tag.
So we have:

view plaincopy to clipboardprint?

1. <div id="header">  
2.     <div id="logo">  
3.      <h1>Logo</h1>  
4.     </div>  
5.     <div id="tagline">  
6.         <h3>And a little tagline, too.</h3>  
7.     </div>  
8.     <ul id="menu">  
9.         <li><a href="#">Home</a></li>  
10.         <li><a href="#">About</a></li>  
11.         <li><a href="#">Portfolio</a></li>  
12.         <li><a href="#">Contact</a></li>  
13.     </ul>  
14. </div><!--end header -->  

NOTE: the “href” value in the anchor tags would normally specify where the link goes, but in this case, the pound symbol just means “link to top of page.”

Main content

Looking at our main content area, we have 4 different styles of type: a big heading at the top, a smaller one,
and an even smaller one heading for the news item titles, plus some paragraphs, and the small little dates on news items.
We’re going to call these <h2>, <h3>,<h4>, <p>, and <small>, respectively. Now it’s just a matter of pasting in your content, which isn’t much fun, but it is pretty easy.

view plaincopy to clipboardprint?

1. <div id="content">  
2.         <h2>Lorem ipsum, Dolor sit</h2>  
3.         <h3>Nullam vulputate felis id odio interdum nec malesuada mi pretium. </h3>  
4.         <p>Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.  
5.             Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.  
6.             Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus.  
7.             Curabitur et ultricies quam. Aenean pretium aliquet velit, gravida vulputate urna tempus vel.  </p>  
8.         <p>Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. Praesent luctus egestas nisl, vitae vehicula eros rhoncus vel.  
9.             Phasellus consequat arcu eu neque convallis eu vulputate diam vehicula. In eget venenatis nisl.  
10.             Vestibulum id nulla eu sapien pellentesque malesuada pharetra ac lacus. Curabitur et ultricies quam. Aenean pretium aliquet velit,  
11.         gravida vulputate urna tempus vel. Proin tempor erat sit amet nisl porta nec vulputate arcu imperdiet. </p>  
12.     <div id="news">  
13.         <h3>Latest Updates</h3>  
14.         <h4>Vestibulum id nulla eu sapien pellentesque</h4>  
15.         <small>June 1, 2009</small>  
16.         <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,  
17.             facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.  
18.             Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>  
19.     <h4>Vestibulum id nulla eu sapien pellentesque</h4>  
20.     <small>June 1, 2009</small>  
21.     <p>Ut vel turpis a orci pulvinar tincidunt. Mauris id purus turpis. Aliquam metus arcu,  
22.         facilisis quis pellentesque vitae, dapibus non nulla. Nulla suscipit sagittis sodales.  
23.         Etiam laoreet ante in purus laoreet id malesuada dui pretium.<a href="#"> Read More</a></p>  
24.     </div><!--end news-->  
25. </div><!--end content-->  

I’ve added anchor tags with the value “Read More” at the end of each news item.

Sidebar

On to the sidebar now. The sidebar has three elements, each of which will be wrapped in its own div.
Each div will contain an <h3> header, and an unordered list, and each list item will again contain an anchor tag.
So go ahead and copy and paste your text in, and it should look something like this:

view plaincopy to clipboardprint?

1. <div id="sidebar">  
2.                 <div id="subscribe">  
3.                     <h3>Subscribe!</h3>  
4.                     <ul>  
5.                         <li><a href="#">Subscribe via RSS</a></li>  
6.                         <li><a href="#">Get Email Updates</a></li>  
7.                         <li><a href="#">Follow us on Twitter</a></li>  
8.                     </ul>  
9.                 </div>  
10.                 <div id="popular">  
11.                     <h3>Popular Items</h3>  
12.                     <ul>  
13.                         <li><a href="#">Lorem ipsum dolor site amet</a></li>  
14.                         <li><a href="#">Ulvinar tincidunt, Mauris id</a></li>  
15.                         <li><a href="#">Lorem ipsum dolor site amet</a></li>  
16.                         <li><a href="#">Proin tempor erat sit tene</a></li>  
17.                     </ul>  
18.                 </div>  
19.                 <div id="contributors">  
20.                     <h3>Contributors</h3>  
21.                     <ul>  
22.                         <li><a href="#">John Smith, freelance writer</a></li>  
23.                         <li><a href="#">Jack McCoy, designer</a></li>  
24.                         <li><a href="#">Lenny Briscoe, editor</a></li>  
25.                         <li><a href="#">John Smith, martketing</a></li>  
26.                     </ul>  
27.                     <a href="#">Join Our Team</a>  
28.                 </div>  
29.             </div><!--end sidebar-->  

Footer

We may as well put the footer in before checking it in the browser, it should only take a second.
Worth noting is that any symbols you want to use in your text have special codes in html, for example, the copyright symbol is coded as ©

view plaincopy to clipboardprint?

1. <div id="footer">  
2.         <div class="container">  
3.             <p>Copyright © 2009  MySite <br />  
4.             All Rights Reserved</p>  
5.         </div><!--end footer container-->  
6.     </div><!--end footer-->  

And that’s about it for the markup, let’s take a look:

looks pretty good, no? Well, no, not yet. But it does contain all the information we need, and is ready for styling.

---

Part Four – CSS

Step 20 - Adding CSS

Now, this is where the magic happens.
Create a new file in our site folder, and call it “style.css”.
Now we need a way to tell the browser that this css file belongs to our index.html file, so we link to it with the “link href” tag. Put this line of code into your <head> section, beneath the title.

1. <link href="style.css" rel="stylesheet" type="text/css" media="screen" />  

Now our html file can access our css file, so whatever changes we make to the css will affect the html file.

---

Step 21 - Basic Cleanup

There are a couple ugly things about our site that we can fix right away: we want to change the default font, we want the content to be 800px wide and centered, and we want to get rid of all those spaces between the elements.
First, we’re going to pick a font for all text within the body of the page, which will be displayed unless otherwise specified:

view plaincopy to clipboardprint?

1. body { font-family: Arial, Helvetica, sans-serif; }  

Next, let’s define the width and margins of our “container” class divs.

view plaincopy to clipboardprint?

1. .container {  
2.     width: 800px;  
3.     margin: 0 auto;  
4. }  

the margin: 0 auto property is shorthand meaning that there is no margin at the top, and that it will be automatically centered horizontally.
Let’s take a look.

Much better. The next step is going to make things look much worse, but stick with me.

CSS reset

All browsers use default padding and margin values for each element, which makes unstyled pages look nice, but for us they just get in the way of our own styles.
To get rid of all these messy margins, we’re going to use a very simple css reset, which is just a rule that gets rid of the default padding and margins on the elements we’re using. Put this at the top of your css file:

view plaincopy to clipboardprint?

1. '  
2. body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin:0px; padding:0px; }  

now let’s look:

---

Step 22 - Header

Okay, so everything’s all squished up and ready for us to manipulate! Now we get to start adding our own styles, again, from top to bottom.
Let’s get the tricky part out of the way first: setting the background images for the header.
We’ll star with the repeating slice we took of the header. The repeating image is going to be within the “main” div, which has an undefined width. We need to let the browser know where the image is, and what to do with it (repeat, no-repeat) to set a background image, we use the property “background” and specify the location of the image or ‘url’: in our case, the image is in our images folder, so we specify the location like this:

view plaincopy to clipboardprint?

1. url (images/header_slice.jpg)  

then specify that we want it to repeat along the x-axis:

view plaincopy to clipboardprint?

1. #main {  
2.     background: url(images/header_slice.jpg) repeat-x;  
3. }  

Check it out:
awesome, right? Try stretching out your browser, it just goes on and on and on… But we’re still missing the highlight on the blue bar, and since we cut out an 800px part of our header, we can put it inside our “container” div. Problem is, we have two of those (one for the main div, one for the footer) so we need to specify that we want the div with the class “container” that lies within the div with the id “main”
set the image the same way as before, but this time we need to specify “no-repeat”:

view plaincopy to clipboardprint?

1. #main .container {  
2.     background: url(images/header.jpg) no-repeat;  
3. }  

Take a look:

great! the highlight is sitting just where we want it, and blending in to the repeating sides.

---

Step 23 - Logo Image Replacement

Our logo is pretty complicated, right? we’re using an image background, and a non-html font with an inner shadow. We can’t do that in css, so we have to replace the text with an image.
“why not just put the image in place of the <h1> line?”
you may ask. Well, on the internet, the <h1> header is basically the ‘name’ of your page, and important, powerful robots (google) scan for this property when searching for keywords. If you don’t have an <h1> header, your site could be called kalamazoo, but it wouldn’t turn up in a search for that exact word.
There are various other techniques which have their advantages over this one, (see here, especially technique #8) but this is the simplest and the most appropriate technique for this situation.
So, to fix this problem, we use a devious little technique called “image replacement” to use the image that we want, while keeping the <h1> header in our markup. First, let’s add the image as a background to the #logo div.

view plaincopy to clipboardprint?

1. #logo {  
2.     background: url(images/logo.png) no-repeat;  
3. }  

if you look at your browser, you’ll see that our logo has been chopped in half. This is because we haven’t given it any room, we can solve this by specifying the dimensions of the image:

view plaincopy to clipboardprint?

1. #logo {  
2.     background: url(images/logo.png) no-repeat;  
3.     height: 84px;  
4.     width: 235px;  
5. }  

Better, but we still have the original <h1> text in our way, but we can fix it! All we’re going to do is set the text-indent value to something ridiculous, like -9999px, way off the page, so no one will ever see it, except the search engine robots.

view plaincopy to clipboardprint?

1. #logo h1 {  
2.     text-indent: -9999px;  
3. }  

now take a look, and our logo image is happily sitting where our <h1> text used to be. But it still looks pretty bad, all cramped up at the top there. When we want to move an item from its original position on the page, we can use both the padding and the margin properties. We’re going to try both to see the difference
First, let’s try adding a margin to the top of the h1 tag. We can find out how big to make it with the ruler tool in Photoshop.

1. #logo h1 {  
2.     text-indent: -9999px;  
3.     margin-top: 40px;  
4. }  

Oops! We managed to move the logo, but it took the whole page with it! Let’s try adjusting the padding instead:

1. #logo h1 {  
2.     text-indent: -9999px;  
3.     padding-top: 40px;  
4. }  

Now take a look, and the damn thing went back to where it started! This is because the margin property moves the whole element, but the padding only moves the content of the element, leaving the background where it is. So, if our screen was, say , 19999px wide, we would see our outcast <h1> header move down 40px, but this is not what we were going for.
So, to move the background image of the logo, we need to move the div above it, because the whole logo div is the “content” of the header div. let’s try it out:

1. #logo h1 {  
2.     text-indent: -9999px;  
3. }  
4. #header {  
5.     padding-top: 40px;  
6. }  

Much better! Now our logo looks just like it does in our psd, in exactly the right spot. If only we could fix that tagline…

---

Step 24 - Floating the Tagline

So now we need to find a way to get that tagline out beside the logo. Problem is, html elements naturally stack vertically, pushing eachother up and down the page.
We have a few options to fix this, but I’m going to use floats, which are a little tricky, but seriously useful once you get the hang of them.
Okay, so what’s a float? Well, that’s complicated. Basically, when you tell an element to ‘float’, it sticks it to the side of a page or element, and also takes it out of the normal “flow” of the page. Confused? Let me demonstrate.

1. #logo {  
2.     background: url(images/logo.png) no-repeat;  
3.     height: 84px;  
4.     width: 235px;  
5.     float: left;  
6. }  

Well, as you can see, we managed to get our tagline out to the side, but it took the navigation menu with it.
I think of it this way: a normal element (for example, a div, or an h1 header, or an image), even if it’s really small, invisibly occupies all the space to the side of it, like one big long horizontal bar.

This is why all the other elements stay beneath it, instead of cozying up beside. When you float an element, You take away all the extra space to the side, and restrict it to only the space it directly takes up, allowing other elements to wrap around it.
Now that you know how floats work, how can we fix our present situation? First, we have to isolate the tagline into a float of its own, so it too lies outside the normal “flow” of the page:

1. #tagline {  
2.     float: left;  
3. }  

Take a peek in the browser, and look at that, we made it worse. Now the menu items are wrapping around our tagline! What we need here is to restore the normal flow of the document after the floated elements. There are a couple ways to do this, but we’re using the most straight-forward method. Go back to your index.html file, and add in a new div beneath our floated divs. Instead of adding a class or id to this div, we’re going to give it a style (yes it’s an inline style, but only a teeny little one) clear: both.

1. <div id="header">  
2.     <div id="logo">  
3.         <h1>Logo</h1>  
4.     </div>  
5.     <div id="tagline">  
6.         <h3>And a little tagline, too.</h3>  
7.     </div>  
8. <div style="clear:both"></div>  

Resave your html file and check in your browser: you should see the tagline out beside the logo, with the menu below. Now all we have to do is get that tagline into shape, and put it where it belongs. Let’s start by copying the font styles over from Photoshop:

1. #tagline h3 {font-size: 30px; color: #e4dfdf; }  

and then add a bit of padding at the top and left:

1. #tagline {  
2.     float: left;  
3.     padding-top: 20px;  
4.     padding-left: 20px;  
5. }  

take a look: now we’re getting somewhere!

---

Step 25 - Navigation Bar

now we need to get our navigation menu in a straight line. First things first, though, we’re going to style the font so we can space things out accordingly. When you style the font of a list of anchor tags, you need to specify not only that you are referring to list items, but to the anchors within them. We’re specifying our specific unordered list, so that we can deal with the other ones separately. We also need to get rid of the underlines and the bullet points.

1. ul#menu {  
2.     list-style: none;  
3. }  
4. ul#menu li a {  
5.     font-size: 30px;  
6.     color: #676666;  
7.     text-decoration: none;  
8. }  

Great, now, we need to find a way to get all our links in a row. How? More Floats! We’re going to set the list-items to float left, so that each item sticks to the one beside it.

1. ul#menu li {  
2.     float: left;  
3. }  

If you look in your browser, you’ll notice the same problem we had before with floated items: other elements are wrapping around it. Just like before, we can insert our clearing div right after the unordered list.

1. <ul id="menu">  
2.     <li><a href="#">Home</a></li>  
3.     <li><a href="#">About</a></li>  
4.     <li><a href="#">Portfolio</a></li>  
5.     <li><a href="#">Contact</a></li>  
6. </ul>  
7. <div style="clear:both"></div>  
8. </div><!--end header -->  

All our list items should be in a line now, we just have to space them out and move the menu down a bit. So first measure the distance from the bottom of our logo to the top of the menu text, and we get about 55px.
the first item is about 30px left of our guide, so let’s set the list item padding to 30px left.

1. ul#menu {  
2.     list-style: none;  
3.     padding-top: 55px;  
4. }  
5. ul#menu li {  
6.     float: left;  
7.     padding-left: 30px;  
8. }  

We still need to put more space between each item, if we measure the space in our psd, it’s about 105px, but since we already have 30px padding between each, we only need to add 75px padding to the right of each item.

1. ul#menu li {  
2.     float: left;  
3.     padding-left: 30px;  
4.     padding-right: 75px;  
5. }  

And finally, admire our work:

Perfect! Our menu is just like the psd. On to the content!

---

Step 26 - Content

Top area

The first thing we’re going to do here is set all the fonts, so we can see the spacing we have to work with. just plug in the font info from Photoshop:

1. #content h2 {  
2.     font-size: 36px;  
3.     color: #015878;  
4. }  
5. #content h3 {  
6.     font-size: 24px;  
7.     color: #444444;  
8. }  
9. #content h4 {  
10.     font-size: 18px;  
11.     color: #373737;  
12.     font-weight: normal;  
13. }  
14. #content p {  
15.     font-size: 14px;  
16.     color: #595858;  
17. }  
18. #content small {  
19.     font-size: 12px;  
20.     color: #373737;  
21. }  
22. #content a {  
23.     color: #0f6c8d;  
24.     font-weight: bold;  
25.     text-decoration: none;  
26. }  

We get something like this:

At this point you may notice that we haven’t set a background color for the content area yet. This is because… I forgot. So let’s just do that now, shall we?

1. body {  
2.     font-family: Arial, Helvetica, sans-serif;  
3.     background: #ebe8e8;  
4. }  

Alright, now we’re ready to add some padding to space everything out.
first, the distance from the bottom of the nav menu to the top of the h2 heading is about 25px:

1. #content h2 {  
2.     font-size: 36px;  
3.     color: #015878;  
4.     padding-top: 25px;  
5. }  

Next, the distance from the bottom of the h2 heading to the top of the h3 heading is also around 25px, so repeat basically the same code:

1. #content h3 {  
2.     font-size: 24px;  
3.     color: #444444;  
4.     padding-top: 20px;  
5. }  

Now, the distance from the bottom of the h3 heading to the top of the first paragraph is about 45px, but if we set the padding-top to 40px, we will also end up with 40px of padding between the two paragraphs. Since the paragraphs are only about 20px apart, we need to split the padding into top and bottom: add 20px of padding to the bottom of the h3 heading, and 20px of padding to the top of the paragraph.

1. #content h3 {  
2.     font-size: 24px;  
3.     color: #444444;  
4.     padding-top: 20px;  
5.     padding-bottom: 20px;  
6. }  
7. #content p {  
8.     font-size: 14px;  
9.     color: #595858;  
10.     padding-top: 20px;  
11. }  

Check out the results:

News section

The spacing is a little different in the news section, first of all, we need to push it down the page a bit. There’s also too much padding beneath the h3 heading, so we’re going to remove a bit.
We also need to reduce the padding above the paragraphs, and add some padding between the two news items.

1. #news {  
2.     padding-top: 10px;  
3. }  
4. #news h3 {  
5.     padding-bottom: 10px;  
6. }  
7. #news p {  
8.     padding-top: 10px;  
9.     padding-bottom: 14px;  
10. }  

Which looks like this:

There, now all we need to do is get the sidebar out to the side, and we’re done the main content.

---

Step 27 - Floating the Sidebar

first, we need to set the width for the content section:

1. #content {  
2.     width: 510px;  
3. }  

Now, to get the sidebar out there, we will once again be using floats, setting both the content area and sidebar to float left.

1. #content {  
2.     width: 510px;  
3.     float: left;  
4. }  
5. #sidebar {  
6.     float: left;  
7. }  

If you take a look in your browser, you will notice that our footer text has wrapped around the sidebar. We know how to deal with this problem by now: we just need to add our little clearing div to the markup:

1. <div id="contributors">  
2.     <h3>Contributors</h3>  
3.     <ul>  
4.         <li><a href="#">John Smith, freelance writer</a></li>  
5.         <li><a href="#">Jack McCoy, designer</a></li>  
6.         <li><a href="#">Lenny Briscoe, editor</a></li>  
7.         <li><a href="#">John Smith, martketing</a></li>  
8.     </ul>  
9.     <a href="#">Join Our Team</a>  
10. </div>  
11. </div><!--end sidebar-->  
12. <div style="clear:both"></div>  
13. </div><!--end main container-->  
14. </div><!--end main-->  

Alright, next step is to just copy over the font styles from our psd for the sidebar:

1. #sidebar h3 {  
2.     font-size: 24px;  
3.     color: #044055;  
4.     font-weight: normal;  
5. }  
6. #sidebar ul li a {  
7.     font-size: 14px;  
8.     color: #393838;  
9. }  

Remember that to style the font of the links in an unordered list, we need to refer to the anchor tag, rather than the list item itself.
Now, if we look over at our psd again, we’ll notice that the text for the list items in the “subscribe” widget is slightly larger than in the rest of the sidebar. To fix this, we need to target the specific unordered list, so we need to add an id value to the subscribe ul in our markup:

1. <ul id="subscribe">  
2.     <li><a href="#">Subscribe via RSS</a></li>  
3.     <li><a href="#">Get Email Updates</a></li>  
4.     <li><a href="#">Follow us on Twitter</a></li>  
5. </ul>  

Then we can refer to it in our css:

1. ul#subscribe li a {  
2.     font-size: 18px;  
3. }  

Now we need to style our sidebar: add padding, margins, backgrounds and borders. First let’s get rid of the bullets:

1. #sidebar ul {  
2.     list-style: none;  
3. }  

OK so it’s still way in the wrong spot, so let’s fix that by adding margins to the top and left. When measuring in your psd, measure to where the border of the sidebar begins.

1. #sidebar {  
2.     float: left;  
3.     margin-left: 55px;  
4.     margin-top: 35px;  
5. }  

Now for the background: underneath the margin-top property, add the background and border properties:

1. background: #d4d6d3;  
2. border: 1px solid #BEBDBD;   

Next we’ll add 15 px of padding on all sides:

1. padding: 15px;   

And then add the padding to our text styles to space out our menu:

1. #sidebar h3 {  
2.     font-size: 24px;  
3.     color: #044055;  
4.     font-weight: normal;  
5.     padding-bottom: 20px;  
6.     padding-left: 15px;  
7. }  
8. #sidebar ul {  
9.     list-style: none;  
10.     padding-bottom: 25px;  
11. }  
12. #sidebar ul li a {  
13.     font-size: 14px;  
14.     color: #393838;  
15. }  
16. ul#subscribe li {  
17.     padding-bottom: 5px;  
18. }  
19. ul#subscribe li a {  
20.     font-size: 18px;  
21. }  

Our sidebar already looks almost perfect, we just need to add in the icons in the subscribe section, and style that “join us” anchor tag.
Okay, so let’s get those icons working. Adding images to an unordered list can seem confusing, but if you take things step by step, it makes perfect sense. But it is a bit tedious.
To start, we’re going to have to make some room for the icons. We’re going to set them as background images, so if we use the padding property to move our list items over a bit, the images won’t be affected. The icons are about 26px wide, so we’ll add some padding to the left of the list items:

1. ul#subscribe li {  
2.     padding-bottom: 5px;  
3.     padding-left: 30px;  
4. }  

Now we need a way to target each separate list item, so we’ll add some id’s in the markup:

1. <ul id="subscribe">  
2.     <li id="rss"><a href="#">Subscribe via RSS</a></li>  
3.     <li id="email"><a href="#">Get Email Updates</a></li>  
4.     <li id="twitter"><a href="#">Follow us on Twitter</a></li>  
5. </ul>  

Now we add background images to each list item:

1. li#rss {  
2.     background: url(images/rss_icon.png) no-repeat;  
3. }  
4. li#email {  
5.     background: url(images/email_icon.png) no-repeat;  
6. }  
7. li#twitter {  
8.     background: url(images/twitter_icon.png) no-repeat;  
9. }  

At this point it occurred to me that perhaps 18px was a bit too big for the links here, so I reduced it to a less dramatic 16px, which allowed me to add in a teeny bit more padding on the left without stretching the sidebar out.

1. ul#subscribe li {  
2.     padding-bottom: 5px;  
3.     padding-left: 35px;  
4. }  

Our spartan little sidebar is almost complete! Now to style our button:
We need to target the button, so let’s add a class to the markup: (im using a class instead of an id this time, which is common practice, as we could hypothetically add more buttons later)

1. <a href="#" class="button">Join Our Team</a>  

So let’s just fix up the text style and add in our repeating background slice:

1. a.button {  
2.     color: #393838;  
3.     text-decoration: none;  
4.     background: url(images/button_slice.jpg) repeat-x;  
5. }  

as you can see, our background image is there, but it only appears directly behind the text, we need to give it space to spread out. First, let’s give it a margin to get it into the centre of the sidebar:

view plaincopy to clipboardprint?

1. margin-left: 30px;  

and some padding on each side so our button spreads out:

view plaincopy to clipboardprint?

1. padding: 13px 23px;   

This is a short-hand way to write the padding properties, and is entirely acceptable, and even encouraged, since it saves space. In this case, it specifies 13px of padding on the top AND bottom, and 23px of padding on the left and right.

the button looks great, but oops! it moved to the right 23px, so let’s reduce our margin a bit to compensate

1. margin-left: 14px;   

Now let’s just give it some space underneath by adding padding to the entire sidebar div:

1. #sidebar {  
2.     float: left;  
3.     margin-left: 55px;  
4.     margin-top: 35px;  
5.     background: #d4d6d3;  
6.     border: 1px solid #BEBDBD;  
7.     padding: 15px 15px 30px 15px;  
8. }  

here’s that shorthand property again: it goes in this order: top, left, bottom, right. So here it says 15px on all sides except the bottom, which should be 30px.
finally, we just need to add that 1px border to the button class:

1. border: 1px solid #c7c7c7;   

And there we have it, one sidebar!

---

Step 28 - The Footer

Last but not least, our simple little footer. We’ll set the footer the same way as we set the header:
Using a repeating slice within an div of unspecified width, and then adding the content inside a fixed-width, centred div.
This is where our .container div comes in handy, because we don’t need to specify the 800px or margin:auto this time, because it’s already done.
Let’s start with the repeating slice:

1. #footer {  
2.     background: url(images/footer_slice.jpg) repeat-x;  
3. }  

It’s a start, but it’s really tiny. let’s add some padding, and make the text white:

1. #footer {  
2.     background: url(images/footer_slice.jpg) repeat-x;  
3.     padding-top: 20px;  
4.     padding-bottom:60px;  
5.     margin-top: 40px;  
6.     color: #fff;  
7. }  

and the whole thing:

---

Step 29 - Little Changes

In a browser, stuff looks a bit different than in Photoshop, so we might want to make some minor changes. For example, I’d like a bit more padding above the main content and sidebar. We’ll add it to the bottom of the menu.

1. ul#menu {padding-bottom: 50px}   

I also decided that I wanted the menu to align to the left, so I’m going to remove the padding-left. Now the items are closer together, because we had padding of 75px on the right and 30px on the left, for a total of 105. Now that we’ve taken away the left padding, we need to add it to the right to make up the difference:

1. ul#menu li {  
2.     float: left;  
3.     padding-right: 105px;  
4.     width: 95px;  
5. }  

And the grand finale:

So next… wait? what? we’re done?
We’re done!
Now just some housekeeping to worry about: Validation.

---

Step 30 - Validation

Now validation is a crucial step in website design, I’m not going to go into the endless reasons here because this article does it for me. Here I’m just going to walk through the process:

HTML Validation

Go to the w3.org Validation Service, select validate by file upload, and select your index.html file, and click “check.”
Next… The moment of truth:
RED (Red is bad!)
Don’t worry, it’s not so bad; let’s review what went wrong:
looks like I only have one error:
They caught me using the same id tag twice, which could cause serious confusion. Since we have lots of styles defined for the ul with the id “subscribe”, we’re just going to change the name of the div instead: let’s call it “feeds”
Now we need to check that we haven’t defined any styles for #subscribe, and we haven’t!
To be safe, let’s reload our page to make sure there were no unintentional changes.
Looks good! Now let’s run the validation again:
Success! Our page is now valid XHTML. You can even download an icon if you want to brag.
Note: I was pleasantly surprised to find only one error, if you’re not so lucky, read the suggested info at w3 shcools, or check out this article by Glen Stansberry.
It seems we’re done! Ah, but if only it were that easy. We still have to validate our CSS!

CSS Validation

Head over to The w3 CSS Validator and go through the same process as with the html, only this time select your style.css file. Checking…
We’re Valid!
However, we did get a couple warnings. To stay within the good graces of the church, we should certainly pay attention to them:

It’s just a few little problems: we should have declared widths for all our floated items. Again, these suggestions are optional, but it’s best to listen to constructive criticisms.
Cleaning Up: our tagline, menu unordered list items, and sidebar all need to have widths declared. We also want to do this without changing the appearance of the page.
First up, the tagline. We can just make a rough guess on this one, it’s about 400px wide.

1. #tagline {  
2.     float: left;  
3.     padding-top: 20px;  
4.     padding-left: 20px;  
5.     width: 400px;  
6. }  

And reload: no change, excellent. Next, the menu list items. this is a little trickier: Our page is 800px wide, so that’s the maximum total width of all the list items together. If we divide by the four list items, and set the width to 200px, the items get mixed up and list vertically. This is because we have padding on either side of each list items: 30px on the left and 75px on the right. Subtract that 105 from 200, and the remaining width is 95px.

1. ul#menu li {  
2.     float: left;  
3.     padding-left: 30px;  
4.     padding-right: 75px;  
5.     width: 95px;  
6. }  

Same idea with the sidebar: let’s first take a look at the width of the content area: 510px. The remainder in our 800px page is 290px, but first we need to subtract all the padding on the left and right: 290-30=260. Next subtract the left margin, and we’re left with 205px. One last problem: our 1px border, so let’s subtract another 2px, and set the width of the sidebar to 203px. Check it again, no change.
Excellent, if we validate again, no errors, not even a warning!
Our webpage, as far as w3c standards are concerned, is perfect.

---

Conclusion

So there you have it, one very simple, well-coded website. Throughout this tutorial, my hope is that you picked up some valuable skills to apply to your own designs, and are now ready to get started coding your own sites.

Salatur Rasool (SM) Bangla Edition

ছালাতুর রাসূল (ছাঃ)

ছালাতের বিবরণ
নিয়ত; তাকবীরে তাহরীমা ও বুকে হাত বাঁধা
ছানা; বিসমিল্লাহ পাঠ 
ছালাতে সর্বাবস্থায় সূরায়ে ফাতিহা পাঠ করা
বিরোধীদের দলীলসমূহ ও তার জওয়াব
রুকূ পেলে রাক‘আত না পাওয়া
ক্বিরাআতের আদব 
সশব্দে আমীন 
রুকূ  
ক্বওমা
ক্বওমার অন্যান্য দো‘আ সমূহ
রাফ‘উল ইয়াদায়েন
রাফ‘উল ইয়াদায়নের ফযীলত
সিজদা
জালসায়ে ইস্তেরা-হাত
সিজদার ফযীলত
সিজদার অন্যান্য দো‘আ সমূহ
শেষ বৈঠক 
তাশাহহুদ; নবীকে সম্বোধন 
দরূদ; দরূদ-এর ফযীলত 
দো‘আয়ে মাছূরাহ
তাশাহ্হুদ ও সালামের মধ্যবর্তী দো‘আ বিষয়ে জ্ঞাতব্য 
সালাম
ছালাত পরবর্তী যিকর সমূহ
মুনাজাত 
ছালাতে দো‘আর স্থান সমূহ 
ফরয ছালাত বাদে সম্মিলিত দো‘আ 
প্রচলিত সম্মিলিত দো‘আর ক্ষতিকর দিক সমূহ
ছালাতে হাত তুলে সম্মিলিত দো‘আ; একাকী দু’হাত তুলে দো‘আ
কুরআনী দো‘আ
সুন্নাত-নফলের বিবরণ
সুন্নাত ও নফলের ফযীলত
মাসবূকের ছালাত 
ক্বাযা ছালাত 

View Full Book

SALATUR RASOOL (SM)

 (المحتويات)  Contents

	Introduction
	Ponder over
1.	Description of Salat in short
2.	Essential Suras
3.	Information about Salat
	§      Definition of salat; Obligation of salat and its number of rak‘ats §      Importance of salat §      Rulling against the abstainer from salat §      Merits of salat §      Merits of salat in the mosque §      Knowings about the mosque §      Importance and merits of salat in Jama-‘at §      Forbidden places of salat §      Conditions of salat §      Four principles of shari‘ah regarding dress code and Satar §      Head-dress §      Rukans of salat §      Wajibs of salat §      Sunnats of salat §      Acts that nullify the salat §      Times of salat §      Prohibited times of salat
4.	Taharat (Cleanness)
	§      Ozu (Ablution) §      Merits of Ablution §      Description of Ozu §      Other Information about Ozu & Masah §      Acts that nullify the ablution §      Description of bathing §      Description of Taiyammum §       Causes of making Taiyammum §       Etiquettes of toilet
5.	Azan (Call of prayer)
	§       Definition, Introduction §       Merits of Azan §       Words of Azan §       Iqamat §       Tarjee‘ Azan §       Azan of Sahari §       Answer to Azan §       Doa of Azan §       Extra words added in response to Azan §       Other things of Azan to be shunned §       Other information about Azan
6.	Salatur Rasool (SM)
	§        Description of salat §        Niyat; Takbeer-i-Tahreemah & fixing two hands on the chest §        Sana (Doa of Istiftah) §        Reading of Bismillah §        Proofs of reading sura Fatiha in Salat in all conditions §        Proofs of oppositions and answer to them §        Not to get Rak‘at by getting Ruku only §        Manners of Qira-’at §        Ameen in loud voice §        Ruku §        Qawmah; Another Doas of Qawmah §        Raf‘ul Yadayn §        Merits of Raf‘ul Yadayn §        Sijdah §        Jalsa-i-Istira-hat §        Merits of Sijdah; Some other Doas of Sijdah §        Last sitting §        Tashahhud; To address the Prophet (sm) §        Darood; Merits of Darood §        Doa Mathoorah §         About the Doas between Tashahhud & Tasleem §        Salam; Zikr after salat §        Supplication (Munajat) §        Places of Doa in Salat §        Congregational Doa after the Farz salat. §        Harmful aspects of congregational Doa in vogue §        Congregational Doa in salat raising two hands §        To make Doa lonely raising two hands §        Doas of Quran; Description of Sunnat and Nafl §        Merits of Sunnat & Nafl §        Salat of Masbooq §        Qaza salat
7.	Different information about Salat
	§        Salat inside the transport; Salat of a sick man §        Description of Sutra §        Imamat of whom is permissible §        Imamat of Fasiq and Bid‘ati §        Salat of ladies and their Imamat §        Imamat of Blind, Slave and Boys §        Eligible for Imamat; To follow the Imam §        Imamat of the Musafir §        Jama-‘at and Saff §        To count tasbeeh in fingers §        Replies to the verses of Quran §        Sijdah-i-Saho §        Sijdah-i-Tilawat §        Sijdah-i-Shukr §        Other Information about salat, Doa to enter the mosque and other Doas
8.	Identity of different kinds of salat
	1. Vitr Salat
	§         Qunoot §         Doa-i-Qunoot §         Qunoot-i-Nazhilah
	2. Taraveeh and Tahajjud
	§        Meirts of night salat; Jama-‘at of Tarabeeh §        Merits of Tarabeeh; Number of rak‘ats §        Twenty rak‘ats of Tarabeeh §        Looseness
	§        Is Tarabeeh in jama-‘at a bid‘at ? §        Ways of nafl salat at night at a glance §       Things to know about night salat §       Doa after wake up for Tahajjud
	3. Salat during the journey
	§       Distance of journey §       To unite two salats & Qasr
	4. Salat of Jum‘ah
	§       Introduction §       Importance §       Merits of the day of Jum‘ah §       Azan of Jum‘ah; 1st Azan of call §       Khutba §       Khutba in the mother tongue §       Qira-’at §       Asking for Doa; The moment for acceptance of Doa §       Remedy of sleeping §       Ehtiati Jum‘ah §       Sunnat of Jum‘ah §       Other Information about jum‘ah
	5. Salat of Eidayen
	§        Introduction §        Importance; Rules §        Information §        Additional Takbeers §        With takbeer-i-tahreemah or not? §        Four caliphs with twelve; Six takbeers in vogue §        Taveel (Misinterpretation) for six §        Procedure of the salat of Eidayen
	6. Salat of Janazah
	§        Rule; Wajibs, Sunnats §        Merits; Standing in rows §        Imamat ; Description of the Salat of Janazah §        To be done before Janazah §        Caution about Janazah §        Doa of Janazah §        Manners of Doa of Janazah §        Things to do at death-bed §        Doas just after the death and things to do §        Things to be shunned after death §        Things to be done after death ¨       Bathing of dead body ¨       Enshrouding ¨       Janazah ¨       Carrying of Janazah ¨       Burial §        Prohibited things on the grave §        Usual Shirks on the grave §        Usual Bid‘ats after death §        Lightening on the grave §        More Information about Janazah ¨       About the grave and dead body ¨       About due Salat & Siam of the deceased ¨       Janazah of still-born child ¨       Respect to the deceased ¨       Obligations of the neighbours ¨       Acts to be done for a deceased ¨       Three Sadaqahs   ¨       Janazah in absentia ¨       To Visit the grave ¨       Manners of visit
	7.  Salatul Ishraq & Zuha (Salat after sunrise).
	8. Salatul kusoof wal khusoof (Salat for solar & lunar eclipse)
	9.  Salatul Istisqa (Salat for asking rain)
	§        Meaning; Procedure; System §        Other systems than salat; Other things to know
	10. Salatul Hajat (Salat of fulfillment of wants)
	11. Salatut Tawbah (Salat of repentance)
	12. Salatul Istikharah (Salat of seeking guidance)
	13. Salatut Tasbeeh (Salat of glorification)
9.	Essential Doas View Full Book

Download Some Islamic Books

We are Muslim but our Activitis are not muslim. Please visit This site and Read Islamic Books.All Books are Bangla Visit- http://www.at-tahreek.com/downloads/books.html

নবীদের জীবন কাহিনী

ভূমিকা     

 

১. হযরত আদম (আলাইহিস সালাম)

• শয়তানের সৃষ্টি ছিল মানুষের জন্য পরীক্ষা স্বরূপ
• আদম সৃষ্টির কাহিনী
• খলীফা অর্থ
• সিজদার ব্যাখ্যা ও উদ্দেশ্য
• আদমের পাঁচটি শ্রেষ্ঠত্ব
• নারী জাতি পুরুষেরই অংশ এবং তার অনুগত
• নগ্নতা শয়তানের প্রথম কাজ
• মানব সৃষ্টির রহস্য
• জান্নাত থেকে পতিত হবার পর
• আদমের অবতরণ স্থল
• ‘আহদে আলাস্ত্ত-র বিবরণ
• ‘আহদে আলাস্ত্ত-র উদ্দেশ্য
• অন্যান্য অঙ্গীকার গ্রহণ
• আদমের মর্যাদা ও শ্রেষ্ঠত্ব
• দুনিয়াবী ব্যবস্থাপনায় আদম (আঃ)
• আদম পুত্রদ্বয়ের কাহিনী
• হত্যাকান্ডের কারণ
• শিক্ষণীয় বিষয়
• মৃত্যু ও বয়স
• আদম (আঃ)-এর জীবনী থেকে শিক্ষণীয় বিষয় সমূহ

২. হযরত নূহ (আলাইহিস সালাম)

• নূহ (আঃ)-এর পরিচয়
• তৎকালীন সামাজিক ও ধর্মীয় অবস্থা
• স্বীয় কওমের প্রতি নূহ (আঃ)-এর দাওয়াত
• নূহ (আঃ)-এর বিরুদ্ধে পাঁচটি আপত্তি  
• আপত্তি সমূহের জওয়াব
• নূহ (আঃ)-এর দাওয়াতের ফলশ্রুতি
• নূহের প্লাবন ও গযবের কুরআনী বিবরণ
• অন্যান্য বিবরণ
• নৌকার আরোহীগণ
• নূহ (আঃ)-এর জীবনী থেকে শিক্ষণীয় বিষয় সমূহ

৩. হযরত ইদরীস (আলাইহিস সালাম)

• ইদরীস (আঃ)-এর পরিচয়

৪. হযরত হূদ (আলাইহিস সালাম)

• হূদ (আঃ)-এর পরিচয়
• হূদ (আঃ)-এর দাওয়াত
• কওমে ‘আদ-এর প্রতি হূদ (আঃ)-এর দাওয়াতের সারমর্ম
• হূদ (আঃ)-এর দাওয়াতের ফলশ্রুতি
• কওমে ‘আদ-এর উপরে আপতিত গযব-এর বিবরণ
• কওমে ‘আদ-এর ধ্বংসের প্রধান কারণ সমূহ
• শিক্ষণীয় বিষয় সমূহ

৫. হযরত ছালেহ (আলাইহিস সালাম)

• কওমে ছামূদ-এর প্রতি হযরত ছালেহ (আঃ)-এর দাওয়াত
• ছালেহ (আঃ)-এর দাওয়াতের ফলশ্রুতি
• কওমে ছামূদ-এর উপরে আপতিত গযবের বিবরণ
• গযবের ধরন
• কওমে ছামূদ-এর ধ্বংস কাহিনীতে শিক্ষণীয় বিষয় সমূহ

৬. হযরত ইবরাহীম (আলাইহিস সালাম)

• আবুল আম্বিয়া ও সাইয়েদুল আম্বিয়া
• নবী ইবরাহীম
• সামাজিক অবস্থা
• ইবরাহীম (আঃ)-এর দাওয়াত : মূর্তিপূজারী কওমের প্রতি
• পিতার প্রতি
• পিতার জবাব
• ইবরাহীমের জবাব
• পিতাকে ও নিজ সম্প্রদায়কে একত্রে দাওয়াত
• দাওয়াতের সারকথা ও ফলশ্রুতি
• তারকা পূজারীদের সাথে বিতর্ক
• একটি সংশয় ও তার জওয়াব
• ইবরাহীম মূর্তি ভাঙ্গলেন
• নমরূদের সঙ্গে বিতর্ক ও অগ্নিপরীক্ষা
• হিজরতের পালা
• ইবরাহীমের হিজরত-পূর্ব বিদায়ী ভাষণ
• কেন‘আনের জীবন
• মিসর সফর
• শিক্ষণীয় বিষয়
• ইবরাহীমের কথিত তিনটি মিথ্যার ব্যাখ্যা
• তাওরিয়া ও তাক্বিয়াহ
• কেন‘আনে প্রত্যাবর্তন
• ইবরাহীমী জীবনের পরীক্ষা সমূহ
• বাবেল জীবনের পরীক্ষা সমূহ
• কেন‘আনী জীবনের পরীক্ষা সমূহ
• শিক্ষণীয় বিষয়
• খাৎনা করণ
• পুত্র কুরবানী
• শিক্ষণীয় বিষয় সমূহ
• অন্যান্য উল্লেখযোগ্য ঘটনাবলী
• (১) ইসহাক জন্মের সুসংবাদ
• (২) মৃতকে জীবিত করার দৃশ্য প্রত্যক্ষকরণ
• (৩) বায়তুল্লাহ নির্মাণ
• পরীক্ষা সমূহের মূল্যায়ন
• শিক্ষণীয় বিষয়সমূহ
• উপসংহার

৭. হযরত লূত্ব (আলাইহিস সালাম)

• লূত (আঃ)-এর দাওয়াত
• লূত (আঃ)-এর দাওয়াতের ফলশ্রুতি
• গযবের বিবরণ
• ধ্বংসস্থলের বিবরণ
• মুক্তিপ্রাপ্ত লোকদের সংখ্যা
• শিক্ষণীয় বিষয় সমূহ

৮. হযরত ইসমাঈল (আলাইহিস সালাম)

• পিতার প্রতি শ্রদ্ধাবোধের দৃষ্টান্ত
• প্রথম বিশুদ্ধ আরবী ভাষী
• যবীহুল্লাহ কে?

৯. হযরত ইসহাক্ব (আলাইহিস সালাম)

১০. হযরত ইয়াকূব (আলাইহিস সালাম)

• ইয়াকূবের অছিয়ত

১১. হযরত ইউসুফ (আলাইহিস সালাম)

• সূরা নাযিলের কারণ
• সুন্দরতম কাহিনী
• আরবী ভাষায় কেন?
• কাহিনীর সার-সংক্ষেপ
• সূরাটি মক্কায় নাযিল হওয়ার কারণ
• ইউসুফ (আঃ)-এর কাহিনী
• মিসরে ইউসুফের সময়কাল
• শৈশবে ইউসুফের লালন-পালন ও চুরির ঘটনা
• ইউসুফ-এর স্বপ্ন
• ভাইদের হিংসার শিকার হলেন
• ইউসুফ অন্ধকূপে নিক্ষিপ্ত হ’লেন
• পিতার নিকটে ভাইদের কৈফিয়ত
• কাফেলার হাতে ইউসুফ
• ইউসুফ মিসরের অর্থমন্ত্রীর গৃহে
• ইউসুফ যৌবনে পদার্পণ করলেন
• যৌবনের মহা পরীক্ষায় ইউসুফ
• মহিলাদের সমাবেশে ইউসুফ
• নবীগণ নিষ্পাপ মানুষ ছিলেন
• ইউসুফের সাক্ষী কে ছিলেন?
• ইউসুফ জেলে গেলেন
• কারাগারের জীবন
• জেলখানার সাথীদের নিকটে ইউসুফের দাওয়াত
• ইউসুফের দাওয়াতে শিক্ষণীয় বিষয় সমূহ
• বাদশাহর স্বপ্ন ও কারাগার থেকে ইউসুফের ব্যাখ্যা দান
• বাদশাহর দূতকে ফেরৎ দানে শিক্ষণীয় বিষয় সমূহ
• বাদশাহর দরবারে ইউসুফ (আঃ)
• ইউসুফের অর্থমন্ত্রীর পদ লাভ এবং সাথে সাথে বাদশাহীর ক্ষমতা লাভ
• ইউসুফের দক্ষ শাসন ও দুর্ভিক্ষ মুকাবিলায় অপূর্ব ব্যবস্থাপনা
• ভাইদের মিসরে আগমন
• ইউসুফের কৌশল অবলম্বন ও বেনিয়ামীনের মিসর আগমন
• বেনিয়ামীনকে আটকে রাখা হ’ল
• শিক্ষণীয় বিষয়
• বেনিয়ামীনকে ফিরিয়ে নেবার জন্য ভাইদের প্রচেষ্টা
• বেনিয়ামীনকে রেখেই মিসর থেকে ফিরল ভাইয়েরা
• পিতার নিকটে ছেলেদের কৈফিয়ত
• পিতার নির্দেশে ছেলেদের পুনরায় মিসরে গমন
• ইউসুফের আত্মপ্রকাশ এবং ভাইদের ক্ষমা প্রার্থনা
• ইউসুফের ব্যবহৃত জামা প্রেরণ
• ভাইদের প্রতি ক্ষমা প্রদর্শনের তাৎপর্য
• ইয়াকূব (আঃ) দৃষ্টিশক্তি ফিরে পেলেন
• ঘামের গন্ধে দৃষ্টিশক্তি ফেরা সম্পর্কে বৈজ্ঞানিক তথ্য
• পিতার নিকটে ছেলেদের ক্ষমা প্রার্থনা
• ইয়াকূব-পরিবারের মিসর উপস্থিতি ও স্বপ্নের বাস্তবায়ন
• ইউসুফের দো‘আ
• ইউসুফের প্রশংসায় আল্লাহ তা‘আলা
• শেষনবীর প্রতি আল্লাহর সম্বোধন ও সান্ত্বনা প্রদান
• ইউসুফের কাহিনী এক নযরে
• ইয়াকূব (আঃ)-এর মৃত্যু
• ইউসুফ (আঃ)-এর মৃত্যু
• সংশয় নিরসন
• ইউসুফের কাহিনীতে শিক্ষণীয় বিষয় সমূহ

১২. হযরত আইয়ূব (আলাইহিস সালাম)

• আইয়ূবের ঘটনাবলী
• শিক্ষণীয় বিষয় সমূহ

১৩. হযরত শো‘আয়েব (আলাইহিস সালাম)

• হযরত শো‘আয়েব (আঃ)-এর দাওয়াত
• কওমে শো‘আয়েব-এর ধর্মীয় ও সামাজিক অবস্থা এবং দাওয়াতের সারমর্ম
• শো‘আয়েব (আঃ)-এর দাওয়াতের ফলশ্রুতি
• শিক্ষণীয় বিষয় সমূহ
• আহলে মাদইয়ানের উপরে আপতিত গযবের বিবরণ

১৪-১৫. হযরত মূসা ও হারূণ (আলাইহিমাস সালাম)

• ফেরাঊনের পরিচয়
• বনু ইস্রাঈলের পূর্ব ইতিহাস
• মূসা (আঃ)-এর পরিচয়
• মূসা ও ফেরাঊনের কাহিনী
• মূসা নদীতে নিক্ষিপ্ত হ’লেন
• যৌবনে মূসা
• মূসা খুনী হ’লেন
• মূসার পরীক্ষা সমূহ
• নবুঅত-পূর্ব ১ম পরীক্ষা : হত্যা থেকে বেঁচে যাওয়া
• ২য় পরীক্ষা : মাদিয়ানে হিজরত
• মাদিয়ানের জীবন : বিবাহ ও সংসার পালন
• ৩য় পরীক্ষা: মিসর অভিমুখে যাত্রা ও পথিমধ্যে নবুঅত লাভ
• নয়টি নিদর্শন
• সিনাই হ’তে মিসর
• মূসার পাঁচটি দো‘আ
• মূসা হ’লেন কালীমুল্লাহ
• মূসা (আঃ)-এর মিসরে প্রত্যাবর্তন
• ফেরাঊনের নিকটে মূসা (আঃ)-এর দাওয়াত
• দাওয়াতের সার-সংক্ষেপ
• দাওয়াতের ফলশ্রুতি
• মু‘জেযা ও জাদু
• মূসার দাওয়াতের পর ফেরাঊনী অবস্থান
• ফেরাঊনের জবাবের সার-সংক্ষেপ
• নবুঅত-পরবর্তী ১ম পরীক্ষা : জাদুকরদের মুকাবিলা
• ফেরাঊনের ছয়টি কুটচাল
• ফেরাঊনী কুটনীতির বিজয় ও জনগণের সমর্থন লাভ
• জাদুকরদের সত্য গ্রহণ
• জাদুরকদের পরিণতি
• জনগণের প্রতিক্রিয়া
• ফেরাঊনের স্ত্রীর প্রতিক্রিয়া
• কুরআনে বর্ণিত চারজন নারীর দৃষ্টান্ত
• নবুঅত-পরবর্তী ২য় পরীক্ষা: বনু ইস্রাঈলদের উপরে আপতিত ফেরাঊনী যুলুম সমূহ
• ১ম যুলুম: বনু ঈস্রাঈলের নবজাতক পুত্র সন্তানদের হত্যার নির্দেশ জারি
• ২য় যুলুমঃ ইবাদতগৃহ সমূহ ধ্বংস করা
• ফেরাঊনের বিরুদ্ধে মূসার বদ দো‘আ
• ফেরাঊনী আচরণ থেকে প্রাপ্ত শিক্ষণীয় বিষয় সমূহ
• ফেরাঊনী সম্প্রদায়ের উপরে আপতিত গযব সমূহ এবং মূসা
• (আঃ)-এর মু‘জেযা সমূহ
• ১ম নিদর্শন : দুর্ভিক্ষ
• ২য় নিদর্শন : তূফান
• ৩য় নিদর্শন : পঙ্গপাল
• ৪র্থ নিদর্শন : উকুন
• ৫ম নিদর্শন : ব্যাঙ
• ৬ষ্ঠ নিদর্শন : রক্ত
• ৭ম নিদর্শন : প্লেগ
• ৮ম নিদর্শন : সাগর ডুবি
• নবুঅত-পরবর্তী ৩য় পরীক্ষা ও নাজাত লাভ
• আশূরার ছিয়াম
• বনু ইস্রাঈলের পরবর্তী গন্তব্য
• বনু ইস্রাঈলের অবাধ্যতা ও তাদের উপরে আপতিত পরীক্ষা
• সমূহের বিবরণ
• (১) মূর্তি পূজার আবদার
• তওরাত লাভ
• (২) গো-বৎস পূজা
• গো-বৎস পূজার শাস্তি
• তূর পাহাড় তুলে ধরা হ’ল
• সামেরীর কৈফিয়ত
• সামেরী ও তার শাস্তি
• (৩) আল্লাহকে স্বচক্ষে দেখার যিদ ও তার পরিণতি
• (৪) বায়তুল মুক্বাদ্দাস অভিযানের নির্দেশ
• পবিত্র ভূমির পরিচিতি
• নবুঅত-পরবর্তী ৪র্থ পরীক্ষা : বায়তুল মুক্বাদ্দাস অভিযান
• মিসর থেকে হিজরতের কারণ
• শিক্ষণীয় বিষয়
• বাল‘আম বা‘ঊরার ঘটনা
• তীহ্ প্রান্তরে ৪০ বছরের বন্দীত্ব বরণ
• তীহ্ প্রান্তরের ঘটনাবলী
• শিক্ষণীয় বিষয়
• তওরাতের শব্দগত ও অর্থগত পরিবর্তন
• গাভী কুরবানীর হুকুম ও হত্যাকারী চিহ্নিত করণ
• গাভী কুরবানীর ঘটনায় শিক্ষণীয় বিষয় সমূহ
• চিরস্থায়ী গযবে পতিত হওয়া
• মূসা ও খিযিরের কাহিনী
• তাৎপর্য সমূহ
• শিক্ষণীয় বিষয়
• খিযির কে ছিলেন?
• সংশয় নিরসন
• মূসা ও ফেরাঊনের কাহিনীতে শিক্ষণীয় বিষয় সমূহ

১৬. হযরত ইউনুস (আলাইহিস সালাম)

• ইউনুস (আঃ)-এর কওম
• মাছের পেটে ইউনুস
• ইউনুস কেন মাছের পেটে গেলেন?
• ইউনুস মুক্তি পেলেন
• শিক্ষণীয় বিষয় সমূহ

১৭. হযরত দাঊদ (আলাইহিস সালাম)

• জালূত ও তালূতের কাহিনী এবং দাঊদের বীরত্ব
• শিক্ষণীয় বিষয়
• দাঊদ (আঃ)-এর কাহিনী
• দাঊদ (আঃ)-এর বৈশিষ্ট্য সমূহ
• দাঊদ (আঃ)-এর জীবনের স্মরণীয় ঘটনাবলী
• সংশয় নিরসন
• দাঊদ (আঃ)-এর জীবনীতে শিক্ষণীয় বিষয় সমূহ

১৮. হযরত সুলায়মান (আলাইহিস সালাম)

• বাল্যকালে সুলায়মান
• সুলায়মানের বৈশিষ্ট্য সমূহ
• দু’টি সূক্ষ্মতত্ত্ব
• সুলায়মানের জীবনে উল্লেখযোগ্য ঘটনাবলী
• (১) ন্যায় বিচারের ঘটনা
• (২) পিপীলিকার ঘটনা
• (৩) ‘হুদহুদ’ পাখির ঘটনা
• (৪) রাণী বিলক্বীসের ঘটনা
• (৫) অশ্ব কুরবানীর ঘটনা
• (৬) সিংহাসনের উপরে একটি নিষ্প্রাণ দেহ প্রাপ্তির ঘটনা
• (৭) ‘ইনশাআল্লাহ’ না বলার ফল
• (৮) হারূত ও মারূত ফেরেশতাদ্বয়ের ঘটনা
• (৯) বায়তুল মুক্বাদ্দাস নির্মাণ ও সুলায়মান (আঃ)-এর মৃত্যুর বিস্ময়কর ঘটনা
• মৃত্যু কাহিনীর মধ্যে শিক্ষণীয় বিষয় সমূহ
• সংশয় নিরসন
• সুলায়মান (আঃ)-এর জীবনী থেকে শিক্ষণীয় বিষয় সমূহ
• সুলায়মানের মৃত্যু ও রাজত্বকাল

১৯. হযরত ইলিয়াস (আলাইহিস সালাম)

• ইলিয়াসের জন্মস্থান
• ফিলিস্তীনের ধর্মীয় ও সামাজিক অবস্থা
• ইলিয়াসের দাওয়াত
• দাওয়াতের ফলশ্রুতি
• বাদশাহর দরবারে ইলিয়াসের উপস্থিতি
• আল্লাহ ও বা‘ল দেবতার নামে কুরবানীর ঘটনা
• ইলিয়াস (আঃ)-কে পুনরায় হত্যার ষড়যন্ত্র
• ইলিয়াস (আঃ) জীবিত আছেন কি?
• বা‘ল দেবতার পরিচয়
• শিক্ষণীয় বিষয় সমূহ

২০. হযরত আল-ইয়াসা‘ (আলাইহিস সালাম)

২১. হযরত যুল-কিফল (আলাইহিস সালাম)

• যুল-কিফলের জীবনে পরীক্ষা
• শিক্ষণীয় বিষয়
• সংশয় নিরসন

২২-২৩. হযরত যাকারিয়া ও ইয়াহ্ইয়া (আলাইহিমাস সালাম)

• সন্তান লাভের জন্য যাকারিয়ার দো‘আ
• ইয়াহইয়ার বৈশিষ্ট্য
• ইয়াহ্ইয়া ও যাকারিয়ার মৃত্যু

২৪. হযরত ঈসা (আলাইহিস সালাম)

• ঈসার মা ও নানী
• মারিয়ামের জন্ম ও লালন-পালন
• ঈসার জন্ম ও লালন-পালন
• মারিয়ামের সতীত্ব সম্পর্কে আল্লাহর সাক্ষ্য
• মারিয়ামের বৈশিষ্ট্য সমূহ
• শিক্ষণীয় বিষয় সমূহ
• ঈসা (আঃ)-এর বৈশিষ্ট্য সমূহ
• ঈসা (আঃ)-এর কাহিনী
• ঈসা (আঃ)-এর দাওয়াত
• ঈসা (আঃ)-এর পেশকৃত পাঁচটি নিদর্শন
• দাওয়াতের ফলশ্রুতি
• ইহুদীদের উপর প্রেরিত গযব ও তার কারণ সমূহ
• ঈসা (আঃ)-কে হত্যার ষড়যন্ত্র ও তাঁর ঊর্ধ্বারোহন
• আল্লাহর পাঁচটি অঙ্গীকার
• ‘হাওয়ারী’ কারা?
• আসমান থেকে খাঞ্চা ভর্তি খাদ্য অবতরণ
• ঈসা (আঃ)-এর অনুসারীদের কুফরী এবং ক্বিয়ামতের দিন
• আল্লাহর সঙ্গে ঈসা (আঃ)-এর কথোপকথন
• শিক্ষণীয় বিষয় সমূহ

View Full Book

5 Keyword Research Tips for New Blog

Keyword research is one of the cornerstones of building an Search Engine Optimization campaign. The keywords you target on your site will determine what kind of searches your site gets pulled into the SERPs for, and what kind of visitor will ultimately find your site. New websites doing their keyword research for the first time don’t have the luxury of analytics to help guide their keyword selection process, so they have to start from scratch and use their best judgment.

Here are 5 keyword research tips for new websites to help ensure they get off on the right foot.

One. Don’t Let Search Volume Dictate Your Keyword Selection

A keyword like “software” gets almost 25 million searches a month in the US alone. There is no denying the powerful potential of what ranking #1 for “software” could mean to a company, but new sites owners need to remember two very important things about search volume. First off, the higher the search volume the more competition there will be for that keyword. Your new website is going against big brands that have been online and doing SEO for a lot longer than you. The odds of your website jumping to the top of the SERPs for such a broad keyword anytime soon are slim to nil.

Secondly, just because a keyword has a high search volume that doesn’t mean it should be your priority keyword. What kind of software do you sell? Is it computer software? Accounting software? Are you offering software training classes? Do you create custom business software? Yes, you may sell software, but that doesn’t mean it’s 100% on point with your business. Computer software gets a measly 550,000 searches a month, but the searchers are a much better customer for your site because they want exactly what you have to offer.

two. Go After the Long-Tail But Plan for the Broader Terms

Part of having a successful SEO campaign is building trust with the search engines. Unfortunately, the age of your site plays a big role in that trust factor and new sites just don’t have it. To work around this, new websites should be sure to incorporate long-tail keywords (“computer software engineering classes for beginners”) into their content. These long-tail keywords may have a much lower search volume, but that also means there is less competition and a more targeted searcher who is closer to converting. By targeting these long-tail keywords you will help your site survive long enough to build that trust so you can start to go after some broader keywords down the road and do well.

three. Choose Keywords on a Page by Page Basis

It’s so important that you target completely unique keywords on each page of your website based on the content of that page. For instance, your homepage might target “computer software engineering classes,” but you should target “java programming for beginners” on the page about Java programming, not the homepage which focuses on general courses. The content on your site is what is going to back up your keyword selection and help that page do well in the search engines. If you try to put a keyword on a page where it isn’t the main focus of the content you’ll never do as well for that keyword as you would like. Best practice dictates that you can target 2-5 keywords per page on your site, so make sure you’re sticking with the most relevant options!

Four. Remember to Factor User Intent into Your Selection Process

When someone searches for “apple” are they looking for information about the fruit or do they need a new computer? User intent determines what someone means. Different keywords can be used to search for the same thing, while the same keywords can be used to search for different things. It’s very important that you keep user intent in mind when choosing your keywords because that will determine the kind of visitor that comes to your website. Having more visitors is great, having targeted visitors is better.

Five. Your Keywords Aren’t Set in Stone

There is no rule that your first round of keywords have to be your last and only keywords! I’ve been in the SEO industry for nearly 13 years and in that time the language of the industry has evolved. Certain terms which are now commonplace, like “inbound marketing” didn’t even exist when I started in this industry. Social media marketing and any keyword related to it only popped up in the last few years as the technology developed. My point is that as your industry evolves the lexicon is going to change with it. You have to be willing to work those new keywords into your website and SEO program or you risk becoming outdated and getting left behind.

Search behavior also changes with time. How people search for things online today is no guarantee of how they will be searching five years from now. If you don’t adapt your keywords to reflect user behavior, then your site will get lost in the shuffle.

These are just a few of the things that new website owners need to keep in mind when conducting their keyword research and keyword selection process. Remember, the keywords you target will shape the scope of your SEO campaign and impact the kind of people that find your site. Even though you can always reoptimize your website for new keywords, it better to get your site off on the right foot from the get-go!

How to Drive Traffic to Your Blog from Search Engines

Getting a high rank on search engines through user keyword searches can be difficult, but with proper focus on writing your blog posts for search engine optimization (SEO), you can boost your rank for specific keyword searches and your blog's traffic. Follow these tips to get the biggest results.

Check the Popularity of Keywords

In order to obtain traffic from keyword searches on the major search engines like Google and Yahoo!, you need to be writing about a topic that people want to read about and are actively looking for information about. One of the easiest ways to get a basic idea of what people are looking for online is to check the popularity of keyword searches on websites like Wordtracker, Google AdWords, Google Trends or the Yahoo! Buzz Index. Each of these sites provides a snapshot of keyword popularity at any given time.

Select Specific and Relevant Keywords

A good rule to go by is to select one keyword phrase per page then optimize that page to that keyword phrase. Keywords should be relevant to the overall content of your page. Furthermore, choose specific keywords that are more likely to give you a better search results ranking than a broad term would. For example, consider how many sites use the keyword phrase of "punk music." The competition for ranking using that keyword is likely to be tough. If you choose a more specific keyword like "Green Day concert," the competition is a lot easier.

Select a Keyword Phrase of 2 or 3 Words

Statistics show that nearly 60% of keyword searches include 2 or 3 keywords. With that in mind, try to optimize your pages for searches on keyword phrases of 2 or 3 words to drive the biggest results.

Use Your Keyword Phrase in Your Title

Once you select the keyword phrase you plan to optimize your page for, make sure you use that phrase in the title of your blog post (or page).

Use Your Keyword Phrase in Your Subtitle and Headlines

Breaking blog posts up using subtitles and section headlines not only makes them more visually appealing on a text heavy computer screen, but it also gives you additional opportunities to use your keyword phrase.

Use Your Keyword Phrase in the Body of Your Content

It's important that you use your keyword phrase in the body of your blog post. A good goal to try to achieve is to use your keyword phrase at least twice in the first paragraph of your post and as many times as you can (without keyword stuffing - see #10 below) within the first 200 (alternatively, the first 1,000) words of your Article.

Use Your Keyword Phrase in and Around Your Links

Search engines count links higher than plain text in their search algorithms, so try to create links that use your keyword phrase. Avoid using links that simply say, "click here" or "more information" as these links will do nothing to help you with your search engine optimization. Leverage the power of links in SEO by including your keyword phrase in them whenever possible. 

The text surrounding links is typically weighted more heavily by search engines than other text on your page as well. If you can't include your 

keyword phrase in your link text, try to include it around your link text.

Use Your Keyword Phrase in Images

Many bloggers see a large amount of traffic sent to their blogs from image searches on search engines. Make the images you use in your blog work for you in terms of SEO. Make sure your image filenames and captions include your keyword phrase.

Avoid Block Quotes

There are differing opinions on this issue with one group of people saying that Google and other search engines ignore the text included in the HTML block quote tag when crawling a web page. Therefore, the text within the block quote tag won't be included in terms of SEO. Until a more definitive answer can be determined to this issue, it's a Best idea to keep it in mind and use the block quote tag cautiously.

Don't Keyword Stuff

Search engines penalize sites that stuff pages full of keywords simply to increase their rankings through keyword searches. Some sites are even banned from inclusion in search engine results because of keyword stuffing.

Keyword stuffing is considered a form of spamming, and search engines have zero tolerance for it. Keep this in mind as you optimize your blog posts for search engines using your specific keyword phrase.

5 Tips to Increase Google Page Rank for Your Site

Google page rank is an elusive term that most bloggers don't completely understand. In fact, there are probably few people in the world who completely understand it, because Google keeps the secrets of its page rank algorithm very guarded. Boosting your Google PR isn't something you can do in a day. If it were, everyone would have a Google Page Rank of 10. Keep reading to learn a few of the Tips to increase your blog's Google page rank that are fairly easy to implement over time.

Get Incoming Links from High Quality Related Sites

The best way to increase your Google PR might not make a difference over night, but it will make a big difference in time. The key is to get incoming links to your blog from highly authoritative and well-trafficked websites and blogs that are related your blog's topic.

For example, if you write a blog about finance, getting a link from The Wall Street Journal website would give your blog a big boost. If you could get more high quality links from popular sites such as Fortune.com, SmartMoney.com, and so on, your blog's Google page rank would most certainly jump.

Remember to Use SEO Techniques

Search engine optimization is an important part of increasing Google page rank. Read the top 10 SEO tips, and make sure you're using them.

Write Original Content

Do not copy content from another site. Even if you're copying and republishing your own content from one page or one site to another, do not do it.

Google's algorithm cannot tell the difference and will either give the originating site the credit and downgrade the others or downgrade all of the sites that publish the duplicated content. Google acts harshly toward any kind of content scraping, even if you're completely innocent. Once your page rank is downgraded, it can be nearly impossible to get it back up again.

Don't Go Link Crazy

Many bloggers hear that it's important to have incoming links to boost their blog's Google page rank, so they start leaving comments anywhere and everywhere across the web, participating in random link exchanges with anyone who is willing to participate, and so on. Remember, as the first item on this list says, Google's algorithm cares about quality links, not quantity.

In fact, your page rank could be downgraded if your site is deemed to be little more than a bunch of links.

Write Great Content

If you write great content, people will want to link to it, particularly high quality websites. Get on the radar screen of popular bloggers and websites by leaving comments, writing guest posts, participating in forums, emailing 

directly, writing articles, and so on. Build relationships with people who write for high quality sites, and the number of quality, incoming links you Get to your site will grow organically over time.

Basic 10 SEO Tips for Beginners

Monitor where you stand

You won't know if your SEO efforts are working unless you monitor your search standings. MarketingVox suggests that you keep an eye on your page rank with tools like Alexa and the Google toolbar.It's also important to check your referrer log regularly to track where your visitors are coming from and the search terms they're using to find your site, according to PC World.

Keywords Density

You should be conscious of placing appropriate keywords throughout every aspect of your site: your titles, content, URLs, and image names. Think about your keywords as search terms -- how would someone looking for information on this topic search for it? The title tag and page header are the two most important spots to put keywords, PC World notes.

BEWARE: Putting ridiculous amounts of keywords on your site will get you labeled as a spammer, and search engine spiders are programmed to ignore sites guilty of "keyword-stuffing." Be strategic in your keyword use.

Link back to yourself

There is probably no more basic strategy for SEO than the integration of internal links into your site -- it is an easy way to boost traffic to individual pages, SEO Consult says.

You should make it standard to link back to your archives frequently when creating new content. MarketingVox advises that you also make the anchor text search-engine-friendly: "The more relevant words point to a page, the more likely that page is to appear in search results when users run a query with those terms."

As with all other SEO approaches, be sure your links are appropriate, and be careful not to cross the line into excessive linking -- you don't want your visitors to get annoyed.

Create a sitemap

Adding a site map -- a page listing and linking to all the other major pages on your site -- makes it easier for spiders to search your site.

"The fewer clicks necessary to get to a page on your website, the better," advises MarketingVox.

SEO Friendly Url

Make your URLs more search-engine-friendly by naming them with clear keywords.SEO Consult explains: "For instance, it’s easy to understand what 'www.puppyfun.co.uk/puppyhealth/vitamins’ would contain.

It’s less easy to understand if the in-house classification system of the business is used, for example ‘www.puppyfun.co.uk/11789/s201.htm’. A dynamic URL is similarly off-putting, even if it contains recognisable words: ‘www.puppyfun.co.uk/search/?s=”health”’.

Avoid Flash

Flash might look pretty, but it does nothing for your SEO. According to the Search Engine Journal, "Frames, Flash and AJAX all share a common problem – you can’t link to a single page... Don’t use Frames at all and use Flash and AJAX sparingly for best SEO results."

"If you absolutely MUST have your main page as a splash page that is all Flash or one big image, place text and navigation links below the fold," the post continues.

Image descriptions

Spiders can only search text, not text in your images -- which is why you need to make the words associated with your images as descriptive as possible.

Start with your image names: adding an "ALT" tag allows you to include a keyword-rich description for every image on your site. Perfect Optimization explains an easy way to do this.

The visible text around your images is valuable for SEO: MarketPosition suggests adding captions to all your pictures and being descriptive with the text in immediate physical proximity to your images.

CONTENT

Your content needs to be fresh -- updating regularly and often is crucial for increasing traffic."The best sites for users, and consequently for search engines, are full of oft-updated, useful information about a given service, product, topic or discipline," MarketingVox explains.

One way to ensure that your site gets new content on a frequent basis is to integrate a blog. "Get the owner or CEO blogging. It’s priceless!" the Search Engine Journal suggests. An executive blog is an excellent way to reach out to your clients, create more opportunities for internal and external linking, while giving your site a more personal voice.

Social media distribution

A CEO blog is just one element of social media distribution, an important SEO strategy according to SEO Consult. You should be distributing links to fresh content on your site across appropriate social networking platforms.

Whether displayed on your company's account, or recommended, re-tweeted, and re-distributed by someone else, this strategy exponentially muliplies the number of places where visitors will view your links.

Link to others

An easy way to direct more traffic to your site is by developing relationships with other sites. PC World suggests that you personally ask the webmasters of well-respected sites if they'll include a link to your site on theirs. 

Be sure to return the favor -- then everyone wins! Make certain that your partner has a good web-reputation, of course. MarketingVox warns against getting tied to a "link farm" whose bad SEO habits could bring you down.

Link Wheel

Link wheel is a widely used internet marketing strategy. The basic idea of link wheels is to create a pattern of links which flow from one website to another which would finally link to a targeted website requiring promotion Example- the build link with google, yahoo, bing, facebook, twitter,  myspace etc.Link wheels fall under the category of search engine optimization, however, when social media sites are used to create the link flow the link wheel strategy becomes social media marketing. According to experts, link wheels have maximum effectiveness when the social media sites are used.

Growth and Trend change of the link wheels

Link wheels have been widely used since the spark of the search engine optimization concept which is considered to be in 2002. Back then, the content marketing sites and the article directories were widely used to create the link wheels. Content would be written based on the targeted keywords and published at the content sites. Links would be placed within the content, which would flow from one site to the other.
Usually, every published content would carry one link to the adjacent site and one link to the parent website that is being promoted. SEO gained huge popularity by 2005-2006 and the link wheels broke the barrier of using the content sites alone. The link wheels were formed with any type of media, including videos, articles, blogs, images and a lot more.With the introduction of social media sites and the possibility to post content and gain links in the social media sites, the link wheels were made purely using these social media sites. Due to the viral nature of the social media sites, link wheels framed with them reflected huge effectiveness.

The link wheel pattern

As a matter of fact, there is no specific pattern or rule when it comes to framing a link wheel. The effectiveness of the link wheel depends on how organic the pattern is. SEO experts believe that, link wheels should not be framed to trick the search engines but should include a natural flow from one site to another. For example, the link can flow as more information about an article presented at the adjacent site. This would keep the readers interested along with gaining the attention of the search engine bots. As obvious as it is, different internet marketers make use of different patterns. Some of them would be using only social media sites, while some of them would use mixed media such as video sites, image sites, forums, discussion boards etc

Hurdles when framing the link wheels

Time is the only constraint to form a perfect link wheel. Most part of the time taken would be consumed in producing the unique well researched content.

Negative effects of the Black Hat link wheels

The usage of link wheel strategy is a controversial topic. While it is true that black hat methods of creating a link wheel could harm therankings of the parent website, ethical and organically formed link wheels have proven to have no adverse effect. Most of the organic link wheels would not be identified as a pattern created just for promoting a website. Instead, the flow of links would keep the readers interested.