HTML, CSS, JS, WTF?

ONA 2104   • Erika Lee   •   www.erikabigalee.com   •   ebigalee@indiana.edu

What we will be creating today.

What you will need:

Introduction

It's pretty amazing to think that each time you enter a URL and hit return, your fingers are causing a tiny bit of electricity to literally fly around the world and bring you back information in a split second. Part of the reason the web is so fast, and the technology so flexible, is that it's all made up of text. In fact, all of the web pages you see are made of text in the format of HTML, CSS and JS. Often websites are made with other coded languages that compile into those foundations, but when you view the source on a page, it's what you'll see.

Today our goal is to be able to recognize the basics, and get a sense of how their roles and how they work together.

TIP: To view a websites code, (in Chrome) go to "View > Developer > View Source" (in Firefox - COMMAND-U), OR right click and say "Inspect Element".

Let's introduce the players. Since you are all journalists, perhaps the easiest analogy is that of a sentence.

HTML (HyperText Markup Language) structures the content. If you were to look at a website with only the HTML complete, the content should still make sense. This is also how the browser/search engines understand which content is most important.

CSS (Cascading Style Sheets) handles the styling and all of the positioning. It's everything from typography to color; columns to backgrounds.

JS (JavaScript) is a programming language able to manipulate the content and styling of the page. It's used to add interactivity to a website. You don't have to be a programmer to add some JS to your site, because "plug-ins" other people have written are often available for use. But, you do need to understand how to hook those into your code, and that's perhaps another tutorial.

WTF (I think you know what this means) is what you used to say about web technologies. Hopefully in a little while you'll be saying, oh right, THAT stuff.


Step One: Basic HTML tag structure   ➳

0 | 1 | 2 | 3 | 4 | 5-6 | 7-8