Intro to HTML, CSS, and Javascript

The 3 foundational building blocks of webpages.

HTML, CSS and Javascript. You often hear these things mentioned together. This trio of technologies/languages/filetypes work together to make up every single web page on the internet.

When building web pages, we edit a combination of these files(.html, .css, .js), which link to each other.

HTML, CSS, and Javascript each have their own role in making a web page run. We will touch on each one in this lecture!

Part 1) HTML: Let there be light content!

HTML stands for HyperText Markup Language. It is the only mandatory ingredient to make a webpage.

Writing HTML is intuitive. It's essentially a list of the "things", or elements, we want to see on the page.

In the name "HyperText Markup Language", the "HyperText" part refers to the fact that one HTML file can link to another HTML file in a web browser. The "Markup Language" part refers to the syntax required to add new HTML elements to the page. Let's look at this syntax now by observing this sample HTML code:

Sample Html Snippet

1<div>
2  <h1>Hello world!</h1>
3  <a id="henrys-google-link" className="henrys-link" href="https://google.com">This is the best search engine!!</a>
4  <‎img src="https://www.sheknows.com/wp-content/uploads/2018/08/crvg7yroprzmj5p2z2yn.jpeg"></img>
5</div>

There's a lot going on here! Note, the line numbers are for clarity, not a part of the code.

On line 1, we are opening a div tag. On line 5, we are closing the div tag. Notice the extra "/" on line 5, after the <. This is how we denote a closing tag, versus an opening tag which doesn't have a "/".

A div element is a generic "divider" of content. We frequently use divs to group things together. In HTML world, elements inside another element are called the children of that other element. It's crucial to group things together to keep everything organized, and that's a div's job.

On line 2, we are adding an h1 tag, with the content "Hello World" inside.

On line 3, we are giving id, class, and href attributes to the a element. Attributes help us define/control our elements and are not visible to the user. Attributes appear between the < and > characters in the opening tag, and usually have the format option="value".

id and class attributes can be used for any element to give it a special name, so that CSS and Javascript can do things with them. More on id and class soon!

On line 4, we are supplying an image url to the src attribute of an image element.

Here's how the above HTML will look in a browser:

Hello World!

This is the best search engine!!

In practice, this is what a complete and proper HTML file looks like, with lots of comments in grey:

1<!-- Always include this at the top of your file. It tells browsers to use the latest version of the HTML language. -->
2<!DOCTYPE html>
3<!-- The wrapper for the entire page. -->
4<html>
5  <!-- The head is a wrapper for important meta-info about the page, and where other external files are often loaded.  -->
6  <head>
7    <!-- Meta values give information to search engines and devices about the page -->
8    <meta charset="UTF-8">
9    <meta name="viewport" content="width=device-width, initial-scale=1.0">
10    <meta http-equiv="X-UA-Compatible" content="ie=edge">
11    <!-- The title tag in the <head> sets the text on the page's tab -->
12    <title>HTML starter file</title>
13    <!-- We are loading in our CSS file here! -->
14    <link rel="stylesheet" href="mystyle.css">
15  </head>
16  <!-- The body element is where our actual page content lives -->
17  <body>
18    <h1>Hello world!</h1>
19    <a href="https://google.com">This is the best search engine!!</a>
20    <!-- We load in our javascript file here! -->
21	  <script src="myscript.js"></script>
22  </body>
23</html>
24

And now without comments. Feel free to copy and paste this to begin a new HTML file:

index.html

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>HTML starter file</title>
8    <link rel="stylesheet" href="mystyle.css">
9  </head>
10  <body>
11    <h1>Hello world!</h1>
12	  <script src="myscript.js"></script>
13  </body>
14</html>
15

Key points in this file: every page needs an outer html element. The html element contains and a head and body element. The head handles important information about the page, and the body contains the content of the page.

Part 2) Cascading Stylesheets: Clothes for our HTML

The role of CSS is simple: to change the look of our HTML. It can also animate HTML elements and set HTML elements to change appearance when the user interacts with them. For example, when a link changes color after the user hovers over it, that is done by CSS.

CSS stands for Cascading Stylesheets. We often refer to .css files as stylesheets, but what does "cascading" mean?? Put simply, it means that CSS can dress up heirarchies of content with varying specifity. Maybe read that sentence one more time so it can sink in.

