Great question! If you have multiple pages on your website and you want to link them all together, it is actually pretty simple.
First, you will want to copy the code you have in your
index.html file over into a new blank document.
Next, you will want to edit the
<title></title> tags inside of your
<head></head> tags with the name of the page you are creating. In this example, I will be creating an About Erin page so mine will look like
Once I have that done, I will be removing everything inside the
<body></body>Tags. Then I will be adding a
<h1>About Erin</h1>to the page. This is the first header on the page and tells everyone what your page is about.
Then I will be adding paragraph tags:
<p></p> which will include a little bit about me. For me I am going to say:
<p>Hello, I'm Erin. I am married with 2 cats. My favorite color is black. I own the Coding Help Subreddit and Discord Servers.</p>
I will also include an image after the code above that is a picture of me:
<img src=“image-source.png” alt=“Erin” />
This is how my page should look so far:
<!DOCTYPE html> <html> <head> <title>About Erin</title> <link rel="stylesheet" type="stylesheet/css" href="style.css" /> </head> <body> <h1>About Erin</h1> <p>Hello, I'm Erin. I am married with 2 cats. My favorite color is black. I own the Coding Help Subreddit and Discord Server.</p> <img src="image-source.png" alt="Erin" /> </body> </html>
Then I will save this as
about.html. Once I do that, I will upload it to my hosting.
Now that it is created and uploaded to my hosting, I’ll go back to my
index.html and add a link to my about page like this:
<a href=“<https://link-to-file.com/about.html”> title=“About Erin”>About Erin</a> You can place this anywhere on that page. Save the file and make sure it is updated.
Visit the web page on your hosting and BAM! You have your new page and it is successfully uploaded. Everyone can view your About page (if you did the same as me) and you can create as many pages as you like.
In a future tutorial, I will be going over how to create a horizontal navigation bar. Stay tuned for that and you can see how I go about creating a bar to link all of these pages together. Happy coding!