Using media in HTML is a really fun part of building a website and making it look nice. In a lot of instances custom images are crucial to communicating a brand image or products that are sold. So learning to integrate them skillfully is extremely important
Alt is used to give textual context to an image. It’s really there to be helpful in terms of accessibility and if someone uses a screen reader then they can understand what image is supposed to be there. It can really help if your image doesn’t load for some reason and it will at least tell people what was supposed to be there.
You can improve the accessibility of images in an HTML by using things like the alt tag as well as thefigcaption tag to let users know what they are looking at. It helps with building the captions for the images as well as improves screen reader accessibility.
The figure element is really helpful when you want to style images or help out with screen readers, this allows you to link the image to the caption and you can also use it to help design your website with CSS. Otherwise your HTML could look a mess.
A Gif image is a good choice for a simple image, it’s often used for simple animations. While a svg image is great for user interface elements, icons, or diagrams that have to be accurate when they are different sizes.
I would use a WebP type for a screenshot so that I can have a good high quality still image and have excellent compression. It is also an incredibly popular image type so there is a really good accessibility with using that as an option.
The difference between foreground and background colors are pretty straightforward. Think about what you want to show up front and have as a primary focus, that is your foreground color. So you want your text to be back against a white background, your foreground is the black color element while the background element is now white.
I would use a combination of contrasting and complementary colors to bring some life and definition to their website. I would use color choices to link similar threads throughout the website and use them consistently to create a colorscheme that goes with their intention. I could make the text fun colors or the borders on things, there is so much you could beautify.
When choosing fonts for an HTML document you want to make sure that you are using a web safe font, thats a font that is commonly used and available to all browsers and will be able to load on someones page without issue. You can use a font-family to ensure that if your first few font’s don’t work then you will keep choosing until you get to one that persons computer has.
Font-Size changes the size of the text as displayed on the page. Often displayed in px or Pixels, other uses are em or rem. Font-weight lets you know how bold the text will be, how heavy it will be on the page. You can use things like light, or normal or bold or use a numeric scale to indicate weight. Font Style is often used to turn on styling of the font like italics or oblique
You could use either letter-spacing or word-spacing to get some room around the characters in your h1 element. Letter spacing will space individual letters while word spacing will keep the words together and then space them apart.