Webmaster
Illustrate your site
Incorporating Images into Web Pages
Whatever format you choose, the integration process of a graphic element stays the same. As you might have guessed, we will rely once more on an HTML tag, <img>. It is used with an attribute, src, the value of which defines the file containing the image to be incorporated. For instance, the following line adds our picture of a plane:
<img src="avion.jpg">
This little piece of code will display an image in your page:
As you will probably have noticed, the <img> tag shows a few similarities with the one used for defining links. And as for links, the address of the image to be displayed can be an absolute address (of the form http://www.site.com/image.jpg) or a relative address (of the form images/image.jpg).
The last piece of information: all HTML tags can be combined. This means you are allowed to create a link based on an image. The resulting code will be as follows:
<a href="page.html"><img src"avion.jpg"></a>
The <img> tag has numerous attributes which enable you to customise the display of images. Here is a brief summary. If you want to know more about this topic, check out our HTML workshops.
It is now time to publish your site on Internet!
Whatever format you choose, the integration process of a graphic element stays the same. As you might have guessed, we will rely once more on an HTML tag, <img>. It is used with an attribute, src, the value of which defines the file containing the image to be incorporated. For instance, the following line adds our picture of a plane:
<img src="avion.jpg">
This little piece of code will display an image in your page:
As you will probably have noticed, the <img> tag shows a few similarities with the one used for defining links. And as for links, the address of the image to be displayed can be an absolute address (of the form http://www.site.com/image.jpg) or a relative address (of the form images/image.jpg).
The last piece of information: all HTML tags can be combined. This means you are allowed to create a link based on an image. The resulting code will be as follows:
<a href="page.html"><img src"avion.jpg"></a>
The <img> tag has numerous attributes which enable you to customise the display of images. Here is a brief summary. If you want to know more about this topic, check out our HTML workshops.
| Attribute | Description |
| src | Name of the image file |
| width | Image width |
| height | Image height |
| alt | Comment |
| hspace | Horizontal image margin |
| vspace | Vertical image margin |
| align | Text alignment relative to the image |
It is now time to publish your site on Internet!