Reading notes - 05
Todays topic is important because when we’re developing web pages we need to create them in a way that meets the users expectations. By this I mean, using text that is easy to read, font styles that flow well with each other, and colors that break up a plain background while not being so loud that they distract from the message trying to be conveyed on the webpage.
1. What is a real world use case for the alt attribute being used in a website?
- You would use the
alt attribute to help with search engine optimization, visually impaired screen readers, to convey the meaning of the image in case the link breaks, or if you want your page to be accessible by persons with low bandwidth restrictions.
2. How can you improve accessibility of images in an HTML document?
- Make sure to have clear and concise descriptions of the image so that if it doesn’t load the reader can still understand what it was supposed to convey and how it’s relative to the rest of the article.
- The
figure element is extremely useful when creating a page with many images. By using this element, we are able to also use the figcaption element to provide a description between the image and its description. figure can then be used for each image to keep descriptions ”assigned” to the correct image. This aids in increasing the accessibility of the page.
4. Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community.
- A Gif is simply the file type that you typically see when your granddaughter sends you a short, looped, pixelated video of cat’s blowing hearts. An Svg file is just a type of file that remains detailed and to scale no matter if you make it larger or smaller. You’re likely to see it when viewing a blueprint on your phone of how to build a she-shed.
5. What image type would you use to display a screenshot on your website and why?
- I would use an svg file due to the possibility of my website being viewed on different screen sizes from monitors to phones. Using an svg file type would allow the image to remain clear and accurate at either end of the scale.
Learn CSS
Using Color in CSS. Styling HTML Text Elements
1. Describe the difference between foreground and background colors of an HTML element, pretend you are talking to someone with no technical knowledge.
- Foreground colors are used to change the text coloring or any textual additions, basically anything at the text level. Background colors are used to change the space behind the text. This is white in its unedited state, but it can be changed to compliment the textual color if desired.
2. Your friend asks you to give his colorless blog website a touch up. How would you use color to give his blog some character?
- Depending on what he has in mind, I could either make the entire background a solid color, patterned, or a fade. I could also give his foreground (text) a different color to contrast the background and provide some eye pizazz. I could also make boxes and change the background color or pattern in those individual boxes if that was what my friend wanted.
3. What should you consider when choosing fonts for an HTML document?
- Make sure they’re easily readable, make sure they’re considered “web safe fonts” and able to be displayed by all standard web browsers, remain consistent when using fonts across your page, and make sure that the fonts chosen are able to be used with screen readers.
4. What do font-size, font-weight, and font-style do to HTML text elements?
- Font size is used to increase or decrease the rendered font size, described in pixels.
- Font weight is used to set the amount of boldness the font is given. This can be given a name value such as light or bold, or given a pixel value from 100-900.
- Font style is used to set text to italicized or standard.
5. Describe two ways you could add spacing around the characters displayed in an h1 element.
- In order to add spacing around characters within the h1 element you can use either padding or margin to accomplish this.
Things I want to know more about
Everything for this reading journal made sense. I don’t have any questions I’d like to know more about at this time.