CSD WD U2L9 Adding Images

Learning Target

I can add images on my
websites, while making sure I

respect everyone's rights?

Web Development Lesson 9 - Warm Up

Code Studio, Level 1-4

Adding images with the <img> tag

1. img ("image"), this tells HTML to include an image
2. src ("source") says where to find the file
3. alt ("alternate") is text that will be used if the file cannot

be found

Web Development Lesson 9 - Activity

​Rules for Naming Images

• Avoid special characters such as &, ?, %, /, (, etc.

• Make sure the name has a specific meaning that helps you know what the image is.

• Use dashes (-) or underscores (_) instead of spaces.

• Keep the names as short as possible and still have a clear meaning

Attribution

• You must give attribution when placing an image on a web page.

• The attribution must state the name of the creator, the location where you found the image, and the license that you are using it under. When you learn to link, linking the license is a good idea.

• Example:

  • EliteArtist, Pixabay, Pixabay Content License

  • Found at Pixabay and created by EliteArtist using the Pixabay Content License

Web Development Lesson 9 - Wrap Up

Update Your HTML Tags Page

● Add the tag needed to insert an

image

Start
Tag

Description

End
Tag

<img>

Inserts an image
Attributes: src for the source
alt for the alternate text

No end

tag

<img src="https://www.flickr.com/photos/68946401@N03/6268578327" >
<p>​"Computer with peripherals" by Dnikolos is licensed under CC BY 2.0.</p>

​Example of Code with Attribution

​"Computer with peripherals" by Dnikolos is licensed under CC BY 2.0.

Web Development Lesson 9 - Wrap Up

● What are 3 ways you can use images to make your site

better?

● What are 2 challenges in adding images on a website?
● What is 1 way you can respect people's rights when

using images?