This is an abridged introduction to the three fundamental building blocks that make up every website you see in your web browser. It's designed to give you a basic idea of what goes into creating a webpage from scratch. I've also included some links to more information on each topic, in case something interests you and you want to learn more.

For the purposes of this article, I'm going to completely skip over the mechanics of the Internet/World Wide Web and how a webpage actually gets to your computer. If you're interested in learning more about servers and how the Web itself works, this article is an excellent not-too-technical summary of everything that's going on that I'm not talking about.

Anyways, let's dive right in...

Anatomy of a webpage

Almost all modern webpages have three core components that control their content, appearance, and functionality.

HTML, or HyperText Markup Language, defines the content and structure of a webpage. The sentence that you're reading right now was sent to your browser as part of an HTML document. HTML is the one requirement for a webpage - without content and structure, the Web is meaningless.

CSS, or Cascading Style Sheets, define the appearance of a webpage. The fonts, colors, and layout of webpages are all controlled via CSS.

JavaScript defines the functionality of a webpage. Interactive sites like Facebook, Twitter, or Google all use JavaScript to allow their webpages to react to user actions like clicking buttons or entering text.

That's the executive overview. Now, I'll go into a bit more detail.

HTML

HTML was developed in the early 1990s by Tim Berners-Lee as a way for scientists to collaborate over the Internet. HTML has undergone significant change over the last two decades, but its core functionality remains the same: it allows people to share content over the Web in a structured and standardized way.

An HTML document is really just a text file that follows a special syntax, or set of grammatical rules. Content is structured using a set of tags that convey information about their contents. Tags are enclosed in angle brackets for identification purposes. For example, surrounding a word with <h1> tags would signify that that word is a top-level heading ('h1' stands for 'heading 1').

Much like a set of parentheses, HTML tags come in pairs. Opening tags look like <tag> and closing tags look like </tag>. So, if I wanted to make a top-level heading in HTML, the syntax would look like this:

<h1>heading</h1>

The cool thing about HTML tags is that you can nest them inside each other. This means that HTML documents have a tree-like structure, where elements that are children of other elements acting like the branches of a tree. HTML tags can also have attributes that further add meaning to that tag. For example, the href (hypertext reference) attribute of an a (link) tag controls where that link goes:

<a href='http://google.com'>a link to google</a>

There are dozens of HTML tags out there, but the most commonly used are probably a (which defines links), div (which defines sections of content), img (which defines images), and p (which defines a paragraph of text).

TL;DR

HTML defines the content and structure of a webpage using a special set of tags and attributes. To learn more about HTML, check out this guide

CSS

CSS is where things start to get interesting. Raw HTML documents are typically pretty boring looking; most browsers default to black text on a white background. With CSS, web authors can specify how they want their content to be displayed. CSS comes in the form of rules that look like this:

selector {
    property: value;
}

where selector is a reference to the thing you want to add styles to, property is where you specify what you want to change (like font size, color, or width/height), and value is where you specify what you want to change the property to.

For example, everything on this page is inside an element called html and I've assigned it a blue background with the following CSS:

html {
    background-color: rgb(225, 242, 255);
}

You can see how this works for yourself! Click on the code above and change the value to rgb(125, 242, 255);. This will change the background of the page by removing 100 units of red. Feel free to play around - you can always restore the original background color by refreshing the page.

CSS has selectors for virtually any combination of HTML tags, and a massive number of properties that you can style with it.

TL;DR

CSS defines the appearance and layout of a webpage using selectors, properties, and values. To learn more about CSS, check out this guide.

JavaScript

JavaScript (often abbreviated as JS) is a way of adding interactive functionality to webpages. Unlike HTML and CSS, which are markup and style languages, JavaScript is a full-fledged programming language.

Basically, JS provides a way to run code at the same time that a webpage is being displayed that interacts with the webpage and can react to user actions like clicks and typing. For example, clicking this link will execute the javaScript shown below:

var count = 0;
document.getElementById('clickme').onclick = function() {
    count++;
    alert('You have clicked the link '+count+' times.');
    return false;
}

I've made it so you can edit this code, too! Feel free to play around. If you break the page, you can always reload it to set everything back to normal.

TL;DR

JavaScript lets programmers add interactive functionality to webpages using a full-fledged programming language. To learn more about JavaScript, check out this guide.

Putting it all together

Together, HTML, CSS, and JavaScript provide a rich framework for creating content-filled, interesting, and interactive web pages - like this one! You can actually view the HTML and JavaScript source of this page here, and the CSS that's used to style it here.

If this post got you interested in doing more with HTML/CSS/JS, CodePen is an awesome tool that will let you play around with all of these technologies right in your web browser. It's a great way to experiment without having to install anything and with zero consequences if you mess something up.

WYSIWYG editors like Dreamweaver provide a layer of abstraction that's sometimes a convenient alternative to writing HTML and CSS by hand, but the code they output is still HTML, CSS, and JavaScript just like this page. Knowing a little bit about how these technologies work can give you a better understanding of what's going on under the hood when you're writing a webpage, and will let you do things that your WYSIWYG tool may not support.