[Part-13] HTML : Div Tag

Read my previous tutorial if you have not read yet.

In this post you will learn about <div> tag, it is used to define a section in an webpage and group the elements to arrange them with CSS.


Let's Start: 

• Below are the HTML code to see the use of <div> tag. You have to save it and then run the saved file.
• After running the file you will noticed that some text appears in blue color, this happens because we have written elements inside the <div></div> and we have applied CSS on <div> to change the color.
• We will discuss CSS very soon.

HTML Code :-

Read More

[PART-6] JAVA : if else statement

if else statements are condition statements.
These are used to give conditions.

Syntax:
1.)   if( any condition )
      { Statement };

2.) if( any condition )
     { Statement };
     else
     { Statement };

3.)if(any condition)
    { Statement };
    else if(any condition)
    { Statement };
    else
    { Statement };

Eaxamples :

if


if-else


if - else if - else

 

Read More

[HTML Program] - Iframes

Read More

[HTML Program] - Frame Set

Read More

[HTML Program] - Usemap

Read More

[HTML Program] - Form

Read More

[HTML Program] - Font Tag

Read More

[HTML Progame] - Marquee

Read More

[HTML Program] - List Creation

Read More

[HTML Program] - Table Creation

Read More

[HTML Program] - Inserting Image

Read More

[HTML Program] - Hyperlink

Read More

[HTML Program] - Tags

Read More

[HTML Program] - First Web Page

Read More

[Part-12] HTML : Iframes

If you have not read my previous posts of HTML then read it for better understating of today's HTML post.

In today's post I will you about <iframe></iframe> tag. This tag is used to open more than one webpage on the same webpage.

<iframe></iframe> tag is used if we want to display another page on the same webpage.

Now follow the below steps to see the Iframes working :-

• Open notepad and notepad++.
• Then write or copy and paste below given HTML code.
• Now save it as anyname.html.
• Run the saved file with browser.
• You will notice that another page is displaying on the same webpage, this is done by using <iframe></iframe>.
• You have also noticed that Swifter Travel page is opening on the same page if you want to change the page address then change the highlighted url with your url in the given HTML code, <iframe src="http://swiftertravels.tk" name="iframe_a" width="500" height="300"></iframe>.
• We have used width="500" and height="300" to give height and width to the iframe.
• We have also used frameborder="0" if we set its value to "0" then the border will be removed.
• You have also seen that when you click on Complete Programming Tutorials it opens in the Iframe this happens because the name="iframe_a" and target="iframe_a" are same.
• When you click on Complete Programming Tutorials it open Complete Programming Tutorials page if you want to open other page then change the highlighted url <a href="http://programmingskills.blogspot.in/" target="iframe_a">.

HTML Code :-

For more help see the below video :-

If you have any doubt post in the comment box.

For more updates like us on Facebook.

Read More

[Part-11] HTML : Frame Set

If you have not read my previous posts of HTML then read it for better understating of today's HTML post.

In today's post I will you about <frameset> tag. This tag is used to open more than one webpage on the same webpage.

Now follow the below steps to see the frameset's working :-

• Open notepad or or notepad++.
• Then write or copy and paste the below given HTML code.
• After that save as anyname.html.
• Now open the saved file with browser.
• When you opened the file you have noticed that more than one webpage are opened on the same page, this is done using the <frameset>.
• You have also seen that pages are open column wise, if you want to open it row wise you can also do this by just changing in some text in the given code.
• If you want to show page rows wise then in the give code just change the highlighted text <frameset cols="25%,*,25%"> with this rows.
• Then save it and run it, now pages are opened row wise.
• If you want to change the size or rows or cols then changed the highlighted text<frameset cols="25%,*,25%">  with the size you want to give, you have also notice that star (asterisk) symbol is used, when you used this symbol it automatically takes the remaining size, for example we give size as "25%,*,25%" it means that two columns are of 25% size and we put star (asterisk), here by using this symbol it takes the remaining size for the other column. 
• If you want to open other webpage then change this highlighted text <frame src="http://programmingskills.blogspot.in/"> in the given HTML code.
• Then save it and run it.
• Now your webpages have changed according to the links you have  put in the given HTML code.

HTML Code :-

For more help see the below video :-

If you have any doubt post in the comment box.

For more updates like us on Facebook.

Read More

[Part-10] HTML : Usemap

If you have not read my previous posts of HTML then read it for better understating of today's HTML post.


