You are on page 1of 83
INDUSTRIAL TRAINING REPORT on Web Development Submitted to Maulana Azad National Urdu University,Polytechnic Darbhanga For Partial fulfilment of the Award of DIPLOMA IN COMPUTER SCIENCE & ENGINEERING j Ee SZ oe Submit By Name Enrollment No 1.MD NEZAMUDDIN A182234/18DPCS031DB Submitted to Mr.Raj kumar Mondal Assistant Professor of Computer Science & Engineering MAULANA AZAD NATIONAL URDU UNIVERSITY POLYTECHNIC, DARBHANGA (BIHAR)2018-2021 DECLARATION Thereby declare that the Industrial Training Report entitled " Web Designing” is an authentic record of my own work as requirements of Industrial Training during the period from 15 Feb 2021 to 24 May 2021 for the award of degree of Diploma in Computer Science Engineering from Maulana Azad National Urdu University (MANUU), Polytechnic, Darbhanga under the guidance of Mr. Raj Kumar Mondal, Assistant Professor, Department of CSE. Md. Neamnudbin ( ature of student) Date: HE os ricci ations CERTIFICATE FROM ORGANIZATION This is to certify that Mr. / Ms. MD.NEZAMUDIN bearing Enrollment No, A182234 has partially completed / completed Industrial Training during the period from 15 Feb 2021 to 24 MAY 2021 in our Organization / Industry as a Partial Fulfillment of Diploma in Computer Science and Engineering, He / She was trained in the field of Web Development . Signature & Seal of Training Manager Note: This certificate must be typed on the company letter head. Page | 3 Certificate CERTICATE Presented to MD Nezamuddin for successfully completing the following course Web Development Using Wordpress of 3 Months duration at LUDHIANA FEROZE GANDHI MARKET during the period from 15-Feb-2021 to 24-May-2021 (Oniine/Offine Mode) Dated : _25-May-2021 ‘Authorized Signatory Feroze Gandhi Market, Ludhiana, Punja, naa ACKNOWLEDGEMENT Atevery outset, I express my gratitude to almighty lord for showering his grace and blessings upon me to complete this Industrial Training. Although our name appears on the cover of this book, many people had contributed in some or the other form, I could not have done this project without the assistance or support of each of the following and I thank you all for the same. T wish to place on my record my deep sense of gratitude to my Trainer guide, Mr. Mayank Jain World With Web Pvt Ltd, for his constant motivation and valuable help through the Training. ‘We are very thank full to our Internal Guide Mr. Raj Kumar Mondalfor co-operation and guidance given by him to complete the project successfully. We also Express my gratitude to Faulty of Computer Science Engineering, MANUU Polytechnic Darbhanga for there valuable suggestions and advices throughout the Diploma course, We Offer my sincere thanks to Head of Computer Science Engineering Department of Polytechnic Maulana Azad National Urdu University, Darbhanga for giving me this opportunity to carry out this project work and for his concern and encouragement HED or icc ations PREFACE Diploma Engineers are highly competent with their technical skills, but they lack the practical ‘exposure, managerial skills, attitude and interpersonal skills, when they first step in to the industry this is a very common phrase within the industry. ‘The primary objective of industrial training program is to overcome such problems faced by a Diploma Engineer, and to build up a sound appreciation and understanding of the theoretical principles learnt as an undergraduate, by exposing them to the industrial environment while being an undergraduate, It is oriented toward developing the skills, knowledge and attitudes needed to make an effective start as a member of the engineering profession. This report presents a brief presentation on gained, technical know-how, experiences, customer interaction, challenges, achievements and failures during my industrial training. I was placed at World With Web PVT.LTD for duration of 6 month commencing from 10 Jan 2021. It was a risk, selection such a training experience I had, the risk I look perfectly paid at the end. It was a risk, selecting such a training organization because I was the first person to visit World With Web PVT.LTD engineering trainee, and not had any idea on what is World With Web PVT.LTD and what they really do. HE or ccc ations ABSTRACT ‘The report is a summary of the work experience Ihave been able to gather during my industrial training program at World With Web.The report contains some of testing, Web Designing on various (Computer Science Engineering) for the successfully completion of the training. ‘The abstract contains a brief reports and technical knowledge about industrial training for ‘example if any student works in the field of telecom then there is a brief introduction about commissioning , testing, and troubleshooting of any device (1 paragraph), ‘The abstract also consist the benefit and future recommendation of industrial training for polytechnic students. In Conclusion this technical report is the summary of what I have leant during industrial training program, HE or icc ations TABLE OF CONTENTS Self-Declaration.. Certificate from Organization... Vii COMPANY PROFILE. CHAPTER-1.. ; Introduction to HTML 2 po siieonceanlS 1.1 HTML VERSION OF YEAR... - it 13 1.2 FEATURE OF HTML. 15 1.3 HTML EDITOR. oS 1.4 Best Editor: Sublime Text. a os 2 9 16 1.5 HTML Lists...... - : sie i 1.6 HTML-Images sa 1.7 HTML-Hyperlink. . a " . 1.8 HTML-Table. 1.9 HTML FORM 1.10 HTML: Audio-video. 2 . 1.11 HTML COLOR CODINGMETHODS . 1.12 WHAT IS PADDING (CHAPTER-2. 2 Introduction to Css. 2.1 Selectors... 2.2 Color Background Cursor. 2.3 Text Fonts . 2.4 Lists Tables 2.5 Box Model. “ 7 ae ‘i a“ 25 2.6 Display Positioning... 2.7 CSS Positioning 2.8 Floats, 2.9 Using the RGBA color Model & Modernizr ’ oe 26 2.10 Gradient. . wn . . . vn 26 2.11 Transparent. a 2.12 RGBA for Gradients & Shadows. HERE 00 oes Datos 2.13 CSS Transitions. 2.14 CSS Transform & Transitions. 2.15 CSS Animation Using @keyframe.. (CHAPTER-3, 3 INTRODUCTION BOOTSTRAP 3.1 Gri 3.2 Jumbotron. 3.3 Bootstrap Table... 3.4 Striped Table 43.5 Bootstrap Border Tables. 3.6 Hover Table... 3:7 Responsive Table nn 3.8 Carousel 3.9 Navber. 3.10 Bootstrap Images... 3.11 Rounded Corners 3.12 Cirele.. 3.13 Thumbnail. 3.14 Forms . i 3.15 Vertical Form (default) : c . 57 3.16 Horizontal Form . . . cn 59. 3.17 Inline Form, 6 3.18 Dropdowr CHAPTER-4 0 : 4 INTRODUCTION WORDPRESS ......- 4.1 What is xampp enn 4.2 What is WordPress... 4.3 Wordpress project... 4.4 Wordpress Dashboard.. sommnawOD List Figure Figure no Figure name Page No Figure 1:-Table.. Figure 2:-Form. Figure 3:- Transparant. : Figure 4:- Transition Duration - ° 7 esoeSt Figure 5:-Animation Figure 3 = ws si siren Figure 6:- Bootstrap pag Figure 7:-Grid Figure 8:-jumbotron.... Figure 9:-Table data. oneon ‘ mee aeaerctmn enter striped Table... " ps ss 2 ssessnasaa ‘Manuu Polytechnic Darbhanga Figure 11:- Border Table. Figure 12:- Hover Table. Figure 13:-Responsive Table Figure 14:- Bootstrap Carousel Figure 15:- Navbar About page active. Figure 16:- Navbar Services page Active... Figure 17:- Rounded images.... Figure 20:- Submit Form.. Figure 21:-Horizontal Form. i Inline form. a Figure 23:-Dropdown...... : Figure 24:- Dropdown list... -Xampp download image .. .-Xampp download image .. -Xampp download image Figure 28:-Xampp download image Figure 29:-Xampp download image .. Figure 30:-Xampp download image Figure 31:-Xampp download image Figure 32:-Xampp download image .. Figure 33:-Xampp download image .. Figure 34:-Xampp download image .. Figure 35:-Xampp download image ... Figure 36:-Xampp download image Figure 37:- Wordpress adminlogin page. Figure 38:- wordpress dashboard. rir riensernsa ance Figure 39:-Home page... " mae —_ . ss as B Figure Figure 45:-Home page Figure 46:-Home page oo... BY i cc ations COMPANY PROFILE Cet aunt Pee ss Ca . ABOUT US A Leading Web Design And Development Company And IT Skills Training Academy Worid With Web is a proficient web development and software solution company based in Ludhiana. We offer a extensive range of services to reach targeted spectators and carve up your valuable information focusing on retaining customers. Our service includes Web application development, Website designing, Corporate profiles and presentations, E- commerce solutions, Application development, maintenance, and re-engineering, Web hosting solutions, Search Engine Optimization, and Flash development. We've the proven experience and proficiency in designing website that accomplish something by bringing in enquiries, which generate sales and are an asset to our business. As a website design company we offera full-circle loom in website design & web development where the actual web designing effort covers. Website: www.worldwithweb.com YY ec ations SraIs[o7a Ueno CLL Ue Soho Passion96% Proficiency What can we do? We have some solid professional skill that can impress you We have a great team with high skill of work in their own domain. A highly skilled team can only satisfy the client by delivering their merit to Cited ees -. CHAPTER: 1 Introduction to HTML HTML stands for Hyper Text Mark-up Language. It is used to design web pages using mark-up language. HTML is the combination of Hypertext and Mark-up language. Hypertext defines the link between the web pages. Mark-up language is used to define the text document within tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most mark- up languages (e.g. HTML) are human readable. Language uses tags to define what manipulation has to be done on the text. 1.1 HTML VERSION OF YEAR HTML is a mark-up language used by the browser to manipulate text, images and other content, in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991. The first ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1999 HTML Version ‘Year HTML 1.0 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML 5 2014 * History of HTML. *What you need to do to get going and make your first HTML page * What are HTML Tags and Attributes? HEED or ccc ations * HTML Tag vs. Elem HTML Version Year * HTML Attributes: * How to differentiate HTML Document Versions Tana Fajiecae Dating 1.2 FEATURE OF HTML It is easy to learn and easy to use It is platform independent. Images, video and audio can be added to a web page. Hypertext can be added to text. Tt is a mark-up language * Advantages: * HTML is used to build websites. * Itis supported by all browsers. ‘© Itcan be integrated with other languages like CSS, JavaScript ete © Disadvantages: © HTML can only create static webpages. For dynamic webpages, other languages have to be used. * A large amount of code has to be written to create a simple web page. © Security feature is not good. 1.3 HTML EDITOR ¢ Simple editor: Notepad ¢ Notepad++ « Atom ¢ Visual studio code BEY or icc ations 1.4 Best Editor: Sublime Text HTML-Basic Formatting Tags: In this module, HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define. *HTML Basic Tags * HTML Formatting Tags * HTML Color Coding 1.5 HTML-Lists In this module, The HTML
  • element is used to represent an item in a list. It must be contained in a parent element: an ordered list (
      ), an unordered list (
        ), or a menu (). In menus and unordered lists, list items are usually displayed using bullet points, now we are going to check how to use html list *Unordered Lists * Ordered Lists * Definition list 1.6 HTML-Images In this module, the Web was just text, and it was really quite boring. Fortunately, it was not too long before HE i cc ations the ability to embed images (and other more interesting types of content) inside web pages was added, There are other types of multimedia to consider, but it is logical to start with the humble element, used to embed a simple image in a webpage. This module will help you to make use of image mapping * image and Image Mapping 1.7 HTML-Hyperlink Inthismodule, HyperlinksareimportanttheyarewhatmakestheWeba web. This module shows the syntax required to make a link, and discusses link best practices * URL - Uniform Resource Locator *URL Encoding 1.8 HTML-Table In this module, representing tabular data on a webpage in an understandable, accessible way can bea challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries. classes

        DIPLOMA IN COMPUTER SCIENCE & ENGG FOURTH SEMESTER
        ED or icc ations

        PREPEAR 5 STUDENTS

        COURSE:COMPUTER SCIENCE & ENGG

        DURATION:3 YEARS

        BATCH 2018-2021

        BBY icc ations Output DIPLOMA IN COMPUTER SCIENCE & ENGG FOURTH SEMESTER PREPEAR S STUDENTS Table BEY or ccc ations 1.9 HTML FORM Inthis module, Forms area very important part of the Web— these provide much of the functionality you needfor interacting with websites,e.egisteringandloggingin, sending feedback, buying products, and more. Thismodule getsyoustartedwithereatingtheclient-sidepartsof forms. ‘X-UA-Compatible” content=" iewport" content="width=device-width, i Document


        Hobbies

        HEY ec ations
        • Reading
        • Sports
        • Music
        • Singing

        Gender

        Male Female

        filter price
        Mobile no select country name Output rr ’ : ° un 9 e Oss a 299 a 1.10 HTML:Audio-video *
        SL NO NAME ROLL NO Enrollment no
        1 ABC 31 Al
        2 DEF 001 A88
        3 GHI18 A16
        4 JKL 10 A28 S MNO 15 A39
        <> HZ ‘Manuu Polytechnic Darbhanga ‘table> Table output Table data 3.4 Striped Table Bootstrap Striped Table
        Rows/th> « First Name Last Name Email
        Saharukh khanc/td> Saharukh @mail.com
        2 Saharukh khane/td> Saharukh @mail.com
        3 Saharukh khane/td> Saharukh @mail.come/td> Jtr>
        Hy ‘Manuu Polytechnic Darbhanga
        Striped Table Layout
        Name City Pincode
        Amir Mumbai, Maharashtra, 400090
        Salman Indore -452018
        Saharukh New Delhi 110005
        Output Striped Table Layout Name city Pincode Amir Mumbai, Maharashtra, 400090 ‘Salman Indore 452018 ‘Saharukh New Delhi 110005, Figure 10:- Striped Table Hz ‘Manuu Polytechnic Darbhanga 3.5 Bootstrap Border Tables Bootstrap Bordered Table</itle> <link rel="stylesheet" href="https://maxcdn. bootstrapedn.com/bootstrap/3.3.7/ess/bootstrap.min.css"> <script sre="https://ajax. googleapis.com/ajax/libs/jquery/3.2. 1/jquery.min js"> </script> <script sre="https://maxcdn. bootstrapedn.cony/bootstrap/3.3.7/js/bootstrap.min js"> </script> </head> <body> <table class="table table-bordered"> <caption>Bordered Table Layout</caption> <thead> <u> <th>Name</th> <th>City</th> <th>Pincode</th> </tr> </thead> <tbody> <tr> <td>Amir</td> <td>Mumbai, Maharashtra,</td> <td>400090</td> </tr> <tr> <td>Salman</td> <td>Indore</td> <td>452018</td> </tr> <t> BEY canoe <td>Saharukh</td> <td>New Delhi</td> <td>110005</td> </i> </tbody> </table> </body> </ul> Output Bordered Table Layout Name City Pincode Amir Mumbai, Maharashtra, 400090 Salman Indore 452018 ‘Saharukh_ New Delhi 110005, Figure 11:- Border Table Hz ‘Manuu Polytechnic Darbhanga 3.6 Hover Table <!DOCTYPE html> <html> <head> <title>Bootstrap Hover Table
        Bootstrap Carousel Example