Reading: Img, Color, Text

Adding images to your website can make or break the appearance. When choosing photos you can use a free sourced photo, purchase, or take your own. When using others photos you need to be careful not to plagiarize.

Adding images to your site

<img> - self closing tag Placing images needs a little thought. Depending where you put the image tag will affect the location of where the image is placed on the page.

Old code to watch for

• align

  Three rules of creating images

  1. Save image in correct format
  2. Save image at the correct size
  3. Measure picture in px

     Savings photos

• if a photo has color it usually is saved as .jpeg
• images with flat colors can be saved as .gif

html

• html 5 introduced a element called <figure> to help contain a image and its caption for styling purposes

Color

When selecting colors there are multiple ways of doing it

• rgb: (100,100,90)
• hex: #ee3e80
• color names: DarkCyan

  color modifications

• hue
• saturation
• brightness when picking colors on your page you want to make sure there is high contrast between colors.

Text

When choosing text keep in mind that easier to read and clean text is important. You should also keep in mind that most browsers will only display the font if the user has it downloaded. CSS does have a selector that allows you to use non downloaded fonts by linking to a site for the page to use, the selector is @font-face {}. Text size can be defined as pixels, percentages, and EMS.

some types of text

• serif
• sans-serif
• monospace
• cursive
• fantasy

Different styles for font

@font-face font-weight font-style text-transformation text-decoration :hover, :activate, :focus