Recap
In the previous step, we set up our project and created a basic homepage. You were also given a small assignment: to create three new pages—about.html, contact.html, and portfolio.html—and add the basic HTML boilerplate code to the about.html page.
If you remember, you can quickly add the boilerplate by typing ! in your editor and pressing the Tab key. Your about.html page should currently look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body></body>
</html>
Now right click inside the html, in VSCode, and then click “Show Preview” from the menu. Notice in the preview, that opens up, that the tab has a title of Document, just like we see in <title>Document</title>
When we change the text, between the tags, it will be reflected in the tab of the browser, for that webpage, as we will see in the next step.
Step 1: Updating the Page Title The <title> tag controls the name displayed in the browser tab. Right now, it says Document, which isn’t very helpful. Change it to About by updating the title tag like this: <title>About</title> Your full about.html file should now look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title></head>
<body></body>
</html>
Notice how changing the title tag content, is reflected in the browsers title bar?
Step 2: Adding a Page Heading Inside the <body> section, let’s add a heading so visitors know what page they are on. The <h1> tag is the most important heading tag and is often used for page titles. Modify the <body> section like this:
<body>
<h1>About</h1>
</body>
Now, if you preview the page, you should see About displayed in large text.
Step 3: Creating Navigation Links A website usually has multiple pages, and users need a way to navigate between them. We’ll add a simple navigation menu. Below the <h1> tag, insert the following code:
<div>
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="portfolio.html">Portfolio</a> |
<a href="contact.html">Contact</a>
</div>
This will create links to each of your pages so users can easily switch between them.
Your final html should look like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>About</title>
</head>
<body>
<h1>About</h1>
<div>
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="portfolio.html">Portfolio</a> |
<a href="contact.html">Contact</a>
</div>
</body>
</html>
Your final About page:
Step 4: Copying the Code to Other Pages Now that we’ve set up the about.html page, let’s apply the same structure to the other pages.
- Copy all the code from
about.html. (On Mac, use Cmd + A to select all, then Cmd + C to copy. On Windows, use Ctrl + A and Ctrl + C.) - Paste the copied code into portfolio.html, contact.html, and index.html.
- Update the
<title>and<h1>tags for each file so they match the page name:- index.html :
<title>Home</title>and<h1>Home</h1> - portfolio.html :
<title>Portfolio</title>and<h1>Portfolio</h1> - contact.html :
<title>Contact</title>and<h1>Contact</h1>
- index.html :
Step 5: Testing Your Pages Now, open any of your pages in a browser and try clicking on the links. You should be able to navigate between all four pages! Congratulations! You’ve now built a simple multi-page website with navigation. In the next step, we will start to fill out the details of these pages and then we’ll move on to styling them with CSS to make them look better. Stay tuned!