How the Web Works

Introduction

When Tim Berners-Lee created the first sparks of the World Wide Web in 1989, he knew it would be a helpful tool, but did he realise just what an affect it was to have on trade and commerce all over the world? Websites that are user-focused and information-centred have become indispensable for business.

Today, billions of people have access to the Web to learn, buy things and connect with each other. The Web has revolutionised the way businesses think about marketing and how they communicate with their customers. The Web’s advancement has been astonishingly rapid, transforming not only the face of business, but the whole world in less than 15 years. However, despite its amazing influence, many people do not understand just how the Web works.

How the Web Works

Web vs. Internet

There’s quite a big difference between the ‘Web’ and the ‘Internet’, but not everyone realises it. Before 1990, not many people had access to the internet, indeed many people did not understand what it was. Although the internet was created 30 years before the Web, the internet started to really take off after the Web was developed. That is one reason why many people use the words ‘Web’ and ‘Internet’ alternately all the while thinking the two terms refer to the same thing. But in reality, the Web and the Internet are two contrasting technologies with jobs of their own.

Simply put, the internet is the network which connects us all up. Without the internet, there is no way to send an email, read the news online, or search Google. Today, billions of devices all over the world are connected by the internet.

Animals-of-the-forest-Website-Graphics-Audio-and-Video

Today’s Web technology can render graphics, audio & videos, but it hasn’t always been that way. (Images Flickr)

The World Wide Web is a system of documents that can be accessed using the internet. A document on the Web can be linked to other documents using hyperlinks. In order to transfer data, the Web uses the Hypertext Transfer protocol (HTTP), which is just one of the languages used on the internet. As well as text, web documents can contain graphics, sound and videos.

The Web is just one branch of the Internet, though it is a very large one. Other branches of the internet include email, instant messaging, Voice over IP (VoIP), and File Transfer Protocol (FTP). This can be better illustrated by picturing the internet as a large tree. All the branches of the tree are connected at the trunk. Each branch is different, but they all have one thing in common: they are all tools to transfer and share information.

The-internet-tree-and-some-branches

The internet tree with some of its branches including VoIP, Email and the World Wide Web.

How the Web Works

So just what drives the web? When someone wants to visit a page on the Web some special technology and devices are needed to work together. With so many billions of webpages comprising the Web, a rock-solid system is needed to facilitate easy access to each page from anywhere in the world. Three important technologies that work together when a webpage is accessed are a browser, a web server and a domain name server (DNS).

Just as you need an email program to send and receive your emails, you also need a program to view the Web. A browser is a computer program which does all the hard work when someone visits a webpage. Web browsers, like Google Chrome and Firefox, are used to turn web code into what the user actually sees.

A web server is a computer which stores websites and sends them to a person’s browser when requested. Web servers can also receive data. A DNS is a computer which stores the domain names and IP addresses of websites.

The-5-biggest-browsers

The 5 most popular browsers: Google Chrome, Firefox, Internet Explorer, Opera and Safari.

Web browsers have some special functions; one of these special functions is the way they deal with URLs. A URL (Uniform Resource Locator) is an address for a webpage which consists of several parts. When you type a URL into your browser, the browser chops it up into its different parts. This is called parsing.

Have a look at this URL for example: http://samblaxland.com.au/about/

This is how the same URL looks in a browser:

URL-in-browser-Sam-Blaxland-Web-Design-website

The URL has three main parts:

protocol://server address/path [iii]

The Protocol (http) is a set of rules used by the browser and web server in order to communicate with each other.[iv] It is a lot like a language people use to communicate.[v] As an analogy, let’s say the server is talking in German. The browser needs to know to use German before it starts asking the server questions; otherwise confusion will occur. But web servers and browsers don’t use German to talk to each other; instead, most use the Hypertext Transfer Protocol (HTTP). [vi] That’s why we sometimes type ‘http’ at the beginning of a URL. But it doesn’t really matter if we forget to add the protocol, because our browsers can automatically add it.

The Server address (samblaxland.com.au) is like a street address for a website. Without it, the website’s server location could not be found.[vii] The server address can consist of an IP address or a domain name. This particular server address is a domain name. A domain name is a name for a website which is easy to remember.[viii] This domain name has two suffixes: .com means the website is commercial and .au means the website is Australian.

