1 / 34

HTML & Web Programming

HTML & Web Programming. Yingcai Xiao. What to learn?. HTML Web Programming What is? Why? How? Web Client Web Server Client-side programming Server-side programming A better web?. Tim Berners-Lee (the father of the WWW) ASCII text (ISO/IEC 8859-1) is platform-independent.

jenac
Télécharger la présentation

HTML & Web Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML &Web Programming Yingcai Xiao

  2. What to learn? HTML Web Programming What is? Why? How? Web Client Web Server Client-side programming Server-side programming A better web?

  3. Tim Berners-Lee (the father of the WWW) • ASCII text (ISO/IEC 8859-1) is platform-independent. • “A” is 64 regardless big or little endian of the platform. • HTML (Hyper Text Markup Language) • High-level language for the Internet • Entirely text based (platform independent) A Common Language for the Internet

  4. HTML • HTML (Hypertext Markup Language) • Defines syntax and semantics of the Web language. • Entirely text based (platform independent) • Hypertexts are tagged in < >, not to be displayed. They are metadata describing regular text. (http://www.w3schools.com/tags/) simple.html: <html> <body> Hello, world </body> </html>

  5. Important Versions of HTML • Originally proposed by Tim Berners-Lee in 1989. • HTML 2.0, 1995 • HTML 4.01 became XHTML 1.0 in 2000 (More strict) • HTML 5.0, 2014, Multimedia (audio and video), 3D Graphics (WebGL). • http://www.w3schools.com/html/default.asp

  6. Transferring HTML programs over the Internet HTTP (Hyper Text Transport Protocol)

  7. WEB S E R V E R WEB C L I E N T Web Server & Client HTML/HTTP

  8. Hyper Text Transport Protocol • Tim Berners-Lee: RFC 2068 • (www.w3.org/Protocols/rfc2068/rfc2068). 1989. • Entirely text based: ASCII (8-bits) or Unicode (16-bits). • Platform independent • Defines how Web browsers and Web servers communicate. • 7 instructions defined in HTTP 1.1.: GET, POST, … • Transmitted over TCP/IP (Transport Control Protocol/Internet Protocol). • Web applications are implemented over the Internet using HTML and other Web languages.

  9. Web Browsers • Reside on client computers. • GET HTML pages from web servers • Display HTML pages on client computers (HTML interpreters) • Tim Berners-Lee: The first web browser, 1990, was called WorldWideWeb • Robert Cailliau: Erwise, the first commonly available web browser with a graphical user interface. • Marc Andreessen: Mosaic, the first popular browser, 1993, Netscape 1994 • Google: Chrome, the most used browser currently (51% 01/2015), 2008.

  10. Web Servers • Reside on server computers. • Serve HTTP requests • Send HTML pages to the client web browsers • Popular web servers: Tomcat, IIS, …

  11. http://winserv1.cs.uakron.edu/xiaotest/calc.html • Start a client (a browser). • Type in the URL (Unified Resource Locator). • Internet’s Domain Name System (DNS) converts winserv1.cs.uakron.edu into an IP address (130.101.10.31). • The browser opens a socket (IP) connection to the server using default port 80 winserv1.cs.uakron.edu:80 An IP packet is sent to the server. The packet contains the server’s IP address, the client’s address, and the following HTTP statements. What happens when browsing a web page on a server?

  12. • The browser transmits an HTTP request to the server. GET /xiaotest/calc.html HTTP/1.1 Accept: */* Accept-Language: en-us Accept-Encoding: gzip, deflate User-agent: Mozilla/4.0.(compatible; MSIE.6.0; Windows NT 5.1) Host: winserv1.cs.uakron.edu/ Connection: Keep-Alive [blank line] What happens when browsing a web page on a server?

  13. The server software (e.g. IIS, Tomcat) processes client requests from the designated port (80 by default). • Locates the file under the server’s web root directory • (c:\Inetpub\wwwroot on winserv1) • Returns “Server Error 404” if file not found. • Otherwise returns the contents of the file as text to the client with a text header. All as the content of an IP packet with the client’s IP address and the server’s address added at the top. What happens when browsing a web page on a server?

  14. • The server transmits an HTTP response back. HTTP/1.1 200 OK Server: Microsoft-IIS/5.0 Date: Wed, 24 Oct 2014 14:12:37 GMT Content-Type: text/html Accept-Ranges: bytes Last-Modified: Wed, 24 Oct 2014 14:00:53 GMT ETag: "d02acf81975cc11:a78" Content-Length: 4800 [blank line] <html> <body> … </body> </html> What happens when browsing a web page on a server?

  15. Upon receiving the response, the browser parses the HTML and displays the resulting Web page. • To compute, we need to get data from the client user. • A client form is needed. HTML form serves the purpose. What happens when browsing a web page on a server?

  16. http://winserv1.cs.uakron.edu/xiaotest/calc.html <html> <body> <form method=“post”> <input type="text" name="op1" /> + <input type="text" name="op2" /> <input type="submit" value=" = " /> </form> </body> </html> HTML Forms

  17. No action to send anything to the server when the user types values in the text fields. But when the submit button (<input type=“submit”>) is clicked, the browser submits the form along with any input in the form’s controls. POST /xiaotest/calc.html HTTP/1.1 … Content-Length: 11 [blank line] op1=2&op2=2 What’s happening?

  18. Server Side Processing

  19. Weber server hardware hosts the web server software. • Web server software listens to HTTP requests from the web port (80). • It processes the requested pre-deployed web page. • Deploying a Web Page on an IIS server. • IIS: Internet Information Services • Deploying Directory: C:\Inetpub\wwwroot • Access URL: http://localhost/ (case insensitive) Web Server

  20. Common Gateway Interface (CGI) • CGI applications write HTTP responses to standard output (stdout) on the server, which are then forwarded to the client browser by the web server. • CGI defines a low-level programmatic interface between Web servers and applications that run on Web servers. • CGI applications can be written in any programming language. • CGI applications read the input accompanying postbacks through server environment variables and standard input (stdin). • Slow, restarts a process on every request. Web Server Software

  21. ISAPI: Internet Server Application Programming Interface • ISAPI extensions are Windows DLLs hosted by IIS. • They’re referenced by URL just like HTML files (for example, http://winserv1.cs.uakron.edu/xiaotest/calc.dll). • IIS forwards HTTP requests to an ISAPI DLL by calling a special function exported from the DLL. • The DLL generates HTTP responses. • Faster than CGI (run in the same process as IIS). • Once loaded, they remain in memory. • They’re difficult to write. ISAPI

  22. Active Server Pages (ASP) • Introduced in 1996. • Dynamically generates HTML on Web servers. • Allows HTML and scripts / languages to be mixed. • The embedded script code are between the <% and %> tags. • When an Active Server Page is requested, ASP server parses the page and executes any scripts contained inside it. • Scripts access the input by using the Request object. • Scripts write HTML to the HTTP response using the Response object, which is sent to the client by the Web server along with the static HTML. • ASP integrates with ActiveX Data Objects (ADO). • Interpreted, slow. • Lacks encapsulation. Active Server Pages (ASP)

  23. <%@ Language="VBScript" %> <html> <body> <form> <input type="text" name="op1" value="<%= Request ("op1") %>"/> + <input type="text" name="op2" value="<%= Request ("op2") %>" /> <input type="submit" value=" = " /> <% If Request ("op1") <> "" And Request ("op2") <> "" Then a = CInt (Request ("op1")) b = CInt (Request ("op2")) Response.Write (CStr (a + b)) End If %> </form> </body> </html> Calc.asp

  24. ASP: Microfoft’s equivalent of JSP • Code on the server that dynamically generates HTML for the clients at runtime. • JSP: Java Server Page Java code on the server that generates HTML for the clients. HTML contents can be dynamically generated at runtime • ASP.NET: ASP based on the .NET framework, one of the most popular web programming techniques. Code on the server that dynamically generates HTML for the clients at runtime. APS.NET

  25. JSP / ASP.NET WEB S E R V E R WEB C L I E N T Application 1 Application 2 Application 3 JSP/ASP.NET HTTP

  26. World Wide Web • The World Wide Web is an information space where data and programs are shared over the Internet via HTTP protocol as Hyper Text.

  27. Programming the Internet The Internet as a Computer Every computer on the Internet is a “CPU” Transmitting the program/data over the Internet is the Key • Analogy of Internet Protocols: IP (Internet Protocol) => “Binary” (low-level Internet transmission protocol) HTTP (Hyper Text Transport Protocol) => “Intermediate Language”(high-level Internet transmission protocol) • HTML (Hyper Text Markup Language) • => High Level Language (for writing web-pages in) • Programming the Internet is to develop distributed web applications.

  28. Style of Web Programs • Client-Side: • Thin client • Only a browser is needed. • The browser renders a html page on the client computer. • HTML (static), DHTML (dynamic), HTML5 (dynamic and multi-medium). • Programming with embedded scripts: JavaScript, . Dynamic and computational. • Ajax (asynchronous JavaScript & XML): asynchronous. • Plugins: VRML (3D Web) • Java Applet: transmit the application to the client and run it there. Too much to transmit for large distribution lists.

  29. Computing over the Internet • Client-Side: • Thick client • Client program installed prior, no need to download at runtime. • Runs like any other program on the client, but can talk to the server when needed. • .NET Remoting, Windows Communication Foundation (WCF), • Java's Remote Method Invocation (RMI) • Common Object Request Broker Architecture (CORBA) • Smart phone apps.

  30. Computing over the Internet • Server-Side: • Web pages are generated by server side programs at runtime. Dynamic contents and heavy-duty computing. • Server Scripts • Perl, PHP, …. • Does not scale well. (each client needs a process to service) • Server VMs • .NET ASP (Active Server Page), JSP (Java Server Page), • All clients are served by a single process. The process will create a thread to serve each client.

  31. Computing over the Internet • Server-Side: • CMS (Content Management Systems): web contents are managed at server side on demand. • Dejango CMS, Joomla. • Server-Client Communication: • Important for Internet based computing. • HTTP channel (slower, works for both thin and thick clients). • TCP/IP channel (faster, works only for thick clients). • HTTP for this class. • TCP/IP programming for the data communication class.

  32. XML (eXtensible Markup Language) Allow user defined tags (types) • SOAP (Simple Object Access Protocol) Standards for defining objects for the Internet Based on XML A Data Format for the Internet • WSDL (Web Service Description Language) Standards for describing web services for the Internet Based on XML

  33. WS-based Distributed Computing Client 1 UDDI Registry 2 SOAP Client 2 UDDI Registry 1 SOAP Web Service 1 WSDL Interface 1 Web Service 2 WSDL Interface 2 WEB

More Related