Fundamentals of HTTP and Web Development

Web development is the backbone of the Internet. Understanding its core concepts is essential for anyone looking to build websites and applications. In this blog post, we will cover the fundamentals of web development, including the OSI model, HTTP, TCP, TLS, and key web technologies like HTML, CSS, and JavaScript.

Keep in mind that, given the scope of the subject, we need to keep it very succinct, but we’ll provide more materials to deepen your knowledge as we proceed.

The Roles in Web Development: Front-End, Back-End, Full-Stack, and DevOps

Before we can dive into the fundamentals themselves, we need to understand that, in the industry of web development, professionals often are divided into specific areas, each focusing on distinct aspects of building and maintaining websites and applications. Here’s an overview of the key roles:

Front-End Development

Front-end developers are responsible for the user interface (UI) and user experience (UX) of a website or application. They utilize technologies like HTML, CSS, and JavaScript to create interactive and visually appealing elements that users interact with directly. Their work ensures that the website is responsive, accessible, and provides a seamless experience across various devices and browsers.

Back-End Development

Back-end developers focus on the server-side components that users don’t see but are essential for the website’s functionality. They handle server logic, database interactions, user authentication, and server configuration. Technologies commonly used include server-side programming languages like Python, Java, Ruby, and PHP, as well as database management systems such as MySQL and MongoDB. Their work ensures the website operates smoothly, processes data correctly, and maintains security.

Full-Stack Development

Full-stack developers possess a comprehensive skill set that encompasses both front-end and back-end development. They are capable of handling all aspects of web development, from implementing the user interface to managing server-side operations and databases. This versatility allows them to oversee entire projects, making them valuable assets in development teams.

DevOps Development

DevOps (Development and Operations) professionals bridge the gap between software development and IT operations. They focus on automating and streamlining the processes of software development, testing, deployment, and infrastructure management. By implementing continuous integration and continuous delivery (CI/CD) practices, DevOps engineers aim to enhance collaboration, improve efficiency, and ensure the reliability and scalability of applications.

Each of these roles plays a crucial part in the development lifecycle, and professionals may specialize in one area or adopt a full-stack approach, depending on their skills and the project’s requirements. All the concepts we’ll talk about here are important to each and every one of those roles.

The OSI Model

The Open Systems Interconnection (OSI) model is a conceptual framework that standardizes the functions of a communication system into seven layers. These layers are:

Physical Layer – Handles raw bit transmission over physical mediums.
Data Link Layer – Manages data frames and error detection.
Network Layer – Handles routing of data packets.
Transport Layer – Ensures reliable transmission (TCP/UDP).
Session Layer – Manages sessions and connections.
Presentation Layer – Translates data formats (encryption, compression).
Application Layer – Interacts with end-user applications (HTTP, FTP).

The OSI Model is referred to as a "reference model" because it is not commonly applied in real-world scenarios. Rather, its primary use is in explaining network protocols and services. It is mainly employed to grasp the theoretical aspects of network communication principles and components.

HTTP

HTTP is a protocol for fetching resources such as HTML documents. It is the foundation of any data exchange on the Web and it is a client-server protocol, which means requests are initiated by the recipient, usually the Web browser. A complete document is typically constructed from resources such as text content, layout instructions, images, videos, scripts, and more.

HTTP Requests and Responses

Request: Sent by a client (e.g., a browser), including methods like GET, POST, PUT, DELETE.
Response: Sent by a server, containing status codes and requested data, after receiving and processing a Request.

Example HTTP Request (GET)

Each HTTP request consists of several key components:

