The standard size of images (ex: stamp,passport,3R,5R,10R)

---

After taking photos sometimes we need to edit them. We have to edit  photos differently for different purposes. We need to attach a passport size photo before submitting a CV (Curriculum Vitae). Sometimes we also need stamp size photo for identity card.

We also edit photos to print out them. But we have to maintain the sizes according to our necessity. That's why there are some common standard sizes of photos like stamp size, passport size, 3R Size, 4R Size, 5R Size etc. and all have their different measurements.

For example: 1.6"x2" is the dimension for passport size photo.

The measurement of different size photos are given below.

Size	inch	mm
Stamp	0.9x1.25 in	22.86x31.75 mm
Passport	1.6x2 in	40.64x50.8 mm
2R	2.5x3.5 in	63.5x89 mm
3R	3.5x5 in	89x127 mm
4R	4x6 in	102x152 mm
4D	4.5x6 in	114x152 mm
5R	5x7 in	127x178 mm
6R	6x8 in	152x203 mm
8R	8x10 in	203x254 mm
S8R	8x12 in	203x305 mm
10R	10x12 in	254x305 mm
S10R	10x15 in	254x381 mm
11R	11x14 in	279x356 mm
S11R	11x17 in	279x432 mm
12R	12x16 in	305x406 mm
S12R	12x18 in	305x457 mm

Let's see how to re-size a photo according to the necessity... 

---

 Step 01  Open the image in Photoshop
First of all we need to open the image in Photoshop. To open an image, make a right click on that- a pop-up menu will open as shown below. Then click on Edit with Photoshop.

To open an image in different way, make double click on the blank window of Photoshop. After clicking like this a pop up window will open. Now browse the image, select one and click on the Open button.

 Step 02  Click on crop to set the value
Now click on the Crop Tool as shown in the image given below. I have kept the mouse pointer where you need to click.

 Step 03  Put the value for your expected size
In this step you have to set the crop width and height. Look at the image given below, I have set the width to 1.6 in and the height to 2 in. This measurement is for a passport size photo.

In this way you have to set the value of your expected image size. And set the Resolution 300 for the best quality photo.

 Step 04  Save the photo as JPEG format
Then crop the photo using the mouse (you need to drag the mouse to select the expected portion of the image). Finally, save the image in .JPEG format by clicking on File from the menu.

After clicking on File, a drop down menu will open. Then click on Save as...(or simply press Shift+Ctrl+S), a pop-up window will open. Then provide a file name, select the format JPEG, and click on the Save button.

Recommended posts...

» Decrease the size of an image

» Resize an image to make facebook cover photo

» Resize an image without photoshop

---

Advertisement

---

---

Remove attribution to add copyright information in blogger blog site

What is Attribution?

---

You will found attribution at the lower part (commonly known as footer) of a Blogger Blog Template. There you will found the name of the Template Designer and also the writings "Powered by Blogger". The image of Attribution is given below.

You may easily replace the designer name by your own name or anything you like. In the footer generally all other use copyright information some important messages and/or links.

Changing this name is easy but if you want to remove the Attribution, then it is a little bit of difficult.

Why you will remove attribution from blogger blog?
You may add copyright information by using an HTML/JavaScript widget against this attribution. And then your site will look like a standard website. You can also add more information at the footer by using HTML and/or JavaScript codes there. Lets see how to remove the Attribution of a blogger blog site.

Attribution to the viewer

Attribution to the Blogger

Showing a name in Attribution Bar

---

 Step 01  Find out attribution
Log in to your Blogger Account, find out Layout and click on that. Now scroll down and find out a bar named Attribution. Click on Edit to configure the Attribution.

 Step 02  Save the settings
After clicking on Edit a pop-up window will open. There you will found a text input box, type your text into the text input box and finally click on Save to save the settings.

 Step 03  Check the change
Now click on View Blog or reload the site if that is already opened. Now there you will found the text at the footer that you have added immediately.

How to Remove Attribution Bar?

---

To add Copyright Information at the footer you have to remove the attribution. Look, when you will click on Edit of that Attribution Bar then you will get only two options named Cancel and Save. The remove button is not available for the attribution. You have to change some codes of the template to to get the remove button back. And then you will be able to remove the attribution completely. Follow the steps carefully to remove the attribution and to add copyright information at the footer.

 Step 01  Log in to the Blogger Account
