1. Homework #4 HTML Web Assignment II ©2001 E. Kinnear

2. Creation of MIS204 File You are now going to create the file that will be linked to the “For MIS-204 Students” link that was created in assignment #3. To start, open notepad.

3. Things that MUST be included: You MUST include the following on your site: Link back to your personal web page (index.html) Link to a web page outside PSU Link to your email Graphical image Two different size fonts

4. To begin: Open the notepad document and type: *This must appear at the TOP of the page. DO NOT add any HTML code above these tags!!* This will signify to the computer that you are going to use HTML to write the webpage, and that you are going to be editing the Body of the page.

5. Link back to your PSU webpage: To include a link back to your Personal Webpage, include the following text anywhere in the body: My Personal Webpage http://www.personal.psu.edu/xyz123 *Where xyz123 is your personal access ID

6. Link to a webpage outside of PSU: You are going to use the same code that you used to link to your own webpage, but instead insert a link to a page you would like to link to. For example if I wanted to link to yahoo.com, I would use: Yahoo! http://www.yahoo.com

7. Link to your email: Insert the following code into the notepad document: Email Me

8. Inserting A Graphical Image: You may ONLY use images approved by the University or images of your OWN work. For this assignment we will focus on using University approved images. Go to http://www.psu.edu/ur/webstyleguide/images. html to find an image you would like to use and find the accompanying source code. http://www.psu.edu/ur/webstyleguide/images. html

9. Inserting A Graphical Image (con’t): For example if I wanted to use this graphic: I would use the HTML provided with it: This graphic is ‘linked’ to a site. Can you tell which site it is?

10. Two different sized fonts: We will use the following tag to control font size: Type your text here The variable “+1” controls the size of the font. You can use other numbers such as +2, +3, +4, etc to control font size as well. Try using a negative number. What happens??

11. Other things you MUST include You have your choice to include 3 of the following:

12. Link to a web page from an image An easy way to link to an image was described earlier in the “Inserting a Graphical Image” slide. The code to use is:

13. A scanned image (your origination) To do this, you will have to scan an image using a scanner. Save the file, and FTP it to your personal webspace. Use this code, and substitute the correct file names: *Where xyz123 is your USER ID.

14. A digital image (your origination) To do this, you will have to use a digital camera or other digital device to create a file. Save the file and FTP it to your personal webspace Use this code, and substitute the correct file names: *Where xyz123 is your USER ID.

15. Internal links (links to another position on the mis204.html page) This is a link you can create that will ‘jump’ to another part of your page. You first create a link: This will take you to the bottom of the page This link has the definition of linking to “#bottom”. You now need to name a part of the page as “bottom” so that the link will work. You will then place the following code where you want the link to ‘jump’ to: This is the bottom of the page. This code is particularly useful when you have a long page, and want to view certain sections of the page without having to manually search for them.

16. Lists This is more difficult to explain. I have found the following site to be very useful and clear in explaining the concept of a list. http://www.pageresource.com/html/listhelp. htmhttp://www.pageresource.com/html/listhelp. htm Remember, if you choose to use this site, you CANNOT copy the author’s work!!

17. Tables The following link will show you how to make several different kinds of tables. Remember to use the and tags. http://www.pageresource.com/html/table1.h tmhttp://www.pageresource.com/html/table1.h tm Remember, if you choose to use this site, you CANNOT copy the author’s work!!

18. Backgrounds To add a background color, you need to go to the beginning of the notepad document and find the tag. You will now change this tag to the following: Bgcolor stands for ‘background color’ Some examples of color to use could be: “gray”, “orange”, “blue”, “red”, “gold”, etc. Try typing in different colors to see if they work.

19. Different color fonts To change the color of the font, place the following code into your notepad document: This text will appear in the color you chose. In the tag use the example from the previous slide to choose a color you would like for your text. For example, if you want blue text, you would use this code: This text is BLUE.

20. LAST STEP!! Add the following code to the END of your HTML code: Now SAVE the notepad file as “mis204.html” and FTP it to your personal webspace. Check your webpage to make sure all links are working. What happens now when you click on the ‘MIS204 Link’?