Chapter W Solutions Authoring Your Own Website

Transcription

1 Chapter W Solutions Authoring Your Own Website These solutions are for you to use if you get stuck when doing an On Your Own activity in the chapter. To learn how to teach yourself a computer skill, always try the On Your Own activity first before turning to these solutions. On Your Own Solution W-1 How to Create a Web Page Follow these steps to create the web page: Step 1. Create a folder on your USB flash drive, hard drive, or another location given by your instructor. Name the folder Website. If you need help creating a folder, see Solution 1-8, How to Manage Folders on a USB Flash Drive, in the Solutions Appendix printed in the book. Step 2. To open Notepad, click Start, All Programs, Accessories and Notepad. The Notepad window opens. Step 3. Type the following text and press Enter: Our family vacation this year was at the beach. Step 4. To save the file, click File in the menu bar. Click Save As. The Save As dialog box appears. Navigate to the Website folder you created in Step 1. Change the File name to Index.html. See Figure SW-1. Click Save to save the file. Leave the Notepad window open. Figure SW-1 Save the Index.html file to your local storage device. Step 5. Open Windows Explorer. Find the Index.html file on your storage device. Double-click the filename. The file opens in Internet Explorer. IE displays the one sentence on your web page.

2 W-34 Solutions Appendix On Your Own Solution W-2 How to Publish Your Website Follow these steps to use Google.com to find a free web hosting site: Step 1. In Internet Explorer, go to google.com and enter free web hosting in the search box. Click links until you find a hosting site that you like. In our example, we use awardspace.com, but your site might be different. Step 2. To read reviews about the site, enter the site name followed by the word review. For example, enter awardspace.com review. Make sure a site gets good reviews before you select it. To set up a website on a web hosting site, generally, you might sign up for a web hosting account, select a subdomain name for your site, and upload files to your website. To set up a website on a web hosting site, follow these steps: Step 1. Go to the home page of the site and find a link to set up an account. Figure SW-2 shows one example. Yours might look different. Figure SW-2 Find a link on the web hosting site to set up your account. Step 2. Follow the links to set up your account. You need to enter your name, mailing address, address, and password to your web hosting account. One setup window is shown in Figure SW-3, but yours might look different. Be sure you remember or write down your password. Hint Some web hosting sites require you to select your subdomain name at the same time you set up your account.

3 Chapter W Solutions: Authoring Your Own Website W-35 Figure SW-3 Enter your information to set up the web hosting account. Step 3. An message is sent to you. You might need to wait 15 minutes or more for the message to arrive. Open your inbox and the message. Click a link in the message. You can then return to the web hosting site to complete the setup. Hint During the setup process, you might be assigned a client ID that you must use to log on to your web hosting account along with your password. This client ID might be included in the message, so be sure to save or print the message. The message might also include links to help features on the web hosting site.

4 W-36 Solutions Appendix After setting up your web hosting account, follow these steps to set up your website: Step 1. Go to the home page of the web hosting site and find a logon link. Log on to the web hosting site using your account client ID or address and your password to the account. Figure SW-4 shows one example of the login window, but yours might look different. Figure SW-4 Log on to your web hosting account. Step 2. Explore the links to manage your website. Figure SW-5 shows one window to manage a website, but yours might look different. Hint Most web hosting sites allow the home page for your site to be named Index.html or Default.html. A few hosting sites require the home page to be named Index.html. Some others require the name to be Default.html. The names allowed for your home page on your web hosting site should be stated somewhere on the instructions for getting started on the web hosting site. In this chapter, we use Index.html as the name of the home page. However, you might need to use Default.html instead.

5 Chapter W Solutions: Authoring Your Own Website W-37 Figure SW-5 This Website Manager page on a web hosting site is used to set up your website. Step 3. Click the link to set up your subdomain name. In Figure SW-5, you would click Subdomain Manager, but your link might be different. Figure SW-6 shows the window where you can enter your own subdomain name and select from several domain names the site supports. Hint If you were required to select the subdomain name when you first set up your web hosting account, you can skip Step 3. The subdomain name is already created.

6 W-38 Solutions Appendix Figure SW-6 Set up a subdomain name that others can use to find your website. Step 4. Return to the website manager page and click a link to upload a file to the website. In Figure SW-5, you would click File Manager, but your link might be different. Step 5. Follow the link to upload the Index.html file to your website. For our example, you would click the first Browse button shown in Figure SW-7, but your link might be different. Locate the Index.html file on your local computer and follow directions to upload the file. Hint If your web hosting site requires your home page to be named Default.html, rename the Index.html file to Default.html and upload that file. Figure SW-7 Upload files to the subfolder named myvacation.atwebpages.com.

