reading-notes

Reading 5 - Images, Color, Text

HTML Media

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

Source

• The alt attribute is used in case an image cannot be displayed due to slow internet.

• It might also be used by a visually-impaired user who cannot see the image.

• In case the link to the image is mispelled or broken.

• In case the browser being used doesn’t support the image type (ex Lynx)

• For the text to be picked up by search engines (Search Engine Optimization)

• In case the user has images turned off, especially for users with slow internet

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

Source

Add meaningful alt tags

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

Source

A figure element can be used for images, as well any self-contained content such as as diagrams

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

Source

A gif image is a short, repeating moving image like an animation or a silent video clip.

A svg image is a type of image that you can make bigger or smaller and it won’t lose its quality. This type is used for logos and diagrams where the quality is very important.

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

Source

PNG is best as it doesn’t get fuzzy as easily as JPEG. A JPEG might lose the ability to read the text in the image.

Learn CSS

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

Source

The foreground colors are used in the words that you read on the screen. The background colors are what is behind the words.

Q7 Your friend asks you to give his colorless blog website a touch up. How would you use color to give his blog some character?

Source

I would give all elements used in the site colors. I like to use a site like this one to find or create a color palette that I like. I then try to choose dark colors for background and lighter color for foreground elements (or vice versa) to make sure they stand out. You can also upload an image to pull colors from if there is a specific theme you want to use.

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

Source

When choosing fonts, it is important to choose fonts that are web-safe (available for all commonly-used browsers). It’s also important to consider Font style, font weight, text transform, and text decoration. The fonts chosen should convey the style you are going for, and more importantly be readable on any device.

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

Source

• Font-size determines how large the text elements are.

• Font-weight determines how thick (bold) the lettering is.

• Font-style determines if italics (slant) are turned on or off.

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

Source

Source

Source

Two ways to add spacing around characters are:

• letter-spacing: This sets the spacing between letters.

• word-spacing: This sets the spacing between words.

Things I want to know more about

• The figure element. This is one that I have not used before.

• Font choices. I know there is a lot to know here and people have pretty strong opinions, but I don’t know much about this area at all.