HTML, CSS and JavaScript

Notes version

We want to give you a quick overview of the three languages. After that, we’re going to dive into HTML, and get you started on coding.

The three languages

  1. HTML

To students: What is HTML? What does it do? Bonus point: anyone know what HTML stands for?

HTML (Hyper Text Markup Language) is a language that tells a browser about the structure of your Web page.

What does that mean, structure? It means that different parts of your page have different purposes, and the browser needs to know which part does what.

It’s like taking a news story and formatting it in Wordpress or Microsoft Word: You don’t want just one long string of text. That would be unstructured. You want paragraphs, headlines, images. That’s structure.

Without HTML

 

"Knock", by Fredric Brown
The last man on Earth was alone in a room. 
Then he heard a knock in the door.

 

"Knock", by Fredric Brown The last man on Earth was alone in a room. Then he heard a knock on the door.

What HTML looks like

 

<h1>"Knock", by Fredric Brown</h1>
<p>The last man on Earth was alone in a room.</p>
<p>Then he heard a knock in the door.</p>

 

"Knock", by Fredric Brown

The last man on Earth was alone in a room.

Then he heard a knock on the door.

What HTML does on a page

Let's look at an example.

The three languages

  1. HTML
  2. CSS

(press enter to show "CSS" bullet point)

ASK: So what do people know about CSS?

If you think of a Web page as a human body, HTML is the skeleton and CSS is the skin. HTML defines the structure, but CSS is what your Web page actually looks like. It’s your skin color and texture, your loving eyes, your button nose.

So if that's how it applies to people, then on a Web page, CSS controls the font size, and colors, and layout of your content.

What CSS looks like

 

p {
	color: blue;
}

 

"Knock", by Fredric Brown

The last man on Earth was alone in a room.

Then he heard a knock on the door.

What does CSS do on a page?

Let's look at our tree example with CSS.

The three languages

  1. HTML
  2. CSS
  3. JavaScript

(press enter to make JavaScript show up)

ASK: So what do people know about JavaScript?

So if HTML is the skeleton and CSS is the skin, Javascript is like your muscles. Without Javascript, you would still look like a person, perhaps like a sculpture, or a painting. But it’s your muscles that allow you to live and breathe -- to walk and jump and run. It’s the same with a web page. Javascript controls all the moving elements: slideshows, tabs, animations.

So let's take a look at some example javascript.

What JavaScript looks like

 

alert('Knock knock!');

 

"Knock", by Fredric Brown

The last man on Earth was alone in a room.

Then he heard a knock in the door.

What JavaScript looks like

 

alert('Knock knock!');

 

"Knock", by Fredric Brown

The last man on Earth was alone in a room.

Then he heard a knock in the door.

What does JavaScript do on a page?

Let's look at the tree example
with some JavaScript.

oregonlive.com

Let's try the inspector on this page.

FIRST ASK: Does anyone have questions about the three languages?

So what’s cool about Chrome, the browser, is that it has a tool called the inspector. And it shows you that there’s no magic to the web. Someone, somewhere, typed up the code you see. So let's take a look.

You guys will get to practice this in a minute, but on any page, you can just right-click on whatever you want, and click “Inspect Element.” And it’ll show you the exact HTML code used to create that. You can actually delete things from an HTML page by selecting them and then hitting ‘delete’ on your keyboard, or move them around by dragging and dropping.

So all of that code you just saw, were just files on a computer.

File structure for web pages

This it the file structure for our tree example. You've got:

  • A folder that holds everything.
  • An index.html file. We'll focus on this for now.
  • Separate folders for css, javascript, and images.


You can ultimately organize your files however you want. But this is the most common way to do it - and it helps other people figure out where your files are.

With your mentors