Using Images In HTML.
Read Common Image Types and Choosing Image Formats.
The alt attribute is meant to describt the image it is paired with. Being explicit with the alt is paramont to it’s true purpose. If the image doesn’t show up, if there is a screen reader, if images are turned off to save bandwith or lessen distractions, or as keywords for the SEO to utilize; these are all reasons why it’s helpful to have a well worded alt for ones image.
By using the alt tag to give textual descriptions of the image, also by providing a title tag.
The figure element is providing a container for all the accoutrement that is associated with the image, including but not limited to img, scr, alt, demensions, and figcaption. It keeps eerything grouped together so even if the image doesn’t show up there will still be description and caption kept together and not wandering around the website all willy nilly.
The difference between the two starts with how they are created/stored. ‘Scalable Vector Graphics’ is a way to create an image through using mathmatical equations in the code. While that does make it easily scalable, without loss of quality to said image, it does make it slightly less versatile in use and creation. Also, it can’t be used with pictures. While gif’s on the other hand (standing for Graphics Interchange Format) only uses photographs. It flips through a set of images in order to create a short animation, sort of like a flip book. With that being said, it does make the file bulky and practically unscalable.
Lossless WebP or PNG. I’m not gonna lie, 90% of this article makes no sense to me. It has something to do with what is lost while compressed, and I understand the less loss there is to compress the higher the retention of the quality which matters most regarding text, which can become blurry if the quality falls low enough.
Using Color in CSS. Styling HTML Text Elements
I would probably just use two different colored pieces of paper and show them that one represensts the back ground, while the other is what has all the elements on it which would be the foreground. They lay on top of each other or you can move the foreground around, but it will always be the one in front and overtop the back ground.
Probably with a simple back ground color, maybe picking a sightly contrasting darker neutral color for the text. Just enough to give the site a bit of flair without taking away from the actual content.
Depending on what the document it for, it’s important to find a font that would be suitable, and legiable. If you were chosing a font for an important legal document, you probably wouldn’t pick wing-dings. Something else to consider is weather it is a supported font of the browsers it will be viewed on.
Font-size specifies how small or large the letters will be, measured in px, em, or rem. Font-weight refers to how thick the letters are or how bold they appear, measured in normal/bold, lighter/bolder, or 100/900. Font-style basically just makes it so the text is either italicized or not.
Letter-spacing or word-spacing would do the trick.