Visiting Washington DC
Total Page:16
File Type:pdf, Size:1020Kb
CREATING YOUR FIRST HTML PAGES Throughout this assignment, we will be working on a Web site about Washington D.C. We will pick a few tourist attractions and create a Web page for each one. Each page will have pictures and hyperlinks. The first page is the main page. This is usually called the "Home Page" of a site. Gathering Materials Before we start creating the pages in our site, we need to gather the images we'll use. Create a new folder in your myhome called dc_site. 1. Go to: http://visitingdc.com. 2. Right-click on the first link (Jefferson Memorial), then choose, Save image as. from the pop-up menu. 3. Save this image inside your images folder. 4. Repeat steps 2 & 3 for each of the other links. You should end up with six images in your images folder with the following names: jefferson_memorial.jpg vietnam_memorial.jpg lincoln_memorial.jpg washington_monument.jpg smithsonian_castle.jpg white_house.jpg Creating the Home Page 5. Launch a text editor (notepad). 6. Enter the following HTML code: <HTML> <HEAD> <TITLE>Washington D.C.</TITLE> </HEAD> <BODY BG COLOR="#FFFFFF"> <H2 ALIGN=center>Welcome to Washington D.C.!</H2> <P>Washington D.C. was established as the capitol of the United States of America in 1800. It has a rich history and many interesting places to visit. I've chosen a few of my favorite sites and provided links to them below.</P> <P>I hope you enjoy your visit.</P> <H3>My Favorite Sites</H3> <UL> <LI>Jefferson Memorial</LI> <LI>Lincoln Memorial</LI> <LI>Smithsonian Castle</LI> <LI>Vietnam Memorial</LI> <LI>Washington Monument</LI> <LI>White House</LI> </UL> </BODY> </HTML> 7. Save this file in the dc_site folder and name it index.html. Page 1 Warning: The home page of your Web site needs to be named, index.html. If it is named anything else, the links to it might not work. This is a condition set forth by the Web server involved. Most Web serves are configured to automatically look for a file named, index.html. If it can't find such a file, you'll get an error message. Test Your Page Before we get too far along, it's always best to preview what your page will look like in a browser. 8. From within your browser, choose File/Open Page… 9. Navigate to where you saved the file, index.html (inside the dc_site folder) and choose, Open. If your screen isn't like the one above, double-check your HTML code to find the problem areas. Creating a Second Page Now that we have our home page created, let's create another page that we can link to. Since the first item we mention in our list of favorite sites is for the Jefferson Memorial, let's create that page. The HTML code will be similar to that of the main page, but with a few changes. 10. Enter the following in a new text document: <HTML> <HEAD> <TITLE>Jefferson Memorial</TITLE> </HEAD> <BODY BG COLOR="#FFFFFF"> <H2 ALIGN=center>The Jefferson Memorial</H2> <P ALIGN=center><IMG SRC="images/jefferson_memorial.jpg"></P> <P>Located in Washington D.C. in East Potomac Park, the memorial honors United States President Thomas Jefferson (1801 - 1809)</P> <P ALIGN=center><A HREF="index.html">Back to Main Page</A></P> </BODY> Page 2 </HTML> 11. Save this file in your www folder and name it jefferson_memorial.html. Test Your Page When viewed in your browser, your page should look similar to the following: Check the "Back to Main Page" link. If all goes well, it should take you back to your main page. With that done, we now need to add a link to the main page that takes us to the Jefferson Memorial page. 12. Open the file, index.html with your text editor (Notepad) and change the following: <LI>Jefferson Memorial</LI> to <LI><A HREF="jefferson_memorial.html">Jefferson Memorial</A></LI> 13. Save these changes and test both your pages with your browser. You do not need to create the rest of the web pages to finish the site, but you would create them in a similar way as with the Jefferson Memorial page. Page 3 .