In today's post I will tell you about usemap . Usemap is an image attribute it is used to create clickable areas on an image. There are three types of shapes are used in usemap i.e. circle, rectangle, polygon. We use coordinates to create these shape. For circle we use three coordinates,  in rectangle we use four coordinates and in polygon there is no fixed limit for coordinates. You will better understand these things when you see an example so, follow the below steps to see the usemap's working :-

• Open notepad or notepad++.
• Write or copy and paste below given HTML code.
• Then save the below given image.

• Then copy the image location with image name and paste it in our given HTML code in place of this "/mysite/b.jpg".
• In HTML code you have also seen that there is usemap="#buttonmap" and <map name="buttonmap"> is written if you want to change the name just replace the highlighted text with the name that you want to give.
• If you want to change the size of circle, polygon and rectangle then you need to change this highlighted part coords="345,78,40" according to the shape you have given.
• Now save it as anyname.html
• Then open it with browser.
• You will notice when you open it and after that when you click on the image (Means on the earth image which is created on the image)you will goto another site this is done by using usemap and if you to change the link then in HTML code just change the highlighted part href="/mysite/company.htm"
• You have also seen that on the image (Means NEWSLETTER written on the image)this area is also clickable in this we use rectangle shape and on when you click on the image corners (Means SUBSCRIBE written on the image) that areas are also clickable here we use polygon shape.
• When you want to end the usemap place this tag </map> in the ending.

HTML Code :-

See the below video for better understanding of usemap :-

If you have any doubt post in the comment box.

For more updates like us on Facebook.

Read More

[Part-9] HTML : Form Creation

If you have not read my previous posts of HTML then read it for better understating of today's HTML post.


In today's post I will tell you how to create simple form using HTML.

Just follow the some very simple and easy steps to do this :-

• Open notepad or notepad++.
• Write or copy and paste the below given HTML code.
• Then save as anyname.html.
• Now open saved file with browser.
• We have created the form using some tags i.e. <form></form>, <table></table>, <input>.
• We have also used some attributes i.e.  type="radio" to create radio button,  type="checkbox" to create text box these attributes are used with <input>.
• We have created text box using type="text" for text and type="password" to create box for password these attributes are used with <input>.
• We have also used <table></table>, <tr></tr>,<td></td> to create this form.
• We used this <input type="submit" value="Submit"> <input type="reset" value="Reset" > to create Submit and Reset button.

HTML Code :-

Output :-

See the below video for better understanding of the form creation :-

If you have any doubt post in the comment box.

For more updates like us on Facebook.

Read More

[JAVA program]- do while loop

Read More

[JAVA program]- while loop

Read More

[JAVA programs]- for loop

Read More

[JAVA-program]- Hierarchical Inheritance

Read More

[JAVA-program] Multilevel Inheritance

Read More

[JAVA program]- Single Inheritance

Read More

[JAVA program]- Input integer value using DataInputStream

Read More

[JAVA-program]- Input char value using DataInputStream

Read More

[JAVA program]- Input Float value using DataInputStream

Read More

[JAVA program]- Input String Using DataInputStream

Read More

[JAVA program]- hellow world!

Read More

[PART-6] JAVA : Looping

From now onwards use DrJava to write your programs, compile and run it.
It is very handy and easy to use.
Download it from here :
http://www.drjava.org/
You will find compile and run buttons in drjava. Hence it is easy to use.

There may be situations where we have to execute a piece of code several times. For this looping is used. There are 3 kinds of loops in java :

1. for loop
2. while loop
3. do while loop

1.)for loop
i=0;
Here we have assigned the value of integer i variable to 0.
So it will start from 0.

i<=5; (i is less than or equal to 5)
i will start from number 0 and will stop when its value becomes 5.
if it was i<5; (i is less than 5) then it will stop when its value becomes 4

i++ (will increase the value of i with 1, note that 1st time it will not increase the value of i)


2.)while loop
  I have assigned value of i to 1.
now while loop will execute the piece of code until the condition is true. Here the condition is if i is less than or equal to 5 it will print the value of i.
i++ willl increment or increase the value of i by 1 each time the loop is executed.

3.)do while loop
I have done the same thing here.
Initially do while loop will execute whatever is between the { } without checking for any condition.
Then it will check for conidtion i.e. while(i<=5)
Whereas in case of while loop it will initially check the condition and then go ahead only if the condition is true.

See the video for better understanding...

Read More

[Part-8] HTML : Font Tag

