Class 05 - Images, Color, Text, and More Work With Functions
Statement
This reading section is going a little deeper into describing how we use and manipulate the look and style of an HTML document using CSS.
- What is a real world use case for the alt attribute being used in a website?
- If a user is visually impaired it will be read out to them to describe the image.
- It allows search engines to search your pages.
- In cases where someone needs to use less bandwidth and images are turned off, there is a description of what is shown instead.
- How can you improve accessibility of images in an HTML document?
- By using alt text to succinctly describe the image, not only for the visually impaired but to also reach search engines so that a person can find that information that goes with the image.
- Provide an example of when the figure element would be useful in an HTML document.
- When you have a rather image heavy page with multiple images that all require descriptions and captions, it is best to use the figure element so that each is properly organized.
- Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community.
- GIF images are like moving pictures made of dots, while SVG images are like smart drawings that always stay clear and sharp no matter the size.
- What image type would you use to display a screenshot on your website and why?
- To display a screenshot on a website, the best image type to use would typically be a PNG image. PNG images offer a good balance between image quality and file size, making them suitable for capturing and displaying screenshots. PNG’s give sharp text and graphics, this way any text is visible to the user.
HTML Media
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 foreground color is the color of the text or things you see on a webpage, like the color of the words in an article. The background color is the color that covers the space behind the text or objects. It’s like the color of the “canvas” that everything is placed on. So, foreground color is for the main things you look at, and background color is for the space behind those things.
- 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 start with understanding what his blog is trying to share, so that I can base my colors off of the desired response. Once I had that, I would set a background color, then provide some hierarchy using color and size on the text of the blog. Giving some box areas that have highlights with different colors would be a good start too.
- What should you consider when choosing fonts for an HTML document?
- This is a large answer as so many things need to be considered before choosing a font for a document. Some basics would be the readability, font styles, sizes, weights, pairing for each area of text, making sure they are web-safe fonts, choosing ones that are compatible across browsers, are they accessible for all, possible cultural considerations and checking for consistency throughout the document.
- What do font-size, font-weight, and font-style do to HTML text elements?
- Font-Size: This property controls how big or small the text appears.
- Font-Weight: This property controls how bold or normal the text appears.
- Font-Style: This property controls whether the text is in italics or normal style.
- Describe two ways you could add spacing around the characters displayed in an h1 element.
- Letter spacing, also known as tracking, involves adjusting the space between individual characters in a text element. This can be used to create a more open and stylish look for headings.
- Word spacing involves adjusting the space between words in a text element. This can provide a sense of rhythm and help make longer headings easier to read.
Bookmark and Review
Learn CSS
HTML Media
Things I want to know more about
I would like to take a deeper look into using images and checking for licensing.
Checking Images for licensing