Basics of the Web
How are websites are loaded?
Nowadays, We access tens, hundreds or maybe even thousands of web pages daily. Yet, most of us don't know how the process of browsing the internet works, how pages are served across the web and how users communicate with machines in order to like a picture on Facebook or a thread on Reddit or what ever they are doing.
Clients and servers
Clients are any user that is connected to the internet through any multimedia device using a web browser, this can be you on a computer using Chrome or someone else on their phone...etc.
Servers are machines that store all that has to do with the web pages that a client can request. Servers store all relevant files of a website, page or appication, files that contain the website's content and business logic.
Typically, a client would communicate with the server using an HTTP request(HyperText Transfer Protocol can be seen as the language that the two use to communicate), said request carries credentials that specify the client's needs, AKA HTTP headers (more on this later). The server responds back by sending files for the client's browser to interpret and display as a web page, usually in the form of a copy the HTML and CSS files that reside of the server. The former stands for HyperText Markup Language, it holds the layout and content of the page, and the latter stands for Cascading Style Sheets which contains styles for the different elements of the HTML page. Depending on the page, the server may as well send JavaScript files that contain scripts with code that alters the behaviour of the page on the client's browser.
Links
It would be extremely inconvenient if we had to type the precise URL (Uniform Resource Locator) of a page for us to access it. Enter links. Links offer a way of embedding URLs in text (hyperlinks) and buttons, making it super easy to jump from one page to another or as some label it "web surfing". For better user experience, links have distinct styles to regular text, they are represented in a different colour (usually blue) and when hovered they become underlined and the mouse cursor turns into a little hand indicating that this contains a clickable link.
Recently, links have been in a new better form, webpage URLs are now being embedded in pictures or icons, said pictures are usually visually indicative of what the links they hold contains. e.g. clicking a picture/icon of cog wheels will almost always take you to the settings page. Further measures are now used to convey the nature of any link, a popular one these days is the use of an arrow next to any link that will take the user to a different website to the one they are on currently, indicating that it's an external link.
Embedded links can also contain types of media and not just page addresses. through using an image's URL, that image can be shown on a different page than its original one while still being hosted one the same data server. e.g. if I wanted to show you an image from somewhere else on this page, I'll just add an "img" HTML element with the link to that image instead of uploading that image to my website's asset folder and loading it from there. links can also contain other types of media like videos (Youtube, Vimeo... etc), audio files (Spotify, Soundcloud... etc) and all sorts of things.
HTTP Requests
An HTTP requests is the message that a client sends to a server when requesting web pages or other types of data. The request contains the following:
- A Request line
- Headers (optional)
- An empty line (indicating the end of the headers field
- A request body (optional)
The request line starts with a method token indicating which method this request uses (mostly GET), a request-URI and the HTTP version (currently 1.1).
There are many request methods with different implications on the type of response from the server, mainly for fetching data GET (read) is used. However, for dynamic web pages, POST (write), PUT (update) and DELETE (self-explainatory) requests can be used to modify the database on the server. Some requests can be used to do other requests' job, AKA request spoofing, e.g. a POST request can be used to update existing records. There will be a future blog post fully dedicated for HTTP reuqests.
The request-URI (Uniform Request Identifier) identifies the resource within the site to which this request will be issued, sometimes labelled a "route". Along with "Host" the two form the URL of the document being retrieved/altered. e.g. host: "workers.com", URI: "/workers/5", "DELETE workers.com/workers/5 HTTP/1.1" will delete the worker with ID number 5.
Headers can be used when a request needs to specify more credentials. For example, the header field "Authorization" (which is actually for authentication) can be used to provide user's login credentials if authentication is needed for that particular request.
An example of full request would be something like this:
GET /blog HTTP/1.1
User-Agent: Mozilla/4.0
Host: www.ahmedhadjou.com
Content-type: text/html; charset=UTF-8
Connection: Keep-AliveThis request will serve back my blog page
Beyond static websites
While there is a lot of "static websites, like company websites that only show information and personal websites... etc. There is also dynamic websites where the user can interact and change the web page to their needs, this can be a forum or a blog, sites like Facebook which allow you to post things and edit personal settings and preferences which will then be used to generate a different looking page for you. All of this is done through what we call "Server-side scripting".
Said dynamic websites use "Data models" and "Business logic" through dynamic HTML pages to generate pages based on the content of the database. An exampe of this would be if you were to visit "ahmedhadjou.com/blog" the application on the server will use the relevant data model and pull all blog posts from the data base and append them on an an HTML file and send it across to the user's browser.
TL;DR
Clients who are me, you and all other users of the internet send HTTP requests that include what they wish to view to the server, the server then either generates a page or send a copy of an existing one (depending on the nature of the request and application) in the form of HTML, CSS and JS files back to the user to be loaded on their browser.