1.1 Web Pages and the HTML Document
You look at web pages every day: news, videos, shopping, chat. They look wildly different, but underneath they're all built from the same three technologies:
- HTML handles content and structure — the page's "skeleton."
- CSS handles look and style — the page's "skin and clothes."
- JavaScript handles interaction and behavior — the muscles that make a page "come alive."
This chapter starts with HTML. It's the easiest to pick up: you just wrap your content in pairs of "tags," and the browser knows how to display it.
What is a tag
HTML marks up content with tags. Most tags come in pairs — an opening tag and a closing tag — with content in between:
<h1>This is a big heading</h1>
<p>This is a paragraph.</p><h1> is the opening tag, </h1> is the closing tag (note the extra slash /), and the text between them is the heading's content. When the browser sees <h1>, it thinks: "Ah, a top-level heading — display it big and bold."
The skeleton of a complete page
Every HTML page has a fixed "shell." Memorize this template and you can start building pages:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>A visible big heading</h1>
<p>Visible body text.</p>
</body>
</html>Line by line:
<!DOCTYPE html>: tells the browser "this is a modern HTML document."
<html>: the outermost container for the whole page.
<head>: holds information about the page that users don't see in the body — the title, character encoding, linked CSS.
<title>: the page's name, shown on the browser tab.
<body>: holds everything visible on the page — headings, paragraphs, images, buttons.
<head> vs <body>. One line to remember: <head> is behind-the-scenes info, <body> is on-stage content. Almost everything you see on a page lives in <body>.The lab below lets you edit the <title>, <h1>, and <p> content, and the code on the left and the "browser" on the right update together. Pay special attention: changing <title> only affects the tab, not the body.
How to try it yourself
You don't need any fancy software:
1. Create a text file and copy the template above into it.
2. Save it as index.html (note the .html extension).
3. Open the file in a browser, and your first web page appears.
The exercise below has you write your very first page by hand.