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

Homework #4

HTML Web Assignment II

©2001 E. Kinnear

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.

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

To begin:• Open the notepad document and type: <html>

<body> *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.

Link back to your PSU webpage:

• To include a link back to your Personal Webpage, include the following text anywhere in the body:



<a href=“http://www.personal.psu.edu/xyz123”> My Personal Webpage</a>



*Where xyz123 is your personal access ID

http://www.personal.psu.edu/xyz123

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:



<a href=“http://www.yahoo.com”>Yahoo!</a>



http://www.yahoo.com/

Link to your email:

Insert the following code into the notepad document:

<a href=“mailto:[email protected]>Email Me</a>

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

http://www.psu.edu/ur/webstyleguide/images.html

Inserting A Graphical Image (con’t):

• For example if I wanted to use this graphic:

I would use the HTML provided with it:

<a href="http://www.psu.edu/"><img src="http://www.psu.edu/ur/webstyleguide/marks/NvyShad.gif" border="0" alt="Penn State Mark"></a>

This graphic is ‘linked’ to a site. Can you tell which site it is?

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??

Other things you MUST include

You have your choice to include 3 of the following:

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:• <a href=“The URL of the site you want the graphic to

link to "><img src=“URL of the image you want to appear on your site"></a>

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:

• <img src=“http://www.personal.psu.edu/xyz123/name of file">

• *Where xyz123 is your USER ID.

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:

• <img src=“http://www.personal.psu.edu/xyz123/name of file">

• *Where xyz123 is your USER ID.

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:

<a href=“#bottom”>This will take you to the bottom of the page</a>

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:

<a name=“bottom”> This is the bottom of the page.</a>

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.

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

• Remember, if you choose to use this site, you CANNOT copy the author’s work!!

http://www.pageresource.com/html/listhelp.htm

http://www.pageresource.com/html/listhelp.htm

Tables

• The following link will show you how to make several different kinds of tables. Remember to use the <TABLE> and <TD> tags.

• http://www.pageresource.com/html/table1.htm

• Remember, if you choose to use this site, you CANNOT copy the author’s work!!

http://www.pageresource.com/html/table1.htm

http://www.pageresource.com/html/table1.htm

Backgrounds

• To add a background color, you need to go to the beginning of the notepad document and find the <BODY> tag. You will now change this tag to the following:

• <BODY bgcolor=“color you want to use”>• 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.

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.

LAST STEP!!

• Add the following code to the END of your HTML code:

• </BODY></HTML>• 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’?

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

Documents

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