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

(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

http://www.help.msu.edu/afs/

b. AFS

https://afs.msu.edu/

c. Managing Personal Pages in AFS

http://techbase.msu.edu/viewpathfinder.asp?id=683

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.

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).

NOTE

GETTING STARTED

(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:

<html>

<title>MY WEB PAGE</title> <body>

Hello, My Name is Danielle 

I like cheese. </body>

</html>

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:

http://www.msu.edu/~yourmsunetid/module2.html (e.g., http://www.msu.edu/~devossda/module2.html)

5. Toggle back into your module2.html and make some changes to your HTML document, so it looks like this: <html>

Hello, My Name is Danielle

I like cheese.

and here’s some text for you to read

</body> </html>

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: http://s150.web.ur.msu.edu/ or

(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: http://www.ip.pt/webground/main.html

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: <html>

<body background=”bubble.jpg”>

Hello, My Name is Danielle

<center><img src=”msu_logo.gif”></center>

I like cheese.

and here’s some text for you to read </body>

</html>

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 <body> tags).

12. You know you chose an ugly background image, so let’s try using a background color instead. Head to:

http://www.brobstsystems.com/colors.htm

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:

(4)

<html>

<body bgcolor=”#0066FF” text=”#000066">

<center><img src=”msu_logo.gif”></center> I like cheese.

</html>

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 http:// included) outside of and away from your site.

15. Toggle into your module2.html and add the following tag: <html>

and here’s some text for you to read

<a href=”http://www.msu.edu”>Michigan State University</a>

</body> </html>

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:

<html>

and here’s some text for you to read

<a href=”http://www.msu.edu”>Michigan State University</a>

<a href=”resume.html”>My Resume</a>

</body> </html>

(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:

<html>

<title>MY RESUME</title> <body>

THE RESUME OF DANIELLE DEVOSS 

</body> </html>

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 EMAIL LINK

21. Toggle back into your module2.html and add the following: <html>

and here’s some text for you to read

<a href=”http://www.msu.edu”>Michigan State University</a>

<a href=”resume.html”>My Resume</a>

<a href=”mailto:[email protected]”>EMAIL ME</a>

</body> </html>

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: <html>

<title>MY RESUME</title> <body>

THE RESUME OF DANIELLE DEVOSS

<table border=1 cellpadding=5 cellspacing=5> <tr>

<td>CURRENT ADDRESS</td> <td>PERMANENT ADDRESS</td>

(6)

<td>PHONE & EMAIL</td> </tr>

<tr>

<td>101 Main Street Lansing, Michigan 48824</td> <td>2345 State Road Detroit, Michigan 48126</td> <td>517/555-1212 [email protected]</td>

</tr> </table>

</body> </html>

24. Toggle. Reload/Refresh. Look.

A COUPLE OF HTML QUESTIONS

25. Explain what the following tags do: <html> <hr> <center> <tr> <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. <html>

<title>MY WEB PAGE

<center><img src="msu_logo.gif"></center> I like cheese.

</html> b. <html>

(7)

<center><img src="msu_logo.gif></center> I like cheese.

and here’s some text for you to read

<a href="http://www.msu.edu">Michigan State University</a>

<a href="resume.html">My Resume</a>

<a href=" mailto:[email protected]">EMAIL ME</a> </body>

</html> c. <html>

<title>MY RESUME</title> <body>

THE RESUME OF DANIELLE DEVOSS

<td>CURRENT ADDRESS</td> <td>PERMANENT ADDRESS</td> <td>PHONE & EMAIL</td> </tr>

<tr>

<td>101 Main Street Lansing, Michigan 48824</td> <td>2345 State Road Detroit, Michigan 48126</td> <td>517/555-1212 [email protected]</td>

</tr> </body> </html> d. <html>

<title>WRA 210 * Spring 2005</title> <body>

InTRoDuCTIoN to WeB AuThORiNg

</ul> </body> </html>

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 www.msu.edu/~yourmsunetid/module2.html) • 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)

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