Bundelkhand Institute of Engineering and Technology MINI PROJECT PRESENTATION Presentation on Front-End Web Development Presented By Sagar Singh Suyal Electrical Engineering 3rd Year Under the supervision of Er. Aftab Ahmad Department of Electrical Engineering Roll No.-1904320044 1 CONTENT Introduction to HTML HTML Tags HTML Document Structure Introduction to CSS Style Class Create an Internal Style Sheet Create an External Style Sheet Link to a Style Sheet JavaScript Typical Uses Usage of web development Reference 2 • HTML documents are simply text documents with a specific form – Documents comprised of content and markup tags – Content: actual information being conveyed – The markup tags tell the Web browser how to display the page – An HTML file must have an htm or html file extension – An HTML file can be created using a simple text editor 3 3 • • • • If you are running Windows, start Notepad If you are on a Mac, start SimpleText If you telnet to csupomona.edu, use “pico” Type in the following: <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> • Open this file using a browser, and you will see… 4 4 • HTML tags are used to mark-up HTML elements – Surrounded by angle brackets < and > – HTML tags normally come in pairs, like <tagname> (start tag) and </tagname> (end tag) – The text between the start and end tags is the element content – Not case-sensitive – Follow the latest web standards: • Use lowercase tags 5 5 • Entire document enclosed within <html> and </html> tags • Two subparts: – Head • Enclosed within <head> and </head> • Within the head, more tags can be used to specify title of the page, meta-information, etc. – Body • Enclosed within <body> and </body> • Within the body, content is to be displayed • Other tags can be embedded in the body 6 6 HTML5 enables you to define many different types of content on a web page, including headings, paragraphs, lists, images, input fields, canvases, and multimedia. To specify how this content looks, you need to add Cascading Style Sheets, or CSS. CSS lets you specify colors, font families, backgrounds, margin widths, alignment, and much, much more. A CSS style sheet is typically a text file separate from your HTML document. 7 A declaration consist of one or more property-value pairs such as font-size: 12px or position: absolute. Each property and value is separate by a colon. Multiple property-value pairs are separated by semicolons. 8 You can apply the class using the class attribute inside a paragraph tag. 9 You can create an internal style sheet that resides within the <head> tag of your HTML5 document. The styles of an internal style sheet are delineated by <style> and </style> tags and apply only to the HTML in that document. Internal style sheets are handy if your website consists of a single page because you can change both style rules and HTML in the same file. If you want to apply the same styles to multiple web pages, consider putting the styles in an external style sheet instead. 10 11 12 You can use an external style sheet to define formatting and layout instructions and then apply those instructions to your HTML5 document. Style sheets can include rules for customizing text, tables, form elements, and more. You can save the style sheet as a text file and assign the .css file extension to identify the file as a Cascading Style Sheet. 13 You can link to an external style sheet to assign a set of formatting rules to your HTML5 document. You use the <link> tag to specify the filename and location of the style sheet. You can link multiple documents to the same style sheet to give all the pages in your site a consistent look and feel. You can also assign multiple style sheets to a single document by adding more than one <link> tag. 14 15 JavaScript • A scripting language developed in a collaboration between Netscape and Sun Microsystems to provide client-side programming in web pages. • Executable JavaScript may be included into an HTML page as either... • external • embedded • inline • Not a full programming language like Java or C++ • Not a subset of Java - syntactically similar but: • loose data typing • object based not strictly object oriented © 2014 the University of Greenwich 16 16 Typical Uses • GUI enhancement • rollovers images • pull-down menus • browser sniffing to adjust page layout • Techniques to reduce the load on the server • validating input before sending to a server-side program • shopping carts • Mini-applications • calculators, calendars • Animation © 2014 the University of Greenwich 17 17 Example var age = parseInt(prompt("Please enter your age", 29)); © 2014 the University of Greenwich 18 18 • Web development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. • It is the creation of an application that works over the internet i.e. websites. 19 Now-a-days majority of the applications are developed for mobile,Usage of mobile phones has increased in the past year. India stands second in the world, in the number of active mobile phones. With the increase in the number and make of mobile phones, there comes a demand for better applications. And in turn, huge scope of android mobile application development in India. 20 • • • • https://www.sitesbay.com https://www.javatpoint.com https://www.geeksforgeeks.org https://www.w3schools.com/js 21 THANK YOU! 22
