Images

There are several things to consider when selecting and preparing images for your site, but taking time to get them right will make it look more attractive and professional. In this chapter you will learn how to:

• nclude an image in your web pages using HTML.
• Pick which image format to use.
• Show an image at the right size.
• Optimize an image for use on the web to make pages load faste.

** Adding Images**

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).

height This specifies the height of the image in pixels. width This specifies the width of the image in pixels.

**_

_** Images often come with captions. HTML5 has introduced a new

element to contain images and their caption so that the two are associated.

1. The element is used to add images to a web page.
2. You must always specify a src attribute to indicate the source of an image and an alt attribute to describe the content of an image.
3. You should save images at the size you will be using them on the web page and in the appropriate format.
4. Photographs are best saved as JPEGs; illustrations or logos that use flat colors are better saved as GIFs.

Color

The color property allows you to specify the color of text inside an element. You can specify any color in CSS in one of three ways:

RGB values

These express colors in terms of how much red, green and blue are used to make it up. For example: rgb(100,100,90)

Hex codes

These are six-digit codes that represent the amount of red, green and blue in a color, preceded by a pound or hash # sign. For example: #ee3e80

color names

There are 147 predefined color names that are recognized by browsers. For example: DarkCyan

• Color not only brings your site to life, but also helps convey the mood and evokes reactions.
• There are three ways to specify colors in CSS: RGB values, hex codes, and color names.
• Color pickers can help you find the color you want.
• It is important to ensure that there is enough contrast between any text and the background color (otherwise people will not be able to read your content).
• CSS3 has introduced an extra value for RGB colors to indicate opacity. It is known as RGBA.
• CSS3 also allows you to specify colors as HSL values, with an optional opacity value. It is known as HSLA.

Text

The properties that allow you to control the appearance of text can be split into two groups:

• Those that directly affect the font and its appearance (including the typeface, whether it is regular, bold or italic,and the size of the text)
• Those that would have the same effect on text no matter what font you were using (including the color of text and the spacing between words and letters)

1. There are properties to control t XX he choice of font, size, weight, style, and spacing.
2. There is a limited choice of fonts that you can assume most people will have installed.
3. If you want to use a wider range of typefaces there are several options, but you need to have the right license to use them.
4. You can control the space between lines of text, individual letters, and words. Text can also be aligned to the left, right, center, or justified. It can also be indented.
5. You can use pseudo-classes to change the style of an element when a user hovers over or clicks on text, or when they have visited a link.