A INDUSTRIAL TRAINING PRESENTATION ON WEB DEVELOPMENT Department of COMPUTER SCIENCE & ENGINEERING ENGINEERING COLLEGE, AJMER SESSION (2022-2026) SUBMITTED TO: SUBMITTED BY: Dr. Atul Chaudhary Girija Sharma Roll No:- 22EEACS036
Index Introduction Things Learned Types of Web Development HTML tags CSS JavaScript Project Certificate
Create responsive and user-friendly web pages. Pro-efficiency in HTML. Pro-efficiency in CSS. Pro-efficiency in JavaScript. . It was an excellent learning experience for me in the internsavy centre as the mentors and guide help me throughout this project Internsavy provided a smooth learning environment as the industry has I have learned a lot of things from time management to pressure handling etc. This training was conducted for a month. Things Learned
It is building and maintenance of websites. Basically, its backend i.e. the work happening behind the scene to make website look great, attractive and user- friendly.HTML, CSS and Javascript are the languages used for web development. Basically it is the way which craves our ideas and thoughts on the computer screen Introduction: Web Development
Front-end web development Back-end web development Full-stack web development. Web designer. Web programmer. Content developer. Web master. Types of Web Development
It is also known as the client side development It focuses on the visual elements of a website that a user will interact with The common technologies which we can use in front-end development: HTML CSS JAVASCRIPT Front-end Web Development 4 of 21
HTML Hyper Text Markup Language It describes the structure of web pages using markups It is used to provide the content (words, images, audios, videos) on the web pages Html is a tag based language They are defined within the angle bracket HTML INTRODUCTION
CSS Cascading Style Sheets It describes how HTML elements are to be presented on a screen. Contains the rules for the presentation of HTML. CSS can control the layout of multiple web pages at once. It includes adding visuals like colors , fonts, layouts ,etc CSS INTRODUCTION
JavaScript ¨a lightweight programming language ("scripting language") It describes the behavior of web pages. It is used to make web pages interactive It insert dynamic text into HTML (ex: user name) It react to events (ex: page load user click) It get information about a user's computer (ex: browser type) It perform calculations on user's computer (ex: form validation JAVASCRIPT
HTML TAGS DOCTYPE : what version of HTML the page is written in. <!DOCTYPPE 2. HTML elements : Tag just define the beginning and end of the elements. HTML5> Paragraph: Blocks of texts separated from each other by some space. <p></p> Headings: These tags in HTML mark some content as headings. <h1></h1> BR Tag : Used for single line break between the contents. < br >
TAGS(Contd..) 3.LISTS: Lists are used to group together related pieces of information so they are clearly associated with each < li ></ li >{Used in b/w list types} other and easy to read. Unordered Lists: It used to group a set of related items in no particular order, followed by bulletins. < ul ></ ul > Ordered Lists: It is used to group a set of related items in a specific order, followed by numerical numbering. < ol ></ ol >,<dl></dl>{definition} Description Lists: A definition list is not a list of items. < dt ></ dt >{list terms} 4.NESTING elements : Elements contains elements .
TAGS(Contd..) 5. IMAGES: Displaying images in a document. And " src " < img src ="images/logo.png"> stands for source and it's value is URL of image. ALT Attribute: Alternate texts tells the reader what he or she is missing on a page if it is not loading < img src ="images/logo.png" alt="Coffee mug image"> 6. ATTRIBUTES: It provides additional info about HTML elements on your page and it's control in behaviour . < tag_name attribute_name =" value_value ">content enclosed</ tag_name > 7. ANCHOR Tag: <a> defines a hyperlink to link one page to another. href Attribute: It indicates the link's destination. Relative linking : Specifies local links and absolute linking: Specifies outside links Target Attribute: It tells where the linked document will be opened
CSS – Cascading Style Sheets Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of webpage. It is used in styling from background to a color of a specific letter in a webpage. It plays a major role in a webpage as it decides how it looks. It needs to be written in different file with extension . css and needs the file to be linked with the html file with <link> tab with attribute href having its relative address. In this file, each line ends with a semicolon(;) For styling particular tag content we need to name and describe its style in it and it will style all content in our webpage with that tag.
For styling particular content in tag at that place on , we give it attribute ID and describe its style in CSS file with # id_name For styling in different tag with same style , We have class as attribute and to be given to elements with same styling needed. Class need to be styled with in CSS file with . class_name We can design webpage in the box model format , which includes MARGIN , BORDER , PADDING , CONTENT CELL , styling them individually. INSPECT Element : It is used to get the code of the design to implement it in our project.
Bootstrap – CSS Library It is a library of CSS codes with many classes in it. There are predefined classes in Bootstrap Library. These codes can be used for any styling formats , style designs and any other styles. It just needs to be attached to html file using <link> element with href attribute having its address. Extra styles and changes to style by bootstrap library can be done with different CSS file but needs to be attached after Bootstrap file attachment