# Read 05 - Readings: Images, Color, Text

## Answers

### HTML Media

1. What is a real world use case for the alt attribute being used in a website?

  - Alt specifies an alternate text for an image, if the image cannot be displayed. It provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

2. How can you improve accessibility of images in an HTML document?

   - By providing titles and alt attributes.
  
3. Provide an example of when the figure element would be useful in an HTML document.

   -  The < figure > tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. We should use this as it provides a semantic meaning to captions for images, diagram, video and so on, which will help the search engine to find these images.
  
4. Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community.

   - A gif moves, an svg is static but can be made bigger or smaller easily.
  
5. What image type would you use to display a screenshot on your website and why?

   - A PNG would be best as it is lossless, which means it retains all of the data contained in the file during the compression process. This is important when you have images that need resizing several times or require multiple rounds of edits
  
### Learn CSS

1. Describe the difference between foreground and background colors of an HTML element, pretend you are talking to someone with no technical knowledge.

   - The foreground colours (color) relates to anything in the foregraound of that element, such as text or anything you want to put inside the element.
   - Background is background is background.
  
2. Your friend asks you to give his colorless blog website a touch up. How would you use color to give his blog some character?

   - A subtle background colour on the body with a gradient, meaning it is still readable but not boring. A bold header background color.
  
3. What should you consider when choosing fonts for an HTML document?

   - Readability and accessability for the users. How easy it is to read and whether the colours clash.
  
4. What do font-size, font-weight, and font-style do to HTML text elements?

   - Font-size affects the size of the font, font-weight affects how light or bold the font looks, and font-style changes the actual style of the font (sans-serif, etc ).
  
5. Describe two ways you could add spacing around the characters displayed in an h1 element.

   - By using the the < letter-spacing > (horizontal space between text characters) and < word-spacing > (white space between words) properties.