After logging in to the blogger account, now you have to click on Template from the blogger dashboard.

 Step 02  Click on Edit HTML
Now find out Edit HTML and click on that button. Click anywhere of the codes and press Ctrl+F to open the Search Box.

 Step 03  Search Attribution From the Codes
Type attribution into the search box and press the Enter Key. Then you will found attribution as shown below in the image. Look, there is written locked='false'. Though there is written locked='false' but you are still unable to remove the attribution. Because there are more than one Attribution.

NB. if you found locked='true', then change it to locked='false'

 Step 04  Now Search Attribution1
Again type attribution1 into the search box and hit the enter key. You will get some codes like the image given below. Look, there is written locked='true' and you must replace this by the codes locked='false'.

 Step 05  Save the template
After replacing the codes true by false, now click on Save Template to save the template.

 Step 06  Now remove the attribution
Again go to Layout and click on Edit of Attribution. Now you will get the Remove Button. So click on Remove to remove the Attribution.

Step 07  Add copyright information
Hope you have removed the Attribution properly. Now there will show Add a Gadget. Click on Add a Gadget, a pop-up window will open.

Select HTML/JavaScript Gadget from the list. There you will found two text input boxes, type your information using HTML and/or JavaScript codes into the Content Box. You may add here Copyright Information or anything you like. Save your work again and reload your webpage.

---

---

Lets know your own phone number using USSD codes

In Bangladesh SIM Cards are very cheap to buy. There are very few people having only one SIM Card. The mobile phone service providers also offering amazing amenities like bonus minutes, bonus SMS, bonus MMS, bonus Internet, free talk time etc. with the new connections. So people are inspiring to buy new SIM cards one after another.

But, managing lots of connections is really boring and difficult. So, some SIM cards are remaining unused and/or closed. One the other hand, the phone companies are offering free minutes, bonus talk time etc. on recharge again. That's why the users are starting to use those closed SIM cards again.

But it is hard to memorize and/or manage all of the SIM card's numbers. The necessary USSD codes are given below to find out the unknown phone number of any kind of SIM card.

How to know your own Banglalink Phone Number?

---

Dial the USSD code *511# to know your own Banglalink Phone Number. Then you will get a message like below...

MSISD:
88019XXXXXXXX

How to know your own Grameenphone (GP) Phone Number?

---

Dial the USSD code *2# from your Mobile Phone to know your own Grameenphone (GP) Number! It's fully free of charge. After completing the process you will get a message on the screen like...

MSISD:
88017XXXXXXXX

Lets know some more codes useful for Grameen Phone users

How to know your own Airtel (Warid) Number?

---

Dial the USSD code *121*6*3# to know your Own Airtel Number (Warid Number). You will get a message like...

MSISD:
88016XXXXXXXX

How to know your own Robi (Aktel) phone Number?

---

Dial the USSD code *140*2*4# to know your Own Robi Number (Aktel Number). You will get a message with your Own Phone Number like this...

MSISD:
88018XXXXXXXX

Lets know your own Teletalk Phone Number

---

Dial the USSD code *551# to know your own teletalk phone number. After completing the process you will get a message like...


MSISD:
88015XXXXXXXX

---

---

How to speed up a windows computer

---

A Computer is a collection of several Hardware (like Motherboard, Hard disk, RAM, Processor etc.) that perform various types of jobs by the help of an Operating System. The same computer perform differently depending on different Operating System. Almost all of the Bangladeshi computer users use Windows Operating System. But very few use the genuine version of Windows OS. A Windows OS costs more than 20,000tk in Bangladesh whereas a total computer system costs less than it. So, most of the Bangladeshi Computer Users use pirated copy of Windows. That's why the Computer System slows down day after day. Using pirated copy of Windows OS is one of the notable reason of slowing down a Computer System. You may follow the tricks given below to speed up a Computer System.

 Way 01  Use genuine operating system
You have to use the genuine copy of operating system to get the real speed of a computer system. Pirated operating system slows down the Computer after a few days or weeks. But, if you have no other choice without pirated operating system, then re-install the operating system. Thus you will experience the best speed.

 Way 02  Avoid the unnecessary application programs
