If you are confident that your original page is error-free, we can start creating placeholders for other pages. Simply start by creating two additional pages --- named about.html
and contact.html
--- in the same directory as index.html
.
At this point, we can conclude that each hyperlink has a concrete destination now. It is time for us to return to index.html and replace the hashtag placeholders:
We can now expect those hyperlinks to function correctly, only to lead us to empty placeholder pages. We can easily address this by cloning the entire contents of index.html into other pages, and as these pages inherit all the components from the original index.html file, we can expect them to look identical:
You can, however, choose to create a new or additional CSS file to hook up to these pages. Note that the contact.html file now hosts a slightly different content.
https://drive.google.com/file/d/1xcwL4AI1atfMgBn64vFgJEeWzB0xPC0U/view?usp=drive_link
(Updated October 31, 2023)
index.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=PT+Serif|Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="title">John Doe</div>
<div id="menu">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</div>
<div id="content">
<img src="https://picsum.photos/800/300/?image=129">
<h1>Welcome</h1>
<p>John Doe is a Toronto-based creative.</p>
</div>
</div>
</body>
</html>
about.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=PT+Serif|Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="title">John Doe</div>
<div id="menu">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</div>
<div id="content">
<img src="https://picsum.photos/800/300/?image=180">
<h1>About</h1>
<p>John Doe's specialties include design-to-code translation.</p>
</div>
</div>
</body>
</html>
contact.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=PT+Serif|Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="title">John Doe</div>
<div id="menu">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</div>
<div id="content">
<img src="https://picsum.photos/800/300/?image=250">
<h1>Contact</h1>
<p>
John Doe can be reached at
<a href="mailto:john@doe.com">john@doe.com</a>.
</p>
</div>
</div>
</body>
</html>