Topic 05

Your First Page

HTMLHands-on

Time to make something. In a new folder you will create one file, type about ten lines, and watch the browser turn them into a page. Then you will change one word and watch the page change with it. That loop, edit, save, look, is how everything else in this book gets built.

It is a little like sketching on tracing paper: quick, cheap to change, and you see the result straight away. Nothing you do on this page can break your computer or anything else, so try things freely.

Where Does the Site Live?

A website, at its simplest, is a folder of files. Create a new folder somewhere you can find it again, such as your Documents folder, and name it my-site, lowercase with a hyphen, as the previous topic advised. This folder will hold your site for the rest of the book.

Open VS Code, choose File, then Open Folder, and open my-site. The side panel shows the folder, empty for now. Create a new file in it, using the new file icon at the top of the side panel, and name it index.html. That name is not a random choice: when someone visits a website's address without naming a page, web servers send the file called index.html. It is the front door of the site.

What Do You Type?

Type the lines below into index.html, exactly as shown. Typing them rather than copying helps: your fingers learn the shapes faster than your eyes do. Do not worry about what every line means yet. Chapter 2 explains each one; for now it is enough to know that the words inside angle brackets are tags, which mark where each part of the page starts and ends.

index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Your Name</title>
  </head>
  <body>
    <h1>Your Name</h1>
    <p>I build small, useful things for the web.</p>
  </body>
</html>

In plain words, the file says: this is an HTML document in English. Its information section gives the page a title, Your Name, and says the text uses the standard way of encoding letters. Its visible part has a main heading, Your Name, and a paragraph with the tagline, I build small, useful things for the web. Save the file with Ctrl+S on Windows or Cmd+S on macOS.

How Do You See It?

With index.html open in the editor, select the Live Preview button in the top right corner. A panel opens beside your code showing the page: Your Name as a large bold heading, and the tagline underneath in ordinary text. It looks plain, because you have not written any styles yet; the browser is using its own defaults.

Now open the same page in your real browser. Copy the address from the top of the preview panel and paste it into a browser tab. The page appears there too, and the browser's tab shows the title, Your Name. Notice where each piece of text went: the heading and paragraph are on the page, the title is on the tab. The title is the name a page gives itself in tabs, bookmarks and search results, and it never appears in the page itself.

Replace Your Name with your own name, in both places, if you like. The rest of the book keeps calling it Your Name.

What Is the Loop?

Change the tagline to something of your own and save. The preview reloads by itself and shows the new text. Your real browser tab reloads too, because Live Preview tells every page it serves to refresh when you save. If a tab ever shows old text, reload it with Ctrl+R on Windows or Cmd+R on macOS.

Now change it again and do not save. This time the preview stays as it was, because in the previous topic you set it to refresh only when the file is saved. VS Code marks a file with unsaved changes with a dot on its tab, and that dot is worth watching: until you save, the file on disk still holds the old text, and the file on disk is what gets published. "I changed it but nothing happened" is, more often than anything else, a file that was not saved.

One quirk of the preview server is worth knowing. If you reload a page by hand while its file is open in VS Code, Live Preview serves the text in the editor, saved or not. The published site only ever has what you saved.

What Happens When You Break It?

Delete the closing heading tag, the </h1> at the end of the heading line, and save. You might expect an error message. There is none. Instead, the tagline now appears large and bold as well.

Fragment: the broken line

    <h1>Your Name
    <p>I build small, useful things for the web.</p>

Here is what happened. The heading was never closed, so the browser guessed that it continued, and the paragraph ended up inside the heading, taking on the heading's size and weight. Browsers are built to guess rather than refuse, so that a small mistake does not blank out a whole page for its visitors. The cost is that your mistakes are silent. Chapter 2 shows how to see what the browser actually built. Put the closing tag back and save.

The loop you will repeat for the rest of the book

Edit index.htmlin the editor

→

SaveCtrl+S or Cmd+S

→

The page reloadspreview or browser

→

Look, then changeand round again

Common Confusions

"I saved it but the page did not change." Check the address: the browser may be showing another copy, or the file may have been saved into a different folder. Then check for the unsaved dot.
"The title should appear on the page." The title element names the tab, bookmarks and search results. The heading is what appears on the page.
"The browser would tell me if I made a mistake." It silently guesses and shows something anyway. That is why the next chapter teaches you to look at what it built.

Why It Matters

You now have a real site folder, which grows through the whole book and is published in the last chapter.
Edit, save, look is the loop you will repeat thousands of times; it is worth making it smooth now.

Knowledge Check

Where does the text inside the title element appear?

At the top of the page, above the main heading
On the browser tab and in bookmarks, not the page
Only in the preview panel inside the code editor
In small text at the very bottom of the page

You change the tagline in VS Code but do not save. What does the file index.html on disk hold?

The old tagline, until you save the file
The new tagline, since the editor shows it
Nothing, because the file is halfway through
Both taglines, the old one and the new one

Why is the site's first file called index.html?

Because HTML files must always be called index
Because search engines only read files with that name
Because VS Code can only preview a file with that name
Because servers send it when no page is named

You delete the </h1> closing tag and save. What does the browser do?

Shows an error message explaining the missing tag
Refuses to show the page until the tag is back
Guesses, and puts the paragraph inside the heading
Deletes the heading text and shows only the tagline

You got correct