For this assignment, I want you to re-create the page shown in the screenshot below. Please note that the project will be graded on the correctness of the HTML. Your webpage may look perfect and still receive a poor score if the underlying code has mistakes. The two most common deductions are missing end tags(required for all tags except < br>, < hr>, and < img> tags) and accidentally placing attributes in end tags(never do this).
Also, and this is important, only use tags and attributes that I have shown you. Yes, I know there are things like style attributes and style sheets. I want you to use the toolset I have shown you. This helps reduce the chance of cheating.
You must use a text editor for this assignment. Notepad/Notepad++/Wordpad are all okay to use on Windows based machines. These text editors are not available on Apple computers. If you use an Apple computer you can use a text editor like TextEdit, Sublime Text 3, Atom, or UltraEdit.
Tahiti Webpage: see image.
*NOTE: The number of words you have per line may vary from the picture above based on the size of your browser window and the resolution setting on the computer you are using. In other words, don't assume your text will end exactly as it does on each line.
The page should have the following characteristics:
1. Copy all 4 picture files to the location you are creating your html file so that your webpage can find them. For instance, you could put the 4 pictures and your HTML file on your desktop or in your downloads folder. All the text you need is in the file text_for_html_page.txt. You may copy and paste that text into your web page if you wish.
2. Create the file MyVacation.htm in the program notepad or another text editor (web code generators are not allowed)
3. Make sure you start your page with the following HTML code
< html>
< head>< title>My Awesome Vacation< /title>< /head>
< body>
< /body>
< /html>
4. Change the background color of your page to GreenCopper. If the color does not come out a shade of green make sure you use the color value rather than the color name
5. At this time also change the color of the text on the page to white using an attribute in the existing body tag
6. Copy the text from the file text_for_html_page.txt to the body of your page. Make sure you go back and replace my name with your actual first and last name on the 1st line)
7. Now add three sentences on to the last line of the page(In the Final Leg of the Trip section). Leave the existing text in that section and simply add onto it. Add in a description of a place that you have enjoyed vacationing in. I hate to have to say it, but keep it clean of language and content. I don't care if you got wasted on the last Spring Break trip. Its not appropriate to put it in the assignment. Occasionally, I have someone tell me that they have never gone on vacation. If that applies to you, put a description of a place you would like to go someday. Dont add any pictures or hyperlinks, just the text.
8. Now go back and change the section heading text Tahiti, Laos, and The Final Leg of the Trip and italicize the text, change it a < h3> size, and center the headings. Do not center the other text in the page.
9. The text "The following two pictures link to an awesome dive company and to an equally awesome resort." should have it's text changed to the color yellow. Do this with the font tag.
10. Also using the font tag, change both of the words awesome from step 9 to two sizes larger than the default size of the text. Note: Only the words awesome should be two sizes larger, all other text on the line should remain the default size.
11. Add the picture shark.jpg and hotel room.jpg on a new line after the 3 paragraphs about Tahiti. Set the width of both Tahiti pictures to 300 pixels. Also set the border=0 for each of these tags. (These picture files have been supplied for you.) Make sure both pictures display correctly on the page.
12. Make sure that both Tahitian pictures (shark and hotel room) are centered on the line. Remember that align=center does not work in the < img> tag. Do not use the < pre> tag to attempt this.
13. Do not add any blank spaces between the Tahitian pictures.
14. Add the picture laos1.jpg and laos2.jpg on a new line after the last sentence in the Laos section. Set the height of both Laos pictures to 200 pixels.
15. Make sure there are exactly 7 blank spaces displayed between the Laos pictures
16. Make sure the Laos pictures are centered on the page. Use a tag to do this, don't try to space it over. Remember that align=center does not work in the < iimg> tag. Do not use the < pre> tag to attempt this.
17. Go back and make the shark.jpg picture a hyperlink to www.moorea-ocean-adventures.com/ (Make sure the link works)
18. Go back and make the hotel room.jpg picture a hyperlink to www.hilton.com/en/hotels/pptmlhh-hilton-moorea-lagoon-resort-and-spa/ (Make sure the link works)
19. Make sure that the line spacing is left as it is in the instructions. You will find that you will need to use < br> tags to accomplish this. Pay special attention to spacing around pictures.
20. Go back and make sure there are two spaces between sentences in the first 2 paragraphs of the Tahiti section. You will need to do this in 5 locations. Be careful, remember the nbsp puts in a space, but a blank space is added if you leave a blank space after this command. DO NOT use the < pre> tag to do this. Remember that more than one consecutive space is ignored by the browser.
Notes: