Adding Another Page

00:00 In this lesson, you will learn about links and images. Jumping from one website to another is an essential part of the internet. These references are called hyperlinks, commonly referred to as links.

00:13 Links allow you to navigate multiple pages of a website. You can jump over to the code to add a new HTML document and add a navigation menu to connect the pages.

00:25 Before adding the navigation menu, you’ll need to add your new HTML file. First, create a new folder and name it images.

00:34 This will contain images and your gallery.html file. Now create a new file and name it gallery.html and make sure it is inside your images folder.

00:46 Now that you have the document, you can add a navigation menu to link to that page.

00:51 To add a navigation menu, you can start with the <nav> tag. Traditionally, the navigation menu is at the top of your webpage, so you can add it to the top of your body.

01:02 So open and closing <nav> tags. Now that you have the <nav> element, create an anchor element or an <a> tag inside of the <nav> element you just created.

01:13 So drop that to a new line and inside that <nav> element <a> for your opening tag, and then </a> for your closing tag.

01:21 Within the opening <a> tag type href= equal quotes images/gallery.html. This will be the relative link to your gallery.html file.

01:35 To add context to what this links to, type gallery between the <a> tags.

01:42 Head over to your browser to see what this looks like.

01:46 You can now see the new navigation menu at the top of your page. Try clicking it. You may notice it takes you to a blank page. You haven’t added any content yet. You were unable to navigate back to your main page as well.

02:00 Head back over to your code to add a navigation menu for this page. I recommend using the boilerplate HTML code you previously made to add to your new gallery page.

02:12 Update the title to be relevant to your page. You can add Image Gallery. Now add another <nav> element to this page, so within the body add <nav> tag and your </nav> closing tag and drop that to a new line because inside of that <nav> element, you’re going to add an <a> tag just like before.

02:32 So <a> for your opening and then </a> closing tag.

02:42 Within your <a> opening tag, add href=quotes../ 51 index.html`. The two dots indicate you’re moving up a directory to your parent directory.

02:50 Your index.html file resides now between the <a> tags. Add Home. This will indicate that you’re going to link back to your homepage.

03:00 You’ll be adding images to this page soon, but first, you can head over to your browser to see what this looks like.

03:08 Now that you have your browser open, go ahead and navigate to your gallery page. As you can see, you can now jump between your homepage and your gallery page.

03:19 Now would be a good time to dive a bit deeper into understanding the links you just used. To recap what you’ve learned, the href stands for hypertext reference, which contains the link’s target. Relative links allow you to reference files in your directory tree.

03:35 An example of this would be the gallery page that you connected to using a relative link. Next, you can add absolute links to your page.