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

 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.


Detail here...

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. Soon the time will be converted to hours, minutes and seconds. This program is tested and 100% accurate. Let's try it yourself.
time conversion,converting seconds in hours, minutes and seconds
#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);
}

Detail here...

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.
simple interest, compound interest, c program, life of a programmer, c programmer
#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);
}

Detail here...

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.

linking css to html,linking stylesheet,css tutorial

 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.


Detail here...

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.
CSS tutorial,Image Zooming Effect,CSS Zoom Effect

 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.


Detail here...

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
sphere,surface of sphere,area of sphere,c program
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);
}

Detail here...

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.

Website Designing,Formatting Table,Webpage using Table


You will get a table as showing below.
AB
A1B1

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.
ABC
A1B1C1
A2B2C2

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.

ABCDEF
A1B1C1D1E1F1
A2B2C2D2E2F2
A3B3C3D3E3F3
A4B4C4D4E4F4
A5B5C5D5E5F5
A6B6C6D6E6F6
A7B7C7D7E7F7
A8B8C8D8E8F8
A9B9C9D9E9F9

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.

ABCDEF
A1B1C1D1E1F1
A2B2C2D2E2F2
A3B3C3D3E3F3
A4B4C4D4E4F4
A5B5C5D5E5F5
A6B6C6D6E6F6
A7B7C7D7E7F7
A8B8C8D8E8F8
A9B9C9D9E9F9

The table given below is the expected table to turn it to a webpage.
A
A1B1C1D1E1F1
A2
A3B3
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.
HomeHTMLCSSJAVAPHPAbout Me
Learn HTML
ASP.NETYour 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.


Detail here...
UA-38646478-1