What is a real-world use case for the alt attribute being used in a website?
The alt attribute in HTML is used to provide alternative text for an image. A real-world use case would be for accessibility. When a website visitor is visually impaired or the image fails to load, the alternative text provides a description of the image, ensuring that all users can understand the content.
How can you improve accessibility of images in an HTML document?
To improve accessibility, you can: Use the alt attribute to describe images. Provide descriptive captions or labels for complex images using the figcaption element.
Provide an example of when the figure element would be useful in an HTML document.
The <figure> element is useful when you want to associate an image or multimedia content with a caption or description. For example, you could use it to display a photo with a caption, an embedded video with a description, or a diagram with an explanation.
Describe the difference between a gif image and an svg image, pretending to explain to an elder in your community.
A GIF image is like a flipbook; it’s a sequence of pictures that create a simple animation, like a cartoon. It’s good for things like funny moving pictures or small animations on a webpage. SVG is more like a digital drawing. It’s made of lines and shapes, and it can be scaled up or down without getting blurry. It’s great for logos and icons because they stay sharp no matter how big or small they are.
What image type would you use to display a screenshot on your website and why?
For screenshots, you’d typically use PNG or JPEG image formats. JPEG is better for photographs, while PNG is better for images with sharp edges and text.
Describe the difference between foreground and background colors of an HTML element, pretending to talk to someone with no technical knowledge.
The foreground color is like the ink on a page; it’s the color of the text or the main content. The background color is like the paper the ink is on; it’s the color behind the text or content.
Your friend asks you to give his colorless blog website a touch up. How would you use color to give his blog some character?
To add character, you could change the text and background colors, choose a color scheme that matches the blog’s topic, and use colors for headings, links, and other elements to create visual interest.
What should you consider when choosing fonts for an HTML document?
Consider readability, compatibility with different devices, and the style you want to convey. It’s essential to pick fonts that are easy to read on screens and look good in the context of your website’s design.
What do font-size, font-weight, and font-style do to HTML text elements?
font-size controls the text’s size, making it bigger or smaller. font-weight adjusts the thickness of the text, making it bold or regular. font-style changes the style of the text, making it italic or normal.
Describe two ways you could add spacing around the characters displayed in an h1 element.
To add spacing around the characters in an h1 element, you can use CSS properties. One way is by adjusting the margins using the margin property, which creates space around the h1 element. For example, margin: 20px; adds 20 pixels of spacing on all sides of the h1 element, creating equal spacing. Another option is to use the padding property, which adds space within the h1 element itself. For instance, padding: 10px; pushes the text away from the element’s border, effectively adding space around the characters in the h1 element.
-ways to make website accessible -fun ways to display images