7 Chapter W Solutions: Authoring Your Own Website W-39 Step 6. Open a new tab in Internet Explorer. Enter the URL of your website. In our example, that URL is myvacation.atwebpages.com, but your URL will be different. The web page appears in your browser window. Not Working? If your web page does not appear, make sure you entered the URL correctly in the IE address box. Make sure the home page name is Index.html or Default.html. On Your Own Solution W-3 How to Add a Line Break Tag to the Page If necessary, follow these steps to open the Index.html file in Notepad: Step 1. On the Start menu, open Notepad. Click the File menu and click Open. Normally, only.txt files display in the Open box. Click the drop-down list to the right of File name and select All Files. All file types now appear in the list. Step 2. Navigate to the Index.html file stored on your local computer, click it, and click Open. Hint As you build the website, keep Notepad open with the Index.html file open. Use one tab in Internet Explorer to view the local Index.html file and another tab in Internet Explorer to view the published Index.html file. When you save the file in Notepad, click the Refresh button in IE to view the local version of the file. When you publish a new version of the file, click the Refresh button on the Internet Explorer tab that is set to view the published version of the file. Follow these steps to add new text to the Index.html page: Step 1. In Notepad, go to the first blank line, type the following, and press Enter: The kids loved the aquarium we visited on the way to the beach. Step 2. To save the file, click File and Save. Do not close the Notepad window or the Index.html file. Step 3. Do one of the following to view the new version of the file:. If an Internet Explorer tab is open with the local Index.html file displayed, click the Refresh button to see the new version of the file.. If the local Index.html file is not currently displayed in Internet Explorer, open Windows Explorer, locate the Index.html file on your local storage device, and double-click the file. Step 4. Notice that all text appears on one line (see Figure SW-8). To fix the problem, return to the Notepad window that is still open and type <br> at the end of the first line of text. Figure SW-8 Internet Explorer does not recognize a hard return entered into the web page file.

8 W-40 Solutions Appendix Step 5. To save the file, click File and Save. Return to the Internet Explorer window viewing the local Index.html file and click the Refresh button. The text appears on two lines in the browser window. On Your Own Solution W-4 How to Use HTML Structure and Formatting Tags Follow these steps to add HTML tags to the file: Step 1. If necessary, open Notepad and use it to open the Index.html file. Step 2. Edit the file to include the HTML tags. Use the Tab key to indent lines in the file: <html> <head> <title>our Family Vacation</title> </head> <body> Our family vacation this year was at the beach.<br> The kids loved the aquarium we visited in route. </body> </html> Step 3. Click File, and click Save to save the file. View the file in Internet Explorer and correct any errors reported by IE. Verify the web page title appears in the page tab of the Internet Explorer window and in the IE title bar. Not Working? This chapter assumes you are using Windows 7 and Internet Explorer 8. If you are using Internet Explorer 9, know that IE version 9 does not display the web page title in the title bar of the IE window. To find out what version of Internet Explorer you are using, click Help and click About Internet Explorer. Hint Most likely, a mistyped tag or a missing ending tag is causing the problem. Step 4. Just below the <body> tag, insert the following text: <H2>The Aquarium and the Beach</H2> <hr> Step 5. Add the <p> and </p> tags before and after the sentence about the aquarium. Add the <i> and </i> tags to format a word in italics as follows: <p>the kids <i>loved</i> the aquarium we visited on the way to the beach.</p> Step 6. When you are finished, the Notepad window should look like that in Figure SW-9. Save the file and view it using Internet Explorer.

9 Chapter W Solutions: Authoring Your Own Website W-41 Figure SW-9 The page has structural tags and formatting tags added. Step 7. To view the source tags in Internet Explorer, click Page and click View Source. On Your Own Solution W-5 How to Add a Photo to the Web Page Follow these steps to add a photo to the page: Step 1. Open Windows Explorer and locate the Aquarium.png file in the Extra Chapters folder on the DVD. Copy the file to the Website folder on your local computer. If you need help copying a file, see Solution 1-9, How to Open, Copy, Move, and Delete a File, in the Solutions Appendix printed in the book. Step 2. If necessary, open Notepad and use it to open the Index.html file. Step 3. Add three new lines of text below the sentence about the aquarium as follows: <img src=aquarium.png> <hr> Want to see our beach photos? Step 4. Save the Index.html file and display it in your browser. Correct any errors you see.

