Back to Series Navigation
An Introduction.
You should have your development environment set up to follow this lesson. If you don’t, how about you go read up on the basics? Today, we’ll focus on what HTML really is, what it does, and how it allows us to represent web pages.
But What Even Are Web Pages?
Have you ever wondered what a web page really was? If you haven’t, why are you reading this? But I’ll try to answer this question with no technical terms… yet. To put it simply, a web page is a file, or rather a group of files, that are given to you by a server. When you visit a website, you’re asking the site “Hey, give me the file contained at this location”. Right now, you’re on my web page. This means that my server has given you a file containing the data for this very page.
This is why you were able to open the HTML file I’ve told you to create in your web browser. Websites are just very well-ordered folders available to the public with a link! This means that developing a website just means creating these files and finding a way to give them to the end user. Since we’re learning web development and not system administration (though, believe that I will make a series on that!), we’ll only focus on the file creation part, not the serving them to end users part.
Well, serving and creating aren’t always different…
Serving a website and writing a website are two completely different things. Some pages are dynamic or are closer to applications. The website that you’re reading this on is an example of this, I didn’t write it all manually myself, it’s generated from a list of posts that I’ve Written for you!
The Anatomy of a Web Page.
Web pages can, in general (read: should always be, otherwise you’re doing something horribly wrong), be summarized as four elements for the end user. It can be more for the server, of course, but that’s not the focus for today. Those are:
- The HTML structure
- The CSS style
- The JavaScript code
- The various assets
We’ll go over each of those individually. In fact, JavaScript may get its own subseries. Well, that is a problem for future me.
The HTML Structure.
HTML (HyperText Markup Language) is the language of structure. Essentially, it translates structure and ordering of elements into text that can both be written by a human and read by a computer. You can think of it as the skeleton of your web page. It doesn’t contain any styling or images or whatever, it only contains information about your page, the text content, references to non-text assets and the structure of your page.
An important nuance to have is that HTML does not encode display structure, only semantic structure. This means that HTML will, for example, only encode that a paragraph is the element after a title, and that the paragraph and title are both a part of a certain section. The title could be displayed anywhere on your page, below or above the paragraph, that’s not the role of HTML. But HTML will say that the title and paragraph are siblings, and that they are children of that section.
And indeed, all of HTML is based on hierarchy. I will be using standard familial hierarchical terms through this series, so better get used to them. We talk about parents and children to describe children semantically contained in their parent, and siblings as children contained in the same parent. Think of them as boxes. A shoebox is the parent of two shoes, each shoe is a child of the box, and both shoes are siblings to each other.
The CSS Styling.
CSS (Cascading Style Sheets) encodes, well, style. Anything that is related to display but isn’t structure will be done through CSS. While HTML encoded structure and hierarchy, CSS encodes how that hierarchy is displayed. Each element of the HTML tree can be styled on its own.
Let’s take an example. The HTML structure encodes the existence of a paragraph. Well, with CSS, we can set this paragraph to have a blue background, with large margins, be centered, be displayed to the left of its sibling etc. Really, CSS is everything related to display.
CSS works with what we call selectors. Essentially, you write a bunch of selectors that help you tell your browser “Hey, any element that matches those selectors should follow these rules!”. For example, you can encode with CSS “Any paragraph should have a blue background”. For a more complicated example, you could say “Any title that is a child of a section should be written with red text, and be written with green text when hovered”.
The JavaScript Code.
You might have noticed that the two above are stateless. This is a fancy programming nerd term to say that they don’t change as soon as they’re created. They exist in a certain way and won’t change on their own. JavaScript is a programming language that allows us to change that and give more advanced, dynamic behavior to our pages.
HTML can encode links, for example. But that link is static, written into the “immutable” HTML structure tree. JavaScript allows us to plug ourselves into the tree and modify it. It can even execute arbitrary code! JavaScript is a language that is very capable (In fact, it’s too capable, which led to it being cataclysmically overused, but that’s a rant for another day…).
Every browser comes with a JavaScript interpreter. Don’t believe me? Open your developer tools right now (F12 key on computers. Sorry mobile users, you’re out of luck here). You should have a “console” tab available somewhere. Click on it, and type the following JavaScript snippet, then press enter:
for (i=0; i<10; i++) {console.log("hello world, this is message number " + i)}
Code language: JavaScript (javascript)It should display a bunch of messages, 10 of them to be precise, ranging from 0 to 9. Pretty neat! Programming with JavaScript is its own can of worms that we won’t get into for now. Still, keep it in the back of your mind.
The Assets.
That’s the simplest part. Assets are just things that are none of the other things. Assets can be images, videos, sound files… Really, your site’s assets are whatever you want to give to your users. One of the assets for a part of my site is a certificate for my certificate authority. You likely don’t know what that means if you’re new to web development, but the name should sound alien enough to prove that assets constitute whatever is none of the above.
That is it, You Now Know Everything That Makes a Web Page a Web Page!
That might be a lot to take in at first. That’s okay. This was all theory, next time we’ll go into proper practice. I hope that this at least helped you understand the different elements of what makes the Web what it is. Together, we’ll write a bunch of simple web pages to understand all the concepts we’ve studied together.
Take some time to either appreciate or hate how complicated it seems at first. This delicate dance of components taped together holds the web in place. But really, you can add your own structure to it. I firmly believe that it doesn’t have to be so hard, and that, with practice, you will be able to whip out a basic page in minutes.
The hardest part will, in my opinion, be separating those four concepts in your mind when designing pages. The structure, the display, the functionality and the media content are four different concepts that need to be treated and thought about separately. Still, this also presents a nice learning opportunity. They’re separate concepts, so you can learn one at a time. Though, you REALLY should start with HTML. So, let’s get into it next lesson!