Home HTML Lists Adding Images Style Tips Add Favicon Add Videos Add Background CSD Principles CSD Problem Solving Process

Adding images with attribution

Oranges

Add attribution: Refer the article on Reusing content from Wikimedia

For File:Mandarin Oranges (Citrus Reticulata).jpg: CC-BY-SA-3.0 (attribute the author as Joe Ravi)

Using an image from Wikimedia might be the simplest way to use images that are out there on the internet. Check the CC information before you share. In this case, the attribution is visible when the user hovers over the image.

Great Pyrenees Mountain Dog

Here is the snapshot of how I captured the image information. Dog image capture screenshot

Here is an excellent source of free images: https://creativecommons.org/ for your webpage. Bookmark the link and visit anytime you work on projects that require images of any kind.

Kriz Puppy
By Jonathan Kriz [CC BY 2.0], via Wikimedia Commons

Steps to add image

  1. Save image to your computer
  2. Note the source
  3. Upload image to weblab library for your project to use.
  4. Add image tag to your webpage
  5. Select the new image you have added to the library.
  6. Provide citation

How to center images in webpages

Align using div tag

In this case the image is always at the center of the page. The size of my image is set to 50%. When my browser window is resized the image size changes as well. Try it!

Align with the align attribute for img

In this case the image will appear in the middle of the paragraph text. If I have a lot of text, the text will be wrapped around the image. If the image cannot fit in the middle of the text, it will be moved to a new line. Also, if the browser window is resized, the text will be placed in the middle of the text if possible. Some of this text will appear at the top of the image

Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.