reading-notes

HTML and CSS

What is a real world use case for the alt attribute being used in a website?

Alt attributes enable screen readers to read the information about on-page images for the benefit of a person with complete lack of sight, visually impaired, or who is otherwise unable to view the images on the page. Alt text will be displayed in place of an image if an image file cannot load. https://moz.com/learn/seo/alt-text#:~:text=Alt%20attributes%20enable%20screen%20readers,an%20image%20file%20cannot%20load.

How can you improve accessibility of images in an HTML document?

Add alt text and title if you want your images to be conveyed to all users. If the picture is purely decorative, provide at least null alt text (alt=””). Avoid text in images. If it is impossible, make sure that this text is repeated in alt text. https://wishdesk.com/blog/make-images-accessible

Provide an example of when the figure element would be useful in an HTML document.

The

tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc https://www.w3schools.com/tags/tag_figure.asp

Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community.

GIF, just like other image formats, are not resolution-independent, and will therefore look pixelated when scaled up or viewed on higher resolutions. SVG is scalable and resolution-independent, and will look crisp clear on any screen resolution. https://sarasoueidan.com/blog/svg-vs-gif/#:~:text=GIF%2C%20just%20like%20other%20image,clear%20on%20any%20screen%20resolution.

What image type would you use to display a screenshot on your website and why?

PNG: This format is perfect for screenshots and other types of imagery where there’s not a lot of color data. GIF: If you want to show off animated graphics on your site, this is the best image format for you. https://themeisle.com/blog/best-image-format/#:~:text=PNG%3A%20This%20format%20is%20perfect,best%20image%20format%20for%20you.

Describe the difference between foreground and background colors of an HTML element, pretend you are talking to someone with no technical knowledge

foreground may refer to font colors or it is the colors of objects in the screen except the background. Foreground colors(colors which are before background colours) are the colours you see on the screen before the background colours. https://www.sololearn.com/Discuss/2669407/what-is-difference-between-background-color-and-foreground-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?

Use CSS style code

What should you consider when choosing fonts for an HTML document?

cope. The scope of the project or projects in which a font will be used is one of the first things designers should consider when choosing a typeface. Mood. Every project has a mood Functionality. Versatility. Message Readability. Languages. Style

What do font-size, font-weight, and font-style do to HTML text elements?

he font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

Describe two ways you could add spacing around the characters displayed in an h1 element.

To create extra spaces before, after, or in-between your text, use the   (non-breaking space) extended HTML character. If you are pasting text with extra spaces or tabs, you can use the HTML <pre> tag to keep the text formatted.