Lab Exercise 6:    Creating Hyperlinks

Prerequisites:
NOTE: You will need to complete the Exercise 5 lab assignment prior to proceeding.

A.   Requirements for the directions.html pages:

1.   Verify that your directions.html page is attached and linked to your external cascading style sheet (mystyle.css).  See the step-by-step demo instructions in the Topic 4 lecture presentation (slides 26- 28) in attaching an external CSS file to a Web page.

2.   Link to Another Web Site:  Follow the step-by-step demo instructions in the Topic 6 lectures presentation (slides 17- 19) in adding a text link to the URL address of the Google map direction and a text link for the Los Medanos College Brentwood Center http://www.losmedanos.edu/brentwood . Configure the link’s target to open the page into a new browser window.

3.  Use an Image as a Link:   Follow the step-by-step demo instructions in the Topic 6 lectures presentation (slides 27- 28) in creating the map image as a link to the URL address of the Google map direction. Configure the link’s target to open the page into a new browser window.

4.  Open a Linked Page in a New Browser window.    Follow the step-by-step demo instructions in the Topic 6 lecture presentation (slides 50- 54) in opening Google map directions above in a new browser window.

5.  Create a Link Using the Files Panel.  For the navigation menu bar, follow the step-by-step demo instructions in the Topic 6 lecture presentation (slides 47- 48) to create the links for the image buttons using the Files Panel.

6.  Preview your Web page in the Browser.  Attach is the sample output directions.html Web page.

B.  Requirements for the index.html pages:

1.   Verify that your index.html page is attached and linked to your external cascading style sheet (mystyle.css).  See the step-by-step demo instructions in the Topic 4 lecture presentation (slides 26- 28) in attaching an external CSS file to a Web page.

2.   Link to Other Pages in your Web Site.  Follow the step-by-step demo instructions in the Topic 6 lecture presentation (slides 10- 12) in creating text links for the “diner menu” to the menu.html page. Also create the text link for the Los Medanos College Brentwood Center http://www.losmedanos.edu/brentwood

3.  Create an E-Mail Link.   Follow the step-by-step demo instructions in the Topic 6 lecture presentation (slides 56- 57) in creating an email link on your Web page.

4.  Create a Link Using the Files Panel.  For the navigation menu bar, follow the step-by-step demo instructions in the Topic 6 lecture presentation (slides 47- 48) to create the links for the image buttons using the Files Panel.

5.  Preview your Web page in the Browser. Attach is the sample output index.html Web page.

C.  Requirements for the menu.html pages:

1.   Attached and linked the menu.html to your external cascading style sheet (mystyle.css).  See the step-by-step demo instructions in the Topic 4 lecture presentation (slides 26- 28) in attaching an external CSS file to a Web page.

2.  Create a Link to Another File Type:  Follow the step-by-step demo instructions in the Topic 6 lecture presentation (slides 38- 40) in creating a text link to a PDF file (Calorie_Chart.pdf).

3.  Open a Linked Page in a New Browser window.    Follow the step-by-step demo instructions in the Topic 6 lecture presentation (slides 50- 54) in opening the PDF file page above in a new browser window. Configure the link’s target to open the page into a new browser window

4.  Create a Link Using the Files Panel.  For the navigation menu bar, follow the step-by-step demo instructions in the Topic 6 lecture presentation (slides 47- 48) to create the links for the image buttons using the Files Panel.

5.  Preview your Web page in the Browser.   Attach is the sample output menu.html Web page

D.  Requirements for the hours.html pages:

1.   Verify that the hours.html that you created in chapter 6 is attached to your external cascading style sheet (mystyle.css See the step-by-step demo instructions in the Topic 4 lecture presentation (slides 26- 28) in attaching an external CSS file to a Web page.

2.  Create a Link Using the Files Panel.  For the navigation menu bar, follow the step-by-step demo instructions in the Topic 6 lecture presentation (slides 47- 48) to create the links for the image buttons using the Files Panel

3.  Preview your Web page in the Browser.   Attach is the sample output hours.html Web page


E.  Requirements for all of the Web pages in the site:

1.   Change the Color of Links on Page:   Follow the step-by-step demo instructions in the Topic 6 lecture presentation (slides 63- 67) in configuring the color of the links for your pages in the site.    Save this formatting rule in your external style sheet (mystyle.css).

2. Save all your Web pages and the mystyle.css. Go to the Files menu, select Save All.

3. Check Links: Follow the step-by-step demo instructions in the Topic 6 lecture presentation (slides 59- 60) in checking links for the LMC Brentwood Burger site.

4.  Preview your Web pages in the Browser.  Verify all the requirements above have been met and that all text and image links properly work.  See attached sample output of the Web pages.

Submit:

1. Submit a screenshot images of the Web pages displaying in your Browser on the Canvas Exercise 6 drop box.

2. Zip up your folder and submit in the Canvas Exercise 6 drop box.