A primer about the internet

How The Internet Actually Works – A Primer

November 11, 2009

This article is aimed at people with only a basic understanding of computers, so if you know the difference between HTML and CSS already, then you might want to move on – maybe you should choose another article to read from the links in the sidebar to the right.  Just a suggestion…  ;-)

Alright then, here’s a little about how the internet actually works.

Browsers

First off, you interact with the internet through a program called a browser.  The browser is what actually displays the websites that you visit.  The most common browsers are Firefox, Internet Explorer, and Safari, although there are dozens of other more obscure browsers.

Ok at this point, pat yourself on the back.  You now know more about browsers than 92% of people that hang out in Times Square in New York.  If you don’t believe me, watch this video:

Ok, so when you open up your browser, and you type the web address for my website (also know as the URL – mine looks like http://www.levitationwebsitedesign.com) into the address bar and hit return or enter, that causes your computer to send a little note across the internet to my server.

Servers

A server is a computer that doesn’t have a monitor or keyboard, and the operating system that is runs lacks a graphical interface. The only way to interact with the server is by giving it commands in a language that it can understand, usually Unix or Linux. There are millions of these servers spread around the world in what are called “server farms.” A single server farm might take up an entire 50 story building and have tens of thousands of servers in racks. For example many of the old decrepit bank buildings in downtown Los Angeles have been converted to server farms.

These server farms are what provide the incredible processing power needed to make the internet go. The servers are always on, and can respond to a request at a moment’s notice. When I refer to “my server,” its not actually a server that I own, but rather is a server owned by a hosting company, and I rent it from them. That server contains (among other things) my website.

So, that note your computer sends that note to my server asks my server to send your computer the code necessary to display my website in your browser.  This all happens very fast (or at least it should – sometimes a server can get kind of overwhelmed with requests and it can’t get to them all immediately, in which case a website you’re trying to visit might load very slowly).

"Cherish The Time," comic from <a href=

Websites and Computer Programming Languages

There are two basic classifications of websites, either static or dynamic, and which kind of website I’ve made will change a little bit how my server responds to your browser’s request.  For simplicity, I’ll just talk about static websites from now on, although to read more about why dynamic websites are much better, click here:  Static vs. Dynamic – the benefits of a CMS.

So assuming my website is a static site, then my server will send you two files that contain computer code – one written in the HTML programming language, and the other written in the CSS programming language.  It will also send you any additional image files that are needed to properly display the page.

HTML and CSS are two different languages (also know as code) and they do different things.  The HTML code defines the elements that are on the page, whereas the CSS defines what style should be applied to those elements.

On a very basic level, the HTML (translated to human-speak) might say this.

  1. Display the header image.
  2. Display the navigation menu made up of the items “Portfolio,” “Articles,” “About,” and “Contact.”
  3. Display the following block of text: “How The Internet Actually Works – A Primer”
  4. Display the following block of text: “This article is aimed at… (and a bunch more text)”
  5. Display the footer.

The CSS file would then define the styles.  For example, it might tell your browser to display the title of the article (ie “Dynamic vs. Static – the benefits of a CMS”) as bigger text than the rest of the article.  It would also tell your browser to display the navigation menu items in a different font than the rest of the page.  There would also probably be hundreds of other little style changes that the CSS file would tell your browser to do.

What A Web Designer Does

When someone like me designs a website for a client, its our job to write the HTML and CSS.  Generally the HTML isn’t too complicated, but getting all the CSS styles to properly display can take quite a bit of time and effort.  And the style is very important not just as a way to make your site look nice, but also to make sure that it is usable.  If, for example, this text were defined to be white on a white background, it wouldn’t be very readable, right?

So, once the HTML and CSS files have made their way over the internet to your browser, you browser reads in all the code contained in those files and displays the content, along with any images in your browser.

"I'm an internet celebrity" Comic from <a href=

Links

In creating my website, one of the things that I’ve done is to include what are properly known as “Hyperlinks,” or, more commonly just “Links.”

These links are usually text that is a different color – often blue, but on my page they are red.  If you were to click on one of those links, then your browser would realize that you’ve clicked a link, meaning that you want to go to a new page.  It would know which page that link pointed to, and so it would send another little note over to my server again to ask for the new set of HTML, CSS, and image files to display the new page.

And at that point you’re surfing.  While I’m sure your familiar with how to use the internet (as evidenced by the fact that you’re here, on my site), knowing what is actually going on behind the scenes is very important if you’re thinking of getting a website made for yourself or for your business.  The next lesson that would be important for you to learn would be about the differences between static and dynamic websites.  To read more about that, click this hyperlink: Static vs. Dynamic – the benefits of a CMS.

Thanks for reading.  If you have any questions/comments, please feel free to ask me either by contacting me, or by leaving a comment!

Thanks to Geek and Poke for the two comics, and to Cawi2001 for the sign image.

Leave a Comment