Install the essential application programs only. The application programs you don't use at all or you use rarely, should not be installed. Even if you need that for a while, then uninstall that after performing the job. Because, it may run background process- that will slow down the computer system.

 Way 03  Avoid the trial version of application software
Avoid the trial version of software. It will often ask you to purchase the original copy. It will also try to connect with the Internet, will notify you about the update and etc. That means it will run the background processes and will slow down your system.

 Way 04  Delete all of the recent files

Press Windows Key + R together, the RUN command box will open. Now type recent and click on the OK button or press the Enter key. A windows explorer will open, where you will found the shortcuts of the recent files you have used. Press Ctrl + A to select all at a time and delete them all by pressing the delete button or shift + delete buttons.

 Way 05  Delete the temp files

Again type %temp% into the RUN Command Box and press the Enter Key. An explorer window will open with the temp files. Now select some of the temp files to delete. It's impossible to Delete all the temp files at a time.

 Way 06  Delete all the prefetch files

Again type prefetch into the RUN Command Box and press the Enter Key. A windows explorer will open will all the prefetch files. Now select all by pressing ctrl+A and press Shift+Delete keys together to delete them permanently.

 Way 07  Delete the Temp Files

Type temp now and press the Enter Key. Now select the temp files by pressing Ctrl+A and press Shift+Delete Keys to delete them permanently.

 Way 08  Stop the unnecessary startup programs

Press Windows Key + R buttons together to open the RUN Command Box again and type msconfig into the RUN Command Box. Then press the Enter Key, the System Configuration Utility window will open. You have to now click on the Startup tab.

Look, there are a list of the Start Up programs. These programs start automatically when you turn on your Computer System. Now, deselect the programs you needn't always at startup. Then click on the Apply button and later click on the OK button. Finally restart your Computer System.

 Way 09  Delete the Unnecessary Files from Your Computer
Press Windows Key + R buttons together to open the RUN Command Box. Now type cleanmgr into the RUN Command Box and press the Enter Key, the Disk Cleanup Wizard will open. There are probably the drive C is selected. Now click on the OK button, the scanning process will start. Wait a while, another window will open. Now select the files to delete and click on the OK button to delete the unnecessary files.

---

---

Java program to show "Hello World!"

Java is a platform independent programming language. That's why we can run a java program in every operating system like Windows OS, Linux OS, Mac OS X etc. But we have to install JDK (Java Development Kit) in our computer system to run java program. After installing the essential JDK, you have to use a text editor also to type the program. I personally use TextPad text editor to type the programs and to compile & run them easily. Follow the steps given below, all the necessary software and instructions are given to run your first java program.

The program given below is a Java Program to show Hello World!. To run this program, you have to follow the steps given below.

public class HelloWorld{
public static void main(String [] args){
System.out.println("Hello World!");
}
}

 Step 01  Download JDK and install it

To run a Java program, first of all you need to install JDK (Java Development Kit) in your computer system. So, download JDK and install it properly. The installation process is very simple.

Watch the video to learn how to make ready your PC
for running Java Programs

 Step 02  Download TextPad and install it

After installing JDK, you have to install TextPad text editor. So, download TextPad and install it now.

 Step 03  Restart the computer and write your program

Now restart the computer and open the text editor TextPad. Type the above Java program in it and save the program as the class name using .java extension. The class name you will found at the last of the first line of the java program. For example: public class HelloWorld is the first line of the above java program, and HelloWorld is the class name here. So, you need to save the program as HelloWorld.java

 Step 04  Compile the java program and run it

After saving the program, now press ctrl+1 to compile it and then press ctrl+2 to run the java program.

Things you should remember...
1. Class name may be anything depending on your choice, but the program should be saved with the same name and must with .java extension.

2. Java is case sensitive, that's why the object names should be same as defined. For example: System.out.println, the first letter of System must be in capital letter.

---

---

C program to swap values of two variables

---

This C program will ask to provide two values and they will be stored into two different variables. Later, the stored value will be swapped and finally the swapped values will be displayed. For example, the first value will be stored into a variable v1 and the second value will be stored into another variable v2. To swap them, we have to use another variable temp. So, first of all we will transfer the value stored in v1 variable into the variable temp using the line temp = v1;.

