CIS 133 mashup Javascript, jQuery and XML Introducing the web CIS 133 mashup Javascript, jQuery and XML
How people access the web Browsers Firefox, chrome Navigation techniques Versions Devices Screen sizes Screen Readers Visual impairments Web pages might be required to accommodate readers
Web Pages, Servers, and Browsers Documents on the Web Can contain images, video and sound clips Can interact with databases Stored on Web servers in special folders Viewed using web browsers Web browser Interprets the HTML and scripting language such as JavaScript and jQuery and display to user Web Servers Special computer that fulfill requests for resources 24x7 Can also execute code in language specific programs
Architecture of a web application –client/server Storage server Client Computer Web server Database server Internet Client Computer Email Server
How a web server processes a request Simple HTTP Request: GET / HTTP/1.1 Host: www.demo.com Storage server HTTP Request ^ Client Computer ^ Web server Database server HTTP Response Simple HTTP Response HTTP/1.1 200 OK Content-type: text/html Content-Length: 136 Server: Apache/2.2.3 <html> <head> <title> Example Web Page</title> </head> <body> <p> This is a sample page</p> </body> </html>
How Javascript fits in Storage server HTTP Request ^ Client Computer ^ Simple HTTP Request: GET / HTTP/1.1 Host: www.demo.com Storage server HTTP Request ^ Client Computer ^ Web server Database server HTTP Response Simple HTTP Response HTTP/1.1 200 OK Content-type: text/html Content-Length: 136 Server: Apache/2.2.3 <html> <head> <title> Example Web Page</title> </head> <body> <p> This is a sample page</p> </body> </html> Client-side script
Javascript and jQuery Javascript jQuery a programming language jQuery a library of pre-written Javascript code a language Browsers are written to understand both
HTML: The Language of the Web Web page Text file written in HyperText Markup Language (HTML) Markup language Describes structure and content of a document Extensions Differences in the language introduced by competing browsers
Web Page Structure In all kinds of documents, structure helps readers understand the messages you are trying to convey
Web Page Structure Structures used in traditional formats are frequently used in web content
Web Page Structure This is accomplished using headings, sub headings, and lists, similar to those used in word processing software
HTML: The Language of the Web World Wide Web Consortium (W3C) http://www.w3c.org Creates standards for browser manufacturers Has no enforcement power but recommendations are usually followed Companion site is www.w3schools.com Provides online tutorials, documentation, and quizzes
Versions of HTML and XHTML What's a deprecated tag / attribute? Older HTML tags and attributes Superseded by other more functional or flexible alternatives (whether as HTML or as CSS) Eventually these tags are likely to become obsolete Deprecated HTML tags examples <applet> Inserts applet <object> references an object <basefont> sets font styles <center> centers elements <dir> directory list <isindex> adds search field <menu> menu list <s> strike through text style sheets <u> underline text style sheets HTML5 implements a complete separation of structure and presentation
The Structure of an HTML File DOCTYPE tag <!DOCTYPE html> HTML tag <html></html> Root element Can have only one root element Head element <head></head> Contains information about the document Can contain meta elements Instructions in this section are done before the page is displayed and remains in memory. Body element <body></body> Contains content to be displayed in the Web page Sequential process of each line <!DOCTYPE html> <html> <head> <title></title> </head> <body> content </body> </html>