Reading-Notes

Images:

we can include a logo, photoqraph, diagram or chart to our webpage.
It is a good practise to create folders for all images we will use in our webpage.

Adding Images:

we can adding images using (img) element with tow attributes:
1. src
2. alt
3. title

Height And Width Of images:

Height specifies the height of images in pixels
Width Specifies the width of images in pixels

• We can put the image in three placement:
  1. Before a paragraph
  2. Inside the start of a paragraph
  3. In the middle of a paraqraph

• Aligning Images Horizontally: align attributes used to indcate how the parts of page flow around image (left, right)

• Aligning Images vertically (top, middle, bottom)

• Rules for creating Images:
  1. right format
  2. right size
  3. correct resolutaion
• Edit and Save Image using tools:
  1. Adobe Photoshop
  2. Adobe Fireworks
  3. Paint.net

Images Format:

1. JPEG (when there are differnt colors in picture)
2. GIF & BNG (when there are few colors and small areas of the same color)

Image resolution:

Image should save with 72ppi resolution .

• Animated GIFs : show several frames of an image in sequence and can be used in simple animations

• figure element used to contain images and their caption
• figcaption element to add caption to an image ***************************************

Color

• using color property to make text color in 3 ways:
  1. RGB values ( , , )
  2. Hex codes (#ee3e80)
  3. color names (red blue black …)
• using color-background property to set background color
• mixing amounts of red, green, and blue created color in computer

• HSL color: using HUE, Saturation and Lightness value to specify color

---

## TEXT: #### TypeFace Terminology : 1. Serif 2. Sans-Serif 3. Monospace 4. Weight (Light, Medium, Bold, Black) 5. Style (Normal, Italic, Oblique) 6. Stretch (Regular, Extended)

• font-size property specify the font size in pixels or percentages

• font-weight property to create Bold text or Normal

• font-style property to create italic or normal text

• text-transform property to change the text case : uppercase , lowercase and capitalize

• text-decoration property to specify underline , overline and line-through

• text-align to control the text alignment : left , right or center