how-websites-work

How Do Websites Work?

We all visit at least one website every day. My evidence? You’re visiting one right now! Whenever we visit a website we see only the ‘front end’. This is the finished product if you will, what the web designers and publishers want visitors to see. Text will be arranged into headers and paragraphs, content will be arranged more or less neatly, and graphics (should) flow smoothly across the page. But what is going on behind the scenes? What makes this seamless web world all possible? The truth is there is a hidden world behind the one we see equipped with it’s own language and layout that builds the web as we know it. The ‘front end’ of a website is constructed and supported by a concurrent ‘back end’ that most of us never encounter. In addition to this back end support there is an entire network of communication between servers and devices that supports everything that happens online. In fact, this electronic symphony is happening right now before your very eyes! Like most things in the modern world what seems simple as a finished product is produced by an incredible process involving many parts. It doesn’t need to be complicated or mysterious though; all we need to do is look at some of the major devices and processes that facilitate our engagement with the World Wide Web.

Let’s start with question: What is a website? We like definitions because they answer questions like this directly. One such definition describes a website as a set of related web pages typically served from a single web domain. A website is hosted on at least one web server, accessible via a network such as the Internet or a private local area network through an Internet address known as a Uniform resource locator.” Good, we’ve got something to work with here, but like any good definition it also leads to a few more questions. What’s a domain? What’s a server? What’s the purpose of a URL? All great questions and all ones we will get to shortly, but let’s stay focused on the task at hand. We can find usefulness in the first line of our definition “a set of related web pages”. We all use websites regularly so this may be self-explanatory but to clarify, you likely first arrived at the homepage of this website, Evlio, and were redirected here when you clicked on the link for this article. Perhaps you were on a search engine that returned this article as one of many search results. The homepage is the main webpage on a given website. The page you are currently viewing is another webpage, a subset of the website itself. A set of webpages come together to form a website. Google contains links to untold millions of websites and their internal webpages. All you have to do is click to be transported to another world! Ok simple stuff covered. Now that we have some working knowledge of what a website is let’s look at how a website is created.

A Website is a set of Webpages and Webpages are really just documents. These documents are typed up, just like any other, but with one key difference. Spliced into the DNA of the webpage is a language called HTML (Hypertext Markup Language) that contains instructions for the text and content of the document. This ‘back end’ HTML work informs the way the ‘front end’ content will organize itself. HTML is the basic instruction for your document giving it structure and support. Writing in languages like HTML is called coding. It’s important that your code be clean and neat, otherwise it will slow load times for your webpages drastically. When your computer reads unclean code it’s like reading a story with a bunch of unnecessary words and spaces; it still gets the message across but it takes a lot longer. HTML code may be processed and generated with PHP programming language (Hypertext PreProcessor). PHP is a language of action, making your page come to life with plugins and widgets. For a little more style designers turn to CSS (Cascading Style Sheets). This language specifically manipulates the look and formatting of the page. Font size, color, mouse-over effects and the like are all controlled by CSS. For an explanation of these internet acronyms and many more check out our article Internet Acronyms: What do they mean?

So now that we understand how to get a webpage up and looking good what’s next? Well, how do we get to a website? For starters, each website has it’s own URL (Uniform Resource Locator). This is most commonly called a web address. https://www.evlio.com is ours. This is the way to reach us, but to be able to do so you must first have a way to send information. Devices like computers, tablets, and smartphones are capable of sending such information. Let’s think of this information as a letter. Whenever you send a letter you’ve got to put the return address, right? Your IP address is sort of like that. It’s the address you send and receive information from. The IP address is a numerical value assigned to whatever device you are using to access the web. Just like you send and receive mail from your home you also send and receive information from your device, and just as your home has an address so too does your device. A domain name represents a sort of shortcut to the IP Address; .com, .net and .biz are popular web domains. Domains can represent the device accessing the site, the website itself, or the server hosting the website.

A server is a computer program designed to handle a clients business. In this sense the server is the ‘host’ to a website because it stores and manages the resources for that website. Often a server is tasked with handling the business of many, many clients. This increased burden causes the server to run slowly and sometimes crash. Servers are like people, they can only handle so much. DIY website companies will often neglect to mention to their clients that their servers process thousands of clients (or more). It’s important to have a fast computer and server hosting your website so it takes milliseconds rather than minutes to navigate between pages.

Alright, so let’s review. So far we’ve discussed that a website is comprised of webpages, it’s built and styled almost exclusively by HTML, PHP, and CSS languages, you can find websites and their corresponding devices by using URL, IP, and domain names, and finally we’ve discussed the role of servers in hosting websites. We had just asked the question, how does one get to a webpage? Well, we still haven’t answered that question fully, have we? We have the address of our destination but we don’t have the means of transportation figured out yet. That’s where our Web Browser comes in. Our Web Browser is the transportation and GPS, all we have to do is plug in the address and it takes us and our information where we want to go (or more accurately it brings the address and it’s information to us). Browsers are software applications designed to help users travers the World Wide Web with ease. Industry pioneers like Nexus and Mosaic eventually gave way to the internet titans we know today like Internet Explorer, Firefox, Safari, and Google Chrome. The main function of a browser is information retrieval. When a user types something into the search bar the browser goes and fetches the information from a computer/server where said information is stored and brings it to our screens for our use.

In summary, websites are made up of webpages which are basically just text documents. These text documents are given shape and character by coding languages like HTML, CSS, and PHP. Devices which use the internet are assigned IP addresses so they can exchange information and know where one another is. Websites are assigned URL’s and Domain Names for much the same reason. Websites also require servers, computer programs which sustain the functional operations of the website and communicate with Web Browsers to exchange information with the user; that’s you! I hope this article was helpful and gave you some insight into the way websites come to be and function in the grand scheme of information exchange!

 

Check out our blog for more info

Click on a tab to select how you'd like to leave your comment

Leave a Reply

Your email address will not be published. Required fields are marked *