creating web pages in HTML due by noon on Friday, January 28

Transcription

1 creating web pages in HTML due by noon on Friday, January 28 PURPOSE OF THIS MODULE In this module, you will be introduced to HTML and you will use HTML to create two basic web pages which you ll save as module2.html and resume.html including text, links, graphics, and a table. You will use two software applications to complete this module: a very basic word-processing application (e.g., Notepad, Simpletext, Script Editor) and a web browser (e.g., Mozilla, Internet Explorer, Safari). Feel free to play around with the suggested non-html/non-tag content for your web page. Replace any of the text (e.g, MY WEB PAGE, My name is Danielle ) with anything you want. In other words, do what the module asks of you, but also get creative. UNDERSTANDING MSU S SERVER STRUCTURE MSU is not only our Internet service provider (or ISP), but for this class, MSU s network and server are also our file server, or the host for our web pages. 1. Get a sense of how MSU student server space is set up and how it can be used; read the following: a. AFS information and related links b. AFS c. Managing Personal Pages in AFS You will have to access your AFS space and save to the web folder on your AFS space to complete the work for this module. NOTE Please see the FTP instructions handout posted to our class web site in the modules area for information on accessing your AFS space from a remote location (e.g., your apartment, your dorm room, some wireless connection somewhere). GETTING STARTED 2. Launch a basic word-processing application. Dànielle Nicole DeVoss ([email protected]), Michigan State University; reproduce only with permission 1

