reading-notes

Class 201.05 Friday 14th July 2023

Notes

Q&A’s

Images and font styles are building blocks to making something both readable, accessible and enjoyable.

Readings

Learn HTML

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

    Accessibility features (screen readers can describe the images to low/no sighted people)

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

    You can improve the accessibility of images in an HTML document by using alt text, a descriptive title, and appropriate image formats. You should also avoid using text in images, and use semantic HTML elements to group images with their captions.

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

    The figure element can be used to group an image with its caption or other related content. This can be useful for improving the accessibility of images, as well as for organizing the content of my HTML document.

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

    A gif image is a type of image that is pixelated and can be animated. An svg image is a type of vector image that can be scaled to any size without losing quality (it’s based on math). GIF images are typically used for simple animations, while SVG images are typically used for more complex graphics.

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

    I would use a PNG image to display a screenshot on my website. PNG images are lossless, which means that they retain all of the original image data. This ensures that the screenshot will look as good as possible, even when it is resized or zoomed in.

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 color is the color of the text in an HTML element, while the background color is the color of the area behind the element.

  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 use different colors for the text, background, and links on my friend’s blog to give it some character. I would also use color to highlight important content, such as titles and headings.

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

    When choosing fonts for an HTML document, I would consider the following factors: the purpose of the document, the target audience, and the overall design of the document.

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

    The font-size property controls the size of the text in an HTML element, the font-weight property controls the thickness of the text, and the font-style property controls the style of the text (e.g., italic, bold).

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

    Two ways to add spacing around the characters displayed in an h1 element are to use the letter-spacing property or the word-spacing property.

References

This site is open source. Improve this page.