For example, CSS can tell a whole html page to make its text green. Or it can say make just one link green. And it can do everything in between the two.

CSS has a unique syntax that is easy learn but hard to master. CSS stylesheets are made up of a list of rules. Each rule has two parts: 1) a selector, and 2 ) a list of declarations for that selector.

The selector is a specially formatted description of which elements we want our rule to affect.

The list of declarations is a list of option: value; pairs, where the actual style changes happen.

Here's how the syntax works in a CSS file:

1selector_goes_here {
2  option: value;
3  option: value;
4  option: value;
5}
6another_selector_goes_here  {
7  option: value;
8  option: value;
9  option: value;
10}

Now let's look at a bit of real CSS code:

1a {
2  color: green;
3  text-decoration: underline;
4}
5h1 {
6  background-color: orange;
7  opacity: .5;
8}

This will tell every a element that its color should be green and get an underline. It will also tell every h1 to have a background color of orange, and to be halfway transparent. As you might be able to tell, there are A LOOOOT of possible declarations. Don't worry, we will go over some important ones together and get you comfortable enough to teach yourself new ones as you need them.

Here is a great explanation of CSS syntax: https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax

Here is a comprehensive list of CSS declarations for reference: Mozilla CSS Properties Reference

Part 3) Javascript: What our pages DO!

So far, we have seen HTML, which is the stuff on our page. And we've seen CSS, which is what our stuff looks like. Our third and final webpage building block is Javascript, which is what our stuff does. It is a programming language that runs alongside our HTML.

As you will soon see, Javascript is a whole world unto itself!

Javascript has endured a tumultuous history- it was introduced in 1995 as a way change web pages in response to user interactions. It was easier to write than the alternative at the time, Java (confusingly, Java is a completely unrelated programming language). It became popular with amateur web designers, hobbyists and the like.

"Before long, JavaScript was in heavy use doing the least important job in the world — swapping one image for another every time the mouse came by."Source: https://medium.com/young-coder/how-javascript-grew-up-and-became-a-real-language-17a0b948b77f

As late as 10 years ago (2012) it was referred to as a "toy language" by many professional developers- but as it incrementally took on more features, it became more and more useful over time.

Fast forward to today, and Javascript is the most widely used programming language, and can do virtually anything that the other "respected" programming languages can do. It used to be a tiny language for flipping colors on webpages, and now it's a multi-purpose language used inside and outside of the browser for just about everything.

For our purposes, we are going to start simple and look at Javascript the way it was used back in the 90s- changing things on webpages- and work our way towards more modern applications later in the course.

There are two ways to include javascript on your page: loading an external script file, or writing the javascript right into the html file.

Lets look back at our html template:

HTML with an external Javascript file:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>HTML starter file</title>
8    <link rel="stylesheet" href="mystyle.css">
9  </head>
10  <body>
11	<script type="text/javascript" src="myscript.js"></script>
12  </body>
13</html>
14

We're loading a separate file called myscript.js, which needs to exist beside our index.html file, or we will get an error.

Another way to include a script is "inline" like below:

HTML with inline Javascript:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <meta http-equiv="X-UA-Compatible" content="ie=edge">
7    <title>HTML starter file</title>
8    <link rel="stylesheet" href="mystyle.css">
9  </head>
10  <body>
11	<script type="text/javascript">
12      alert("Hello, it's me, javascript!!!!");
13    </script>
14  </body>
15</html>
16

On lines 11-13, we are using a script tag (without the "src" attribute) and putting javascript directly inside the tag. When you go to this web page, a popup will immediately appear, with the text "Hello, it's me, javascript!!!!".

Since scripts can get quite long, it's tidier to use the external file option in most cases.

Javascript is the glue between your web page and the outside world. It powers shopping carts, slideshows, clocks, online games, complex animations, popups, and everything else that HTML and CSS can't do on their own. Learning about javascript will take up at least one half of this course, but we are going to hold off a bit longer.

As was mentioned before, Javascript is a programming language. Unlike HTML and CSS, we can use JS to write algorithms and logic that can accomplish a whole lot of exciting things. We will learn the concepts necessary for Javascript which are mostly present in every other programming language. In other words, after learning to write Javascript, you will be able to learn any other programming language with much more ease.

With patience and persistence you will be a great programmer, and be able to put your hard work on the web for the world to see :)