Uzzwal's Writings

Thursday, January 9, 2014

Add Title Text, Description and Menu into the Webpage We are Going to Create [HTML 05]

In the previous post we customized a table to create our expected webpage. Now we will add some more codes and texts to the existing table so that it looks like a real webpage. At the end of this project, we will create a full functional webpage. Later, we will make a six webpages and we will link them with one another.

There will be the Home Page, Tips&Tricks Page, Tutorials Page, Download Page, About Us Page and Contact Us page. There will be also a news feed, a sidebar and a footer.

We will also add Title Text or Banner Image and Website Description. All the necessary contents will be into the main section. We may show any ad or another sidebar menu or any message in the sidebar.

Objectives
-to Learn to customize a table
-to Learn to customize a single cell
-to Learn how to use attributes with tags
-to Learn to customize an entire row using attribute for <tr> tag
-to Learn how to use background color for the cells of entire row with a single attribute
-to Learn how to use a table to create an attractive webpage
-to Know how to add attractive menus by customizing cells

C1R1&C2R1		C3R1+C4R1+C5R1+C6R1
C1R2	C2R2	C3R2	C4R2	C5R2	C6R2
C1R3+C2R3+C3R3+C4R3+C5R3+C6R3
C1R4+C2R4+C3R4+C4R4+C5R4					C6R4
C1R5+C2R5+C3R5+C4R5+C5R5+C6R5

The above table is the table we created in the previous post. Now we will change the following texts...

C1R1&C2R1 = iDhali

C3R1+C4R1+C5R1+C6R1 = Description

C1R2 = Home

C2R2 = Tips&Tricks

C3R2 = Tutorials

C4R2 = Download

C5R2 = About Us
C6R2 = Contact Us

C1R3+C2R3+C3R3+C4R3+C5R3+C6R3 = News Feed

C1R4+C2R4+C3R4+C4R4+C5R4 = Main Body

C6R4 = Sidebar

C1R5+C2R5+C3R5+C4R5+C5R5+C6R5 = Copyright Info

So the new table will look like...

iDhali		Description
Home	Tips&Tricks	Tutorials	Download	About Us	Contact Us
News Feed
Main Body					Sidebar
Copyright Info

The codes for the above table is given below...

<tbody>

<tr>

<td colspan="2">iDhali</td><td colspan="4">Description</td>

</tr>

<tr>

<td>Home</td><td>Tips&Tricks</td><td>Tutorials</td><td>Download</td><td>About Us</td><td>Contact Us</td>

</tr>

<tr>

</tr>

<tr>

<td colspan="5">Main Body</td><td>Sidebar</td>

</tr>

<tr>

<td colspan="6">Copyright Info</td>

</tr>

</tbody>

</table>

Now we will customize the table once again for the table given below.

iDhali		Description
Home	Tips&Tricks	Tutorials	Download	About Us	Contact Us
News Feed
Main Body					Sidebar
Copyright Info

The codes for the above table is given below. Look at the codes, there you will found some codes marked in red color. I have added these codes to change the table as shown above. Description about the newly added codes are given below the codes.

<tbody>

<td colspan="2" align="center" width="30%"><font size="72" color="0b5394">iDhali.com</font></td><td colspan="4">Description</td>

</tr>

<td>Home</td><td>Tips&Tricks</td><td>Tutorials</td><td>Download</td><td>About Us</td><td>Contact Us</td>

</tr>

<tr>

</tr>

<tr>

<td colspan="5">Main Body</td><td>Sidebar</td>

</tr>

<tr>

<td colspan="6">Copyright Info</td>

</tr>

</tbody>

</table>

I have added height="150px" attribute to the tag <tr>, so that the height of the total row will be 150px.

align="center"

This attribute is added with the <td> tag to align the text in center position of the cell.

width="30%"

The above attribute is added to the <td> tag to define 30% width for the first two cells.