An HTTP method, usually a verb like GET, POST, or a noun like OPTIONS or HEAD that defines the operation the client wants to perform. Typically, a client wants to fetch a resource (using GET) or post the value of an HTML form (using POST), though more operations may be needed in other cases.
The path of the resource to fetch; the URL of the resource stripped from elements that are obvious from the context, for example without the protocol (http://), the domain (here, developer.mozilla.org), or the TCP port (here, 80).
The version of the HTTP protocol.
Optional headers that convey additional information for the servers.
A body, for some methods like POST, similar to those in responses, which contain the resource sent.

Example HTTP Response

Each HTTP response consists of:

The version of the HTTP protocol they follow.
A status code, indicating if the request was successful or not, and why.
A status message, a non-authoritative short description of the status code.
HTTP headers, like those for requests.
Optionally, a body containing the fetched resource.

HTTP vs HTTPS

HTTP (HyperText Transfer Protocol): Uses TCP for communication but does not encrypt data. This makes it susceptible to eavesdropping and man-in-the-middle attacks.
HTTPS (HyperText Transfer Protocol Secure): Encrypts HTTP data using TLS (Transport Layer Security), ensuring data integrity, authentication, and confidentiality. HTTPS is crucial for secure transactions, protecting sensitive information like passwords and credit card details.
Benefits of HTTPS:
- Data Encryption: Prevents third parties from reading transmitted data.
- Authentication: Uses SSL/TLS certificates to verify website identity.
- Data Integrity: Prevents data tampering during transmission.

Side topic: REST (Representational State Transfer)

What is REST?

REST is an architectural style used for designing networked applications. It was introduced by Roy Fielding in his 2000 doctoral dissertation. RESTful systems rely on stateless communication and the principles of HTTP to manage resources.

Key Principles of REST:

Statelessness: Each request from a client to a server must contain all the information the server needs to fulfill that request. The server does not store any information about previous requests.
Client-Server Architecture: RESTful systems are built using a client-server model where clients and servers are separate entities that communicate over a network. The client is responsible for the user interface, while the server manages the resources.
Uniform Interface: A uniform interface simplifies the architecture by defining standard conventions for communication between client and server, often utilizing HTTP methods like GET, POST, PUT, DELETE.
Resource-Based: In REST, resources (such as data or services) are identified by URLs. Clients interact with resources by using standard HTTP methods.
Cacheability: Responses from the server can be explicitly marked as cacheable or non-cacheable. This improves performance by reducing the need for repeated requests to the server.
Layered System: REST allows for a layered system architecture where intermediary servers (like proxies or load balancers) can be used without the client needing to know about them.
Code on Demand (Optional): Servers can temporarily extend the functionality of a client by transferring executable code (like JavaScript).

HTTP Methods in REST

GET: Retrieve data from the server.
POST: Submit data to the server.
PUT or PATCH: Update data on the server.
DELETE: Remove data from the server.

Components of an HTTP System

Client

The client (typically a web browser) initiates HTTP requests and renders responses.

Server

The server processes HTTP requests and serves the requested resources.

Proxy

A proxy acts as an intermediary for requests, performing functions such as caching, filtering, load balancing, and authentication.

HTTP Request Flow

Client Request: A user enters a URL in the browser (e.g., https://example.com).
DNS Resolution: The browser contacts a DNS server to translate the domain name into an IP address.
TCP Connection: The browser establishes a TCP connection with the server.
Sending Request: The browser sends an HTTP request to the server.
Processing Request: The server processes the request and generates a response.
Sending Response: The server sends back an HTTP response.
Rendering: The browser interprets the response and displays the webpage.

Example: DNS Resolution and HTTP Request

HTTP Status Codes

HTTP responses include status codes that indicate the result of the request:

1xx (Informational):
- 100 Continue – Request received, continue sending.
- 101 Switching Protocols – Server switching protocols.
2xx (Success):
- 200 OK – Successful request.
- 201 Created – Resource created successfully.
3xx (Redirection):
- 301 Moved Permanently – Resource moved permanently.
- 302 Found – Temporary redirection.
4xx (Client Errors):
- 400 Bad Request – Malformed request syntax.
- 401 Unauthorized – Authentication required.
- 403 Forbidden – No permission to access resource.
- 404 Not Found – Requested resource unavailable.
5xx (Server Errors):
- 500 Internal Server Error – Generic server issue.
- 503 Service Unavailable – Server temporarily unavailable.

To have some fun: HTTP Cat

URI, URN, and URL

The terms URI, URN, and URL are often used interchangeably, but they have different meanings and functions in the context of the web.

URI (Uniform Resource Identifier)

A URI is a generic identifier for a resource, meaning that any resource accessible on the web can have a URI. It can be either a URL or a URN. Therefore, a URI is the broader term, encompassing both URLs and URNs.

Example of URI: urn:isbn:0451450523

This is an example of a URI that identifies a book by its ISBN number, without specifying where it is located.

URL (Uniform Resource Locator)

A URL is a specific type of URI that provides the location of a resource on the web. A URL includes the protocol (such as HTTP or HTTPS), the domain, and the path to the resource.

Example of URL: https://www.example.com/index.html

This URL specifies the location of an HTML file on the www.example.com server, using the HTTPS protocol.

URN (Uniform Resource Name)

A URN is another type of URI that uniquely identifies a resource, but without specifying its location. URNs are used to identify resources in a stable way over time, regardless of their location.

Example of URN: urn:ietf:rfc:2141

This URN refers to a document (an RFC, from the IETF), without providing information about where the document is located.

Key Differences

URI is the general term, encompassing both URLs and URNs.
URL provides the location of a resource, including the protocol and the path to the resource.
URN uniquely identifies a resource without indicating its location.

Web Technologies

HTML (HyperText Markup Language)

HTML is the standard language for structuring web pages. It consists of elements such as headings, paragraphs, lists, links, images, and forms.

Example HTML Document

<!DOCTYPE html>
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a sample HTML document.</p>
</body>
</html>

CSS (Cascading Style Sheets)

CSS controls the visual presentation of web pages and describes how HTML elements are to be displayed on screen, paper, or in other media. It can control the layout of multiple web pages all at once since they can be stored externally in CSS files.

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

JavaScript (JS)

JavaScript is a versatile programming language that adds interactivity and dynamic behavior to web pages.

History of JavaScript

JavaScript was created in 1995 by Brendan Eich at Netscape. Originally named "Mocha" and later "LiveScript," it was rebranded as JavaScript to align with Java’s popularity at the time. Despite the name, JavaScript is NOT directly related to Java.

Example JavaScript Code

document.getElementById("btn").addEventListener("click", function() {
    document.getElementById("message").textContent = "Button clicked!";
});

Conclusion

In conclusion, web development encompasses a broad spectrum of technologies and protocols that collectively enable the creation and maintenance of websites and applications. A solid understanding of these foundational elements is essential for anyone aiming to build modern, efficient, and secure digital experiences.

Key Takeaways:

OSI Model: This seven-layer framework standardizes the functions of a communication system, providing a structured approach to understanding network interactions.
HTTP and HTTPS: HTTP is the protocol governing data communication on the web, while HTTPS enhances security by encrypting data, ensuring confidentiality and integrity.
TCP and TLS: TCP ensures reliable data transmission, and TLS (formerly SSL) secures these transmissions, protecting data from unauthorized access.
Web Technologies: HTML structures web content, CSS styles it, and JavaScript adds interactivity, collectively forming the backbone of web development.
HTTP Request Flow: The process begins with a client request, followed by DNS resolution, TCP connection, HTTP request and response, and ends with the browser rendering the webpage.
HTTP Status Codes: These codes indicate the outcome of HTTP requests, ranging from informational responses to successful requests, redirections, client errors, and server errors.
URI, URN, and URL: These terms define different types of identifiers for resources on the web, each serving a unique purpose in resource identification and location.

By mastering these concepts, you lay the groundwork for developing robust and secure web applications. Continuous learning and staying updated with emerging technologies are crucial in the ever-evolving field of web development.

Previously in the TMGCC: Docker and Containerization

This post is part of our ‘The Miners’ Guide to Code Crafting’ series, designed to help aspiring developers learn and grow. Stay tuned for more and continue your coding journey with us!! Check out the full summary here!

We want to work with you. Check out our "What We Do" section!