Begin with a statement addressing why this topic matters as it relates to what you are studying in this module.
Images on websites are crucial to give a website life—even the tiny icons in SVG format help navigation. Using correct color contrasts can bring a website to life. Poor colors make content difficult to see and push people away from a website. Small details with color can bring attention to specific areas, such as a call to action button.
Reading
HTML Media
Images in HTML
Using Images In HTML
Common Image Types
Choosing Image Formats
What is a real world use case for the alt attribute being used in a website?
The alt attritubute can be used for screen readers to describe what the image is displaying to a users. It can also be used to assist with SEO.
How can you improve the accessibility of images in an HTML document?
Scaling an image down and using a lightweight file type can assist with low bandwidth connections. Making an image responsive can help with mobile access, and >adding the alt element can assist with screen readers.
Provide an example of when the figure element would be useful in an HTML document.
from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
“Usually a
<figure>is an image, illustration, diagram, code snippet, etc., that is referenced in the main flow of a document, but that can be moved to another part of the document or to an appendix without affecting the main flow.”
Describe the difference between a gif image and an SVG image, pretend you are explaining to an elder in your community.
a GIF image typically is an image that moves for a couple of seconds, then reverts to its starting position so it can move again.
an SVG is an image has the ability to be shrunk down to a tiny icon, stretched to any size, and even placed on a billboard without losing any quality.
What image type would you use to display a screenshot on your website and why?
I would use JPEG format. The JPEG typically has a small file size which can help with load times on mobile devices. Also, normally a screenshot will not require a lot of detail, so a PNG would not be necessary.
Learn CSS
Using Color in CSS Styling HTML Text Elements
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 content. For example, you have often have black text (black is the foreground color) on a white background color.
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 add a light background color to soften the brightness of the page, to make it easier on the eyes. Perhaps a light blue, because blue tends to be a more trust feeling color. I could add black or dark backgrounds to borders around certain elements to make them “pop.” Adding a bright green to any call to action buttons could attract readers’ attention and get them to sign up.
What should you consider when choosing fonts for an HTML document?
You should consider what the web page is being used for. For example, serif fonts are often used on websites for older establishments to give them the old roman look. An example could be banks or schools to give them a feel of age. Sans-serif fonts are good for professional sites but can be accented with a serif font. For example, you could use a san-serif
<H1>and a serif<H2>element to give the site some accented fonts and bring attention to specific areas.
What do font-size, font-weight, and font-style do to HTML text elements?
font size changes the height and width of each character. Font weight adds thickness to characters; for example, a font weight of 700 will create bold text.
Describe two ways you could add spacing around the characters displayed in an h1 element.
To add spacing around characters you can use the letter-spacing property to push characters apart. You can use the line-spacing property to add spacing between lines. You can also use a different font which has extra space between the characters by default.