The above font tag is used to customize the font. The attribute size="72" is to define the font size 72 and color="0b5394" attribute is added to define a color.

The attribute bgcolor="0b5394" is added to set a background color for the every cell of the row. align="center" attribute is used to align the text of all the cells into center point and the attribute style="color: ffffff;" is used to define a color for the texts of the entire cells of the row.

A very few steps you need to follow to create your first webpage. Read the next post to learn to customize the rest of the page. Read the previous posts if you miss them.

<< Prev

Next >>

Create a Professional Frame for a Webpage Using HTML Codes [HTML 04]

In the previous post I have shown how to create a table and how to define height, width & alignment. Now I will show how to create expected numbers of rows & columns and how to customize the cells of a table.

The above codes are to create a table of two rows and two columns. But we will create a table of six columns and five rows. And later we will form an attractive webpage by it. That's why we have to add four more rows and three more columns. So the codes will be...

Look, the newly added codes are ashed colored. Add the above codes into the body sections of the .html page you created in the previous post. Then you will get a table of six columns and five rows.
<tr>
<td>C1R1</td><td>C2R1</td><td>C3R1</td><td>C4R1</td><td>C5R1</td><td>C6R1</td>
</tr>

The above codes are for the first row. So there are also six cells. But we will merge the first two cells and the last four cells. So the above codes will be...
<tr>
<td colspan="2">C1R1&C2R1</td><td colspan="4">C3R1+C4R1+C5R1+C6R1</td>
</tr>

Again we will merge all the cells of the third row. But the third row will remain the same. So the codes will be...
<tr>
<td colspan="6">C1R3+C2R3+C3R3+C4R3+C5R3+C6R3</td>
</tr>

Now we will merge the first five cells of the fourth row. So the codes will be...
<tr>
<td colspan="5">C1R4+C2R4+C3R4+C4R4+C5R4</td><td>C6R4</td>
</tr>

Finally will merge the all cells of the fifth row. That's why the codes will look like...
<tr>
<td colspan="6">C1R5+C2R5+C3R5+C4R5+C5R5+C6R5</td>
</tr>

However, all the codes for the table will look like the codes given below. In this step we will avoid the height="700px" attribute of <table> tag. When you will save your webpage with these codes then you will get a table as given below the codes.

Result of the above codes

C1R1&C2R1		C3R1+C4R1+C5R1+C6R1
C1R2	C2R2	C3R2	C4R2	C5R2	C6R2
C1R3+C2R3+C3R3+C4R3+C5R3+C6R3
C1R4+C2R4+C3R4+C4R4+C5R4					C6R4
C1R5+C2R5+C3R5+C4R5+C5R5+C6R5

The above table is the main frame for the webpage we are going to create.

<< Prev

Next >>

Monday, January 6, 2014

Activate the Administrator User Account and Delete any Local User Account

Most of the Computer Users use their computer as a Local User. After installing an Operating System of Windows, it offers the users to create an Local User Account. And there is no way to avoid this step. It mainly happens when you install a Windows Xp or Windows 7. However, are you using your Computer as an Administrator? You may check that also by following the steps given below.

There is a great difference between a Local User and an Administrator. An Administrator can access and change a lot of a Computer System than a Local User. After completing the installation when you will access your Computer System for the first time then you are bound to log on as a Local User. That's why you don't have sufficient right to access all of the settings.

If you want to use your Computer System as an Administrator then you need to follow the steps given below. You can also delete the current user account if you want.

Step 01 Right Click on Computer and then Click on Manage
Go toStart Menuand right click onMy Computer first. After clicking on the My Computer a pop-up menu will open. Now click on Manage from the menu.

Step 02 Click on Local Users and Groups

After clicking on Manage, the Computer Management Window will open as the image given below. Now click on Local Users and Groups first and then click on Users. There you will found all the available user account of your computer system.

