How To Create Additional Webpages on Your HTML Website
When building a website, you may want to have more than one webpage. If you want to add and link to additional pages, you’ll need to first create a new html file in your website project directory. In this tutorial, we’ll learn how to create and link to an additional webpage on your website
Our demonstration website includes an “About” webpage. In this tutorial, we’ll walk you through the process of creating and linking to an “About” webpage, but you may change the title and the content of this page to fit your needs.
To add a new page to your website, create a new file named about.html and save it in your project directory html-practice . (If you have not been following the tutorial series, you can review instructions for setting up a new html file in our tutorial Setting Up Your HTML Project.)
Note: If you decide to choose your own name for the file, make sure to avoid character spaces, special characters (such as !, #, %, or others), and capital letters as these can cause problems later on. You must also include the .html extension.
Next, you’ll need to format the file by adding information that will help the browser interpret the file content. To format the file, add following code snippet at the top of the document:
Make sure to change the highlighted text with a title you want for you page. For an explanation of each of the HTML tags, please visit the earlier tutorial in this series Adding an HTML Element To Your Webpage. Save the file before you continue.
Before adding any content to this page, let’s walk through the steps of adding a link to this page on your homepage.
First, return to your index.html file and add the following snippet below the subtitle of your site and above the closing
tag:
. pstyle="font-size:20px;color:#1F9AFE;">ahref="Webpage_FilePath">About this sitea>p> .
Change the highlighted file path to the relative file path of your “about.html” file. The relative path refers to the file location relative to the current working directory (as opposed to the absolute path, which refers to the file location relative to the root directory.) If you are using the Visual Studio Code text editor, you can copy the relative file path by CTRL + Left Click (on Macs) or right-clicking’ (on Windows) on the file icon and selecting Copy Relative Path.`
Note that we have also specified a font-size and color using the style attribute. Save your index.html file and reload it in the browser.
You should now have a link that directs to your about.html web page like this:
If you receive an error, make sure that your file is in the same project directory as your index.html file and that there are no errors in your project path.
You should now know how to create and link to a new webpage on your website. You can use these same steps to create and link to additional webpages on your website. You can also add content to any new webpage in the same way you are learning to add content to your homepage.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Tutorial Series: How To Build a Website with HTML
This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.
At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.
Learn how to create multiple pages in HTML with three easy-to-follow steps.
Step 1: Create a folder
The first step is to add a folder. A folder stores all your pages in one place and makes it easier to organize your project.
To create a folder in Visual Studio Code, click the Explorer icon on the left sidebar and click the new folder icon.
You can name the folder however you like, and in this guide, I call it business-website as an example only.
Step 2: Create an HTML file
The second step is to add HTML files. The HTML files will serve as a page of the website, and you can have as many pages as you like. In this guide, we will make only four web pages.
To do that, first, add a new HTML file inside the folder, and we will name it index.html . That will be your homepage, and it is crucial to call it an index because when the webserver first loads your site, it will search for index.html by default.
Next, add three other HTML files and give the filenames as about.html , service.html , and contact.html . Make sure that all these files are in the same folder.
When you finish it, your website directory should look like this:
Step 3: Create a navigation bar
Okay, you are almost there! The only thing left is to add a navigation bar in all HTML web pages so that the visitors can navigate your website.
To create a navigation bar, add the nav elements inside the body elements. Inside the nav elements, create a navigation link by adding the a elements, and each link should have the href attribute where the value is the name of the HTML file.
For example, to link a contact page, you do like this:
a href="./contact.html">Contacta>
The final code should look like this in every HTML file.
htmllang="en"> head> meta charset="UTF-8" /> meta http-equiv="X-UA-Compatible"content="IE=edge" /> meta name="viewport"content="width=device-width, initial-scale=1.0" /> title>Business websitetitle> head> body> nav> a href="./index.html">Homea> a href="./about.html">Abouta> a href="./service.html">Servicea> a href="./contact.html">Contacta> nav> body> html>
Conclusion
And now it is all done! When you head back to the browser and click any links in the navigation bar, it will take you to its destination page. With this, you have learned how to create multiple pages.
I hope you find this guide helpful and happy coding!
Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript
One is a single-page website (not to be confused with a SPA) that has all its content in a single HTML web page or an HTML document.
The other type is a website that has multiple pages (multiple HTML documents). Each HTML web page has different content in it. They might or might not share the common stylings, including the header and the footer elements.
Benefits Of Multi-Page Website
A website that has limited content to display to the end users may use the benefits of a single-page website. But there are so many reasons why we see a lot of multi-page websites on the internet.
A multi-page website segregates content on the website better. Rather than adding all the content for the website on a single page using headings, a multi-page website is able to better manage and showcase content on different pages based on the context.
A multi-page website offers better user flow and user experience. Users use the top navigation to navigate between web pages of a website. The navigation menu makes it clear that such and such content is at such and such page.
A multi-page website is search engine friendly. When you have a lot of content that differs in context between them, it’s a great idea to have a multi-page website. Not only users would be able to better understand the contents of the website, but also search engine bots that crawl your website are able to better segregate the contents based on the web pages.
Creating A Multi-Page Website In HTML
Now that we know the benefits of a multi-page website, let’s make a simple one in HTML.
Step 1 — Creating our first HTML page
Open a code editor like Visual Studio Code, Sublime Text or Notepad++. If you don’t have any of the text editors, open a notepad.
Then create a basic HTML structure like the one below (I will provide the source code at the end of the blog)
Save this notepad file in your preferred folder location and save it as index.html
Now, we will change the title and create a header for this web page
Step 2: Creating Two More Web Pages
Similar to how we created the home page, we will create two more web pages. The contact page and the about page. Our folder now looks like this.
Step 3 — Linking Multiple Website Pages Together In HTML
It’s now time to link the multiple pages that we have created on our website.
We will create a navigation menu that will link all of the pages together.
We will first change the code in our index.html page to the below:
And we will copy this nav element to the other pages as well (about.html and contact.html)
Step 4 — Running Our Multi-Page Website
Now, go back to your folder where you have saved all your files.
Right click on the index.html file and open this file with the preferred browser.
Result
This will open your multi-page website in the browser.
Use the navigation on the top to navigate between pages. This is how you can make multi-page websites easily.
Change the content of the web pages to the content that you want to add to your website.
Multi-Page Website In HTML — Source Code
Recent Posts
Add Items To List C#
A list represents a collection of strongly typed objects. This can be a list of integers, a list of strings, or a list of complex types. A list in C# is an easy way to maintain a collection of similar types and then using the functions that C# provides you can easily iterate on that list if you need to. There will be numerous use cases when you would need to add a new item to a list dynamically. For example, if you have a list of years that are from 2000 to 2020, now it’s time to add the next 10 years to that list. You would need to dynamically add items to the list so that you can use them.
How To Play Wordle
What is wordle? A common question that people ask other people or search online when they hear their friends or colleagues talking about it in meetings, chats, online forums, etc. Wordle is an online game that got launched last year in October and since then its popularity has not come down even one bit. Wordle is a game in which the user has to guess a five-letter word in the attempts provided. The simple user interface of the game provides five boxes in which the player has to type characters to form a word.
How To Insert An Image In HTML — [Source Code]
In this modern-day world, a website is nothing without an image. We have seen that websites in the late 90s or early 2000s had more text and less of images. This is not true today, every web page has lots and lots of images that portray their product, their business, or a blog in a much nicer and more descriptive way. Using graphics and infographics, web pages can convey their message in a great way without using too many words. Even in this blog post or other blog posts in this blog, we use a lot of images frequently with text to explain our topic.
Full Screen Overlay Navigation Bar Using HTML, CSS and JAVASCRIPT [Free Source Code]
In this blog post, we are going to create a fancy navigation bar using HTML, CSS, and Javascript. This navigation menu would be not just a regular navbar, but, a full-screen overlay navigation menu. This will be a responsive navigation bar menu that will be responsive for both mobile and desktop displays. It will be really fun to code this and navigation bars like these create an amazing impression of your website in the user’s head.
Create A Dropdown List In HTML
Dropdown lists if you have seen them before on other websites are extremely powerful. They provide the user a clear list to select a single option from the list of options that the dropdown menu provides. They provide a good overall user experience. An example of a dropdown list in a general everyday website is the month picker. Using a dropdown list you can give the user to select the month of their birth.
