Hello friends How are you all? I think everyone is well and with EduTecBD. Let’s go to work without talking.  In the past, I showed you the use of the div tag. Hopefully, you have done it well. In the last episode, I told you that we will do a small project using HTML. But for this, you have to understand the previous issues well and have perceptions. In the past, I told you that the first thing we need to do when planning a web page is to plan. There is no option to start planning by working. Different types of education, such as books, online etc., can be seen before the code is given then the description of the code. But since I am presenting here as well as presenting a small project in front of you. That is why the code is trying to explain later, through which the issue of the plan is clear in front of you. Let us start our project by not increasing the word. Here I will design an ad animation from across the entire webpage. And I designed it in such a way that it could include all the things previously learned. One thing we all know is that all of the HTML code we write inside the body. Now think about a lot of web pages that you can see who are stuck on both sides. And since we are going to design a little form, we should also give it the shape of a form. That’s what we’ve done here. It’s a div and I have given different colours with different attributes in it to show the body differently. The thing that you remember when talking about this is that the attribute inside the tag is used, all of you go, and inside its properties are given. So if I write differently and write each line, then you have to write a whole book. If you do not understand, then ask questions later. If there is more problem, then pretend to pretend.

At first, we have selected the entire part of a form inside a body of a div. All we have to do now is to add objects to one another. I gave you the code below. Save it with a .html extension and then open it in your browser and see the results on one side and match the code on the other side.

/td> </pre><html> <head> <title>Admission Form</title> </head> <body style=”background-color:#CCCCCC;”> <div id=”container” align=”center” style=”width:900px; height:1410px; border:groove; background-color:#FFFFFF; margin:0px auto;”> <h1 style=”text-align:center; color:#0099FF”> ABH World IT Academy</h1> <h2 style=”text-align:center; color:#0099FF”> Admission Form</h2> <form> <div id=”1st”> <div id=”course” style=”margin-left:20px; float:left;”> Course: <select name=”course”> <option value=”PWD”> Professional Website Designe </option> <option value=”CWJ”> Corporate Website Designe With Joomla </option> <option value=”BGD”> Basic Graphics Design </option> <option value=”ALD”> Advance Logo Design </option> <option value=”PHP”> PHP & MySQL </option> <option value=”AAD”> Android Apps Development </option> </select> </div> <div id=”date” style=” text-align:right; margin-right:20px; float:right;”> Date: <input type=”text” name=”date” style=”border:groove;”/> </div> </div> <!–close of 1st line div–> <br/> <div id=”student_information” style=”width:850px; height:300px; border:groove; text-align:left; margin:10px”> <table> <tr> <td> Full Name: </td> <td> <input type=”text” name=”std_name” size=”30″ style=”border:groove”/></td> <tr> <td>Father’s Name: </td> <td><input type=”text” name=”fthr_name” size=”30″ style=”border:groove”/></td> </tr> <td>Mother’s Name: </td> <td><input type=”text” name=”mthr_name” size=”30″ style=”border:groove”/></td> </tr> <td>Contact Address: </td> <td><input type=”text” name=”CA” size=”30″ style=”border:groove”/></td> </tr> <td>Mobile Number: </td> <td><input type=”text” name=”mbl_no” size=”30″ style=”border:groove”/></td> </tr> <td>Email Address: </td> <td><textarea rows=”3″ cols=”22″ style=”border:groove”></textarea></td> </tr> <td>Date of Birth: </td> <td><input type=”text” name=”DOB” size=”30″ style=”border:groove”/></td> </tr> </table> </div> <!–end of student information div–> <br/> <div id=”sex” style=”width:850px; height:25px; border:groove; text-align:left;”> Gender:&nbsp; &nbsp;&nbsp; Male <input type=”radio” name=”sex” value=”Male” checked=”checked”> Female <input type=”radio” name=”sex” value=”Female” checked=”checked”> </div> <!–close of gender div–> <h3>For Job Holder</h> <div id=”sex” style=”width:850px; height:30px; border:groove; text-align:left;”> <table> <tr> <td>Organization Name:</td> <td><input type=”text” size=”30″ name=”orga” style=”border:groove”/></td> <td>Designation:</td> <td><input type=”text” size=”30″ name=”dsg” style=”border:groove”/></td> </tr> </table> </div> <!–close of job div–> <h3>For Student </h3> <div id=”sex” style=”width:850px; height:30px; border:groove; text-align:left;”> <table> <tr> <td>Institute Name:</td> <td><input type=”text” size=”30″ name=”inst” style=”border:groove”/></td> <td>Class/Department:</td> <td><input type=”text” size=”30″ name=”cls” style=”border:groove”/></td> </tr> </table> </div> <!–close of std_institute div–> <h3>From Where you heard about us ? </h3> <div id=”student_information” style=”width:850px; height:30px; border:groove; text-align:left; margin:10px”> Person <input type=”checkbox” name=”media” value=”Person”/> Online <input type=”checkbox” name=”media” value=”Online”/> Paper/Magazine <input type=”checkbox” name=”media” value=”Paper”/> Other <input type=”checkbox” name=”media” value=”Other”/> </div> <h3> For office use only</h3> <div id=”student_information” style=”width:850px; height:220px; border:groove; text-align:left; margin:10px”> <table> <tr> <td>Name of Councilor: </td> <td> <input type=”text” name=”counilor_name” size=”30″ style=”border:groove”/></td> <tr> <td>Class days:</td> <td><input type=”text” name=”cls_day” size=”30″ style=”border:groove”/></td> </tr> <td>Class time: </td> <td><input type=”text” name=”cls_time” size=”30″ style=”border:groove”/></td> </tr> <td>Batch no: </td> <td><input type=”text” name=”batch” size=”30″ style=”border:groove”/></td> </tr> <td>Name of Trainer: </td> <td><input type=”text” name=”trainer_name” size=”30″ style=”border:groove”/></td> </tr> <td>Class start: </td> <td><input type=”text” name=”cls_start” size=”30″ style=”border:groove”/></td> </tr> </table> </div> <!–end of office information div–> <h3>Payment Option </h3> <div id=”sex” style=”width:850px; height:30px; border:groove; text-align:left;”> <table> <tr> <td>Course Fee:</td> <td><input type=”text” size=”30″ name=”fee” style=”border:groove”/></td> <td>Remarkable:</td> <td><input type=”text” size=”30″ name=”remark” style=”border:groove”/></td> </tr> </table> </div> <!–close of payment option div–> </form> <br/> <div id=”last”> <div id=”course” style=”margin-left:20px; float:left;”> <hr/> Student’s Signature </div> <div id=”date” style=” text-align:right; margin-right:20px; float:right;”> <hr/> Councilor’s Signature </div> </div> </div> <!–close of container div–> </body> </html><pre>

Now notice, we have div inside the div, and within it we have divided the whole form of different divs into different sections. Then we have added different parts of it. Here one more thing is to note that for each div separately I have given them different ID names. No further explanation here. Find yourself where you are having trouble understanding. One more important thing is to use comment when writing a big code.

Thanks for reading this whole article. We hope your result will be outstanding So that your family will be delighted. Keep in touch with EduTec BD and we will give you the right information.

For any information, you want to know comment below we will provide you as soon as possible.

Join us on our Facebook Page: EduTec BD

Join us on our Facebook Group:  EduTec BD