Adding a picture to your web page (Windows)

Adding a picture to a web page is a two step process. The first step is uploading the picture file to your UNIX account. The second step is adding the IMG tag to the web page file in which the picture will be displayed.


Step 1: Uploading the Picture File to Your UNIX Account

  1. First, copy any picture files to your computer's desktop that you want to upload. This will make it easier to find the files on your computer within the WinSCP program.

  2. Logon to your UNIX account.

    Logging onto your UNIX account (Windows).

    You log into your UNIX account each time you want to work on your web pages for the web page assignment.

  3. Double click the public_html directory in the right pane to go into the public_html directory.

    This step places you in the main directory (public_html) that contains all of your web page files and directories.

  4. Double click the pictures directory in the right pane to go into the pictures directory. If the pictures directory is not there then you still have to create the pictures directory in your UNIX account. The second web page tutorial shows you how to create a directory in your UNIX account.

  5. Click Local on the menu bar to pull down the Local menu. Click Change Drive in the Local menu. You will now see a pull down menu that contains a line with the word Desktop. Click on the Desktop line in that pull down menu to display the contents of your computer's desktop in the left pane of the WinSCP window.

  6. In the left pane, click on the picture file that you want to transfer to your UNIX account. To select two or more files to upload, hold down the CTRL key while clicking on each picture's filename.

  7. Click the F5 Copy button at the bottom of the WinSCP program window to upload the picture file(s) from your computer to the pictures directory in your UNIX account. A Copy dialog box displays, asking you if you want to copy the file(s) to your UNIX account. Click the Copy button. After the file(s) are copied, you should see the filename for each uploaded picture file in the right pane of the WinSCP window.

  8. In the right pane, click on the picture file that you transferred to your UNIX account. To select two or more files, hold down the CTRL key while clicking on each picture's filename. Point to the picture file(s) selected in the right pane and click the right mouse button to display a popup menu. Click the Properties command to display the properties of the picture file(s). Make sure that the Permissions properties for your picture file(s) match the Permissions properties of the picture file in the image below. If you make any changes to the permissions, click the OK button. Otherwise, if you don't make any changes to the permissions, click the Cancel button.

    This sets the proper permissions for the picture file(s), to make them visible on the Internet. You only set these permissions once, when the file is uploaded.

  9. Move onto the second step to add a picture to a web page.


Step 2: Adding the Picture to a Web Page

  1. Click the Parent directory button on the toolbar of the WinSCP window right above the right pane to return to the public_html directory.

  2. Now, you will add a picture to the About me web page. Double click the aboutme.html file to open the aboutme.html file in a separate window.

  3. Type in the following html code and text someplace between the <BODY> and </BODY> html tags in your aboutme.html file assuming the name of the picture file is me.jpg.

    <IMG SRC="pictures/me.jpg">

  4. Click the Save button on the toolbar of the aboutme.html file window. Leave the aboutme.html file window open. You may need to edit the file later to correct any possible errors.

  5. Run Internet Explorer or a web browser of your choice to view your web pages.

    The web address of your main web page has the following format:

    http://cs12.cs.qc.cuny.edu/~"your UNIX account username"

    For example, if your UNIX account account username is jdoe1, your web address is:

    http://cs12.cs.qc.cuny.edu/~jdoe1

  6. On your main web page, click on the link This is all about me! to view your About Me web page. Hopefully, the picture should appear on your About Me web page.

  7. If you encounter any errors with the picture on the About Me web page, double check the contents of the aboutme.html file window. Make any corrections as necessary, save the file, reload your website, and try viewing the About Me web page again.

    Otherwise, close the aboutme.html file window and click the F10 Quit button at the bottom of the WinSCP program window to logout out of your UNIX account.


Note: Executing the steps in this tutorial doesn't guarantee that your picture will appear on your About Me web page. Remember, a typo at any step or text entered could produce an error that will prevent the picture from displaying properly.