The Path (about/) is an address for a section/page of the website.

:// and / are for separating the URL into its different parts.

Inside-a-dell-web-server

Inside a Dell web server: Servers are much like personal computers, but they’re dedicated to storing and serving websites. They’re usually seen in large server stacks which work together to store, send and receive web data. (Image Wikipedia)

Websites are stored on computers called servers at many different locations around the world. Because there are billions of webpages, they could easily get lost if it wasn’t for the unique address each one has. Each website has its own unique address called an Internet Protocol (IP) address, which works a little bit like a street address. Even your computer has its own IP address. An IP address is a series of numbers that looks like this:

27.121.64.131

Unfortunately, IP addresses can consist of up to 32 numbers and they are difficult for most people to remember. Domain names were developed to be more memorable. Remember the domain name in the URL example before? Just to refresh your memory, here it is again:

samblaxland.com.au

URL in a browser window

A domain name in a browser window: All that is needed is the domain name (‘samblaxland.com.au’) and the browser does the rest of the work to display the website. Websites can be a colourful surprise sometimes.

A domain name is used to identify the IP address. Remember, a domain name server (DNS) stores the domain name and the IP address together. When someone wants to visit a website, all he needs is the domain name. The browser requests the IP address from the DNS. Because of this, most people browsing the Web never see the IP address. They see the more human-friendly domain name instead.

If you don’t understand all this yet, don’t worry. Let’s move on. A story can help illustrate how all this works.

Danny is a young farmer who lives in Australia. His tractor is getting old and he wants to buy a new one for his baling operation. While he was with his friend Marcus, he learnt about a powerful new tractor just released in the USA. Marcus also told him about the manufacturer’s website for more information about it and he wrote the website’s URL on the back of a business card. As soon as Danny was home, he decided to have a look. Here’s what happens when Danny goes to visit the webpage:

DNS and web server requests across the world map

  1. Danny, who lives in Australia, types the URL into his browser.
  2. His browser parses it (chopping it into different parts), finds the domain name and sends it to a DNS in New Zealand.
  3. The DNS finds the correct IP address and sends it to Danny’s browser.
  4. Using the IP address, the browser locates the website’s server location in North America and requests the webpage.
  5. The server sends the contents of the webpage to Danny.

Now Danny can enjoy viewing the webpage. But what did the server actually send him? First, it sent some code. Most websites use three types of code – HTML, CSS and JavaScript. HTML describes the structure and contents of the webpage. It is like the framework of a building. Without it, there is no building at all. CSS makes a webpage look nice. It defines the colours, layout and even simple movement. JavaScript gives a webpage extra functionality. It is a bit like the automatic doors on a building.

City cartoon

HTML, CSS & JavaScript are like different parts of a building. HTML is the structure, CSS the colours and design, and JavaScript is the functionality. (Credit)

Danny was impressed by the words he read (contained in the HTML) and the photo he saw, and the pleasing colours and design of the website appealed to him (CSS). When he clicked on the photo, a bigger photo hovered over the page (JavaScript). By now, Danny has learnt a lot about the tractor and is even considering buying one. All Danny had to do was type in the URL and hit enter, and in less than a second all these web technologies collaborated to provide Danny with exactly what he wanted to know.After processing the HTML code, Danny’s browser realised that it needed to download a photo, so it sent another request to the server which returned a beautiful photograph of a big, red tractor.

HTML,-CSS-&-JavaScript-examples

Some code and its result: HTML has created the structure with a body element and a heading and paragraph of text, CSS added styling, and the JavaScript has inserted four words into the paragraph element. (Image Flickr)

Note: JavaScript isn’t necessary to insert the words into the paragraph element, as it can be easily included in the HTML, but I’ve used this example to demonstrate JavaScript.

Lots of exciting technology make it possible for you to view the Web, but how did all this come about? It wasn’t just one person that developed the Web. Many people have contributed by developing technology that has made the Web possible. But it took one person to come up with the idea to create a huge information network, the World Wide Web, using technology that was already available.

Image credit: Bird photograph in the cover image by Steve Wilson/Flickr Creative Commons, ‘Victoria Crowned Pigeon’, Some Rights Reserved.