hyperlink

My Portal page (using Hypertext Links)

In this project, you will experiment with various kinds of links. This will involve modifying web pages to create functioning links.

NOTE: Do not move any files or folders from their current locations! You need to be able to create functioning links to files within other folders.

1. Download the Portal.zip file and extract its contents. Rename the extracted Portal folder to be Portal-YourName, replacing YourName with your last and first names (Ex: Portal-AtwellLisa)

2. Open the index.html file in your HTML editor. Make the following modifications/additions to the HTML code:

a) Comments should be added at the top of your head section to include your name, date, and project name

b) The text that appears on the tab for this page should be Portal

3. Open the classes.html file in your HTML editor; this file is inside the subpages folder. Make the following modifications/additions to the HTML code:

a) The text that appears on the tab for this page should be Classes

4. Open the aboutUs.html file in your HTML editor; this file is inside the subpages folder. Display the file in your Web browser to see how it looks. Notice that there are eight strategic goals listed out in paragraph form. Alter the HTML code for this page so that:

a) The text that appears on the tab for this page should be About Us

b) The eight goals appear as an ordered list.

c) The eight individual goal topics (“Quality”, “Effectiveness”, etc.) appear as bold text.

5. First, let’s play with external links using fully qualified (= absolute) URL’s. Go back to the index.html file and make the following modifications/additions to the existing HTML code:

a) Create a level 2 heading with the text External Links that will appear at the top of your Web page when rendered in your browser.

b) Place a link to the OTC site on your page, URL: http://www.otc.edu. You can choose the text you use for all links you create, but make it appropriate using the recommendations presented in the chapter.

c) Place a link to the myOTC page on your page, URL: https://my.otc.edu/portal/render.userLayoutRootNode.uP

d) Place a link to the OTC Foundation Scholarship on your page, URL: http://foundation.otc.edu/what-we-do/otc-foundation-scholarships/

e) Place a link to the SkillsUsa home page on your page, URL: http://skillsusa.org/

f) The links you created in steps b-f should each be on their own line.

6. Next, we will experiment with local links. Create the following as local links using partial (= relative) URL references.

a) On the bottom of index.html , you will notice the text Classes and About Us. Edit the HTML code so that the Classes text links to the classes.html page and About Us links to aboutUs.html page.

b) On the bottom of classes.html , use the Portal and About Us text to create working hyperlinks to index.html and aboutUs.html respectively. Remember the importance of the correct path to the linked resource.

c) On the bottom of the aboutUs.html document, use the Portal and Classes text to create working hyperlinks to index.html and classes.html respectively.

7. Now create an internal bookmark link on the classes.html page so that the Back to Top text is a hyperlink that takes the user back to the top of the same page. Use internal comments to document both sections of code that are involved with this process.

8. Go back to the index.html file and create a hyperlink so that when the user clicks on the image, they are linked to aboutUs.html .

9. Finally, use an anchor tag to create an e-mail hyperlink. Go to the aboutUs.html file and edit the code so that after the Strategic Goals list, you add a blank line and then add a line containing text that says E-mail OTC: followed by your OTC email address. Turn your email address into an e-mail hyperlink.

10. Validate each of the pages using the W3C Validator and be sure TEST ALL OF YOUR LINKS.

See Next Page for Grading Rubric

Grading Rubric:

REQUIRED ITEM	POSSIBLE POINTS	POINTS RECEIVED
Files saved and named appropriately	2
Correct text appears in the browser tab for each page	3
page3 goals are an ordered (numbered) list with topic in bold	3
Level 2 heading created	1
External links / anchor elements added correctly and text chosen as links was appropriate	4
Local & email hyperlinks added in correct spots; links correctly open the expected page	6
Internal link / bookmark link implemented correctly	3
Image hyperlink implemented correctly	2
All pages validate	4
Requested comments included	2
Final Grade	30