So How Do Websites Work?

Believe it or not, this isn’t the most complicated question in the world. Unless you’re actually planning on writing code – and I have to assume that if you’re looking at this website, you’re not – the most daunting part of understanding this is the vocabulary. If you just learn the lexicon, the actual basics aren’t that hard to wrap your mind around. Here’s a quick primer.

The Internet / The Web

You know this one. The Internet is a worldwide network of computers that relay information to each other. Originally, the users were academics, so there’s a lot of academic DNA in its makeup (more on that soon).

The World Wide Web (where we get the now-rarely-seen “www” prefix) is the part of the Internet that you can access through a Graphic User Interface (GUI) – or in English, the stuff you can get to through a Web browser. There’s a lot of data on the Internet that isn’t accessible from the Web.

Domains / Websites / URLs

Everything on the Web could be accessed by using a string of digits called an IP (Internet Protocol) Address. This would be a pain in the ass.

Because human beings have trouble remembering long, random numbers, the Domain Name System (DNS), which replaces said numbers with easy-to-remember names, was created. Soyouwanttogetawebsite.com is a domain.

You access each page through its URL, which stands for Universal Resource Locator, or more commonly, web address. Connected web pages on the same domain form a website.  “https://soyouwanttogetawebsite.com“ points to the home page of a site, “https://soyouwanttogetawebsite.com/how-websites-work” points to a different page on the same site, and  “info@soyouwanttogetawebsite.com” sends an email to an address connected to that site.

When you purchase a domain, you’re buying a spot in the DNS registry that sets you as the owner. That domain is yours as long as you keep paying the registration renewal fees. If you don’t pay, it reverts back to the public domain. So yes, you can lose your own domain if you forget to pay.

Owning a domain does not give you a website. You have to link a domain to a server for this, and for that, you’ll need a host.

Web Hosts

A Web Host, or just plain Host, is a company that provides space on an Internet-connected server for you set up a website. Most of them offer domains too. A good host will offer decent server speed, high levels of “up time” (time when their servers are up and running), plenty of email server space, and helpful technical support. For most big-name hosts, the first three are pretty similar. The real distinction is customer service.

Some people confuse hosts with ISPs, which are Internet Service Providers. Your ISP is the company that connects your computer to the Internet. Your host connects your website to the Internet. You need your ISP to get to your host, but other users can get to your site without going through your ISP. Confused? Here’s the simple takeaway: you’ll have to pay for both of them.

HTML and CSS

All web pages, by definition, are composed of HTML. Web browsers are basically apps that parse HTML.

HTML stands for “Hypertext Markup Language,” which is easier to understand than you would think.

I had a professor in college who pointed out that when an author used footnotes, he wanted people to read the notes, and when he used endnotes, he didn’t. This has nothing to do with the Internet, but it’s a terribly useful observation.Hypertext is just the original word for link. The idea came from footnotes. You’re reading something, you see there’s a footnote, you follow the link to the note, and then you pop back to where you were reading. That’s where the whole architecture of the Web came from. So now you’ll never skip a footnote again, right?1

Markup Language takes a little more explaining, but it’s not actually complicated. Let’s go back to academia.

I’m using “she” and “her” as pronouns here because the professor I’m thinking of is my mom, who was a research professor at Washington University. Her name was not J. McNeil Flintlock, though. That’s a clever pseudonym.In the old days, a professor would write the text of a paper. She’d sweat over the information, edit the hell out of it, and then the final version would be typed up by her secretary on an IBM Selectric.2

But the typewritten version wasn’t what got published. That text would be relayed to the Publications Department of whatever journal was going to run it, and that department would go through the typed manuscript and mark up the pages for formatting. For instance, the front page of the typewritten manuscript might look like this:

VERY IMPORTANT TREATISE ON COMPLICATED SUBJECT

An Examination of the Epistemology of Fake Document Names
Professor J. McNeil Flintlock, PhD.
Washington University Department of Esoterica

 

And the marked-up version might look like this

<h1>VERY IMPORTANT TREATISE ON COMPLICATED SUBJECT</h1>
<h2>An Examination of the Epistemology of Fake Document Names</h2>
<h3>Professor J. McNeil Flintlock, PhD.<h3>
<p>Washington University Department of Esoterica <p>

 

