HTML & CSS

HTML

Chapter 5: Images

Adding 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 closing tag). It must carry the following two attributes:

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

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

  3. 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 tootip when the user hovers over the image.

Where to Place Image in Your Code

  1. Before a paragraph: The paragraph starts on a new line after the image.

  2. Inside the start of a paragraph: The first row of text aligns with the bottom of the image.

  3. In the middle of a paragraph: The image is placed between the words of the paragraph that it appears in.

Example:

IMG IMG

Old Code: Aligning Images Horizontally

  1. left: This aligns the image to the left (allowing text to flow around its right-hand side).

  2. right: This aligns the image to the right (allowing text to flow around its left-hand side).

IMG IMG

Old Code: Aligning Images Vertically

  1. top: This aligns the first line of the surrounding text with the top of the image.

  2. middle: This aligns the first line of the surrounding text with the middle of the image.

  3. bottom: This aligns the first line of the surrounding text with the bottom of the image.

IMG IMG

Cropping Images

IMG

Image Resolution

Vector Images

When an image is a line drawing (such as a logo, illustration, or diagram), designers will often create it in vector format.

Vector formatted images are very different to bitmap images. Vector images are created by placing points on a grid, and drawing lines between those points. A color can then be added to “fill in” the lines that have been created.

The advantage of creating line drawings in vector format is that you can increase the dimensions of the image without affecting the quality of it.

Animated GIFs

Chapter 11: Color

CSS

Understanding Color

Every color on a computer screen is created by mixing amounts of red, green, and blue. To find the color you want, you can use a color picker.

CSS CSS

Contrast

When picking foreground and background colors, it is important to ensure that there is enough contrast for the text to be legible.

CSS

Opacity

Example:

p.one {
background-color: rgb(0,0,0);
opacity: 0.5;}
p.two {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.5);}

CSS

HSL Colors

CSS3 introduces an entirely new and intuitive way to specify colors using hue, saturation, and lightness values.

CSS

Chapter 12: Text

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

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

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

CSS CSS CSS CSS

Specifying Typefaces

font-family

CSS CSS

Units of Type Size

CSS

UpperCase & LowerCase

text-transform

  1. uppercase:This causes the text to appear uppercase.

  2. lowercase: This causes the text to appear lowercase.

  3. capitalize: This causes the first letter of each word to appear capitalized.

CSS

Attribute Selectors

CSS

Article Summary: JPEG vs PNG vs GIF — which image format to use and when?

When to use each image format?

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

Compression

  1. lossless, like PNG and GIF.
  2. lossy, like JPEG.

Transparency

In a simple form, transparency indicates something that is completely invisible. Logos and icons often need to be placed on backgrounds with variable colours. Hence it is desirable, that the background of these logos and icons is made transparent so that a single image can be used over multiple background variations.

  1. JPEG images don’t support transparency and are hence not usable for such cases.

  2. PNG images support transparency.

  3. GIF images support transparency by declaring a single colour in the colour palette as transparent (index transparency).

References:

Main page