Lounge Independent Project - Images, Tables, &Hyperlinks
1. Download and extract the .zip file containing the data files for this project. Rename the outermost folder to be Lounge1-Your Last Name Your First Name.
2. Do not change the folder hierarchy in any way. You need your links and images to work based on where the files currently are. All CSS needs to be in the lounge.css file.
3. Use Paint, or another image editor, to resize the biglounge.jpg image so that it is only 40% of its current size. Save the image inside the images folder, giving it the name smlounge.jpg.
4. Open the lounge.html file in your HTML editor and make the following changes:
a. On line 10, add the code to insert the logo.gif image that can be found in the images folder.
b. On line 39, you will see the text drum and bass. Replace the word and with the HTML entity&.
c. On line 52, replace the comment with the code to link the text detailed directions(on line 53)to the directions.html page found in the about folder.
d. On line 59, add the code to insert the yellow.gif image that can be found in the images folder.
e. On line 60, you will see an
element with the text Lemon Breeze. Make the Lemon Breeze text a link directly to the Lemon Breeze section of the elixir.html page. You need to use a bookmark anchoron the elixir.html page at the Lemon Breeze section for this to work.
f. On line 70, add the code to insert the chai.gif image that can be found in the images folder.
g. On line 78, add the code to insert the black.gif image that can be found in the images folder.
h. On line 89/90, add a link to the elixir text that links to the elixir.html page found in the beverages folder.
i. On line 107, insert the smlounge.jpgimage. Using CSS, center the image horizontally on the page and give it a colored border.
j. On line 109, add the copyright symbol using the proper HTML entityat the beginning of the line directly in front of 2014.
5. Open the elixir.html page found in the beverages folder in your HTML editor. Make the following changes:
a. Add a hyperlink to the Back to the Lounge text on line 53 so that when clicked, it displays the lounge.html page.
b. Use CSS to make the text for each of the
drink names to be a color similar to the drink.
c. Add the code to create a table at the end of the Web page but above the Back to Lounge link. Use rowspan and colspan appropriately to match the table layout; there is at least one place to use each. Also, use a table within a table (=nested table) to accomplish the layout in the middle column of the last row and again in the right column of the last row.Use CSS to style the table attractively and professionally. Alignment of the cell contents must be consistent to what is shown below (first row text centered and bold, second row has three "column headings," each of which is to be centered in that column, bold, and has no inside borders). The table should be centered on the page and span 60% of the width of the page with each of the main three columns comprising 20%. See image on the next page for the layout and data for the table.
6. Open the directions.html file found in the about folder. Add a hyperlink to the Back to the Lounge text on line 20 so that when clicked, it displays the lounge.html page.
7. Add appropriate internal documentation (comments) to each file. This includes name, date, project name at a minimum.
8. Be sure all three HTML files and your CSS file pass validation.
9. Zip your project folder and submit it to the correct Dropbox.