How Web Pages Work: Websites, Web Servers, and Domains Explained

·

updated Sep 3, 2019

·

You and me both surf on the Web every day. Or at least I do. I used the Web for the first time around 25 years ago. Yet, I didn’t know the technical details of how web pages work exactly until fairly recently. There’s a bunch of stuff happening under the surface that most of us aren’t aware of.

Since I think it’s cool to know how it all works, I’ll be taking you through the main components of what makes the Web work in this post. Whether you’re thinking about building your own website from scratch or just browsing through those of other people, this post is for you!

You’re using a web browser right now. So what’s really happening before this text and the beautiful aquatic image above appeared on your screen? To give a bit of an explanation, this post will answer the following questions:

  1. What is a website?
  2. What is a web server?
  3. What is a domain name?
  4. What is a web browser?

Basically, the Internet consists of computers all around the planet that connect to each other. All the web pages you visit are on the World Wide Web, or the Web.

Hence the Web uses the Internet as a platform to power itself. In other words, you access the Web via the Internet, even though the two are often used interchangeably.

Related: How Does the Internet Work?

1: What is a website?

Simply put, each website in the Web is a bunch of files and documents that sit nicely together in one pot.

All these resources can have different types, such as text, image, or video. The different files also link to each other with hyperlinks, making it easy to navigate from one page to the next.

We all visit websites because we’re curious what’s on the site, right? For us to see any content in the first place, hard-working web developers create the files and documents for the website. They (including myself and perhaps you too) use different programming languages for this.

The most common languages used to create websites are

Each of these front-end development tools affects how web pages work and look.

In short: HTML creates the content with text and media. CSS makes it all look beautiful and more user-friendly. Finally, JavaScript makes the content more interactive and dynamic.

Recommended: How to Choose Your First Programming Language

Ok so it’s cool to have a nice website to share with others. But how can you make your new web page available for everyone using the Internet? The files need to be stored on a server to be accessible.

2: What is a web server?

Now the web page files need to be stored somewhere.

One option would be to store all the files on your own computer. However, then you would have to run around the city with your computer to show everyone what a cool website you have.

While I’m writing this, Google performs 58,000 searches a second. Hence, you’d have to do quite a bit of running to share your website on your computer like Google does.

The other, more efficient and physically less exhausting solution is to find a web-hosting server.

A web hosting provider is like a landlord for your website. When you need space for your documents, a hosting provider can rent that space for you on their web server for a given period of time.

The web server not only stores and hosts the files. It also knows what to do whenever someone wants to visit the website. Hence, it makes your website accessible for everyone using the Web.

When a website is visited, the server makes sure that the correct files are retrieved from the storage space. After that, they are sent using the right transfer method to the website visitor to see. Hence, the surfer image on top of this site is stored on a server I rented some space at, and retrieved to be shown to you when you wish to visit this webpage.

For everyone to be able to find your website, it obviously needs a name, a domain name to be exact. Not sure what a domain name is? No worries, just keep reading!

3: What is a domain name?

A domain name defines the location of a website on the Internet.

When you wish to visit a website, the domain name tell where to look for the files needed to display the website you’re visiting. Think of it as a phone number in the phone book. However, a domain name doesn’t consist of numbers: a lovely example of a domain name is “www.mikkegoes.com“.

As with phone numbers, domain names need to be registered with the operator. For websites, the operator is a registrar. Once registered, the domain name ends up in the Domain Name System (DNS).

The DNS knows exactly where to look for a domain name you type into your web browser. It works its magic and translates the URL into an IP address.

The IP address in turn is more like a phone number for the website you want to visit – even more so than the domain name like I suggested before. It defines the location of the server that is hosting the website and its content.

Every IP address in the world consists of four numeric values, each separated with a dot. The four figures each vary between 0 and 255.

Thus, having the DNS saves us all from having to remember the IP addresses for our favorite websites.

4: What is a web browser?

Your web browser is the wonderful piece of software that allows you to see what a website contains.

A web browser is a piece of software capable of downloading the contents of a website and displaying them to the user. To you, that is!

Let’s suppose you want to visit a website. You know the web address for the site and are eager to type it into your web browser. That address could just be the domain name. It could also be a more specific address, perhaps for fetching just one image from the Web. Each resource has its own unique address, the Uniform Resource Locator (URL). The URL contains the domain name, too.

When you hit “Enter”, it’s time for the DNS to do its job and transform the URL into an IP address. The IP address locates the right web server for you, which then processes your request. It uses server-side programming languages to do all this and then sends the correct content and files back to your IP address.

Finally, your web browser renders the site’s content onto your display.

Great success!

Final thoughts: How web pages work

Considering everything affecting how web pages work, it’s quite a bit that goes on behind the scenes.

It’s good to know what happens in the background when you’re waiting for a page to load. This can make it easier for you to make good decisions about the structure and content of your web pages in the future.

Or perhaps you’re not even interested in launching a website. In that case it could simply help you understand how web pages work in general.

I am still often amazed at how quickly a website appears rendered on your screen when you type in the web address and hit “Enter”. To sum it all up, this is what happens exactly, all in the blink of an eye:

  1. The DNS changes the URL into an IP address first.
  2. Then the request finds its way to the correct web-hosting server.
  3. After that, the server software retrieves the correct files for the website from their storage.
  4. The server then sends the content back to your IP address.
  5. Finally, your web browser receives the content and displays it to you.

Pretty great, huh?

Here are a few related articles you might want to read:

If you enjoyed this post about how web pages work, drop me a line in the comments below!

P.S. If you feel like I’ve forgotten something important about how web pages work, please let me know!

Happy surfing!
– Mikke

Share this post with others:

About Mikke

Hi, I’m Mikke! I’m a blogger, freelance web developer, and online business nerd. Join me here on MikkeGoes.com to learn how to code for free, build a professional portfolio website, launch a tech side hustle, and make money coding. When I’m not blogging, you will find me sipping strong coffee and biking around town in Berlin. Learn how I taught myself tech skills and became a web dev entrepreneur here. And come say hi on Twitter!

Leave a reply:

0 0 votes
Article Rating
Subscribe
Notify of

2 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments
Hudayfi Ahmed
10 January 2017 12:23 am

I loved the content of this article, but I wish the text was a bit darker; I’t was kinda hard to read… thanks anyway.

Learn to code for free - 15 coding tips for beginners – Free ebook