Download presentation
Presentation is loading. Please wait.
1
CIS 133 mashup Javascript, jQuery and XML
Introducing the web CIS 133 mashup Javascript, jQuery and XML
2
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
3
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
4
Architecture of a web application –client/server
Storage server Client Computer Web server Database server Internet Client Computer Server
5
How a web server processes a request
Simple HTTP Request: GET / HTTP/1.1 Host: Storage server HTTP Request ^ Client Computer ^ Web server Database server HTTP Response Simple HTTP Response HTTP/ 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>
6
How Javascript fits in Storage server HTTP Request ^ Client Computer ^
Simple HTTP Request: GET / HTTP/1.1 Host: Storage server HTTP Request ^ Client Computer ^ Web server Database server HTTP Response Simple HTTP Response HTTP/ 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
7
Javascript and jQuery Javascript jQuery
a programming language jQuery a library of pre-written Javascript code a language Browsers are written to understand both
8
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
9
Web Page Structure In all kinds of documents, structure helps readers understand the messages you are trying to convey
10
Web Page Structure Structures used in traditional formats are frequently used in web content
11
Web Page Structure This is accomplished using headings, sub headings, and lists, similar to those used in word processing software
12
HTML: The Language of the Web
World Wide Web Consortium (W3C) Creates standards for browser manufacturers Has no enforcement power but recommendations are usually followed Companion site is Provides online tutorials, documentation, and quizzes
13
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
14
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>
Similar presentations
