Project 10 - Links

Allow plenty of time for this project. If you are new to creating web pages, you will probably need to review the basics of creating, editing, viewing, and uploading web pages from the previous projects while you are working on this project. Many students find they need to proofread their code several times before it is error free. Allow time to study lecture notes, proofread, practice and ask questions.

You can start this project now, but do not submit the project until after you receive your grade report for the last project. There may be corrections that need to be made.

Correcting errors that have been listed in previous grade reports must be completed before starting this project. Any uncorrected errors that have been noted in grade reports will result in a deduction in the score of this project.

Being able to send an accurate URL for your published pages is an important skill. Sending an invalid URL for this project will result in a deduction in the score of this project.

• Read project instructions
• Read Lecture Notes about Links
• Visit the W3Schools website and answer the self-check questions
• Use the link to the self-check answers to check your own answers
• Ask questions about anything that you don't understand.
• Add links to your practice files from previous projects.
• Proofread your code by comparing it with the solution provided.

Links for Project:

• Self-check answers
• Sample code for edited practice files
• Lecture Notes about Links
• Lecture Notes about Using Validator

To be graded:

• Complete the lab project
• Upload the edited hometown.html file and the movies-xx.html file to your webspace at Geocities.
• Send the URL for your hometown.html file to the instructor

In this project, you will:

• edit the pages you have used in previous projects to add links;
• if you have not done the last two projects, you will have to complete the activities in the last two projects before you can continue with this project;
• you should also make any corrections given in the last two grade reports before continuing with this project.

Links:
Use the <a> </a> tag to create links. Links within your own website are referred to as relative links. Links to pages outside your website are absolute links. Both types of links require using the href attribute.

Standard format for a relative link:
<a href="filename.html">text for hyperlink to display on page</a>

Standard format for an absolute link:
<a href="http://www.domain.com/filename.html">text for hyperlink to display on page</a>

To create a link:

• Type the text that you want to display as the link.
• Surround the text with code to make it a paragraph or a heading.
• To the LEFT of the text to be used as the link, add the starting tag for the anchor tag <a>.
• In the starting tag, add the href attribute. <a href>
• Add the value for the href attribute. <a href="filename or URL">
• To the RIGHT of the text, add the ending tag for the anchor tag </a>.

Sample code for a relative link to a page named "mywebpage.html":

<p>
Please visit my new <a href="mywebpage.html">web page</a>.
</p>

If a link is to a page OUTSIDE of your own website, an "absolute" link is needed. An absolute link requires using the complete URL for the value of the href attribute. Link code to the Parkland home page is written as shown below.

<p>
For more information about attending one of the best community colleges in the nation, visit the home page for <a href="http://www.parkland.edu/">Parkland College</a> in Champaign, Illinois.
</p>

• The value for the href attribute gives the complete URL for the web page, including the http://
• This type of link code is referred to as an absolute link. Because the page is not in the same website, the complete URL must be used so the browser can locate the file.

Read Lecture Notes for this project to get more details about how to create code for links.

For more information about the anchor tag, visit:
http://www.w3schools.com/html/html_links.asp

Self Check Questions

Read the Lecture Notes about creating links.

Use the link to go to the W3Schools home page.
http://www.w3schools.com
On the W3Schools home page, click on the link to "Learn XHTML."

• Click on the link to "XHTML Tag List."
• In the Tag List, click on the link to view information for the <a> tag.
• Scroll down the page to find the section named "Try-It-Yourself Demos."
• Click on the link for "Create hyperlinks."
• When viewing these examples, the first code is for a "relative" link. The second code is for an "absolute" link.

Review questions:

1. What is the start tag for a paragraph?
2. What is the end tag for a paragraph?
3. What format is used in code to add attributes to a start tag?
4. What is the start tag for a paragraph that is to be right-aligned?
5. What is the end tag for a paragraph that is to be right-aligned?
6. What is the start tag for a level 3 heading that is to be centered?
7. What is the end tag for a level 3 heading that is to be centered?
   
   Questions about Linking
   
8. What is the <a> tag used for in HTML?
9. What required attribute is added to the <a> start tag?
10. How do you determine what to use for the value of the attribute in the start tag?
11. What is the end tag for the <a> tag?
12. Where do you place the start tag for text that you want to be a hyperlink?
13. Where do you place the end tag for the text that you want to be a hyperlink?
14. What should be used as the value for the href attribute if you want to create a link that goes to the Google home page at http://www.google.com?
15. Write the code to create a hyperlink to Yahoo if the address for Yahoo is http://www.yahoo.com and you want the visible text for the link on the page to be the word Yahoo.
16. Write the code for a relative link to a page named bio.html. Make the text of the link be: My Biography

Assume you have a website for a business to provide people with home-cooked meals. Your website includes these three pages and they are stored in your webspace at Geocities.com.
The complete URL for these pages will be something like: http://www.geocities.com/yourlogin/filename.html.
The actual page names are:

• index.html (the home page of your business)
• meals.html (page that lists menus available)
• owners.html (page that gives information about the owners)

On your home page, you have this paragraph of text:
<p>Our menus offer a wide variety of entrees.</p>

17. Add code into the above paragraph to make the word "menus" into a link to the meals.html page.

On your meals page, you have this paragaph of text.
<p>Return to our home page</p>

18. Add code into the above paragraph to make the words "home page" into a link to the index.html page.

On your owners page, you have a paragraph that says:
<p>Check out our menus</p>

19. Add code into the above paragraph to make the word "menus" into a link to the meals.html page.

On your meals.html page, you have a paragraph that says:
<p>Meet the owners.</p>