The bracketed letters are called tags. The first line is tagged <h1>, which means that everything between those tags is Heading Level 1. <h2> means Heading Level 2, <h3> means Heading Level 3, and <p> means standard paragaph.

At this point, the Publications Department would check its style sheets, which might be pinned up on the wall, to see how to format every one of these marked-up styles.

OUR STYLES
<h1> = 21pt/18pt Helvetica Bold, all caps, centered
<h2> = 18pt/20pt Helvetica Bold, centered
<h3> = 14pt/15pt Helvetica Bold Italic, centered
<p> = 12pt/15pt Times New Roman, centered

 

And they’d set the type by those guides, so it looked like this:

VERY IMPORTANT TREATISE ON COMPLICATED SUBJECT

An Examination of the Epistemology of Fake Document Names

Professor J. McNeil Flintlock, PhD

Washington University Department of Esoterica

 

That’s effectively how a webpage works. Your browser reads an HTML file, which contains the text, marked up with tags and links to provide the structure – and simultaneously accesses a linked style sheet to set the formatting.

CSS, by the way, stands for “Cascading Style Sheets” because one style sheet can cascade over (i.e., supersede or supplement) another linked style sheet. CSS is pretty powerful. It affects not just the appearance but also the placement on the page of every element in your document.

HTML is not a programming language. It’s designed to display information. Except for linking and hover effects, HTML doesn’t really allow the user to do anything interactive.

1 I had a professor in college who pointed out that when an author used footnotes, he wanted people to read the notes, and when he used endnotes, he didn’t. This has nothing to do with the Internet, but it’s a terribly useful observation.
2 I’m using “she” and “her” as pronouns here because the professor I’m thinking of is my mom, who was a research professor at Washington University. Her name was not J. McNeil Flintlock, though. That’s a clever pseudonym.

Javascript

Javascript is a programming language that web browsers can understand, and that can affect HTML. If you’re on a web page that does anything but display text, pictures and links, it’s using Javascript. 

SEO

SEO means Search Engine Optimization. Some people talk about SEO like it’s a matter of life and death for their website. It’s not – but it is important. Here’s what you should know. 

A) A website written in semantically correct HTML (i.e., with no major technical screw-ups) will be found and indexed automatically by search engines. As long as your site is constructed properly, it will be discovered. This won’t happen instantly. Search engines have bots that crawl through the Web looking for sites, and they may not index your new site right away. They also may take some time to pick up on changes to an existing site.

B) Optimizing means jiggering the text, HTML and metadata (data about your site, like keywords and descriptions) so that your site ranks highly on search engines. Most people doing a search only check the links on the front page of their results, so ranking matters.

C) How search engines determine rank is complicated, but the most important parameter is how many other quality sites link to your site. Linking shows credibility and popularity, and is hard to fake (though God knows people try). There’s a certain circular aspect to this. Over time, top-ranked sites tend to get more popular, although they may have to keep optimizing to maintain their position. So it’s just like high school.

D) There are hundreds of other parameters that search engines use to rank sites. They change all the time. That’s why there is a whole industry of experts whose only job is optimizing websites to within an inch of their lives.

E) Website designers will take care of basic SEO: using semantically correct HTML, writing some custom meta descriptions, etc. But expert-level work is not usually part of the basic package.  

F) Don’t lose your head over this. Most businesses don’t get their clients from random searches. As long as potential customers can find your site when they search for your business, you’re ahead of the game.

Themes / Templates

Most web platforms provide users with themes or templates to build out sites. Essentially, they’re pre-designed web pages for which you can swap out their sample content for your content. 

Web designers may use themes too, but they look at them like a chef looks at someone else’s recipe: as a convenient starting point to creating their own dish.

Web Development

This means the actual creation of the site, not just the preliminary or creative work. Development is not quite a synonym for “coding” because HTML and CSS aren’t programming languages. However, “custom development” almost always means writing code, and be warned, that can get expensive. 

A Zillion Other Acronyms

Don’t worry, don’t care. You can look these up if you need to. When a developer starts telling you about this stuff, it’s like your mechanic rattling on that they’re going to need to re-bore your cylinder head at 40 microns over instead of 30. As long as it doesn’t affect the bill, it’s their problem, not yours.