2 NOTE Any application that formats your text for you will not work for this module. Thus, you will not be able to complete this module if you use Microsoft Word or Microsoft WordPad. You can use TextEdit on the Macs, but you will have to change the settings of the software. Please see the module 2 software document posted on our class web site in the modules area if you re not sure what software to use, how to access the software you need to use for this module, and/or to change the settings of TextEdit. Once the basic word-processing application is open, type the following in the new blank document that should appear once the application has launched: hello, My Name is Danielle I like cheese. 3. Once you have typed in this information, save the file in the web folder on your AFS space. Name the file module2.html 4. Launch a web browser; the URL of your page will be: (e.g., 5. Toggle back into your module2.html and make some changes to your HTML document, so it looks like this: 6. Save the file, toggle back to your web browser, and click the Reload/Refresh button at the top of the browser window. This forces the browser to reload your file to screen. Notice how the changes you made in the code appear on screen. ADDING GRAPHICS Web browsers read three image formats: GIF/.gif, JPEG/.jpg, and.png (image files will be addressed extensively in later modules); for this module, we ll primarily be working with GIF and JPEG files. For this module, we ll download graphics to use in our web pages. 7. MSU logos are available to download and use for free at the pages below; head to one of these pages and select an image you d like to have on your web page: or Dànielle Nicole DeVoss ([email protected]), Michigan State University; reproduce only with permission 2

3 To download a copy of the image, follow these steps: a. On a PC: Right-click in the middle of the picture and hold until a menu box appears. On a Mac: Click in the middle of the picture and hold until a menu box appears. b. Drag to Save Image As... or Save Picture As... or Download Image to Disk and save the image in the SAME PLACE as your module2.html file. NOTE When you download an image, you may CHANGE the name of the file. For example, if one of the images is named msu_smlogo_gr.gif, you may change it to something else, like msu.gif. Be sure to include the.gif or.jpg at the end of the file name. 8. Next, head to: Once you have connected, select a category from the top menu, and choose a background you like. Save it the same way you saved your MSU logo. 9. Toggle back into your module2.html and insert the tags to add the background and image to your page: <body background= bubble.jpg > 10. Save your module2.html file, toggle into your web browser, and click on Reload/Refresh to view your pages. 11. Toggle back into your module2.html and experiment with putting your graphic in different places on your page. To do this, move the <img src=...> tag around in the HTML file (but keep it between the tags). 12. You know you chose an ugly background image, so let s try using a background color instead. Head to: Once you have selected a color you would like to use as your page s background color, write down the 6-digit RGB value of the color. Choose a second color ideally, one that complements your background color to use as your text color and write down the 6-digit RGB value. 13. Toggle back into your module2.html and delete the background image file tag, then insert the tags to add your background color and text color: Dànielle Nicole DeVoss ([email protected]), Michigan State University; reproduce only with permission 3

4 14. Save your module2.html file, toggle into your web browser, and click on Reload/Refresh to view your pages. ADDING AN EXTERNAL LINK An external link is sometimes referred to as an absolute path, and is a complete link (with the included) outside of and away from your site. 15. Toggle into your module2.html and add the following tag: <a href= >Michigan State University</a> 16. Save the file, toggle back into your web browser, and click on Reload/Refresh to view the changes. ADDING AN INTERNAL LINK An internal link is sometimes referred to as an relative path, and is a link to another document you ve created. 17. Toggle back into your module2.html so that it looks like the following: <a href= >Michigan State University</a> <a href= resume.html >My Resume</a> Dànielle Nicole DeVoss ([email protected]), Michigan State University; reproduce only with permission 4

5 For the link to work, you must also create a document named resume.html. 18. Launch a new, blank file in the word-processing application you ve been using to construct your module2.html; in the new document window, type in the following: <title>my RESUME</title> the RESUME OF DANIELLE DEVOSS 19. After you have created the document, save it in the same place as your module2.html is saved as resume.html. 20. Toggle back into your web browser and click on Reload/Refresh to refresh the changes to your module2.html page. Make sure the link to your resume page works. ADDING AN LINK 21. Toggle back into your module2.html and add the following: <a href= >Michigan State University</a> <a href= resume.html >My Resume</a> <a href= mailto:[email protected] > ME</a> 22. You know what to do: Toggle. Reload/Refresh. CREATING A TABLE 23. Toggle back into your resume.html file and make the following changes: <title>my RESUME</title> the RESUME OF DANIELLE DEVOSS <table border=1 cellpadding=5 cellspacing=5> <td>current ADDRESS</td> <td>permanent ADDRESS</td> Dànielle Nicole DeVoss ([email protected]), Michigan State University; reproduce only with permission 5

6 <td>phone & </td> <td>101 Main StreetLansing, Michigan 48824</td> <td>2345 State RoadDetroit, Michigan 48126</td> </table> 24. Toggle. Reload/Refresh. Look. A COUPLE OF HTML QUESTIONS 25. Explain what the following tags do: <hr> <center> <td> <ul> <ol> <li> <vlink="#xxxxxx"> <alink="#xxxxxx"> 26. In each of the examples below, an element is incorrect or missing. These incorrect or missing elements will destroy or, at the very least, wreak havoc on the web page they are embedded in. Identify what s wrong with the following sets of code (head s up question d is a trick question): a. <title>my WEB PAGE <body bgcolor="#0066ff" text="#000066"> <center><img src="msu_logo.gif"></center> b. <body bgcolor="#0066ff" text="#000066"> Dànielle Nicole DeVoss ([email protected]), Michigan State University; reproduce only with permission 6

7 <center><img src="msu_logo.gif></center> <a href=" State University</a> <a href="resume.html">my Resume</a> <a href=" ME</a> c. <title>my RESUME</title> the RESUME OF DANIELLE DEVOSS <table border=1 cellpadding=5 cellspacing=5> <td>current ADDRESS</td> <td>permanent ADDRESS</td> <td>phone & </td> <td>101 Main StreetLansing, Michigan 48824</td> <td>2345 State RoadDetroit, Michigan 48126</td> d. <title>wra 210 * Spring 2005</title> <img src="wra210.jpg"> <ul> introduction to WeB AuThORiNg </ul> TURNING IN YOUR WORK & GETTING CREDIT Once you ve carefully checked your web pages to make sure you ve included all of the elements discussed above, feel free to play around a bit moving text, adding images, changing colors, etc. When you are done with your web page, upload a Word document to ANGEL in which you include: the URL of your module 2 web page (which should be your explanation of the HTML tags above (question 25), and your explanation of what s wrong or missing in the sets of code above (question 26) Total points possible: 100 (75 for web page, 25 for HTML tags questions). Dànielle Nicole DeVoss ([email protected]), Michigan State University; reproduce only with permission 7