The First Lesson of the course is;
The internet is a network of computers which spans the entire world.
The internet is a decentralized network – in other words, every computer connected to it is treated the same. There are no special internet servers which control the whole internet, but some servers have a special role which we will discuss in later lessons
The internet is a decentralized network – in other words, every computer connected to it is treated the same. There are no special internet servers which control the whole internet, but some servers have a special role which we will discuss in later lessons
Computers which have content that people want to access are often called ‘servers’ because they serve up that content to other computers.
In practice, the internet is made up of many (many!) computers all around the world connected together by dedicated infrastructure. It is impossible to know exactly how many computers there are on the internet, but it is estimated there were more than 100,000,000 servers online by 2013. Imagine huge rooms filled with computers, joined by cables that cover every country and go under every ocean – that is what the internet is like physically! It doesn’t matter to us where the computers are or how we are connected to them – once you’re connected to the internet you can talk to any of the other computers.
The internet isn’t owned or controlled by any one organization. Many large organizations have a huge amount of servers they make available on the internet – for example it is estimated that Facebook alone had over 200,000 of their own servers in 2013, and Google have over ten times that number.
When you navigate to a website, your browser makes a request to the server that hosts the website.
Depending on what is contained in that request the server sends back different content in the response.This request/response cycle is the basis of all websites
Depending on what is contained in that request the server sends back different content in the response.This request/response cycle is the basis of all websites
You can see this happen when you navigate to a page – your browser shows an icon indicating that it has sent a request and is waiting for a response.
For example, in Google Chrome:
You can see in these images that the spinning circle is the way the browser indicates it is waiting for a response from the server. In the second image you can see that it has received some data: in this case, the title of the website which begins “Welcome to Facebook…”. However, it hasn’t yet fully received the entire response so it continues to show the spinning circle.
(This is similar to how other browsers, such as Internet Explorer or Firefox operate.)
The responses change depending on what is happening as you browse. For example, when you first load a website the server will send the first page: often a login page.
When you enter your login details the browser sends another request. This request contains extra data: your username and password. Now the server knows you are logged in so it sends a different response – the response it gives to users that are logged in, for example their own profile page.
As you continue interacting with the website you send more requests to the server, and the server sends back more responses.
Next time you are browsing websites try and notice when your browser makes a request and recognise the responses coming back from the server.
Multiple Request/Responses
Most modern websites require many requests and responses to load a single page. This is because modern websites are very complex and there are a lot of parts that must come together to form each page. As we go through this course we will learn more about each of these parts, but for now just remember this: each time you load a page your browser makes many requests, and the server sends many responses.
What is in a Response
The response from the server can contain a large variety of data: image data, HTML, JavaScript, CSS, or many other data types.
Sometimes these are even combined: perhaps the server sends HTML, CSS and JavaScript all together in a single response.
Again, we will understand more about each of these types of data as we proceed through the course.
For now the most important thing to understand is that when you view a web page you are viewing a ‘conversation’ between your computer and the internet server. Your computer comes up with part of the conversation via requests and the server finishes the conversation with responses. Try and see this back-and-forth conversation happening as you browse the internet – it will help your understanding the rest of the lessons very much!
What is HTTP?
So far we have learned that when we navigate the internet, browsers make requests to a web server and the servers send back a response. Today we are going to learn how these requests and responses are transmitted.
This first part of a URL (URL stands for Universal Resource Locator) tells the browser how to communicate with the web server. This is almost always HTTP, so often the “http://” part of the address is left out. This is why you can just type “www.google.com” to get to the Google homepage: your browser assumes if you don’t say otherwise you want to use HTTP.
But what is HTTP?
HTTP stands for HyperText Transfer Protocol. This is an agreed standard which defines a way for computers to talk over the internet.
For our purposes we don’t need to understand the underlying details of exactly how the protocol defines computers can talk. We can think of it like a language that both our browser and the web server speak so they can understand each other when they makerequests/responses.
It is also important for us to understand that there are different types of request in HTTP. These are defined by having different verbs.
So our browser makes a request using a particular verb and the server respondsappropriately depending on the verb.
There are more than 20 HTTP verbs defined, but the most common are GET, POST, PUT, DELETE and HEAD. Of these, by far the most important are GET and POST.
When your browser navigates to a new webpage it sends a GET request to the URL you have typed. Sending a GET request asksW the server for some particular data that is located at the address you have supplied.
Here is a fake URL as an example: http://www.myfakeblog.com/category/this-is-my-post
When we type this into our browser, the browser makes a GET request to the webserver located at www.myfakeblog.com. The browser uses GET as a default in this case.
The server looks at the extra address information: /category/this-is-my-post and uses this to find the exact page that the browser is requesting.
This is a common pattern for a GET request.
POST requests usually mean the browser is sending data to the server, for example login details or other requests that require data from the browser to formulate the correct response. These POST requests are usually used for requests that change the state of the web page.
What is HTTPS?
HTTPS stands for HyperText Transfer Protocol Secure. This is an encrypted form of HTTP.
When we send a request it doesn’t go immediately to the server. Because the internet is a connected network of computers each request passes through many computers before arriving at the server, then the response comes back via the same route.
Since HTTP is unencrypted that means that all of the computers between your browser and the website can read all of the data you are sending back and forth!
You can use a utility called tracert to see how many computers are between your browser and the website you are accessing.
Try this experiment:
On windows, press your Windows key:
Then type “cmd” and press Enter. This brings up a command prompt, which looks similar to this:
Now type “tracert google.com” and press Enter. This shows you the number of computers (hops) between your computer and google.com. You can try this with other websites too by replacing the website name “google.com” with whatever web address you like.
You can see that many computers are between you and every website – because the internet is a connected network. Using HTTP each of those computers can read the traffic that passes through them.
To solve this problem an encrypted form of HTTP was developed, called HTTPS. This encrypts the data so only your browser and the web server can read it, using a technology called SSL (Secure Socket Layers). HTTPS is used for secure transactions such as financial information, private information, and login on most websites.
You should always look for the HTTPS symbol when using websites where security is important. On many browsers this appears as a padlock:
If we build a secure website we need to ensure it supports HTTPS for any private transactions.
If we build a secure website we need to ensure it supports HTTPS for any private transactions.
Web Server Responses
We have learned that web servers respond to our requests by sending back various types of data.
HTML
One of the most important types of data returned by web servers is called HTML.
HTML stands for HyperText Markup Language. We can think of HTML as the content of our webpage, plus some extra information which tells the browser about the content.
For example, it may tell the browser how the content is structured, or how to get from the current web page to another web page, or how the page should be displayed. In the next few lessons we’ll start learning how to write our own HTML. For now the important lesson is:
HTML is the content of our webpage formatted in a way that web browsers can understand
CSS
CSS is the next most important type of data returned by a HTTP Response.
CSS stands for Cascading Style Sheets. This is a special display language which tells the web browser how to present the content in the HTML. This is what makes websites look pretty (or ugly!).
Again, we will learn how to write our own CSS later in this course, but for now the important lesson is:
CSS tells web browsers how to display the HTML content
HTML without CSS
It is possible to have HTML without any CSS. Web browsers are perfectly happy to display just HTML, or even just plain text.
HTML also contains several ways to display text in different ways, e.g. font size, color, bold, italic, even very simple animations. However, in modern web development it is very bad practice to change your display using HTML.
This is because CSS has many advantages over HTML display:
1) CSS is much more powerful than HTML for styling
2) CSS can be re-used across many pages on your site
3) It is much easier to change your site if all the display logic is in one central place: your CSS files
It can be very very difficult to make changes to a site when some display logic is in HTML and some is in CSS, so it is considered good practice to keep your display logic purely in CSS, and keep HTML purely for content.
This is part of the software development practice known as separation of concerns – making sure that each part of your web site is responsible for only what it should be responsible for.
HTML: Content
CSS: Display
JavaScript
JavaScript is another important type of data returned by responses.
JavaScript is a coding language, unlike HTML and CSS which are markup languages. In other words, JavaScript is much more like a standard programming language.
JavaScript is the coding language that tells websites how to behave. It is responsible for the functionality of a modern website, including loading data in the background, changing CSS dynamically to provide animations, validating data and handling user interactions.
JavaScript code runs locally in your browser, not on the web server. The server sends the JavaScript code down as part of the response, and your browser then runs it on your computer. This allows your computer to understand how to interact with the website.
We will learn more about JavaScript later in the course too. For now, the important lesson is:
JavaScript is responsible for the behaviour of a web page
As we progress we will understand more how each of these types of response is generated, and how the browser knows how to request all of this data from the web server.
No comments:
Post a Comment