Learning Website Design: Session 3 - How Browsers work

In our previous article we took a look at what is html and how hyper transfer protocol allowed us to see pages. In this article I am going to explain in a simple way how the browser finds and displays your pages.

The browser is a piece of software that sits in your computer and interprets html, css, javascript and some other technologies like images, videos and java applets.

THE URL

The first step in using a browser is that you type in a URL in the URL bar. The URL (Uniform Resource Locator) is the address that identifies a particular resource on the web. The address is a naming convention and it is composed of different parts:

• The first part is the protocol. Some protocols include https, ftp, etc.
• The host or hostname is merkados.com, where the .com is also known as the top level domain tld.
• The subdomain is whatever is before the host name, examples could be: intermarketing.merkados.com. Where intermarketing is the subdomain.
• The next part is the port. And the default port number for http transmission in web servers is 80. Other ports are possible; a web server can listen on port 8000, for example. You can avoid listing the port number when the default is expected, however if you are accessing another port you need to include it: intermarketing.merkados.com:8888
• The request path is /path. Path typically refers to a file or location on the web server, e.g. /directory/file.html. So for example: merkados.com/pathgoeshere/ would be a directory. and merkados.com/pathgoeshere.html would be a file.
• This URL can also have parameters. These parameters help determine the request for dynamic pages served with a database. Parameters start with a question mark (?) and are separated with an ampersand (&). So for example you would see: www.merkados.com/path?uid=23033. The uid would be the user id parameter and in this case is 23033.
• Finally the last part that you may encounter in a URL is an anchor. The anchors are set by the pound sign (#). For example: merkados.com/services#best_services. That means jump to a subsection inside of a page named services that is called best_services.

Now that you know what a URL is, it is time to understand how the browser shows a page.

The Request

The first thing that the browser does is that it creates a request. The request contains several parts that are important. First, the hostname. It strips the hostname so that it knows where to start looking. The request is going to also have a request method: GET or HEAD are the most common. It basically means if do you want to request the entire page or just to see if the page is available? The GET is going to “get” the page, the HEAD is going to return the headers of the page only. It also contains the protocol used for the request. The most used is HTTP 1.1.

It also sends certain information about the browser. For example the user-agent string that identifies the kind of browser being used. And several other options like: accept-language, accept type of document, encoding of the document expected, the character set, cache control and others. But for the most part that is the request.

This request headers are sent first to a DNS (domain name server) provider. The DNS allows the conversion of the hostname to an IP Address. So when you type somedomain.com the DNS tells the browser: “oh yeah, that domain with that tld is found in this IP address, go get it there.”

Then the browser says:”ah ok, thanks, I am going to go to IP address xxx.xxx.xxx.xxx to go get the page that I need.” And it serves the request to the server.

The Response

Ok… so the server gets the request and then it responds. First with Headers and then with the page. The response headers include good all stuff like the request headers including:

• The protocol in this case could be for example HTTP 1.1
• It includes the exact date of the response.
• Cache control instructions
• Content type, for example html page with Charset UTF-8.
• Encoding
• Size of the response (content length)
• Expiration if any
• Some other headers.
• The file itself. So for example the html page that was requested.
• The code of response.

The code of response is extremely important, because it instructs the browser in what it needs to do next. For example a 404 code means: I don’t have the page you requested. A code 200 means: here it is. A code 301 means: the page has moved permanently to xxx location, go get it there. And many other codes.

The important thing here is that the browser, once it gets a 200 code, it takes the response and it “reads” the page and interprets the language based on what it is. So if the response is a video then it tries to interpret the video, if it is html code then it renders the content. If it is an image, then it displays it and so forth.

When the user clicks on something that contains an <a> tag with a <href> attribute, it is going to create a new request. Then it will get a response from the server again and the cycle continues over and over again. That is how a web page works.

Browsers don’t read the same

Why do you think that different browsers display content differently? Well first they sometimes interpret the html language differently. Also sometimes, they just don’t understand the html because is not properly written. So for example you don’t understand somebody talking to you in an unknown language, but also, you don’t understand somebody that speaks English wrong.

So that is why website designers need to understand HTML because by not writing properly they make browsers interpret their information with problems.

Now that you know how the browsers work and how the internet shares information between computers, now you are ready for our next session.

Thanks again

Alex_ @ merkados
http://www.merkados.com

Posted in Design Tutorials |