Explaining Webpages

When I started programming I found that the logic of simple programming came easily. The logic behind loops and their ilk was clear. What caused me much greater difficulty was conceptually putting all the pieces of the computer and internet puzzle together. I often found that example code was not helpful but chatting with someone in the know was. At this point I have to thank my college from last year as he put up with the lions share of questioning. What I needed was concise information on the standards that are used. This post is much of the useful information I have discovered. It is ordered roughly as I came to understand them myself. I hope this can speed up readers understanding of the puzzles I struggled with.

To start at the vey beginning what is the internet and what is the web and are they the same thing? The answer is they are not, the internet is the network of computers all across the globe that are connected together. The web is short for the world wide web and is all of the pages you can see on the internet. Therefore the internet can happily exist with out the web, but the web has to live on the internet.

To illustrate the difference are two example applications that use the internet but not the web. Firstly sending email is not done using webpages, for people familiar with outlook your emails are separate from any webpage. To add confusion you can now read your emails on webpages. Googlemail is an example of this. Secondly apps with live data, such as one showing bus departure times. The live data has to be requested from a source and this is done over the internet but not using a web page.

The world wide web is the linked collection of webpages available on the internet. To understand the web it is now necessary to understand a webpage. A webpage is hypertext file(html) and a universal resource locator(url). A hypertext file is nothing more special than any other type of file. It contains rules that are useful to it use. in the same way that a word file has rules that make it good to store documents and a jpeg file rules to store images. The rules for reading a hypertext file are ones that make it good to save text with link.

a url is the address for a webpage within the web.

To view webpages you need a browser. The browser is a program that fulfils two key functions. First it asks the internet it is connected to send it pages from the web that it requests. Secondly it builds the webpage as you see it from the data in the hypertext file that is returned.

The web browser you use is likely to be one of this list

  1. Internet Explorer
  2. Mozilla Firefox
  3. Opera
  4. Chrome
  5. Safari

When you type a webpage address into the bar of your browser then it sends out request to be sent the hypertext file (web page) at that  url(address). It does this using a standard method across which is know as hypertext transfer protocol(http). It does exactly what it says on the tin this is the protocol (method) to transfer hypertext files. In this instance from it address to your browser.

Note: other types of file may be transferred using http such as images.

At this point we can understand what information is in the top bar of your browser.


http://www.crowdhailer.tumblr.com/

This is instruction to the browser to use the http instruction set to fetch from the world wide web the page located at peterhsaxton.tumblr.com


How the internet finds and returns a given page is not in the remit of this blog mostly as it is only something I have very recently worked out and you can gain much understanding before addressing these details.

The returned file will be an hypertext markup language (html) file. Hypertext denoting that the file contains links and a markup language is a system on annotating a document which is distinguishable from the text of the document. Simple html has tags to denote sections of text as paragraphs, titles or lists as well as well as the inclusion of elements such as horizontal lines and images

An html file does not contain images it actually contains links to images of the web wich the browser has to fetch and add to the page. It is in this way that the browser is responsible for building webpages that you see. There are good reasons for this separation

Reused images can be downloaded only once

A small HTML file contains all the “content” needed to understand the page.

The html page can also contain links to two other interesting types of file. A CSS file and a JavaScript (JS) file. The CSS file contains styling information about how to display the content in the HTML file. The JS file contains instructions on how a webpage should behave. 

In conclusion HTML/CSS/JS are the ingredients of a full webpage. They are delivered over the wires of the internet to be build on your computer by your browser.