What happens when you enter www.google.com to the browser? Of course, the search engine Google appears. But what does really happen behind the scenes? Where does the entered address go? What happens there? And what exactly comes back? The following articles tries to bring light into the darkness and explain terms like DNS, Web Server, HTTP, HTML, CSS and JavaScript. However, the contemplation stays on the surface. But as soon as the processes are roughly known it's easy to grapple with a subject of choice deeply on Wikipedia.
IP addresses and routing
So we typed www.google.com and pressed ENTER. How does the browser know to whom he should turn? Logically to Google, but where can Google be found in the internet? Therefore a domain name server is asked first whose job is to translate a domain name (google.com) to an internet protocol address (IP address). In our case www.google.com to 173.194.70.99. This system is called domain name system or DNS.
All communication in the internet is controlled via IP addresses. The transfer of information from one point in the internet to another is managed by the so-called routers. A data stream like our request for the homepage of Google meets a router, shows it the desired destination address and the router shows it the way it has to take. Routers can be imagined as the traffic policemen of the internet.
The Web Server
When reached the destination a web server manages the answer of the request. On one hand web server is a term for the computer that receives the request, on the other hand also for the software that runs on the computer. This distinction, however isn't important for the current contemplation.
To carry on with our example one of the many servers of Google (after all there are a lot more people that want to know something from Google other than us) receives our request and tries to answer it. Therefore it takes a closer look on the part behind the domain name because this states what exactly is the demand of the server. In our simple example the request consists only of the domain name without an addition and thus the server knows that he has to deliver the homepage. Another example would be the request www.google.com/about/, that would result in an answer with the content of the About Us site of Google.
HTTP
A point we excluded from our previous contemplation is the question what is transferred between web browser and web server. In the network technology this system is usually displayed with a layer model that abstracts the actual electric signals more and more from the bottom to the top layer until it turns into a simple to manage protocol that is, in the case of the world wide web, even readably by humans. This protocol is called HTTP (Hyper Text Transfer Protocol). HTTP is intentionally held very simple and consists only of a small number of so-called verbs with which one can request or send data. To stay with our example of requesting the homepage of Google a simple
GET /
is enough and the web server of Google knows what he has to deliver.
HTML
A possibly not obvious distinction is the one between the transmission protocol HTTP and the contents that cannot be transmitted by HTTP. At this point we finally get to the topic HTML (Hyper Text Markup Language). While HTTP defines how data between browser and server is transmitted, HTML (and it's relatives CSS and JaveScript) defines how a website looks and how it behaves.
HTML is a so-called markup language that bases on the ISO standard of the Standard Generalized Markup Languages (SGML). The used syntax is XML. XML is a simple, text-based format where content is structured in nested tags. A simple HTML document in XML looks for example like this:
<html>
<head>
<title>I am a title</title>
</head>
<body>
<p>I am a HTML document</p>
</body>
</html>
Everything in pointy brackets are the tags that help to separate structure and content in a document. The example document is a HTML document (<html>), that has a header (<head>) with the title (<title>) "I am a title", as well as a body text (<body>) with the paragraph (<p>) "I am a HTML document".
A further significant influence on HTML (that can also be found in the name) are so-called hypertext systems that connect information via hyperlinks. For example to link to a homepage the following syntax is necessary:
<p><a I>href="I>http://www.web-crossing.com/">I am a link to a homepage</a></p>
Beneath the already known tags a tag-attribute (href) is used here which helps to attach additional information to a tag. In this case the homepage that should be linked.
CSS
Since it's now clear how a HTML documents gets structure and content the question arises how everything can be designed optically pleasing and filled with life.
The separation of structure and design is reasonable because it gives the option to design contents in different ways (for example for different devices). For this reason Cascading Style Sheets (CSS) were developed as a addition to HTML. With CSS it is possible to define a look for certain parts of a HTML document without having to change the HTML document itself. A little example shows how easy it is:
p { color: Red; font-size: 20px; }
This way all paragraphs (<p> tags in HTML) are displayed in the color red and the font size 20px.
The term "Cascading" in the short form stands for the characteristic of CSS to pass on settings. If a superior element (for example the <body>) has a certain font type then the setting is passed on all elements that are contained in <body>:
body { color: Blue; }
This way all texts in the HTML document are displayed in blue. The combination of this and the last example is where it gets interesting. With CSS formatting instructions can be overwritten selectively to disable passed on settings. In our case all texts that are NOT contained in a paragraph would be displayed in blue (because the formatting for <p> overwrites the one for <body>).
JavaScript
Let's come to the last point, the interaction. HTML is a so-called declarative language. Those languages are suitable to display facts ("element <p> is contained in <body>") but not to describe procedures ("If the user clicks here then in this field text should appear"). The programming language JavaScript provides remedy here. It was developed by the company Netscape in 1995 and was included for the first time in their browser Netscape Navigator. JavaScript has nothing to do with the programming language Java. That is just a unfortunate name similarity that has always provided a lot of confusion.
JavaScript as a language is held purposely simple because originally it wasn't meant to have a lot of user interaction on websites. Rather static contents were displayed and possible user interactions were sent to the server for further processing. The internet has changed over the past years and also the language JavaScript has retained by developing new versions of the connected language standard ECMAScript. The current version is 5.0.
Since especially this field of website programming is particularly complicated there is only a short example for an interaction with JavaScript with a Website specified here. We add a button to our example site that gives us a notification on the screen when clicked:
<html>
<head>
<title>I am a title</title>
</head>
<body>
<p>I am a HTML document</p>
<p><button onclick="alert('Hello JavaScript!')">Click me!</button>
</body>
</html>
Here is a HTML attribute used again to connect a HTML element with further data. The attribute "onclick" of the element <button> allows to deposit a JavaScript command that is activated in case of someone clicking the button. "alert" on the other hand is a command from the JavaScript vocabulary that opens a notification window on the screen with the text in brackets.
With this we reached the end of our stroll through the world of the WWW. Here are the according Wikipedia articles about the key technologies for the interested reader.