Then we will transfer the stored data of the variable v2 into the variable v1 by the line v1 = v2;. Finally we will transfer the data of the temp variable into the variable v2 using the line v2 = temp;. Thus the data of those two variables will be swapped.

#include<stdio.h>

main()
{
int v1, v2, temp;

printf("Enter the first value: ");
scanf("%d",&v1);

printf("Enter the second value: ");
scanf("%d",&v2);

printf("\nBefore swaping...");
printf("\nThe stored value in v1 is: %d",v1);
printf("\nThe stored value in v2 is: %d",v2);

temp = v1;
v1 = v2;
v2 = temp;

printf("\n\n\nAfter swaping...");
printf("\nThe stored value in v1 is: %d",v1);
printf("\nThe stored value in v2 is: %d",v2);

}

---

---

Showing two DIVs side by side

Following the steps given below you will learn to show several divs side by side. 

 Step 01  Create both HTML & CSS file and link them

First of all create a simple webpage, later create a CSS file and link that to the HTML file.

 Step 02  Add the DIVs inside the <body> and </body> tags

Now add the codes given below inside the <body> and </body> tags of the HTML file.

<div id="main">

<div id="left">Left DIV</div>

<div id="right">Right DIV</div>

</div>

I have used three DIVs above, the first one is the main DIV defined by the id="main" and another two DIVs are inside the main DIV.

 Step 03  Add the CSS codes to the .css file

Add the following CSS codes given below to the  file main.css (or the css file you have created).

#main{

display: -moz-box;

display: -webkit-box;

-moz-box-pack: center;

-webkit-box-pack: center;

-moz-box-orient: horizontal;

-webkit-box-orient: horizontal;

}

#left{

border: 1px solid #333;

width: 40%;

}

#right{

border: 1px solid #333;

width: 40%;

}

 Step 04  Save the works and check the result

Finally save both of the .html and .css files and open the .html file in a browser. There you will get two boxes positioned side by side.

Code Description

Main DIV
We have to use <div id="main"> and </div> for the main div. The attribute id is used to define this DIV. I have used main as the value but you may use anything you like. That means the line may be <div id="div1">. Even you may use the line <div class="main"> instead of the line <div id="main">.

In the .css file I have used the codes given below to format the main DIV. Look, I have used #main to target the div, but you have to use .main if you use <div class="main"> instead of the line <div id="main">. This is the main difference of using id=" " and class=" " attributes.

#main{

display: -moz-box;

display: -webkit-box;

-moz-box-pack: center;

-webkit-box-pack: center;

-moz-box-orient: horizontal;

-webkit-box-orient: horizontal;

}

We have to use the lines -moz-box-orient: horizontal; and -webkit-box-orient: horizontal; to show the DIVs horizontally lying inside the main div. You may also use vertical instead of horizontal to show the divs vertically.

Soon I will add a video here so that you all can understand these properly.

---

---

C program to convert time in seconds to hours, minutes & seconds

---

This C program will convert the time in seconds to hours, minutes and seconds. After running the program, it will ask to provide the time in seconds. Then the time will be converted to hours, minutes and seconds. This program is tested and 100% accurate. Let's try it yourself.

#include<stdio.h>

main()
{
long sec, minute, hr, t;

printf("Enter time in Seconds: ");
scanf("%ld", &sec);

hr = sec/3600;
t = sec%3600;
minute = t/60;
sec = t%60;

printf("\nTime is %ld hrs %ld mins %ld secs", hr, minute, sec);
}

---

---

Program to find simple interest and compound interest

The C program given below is written to find out the simple interest and compound interest of a principle depending on time and rate. This program is tested and 100% accurate. When you will run this program, you will get a message like Enter principle, rate and time: . Then you have to enter the principle first, then rate and finally time. Soon you will get your expected result.

#include<stdio.h>
#include<math.h>

main()
{
float p, r, t, si, ci;

printf("Enter principle, rate and time: ");
scanf("%f %f %f", &p, &r, &t);

si = (p*r*t)/100;
ci = p*pow((1+r/100), t) -p;

printf("\nSimple interest: %.2f", si);
printf("\nCompound interest: %.2f", ci);
}

