Web Pages vs. Web Apps

Static web pages (HTML/CSS) vs. Dynamic Pages (client/server side code)

Static Web Page vs. Dynamic Web App

This page explains the difference between:

The short version is that a static web page is simply a “file” on the server containing HTML code.

A web app, by contrast, is some custom code that:

This is sometimes called a dynamic web page, since it can change each time you look it.

Client Side vs. Server Side code

Dynamic web pages—ones that show pages that can be different each time you see them—can do computations in one of two places: the server side, or the client side.

Let’s try to understand how this works, and what the difference is.

First, let’s understand this point:

Most of the rest of this article will focus on server side code for dynamic web apps. We’ll deal with client side code for dynamic web apps in another article later one.

HTTP Requests

When you bring up a web page in a browser, your browser sends a message to a web server with a request for the URL that you put in the address bar, or the URL that was in the link that you clicked.

The server looks at the URL and then determines whether it is a request—from the server’s perspective—for static content, or dynamic content.

HTTP Requests for Static Content

It if is static content:

HTTP GET requests

The request to a web app may also be of several different types, with GET and POST being the most common types of requests.

These various types of requests are called “HTTP methods”.

That’s why many of the books, web sites, and other resources you read will only mention GET and POST, and emphasize when to use one vs. the other. We’ll do the same—do keep in mind though, that as your understanding of web applications progresses and you move into the topic of RESTful APIs, you’ll need to move beyond just GET and POST. (If you just can’t wait to learn more, here is an article on what is beyond GET and POST.)

A request for static content typically uses the GET method. We’ll discuss the POST method later in this article.

A note about this word “method”:

A simple static Web Page

A static web page is what you get when you make a .html file, and put it in your public_html directory on CSIL. As an example, you might:

    <!DOCTYPE html>
       <title>Sample web page</title>
       <title>Hello, World!</title>

What happens when you do a GET request for a static page

When you put the URL http://www.cs.ucsb.edu/~yourname/sample.html into your browser and hit enter, the browser sends an HTTP message to the server called a”GET” request, and the server responds with the contents of the requested file. It’s up to your browser to make sense of the HTML that is returned, and display it properly.

More specifically:

In summary, we have:

GET requests made to a web app

By contrast, a web app is some code that the web server runs in response to a GET request to calculate the response that will be sent back.

Perhaps the most familiar and commonly used “web app” is Google Search. Consider this URL:


GET parameters

Let’s break this URL https://www.google.com/search?q=pupplies down into its pieces:

In response the Google web server runs a computation that:

Where do GET parameters come from?

Typically, though, a user doesn’t interact with Google by typing in a query such as that one. It would be more typical to go to http://google.com, or a Google Search bar, or app on their phone, then type puppies into the search box and press return.

In the case of the Google.com home page at http://google.com, the HTML for that page is coded so that whatever you type into the search box produces a URL that has q=puppies in it. In general, any web page or app that interacts with a web app via GET requests will have code to

To review: What does a web app do?

A web app:

POST requests made to a web app

(Learn More: “Get vs. Post” http://blog.teamtreehouse.com/the-definitive-guide-to-get-vs-post )