Images, Color, Text

Return to Home

Questions

Why this matters

Keeping out images as accessible as possible for anyone is important because whatever we have displayed on the page we want everyone to be able to understand. Using color and text effectively is important to keep our site attractive and not too distracting.

Using Images In HTML

  1. What is a real world use case for the alt attribute being used in a website? to provide a description if the image doesn’t laod
  2. How can you improve accessibility of images in an HTML document?- adding a title, alt text, and add a caption
  3. Provide an example of when the figure element would be useful in an HTML document. when you want an image and caption to be in the same container.
  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 like one of those moving pictures, and an svg is for the menu and pictures!
  5. What image type would you use to display a screenshot on your website and why? PNG is widely supported and uses lossless compression

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 is the color of the words, and background is the color behind them
  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? finding a base color at first that represents the topic of the site and then using a website like MDN’s color picker to pick a palette that matches.
  3. What should you consider when choosing fonts for an HTML document?- the compatibility with browsers, should always provide a text stack.
  4. What do font-size, font-weight, and font-style do to HTML text elements? font-size changes the size of the font, font-weight sets the boldness of the font.
  5. Describe two ways you could add spacing around the characters displayed in an h1 element. letter-spacing and word-spacing set spacing in their respective category within the element.