Code 201 Class 5 Reading Notes

Images

To add an image into the page you need to use an <img> element. This is an empty element (which means there is no slocing tag). It must carry the following two attributes:

• src This tells the browaswer where it can find the image file. This will usually be a relative URL point to an image on your own site.

• alt This provides a text description of the image which describes the image if you cannot see it.

• title You can also use the title attribute with the <img> element to provide additional information about the image. Most browsers will display the content of this attribute in a tooltip when the user hovers over the image.

You can adjust the height and width of images by specifying how man pixels on each setting.

An image can be placed:

1) before a paragraph

2) Inside the start of a paragraph

3) I the middle of a paragraph

4) Align to the left of a paragraph

5) Align to the right of the paragraph

You Should save images at the size you will be using them on the web page and in the appropriate format.

Color

CSS3: HSL Colors

CSS3 introduces an entirely new and intuitive way to specify colors usin hur, saturation, and lightness values

Hue - Is the colloquial idea of color. In HSL Colors, hue is often represented as a color circle where the angle represents the color, although it may also be shown as a slided with values from 0 too 360. Saturation - is the amount of gray in a color. Saturation is represented as a percentage. 100% is full saturation and 0% is a shade of gray. Lightness - Is the amount of white (lightness) or black (darkness) in a color Lightness is represented as a percentage. 0% lightness is black, 100% lightness is white, and 50% lightness is norma. Lightness is sometimes referred to as luminosity.

Font

Responding to Users:

• :hover - This is applied when a user hovers over an element with a pointing device such as a mouse.

• :active - This is applied when an element is being activated by a user; for example, when a button is being pressed or a link being clicked.

• :focus - This is applied when an element has focus. Any element that you can interact with, such as a link you can click on or any form control can have focus.

USE JPEG format for all images that contain a natural scene or photograph where variation in colour and intensity is smooth. Use PNG format for any image that needs trasnparency or for images with text & objects with sharp contrast edges like logos. Use GIF format for images that contatain animations.

<—BACK