---

---

Linking CSS file to a HTML file

---

We have to use CSS to beautify a website and to add various types of effects. We may use CSS codes inside the <head> and </head> tags, but it is not the best practice. That's why we need to know how to create a css file and how to link it with the html file.

 Step 01  Link the css file to the html file

Create a simple webpage and inside the <head> and </head> tag add the line <link rel="stylesheet" type="text/css" href="main.css"/>. The text main.css will be replaced by the name of the CSS file.

 Step 02  Add two more lines

Add two more lines <h1>Header Tag</h1> and <p>This is a paragraph</h1> inside the <body> and </body> tags. Then save the html file.

 Step 03  Create a CSS file

Create a new document using notepad or any other text editor, type the CSS codes given below in it and save it with .css extension. For example: main.css

h1{
color:crimson;
size:32px;
}

p{
color: #fff;
background-color: #333;
}

After adding the codes, save the document as main.css file.

The above codes will format the text inside of the <h1> and </h1> tags as we have defined. And it will also format the text inside of the <p> and </p> tags.

 Step 04  Check the html file whether it is working or not

Finally open the html file in a browser like Google Chrome, Mozilla Firefox etc. But remember to keep both of the html and css files in the same directory.

---

---

CSS zoom effect on images of a website

We will create a simple webpage consisting of an image, a message and a title only. Basically we will use some CSS codes to create mouseover zoom effect of images.

 Step 01  First of all create a simple webpage

We need a website to apply the zoom effect. That's why you need to create webpage, but you may apply on your existing website if you have. However, use the following codes given below and create a simple webpage using notepad.

<!DOCTYPE html>

<html> 
   <head>
      <title>CSS Zoom Effect</title>
   </head> 
   <body>

      <img src="name.jpg" width="300px" height="180px"/>      <h1>Hover the mouse on the image</h1>
   </body> 
</html>

The above codes will create a simple webpage with a title, an image and a message.

Note: You have to replace name.jpg with the name of your image and keep the image in the same directory.

 Step 02  Add the CSS codes to zoom the image

Now we need to add the CSS codes given below inside the <head> and </head> tags. You may also add these CSS codes in your .css file.

<style>
img:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

img {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}
</style>

 Step 03  Finally save your work and get the effect

After completing all above steps, now save the webpage once again and open it with a browser. Now hover the mouse on the image, it will zoom in.

Feel free to contact with me if face any problem and leave a comment if you like it.

---

---

C program to find sphere surface area and volume of a sphere

---

The program given below is a C program that is written to find out the sphere surface area and volume of a sphere. There are rules to find them and we have to use those rules in the program. Let's see the rules...

Area of a Sphere = 4πr2

Volume of a Sphere = (4/3)πr3

According to the above rules, we need to know the r (radius) only to find out the area and volume. Because the value of pi (π) is constant (3.1416).

Here,
Area = ?
Volume = ?
π = 3.1416
r = ?

We have to find out the Area and the Volume, the value of π is fixed and we need to know the radius r only. By the second line #define PI 3.1416 the value of PI has defined 3.1416

By the fifth line float r, area, vol; we have to take three float type variables r, area and vol. r will be used to store the radius of the sphere that we will get from the keyboard using the seventh line scanf("%f", &r);

We have to tell the user to input a value by the sixth line printf("Enter radius of the Sphere: ");

The variables area and vol will be used to store the results.

Later, in eighth and ninth line the program will perform mathematical operations according to the rules described above. The eighth line area = 4*PI*r*r; represent the rule Area of a Sphere = 4πr2 and the ninth line vol = (4/3)*PI*r*r*r; represent the rule Volume of a Sphere = (4/3)πr3

By the tenth and eleventh line the result will be displayed. Generally we use %f to display the float type data, but I have used %.2f  to show immediate two digits of the float number.

#include<stdio.h>
#define PI 3.1416

main()
{
float r, area, vol;

printf("Enter radius of the Sphere: ");
scanf("%f", &r);

area = 4*PI*r*r;
vol = (4/3)*PI*r*r*r;

printf("\nThe area is = %.2f",area);
printf("\nThe volume is = %.2f",vol);
}

