ReadingNotes

Reading: Images, colro, text

Images

The element tag is used to embed a simple image in a webpage.

Img is a void element which means it cannot have any child content and cannot have an end tag.

Alternative text

Alt is supposed to be a textual description of the image for use in situtations where the image cannot be seen or takes a long time to render because of slow internet connection.

Reasons you need to use alt text: User is visually impaired and is using a screen reader, Spelling of the file or path might be wrong, browser doesnt support the image type and some people still use text only browsers like linux which displays the alt text of images, wanting to provide text for search engines to utilize, and users have turned off images to reduce data transfer volume and distractions.

Common image file types

APNG-Animated portable network graphics-.apng AV1F-AV1 image file format-.avif GIF-Graphics interchange format-.gif JPEG-Joint Photographic Expert group Image-.jpg, .jpeg, .jifif, .pjpeg, .pjp PNG-Portable Network graphics-.png SVG-SCalable Vector graphics-.svg WebP-Web picture format-.webp

HTML QUestions

  1. Screen reader is a real life case for when to use the alt tag.
  2. Add alt text and title if you want your images to be conveyed to all users and this helps people with slow internet
  3. The figure element would be helpful to provide or illustrate an idea of something
  4. Gif is like a moving picture for a example a gif where a man is moving his hand. A svg is just a regular picture.
  5. You’ll use the png file type

Using Color in CSS and Styling html text elements

Color - is the color you use when drawing the tex and any text docorations such as the addition of under- over overlines, striking through lines and so forth

background-color- The texts background color

  1. Foreground color is the color that an element appears in. For example, when a heading is styled to appear green, the foreground color of the heading has been styled. Conversely, when a heading is styled so that its background appears yellow, the background color of the heading has been styled
  2. Add background colors and making his text different colors and adding different images.
  3. Uniformity is something you should consider before choosing a font
  4. You get to pick the font’s color, weight, size, and so on. And all these features make your websites and apps look better and more presentable to the user.
  5. Margin and padding can be used to space out h1 tag.