reading-notes

HTML Media

Using Images in HTML, Read Common Image Types and Choosing Image Formats

• <img> elements are void elements. This means they cannot have any child content and cannot have an end tag. These require two attributes to be useful: src and alt
  • src contains a URL pointing to the image you want to embed in the page
  • alt is supposed to be a textual description of the image for situations where the image cannot be seen/displayed

1. What is a real world use case for the alt attribute being used in a website?
   • Screen readers
   • slow internet connections
   • browser doesn’t support img type
   • search engine searchable text
   • images have been turned off to reduce data xfer volume
2. How can you improve accessibility of images in an HTML document?
   • Use great alt text
   • Don’t use alt titles as they can have weird outcomes for screen readers
3. Provide an example of when the figure element would be useful in an HTML document.
   • the figure element is meant provide a semantic container for figures (ie: images) and to clearly link the figure to the caption.
4. Describe the difference between a gif image and an svg image, pretend you are explaining to an elder in your community.
   • gif: Graphics Interchange Format; Simple images and animations.
   • svg: Scalable Vector Graphics; Vector image format; ideal for user interface elements, icons, diagrams, etc., that must be drawn accurately at different sizes.
5. What image type would you use to display a screenshot on your website and why?
   • I would use a PNG as more precise reproduction is preferred and browser support is pretty wide

Learn CSS

Using Color in CSS. Styling HTML Text Elements

1. Describe the difference between foreground and background colors of an HTML element, pretend you are talking to someone with no technical knowledge.
   • The background-color of an HTML document is the color that is literally in the background of everything on the page, thing of it like the primer and base coat of paint on a wall. We might hang pictures and posters and put up shelves but you are still going to see the background color
   • The color property defines the foreground color and this is typically the text
2. Your friend asks you to give his colorless blog website a touch up. How would you use color to give his blog some character?
   • Accents, highlights, background color, text color, modifying body/header/p/headers, font
3. What should you consider when choosing fonts for an HTML document?
   • Are they web safe fonts
   • These are fonts that are generally available across all systems and can therefor be rendered most all the time
4. What do font-size, font-weight, and font-style do to HTML text elements?
   • font-size changes the size of the font
   • font-weight sets the boldness of the font
     • lighter, bolder; sets the current elements boldness to be one step lighter or heavier than its parent element’s boldness.
     • 100 - 900; numeric boldness values that provide finer grained control
   • font-style turns italic text on or off
     • oblique simulates italics by slanting the normal version of the text
5. Describe two ways you could add spacing around the characters displayed in an h1 element.
   • Is this a question about padding and margin or about actual character spacing and white space?
     • padding and margin can create space around the entire h1 element
     • letter-spacing and word-spacing create space between the letters and the words themselves