The World Wide Web is revolutionizing the way we live our lives. It is a tool that most of us use multiple times everyday. It has become the first step for shopping, answering questions, getting directions, socializing, and even dating. Like many of the things we use daily (like your car or your television) the web is often taken for granted. People tend to overlook the time and effort that designers and developers put into shaping the digital world.
Before we can really begin to explore the web as a medium, it is important to understand the technology that powers it.
When you open up your favorite browser the first thing you usually do is type in a uniform resource locator (URL) in the address bar. When browsing the web, you’ve undoubtedly noticed that URLs often take the form: www.domain.com/folder/file.html. The structure of a URL is the exactly same as that of file paths on your personal computer, because URLs are exactly that; file paths. The only difference is that URLs point to files stored on servers while your personal files are stored on your machine. The only real difference is that web URLs are preceded by a funny string of characters: http://. HTTP stands for hypertext transfer protocol, and it specifies how your browser communicates to the server located at www.domain.com.
When your browser loads a webpage, it makes an HTTP request to the server. The server responds by sending a plain text document that contains, among other things, Hypertext Markup Language (HTML) tags. Your browser parses this document, interprets the tags, and displays the content. The content is organized graphically according to rules declared in a cascading style sheet (CSS) document. HTML and CSS are the integral parts of what is called the front-end, or client side. Another extremely important tool of front-end development is JavaScript. JavaScript is a scripting language (essentially a lightweight programming language) that allows HTML content to be manipulated on the client side (after the server has responded).
JavaScript is used to create animations, validate forms, and carry out innumerable other essential tasks. JavaScript interacts with HTML documents via the direct object model (DOM). The DOM essentially specifies a tree structure built from HTML tags. Each tag is referred to as a node, and each tag within that tag is a child node. JavaScript can traverse HTML documents based on this node structure and can interact with content and styles associated with each node.
Before the server even responds with the HTML/CSS/JavaScript document, the HTTP request can be processed by what is called a server-side language. My favorite example of a server side language is PHP, because its function is in its name; PHP is a recursive acronym that stands for PHP: Hypertext Preprocessor. As you can see, the hypertext (HTML) is processed before being sent to the client. PHP is just one example of a server-side language, but they all fulfill a relatively similar role. A server-side language can read variables in from the client and adjusts the output based on this input. One way in which variables are passed to the server is through the URL, which looks something like this:
www.doman.com/file.html?variableName=variableValue
Another crucial function of server-side languages is database communication. Databases store most of the information that is available on the web, and to access that information server-side languages must perform queries on said databases. Most queries are ‘asked’ in a language called Structured Query Language (SQL). The query result is returned to the server-side language and is then used to build HTML content.
Hopefully now you can begin to understand the basic model of a dynamic website. Consider this basic example:
- A client web browser makes an HTTP request on a server, passing with the request, a username and password.
- A server-side language reads in the variables and uses them to build an SQL query.
- The query is executed, and if the username and password are correct, information associated with that username is returned.
- The server-side language uses the query result to build the user’s profile in HTML.
- The HTML is returned to the client web browser, and is displayed according to CSS rules.
- JavaScript is used to manipulate content within the browser, maybe in the form of a dropdown menu or image slideshow.
Obviously, the web is far too complex to cover in one single blog post. There are seemingly infinite number of addition technologies and techniques (Flash, XML, AJAX, JSF, to name just a few) that combine to build the web. Hopefully this article serves as a jumping point, for those interested, to begin their journey to a deeper understanding of the World Wide Web.