reading-notes

Class 5 - Images, Color, Text

HTML Media

  1. What is a real world use case for the alt attribute being used in a website?
    • For the visually impaired, the website will read alt text if using a screen reader.
  2. How can you improve accessibility of images in an HTML document?
    • Give your image alt text with a description of the image and title text to provide further supporting information.
  3. Provide an example of when the figure element would be useful in an HTML document.
    • To give semantic value to a section containing an image or figure.
  4. Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community.
    • A GIF is a moving image or animation, while a SVG files are text files that contain source code that draw the image and can be scaled.
  5. What image type would you use to display a screenshot on your website and why?
    • PNG because it is a “lossless” format that will prevent text from becoming fuzzy or unclear.

Using Color in CSS & Styling HTML Text Elements

  1. Describe the difference between foreground and background colors of an HTML element, pretend you are talking to someone with no technical knowledge.
    • Foreground color can be used for text and will appear in front of the background. Background color will appear behind the foreground color.
  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?
    • Use contrasting colors to make certain elements “pop” and stand out.
  3. What should you consider when choosing fonts for an HTML document?
    • Accessibility; some people may not be able to differentiate between certain colors due to color blindness.
  4. What do font-size, font-weight, and font-style do to HTML text elements?
    • font-size changes the size of the text, font-weight changes the boldness of the text, and font-style can make the text italic or oblique.
  5. Describe two ways you could add spacing around the characters displayed in an h1 element.
    • letter-spacing will change the space around each character, and line-height will change the space between lines of text.