We’ll learn how web pages are structured, and how to change the appearance of the content.
Understand how content for the web looks as raw HTML.
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.
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.
Understand that HTML has meaning even before we define the appearance.
Open the example page that has no style sheet.
View the source of the example page. Read it.
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.
Understand how to set the appearance of content on web pages.
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.
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.
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!