Skip to content

5th Grade, McCrae, 03-10 – Web Design 4: Images

Published on

    1. There is one video for today:
      1. Mr. Smith's Instructions
    2. Objective:
      1. Students will be able to:
        1. Create an image that includes text.
        2. Move a file to another folder.
        3. Use the <img> tag to make an image appear on a website.
    3. Announcements:
      1. The last day for any late work is Friday, March 13th!
        1. All work not completed by then will remain a zero.
        2. Any work assigned after then is due the same day.
      2. Previous lessons: Web Design 1: Intro to HTML, Web Design 2: Headings, Typing.com: J, F, and Space, Web Design 3: Bold and Italics, Field Trip Storyboard, Typing.com: U, R, and K, Web Design 4: Images
  2. Today's Lesson: Web Design 4: Images
    1. Grading Rubric:
      4 Pts A text file named "index.html" is handed in, along with an image file.
      3 Pts The text file includes the starter code provided on the first day of the unit.
      3 Pts The text file includes an <img> tag that successfully makes the included image appear on the web page.
    2. We're going to continue with the work we did during the previous classes, spending some time adding to it.
      1. We're still doing work that's taught to 8th grade, but we are going at a slower pace than what is expected for them.
      2. This is one of those lessons where the video tutorial is super important. If you aren't in class, you NEED to watch it.
    3. We'll begin by opening a basic text editor.
      1. On the Windows computers in the lab, that's Notepad.
      2. If you're doing this on a Mac at home, that's TextEdit.
      3. Mr. Smith likes using Linux, he'll be using a program literally called "Text Editor."
      4. Mr. Smith's 8th graders use a fancier program called "VS Codium," which you're also allowed to use, but this is far from a requirement.
      5. (Even Chromebooks have text editors, though Mr. Smith doesn't use those.)
    4. Find and open your index.html file in your Documents folder. (If you missed the previous lesson, this is work you should have made up before today. It wouldn't be in your Documents folder yet, but if you handed it in via Canvas we can download it and put it there.)
      1. Look over your paragraphs. By now you should have a solid idea of what your page is about.
      2. We're going to use an image editing program to make a title graphic. In class we'll be using PhotoPea because it's free and web based, but just like with your chosen text editor, other programs work just as well.
        1. (The linked video above will show these steps, it's too much to write out with my ongoing tendonitis.)
        2. When you are saving your work, it will likely be as a .PNG file. This is your TITLE image, so name it "title.png" to make sure you can remember what it is.
        3. With your image saved, move it to your Documents folder so it's in the same place as your index.html file.
      3.  In your index.html file, look for where <body> is near the top. This is a TITLE image, so we're putting it up as high as it can go by adding the following code. 
        • <img src="title.png" alt="Mr. Smith's Website" width="100%">
      4. In this case, the parts you might want to change are all in quotes. KEEP THE QUOTES, but if your file is NOT "title.png" (Could it be title.jpg?) you'll need to change it to match.
      5. The ALT TEXT is what appears if the image does not load. It should either say the same thing as your image or describe it in some way.
      6. The WIDTH TEXT determines how much space the image will take up on the web site. There are other ways we can do this, but this one will scale our title nicely.
      7. If you break something, CTRL-Z is useful! If you need to start over, the starting code is right there to copy.
      8. Go to Canvas to hand in your html AND your image!
  • This is an IN-CLASS assignment, NOT HOMEWORK. Please stay on task to complete this work by the end of class so you don't have to make it up later!