Daily Reading 5
What is a real world use case for the alt attribute being used in a website?
Alt text is considered for a website’s Search Engine Optimization values, so providing accurate and useful alt text to images will help with that, in addition to being useful for anyone unable to see, or load properly, the image.
How can you improve accessibility of images in an HTML document?
Captions are intended for people who can already see an image, and is added through <figcaption>. Alt text is for people who cannot see the image, and so the two should be distinct from each other.
Provide an example of when the figure element would be useful in an HTML document.
A small portrait of George Washington with a label stating their name, on a website about the history of the United States.
Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community.
A gif almost always moves, but looks ugly up close. an SVG can also move, but it’s less common. It also looks “perfect” no matter what size you make it.
What image type would you use to display a screenshot on your website and why?
PNG, as it keeps images sharp and true to their source, which is good for screenshots where small text may be important.
I would NOT use WebP because I have had lots of trouble with the format being randomly unsupported by browsers, image viewers, and even operating systems. Hate it.
Describe the difference between foreground and background colors of an HTML element, pretend you are talking to someone with no technical knowledge.
Changing foreground color makes the text change color, Changing background color changes the color of the paper the text is on.
Your friend asks you to give his colorless blog website a touch up. How would you use color to give his blog some character?
Selection of meaningful colors based on the conceptual content of the blog, maybe a calm ocean blue if it’s about sea creatures? Maybe follow my lead and have the subtlety of a Stonewall brick by using a pride flag’s colors? Whatever you do, make sure there’s a good amount of contrast present in the design. Text needs to be readable, above all else.
What should you consider when choosing fonts for an HTML document?
Importance of the particular body of text you are choosing a font for. Bigger and bolder and maybe fancier (even at the expense of SOME readability) for things like titles, while a focus on clear and easy to read fonts for long essays and main bodies of an article.
What do font-size, font-weight, and font-style do to HTML text elements?
font-size changes, well, the size of the text, as a whole. font-weight chooses the “boldness” of the text. I imagine you know what bold refers to. font-style covers a lot of different aspects of text, but some of them include the size of the kerning, whether lowercase letters are displayed as capital letters but smaller, and applying alternative versions of fonts, where applicable.
Describe two ways you could add spacing around the characters displayed in an h1 element.
Set letter-spacing: to non normal values to manually space out individual characters from each other.
Set font-kerning: none to make specific letters with overlapping horizontal clearance to instead have full personal horizontal clearance.