California State University, Fullerton
714/278-5302; Email | Homepage
Office: H-324F
Assignment 21: World Wide Web 2
Now you will create a World Wide Web homepage with hypertext links to three of your pictures, a scanned version of your printed layout, and three photographic sites of interest throughout the world. You will need to create four different HTML and 8 different picture files for this assignment. The photojournalism sites you found on the Web in Assignment 20 can be used for this assignment.
In PhotoShop you will make two versions of each picture. One version will be a small thumbnail example no larger than 2-inches square. Save these images at 72dpi as pic1a.jpg, pic2a.jpg, and pic3a.jpg. The other version will be bigger, but no larger than 6" square. Save these images at 72dpi as pic1b.jpg, pic2b.jpg, and pic3b.jpg
Use the word processing program SimpleText to make your HTML command files. For the file you will name yourlastname.htm, type in the following:
<html>
Your other three HTML files that have your large picture will look like this:
<html>
1. Save the main file with the three small pictures as, "yourlastname.htm" and the three larger picture files as pic1.htm, pic2.htm and pic3.htm.
2. Start up the Netscape program. Under File, select Open File and double-click on your SimpleText yourlastname.htm file.
3. Your Web homepage should appear as it would on the World Wide Web.
4. Make sure all your links work properly.
5. If you don't like the look of the file for some reason, go back to your SimpleText files, make changes, save those changes, go back to Netscape, and press the Reload button to see the new file.
6. Turn in a disk containing a folder named "webstuff" that has your four HTML files and eight picture files in it. Print-out your webpage (your entire homepage MUST fit on one page as seen below) and the four HTML program files.
<head>
<title>Your Name's Homepage</title>
</head>
<body bgcolor="FFFFFF" text="000000" link="663300" vlink="CC6600">
<h2>Welcome to My Homepage</h2>
<font face="helvetica" size ="3">Your Name Here</font><br>
<font face="helvetica" size ="2">Your address or city<br>
telephone number (Optional)<br>
<a link href="mailto:youremailaddress">E-Mail Me! (Optional)</a><p>
<font face="helvetica" size ="1">Write something about yourself and your photography here.<p>
<hr>
<font face="helvetica" size ="2">Click on an image below to see a larger version and read its cutline.<p>
<a href="pic1.htm"><img border=1 src="pic1a.jpg"></a> <a
href="pic2.htm"><img border=1 src="pic2a.jpg"></a> <a
href="pic3.htm"><img border=1 src="pic3a.jpg"></a><p>
<font face="helvetica" size ="2">This is a layout I did in my <a
href="http://commfaculty.fullerton.edu/lester/courses/319.html">Photojournalism</a> class:<p>
<table><tr>
<td><img src="layout.jpg"><p></td>
<td valign="top"><font face="helvetica" size ="2">Here are some links of interest to photographers:<p>
<li><a href="http://type in the address here">Name of the link or brief description</a><p>
<li><a href="http://type in the address here">Name of the link or brief description</a><p>
<li><a href="http://type in the address here">Name of the link or brief description</a><p>
<hr>
<h3>This page was brought to you by:</h3>
<img src="logo.jpg">
</td></tr></table>
</body>
</html>
<head>
<title>Your Name: Picture 1</title>
</head>
<body bgcolor="FFFFFF" text="000000" link="663300" vlink="CC6600">
<font face="helvetica" size ="3">
Make up a name for this picture<p></font>
<img border=1 src="pic1b.jpg"><br>
<font face="helvetica" size ="1">
Write a brief cutline here.<p>
<i>Photographed by your name</i><p>
<a href="yourlastname.htm">return to my homepage</a>
</body>
</html>
