Web Page Design Model

Units:

Tags

Lesson Plan Industry Sector
Information Technology

Lesson Plan Originally Created By: Brooke Ahrens

Working with Images

Part of Unit: HTML/CSS

Lesson Plan Overview / Details

Adding images to a webpage is not difficult. but images need to appropriately sized for use on a website.  Students will learn how to resize images, code images in html, and create hyperlinks to images. 

Lesson Time

Demo Lesson requires
1 Class Period

Objectives and Goals: Student will be able to

  • set up a notepad document using the correct DocType for html coding.
  • resize an image in Picnik and understand why using large images are not desirable in webpage design.
  • use an html image tag correctly to include an image on their website
  • use an html "a ref" tag to create a hyperlink to an image.

Activities in this Lesson

  • Image Race - Hooks / Set

    When students walk in have the following displayed:

    Mystery Image

    Explain that the image was so large only part of it could be displayed and you will need the students to load the image in order to reveal what it is.  Divide the room into 2 halves and assigned each half one of these links.  Post the links were students can easily access them online. Tell students that at the count of 3 they are to click the link. Count to three and have students all click the link.

    Image 1: - Note, image 1 is a very large file.
    Image 2

    Students that click Image 1 will discover that it takes a very long time for the image to load, because of it’s size.  Students who click Image 2 will see almost no delay.

    As you wait for students in the first group to have their images load, explain that they have just experienced what happens when web designers use images that are too large.  

    Issue 1- the image obscures the page content, making it difficult to view the page, like the piece of bun they saw when they came into the classroom.
    Issue 2- images that are 2 large take a very long time to load.  If people have to wait for web pages to load they may become frustrate or leave the page

    The focus of the lesson for the day will be adding correctly sized images to web pages using html coding.
  • Step 1- Finding Images Online - Demo / Modeling

    These lessons were created for a class is working in a computer lab, with the teacher modeling each step for students via projector, while students follow along on their own computers.  It is expected that students have done some html programming prior to this lesson and have begun to create a web site based on a topic of their choosing.


    Teacher should instruct students to do the following:
    • Conduct a Google image search for an image related to the of your web page.
    • Use the menu buttons on the left hand size of the image search screen to search for an image that is “Large.”  
    Students will be learning to re-size images, so they need to begin with an over-sized image.
    • Click the thumbnail so that the full size image appears.  Otherwise you will be saving only the tiny thumbnail.
    • Right click the image, select Save Image As, and save the picture in the web page folder you created previously for this class.
  • Step 2- Resizing Images Online - Demo / Modeling

    Remind students that on the web the larger the image size, the longer it will take the web page to load. For users who have slower connections, this matters a lot. For people with faster connections it is still frustrating. 

    In addition, many people are still using screens that best accommodate web pages that are 800 x 600 pixels. This means your pictures should be smaller than that, particularly if you want to have something other than an image on your page.  Today students will be resizing images to a width of no greater than 300 pixels.

     Direct the students to do the following:

    • Go to the site www.picnik.com to resize images and click  Get Started Now!
    • Once Picnik loads, click the “Library” tab and select “Get from Computer”  (notice you all the other ways you can get photos? That will be important later!)
    • Upload your image to Picnik
    • Once your image has uploaded, click the Edit tab and select RESIZE.
    • Enter in the size you want for your new image. Make sure “Keep Proportions” box is checked.  Select 300px for width and Picnik will calculate the height. Click ok.
    • Click the Save and Share tab, and then give your image a different name. You might want to add 250 to the end of the file name  (example: waterfall250) to help keep track of which image to use on your site.   We will use .jpg as our file extension because we are adding an image to our site and want the quality to be good and load times fast, so jpg is a good compromise. You can trust picnik to choose the right settings.
    • Click and save the image in your web design folder.

    Students now have a resize image created for use on their webpage. 

  • Step 3- Using HTML code to add images

    It is assumed that students have already hand-coded a web page using html and are familiar with the process of creating a new document in Notepad.


    The teacher should direct students to do the following while modeling:
    • Using Notepad, create a new HTML document.  Make sure to set up your document correctly as seen here: http://www.w3schools.com/tags/tag_DOCTYPE.asp
    • Inside the  <body> tag,  write 1 sentence that describes your image.
    • Now add your add  by using an image tag:
      • <img src="filename.jpg">  Remember to replace “filename.jpg” with the name of your file, and to keep the quotation marks! Use the smaller image that we just resized.
    • Preview your coding here:   http://pastehtml.com/
      • Select All, copy, and paste your code into the site to see a preview of your coding.  
  • Step 4- Creating a hyperlink to an image

    Step 4 - Creating a hyperlink to an image

    (Note: In an earlier lesson student have already created hyperlinks, so they are familiar with the concept.)

    Explain to students that sometimes there might be a need to display a very large image. To accomplish this without impacting how quickly your website loads, they can create a link to the file instead.

    The teacher should direct the students to do the following:
    • Use the following code to create a link to your original image

    <a href="filename.gif">text you click for the link</a>

    • Make sure you replace “filename.gif” with the name of your image file.
    • Change the ‘text you clink for the link’ to something like “Original Sized Image” or other text that will inform site visitors that the can see the larger image by clicking the text

    Remind students that this is very similar to creating a hyperlink to another page, the only difference is that you are linking to an image, not an html file.

    Students should now save their notepad files with a .html extension and submit their webpage and 2 images. 

Assessment

Assessment Types:
Writing Samples,

Students should submit their notepad file and images for grading.  This is a formative assessment allowing the teacher to check on student's progress and abilities regarding the following:

-Students can resize an image in Picnik and understand why using large images are not desirable in webpage design. 

-Students are able to set up a notepad document using the correct DocType for html coding. 

-Students use an image tag correctly to include an image on their website

-Students use an "a ref" tag to create a hyperlink to an image.

This assessment is a credit/no credit assignment for students. If they have not successfully completed all steps, the teacher should indicate which steps should be revised and resubmitted.