Learnit Training

4. Placing images

A picture is worth a thousand words and a website without images is boring. That's why it's a good idea to add a piece of content again, this time an illustration.

4.1 The IMG tag

To place an image we use the IMG-tag (IMG stands for image). But before we put it in the code, it's a good idea to first add an image to the website folder on the desktop. Here you can download an image that is suitable for the website. It is transparent and lightweight in terms of kilobytes (when you want to know exactly how to optimize an image for your website then you can register for the Adobe Photoshop training where all the important things about web optimization be treated).

Insert the image you downloaded above into a subfolder in the Web site folder on the desktop. Give this sub-folder a logical name and keep in mind that file and folder names are case sensitive. In My example I mention the folder pic.

Next we are ready to place the code for the image. When you move the cursor to a new line under the section's close tag, you can type this code; Een schematische afbeelding van een bloem.. The code looks like the image below. View the result in your browser.

Online Free HTML5 and CSS training from Learnit

Tip: always place the altattribute (Alt represents alternative). It is displayed when the photo cannot be found and is read by so-called screen readers used by disabled people. Again, Google is committed to it.