DEV Community

Cover image for How do Websites Work?
Josh
Josh

Posted on

17 4

How do Websites Work?

Last week I went over the basics of the hardware and protocols that allow the internet to function. In this second part of the series I am going to deep dive into the steps that go into displaying a website so that we can better understand the protocols in place. The steps are:

  1. DNS Query
  2. TCP Handshake
  3. TLS Handshake
  4. HTTP Request
  5. HTTP Response

A DNS query is your computers way of taking a domain name and finding the correct IP address of the site you are trying to visit. A request is sent to a DNS resolver chosen by the user which then queries the IP address from its DNS servers and returns it to the client that sent the request. The default DNS resolver is usually your internet service provider. The URL is broken up into different servers such as a Top Level Domain (TLD) server which would contain directories for each .com extension. This example is known as a recursive DNS query whereas a non-recursive query follows the same procedure but the DNS client (user’s computer) will take on the responsibilities of the resolver and directly ask the servers itself.

DNS Query Diagram

A TCP handshake is a way of establishing a connection with the host destination. It is a three-way handshake used to synchronize and acknowledge the packet transmission before the process starts. The client initiates the transfer by sending a a Synchronize message used to establish a connection and advise of the sequence numbers used to keep track of the packets being sent over. The host server then responds back with an acknowledge message. The last message is another acknowledge message sent back to the server and then the connection is established. After the connection is completed a FIN message is sent to the server to disconnect the session.

TCP Handshake Diagram

The next step in the process is the TLS handshake. TLS is an encryption protocol for internet communication. It is the evolution of the previous protocol used, SSL. The steps of the handshake are to first specify which version of TLS will be used. Next is to establish the cipher suites utilized. Third, authentication of the server through the server’s public key and the SSL certificate authority’s digital signature. Lastly, generate session keys to use symmetric encryption for the duration of the connection. This is a generalized version of the exchange which is broken up into more steps and is dependent on the key exchange algorithm and cipher suites supported. See this link for more information.

The last two steps to view a web page are HTTP requests and responses. HTTP is a protocol used to request and receive information from a web server. A request is sent with a method it wishes the server to perform and relevant information needed in order to execute that action. Common request methods are GET, POST, and UPDATE. A GET method asks the server for the information at the provided URL in the header. Your browser will send a GET method in order to get the HTML and CSS for a website to render. Once the request is received by the server it will send a response back as a status code. Status code 200 means the request is OK and the server starts sending over packets of data. Click here for a list of request methods and here for status codes.

What I have provided is a high overview of how an internet web page is rendered. Each section has a lot more you can spend time researching if you choose to do so. Below I have provided links to the resources I used to write the post. I hope you learned something and if you did please feel free to like the post or leave a comment below. Have a great week and happy programming!

Resources:

- DNS Query:

  1. https://www.cloudns.net/wiki/article/254/
  2. https://smallbusiness.chron.com/primary-secondary-dns-65413.html
  3. https://smallbusiness.chron.com/domain-name-system-dns-resolvers-work-76639.html

- TCP Handshake

  1. https://www.guru99.com/tcp-3-way-handshake.html

- TLS Handshake

  1. https://www.cloudflare.com/learning/ssl/what-happens-in-a-tls-handshake/

- HTTP Request/Response:

  1. https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods
  2. https://developer.mozilla.org/en-US/docs/Web/HTTP/Status

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (1)

Some comments have been hidden by the post's author - find out more

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay