Web Dev Bytes — What is a Website?
What the heck even is a website, and what does a web browser do?
When I was getting started in tech, by far the biggest obstacle I faced was that I didn’t have any foundational knowledge in how the internet works. These articles are my way of giving back, to any aspiring web developers or knowledge seekers looking to broaden their horizons.
The internet and the web browsers we use to surf it are tools we use all the time. I personally spend at least 4 hours a day online reading, watching videos, and playing games. In this article, we’ll be talking about websites and that essential tool: the Web Browser.
Virtually every internet-connected computer has a web browser installed on it, with the big ones being Chrome, Firefox, and Safari. To browse the internet, all you’ve got to do is open a new window, type in a website address, hit enter, and you’re off! But have you ever wondered what’s actually going on? What does it mean to “visit” a website, and how does your browser know what to display when you get there? Finally, what does it mean to “code” a website?
We’re All Connected
To put it simply, the internet is an enormous network of computers. Just like you might have a desktop or a laptop, the internet is just a bunch of computers that are connected. When you connect to the internet, you join all of those other computers that are also online. Even when people talk about “The Cloud”, they’re still talking about physical computers sitting somewhere.
Now all of these computers need to be able to talk to each other. To accomplish this, every computer gets its own unique address which looks like this:
172.217.10.14
This is called an IP Address. If you’ve got a computer’s IP address then you can visit it using, you guessed it, a Web Browser! But who’s going to remember that 172.217.10.14 takes you to Google? We’ll cover the specifics in a later article, but basically, there are services in place that make it so you can just type the more user-friendly “google.com” and connect to the right computer.
Give Me the Data!
Okay, so your web browser’s connected to the computer over at google.com, now what? The next thing your browser does is it asks the Google computer for the Google website. That Google computer then sends over a text file with all the instructions on how to display the page. Here’s what the file might look like:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<div>
<p>This is the website</p>
</div>
</body>
</html>But more likely it’ll be a complex website and look like this:
This file is written in a language called HTML (Hypertext Markup Language), and it’s the language of websites! Your web browser can parse the HTML file and render a web page for you to view. The browser understands how to turn parts of the HTML into search bars, images, buttons, and all of the other parts of a website you’re familiar with.
The Road to Code
Let’s take another look at that simple HTML example:
<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
</head>
<body>
<div>
<p>This is the website</p>
</div>
</body>
</html>HTML is designed to be easy to read and write, and that’s what coders, specifically front-end engineers, do. Here’s a fun exercise: copy the code above and save it as a text file called mysite.html on your own computer. Next, locate the file and drag it into an open browser window. You'll see a new website using the HTML file! You'll notice that those human-readable snippets "Welcome" and "This is the website" appear in different places of the site:
If you decide to become a web developer, part of your job will be to create these HTML files for websites so they can be properly rendered by web browsers. There are also other files that your browser uses for rendering websites (e.g., CSS and Javascript), but we’ll cover them in future articles.
Putting It All Together
The next time you use your web browser (or even now, for this article), you can envision the process that’s taking place:
- Your browser connected to another computer somewhere in the world,
- That other computer sent you an HTML file (and some other files),
- Your browser used that file to render the webpage for you.
Your journey is just beginning! There are so many more aspects of web development we’re going to explore together, like:
- What are the other files that go into making a website work?
- Why are we able to type “google.com” instead of the IP address?
- How exactly does your web browser “ask” the other computer for the website?
- How does HTML work? What can it do?
I hope you’ll join me for more Web Dev Bytes in the future. If you enjoyed the article or have feedback, be sure to leave a comment!