If you have not read my previous posts of HTML then read it for better understating of today's HTML post.


In today's post I will tell you how to change the text font, size, color, etc.

Just follow the some very simple and easy steps to do this :-

• Open notepad or notepad++.
• Write or copy and paste the below given HTML code.
• Then save as anyname.html.
• Now open the saved file in browser.
• You notice that the text font, size, color and background color are changed.
• To change all of this thing we use <font></font> and also some attributes of it.
• The attribute we use are size="50px" color="darkred" font face="cooper black".
• You can change values of  size, font face and color.
• You have also notice that background color is changed.
• This is done by using attribute with body.
• Attribute used with body is bgcolor="lightgreen".
• If you want to give any other color to the background then just change value "bgcolor" with other color.
• You have seen that all the matter is in center.
• This is done by using <center></center>.
•  When you write or place anything between <center></center> it comes in the center.

HTML Code :-

Output :-

For better understanding see the below video :-

If you have any doubt just post in the comment box.

For more updates like us on Facebook.

Read More

[PART-5] JAVA : Inheritance explained with programs

Read my previous tutorial if you have not read yet.

In my previous tutorial you learned about types of inheritance.
In this tutorial we will develop programs of :
1.) Single inheritance
2.)Multilevel inheritance
3.)Hierarchical inheritance
4.)Multiple inheritance

Let's Start:
 Below are the programs of inheritance. You have to compile and run each program.

1.)Single inheritance :

• In this program i have declared a class a. In class a, i have declared a int type variable "p" and two functions aget() to get the value of "p" from the user and ashow() to print the value of "p" given by the user. Similarly we have declared another class "b" which contains variable "q" and functions bget() and bshow(). I have use extends keyword to inherit the features of "class a "into "class b". Then i declared the main() method and created object of "class b" as "obj", With the help of this object i can access the data members and member functions of "class a".  as well as "class b". I can access the data members and member functions of "class a" because i have inherited the features of "class a" into "class b".

2.)Multilevel inheritance

• In this program i have declared three classes "a", "b", and "c". I have declared the data members and member functions same as above in these three classes. But here i have used extends keyword in classes "b" and "c "respectively. Now if i create a object in class 'c" then with the help of this object i can access the data members and member functions of classes a and b respectively.

3.)Hierarchical inheritance

• In this program i have declared three classes "a", "b" and "c". I have declared data members and member functions of classes "a", "b" and "c" same as i have done above. Now if i create an object of class "b" and class "c" then with that object i can access data members and member functions class "a". I don't need to create object of class "a" to access data members and member functions of class "a".

4.)Multilevel Inheritance
This type of inheritance is not supported in Java to avoid complexity.

Read More

[Part-7] HTML : Move Image and Text

In today's post I will tell you about that how can you move image or text in HTML. We can move images and text using <marquee></marquee> anything whether it is image or text if placed between the <marquee></marquee> it will starts moving, as shown below :-

Programming Skills

Now follow below steps to move image or text :-

• Firstly open notepad or notepad++.
• Write or copy and paste below given HTML code.
• Then save as anyname.html.
• Open with browser and your image and text starts moving.
• If you want to change the moving direction of image or text then we use direction attribute of <marquee></marquee>.
• We can move text or image in four direction i.e. left,right,up and down.
• When you run our given HTML code then you will better understand the use of direction attribute.
• Another attribute of <marquee></marquee> is behavior, there are three values of behavior i.e. alternate, scroll, slide.
• When you run our given HTML code then you will better understand the use of behavior attribute.
• Below you are seeing the text is moving but when you place mouse pointer on it stops and when mouse pointer take out from that place it again starts moving.
• Now I will tell you how this happens.
• We use this onmouseout=start() and onmouseover=stop().

Programming Skills

• If you want to change the speed we will use scrollamount="number".
• You can also change the background color by using this bgcolor="color_name".
• If you want to change font color then use this <font color="color_name"></color>
• You will better understand all the things by running our HTML code.

HTML Code :-

<html>

<head>

<title>Marquee</title>

</head>

<body>

<marquee onmouseover="stop()" onmouseout="start()" bgcolor="green">

<h1>Marquee</h1>

</marquee>

<center>

<table border="2" width="500px">

<tr>

<th><marquee direction="right" onmouseover="stop()" onmouseout="start()">Sr. No.</th>

<th><marquee direction="left" onmouseover="stop()" onmouseout="start()">Languages</th>

</tr>

<tr>

