Learning Website Design: Session 3 – How Browsers work

August 17th, 2011 admin Location: Raleigh, NC, Topic: Web Design | Digital Media

[private]In our previous article we took a look at what is HTML and how hypertext transfer protocol allowed us to see pages. In this chapter I am going to explain, in a simple way, how the browser finds and displays your html, xhtml or xml pages.

The browser is a piece of software that sits in your computer and interprets html, css, javascript, xml, xhtml and some other technologies like images, videos and java applets. To name a few well known browsers we have:

  • Microsoft Internet Explorer
  • Apple Safari
  • Mozilla Firefox
  • Opera
  • Google Chrome

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 second part is called the hostname. The host or hostname is for example merkados.com, where the .com is also known as the top level domain tld.
  • The subdomain is whatever is before the host name and sometimes is not present, examples could be: intermarketing.merkados.com. Where intermarketing is the subdomain, another common example is www.
  • 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 anything that is included after the first slash- for example /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. However, the server can rewrite this at any time during execution and therefore you can’t be sure if a URL path refers to a real file or just a script or folder.
  • 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. Again remember that this parameters in the URL can be rewritten by the server before responding, therefore you may not see them in the url bar even if they are at work behind the scenes.
  • 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 to help the server identify the user. 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. Be conscious that these parameters can be easily changed and therefore they shouldn’t be trusted as definite and truthful information. For example, sometimes a user-agent may present itself at GoogleBot, however it is a regular user that is “pretending” to be be Googlebot changing its request information.

Once you hit “Enter” on your keyboard, the browser request is analyzed by the browser. The 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 (with the /path) 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 old 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) – and also compression settings if available
  • 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 response means: I don’t have the page you requested. A code 200 means: here it is, I found the requested path. A code 301 means: the page has moved permanently to another location, go get it there. And many other codes.

The important thing to remember 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. Sometimes the codes don’t correspond to what it is supposed to be presented. For example, you may have a page that doesn’t exist, however your server responds with a 200 code (found) when in reality should be responding with a 400 code (not found).

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.

All 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 may not understand somebody talking to you in an unknown language, but also, you don’t understand somebody that speaks English wrong. In this example, if you were forced to act on the information that you understood you would have to guess what was said and present to the best of your abilities.

So that is why website designers need to understand HTML because by not writing properly they make browsers interpret their information with problems. Before we continue I just want to say something: “I am very happy that you are learning this information in a post -IE6 era. That was painful.”

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

Thanks again

Alex_ @ merkados
http://www.merkados.com
Free Preview for Merkados Website Platform[/private]

About the Author

Alex Centeno MBA., is an international creative director and digital media strategist. Currently residing minutes away from the Research Triangle Park (RTP) - North Carolina, and with over 10 years of interactive marketing training and experience, Alex leads Merkados' international clients to maximizing their online business strategies. One of Alex's biggest strengths is his world-class capacity to effectively combine interactive marketing, digital media design and web development.

You may find further information about Alex Centeno MBA. at: and Twitter.

Sobre el Autor

Alex Centeno MBA., Es un director creativo y estratega de medios digitales reconocido internacionalmente. En la actualidad reside a tan solo minutos del Research Triangle Park (RTP) - Carolina del Norte, y con más de 10 años de entrenamiento y experiencia en marketing interactivo, Alex lidera a los clientes internacionales de Merkados™ para maximizar sus estrategias de negocios en línea. Una de las mayores fortalezas de Alex es su capacidad global de combinar de manera efectiva, mercadeo interactivo, diseño de medios digitales y desarrollo web.

Para más información sobre Alex Centeno MBA. puede visitar: y Twitter.