Images, Color, Text
HTML Media
Using Images In HTML. Read Common Image Types and Choosing Image Formats
What is a real world use case for the alt attribute being used in a website? the alt attribute is used to describe the image to a search enngine. It helps the search engine understand how relevant the image is. It also allows screen readewrs to read what the image is, which makes the website more accessible.
How can you improve accessibility of images in an HTML document? By using alt text to clearly describe an image, screen readers are able to read what the image contains to the visually impaired.
Provide an example of when the figure element would be useful in an HTML document. If a website had a lot of images with captions, then the <figure> element is a semantic tag that specifically links an igame with its caption. This will make it more accessible to the visually impaired because a screen reader will know that the image and its caption are linked. This is achieved by wrapping the image and it’s <img> and <figcaption><figcaption> tags within opening and closing <figure> tags.
Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community. SVG stands for Scalable Vactor Graphics. This type of image is good for things that may need to be sized very large or very small but still need to maintain their size and scale. For instance, if a company wanted to use their logo and have it be the bullet points for lists, the favicon, or any other sized version, they may choose to use an SVG to maintain continuity and clarity between all of thedirrefent sized versions.
GIF stands for Graphic Interchange Format.It is a good way to have a simple image or animation be compressed, meaning that it takes less memory to store it. There is some loss of clarity, but the tradeoff may be worth it.
What image type would you use to display a screenshot on your website and why? I would use png for my website, because I like vibrant photos and want to use the full array of colors availablem to have precise photos.
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 background is behind an object. Imagine a blank blue wall. Now, imagine that a brown table were placed in front of the blue wall. The wall represents the background, which is blue. The table represents an object in the foreground, and that object is brown.
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 colors to represtent emotion and tailor them to his website. For instance, I would use red to draw one’s eye to calls to action or other elements of the site where he wanted his users to go. This would help guide their vision and lead them through the site. I would use cold colors like green and blue to offset the vibrant red. I would leave whitespace to ensure that the users’ eyes aren’t distracted. I would make sure that there is a good amount opf contrast between text color and background color.
What should you consider when choosing fonts for an HTML document? I would consider the size and readability of the font and whether the font style lent itself to the brand that the website serves. I would consider the contrast of the font to the background.
What do font-size, font-weight, and font-style do to HTML text elements? Font style includes the choice of font, its size, and weight. Font-size is how large or small the font appears. Font wieght is how thick or thin each letter is. Font style inclues things like the typeface that is chosen or whether the font has serifs or is sansserif.
Describe two ways you could add spacing around the characters displayed in an h1 element.
- One could use CSS to affect the text layout styles of the h1 elements, which would affect the space between the characters.
- One could also choose a monospcae font to ensure that all letters and characters occupy the same amount of relative space.