Frontend and backend are familiar terms in web development. The frontend pertains to the visible components of a website or application, such as tables, images, and buttons, which users interact with directly. It is constructed using languages like HTML, CSS, and JavaScript. Conversely, the backend manages the behind-the-scenes operations, including data storage and processing, that occur when users interact with the frontend. It utilizes languages such as Python, Ruby, and Java. Essentially, the frontend constitutes what users perceive, while the backend oversees functionality.
Functionality of Websites
When accessing information on the internet, we typically use a web browser to search for it. The web browser retrieves content from web servers, where it is stored in the form of HTML documents.
An HTML document is created by writing code with specific tags in a chosen code editor and then saving the document with a ‘.html’ extension. Subsequently, the browser interprets and renders the HTML document, displaying the web page accordingly.
A web browser is a software program designed to interpret HTML tags and render them in a visually understandable format for website visitors. Developers use HTML because it provides a straightforward method for instructing the web browser on how to display content. Next, I will guide you through setting up VS Code for writing your HTML code and previewing it in a web browser.
HTML Document Overview
An HTML document is a text file saved with either the ‘.html’ or ‘.htm’ extension, containing text and specific tags enclosed in ‘< >’. These tags offer instructions for configuring the web page layout and functionality. The tags adhere to standardized rules and are fixed. The structure of an HTML document will be explained further in this HTML tutorial.
Rendered Page Explanation
The rendered page is the output display of our HTML Document, which is the page visualized on the browser.
Basic Website Functionality
When a web browser (client) requests a website, such as https://akdeepknowledge.com, from the web server, the server responds by sending HTML, CSS, and JavaScript files. These files are then parsed by the web browser, which is responsible for presenting the website in an aesthetically pleasing manner.
Browser Functionality Overview
The web browser plays a crucial role in parsing and rendering HTML code for the client. It is a complex program that executes various tasks behind the scenes. Here’s an overview of its functioning:
- A browser is an application that reads HTML documents and displays them as web pages. Browsers cannot directly access content from storage; thus, servers mediate this process.
- Servers serve as intermediaries, listening to browser requests and delivering the HTML document to the browser.
- Web browsers undertake two primary tasks: parsing and rendering.
- During parsing, the browser converts raw bytes into characters, which are then transformed into tokens and organized into nodes. These nodes form a tree-like structure known as the DOM (Document Object Model).
- Once the DOM tree is constructed, the browser proceeds to the rendering stage, where each node is rendered and displayed on the screen.
Focus on learning HTML for now, without delving into the intricacies of browser functionality. In the next tutorial, we will install VS Code and relevant extensions to facilitate writing HTML code effectively.