---

---

Design a webpage using a table

Creating a Simple Table

---

You have to use the codes given below to create a table of two columns and two rows. Step by step we will add more columns and rows to this table and finally we will create a full functional website of several pages. Lets learn how to create a webpage using the codes given below.

<!DOCTYPE html> <html> <head> <title>Learn Website Designing</title> </head> <body> <table align="center" border="1" style="width: 100%;"> <tbody align="center"> <tr><!--codes for the first row--> <td>A</td><td>B</td> </tr><!--end of the codes for the first row--> <tr><!--codes for the second row--> <td>A1</td><td>B1</td> </tr><!--end of the codes for the second row--> </tbody> </table> </body> </html>

Note: The Ash Colored Codes are not important and/or necessary.

You will get a table as showing below.

A	B
A1	B1

Explanation of the codes

---

To create a table I have used the <table> tag in the first line. I have used the attributes align="center", border="1" and style="width: 100%;". That's why the table will be placed in the center position, the width of the table will be 100% according to the webpage size and there will be a border of 1px.

I have used align="center" but you may also use align="left" or align="right". The value for the width attribute may be 80% or 700px. You have to use the closing tag </table> for the opening tag <table>.

In the second line I have used <tbody align="center"> so that all the text of the cells stay in the center position. In the first line I have also used the same attribute align="center" but for the table position only. If you want to show the text in the center position then you have to use <tbody align="center">.

Then in the third line I have used the tag <tr> to create a row and then <td></td> to create a cell. Thus I have used <tr><td>A</td><td>B</td></tr> to create a row and two columns inside of the row. <td>A</td> is for the first column and <td>B</td> for the second column. Thus I have created another row with two columns by the codes <tr><td>A1</td><td>B1</td></tr>.


Add an Extra Row and an Extra Column

---

Now we will add one more column and one more row with the above table. So we have to use the following codes given below in the box.

<tr><!--codes for the first row--> <td>A</td><td>B</td><td>C</td> </tr><!--end of the codes for the first row--> <tr><!--codes for the second row--> <td>A1</td><td>B1</td><td>C1</td> </tr><!--end of the codes for the second row--> <tr><!--newly added codes for the third row--> <td>A2</td><td>B2</td><td>C2</td> </tr><!--end of the codes for the third row-->

Now we will get the table given below.

A	B	C
A1	B1	C1
A2	B2	C2

Create a Table of 10 Rows and 6 Columns

---

Following the above tricks we will now create a new table with six columns and 10 rows. Later we will change it to a general webpage with several buttons, pages etc. Try yourself to create a table as shown below.

A	B	C	D	E	F
A1	B1	C1	D1	E1	F1
A2	B2	C2	D2	E2	F2
A3	B3	C3	D3	E3	F3
A4	B4	C4	D4	E4	F4
A5	B5	C5	D5	E5	F5
A6	B6	C6	D6	E6	F6
A7	B7	C7	D7	E7	F7
A8	B8	C8	D8	E8	F8
A9	B9	C9	D9	E9	F9

If you fail then you may use the codes given below.

<table align="center" border="1" style="width: 100%;"> <tbody align="center"> <tr> <td>A</td><td>B</td><td>C</td><td>D</td><td>E</td><td>F</td> </tr> <tr> <td>A1</td><td>B1</td><td>C1</td><td>D1</td><td>E1</td><td>F1</td> </tr> <tr> <td>A2</td><td>B2</td><td>C2</td><td>D2</td><td>E2</td><td>F2</td> </tr> <tr> <td>A3</td><td>B3</td><td>C3</td><td>D3</td><td>E3</td><td>F3</td> </tr> <tr> <td>A4</td><td>B4</td><td>C4</td><td>D4</td><td>E4</td><td>F4</td> </tr> <tr> <td>A5</td><td>B5</td><td>C5</td><td>D5</td><td>E5</td><td>F5</td> </tr> <tr> <td>A6</td><td>B6</td><td>C6</td><td>D6</td><td>E6</td><td>F6</td> </tr> <tr> <td>A7</td><td>B7</td><td>C7</td><td>D7</td><td>E7</td><td>F7</td> </tr> <tr> <td>A8</td><td>B8</td><td>C8</td><td>D8</td><td>E8</td><td>F8</td> </tr> <tr> <td>A9</td><td>B9</td><td>C9</td><td>D9</td><td>E9</td><td>F9</td> </tr> </tbody></table>

