Naming the class

For this exercise you need a pictures of all of your classmates. Follow this link to your class webpage, which should display pictures of everyone in your class. If not, just use the pictures that are there. You can access these pictures by right-clicking on each one and saving it. Be aware, however, that all of those pictures are named me.jpg and you will have to rename each one appropriately.

A few additional points:

  • If you haven’t already, create a folder named images inside of your mysite folder.
  • Right-click on each of your classmates and and save each of their pictures into the same mysite/images folder.
  • As you name the images, follow best practices by avoiding  spaces in the names. If a student is named John Brown, for example, save his picture as john.jpg, john_brown.jpg, or use what is known as ‘camel case’ (where the second word is capitalized) and save it as johnBrown.jpg.  
  1. Open the classmates.html document that you created in the previous (hyperlinks) lesson with Brackets.
  2. In the next few steps we are going to insert all of your classmate’s images into this document and create links to each image based on their names.
  3. At the same time we are going to ‘hide’ the images deeply down into our document so that no one is visible until you click on their name.
  4. Use the screen capture below as a guide to create an internal style sheet.

      1. The first style sets the height of all div tags to 2000pixels which is huge height. The reason is that we do not want to see more than one picture when you click on a link. We haven’t covered div tags too much yet but they are basically rectangles that are used as containers for content.
      2. The second style, a, sets the characteristics of all of your links so they behave properly.
      3. Display: block; has to do with starting elements on a new line.
      4. We will cover CSS in much greater detail later on in this course so don’t be daunted if these styles are unfamiliar!
  5. Add <h1> tags with text that explains the purpose of this webpage.

  6. We are about to insert all of the images into your web page. To insert an image that is in a folder, you have to include the name of the folder as part of the path. As this screen capture shows,Screenshot showing relationship of classmates.html to images folder classmates.html, the file that you are working with, sits next to the images folder that contains all of the pictures of your classmates.
    Therefore, the code for inserting an image named john.jpg that is inside of your images folder would be <img src=”images/john.jpg”> .
  7. To begin, add a div tag with the id=”top”. All of your links will be inside of this div.
  8. Insert each image into its own div tag, while also adding an id to the image as in:  <div> <img src=”images/AlexC.jpg” id=”alexc”></div>
  9. Next, add a link to the image id. Place the link inside of the #top div as shown below.

  10. Repeat this process for all of your classmates. When you finish, your document should look a lot like this one, only bigger.

  11. Now it’s time to add links from each image back to the #top id  as shown here.
    1. Don’t forget to add </a> to close your links, after your img tags
  12. At this point you have have noticed that the size of the images vary. Chances are, some images are quite small but a few may be huge, if they were taken recently and never resized. Best practice would be to resize all of the images so that they are approximately equal, but we are going to take a shortcut and resize all images with CSS. The downside to this approach (which I don’t recommend for professional use) is that the images are still big and hence will appear more slowly than the otherwise could in the browser. But here we go: Add img {width: 350px;} to your internal stylesheet. This rule will set the display size ALL images to a width of 350px, regardless of their actual size. Because you did not specify a height, each image’s height will adjust proportionally.
    1. In the future, please be sure to resize your images for web use (scroll down these instructions to review changing the size of your picture).
  13. Want to make those images appear circular? Or at least oval for the ones whose width is different from its height?  Add  img {border-radius: 50%;} to your internal stylesheet.
  14. Once everything is working properly, upload classmates.html and the images folder to your server. Cyberduck should ask if you want to overwrite the previously uploaded versions. Say yes/continue. Now visit your website to see if everything is working properly there as well. Hint: you may have to refresh your browser.