20. Add code into the above paragraph to make the word "owners" into a link to the owners.html page.

On your meals.html page, you have a paragraph that says:
<p>Our meals all follow the guidelines for a well-balanced diet based on the UDSA's food pyramid.</p>

21. Add code into the above paragraph to make the words "USDA's food pyramid" a link to the website on the Internet that has this as the URL:
    http://www.lifeclinic.com/focus/nutrition/food-pyramid.asp

On the owners.html page, you have a paragraph that says:
The owners earned a degree in Food Service and Restaurant Management from Parkland College in Champaign, Illinois.

22. Add code into the above paragraph to make the words "Food Service and Restaurant Management" into a link to an information page for this program at Parkland that has this as the URL:
    http://www.parkland.edu/bai/food/

Practice Activity for Links

Open Notepad. Open the practice-xhtml.html file from the previous project.

If necessary, review information about editing existing files from an earlier project before starting work on this project.

After the paragraph that displays your address:

• Add another paragraph.
• For the text of the paragraph type the words: Practice Page
• Add the code to make the words "Practice Page" into a link to the practice.html page you created for a previous project.
• This should be a relative link using the filename for the value of the href attribute.
• Add another paragraph. For the text of the paragraph type the words: W3Schools Links Info
• Add the code to make the words "W3Schools Links Info" into a link to the page at W3Schools that describes how to create code for links.
• The URL for the page is: http://www.w3schools.com/html/html_links.asp
  This should be an absolute link using the complete URL for the value of the href attribute.

Save the changes.

In Notepad, open the file named practice.html from a previous project.

After the paragraph at the end of the page:

• Add another paragraph. For the text of the paragraph type the words: XHTML Practice Page.
• Add the code to make the words "XHTML Practice Page" into a link to the practice-xhtml.html page. This should be a relative link using the filename for the value for the href attribute.

Save the changes.

View and test your pages in the browser.
Check your code against the sample solution for this project.

Lab Project

Before doing these activities, it is important to:

• Read the Lecture Notes
• Do the Practice activities
• Complete the self-check questions

Short answer questions:

1. What is the standard format for adding attributes to a start tag? (see Lecture Notes)
2. What is the name of the required attribute used when creating a hyperlink?
3. When adding the attribute to the code for the hyperlink, is the attribute added to the start tag or to the end tag?
4. When do you use just the filename in the code for a hyperlink?
5. When do you use a complete URL in the code for a hyperlink?
   
6. Approximately how long did it take to complete this project?
7. Comparing this project to the last two projects, was it about the same level of difficulty, more difficult or less difficult?

Coding:

Open Notepad.
Use the File menu in Notepad to open the file named movies-xx.html.
Edit the code according to the directions given below.

After the last paragraph, add a new paragraph.
Add the following content for the text of the paragraph:
This website is being created for a class being taught online at Parkland College.
In the text of the paragraph:

• add the code to make the words "Parkland College" a link to Parkland's homepage. The URL for the page is: "http://www.parkland.edu/"

Be sure to end the paragraph.

Add a new paragraph that says:
Return to my first page
In the sentence, add the code to make the words "first page" a link to your hometown.html page. Since this page is in the same storage location as your movies-xx.html page, use a relative link. The value for the href attribute is just the filename and extension: "hometown.html" 

Be sure to end the paragraph.

Save the changes.

Notepad will only allow you to have one document open at a time. If you want to keep the previous file open while you work on another one, go to the Start button and open another window of Notepad.

With Notepad open:
Use the file menu to open the hometown.html page from a previous project.
Follow the directions given below to edit the file.

Place your cursor at the end of the code on your page: <h1>My Hometown</h1>
Press ENTER to start on a new line and type text that says: Introduction to Your Name (replacing the words "Your Name" with your first and last name). Surround the text with the tags to make it an <h3> heading.

Add a paragraph (just before the ending </body> tag).

In the paragraph type text that says:
Go to my movies page
In the paragraph, add code to make just the words "movies page" a link to your movies-xx.html page. Since this page is in the same storage location as your hometown.html page, the value for the href attribute is just the filename: "movies-xx.html"  Be sure to end the paragraph.

Save the changes. 
Test in the browser. 
 

Edit if necessary and save again.  You should be able to click on the links in your two pages to go back and forth between the pages.  When you use the link to the Parkland homepage, use the Back button in the browser to return to your page.

Optional:

Validate your code to check for errors using the online validator provided by the W3C. Only the movies-xx.html page is coded to take advantage of using the validator. If you want to use the validator for the hometown.html file, open the hometown.html file and copy and paste codes from the movies-xx.html page to:

• Add the DOCTYPE statement code as the first code of the page
• Add the xmlns attribute code into the opening <html> tag
• Add the meta tag that declares the character encoding

If you choose to use the validator, ALWAYS use it BEFORE you load your files to Geocities. Review the Lecture Notes about the validator to help you understand how to use it more effectively.

http://validator.w3.org/file-upload.html

Upload the edited html files to your webspace at Geocities.  

Go to www.geocities.com, sign in, click on File Manager and use the Upload feature to upload your pages to Geocities.  Upload both of your html files. 

Send the answers to the lab activity questions and the URL of your hometown.html file to the instructor.

Your URL should be something like:
http://www.geocities.com/login/hometown.html

When you send the URL to me, send a copy of the email to yourself and test the link to be sure it works.  You will lose points if I have to ask you to resend your URL. 

• Reminder: Send answers / URLto both of these email addresses:

  [email protected]
  [email protected]

• The subject of the email should be: CIS 151 -Your Name - Project 10