Para adicionar imagens na página, utilizamos o elemento inline <img>.
O elemento img é um elemento self-containing, ou vazio: não envolve outro elemento e existe como uma tag única.
Devemos acrescentar uma source com o atributo src o qual referencia como valor o path ou caminho até a imagem desejada.
Em conjunto com o atributo src, utilizamos o atributo alt (alternative text), que descreve o conteúdo da imagem. O atributo alt é utilizado por mecanismos de busca e tecnologias de assistência de acessibilidade. O texto alternativo será disponível caso a imagem, por alguma razão, não aparece disponível.
<img src="dog.jpg" alt="A black, brown, and white dog wearing a kerchief">
Existem varios tipos de maneiras para apresentar o tamanho de uma imagem de formar a rendenizá-la.
img {
height: 200px;
width: 200px;
}
Utilizar desta maneira a propriedade, força a imagem a se tornar aquele tamanho, o que pode distorcer a imagem. Podemos ainda definir apenas uma propriedade, fazendo com que haja um cálculo para encontrar qual o novo tamanho.
Podemos ainda definir por porcentagem para que quando diminua o tamanho da janela do navegador a imagem seja quebrada.
Utilizando CSS, podemos alterar o posicionamento da imagem, que por padrão vem inline.
Utilizamos então flat, display e as propriedades de box model, como padding, border e margin.
<p>Gatsby is a black, brown, and white hound mix puppy who loves howling at fire trucks and
collecting belly rubs. <img src="dog.jpg" alt="A black, brown, and white dog wearing a kerchief">
Although he spends most of his time sleeping he is also quick to chase any birds who enter his vision.</p>