TechEducationClone

Images, Colour and Text

Reading

Common Image Types Choosing Image Formats Using Color in CSS Styling HTML Text Elements

Q&A

HTML

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

    it is used by screen readers when the image cannot be ‘seen’, also if a picture cannot load it says what should be seen.

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

    by adding an alt tags

  3. Provide an example of when the figure element would be useful in an HTML document.

    an image gallery

  4. Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community.

    gif’s are moving images svg stretches to any size without losing quality and can be loaded quickly

  5. What image type would you use to display a screenshot on your website and why?

    PNG as this format is perfect for screenshots and other types of imagery where there’s not a lot of color data.

CSS

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

    background referes to the ‘wall’ of the page. Everything else is on top. Just like in a house you can have many walls and can make statement sections. You will not be able to see anything ‘behind’ the wall only what is on top of it. foreground is the main object on top of the background. for instance a framed photo on a wall.

  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?

    I would add a background colour that is in keeping with his page, I could also add some colours to his headders and other main text. Adding colours to links and other navigation elements.

  3. What should you consider when choosing fonts for an HTML document?

    the versions of fonts you want to have such as its weight and style.

  4. What do font-size, font-weight, and font-style do to HTML text elements?

    font-size: changes the hight of letters font-weight: the width of the letters font-style: changes the style eg italic/normal/bold

  5. Describe two ways you could add spacing around the characters displayed in an h1 element.

    use letter-spacing or word-spacing in h1 element in css