Picture yourself

We have reached the point at which it is time to learn how to upload content to the web server. Let's start by taking your picture, incorporating it into your webpage, and sharing it with the world.

Steps 1 through 5 below instruct Macintosh users on how to get a suitable picture with a built-in program named photobooth. If you are using a Windows or Linux computer, you may or may not have a built-in camera, which means that you are  on your own in how best to acquire a digital photo of yourself. An easy fix: use a pre-existing photo of yourself from, perhaps, your Facebook account. However you get the picture, make sure that it is in a jpg format and name it me.jpg. Afterward, move me.jpg to the images folder inside of the mysite folder.

How to take a fresh photo with a Mac

1. Open the Photo Booth.  Photo Booth, like most applications, is inside of your applications folder.  To get to the applications folder, double click on Macintosh HD.   On the left side of your screen you should see a list of devices and places. Under Places, click on Applications.    

2. Alternatively, you can use Spotlight, apple’s search feature, by clicking on the magnifying glass in the upper right portion of the screen.  Start typing in Photo Booth and click on it when it appears. Once Photo Booth is launched you should see yourself on the screen.

3. You can take a picture of yourself now or click effects to if you want to shoot something funky. I don’t care how funky as long as the picture is recognizable as you. Be advised  however, that you and other students may use this picture several times during the semester!

4. With photobooth still open, drag the picture (once it appears) to a folder named images folder inside of the mysite folder (create the images folder if you don't have one and make sure that it's all lower-case).

5. If you like the picture name it me.jpg.  Be sure to include the jpg suffix; once again, all lower case.

Change the size of your picture

  1. If you took your picture with Photo Booth it is way larger than it should be.  Pictures that are too large are data hogs that slow down the performance of your website and deplete cellular data plans unnecessarily.  Cameras are designed to take pictures that are optimized for printing onto paper where the extra resolution of large pictures can actually make a difference. Having said all of that...
      1. Double click on your photo to open it with preview. Or open it with another image editor if you are not using a Mac.
      2. Click tools and select ‘Adjust size.'
      3. Screenshot showing image resizing interface.Set your photo’s width to no more than 500 pixels wide. Don’t worry about the height. Height will take care of itself as long as “Scale proportionally” is checked.

Insert the image into index.html. Here’s how.

        1. Re-open index.html with your brackets.
        2. Just after the <body> tag add the following code:
          img src="images/me.jpg"  alt="my picture"> 
        3. Save index.html and view it in your browser. Do you see yourself? If so, congratulations.

Tell us about yourself

index.html is going to be your ‘home page’ that you use to link to all of your assignments. Since this page is about you, you may want to replace some of the filler ‘lorem ipsum’ text with actual statements about yourself. This website is going to be all about you!

Print Friendly, PDF & Email