CIS89A - 5. Images

From WikiEducator
Jump to: navigation, search
Hubble Peers into the Storm (29563971405)

Picture this... - Images

A picture is worth a thousand words
It is easy and inexpensive to add pictures to web pages. This has been one of the most important changes that web publishing has made. Printing pictures on paper, especially in color remains very expensive. The additional data to include high resolution images to a web page is relatively little. So use images to tell your story and add interest to your web page.



Learning outcomes

  • become familiar with graphics software
  • recognize appropriate web image file formats
  • use images as elements in the foreground of a web page
  • specify the height and width of images
  • provide alternate text and titles for images
  • link images to other content on a web site
  • add figure captions
  • style foreground images



Keywords

  • image file format, copyright, usage, license, gif, jpeg, png, resolution, foreground, height, width, alternate text, title, link, caption, border, padding, margin, background, transparency, animation, compression


Reading guide

  • What are good sources to find free and open images that you can use for your web pages?
  • What are some graphics applications that are commonly used?
  • What are the most commonly used web image file formats?
  • What are the differences between the compression types? Why does this matter?


Assignments

Coding project title and required elements

  • cis89images1 - img, src, width, height, alt, title (image attribute), href, figure, figcaption, border, float, margin, .gif, .jpg, .png

All these should be visible just looking at the "page" that displays from the link you submit

  • all 3 types of images
  • resize image that is also a link to the full size source image
  • captions, alternate text, visible border
  • position next to text with space around the image


  1. Review the Keywords and Reading guide questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module.

  2. Read Chapter 8. Working with Images in the textbook.

  3. Read about the Creative Commons - the organization that develops, supports, and stewards legal and technical infrastructure that maximizes digital creativity, sharing, and innovation. Review the Creative Commons licenses to understand your rights to access and use images. This Attibute infographic is a nice visual summary.

  4. Play the Remix Game. Test your knowledge of the remix compatibility of different license types using interactive questions with detailed feedback for correct and incorrect answers.
    https://course.oeru.org/lida103/learning-pathways/remix-game/overview/
    If you need more help, find a resource that provides more information about copyright, Creative Commons and share the link.

    How did you do? Do you have a better understanding of the Creative Commons licensing structure and your options for using resources? Post a note about one new thing you learned about using and sharing online resources to the Copyright and Remix discussion.

  5. Free image editing tools - There are plenty of good software tools and apps for editing images that are free. Find recommendations reviews. Try one. Have you used any other free image editing tools? Can you recommend any? Post your experience with free image editing tools to Image editing tools discussion.

  6. A phone as a camera - There are sites with tips for taking pictures with your phone. Find an article with information about phones and images. Post a link to the article and a brief description of why this is important to web developers to the Phones and images discussion.

  7. Explore the Wikimedia Commons and Foter databases of millions freely usable media files to which anyone can contribute. Read the Reuse guide for the free license requirements. Find images in the Wikimedia image collection that you might include in your site. In the Creative Commons Images discussion, post links to 2-3 images that you selected to include in your site.
    Review the selections in 2 other posts.

  8. More images - There are many other sources of images that you can use freely. Visit one or more of these sites and select an image to share.
    There are multiple image file formats that are used on web pages - .gif, .jpeg, .png are the most commonly used. There is a version of .gif called animated gif that combines a series of individual images linked together so they make a little movie. Find an example of a site that includes an animated gif file.
    Post a link to the image you are sharing, and identify the file type in the More images discussion.
    Look at sources suggested by 2 others.

  9. Working with images - In a new coding project, use the assignment elements and tags to add images and place them within your page. You can use the images from the sources in the previous activities to demonstrate all the elements and tags within your page. Include any license, copyrights and/or attribution information associated with the images you use. Be sure to provide a description of what you are demonstrating, so the viewer knows what they are supposed to see in each example. Save (publish) as cis89images1.
  10. Submit the link to your coding project to the Working with images assignment.
  11. Post a link to your coding project and any comments or questions about the assignment to the Working with images discussion.
  12. Review the work of 2 others and post a note with links to those projects, and a brief description of your observations - anything that you learned from looking at these? Any ideas you have for using in your own work in the future? Post to the Working with images discussion.

  13. Image maps - Find and review one or more of the tutorials on the HTML required to define and use Image Maps. Find an example of an image map on the web. Post a link to your selection to the Image Map discussion along with a brief description on why an image map is appropriate for this example.

  14. Galleries - Sometimes it is appropriate to display lots of images as a single web page. These are often called galleries. Find an example of a gallery. How are the images arranged? What steps has the developer taken to make the experience pleasant for the viewer? What would you do differently if you were building this gallery page? Post a link to the gallery site you selected along with your comments on the design, viewer experiences and suggested improvements to Image gallery discussion.

  15. Visual story - Sometimes a picture can tell a story without any words. These images can make a powerful addition to your web site. It may be simpler to show something in a picture than it is to describe it. Find one image that tells a story. How does the image you selected tell the story? What is it about the image that would be hard to describe? Post a link to the image and briefly describe the story it tells to the Visual stories discussion. Review the visual stories of 2 others.

  16. Group Project groups discussions - Check in with your group. Are there outstanding questions? Contribute one or more posts to the discussion for the group tasks. Ask a question about working as a group either online or offline.


Icon multimedia.gif

Media


Image map


HTML/Elements - This is the list of HTML and related Elements from the past to the present. ** Great reference - all tags listed by type with link to explanation and examples


Creative Commons


Images, apps and software


2016.3 2496 . 2018.3 5457

Retrieved from "https://wikieducator.org/index.php?title=User:Vtaylor/Willard/CIS_89A_HTML_and_CSS/CIS89A_-_Images&oldid=1070181"