UNIT-1.1(IWT).pdf

INTRODUCTION TO WEB TECHNOLOGIES 22CSO01(Open Elective-1) BE(ECE) V-Semester Prepared by S Durga Devi Assistant Professor Department of Computer Science and Engineering Chaitanya Bharathi Insti...

INTRODUCTION TO WEB TECHNOLOGIES 22CSO01(Open Elective-1) BE(ECE) V-Semester Prepared by S Durga Devi Assistant Professor Department of Computer Science and Engineering Chaitanya Bharathi Institute of Technology S. Durga Devi, CSE,CBIT  SYLLABUS UNIT - I Web Basics: WWW Browsers, Web Servers, URL, MIME, HTTPS. Introduction HTML5: basic tags, Images, Tables, Lists, Forms, Layout, Graphics, span and div tags. Grid, Cascading Style Sheets. UNIT – II The Basics of Java script: Primitive operations and Expressions, Arrays, Functions, Pattern Matching Using Regular Expressions, Document Object Model, Element Access in JavaScript, Events and Event Handling, Handling Events from Body, Button, Text Box and Password Elements. Dynamic Documents with Java Script: Positioning Elements, Moving Elements, float and clear. UNIT - III XML: Introduction, uses of XML, the Syntax of XML, XML Document Structure, Namespaces, XML schemas, displaying Raw XML Documents, displaying XML documents with CSS, JSON, XML vs JSON. UNIT - IV Django: Introduction, Models, Templates, supported data bases, URL configuration. Templates, Modifying and Improving the Templates, Creating a Form. UNIT - V Applications: Introduction to Ajax, Node.js and. Bootstrap: Introduction to Bootstrap, bootstrap grid, bootstrap components. Web Application Frameworks: React JS, JQuery. S. Dura Devi ,CSE,CBIT Text Books 1. HTML5 Black Book (Covers CSS3, JavaScript, XML, XHTML, AJAX, PHP, jQuery), Dreamtech, 2017. 2. Adrian Holovaty and Jacob Kaplan-Moss” The Definitive Guide to Django Web Development Done Right”, après-2009 3. P. J. Deitel - Deitel, H. M. Deitel - Deitel, “Internet & World Wide Web How To Program”, 5th Edition, Prentice Hall, 2007. 4. Miguel Grinberg , “Flask Web Development”, First edition-2014. Suggested Reading: 1. Web Technologies, Uttam K Roy, Oxford University Press 2. Chris Bates, “Web Programming, building internet applications”, 2nd edition, John Wiley & Sons, 2010. 3. JavaScript for Modern Web Development: Building a Web Application Using HTML, CSS, and JavaScript, by Alok Ranjan, Abhilasha Sinha, Ranjit Battwad, BPB, 2020. S. Durga Devi ,CSE,CBIT Course Objectives: 1. Acquire knowledge on HTML, Java Script and XML to develop client side web applications. 2. Learn developing web applications using Django. Course Outcomes: At the end of the course, students will be able to:  1. Understand the technologies required for developing web application.  2. Identify and choose HTML tags, CSS and java scripts to develop well- structured and easily maintained web pages.  3. Design and Develop interactive and innovative web pages using various platforms/technologies like HTML, CSS, XML, JAVASCRIPT.  4. Create and deploy web applications in web server by using Django concepts.  5. Evaluate different web applications to implement optimal solutions for real time problems S. Durga Devi ,CSE,CBIT  INTRODUCTION TO WEB TECHNOLOGIES What is Web Technology? Provides a platform for effective communication among different users and devices over internet. Web technologies provides various tools, languages, and frames works to build web applications, websites and mobile applications. - helps to develop your own web sites. - Enables users to develop web applications that are interactive, dynamic, user friendly and accessible across the various devices Website/ web application - cbit.ac.in, learning.cbit.org.in , google.com, facebook.com S. Durga Devi ,CSE,CBIT Web Basics 1. WWW: World wide web(web) is a information system where documents and other resources over internet are identified by the URL’s( Uniform Resource Locators) interlinked by the hyperlinks. Simply say repository of the information accessed over the internet. 2. Web page: web page is an individual document make up web which can be written in HTML includes text, image, video and multimedia content. 3. Web Browsers: A software used to access web pages and interface between client and server. Ex: chrome, microsoft edge and safari. 4. Web Servers: A web server is a software system that serves web pages to users upon request using HTTP protocol. Web servers produce and deliver information requested by web client( Browser). Ex : Apache HTTP Server, Nodejs, LiteSpeed. S. Durga Devi ,CSE,CBIT  WWW(WORLD WIDE WEB)  www is an interface used to access the information contained in the internet.  Information is accessed as web page or HTML documents.  Web pages are viewed through web browser.  Internet and www words are not same.  Internet is a global data communication system.  Web or www is a repository of information that can be accessed through internet. S. Durga Devi, Dept of CSE,CBIT  Web servers produce and deliver information requested by web client( Browser).  web client(Browser) request information stored on server retrieve and display information.  three main components of WWW 1. HTML 2. URL 3. HTTP S. Durga Devi, Dept of CSE,CBIT 1. HTML used to encode documents containing hyperlinks. - HTML documents are viewed by a software called browser. 2. URL (Uniform Resource Locators) - used to identify documents or resources on internet. - different kind of resources are identified by different formats of URLs - URL formats starts with protocol name followed by domain name and path to that Resource - Ex http://www.axis.com/login.html 3.. HTTP(Hyper Text Transfer Protocol) all web communication transactions use same protocol called http - it is application layer protocol for WWW. S. Durga Devi, Dept of CSE,CBIT  MULTIPURPOSE INTERNET MAIL EXTENSION(MIME)  Web browser determines the format of the document that it receives from server.  when the server sent the data it specifies the type of the data through MIME.  When browser receives the MIME from server the browser uses that MIME specification to determine what to do with the data.  MIME specifications have the following form  type/ subtype  MIME types are text, image or video S. Durga Devi, Dept of CSE,CBIT  HTTP PROTOCOLS  Most popular application protocol used in internet.  When URL typed on browser, browser translates URL into specified protocol and sends request to the server.  Ex URL http://www.javaservlet.com/doc/index.html GET /docs/index.html HTTP/1.1 Host: www.javaservlet.com Accept: image/gif, image/jpeg, */* Accept-Language: en-us Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) (blank line)  Server interprets received request, maps into a file under server document directory and returns requested file to client.  If requested page not found in server document directory send error message. S. Durga Devi, Dept of CSE,CBIT S. Durga Devi, Dept of CSE,CBIT HTTP request send to server using GET and POST methods 1. GET- only limited amount of data can send - not secured because sending data is visible in url - Example google.com https://www.google.co.in/?gfe_rd=cr&ei=- Q2vVM20JqzO8geKsIGYCg#q=common+gateway+interface 2. POST- data is secured because not visible in url. -large amount of data can send - slower than the GET -Ex- gmail.com S. Durga Devi, Dept of CSE,CBIT  Anatomy of Get Request S. Durga Devi, Dept of CSE,CBIT 14 https://www.google.co.in/?gws_rd=cr&ei=bF1WUrXbJMS3rgf11YDQBQ#q=java+servlets  HTTP RESPONSE HEADER  Web server responds to the http request to the browser.  Response by server called HTTP Response Header.  Gives instructions to the client to how to process the response document.  HTTP response header looks like this HTTP/1.1 200 OK – status line Content-Type: text/html Header2:...... Http Response header HeaderN:... (Blank Line) Document...... Continue………………… S. Durga Devi, Dept of CSE,CBIT SERVLET HTTP CODES Code Message Description 100 Continue only part of the request received by server but not yet rejected. S. Durga Devi, Dept of IT 200 Ok Request is ok 202 Accepted Request is accepted but not yet processed. 403 Forbidden Access is forbidden for requested page. 404 NotFound Server not found requested page. S. Durga Devi, Dept of CSE,CBIT  https://www.thetoppersway.com/web-technology- notes-pdf-and-ppt-format/  https://msdn.microsoft.com/en- us/library/office/aa218647(v=office.11).aspx#odc_fpget tingstartedwithwebdev_introduction  https://www.tutorialrepublic.com/xhtml-tutorial.php  http://www.codingfusion.com/Post/12-beautiful- HTML-table-examples-for-beginners-to  http://htmldog.com/examples/images1/  http://marksheet.io/html-forms.html  http://javascript-coder.com/html-form/html-form- tutorial-p1.phtml  http://www.echoecho.com/html.htm S. Durga Devi, Dept of CSE,CBIT