HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
HTML Working
How HTML Works Behind the Scenes
When it comes to creating websites or web applications, you’ll often hear two key terms:
frontend and backend.
Frontend vs Backend — What’s the Difference?
- Frontend is everything that a user directly interacts with on a website — the design, layout, text, buttons, images, and forms. It’s what you see and click. This part is built using three main technologies:
- HTML — for structure
- CSS — for styling
- JavaScript—for interactivity
- Backend refers to the behind-the-scenes functionality of a website. This includes how data is stored, retrieved, processed, and sent back to the user. It works using server-side languages such as:
- Python
- PHP
- Ruby
- Java
Think of it like this: If a website were a restaurant, the frontend is the dining area (tables, chairs, menus), while the backend in the kitchen.
How Website Work Step-by-Step
When you open a website in a browser (like Chrome), a chain of events is triggered:
- User Requests a Website
You type a URL (like www.learnwitharshyan.com) in the address bar and hit Enter.
- Browser Sends a Request
Your browser sends a request to a remote web server, asking for the page you want.
- Server Responds with Files
The web server finds the website’s files – mostly written in HTML, along with CSS and sends them back to your browser.
- Browser Displays the Pages
Your browser reads the HTML file, interprets it, and renders it as visual web page you can interact with.
This entire process happens in milliseconds!
What is a Web Browser?
A web browser is a software application (e.g., Chrome, Firefox, Edge, Safari) that can read HTML code and convert it into readable, interactive webpage.
While developers write HTML using text editors (like VS Code, Subline, or Notepad++), user only see the rendered version – the final, styled, interactive web page.
What is Rendering?
Rendering is the process where the browser takes raw HTML, CSS, and JavaScript code and displays it as a structured, styled webpage.
- The browser parses the HTML: breaks it into small parts
- It builds a structure called the DOM (Document Object Model)
- Then it draws each element on your screen based on the instructions from the code
This visual representation is what we call the rendered page.
How a Basic Website Works
- User enter a URL in the browser.
- Browser sends a request to the Web Server.
- Server sends back the required HTML, CSS, and JavaScript files.
- Browser reads and displays those files on your screen.
How Browsers Actually Work
Web browser are powerful applications that go through multiple steps to show you a website:
- Parsing
- The browser receives the HTML files as a stream of bytes.
- It converts the bytes into characters, and them into tokens (basic code parts).
- These tokens are turned into nodes (individual elements).
- All nodes are structured into a DOM Tree – a model that represents the layout of the page.
- Rendering
- After the DOM tree is ready, the browser calculates styles and layout.
- It then paints the elements onto your screen in the correct order and style.
This is how a browser takes your raw HTML code and converts it into a clean, interactive website.
Don’t worry if all this sounds technical. As a beginner, your main focus should be to learn how to write HTML – how to use tags and build basic webpages. The technical inner workings of browsers can be learned as you grow.
In the next lesson, we’ll set up Visual Studio Code (VS Code) – a free and powerful code editor – so you can start writing your very first HTML documents and see them live in your browser!