1_HTML_webpages by fanzhongqing

VIEWS: 3 PAGES: 26

									Web Pages
How the Web Works
 Three parts that enable a user to
 browse a web page:
     The web server that holds the information
     the client that is viewing the information
     the protocol that connects the two
Diagram
                                  web
                                  server



             HTTP
             Request




                       HTTP
                       Response
    client
(browser)
Web Server Software
 a program that serves the files that form web
 pages (i.e. HTTP-, sound-, graphics- and
 multimedia files) to web users;
 following the client / server model, the web
 server acts as the server and the web surfer’s
 web browser acts as the (remote) client,
 forwarding the surfer’s requests to the web
 server;
 every web site to be published on the internet
 must be hosted by an online web server
Web Server Software Market
  Market share
     Apache: 68.43%
     Microsoft: 20.86%
     Sun: 3.18%
     Source:
      http://news.netcraft.com/archives/web_ser
      ver_survey.html
Browsers and Their Market
Share
  According to WebSideStory:
     Microsoft Internet Explorer (88.9%)
     Mozilla Firefox: 4.78%
     Opera
  In reality, IE holds much smaller share
  and Firefox is getting very popular
Static WebPages
  Composed of pure HTML
  1.   Author writes an HTML file and uploads to web
       server;
  2.   User requests page by typing in URL or linking
       and the request is sent to web server;
  3.   Server locates HTML file;
  4.   Server sends back HTML file;
  5.   Browser processes HTML and displays page
Static Web Pages: 5 Steps

                   Web Server
1. Author writes                3. Web server finds
   HTML                            requested .html file


                                              4. HTML code sent
                                                 to browser


     2. Client requests
        web page                                 5. Browser processes
                                                    HTML and
                                                    displays web page

                                   Client
Static Webpage Example
  The Bevier Café menu:
  http://www.ag.uiuc.edu/~food-
  lab/bevier/menu.htm
The Need for Dynamic
Content
  Pure HTML is good only for static content
  display
  When a page is static:
     Everybody sees the same content
     It does not change unless the author changes the
      content manually
  Without a programmer changing the
  program, dynamic information can be
  retrieved
Dynamic WebPages
 Allows many people to access the same
 website, yet tailors the display to each
 individual need.
 Dynamic content can be achieved at the
 client side or the server side (or both)
     Client-side: processing is done in the web
      browser
     Server-side: processing is done on the server
      after the page is requested and before it is
      transferred to the browser
Client-Side Dynamic Content
Example
  The College web page:
  http://www.business.uiuc.edu/mxia/
  OnMouseOver
  Google Gmail
Client-Side: 6 Steps
1. A web author writes instructions for creating HTML,
     and uploads the file to a web server;
2.   User requests a page by typing in URL or linking
     and the request is sent to web server;
3.   Web server locates file with instructions to run at
     client;
4.   Web server sends HTML stream along with client-
     side script back to browser;
5.   Browser executes client-side scripts, turns them into
     HTML;
6.   Browser processes HTML and displays page
Client-Side: 6 Steps

                   Web Server
1. Author writes                3. Web server finds locates HTML
   instructions                    and instructions file
                                      4. HTML and instructions
                                         sent to browser
                                            5. Module in BROWSER
                                               processes instructions
                                               and turns them into
     2. Client requests                        HTML
        web page
                                                6. Browser processes
                                                   HTML and displays
                                   Client          page
Client-Side
  All users get same information from
  server
  Users see different information
  displayed due to different actions: (e.g.
  OnMouseOver)
  Feature of a page may be affected by
  the browser and plug-ins (JavaScript,
  Flash)
Server-Side Dynamic Content
Examples
  Online voting
     NBA All-Star Ballot
     http://chicagosports.chicagotribune.com/
  User registration
  Online shopping site
  Discussion board:
     slashdot.org
Server-Side: 6 Steps
1. A web author writes instructions for creating
     HTML, and uploads the file to a web server;
2.   User requests a page by typing in URL or
     linking and the request is sent to web
     server;
3.   Web server locates file with instructions;
4.   Web server follows the instructions in order
     to create stream of HTML;
5.   Web server send the newly created HTML
     stream back to the browser;
6.   Browser processes HTML and displays page
Server-Side: 6 Steps

                   Web Server
1. Author writes                3. Web server finds locates HTML
   instructions                    and instructions file
                                      4. WEB SERVER processes
                                         instructions to create
                                         HTML

                                            5. HTML stream sent to
     2. Client requests                        browser
        web page
                                                6. Browser processes
                                                   HTML and displays
                                                   page
                                   Client
Client-Side vs. Server-Side
 Client-Side Scripting              Server-Side Scripting
 Security                            Security
     Code exposed to viewers           Code hidden from users
  Load Balance                      Load Balance
   Reduces server processing           Only HTML is sent back
    load                                 to browser, speeds up
   Entire code must be                  download time
    downloaded to browser,              Too much traffic can
    slowing down processing              crash the web server
  Compatibility                     Compatibility
     Each browser interprets           Only HTML is sent to
      scripting code in different        browser, so content will
      ways, causing output to            look the same in all
      be inconsistent                    browsers
Scripting Technologies
  Client-Side        Server-Side
     JavaScript        Common Gateway
                         Interface (CGI)
     VBScript          Active Server Pages
     Java Applets       (ASP)
     Flash             Java Server Pages (JSP)
                        ColdFusion
                        Personal Home Pages
                         Hypertext Preprocessor
                         (PHP)
                        ASP.NET
Using Both Client and Server
Side
  Google Suggest
  (http://www.google.com/webhp?compl
  ete=1)
  Google Gmail
Exercise:
  Which has server-side processing and which
  has client-side?
     After user logs onto an online store, user’s own
      information can be seen by clicking on “user
      profile”
     Superbowl.com online MVP voting
     Mortgage Calculator #1:
        http://www.interest.com/calculators/monthly-
         payment.shtml
     Mortgage Calculator #2:
        http://www.interest.com/hugh/calc/msimple_js.html
URL
 URL stands for Uniform Resource Locator
 http://www.business.uiuc.edu/ba/dept/index.
 html
     http: protocol (e.g. ftp, mailto)
     www.cba.uiuc.edu: server address
     ba/dept/ : relative directory
     index.html: file name
 ftp://ftp.cdrom.com/pub/simtelnet/MIRRORS.
 TXT
Directory Structure
  Each server has a web directory
  A web directory structure may be
  physical or virtual
     Physical: the directory structure is the
      same as appeared in URL
     Virtual: the directory structure is not the
      same as appeared
Relative Path and Absolute
Path
  Relative path:
     Path relative to the page’s current directory
     E.g.: if the page’s current directory is ba under
      www.cba.uiuc.edu, then a link to events points to
      www.cba.uiuc.edu/ba/events
     Parent directory: ..
     Root directory: / (the web directory)
  Absolute path:
     E.g.: www.cba.uiuc.edu/ba/events
  The browser automatically translates relative
  path into absolute path
Case Sensitivity
  HTML: non-sensitive
  Directory and file names:
     Windows: case insensitive
     UNIX or Linux: case sensitive
  hostname?

								
To top