π 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)