CIS89A - 4. Images and Media

From WikiEducator
Jump to: navigation, search
1st Camera Assist Sudharm Choudhari

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.

Motion, Sound & Magic

One of the great benefits of the web and the internet has been the virtually unlimited availability of content, specifically images, audio and video.

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
  • understand the benefits and limitations of media on the web
  • include appropriate media to enhance content
  • understand how plug-ins are used with web browsers
  • link to different types of media
  • embed different types of media into a web page
  • style multimedia content


  • 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
  • image, audio, video, closed caption, transcript, plug-in, attributes, source, container

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?
  • What are the common media file formats that are used on the web?
  • How are the media formats accessed from a web page?
  • What are some of the benefits of including media on web pages?


Coding project required elements

  • images and media - img, src, width, height, alt, title (image attribute), href, figure, figcaption, .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
  • position next to text with space around the image
  • href, audio, source, controls, width, video
  • sound file, video file, player controls
  • basic requirements in all coding assignments .css for style and formatting, documentation comments in .css and .html

  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. Review the Media section (below - scroll down) for links to resources for this module.

  2. Textbook - Willard 8-9 Chapter 8. Working with Images, Chapter 9. Working with Multimedia

  3. Copyrights, Fair Use and Attribution - There is a lot of really good information on the web. Rather than creating your own material, it may be easier to use what someone else already created. How you use it and how you credit the creator are important. Review one of the Copyright, fair use media selections or find one on the web.
    Attribution - giving credit to the creator of a copyright work. Since everything is automatically copyright, if you use it, you need to provide attribution. For academic publications, this is also know as citation. Some sources of media provide information about the attribution to include if you use a work. More information can be found at Creative Commons, Wikimedia Commons and elsewhere. Find an article (or video) that provides information about attribution.
    Post a link and one important point about educational use of copyright material AND Post a link to the attribution resource and a brief description of the key points to the Copyright, Fair Use and Attribution discussion.

  4. 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.

  5. 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.
    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.

  6. Free image editing tools - There are plenty of good software tools and apps for editing images that are free. Find recommendations and 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.

  7. 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.

  8. Explore the Wikimedia Commons and any of Free Stock Photos databases of millions freely usable media files to which anyone can contribute. Read the Reuse guide for the free license requirements. Find images in one of these free collections 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. Include license type information. Be sure to include attribution if required.
    Review the selections in 2 other posts.

  9. 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. What is it about the image that would be hard to describe? Post a link to the image and a ONE (1) sentence summary to the Visual stories discussion. Review the visual stories of 2 others.

  10. More images - 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 in the More images discussion.
    Look at sources suggested by 2 others.

  11. Media - images, audio, video - In a new project, use the assignment elements, attributes and properties to include images and play audio and video selections. Find examples of media - images, videos and sound files that are licensed through the Creative Commons so that you can include them in your web page. Make viewer controls visible. Use all the elements, attributes and properties within your page. Include some descriptive information so the viewer knows what is being demonstrated within your page. Also, use comments in your HTML code to indicate what you are doing.
  12. Submit the link to your project to the Working with Media assignment.
  13. Post a link to your project and any comments or questions about the assignment to the Working with Media discussion.
  14. Review the work of 2 others - the page display and the source code. Post a note with links to those projects, and a brief description of your observations - things you learned from looking at these or ideas for your own work? Post to the Working with Media discussion.

  15. HTML5 - The HTML standard has been evolving to meet the demands of viewers and web developers to make use of new technologies as they become available. HTML5 is the most recent update. There are a number of new features and several modifications that are applicable to multimedia on the web. Review one or more HTML5 Introductions and tutorials. What are some of the big changes? Why are these important to you as a web developer? Post a link to the resource and brief comment to the HTML5 updates discussion.

  16. HTML5 support - HTML5 test - Check your browser for HTML5 support. This assignment will be hopelessly frustrating if the browser you are using does not support the HTML5 elements that you are trying to use. Check that your browser actually supports audio, video and the types of media that you select to include in your assignment page. If your browser doesn't support these elements and media types, download a browser that does - either a newer version, or a different one. As a web developer you need to be aware of these differences and plan your site content accordingly.

  17. 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.

  18. Success Skills - Share it - Communication and Collaboration are important as we are expanding our personal and professional networks of contacts and businesses. Review 2-3 articles from the Success skills - SHARE list in the media section below. The internet is all about sharing - information and processes including web development.
    AND Learn - Look at the .html and .css source code for the sites you selected. What do you see that is different from what you are creating with Glitch? Post a link and a brief summary of one idea that you got from looking at the source code for the article you selected to the Success Skills - Share it discussion.

  19. Group Project groups discussions - Web Design - Throughout the course there are discussions that address topics web developers need to know about. For each web site you visit, examine the site designs, layouts and usability. Use this evaluation criteria to guide your review of the sites you visit. Select one site you visited and post note about the site design based on one of the criteria in the evaluation description along with the link to the site. What is something important and interesting that you learned about web design? Do you have questions about good web design? Share with your group in the Group discussion.

