Anatomy of a Website

The worldwide web has become universal in virtually every person’s life across the world. From the time and dollar-saving procurement services of Amazon to the empowering knowledge made accessible by search engines such as Google and Bing, life as we know it would come to a crashing halt if not for the web and the sites built upon it. This wonder we have come to depend on remains a mystery to the majority of the population, however. If you are reading this, you likely have a passing curiosity in web development or may have even decided to embark on a career in this increasingly rapid and expanding field. This article is intended to provide a brief overview of the three major components of a website, the languages in which these components are written and then begin the often-frustrating-yet-rewarding process of familiarization with these languages. The content is written in a manner that is readily comprehended and digested by those who have never in their life attempted a single line of code and is not meant for those technical experts who stumble across this article in their Google searches. If you count yourself amongst these experts, please limit your comments to words of encouragement and to corrections of incontestable errors. As valuable as is your nuanced understanding of these topics, such specialized input would only serve to confuse and prejudice. Everyone, after all, has a right to knowledge free of others’ preconceptions and biases. knowledge free of others’ preconceptions and biases.

And now we begin!!!

What’s in a Website

Everything you see on a webpage-all the colors, the boxes, the fonts, the moving parts and simulated shadows-are written in three major languages which serve distinct purposes: HTML, CSS, and JavaScript.

HTML-The Skeleton

HTML stands for Hyper Text Markup Language and is the backbone of any site. If a website is a person (or any other vertebrate critter), then HTML is the skeletal system that gives the website structure and shape. The basic building block (or bone to continue the analogy) is called a tag and is enclosed in ‘<>’. HTML is very structured and resembles those topical outlines we were forced to construct before writing essays in school. Though HTML is not considered by many to technically be a programming language, I will refer to it as such in all future posts. HTML will be the first language we discuss.

CSS-The Skin   

CSS stands for Cascading Style Sheet and is the skin that is draped over the HTML skeleton. When you see colors, gradients, faded images, backgrounds, and fancy fonts on a page, this is CSS adding the aesthetic touch to the HTML of a page. It is called Cascading because it is possible to drape multiple sheets over one another to achieve a desired effect or look. The basic unit of CSS is the class and will be discussed in much greater detail in future articles.

JavaScript-The Musculature

With the skeleton of HTML and the skin of CSS, the only missing piece to the analogy is the musculature that makes things move and happen on a page. This role is filled by scripting languages, the most popular of which is JavaScript. Every time you press a button on a page, submit information, or change the background color of an HTML element, some sort of scripting language is working in the background to make these things happen. There are several scripting languages in use out there (PHP, Ruby, and Python for instance), but JavaScript is immensely popular and can be considered “the language of the web.” JavaScript most closely resembles other programming languages of HTML, CSS, and JavaScript and will be the last such covered in these tutorials.

Chadwick A. Mayer, November 2017