<td><marquee direction="up" scrollamount="20" onmouseover="stop()" onmouseout="start()">1.</td>

<td><marquee direction="up" scrollamount="20" onmouseover="stop()" onmouseout="start()">C</td>

</tr>

<tr>

<td><marquee direction="down" onmouseover="stop()" onmouseout="start()">2.</td>

<td><marquee direction="down" onmouseover="stop()" onmouseout="start()">C++</td>

</tr>

<tr>

<td height="100px"><marquee direction="right" onmouseover="stop()" onmouseout="start()">3.</td>

<td><marquee direction="left" onmouseover="stop()" onmouseout="start()">JAVA</td>

</tr>

<tr>

<td><marquee direction="left" onmouseover="stop()" onmouseout="start()">4.</td>

<td height="100px"><marquee direction="right" onmouseover="stop()" onmouseout="start()">HTML</td>

</tr>

<tr>

<td><marquee  behavior="alternate" onmouseover="stop()" onmouseout="start()">5.</td>

<td><marquee  behavior="alternate" onmouseover="stop()" onmouseout="start()">CSS</td>

</tr>

<tr>

<td><marquee  behavior="scroll" onmouseover="stop()" onmouseout="start()">6.</td>

<td><marquee  behavior="scroll" onmouseover="stop()" onmouseout="start()">ASP.NET</td>

</tr>

<tr>

<td height="100px"><marquee  behavior="slide" onmouseover="stop()" onmouseout="start()">7.</td>

<td><marquee direction="scroll" onmouseover="stop()" onmouseout="start()">Programming</td>

</tr>

<tr>

<td><marquee behavior="scroll" onmouseover="stop()" onmouseout="start()">8.</td>

<td height="100px"><marquee  behavior="slide" onmouseover="stop()" onmouseout="start()">Skills</td>

</tr>

</marquee>

</center>

</body>
</html>                                                                                                                                                  

For more help see the below video :-

If you have any doubt you can ask by commenting on our post.

For more updates like us on Facebook.

Read More

[Part-6] HTML : List Creation

If you have not read previous posts of HTML then you can go here and read them for better understanding.

In today's post I will tell you about how to create list using HTML. There are three types of list :-

1. Order List.
2. Unordered List.
3. Definition List.

Now see below steps to create these lists :-

• First open notepad or notepad++.
• We <ol> </ol> for order list, <ul> </ul> for unordered list and <dl> </dl> definition list.
• Inside we <ol> </ol> and <ul> </ul> we will use another tag named as <li> </li>.
• But in <dl> </dl> we will use <dt> </dt> and </dd> </dd> in place of <li> </li>.
• In <ol> </ol> and <ul> </ul> we write matter between <li> </li>.
• But in  <dl> </dl> we write matter between <dt> </dt> and </dd> </dd>.
• Then write or copy and paste the below given HTML code.
• Now save it as anyname.html.
• Now run it in browser.
• After running it you will know the difference between these three list.

HTML Code :-

<html>

<head>

<title>Lists</title>

</head>

<body>

<h1>Order List</h1>

<ol>

<li>C</li>

<li>C++</li>

<li>JAVA</li>

</ol>

<h1>Unorder List</h1>

<ul>

<li>HTML</li>

<li>CSS</li>

<li>ASP.NET</li>

</ul>

<h1>Defination List</h1>

<dl>

<dt>Programming Skills</dt>

<dd>C</dd>

<dd>C++</dd>

<dd>JAVA</dd>

</dl>

</body>

</html>

Output :-

For more help see the below video :-

Read More

[Part-5] HTML : Table Creation

In today’s post I will tell you about how to create table using HTML.

Follow the below steps to create the table using HTML :-

•  Creating table using HTML is not difficult.
•  For table creation we use <table></table> tag and <tr></tr> , <td></td>.
• We also use table’s attribute named as border to give border to the table.
• Write or copy and paste the below given HTML code in notepad or notepad++ to create table.
• Save as anyname.html
• Now open with any browser.

HTML Code:-

<html>

<head>

<title>Table</title>

</head>

<body>

<h1>Creation of Table.</h1>

<br>

<p>Below is table created using HTML.</p>

<table border="2">

<tr>

<td>Serial No.</td>

<td>Courses</td>

</tr>

<tr>

<td>1.</td>

<td>HTML</td>

</tr>

<tr>

<td>2.</td>

<td>CSS</td>

</tr>

<tr>

<td>3.</td>

