To add an image into the page you need to use an
element. This is an empty element (which means there is no closing tag). It must carry the following two attributes:
- src :This tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site. (Here you can see that the images are in a child folder called images — relative URLs were covered on pages 83-84).
- Where an image is placed in the code will affect how it is displayed. Here are three examples of image placement that produce different results:
- before a paragraph The paragraph starts on a new line after the image.
- inside the start of a paragraph The first row of text aligns with the bottom of the image.
- in the middle of a paragraph The image is placed between the words of the paragraph that it appears in.
- align : The align attribute was commonly used to indicate how the other parts of a page should flow around an image. It has been removed from HTML5 and new websites should use CSS to control the alignment of images.
- Save images in the right format
- Save images at the right size
- Use the correct resolution
The images you use on your website should be saved at the same width and height that you want them to appear on the page. Images created for the web should be saved at a resolution of 72 ppi. The higher the resolution of the image, the larger the size of the file. Vector images differ from bitmap images and are resolution-independent. Vector images are commonly created in programs such as Adobe Illustrator.
- There are several ways to use fonts other than those listed on the previous page. However, typefaces are subject to copyright, so the techniques you can choose from are limited by their respective licenses.
- UpperCase & LowerCase
