Adding a picture to your web page (Macintosh)

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.

  2. Logon to your UNIX account.

    Logging onto your UNIX account (Macintosh).

    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 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 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 (to select) the picture file on your computer's desktop. Then, drag the file from your computer's desktop to the Cyberduck window. After the file is copied, close the Transfers window. You should see the filename for the uploaded picture file in the Cyberduck window.

  6. In the Cyberduck window, click (to select) the picture file that you transferred to your UNIX account. Click the Action drop-down arrow to select info. Click Permissions to display the info for the picture file. Make sure that the Permissions info for your picture file match the Permissions info of the picture file in the image below. Close the Permissions window.

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

  7. 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 Left arrow button to return to the public_html directory.

  2. Now, you will add a picture to the About me web page. Click (to select) the aboutme.html file. Then, click Edit to open the aboutme.html file.

  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 File and then Save, or press Command + S, to save the file aboutme.html. Leave the aboutme.html file window open. You may need to edit the file later to correct any possible errors.

  5. Run your web browser 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 dojo5678, your web address is:

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

  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. Click the Disconnect button of the Cyberduck program window to logout out of your UNIX account and quit TextWrangler and Cyberduck if you are not going to continue working on your web page assignment.


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.