CodeDragon circular icon

CodeDragon might not work properly for you...

CodeDragon is designed to work with Google Chrome and Firefox, and a few features of CodeDragon have been found not to work properly with other web browsers. To make sure you get the best experience when using CodeDragon, please download the latest version of Google Chrome or Firefox and try again. You can install Google Chrome for free here, and Firefox here.

Or, you can continue anyway.

Introduction: Adding images


Images make your website look a lot cooler, and adding them is actually really easy.

Written by Pal Kerecsenyi

Introduction: Adding images

Ad Ethical + impactful advertising with tiny prices.  Advertise on CodeDragon 
Ad Ethical + impactful advertising with tiny prices.  Advertise on CodeDragon 

Pretty colours

Images have plenty of uses on a website. They can show something to the viewer, advertise a product, or just be there to look cool. In general, they're pretty useful. Just like links, they're pretty easy to add to your website too.

The img tag

Another extremely simple tag is used for images - it's <img>. As you might have guessed, you'll also need an attribute to tell the browser what image you want to display. This is similar to the href attribute you saw with hyperlinks, except it's called src instead.

Inside this attribute, you need to put the URL of the image. Here's how you use it:

Finding images

To find an image to use on your website, it's usually easiest to search on Google Images. If you find anything you like, simply right click on it and select 'Copy image address'. Then, paste it into the src attribute.

You can also look on other photo websites such as Flickr or Pixabay. However, it's important to remember that you're responsible for making sure you have permission from the author to use any image you include in a CodeDragon project, as per section 5.b. of our Terms of Use.

Your task

Here's some easy-peasy practise.

  1. Drag the big blue basic structure block into the workspace. Change the title to anything you want.
  2. Drag the pink image block inside the body.
  3. Change the src attribute to point to any image on the web.

End of tutorial