<td>ASP.NET</td>

</tr>

</table>

</body>

</html>

Output :-

For more help see the below video :-

If you have any doubt post in the comment box.

For more updates like us on facebook.

Read More

[PART-4] JAVA : Inheritance

Inheritance : It means to get the features of one class into another class.

There are four types of inheritance in Java :

1.)Single  Inheritance

Here class b will inherit or take the features of class a.

2.)Multilevel Inheritance

Here class c will inherit the features of class a and b respectively.

class b will inherit the features of a only.

3.)Hierarchical Inheritance

Here classes b and c both will inherit the features of class a.

4.)Multiple Inheritance

Here class c will inherit the features of class a and b respecively.

But Java DOES NOT SUPPORTS MULTIPLE INHERITANCE TO AVOID COMPLEXITY.

We will discuss inheritance programs in next tutorial.

Read More

[Part-4] HTML : Inserting Image

Today I will show you how to insert image on webpage using html.

We can insert the image using given below syntax :-

• <img src="url/source" alt="Any Text" width="Image Width" height="Image Height">
• In src we have to write the address of the image, alt give information about image when image doesn't load successfully,width and height is used to give width and height to the picture.
• Copy the below code in notepad or notepad++ to see how it work's.

HTML Code :-

<html>
<head>
<title>My First HTML Page</title>
</head>
<body>
<h1>Way to insert image on a webpage.</h1>
<b><i><p>Below is a image :-</b></i></p>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7XDtQAFwTc6tkVB1E0gXiFbxsCWTvrLcI_h2RrDrw2SShzBT0KFqgg2cC6x7wky_dx_9s77_aMhXQy0NUXOox5NoibyHbycz00i0v1muKTCJBQkCf1Jo17brZiXxmUFOFvRogY2Tkqbs/s320/engagelikeusonfacebook.jpg" alt="Programming Skills" width="500px" height="500px">
</body>

</html>

For more help see below video :-

Read More

[PART-3] JAVA : Input using DataInputStream

Read my previous tutorial if you don't know how to compile and run java programs.

• Remember Java is Case Sensitive language i.e. You must take care of Capital and small letters.
• Like in turbo C, C++ we use "void main" or "int main", similarly in java we will use

           public static void main(String args[])throws IOException

          {

       

           }    

          where
public : It is a keyword and it means the main method is publicly available.
static : It is a keyword and any other class can call this main method without any restriction.
void : It means main() will not return any value.
String args[] : args is the parameter of type String.
throws IOException : To prevent error while compiling.

SYNTAX :

DataInputStream object_name = new DataInputStream(System.in) ;
Here We have created a new object named "object_name" using the "new" keyword of class "DataInputStream". We can now use this "object name" in our program to take input.


Examples :
Copy each codes and compile and execute it.

------------------------------------------------------------------------------------------------------------
to get int type input -->
------------------------------------------------------------------------------------------------------------

/*Here we have created object named "s" to take input. Similarly we will take input of different data types using this object named "s" .*/
/*Note this a comment in Java*/
/* Note the symbols i have used  for comments */

------------------------------------------------------------------------------------------------------------
to get char type input -->
------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------
to get float type input -->>
------------------------------------------------------------------------------------------------------------

------------------------------------------------------------------------------------------------------------
to get String type input -->> (note String S is capital)
------------------------------------------------------------------------------------------------------------

You have to remember these 4 methods.
And for output we use System.out.print("text to print on screen");
We will use this DataInputStream class in next programs. Remember these programs.

Follow the video tutorial for better understanding...

Read More

[Part-3] HTML : Hyperlink Tutorial

In this part I will tell you about HTML Hyperlink.

What is hyperlink and how to add hyperlink?

• Basically we can say that hyperlink is a word or it can be an image on which when we click we jumps up to the another page for example below is a hyperlink when you click on it you will jump to another page.
• Hyperlink Click on it.
• We can add the hyperlink using the below syntax.
• <a href="url">Any Name</a>

HTML Code :-

<html>

<head>

<title>Use of Anchor Tag</title>

</head>

<body>

<h1>Use of Anchor Tag</h1>

<br>

<p>In this tutorial you will learn that what is hyperlink and how to add the hyperlink?</p>

<hr>

<!-- Below is a hyperlink -->

<a href="http://programmingskills.blogspot.in">Complete Programming Tutorials</a>

</body>

</html>

Now see the below video to learn the use of hyperlink :-

Read More