Step 03 Right Click on Administrator and then Click on Properties
After clicking on Users, you will get all the user accounts available in your computer system. Look at the image given below, there are four user accounts. But the Administrator User Account is with a down arrow key sign. That means this user account is disabled. Now right click on the Administrator User Account and then click on Properties from the pop-up menu.

Step 04 Enable the Administrator Account
After clicking on Properties, a pop-up window will open like the image given below. Now deselect the box where is written Account is disabled. Finally click on OK. Now restart your Computer System and use your computer as an Administrator.

Step 05 Delete an Account if You Want
You need to right click on the user account you want to delete. After clicking on the User Account a pop-up menu will open like the image given in the 3rd step. Now click on Delete to delete the account permanently and restart your computer.

Sunday, January 5, 2014

Using for loop to input several data from keyboard into an array and to show them later

Objectives:

-to Learn the use of for loop

-to Learn to get data using for loop

-to Learn to show data using for loop

The program given below is to learn the uses of for loop. We will input specific number of data from keyboard and we will keep them into the array. Later we will show them using for loop again.

#include<stdio.h>

void main()

{

int a[3],i,n;

printf("Enter the Number of Data: ");

scanf("%d",&n);

if(n>3)

{

printf("You can keep only 3 data\nDon't use more than 3 data");

}

for(i=0; i<n; i++)

{

printf("Enter the Data: ");

scanf("%d",&a[i]);

}

for(i=0; i<n; i++)

{

printf("\nData of Array: %d",a[i]);

}

Description of the Above Program

Line 04: int a[3],i,n;

In this line I have declared two integer type variables and an array. We will use the array a[3] to keep three data in it. If we use a[10] then we will be able to keep up to 10 data in it.

Line 05: printf("Enter the Number of Data: ");

The fifth line of the program we need to use to show the line Enter the Number of Data: only.

Line 06: scanf("%d",&n);

We have to use this number to keep the number of data we will use. We can keep up to 3 data into the array. That's why should not use more than 3 as the value of n. N.B. if you want to use 5 data, then you have to use a[5] instead of a[3]. Similarly you have use a[10], if you want to use 10 data.

Line 07: if(n>3)

This is the seventh line of the program. I have used to show an error message if anyone provide the value of n more than 3. The line printf("You can keep only 3 data\nDon't use more than 3 data"); will print the error message if anyone provide more than three as the value of n.

Line 11: for(i=0; i<n; i++)

This is the eleventh line we have to use for the for loop. This condition will initialize the value of i is zero(0) and will check if the value of i is less than i. If i<n condition is true then this line will increase the value 1 of i. And the lines printf("Enter the Data: "); and scanf("%d",&a[i]); will be executed continuously till i<n.

The next for loop will do the same and the rest of the programs are described in the previous posts. Read them for better understanding.

Saturday, January 4, 2014

C Program to Keep Several Data in an Array and Later We'll Print them One by One

Objectives:

-to Learn the use of array

-to Learn to keep several data in an array

-to Learn how to target a data from an array to show

The C Program given below will ask you to provide three data one after another. Then the data will be saved into an array. Later we will show the data from the array.

#include<stdio.h>
void main()
{
int a[2];
printf("Enter the First Data: ");
scanf("%d",&a[0]);
printf("\nEnter the Second Data: ");
scanf("%d",&a[1]);
printf("\nEnter the Third Data: ");
scanf("%d",&a[2]);
printf("The First Data is: %d",a[0]);
printf("\nThe Second Data is: %d",a[1]);
printf("\nThe Third Data is: %d",a[2]);
}

C Program,use of array,target a data from an array

Description of the Codes
Line 04: int a[2];

This is the fourth line of the program. There is declared an integer type array by int a[2];. a[2] is an array where we may keep three data. If we use a[9] then we may keep ten data into the array.

Line 06: scanf("%d",&a[0]);

We will keep the first data by the line scanf("%d",&a[0]);. Similarly we will keep the second and third data by the lines scanf("%d",&a[1]); and scanf("%d",&a[2]);

Line 11: printf("The First Data is: %d",a[0]);

This is the eleventh line of the program, we have to use to print the data kept in a[0]. Similarly we have to use printf("\nThe Second Data is: %d",a[1]); and printf("\nThe Third Data is: %d",a[2]); to print the data kept in a[1] and a[2].

The rest lines are described in the previous posts. You may read them to understand this program properly.

Create a Table of Defined Height, Width and Alignment [HTML 03]

From the previous post you have learnt to create a webpage using HTML Codes. We will create a full website of six different pages step by step. That's why we need to know detail about table. I will discuss a lot about table and it's formatting so that you can create a full website. Lets see the codes given below.

<table>
<tbody>
<tr>
<th>
YOUR CONTENT
</th>
</tr>
</tbody>
</table>

The above codes are to create a simple table of one column and one row. That means there will be only one cell. Copy the above codes and paste them into the body section (between <body> and </body>) and save that with .html or .htm extension. Later run it, you will get a table. As I have not used any border so it will be hard to find out the area of the table. So, open the .html file with notepad and use a attribute border="1" into the <table> tag. Save the file and open that again. Now there will be the border of the table. The line will look like <table border="1"> after adding the attribute.

Similarly we will add the width and height of the table by adding the attribute width="100%" and height="700px". So the first line will be replaced by <table border="1" width="100%" height="700px"> of the above codes. We have used width="100%" so that the table may get the whole space of the window when we will browse the page. We need to also use another attribute to define am alignment. The attribute will align="center" to align the table in center. Similarly we may use align="left" or align="right".

Now the total code will be ....

<table border="1" width="100%" height="700px" align="center">
<tbody>
<tr>
<th>
YOUR CONTENT
</th>
</tr>
</tbody>
</table>

Copy the above codes and paste them into the body section of the page we've created in the previous post. Then save the page and open that with a browser. The result will be like the image given below.

Friday, January 3, 2014

C++ Program to Add two Numbers and to Show the Result [C++ 02]

Objectives
-to Understand the basic operation of a C++ Program
-to Know how to perform a mathematical operation using C++ Language
-to Learn how to declare several variable and how to use them later
-to Know where to keep the result after mathematical operation and how to show the result
The C++ Program is given below is to add two numbers. The program will add two number we will provide during typing the codes. The addition of those two number will be kept in a variable named r and later it will be appear on the screen as a result.

//C++ Program to Add two Numbers
#include<iostream>
using namespace std;
int main()
{
int n1, n2, r;
n1=5; n2=6;
r=n1+n2;
cout<<"The Summation is: ";
cout<<r; return 0;
}

The Result of the above C++ Program: The Summation is: 11

The description of the above codes are given below...
Line 05: int n1, n2, r;

The fifth line is to declare three variables named n1, n2 and r. We will declare n1 to keep the first number and similarly n2 to keep the second number. And we will declare r to keep the result in it.

Line 06: n1=5;

We have defined a value of n1 in the sixth line. Actually we have told the processor to keep 5 into the variable n1. Similarly we have kept 6 into n2 variable using the seventh line n2=6;

Line 08: r=n1+n2;
In the eighth line there is told to add n1 and n2 by n1+n2 and at the same time the result of the addition will be kept into the variable r.

Line 09: cout<<"The Summation is: ";
The ninth line we will use to print a line The Summation is: so that the summation can be added just after the line. This line will be used only to beautify the result. You may ignore this line.

Line 10: cout<<r;
We will print the result by this tenth line. This line will show the data kept into the variable r. The result will be added after the line The Summation is:

Thursday, January 2, 2014

C++ Program to Print Something on the Screen as You Want [C++ 01]

This is the first C++ Program for the beginners. This program will print the text that you will provide into the line std::cout << "This is my first C++ Program!"; You may replace This is my first C++ Program! with the text you want to print on the screen.

#include <iostream>
int main()
{
std::cout << "This is my first C++ Program!";
}

Output of the above C++ Program: This is my first C++ Program!

Line 01: #include <iostream>

This line tells the processor to include a header section named iostream. The compiler execute this line before all other. Because all the instruction it needs are included iostream header file.

Line 02: int main()

This is the main function as like as main (), we use in C Program. The main program start from here.

Line 03: { [Opening Brace]

This is the opening brace we used at the third line in the program. This opening brace indicates the beginning of the main function. Actually the main program written by the programmer start from here.

Line 04: std::cout << "This is my first C++ Program!";

This id the fourth line we have used into the above program to tell the processor to print This is my first C++ Program! on the screen. You can replace this line (This is my first C++ Program!) with anything you like to print on the screen.

Line 05: } [Closing Brace]

The closing brace at the fifth line we have used to indicate the ending of the program.

Read the writings on How to run a C++ Program in CodeBlocks if you fail to run.

Wednesday, January 1, 2014

Valid Structure of HTML Codes to Create a Webpage

We have learned to create a website simply without knowing any html tags or codes from the previous post. But, is it really possible to create a website without any tags/code? No, it's impossible. Tags are must to create a website. That's why we need to know them properly. Not only the tags, we also need to learn the attributes. In this post I have discussed about the valid structure of HTML Codes to form a webpage. You will learn the uses of some basic HTML Tags and Attributes also. Lets see the basic structure of a html page.

<!DOCTYPE html>
<html>
<head>
CSS, JavaScript etc. will be in this section
</head>

<body>
The main visible part will be here
</body>
</html>

Let's make a simple webpage using the above codes. To do so, follow the steps given below.

Open the Notepad text editor
Type the above codes except the Ash Colored texts
Now type <font color="blue" size="20px">This is my first webpage</font> inside of the opening body tag <body> and closing body tag </body>
Save the document as iDhali.html or iDhali.htm
Now locate the html document and open it with a browser software

//Lets know how to save a notepad document as an HTML file//

That means the total codes will be...

<!DOCTYPE html>
<html>
<head>

</head>

<body>
<font color="blue" size="20px">This is my first webpage</font>
</body>
</html>

HTML,Website designing,structure of HTML

After opening the newly created html file, you will get the result as like as the image given below...

Now you may add a Title to the existing webpage. So, we have to add the line <title>Computer Tips & Tricks</title> into the head section. And now the codes will be...

<!DOCTYPE html>
<html>
<head>
<title>Computer Tips & Tricks</title>
</head>

<body>
<font color="blue" size="20px">This is my first webpage</font>
</body>
</html>

After saving the document when you will open again with a browser, then the following result you will get.

It may seem that the both image are same. Look at them carefully, there is written iDhali.html as the title in the first image. That means the first webpage has taken the file-name as the title. But in the second image there is showing Computer Tips & Tricks as the title text.

1. Let's learn different types of text formatting to beautify a website

2. Create a webpage very easily without knowing any codes

Thursday, January 9, 2014

Add Title Text, Description and Menu into the Webpage We are Going to Create [HTML 05]

Create a Professional Frame for a Webpage Using HTML Codes [HTML 04]

Monday, January 6, 2014

Activate the Administrator User Account and Delete any Local User Account

Sunday, January 5, 2014

Using for loop to input several data from keyboard into an array and to show them later

Saturday, January 4, 2014

C Program to Keep Several Data in an Array and Later We'll Print them One by One

Create a Table of Defined Height, Width and Alignment [HTML 03]

Friday, January 3, 2014

C++ Program to Add two Numbers and to Show the Result [C++ 02]

Thursday, January 2, 2014

C++ Program to Print Something on the Screen as You Want [C++ 01]

Wednesday, January 1, 2014

Valid Structure of HTML Codes to Create a Webpage

Blog Archive

Labels

Popular Posts

Contact Me