1 / 30

ADV 354

ADV 354. The Client-Server Model Browsers Language Types The W3C and Html History Html Page Structure. Lesson 01 // Course Introduction. The Client-Server Model. Used for making spread sheets + basic word processing Information stored in HD of computer

deiter
Télécharger la présentation

ADV 354

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. ADV 354

  2. The Client-Server Model • Browsers • Language Types • The W3C and Html History • Html Page Structure Lesson 01 // Course Introduction

  3. The Client-Server Model

  4. Used for making spread sheets + basic word processing • Information stored in HD of computer • No connectivity to the outside world

  5. Then the World Wide Web was launched in 1991.

  6. www collection of computers geographically spread-out, connected to a server (s) via the internet. • www allowed users in different locations to view information on websites via web browsers.

  7. The Client-Server Model CLIENT Whoever is asking • Laptop • Ipad • Blackberry • Iphone • Etc SERVER Whoever is responding • Some computer or server somewhere

  8. CLIENT sends request for info SERVER responds to that request

  9. Web-based email Social-networking sites • web 2.0 site allows users to interact and collaborate with each other in social media dialogue as creators of user-generated content. Blogs, wikis, video sharing sites etc

  10. 2. Browsers

  11. Firefox Opera Safari Chrome Internet Explorer

  12. Note We can refer to a website like StatCounter to see the popularity of these different browsers, and how each is changing over time. http://gs.statcounter.com/#browser-US-monthly-201007-201107

  13. 2. Language Types

  14. Client Side Languages (Display data) • Html • CSS • JavaScript • jQuery • ActionScript • Flex • Flash • CSL’s are directly involved with final visual/display on the screen Server Side Languages (Produce data) • PHP • Ruby • Java • Perl • Etc • SSL’s typically interact with a database on the server

  15. CLIENT SERVER CSL • Html • CSS • JavaScript • jQuery • ActionScript • Flex • Flash SSL • PHP • Ruby • Java • Perl • Etc • Database • MySQL • PostgreSQL Display Data Access Storage

  16. Client Side Languages (Display data) • Html • CSS • JavaScript • jQuery • ActionScript • Flex • Flash • CSL’s are directly involved with final visual/display on the screen Server Side Languages (Produce data) • PHP • Ruby • Java • Perl • Etc • SSL’s typically interact with a database on the server STATIC: Content (Html) & presentation (CSS) created with these markup languages don’t animate. DYNAMIC: Provide interactivity, animation, create calculators, validate forms… in real time (without going back to the server).

  17. We’re on an airline reservation website and we inquire about available dates and prices from Detroit to San Diego for January 2014. • The server side languages: • do the heavy-duty functionality & computing • they provide the data of availabilities • The client side languages: • display the data given by the ssls in rows, columns, blues, reds etc. • hence csls do the easy part of the job, that’s why we refer to the client as the Thin Client. CLIENT sends request for info SERVER responds to that request Let’s give an example: Response Displayed

  18. https://www.youtube.com/watch?v=7_LPdttKXPc

  19. 4. The W3C and Html History

  20. World Wide Web Consortium http://www.w3.org/

  21. Html Hypertext Markup Language was announced in 1991 and updated over the years. Different versions were Html 2.0, 3.2, 4.0. Html 4.01 was the latest version that appeared in 1999. Html5 Is the fifth revision of Html and is still under development. Html Html 2.0 Html 3.2 Html 4.0 Html 4.01 Html 5 Xml Xhtml 1.0 Xhtml 1.1

  22. http://validator.w3.org/

  23. 5. Html Page Structure

  24. Basic Requirements of a Web Page A doctype An <html> tag A <head> tag A <title> tag A <body> tag These make up the basic skeleton of a web page. Below is how these requirements look like when they’re combined in a basic web page. <!DOCTYPE HTML> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8”> <link href="style.css" rel="stylesheet" type="text/css”> </head> <body> </body> </html>

  25. <!DOCTYPE HTML> Doctype (short for Document Type Declaration) is absolutely the first item on a web page. Its job is to specify which version of Html the browser should expect to see by associating the web page with a Document Type Definition (DTD). In turn, the browser uses this information to decide how it should render items on the screen. <!DOCTYPE HTML> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8”> <link href="style.css" rel="stylesheet" type="text/css”> </head> <body> </body> </html>

  26. <html> </html> The Html Element An Html document is built using elements, where elements are like bricks holding the web page together. The Html element is the outermost container of a web page. There are 2 major sections in the Html element: the head and the body. <!DOCTYPE HTML> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8”> <link href="style.css" rel="stylesheet" type="text/css”> </head> <body> </body> </html>

  27. <head> <title>Untitled Document</title> <meta http-equiv="Content-Type” content=“text/html; charset=utf-8”> </head> The Head Element Contains information about the page, but no information that will be displayed on the page itself. The Title Element Will tell the browser what to display in its title bar. The Meta Element Provides additional information about the page such as the content type and character set. <!DOCTYPE HTML> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8”> <link href="style.css" rel="stylesheet" type="text/css”> </head> <body> </body> </html>

  28. <body> </body> The Body Element Contains almost everything that you see on the screen, such as headings, paragraphs, images, navigations, footers etc. <!DOCTYPE HTML> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8”> <link href="style.css" rel="stylesheet" type="text/css”> </head> <body> </body> </html>

More Related