Icon multimedia.gif


  • Textbook - Willard 8-9 Chapter 8. Working with Images, Chapter 9. Working with Multimedia

Image map

Images, apps and software


SoundCloud – Listen to free music and podcasts on SoundCloud
an online platform and community for sharing music and sounds. You'll find everything there from remixes of pop music to recordings of crickets. You can search by artist name, song title, or an...
Intermediate Web Literacy I: Intro to CSS | 1. CSS Word Pyramid
build a playlist of songs from the Open Web, learning composing, remixing, searching, and sharing. Search for media shared on the Open Web. Embed media in a webpage. Change the settings i...
A Guide to Finding Media for Classroom Projects
some explanations of how to avoid copyright infringement by using media that you can legally re-use for classroom projects including blog posts, web pages, videos, slideshows, and podcasts. The gui...
dig.ccMixter Home
Dig CC Mixter offers thousands of hours of free music.The music on this site has different Creative Commons licenses so you need to check whether you need to attribute the music or not (attribute m...


  • Copyright on the Web - really simple: If you did not write or create the article, graphic, or data that you found, then you need permission from the owner before you can copy it
Law and Etiquette for Using Photos and Images Found Online
Most SEO experts suggest using at least one photo in every blog post. From an aesthetic perspective, it’s a good idea, especially when the photo has something to do with the content. Photos and i...
License compatibility - Wikipedia
Creative Commons Licenses are widely used for content, but not all combinations of the seven recommended and supported licenses are compatible with each other. Additionally, this is often only a on...

Creative Commons


The W3C Markup Validation Service
Markup Validation Service Check the markup (HTML, XHTML, …) of Web documents. This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc.
<p class...
Search Engine for Source Code -
Ultimate solution for digital marketing and affiliate marketing research, PublicWWW allow you to perform searches this way, something that is not possible with other regular search engines: "<...
Avoiding common HTML5 mistakes | HTML5 Doctor
HTML5 sites and their underlying markup. In this post, I’ll show you some of the mistakes and poor markup practices I often see and explain how to avoid them. <section> is not a wrapper. Th...


Tips for studying online and at home for university students | Times Higher Education (THE)
Coordinate group chats There are a number of online tools such as Skype or Zoom that you can download for free and enable you to coordinate video chats with groups of people. Use these programs to...
Webmaker/WebLiteracyMap/Building - MozillaWiki
"Composing for the WebCreating and curating content for the Web Inserting hyperlinks into a web page Identifying and using HTML tags Embedding multimedia content into a web page Cr...
Free Technology for Teachers: Facts v. Opinions - A New Common Craft Lesson
Facts and Opinions Explained by Common Craft uses examples of print journalists and television commentators ti help viewers understand why it is important to fact-check when they hear or read somet...
3 ways that people are digitally evil | Daily-Ink by David Truss
It can also be used for evil.Now, to be honest, I don’t see this very often because I don’t look for it. I see a whole lot of good in my Twitter feed, but here are 3 ways people use Twitter tha...

2016.3 2338 . 2018.3 6341 . 2019.5 8233