Adding images using HTML editor

This tutorial shows how to add images in HTML editor. You can add images to your HTML page with any HTML editor however we recommend using Adobe Dreamweaver or Notepad++ applications.

Design Mode

Adobe Dreamweaver offers web developers to edit HTML files in design mode. This mode is effective if you are not professional web developer. It let’s you see the HTML page as it will be displayed in browser.

To add an image to the HTML page using design mode please do the following:

1. Make sure you are in Design mode. Click Design button in the top left corner of your screen

2. Put cursor where you want to insert an image.

3. From the top menu select Insert > Image

4. In the appeared window select the image from your computer and click OK.

As a result you will see an image added to your page.

To avoid errors please make sure:

1. Image should be on the same drive with your HTML page file
2. We recommend to put an image into the ‘images’ directory located in the same directory with the HTML file
3. If you upload images and HTML files to your hosting server – make sure to keep same files structure

Code mode

If you are adding image in the code mode you need to use IMG tag. Please use the code below:

<img src="root_to_the_image_file" alt="image_description"/>

Using the img tag you can add image to any place of your HTML page. There are 2 required tag attributes: src and alt.

SRC attribute contains root to the image file. It can be located on your server or at some other one.

ALT alternative description for the image. The attribute will show text when you hover your mouse cursor over the image. It is required for the page validation.

The path to the image can be relative and absolute. You can learn more about paths checking the tutorial on how to assign links