Adding some more style to our websites.
What is a real world use case for the alt attribute being used in a website?
Perhaps you want search engines to find your images
How can you improve accessibility of images in an HTML document?
By providing an alt tag description’s that are useful. Concise. Avoid redundant information that is already in the main text
Provide an example of when the figure element would be useful in an HTML document.
This is useful when you want to connect other information to an image. A caption would be a common example.
Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community.
gifimages can be static pictures, but also really simple animations… like what your grandkid sends on your phone when they react to your text message.svgfiles can’t do animation and are even simpler. They’re usually just simple shapes stuck together to create something more complicated like a diagram. They’re useful because they can be resize to scale easily to fit where you want them on your webpage without becoming distorted.
What image type would you use to display a screenshot on your website and why?
I would choose a jpeg since I’m assuming that I don’t need a very precise image and this is well supported.
Describe the difference between foreground and background colors of an HTML element, pretend you are talking to someone with no technical knowledge.
Background color is the color of the screen whereas foreground color is the color of the text.
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 the CSS properties
background colorandcolor.
What should you consider when choosing fonts for an HTML document?
Readability and browser support. Using
font-familyis a good way to play if safe by providing more broadly accepted back up options of the first choice or two isn’t supported.
What do font-size, font-weight, and font-style do to HTML text elements?
font-sizesets the size of the font (either relative to the parent element or with pixels).font-weightallows you to adjust the boldness of a text.font-styleallows you to apply (or turn off) italics (or oblique).
Describe two ways you could add spacing around the characters displayed in an h1 element.
You can use the
letter-spacingproperty for a lot of control over spacing or use thefont-kerningproperty to disable kerning for a less significant change (they will be spaced out slightly more so that no letters don’t overlap each others’ space.)
Looks like CSS can offer a lot more control than I realized.