How is a Web pages stored on a computer?

Ever wondered exactly where your website is? After all, the computer code has to be stored on a piece of hardware somewhere in the real world, right? Here we break down the key terms and explain where the site built by your web development team really lives. Here is hosting in a nutshell.

Servers: where the code is stored

Your website is in two parts: a set of code files (computer programmes), stored in a folder on a computer (called a “webserver”); and a database (a collection of information, such as product details), which usually runs on a separate server. Each server has an IP address, which is a string of numbers. Like a telephone number, an IP address lets other computers find your server among all the computers on the network.

Domain names and URLs

You don’t type in an IP address to reach a website though: you use a domain name like ‘boxchilli.com’ which is written out as a URL (https://www.boxchilli.com). Domain names are like an address book for websites: the web browser looks up the domain name to find the right IP address to connect to. Just as you can move house and still keep your name, you can change server and still keep your domain name.

The domain name address book is shared around by the maintainers of “DNS servers” (like phone books). Every broadband provider (such as BT or Virgin) maintains their own DNS and so do people like Google. Domain name details are continually broadcast to all the other DNS machines so that they all know what IP address each domain name points to.

What if I have a .com and a .co.uk?

Several domain names can point to the same IP address, just as multiple businesses can share the same offices. This means you can easily have a .com and a .co.uk (and .london and .fashion) all pointing at the same website.

Physical servers, virtual servers and “the cloud”

Somewhere, there’s a real computer holding the code of your website. Your site might be on a single real computer in a rack somewhere (your webserver), or it might be on a “virtual” server or in “the cloud”. Virtual servers let hosting companies have multiple servers hosted on a single real computer, which great for small businesses that don’t need the expense of renting a whole machine. If your site is “in the cloud”, then multiple real computers will host loads of virtual servers. These virtual servers can have their performance increased and decreased as necessary, so if you usually only get 3 hits in a month, you only pay for the power you need, but if your website is suddenly viral and you get 3 million hits, then your server can handle the load.

Building blocks for programmers

There are many different programming languages used in web development. Some are used to communicate between the server and the user’s web browser (HTML, Javascript) while others shape how your website looks (CSS) or works behind the scenes (PHP, C#, Java).

Many websites are built using pre-made blocks of code. Companies like WordPress and Drupal have libraries of standard parts that web development teams can put together – like installing pre-made doors and windows for a new house.

Turning code into webpages

Whether your website is hosted on a physical or virtual server, the same process is used to display pages to people visiting your site: their browser requests a page from the web server, and that web server will fulfil the request. The request, if it could be written in plain English, would be something like “show these 3 pictures and that text” or “fetch this information from the database”.

The browser takes the information given, including instructions to put the right colours and fonts in the right places, adds any images, and responds to interactions, such as button clicks. That’s your webpage, delivered.

At boxChilli we are expert in all things digital. If you need advice on hosting or want to utilise our comprehensive web design, web development or SEO services, please don’t hesitate to contact our team. We are more than happy to help.

Back to blog list

Create and View a Web Page on Your Computer

Requirements:

• Text Editor
• An Internet Browser
• Completed Unit 1 of Codecademy’s Learn HTML & CSS course

Introduction

When you navigate to a web page on the Internet, the browser is doing a lot of work. The browser reads all the necessary files (HTML, CSS, and JavaScript) and interprets those raw resources to paint the complex page you see.

In this article, you’ll learn how to create a web page using a text editor on your own computer, then view the web page in your browser. If you’re interested in publishing your web page to the World Wide Web (the Internet) for everyone to see, check out this article after you understand the steps below.

Step 1: Open Your Text Editor

The first step is to open your text editor. It’s important to use a “raw” text editor, and not a formatted word processor.

Word processors insert characters which make the page look good, but aren’t valid HTML. They’re great tools for making stylish documents, such as academic papers and flyers, but they also insert characters that aren’t valid HTML. Since a web page file must contain valid HTML, a text editor is a better tool than a word processor for building web pages.

Step 2: Write Your HTML Skeleton

Now that your text editor is open, you can begin writing your HTML. As you learned in the first lesson of the HTML & CSS course, there are a few things that are always present in a well-formatted HTML file. Here’s all of them together again:

<!DOCTYPE html>
<html>
  <head>
    <title>My First Web Page!</title>
  </head>
  <body>
    <h2>Hello World!</h2>
  </body>
</html>

You can use this exact skeleton if you like. Just copy and paste it into your text editor. Make sure you include everything!

Step 3: Save Your File

Your web page is now ready, but currently it only exists inside of your text editor. The next step is to save the file to your computer. If you closed the text editor now without saving, your new web page would be lost! There are a few important things to keep in mind when you save it the file:

1. Use the .html HTML file extension, i.e. about_me.html
2. Don’t use any spaces or special characters in the file name. Use underscores (_) or dashes (-) instead.
3. Decide where in your computer you will save the file, and make sure to remember the location!

Use the .html HTML file extension

A file extension is the suffix of a file name, and describes the type of the file. The file extension is always the last 3 or 4 characters in a filename, preceded by a period. For example, the HTML file extension is .html, and it tells the browser (and other applications) to interpret the contents of the file as a web page. Note that on older web pages you may see .htm, but this archaic and no longer used.

Don’t use any spaces or special characters in the file name

When choosing a file name, keep it simple. Stick to numbers and letters. Use underscores (_) or dashes (-) instead of spaces. Leave out percent signs, slashes, question marks, exclamation points, commas, and other “special characters”. The browser needs to locate the file based on its name, and special characters within the file name can interrupt that process. File names should be kept simple and should follow conventions in order to make navigating to your web page more reliable.

Decide where in your computer you will save the file

After choosing a file name, select an appropriate location in your file system to save your web page. It’s good practice to create a new folder to house this web page. If you do create a new folder, use the same naming conventions outlined above in order to minimize future headaches. The most important thing when selecting the location to save to is to remember where you saved it. If you saved it already but you don’t remember where, just click File > Save As..., choose a new location to save, and be sure to remember this time.

Step 4: Open Your Web Page in Your Browser

Now you’re ready to view your new page in your browser! First, open up your browser. In the top menu, click File > Open File. Navigate to the location you saved your web page. Click on your web page file and then click Open. You should see your web page!

Review

In this short time you learned how to take what you’re learning on Codecademy and use it on your own personal computer. You also learned about file extensions, text editors, and saving and viewing local files. Now you are prepared to test out anything you learn in Codecademy for yourself, and practice on your own!

How is a web page saved?

Where does a website store its data?

Are web pages stored as files?

Can web pages be saved to an individual's computer?