5 Images

Question 1

Add an image

Have text when the image is missing and for screenreaders

Answer 1

&ltimg>

src attribute to point to the image location

alt attribute to provide text that describes the image (if image is just decoration leave empty text)

Question 2

Have a title for an image (text that will show up when you highlight it

Answer 2

title=”title”

Question 3

Set height and width of image (HTML)

Answer 3

height
width
( but images sizes is generally a CSS thing)

Question 4

Make sure the space for the image is there for an image before the image is done loading (HTML)

Answer 4

height
width
( but images sizes is generally a CSS thing)

Question 5

What does an image look like when you put it before the &ltp> tag, inside it at the beginning, or inside it in the middle

Answer 5

Img is an inline element.

Before, it’s above

In at beginning, on the same line as the text, text at bottom of image.

inside in middle, pushes line above up
(try it out to see)

Question 6

Name some Block elements

Answer 6

div
p
h
more: https://www.w3schools.com/html/html_blocks.asp

Question 7

Difference between block and inline element

Answer 7

Block elements always start on a newline

Inline elements do not

Question 8

If an image is inline with a paragraph, make it go to the left or right and make text flow above and below it (with HTML, but don’t use it)

Answer 8

align attribute
it can be left or right
(don’t use this, use CSS. Just understand this for older code)

Question 9

If an image is inline with a paragraph, make it go to the up, down or middle of the line it is in

Answer 9

align attribute
it can be top, middle, bottom
(don’t use this, use CSS. Just understand this for older code)

Question 10

What format should web images be?

Answer 10

png, gif, jpeg

Question 11

How big should images be (bigger than they appear?)

What px/inch should you assume

Answer 11

Should be the same size as they appear for optimal load times

Also take care of resolution. 72 px/inch

Question 12

When should you use gif, png or jpeg?

Also in terms of transparency

Answer 12

jpeg for photos and images with lots of colours
GIF and png for fewer colours (like simple vector images and logos)

Gif alpha is only 1 or 0. Not good for rounded edges or translucency.
png alpha a range but png transparency not compatible with IE6
jpeg no alpha

Question 13

what format for vector images?

Answer 13

svg

or canvas elements (make a vector from a rastor)

Question 14

Make images a part of a figure, give caption

Answer 14

figure block element
&ltfigure>
Insret the image
Add the figcaption element
(nestable but maybe that's pointless)