What is a real world use case for the alt attribute being used in a website?
The alt attribute is typically used for those who don’t read the code in website development. It’s considered alternate information regarding an image that’s on the website. For example, we may reference an image but the alt would give a general context as to what the image is. Such as if we have a smiley face image, we may reference the image with the alt name “smileyFace”. This is also typically very useful for those who may be visually impaired where they are using a screen reader to read out the webpage.
How can you improve accessibility of images in an HTML document?
One way to imrpove accessibility of images inside an HTML document is to ensure that proper semantic naming is used so that anyone who is reading through the code can understand where the image is set. Now if we are talking about ensuring that future users can see these images we want on our webpages. The best practice is to have the image on your own source, and not relying on forwarding to someone else’s site that holds the image as you lose control of that image being there should it’s owner decide to remove it.
Provide an example of when the figure element would be useful in an HTML document.
The figure element is best used when sourcing out the image onto the HTML page, or in a professional sense, to mark up the image, however it is usually used as a blocking system much like body or header to incorporate the image, it is also commonly associated with the figcaption as well that offers a caption to the image as well.
Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community.
Gif also known as Graphics Interchange Format is often chosen for simple images or miniature animations. SVG or more commonly referred to as Scalable Vector Graphics, is a bit more complex it’s often used for interface elements, icons or diagrams. Much like menu buttons on a restaurants website. The gif is the happy chilli pepper dancing on the screen, where the SVG is the 3 line button in the top corner that lets you drop down to a menu.
What image type would you use to display a screenshot on your website and why?
The best choice for this type of image, is an SVG, a lossless webP or more commonly used is a PNG also known as a Portable Network Graphic. They typically offer better quality and compression of source images.
Describe the difference between foreground and background colors of an HTML element, pretend you are talking to someone with no technical knowledge.
Foreground color also just commonly referred to as color typically defines the color used for the displayed text, where as background color is typically used when setting up color behind the element, whether that element is a background color behind an image, or behind the text itself.
Your friend asks you to give his colorless blog website a touch up. How would you use color to give his blog some character?
For a personal flare when it comes to giving a website some color. I would offer a general cream colored background for the entire page, but with elements such as headers and footers give them more of a darker color, but it not be overly bearing like a neutral dark blue. Including images that have their own color scheme will also allow for color to be added without much effort as well.
What should you consider when choosing fonts for an HTML document?
When choosing a font for the website, you have to first decide who the target audiance will be. If it’s meant for younger kids to look at like for a game, then use more cartooney and pop type letters, if it’s meant to show elegance and proper ways to conduct oneself, a more fancy font will do. IF it’s intended for a general audiance then nothing fancy or stylistic will be necessary, most readers will be happy with a basic font so long as the webpage itself doesn’t look boring.
What do font-size, font-weight, and font-style do to HTML text elements?
Font size is just as it sounds, it’s the size the font on the webpage will yield to it’s viewers. The font weight will control how much of an emphasis the font will have on the webpage, will it yield a thick style or a light style. Do you want it to pop or come off hidden? And the font style will typically determine what type of font you want displayed, there’s normal which is just like on any website, there’s italic which will showcase the font in an italic script, and then there’s oblique which is kind of like a happy medium between the two.
Describe two ways you could add spacing around the characters displayed in an h1 element.
Letter spacing and word spacing are typically used here when you want spacing between letters and words in a text. Word spacing as it sounds will allow the developer (that’s you) to assign a set of space between each word used in this h1, where as if you want it to look funky, you can use letter spacing and preset spaces between each letter in each word.
The different ways images work, and i’d like to know more about what images can and cannot have done to them in regards to actions upon user click.
I’d also like to know what more can be done using letter and word spacing and if they hold any significant value when it comes to styling a webpage.