In our earlier lesson, we discussed the basics of the web and how pages can be modified in-line as an introduction to programming for our hypothetical student. It's now time to expose a little bit more of the underbelly of the internet.
In this lesson, we want to walk the student through the construction of an HTML document and demonstrate how these elements are represented within the browser. Our student is starting to grasp the idea that data is delivered via the Internet to their browser, so we need to show them that they can build this very same data themselves. Let's start things off slowly:
<html>
</html>
We begin by introducing the concept of a tagged document, and we do so by showing the smallest of tags. Our first document is a tagged HTML file, and we'll save it as index.html.
- Note: If you've got a curious student who really likes the details behind things, this would be an ideal time to explain why web servers' primary file is called 'index.html.' If you don't know, see here and reiterate that a web server can deliver any type of data, not just HTML files. It's the browser that does the interpretation.
Let's then stack on to our document:
<html>
<p>Hello, world!</p>
</html>
Most of you web professionals will probably recoil at seeing <p> tags inserted directly into HTML like this, but it'll still be rendered by the browser without much fuss. We're making an intentional effort to keep web structure as simple as possible. Let's add a bit more complexity.
<html>
<p>Hello, world!</p>
<p>These lines are HTML.</p>
<p>The browser knows to split them into paragraphs.</p>
</html>
These multiple tags seem to indicate that they should perhaps be grouped somehow:
<html>
<body>
<p>Hello, world!</p>
<p>These lines are HTML.</p>
<p>The browser knows to split them into paragraphs.</p>
</body>
</html>
Now we've established something that looks like a document with which our student has some familiarity. Every student wrote papers in high school and college, and most can remember that those documents had "body" text with "paragraphs" sprinkled in. Let's add something else that our student will be familiar with: a header and a title. Make sure to show the student where the title actually pops up in the browser.
<html>
<head>
<title>This is our first web page!</title>
</head>
<body>
<p>Hello, world!</p>
<p>These lines are HTML.</p>
<p>The browser knows to split them into paragraphs.</p>
</body>
</html>
At this point, I'm going to drop the idea of adding any additional HTML tags. Drowning our hypothetical student in HTML semantics isn't fun, and they've got plenty of time to learn that down the road. Let's instead introduce the idea of tag attributes and style.
<html>
<head>
<title>This is our first web page!</title>
</head>
<body style="background:red;" name="body">
<p style="font-weight:700;" name="hello">Hello, world!</p>
<p name="hello2">These lines are HTML.</p>
<p name="hello3">The browser knows to split them into paragraphs.</p>
</body>
</html>
We're showing here that attributes, or metadata, can be added to our HTML tags to modify the appearance of that data. We've introduced the concept of styles, now let's show how we can play with those styles. Open up the style editor on your browser and change the background to blue with the student watching.
<html>
<head>
<title>This is our first web page!</title>
</head>
<body style="background:blue;" name="body">
<p style="font-weight:700;" name="hello">Hello, world!</p>
<p name="hello2">These lines are HTML.</p>
<p name="hello3">The browser knows to split them into paragraphs.</p>
</body>
</html>
That's all we've got for now. We've introduced the basic structure of a web document, and now we can show this structure throughout the web. That gives us a base upon which we'll build out all of our future lessons.