Read: 05 - Images, Color, Text

Readings: Images, Color, Text

HTML Media

What is a real world use case for the alt attribute being used in a website? The user is visually impaired, and is using a screen reader to read the web out to them. In fact, having alt text available to describe images is useful to most users. As described above, the spelling of the file or path name might be wrong. The browser doesn’t support the image type. Some people still use text-only browsers, such as Lynx, which displays the alt text of images. You may want to provide text for search engines to utilize; for example, search engines can match alt text with search queries. Users have turned off images to reduce data transfer volume and distractions. This is especially common on mobile phones, and in countries where bandwidth is limited or expensive. How can you improve accessibility of images in an HTML document? Add supporting details and add more information or you can add an “” tag to have a link for the image. Provide an example of when the figure element would be useful in an HTML document. Usually a

is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow. A caption can be associated with the

element by inserting a <figcaption> inside it (as the first or the last child). The first <figcaption> element found in the figure is presented as the figure’s caption. Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community. GIF supports simple animation, in which following an initial full-size frame, a series of images reflecting the parts of the image that change with each frame are provided. GIF has been extremely popular for decades, due to its simplicity and compatibility. Its animation support caused a resurgence in its popularity in the social media era, when animated GIFs began to be widely used for short “videos”, memes, and other simple animation sequences. SVG is an ideal choice for images which can be represented using a series of drawing commands, especially if the size at which the image will be rendered is unknown or may vary, since SVG will smoothly scale to the desired size. It’s not generally useful for strictly bitmap or photographic images, although it is possible to include bitmap images within an SVG. What image type would you use to display a screenshot on your website and why? I would choose to use a jpeg or png for a screenshot because there could be small text in the screenshot and a lower resolution file would blur out the text jpef and png old that resolution and low the text to be easily viewable.

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 to use in areas of the element that have no foreground content. Foreground colors is things such as text and borders. Your friend asks you to give his colorless blog website a touch up. How would you use color to give his blog some character? Font styles, text layout styles, add color, background-colors, decoration, add color to the borders, change font styles. What should you consider when choosing fonts for an HTML document? color, text decoration, font-family, web safe fonts, default fonts, font stacks, font size, font-weight, text-transform, text-decorations-styles, text-decoration-color, text-shadows, multiple shadows, text alignment, line-height, font-size, letter-spacing, word-spacing, etc. What do font-size, font-weight, and font-style do to HTML text elements? Font size adjust the size of your selected font, font weight adjusts how bold you text is, font-style adjusts properties that affect a text’s font, e.g., which font gets applied, its size, and whether it’s bold, italic, etc. Describe two ways you could add spacing around the characters displayed in an h1 element. I would use letter spacing and word spacing to increase or decrease the space between my text or font on my web page.