reading-notes

HTML Media

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

The alt attribute is an important attribute used in HTML for providing accessibility, improving user experience, complying with legal requirements, and optimizing search engine ranking.

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

Accessibility of images can be improved by use of the alt attribute, providing an accurate description, avoiding the use of decorative images, and using captions and labels.

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 animated image that is made up of a series of still images, while an svg image is a vector graphic that can be scaled to any size without losing quality.

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

A PNG should be used. A PNG (Portable Network Graphics) format supports lossless compression, which means the image quality is not degraded even after multiple saves or edits. Additionally, PNG images can have transparent backgrounds, making it easy to overlay the screenshot on different background colors or images.

Sources

Learn CSS

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

The “background” color is like the color of the wall behind the element. It’s the color that fills up the space behind the text or image. Example: the background color of a regular piece of paper is white.
The “foreground” color is like the color of the pen or paint that’s used to draw or write on the paper. It’s the color that’s used to create the text or image itself. For example, if you write something on a white piece of paper using a black pen, the foreground color is black.

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 typically first choose a color scheme, use color to highlight important elements, and create contract to create an easy-to-read page. I’d be sure to limit the number of colors used in order to avoid overdoing it.

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

You should consider choosing fonts with legibility, compatibility, high contrast, and file size. By keeping these factors in mind, you can choose fonts that enhance the overall user experience of the website.

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

font-size: sets the size of the font for the selected text element. By changing the font size, you can make text larger or smaller and adjust the overall layout of the page.
font-weight: sets the thickness of the font for the selected text element. By changing the font weight, you can make text bolder or thinner
font-style: sets the style of the font for the selected text element. By changing the font style, you can make text appear italicized or slanted.

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

letter-spacing property adjusts the space between characters in text.
padding property adjusts the spacing between the content and the border of an element