Add <tr></tr> tags to create more rows and used <td></td> tags to create more columns.

Plan for a Webpage

---

The cells A, B, C, D, E and F will be the banner of the webpage and A1, B1, C1, D1, E1 and F1 will be the menu for the webpages. The other cells A2, B2, C2, D2, E2 and F2 will be used to show the current news or important messages. And the cells A3, A4, A5, A6 and A7 will be used for the side menus. And finally the others cells will the main blank portion of the page where the main content will be shown.

A	B	C	D	E	F
A1	B1	C1	D1	E1	F1
A2	B2	C2	D2	E2	F2
A3	B3	C3	D3	E3	F3
A4	B4	C4	D4	E4	F4
A5	B5	C5	D5	E5	F5
A6	B6	C6	D6	E6	F6
A7	B7	C7	D7	E7	F7
A8	B8	C8	D8	E8	F8
A9	B9	C9	D9	E9	F9

The table given below is the expected table to turn it to a webpage.

A
A1	B1	C1	D1	E1	F1
A2
A3	B3
A4
A5
A6
A7
A8
A9

The necessary codes for the above table is given below.

<table align="center" border="1" style="width: 100%;"> <tbody align="center"> <tr> <td colspan="6">A</td> </tr> <tr> <td>A1</td><td>B1</td><td>C1</td><td>D1</td><td>E1</td><td>F1</td> </tr> <tr> <td colspan="6">A2</td> </tr> <tr> <td>A3</td><td colspan="5" rowspan="7">B3</td> </tr> <tr> <td>A4</td> </tr> <tr> <td>A5</td> </tr> <tr> <td>A6</td> </tr> <tr> <td>A7</td> </tr> <tr> <td>A8</td> </tr> <tr> <td>A9</td> </tr> </tbody> </table>

Final Touch for the Webpage

---

Fairytips   This website is full of HTML Tutorial. You will also learn more about Website Designing from this site. Just stay with me and learn to design a website easily.
Home	HTML	CSS	JAVA	PHP	About Me
Learn HTML
ASP.NET	Your Content Here...
MySQL
XML
XHTML
Ads Here
Text Board
More...

The codes for the above table is given below.

<table align="center" border="0" style="width: 100%;"> <tbody> <tr> <td align="align" bgcolor="45818e" colspan="6"><blockquote> <h1> Fairytips</h1> This website is full of HTML Tutorial. You will also learn more about Website Designing from this site. Just stay with me and learn to design a website easily.</blockquote> </td> </tr> <tr align="center" bgcolor="45818e"> <td width="15%"><span style="color: #f1f1f1;" onmouseover="menu">Home</span></td> <td><span style="color: #f1f1f1;">HTML</span></td> <td><span style="color: #f1f1f1;">CSS</span></td> <td><span style="color: #f1f1f1;">JAVA</span></td> <td><span style="color: #f1f1f1;">PHP</span></td> <td><span class="Apple-style-span" style="color: #f1f1f1;">About Me</span></td> </tr> <tr> <td colspan="6"><marquee>Learn HTML</marquee></td> </tr> <tr> <td align="center" bgcolor="45818e">ASP.NET</td> <td colspan="5" rowspan="7" valign="top">Your Content Here...</td> </tr> <tr> <td align="center" bgcolor="45818e">MySQL</td> </tr> <tr> <td align="center" bgcolor="45818e">XML</td> </tr> <tr> <td align="center" bgcolor="45818e">XHTML</td> </tr> <tr> <td align="center" bgcolor="45818e">Ads Here </td> </tr> <tr> <td align="center" bgcolor="45818e">Text Board </td> </tr> <tr> <td align="center" bgcolor="45818e">More...</td> </tr> </tbody> </table>

Finally all the codes for the last table is given in the above box. You can create the table using these codes, copy the codes and paste them inside the <body> and </body> tags. Then save the webpage and open it in a web browser.

---

---