Using the internet is already second nature to us. Whether it’s asking Google questions or scrolling through social media, we pick up our gadgets and surf the web without much thought.
The internet has over 4.66 billion active users, the majority of which use it for instant messaging, email, and social networks. eCommerce is also very popular, with more than 2 billion people participating in online shopping.
As web developers, it’s important to know the internal workings of the world wide web — or at the very least, its fundamentals. Understanding how user requests are delivered helps create robust websites with clean code, especially if you’re a back-end web developer.
Defining Web Jargon
The process is technical and complicated. Depending on the command sent, there are many different combinations of events that must take place for everything to work smoothly.
But before diving in, we need to define a few terms:
Client – the application that is connected to the internet and sends user requests to servers. It translates user interactions into a language that the receiving end understands and processes. Although it technically refers to only the web browser or application, it’s acceptable to think of the entire computer or mobile device as the client.
Server – the machine that accepts and executes requests before sending them back to the frontend of a website or web application. The server, like the client, has a unique IP address. Different types of servers include web servers, application servers, database servers, etc.
IP address – Internet Protocol Address. A unique set of numbers used to identify computers, servers, and routers. Converted to a physical address by the TCP/IP protocol software.
TCP/IP – Transmission Control Protocol/Internet Protocol. Both products work together to secure data exchange over the internet. TCIP involves establishing a stable connection between the client and server, while IP is the standard method by which data is sent.
ISP – Internet Service Provider. Connects clients to servers and vice versa. It does so by pulling up the IP address of the website you’re visiting.
DNS – Domain Name System. A database that sorts and stores domain names and their corresponding IP addresses. Best described as the “phonebook of the internet.”
URL – Uniform Resource Locators. Also known as the web address. A complete URL contains the website protocol (HTTP or HTTPS), domain name, and path (if applicable).
Domain Name – the part of the URL containing the website’s name and TLD. Typically the only segment of the URL that’s entered by users to get to the homepage of a website.
TLD – Top-Level Domain. The part of the URL that reveals either the geographical location, purpose, or owner of the website. The most common TLDs include .com, .org, .net, .edu, and .gov.
Path – the specific file a user wants to access on a website. It is not always visible in a URL.
HTTP – Hyper-text Transfer Protocol. Enables users to interact with web page elements using hypertext messages. It determines how requests are structured on the client-side and how servers respond to them.
HTTPS – Hypertext Transfer Protocol Secure. The version of HTTP that uses an encryption protocol to prevent data interception and theft. Commonly used for banking websites.
How it All Works
Now that you’ve learned the jargon, let’s move on to explaining how the web works.
It all starts when a user enters a URL in their browser. Usually, people only input the website’s domain name (e.g., “devwerkz.com”).
Sometimes, the browser displays the complete URL to include the protocol and path. If nothing comes after the TLD, the browser displays the main page of the website.
Behind the scenes, the DNS matches the domain name to its IP address before requesting data from the server.
Data is sent via the appropriate protocol (HTTP or HTTPS), which is parsed by the browser before displaying the web page. In other words, the client scans and analyzes the HTML file to determine what content should be loaded.
Take note that the browser parses all assets and sends additional requests to the server as needed. After analyzing the data packets, the browser builds a DOM (Document Object Model) tree to map how it would display the different objects embedded in the code.
HTML is loaded alongside CSS (cascading style sheets) and JavaScript to make web pages more visually appealing and dynamic.
Servers may send pre-generated HTML pages, but they can also be programmed to respond to specific requests and cues. For example, if a user clicks on an ad, the server can display a personalized landing page to enhance user experience.
In summary, the general flow is as follows:
- User types a URL
- The browser communicates with the IPS
- The DNS server translates the domain name to its IP address
- The IP address is sent to the browser
- A connection is established between the browser and web server
- The browser sends a request to the server
- Data packets are sent from the server to the client
- The browser parses the response
- Assets are loaded
- The website is displayed
Web Pages, Websites, and Search Engines
To wrap things up, we’re going to differentiate web pages from websites, as well as discuss search engines.
A web page, as the name suggests, is a single document with scripts, media, and style information. There are two types of web pages: static and dynamic web pages.
Static pages are written exclusively using HTML because it displays the same content for every visitor. On the other hand, dynamic web pages make use of multiple programming languages and databases to allow user interactions and customization.
Websites are a collection of interconnected web pages. Static and dynamic websites follow the same definitions as the ones above.
Obviously, static websites are much easier and faster to build, although they’re harder to scale. They’re suited for websites that only need a few web pages and are purely informational.
Meanwhile, dynamic websites offer more flexibility. In the long run, they’re easier to maintain and optimize for web page rankings. Search engines usually favor dynamic websites because they give better user experiences and have more content for indexing.
A search engine, like Google, Bing, and DuckDuckGo, are websites specifically coded to organize and find web pages based on searches. For website owners, it’s a crucial part of the web that makes or breaks online success.
To rank well on Google’s search results page, your website must be mobile-friendly, fast, well-structured, and secure.
Build a World-Class Website with DevWerkz
Nothing beats the professional touch of seasoned web developers and designers. Get in touch with us for robust and beautiful websites that convert. Contact DevWerkz today.