Curriculum: page 1, HTML & CSS

We’ll learn how web pages are structured, and how to change the appearance of the content.

View the source

Goal

Understand how content for the web looks as raw HTML.

Instructions

View the source of this page. One way to do that is to right click anywhere within the browser display window, and choose “View Page Source”.

You will see the source HTML for this page. Read it.

Explanation

Web pages are written in plain text with no styling. So, no bold or italics, colors, fonts or layout. (When you viewed the source of this page earlier you saw colors only because the web browser understands the HTML and presents it in this way.)

The text in angle brackets (tags) provides meta information about the content structure. P stands for paragraph, for example. We put our content between pairs of tags to define what the content is, and to determine how the text will appear.

There are start tags such as <p> and ends tags like </p>. Some tags don’t wrap around anything else and are called empty elements. For example, to include an image we use the <img> tag plus a src attribute to indicate the address of the image file.

This page also has a <head> section where meta data about the entire page is defined. You’ll see that’s how the browser knows what the title of the page is, but you’ll also see this line:

<link rel="stylesheet" href="style.css">

This line says that an external style sheet should be applied. A style sheet is the place where we can define the appearance of our HTML. Let’s pretend we didn’t see that for a moment.

View HTML that has no style sheet

Goal

Understand that HTML has meaning even before we define the appearance.

Instructions

Open the example page that has no style sheet.

View the source of the example page. Read it.

Explanation

Nowhere in this HTML page have we said how big to make the heading, that text in <strong> tags should be bold, that <em> should be italic, that there should be space above and below <p> tags.

These tags have meaning and so the browser displays the content in a style that makes sense to most humans that read it. That’s kind, but wouldn’t it be great to to be able to choose what font, what color, what position, and well, LOTS of things about the appearance? We can do that! We can do that in a style sheet.

View HTML that has style sheets

Goal

Understand how to set the appearance of content on web pages.

Instructions

Open the example page that has style sheets.

View the source of the example page. Read it.

Open the external style sheet of the example page. Read it.

Explanation

Style sheets are a collection of rules. Each rule says which content the rule applies to and how that content ought to look. The language we write these rules in is CSS. CSS is how to make our HTML content look the way we want.

Here is one of the rules in CSS:

p.intro {
  margin: 0;
  padding: 20px;
  background-color: lightgrey;
  font-size: 20px;
  line-height: 1.3;
}

This rule says “intro paragraphs have no space around them, space inside of 20 pixels on all sides, with a light grey background. The text in them has a size of 20 pixels tall, and lines have a height of 1.3 times the height of the text.”

When two different rules refer to the same content, both rules are applied, but the one that comes second wins any arguments.

em {
  font-style: normal;
  background-color: orange;
}
em {
  background-color: pink;
}

The first rule says that everything in <em> tags should be normal (instead of italic, which is usual), and have an orange background, like this. But the second rule says nothing about font style, though it says the background should be pink. That looks like this.

When both rules are written in this order, the first one adds style but the second one wins for color, and the result looks like this.

More JavaScript please!

There is a lot to learn about both HTML and CSS, but hopefully that’s enough of an introduction to help us as we add our magic power: JavaScript!

→ To the second page.