HTML Project Lesson 5 - Placing Links in Your Site
You have made four web pages, but there is no way for someone viewing one of your pages to get from one page to another. In this lesson you will place links in each page, allowing those who view your web site to navigate between your pages.
1 |
|
Open the NotePad HTML file for your home page (index.htm).
2 |
|
Just before the closing </center> tag, place a <p> tag, then double-space and add the line of HTML shown below to insert your links.
Your page should look like below.
3 |
|
Click on the link beneath the image. It should take you to the web page featuring the profile of Heartland Equality. Click on the Back Button in your browser to return to your home page.
4 |
|
Add the HTML shown below to your HTML for the first link. This will place 3 links on your page, allowing you to visit the photo, profile, andshow results page from the home page.
Your page should look like below.
5 |
|
Check the 3 links on the home page, by clicking on each one. Each one should take you to their respective page.
6 |
|
Remember how you copied the entire HTML for a results table and pasted it back into the page? This time you are going to copy the HTML you just placed in the Home page to make the links and paste it into the HTML of the Profile page.
In the NotePad HTML file for the index.htm, highlight the HTML you just placed in the page to make the links. Right-click on the selected text and choose Copy.
Open the NotePad HTML file for the Profile page (profile.htm). Place a <p> tag just after the closing table tag, double-space, then right-click and choose Paste. The HTML that created the links in your home page should now be in your Profile page.
In the NotePad HTML file for the index.htm, highlight the HTML you just placed in the page to make the links. Right-click on the selected text and choose Copy.
Open the NotePad HTML file for the Profile page (profile.htm). Place a <p> tag just after the closing table tag, double-space, then right-click and choose Paste. The HTML that created the links in your home page should now be in your Profile page.
7 |
|
The HTML you just pasted from your home page has a link to the profile page. Since this HTML is now on the profile page, that link is no longer needed. You do now need a link to the home page. As shown below, change the HTML so that the profile page will not link to itself, but instead link to the home page.
Open the profile page in the browser. Click on every link to be certain that it works. Your page should look like the status check below.
8 |
|
Just as you did for the profile page, copy and paste the HTML for the links into the photos page and the show results page. Be certain tochange the HTML each time so the page does not have a link to itself. Each page should have 3 links, linking to the each of the other 3 pages.
Once you have placed links in all your pages test the three links on each of the 4 pages to make sure all 12 links work.
Once you have placed links in all your pages test the three links on each of the 4 pages to make sure all 12 links work.
9 |
|
Open the NotePad file displaying the HTML for the photos page. In the first cell of the table is a photo. Alter your HTML as shown below to make the photo a link to larger version of the photo. NOTE: Be certain that you understand the explanations below.
View the photos page in the browser. Place your cursor over the first image. The "arrow" should turn to a "hand", click on the image. A larger version of the image should appear. Click on the Back button in your browser to return to the photos page.
10 |
|
Just as you did for the image in the first cell, make the images in the second and third cells links as well. In the second cell you will be linking to equality2_big.jpg and in the third cell you will be linking to equality3_big.jpg.
Once you have finished, view the page in the browser to test all three image links.
Save your files and upload all 4 of them below.
Once you have finished, view the page in the browser to test all three image links.
Save your files and upload all 4 of them below.