🚀 Why am I writing this article?
Hello everyone! I am writing this article to help beginners understand HTML and how websites work behind the scenes. I know there are many articles on this topic, but I want to explain it in a simple way that anyone can understand.
🛠 Use Cases & Importance
- If you are new to web development, this article will give you a strong foundation.
- If you use websites daily but don’t know how they work, this will help you understand the process.
- If you are planning to learn frontend or backend development, knowing how a website loads is essential.
⚠ Note: English is not my strong skill, so I apologize if there are any mistakes. But I hope you still find this article useful! 😊
📌 What is HTML?
HTML (HyperText Markup Language) is the basic language that structures web pages. It provides a set of rules that tell browsers how to display content.
✅ Breaking Down "HTML"
- HyperText → Text that contains links to other content.
- Markup → Uses tags to format and structure a webpage.
- Language → A set of rules that browsers follow to render web pages.
🔹 Example of an HTML Element
HTML works with tags enclosed in < >. Most elements have an opening tag, content, and a closing tag.
<p>This is a paragraph.</p>
✔ <p> is the opening tag.✔ </p> is the closing tag.✔ The content inside the tags appears on the webpage.
🏗 Basic HTML Boilerplate
To create a basic webpage, you need an HTML boilerplate. This is the minimum structure required for a webpage to work properly.
✨ Basic HTML Structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is a basic HTML page.</p>
</body>
</html>
📌 Explanation:
-
<!DOCTYPE html>→ Declares this is an HTML5 document. -
<html lang="en">→ The root element, defining the language as English. -
<head>→ Contains metadata (not visible on the webpage). -
<meta charset="UTF-8">→ Supports special characters likeé, ö, ü. -
<meta name="viewport" content="width=device-width, initial-scale=1.0">→ Makes the page responsive on mobile. -
<title>→ Sets the page title (seen on the browser tab). -
<body>→ Contains everything that is visible on the webpage.
🚀 How Websites Work? (Behind the Scenes)
A website is more than just HTML! Multiple technologies work together when you visit a website. Let’s break it down step by step.
🟢 1️⃣ User Request (Client-Side Interaction)
When you type a URL (www.example.com) in a browser and press Enter, your browser sends a request to fetch the webpage.
📌 Key Terms:
- Client → The browser or device making the request (e.g., Chrome, Firefox).
- Request → Asking a server to load a webpage.
🔄 2️⃣ DNS & Web Hosting (Finding the Website’s Server)
The internet doesn’t recognize domain names (like www.example.com). Instead, it uses IP addresses (e.g., 192.168.1.1).
✅ Steps:
- DNS Lookup: Translates domain names into IP addresses.
- Server Connection: The browser finds and connects to the website’s server.
📌 Key Terms:
- DNS (Domain Name System) → Works like a phonebook for websites.
- Web Hosting → The storage space where website files are kept (e.g., AWS, GoDaddy).
⚙️ 3️⃣ Backend Processing (Server-Side Work)
Once the request reaches the server, the backend processes it and sends a response.
✅ Steps:
- The server receives the request.
- If needed, it fetches data from a database (e.g., user profile, posts).
- The server prepares the HTML, CSS, and JavaScript files and sends them back to the browser.
📌 Key Terms:
- Backend → The logic and database operations behind a website.
- Database → Stores user accounts, posts, comments (e.g., MySQL, MongoDB).
🎨 4️⃣ Browser Rendering (Displaying the Webpage)
When the browser receives HTML, CSS, and JavaScript, it renders the webpage
✅ Steps:
- HTML structures the content.
- CSS makes the page look good (colors, fonts, layouts).
- JavaScript adds interactivity (buttons, animations, forms).
📌 Example: When you visit YouTube,
- HTML structures the page.
- CSS makes it visually appealing.
- JavaScript enables video playback and comments.
🔄 5️⃣ APIs & Databases (Fetching Real-Time Data)
Some websites don’t just show static content. They fetch real-time data using APIs or databases.
✅ Steps:
- The website requests data (e.g., latest posts, user messages).
- The database retrieves the requested data.
- The backend processes it and sends it to the browser.
📌 Example:
- When you refresh your Instagram feed, it fetches new posts from a database.
- When you search on Google, it calls an API to get results.
📌 Key Terms:
- API (Application Programming Interface) → A service that allows websites to communicate (e.g., weather API, payment API).
🔍 Final Summary: How a Website Works (Step-by-Step)
- 1 User Request: The browser sends a request when you type a URL.
- 2 DNS & Hosting: The DNS finds the correct server for the website.
- 3 Backend Processing: The server processes the request and fetches data.
- 4 Rendering: The browser displays HTML, CSS, and JavaScript.
- 5 Database & APIs: Websites fetch live data from databases or APIs.
🔁 Full Process Overview :
User Request → Browser Sends Request → DNS Resolves Domain →
Server Receives Request → Backend Processes Data → Fetches from Database/APIs →
Server Sends Response → Browser Renders Page → Website is Displayed 🎉
🎯 Conclusion
This is the basic process behind every website you visit! 🚀
✅ I hope this article helps beginners understand how websites work.
✅ If you find this helpful, feel free to share and leave feedback!
⚠ Again, I apologize if there are any English mistakes. I am still learning, but I wanted to share knowledge in a simple way. Thank you for reading! 😊
Top comments (0)