10 W-42 Solutions Appendix Hint If the photo is missing, make sure the Aquarium.png file is in your Website folder and the <img> tag is written exactly as shown in Step 3. Follow these steps to publish the latest version of your web page with a photo: Step 1. If necessary, open a new tab in Internet Explorer, go to your web hosting site, and log in using your address or client ID and password. Step 2. Return to the page on your web hosting site that you used to upload a file in Solution W-2. Use this page to upload the Index.html and Aquarium.png files. Step 3. Do one of the following to view the new version of your website:. If an Internet Explorer tab is open with the URL of your website, click Refresh on that tab to see the website with the photo.. If necessary, open a third tab in Internet Explorer and enter the URL of your website and press Enter. The page with the photo appears. Step 4. Check the web page for errors and correct any problems you see. Hint If the photo is missing on the page, remember that a filename is sometimes case sensitive. Make sure the upper- and lowercase characters in the filename in your <img> tag are correct. On Your Own Solution W-6 How to Use a Subfolder on Your Website Follow these steps to use a subfolder in your Website folder on your local storage device: Step 1. Open Windows Explorer and create a subfolder named Images under the Website folder on your local storage device. Step 2. In the Website folder, press and drag the Aquarium.png file and drop it on the Images folder. Look in the Images folder to verify the file is there. Step 3. If necessary, open Notepad and use it to open the Index.html file. Edit the <img> tag as follows: <img src=images/aquarium.png> Step 4. Save the Index.html file and view it in Internet Explorer. The web page should look the same as it did in On Your Own W-5. If this is not the case, correct any problems you see. Follow these steps to use a subfolder on your web hosting site: Step 1. If necessary, log on to your web hosting site. Step 2. Find the link to create a subfolder under your subdomain folder. For the web hosting site shown earlier in Figure SW-5, you click File Manager and scroll down to the bottom of the next window to see the option to create a folder (see Figure SW-10). Your web hosting site might work differently.

11 Chapter W Solutions: Authoring Your Own Website W-43 Figure SW-10 Create a folder in the subdomain folder on your website. Step 3. Enter the folder name Images as shown in the figure and click Create Folder. Step 4. Upload the Index.html file to the subdomain folder. Step 5. Open the Images folder on the website and upload the Aquarium.png file to this folder. Figure SW-11 shows the file about to be uploaded. Your website might work differently. Figure SW-11 The website is set to upload a file to the Images subfolder. Step 6. Use another tab in Internet Explorer to view your website using the URL to your site. Fix any problems you see.

12 W-44 Solutions Appendix On Your Own Solution W-7 How to Add a Link to a Second Web Page on Your Site Follow these steps to create the second web page: Step 1. Use Windows Explorer to copy two photos, Zack.png and Shark.png, from the Extra Chapters folder on the DVD to the Website/Images folder you created earlier on your local computer. Step 2. Use Notepad to create a file named Beach.html. Save the file in the Website folder on your local computer. Enter the following text and HTML tags in the file: <html> <head> <title>beach and Sea Photos</title> </head> <body> <H2>Our Beach and Sea Photos</H2> <hr> Zack s first dip in the ocean and Joy caught the hammerhead shark!<br> <img src=images/zack.png> <img src=images/shark.png> <hr> </body> </html> Step 3. Save the Beach.html file and view it in Internet Explorer. Correct any errors you see. The web page is shown in Figure W-13 in the chapter. Follow these steps to add a hyperlink to the Index.html page: Step 1. Use Notepad to edit the Index.html file. Insert the <a> and </a> anchor tags around the text beach photos as follows: Want to see our <a href=beach.html>beach photos</a>? Step 2. Save the Index.html file and view it in Internet Explorer. When you click the link on the page, the second web page displays. Correct any errors you see. Follow these steps to publish the latest version of your website: Step 1. If necessary, open a new tab in Internet Explorer and log on to your web hosting site. Step 2. Upload the Index.html and Beach.html files to the subdomain folder. Step 3. Upload the Zack.png and Shark.png files to the Images subfolder. Step 4. Use another tab in Internet Explorer to view your website using the URL to your site. Fix any problems you see.

13 Chapter W Solutions: Authoring Your Own Website W-45 On Your Own Solution W-8 How to Add a Link to Another Website Follow these steps to add a link to another website to the Index.html page: Step 1. Use Notepad to edit the Index.html file. Edit the <img> tag in the document as follows: <a href= src=images/aquarium.png></a> Step 2. The Index.html file should now look like that shown in Figure SW-12 when displayed in Notepad. Save the Index.html file and view it in Internet Explorer. When you click the link on the page, the Ripley s Aquarium site displays. Correct any errors you see. Figure SW-12 The Index.html file is completed. Step 3. Upload the new version of your home page to your web hosting site and test the site. Correct any problems you see.